yh-pub 2.0.34 → 2.0.35

package/ThemeConfig-C8pQBI3C.js

@@ -0,0 +1,570 @@
+import { defineComponent as ke, reactive as A, ref as E, resolveComponent as y, openBlock as T, createElementBlock as S, createElementVNode as l, toDisplayString as u, unref as p, createVNode as r, isRef as _e, withCtx as h, createTextVNode as V, Fragment as z, renderList as M, normalizeStyle as ye, createBlock as F } from "vue";
+import { storeToRefs as Ce } from "pinia";
+import { useRouter as Ve } from "vue-router";
+import { ElMessage as I } from "element-plus";
+import { u as fe, p as ve, c as n, D as be, a as Te, L as B, b as P, d as K, e as N, _ as we } from "./index-CGitwHqZ.js";
+import { useClientStore as xe } from "yh-client";
+import { S as Be, T as Ue } from "./themeVarLabels-CgtetVkU.js";
+const Se = { class: "theme-config-page" }, Le = { class: "config-toolbar" }, Ae = { class: "toolbar-title" }, Ee = { class: "config-section-title" }, Fe = { class: "status-grid" }, $e = ["title"], De = { class: "status-pickers" }, Re = { class: "picker-cap" }, We = { class: "status-pickers" }, He = { class: "picker-cap" }, Oe = { class: "config-section-title" }, je = { class: "layout-card" }, ze = { class: "layout-line" }, Me = { class: "layout-line wrap" }, Ie = { class: "pair" }, Pe = { class: "picker-cap" }, Ke = { class: "pair" }, Ne = { class: "picker-cap" }, Ge = { class: "layout-line wrap" }, Xe = { class: "pair" }, Ye = { class: "picker-cap" }, Ze = { class: "pair" }, qe = { class: "picker-cap" }, Je = { class: "layout-line wrap" }, Qe = { class: "pair" }, el = { class: "picker-cap" }, ll = { class: "pair" }, ol = { class: "picker-cap" }, tl = { class: "config-section-title" }, al = { class: "adv-head-row" }, sl = ["title"], rl = { class: "label-zh" }, nl = { class: "label-var" }, dl = { class: "adv-control" }, il = { class: "adv-value" }, ul = { class: "adv-control" }, pl = { class: "adv-value" }, cl = { class: "config-section-title" }, gl = { class: "preview-card" }, ml = { class: "preview-row" }, hl = { class: "preview-row" }, kl = /* @__PURE__ */ ke({
+  __name: "ThemeConfig",
+  setup(_l) {
+    const b = fe(), te = Ve(), ae = xe(ve), { mode: $ } = Ce(b);
+    function se() {
+      te.push(ae.isAdmin ? "/admin/theme-demo" : "/theme-demo");
+    }
+    function D(o) {
+      return `--${o.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+    }
+    function G(o, e) {
+      return (e === "light" ? b.lightVars : b.darkVars)[o] ?? "-";
+    }
+    function R(o) {
+      return /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\()/i.test((o || "").trim());
+    }
+    function re(o) {
+      let e = o.trim().replace("#", "");
+      (e.length === 3 || e.length === 4) && (e = e.slice(0, 3).split("").map((i) => i + i).join(""));
+      const s = parseInt(e.slice(0, 6), 16);
+      return [s >> 16 & 255, s >> 8 & 255, s & 255];
+    }
+    function ne(o, e, s) {
+      return [
+        Math.round(o[0] * (1 - s) + e[0] * s),
+        Math.round(o[1] * (1 - s) + e[1] * s),
+        Math.round(o[2] * (1 - s) + e[2] * s)
+      ];
+    }
+    function de(o) {
+      return `#${o.map((e) => e.toString(16).padStart(2, "0")).join("")}`;
+    }
+    function k(o, e, s, i) {
+      const d = (c) => (c || "").trim().toLowerCase().replace(/\s+/g, "");
+      d(i) !== d(e[s]) && (o[s] = i);
+    }
+    const W = ["primary", "success", "warning", "danger", "info"], L = (o) => o[0].toUpperCase() + o.slice(1), v = A({}), a = A({
+      headerHeight: 60,
+      asideWidth: 240,
+      asideCollapsedWidth: 60,
+      light: { gradFrom: "#0051C1", gradTo: "#3E93FE", asideBg: "#21304C", borderColor: "#f0f0f0" },
+      dark: { gradFrom: "#1a1a1a", gradTo: "#2d2d2d", asideBg: "#212223", borderColor: "#363637" }
+    });
+    function X(o) {
+      const e = /linear-gradient\(90deg,\s*(\S+)\s+0%,\s*(\S+)\s+100%\)/.exec(o || "");
+      return e ? [e[1], e[2]] : ["#0051C1", "#3E93FE"];
+    }
+    const w = A({}), x = A({});
+    function U(o) {
+      return o.map((e) => ({
+        key: e,
+        // 中文标签优先，缺失时回退为变量短名
+        label: Ue[e] || D(e).replace(/^--(el-|vxe-ui-)/, "")
+      }));
+    }
+    const H = [
+      {
+        key: "text",
+        title: n("文字颜色"),
+        items: U([
+          "elTextColorPrimary",
+          "elTextColorRegular",
+          "elTextColorSecondary",
+          "elTextColorPlaceholder",
+          "elTextColorDisabled"
+        ])
+      },
+      {
+        key: "border",
+        title: n("边框颜色"),
+        items: U([
+          "elBorderColor",
+          "elBorderColorLight",
+          "elBorderColorLighter",
+          "elBorderColorExtraLight",
+          "elBorderColorDark",
+          "elBorderColorDarker"
+        ])
+      },
+      {
+        key: "fill",
+        title: n("填充颜色"),
+        items: U([
+          "elFillColor",
+          "elFillColorLight",
+          "elFillColorLighter",
+          "elFillColorExtraLight",
+          "elFillColorDark",
+          "elFillColorDarker",
+          "elFillColorBlank"
+        ])
+      },
+      {
+        key: "bg",
+        title: n("背景与遮罩"),
+        items: U([
+          "elBgColor",
+          "elBgColorPage",
+          "elBgColorOverlay",
+          "elOverlayColor",
+          "elOverlayColorLight",
+          "elOverlayColorLighter",
+          "elMaskColor",
+          "elMaskColorExtraLight"
+        ])
+      },
+      {
+        key: "vxe",
+        title: "VXE",
+        items: U(Object.keys({ ...Te, ...be }))
+      }
+    ], Y = E([]);
+    function Z() {
+      const o = b.lightVars, e = b.darkVars;
+      W.forEach((_) => {
+        const C = `elColor${L(_)}`;
+        v[_] = {
+          light: o[C] || "#409eff",
+          dark: e[C] || "#409eff"
+        };
+      }), a.headerHeight = parseInt(o.layoutHeaderHeight, 10) || 60, a.asideWidth = parseInt(o.layoutAsideWidth, 10) || 240, a.asideCollapsedWidth = parseInt(o.layoutAsideCollapsedWidth, 10) || 60;
+      const [s, i] = X(o.layoutHeaderBackground);
+      a.light.gradFrom = s, a.light.gradTo = i;
+      const [d, c] = X(e.layoutHeaderBackground);
+      a.dark.gradFrom = d, a.dark.gradTo = c, a.light.asideBg = o.layoutAsideBackground || "#21304C", a.light.borderColor = o.layoutBorderColor || "#f0f0f0", a.dark.asideBg = e.layoutAsideBackground || "#212223", a.dark.borderColor = e.layoutBorderColor || "#363637", H.forEach((_) => {
+        _.items.forEach((C) => {
+          w[C.key] = o[C.key] ?? "", x[C.key] = e[C.key] ?? "";
+        });
+      });
+    }
+    Z();
+    function q() {
+      const o = {}, e = {};
+      k(o, B, "layoutHeaderHeight", `${a.headerHeight}px`), k(o, B, "layoutAsideWidth", `${a.asideWidth}px`), k(
+        o,
+        B,
+        "layoutAsideCollapsedWidth",
+        `${a.asideCollapsedWidth}px`
+      );
+      const s = (i, d) => `linear-gradient(90deg, ${i} 0%, ${d} 100%)`;
+      return k(
+        o,
+        B,
+        "layoutHeaderBackground",
+        s(a.light.gradFrom, a.light.gradTo)
+      ), k(
+        e,
+        P,
+        "layoutHeaderBackground",
+        s(a.dark.gradFrom, a.dark.gradTo)
+      ), k(o, B, "layoutAsideBackground", a.light.asideBg), k(o, B, "layoutBorderColor", a.light.borderColor), k(e, P, "layoutAsideBackground", a.dark.asideBg), k(e, P, "layoutBorderColor", a.dark.borderColor), W.forEach((i) => {
+        const d = `elColor${L(i)}`, c = (_) => (_ || "").trim().toLowerCase();
+        c(v[i].light) !== c(K[d]) && J(o, K, i, v[i].light, [255, 255, 255]), c(v[i].dark) !== c(N[d]) && J(e, N, i, v[i].dark, [20, 20, 20]);
+      }), H.forEach((i) => {
+        i.items.forEach((d) => {
+          k(o, K, d.key, w[d.key]), k(e, N, d.key, x[d.key]);
+        });
+      }), { light: o, dark: e };
+    }
+    function J(o, e, s, i, d) {
+      if (!R(i) || !i.startsWith("#")) return;
+      const c = L(s);
+      k(o, e, `elColor${c}`, i.toLowerCase());
+      const _ = re(i);
+      [
+        ["Light3", 0.3],
+        ["Light5", 0.5],
+        ["Light7", 0.7],
+        ["Light8", 0.8],
+        ["Light9", 0.9],
+        ["Dark2", 0.2]
+      ].forEach(([O, j]) => {
+        k(
+          o,
+          e,
+          `elColor${c}${O}`,
+          de(ne(_, d, j))
+        );
+      }), k(o, e, `elColor${c}Rgb`, _.join(", "));
+    }
+    function m() {
+      const { light: o, dark: e } = q();
+      b.extend({ light: o, dark: e });
+    }
+    function ie() {
+      b.setTheme("default"), b.extend({ light: {}, dark: {} }), Z(), I.success(n("已恢复默认主题"));
+    }
+    function Q(o) {
+      return Object.entries(o).map(([e, s]) => `    ${e}: '${s}',`).join(`
+`);
+    }
+    async function ue() {
+      const { light: o, dark: e } = q(), s = [];
+      Object.keys(o).length > 0 && s.push(`  light: {
+${Q(o)}
+  }`), Object.keys(e).length > 0 && s.push(`  dark: {
+${Q(e)}
+  }`);
+      const i = s.length > 0 ? `// 在应用入口调用（如 main.ts），仅包含相对默认值的改动
+import {useThemeStore} from 'yh-pub';
+
+useThemeStore().extend({
+${s.join(`,
+`)}
+});` : "// 当前配置与默认主题一致，无需覆盖";
+      try {
+        await navigator.clipboard.writeText(i), I.success(n("配置代码已复制到剪贴板"));
+      } catch {
+        const d = document.createElement("textarea");
+        d.value = i, d.style.position = "fixed", d.style.opacity = "0", document.body.appendChild(d), d.select(), document.execCommand("copy"), document.body.removeChild(d), I.success(n("配置代码已复制到剪贴板"));
+      }
+    }
+    const ee = E(!0), le = E(!0), oe = E("");
+    return (o, e) => {
+      const s = y("el-radio-button"), i = y("el-radio-group"), d = y("el-button"), c = y("el-color-picker"), _ = y("el-input-number"), C = y("el-input"), O = y("el-collapse-item"), j = y("el-collapse"), pe = y("el-tag"), ce = y("el-switch"), ge = y("el-checkbox"), me = y("el-progress"), he = y("el-alert");
+      return T(), S("div", Se, [
+        l("div", Le, [
+          l("span", Ae, u(p(n)("主题配置")), 1),
+          r(i, {
+            modelValue: p($),
+            "onUpdate:modelValue": e[0] || (e[0] = (t) => _e($) ? $.value = t : null),
+            onChange: e[1] || (e[1] = (t) => p(b).setMode(t))
+          }, {
+            default: h(() => [
+              r(s, { value: "light" }, {
+                default: h(() => [
+                  V(u(p(n)("亮色")), 1)
+                ]),
+                _: 1
+              }),
+              r(s, { value: "dark" }, {
+                default: h(() => [
+                  V(u(p(n)("暗色")), 1)
+                ]),
+                _: 1
+              }),
+              r(s, { value: "auto" }, {
+                default: h(() => [
+                  V(u(p(n)("跟随系统")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          e[17] || (e[17] = l("div", { class: "flex-grow" }, null, -1)),
+          r(d, { onClick: se }, {
+            default: h(() => [
+              V(u(p(n)("前往主题演示")), 1)
+            ]),
+            _: 1
+          }),
+          r(d, { onClick: ie }, {
+            default: h(() => [
+              V(u(p(n)("恢复默认")), 1)
+            ]),
+            _: 1
+          }),
+          r(d, {
+            type: "primary",
+            onClick: ue
+          }, {
+            default: h(() => [
+              V(u(p(n)("复制配置代码")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        l("h3", Ee, u(p(n)("状态色（自动派生变体）")), 1),
+        l("div", Fe, [
+          (T(), S(z, null, M(W, (t) => {
+            var g;
+            return l("div", {
+              key: t,
+              class: "status-row"
+            }, [
+              l("span", {
+                class: "status-chip",
+                style: ye({ backgroundColor: (g = v[t]) == null ? void 0 : g.light })
+              }, null, 4),
+              l("span", {
+                class: "status-name",
+                title: `elColor${L(t)}`
+              }, u(p(Be)[t] || t) + " " + u(t), 9, $e),
+              l("div", De, [
+                r(c, {
+                  modelValue: v[t].light,
+                  "onUpdate:modelValue": (f) => v[t].light = f,
+                  onChange: m
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                l("span", Re, u(p(n)("亮色")), 1)
+              ]),
+              l("div", We, [
+                r(c, {
+                  modelValue: v[t].dark,
+                  "onUpdate:modelValue": (f) => v[t].dark = f,
+                  onChange: m
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                l("span", He, u(p(n)("暗色")), 1)
+              ])
+            ]);
+          }), 64))
+        ]),
+        l("h3", Oe, u(p(n)("布局变量")), 1),
+        l("div", je, [
+          l("div", ze, [
+            e[18] || (e[18] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "头部高度"),
+              l("span", { class: "label-var" }, "--layout-header-height")
+            ], -1)),
+            r(_, {
+              modelValue: a.headerHeight,
+              "onUpdate:modelValue": e[2] || (e[2] = (t) => a.headerHeight = t),
+              min: 40,
+              max: 120,
+              step: 4,
+              onChange: m
+            }, null, 8, ["modelValue"]),
+            e[19] || (e[19] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "侧边栏宽度"),
+              l("span", { class: "label-var" }, "--layout-aside-width")
+            ], -1)),
+            r(_, {
+              modelValue: a.asideWidth,
+              "onUpdate:modelValue": e[3] || (e[3] = (t) => a.asideWidth = t),
+              min: 160,
+              max: 400,
+              step: 10,
+              onChange: m
+            }, null, 8, ["modelValue"]),
+            e[20] || (e[20] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "收起宽度"),
+              l("span", { class: "label-var" }, "--layout-aside-collapsed-width")
+            ], -1)),
+            r(_, {
+              modelValue: a.asideCollapsedWidth,
+              "onUpdate:modelValue": e[4] || (e[4] = (t) => a.asideCollapsedWidth = t),
+              min: 40,
+              max: 120,
+              step: 4,
+              onChange: m
+            }, null, 8, ["modelValue"]),
+            e[21] || (e[21] = l("span", { class: "unit" }, "px", -1))
+          ]),
+          l("div", Me, [
+            e[24] || (e[24] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "头部背景（渐变）"),
+              l("span", { class: "label-var" }, "--layout-header-background")
+            ], -1)),
+            l("div", Ie, [
+              l("span", Pe, u(p(n)("亮色")), 1),
+              r(c, {
+                modelValue: a.light.gradFrom,
+                "onUpdate:modelValue": e[5] || (e[5] = (t) => a.light.gradFrom = t),
+                onChange: m
+              }, null, 8, ["modelValue"]),
+              e[22] || (e[22] = l("span", { class: "arrow" }, "→", -1)),
+              r(c, {
+                modelValue: a.light.gradTo,
+                "onUpdate:modelValue": e[6] || (e[6] = (t) => a.light.gradTo = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", Ke, [
+              l("span", Ne, u(p(n)("暗色")), 1),
+              r(c, {
+                modelValue: a.dark.gradFrom,
+                "onUpdate:modelValue": e[7] || (e[7] = (t) => a.dark.gradFrom = t),
+                onChange: m
+              }, null, 8, ["modelValue"]),
+              e[23] || (e[23] = l("span", { class: "arrow" }, "→", -1)),
+              r(c, {
+                modelValue: a.dark.gradTo,
+                "onUpdate:modelValue": e[8] || (e[8] = (t) => a.dark.gradTo = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ])
+          ]),
+          l("div", Ge, [
+            e[25] || (e[25] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "侧边栏背景"),
+              l("span", { class: "label-var" }, "--layout-aside-background")
+            ], -1)),
+            l("div", Xe, [
+              l("span", Ye, u(p(n)("亮色")), 1),
+              r(c, {
+                modelValue: a.light.asideBg,
+                "onUpdate:modelValue": e[9] || (e[9] = (t) => a.light.asideBg = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", Ze, [
+              l("span", qe, u(p(n)("暗色")), 1),
+              r(c, {
+                modelValue: a.dark.asideBg,
+                "onUpdate:modelValue": e[10] || (e[10] = (t) => a.dark.asideBg = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ])
+          ]),
+          l("div", Je, [
+            e[26] || (e[26] = l("div", { class: "line-label" }, [
+              l("span", { class: "label-zh" }, "布局边框色"),
+              l("span", { class: "label-var" }, "--layout-border-color")
+            ], -1)),
+            l("div", Qe, [
+              l("span", el, u(p(n)("亮色")), 1),
+              r(c, {
+                modelValue: a.light.borderColor,
+                "onUpdate:modelValue": e[11] || (e[11] = (t) => a.light.borderColor = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", ll, [
+              l("span", ol, u(p(n)("暗色")), 1),
+              r(c, {
+                modelValue: a.dark.borderColor,
+                "onUpdate:modelValue": e[12] || (e[12] = (t) => a.dark.borderColor = t),
+                onChange: m
+              }, null, 8, ["modelValue"])
+            ])
+          ])
+        ]),
+        l("h3", tl, u(p(n)("高级配置（全部变量）")), 1),
+        r(j, {
+          modelValue: Y.value,
+          "onUpdate:modelValue": e[13] || (e[13] = (t) => Y.value = t)
+        }, {
+          default: h(() => [
+            (T(), S(z, null, M(H, (t) => r(O, {
+              key: t.key,
+              name: t.key,
+              title: `${t.title}（${t.items.length}）`
+            }, {
+              default: h(() => [
+                l("div", al, [
+                  l("span", null, u(p(n)("变量")), 1),
+                  l("span", null, u(p(n)("亮色值")), 1),
+                  l("span", null, u(p(n)("暗色值")), 1)
+                ]),
+                (T(!0), S(z, null, M(t.items, (g) => (T(), S("div", {
+                  key: g.key,
+                  class: "adv-row"
+                }, [
+                  l("span", {
+                    class: "adv-label",
+                    title: D(g.key)
+                  }, [
+                    l("span", rl, u(g.label), 1),
+                    l("span", nl, u(D(g.key)), 1)
+                  ], 8, sl),
+                  l("div", dl, [
+                    R(w[g.key]) ? (T(), F(c, {
+                      key: 0,
+                      modelValue: w[g.key],
+                      "onUpdate:modelValue": (f) => w[g.key] = f,
+                      "show-alpha": "",
+                      onChange: m
+                    }, null, 8, ["modelValue", "onUpdate:modelValue"])) : (T(), F(C, {
+                      key: 1,
+                      modelValue: w[g.key],
+                      "onUpdate:modelValue": (f) => w[g.key] = f,
+                      size: "small",
+                      onChange: m
+                    }, null, 8, ["modelValue", "onUpdate:modelValue"])),
+                    l("span", il, u(G(g.key, "light")), 1)
+                  ]),
+                  l("div", ul, [
+                    R(x[g.key]) ? (T(), F(c, {
+                      key: 0,
+                      modelValue: x[g.key],
+                      "onUpdate:modelValue": (f) => x[g.key] = f,
+                      "show-alpha": "",
+                      onChange: m
+                    }, null, 8, ["modelValue", "onUpdate:modelValue"])) : (T(), F(C, {
+                      key: 1,
+                      modelValue: x[g.key],
+                      "onUpdate:modelValue": (f) => x[g.key] = f,
+                      size: "small",
+                      onChange: m
+                    }, null, 8, ["modelValue", "onUpdate:modelValue"])),
+                    l("span", pl, u(G(g.key, "dark")), 1)
+                  ])
+                ]))), 128))
+              ]),
+              _: 2
+            }, 1032, ["name", "title"])), 64))
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        l("h3", cl, u(p(n)("实时预览")), 1),
+        l("div", gl, [
+          l("div", ml, [
+            r(d, { type: "primary" }, {
+              default: h(() => [...e[27] || (e[27] = [
+                V("Primary", -1)
+              ])]),
+              _: 1
+            }),
+            r(d, { type: "success" }, {
+              default: h(() => [...e[28] || (e[28] = [
+                V("Success", -1)
+              ])]),
+              _: 1
+            }),
+            r(d, { type: "warning" }, {
+              default: h(() => [...e[29] || (e[29] = [
+                V("Warning", -1)
+              ])]),
+              _: 1
+            }),
+            r(d, { type: "danger" }, {
+              default: h(() => [...e[30] || (e[30] = [
+                V("Danger", -1)
+              ])]),
+              _: 1
+            }),
+            r(pe, { type: "primary" }, {
+              default: h(() => [...e[31] || (e[31] = [
+                V("Tag", -1)
+              ])]),
+              _: 1
+            }),
+            r(ce, {
+              modelValue: ee.value,
+              "onUpdate:modelValue": e[14] || (e[14] = (t) => ee.value = t)
+            }, null, 8, ["modelValue"]),
+            r(ge, {
+              modelValue: le.value,
+              "onUpdate:modelValue": e[15] || (e[15] = (t) => le.value = t)
+            }, {
+              default: h(() => [
+                V(u(p(n)("复选框")), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          l("div", hl, [
+            r(C, {
+              modelValue: oe.value,
+              "onUpdate:modelValue": e[16] || (e[16] = (t) => oe.value = t),
+              placeholder: p(n)("输入框"),
+              style: { width: "200px" }
+            }, null, 8, ["modelValue", "placeholder"]),
+            r(me, {
+              percentage: 66,
+              style: { width: "180px" }
+            })
+          ]),
+          r(he, {
+            title: p(n)("布局头部与侧边栏即为实时预览效果，修改立即生效。"),
+            type: "info",
+            "show-icon": ""
+          }, null, 8, ["title"])
+        ])
+      ]);
+    };
+  }
+}), wl = /* @__PURE__ */ we(kl, [["__scopeId", "data-v-cf188a76"]]);
+export {
+  wl as default
+};
+//# sourceMappingURL=ThemeConfig-C8pQBI3C.js.map