docs: 主题编辑器

2022-02-20 04:00:44 +08:00 · 2022-02-20 04:00:44 +08:00 · 8f21f8e132
commit 8f21f8e132
parent ffecfa43a4
4 changed files with 101 additions and 64 deletions
--- a/example/src/layouts/Layout.vue
+++ b/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
-              href="https://layui-vue.gitee.io/layui-vue-playground"
-              target="_blank"
-            >
-              <lay-icon type="layui-icon-util" size="15px"></lay-icon>
+            <lay-dropdown>
+              <a href="javascript:void(0);">
+                <lay-icon
+                  type="layui-icon-theme"
+                  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 type="rim" class="layui-local-badge" v-else @click="changeLocale('en_US')">英 文</lay-badge>    
+              <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:'en_US',locale: en_US, merge: true},
+      { name: "zh_CN", locale: zh_CN, 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%;
--- a/src/component/colorPicker/index.less
+++ b/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;
 }
--- a/src/component/colorPicker/index.vue
+++ b/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);
      }
--- a/src/theme/index.less
+++ b/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;
 }