feat: 平台首页商品装修添加字体颜色和更新装修组件库版本

package.json

@@ -65,7 +65,7 @@
     "crypto-js": "^4.0.0",
     "god": "^0.2.4",
     "lingxi-design": "^2.0.1",
-    "lingxi-design-ui": "^2.0.6",
+    "lingxi-design-ui": "^2.0.7",
     "lingxi-editor-core": "^2.0.1",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",

src/pages/pageCustomized/components/SettingPanel/index.tsx

@@ -15,7 +15,7 @@ const SettingPanel: React.FC<SettingPanelPropsType> = (props) => {
   const { children, footer, onOK = () => {}, onCancel, confirmLoading = false } = props
 
   return (
-    <div className={styles.setting_panel}>
+    <div className={styles.setting_panel} id="setting_panel">
       <div className={styles.setting_panel_body}>
         {children}
       </div>

src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformGoods/index.less

@@ -107,6 +107,14 @@
   }
 }
 
+.color_picker {
+  position: relative;
+  top: 4px;
+  width: 24px;
+  height: 24px;
+  background-color: #303133;
+}
+
 .goods_item {
   display: flex;
   flex-wrap: nowrap;

src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformGoods/index.tsx

-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Modal, Input, Select, Button, Drawer, message, Radio } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { ColumnType } from 'antd/lib/table/interface';
@@ -20,8 +20,8 @@ import GoodsItem from './GoodsItem'
 import { cloneDeep } from 'lodash'
 import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
 import { productSchema } from './schema'
+import Colorpicker from '@/utils/colorpicker.js'
 import styles from './index.less'
-import { useEffect } from 'react';
 
 interface GoodsItemType {
   advertImg: string,
@@ -35,6 +35,7 @@ interface GoodsItemType {
   secondId: string | undefined,
   shopId:  number | undefined,
   thirdId: string | undefined,
+  fontColor: string
 }
 interface ShopInfo {
 	id: number;
@@ -115,10 +116,24 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
     return newList
   }
 
+  const initColorPicker = () => {
+    // const obj = document.getElementById("picker");
+    Colorpicker.create({
+      el: "color-picker",
+      box: "drawer-box",
+      color: dataInfo.fontColor || "#303133",
+      change: (elem, hex) => {
+        elem.style.backgroundColor = hex;
+        changeNewProps('dataInfo', Object.assign(dataInfo, { fontColor: hex }))
+      }
+    })
+  }
+
   useEffect(() => {
     const enterpriseMallList = GlobalConfig.web.shopInfo.filter((item) => item.type === 1 && item.environment === 1)
     setMallSelectList(initMallList(enterpriseMallList))
     fetchCategoryTree()
+    initColorPicker()
   }, [])
 
   const fetchCategoryTree = () => {
@@ -240,13 +255,6 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
     ref.current.reload(values)
   }
 
-  const assignData = (data: any, assignInfo: any) => {
-    const newData = cloneDeep(data)
-    const newObj = Object.assign(newData, {...assignInfo})
-    console.log(newObj, 'newObj')
-    return newObj
-  }
-
   const handleCategoryChange = (value: any, type: string) => {
     switch (type) {
       case 'first':
@@ -451,6 +459,12 @@ const PlatformGoods: React.FC<PlatformGoodsProps> = (props) => {
               <Input className={styles.setting_line_addItem_input} value={dataInfo.describe}  maxLength={14} onChange={(e) => handleChangeForKey(e.target.value, 'describe')} />
             </div>
           </div>
+          <div className={styles.setting_line_addItem_line}>
+            <div className={cx(styles.setting_line_addItem_line_label, styles.height32)}>字体颜色:</div>
+            <div className={styles.setting_line_addItem_line_brief}>
+                <div className={cx(styles.color_picker)} id="color-picker"></div>
+            </div>
+          </div>
         </div>
         <div className={styles.setting_title}>
           <span>分类商品设置</span>

src/pages/pageCustomized/settingsPanel/propsSettings/index.tsx

@@ -148,6 +148,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
       onClose={onClose}
       width={drawerWidth}
       visible={drawerVisible}
+      className="drawer-box"
     >
       {renderDrawerComponent()}
     </Drawer>