fix: 添加主题颜色配置

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

 import React, { useState, useEffect } from 'react';
 import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
+import { SketchPicker } from 'react-color';
 import {
   Drawer,
   notification,
@@ -22,6 +23,16 @@ import styles from './siteConfigDrawer.less';
 const { Option } = Select;
 const plainOptions = ['搜索', '首页', '常用', '反馈', '消息'];
 const defaultCheckedList = ['搜索', '首页', '常用', '反馈', '消息'];
+const colorList = [
+  { key: '薄暮', color: '#F5222D' },
+  { key: '火山', color: '#FA541C' },
+  { key: '日暮', color: '#FAAD14' },
+  { key: '明青', color: '#13C2C2' },
+  { key: '极光绿', color: '#52C41A' },
+  { key: '拂晓蓝', color: '#1890FF' },
+  { key: '极客蓝', color: '#2F54EB' },
+  { key: '酱紫', color: '#722ED1' },
+];
 
 export default props => {
   const { visible, onClose, config, hasIntegerate, isEdit, onOk, submitting, productList } = props;
@@ -30,6 +41,8 @@ export default props => {
   const [checkedList, setCheckedList] = useState([]);
   const [indeterminate, setIndeterminate] = useState(false);
   const [checkAll, setCheckAll] = useState(true);
+  const [displayColorPicker, setDisplayColorPicker] = useState(false);
+  const [color, setColor] = useState('');
   const CheckboxGroup = Checkbox.Group;
   useEffect(() => {
     onGetLoginPages();
@@ -44,7 +57,7 @@ export default props => {
         } else {
           setIndeterminate(
             !!config.topMenu.split(',').length &&
-              config.topMenu.split(',').length < plainOptions.length,
+            config.topMenu.split(',').length < plainOptions.length,
           );
         }
 
@@ -65,13 +78,22 @@ export default props => {
       if (isEdit) {
         // 获取表单回显
         console.log(config, 'config');
-        form.setFieldsValue(config);
+        form.setFieldsValue({
+          ...config,
+          primaryColor: config.primaryColor ? config.primaryColor : '#1890FF',
+          navTheme: config.navTheme ? config.navTheme : 'light',
+          headerPrimaryColor: config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF',
+        });
+        setColor(config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF');
       } else {
         form.setFieldsValue({
           messageMarking: 'All',
           messageVoice: true,
           hideMap: false,
           loginTemplate: 'Default.html',
+          primaryColor: '#1890FF',
+          navTheme: 'light',
+          headerPrimaryColor: '#1890FF',
         });
       }
     } else {
@@ -124,6 +146,10 @@ export default props => {
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
   };
+  const colorChange = value => {
+    setColor(value.hex);
+    form.setFieldsValue({ headerPrimaryColor: value.hex });
+  };
   return (
     <Drawer
       title={isEdit ? '查看/编辑网站配置' : '新增网站'}
@@ -225,6 +251,44 @@ export default props => {
           <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}）`}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item label="侧边导航主题" name="navTheme">
+          <Select placeholder="请选择功能标签">
+            <Option value="light">亮</Option>
+            <Option value="dark">暗</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="headerPrimaryColor" label="顶部导航主题">
+          <div className={styles.colorBox}>
+            <div
+              className={styles.colorSwatch}
+              onClick={() => setDisplayColorPicker(!displayColorPicker)}
+            >
+              <div>{color}</div>
+              <div
+                style={{
+                  backgroundColor: color,
+                  height: '10px',
+                  width: '10px',
+                  margin: '10px 0 0 5px',
+                }}
+              />
+            </div>
+            <div className={styles.popover}>
+              {displayColorPicker ? (
+                <SketchPicker color={color} onChange={e => colorChange(e)} width="230px" />
+              ) : null}
+            </div>
+          </div>
+        </Form.Item>
         <Form.Item label="产品类型" name="productType">
           <Select placeholder="请选择主页产品类型">
             {productList.map(item => (

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

-.siteConfigContainer{
+.siteConfigContainer {}
+
+.colorBox {
+  .colorSwatch {
+    display: flex;
+    justify-content: center;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+  }
+
+  .popover {
+    position: absolute;
+    z-index: 2;
+  }
 }
\ No newline at end of file