@done-coding/admin-plugin-theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +131 -0
  2. package/es/assets/contrast.mjs +40 -0
  3. package/es/assets/cyber.mjs +40 -0
  4. package/es/assets/glass.mjs +40 -0
  5. package/es/assets/gugong.mjs +38 -0
  6. package/es/assets/ink.mjs +36 -0
  7. package/es/assets/soft.mjs +33 -0
  8. package/es/index.mjs +16 -0
  9. package/lib/assets/contrast.cjs +1 -0
  10. package/lib/assets/cyber.cjs +1 -0
  11. package/lib/assets/glass.cjs +1 -0
  12. package/lib/assets/gugong.cjs +1 -0
  13. package/lib/assets/ink.cjs +1 -0
  14. package/lib/assets/soft.cjs +1 -0
  15. package/lib/index.cjs +1 -0
  16. package/package.json +75 -0
  17. package/types/assets/contrast.d.ts +10 -0
  18. package/types/assets/cyber.d.ts +9 -0
  19. package/types/assets/glass.d.ts +9 -0
  20. package/types/assets/gugong.d.ts +9 -0
  21. package/types/assets/ink.d.ts +9 -0
  22. package/types/assets/soft.d.ts +9 -0
  23. package/types/index.d.ts +2 -0
  24. package/types/plugin.d.ts +21 -0
  25. package/types/types.d.ts +59 -0
package/README.md ADDED
@@ -0,0 +1,131 @@
1
+ # @done-coding/admin-plugin-theme
2
+
3
+ admin bridge 主题风格库：为 `@done-coding/admin-core` 后台应用提供一组高辨识度的内置风格主题。一个 style 是完整风格主题，内置 light/dark 两套色；**不存在颜色轴**——切 mode 只在当前风格自带的 light/dark 间切换。
4
+
5
+ > **架构定位（期 3 反转后）**：本包退化为「风格库」。切换（`setStyle`/`setDark`）、明暗持久化、CSS var 双命名空间挂值与 `<html>.dark` toggle 全部归 **core/bridge**（`@done-coding/admin-core`）。本包只声明风格资产 + 一个把资产注册进 bridge 的插件，**不持 runtime、不写 DOM、不写 CSS var**。
6
+
7
+ ## 安装
8
+
9
+ ```bash
10
+ pnpm add @done-coding/admin-plugin-theme
11
+ ```
12
+
13
+ peer 依赖：`@done-coding/admin-core`（bridge 插件宿主，主题能力承载方）、`vue`、`element-plus`。
14
+
15
+ ## 快速接入
16
+
17
+ ```ts
18
+ import { themePlugin } from "@done-coding/admin-plugin-theme";
19
+ import soft from "@done-coding/admin-plugin-theme/assets/soft";
20
+ import glass from "@done-coding/admin-plugin-theme/assets/glass";
21
+ import { appAdminBridge } from "@/config";
22
+
23
+ // install 同步执行：遍历 themes 经 bridge.theme.add(id, config) 注册进风格 map。
24
+ appAdminBridge.use(themePlugin, { themes: [soft, glass] });
25
+
26
+ // 切换走 bridge（真相源）：
27
+ appAdminBridge.theme.setStyle("soft"); // 切风格
28
+ appAdminBridge.theme.setDark(true); // 切暗色
29
+ // 顶栏 AppTheme.vue（core 内置）已提供风格下拉 + 暗色开关，直接读写 bridge。
30
+ ```
31
+
32
+ 不需要引入本包任何 CSS 文件——本包没有 `style.css`；视觉效果由 core 挂值 composable 据 bridge 真相运行时挂 `--admin-core-*` + `--el-*` 双命名空间。
33
+
34
+ ## options
35
+
36
+ | 字段 | 类型 | 说明 |
37
+ | -------- | -------------------- | ---------------------------------------------------------------- |
38
+ | `themes` | `AdminThemePreset[]` | 主题资产输入（至少 1 个）；install 遍历经 `bridge.theme.add` 注册 |
39
+
40
+ > 期 3 起 options 仅 `themes`。旧 `defaultStyle` / `defaultMode` / `storageKey` / `document` / `onReady` 全部移除——初始激活风格、明暗、持久化、document 注入均归 bridge 单一真相源；切换不再经插件 runtime，而是直接 `appAdminBridge.theme.*`。
41
+
42
+ ## 内置风格资产
43
+
44
+ 主题资产经子路径引入（每个风格一个独立文件，default export 一个 `AdminThemePreset`）：
45
+
46
+ ```ts
47
+ import soft from "@done-coding/admin-plugin-theme/assets/soft";
48
+ ```
49
+
50
+ 首批 6 个内置风格：
51
+
52
+ | id | label | 定位 |
53
+ | ---------- | -------- | ------------------------------------------------ |
54
+ | `soft` | 柔光悬浮 | 默认通用 SaaS：柔和底色、圆角与悬浮阴影 |
55
+ | `glass` | 通透琉璃 | 玻璃拟态：低饱和底色、毛玻璃模糊与轻薄悬浮感 |
56
+ | `gugong` | 朱墙鎏金 | 文博东方庄重：红墙琉璃黄、暖纸底色与方正仪态 |
57
+ | `cyber` | 霓虹赛博 | 暗色科技赛博：深空底色、霓虹青品红与锐利辉光 |
58
+ | `contrast` | 极致对比 | 高对比可访问性：纯黑白底、深档纯色与粗边框焦点环 |
59
+ | `ink` | 水墨留白 | 水墨东方极简：黑白灰主调、墨青点睛与大量留白 |
60
+
61
+ bridge 另自带 `'default'` 风格（= core 初始 `APP_THEME_CONFIG`，Element Plus 原生色系），故顶栏风格下拉项 = `'default'` + 已注册的插件风格。
62
+
63
+ ## 资产契约（`AdminThemePreset`，扁平结构）
64
+
65
+ ```ts
66
+ import type { AdminThemePreset } from "@done-coding/admin-plugin-theme";
67
+
68
+ const myTheme: AdminThemePreset = {
69
+ id: "my-brand", // 自定义 id 直接可用，无需断言（见「id 类型说明」）
70
+ label: "业务定制品牌",
71
+ description: "业务自定义风格主题",
72
+ config: {
73
+ light: {
74
+ // 8 个必填语义色（与 core AppThemeColor 一一对应）
75
+ bodyColor: "#f6f7fb",
76
+ baseColor: "#0f172a",
77
+ primaryColor: "#0ea5e9",
78
+ successColor: "#10b981",
79
+ warningColor: "#f59e0b",
80
+ dangerColor: "#ef4444",
81
+ errorColor: "#ef4444",
82
+ infoColor: "#3b82f6",
83
+ // 9 个可选风格字段（有则 core 挂对应 CSS var，无则不输出）
84
+ radius: "8px",
85
+ shadow: "0 14px 30px -12px rgba(16, 24, 40, 0.13)",
86
+ },
87
+ dark: {
88
+ bodyColor: "#0a0d14",
89
+ baseColor: "#e7ebf3",
90
+ primaryColor: "#38bdf8",
91
+ successColor: "#34d399",
92
+ warningColor: "#fbbf24",
93
+ dangerColor: "#f87171",
94
+ errorColor: "#f87171",
95
+ infoColor: "#60a5fa",
96
+ radius: "8px",
97
+ },
98
+ },
99
+ };
100
+
101
+ appAdminBridge.use(themePlugin, { themes: [myTheme] });
102
+ ```
103
+
104
+ 契约要点：
105
+
106
+ - **`config.light` / `config.dark`（必填）**：两套 core `AppThemeColor`（扁平字段，非 `shell`/`rootVars` 嵌套）。
107
+ - **8 个必填语义色**：`bodyColor` / `baseColor` / `primaryColor` / `successColor` / `warningColor` / `dangerColor` / `errorColor` / `infoColor`，与 core `APP_THEME_CONFIG` 单 mode 字段一一对应。
108
+ - **9 个可选风格字段**：`radius` / `borderColor` / `shadow` / `borderWidth` / `accent` / `glow` / `blur` / `focusRing` / `surface`——core 挂值 composable 按 duck 类型「有则挂对应 `--admin-core-*`（+ EP 有对位的 `--el-*`）、无则不输出」。
109
+ - **[MUST NOT] 写 CSS var 键**：资产字段一律扁平语义字段，[MUST NOT] 出现 `--dc-theme-*` / `--el-*` 等 CSS 变量键——CSS var 命名 / 派生 / 双命名空间挂值由 core 统一负责（`--dc-theme-*` 命名空间已整体退役）。
110
+ - **色阶无需声明**：6 语义色的色阶（`-light-3/5/7/8/9` / `-dark-2`）由 core 挂值 composable 复刻 EP `mix()` 算法派生，资产只给基色。
111
+ - **id 类型说明**：`AdminThemePreset.id` 为宽类型 `AdminThemeStyleInput = AdminThemeStyleId | (string & {})`——内置 id（6 个）保留 IDE 自动补全，业务自定义字符串 id 直接可用，无需断言。
112
+
113
+ ## 切换与持久化（归 core/bridge）
114
+
115
+ - **切换**：`appAdminBridge.theme.setStyle(name)` / `appAdminBridge.theme.setDark(bool)`；真相源 `appAdminBridge.themeStyle` / `themeIsDark`（响应式只读）；当前生效 JS 色 `appAdminBridge.themeColors`。
116
+ - **挂值**：core 挂值 composable（AppLayout setup 启动）watch bridge 真相 → 生成 `<style id="admin-core-theme">` 的 `:root{}` + `:root.dark{}`（`--admin-core-*` + `--el-*` 双命名空间独立挂值 + 6 语义色 EP 色阶），并 toggle `<html>.dark`。
117
+ - **持久化**：bridge 经 `getStorage()` 持久化 `{ themeStyle, themeIsDark }` 并在 init 恢复（插件后注册的风格亦能命中恢复目标再 apply）。
118
+ - **顶栏 UI**：core 内置 `AppTheme.vue`（暗色开关 + 多风格下拉，`theme.list.length > 1` 才显示下拉）直接读写 bridge。
119
+
120
+ ## 风格资产维护（包内）
121
+
122
+ - **新增风格零配置**：在 `assets/` 下新增 `<name>.ts`（default export 一个 `AdminThemePreset`）即自动纳入构建多入口（`vite.config.ts` 扫描 `assets/*.ts`），产出 `es/assets/<name>.mjs` + `types/assets/<name>.d.ts`，经 `@done-coding/admin-plugin-theme/assets/<name>` 子路径暴露。
123
+ - **字段分层**：8 必填语义色 → 9 可选风格字段（仅当该风格需要圆角 / 阴影 / 玻璃 / 赛博等差异时给）。色阶 / CSS var 命名一律不在资产里写。
124
+
125
+ ## 测试
126
+
127
+ ```bash
128
+ pnpm -F @done-coding/admin-plugin-theme test
129
+ ```
130
+
131
+ 单测不依赖 jsdom / DOM：install 副作用经 mock `ctx.bridge.theme.add` 断言（不再 mock document / storage runtime）。
package/es/assets/contrast.mjs ADDED
@@ -0,0 +1,40 @@
1
+ const o = {
2
+ id: "contrast",
3
+ label: "极致对比",
4
+ description: "高对比可访问性：纯黑白底、深档纯色与粗边框焦点环",
5
+ config: {
6
+ light: {
7
+ bodyColor: "#ffffff",
8
+ baseColor: "#000000",
9
+ primaryColor: "#0d47a1",
10
+ successColor: "#1b5e20",
11
+ warningColor: "#7a4f01",
12
+ dangerColor: "#b71c1c",
13
+ errorColor: "#b71c1c",
14
+ infoColor: "#01579b",
15
+ radius: "0px",
16
+ borderWidth: "2px",
17
+ borderColor: "#000000",
18
+ focusRing: "0 0 0 3px #e65100",
19
+ shadow: "none"
20
+ },
21
+ dark: {
22
+ bodyColor: "#000000",
23
+ baseColor: "#ffffff",
24
+ primaryColor: "#8ab4f8",
25
+ successColor: "#81c995",
26
+ warningColor: "#fdd663",
27
+ dangerColor: "#f28b82",
28
+ errorColor: "#f28b82",
29
+ infoColor: "#a8c7fa",
30
+ radius: "0px",
31
+ borderWidth: "2px",
32
+ borderColor: "#ffffff",
33
+ focusRing: "0 0 0 3px #fdd663",
34
+ shadow: "none"
35
+ }
36
+ }
37
+ };
38
+ export {
39
+ o as default
40
+ };
package/es/assets/cyber.mjs ADDED
@@ -0,0 +1,40 @@
1
+ const o = {
2
+ id: "cyber",
3
+ label: "霓虹赛博",
4
+ description: "暗色科技赛博：深空底色、霓虹青品红与锐利辉光",
5
+ config: {
6
+ light: {
7
+ bodyColor: "#eef5f8",
8
+ baseColor: "#0b2530",
9
+ primaryColor: "#0891b2",
10
+ successColor: "#16a34a",
11
+ warningColor: "#d97706",
12
+ dangerColor: "#e11d48",
13
+ errorColor: "#e11d48",
14
+ infoColor: "#7c3aed",
15
+ radius: "2px",
16
+ accent: "#c026d3",
17
+ glow: "0 0 0 1px rgba(8, 145, 178, 0.25)",
18
+ borderColor: "rgba(8, 145, 178, 0.35)",
19
+ shadow: "0 10px 24px -12px rgba(8, 145, 178, 0.25)"
20
+ },
21
+ dark: {
22
+ bodyColor: "#060a14",
23
+ baseColor: "#d7e3ff",
24
+ primaryColor: "#22d3ee",
25
+ successColor: "#4ade80",
26
+ warningColor: "#facc15",
27
+ dangerColor: "#f43f5e",
28
+ errorColor: "#f43f5e",
29
+ infoColor: "#a78bfa",
30
+ radius: "2px",
31
+ accent: "#e879f9",
32
+ glow: "0 0 14px rgba(34, 211, 238, 0.45)",
33
+ borderColor: "rgba(34, 211, 238, 0.35)",
34
+ shadow: "0 0 0 1px rgba(34, 211, 238, 0.16), 0 16px 40px -16px rgba(0, 0, 0, 0.9)"
35
+ }
36
+ }
37
+ };
38
+ export {
39
+ o as default
40
+ };
package/es/assets/glass.mjs ADDED
@@ -0,0 +1,40 @@
1
+ const r = {
2
+ id: "glass",
3
+ label: "通透琉璃",
4
+ description: "玻璃拟态：低饱和底色、毛玻璃模糊与轻薄悬浮感",
5
+ config: {
6
+ light: {
7
+ bodyColor: "#edf2fa",
8
+ baseColor: "#1e293b",
9
+ primaryColor: "#0ea5e9",
10
+ successColor: "#14b8a6",
11
+ warningColor: "#f59e0b",
12
+ dangerColor: "#f43f5e",
13
+ errorColor: "#f43f5e",
14
+ infoColor: "#6366f1",
15
+ radius: "16px",
16
+ blur: "18px",
17
+ surface: "rgba(255, 255, 255, 0.55)",
18
+ borderColor: "rgba(255, 255, 255, 0.65)",
19
+ shadow: "0 8px 32px -8px rgba(31, 56, 100, 0.14)"
20
+ },
21
+ dark: {
22
+ bodyColor: "#0b1220",
23
+ baseColor: "#e2e8f0",
24
+ primaryColor: "#38bdf8",
25
+ successColor: "#2dd4bf",
26
+ warningColor: "#fbbf24",
27
+ dangerColor: "#fb7185",
28
+ errorColor: "#fb7185",
29
+ infoColor: "#818cf8",
30
+ radius: "16px",
31
+ blur: "20px",
32
+ surface: "rgba(15, 23, 42, 0.55)",
33
+ borderColor: "rgba(148, 163, 184, 0.22)",
34
+ shadow: "0 12px 40px -12px rgba(2, 6, 23, 0.85)"
35
+ }
36
+ }
37
+ };
38
+ export {
39
+ r as default
40
+ };
package/es/assets/gugong.mjs ADDED
@@ -0,0 +1,38 @@
1
+ const o = {
2
+ id: "gugong",
3
+ label: "朱墙鎏金",
4
+ description: "文博东方庄重：红墙琉璃黄、暖纸底色与方正仪态",
5
+ config: {
6
+ light: {
7
+ bodyColor: "#f8f2e4",
8
+ baseColor: "#33261c",
9
+ primaryColor: "#9d2933",
10
+ successColor: "#4a7c59",
11
+ warningColor: "#b8860b",
12
+ dangerColor: "#c63a23",
13
+ errorColor: "#c63a23",
14
+ infoColor: "#3e5f8a",
15
+ radius: "4px",
16
+ accent: "#d8b04a",
17
+ borderColor: "#e6d8ba",
18
+ shadow: "0 6px 20px -10px rgba(86, 43, 22, 0.22)"
19
+ },
20
+ dark: {
21
+ bodyColor: "#1b1412",
22
+ baseColor: "#ecdcc3",
23
+ primaryColor: "#c25750",
24
+ successColor: "#76a06f",
25
+ warningColor: "#d9b35c",
26
+ dangerColor: "#de6a51",
27
+ errorColor: "#de6a51",
28
+ infoColor: "#7d9cc0",
29
+ radius: "4px",
30
+ accent: "#d9b35c",
31
+ borderColor: "#3a2c24",
32
+ shadow: "0 10px 28px -12px rgba(0, 0, 0, 0.7)"
33
+ }
34
+ }
35
+ };
36
+ export {
37
+ o as default
38
+ };
package/es/assets/ink.mjs ADDED
@@ -0,0 +1,36 @@
1
+ const o = {
2
+ id: "ink",
3
+ label: "水墨留白",
4
+ description: "水墨东方极简：黑白灰主调、墨青点睛与大量留白",
5
+ config: {
6
+ light: {
7
+ bodyColor: "#f8f8f5",
8
+ baseColor: "#1c1c1c",
9
+ primaryColor: "#2f575d",
10
+ successColor: "#5c7d5b",
11
+ warningColor: "#a8842e",
12
+ dangerColor: "#b04a3a",
13
+ errorColor: "#b04a3a",
14
+ infoColor: "#6b7d87",
15
+ radius: "2px",
16
+ borderColor: "#e6e6e1",
17
+ shadow: "0 4px 18px -10px rgba(28, 28, 28, 0.1)"
18
+ },
19
+ dark: {
20
+ bodyColor: "#131313",
21
+ baseColor: "#e8e8e3",
22
+ primaryColor: "#74a7ab",
23
+ successColor: "#84a983",
24
+ warningColor: "#c2a45e",
25
+ dangerColor: "#c97b6d",
26
+ errorColor: "#c97b6d",
27
+ infoColor: "#8fa1ab",
28
+ radius: "2px",
29
+ borderColor: "#2a2a2a",
30
+ shadow: "0 8px 24px -14px rgba(0, 0, 0, 0.8)"
31
+ }
32
+ }
33
+ };
34
+ export {
35
+ o as default
36
+ };
package/es/assets/soft.mjs ADDED
@@ -0,0 +1,33 @@
1
+ const o = {
2
+ id: "soft",
3
+ label: "柔光悬浮",
4
+ config: {
5
+ light: {
6
+ bodyColor: "#f6f7fb",
7
+ baseColor: "#0f172a",
8
+ primaryColor: "#6366f1",
9
+ successColor: "#10b981",
10
+ warningColor: "#f59e0b",
11
+ dangerColor: "#ef4444",
12
+ errorColor: "#ef4444",
13
+ infoColor: "#3b82f6",
14
+ radius: "10px",
15
+ shadow: "0 14px 30px -12px rgba(16, 24, 40, 0.13)"
16
+ },
17
+ dark: {
18
+ bodyColor: "#0a0d14",
19
+ baseColor: "#e7ebf3",
20
+ primaryColor: "#8b7cf6",
21
+ successColor: "#34d399",
22
+ warningColor: "#fbbf24",
23
+ dangerColor: "#f87171",
24
+ errorColor: "#f87171",
25
+ infoColor: "#60a5fa",
26
+ radius: "10px",
27
+ shadow: "0 18px 38px -16px rgba(0, 0, 0, 0.7)"
28
+ }
29
+ }
30
+ };
31
+ export {
32
+ o as default
33
+ };
package/es/index.mjs ADDED
@@ -0,0 +1,16 @@
1
+ const t = {
2
+ name: "admin-plugin-theme",
3
+ install(n, e) {
4
+ var h;
5
+ if (!e || !((h = e.themes) != null && h.length))
6
+ throw new Error(
7
+ "admin-plugin-theme: 安装需要 options.themes（至少 1 个风格）"
8
+ );
9
+ e.themes.forEach((m) => {
10
+ n.bridge.theme.add(m.id, m.config);
11
+ });
12
+ }
13
+ };
14
+ export {
15
+ t as themePlugin
16
+ };
package/lib/assets/contrast.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o={id:"contrast",label:"极致对比",description:"高对比可访问性：纯黑白底、深档纯色与粗边框焦点环",config:{light:{bodyColor:"#ffffff",baseColor:"#000000",primaryColor:"#0d47a1",successColor:"#1b5e20",warningColor:"#7a4f01",dangerColor:"#b71c1c",errorColor:"#b71c1c",infoColor:"#01579b",radius:"0px",borderWidth:"2px",borderColor:"#000000",focusRing:"0 0 0 3px #e65100",shadow:"none"},dark:{bodyColor:"#000000",baseColor:"#ffffff",primaryColor:"#8ab4f8",successColor:"#81c995",warningColor:"#fdd663",dangerColor:"#f28b82",errorColor:"#f28b82",infoColor:"#a8c7fa",radius:"0px",borderWidth:"2px",borderColor:"#ffffff",focusRing:"0 0 0 3px #fdd663",shadow:"none"}}};exports.default=o;
package/lib/assets/cyber.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o={id:"cyber",label:"霓虹赛博",description:"暗色科技赛博：深空底色、霓虹青品红与锐利辉光",config:{light:{bodyColor:"#eef5f8",baseColor:"#0b2530",primaryColor:"#0891b2",successColor:"#16a34a",warningColor:"#d97706",dangerColor:"#e11d48",errorColor:"#e11d48",infoColor:"#7c3aed",radius:"2px",accent:"#c026d3",glow:"0 0 0 1px rgba(8, 145, 178, 0.25)",borderColor:"rgba(8, 145, 178, 0.35)",shadow:"0 10px 24px -12px rgba(8, 145, 178, 0.25)"},dark:{bodyColor:"#060a14",baseColor:"#d7e3ff",primaryColor:"#22d3ee",successColor:"#4ade80",warningColor:"#facc15",dangerColor:"#f43f5e",errorColor:"#f43f5e",infoColor:"#a78bfa",radius:"2px",accent:"#e879f9",glow:"0 0 14px rgba(34, 211, 238, 0.45)",borderColor:"rgba(34, 211, 238, 0.35)",shadow:"0 0 0 1px rgba(34, 211, 238, 0.16), 0 16px 40px -16px rgba(0, 0, 0, 0.9)"}}};exports.default=o;
package/lib/assets/glass.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={id:"glass",label:"通透琉璃",description:"玻璃拟态：低饱和底色、毛玻璃模糊与轻薄悬浮感",config:{light:{bodyColor:"#edf2fa",baseColor:"#1e293b",primaryColor:"#0ea5e9",successColor:"#14b8a6",warningColor:"#f59e0b",dangerColor:"#f43f5e",errorColor:"#f43f5e",infoColor:"#6366f1",radius:"16px",blur:"18px",surface:"rgba(255, 255, 255, 0.55)",borderColor:"rgba(255, 255, 255, 0.65)",shadow:"0 8px 32px -8px rgba(31, 56, 100, 0.14)"},dark:{bodyColor:"#0b1220",baseColor:"#e2e8f0",primaryColor:"#38bdf8",successColor:"#2dd4bf",warningColor:"#fbbf24",dangerColor:"#fb7185",errorColor:"#fb7185",infoColor:"#818cf8",radius:"16px",blur:"20px",surface:"rgba(15, 23, 42, 0.55)",borderColor:"rgba(148, 163, 184, 0.22)",shadow:"0 12px 40px -12px rgba(2, 6, 23, 0.85)"}}};exports.default=r;
package/lib/assets/gugong.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o={id:"gugong",label:"朱墙鎏金",description:"文博东方庄重：红墙琉璃黄、暖纸底色与方正仪态",config:{light:{bodyColor:"#f8f2e4",baseColor:"#33261c",primaryColor:"#9d2933",successColor:"#4a7c59",warningColor:"#b8860b",dangerColor:"#c63a23",errorColor:"#c63a23",infoColor:"#3e5f8a",radius:"4px",accent:"#d8b04a",borderColor:"#e6d8ba",shadow:"0 6px 20px -10px rgba(86, 43, 22, 0.22)"},dark:{bodyColor:"#1b1412",baseColor:"#ecdcc3",primaryColor:"#c25750",successColor:"#76a06f",warningColor:"#d9b35c",dangerColor:"#de6a51",errorColor:"#de6a51",infoColor:"#7d9cc0",radius:"4px",accent:"#d9b35c",borderColor:"#3a2c24",shadow:"0 10px 28px -12px rgba(0, 0, 0, 0.7)"}}};exports.default=o;
package/lib/assets/ink.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o={id:"ink",label:"水墨留白",description:"水墨东方极简：黑白灰主调、墨青点睛与大量留白",config:{light:{bodyColor:"#f8f8f5",baseColor:"#1c1c1c",primaryColor:"#2f575d",successColor:"#5c7d5b",warningColor:"#a8842e",dangerColor:"#b04a3a",errorColor:"#b04a3a",infoColor:"#6b7d87",radius:"2px",borderColor:"#e6e6e1",shadow:"0 4px 18px -10px rgba(28, 28, 28, 0.1)"},dark:{bodyColor:"#131313",baseColor:"#e8e8e3",primaryColor:"#74a7ab",successColor:"#84a983",warningColor:"#c2a45e",dangerColor:"#c97b6d",errorColor:"#c97b6d",infoColor:"#8fa1ab",radius:"2px",borderColor:"#2a2a2a",shadow:"0 8px 24px -14px rgba(0, 0, 0, 0.8)"}}};exports.default=o;
package/lib/assets/soft.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o={id:"soft",label:"柔光悬浮",config:{light:{bodyColor:"#f6f7fb",baseColor:"#0f172a",primaryColor:"#6366f1",successColor:"#10b981",warningColor:"#f59e0b",dangerColor:"#ef4444",errorColor:"#ef4444",infoColor:"#3b82f6",radius:"10px",shadow:"0 14px 30px -12px rgba(16, 24, 40, 0.13)"},dark:{bodyColor:"#0a0d14",baseColor:"#e7ebf3",primaryColor:"#8b7cf6",successColor:"#34d399",warningColor:"#fbbf24",dangerColor:"#f87171",errorColor:"#f87171",infoColor:"#60a5fa",radius:"10px",shadow:"0 18px 38px -16px rgba(0, 0, 0, 0.7)"}}};exports.default=o;
package/lib/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={name:"admin-plugin-theme",install(n,e){var t;if(!e||!((t=e.themes)!=null&&t.length))throw new Error("admin-plugin-theme: 安装需要 options.themes（至少 1 个风格）");e.themes.forEach(i=>{n.bridge.theme.add(i.id,i.config)})}};exports.themePlugin=m;
package/package.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "name": "@done-coding/admin-plugin-theme",
3
+ "version": "0.1.0",
4
+ "description": "admin 主题风格插件",
5
+ "private": false,
6
+ "main": "lib/index.cjs",
7
+ "module": "es/index.mjs",
8
+ "types": "types/index.d.ts",
9
+ "type": "module",
10
+ "exports": {
11
+ ".": {
12
+ "import": "./es/index.mjs",
13
+ "require": "./lib/index.cjs",
14
+ "types": "./types/index.d.ts"
15
+ },
16
+ "./assets/*": {
17
+ "import": "./es/assets/*.mjs",
18
+ "types": "./types/assets/*.d.ts"
19
+ }
20
+ },
21
+ "files": [
22
+ "es",
23
+ "lib",
24
+ "types"
25
+ ],
26
+ "scripts": {
27
+ "serve": "vite",
28
+ "predev": "dc-inject",
29
+ "dev": "vite build -w -m hotBuild",
30
+ "prehotBuild": "dc-inject",
31
+ "hotBuild": "vite build -w",
32
+ "prebuild": "dc-inject",
33
+ "build": "vue-tsc && vite build",
34
+ "build:test": "pnpm run build",
35
+ "prepack": "pnpm build",
36
+ "test": "vitest run",
37
+ "test:watch": "vitest",
38
+ "coverage": "vitest run --coverage"
39
+ },
40
+ "repository": {
41
+ "type": "git",
42
+ "url": "https://github.com/done-coding/done-coding-admin.git",
43
+ "directory": "packages/plugin-theme"
44
+ },
45
+ "publishConfig": {
46
+ "access": "public",
47
+ "registry": "https://registry.npmjs.org/"
48
+ },
49
+ "author": "JustSoSu",
50
+ "license": "MIT",
51
+ "sideEffects": false,
52
+ "devDependencies": {
53
+ "@done-coding/admin-core": "0.9.0",
54
+ "@done-coding/cli-inject": "^0.6.2",
55
+ "@types/node": "^18.0.0",
56
+ "@vitejs/plugin-vue": "^5.0.4",
57
+ "@vitejs/plugin-vue-jsx": "^4.1.2",
58
+ "@vitest/coverage-istanbul": "^1.6.1",
59
+ "typescript": "^5.2.2",
60
+ "vite": "^5.2.0",
61
+ "vite-plugin-dts": "^4.5.4",
62
+ "vitest": "^1.6.1",
63
+ "vue-tsc": "^2.2.12"
64
+ },
65
+ "peerDependencies": {
66
+ "@done-coding/admin-core": "workspace:^",
67
+ "@element-plus/icons-vue": "^2.3.1",
68
+ "element-plus": "^2.7.0",
69
+ "vue": "^3.4.0"
70
+ },
71
+ "engines": {
72
+ "node": ">=18.0.0"
73
+ },
74
+ "gitHead": "13c617a9392202dffa804eff704fbd2919bd097f"
75
+ }
package/types/assets/contrast.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * contrast —— 高对比 / 可访问性风格主题。
4
+ *
5
+ * WCAG AA+ 取向：正文与背景对比 21:1（纯黑/纯白），状态色均取深档纯色；
6
+ * 零圆角 + 粗边框（borderWidth）+ 显式焦点环（focusRing），阴影置 none。
7
+ * dark 状态色按暗底可读性单独取浅档色，非 light 反色。
8
+ */
9
+ declare const contrastTheme: AdminThemePreset;
10
+ export default contrastTheme;
package/types/assets/cyber.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * cyber —— 暗色科技 / 赛博风格主题。
4
+ *
5
+ * 以 dark 为主场：深空底色 + 霓虹高饱和（青 primary / 品红 accent / 紫 info）+
6
+ * 锐利小圆角 + 霓虹辉光（glow）；light 为可用的浅色科技感，非简单反色。
7
+ */
8
+ declare const cyberTheme: AdminThemePreset;
9
+ export default cyberTheme;
package/types/assets/glass.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * glass —— 玻璃拟态风格主题。
4
+ *
5
+ * 通透感优先：低饱和雾蓝底色 + 半透明表面（surface）+ 毛玻璃模糊（blur）+
6
+ * 大圆角轻薄阴影；dark 为深空蓝上的深色半透明玻璃，而非 light 反色。
7
+ */
8
+ declare const glassTheme: AdminThemePreset;
9
+ export default glassTheme;
package/types/assets/gugong.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * gugong —— 文博 / 东方庄重风格主题。
4
+ *
5
+ * 故宫红墙琉璃黄意象：暖纸底色 + 庄重宫墙朱红 primary + 琉璃黄点缀（accent）+
6
+ * 方正小圆角；dark 为墨色宫墙——暖黑底、绢帛米字色与鎏金点缀，非 light 反色。
7
+ */
8
+ declare const gugongTheme: AdminThemePreset;
9
+ export default gugongTheme;
package/types/assets/ink.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * ink —— 水墨 / 东方极简风格主题。
4
+ *
5
+ * 黑白灰主调、留白感优先：宣纸白底 + 浓墨字色，彩色极克制——仅 primary 一点
6
+ * 墨青、danger 一点朱砂；dark 为夜墨——近黑底与月白字色，墨青提亮，非 light 反色。
7
+ */
8
+ declare const inkTheme: AdminThemePreset;
9
+ export default inkTheme;
package/types/assets/soft.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { AdminThemePreset } from '@done-coding/admin-plugin-theme';
2
+ /**
3
+ * soft —— 柔光悬浮风格主题。
4
+ *
5
+ * 内置 light/dark 两套扁平 {@link AppThemeColor}：8 语义色 + 圆角 / 阴影风格字段；
6
+ * dark 为深底柔光，非 light 简单反色。CSS var 挂值与切换归 core/bridge。
7
+ */
8
+ declare const softTheme: AdminThemePreset;
9
+ export default softTheme;
package/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { themePlugin } from './plugin';
2
+ export type { AdminThemePreset, AdminThemePluginOptions, AdminThemeStyleId, AdminThemeStyleInput, AppThemeColor, AppThemeConfig, } from './types';
package/types/plugin.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { AdminBridgePlugin } from '@done-coding/admin-core';
2
+ import { AdminThemePluginOptions } from './types';
3
+ /**
4
+ * admin bridge 主题插件（期 3 架构反转后退化为「风格库」）。
5
+ *
6
+ * `install` 同步执行（遵守 bridge install 同步语义）：遍历 `options.themes`，
7
+ * 经 `ctx.bridge.theme.add(id, config)` 把每个风格注册进 bridge 风格 map。
8
+ * 切换（`setStyle`/`setDark`）、持久化、CSS var 双命名空间挂值与 `<html>.dark`
9
+ * toggle 全部归 core/bridge——插件不再持 runtime、不写 DOM、不写 CSS var、
10
+ * 不调 `ctx.update`。`name` 用于 bridge 插件宿主的跨对象实例幂等安装。
11
+ *
12
+ * @example
13
+ * ```ts
14
+ * import { themePlugin } from "@done-coding/admin-plugin-theme";
15
+ * import soft from "@done-coding/admin-plugin-theme/assets/soft";
16
+ *
17
+ * appAdminBridge.use(themePlugin, { themes: [soft] });
18
+ * // 切换走 bridge：appAdminBridge.theme.setStyle("soft") / setDark(true)
19
+ * ```
20
+ */
21
+ export declare const themePlugin: AdminBridgePlugin<unknown, unknown, AdminThemePluginOptions>;
package/types/types.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ import { AppThemeColor, AppThemeConfig } from '@done-coding/admin-core';
2
+ /**
3
+ * 内置风格主题 id（包内 `assets/` 自带主题的联合）。
4
+ *
5
+ * 仅枚举包内 `assets/` 自带的内置主题；业务自定义主题 id 不受此联合限制，
6
+ * 公开 API 的 style 入参统一使用宽类型 {@link AdminThemeStyleInput}。
7
+ * 一个 style 是完整风格主题（内置 light/dark 两套色）；明暗轴归 bridge，
8
+ * 不存在颜色轴。
9
+ */
10
+ export type AdminThemeStyleId = "soft" | "glass" | "gugong" | "cyber" | "contrast" | "ink";
11
+ /**
12
+ * 风格主题 id 输入宽类型：内置 id（{@link AdminThemeStyleId}，保留 IDE 自动补全）
13
+ * 或任意业务自定义字符串 id。
14
+ *
15
+ * `(string & {})` 用于在不丢失内置字面量补全的前提下接受任意字符串——
16
+ * 业务自定义主题的 id 无需类型断言。
17
+ */
18
+ export type AdminThemeStyleInput = AdminThemeStyleId | (string & {});
19
+ /**
20
+ * 完整风格主题资产契约（扁平结构）。
21
+ *
22
+ * 期 3 架构反转后插件退化为「风格库」：asset 仅声明风格 id/label + light/dark
23
+ * 两套 {@link AppThemeColor}（core 类型，8 必填色 + 9 可选风格字段），由
24
+ * `themePlugin.install` 经 `bridge.theme.add(id, config)` 注册进 bridge 风格 map。
25
+ * 切换（setStyle/setDark）、持久化、CSS var 挂值与 `.dark` toggle 全部归
26
+ * core/bridge——插件不再持 runtime、不写 DOM、不写 CSS var。
27
+ */
28
+ export interface AdminThemePreset {
29
+ /** 风格 id（内置 id 或业务自定义字符串 id） */
30
+ id: AdminThemeStyleInput;
31
+ /** 风格展示名 */
32
+ label: string;
33
+ /** 风格描述 */
34
+ description?: string;
35
+ /**
36
+ * light/dark 两套 {@link AppThemeColor}（core 类型，扁平字段）。
37
+ *
38
+ * 8 必填语义色 + 9 可选风格字段（radius/borderColor/shadow/borderWidth/
39
+ * accent/glow/blur/focusRing/surface）——core 挂值 composable 按 duck 类型
40
+ * 有则挂、无则不输出对应 CSS var。
41
+ */
42
+ config: AppThemeConfig;
43
+ }
44
+ /**
45
+ * `themePlugin` 安装 options。
46
+ *
47
+ * @example
48
+ * ```ts
49
+ * import { themePlugin } from "@done-coding/admin-plugin-theme";
50
+ * import soft from "@done-coding/admin-plugin-theme/assets/soft";
51
+ *
52
+ * appAdminBridge.use(themePlugin, { themes: [soft] });
53
+ * ```
54
+ */
55
+ export interface AdminThemePluginOptions {
56
+ /** 主题资产输入（至少 1 个）；install 遍历经 `bridge.theme.add` 注册 */
57
+ themes: AdminThemePreset[];
58
+ }
59
+ export type { AppThemeColor, AppThemeConfig };