fix: 颜色修改

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js

 import React, { useState, useContext, useMemo, useEffect } from 'react'
 import styles from './index.less'
-import { Input, Form, TreeSelect, Switch, Modal, Space, Button, Popover, Upload } from 'antd'
+import { Input, Form, TreeSelect, Switch, Modal, Space, Button, Popover, Upload, Popconfirm } from 'antd'
+import { SketchPicker } from 'react-color'
 import { GlobalStore } from '../index'
 import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
 import {
@@ -28,7 +29,7 @@ const themeStyles = [
   { name: '企业版' },
 ]
 
-const backgrounds = ['#FFFFFF', '#EBE1FF', '#E3EAFF', '#DCF3FE', '#DBF4D4', '#FCEAD1', '#FBE2E1']
+const backgrounds = ['#daebfe', '#FCEAD1', '#f1feed', '#e3ecfe', '#e4fffa']
 
 const themes = [
   { name: '供水主题背景' },
@@ -371,10 +372,6 @@ const Right = () => {
     )
   }
 
-  // useEffect(() => {
-  //   setShema({ ...shema, carousel: { ...carousel, imgUrls: showList.map(v => v.sourcePath) } })
-  // }, [shema.carousel])
-
   useEffect(() => {
     getData()
     //初始增加一个供水主题
@@ -433,41 +430,60 @@ const Right = () => {
         </div>
         <div className={styles.group}>
           <div className={styles['g-title']}>主题色设置</div>
-          <div className={styles.mimGroup}>使用背景色</div>
-          <div className={styles['g-content']}>
-            <div className={styles['c-background']}>
-              {
-                backgrounds.map(v => {
-                  return (
-                    <div
-                      className={styles['d-item']}
-                      style={{ background: v }}
-                      onClick={() => setShema({ ...shema, background: v })}
-                    >
-                      {shema.background === v && <CheckOutlined style={{ fontSize: '14px', fontWeight: 'bold', color: '#3594FF' }} />}
-                    </div>
-                  )
-                })
-              }
+          <div style={{ width: '100%', display: themeStyle === '企业版' ? 'block' : 'none' }}>
+            <div className={styles.mimGroup}>使用背景色</div>
+            <div className={styles['g-content']}>
+              <div className={styles['c-background']}>
+                {
+                  backgrounds.map(v => {
+                    return (
+                      <div
+                        className={styles['d-item']}
+                        style={{ background: v }}
+                        onClick={() => setShema({ ...shema, background: v })}
+                      >
+                        {shema.background === v && <CheckOutlined style={{ fontSize: '14px', fontWeight: 'bold', color: '#3594FF' }} />}
+                      </div>
+                    )
+                  })
+                }
+                <Popconfirm
+                  placement="topLeft"
+                  icon={false}
+                  title={
+                    <SketchPicker
+                      width="217px"
+                      color={shema.background}
+                      onChange={(e) => setShema({ ...shema, background: e.hex })}
+                    />
+                  }
+                >
+                  <div className={styles['d-item']} style={{ background: backgrounds.includes(shema.background) ? '#FFFFFF' : shema.background }}>
+                    {!backgrounds.includes(shema.background) && <CheckOutlined style={{ fontSize: '14px', fontWeight: 'bold', color: '#3594FF' }} />}
+                  </div>
+                </Popconfirm>
+              </div>
             </div>
           </div>
-          <div className={styles.mimGroup}>使用背景图</div>
-          <div className={styles['g-content']}>
-            <div className={styles['c-backImg']}>
-              {
-                themes.map(v => {
-                  return (
-                    <div
-                      className={styles['c-center']}
-                      onClick={() => changeThemes(v)}
-                      key={v.name}
-                    >
-                      <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
-                      <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
-                    </div>
-                  )
-                })
-              }
+          <div style={{ width: '100%', display: themeStyle === '个人版' ? 'block' : 'none' }}>
+            <div className={styles.mimGroup}>使用背景图</div>
+            <div className={styles['g-content']}>
+              <div className={styles['c-backImg']}>
+                {
+                  themes.map(v => {
+                    return (
+                      <div
+                        className={styles['c-center']}
+                        onClick={() => changeThemes(v)}
+                        key={v.name}
+                      >
+                        <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
+                        <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
             </div>
           </div>
         </div>