feat: website config start

src/components/BaseForm/index.js

@@ -20,8 +20,8 @@ export const renderButtonGroup = props => {
 };
 
 export const BaseFormItem = itemOption => {
-  const { type, ...rest } = itemOption;
-  switch (type) {
+  const { formType, ...rest } = itemOption;
+  switch (formType) {
     case 'input':
       // eslint-disable-next-line no-undef
       return <Input allowClear {...rest} />;

src/pages/webConfig/components/siteConfigDrawer.js

+import React from 'react';
+import { Button, Drawer } from 'antd';
+import styles from './siteConfigDrawer.less';
+import BaseForm from '@/components/BaseForm';
+
+let form = null;
+
+const defaultKeyMap = {
+  title: {
+    label: '标题',
+    formType: 'input',
+    allowClear: true,
+    placeholder: '请输入标题',
+    rules: [
+      {
+        required: true,
+        message: '标题为必填项',
+      },
+    ],
+  },
+  subtitle: {
+    label: '副标题',
+    formType: 'input',
+    allowClear: true,
+  },
+  shortcutIcon: {
+    label: '图标icon',
+    formType: 'image',
+    rules: [
+      {
+        required: true,
+        message: '请选择图标icon',
+      },
+    ],
+  },
+  logo: {
+    label: '登录logo',
+    formType: 'image',
+    rules: [
+      {
+        required: true,
+        message: '请选择登录logo',
+      },
+    ],
+  },
+  bannerlogo: {
+    label: '标题logo',
+    formType: 'image',
+    rules: [
+      {
+        required: true,
+        message: '请选择标题logo',
+      },
+    ],
+  },
+  client: {
+    label: '虚拟目录',
+    formType: 'input',
+    allowClear: true,
+    size: 'small',
+    rules: [
+      {
+        required: true,
+        message: '虚拟目录不能为空',
+      },
+    ],
+  },
+  homePage: {
+    label: '主页',
+    formType: 'input',
+    allowClear: true,
+  },
+  loginTemplate: {
+    label: '登录模板',
+    formType: 'select',
+    placeholder: '请选择登录模板',
+    filterOption: (input, option) =>
+      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+    rules: [
+      {
+        required: true,
+        message: '登录模板必填',
+      },
+    ],
+  },
+  theme: {
+    label: '系统皮肤',
+    formType: 'singleRadio',
+    rules: [
+      {
+        required: true,
+        message: '请选择系统皮肤',
+      },
+    ],
+  },
+  style: '系统风格',
+  menu: '菜单类型',
+  mode: '功能标签',
+  qrcode: '二维码地址',
+  mapPlan: '地图方案',
+  waterMark: '地图水印',
+};
+
+export default props => {
+  const { visible, onClose, config } = props;
+
+  const getForm = f => {
+    form = f;
+  };
+  const adaptConfig = conf => {};
+  const formConfig = {
+    getForm,
+    items: [
+      {
+        label: '标题',
+        dataIndex: 'title',
+        initialValue: '',
+        rules: [],
+      },
+    ],
+  };
+  return (
+    <div className={styles.siteConfigContainer}>
+      <Drawer
+        title="Multi-level drawer"
+        width={520}
+        closable
+        onClose={onClose}
+        visible={visible}
+      >
+        <BaseForm {...formConfig} />
+      </Drawer>
+    </div>
+  );
+};

src/pages/webConfig/componets/siteConfig.js

-import React from 'react';
-import { Button } from 'antd';
-import styles from './siteConfig.less';
-import PreviewConfigDrawer from '@/components/PreviewConfigDrawer';
-import BaseForm from '@/components/BaseForm';
-
-export default props => {
-  const { visible, setVisible } = props;
-  return (
-    <div className={styles.siteConfigContainer}>
-      <PreviewConfigDrawer
-        visible={visible}
-        setVisible={setVisible}
-        drawerProps={
-          {
-            // maskStyle: { opacity: 0.6 },
-          }
-        }
-        previewContent={
-          <Button onClick={() => setVisible(true)}>打开配置</Button>
-        }
-      >
-        <BaseForm />
-      </PreviewConfigDrawer>
-    </div>
-  );
-};

src/pages/webConfig/index.js

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Tabs } from 'antd';
-import menuTree from '@/services/mocks/web4site';
+import menuTreeMock from '@/services/mocks/web4site';
 import styles from './index.less';
-import SiteConfig from './componets/siteConfig';
+import SiteConfig from './components/siteConfigDrawer';
 const { TabPane } = Tabs;
 
+const getMenuTree = () =>
+  new Promise((r, j) => {
+    setTimeout(() => {
+      r(menuTreeMock);
+    }, 1000);
+  });
+
 const WebConfigPage = props => {
   const [configVisible, setConfigVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [menuTree, setMeneTree] = useState({ children: [] });
+  const [configObj, setConfigObj] = useState({});
   const renderPage = () => {};
+
+  useEffect(() => {
+    getMenuTree().then(res => {
+      setMeneTree(res);
+      setLoading(false);
+    });
+  }, []);
+
   const renderTabPane = tabPaneItem => (
-    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
-      <SiteConfig visible={configVisible} setVisible={setConfigVisible} />
-    </TabPane>
+    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text} />
   );
 
   const onEdit = (targetKey, action) => {
     // console.log(targetKey, action); // action: add|remove
+    switch (action) {
+      case 'add':
+        setConfigVisible(true);
+        break;
+      case 'remove':
+        break;
+      default:
+    }
   };
+
+  const onDrawerClose = form => {};
+
   return (
-    <PageContainer>
+    <PageContainer loading={loading}>
       <div className={styles.webConfigContainer}>
         <Tabs type="editable-card" onEdit={onEdit}>
           {menuTree.children.map(renderTabPane)}
         </Tabs>
+        <SiteConfig
+          visible={configVisible}
+          onClose={onDrawerClose}
+          config={configObj}
+        />
       </div>
     </PageContainer>
   );