fix: 修改主题配置顶部可以渐变

src/pages/bsmanager/workOrder/workFlow/flowComponents/timelimitComponents/AddModal.jsx

@@ -116,6 +116,9 @@ const AddModal = props => {
   const onFinish = () => {
     form.validateFields().then(validate => {
       if (validate) {
+        validate.TimeLimitField =
+          validate.TimeLimitField === '(未配置)' ? '' : validate.TimeLimitField;
+        validate.TimeoutField = validate.TimeoutField === '(未配置)' ? '' : validate.TimeoutField;
         let obj = {};
         if (modalType === 'add') {
           obj = { ...validate, ID: 0 };

src/pages/productCenter/webConfig/components/ColorLinear.jsx

+import React, { useEffect, useState } from 'react';
+
+import { Form, Modal, Button, InputNumber } from 'antd';
+import { SketchPicker } from 'react-color';
+import styles from './ColorLinear.less';
+const ColorLinear = props => {
+  const { onSubumit, handleCancel, visible, color } = props;
+  const [colorList, setColorList] = useState(['#F5222D', '#FA541C']);
+  const [angle, setAngle] = useState(0);
+  const [colorValue, setColorValue] = useState();
+
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      let list = [...colorList];
+      if (color.indexOf('linear-gradient') != -1) {
+        // 渐变
+        let str = color;
+        let re = /\([^\)]+\)/g;
+        str = str.match(re)[0];
+        str = str.substring(1, str.length - 1);
+        list = str.split(',');
+        const a = list.shift();
+        setAngle(parseInt(a));
+      } else {
+        list.push(color);
+      }
+      setColorList(list);
+    } else {
+      setColorList([]);
+    }
+  }, [visible]);
+  useEffect(() => {
+    if (colorList.length > 1) {
+      setColorValue(`linear-gradient(${angle}deg,${colorList.join(',')})`);
+    } else {
+      setColorValue(colorList[0]);
+    }
+  }, [colorList]);
+
+  // 渐变角度切换
+  const onChange = e => {
+    setAngle(e);
+  };
+  const addColor = () => {
+    let list = [...colorList];
+    list.push(list[list.length - 1]);
+    setColorList(list);
+  };
+  const delColor = () => {
+    let list = [...colorList];
+    list.pop();
+    setColorList(list);
+  };
+  // 颜色选择
+  const colorChange = (value, index) => {
+    let list = [...colorList];
+    list[index] = value.hex;
+    setColorList(list);
+  };
+  // 提交表单
+  const onFinish = () => {
+    onSubumit(colorValue);
+    handleCancel();
+  };
+  return (
+    <Modal
+      title="顶部颜色配置"
+      visible={visible}
+      onOk={onFinish}
+      width="900px"
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+      centered
+    >
+      <div className={styles.content}>
+        <div className={styles.headerBox} style={{ background: colorValue }}>
+          <Button onClick={addColor}>添加颜色</Button>
+          <Button onClick={delColor} style={{ margin: '0 10px' }}>
+            移除颜色
+          </Button>
+          <InputNumber min={0} max={360} value={angle} onChange={onChange} />
+        </div>
+        <div className={styles.colorBorderContent}>
+          <div className={styles.colorContent}>
+            <div className={styles.colorHeader}>
+              <div className={styles.color} />
+            </div>
+            <div className={styles.colorBox}>
+              {colorList.map((item, index) => (
+                <div key={index} style={{ marginBottom: '15px' }}>
+                  <SketchPicker width="230px" color={item} onChange={e => colorChange(e, index)} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default ColorLinear;

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

+.content {
+  height: 620px;
+
+  .headerBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    border-radius: 10px;
+  }
+
+  .colorBorderContent {
+    margin-top: 5px;
+    margin-right: 10px;
+    // padding: 10px;
+    padding-top: 25px;
+
+    width: 100%;
+    height: 550px;
+    overflow: auto;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+
+    .colorContent {
+      height: 100%;
+      overflow-y: scroll;
+
+
+
+      .colorBox {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+      }
+    }
+  }
+}
\ No newline at end of file

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

@@ -19,6 +19,7 @@ import {
 } from 'antd';
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import WebConfigForm from './webConfigForm';
+import ColorLinear from './ColorLinear';
 import Upload from '@/components/Upload';
 import styles from './siteConfigDrawer.less';
 const { Option } = Select;
@@ -95,7 +96,7 @@ export default props => {
           hideMap: false,
           loginTemplate: 'Default.html',
           primaryColor: '#1890FF',
-          navTheme: 'light',
+          navTheme: 'dark',
           headerPrimaryColor: '#1890FF',
         });
       }
@@ -151,8 +152,9 @@ export default props => {
     setCheckAll(list.length === plainOptions.length);
   };
   const colorChange = value => {
-    setColor(value.hex);
-    form.setFieldsValue({ headerPrimaryColor: value.hex });
+    console.log(value, 'value');
+    setColor(value);
+    form.setFieldsValue({ headerPrimaryColor: value });
   };
   return (
     <Drawer
@@ -274,43 +276,26 @@ export default props => {
             <div
               className={styles.colorSwatch}
               onClick={e => {
-                e.stopPropagation();
                 setDisplayColorPicker(!displayColorPicker);
               }}
             >
-              <div>{color}</div>
+              <div>颜色</div>
               <div
                 style={{
-                  backgroundColor: color,
+                  background: color,
                   height: '10px',
                   width: '10px',
                   margin: '10px 0 0 5px',
                 }}
               />
             </div>
-
-            {displayColorPicker ? (
-              <div className={styles.popover}>
-                <div
-                  onClick={() => setDisplayColorPicker(false)}
-                  style={{
-                    position: 'fixed',
-                    top: '0px',
-                    right: '0px',
-                    bottom: '0px',
-                    left: '0px',
-                  }}
-                />
-                <SketchPicker color={color} onChange={e => colorChange(e)} width="230px" />
-              </div>
-            ) : null}
           </div>
         </Form.Item>
         <Form.Item name="navTheme" label="菜单">
-          <Select placeholder="请选择功能标签">
-            <Option value="light">亮</Option>
-            <Option value="dark">暗</Option>
-          </Select>
+          <Radio.Group>
+            <Radio value="dark">暗</Radio>
+            <Radio value="light">亮</Radio>
+          </Radio.Group>
         </Form.Item>
         <Form.Item name="primaryColor" label="基础">
           <Select placeholder="请选择颜色">
@@ -409,6 +394,12 @@ export default props => {
           </Form.Item>
         </div>
       </Form>
+      <ColorLinear
+        visible={displayColorPicker}
+        color={color}
+        onSubumit={colorChange}
+        handleCancel={() => setDisplayColorPicker(false)}
+      />
     </Drawer>
   );
 };