@robot-admin/layout 0.1.0

package/dist/index.js

@@ -0,0 +1,888 @@
+import { ref as d, computed as D, watch as F, defineComponent as te, useModel as se, onUnmounted as oe, openBlock as R, createBlock as ie, unref as i, withCtx as n, createVNode as a, createElementVNode as t, createElementBlock as W, Fragment as J, renderList as Y, normalizeClass as G, toDisplayString as h, normalizeStyle as le, createTextVNode as c, createCommentVNode as X, mergeModels as ae } from "vue";
+import { useMessage as ne, useDialog as re, NDrawer as de, NDrawerContent as ue, NTabs as ce, NTabPane as j, NRadioGroup as K, NRadioButton as M, NColorPicker as ve, NSwitch as H, NButton as O, NSlider as q, NInput as me } from "naive-ui";
+import { defineStore as pe } from "pinia";
+const ge = [
+  { name: "拂晓蓝", value: "#409eff" },
+  { name: "薄暮红", value: "#f5222d" },
+  { name: "火山橙", value: "#fa541c" },
+  { name: "日暮黄", value: "#faad14" },
+  { name: "极光绿", value: "#52c41a" },
+  { name: "明青", value: "#13c2c2" },
+  { name: "极客蓝", value: "#2f54eb" },
+  { name: "酱紫", value: "#722ed1" }
+], fe = [
+  {
+    name: "科技蓝",
+    icon: "💙",
+    primaryColor: "#409eff"
+  },
+  {
+    name: "清新绿",
+    icon: "💚",
+    primaryColor: "#52c41a"
+  },
+  {
+    name: "商务灰",
+    icon: "🖤",
+    primaryColor: "#595959"
+  },
+  {
+    name: "活力橙",
+    icon: "🧡",
+    primaryColor: "#fa8c16"
+  },
+  {
+    name: "优雅紫",
+    icon: "💜",
+    primaryColor: "#722ed1"
+  },
+  {
+    name: "经典红",
+    icon: "❤️",
+    primaryColor: "#f5222d"
+  }
+], Bt = [
+  {
+    mode: "side",
+    label: "左侧菜单",
+    description: "经典的左侧导航布局",
+    icon: "i-mdi:page-layout-sidebar-left"
+  },
+  {
+    mode: "top",
+    label: "顶部菜单",
+    description: "顶部水平导航布局",
+    icon: "i-mdi:page-layout-header"
+  },
+  {
+    mode: "mix",
+    label: "混合菜单",
+    description: "顶部 + 侧边混合布局",
+    icon: "i-mdi:page-layout-header-sidebar-left"
+  },
+  {
+    mode: "mix-top",
+    label: "顶部混合",
+    description: "侧边优先的混合布局",
+    icon: "i-mdi:page-layout-sidebar-left-header"
+  },
+  {
+    mode: "reverse-horizontal-mix",
+    label: "反转混合",
+    description: "反转的水平混合布局",
+    icon: "i-mdi:page-layout-header-footer"
+  },
+  {
+    mode: "card-layout",
+    label: "卡片布局",
+    description: "卡片式布局风格",
+    icon: "i-mdi:card-outline"
+  }
+], ye = {
+  small: "4px",
+  medium: "6px",
+  large: "8px"
+}, he = {
+  fade: "fade-transform",
+  slide: "fade-slide",
+  zoom: "fade-zoom",
+  none: ""
+}, m = {
+  // 外观
+  themeMode: "light",
+  primaryColor: "#409eff",
+  borderRadius: "medium",
+  transitionType: "slide",
+  enableTransition: !0,
+  // 布局
+  layoutMode: "side",
+  fixedHeader: !0,
+  showBreadcrumb: !0,
+  showBreadcrumbIcon: !0,
+  showTagsView: !0,
+  tagsViewHeight: 44,
+  tagsViewStyle: "default",
+  showFooter: !0,
+  sidebarWidth: 220,
+  sidebarCollapsedWidth: 64,
+  headerHeight: 56,
+  // 高级
+  enableHotkeys: !0,
+  version: "1.0.0"
+}, Ut = ge.map((b) => b.value);
+function Q(b, u) {
+  const v = parseInt(b.replace("#", ""), 16), s = Math.min(255, Math.max(0, (v >> 16) + u)), w = Math.min(255, Math.max(0, (v >> 8 & 255) + u)), p = Math.min(255, Math.max(0, (v & 255) + u));
+  return `#${(s << 16 | w << 8 | p).toString(16).padStart(6, "0")}`;
+}
+function Z(b = {}) {
+  const { defaults: u = {}, onThemeModeChange: v } = b, s = {
+    ...m,
+    ...u
+  };
+  return pe("settings", () => {
+    const w = d(s.themeMode), p = d(s.primaryColor), x = d(s.borderRadius), f = d(s.transitionType), y = d(s.enableTransition), S = d(s.layoutMode), g = d(s.fixedHeader), V = d(s.showBreadcrumb), L = d(s.showBreadcrumbIcon), C = d(s.showTagsView), E = d(s.tagsViewHeight), P = d(s.tagsViewStyle), I = d(s.showFooter), _ = d(s.sidebarWidth), B = d(
+      s.sidebarCollapsedWidth
+    ), U = d(s.headerHeight), N = d(s.enableHotkeys), $ = d(s.version), A = D(
+      () => ye[x.value]
+    ), z = D(() => he[f.value]), l = D(
+      () => y.value && f.value !== "none"
+    ), e = D(() => ({
+      themeMode: w.value,
+      primaryColor: p.value,
+      borderRadius: x.value,
+      transitionType: f.value,
+      enableTransition: y.value,
+      layoutMode: S.value,
+      fixedHeader: g.value,
+      showBreadcrumb: V.value,
+      showBreadcrumbIcon: L.value,
+      showTagsView: C.value,
+      tagsViewHeight: E.value,
+      tagsViewStyle: P.value,
+      showFooter: I.value,
+      sidebarWidth: _.value,
+      sidebarCollapsedWidth: B.value,
+      headerHeight: U.value,
+      enableHotkeys: N.value,
+      version: $.value
+    })), o = () => {
+      if (typeof document > "u") return;
+      const r = document.documentElement;
+      r.style.setProperty("--primary-color", p.value), r.style.setProperty(
+        "--primary-color-hover",
+        Q(p.value, 10)
+      ), r.style.setProperty(
+        "--primary-color-pressed",
+        Q(p.value, -10)
+      ), r.style.setProperty("--border-radius", A.value), r.style.setProperty("--sidebar-width", `${_.value}px`), r.style.setProperty(
+        "--sidebar-collapsed-width",
+        `${B.value}px`
+      ), r.style.setProperty("--header-height", `${U.value}px`), r.style.setProperty("--tags-view-height", `${E.value}px`);
+    }, T = async (r) => {
+      p.value = r.primaryColor, r.settings && (r.settings.borderRadius && (x.value = r.settings.borderRadius), r.settings.transitionType && (f.value = r.settings.transitionType), r.settings.showBreadcrumb !== void 0 && (V.value = r.settings.showBreadcrumb), r.settings.showTagsView !== void 0 && (C.value = r.settings.showTagsView), r.settings.tagsViewStyle && (P.value = r.settings.tagsViewStyle));
+    }, k = () => {
+      w.value = s.themeMode, p.value = s.primaryColor, x.value = s.borderRadius, f.value = s.transitionType, y.value = s.enableTransition, S.value = s.layoutMode, g.value = s.fixedHeader, V.value = s.showBreadcrumb, L.value = s.showBreadcrumbIcon, C.value = s.showTagsView, E.value = s.tagsViewHeight, P.value = s.tagsViewStyle, I.value = s.showFooter, _.value = s.sidebarWidth, B.value = s.sidebarCollapsedWidth, U.value = s.headerHeight, N.value = s.enableHotkeys;
+    }, ee = async (r) => {
+      w.value = r, v && await v(r);
+    };
+    return F(
+      [
+        p,
+        A,
+        _,
+        B,
+        U,
+        E
+      ],
+      () => {
+        o();
+      },
+      { immediate: !0 }
+    ), {
+      // 状态
+      themeMode: w,
+      primaryColor: p,
+      borderRadius: x,
+      transitionType: f,
+      enableTransition: y,
+      layoutMode: S,
+      fixedHeader: g,
+      showBreadcrumb: V,
+      showBreadcrumbIcon: L,
+      showTagsView: C,
+      tagsViewHeight: E,
+      tagsViewStyle: P,
+      showFooter: I,
+      sidebarWidth: _,
+      sidebarCollapsedWidth: B,
+      headerHeight: U,
+      enableHotkeys: N,
+      version: $,
+      // 计算属性
+      borderRadiusValue: A,
+      transitionName: z,
+      shouldEnableTransition: l,
+      settingsState: e,
+      // 方法
+      syncCSSVariables: o,
+      applyPreset: T,
+      resetSettings: k,
+      updateThemeMode: ee
+    };
+  });
+}
+const be = Z(), we = [
+  "#409eff",
+  "#f5222d",
+  "#fa541c",
+  "#faad14",
+  "#52c41a",
+  "#13c2c2",
+  "#2f54eb",
+  "#722ed1"
+], xe = [
+  {
+    label: "左侧菜单（默认）",
+    value: "side",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="16" height="48" rx="1" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="18" y="0" width="38" height="10" rx="1" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="18" y="12" width="38" height="34" rx="1" fill="currentColor" fill-opacity="0.4"/>
+    `
+  },
+  {
+    label: "顶部菜单（清爽）",
+    value: "top",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="56" height="10" rx="1" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="0" y="12" width="56" height="8" rx="1" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="0" y="22" width="56" height="24" rx="1" fill="currentColor" fill-opacity="0.4"/>
+    `
+  },
+  {
+    label: "左侧混合（灵巧）",
+    value: "mix",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="8" height="48" rx="1" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="10" y="0" width="14" height="48" rx="1" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="26" y="0" width="30" height="10" rx="1" fill="currentColor" fill-opacity="0.6"/>
+      <rect x="26" y="12" width="30" height="34" rx="1" fill="currentColor" fill-opacity="0.4"/>
+    `
+  },
+  {
+    label: "顶部混合（侧优）",
+    value: "mix-top",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="8" height="48" rx="1" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="10" y="0" width="46" height="10" rx="1" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="10" y="12" width="46" height="34" rx="1" fill="currentColor" fill-opacity="0.4"/>
+    `
+  },
+  {
+    label: "反转混合（另类）",
+    value: "reverse-horizontal-mix",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="56" height="10" rx="1" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="44" y="12" width="12" height="34" rx="1" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="0" y="12" width="42" height="34" rx="1" fill="currentColor" fill-opacity="0.4"/>
+    `
+  },
+  {
+    label: "卡片网格（新颖）",
+    value: "card-layout",
+    disabled: !1,
+    svg: `
+      <rect x="0" y="0" width="24" height="20" rx="2" fill="currentColor" fill-opacity="0.9"/>
+      <rect x="32" y="0" width="24" height="20" rx="2" fill="currentColor" fill-opacity="0.7"/>
+      <rect x="0" y="24" width="24" height="20" rx="2" fill="currentColor" fill-opacity="0.6"/>
+      <rect x="32" y="24" width="24" height="20" rx="2" fill="currentColor" fill-opacity="0.4"/>
+    `
+  }
+], Ce = { class: "settings-section" }, Te = { class: "preset-grid" }, ke = ["onClick"], Se = { class: "preset-icon" }, Me = { class: "preset-name" }, Re = { class: "preset-color" }, He = { class: "settings-section" }, Ve = { class: "settings-section" }, Ee = { class: "color-picker-wrapper" }, _e = { class: "color-value" }, Be = { class: "settings-section" }, Ue = { class: "settings-section" }, We = { class: "flex items-center justify-between mb-2" }, Oe = { class: "settings-section" }, Le = { class: "settings-section" }, Pe = { class: "layout-grid" }, Ie = ["onClick"], Ne = { class: "layout-screenshot" }, Ae = {
+  class: "layout-svg",
+  viewBox: "0 0 56 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, De = ["innerHTML"], Fe = { class: "layout-label" }, $e = {
+  key: 0,
+  class: "badge-soon"
+}, ze = { class: "settings-section" }, je = { class: "setting-item" }, Ke = { class: "setting-item" }, Je = { class: "setting-item" }, Ye = { class: "setting-item" }, Ge = { class: "settings-section" }, Xe = { class: "slider-item" }, qe = { class: "slider-label" }, Qe = { class: "slider-value" }, Ze = { class: "slider-item" }, et = { class: "slider-label" }, tt = { class: "slider-value" }, st = { class: "settings-section" }, ot = { class: "settings-section" }, it = { class: "action-buttons-grid" }, lt = { class: "settings-section" }, at = { class: "action-buttons-grid" }, nt = { class: "settings-section" }, rt = { class: "setting-item" }, dt = { class: "setting-item" }, ut = { class: "settings-section" }, ct = { class: "setting-item" }, vt = {
+  key: 0,
+  class: "mt-2"
+}, mt = { class: "settings-section" }, pt = { class: "system-info" }, gt = { class: "info-item" }, ft = { class: "info-value" }, yt = { class: "info-item" }, ht = { class: "info-value" }, bt = { class: "info-item" }, wt = { class: "info-value" }, xt = { class: "info-item" }, Ct = { class: "info-value" }, Tt = { class: "info-item" }, kt = { class: "info-value" }, St = { class: "info-item" }, Mt = { class: "info-value" }, Rt = /* @__PURE__ */ te({
+  __name: "index",
+  props: /* @__PURE__ */ ae({
+    storageKey: {}
+  }, {
+    show: { type: Boolean, default: !1 },
+    showModifiers: {}
+  }),
+  emits: ["update:show"],
+  setup(b) {
+    const u = ne(), v = re(), s = be(), w = se(b, "show"), p = d("appearance"), x = d(!1), f = d(!1), y = d(!1), S = d("Robot Admin");
+    let g = null;
+    const V = (l) => {
+      g && (document.body.removeChild(g), g = null);
+      const e = document.createElement("canvas"), o = e.getContext("2d");
+      e.width = 200, e.height = 150, o.font = "14px Microsoft JhengHei", o.fillStyle = "rgba(120, 120, 120, 0.15)", o.rotate(-20 * Math.PI / 180), o.fillText(l, 0, 80), g = document.createElement("div"), g.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background-image: url(${e.toDataURL()});
+    background-repeat: repeat;
+    z-index: 9999;
+    user-select: none;
+  `, document.body.appendChild(g);
+    }, L = () => {
+      g && (document.body.removeChild(g), g = null);
+    };
+    F(x, (l) => {
+      document.documentElement.classList.toggle("gray-mode", l);
+    }), F(f, (l) => {
+      document.documentElement.classList.toggle("color-weak-mode", l);
+    }), F(y, (l) => {
+      l ? V(S.value) : L();
+    }), F(S, (l) => {
+      y.value && V(l);
+    });
+    const C = D(() => {
+      const l = navigator.userAgent;
+      let e = "Unknown", o = "Unknown";
+      return l.includes("Chrome") ? e = "Chrome" : l.includes("Firefox") ? e = "Firefox" : l.includes("Safari") ? e = "Safari" : l.includes("Edge") && (e = "Edge"), l.includes("Windows") ? o = "Windows" : l.includes("Mac") ? o = "macOS" : l.includes("Linux") ? o = "Linux" : l.includes("Android") ? o = "Android" : l.includes("iOS") && (o = "iOS"), {
+        browser: e,
+        os: o,
+        resolution: `${window.screen.width} × ${window.screen.height}`,
+        pixelRatio: window.devicePixelRatio + "x",
+        language: navigator.language,
+        timezone: "XIAn"
+      };
+    });
+    oe(() => {
+      L();
+    });
+    const E = (l, e) => {
+      l.stopPropagation(), s.layoutMode = e;
+    }, P = (l) => s.primaryColor === l.primaryColor, I = (l) => {
+      s.applyPreset(l), u.success(`已应用「${l.name}」主题方案`);
+    }, _ = () => {
+      s.themeMode = m.themeMode, s.primaryColor = m.primaryColor, s.borderRadius = m.borderRadius, s.transitionType = m.transitionType, s.enableTransition = m.enableTransition, u.success("已恢复外观默认设置");
+    }, B = () => {
+      s.layoutMode = m.layoutMode, s.showBreadcrumb = m.showBreadcrumb, s.showBreadcrumbIcon = m.showBreadcrumbIcon, s.showTagsView = m.showTagsView, s.showFooter = m.showFooter, s.sidebarWidth = m.sidebarWidth, s.sidebarCollapsedWidth = m.sidebarCollapsedWidth, s.headerHeight = m.headerHeight, s.tagsViewHeight = m.tagsViewHeight, u.success("已恢复布局默认设置");
+    }, U = () => {
+      v.warning({
+        title: "确认重置",
+        content: "确定要恢复默认配置吗？此操作不可撤销。",
+        positiveText: "确认",
+        negativeText: "取消",
+        onPositiveClick: () => {
+          s.resetSettings(), u.success("已恢复默认配置");
+        }
+      });
+    }, N = () => {
+      v.warning({
+        title: "确认清除",
+        content: "确定要清除浏览器缓存吗？",
+        positiveText: "确认",
+        negativeText: "取消",
+        onPositiveClick: () => {
+          const l = ["theme-mode", "robot-admin-settings"];
+          Object.keys(localStorage).forEach((o) => {
+            l.includes(o) || localStorage.removeItem(o);
+          }), sessionStorage.clear(), u.success("缓存已清除");
+        }
+      });
+    }, $ = () => {
+      location.reload();
+    }, A = () => {
+      const l = {
+        settings: s.settingsState,
+        gray: x.value,
+        colorWeak: f.value,
+        watermark: {
+          enabled: y.value,
+          text: S.value
+        },
+        exportTime: (/* @__PURE__ */ new Date()).toISOString()
+      }, e = new Blob([JSON.stringify(l, null, 2)], {
+        type: "application/json"
+      }), o = URL.createObjectURL(e), T = document.createElement("a");
+      T.href = o, T.download = `robot-admin-config-${Date.now()}.json`, T.click(), URL.revokeObjectURL(o), u.success("配置已导出");
+    }, z = () => {
+      const l = document.createElement("input");
+      l.type = "file", l.accept = "application/json", l.onchange = async (e) => {
+        const o = e.target.files?.[0];
+        if (o)
+          try {
+            const T = await o.text(), k = JSON.parse(T);
+            k.settings && Object.assign(s, k.settings), k.gray !== void 0 && (x.value = k.gray), k.colorWeak !== void 0 && (f.value = k.colorWeak), k.watermark && (y.value = k.watermark.enabled, S.value = k.watermark.text), u.success("配置已导入");
+          } catch {
+            u.error("配置文件格式错误");
+          }
+      }, l.click();
+    };
+    return (l, e) => (R(), ie(i(de), {
+      show: w.value,
+      "onUpdate:show": e[16] || (e[16] = (o) => w.value = o),
+      width: 380,
+      placement: "right",
+      "trap-focus": !1,
+      "block-scroll": !1
+    }, {
+      default: n(() => [
+        a(i(ue), {
+          title: "⚙️ 布局配置",
+          closable: ""
+        }, {
+          default: n(() => [
+            a(i(ce), {
+              value: p.value,
+              "onUpdate:value": e[15] || (e[15] = (o) => p.value = o),
+              animated: "",
+              class: "settings-tabs"
+            }, {
+              default: n(() => [
+                a(i(j), {
+                  name: "appearance",
+                  tab: "🎨 外观"
+                }, {
+                  default: n(() => [
+                    t("div", Ce, [
+                      t("div", Te, [
+                        (R(!0), W(J, null, Y(i(fe), (o) => (R(), W("div", {
+                          key: o.name,
+                          class: G(["preset-card", { active: P(o) }]),
+                          onClick: (T) => I(o)
+                        }, [
+                          t("div", Se, h(o.icon), 1),
+                          t("div", Me, h(o.name), 1),
+                          t("div", Re, [
+                            t("span", {
+                              class: "color-dot",
+                              style: le({ backgroundColor: o.primaryColor })
+                            }, null, 4)
+                          ])
+                        ], 10, ke))), 128))
+                      ])
+                    ]),
+                    t("div", He, [
+                      e[20] || (e[20] = t("div", { class: "section-title" }, "主题模式", -1)),
+                      a(i(K), {
+                        value: i(s).themeMode,
+                        "onUpdate:value": e[0] || (e[0] = (o) => i(s).themeMode = o),
+                        class: "mode-group"
+                      }, {
+                        default: n(() => [
+                          a(i(M), { value: "light" }, {
+                            default: n(() => [...e[17] || (e[17] = [
+                              t("span", { class: "i-mdi:white-balance-sunny mr-1" }, null, -1),
+                              c(" 浅色 ", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "dark" }, {
+                            default: n(() => [...e[18] || (e[18] = [
+                              t("span", { class: "i-mdi:moon-waning-crescent mr-1" }, null, -1),
+                              c(" 深色 ", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "auto" }, {
+                            default: n(() => [...e[19] || (e[19] = [
+                              t("span", { class: "i-mdi:theme-light-dark mr-1" }, null, -1),
+                              c(" 自动 ", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["value"])
+                    ]),
+                    t("div", Ve, [
+                      e[21] || (e[21] = t("div", { class: "section-title" }, "主题色", -1)),
+                      t("div", Ee, [
+                        a(i(ve), {
+                          value: i(s).primaryColor,
+                          "onUpdate:value": e[1] || (e[1] = (o) => i(s).primaryColor = o),
+                          "show-alpha": !1,
+                          swatches: i(we),
+                          actions: ["confirm"]
+                        }, null, 8, ["value", "swatches"]),
+                        t("span", _e, h(i(s).primaryColor), 1)
+                      ])
+                    ]),
+                    t("div", Be, [
+                      e[25] || (e[25] = t("div", { class: "section-title" }, "圆角大小", -1)),
+                      a(i(K), {
+                        value: i(s).borderRadius,
+                        "onUpdate:value": e[2] || (e[2] = (o) => i(s).borderRadius = o),
+                        class: "radius-group"
+                      }, {
+                        default: n(() => [
+                          a(i(M), { value: "small" }, {
+                            default: n(() => [...e[22] || (e[22] = [
+                              c("小 (4px)", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "medium" }, {
+                            default: n(() => [...e[23] || (e[23] = [
+                              c("中 (6px)", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "large" }, {
+                            default: n(() => [...e[24] || (e[24] = [
+                              c("大 (8px)", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["value"])
+                    ]),
+                    t("div", Ue, [
+                      e[31] || (e[31] = t("div", { class: "section-title" }, "页面动画", -1)),
+                      t("div", We, [
+                        e[26] || (e[26] = t("span", { class: "text-sm" }, "启用动画", -1)),
+                        a(i(H), {
+                          value: i(s).enableTransition,
+                          "onUpdate:value": e[3] || (e[3] = (o) => i(s).enableTransition = o)
+                        }, null, 8, ["value"])
+                      ]),
+                      a(i(K), {
+                        value: i(s).transitionType,
+                        "onUpdate:value": e[4] || (e[4] = (o) => i(s).transitionType = o),
+                        disabled: !i(s).enableTransition,
+                        class: "transition-group"
+                      }, {
+                        default: n(() => [
+                          a(i(M), { value: "fade" }, {
+                            default: n(() => [...e[27] || (e[27] = [
+                              c("淡入", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "slide" }, {
+                            default: n(() => [...e[28] || (e[28] = [
+                              c("滑动", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "zoom" }, {
+                            default: n(() => [...e[29] || (e[29] = [
+                              c("缩放", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          a(i(M), { value: "none" }, {
+                            default: n(() => [...e[30] || (e[30] = [
+                              c("无", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["value", "disabled"])
+                    ]),
+                    t("div", Oe, [
+                      a(i(O), {
+                        block: "",
+                        secondary: "",
+                        onClick: _
+                      }, {
+                        icon: n(() => [...e[32] || (e[32] = [
+                          t("span", { class: "i-mdi:restore" }, null, -1)
+                        ])]),
+                        default: n(() => [
+                          e[33] || (e[33] = c(" 恢复外观默认设置 ", -1))
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }),
+                a(i(j), {
+                  name: "layout",
+                  tab: "📐 布局"
+                }, {
+                  default: n(() => [
+                    t("div", Le, [
+                      e[34] || (e[34] = t("div", { class: "section-title" }, "布局模式", -1)),
+                      t("div", Pe, [
+                        (R(!0), W(J, null, Y(i(xe), (o) => (R(), W("div", {
+                          key: o.value,
+                          class: G(["layout-item", {
+                            active: i(s).layoutMode === o.value,
+                            disabled: o.disabled
+                          }]),
+                          onClick: (T) => !o.disabled && E(T, o.value)
+                        }, [
+                          t("div", Ne, [
+                            (R(), W("svg", Ae, [
+                              t("g", {
+                                innerHTML: o.svg
+                              }, null, 8, De)
+                            ]))
+                          ]),
+                          t("div", Fe, [
+                            c(h(o.label) + " ", 1),
+                            o.disabled ? (R(), W("span", $e, "敬请期待")) : X("", !0)
+                          ])
+                        ], 10, Ie))), 128))
+                      ])
+                    ]),
+                    t("div", ze, [
+                      e[39] || (e[39] = t("div", { class: "section-title" }, "界面元素", -1)),
+                      t("div", je, [
+                        e[35] || (e[35] = t("span", null, "显示面包屑", -1)),
+                        a(i(H), {
+                          value: i(s).showBreadcrumb,
+                          "onUpdate:value": e[5] || (e[5] = (o) => i(s).showBreadcrumb = o)
+                        }, null, 8, ["value"])
+                      ]),
+                      t("div", Ke, [
+                        e[36] || (e[36] = t("span", null, "显示面包屑图标", -1)),
+                        a(i(H), {
+                          value: i(s).showBreadcrumbIcon,
+                          "onUpdate:value": e[6] || (e[6] = (o) => i(s).showBreadcrumbIcon = o),
+                          disabled: !i(s).showBreadcrumb
+                        }, null, 8, ["value", "disabled"])
+                      ]),
+                      t("div", Je, [
+                        e[37] || (e[37] = t("span", null, "显示标签页", -1)),
+                        a(i(H), {
+                          value: i(s).showTagsView,
+                          "onUpdate:value": e[7] || (e[7] = (o) => i(s).showTagsView = o)
+                        }, null, 8, ["value"])
+                      ]),
+                      t("div", Ye, [
+                        e[38] || (e[38] = t("span", null, "显示页脚", -1)),
+                        a(i(H), {
+                          value: i(s).showFooter,
+                          "onUpdate:value": e[8] || (e[8] = (o) => i(s).showFooter = o)
+                        }, null, 8, ["value"])
+                      ])
+                    ]),
+                    t("div", Ge, [
+                      e[42] || (e[42] = t("div", { class: "section-title" }, "尺寸调整", -1)),
+                      t("div", Xe, [
+                        t("div", qe, [
+                          e[40] || (e[40] = t("span", null, "侧边栏宽度", -1)),
+                          t("span", Qe, h(i(s).sidebarWidth) + "px", 1)
+                        ]),
+                        a(i(q), {
+                          value: i(s).sidebarWidth,
+                          "onUpdate:value": e[9] || (e[9] = (o) => i(s).sidebarWidth = o),
+                          min: 180,
+                          max: 280,
+                          step: 10,
+                          marks: { 180: "180", 220: "220", 280: "280" }
+                        }, null, 8, ["value"])
+                      ]),
+                      t("div", Ze, [
+                        t("div", et, [
+                          e[41] || (e[41] = t("span", null, "头部高度", -1)),
+                          t("span", tt, h(i(s).headerHeight) + "px", 1)
+                        ]),
+                        a(i(q), {
+                          value: i(s).headerHeight,
+                          "onUpdate:value": e[10] || (e[10] = (o) => i(s).headerHeight = o),
+                          min: 48,
+                          max: 64,
+                          step: 4,
+                          marks: { 48: "48", 56: "56", 64: "64" }
+                        }, null, 8, ["value"])
+                      ])
+                    ]),
+                    t("div", st, [
+                      a(i(O), {
+                        block: "",
+                        secondary: "",
+                        onClick: B
+                      }, {
+                        icon: n(() => [...e[43] || (e[43] = [
+                          t("span", { class: "i-mdi:restore" }, null, -1)
+                        ])]),
+                        default: n(() => [
+                          e[44] || (e[44] = c(" 恢复布局默认设置 ", -1))
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ]),
+                  _: 1
+                }),
+                a(i(j), {
+                  name: "features",
+                  tab: "🔧 功能"
+                }, {
+                  default: n(() => [
+                    t("div", ot, [
+                      e[49] || (e[49] = t("div", { class: "section-title" }, "缓存管理", -1)),
+                      t("div", it, [
+                        a(i(O), {
+                          secondary: "",
+                          onClick: N
+                        }, {
+                          icon: n(() => [...e[45] || (e[45] = [
+                            t("span", { class: "i-mdi:delete-sweep" }, null, -1)
+                          ])]),
+                          default: n(() => [
+                            e[46] || (e[46] = c(" 清除缓存 ", -1))
+                          ]),
+                          _: 1
+                        }),
+                        a(i(O), {
+                          secondary: "",
+                          onClick: $
+                        }, {
+                          icon: n(() => [...e[47] || (e[47] = [
+                            t("span", { class: "i-mdi:refresh" }, null, -1)
+                          ])]),
+                          default: n(() => [
+                            e[48] || (e[48] = c(" 重新加载 ", -1))
+                          ]),
+                          _: 1
+                        })
+                      ])
+                    ]),
+                    t("div", lt, [
+                      e[56] || (e[56] = t("div", { class: "section-title" }, "配置管理", -1)),
+                      t("div", at, [
+                        a(i(O), {
+                          secondary: "",
+                          onClick: A
+                        }, {
+                          icon: n(() => [...e[50] || (e[50] = [
+                            t("span", { class: "i-mdi:download" }, null, -1)
+                          ])]),
+                          default: n(() => [
+                            e[51] || (e[51] = c(" 导出配置 ", -1))
+                          ]),
+                          _: 1
+                        }),
+                        a(i(O), {
+                          secondary: "",
+                          onClick: z
+                        }, {
+                          icon: n(() => [...e[52] || (e[52] = [
+                            t("span", { class: "i-mdi:upload" }, null, -1)
+                          ])]),
+                          default: n(() => [
+                            e[53] || (e[53] = c(" 导入配置 ", -1))
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      a(i(O), {
+                        block: "",
+                        type: "error",
+                        secondary: "",
+                        class: "mt-2",
+                        onClick: U
+                      }, {
+                        icon: n(() => [...e[54] || (e[54] = [
+                          t("span", { class: "i-mdi:restore" }, null, -1)
+                        ])]),
+                        default: n(() => [
+                          e[55] || (e[55] = c(" 重置所有配置 ", -1))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    t("div", nt, [
+                      e[59] || (e[59] = t("div", { class: "section-title" }, "系统模式", -1)),
+                      t("div", rt, [
+                        e[57] || (e[57] = t("div", { class: "setting-label" }, [
+                          t("span", null, "灰色模式"),
+                          t("span", { class: "setting-desc" }, "用于哀悼日场景")
+                        ], -1)),
+                        a(i(H), {
+                          value: x.value,
+                          "onUpdate:value": e[11] || (e[11] = (o) => x.value = o)
+                        }, null, 8, ["value"])
+                      ]),
+                      t("div", dt, [
+                        e[58] || (e[58] = t("div", { class: "setting-label" }, [
+                          t("span", null, "色弱模式"),
+                          t("span", { class: "setting-desc" }, "提供无障碍访问支持")
+                        ], -1)),
+                        a(i(H), {
+                          value: f.value,
+                          "onUpdate:value": e[12] || (e[12] = (o) => f.value = o)
+                        }, null, 8, ["value"])
+                      ])
+                    ]),
+                    t("div", ut, [
+                      e[61] || (e[61] = t("div", { class: "section-title" }, "水印设置", -1)),
+                      t("div", ct, [
+                        e[60] || (e[60] = t("span", null, "启用水印", -1)),
+                        a(i(H), {
+                          value: y.value,
+                          "onUpdate:value": e[13] || (e[13] = (o) => y.value = o)
+                        }, null, 8, ["value"])
+                      ]),
+                      y.value ? (R(), W("div", vt, [
+                        a(i(me), {
+                          value: S.value,
+                          "onUpdate:value": e[14] || (e[14] = (o) => S.value = o),
+                          placeholder: "请输入水印内容",
+                          size: "small"
+                        }, null, 8, ["value"])
+                      ])) : X("", !0)
+                    ]),
+                    t("div", mt, [
+                      e[68] || (e[68] = t("div", { class: "section-title" }, "系统信息", -1)),
+                      t("div", pt, [
+                        t("div", gt, [
+                          e[62] || (e[62] = t("span", { class: "info-label" }, "浏览器", -1)),
+                          t("span", ft, h(C.value.browser), 1)
+                        ]),
+                        t("div", yt, [
+                          e[63] || (e[63] = t("span", { class: "info-label" }, "操作系统", -1)),
+                          t("span", ht, h(C.value.os), 1)
+                        ]),
+                        t("div", bt, [
+                          e[64] || (e[64] = t("span", { class: "info-label" }, "屏幕分辨率", -1)),
+                          t("span", wt, h(C.value.resolution), 1)
+                        ]),
+                        t("div", xt, [
+                          e[65] || (e[65] = t("span", { class: "info-label" }, "设备像素比", -1)),
+                          t("span", Ct, h(C.value.pixelRatio), 1)
+                        ]),
+                        t("div", Tt, [
+                          e[66] || (e[66] = t("span", { class: "info-label" }, "语言", -1)),
+                          t("span", kt, h(C.value.language), 1)
+                        ]),
+                        t("div", St, [
+                          e[67] || (e[67] = t("span", { class: "info-label" }, "时区", -1)),
+                          t("span", Mt, h(C.value.timezone), 1)
+                        ])
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["value"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+}), Ht = (b, u) => {
+  const v = b.__vccOpts || b;
+  for (const [s, w] of u)
+    v[s] = w;
+  return v;
+}, Wt = /* @__PURE__ */ Ht(Rt, [["__scopeId", "data-v-918513ca"]]);
+function Ot(b, u = {}) {
+  const v = Z(u);
+  return v().syncCSSVariables(), v;
+}
+export {
+  ye as BORDER_RADIUS_MAP,
+  Ut as COLOR_SWATCHES,
+  m as DEFAULT_SETTINGS,
+  Bt as LAYOUT_MODES,
+  ge as PRESET_COLORS,
+  Wt as SettingsDrawer,
+  fe as THEME_PRESETS,
+  he as TRANSITION_MAP,
+  Z as createSettingsStore,
+  Ot as setupLayout,
+  be as useSettingsStore
+};
+//# sourceMappingURL=index.js.map