@done-coding/admin-core 0.17.1-alpha.0 → 0.18.1-alpha.0

package/es/bridge/theme/index.mjs

@@ -1,117 +1,220 @@
-import { ref as r, computed as J, readonly as A, markRaw as j } from "vue";
-import { readPersist as q, DEFAULT_STORAGE_KEY as Q } from "./persist.mjs";
-import { readSystemPrefersDark as X, watchSystemPrefersDark as Z } from "./system-dark.mjs";
-const l = "default", $ = "light", ee = "默认", S = "cozy", y = "standard", te = (o) => ({
-  light: { ...o.light },
-  dark: { ...o.dark }
+import { ref, computed, readonly, markRaw } from "vue";
+import { readPersist, DEFAULT_STORAGE_KEY } from "./persist.mjs";
+import { readSystemPrefersDark, watchSystemPrefersDark } from "./system-dark.mjs";
+const DEFAULT_STYLE = "default";
+const DEFAULT_MODE = "light";
+const DEFAULT_LABEL = "默认";
+const DEFAULT_DENSITY = "cozy";
+const DEFAULT_MOTION = "standard";
+const snapshotConfig = (config) => ({
+  light: { ...config.light },
+  dark: { ...config.dark }
 });
-function re(o) {
-  var k;
-  const g = o.storageKey ?? Q, _ = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), d = r(l), c = r(o.defaultMode ?? $), m = r(X()), R = J(
-    () => c.value === "system" ? m.value : c.value === "dark"
+function createBridgeThemeHook(init) {
+  var _a;
+  const storageKey = init.storageKey ?? DEFAULT_STORAGE_KEY;
+  const styleMap = /* @__PURE__ */ new Map();
+  const layoutMap = /* @__PURE__ */ new Map();
+  const hookMap = /* @__PURE__ */ new Map();
+  const rhythmMap = /* @__PURE__ */ new Map();
+  const themeStyle = ref(DEFAULT_STYLE);
+  const themeMode = ref(init.defaultMode ?? DEFAULT_MODE);
+  const systemPrefersDark = ref(readSystemPrefersDark());
+  const themeIsDark = computed(
+    () => themeMode.value === "system" ? systemPrefersDark.value : themeMode.value === "dark"
   );
-  Z((e) => {
-    m.value = e;
+  watchSystemPrefersDark((isDark) => {
+    systemPrefersDark.value = isDark;
   });
-  const I = r({
+  const themeLayout = ref({
     shell: void 0,
-    extractLevel1ToHeader: !1
-  }), u = r(S), P = r(y), E = r([]), f = r({}), v = r({});
-  let p = l;
-  const a = q(o.storage, g);
-  a && (typeof a.themeStyle == "string" && a.themeStyle && (p = a.themeStyle), a.themeMode === "light" || a.themeMode === "dark" || a.themeMode === "system" ? c.value = a.themeMode : typeof a.themeIsDark == "boolean" && (c.value = a.themeIsDark ? "dark" : "light"));
-  const F = () => {
-    o.storage.setItem(
-      g,
+    extractLevel1ToHeader: false
+  });
+  const themeDensity = ref(DEFAULT_DENSITY);
+  const themeMotion = ref(DEFAULT_MOTION);
+  const themeList = ref([]);
+  const themeLabels = ref({});
+  const themeDescriptions = ref({});
+  let desiredStyle = DEFAULT_STYLE;
+  const persisted = readPersist(init.storage, storageKey);
+  if (persisted) {
+    if (typeof persisted.themeStyle === "string" && persisted.themeStyle) {
+      desiredStyle = persisted.themeStyle;
+    }
+    if (persisted.themeMode === "light" || persisted.themeMode === "dark" || persisted.themeMode === "system") {
+      themeMode.value = persisted.themeMode;
+    } else if (typeof persisted.themeIsDark === "boolean") {
+      themeMode.value = persisted.themeIsDark ? "dark" : "light";
+    }
+  }
+  const persist = () => {
+    init.storage.setItem(
+      storageKey,
       JSON.stringify({
-        themeStyle: d.value,
-        themeMode: c.value
+        themeStyle: themeStyle.value,
+        themeMode: themeMode.value
       })
     );
-  }, M = () => {
-    E.value = Array.from(_.keys());
-  }, B = (e) => {
-    o.update("APP_THEME_CONFIG", { light: e.light, dark: e.dark });
-  }, w = (e) => {
-    const t = o.layoutBaseline;
-    t && (o.update("APP_LAYOUT_HEADER_CONFIG", { ...t.header }), o.update("APP_LAYOUT_FOOTER_CONFIG", { ...t.footer }), o.update("APP_LAYOUT_SIDEBAR_CONFIG", { ...t.sidebar }), o.update("APP_LAYOUT_ASIDE_CONFIG", { ...t.aside }), o.update("APP_LAYOUT_BREADCRUMB_CONFIG", { ...t.breadcrumb }), o.update("APP_LAYOUT_BODY_CONFIG", { ...t.body }), o.update("APP_LAYOUT_VIEWPORT_CONFIG", { ...t.viewport }), o.update("APP_LAYOUT_GAP_CONFIG", { ...t.gap })), e && (e.header && o.update("APP_LAYOUT_HEADER_CONFIG", e.header), e.footer && o.update("APP_LAYOUT_FOOTER_CONFIG", e.footer), e.sidebar && o.update("APP_LAYOUT_SIDEBAR_CONFIG", e.sidebar), e.aside && o.update("APP_LAYOUT_ASIDE_CONFIG", e.aside), e.breadcrumb && o.update("APP_LAYOUT_BREADCRUMB_CONFIG", e.breadcrumb), e.body && o.update("APP_LAYOUT_BODY_CONFIG", e.body), e.viewport && o.update("APP_LAYOUT_VIEWPORT_CONFIG", e.viewport), e.gap && o.update("APP_LAYOUT_GAP_CONFIG", e.gap)), I.value = {
-      shell: e != null && e.shell ? j(e.shell) : void 0,
-      extractLevel1ToHeader: (e == null ? void 0 : e.extractLevel1ToHeader) ?? !1
+  };
+  const refreshList = () => {
+    themeList.value = Array.from(styleMap.keys());
+  };
+  const applyConfig = (config) => {
+    init.update("APP_THEME_CONFIG", { light: config.light, dark: config.dark });
+  };
+  const applyLayout = (layout) => {
+    const baseline = init.layoutBaseline;
+    if (baseline) {
+      init.update("APP_LAYOUT_HEADER_CONFIG", { ...baseline.header });
+      init.update("APP_LAYOUT_FOOTER_CONFIG", { ...baseline.footer });
+      init.update("APP_LAYOUT_SIDEBAR_CONFIG", { ...baseline.sidebar });
+      init.update("APP_LAYOUT_ASIDE_CONFIG", { ...baseline.aside });
+      init.update("APP_LAYOUT_BREADCRUMB_CONFIG", { ...baseline.breadcrumb });
+      init.update("APP_LAYOUT_BODY_CONFIG", { ...baseline.body });
+      init.update("APP_LAYOUT_VIEWPORT_CONFIG", { ...baseline.viewport });
+      init.update("APP_LAYOUT_GAP_CONFIG", { ...baseline.gap });
+    }
+    if (layout) {
+      if (layout.header) init.update("APP_LAYOUT_HEADER_CONFIG", layout.header);
+      if (layout.footer) init.update("APP_LAYOUT_FOOTER_CONFIG", layout.footer);
+      if (layout.sidebar)
+        init.update("APP_LAYOUT_SIDEBAR_CONFIG", layout.sidebar);
+      if (layout.aside) init.update("APP_LAYOUT_ASIDE_CONFIG", layout.aside);
+      if (layout.breadcrumb)
+        init.update("APP_LAYOUT_BREADCRUMB_CONFIG", layout.breadcrumb);
+      if (layout.body) init.update("APP_LAYOUT_BODY_CONFIG", layout.body);
+      if (layout.viewport)
+        init.update("APP_LAYOUT_VIEWPORT_CONFIG", layout.viewport);
+      if (layout.gap) init.update("APP_LAYOUT_GAP_CONFIG", layout.gap);
+    }
+    themeLayout.value = {
+      shell: (layout == null ? void 0 : layout.shell) ? markRaw(layout.shell) : void 0,
+      extractLevel1ToHeader: (layout == null ? void 0 : layout.extractLevel1ToHeader) ?? false
     };
-  }, L = (e, t) => {
-    if (e)
-      try {
-        e({ id: t });
-      } catch (s) {
-        console.warn("[dc-theme] lifecycle hook error", s);
-      }
-  }, T = (e) => {
-    var G, N;
-    const t = _.get(e), s = t ? e : l, Y = t ?? _.get(l);
-    if (!Y) return;
-    const D = d.value;
-    if (D === s) return;
-    L((G = i.get(D)) == null ? void 0 : G.onDeactivate, D), B(Y), w(O.get(s));
-    const n = h.get(s);
-    u.value = (n == null ? void 0 : n.density) ?? S, P.value = (n == null ? void 0 : n.motion) ?? y, d.value = s, L((N = i.get(s)) == null ? void 0 : N.onActivate, s), F();
-  }, U = (e) => {
-    c.value = e, F();
-  }, H = (e) => {
-    U(e ? "dark" : "light");
-  }, x = (e) => {
-    u.value = e;
-  }, K = (e) => {
-    P.value = e;
-  }, C = (e, t) => {
-    _.set(e, te(t.config)), t.layout ? O.set(e, t.layout) : O.delete(e), t.onActivate || t.onDeactivate ? i.set(e, {
-      onActivate: t.onActivate,
-      onDeactivate: t.onDeactivate
-    }) : i.delete(e), t.density || t.motion ? h.set(e, {
-      density: t.density,
-      motion: t.motion
-    }) : h.delete(e), f.value = { ...f.value, [e]: t.label ?? e }, t.description !== void 0 && (v.value = {
-      ...v.value,
-      [e]: t.description
-    }), M(), e === p && d.value !== p && T(e);
-  }, V = (e) => {
-    if (e === l || !_.delete(e)) return;
-    O.delete(e), h.delete(e);
-    const t = { ...f.value };
-    delete t[e], f.value = t;
-    const s = { ...v.value };
-    delete s[e], v.value = s, M(), d.value === e && T(l), i.delete(e);
-  }, W = (e) => f.value[e] ?? e, z = (e) => v.value[e];
-  C(l, {
-    config: o.initConfig,
-    label: ee,
+  };
+  const fireHook = (fn, id) => {
+    if (!fn) return;
+    try {
+      fn({ id });
+    } catch (e) {
+      console.warn("[dc-theme] lifecycle hook error", e);
+    }
+  };
+  const setStyle = (name) => {
+    var _a2, _b;
+    const config = styleMap.get(name);
+    const target = config ? name : DEFAULT_STYLE;
+    const targetConfig = config ?? styleMap.get(DEFAULT_STYLE);
+    if (!targetConfig) return;
+    const prev = themeStyle.value;
+    if (prev === target) return;
+    fireHook((_a2 = hookMap.get(prev)) == null ? void 0 : _a2.onDeactivate, prev);
+    applyConfig(targetConfig);
+    applyLayout(layoutMap.get(target));
+    const rhythm = rhythmMap.get(target);
+    themeDensity.value = (rhythm == null ? void 0 : rhythm.density) ?? DEFAULT_DENSITY;
+    themeMotion.value = (rhythm == null ? void 0 : rhythm.motion) ?? DEFAULT_MOTION;
+    themeStyle.value = target;
+    fireHook((_b = hookMap.get(target)) == null ? void 0 : _b.onActivate, target);
+    persist();
+  };
+  const setMode = (mode) => {
+    themeMode.value = mode;
+    persist();
+  };
+  const setDark = (isDark) => {
+    setMode(isDark ? "dark" : "light");
+  };
+  const setDensity = (density) => {
+    themeDensity.value = density;
+  };
+  const setMotion = (motion) => {
+    themeMotion.value = motion;
+  };
+  const add = (name, preset) => {
+    styleMap.set(name, snapshotConfig(preset.config));
+    if (preset.layout) {
+      layoutMap.set(name, preset.layout);
+    } else {
+      layoutMap.delete(name);
+    }
+    if (preset.onActivate || preset.onDeactivate) {
+      hookMap.set(name, {
+        onActivate: preset.onActivate,
+        onDeactivate: preset.onDeactivate
+      });
+    } else {
+      hookMap.delete(name);
+    }
+    if (preset.density || preset.motion) {
+      rhythmMap.set(name, {
+        density: preset.density,
+        motion: preset.motion
+      });
+    } else {
+      rhythmMap.delete(name);
+    }
+    themeLabels.value = { ...themeLabels.value, [name]: preset.label ?? name };
+    if (preset.description !== void 0) {
+      themeDescriptions.value = {
+        ...themeDescriptions.value,
+        [name]: preset.description
+      };
+    }
+    refreshList();
+    if (name === desiredStyle && themeStyle.value !== desiredStyle) {
+      setStyle(name);
+    }
+  };
+  const remove = (name) => {
+    if (name === DEFAULT_STYLE) return;
+    if (!styleMap.delete(name)) return;
+    layoutMap.delete(name);
+    rhythmMap.delete(name);
+    const nextLabels = { ...themeLabels.value };
+    delete nextLabels[name];
+    themeLabels.value = nextLabels;
+    const nextDescriptions = { ...themeDescriptions.value };
+    delete nextDescriptions[name];
+    themeDescriptions.value = nextDescriptions;
+    refreshList();
+    if (themeStyle.value === name) setStyle(DEFAULT_STYLE);
+    hookMap.delete(name);
+  };
+  const labelOf = (name) => themeLabels.value[name] ?? name;
+  const descriptionOf = (name) => themeDescriptions.value[name];
+  add(DEFAULT_STYLE, {
+    config: init.initConfig,
+    label: DEFAULT_LABEL,
     description: {
       suitable: "常规中后台：左 sidebar 主导航 + 顶 header，表单 / 列表密集型管理应用。",
       unsuitable: "需沉浸式边框 / 右侧上下文面板 / 一级模块横向切换的应用（宜用带布局变更的 preset）。"
     }
   });
-  const b = d.value;
-  return L((k = i.get(b)) == null ? void 0 : k.onActivate, b), {
+  const initialStyle = themeStyle.value;
+  fireHook((_a = hookMap.get(initialStyle)) == null ? void 0 : _a.onActivate, initialStyle);
+  return {
     theme: {
-      add: C,
-      remove: V,
-      setStyle: T,
-      setMode: U,
-      setDark: H,
-      setDensity: x,
-      setMotion: K,
-      list: A(E),
-      labelOf: W,
-      descriptionOf: z
+      add,
+      remove,
+      setStyle,
+      setMode,
+      setDark,
+      setDensity,
+      setMotion,
+      list: readonly(themeList),
+      labelOf,
+      descriptionOf
     },
-    themeStyle: A(d),
-    themeMode: A(c),
+    themeStyle: readonly(themeStyle),
+    themeMode: readonly(themeMode),
     // themeIsDark 为 computed（已只读），直接返回；与 DeepReadonly<Ref<boolean>> 契约相容。
-    themeIsDark: R,
-    themeLayout: A(I),
-    themeDensity: A(u),
-    themeMotion: A(P)
+    themeIsDark,
+    themeLayout: readonly(themeLayout),
+    themeDensity: readonly(themeDensity),
+    themeMotion: readonly(themeMotion)
   };
 }
 export {
-  re as createBridgeThemeHook
+  createBridgeThemeHook
 };

package/es/bridge/theme/persist.mjs

@@ -1,14 +1,18 @@
-const c = "dc-core-theme", o = (r, n) => {
-  const e = r.getItem(n);
-  if (!e) return null;
+const DEFAULT_STORAGE_KEY = "dc-core-theme";
+const readPersist = (storage, key) => {
+  const raw = storage.getItem(key);
+  if (!raw) return null;
   try {
-    const t = JSON.parse(e);
-    return t && typeof t == "object" ? t : null;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") {
+      return parsed;
+    }
+    return null;
   } catch {
     return null;
   }
 };
 export {
-  c as DEFAULT_STORAGE_KEY,
-  o as readPersist
+  DEFAULT_STORAGE_KEY,
+  readPersist
 };

package/es/bridge/theme/system-dark.mjs

@@ -1,11 +1,18 @@
-const o = () => typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-color-scheme: dark)").matches, a = (r) => {
-  if (typeof window > "u" || typeof window.matchMedia != "function")
+const readSystemPrefersDark = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+const watchSystemPrefersDark = (cb) => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
     return () => {
     };
-  const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (t) => r(t.matches);
-  return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+  const mql = window.matchMedia("(prefers-color-scheme: dark)");
+  const handler = (e) => cb(e.matches);
+  mql.addEventListener("change", handler);
+  return () => mql.removeEventListener("change", handler);
 };
 export {
-  o as readSystemPrefersDark,
-  a as watchSystemPrefersDark
+  readSystemPrefersDark,
+  watchSystemPrefersDark
 };

package/es/components/app-layout/AppAside.vue.mjs

@@ -1,7 +1,7 @@
-import o from "./AppAside.vue2.mjs";
+import _sfc_main from "./AppAside.vue2.mjs";
 /* empty css               */
-import p from "../../_virtual/_plugin-vue_export-helper.mjs";
-const m = /* @__PURE__ */ p(o, [["__scopeId", "data-v-7e17d342"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const AppAside = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e17d342"]]);
 export {
-  m as default
+  AppAside as default
 };

package/es/components/app-layout/AppAside.vue2.mjs

@@ -1,39 +1,46 @@
-import { defineComponent as m, inject as a, computed as o, withDirectives as u, openBlock as _, createElementBlock as h, normalizeStyle as i, createElementVNode as p, renderSlot as v, createVNode as A, unref as S, vShow as w } from "vue";
-import f from "./AppCollapseToggle.vue.mjs";
-import { APP_LAYOUT_APP_STORE_KEY as y, APP_LAYOUT_BRIDGE_KEY as P } from "../../inject/key.mjs";
-const E = { class: "app-aside-clip" }, Y = /* @__PURE__ */ m({
+import { defineComponent, inject, computed, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, vShow } from "vue";
+import AppCollapseToggle from "./AppCollapseToggle.vue.mjs";
+import { APP_LAYOUT_APP_STORE_KEY, APP_LAYOUT_BRIDGE_KEY } from "../../inject/key.mjs";
+const _hoisted_1 = { class: "app-aside-clip" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AppAside",
   props: {
     show: { type: Boolean }
   },
-  setup(t) {
-    const e = a(y), n = o(() => e.asideStyle), d = a(P), s = o(() => e.asideIsCollapse), c = o(() => ({
-      width: `${d.APP_LAYOUT_ASIDE_CONFIG.width}px`,
-      opacity: s.value ? 0 : 1
+  setup(__props) {
+    const appStore = inject(APP_LAYOUT_APP_STORE_KEY);
+    const asideStyle = computed(() => appStore.asideStyle);
+    const bridge = inject(APP_LAYOUT_BRIDGE_KEY);
+    const collapse = computed(() => appStore.asideIsCollapse);
+    const shimStyle = computed(() => ({
+      width: `${bridge.APP_LAYOUT_ASIDE_CONFIG.width}px`,
+      opacity: collapse.value ? 0 : 1
     }));
-    return (r, l) => u((_(), h("div", {
-      class: "app-aside",
-      style: i(n.value)
-    }, [
-      p("div", E, [
-        p("div", {
-          class: "app-aside-shim",
-          style: i(c.value)
-        }, [
-          v(r.$slots, "default", {}, void 0, !0)
-        ], 4)
-      ]),
-      A(f, {
-        side: "aside",
-        show: t.show,
-        collapse: s.value,
-        onToggle: l[0] || (l[0] = (g) => S(e).changeAsideCollapseStatus(!s.value))
-      }, null, 8, ["show", "collapse"])
-    ], 4)), [
-      [w, t.show]
-    ]);
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: "app-aside",
+        style: normalizeStyle(asideStyle.value)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: "app-aside-shim",
+            style: normalizeStyle(shimStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ], 4)
+        ]),
+        createVNode(AppCollapseToggle, {
+          side: "aside",
+          show: __props.show,
+          collapse: collapse.value,
+          onToggle: _cache[0] || (_cache[0] = ($event) => unref(appStore).changeAsideCollapseStatus(!collapse.value))
+        }, null, 8, ["show", "collapse"])
+      ], 4)), [
+        [vShow, __props.show]
+      ]);
+    };
   }
 });
 export {
-  Y as default
+  _sfc_main as default
 };

package/es/components/app-layout/AppBody.vue.mjs

@@ -1,7 +1,7 @@
-import o from "./AppBody.vue2.mjs";
+import _sfc_main from "./AppBody.vue2.mjs";
 /* empty css              */
-import p from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _ = /* @__PURE__ */ p(o, [["__scopeId", "data-v-746de972"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const AppBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-746de972"]]);
 export {
-  _ as default
+  AppBody as default
 };