fix: 修改web配置界面

src/pages/productCenter/webConfig/components/siteConfigDrawer.js

@@ -15,6 +15,7 @@ import {
   Divider,
   Row,
   Col,
+  Switch,
 } from 'antd';
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import WebConfigForm from './webConfigForm';
@@ -44,6 +45,7 @@ export default props => {
   const [displayColorPicker, setDisplayColorPicker] = useState(false);
   const [color, setColor] = useState('');
   const CheckboxGroup = Checkbox.Group;
+  const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
   useEffect(() => {
     onGetLoginPages();
     console.log(isEdit);
@@ -86,6 +88,7 @@ export default props => {
         });
         setColor(config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF');
       } else {
+        setColor('#1890FF');
         form.setFieldsValue({
           messageMarking: 'All',
           messageVoice: true,
@@ -97,6 +100,7 @@ export default props => {
         });
       }
     } else {
+      setShowAdvanced(false);
       form.resetFields();
     }
   }, [visible]);
@@ -238,35 +242,34 @@ export default props => {
         >
           <Input autoComplete="off" disabled={isEdit} />
         </Form.Item>
-        <Form.Item name="topMenu" label="顶部功能">
-          <Checkbox
-            indeterminate={indeterminate}
-            onChange={onCheckAllChange}
-            checked={checkAll}
-            style={{ marginTop: '5px', display: 'none' }}
-          >
-            全选
-          </Checkbox>
-          {/* <br />
-          <br /> */}
-          <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
-        </Form.Item>
-        <Form.Item name="primaryColor" label="内容主题">
-          <Select placeholder="请选择颜色">
-            {colorList.map(item => (
-              <Option value={item.color} key={item.color}>
-                {`${item.key}（${item.color}）`}
+        <Form.Item label="登录模板" name="loginTemplate">
+          <Select placeholder="请选择登录模板">
+            {loginPages.map(item => (
+              <Option value={item.value} key={item.value}>
+                {item.value}
               </Option>
             ))}
           </Select>
         </Form.Item>
-        <Form.Item label="侧边导航主题" name="navTheme">
-          <Select placeholder="请选择功能标签">
-            <Option value="light">亮</Option>
-            <Option value="dark">暗</Option>
+        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
+          主页配置
+        </Divider>
+        <Form.Item label="产品类型" name="productType">
+          <Select placeholder="请选择主页产品类型">
+            {productList.map(item => (
+              <Option value={item.PackageName} key={item.PackageName}>
+                {`${item.ProductName}（${item.PackageName}）`}
+              </Option>
+            ))}
           </Select>
         </Form.Item>
-        <Form.Item name="headerPrimaryColor" label="顶部导航主题">
+        <Form.Item label="主页Url" name="homePage">
+          <Input placeholder="请输入主页路径" autoComplete="off" />
+        </Form.Item>
+        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
+          主题配置
+        </Divider>
+        <Form.Item name="headerPrimaryColor" label="顶部">
           <div className={styles.colorBox}>
             <div
               className={styles.colorSwatch}
@@ -303,27 +306,57 @@ export default props => {
             ) : null}
           </div>
         </Form.Item>
-        <Form.Item label="产品类型" name="productType">
-          <Select placeholder="请选择主页产品类型">
-            {productList.map(item => (
-              <Option value={item.PackageName} key={item.PackageName}>
-                {`${item.ProductName}（${item.PackageName}）`}
-              </Option>
-            ))}
+        <Form.Item name="navTheme" label="菜单">
+          <Select placeholder="请选择功能标签">
+            <Option value="light">亮</Option>
+            <Option value="dark">暗</Option>
           </Select>
         </Form.Item>
-        <Form.Item label="主页Url" name="homePage">
-          <Input placeholder="请输入主页路径" autoComplete="off" />
-        </Form.Item>
-        <Form.Item label="登录模板" name="loginTemplate">
-          <Select placeholder="请选择登录模板">
-            {loginPages.map(item => (
-              <Option value={item.value} key={item.value}>
-                {item.value}
+        <Form.Item name="primaryColor" label="基础">
+          <Select placeholder="请选择颜色">
+            {colorList.map(item => (
+              <Option value={item.color} key={item.color}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      height: '10px',
+                      width: '10px',
+                      background: item.color,
+                      marginRight: '5px',
+                    }}
+                  />
+                  {`${item.key}（${item.color}）`}
+                </div>
               </Option>
             ))}
           </Select>
         </Form.Item>
+
+        <Form.Item>
+          <Switch
+            checked={showAdvanced}
+            checkedChildren="高级设置"
+            unCheckedChildren="高级设置"
+            onChange={() => setShowAdvanced(!showAdvanced)}
+          />
+        </Form.Item>
+        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
+          <Form.Item name="topMenu" label="顶部功能">
+            <Checkbox
+              indeterminate={indeterminate}
+              onChange={onCheckAllChange}
+              checked={checkAll}
+              style={{ marginTop: '5px', display: 'none' }}
+            >
+              全选
+            </Checkbox>
+            <CheckboxGroup
+              options={plainOptions}
+              value={checkedList}
+              checked={showAdvanced}
+              onChange={onChange}
+            />
+          </Form.Item>
           <Form.Item label="功能标签" name="mdi">
             <Select placeholder="请选择功能标签">
               <Option value="MDI" key="0">
@@ -374,6 +407,7 @@ export default props => {
               <Radio value={false}>关闭</Radio>
             </Radio.Group>
           </Form.Item>
+        </div>
       </Form>
     </Drawer>
   );