From 438954886890728947ca25af2ea9dc21d02e703c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A2=81=E4=B8=9C=E5=BC=BA?= <1559301693@qq.com>
Date: Fri, 18 Jul 2025 17:53:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A2=9C=E8=89=B2=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/pal.pl.repository.designer.htm       | 240 ++++----
 .../img/bg_gradient.svg                       |  15 +
 .../scripts/diagraming/designer.ui.js         | 518 ++++++++++++++++--
 .../diagraming/designer.colorpicker.css       | 376 +++++++++++++
 4 files changed, 985 insertions(+), 164 deletions(-)
 create mode 100644 com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/img/bg_gradient.svg
 create mode 100644 com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css

diff --git a/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.htm b/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.htm
index 0334c291..f941b2be 100755
--- a/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.htm
+++ b/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.htm
@@ -8,6 +8,7 @@
     <link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/global_zh.css' />
     <link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.css' />
     <link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/ui.css' />
+    <link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css' />
     <link rel="stylesheet" href="../commons/css/awsui.css">
     <style>
         .button.blue {
@@ -1869,131 +1870,122 @@
  -->
 <div id="ui_container">
     <div id='color_picker' class="menu color_picker" style="display: none;">
-        <div class="color_items">
-            <div style="background-color:rgb(255,255,255);"></div>
-            <div style="background-color:rgb(229,229,229);"></div>
-            <div style="background-color:rgb(207,207,207);"></div>
-            <div style="background-color:rgb(184,184,184);"></div>
-            <div style="background-color:rgb(161,161,161);"></div>
-            <div style="background-color:rgb(138,138,138);"></div>
-            <div style="background-color:rgb(115,115,115);"></div>
-            <div style="background-color:rgb(92,92,92);"></div>
-            <div style="background-color:rgb(69,69,69);"></div>
-            <div style="background-color:rgb(50,50,50);"></div>
-            <div style="background-color:rgb(23,23,23);"></div>
-            <div style="background-color:rgb(0,0,0);"></div>
-            <div class="clear"></div>
+        <div class="color_transparent"><I18N#无填充></div>
+        <div class="color_group">
+            <div class="color_item"  awsui-qtip="#EFECEB" style="background:#EFECEB;"></div>
+            <div class="color_item"  awsui-qtip="#F2F2F2" style="background:#F2F2F2;"></div>
+            <div class="color_item"  awsui-qtip="#E7EBED" style="background:#E7EBED;"></div>
+            <div class="color_item"  awsui-qtip="#FADCDB" style="background:#FADCDB;"></div>
+            <div class="color_item"  awsui-qtip="#FBEADA" style="background:#FBEADA;"></div>
+            <div class="color_item"  awsui-qtip="#FCF9EA" style="background:#FCF9EA;"></div>
+            <div class="color_item"  awsui-qtip="#E5F6DA" style="background:#E5F6DA;"></div>
+            <div class="color_item"  awsui-qtip="#DBF5F5" style="background:#DBF5F5;"></div>
+            <div class="color_item"  awsui-qtip="#D2D6F9" style="background:#D2D6F9;"></div>
+            <div class="color_item"  awsui-qtip="#FADDED" style="background:#FADDED;"></div>
+            <div class="color_item"  awsui-qtip="#DED9D7" style="background:#DED9D7;"></div>
+            <div class="color_item"  awsui-qtip="#D9D9D9" style="background:#D9D9D9;"></div>
+            <div class="color_item"  awsui-qtip="#E0E0E0" style="background:#E0E0E0;"></div>
+            <div class="color_item"  awsui-qtip="#F5B9B7" style="background:#F5B9B7;"></div>
+            <div class="color_item"  awsui-qtip="#F8D5B5" style="background:#F8D5B5;"></div>
+            <div class="color_item"  awsui-qtip="#F6EDC1" style="background:#F6EDC1;"></div>
+            <div class="color_item"  awsui-qtip="#CAEDB4" style="background:#CAEDB4;"></div>
+            <div class="color_item"  awsui-qtip="#B7EAEB" style="background:#B7EAEB;"></div>
+            <div class="color_item"  awsui-qtip="#A6AEF3" style="background:#A6AEF3;"></div>
+            <div class="color_item"  awsui-qtip="#F6BBDB" style="background:#F6BBDB;"></div>
+            <div class="color_item"  awsui-qtip="#BEB3AF" style="background:#BEB3AF;"></div>
+            <div class="color_item"  awsui-qtip="#BFBFBF" style="background:#BFBFBF;"></div>
+            <div class="color_item"  awsui-qtip="#9E9E9E" style="background:#9E9E9E;"></div>
+            <div class="color_item"  awsui-qtip="#F19594" style="background:#F19594;"></div>
+            <div class="color_item"  awsui-qtip="#F4C18F" style="background:#F4C18F;"></div>
+            <div class="color_item"  awsui-qtip="#F1E4A2" style="background:#F1E4A2;"></div>
+            <div class="color_item"  awsui-qtip="#B0E38F" style="background:#B0E38F;"></div>
+            <div class="color_item"  awsui-qtip="#94E0E1" style="background:#94E0E1;"></div>
+            <div class="color_item"  awsui-qtip="#7985EC" style="background:#7985EC;"></div>
+            <div class="color_item"  awsui-qtip="#F199C8" style="background:#F199C8;"></div>
+            <div class="color_item"  awsui-qtip="#9D8C88" style="background:#9D8C88;"></div>
+            <div class="color_item"  awsui-qtip="#A6A6A6" style="background:#A6A6A6;"></div>
+            <div class="color_item"  awsui-qtip="#616161" style="background:#616161;"></div>
+            <div class="color_item"  awsui-qtip="#EC7270" style="background:#EC7270;"></div>
+            <div class="color_item"  awsui-qtip="#F1AC6A" style="background:#F1AC6A;"></div>
+            <div class="color_item"  awsui-qtip="#E9D66F" style="background:#E9D66F;"></div>
+            <div class="color_item"  awsui-qtip="#95DA69" style="background:#95DA69;"></div>
+            <div class="color_item"  awsui-qtip="#70D5D7" style="background:#70D5D7;"></div>
+            <div class="color_item"  awsui-qtip="#5B79E8" style="background:#5B79E8;"></div>
+            <div class="color_item"  awsui-qtip="#ED77B6" style="background:#ED77B6;"></div>
+            <div class="color_item"  awsui-qtip="#5C4038" style="background:#5C4038;"></div>
+            <div class="color_item"  awsui-qtip="#7F7F7F" style="background:#7F7F7F;"></div>
+            <div class="color_item"  awsui-qtip="#262626" style="background:#262626;"></div>
+            <div class="color_item"  awsui-qtip="#A23735" style="background:#A23735;"></div>
+            <div class="color_item"  awsui-qtip="#A66A30" style="background:#A66A30;"></div>
+            <div class="color_item"  awsui-qtip="#A7932C" style="background:#A7932C;"></div>
+            <div class="color_item"  awsui-qtip="#569230" style="background:#569230;"></div>
+            <div class="color_item"  awsui-qtip="#358E90" style="background:#358E90;"></div>
+            <div class="color_item"  awsui-qtip="#314AA4" style="background:#314AA4;"></div>
+            <div class="color_item"  awsui-qtip="#A23C73" style="background:#A23C73;"></div>
         </div>
-        <div class="color_items">
-            <div style="background-color:rgb(255,204,204);"></div>
-            <div style="background-color:rgb(255,230,204);"></div>
-            <div style="background-color:rgb(255,255,204);"></div>
-            <div style="background-color:rgb(230,255,204);"></div>
-            <div style="background-color:rgb(204,255,204);"></div>
-            <div style="background-color:rgb(204,255,230);"></div>
-            <div style="background-color:rgb(204,255,255);"></div>
-            <div style="background-color:rgb(204,229,255);"></div>
-            <div style="background-color:rgb(204,204,255);"></div>
-            <div style="background-color:rgb(229,204,255);"></div>
-            <div style="background-color:rgb(255,204,255);"></div>
-            <div style="background-color:rgb(255,204,230);"></div>
-            <div style="background-color:rgb(255,153,153);"></div>
-            <div style="background-color:rgb(255,204,153);"></div>
-            <div style="background-color:rgb(255,255,153);"></div>
-            <div style="background-color:rgb(204,255,153);"></div>
-            <div style="background-color:rgb(153,255,153);"></div>
-            <div style="background-color:rgb(153,255,204);"></div>
-            <div style="background-color:rgb(153,255,255);"></div>
-            <div style="background-color:rgb(153,204,255);"></div>
-            <div style="background-color:rgb(153,153,255);"></div>
-            <div style="background-color:rgb(204,153,255);"></div>
-            <div style="background-color:rgb(255,153,255);"></div>
-            <div style="background-color:rgb(255,153,204);"></div>
-            <div style="background-color:rgb(255,102,102);"></div>
-            <div style="background-color:rgb(255,179,102);"></div>
-            <div style="background-color:rgb(255,255,102);"></div>
-            <div style="background-color:rgb(179,255,102);"></div>
-            <div style="background-color:rgb(102,255,102);"></div>
-            <div style="background-color:rgb(102,255,179);"></div>
-            <div style="background-color:rgb(102,255,255);"></div>
-            <div style="background-color:rgb(102,178,255);"></div>
-            <div style="background-color:rgb(102,102,255);"></div>
-            <div style="background-color:rgb(178,102,255);"></div>
-            <div style="background-color:rgb(255,102,255);"></div>
-            <div style="background-color:rgb(255,102,179);"></div>
-            <div style="background-color:rgb(255,51,51);"></div>
-            <div style="background-color:rgb(255,153,51);"></div>
-            <div style="background-color:rgb(255,255,51);"></div>
-            <div style="background-color:rgb(153,255,51);"></div>
-            <div style="background-color:rgb(51,255,51);"></div>
-            <div style="background-color:rgb(51,255,153);"></div>
-            <div style="background-color:rgb(51,255,255);"></div>
-            <div style="background-color:rgb(51,153,255);"></div>
-            <div style="background-color:rgb(51,51,255);"></div>
-            <div style="background-color:rgb(153,51,255);"></div>
-            <div style="background-color:rgb(255,51,255);"></div>
-            <div style="background-color:rgb(255,51,153);"></div>
-            <div style="background-color:rgb(255,0,0);"></div>
-            <div style="background-color:rgb(255,128,0);"></div>
-            <div style="background-color:rgb(255,255,0);"></div>
-            <div style="background-color:rgb(128,255,0);"></div>
-            <div style="background-color:rgb(0,255,0);"></div>
-            <div style="background-color:rgb(0,255,128);"></div>
-            <div style="background-color:rgb(0,255,255);"></div>
-            <div style="background-color:rgb(0,127,255);"></div>
-            <div style="background-color:rgb(0,0,255);"></div>
-            <div style="background-color:rgb(127,0,255);"></div>
-            <div style="background-color:rgb(255,0,255);"></div>
-            <div style="background-color:rgb(255,0,128);"></div>
-            <div style="background-color:rgb(204,0,0);"></div>
-            <div style="background-color:rgb(204,102,0);"></div>
-            <div style="background-color:rgb(204,204,0);"></div>
-            <div style="background-color:rgb(102,204,0);"></div>
-            <div style="background-color:rgb(0,204,0);"></div>
-            <div style="background-color:rgb(0,204,102);"></div>
-            <div style="background-color:rgb(0,204,204);"></div>
-            <div style="background-color:rgb(0,102,204);"></div>
-            <div style="background-color:rgb(0,0,204);"></div>
-            <div style="background-color:rgb(102,0,204);"></div>
-            <div style="background-color:rgb(204,0,204);"></div>
-            <div style="background-color:rgb(204,0,102);"></div>
-            <div style="background-color:rgb(153,0,0);"></div>
-            <div style="background-color:rgb(153,76,0);"></div>
-            <div style="background-color:rgb(153,153,0);"></div>
-            <div style="background-color:rgb(77,153,0);"></div>
-            <div style="background-color:rgb(0,153,0);"></div>
-            <div style="background-color:rgb(0,153,77);"></div>
-            <div style="background-color:rgb(0,153,153);"></div>
-            <div style="background-color:rgb(0,76,153);"></div>
-            <div style="background-color:rgb(0,0,153);"></div>
-            <div style="background-color:rgb(76,0,153);"></div>
-            <div style="background-color:rgb(153,0,153);"></div>
-            <div style="background-color:rgb(153,0,77);"></div>
-            <div style="background-color:rgb(102,0,0);"></div>
-            <div style="background-color:rgb(102,51,0);"></div>
-            <div style="background-color:rgb(102,102,0);"></div>
-            <div style="background-color:rgb(51,102,0);"></div>
-            <div style="background-color:rgb(0,102,0);"></div>
-            <div style="background-color:rgb(0,102,51);"></div>
-            <div style="background-color:rgb(0,102,102);"></div>
-            <div style="background-color:rgb(0,51,102);"></div>
-            <div style="background-color:rgb(0,0,102);"></div>
-            <div style="background-color:rgb(51,0,102);"></div>
-            <div style="background-color:rgb(102,0,102);"></div>
-            <div style="background-color:rgb(102,0,51);"></div>
-            <div style="background-color:rgb(51,0,0);"></div>
-            <div style="background-color:rgb(51,26,0);"></div>
-            <div style="background-color:rgb(51,51,0);"></div>
-            <div style="background-color:rgb(26,51,0);"></div>
-            <div style="background-color:rgb(0,51,0);"></div>
-            <div style="background-color:rgb(0,51,26);"></div>
-            <div style="background-color:rgb(0,51,51);"></div>
-            <div style="background-color:rgb(0,25,51);"></div>
-            <div style="background-color:rgb(0,0,51);"></div>
-            <div style="background-color:rgb(25,0,51);"></div>
-            <div style="background-color:rgb(51,0,51);"></div>
-            <div style="background-color:rgb(51,0,26);"></div>
-            <div class="clear"></div>
+        <div class="color_base">
+            <div class="color_item"  awsui-qtip="#FFFFFF" style="background:#FFFFFF;border-color:#E9EDF2;"></div>
+            <div class="color_item"  awsui-qtip="#7F8B98" style="background:#7F8B98;"></div>
+            <div class="color_item"  awsui-qtip="#000000" style="background:#000000;"></div>
+            <div class="color_item"  awsui-qtip="#E74F4C" style="background:#E74F4C;"></div>
+            <div class="color_item"  awsui-qtip="#ED9745" style="background:#ED9745;"></div>
+            <div class="color_item"  awsui-qtip="#E0C431" style="background:#E0C431;"></div>
+            <div class="color_item"  awsui-qtip="#7BD144" style="background:#7BD144;"></div>
+            <div class="color_item"  awsui-qtip="#4CCBCD" style="background:#4CCBCD;"></div>
+            <div class="color_item"  awsui-qtip="#4669EA" style="background:#4669EA;"></div>
+            <div class="color_item"  awsui-qtip="#E855A4" style="background:#E855A4;"></div>
+        </div>
+        <div class="history">
+            <div class="history_title"><I18N#最近使用></div>
+            <div class="history_color">
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+                <div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
+            </div>
+        </div>
+        <div class="color_options">
+            <div id="color_draw" class="color_draw " awsui-qtip="吸色(Esc退出)"><i class="awsui-iconfont">&#xe844;</i></div>
+            <div class="color_edit">
+                <div class="hex" style="display: flex;">
+                    <div class="input_change">Hex<i class="awsui-iconfont">&#xe8ed;</i></div>
+                    <div class="input_box"><input class="input_hex" type="text" maxlength="6"></div>
+                </div>
+                <div class="rgb" style="display: none;">
+                    <div class="input_change">RGB<i class="awsui-iconfont">&#xe8ed;</i></div>
+                    <div class="input_box">
+                        <input class="input_r" type="text" maxlength="3">
+                        <input class="input_g" type="text" maxlength="3">
+                        <input class="input_b" type="text" maxlength="3">
+                    </div>
+                </div>
+            </div>
+            <div class="color_show">
+                <span id="color_show_now" class="color_show_now"  awsui-qtip="当前颜色"></span>
+            </div>
+        </div>
+        <div class="color_sep"></div>
+        <div class="color_more">
+            <img class="color_more_bg" src="../apps/com.actionsoft.apps.coe.pal/img/more_color.png"/>
+            <span><I18N#更多颜色></span>
+            <span class="extend-icon"><i class="awsui-iconfont">&#xe717;</i></span>
+            <div class="more_panel left">
+                <div class="color_panel" style="background: rgb(0, 251, 255);">
+                    <div class="saturation_white">
+                        <div class="saturation_black"></div>
+                    </div>
+                    <div class="picker_pin" style="color: rgb(76, 203, 205); left: 102px; top: 20px;"></div>
+                </div>
+                <div class="hue_horizontal">
+                    <div class="picker_pin" style="color: rgb(0, 251, 255); left: 81px;"></div>
+                </div>
+            </div>
         </div>
     </div>
     <ul id="bar_list_file" class="menu list options_menu noico">
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/img/bg_gradient.svg b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/img/bg_gradient.svg
new file mode 100644
index 00000000..33cf74eb
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/img/bg_gradient.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 211</title>
+    <defs>
+        <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#E6ECF4" offset="0%"></stop>
+            <stop stop-color="#B6CEF0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="色板工具" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-312.000000, -1277.000000)" fill="url(#linearGradient-1)" id="矩形备份-211">
+            <rect x="312" y="1277" width="24" height="24" rx="12"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/designer.ui.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/designer.ui.js
index 376e3b3a..496124b0 100755
--- a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/designer.ui.js
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/designer.ui.js
@@ -237,19 +237,28 @@ var UI = {
 		});
 		// 字体颜色
 		$("#bar_font_color").button({
-			onMousedown : function() {
+			onMousedown: function () {
 				var color = $("#bar_font_color").button("getColor");
-				$.colorpicker({
-					target : $("#bar_font_color"),
-					onSelect : function(color) {
+				let pickerHtml = $("#color_picker", parent.document).html()
+				let newPicker = $("#color_picker").html(pickerHtml)
+				newPicker.dropdown({
+					target: $("#bar_font_color")
+				})
+				ColorPicker.init({
+					color: color,
+					pickerDom: newPicker,
+					page: 'graph',
+					onSelect: function (color) {
 						Designer.setFontStyle({
-							color : color
+							color: color
 						});
 						$("#bar_font_color").button("setColor",
 							color)
 					},
-					color : color
-				});
+					onClose: function () {
+						newPicker.dropdown("close")
+					}
+				})
 			}
 		});
 		// 文本对齐
@@ -268,58 +277,78 @@ var UI = {
 		});
 		// 填充
 		$("#bar_fill").button({
-			onMousedown : function() {
+			onMousedown: function () {
 				var color = $("#bar_fill").button("getColor");
-				$.colorpicker({
-					target : $("#bar_fill"),
-					onSelect : function(color) {
+				let pickerHtml = $("#color_picker", parent.document).html()
+				let newPicker = $("#color_picker").html(pickerHtml)
+				newPicker.dropdown({
+					target: $("#bar_fill")
+				})
+				ColorPicker.init({
+					color: color,
+					pickerDom: newPicker,
+					page: 'graph',
+					transparent: true,
+					extend: `<div id="bar_fill_gradient" title="` + 颜色渐变 + `" class='extend_item'><img src="../apps/com.actionsoft.apps.coe.pal/img/bg_gradient.svg"/></div>`,
+					onSelect: function (color) {
 						Designer.setFillStyle({
-							type : "solid",
-							color : color
+							type: "solid",
+							color: color
 						});
 						$("#bar_fill").button("setColor", color)
 					},
-					color : color,
-					extend : "<div id='bar_fill_gradient' title='渐变' class='toolbar_button active'><div class='ico gradient'></div></div><!--div id='bar_fill_img' title='图片...' class='toolbar_button active'><div class='ico ico_img'></div></div--><!--div id='bar_fill_more' class='toolbar_button active'>More...</div-->"
-				});
-				$("#bar_fill_gradient").unbind().bind("click", function() {
+					onClose: function () {
+						newPicker.dropdown("close")
+					}
+				})
+				$("#bar_fill_gradient").unbind().bind("click", function () {
 					Designer.setFillStyle({
-						type : "gradient"
+						type: "gradient"
 					});
 					$("#color_picker").dropdown("close");
 				});
-				$("#bar_fill_img").unbind().bind("click", function() {
-					UI.showImageSelect(function(fileId, w, h) {
-						Designer.setFillStyle({
-							type : "image",
-							fileId : fileId,
-							imageW : w,
-							imageH : h
-						});
-					});
-					$("#color_picker").dropdown("close");
-				});
-				$("#bar_fill_more").unbind().bind("click", function() {
-					Dock.showView("graphic");
-					$("#color_picker").dropdown("close");
-				});
+				// 暂时注释掉无用代码
+				// $("#bar_fill_img").unbind().bind("click", function () {
+				// 	UI.showImageSelect(function (fileId, w, h) {
+				// 		Designer.setFillStyle({
+				// 			type: "image",
+				// 			fileId: fileId,
+				// 			imageW: w,
+				// 			imageH: h
+				// 		});
+				// 	});
+				// 	$("#color_picker").dropdown("close");
+				// });
+				// $("#bar_fill_more").unbind().bind("click", function () {
+				// 	Dock.showView("graphic");
+				// 	$("#color_picker").dropdown("close");
+				// });
 			}
 		});
 		// 线条颜色
 		$("#bar_line_color").button({
-			onMousedown : function() {
+			onMousedown: function () {
 				var color = $("#bar_line_color").button("getColor");
-				$.colorpicker({
-					target : $("#bar_line_color"),
-					onSelect : function(color) {
+				let pickerHtml = $("#color_picker", parent.document).html()
+				let newPicker = $("#color_picker").html(pickerHtml)
+				newPicker.dropdown({
+					target: $("#bar_line_color")
+				})
+				ColorPicker.init({
+					color: color,
+					pickerDom: newPicker,
+					page: 'graph',
+					onSelect: function (color) {
 						Designer.setLineStyle({
-							lineColor : color
+							lineColor: color
 						});
 						$("#bar_line_color").button("setColor",
 							color)
 					},
-					color : color
-				});
+					onClose: function () {
+						newPicker.dropdown("close")
+					},
+				})
 			}
 		});
 		// 线条宽度
@@ -4328,6 +4357,415 @@ var Navigator = {
 		}
 	}
 };
+const ColorPicker = {
+	hex: 'FFFFFF',
+	hsv: {
+		h: 0,
+		s: 100,
+		v: 100
+	},
+	init: function (option) {
+		let defaultOpt = {
+			color: '255,255,255',              //  初始颜色
+			transparent: false,                //  是否填充
+			extend: '',                        //  扩展  如果需要格式为想要追加的html
+			page: 'main',                      //  主页main  设计器  graph
+		}
+		picker = option.pickerDom
+		options = Object.assign({}, defaultOpt, option)
+		if (!picker.attr("init")) {
+			picker.attr("init", true)
+		}
+		picker.children(".color_extend").remove()
+		if (options.extend) {
+			picker.append("<div class='color_extend'>" + options.extend + "</div>")
+		}
+		$("body").width() - picker.offset().left - picker.width() < 180 ? picker.find(".more_panel").addClass("left") : picker.find(".more_panel").removeClass("left")
+		if (options.transparent) {
+			picker.removeClass("alpha_disabled")
+		} else {
+			picker.addClass("alpha_disabled")
+		}
+		if (!window.EyeDropper) {
+			picker.find(".color_options .color_draw").hide()
+		}
+		this.setHistory()
+		this.domEvent()
+		//  当前颜色值填充
+		let curHexColor = options.color == '0,0,0,0' ? 'FFFFFF' : options.color ? ColorPicker.rgbToHex(options.color) : 'FFFFFF'
+		this.hex = curHexColor
+		this.setColorByInput("input_hex", curHexColor)
+	},
+	close: function () {
+		if (options.onClose) {
+			options.onClose()
+		}
+	},
+	//  事件
+	domEvent: function () {
+		//  颜色选择
+		picker.on("click", ".color_item", function () {
+			if (options.onSelect) {
+				let color = $(this).css("background-color")
+				ColorPicker.setHistory(color)
+				options.onSelect(color.replace(/[^\d,\.]/g, ""))
+			}
+			ColorPicker.close()
+		})
+		//  没有填充
+		picker.find(".color_transparent").unbind().bind("click", function () {
+			if (options.onSelect) {
+				options.onSelect('0,0,0,0')
+			}
+			ColorPicker.close()
+		})
+		//  颜色值切换
+		picker.find(".color_edit .input_change").off("click").on("click", function () {
+			$(this).parent().css("display", "none").siblings().css("display", "flex")
+		})
+		//  输入框
+		let oldValue = ''
+		picker.find(".input_box input").off("focus.colorPicker").on("focus.colorPicker", function () {
+			$(this).select()
+			oldValue = $(this).val()
+		}).off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
+			event.stopPropagation()
+		})
+		picker.find(".input_box input").off("keydown.colorPicker").on("keydown.colorPicker", function (event) {
+			event.stopPropagation()
+			if (event.keyCode == 13) {  // 回车
+				ColorPicker.close()
+			}
+		})
+		picker.find(".input_box input").off("paste.colorPicker").on("paste.colorPicker", function (event) {
+			event.stopPropagation()
+		})
+		picker.find(".input_box input").off("input.colorPicker").on("input.colorPicker", function (event) {
+			event.stopPropagation()
+			let value = $(this).val()
+			if ($(this).hasClass("input_hex")) {
+				value = value.replace(/[^\da-fA-F]/g, "")
+				$(this).val(value)
+			} else {
+				value = value.replace(/[^\d]/g, "")
+				if (parseInt(value) > 255) {
+					value = "255"
+				}
+				$(this).val(value)
+			}
+			if (oldValue !== value) {
+				oldValue = value;
+				//  输入完成之后
+				ColorPicker.setColorByInput($(this).attr("class"), value)
+				ColorPicker.selectColor()
+			}
+		})
+		//  拖动选择更多颜色
+		let isMouseDown
+		const $colorPanel = picker.find(".color_panel,.hue_horizontal")
+		$colorPanel.off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
+			isMouseDown = true
+			const $target = $(this)
+			const left = $target.offset().left
+			const top = $target.offset().top
+			ColorPicker.setPickerPin($target, event.pageX - left, event.pageY - top)
+			let $body = options.page == 'main' ? $("body", parent.document) : $("body")
+			$body.off("mousemove.colorPicker").on("mousemove.colorPicker", function (e) {
+				e.preventDefault()
+				e.stopPropagation()
+				ColorPicker.setPickerPin($target, e.pageX - left, e.pageY - top)
+			})
+			$body.off("mouseup.colorPicker").on("mouseup.colorPicker", function (e) {
+				e.preventDefault()
+				e.stopPropagation()
+				$body.off("mousemove.colorPicker")
+				$body.off("mouseup.colorPicker")
+				isMouseDown = false
+				ColorPicker.selectColor()
+			})
+		})
+		//  吸色
+		picker.find(".color_options .color_draw").off("click").on("click", function () {
+			ColorPicker.initColorDraw()
+		})
+	},
+	//  历史
+	setHistory: function (color) {
+		let arr = JSON.parse(localStorage.getItem("recent_used_color")) || []
+		if (color) {
+			let obj = {
+				color: color,
+				time: (new Date).getTime()
+			}
+			arr = arr.filter(function (e) {
+				return e.color != color;
+			})
+			if (arr.length === 20) {
+				arr.pop()
+			}
+			arr.unshift(obj)
+			localStorage.setItem("recent_used_color", JSON.stringify(arr))
+		}
+		if (arr.length < 10) {
+			arr = arr.concat(Array(10 - arr.length).fill({disabled: true}))
+		}
+		this.renderHistoryColor(arr.slice(0, 10))
+	},
+	renderHistoryColor: function (colorArr) {
+		if (colorArr) {
+			let html = ''
+			colorArr.forEach(i => {
+				if (i.disabled) {
+					html += '<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>'
+				} else {
+					let hexColor = '#' + ColorPicker.rgbToHex(i.color)
+					let border = ''
+					if (i.color.indexOf('255,255,255')) {
+						border = "border-color:#E9EDF2;"
+					}
+					html += `<div class="color_item" awsui-qtip="${hexColor}" style="background: ${hexColor};${border}"></div>`
+				}
+			})
+			picker.find(".history_color").html(html)
+		}
+	},
+	//  输入框
+	setColorByInput: function (type, color) {
+		let curColor = color
+		switch (type) {
+			case 'input_hex':
+				if (color.length == 3 || color.length == 6) {
+					this.hex = curColor
+				}
+				break;
+			default:
+				let r = picker.find(".input_r").val(), g = picker.find(".input_g").val(), b = picker.find(".input_b").val(), obj = {
+					r: r ? parseInt(r) : 0,
+					g: g ? parseInt(g) : 0,
+					b: b ? parseInt(b) : 0
+				}
+				this.hex = ColorPicker.rgbToHex(`rgb(${obj.r},${obj.g},${obj.b})`)
+		}
+		this.hsv = ColorPicker.rgbToHsv(ColorPicker.hexToRgb(this.hex))
+		ColorPicker.setInputValue(type == 'input_hex' ? curColor : undefined)
+		ColorPicker.setShowColor()
+		ColorPicker.setPancelColor()
+		ColorPicker.setPickerColor()
+		ColorPicker.changeViewByColor()
+	},
+	//  更多颜色div -- 拖动事件
+	setPickerPin: function (targetDom, x, y) {
+		let width = targetDom.width()
+		let height = targetDom.height()
+		let curRgb = ColorPicker.hexToRgb(this.hex)
+		let hsvColor = ColorPicker.rgbToHsv(curRgb)
+		x = Math.max(0, Math.min(x, width))
+		//  横向选择颜色
+		if (targetDom.hasClass('hue_horizontal')) {
+			y = '50%'
+			hsvColor.h = Math.round(360 * x / width)
+		} else {
+			y = Math.max(0, Math.min(y, height))
+			hsvColor.s = Math.round(100 * x / width)
+			hsvColor.v = Math.round(100 * (height - y) / height)
+		}
+		targetDom.find(".picker_pin").css({
+			left: x,
+			top: y
+		})
+		this.hsv = hsvColor
+		let newColor = ColorPicker.hsvToRgb(hsvColor)
+		this.hex = ColorPicker.rgbToHex(`rgb(${newColor.r},${newColor.g},${newColor.b})`)
+		ColorPicker.setInputValue()
+		ColorPicker.setShowColor()
+		ColorPicker.setPickerColor()
+		if (targetDom.hasClass('hue_horizontal')) {
+			ColorPicker.setPancelColor()
+		}
+	},
+	/************************************   修改颜色    *****************************************/
+	
+	//  根据颜色改变拖动条位置
+	changeViewByColor: function () {
+		let curHsv = this.hsv
+		let panel = picker.find(".color_panel")
+		let horizontal = picker.find(".hue_horizontal")
+		panel.find(".picker_pin").css({
+			left: Math.round(curHsv.s * panel.width() / 100),
+			top: Math.round((100 - curHsv.v) * panel.height() / 100)
+		})
+		horizontal.find(".picker_pin").css({
+			left: Math.round(curHsv.h / 360 * horizontal.width())
+		})
+	},
+	//  设置更多颜色div背景色
+	setPancelColor: function () {
+		let curHsv = this.hsv
+		let newRgb = ColorPicker.hsvToRgb({
+			h: curHsv.h,
+			s: 100,
+			v: 100
+		})
+		picker.find(".color_panel").css("background", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
+	},
+	//  设置更多颜色div 拖动条背景色
+	setPickerColor: function () {
+		let curHsv = this.hsv
+		let newRgb = ColorPicker.hsvToRgb({
+			h: curHsv.h,
+			s: 100,
+			v: 100
+		})
+		picker.find(".color_panel .picker_pin").css("color", '#' + this.hex)
+		picker.find(".hue_horizontal .picker_pin").css("color", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
+	},
+	//  设置当前颜色div背景色
+	setShowColor: function () {
+		picker.find(".color_show_now").css("background", '#' + this.hex)
+	},
+	//  输入框
+	setInputValue: function (val) {
+		picker.find('.input_hex').val(val || this.hex)
+		let rgb = ColorPicker.hexToRgb(this.hex)
+		picker.find('.input_r').val(rgb.r)
+		picker.find('.input_g').val(rgb.g)
+		picker.find('.input_b').val(rgb.b)
+	},
+	//  设置形状颜色写入本地存储
+	selectColor: function () {
+		if (options.onSelect) {
+			let color = picker.find(".color_show_now").css("background-color")
+			ColorPicker.setHistory(color)
+			options.onSelect(color.replace(/[^\d,\.]/g, ""))
+		}
+	},
+	/************************************   颜色转换    *****************************************/
+	rgbToHex: function (rgbColor) {
+		let rgbArray = rgbColor.replace(/[^\d,]/g, '').split(',')
+		let hexString = "";
+		for (let i = 0; i < 3; i++) {
+			let hex = Number(rgbArray[i]).toString(16)
+			if (hex.length < 2) {
+				hex = "0" + hex;
+			}
+			hexString += hex;
+		}
+		return hexString.toUpperCase();
+	},
+	hexToRgb: function (hexColor) {
+		let hex = hexColor.replace('#', '');
+		if (hex.length === 3) {
+			hex = hex.split('').map(function (char) {
+				return char + char;
+			}).join('');
+		}
+		let r = parseInt(hex.substring(0, 2), 16) || 0
+		let g = parseInt(hex.substring(2, 4), 16) || 0
+		let b = parseInt(hex.substring(4, 6), 16) || 0
+		return {
+			r: r,
+			g: g,
+			b: b
+		}
+	},
+	rgbToHsv: function (rgbColor) {
+		let {r, g, b} = rgbColor
+		r /= 255;
+		g /= 255;
+		b /= 255;
+		let max = Math.max(r, g, b);
+		let min = Math.min(r, g, b);
+		let diff = max - min;
+		let h, s, v;
+		// 计算色相 (H)
+		if (diff === 0) {
+			h = 0;
+		} else if (max === r) {
+			h = (60 * ((g - b) / diff) + 360) % 360;
+		} else if (max === g) {
+			h = (60 * ((b - r) / diff) + 120) % 360;
+		} else {
+			h = (60 * ((r - g) / diff) + 240) % 360;
+		}
+		// 计算饱和度 (S)
+		if (max === 0) {
+			s = 0;
+		} else {
+			s = (diff / max) * 100;
+		}
+		// 计算亮度/明度 (V)
+		v = max * 100;
+		return {
+			h: Math.round(h),
+			s: Math.round(s),
+			v: Math.round(v)
+		}
+	},
+	hsvToRgb: function (hsvColor) {
+		let {h, s, v} = hsvColor
+		s = s / 100;
+		v = v / 100;
+		var r = 0, g = 0, b = 0;
+		var i = parseInt((h / 60) % 6);
+		var f = h / 60 - i;
+		var p = v * (1 - s);
+		var q = v * (1 - f * s);
+		var t = v * (1 - (1 - f) * s);
+		switch (i) {
+			case 0:
+				r = v;
+				g = t;
+				b = p;
+				break;
+			case 1:
+				r = q;
+				g = v;
+				b = p;
+				break;
+			case 2:
+				r = p;
+				g = v;
+				b = t;
+				break;
+			case 3:
+				r = p;
+				g = q;
+				b = v;
+				break;
+			case 4:
+				r = t;
+				g = p;
+				b = v;
+				break;
+			case 5:
+				r = v;
+				g = p;
+				b = q;
+				break;
+			default:
+				break;
+		}
+		r = parseInt(r * 255)
+		g = parseInt(g * 255)
+		b = parseInt(b * 255)
+		return {
+			r,
+			g,
+			b
+		}
+	},
+	//  吸色盘
+	initColorDraw: function () {
+		if (window.EyeDropper) {
+			(new EyeDropper).open().then(function (res) {
+				let color = res.sRGBHex.replace(/[^\da-fA-F]/g, "").toUpperCase()
+				ColorPicker.setColorByInput('input_hex', color)
+				ColorPicker.selectColor()
+			}).catch(function () {
+			})
+		}
+	},
+};
 /**
  * jQuery的扩展
  */
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css
new file mode 100644
index 00000000..50d7b4f8
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css
@@ -0,0 +1,376 @@
+.color_picker {
+    width: 224px;
+    background: #fff;
+    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
+    border-radius: 4px;
+    border: 1px solid #f3f5f7;
+    padding: 8px 12px;
+    /*z-index: 99999;*/
+    box-sizing: border-box;
+    font-size: 12px;
+    color: #212930;
+}
+.color_picker .color_transparent {
+    height: 26px;
+    border-radius: 4px;
+    border: 1px solid #dfe2e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.color_picker .color_transparent:hover {
+    background: #f3f5f7
+}
+.color_picker .color_group {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 8px;
+}
+.color_picker .color_base {
+    display: flex;
+    margin-top: 4px;
+}
+
+.color_item {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid #fff;
+    position: relative;
+    overflow: hidden;
+    margin-right: 2px;
+    margin-bottom: 2px;
+}
+
+.color_picker .color_item:nth-child(10n) {
+    margin-right: 0;
+}
+.color_picker .color_item:hover {
+    box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
+}
+
+/*************************************   最近使用   *********************************/
+.color_picker .history {
+    margin-top: 4px;
+    color: #6c7d8f;
+}
+.color_picker .history .history_title {
+    line-height: 20px;
+}
+
+.color_picker .history .history_color {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 4px;
+}
+.color_picker .disabled {
+    cursor: default!important;
+    pointer-events: none
+}
+
+
+/*************************************   颜色值切换   *********************************/
+.color_picker .color_options {
+    height: 28px;
+    margin-top: 6px;
+    display: flex;
+    align-items: center
+}
+
+.color_picker .color_options .color_draw {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    flex: none
+}
+
+.color_picker .color_options .color_draw:hover {
+    background: #f3f5f9
+}
+
+.color_picker .color_options .color_edit {
+    flex: auto
+}
+
+.color_picker .color_options .color_edit>div {
+    display: flex;
+    align-items: center
+}
+
+.color_picker .color_options .color_edit>div .input_change {
+    width: 42px;
+    height: 20px;
+    margin-left: 4px;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: default;
+    flex: none
+}
+
+.color_picker .color_options .color_edit>div .input_change:hover {
+    background: #f3f5f9
+}
+
+.color_picker .color_options .color_edit>div .input_change i {
+    margin-left: 2px;
+    font-size: 12px;
+    color: #b4b9c8
+}
+
+.color_picker .color_options .color_edit>div .input_box {
+    width: 92px;
+    height: 24px;
+    border-radius: 4px;
+    border: 1px solid #e9edf2;
+    display: flex;
+    overflow: hidden;
+    flex: auto
+}
+
+.color_picker .color_options .color_edit>div .input_box:focus-within {
+    border-color: #067bef
+}
+
+.color_picker .color_options .color_edit>div .input_box input {
+    width: 30px;
+    line-height: 100%;
+    background: #fff;
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-left: 1px solid #e9edf2;
+    text-align: center;
+    flex: auto
+}
+
+.color_picker .color_options .color_edit>div .input_box input:first-child {
+    border-left: none
+}
+
+.color_picker .color_options .color_edit>div .input_box input.input_hex {
+    padding-left: 8px;
+    text-align: left
+}
+
+.color_picker .color_options .color_edit .rgb {
+    display: none
+}
+
+.color_picker .color_options .color_show {
+    display: flex;
+    flex: none;
+    margin-left: 8px
+}
+
+.color_picker .color_options .color_show span {
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgba(0,0,0,.1);
+    border-radius: 2px;
+    overflow: hidden;
+    position: relative
+}
+
+.color_picker .color_options .color_show span:after {
+    content: "";
+    display: block;
+    border-radius: 1px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+
+/*************************************   更多颜色   *********************************/
+.color_picker .color_sep {
+    height: 1px;
+    background: #e9edf2;
+    margin: 8px 0
+}
+
+.color_picker .color_more {
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    box-sizing: border-box;
+    position: relative;
+    cursor: default
+}
+
+.color_picker .color_more .color_more_bg {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    border-radius: 8px;
+    background-size: cover
+}
+
+.color_picker .color_more>.extend-icon {
+    margin-left: auto;
+    cursor: default;
+    color: #9aa5b8
+}
+
+.color_picker .color_more:hover {
+    background: #f3f5f7
+}
+
+/*************************************   颜色选择器   *********************************/
+.color_picker .color_more:hover .more_panel {
+    display: block
+}
+
+.color_picker .more_panel {
+    width: 178px;
+    height: 130px;
+    box-sizing: border-box;
+    padding: 8px;
+    background: #fff;
+    box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
+    border-radius: 4px;
+    position: absolute;
+    bottom: -9px;
+    left: calc(100% + 13px);
+    display: none;
+    user-select: none
+}
+
+.color_picker .more_panel:before {
+    content: "";
+    display: block;
+    height: 46px;
+    width: 20px;
+    position: absolute;
+    bottom: 0;
+    left: -18px
+}
+
+.color_picker .more_panel.left {
+    left: -191px
+}
+
+.color_picker .more_panel.left:before {
+    left: 100%
+}
+
+.color_picker .more_panel .color_panel {
+    width: 162px;
+    height: 100px;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden
+}
+
+.color_picker .more_panel .color_panel .saturation_white {
+    height: 100%;
+    background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0))
+}
+
+.color_picker .more_panel .color_panel .saturation_black {
+    height: 100%;
+    background: linear-gradient(0deg,#000,transparent)
+}
+
+.color_picker .more_panel .alpha_horizontal,.color_picker .more_panel .hue_horizontal {
+    width: 162px;
+    height: 8px;
+    border-radius: 4px;
+    margin-top: 8px;
+    position: relative
+}
+
+.color_picker .more_panel .alpha_horizontal .picker_pin,.color_picker .more_panel .hue_horizontal .picker_pin {
+    border: 2px solid #fff
+}
+
+.color_picker .more_panel .hue_horizontal {
+    background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)
+}
+
+.color_picker .more_panel .alpha_horizontal:before {
+    border-radius: 4px;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg,currentColor,transparent)
+}
+
+
+.color_picker .picker_pin {
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    box-shadow: 0 0 4px 0 #aaa;
+    border-radius: 6px;
+    border: 1px solid #fff;
+    margin-left: -6px;
+    margin-top: -6px;
+    position: absolute;
+    left: 50%;
+    top: 50%
+}
+
+.color_picker .picker_pin:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: currentColor;
+    border-radius: 50%
+}
+
+.color_picker.alpha_disabled .color_transparent {
+    display: none
+}
+
+.color_picker.alpha_disabled .color_item.alpha:hover:after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: "\e6eb";
+    font-size: 14px;
+    color: red;
+    background: hsla(0,0%,100%,.8);
+    position: absolute
+}
+
+/*************************************   颜色渐变   *********************************/
+.color_picker .color_extend {
+    height: 30px;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #e9edf2;
+    position: relative;
+    display: flex;
+    align-items: center
+}
+
+.color_picker .color_extend .extend_item {
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+    border-radius: 12px;
+    overflow: hidden
+}
+
+.color_picker .color_extend .extend_item img {
+    width: 100%;
+    height: 100%
+}
\ No newline at end of file