docs: 主题编辑器

example/src/layouts/Layout.vue

@@ -3,7 +3,8 @@
     :theme="theme"
     :locale="locale"
     :locales="locales"
-    :themeVariable="themeVariable">
+    :themeVariable="themeVariable"
+  >
     <lay-layout class="layui-layout-document">
       <lay-header
         ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
@@ -14,19 +15,25 @@
           style="margin-top: 0px; margin-bottom: 0px"
         >
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/index"> {{ t('nav.home')}} </router-link>
+            <router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
           </li>
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/guide"> {{ t('nav.guide')}} </router-link>
+            <router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
           </li>
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/components"> {{ t('nav.components') }} </router-link>
+            <router-link to="/zh-CN/components">
+              {{ t("nav.components") }}
+            </router-link>
           </li>
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/environment"> {{ t('nav.environment') }} </router-link>
+            <router-link to="/zh-CN/environment">
+              {{ t("nav.environment") }}
+            </router-link>
           </li>
           <li class="layui-nav-item">
-            <router-link to="/zh-CN/material"> {{ t('nav.material') }} </router-link>
+            <router-link to="/zh-CN/material">
+              {{ t("nav.material") }}
+            </router-link>
           </li>
           <li class="layui-nav-item">
             <lay-form>
@@ -39,12 +46,30 @@
           style="margin-top: 0px; margin-bottom: 0px"
         >
           <li class="layui-nav-item">
-            <a
+            <lay-dropdown>
-              href="https://layui-vue.gitee.io/layui-vue-playground"
+              <a href="javascript:void(0);">
-              target="_blank"
+                <lay-icon
-            >
+                  type="layui-icon-theme"
-              <lay-icon type="layui-icon-util" size="15px"></lay-icon>
+                  size="15px"
+                  style="
+                    color: rgba(255, 255, 255, 0.7);
+                    padding-left: 30px;
+                    padding-right: 30px;
+                  "
+                ></lay-icon>
               </a>
+              <template #content>
+                <div style="width: 400px; padding:0px 10px 10px 10px;">
+                  <lay-color-picker v-model="themeVariable['--global-primary-color']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-normal-color']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-warm-color']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-danger-color']"></lay-color-picker>&nbsp;
+                  <lay-color-picker v-model="themeVariable['--global-checked-color']"></lay-color-picker>&nbsp;
+                  <lay-input style="display:inline-block;width:150px;" v-model="themeVariable['--global-border-radius']"></lay-input>
+                  <lay-button fluid>导 出 配 置</lay-button>
+                </div>
+              </template>
+            </lay-dropdown>
           </li>
           <li class="layui-nav-item">
             <a href="https://gitee.com/layui-vue">
@@ -53,8 +78,20 @@
           </li>
           <li class="layui-nav-item">
             <a href="javascript:void(0)">
-              <lay-badge type="rim" class="layui-local-badge" v-if="locale === 'en_US'" @click="changeLocale('zh_CN')">中 文</lay-badge>
+              <lay-badge
-              <lay-badge type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge>    
+                type="rim"
+                class="layui-local-badge"
+                v-if="locale === 'en_US'"
+                @click="changeLocale('zh_CN')"
+                >中 文</lay-badge
+              >
+              <lay-badge
+                type="rim"
+                class="layui-local-badge"
+                v-else
+                @click="changeLocale('en_US')"
+                >英 文</lay-badge
+              >
             </a>
           </li>
           <li class="layui-nav-item">
@@ -72,26 +109,33 @@
   </lay-config-provider>
 </template>
 <script>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import menu from "../view/utils/menus";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 import zh_CN from "../locales/zh_CN.ts";
 import en_US from "../locales/en_US.ts";
 export default {
   setup() {
-
     const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();
-    const locale = ref('zh_CN');
+    const locale = ref("zh_CN");
     const currentPath = ref("/zh-CN/guide");
     const locales = [
-      {name:'zh_CN',locale: zh_CN, merge: true},
+      { name: "zh_CN", locale: zh_CN, merge: true },
-      {name:'en_US',locale: en_US, merge: true},
+      { name: "en_US", locale: en_US, merge: true },
     ];
+
     const theme = "light";
-    const themeVariable = {}
+    const themeVariable = ref({
+      "--global-primary-color": "#009688",
+      "--global-normal-color": "#1e9fff",
+      "--global-warm-color": "#ffb800",
+      "--global-danger-color": "#ff5722",
+      "--global-checked-color": "#5fb878",
+      "--global-border-radius": "2px"
+    });
 
     const menus = [];
 
@@ -101,9 +145,13 @@ export default {
       });
     });
 
-    watch(() => route.path, (val) => {
+    watch(
+      () => route.path,
+      (val) => {
         currentPath.value = val;
-      },{immediate: true, deep: true});
+      },
+      { immediate: true, deep: true }
+    );
 
     const handleClick = function (menu) {
       router.push(menu.path);
@@ -111,7 +159,7 @@ export default {
 
     const changeLocale = function (lang) {
       locale.value = lang;
-    }
+    };
 
     return {
       t,
@@ -122,14 +170,13 @@ export default {
       currentPath,
       handleClick,
       changeLocale,
-      themeVariable
+      themeVariable,
     };
   },
 };
 </script>
 
 <style>
-
 .layui-layout-document > .layui-header {
   z-index: 9999;
   width: 100%;

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,
+  emit("update:modelValue", rgba2hex(red.value,
-    g: green.value,
+    green.value,
-    b: blue.value,
+    blue.value,
-    a: alpha.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", {
+  emit("update:modelValue", rgba2hex(red.value,
-    r: red.value,
+    green.value,
-    g: green.value,
+    blue.value,
-    b: blue.value,
+    alpha.value));
-    a: 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(
+        /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)
-          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;
 }