docs: 主题编辑器

src/component/colorPicker/index.less

@@ -1,9 +1,11 @@
+@import "../../theme/variable.less";
+
 .layui-color-picker {
   position: relative;
   user-select: none;
   width: 320px;
   background: #fff;
-  padding: 10px;
+  padding: 8px;
 }
 
 /* 饱和度和亮度 */
@@ -106,6 +108,7 @@
   width: 26px;
   height: 26px;
   display: block;
+  border-radius: @global-border-radius;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
   background-size: 10px 10px;
 }

src/component/colorPicker/index.vue

@@ -101,7 +101,7 @@ import "./index.less";
 import LayDropdown from "../dropdown/index.vue";
 import { ref, computed, watch, onMounted } from "vue";
 
-const emit = defineEmits(["update:color"]);
+const emit = defineEmits(["update:modelValue"]);
 
 export interface LayColorPicker {
   modelValue?: any;
@@ -128,7 +128,6 @@ let value = ref(1);
 let red = ref(255);
 let green = ref(0);
 let blue = ref(0);
-
 let alpha = ref(1);
 
 onMounted(() => {
@@ -140,12 +139,11 @@ onMounted(() => {
 });
 
 watch([red, green, blue], (newValue) => {
-  emit("update:color", {
-    r: red.value,
-    g: green.value,
-    b: blue.value,
-    a: alpha.value,
-  });
+  
+  emit("update:modelValue", rgba2hex(red.value,
+    green.value,
+    blue.value,
+    alpha.value));
 
   let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
 
@@ -160,12 +158,10 @@ watch([red, green, blue], (newValue) => {
 });
 
 watch(alpha, () => {
-  emit("update:color", {
-    r: red.value,
-    g: green.value,
-    b: blue.value,
-    a: alpha.value,
-  });
+  emit("update:modelValue", rgba2hex(red.value,
+    green.value,
+    blue.value,
+    alpha.value));
   // 移动透明度滑块
   alphaSliderStyle.value = `left: ${
     alpha.value >= 1 ? "calc(100% - 6px)" : alpha.value * 100 + "%"
@@ -351,9 +347,7 @@ function parseColor(color: any) {
     let r, g, b, a;
     if (typeof color === "string") {
       if (
-        /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
-          color
-        )
+        /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)
       ) {
         return hex2rgba(color);
       }

src/theme/index.less

@@ -1925,23 +1925,18 @@ a cite {
   left: 0;
   z-index: 899;
   min-width: 100%;
-  max-height: 360px;
+  //max-height: 360px;
   overflow-y: auto;
   background-color: #fff;
   box-sizing: border-box;
 }
-.layui-dropdown dl::before {
-  content: " ";
-  display: block;
-  height: 4px;
-  width: 100%;
-}
+
 .layui-dropdown dl > .layui-dropdown-menu {
   border: 1px solid #eee;
   border-radius: @global-border-radius;
 }
 
-.layui-dropdown-up dl {
+.layui-dropdown-up > dl {
   display: block;
 }
 
@@ -2619,11 +2614,9 @@ body .layui-util-face .layui-layer-content {
 }
 
 .layui-colorpicker {
-  width: 26px;
-  height: 26px;
   border: 1px solid #eee;
   padding: 5px;
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   line-height: 24px;
   display: inline-block;
   cursor: pointer;
@@ -2664,7 +2657,7 @@ body .layui-util-face .layui-layer-content {
   height: 100%;
   box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
+  border-radius: @global-border-radius;
   text-align: center;
 }