smart-admin-web 10.14.0 → 10.20.0

package/dist/layouts/AccentPicker2.vue.js

@@ -0,0 +1,131 @@
+import { defineComponent as T, computed as v, openBlock as d, createElementBlock as k, createElementVNode as s, unref as e, Fragment as $, renderList as B, createBlock as _, withCtx as m, createTextVNode as f, toDisplayString as u, normalizeStyle as g, normalizeClass as y, createCommentVNode as C, createVNode as p } from "vue";
+import { NTooltip as N, NColorPicker as E, NButton as L, NSwitch as z, NProgress as I } from "naive-ui";
+import { Icon as w } from "@iconify/vue";
+import { useI18n as U } from "vue-i18n";
+import { useAppStore as V } from "../stores/app.js";
+import { ACCENTS as h, ACCENT_META as b } from "../theme/accents.js";
+import { solid as P } from "../theme/mix.js";
+const K = { class: "accent-card" }, q = ["aria-label"], F = ["data-color", "aria-checked", "aria-label", "tabindex", "onClick"], M = {
+  class: "name",
+  "aria-live": "polite"
+}, R = { class: "hex" }, j = {
+  class: "demo",
+  "aria-hidden": "true"
+}, G = { class: "link" }, te = /* @__PURE__ */ T({
+  __name: "AccentPicker",
+  setup(H) {
+    const n = V(), { t: a } = U(), r = v(
+      () => h.findIndex((t) => t.toLowerCase() === n.accent.toLowerCase())
+    ), l = v(() => r.value < 0), x = v(() => l.value ? P(n.accent) : ""), A = v(
+      () => l.value ? a("settings.accentName.custom") : a(`settings.accentName.${b[r.value].key}`)
+    );
+    function D(t) {
+      const i = /^#([0-9a-f]{6})/i.exec(t);
+      i && n.setAccent(`#${i[1].toUpperCase()}`);
+    }
+    function S(t) {
+      var c;
+      const i = t.key === "ArrowRight" || t.key === "ArrowDown" ? 1 : t.key === "ArrowLeft" || t.key === "ArrowUp" ? -1 : 0;
+      if (!i || l.value) return;
+      t.preventDefault();
+      const o = h[(r.value + i + h.length) % h.length];
+      n.setAccent(o), (c = t.currentTarget.querySelector(`[data-color="${o}"]`)) == null || c.focus();
+    }
+    return (t, i) => (d(), k("div", K, [
+      s("div", {
+        class: "row",
+        role: "radiogroup",
+        "aria-label": e(a)("settings.themeColor"),
+        onKeydown: S
+      }, [
+        (d(!0), k($, null, B(e(b), (o, c) => (d(), _(e(N), {
+          key: o.color,
+          delay: 300
+        }, {
+          trigger: m(() => [
+            s("button", {
+              type: "button",
+              role: "radio",
+              class: y(["dot", { on: r.value === c }]),
+              style: g({ "--c": o.dot }),
+              "data-color": o.color,
+              "aria-checked": r.value === c,
+              "aria-label": e(a)(`settings.accentName.${o.key}`),
+              tabindex: r.value === c || l.value && c === 0 ? 0 : -1,
+              onClick: (J) => e(n).setAccent(o.color)
+            }, [
+              r.value === c ? (d(), _(e(w), {
+                key: 0,
+                icon: "ph:check-bold",
+                width: 13
+              })) : C("", !0)
+            ], 14, F)
+          ]),
+          default: m(() => [
+            f(" " + u(e(a)(`settings.accentName.${o.key}`)), 1)
+          ]),
+          _: 2
+        }, 1024))), 128)),
+        p(e(N), { delay: 300 }, {
+          trigger: m(() => [
+            s("span", {
+              class: y(["dot custom", { on: l.value }]),
+              style: g(l.value ? { "--c": x.value } : void 0)
+            }, [
+              l.value ? (d(), _(e(w), {
+                key: 0,
+                icon: "ph:check-bold",
+                width: 13
+              })) : C("", !0),
+              p(e(E), {
+                class: "picker",
+                value: e(n).accent,
+                modes: ["hex"],
+                "show-alpha": !1,
+                swatches: [...e(h)],
+                "aria-label": e(a)("settings.accentName.custom"),
+                "onUpdate:value": D
+              }, null, 8, ["value", "swatches", "aria-label"])
+            ], 6)
+          ]),
+          default: m(() => [
+            f(" " + u(e(a)("settings.accentName.custom")), 1)
+          ]),
+          _: 1
+        })
+      ], 40, q),
+      s("div", M, [
+        s("b", null, u(A.value), 1),
+        s("span", R, u(e(n).accent.toUpperCase()), 1)
+      ]),
+      s("div", j, [
+        p(e(L), {
+          type: "primary",
+          size: "small",
+          tabindex: "-1"
+        }, {
+          default: m(() => [
+            f(u(e(a)("settings.accentDemoButton")), 1)
+          ]),
+          _: 1
+        }),
+        p(e(z), {
+          value: !0,
+          size: "small"
+        }),
+        s("span", G, u(e(a)("settings.accentDemoLink")), 1),
+        p(e(I), {
+          type: "line",
+          percentage: 64,
+          "show-indicator": !1,
+          height: 6,
+          class: "bar"
+        })
+      ])
+    ]));
+  }
+});
+export {
+  te as default
+};
+//# sourceMappingURL=AccentPicker2.vue.js.map

package/dist/layouts/AccentPicker2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccentPicker2.vue.js","sources":["../../src/layouts/AccentPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// 强调色选择器(仿 macOS 系统设置 → 外观 → 强调色):\n// 一排圆点,选中的带双层环 + 对勾,下方写出当前色名与色值;最后一颗彩虹圆点是「自定义」,点开取色板。\n// 圆点显示的是实心控件真正用的那个色(solid() 压暗后的结果),不是原始色相,和按钮 / 开关对得上。\n// 底部一条真控件拼的效果条,换色时就能看到主按钮、开关、链接、进度会变成什么样。\nimport { computed } from 'vue'\nimport { NButton, NColorPicker, NProgress, NSwitch, NTooltip } from 'naive-ui'\nimport { Icon } from '@iconify/vue'\nimport { useI18n } from 'vue-i18n'\nimport { useAppStore } from '#/stores/app'\nimport { ACCENT_META, ACCENTS } from '#/theme/accents'\nimport { solid } from '#/theme/mix'\n\nconst app = useAppStore()\nconst { t } = useI18n()\n\nconst presetIndex = computed(() =>\n  ACCENTS.findIndex(c => c.toLowerCase() === app.accent.toLowerCase()),\n)\nconst isCustom = computed(() => presetIndex.value < 0)\nconst customDot = computed(() => (isCustom.value ? solid(app.accent) : ''))\nconst currentName = computed(() =>\n  isCustom.value\n    ? t('settings.accentName.custom')\n    : t(`settings.accentName.${ACCENT_META[presetIndex.value]!.key}`),\n)\n\n// n-color-picker 可能回 #rrggbb 小写或带透明度的串,统一收成 #RRGGBB 大写再存\nfunction setCustom(value: string) {\n  const m = /^#([0-9a-f]{6})/i.exec(value)\n  if (m) app.setAccent(`#${m[1]!.toUpperCase()}`)\n}\n\n// roving tabindex:方向键在预设之间走,Tab 只停在选中的那颗上\nfunction onKey(e: KeyboardEvent) {\n  const step =\n    e.key === 'ArrowRight' || e.key === 'ArrowDown'\n      ? 1\n      : e.key === 'ArrowLeft' || e.key === 'ArrowUp'\n        ? -1\n        : 0\n  if (!step || isCustom.value) return\n  e.preventDefault()\n  const next = ACCENTS[(presetIndex.value + step + ACCENTS.length) % ACCENTS.length]!\n  app.setAccent(next)\n  ;(e.currentTarget as HTMLElement).querySelector<HTMLElement>(`[data-color=\"${next}\"]`)?.focus()\n}\n</script>\n\n<template>\n  <div class=\"accent-card\">\n    <div class=\"row\" role=\"radiogroup\" :aria-label=\"t('settings.themeColor')\" @keydown=\"onKey\">\n      <n-tooltip v-for=\"(m, i) in ACCENT_META\" :key=\"m.color\" :delay=\"300\">\n        <template #trigger>\n          <button\n            type=\"button\"\n            role=\"radio\"\n            class=\"dot\"\n            :class=\"{ on: presetIndex === i }\"\n            :style=\"{ '--c': m.dot }\"\n            :data-color=\"m.color\"\n            :aria-checked=\"presetIndex === i\"\n            :aria-label=\"t(`settings.accentName.${m.key}`)\"\n            :tabindex=\"presetIndex === i || (isCustom && i === 0) ? 0 : -1\"\n            @click=\"app.setAccent(m.color)\"\n          >\n            <Icon v-if=\"presetIndex === i\" icon=\"ph:check-bold\" :width=\"13\" />\n          </button>\n        </template>\n        {{ t(`settings.accentName.${m.key}`) }}\n      </n-tooltip>\n\n      <!-- 自定义:彩虹圆点盖着一个透明的取色触发器,点圆点就是点触发器,取色板由 Naive 自己弹 -->\n      <n-tooltip :delay=\"300\">\n        <template #trigger>\n          <span\n            class=\"dot custom\"\n            :class=\"{ on: isCustom }\"\n            :style=\"isCustom ? { '--c': customDot } : undefined\"\n          >\n            <Icon v-if=\"isCustom\" icon=\"ph:check-bold\" :width=\"13\" />\n            <n-color-picker\n              class=\"picker\"\n              :value=\"app.accent\"\n              :modes=\"['hex']\"\n              :show-alpha=\"false\"\n              :swatches=\"[...ACCENTS]\"\n              :aria-label=\"t('settings.accentName.custom')\"\n              @update:value=\"setCustom\"\n            />\n          </span>\n        </template>\n        {{ t('settings.accentName.custom') }}\n      </n-tooltip>\n    </div>\n\n    <div class=\"name\" aria-live=\"polite\">\n      <b>{{ currentName }}</b>\n      <span class=\"hex\">{{ app.accent.toUpperCase() }}</span>\n    </div>\n\n    <div class=\"demo\" aria-hidden=\"true\">\n      <n-button type=\"primary\" size=\"small\" tabindex=\"-1\">\n        {{ t('settings.accentDemoButton') }}\n      </n-button>\n      <n-switch :value=\"true\" size=\"small\" />\n      <span class=\"link\">{{ t('settings.accentDemoLink') }}</span>\n      <n-progress type=\"line\" :percentage=\"64\" :show-indicator=\"false\" :height=\"6\" class=\"bar\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.accent-card {\n  padding: 14px 14px 12px;\n  border-radius: 14px;\n  background: var(--glass);\n  box-shadow:\n    inset 0 0 0 1px var(--hairline),\n    inset 0 1px 0 var(--edge-light);\n}\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n/* 圆点:顶左一抹高光 + 内描边,像一颗实物;悬停略放大;选中是「底色环 + 强调色环」两层,中间一个对勾 */\n.dot {\n  position: relative;\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  background:\n    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.38), transparent 58%), var(--c);\n  box-shadow:\n    inset 0 0 0 1px rgb(0 0 0 / 0.14),\n    0 1px 2px rgb(0 0 0 / 0.18);\n  transition:\n    transform var(--transition-fast),\n    box-shadow var(--transition-fast);\n}\n/* 色块悬停不放大(系统设置的强调色圆点同理),只在按下时略缩给出触感 */\n.dot:active {\n  transform: scale(0.96);\n}\n.dot.on {\n  box-shadow:\n    inset 0 0 0 1px rgb(0 0 0 / 0.14),\n    0 0 0 2px var(--bg-elevated),\n    0 0 0 4px var(--c);\n}\n.dot:focus-visible {\n  outline: 2px solid var(--signal);\n  outline-offset: 5px;\n}\n.dot :deep(svg) {\n  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));\n}\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    transition: none;\n  }\n  .dot:hover,\n  .dot:active {\n    transform: none;\n  }\n}\n\n/* 彩虹圆点:没选中时是一圈色相,选中后底色换成当前自定义色(环和对勾同预设) */\n.dot.custom {\n  overflow: hidden;\n  --c: #8e8e93;\n  background:\n    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.38), transparent 58%),\n    conic-gradient(#ff5e57, #ffb340, #f6e04a, #4cd964, #32c8d8, #4a8cff, #b25cf0, #ff5e57);\n}\n.dot.custom.on {\n  background:\n    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 0.38), transparent 58%), var(--c);\n}\n/* 取色触发器盖在彩虹圆点上、完全透明:点圆点就是点它,取色板由 Naive 自己弹。\n   它在 NTooltip 的 #trigger 插槽里渲染,拿不到本组件的 scoped 属性,所以必须走 :deep */\n.dot.custom :deep(.n-color-picker) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.name {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 12px 2px 0;\n  font-size: var(--font-size-base);\n  color: var(--text-2);\n}\n.name b {\n  font-weight: 500;\n  color: var(--text-1);\n}\n.hex {\n  font-family: var(--font-mono);\n  font-size: var(--font-size-sm);\n  color: var(--text-3);\n}\n\n/* 效果条:纯展示,不吃点击;背景是不透明实底,和抽屉里其它分组的玻璃底拉开层次 */\n.demo {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-top: 12px;\n  padding: 10px 12px;\n  border-radius: var(--radius-md);\n  background: var(--fill);\n  pointer-events: none;\n}\n.link {\n  font-size: var(--font-size-base);\n  color: var(--sel-fg);\n}\n.bar {\n  flex: 1;\n  min-width: 40px;\n}\n</style>\n"],"names":["app","useAppStore","t","useI18n","presetIndex","computed","ACCENTS","c","isCustom","customDot","solid","currentName","ACCENT_META","setCustom","value","m","onKey","e","step","next","_a","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_Fragment","_renderList","i","_createBlock","NTooltip","_normalizeClass","_normalizeStyle","Icon","_createTextVNode","_toDisplayString","_createVNode","NColorPicker","_hoisted_4","_hoisted_5","_hoisted_6","NButton","NSwitch","_hoisted_7","NProgress"],"mappings":"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"}

package/dist/layouts/AppHeader.vue.d.ts

@@ -2,11 +2,18 @@ type __VLS_Props = {
     showCollapse?: boolean;
     showBrand?: boolean;
     topMenu?: 'full' | 'l1' | 'l2' | null;
+    /** 顶栏是否出搜索按钮:侧栏已经带搜索入口时由 default.vue 关掉,免得同屏两个入口 */
+    showSearch?: boolean;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: (() => any) | undefined;
+}>, {
     showCollapse: boolean;
     showBrand: boolean;
     topMenu: "full" | "l1" | "l2" | null;
+    showSearch: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/layouts/AppHeader.vue.js

@@ -1,7 +1,7 @@
 import o from "./AppHeader2.vue.js";
 /* empty css               */
-import p from "../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ p(o, [["__scopeId", "data-v-8dc4f67f"]]);
+import e from "../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3e5c4a9e"]]);
 export {
   a as default
 };