feat: add init configcenter pages

.vscode/setting.json

 {
     "editor.codeActionsOnSave": {
         "source.fixAll": true
-    }
+    },
+    "editor.tabSize": 2
 }
\ No newline at end of file

jsconfig.json

@@ -7,7 +7,8 @@
         "baseUrl": "./",
         "paths": {
             "@/*": ["src/*"]
-        }
+        },
+        "spaces": 2
     },
     "exclude": [
         "node_modules"

src/components/PreviewConfigDrawer/index.js

+import React from 'react';
+import { Drawer, Form, Button } from 'antd';
+import classnames from 'classnames';
+import styles from './index.less';
+
+export default props => {
+  const {
+    visible,
+    setVisible,
+    drawerProps,
+    previewContent,
+    drawerContent,
+    previewClass,
+    children,
+  } = props;
+  return (
+    <div className={classnames(styles.preViewContainer, previewClass)}>
+      <div className={styles.previewBox}>{previewContent}</div>
+      <Drawer
+        title="Multi-level drawer"
+        width={520}
+        closable
+        onClose={() => {
+          setVisible(false);
+        }}
+        visible={visible}
+        {...drawerProps}
+      >
+        {children || drawerContent}
+      </Drawer>
+    </div>
+  );
+};

src/components/PreviewConfigDrawer/index.less

+.preViewContainer{
+    width: 100%;
+    @minHeight: calc(100vh - 240px);
+    min-height: @minHeight;
+    padding: 6px 12px;
+    .previewBox{
+        width: 100%;
+        height: max(@minHeight, 720px);
+        background: #f5eebb;
+    }
+}
\ No newline at end of file

src/pages/appConfig/index.js

+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+
+const AppConfigPage = props => <PageContainer>appConfigPage</PageContainer>;
+
+export default AppConfigPage;

src/pages/mobileConfig/index.js

+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+
+const MobileConfigPage = props => (
+  <PageContainer>mobileConfigPage</PageContainer>
+);
+
+export default MobileConfigPage;

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/componets/siteConfig.less

+.siteConfigContainer{
+    width: 100%;
+    @minHeight: calc(100vh - 240px);
+    min-height: @minHeight;
+    padding: 6px 12px;
+    .previewBox{
+        width: 100%;
+        height: max(@minHeight, 720px);
+        background: #f5eebb;
+    }
+}
\ No newline at end of file

src/pages/webConfig/index.js

+import React, { useState } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Tabs } from 'antd';
+import menuTree from '@/services/mocks/web4site';
+import styles from './index.less';
+import SiteConfig from './componets/siteConfig';
+const { TabPane } = Tabs;
+
+const WebConfigPage = props => {
+  const [configVisible, setConfigVisible] = useState(false);
+  const renderPage = () => {};
+  const renderTabPane = tabPaneItem => (
+    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
+      <SiteConfig visible={configVisible} setVisible={setConfigVisible} />
+    </TabPane>
+  );
+
+  const onEdit = (targetKey, action) => {
+    // console.log(targetKey, action); // action: add|remove
+  };
+  return (
+    <PageContainer>
+      <div className={styles.webConfigContainer}>
+        <Tabs type="editable-card" onEdit={onEdit}>
+          {menuTree.children.map(renderTabPane)}
+        </Tabs>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default WebConfigPage;

src/pages/webConfig/index.less

+.webConfigContainer{
+
+}
+
+.webConfigContainer > .ant-tabs-card .ant-tabs-content {
+    height: 100%;
+    margin-top: -16px;
+  }
+  .webConfigContainer > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
+    background: #fff;
+    padding: 16px;
+  }
+  .webConfigContainer > .ant-tabs-card > .ant-tabs-nav::before {
+    display: none;
+  }
+  .webConfigContainer > .ant-tabs-card .ant-tabs-tab,
+  [data-theme='compact'] .webConfigContainer > .ant-tabs-card .ant-tabs-tab {
+    border-color: transparent;
+    background: transparent;
+  }
+  .webConfigContainer > .ant-tabs-card .ant-tabs-tab-active,
+  [data-theme='compact'] .webConfigContainer > .ant-tabs-card .ant-tabs-tab-active {
+    border-color: #fff;
+    background: #fff;
+  }
+  #components-tabs-demo-card-top .code-box-demo {
+    background: #f5f5f5;
+    overflow: hidden;
+    padding: 24px;
+  }
+  [data-theme='compact'] .webConfigContainer > .ant-tabs-card .ant-tabs-content {
+    height: 120px;
+    margin-top: -8px;
+  }
+  [data-theme='dark'] .webConfigContainer > .ant-tabs-card .ant-tabs-tab {
+    border-color: transparent;
+    background: transparent;
+  }
+  [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
+    background: #000;
+  }
+  [data-theme='dark'] .webConfigContainer > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
+    background: #141414;
+  }
+  [data-theme='dark'] .webConfigContainer > .ant-tabs-card .ant-tabs-tab-active {
+    border-color: #141414;
+    background: #141414;
+  }
\ No newline at end of file

src/routes/config.js

 import React from 'react';
-import { omit } from 'lodash';
 import {
   DatabaseOutlined,
   UsergroupAddOutlined,
@@ -22,6 +21,9 @@ import RoleManage from '../pages/userCenter/RoleManage';
 import SiteManage from '../pages/userCenter/siteManage/SiteManage';
 // import DefaultComponent from '../pages/orgnazation/DefaultComponent';
 import TestTable from '../pages/orgnazation/TestTable';
+import WebConfigPage from '@/pages/webConfig';
+import AppConfigPage from '@/pages/appConfig';
+import MobileConfigPage from '@/pages/mobileConfig';
 import { USER_MODE } from '@/utils/constants';
 const iconStyle = { verticalAlign: '0.125em' };
 
@@ -152,17 +154,17 @@ export default {
             {
               path: '/productCenter/web',
               name: 'web配置',
-              component: Welcome,
+              component: WebConfigPage,
             },
             {
               path: '/productCenter/app',
               name: 'app配置',
-              component: Welcome,
+              component: AppConfigPage,
             },
             {
               path: '/productCenter/miniProgram',
               name: '小程序配置',
-              component: Welcome,
+              component: MobileConfigPage,
             },
           ],
         },