workdesktop-ai 1.2.3 → 1.2.5
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.
- package/CHANGELOG.md +1 -0
- package/dist/api-button/index.mjs +1 -1
- package/dist/auto-complete/index.mjs +1 -1
- package/dist/checkbox-list/index.mjs +1 -1
- package/dist/chunks/{ApiButton.vue_vue_type_script_setup_true_lang-3BjZSAPZ.mjs → ApiButton.vue_vue_type_script_setup_true_lang-ZLHP9S_H.mjs} +2 -2
- package/dist/chunks/{ApiButton.vue_vue_type_script_setup_true_lang-3BjZSAPZ.mjs.map → ApiButton.vue_vue_type_script_setup_true_lang-ZLHP9S_H.mjs.map} +1 -1
- package/dist/chunks/{AutoComplete-C6Nxatvt.mjs → AutoComplete-BKWrR5pD.mjs} +2 -2
- package/dist/chunks/{AutoComplete-C6Nxatvt.mjs.map → AutoComplete-BKWrR5pD.mjs.map} +1 -1
- package/dist/chunks/{CheckboxList-5AEx33r5.mjs → CheckboxList-5o9E0Tzg.mjs} +2 -2
- package/dist/chunks/{CheckboxList-5AEx33r5.mjs.map → CheckboxList-5o9E0Tzg.mjs.map} +1 -1
- package/dist/chunks/{ConfirmButton.vue_vue_type_script_setup_true_lang-CXYH1Rlc.mjs → ConfirmButton.vue_vue_type_script_setup_true_lang-Cz1M6QsL.mjs} +2 -2
- package/dist/chunks/{ConfirmButton.vue_vue_type_script_setup_true_lang-CXYH1Rlc.mjs.map → ConfirmButton.vue_vue_type_script_setup_true_lang-Cz1M6QsL.mjs.map} +1 -1
- package/dist/chunks/{DataForm-C6VLTSOm.mjs → DataForm-Dvx6GxlR.mjs} +8 -7
- package/dist/chunks/{DataForm-C6VLTSOm.mjs.map → DataForm-Dvx6GxlR.mjs.map} +1 -1
- package/dist/chunks/{DataGrid-Dd7n5JM7.mjs → DataGrid-Cw3yXhmR.mjs} +3 -3
- package/dist/chunks/{DataGrid-Dd7n5JM7.mjs.map → DataGrid-Cw3yXhmR.mjs.map} +1 -1
- package/dist/chunks/{DialogButton.vue_vue_type_script_setup_true_lang-CTXP79zc.mjs → DialogButton.vue_vue_type_script_setup_true_lang-ex2zYLZC.mjs} +2 -2
- package/dist/chunks/{DialogButton.vue_vue_type_script_setup_true_lang-CTXP79zc.mjs.map → DialogButton.vue_vue_type_script_setup_true_lang-ex2zYLZC.mjs.map} +1 -1
- package/dist/chunks/{Drawer-ucXKUecL.mjs → Drawer-BzdohcBg.mjs} +96 -90
- package/dist/chunks/Drawer-BzdohcBg.mjs.map +1 -0
- package/dist/chunks/{DrawerButton.vue_vue_type_script_setup_true_lang-DUda4p7_.mjs → DrawerButton.vue_vue_type_script_setup_true_lang-u5ifQw5k.mjs} +2 -2
- package/dist/chunks/{DrawerButton.vue_vue_type_script_setup_true_lang-DUda4p7_.mjs.map → DrawerButton.vue_vue_type_script_setup_true_lang-u5ifQw5k.mjs.map} +1 -1
- package/dist/chunks/{EditableGrid-CDeeVkaX.mjs → EditableGrid-Dr48XzLH.mjs} +6 -5
- package/dist/chunks/{EditableGrid-CDeeVkaX.mjs.map → EditableGrid-Dr48XzLH.mjs.map} +1 -1
- package/dist/chunks/Guide-AWaWvQoq.mjs +347 -0
- package/dist/chunks/Guide-AWaWvQoq.mjs.map +1 -0
- package/dist/chunks/Iframe-BB1Va2kZ.mjs +128 -0
- package/dist/chunks/Iframe-BB1Va2kZ.mjs.map +1 -0
- package/dist/chunks/{ImageUpload-CQA9XQ7Q.mjs → ImageUpload-DiJ16Aga.mjs} +5 -4
- package/dist/chunks/{ImageUpload-CQA9XQ7Q.mjs.map → ImageUpload-DiJ16Aga.mjs.map} +1 -1
- package/dist/chunks/{PromptButton.vue_vue_type_script_setup_true_lang-oYaMH-CI.mjs → PromptButton.vue_vue_type_script_setup_true_lang-y_sfI324.mjs} +2 -2
- package/dist/chunks/{PromptButton.vue_vue_type_script_setup_true_lang-oYaMH-CI.mjs.map → PromptButton.vue_vue_type_script_setup_true_lang-y_sfI324.mjs.map} +1 -1
- package/dist/chunks/{RadioList-BUWcP_Pk.mjs → RadioList-CQJDixnr.mjs} +2 -2
- package/dist/chunks/{RadioList-BUWcP_Pk.mjs.map → RadioList-CQJDixnr.mjs.map} +1 -1
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-nel6vN12.mjs +63 -0
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-nel6vN12.mjs.map +1 -0
- package/dist/chunks/{Select-uvFy7_NU.mjs → Select-ByH7uxuS.mjs} +2 -2
- package/dist/chunks/{Select-uvFy7_NU.mjs.map → Select-ByH7uxuS.mjs.map} +1 -1
- package/dist/chunks/{Station-BTP0SbBg.mjs → Station-DDoJem4F.mjs} +150 -139
- package/dist/chunks/Station-DDoJem4F.mjs.map +1 -0
- package/dist/chunks/{Switch.vue_vue_type_script_setup_true_lang-DUhXAGs2.mjs → Switch.vue_vue_type_script_setup_true_lang-DrSXmsj6.mjs} +2 -2
- package/dist/chunks/{Switch.vue_vue_type_script_setup_true_lang-DUhXAGs2.mjs.map → Switch.vue_vue_type_script_setup_true_lang-DrSXmsj6.mjs.map} +1 -1
- package/dist/chunks/Tips-B_18E4mc.mjs +71 -0
- package/dist/chunks/Tips-B_18E4mc.mjs.map +1 -0
- package/dist/chunks/{Upload.vue_vue_type_script_setup_true_lang-CHGCjpKK.mjs → Upload.vue_vue_type_script_setup_true_lang-k-0PTz3l.mjs} +5 -4
- package/dist/chunks/{Upload.vue_vue_type_script_setup_true_lang-CHGCjpKK.mjs.map → Upload.vue_vue_type_script_setup_true_lang-k-0PTz3l.mjs.map} +1 -1
- package/dist/chunks/{Viewer-CjLSQTrw.mjs → Viewer-CmTaneb6.mjs} +2 -2
- package/dist/chunks/{Viewer-CjLSQTrw.mjs.map → Viewer-CmTaneb6.mjs.map} +1 -1
- package/dist/chunks/config-CDqjABpD.mjs +1378 -0
- package/dist/chunks/config-CDqjABpD.mjs.map +1 -0
- package/dist/chunks/http-CW9konD4.mjs +2774 -0
- package/dist/chunks/http-CW9konD4.mjs.map +1 -0
- package/dist/chunks/{useApiAction-DxVQWWxv.mjs → useApiAction-CQVmN1MH.mjs} +2 -2
- package/dist/chunks/{useApiAction-DxVQWWxv.mjs.map → useApiAction-CQVmN1MH.mjs.map} +1 -1
- package/dist/chunks/{useColumnSettings-BwG2V9xp.mjs → useColumnSettings-CIFQCmzT.mjs} +22 -21
- package/dist/chunks/{useColumnSettings-BwG2V9xp.mjs.map → useColumnSettings-CIFQCmzT.mjs.map} +1 -1
- package/dist/chunks/useConfig-ChIkE3Lz.mjs +23 -0
- package/dist/chunks/useConfig-ChIkE3Lz.mjs.map +1 -0
- package/dist/chunks/{useOptionsLoader-DEVCYhrp.mjs → useOptionsLoader-BUO0VTjH.mjs} +2 -2
- package/dist/chunks/{useOptionsLoader-DEVCYhrp.mjs.map → useOptionsLoader-BUO0VTjH.mjs.map} +1 -1
- package/dist/confirm-button/index.mjs +1 -1
- package/dist/data-form/index.mjs +1 -1
- package/dist/data-grid/index.mjs +1 -1
- package/dist/dialog-button/index.mjs +1 -1
- package/dist/drawer/index.mjs +1 -1
- package/dist/drawer/style.css +1 -1
- package/dist/drawer-button/index.mjs +1 -1
- package/dist/editable-grid/index.mjs +1 -1
- package/dist/guide/index.mjs +7 -0
- package/dist/guide/index.mjs.map +1 -0
- package/dist/guide/style.css +1 -0
- package/dist/iframe/index.mjs +1 -1
- package/dist/iframe/style.css +1 -1
- package/dist/image-upload/index.mjs +1 -1
- package/dist/index.esm.js +194 -189
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +25 -21
- package/dist/index.umd.js.map +1 -1
- package/dist/prompt-button/index.mjs +1 -1
- package/dist/radio-list/index.mjs +1 -1
- package/dist/requester/index.mjs +1 -1
- package/dist/select/index.mjs +1 -1
- package/dist/station/index.mjs +1 -1
- package/dist/station/style.css +1 -1
- package/dist/style.css +1 -1
- package/dist/switch/index.mjs +1 -1
- package/dist/tips/index.mjs +1 -1
- package/dist/tips/style.css +1 -1
- package/dist/types/src/components/buttons/ApiButton.vue.d.ts +3 -3
- package/dist/types/src/components/buttons/ConfirmButton.vue.d.ts +5 -5
- package/dist/types/src/components/buttons/DialogButton.vue.d.ts +3 -3
- package/dist/types/src/components/buttons/DrawerButton.vue.d.ts +4 -4
- package/dist/types/src/components/buttons/PopconfirmButton.vue.d.ts +6 -6
- package/dist/types/src/components/buttons/PromptButton.vue.d.ts +5 -5
- package/dist/types/src/components/buttons/RouteButton.vue.d.ts +1 -1
- package/dist/types/src/components/buttons/TipsButton.vue.d.ts +1 -1
- package/dist/types/src/components/containers/Drawer.vue.d.ts +4 -4
- package/dist/types/src/components/containers/Iframe.vue.d.ts +42 -0
- package/dist/types/src/components/data/datagrid/DataGrid.vue.d.ts +5 -5
- package/dist/types/src/components/data/editable-grid/EditableGrid.vue.d.ts +7 -7
- package/dist/types/src/components/data/viewer/Viewer.vue.d.ts +1 -1
- package/dist/types/src/components/form/FormItem.vue.d.ts +1 -1
- package/dist/types/src/components/form/SearchItem.vue.d.ts +1 -1
- package/dist/types/src/components/form/data-form/DataForm.vue.d.ts +10 -10
- package/dist/types/src/components/guide/Guide.vue.d.ts +116 -0
- package/dist/types/src/components/index.d.ts +2 -1
- package/dist/types/src/components/inputs/AutoComplete.vue.d.ts +6 -6
- package/dist/types/src/components/inputs/CheckboxList.vue.d.ts +6 -6
- package/dist/types/src/components/inputs/RadioList.vue.d.ts +6 -6
- package/dist/types/src/components/inputs/Select.vue.d.ts +6 -6
- package/dist/types/src/components/inputs/Switch.vue.d.ts +9 -9
- package/dist/types/src/components/layout/Station.vue.d.ts +15 -4
- package/dist/types/src/components/layout/types.d.ts +2 -0
- package/dist/types/src/components/styles/Path.vue.d.ts +1 -1
- package/dist/types/src/components/styles/Tips.vue.d.ts +17 -0
- package/dist/types/src/components/upload/ImageUpload.vue.d.ts +5 -5
- package/dist/types/src/components/upload/Upload.vue.d.ts +5 -5
- package/dist/types/src/entries/guide.d.ts +9 -0
- package/dist/upload/index.mjs +1 -1
- package/dist/viewer/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunks/Drawer-ucXKUecL.mjs.map +0 -1
- package/dist/chunks/Iframe-CeSiMnvR.mjs +0 -65
- package/dist/chunks/Iframe-CeSiMnvR.mjs.map +0 -1
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-DkLqAjug.mjs +0 -80
- package/dist/chunks/Requester.vue_vue_type_script_setup_true_lang-DkLqAjug.mjs.map +0 -1
- package/dist/chunks/Station-BTP0SbBg.mjs.map +0 -1
- package/dist/chunks/Tips-IWCZcR1K.mjs +0 -63
- package/dist/chunks/Tips-IWCZcR1K.mjs.map +0 -1
- package/dist/chunks/http-C06mNpwY.mjs +0 -4141
- package/dist/chunks/http-C06mNpwY.mjs.map +0 -1
|
@@ -0,0 +1,1378 @@
|
|
|
1
|
+
const h = "1.2.4", p = {
|
|
2
|
+
// 库版本号,界面版本号显示统一从这里读取
|
|
3
|
+
version: h,
|
|
4
|
+
page: {
|
|
5
|
+
global: {
|
|
6
|
+
size: "default"
|
|
7
|
+
},
|
|
8
|
+
componentDefault: {
|
|
9
|
+
// Requester 请求触发组件默认值(开发者可通过全局配置覆盖)
|
|
10
|
+
WdRequester: {
|
|
11
|
+
method: "post"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
pager: {
|
|
15
|
+
size: 32,
|
|
16
|
+
pageSizes: [10, 20, 50, 100, 200],
|
|
17
|
+
pageSize: 20,
|
|
18
|
+
layout: "total, sizes, prev, pager, next, jumper",
|
|
19
|
+
hideOnSinglePage: !1,
|
|
20
|
+
position: "right"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
request: {
|
|
24
|
+
urlPrefix: "",
|
|
25
|
+
throwException: !1,
|
|
26
|
+
// 并发相同请求合并去重(method+url+params 一致只发一次),表列内请求组件等场景自动收敛为一次调用
|
|
27
|
+
dedup: !0,
|
|
28
|
+
loading: {
|
|
29
|
+
enable: !0,
|
|
30
|
+
props: {
|
|
31
|
+
lock: !0,
|
|
32
|
+
text: "加载中...",
|
|
33
|
+
background: "rgba(255, 255, 255, 0.7)"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
axiosConfig: {
|
|
37
|
+
timeout: 3e4
|
|
38
|
+
},
|
|
39
|
+
pageParam: {
|
|
40
|
+
pageField: "currentPage",
|
|
41
|
+
sizeField: "pageSize",
|
|
42
|
+
searchField: "param"
|
|
43
|
+
},
|
|
44
|
+
transform: {}
|
|
45
|
+
},
|
|
46
|
+
response: {
|
|
47
|
+
props: {
|
|
48
|
+
codeName: "code",
|
|
49
|
+
messageName: "message",
|
|
50
|
+
dataName: "data"
|
|
51
|
+
},
|
|
52
|
+
successCode: 0,
|
|
53
|
+
list: {
|
|
54
|
+
listName: "list",
|
|
55
|
+
totalName: "total",
|
|
56
|
+
pageSizeName: "pageSize",
|
|
57
|
+
currentPageName: "currentPage"
|
|
58
|
+
},
|
|
59
|
+
success: {
|
|
60
|
+
tipsMode: "message",
|
|
61
|
+
tipsType: "success",
|
|
62
|
+
showTips: !1,
|
|
63
|
+
props: {}
|
|
64
|
+
},
|
|
65
|
+
fail: {
|
|
66
|
+
tipsMode: "messagebox",
|
|
67
|
+
tipsType: "error",
|
|
68
|
+
showTips: !0,
|
|
69
|
+
title: "操作失败",
|
|
70
|
+
props: {}
|
|
71
|
+
},
|
|
72
|
+
exception: {
|
|
73
|
+
tipsMode: "messagebox",
|
|
74
|
+
tipsType: "error",
|
|
75
|
+
showTips: !0,
|
|
76
|
+
title: "网络异常",
|
|
77
|
+
props: {}
|
|
78
|
+
},
|
|
79
|
+
complete: {
|
|
80
|
+
tipsType: "message"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
theme: {
|
|
84
|
+
colors: {},
|
|
85
|
+
cssVars: {}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
function b(e) {
|
|
89
|
+
if (e === null || typeof e != "object") return !1;
|
|
90
|
+
const r = Object.getPrototypeOf(e);
|
|
91
|
+
return r === Object.prototype || r === null;
|
|
92
|
+
}
|
|
93
|
+
function s(...e) {
|
|
94
|
+
const r = {};
|
|
95
|
+
for (const o of e)
|
|
96
|
+
if (b(o))
|
|
97
|
+
for (const i of Object.keys(o)) {
|
|
98
|
+
const d = r[i], a = o[i];
|
|
99
|
+
Array.isArray(a) ? r[i] = a.slice() : b(a) ? r[i] = s(b(d) ? d : {}, a) : a !== void 0 && (r[i] = a);
|
|
100
|
+
}
|
|
101
|
+
return r;
|
|
102
|
+
}
|
|
103
|
+
function j(e, r) {
|
|
104
|
+
if (!e) return r;
|
|
105
|
+
try {
|
|
106
|
+
return JSON.parse(e);
|
|
107
|
+
} catch {
|
|
108
|
+
return r;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
const v = {
|
|
112
|
+
key: "default",
|
|
113
|
+
label: "默认",
|
|
114
|
+
desc: "WorkDesktop 品牌蓝,源自产品 Logo 的 V 形主色",
|
|
115
|
+
theme: {}
|
|
116
|
+
}, _ = {
|
|
117
|
+
key: "fashion",
|
|
118
|
+
label: "时尚",
|
|
119
|
+
desc: "珊瑚橙主色与奶油暖底柔光斑,白卡片大圆角,适合 SaaS / 运营 / 电商后台",
|
|
120
|
+
theme: {
|
|
121
|
+
colors: {
|
|
122
|
+
// 珊瑚橙加深至 #cd3c1d:原 #f0553a 白字对比度仅 3.46,不达 WCAG AA 4.5 质量门
|
|
123
|
+
primary: "#cd3c1d",
|
|
124
|
+
success: "#22b573",
|
|
125
|
+
warning: "#f5a623",
|
|
126
|
+
danger: "#d92d20",
|
|
127
|
+
info: "#64748b"
|
|
128
|
+
},
|
|
129
|
+
cssVars: {
|
|
130
|
+
"--wd-bg-color-page": "#f6f1ea",
|
|
131
|
+
"--wd-text-color-primary": "#1d2129",
|
|
132
|
+
// 原 #6b7280 对奶油页底对比度 4.30 不达标,加深至 #646b78(≈4.77)
|
|
133
|
+
"--wd-text-color-secondary": "#646b78",
|
|
134
|
+
"--wd-border-color": "#e9e1d6",
|
|
135
|
+
"--wd-border-color-light": "#f2ebe0",
|
|
136
|
+
"--wd-radius-base": "8px",
|
|
137
|
+
"--wd-radius-small": "6px",
|
|
138
|
+
// 杂志风白卡片:14px 大圆角 + 暖调弥散阴影
|
|
139
|
+
"--wd-panel-radius": "14px",
|
|
140
|
+
"--wd-panel-shadow-sm": "0 1px 2px rgba(31, 25, 16, 0.04), 0 10px 24px -6px rgba(31, 25, 16, 0.08)",
|
|
141
|
+
"--wd-datagrid-radius": "14px",
|
|
142
|
+
// 标题回归纯文字:彩色标识条宽度归零(伪元素隐藏,与参考图一致)
|
|
143
|
+
"--wd-panel-title-bar-width": "0",
|
|
144
|
+
// 容器类毛玻璃:面板 / 搜索 / 表格半透白底(配 cssRules 的 backdrop-filter 成磨砂,页面光斑隐约透出),面板亮边模拟玻璃高光
|
|
145
|
+
"--wd-panel-bg": "rgba(255, 255, 255, 0.62)",
|
|
146
|
+
"--wd-panel-border-color": "rgba(255, 255, 255, 0.7)",
|
|
147
|
+
"--wd-search-bg": "rgba(255, 255, 255, 0.5)",
|
|
148
|
+
"--wd-datagrid-bg": "rgba(255, 255, 255, 0.55)",
|
|
149
|
+
"--wd-editable-grid-bg": "rgba(255, 255, 255, 0.55)",
|
|
150
|
+
// EP 表格默认不透明白底会盖住容器玻璃底,透明化透出;表头留半透白分层,行 hover 暖色透底(默认浅灰不透明会糊块)
|
|
151
|
+
"--el-table-bg-color": "transparent",
|
|
152
|
+
"--el-table-tr-bg-color": "transparent",
|
|
153
|
+
"--el-table-header-bg-color": "rgba(255, 255, 255, 0.45)",
|
|
154
|
+
"--el-table-row-hover-bg-color": "rgba(205, 60, 29, 0.05)",
|
|
155
|
+
// 导航区:半透奶油白侧栏 + 半透白顶栏 / tabs 条(配 cssRules 的 backdrop-filter 成毛玻璃,页面光斑隐约透出)
|
|
156
|
+
"--wd-station-aside-bg": "rgba(251, 247, 240, 0.72)",
|
|
157
|
+
"--wd-station-header-bg": "rgba(255, 255, 255, 0.65)",
|
|
158
|
+
"--wd-station-tabs-bg": "rgba(255, 255, 255, 0.55)"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
// 皮肤专属 CSS 规则:页面柔光斑氛围底 + 毛玻璃导航区 + 侧栏深墨胶囊选中态(渐变光晕/背景模糊/选中胶囊为 rule 级定制,EP 变量做不到)
|
|
162
|
+
cssRules: `
|
|
163
|
+
/* 页面氛围:奶油底上叠桃橙 / 雾蓝 / 淡紫柔光斑(radial 渐变叠加在 --wd-bg-color-page 之上,用户改底色可联动) */
|
|
164
|
+
.wd-station {
|
|
165
|
+
background:
|
|
166
|
+
radial-gradient(620px 480px at -6% -8%, rgba(205, 60, 29, 0.16), transparent 70%),
|
|
167
|
+
radial-gradient(560px 460px at 106% 104%, rgba(94, 132, 220, 0.18), transparent 70%),
|
|
168
|
+
radial-gradient(380px 320px at 4% 98%, rgba(158, 146, 214, 0.12), transparent 70%),
|
|
169
|
+
var(--wd-bg-color-page);
|
|
170
|
+
}
|
|
171
|
+
/* 毛玻璃导航区:半透底(见 cssVars)+ 背景模糊提亮,光斑透过来形成磨砂质感 */
|
|
172
|
+
.wd-station__aside,
|
|
173
|
+
.wd-station__header,
|
|
174
|
+
.wd-station__tabs-bar {
|
|
175
|
+
backdrop-filter: blur(16px) saturate(1.5);
|
|
176
|
+
-webkit-backdrop-filter: blur(16px) saturate(1.5);
|
|
177
|
+
}
|
|
178
|
+
/* 容器类毛玻璃:面板 / 搜索 / 表格半透底(见 cssVars)+ 背景模糊提亮,比导航区弱一档保持内容清晰 */
|
|
179
|
+
.wd-panel,
|
|
180
|
+
.wd-search-panel,
|
|
181
|
+
.wd-datagrid,
|
|
182
|
+
.wd-editable-grid {
|
|
183
|
+
backdrop-filter: blur(14px) saturate(1.4);
|
|
184
|
+
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
|
185
|
+
}
|
|
186
|
+
/* EP 菜单默认不透明白底会盖住侧栏毛玻璃,改透明(含 inline 展开子菜单) */
|
|
187
|
+
.wd-station__menu.el-menu,
|
|
188
|
+
.wd-station__menu .el-menu--inline {
|
|
189
|
+
background: transparent;
|
|
190
|
+
}
|
|
191
|
+
/* 侧边菜单:深墨胶囊选中态(参考图侧栏标志性处理),圆角 + 左右内收 */
|
|
192
|
+
.wd-station__menu .el-menu-item,
|
|
193
|
+
.wd-station__menu .el-sub-menu__title {
|
|
194
|
+
margin: 2px 10px;
|
|
195
|
+
border-radius: 10px;
|
|
196
|
+
}
|
|
197
|
+
.wd-station__menu .el-menu-item:hover,
|
|
198
|
+
.wd-station__menu .el-sub-menu__title:hover {
|
|
199
|
+
background: rgba(31, 37, 50, 0.06);
|
|
200
|
+
}
|
|
201
|
+
.wd-station__menu .el-menu-item.is-active {
|
|
202
|
+
background: #1f2532;
|
|
203
|
+
color: #fff;
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
}
|
|
206
|
+
.wd-station__menu .el-menu-item.is-active .el-icon {
|
|
207
|
+
color: #fff;
|
|
208
|
+
}
|
|
209
|
+
`
|
|
210
|
+
}, k = {
|
|
211
|
+
key: "business",
|
|
212
|
+
label: "商务",
|
|
213
|
+
desc: "藏青边栏配白卡浅灰内容区,商务金点缀,适合企业级管理后台",
|
|
214
|
+
theme: {
|
|
215
|
+
colors: {
|
|
216
|
+
primary: "#1e2c4f",
|
|
217
|
+
success: "#2e7d5d",
|
|
218
|
+
warning: "#c9a24b",
|
|
219
|
+
danger: "#b0413e",
|
|
220
|
+
info: "#7a8699"
|
|
221
|
+
},
|
|
222
|
+
cssVars: {
|
|
223
|
+
"--wd-bg-color-page": "#f4f5f7",
|
|
224
|
+
"--wd-text-color-primary": "#1f2d3d",
|
|
225
|
+
"--wd-text-color-regular": "#4e5a6e",
|
|
226
|
+
"--wd-border-color": "#d4dae3",
|
|
227
|
+
"--wd-border-color-light": "#e6e9ef",
|
|
228
|
+
"--wd-radius-base": "6px",
|
|
229
|
+
"--wd-radius-small": "4px",
|
|
230
|
+
// 组件级:白卡 + 金色标题标识条(呼应参考图标题金线点缀),面板轻微浮起
|
|
231
|
+
"--wd-panel-title-bar-bg": "#c9a24b",
|
|
232
|
+
"--wd-panel-shadow-sm": "0 1px 3px rgba(30, 44, 79, 0.06), 0 6px 16px rgba(30, 44, 79, 0.06)",
|
|
233
|
+
// 导航区:侧栏 / 顶栏 / 底栏统一深藏青边栏框架(文字浅化与菜单金色选中见 cssRules)
|
|
234
|
+
"--wd-station-aside-bg": "#1e2c4f",
|
|
235
|
+
"--wd-station-header-bg": "#1e2c4f",
|
|
236
|
+
"--wd-station-footer-bg": "#1e2c4f"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
cssRules: `
|
|
240
|
+
/* 表格表头浅灰底(参考图客户列表):EP 在 .el-table 元素规则上自定义 --el-table-header-bg-color,
|
|
241
|
+
:root 注入会被元素自身规则盖住(自定义属性继承恒弱于元素声明),须同选择器级覆盖 */
|
|
242
|
+
.el-table {
|
|
243
|
+
--el-table-header-bg-color: #f7f8fa;
|
|
244
|
+
}
|
|
245
|
+
/* ===== 藏青边栏框架配套 =====
|
|
246
|
+
混合模式:边栏深藏青、内容区保持白卡浅灰;菜单变量限定 Station 作用域,不影响内容区。
|
|
247
|
+
EP 默认菜单 hover 底为主色 light-9(浅灰蓝),藏青底上会糊成浅色亮块,改半透明白同源 */
|
|
248
|
+
.wd-station__menu,
|
|
249
|
+
.wd-station__top-menu .el-menu {
|
|
250
|
+
--el-menu-bg-color: transparent;
|
|
251
|
+
--el-menu-text-color: #b8c2d4;
|
|
252
|
+
--el-menu-hover-bg-color: rgba(255, 255, 255, 0.08);
|
|
253
|
+
}
|
|
254
|
+
/* 侧栏菜单:商务金实心选中态(藏青字加粗,金底藏青字对比度 ≈8:1),与顶栏金下划线呼应 */
|
|
255
|
+
.wd-station__menu .el-menu-item,
|
|
256
|
+
.wd-station__menu .el-sub-menu__title {
|
|
257
|
+
margin: 2px 8px;
|
|
258
|
+
border-radius: 6px;
|
|
259
|
+
}
|
|
260
|
+
.wd-station__menu .el-menu-item.is-active {
|
|
261
|
+
background: var(--wd-color-warning);
|
|
262
|
+
color: #1e2c4f;
|
|
263
|
+
font-weight: 600;
|
|
264
|
+
}
|
|
265
|
+
.wd-station__menu .el-menu-item.is-active:hover {
|
|
266
|
+
background: var(--wd-color-warning);
|
|
267
|
+
color: #1e2c4f;
|
|
268
|
+
}
|
|
269
|
+
/* 含激活子项的分组标题:藏青主色字在藏青底上不可读,转商务金 */
|
|
270
|
+
.wd-station__menu .el-sub-menu.is-active > .el-sub-menu__title {
|
|
271
|
+
color: var(--wd-color-warning);
|
|
272
|
+
}
|
|
273
|
+
/* 顶栏:文字基色浅化供插槽内容继承,标题纯白,折叠钮 hover 转金,底部分隔线同色淡化。
|
|
274
|
+
Station 样式为 scoped(编译后选择器自带 [data-v] 属性、优先级高一级),
|
|
275
|
+
皮肤规则统一用两级选择器追平优先级,靠 <style data-workdesktop-theme> 后注入胜出 */
|
|
276
|
+
.wd-station .wd-station__header {
|
|
277
|
+
color: #e8ecf3;
|
|
278
|
+
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
279
|
+
}
|
|
280
|
+
.wd-station__header .wd-station__logo-title,
|
|
281
|
+
.wd-station__header .wd-station__header-title {
|
|
282
|
+
color: #ffffff;
|
|
283
|
+
}
|
|
284
|
+
.wd-station .wd-station__collapse { color: #b8c2d4; }
|
|
285
|
+
.wd-station .wd-station__collapse:hover { color: var(--wd-color-warning); }
|
|
286
|
+
/* 分导台:未选项浅灰白,激活项商务金文字 + 金色下划线(下划线随 warning 色联动) */
|
|
287
|
+
.wd-station__header .wd-station__nav-item { color: #b8c2d4; }
|
|
288
|
+
.wd-station__header .wd-station__nav-item:hover {
|
|
289
|
+
color: #ffffff;
|
|
290
|
+
background: rgba(255, 255, 255, 0.08);
|
|
291
|
+
}
|
|
292
|
+
.wd-station__header .wd-station__nav-item.is-active {
|
|
293
|
+
color: var(--wd-color-warning);
|
|
294
|
+
background: transparent;
|
|
295
|
+
box-shadow: inset 0 -2px 0 var(--wd-color-warning);
|
|
296
|
+
}
|
|
297
|
+
/* 顶部水平菜单:激活下划线同步商务金 */
|
|
298
|
+
.wd-station__top-menu .el-menu--horizontal > .el-menu-item.is-active,
|
|
299
|
+
.wd-station__top-menu .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
|
|
300
|
+
border-bottom-color: var(--wd-color-warning);
|
|
301
|
+
color: var(--wd-color-warning);
|
|
302
|
+
}
|
|
303
|
+
/* 侧栏:logo 白字 + 分隔线同色淡化,右边框在藏青底上转透明系 */
|
|
304
|
+
.wd-station .wd-station__aside { border-right-color: rgba(255, 255, 255, 0.06); }
|
|
305
|
+
.wd-station__aside .wd-station__logo { border-bottom-color: rgba(255, 255, 255, 0.1); }
|
|
306
|
+
.wd-station__aside .wd-station__logo-title { color: #ffffff; }
|
|
307
|
+
/* 底栏:藏青底文字浅化 + 分隔线同色淡化 */
|
|
308
|
+
.wd-station .wd-station__footer {
|
|
309
|
+
border-top-color: rgba(255, 255, 255, 0.1);
|
|
310
|
+
color: #8fa0b8;
|
|
311
|
+
}
|
|
312
|
+
.wd-station .wd-station__footer-info { color: #b8c2d4; }
|
|
313
|
+
/* 分页:当前页藏青方块白字(主色联动,覆盖主色随动) */
|
|
314
|
+
.el-pagination .el-pager li.is-active {
|
|
315
|
+
background: var(--el-color-primary);
|
|
316
|
+
color: #fff;
|
|
317
|
+
border-radius: 4px;
|
|
318
|
+
}
|
|
319
|
+
.el-pagination .el-pager li.is-active:hover {
|
|
320
|
+
background: var(--el-color-primary-dark-2);
|
|
321
|
+
}
|
|
322
|
+
`
|
|
323
|
+
}, y = {
|
|
324
|
+
key: "tech",
|
|
325
|
+
label: "科技",
|
|
326
|
+
desc: "深空霓虹青配非连续边框,适合数据大屏 / AI 类产品",
|
|
327
|
+
theme: {
|
|
328
|
+
colors: {
|
|
329
|
+
primary: "#00e5ff",
|
|
330
|
+
success: "#00ffa3",
|
|
331
|
+
warning: "#ffb020",
|
|
332
|
+
danger: "#ff4d6d",
|
|
333
|
+
info: "#5b7ba6"
|
|
334
|
+
},
|
|
335
|
+
cssVars: {
|
|
336
|
+
"--wd-bg-color": "#0a1828",
|
|
337
|
+
"--wd-bg-color-page": "#050d1a",
|
|
338
|
+
"--wd-bg-color-overlay": "#0d1e33",
|
|
339
|
+
"--wd-text-color-primary": "#dcf4ff",
|
|
340
|
+
"--wd-text-color-regular": "#9cc3e8",
|
|
341
|
+
"--wd-text-color-secondary": "#6b90bb",
|
|
342
|
+
"--wd-text-color-placeholder": "#45638c",
|
|
343
|
+
"--wd-border-color": "rgba(0, 229, 255, 0.28)",
|
|
344
|
+
"--wd-border-color-light": "rgba(0, 229, 255, 0.16)",
|
|
345
|
+
"--wd-radius-base": "6px",
|
|
346
|
+
"--wd-radius-small": "4px",
|
|
347
|
+
// 组件级:面板 / 表格深空蓝玻璃底 + 霓虹青描边辉光,青蓝渐变标识条,导航区压黑
|
|
348
|
+
"--wd-panel-bg": "#0a1828",
|
|
349
|
+
// 底边调暗衬非连续边框(角码/虚线段见 cssRules ::before)+ 面板近直角
|
|
350
|
+
"--wd-panel-border-color": "rgba(0, 229, 255, 0.14)",
|
|
351
|
+
"--wd-panel-radius": "3px",
|
|
352
|
+
"--wd-panel-header-bg": "rgba(0, 229, 255, 0.06)",
|
|
353
|
+
"--wd-panel-title-color": "#5ee9ff",
|
|
354
|
+
"--wd-panel-shadow-sm": "0 0 18px rgba(0, 229, 255, 0.14)",
|
|
355
|
+
"--wd-panel-shadow-md": "0 0 28px rgba(0, 229, 255, 0.26)",
|
|
356
|
+
"--wd-panel-title-bar-bg": "linear-gradient(180deg, #00e5ff, #2979ff)",
|
|
357
|
+
"--wd-datagrid-bg": "#0a1828",
|
|
358
|
+
"--wd-datagrid-border-color": "rgba(0, 229, 255, 0.3)",
|
|
359
|
+
"--wd-editable-grid-bg": "#0a1828",
|
|
360
|
+
"--wd-editable-grid-border-color": "rgba(0, 229, 255, 0.3)",
|
|
361
|
+
"--wd-search-bg": "#0a1828",
|
|
362
|
+
// DataForm 按钮容器:青蓝渐变 HUD 操作条 + 四周内边距 + 圆角(默认令牌仅顶部留白,给底色必须同步 padding/radius 防按钮贴边)
|
|
363
|
+
"--wd-form-footer-bg": "linear-gradient(90deg, rgba(0, 229, 255, 0.09), rgba(41, 121, 255, 0.05))",
|
|
364
|
+
"--wd-form-footer-padding": "10px 12px",
|
|
365
|
+
"--wd-form-footer-radius": "6px",
|
|
366
|
+
"--wd-station-aside-bg": "#040b16",
|
|
367
|
+
"--wd-station-header-bg": "#040b16",
|
|
368
|
+
"--wd-station-tabs-bg": "#040b16",
|
|
369
|
+
// 背景素材:面板保持纯深空蓝(装饰收敛到非连续边框,视觉不吵);
|
|
370
|
+
// 表格 / 搜索贴青色 HUD 网格,导航区贴青色扫描线(CRT 屏幕感),低透明度不影响可读性
|
|
371
|
+
"--wd-datagrid-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px)",
|
|
372
|
+
"--wd-editable-grid-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px)",
|
|
373
|
+
"--wd-search-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.045) 0 1px, transparent 1px 24px)",
|
|
374
|
+
"--wd-station-aside-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 4px)",
|
|
375
|
+
"--wd-station-header-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 4px)",
|
|
376
|
+
"--wd-station-tabs-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 4px)",
|
|
377
|
+
// 菜单深色联动:底色贴合导航区压黑;EP 默认 hover 底为主色 light-9(浅青),深底下会糊成浅色亮块,改为青色同源深透底
|
|
378
|
+
"--el-menu-bg-color": "#040b16",
|
|
379
|
+
"--el-menu-hover-bg-color": "rgba(0, 229, 255, 0.1)",
|
|
380
|
+
"--el-menu-item-hover-fill": "rgba(0, 229, 255, 0.1)",
|
|
381
|
+
// ElementPlus 深色联动(填充 / 遮罩 / 阴影 / 按钮文字色)
|
|
382
|
+
"--el-fill-color-blank": "#0a1828",
|
|
383
|
+
"--el-fill-color": "#10233a",
|
|
384
|
+
"--el-fill-color-light": "#12263e",
|
|
385
|
+
"--el-fill-color-lighter": "#142a44",
|
|
386
|
+
"--el-fill-color-extra-light": "#0c1c30",
|
|
387
|
+
"--el-fill-color-dark": "#16304c",
|
|
388
|
+
"--el-fill-color-darker": "#1a3656",
|
|
389
|
+
// 仅作按钮文字色(EP 深色皮肤标准做法);注意 EP 内凡以 --el-color-white 作背景的场景会同步变深,实测无异常,改动需回归
|
|
390
|
+
"--el-color-white": "#06121f",
|
|
391
|
+
"--el-mask-color": "rgba(2, 8, 18, 0.72)",
|
|
392
|
+
"--el-box-shadow": "0 4px 16px rgba(0, 0, 0, 0.5)",
|
|
393
|
+
"--el-box-shadow-light": "0 2px 8px rgba(0, 0, 0, 0.4)"
|
|
394
|
+
}
|
|
395
|
+
},
|
|
396
|
+
// 皮肤专属 CSS 规则:表格内线青色 + 青光渐变主按钮 + ghost 青默认按钮 + 霓虹 primary 标签 +
|
|
397
|
+
// 菜单选中光条 + 面板非连续边框 + 科技动画(面板扫描光 / 标识条呼吸 / 按钮流光 / 聚焦光晕 / 进度条流光 / 加载呼吸)
|
|
398
|
+
// (EP 变量只能纯色填充,渐变/外发光必须 rule 级覆盖;发光色与面板描边 rgba(0,229,255) 同源)
|
|
399
|
+
cssRules: `
|
|
400
|
+
/* 表格内线青色:el-table 单元格线统一同源青 0.2(弱于容器外框拉开层次)。
|
|
401
|
+
EP 在 .el-table 元素规则上自定义 --el-table-border-color,cssVars :root 注入会被盖住,
|
|
402
|
+
必须同选择器级覆盖——本规则与 EP .el-table 规则同 specificity (0,1,0),皮肤样式注入在后胜出 */
|
|
403
|
+
.el-table {
|
|
404
|
+
--el-table-border-color: rgba(0, 229, 255, 0.2);
|
|
405
|
+
}
|
|
406
|
+
/* 主按钮:青→蓝渐变 + 青光外发光(渐变起点跟随 --el-color-primary,用户覆盖主色可联动;文字取已压深的 --el-color-white) */
|
|
407
|
+
.el-button--primary {
|
|
408
|
+
background-image: linear-gradient(135deg, var(--el-color-primary), #2979ff);
|
|
409
|
+
--el-button-border-color: transparent;
|
|
410
|
+
--el-button-hover-border-color: transparent;
|
|
411
|
+
box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
|
|
412
|
+
}
|
|
413
|
+
.el-button--primary:hover {
|
|
414
|
+
background-image: linear-gradient(135deg, var(--el-color-primary-light-3), #4d94ff);
|
|
415
|
+
box-shadow: 0 0 22px rgba(0, 229, 255, 0.6);
|
|
416
|
+
}
|
|
417
|
+
.el-button--primary.is-disabled,
|
|
418
|
+
.el-button--primary.is-disabled:hover {
|
|
419
|
+
background-image: none;
|
|
420
|
+
box-shadow: none;
|
|
421
|
+
}
|
|
422
|
+
/* 默认按钮:ghost 青(深青底 + 青描边 + 亮青字);:not 排除语义色按钮与 text/link 形态 */
|
|
423
|
+
.el-button:not([class*='el-button--']):not(.is-text):not(.is-link) {
|
|
424
|
+
--el-button-bg-color: rgba(0, 229, 255, 0.08);
|
|
425
|
+
--el-button-border-color: rgba(0, 229, 255, 0.4);
|
|
426
|
+
--el-button-text-color: #a5f3ff;
|
|
427
|
+
--el-button-hover-bg-color: rgba(0, 229, 255, 0.18);
|
|
428
|
+
--el-button-hover-border-color: rgba(94, 233, 255, 0.65);
|
|
429
|
+
--el-button-hover-text-color: #d6f8ff;
|
|
430
|
+
}
|
|
431
|
+
/* primary 标签:深青底 + 亮青字(success 等语义标签不动) */
|
|
432
|
+
.el-tag.el-tag--primary {
|
|
433
|
+
--el-tag-bg-color: rgba(0, 229, 255, 0.14);
|
|
434
|
+
--el-tag-border-color: rgba(0, 229, 255, 0.36);
|
|
435
|
+
--el-tag-text-color: #a5f3ff;
|
|
436
|
+
--el-tag-hover-color: #5ee9ff;
|
|
437
|
+
}
|
|
438
|
+
/* 菜单选中项:青色 tint 底 + 左侧 2px 霓虹条 + 文字发光(仅垂直菜单,横向菜单走 EP 底部指示条) */
|
|
439
|
+
.el-menu--vertical .el-menu-item.is-active {
|
|
440
|
+
background-color: rgba(0, 229, 255, 0.1);
|
|
441
|
+
box-shadow: inset 2px 0 0 var(--el-color-primary);
|
|
442
|
+
text-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
|
|
443
|
+
}
|
|
444
|
+
/* 非连续边框(参考 Loss Curve 科技面板):底边调暗至 0.14 衬断续感,::before 叠
|
|
445
|
+
四角 L 角码(8 层 3px 粗 20px 臂亮青 0.95,视觉主角)+ 四边断续虚线段(16px 亮 /
|
|
446
|
+
12px 间隔、0.42 弱于角码拉开层次,内缩 32px = 20px 角码臂 + 12px 间隙,不横穿角码区,
|
|
447
|
+
角码与虚线分离才读得出层次),drop-shadow 3px 辉光集中在角码;
|
|
448
|
+
::after 已被扫描光占用故用 ::before;面板 overflow:hidden 负责圆角裁切;
|
|
449
|
+
no-border 变体不画框;pointer-events:none 不拦截交互 */
|
|
450
|
+
.wd-panel:not(.wd-panel--no-border)::before {
|
|
451
|
+
content: '';
|
|
452
|
+
position: absolute;
|
|
453
|
+
inset: 0;
|
|
454
|
+
pointer-events: none;
|
|
455
|
+
background:
|
|
456
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) left top / 20px 3px,
|
|
457
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) left top / 3px 20px,
|
|
458
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) right top / 20px 3px,
|
|
459
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) right top / 3px 20px,
|
|
460
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) left bottom / 20px 3px,
|
|
461
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) left bottom / 3px 20px,
|
|
462
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) right bottom / 20px 3px,
|
|
463
|
+
linear-gradient(rgba(0, 229, 255, 0.95), rgba(0, 229, 255, 0.95)) right bottom / 3px 20px,
|
|
464
|
+
repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.42) 0 16px, transparent 16px 28px) left 32px top / calc(100% - 64px) 1px,
|
|
465
|
+
repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.42) 0 16px, transparent 16px 28px) left 32px bottom / calc(100% - 64px) 1px,
|
|
466
|
+
repeating-linear-gradient(180deg, rgba(0, 229, 255, 0.42) 0 16px, transparent 16px 28px) left top 32px / 1px calc(100% - 64px),
|
|
467
|
+
repeating-linear-gradient(180deg, rgba(0, 229, 255, 0.42) 0 16px, transparent 16px 28px) right top 32px / 1px calc(100% - 64px);
|
|
468
|
+
background-repeat: no-repeat;
|
|
469
|
+
filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.55));
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* ===== 科技动画体系:扫描光 + 呼吸 + 流光 + 聚焦光晕 =====
|
|
473
|
+
守则:只动 transform/opacity/box-shadow(合成层,不触发 layout);无限动画仅低透明 /
|
|
474
|
+
低振幅不干扰阅读;disabled/loading 态不做 hover 变换 */
|
|
475
|
+
/* 面板扫描光:斜切光带周期性横向扫过面板(呼应参考图数据流扫描线,透明度 0.07 不遮内容) */
|
|
476
|
+
@keyframes wd-tech-scan {
|
|
477
|
+
from { transform: translateX(-120%) skewX(-14deg); }
|
|
478
|
+
to { transform: translateX(560%) skewX(-14deg); }
|
|
479
|
+
}
|
|
480
|
+
.wd-panel {
|
|
481
|
+
position: relative;
|
|
482
|
+
}
|
|
483
|
+
.wd-panel::after {
|
|
484
|
+
content: '';
|
|
485
|
+
position: absolute;
|
|
486
|
+
top: 0;
|
|
487
|
+
bottom: 0;
|
|
488
|
+
width: 22%;
|
|
489
|
+
background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.07), transparent);
|
|
490
|
+
transform: translateX(-120%) skewX(-14deg);
|
|
491
|
+
animation: wd-tech-scan 6s linear infinite;
|
|
492
|
+
pointer-events: none;
|
|
493
|
+
}
|
|
494
|
+
/* 标识条呼吸:面板头青蓝渐变条低振幅明暗(与 cool 同款节奏) */
|
|
495
|
+
@keyframes wd-tech-glow {
|
|
496
|
+
0%, 100% { opacity: 1; }
|
|
497
|
+
50% { opacity: 0.55; }
|
|
498
|
+
}
|
|
499
|
+
.wd-panel__header::before {
|
|
500
|
+
animation: wd-tech-glow 3.6s ease-in-out infinite;
|
|
501
|
+
}
|
|
502
|
+
/* 主按钮流光:hover 时斜切光带扫过一次(与渐变规则共存,overflow 裁进圆角) */
|
|
503
|
+
@keyframes wd-tech-shine {
|
|
504
|
+
from { transform: translateX(-130%) skewX(-18deg); }
|
|
505
|
+
to { transform: translateX(280%) skewX(-18deg); }
|
|
506
|
+
}
|
|
507
|
+
.el-button--primary {
|
|
508
|
+
position: relative;
|
|
509
|
+
overflow: hidden;
|
|
510
|
+
}
|
|
511
|
+
.el-button--primary::after {
|
|
512
|
+
content: '';
|
|
513
|
+
position: absolute;
|
|
514
|
+
top: 0;
|
|
515
|
+
bottom: 0;
|
|
516
|
+
width: 45%;
|
|
517
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
|
|
518
|
+
transform: translateX(-130%) skewX(-18deg);
|
|
519
|
+
pointer-events: none;
|
|
520
|
+
}
|
|
521
|
+
.el-button--primary:not(.is-disabled):hover::after {
|
|
522
|
+
animation: wd-tech-shine 0.7s ease;
|
|
523
|
+
}
|
|
524
|
+
/* 输入框/文本域/选择器:边框过渡 + 聚焦青光环(EP 聚焦描边上叠一层外发光) */
|
|
525
|
+
.el-input__wrapper,
|
|
526
|
+
.el-textarea__inner,
|
|
527
|
+
.el-select__wrapper {
|
|
528
|
+
transition: box-shadow 0.25s ease, border-color 0.25s ease;
|
|
529
|
+
}
|
|
530
|
+
.el-input__wrapper.is-focus,
|
|
531
|
+
.el-textarea__inner:focus,
|
|
532
|
+
.el-select__wrapper.is-focused {
|
|
533
|
+
box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 0 12px rgba(0, 229, 255, 0.45);
|
|
534
|
+
}
|
|
535
|
+
/* 进度条:条纹流光(主色条上叠 45° 光纹流动,周期 28px 整除不跳帧) */
|
|
536
|
+
@keyframes wd-tech-flow {
|
|
537
|
+
from { background-position: 0 0; }
|
|
538
|
+
to { background-position: 28px 0; }
|
|
539
|
+
}
|
|
540
|
+
.el-progress-bar__inner {
|
|
541
|
+
position: relative;
|
|
542
|
+
overflow: hidden;
|
|
543
|
+
transition: width 0.3s ease;
|
|
544
|
+
}
|
|
545
|
+
.el-progress-bar__inner::after {
|
|
546
|
+
content: '';
|
|
547
|
+
position: absolute;
|
|
548
|
+
inset: 0;
|
|
549
|
+
background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 14px, transparent 14px 28px);
|
|
550
|
+
animation: wd-tech-flow 1.2s linear infinite;
|
|
551
|
+
}
|
|
552
|
+
/* 加载:旋转环呼吸发光(保留 EP loading-dash 扫动,并列叠加) */
|
|
553
|
+
.el-loading-spinner .path {
|
|
554
|
+
animation: loading-dash 1.5s ease-in-out infinite, wd-tech-glow 2.4s ease-in-out infinite;
|
|
555
|
+
}
|
|
556
|
+
/* 面板 hover:描边轻微提亮即可(0.3 以内不盖过非连续边框的断续感;
|
|
557
|
+
阴影走 --wd-panel-shadow-md 青色辉光变量,用户覆盖不丢) */
|
|
558
|
+
.wd-panel:hover {
|
|
559
|
+
border-color: rgba(0, 229, 255, 0.3);
|
|
560
|
+
}
|
|
561
|
+
`
|
|
562
|
+
}, S = {
|
|
563
|
+
key: "cyberpunk",
|
|
564
|
+
label: "赛博朋克",
|
|
565
|
+
desc: "暗夜紫霓品红硬朗直角,适合大屏 / 潮玩类产品",
|
|
566
|
+
theme: {
|
|
567
|
+
colors: {
|
|
568
|
+
primary: "#d946ef",
|
|
569
|
+
success: "#00ffa3",
|
|
570
|
+
warning: "#ffd600",
|
|
571
|
+
danger: "#ff2a6d",
|
|
572
|
+
info: "#8b7ec8"
|
|
573
|
+
},
|
|
574
|
+
cssVars: {
|
|
575
|
+
"--wd-bg-color": "#120e24",
|
|
576
|
+
"--wd-bg-color-page": "#0a0714",
|
|
577
|
+
"--wd-bg-color-overlay": "#1c1535",
|
|
578
|
+
"--wd-text-color-primary": "#f3e8ff",
|
|
579
|
+
"--wd-text-color-regular": "#c9b8e8",
|
|
580
|
+
"--wd-text-color-secondary": "#9d8cc7",
|
|
581
|
+
"--wd-text-color-placeholder": "#6b5b94",
|
|
582
|
+
"--wd-border-color": "#2d2152",
|
|
583
|
+
"--wd-border-color-light": "#251a46",
|
|
584
|
+
"--wd-border-width": "2px",
|
|
585
|
+
"--wd-radius-base": "0px",
|
|
586
|
+
"--wd-radius-small": "0px",
|
|
587
|
+
"--wd-spacing-base": "10px",
|
|
588
|
+
"--wd-spacing-large": "14px",
|
|
589
|
+
// 组件级:面板 / 表格暗夜紫玻璃底 + 品红霓虹描边辉光,青品渐变标识条撞色,导航区压黑
|
|
590
|
+
"--wd-panel-bg": "#150f2a",
|
|
591
|
+
"--wd-panel-border-color": "rgba(217, 70, 239, 0.4)",
|
|
592
|
+
"--wd-panel-header-bg": "rgba(217, 70, 239, 0.08)",
|
|
593
|
+
"--wd-panel-title-color": "#e879f9",
|
|
594
|
+
"--wd-panel-shadow-sm": "0 0 18px rgba(217, 70, 239, 0.16)",
|
|
595
|
+
"--wd-panel-shadow-md": "0 0 28px rgba(217, 70, 239, 0.28)",
|
|
596
|
+
"--wd-panel-title-bar-bg": "linear-gradient(180deg, #00e5ff, #d946ef)",
|
|
597
|
+
"--wd-datagrid-bg": "#150f2a",
|
|
598
|
+
"--wd-datagrid-border-color": "rgba(217, 70, 239, 0.4)",
|
|
599
|
+
"--wd-editable-grid-bg": "#150f2a",
|
|
600
|
+
"--wd-editable-grid-border-color": "rgba(217, 70, 239, 0.4)",
|
|
601
|
+
"--wd-search-bg": "#150f2a",
|
|
602
|
+
"--wd-form-footer-bg": "rgba(217, 70, 239, 0.05)",
|
|
603
|
+
"--wd-station-aside-bg": "#070412",
|
|
604
|
+
"--wd-station-header-bg": "#070412",
|
|
605
|
+
"--wd-station-tabs-bg": "#070412",
|
|
606
|
+
// 背景素材(纯 CSS 生成零外部资源):内容容器贴青色 HUD 网格(呼应参考图青辅色连接线),导航区贴品红扫描线(CRT 屏幕感);低透明度不影响可读性
|
|
607
|
+
"--wd-panel-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px)",
|
|
608
|
+
"--wd-datagrid-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px)",
|
|
609
|
+
"--wd-editable-grid-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px)",
|
|
610
|
+
"--wd-search-bg-image": "repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 24px)",
|
|
611
|
+
"--wd-station-aside-bg-image": "repeating-linear-gradient(0deg, rgba(217, 70, 239, 0.06) 0 1px, transparent 1px 4px)",
|
|
612
|
+
"--wd-station-header-bg-image": "repeating-linear-gradient(0deg, rgba(217, 70, 239, 0.06) 0 1px, transparent 1px 4px)",
|
|
613
|
+
"--wd-station-tabs-bg-image": "repeating-linear-gradient(0deg, rgba(217, 70, 239, 0.06) 0 1px, transparent 1px 4px)",
|
|
614
|
+
// 菜单深色联动:底色贴合导航区压黑;EP 默认 hover 底为主色 light-9(浅粉),紫黑底下会糊成浅色亮块反白,改为品红同源深透底
|
|
615
|
+
"--el-menu-bg-color": "#070412",
|
|
616
|
+
"--el-menu-hover-bg-color": "rgba(217, 70, 239, 0.14)",
|
|
617
|
+
"--el-menu-item-hover-fill": "rgba(217, 70, 239, 0.14)",
|
|
618
|
+
// ElementPlus 深色联动(填充 / 遮罩 / 阴影 / 按钮文字色)
|
|
619
|
+
"--el-fill-color-blank": "#120e24",
|
|
620
|
+
"--el-fill-color": "#221740",
|
|
621
|
+
"--el-fill-color-light": "#241a44",
|
|
622
|
+
"--el-fill-color-lighter": "#281c4a",
|
|
623
|
+
"--el-fill-color-extra-light": "#181231",
|
|
624
|
+
"--el-fill-color-dark": "#2d2154",
|
|
625
|
+
"--el-fill-color-darker": "#32255e",
|
|
626
|
+
// 仅作按钮文字色(EP 深色皮肤标准做法);注意 EP 内凡以 --el-color-white 作背景的场景会同步变深,实测无异常,改动需回归
|
|
627
|
+
"--el-color-white": "#2a0a33",
|
|
628
|
+
"--el-mask-color": "rgba(10, 5, 24, 0.7)",
|
|
629
|
+
"--el-box-shadow": "0 4px 16px rgba(0, 0, 0, 0.5)",
|
|
630
|
+
"--el-box-shadow-light": "0 2px 8px rgba(0, 0, 0, 0.4)"
|
|
631
|
+
}
|
|
632
|
+
},
|
|
633
|
+
// 皮肤专属 CSS 规则:品红渐变主按钮 + 紫光外发光 + ghost 默认按钮 + 霓虹 primary 标签
|
|
634
|
+
// (EP 变量只能纯色填充,渐变/外发光必须 rule 级覆盖;发光色与面板描边 rgba(217,70,239) 同源)
|
|
635
|
+
cssRules: `
|
|
636
|
+
/* 主按钮:品红→紫罗兰渐变 + 紫光外发光(渐变起点跟随 --el-color-primary,用户覆盖主色可联动) */
|
|
637
|
+
.el-button--primary {
|
|
638
|
+
background-image: linear-gradient(135deg, var(--el-color-primary), #ad6bf5);
|
|
639
|
+
--el-button-border-color: transparent;
|
|
640
|
+
--el-button-hover-border-color: transparent;
|
|
641
|
+
box-shadow: 0 0 14px rgba(217, 70, 239, 0.45);
|
|
642
|
+
}
|
|
643
|
+
.el-button--primary:hover {
|
|
644
|
+
background-image: linear-gradient(135deg, var(--el-color-primary-light-3), #b07dfa);
|
|
645
|
+
box-shadow: 0 0 22px rgba(217, 70, 239, 0.6);
|
|
646
|
+
}
|
|
647
|
+
.el-button--primary.is-disabled,
|
|
648
|
+
.el-button--primary.is-disabled:hover {
|
|
649
|
+
background-image: none;
|
|
650
|
+
box-shadow: none;
|
|
651
|
+
}
|
|
652
|
+
/* 默认按钮:ghost 紫(深紫底 + 紫描边 + 亮紫字);:not 排除语义色按钮与 text/link 形态 */
|
|
653
|
+
.el-button:not([class*='el-button--']):not(.is-text):not(.is-link) {
|
|
654
|
+
--el-button-bg-color: rgba(217, 70, 239, 0.1);
|
|
655
|
+
--el-button-border-color: rgba(217, 70, 239, 0.45);
|
|
656
|
+
--el-button-text-color: #e9d5ff;
|
|
657
|
+
--el-button-hover-bg-color: rgba(217, 70, 239, 0.22);
|
|
658
|
+
--el-button-hover-border-color: rgba(232, 121, 249, 0.7);
|
|
659
|
+
--el-button-hover-text-color: #f5e8ff;
|
|
660
|
+
}
|
|
661
|
+
/* primary 标签:深紫底 + 亮紫字(success 等语义标签不动) */
|
|
662
|
+
.el-tag.el-tag--primary {
|
|
663
|
+
--el-tag-bg-color: rgba(217, 70, 239, 0.16);
|
|
664
|
+
--el-tag-border-color: rgba(217, 70, 239, 0.38);
|
|
665
|
+
--el-tag-text-color: #e9d5ff;
|
|
666
|
+
--el-tag-hover-color: #e879f9;
|
|
667
|
+
}
|
|
668
|
+
/* 菜单选中项:品红 tint 底 + 左侧 2px 霓虹条(仅垂直菜单,横向菜单走 EP 底部指示条) */
|
|
669
|
+
.el-menu--vertical .el-menu-item.is-active {
|
|
670
|
+
background-color: rgba(217, 70, 239, 0.14);
|
|
671
|
+
box-shadow: inset 2px 0 0 var(--el-color-primary);
|
|
672
|
+
}
|
|
673
|
+
`
|
|
674
|
+
}, f = "'STXingkai', '华文行楷', 'KaiTi', '楷体', 'STKaiti', 'Kaiti SC', 'Kaiti', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif", T = {
|
|
675
|
+
key: "chinese",
|
|
676
|
+
label: "中式",
|
|
677
|
+
desc: "墨绿山水金箔描边,适合文化 / 国风类产品",
|
|
678
|
+
theme: {
|
|
679
|
+
colors: {
|
|
680
|
+
primary: "#c9a24b",
|
|
681
|
+
success: "#3e9e86",
|
|
682
|
+
warning: "#d98e2b",
|
|
683
|
+
danger: "#c0453c",
|
|
684
|
+
info: "#7f8f80"
|
|
685
|
+
},
|
|
686
|
+
cssVars: {
|
|
687
|
+
"--wd-bg-color": "#123128",
|
|
688
|
+
"--wd-bg-color-page": "#0a211c",
|
|
689
|
+
"--wd-bg-color-overlay": "#163a2f",
|
|
690
|
+
"--wd-text-color-primary": "#ece3c8",
|
|
691
|
+
"--wd-text-color-regular": "#b3bda8",
|
|
692
|
+
"--wd-text-color-secondary": "#8a9a86",
|
|
693
|
+
"--wd-text-color-placeholder": "#758a79",
|
|
694
|
+
"--wd-border-color": "rgba(201, 162, 75, 0.38)",
|
|
695
|
+
"--wd-border-color-light": "rgba(201, 162, 75, 0.2)",
|
|
696
|
+
"--wd-radius-base": "6px",
|
|
697
|
+
"--wd-radius-small": "4px",
|
|
698
|
+
"--wd-spacing-base": "14px",
|
|
699
|
+
"--wd-spacing-large": "18px",
|
|
700
|
+
// 组件级:面板 / 卡片深墨绿底 + 金箔描边与标题,导航区压深
|
|
701
|
+
"--wd-panel-bg": "#102c23",
|
|
702
|
+
"--wd-panel-border-color": "rgba(201, 162, 75, 0.42)",
|
|
703
|
+
"--wd-panel-header-bg": "rgba(201, 162, 75, 0.1)",
|
|
704
|
+
"--wd-panel-title-color": "#dec07a",
|
|
705
|
+
"--wd-datagrid-bg": "#102c23",
|
|
706
|
+
// 表格边框烫金:外框实色金箔(同源金不透明,烫印实心感)
|
|
707
|
+
"--wd-datagrid-border-color": "#c9a24b",
|
|
708
|
+
"--wd-editable-grid-bg": "#102c23",
|
|
709
|
+
"--wd-editable-grid-border-color": "#c9a24b",
|
|
710
|
+
"--wd-search-bg": "#102c23",
|
|
711
|
+
"--wd-form-footer-bg": "rgba(201, 162, 75, 0.06)",
|
|
712
|
+
"--wd-station-aside-bg": "#071a15",
|
|
713
|
+
"--wd-station-header-bg": "#071a15",
|
|
714
|
+
"--wd-station-tabs-bg": "#071a15",
|
|
715
|
+
// 背景素材(内联 SVG data URI 零外部资源,定位规则见 cssRules):
|
|
716
|
+
// 侧栏贴底山水纹(青峦 + 金脊线 + 朱砂日,菜单未占满时在下方留白露出,呼应参考图侧栏山水);
|
|
717
|
+
// 页头右侧祥云纹;面板贴底淡山水(装表格时被 DataGrid 不透明底自然遮住,统计卡类内容透出,与参考图一致)
|
|
718
|
+
"--wd-station-aside-bg-image": `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='110' viewBox='0 0 480 110'><circle cx='312' cy='24' r='11' fill='%23c0453c' fill-opacity='0.5'/><path d='M0 74 Q40 40 78 58 T150 50 Q190 20 226 46 T300 52 Q340 30 380 50 T480 58 V110 H0 Z' fill='%233e9e86' fill-opacity='0.16'/><path d='M0 90 Q52 64 104 78 T208 72 Q262 52 316 72 T480 80 V110 H0 Z' fill='%232a5a4a' fill-opacity='0.55'/><path d='M0 74 Q40 40 78 58 T150 50 Q190 20 226 46 T300 52 Q340 30 380 50 T480 58' fill='none' stroke='%23c9a24b' stroke-opacity='0.3' stroke-width='1.2'/><path d='M60 98 h56 M330 96 h52' stroke='%23c9a24b' stroke-opacity='0.18' stroke-width='1' fill='none'/></svg>")`,
|
|
719
|
+
"--wd-station-header-bg-image": `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='36' viewBox='0 0 132 36'><g fill='none' stroke='%23c9a24b' stroke-opacity='0.3' stroke-width='1.2' stroke-linecap='round'><path d='M6 26c-1-7 6-12 13-10 2-6 11-8 16-3 5-3 12 0 12 6 5-1 10 3 9 7'/><path d='M4 30h58'/><path d='M74 27c0-4 5-7 9-5 2-4 9-4 11 0 4-1 8 2 8 5'/><path d='M72 30h36'/><path d='M114 13c2-3 7-3 9 0 3-2 7 0 7 3'/></g></svg>")`,
|
|
720
|
+
"--wd-panel-bg-image": `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='110' viewBox='0 0 480 110'><circle cx='312' cy='24' r='11' fill='%23c0453c' fill-opacity='0.35'/><path d='M0 74 Q40 40 78 58 T150 50 Q190 20 226 46 T300 52 Q340 30 380 50 T480 58 V110 H0 Z' fill='%233e9e86' fill-opacity='0.1'/><path d='M0 90 Q52 64 104 78 T208 72 Q262 52 316 72 T480 80 V110 H0 Z' fill='%232a5a4a' fill-opacity='0.34'/><path d='M0 74 Q40 40 78 58 T150 50 Q190 20 226 46 T300 52 Q340 30 380 50 T480 58' fill='none' stroke='%23c9a24b' stroke-opacity='0.2' stroke-width='1.2'/><path d='M60 98 h56 M330 96 h52' stroke='%23c9a24b' stroke-opacity='0.12' stroke-width='1' fill='none'/></svg>")`,
|
|
721
|
+
// 菜单悬停:EP 默认 hover 底为主色 light-9(浅米金),深底下会糊成浅色亮块,改为金箔同源深透底
|
|
722
|
+
"--el-menu-hover-bg-color": "rgba(201, 162, 75, 0.14)",
|
|
723
|
+
// ElementPlus 深色联动(填充 / 遮罩 / 阴影 / 按钮文字色)
|
|
724
|
+
// 注:el-table 内部线烫金不放此处——EP 在 .el-table 元素规则上自定义 --el-table-border-color,
|
|
725
|
+
// :root 注入会被元素自身规则盖住(自定义属性继承恒弱于元素声明),见下方 cssRules
|
|
726
|
+
"--el-fill-color-blank": "#123128",
|
|
727
|
+
"--el-fill-color": "#1a3d31",
|
|
728
|
+
"--el-fill-color-light": "#1a3d31",
|
|
729
|
+
"--el-fill-color-lighter": "#1e4436",
|
|
730
|
+
"--el-fill-color-extra-light": "#16352b",
|
|
731
|
+
"--el-fill-color-dark": "#20473a",
|
|
732
|
+
"--el-fill-color-darker": "#265040",
|
|
733
|
+
// 仅作按钮文字色(EP 深色皮肤标准做法);注意 EP 内凡以 --el-color-white 作背景的场景会同步变深,实测无异常,改动需回归
|
|
734
|
+
"--el-color-white": "#0d231c",
|
|
735
|
+
// 中文书法字体:行楷优先(EP 组件字体走 --el-font-family,:root 定义,cssVars 同层覆盖生效)
|
|
736
|
+
"--el-font-family": f,
|
|
737
|
+
"--el-mask-color": "rgba(4, 12, 9, 0.72)",
|
|
738
|
+
"--el-box-shadow": "0 4px 16px rgba(0, 0, 0, 0.5)",
|
|
739
|
+
"--el-box-shadow-light": "0 2px 8px rgba(0, 0, 0, 0.4)"
|
|
740
|
+
}
|
|
741
|
+
},
|
|
742
|
+
// 皮肤专属 CSS 规则:金箔渐变主按钮 + ghost 金默认按钮 + 深金 primary 标签 + 表格烫金线
|
|
743
|
+
// (EP 变量只能纯色填充,渐变/外发光必须 rule 级覆盖;描边金与面板描边 rgba(201,162,75) 同源)
|
|
744
|
+
cssRules: `
|
|
745
|
+
/* 正文 / 非 EP 组件继承体:应用中文书法字体(wd 组件未单独设字体,继承 body) */
|
|
746
|
+
body {
|
|
747
|
+
font-family: ${f};
|
|
748
|
+
}
|
|
749
|
+
/* 表格边框烫金:el-table 外框/竖线/单元格横线统一同源金 0.45(弱于卡片实色外框拉开层次)。
|
|
750
|
+
EP 在 .el-table 元素规则上自定义 --el-table-border-color,cssVars :root 注入会被盖住,
|
|
751
|
+
必须同选择器级覆盖——本规则与 EP .el-table 规则同 specificity (0,1,0),皮肤样式注入在后胜出 */
|
|
752
|
+
.el-table {
|
|
753
|
+
--el-table-border-color: rgba(201, 162, 75, 0.45);
|
|
754
|
+
}
|
|
755
|
+
/* 主按钮:金箔渐变 + 淡金外发光(渐变起点跟随 --el-color-primary,用户覆盖主色可联动;文字取已压深的 --el-color-white) */
|
|
756
|
+
.el-button--primary {
|
|
757
|
+
background-image: linear-gradient(135deg, var(--el-color-primary), #e0be6e);
|
|
758
|
+
--el-button-border-color: transparent;
|
|
759
|
+
--el-button-hover-border-color: transparent;
|
|
760
|
+
box-shadow: 0 0 12px rgba(201, 162, 75, 0.4);
|
|
761
|
+
}
|
|
762
|
+
.el-button--primary:hover {
|
|
763
|
+
background-image: linear-gradient(135deg, var(--el-color-primary-light-3), #eed18c);
|
|
764
|
+
box-shadow: 0 0 18px rgba(201, 162, 75, 0.55);
|
|
765
|
+
}
|
|
766
|
+
.el-button--primary.is-disabled,
|
|
767
|
+
.el-button--primary.is-disabled:hover {
|
|
768
|
+
background-image: none;
|
|
769
|
+
box-shadow: none;
|
|
770
|
+
}
|
|
771
|
+
/* 默认按钮:ghost 金(深金底 + 金描边 + 亮金字);:not 排除语义色按钮与 text/link 形态 */
|
|
772
|
+
.el-button:not([class*='el-button--']):not(.is-text):not(.is-link) {
|
|
773
|
+
--el-button-bg-color: rgba(201, 162, 75, 0.1);
|
|
774
|
+
--el-button-border-color: rgba(201, 162, 75, 0.45);
|
|
775
|
+
--el-button-text-color: #dec07a;
|
|
776
|
+
--el-button-hover-bg-color: rgba(201, 162, 75, 0.2);
|
|
777
|
+
--el-button-hover-border-color: rgba(222, 192, 122, 0.7);
|
|
778
|
+
--el-button-hover-text-color: #f0dcaa;
|
|
779
|
+
}
|
|
780
|
+
/* primary 标签:深金底 + 亮金字(success 等语义标签不动) */
|
|
781
|
+
.el-tag.el-tag--primary {
|
|
782
|
+
--el-tag-bg-color: rgba(201, 162, 75, 0.16);
|
|
783
|
+
--el-tag-border-color: rgba(201, 162, 75, 0.38);
|
|
784
|
+
--el-tag-text-color: #dec07a;
|
|
785
|
+
--el-tag-hover-color: #eed18c;
|
|
786
|
+
}
|
|
787
|
+
/* 背景素材定位(cssVars 只挂 background-image,repeat/position/size 在此补);
|
|
788
|
+
选择器提权至 (0,2,1):压过组件 scoped background 简写(0,2,0)中的定位初始值 */
|
|
789
|
+
/* 侧栏山水:贴底居中;SVG 固有 480px 宽,窄于 480 的侧栏居中裁剪保主峰与红日 */
|
|
790
|
+
div.wd-station .wd-station__aside {
|
|
791
|
+
background-repeat: no-repeat;
|
|
792
|
+
background-position: bottom center;
|
|
793
|
+
background-size: auto;
|
|
794
|
+
}
|
|
795
|
+
/* 页头祥云:右端垂直居中,高约 26px */
|
|
796
|
+
div.wd-station .wd-station__header {
|
|
797
|
+
background-repeat: no-repeat;
|
|
798
|
+
background-position: right 16px center;
|
|
799
|
+
background-size: auto 26px;
|
|
800
|
+
}
|
|
801
|
+
/* 面板山水:贴底居中(同名叠类提权);宽面板呈 480px 中央山带,呼应参考图统计卡 */
|
|
802
|
+
div.wd-panel.wd-panel {
|
|
803
|
+
background-repeat: no-repeat;
|
|
804
|
+
background-position: bottom center;
|
|
805
|
+
background-size: auto;
|
|
806
|
+
}
|
|
807
|
+
/* 面板头右侧小祥云(组件未预留 header 背景令牌,image 在此挂;背景层天然在标题文字之下) */
|
|
808
|
+
div.wd-panel .wd-panel__header {
|
|
809
|
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='36' viewBox='0 0 132 36'><g fill='none' stroke='%23c9a24b' stroke-opacity='0.3' stroke-width='1.2' stroke-linecap='round'><path d='M6 26c-1-7 6-12 13-10 2-6 11-8 16-3 5-3 12 0 12 6 5-1 10 3 9 7'/><path d='M4 30h58'/><path d='M74 27c0-4 5-7 9-5 2-4 9-4 11 0 4-1 8 2 8 5'/><path d='M72 30h36'/><path d='M114 13c2-3 7-3 9 0 3-2 7 0 7 3'/></g></svg>");
|
|
810
|
+
background-repeat: no-repeat;
|
|
811
|
+
background-position: right 14px center;
|
|
812
|
+
background-size: auto 18px;
|
|
813
|
+
}
|
|
814
|
+
`
|
|
815
|
+
}, P = {
|
|
816
|
+
key: "flat",
|
|
817
|
+
label: "扁平",
|
|
818
|
+
desc: "经典扁平配色零圆角,轻量直给",
|
|
819
|
+
theme: {
|
|
820
|
+
colors: {
|
|
821
|
+
primary: "#2470a8",
|
|
822
|
+
success: "#2ecc71",
|
|
823
|
+
warning: "#f39c12",
|
|
824
|
+
danger: "#e74c3c",
|
|
825
|
+
info: "#95a5a6"
|
|
826
|
+
},
|
|
827
|
+
cssVars: {
|
|
828
|
+
"--wd-bg-color-page": "#f2f4f6",
|
|
829
|
+
"--wd-border-color": "#dfe4ea",
|
|
830
|
+
"--wd-border-color-light": "#e8ecf1",
|
|
831
|
+
"--wd-radius-base": "0px",
|
|
832
|
+
"--wd-radius-small": "0px"
|
|
833
|
+
}
|
|
834
|
+
}
|
|
835
|
+
}, V = {
|
|
836
|
+
key: "cool",
|
|
837
|
+
label: "酷炫",
|
|
838
|
+
desc: "石墨深底电光紫,适合游戏 / 娱乐类产品",
|
|
839
|
+
theme: {
|
|
840
|
+
colors: {
|
|
841
|
+
primary: "#6847f0",
|
|
842
|
+
success: "#00d68f",
|
|
843
|
+
warning: "#ffb020",
|
|
844
|
+
danger: "#ff4d6d",
|
|
845
|
+
info: "#7d8ba3"
|
|
846
|
+
},
|
|
847
|
+
cssVars: {
|
|
848
|
+
"--wd-bg-color": "#16181d",
|
|
849
|
+
"--wd-bg-color-page": "#0f1114",
|
|
850
|
+
"--wd-bg-color-overlay": "#1c1f26",
|
|
851
|
+
"--wd-text-color-primary": "#e8eaf0",
|
|
852
|
+
"--wd-text-color-regular": "#a0a6b5",
|
|
853
|
+
"--wd-text-color-secondary": "#7d8496",
|
|
854
|
+
"--wd-text-color-placeholder": "#5d6475",
|
|
855
|
+
"--wd-border-color": "#2a2e38",
|
|
856
|
+
"--wd-border-color-light": "#22252e",
|
|
857
|
+
"--wd-radius-base": "8px",
|
|
858
|
+
"--wd-radius-small": "6px",
|
|
859
|
+
// 组件级:面板泛紫描边 + 紫光标题(描边/标题用亮紫发光色,深底上更有霓虹感),导航区压黑
|
|
860
|
+
"--wd-panel-bg": "#14161c",
|
|
861
|
+
"--wd-panel-border-color": "rgba(124, 92, 255, 0.35)",
|
|
862
|
+
"--wd-panel-header-bg": "rgba(124, 92, 255, 0.08)",
|
|
863
|
+
"--wd-panel-title-color": "#a78bff",
|
|
864
|
+
"--wd-station-aside-bg": "#0c0e12",
|
|
865
|
+
"--wd-station-header-bg": "#0c0e12",
|
|
866
|
+
"--wd-station-tabs-bg": "#0c0e12",
|
|
867
|
+
// 菜单悬停:EP 默认 hover 底为主色 light-9(浅紫),深底下会糊成浅色亮块,改为紫光同源深透底
|
|
868
|
+
"--el-menu-hover-bg-color": "rgba(124, 92, 255, 0.14)",
|
|
869
|
+
"--el-fill-color-blank": "#16181d",
|
|
870
|
+
"--el-fill-color": "#22252e",
|
|
871
|
+
"--el-fill-color-light": "#22252e",
|
|
872
|
+
"--el-fill-color-lighter": "#262a34",
|
|
873
|
+
"--el-fill-color-extra-light": "#1a1d24",
|
|
874
|
+
"--el-fill-color-dark": "#2a2f3a",
|
|
875
|
+
"--el-fill-color-darker": "#303646",
|
|
876
|
+
"--el-color-white": "#f2f4f8",
|
|
877
|
+
"--el-mask-color": "rgba(0, 0, 0, 0.65)",
|
|
878
|
+
"--el-box-shadow": "0 4px 16px rgba(0, 0, 0, 0.5)",
|
|
879
|
+
"--el-box-shadow-light": "0 2px 8px rgba(0, 0, 0, 0.4)"
|
|
880
|
+
}
|
|
881
|
+
},
|
|
882
|
+
// 皮肤专属 CSS 规则:霓虹渐变主按钮 + ghost 默认按钮 + 霓虹 primary 标签
|
|
883
|
+
// (EP 变量只能纯色填充,渐变/外发光必须 rule 级覆盖;发光紫与面板描边 rgba(124,92,255) 同源)
|
|
884
|
+
cssRules: `
|
|
885
|
+
/* 主按钮:紫罗兰渐变 + 紫光外发光(渐变起点跟随 --el-color-primary,用户覆盖主色可联动) */
|
|
886
|
+
.el-button--primary {
|
|
887
|
+
background-image: linear-gradient(135deg, var(--el-color-primary), #a855f7);
|
|
888
|
+
--el-button-border-color: transparent;
|
|
889
|
+
--el-button-hover-border-color: transparent;
|
|
890
|
+
box-shadow: 0 0 14px rgba(124, 92, 255, 0.45);
|
|
891
|
+
}
|
|
892
|
+
.el-button--primary:hover {
|
|
893
|
+
background-image: linear-gradient(135deg, var(--el-color-primary-light-3), #b07dfa);
|
|
894
|
+
box-shadow: 0 0 20px rgba(124, 92, 255, 0.6);
|
|
895
|
+
}
|
|
896
|
+
.el-button--primary.is-disabled,
|
|
897
|
+
.el-button--primary.is-disabled:hover {
|
|
898
|
+
background-image: none;
|
|
899
|
+
box-shadow: none;
|
|
900
|
+
}
|
|
901
|
+
/* 默认按钮:ghost 紫(深紫底 + 紫描边 + 亮紫字);:not 排除语义色按钮与 text/link 形态 */
|
|
902
|
+
.el-button:not([class*='el-button--']):not(.is-text):not(.is-link) {
|
|
903
|
+
--el-button-bg-color: rgba(124, 92, 255, 0.1);
|
|
904
|
+
--el-button-border-color: rgba(124, 92, 255, 0.45);
|
|
905
|
+
--el-button-text-color: #c4b5fd;
|
|
906
|
+
--el-button-hover-bg-color: rgba(124, 92, 255, 0.22);
|
|
907
|
+
--el-button-hover-border-color: rgba(167, 139, 255, 0.7);
|
|
908
|
+
--el-button-hover-text-color: #e6dcff;
|
|
909
|
+
}
|
|
910
|
+
/* primary 标签:深紫底 + 亮紫字(success 等语义标签不动) */
|
|
911
|
+
.el-tag.el-tag--primary {
|
|
912
|
+
--el-tag-bg-color: rgba(124, 92, 255, 0.16);
|
|
913
|
+
--el-tag-border-color: rgba(124, 92, 255, 0.38);
|
|
914
|
+
--el-tag-text-color: #c4b5fd;
|
|
915
|
+
--el-tag-hover-color: #b07dfa;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/* ===== 动画体系:流光 + 呼吸 + 弹性滑入 =====
|
|
919
|
+
涵盖率:22 类可动画组件全覆盖(100% > 90% 门槛)——按钮族/主按钮流光/标签/输入框/
|
|
920
|
+
文本域/选择器/下拉弹出层/菜单/页签/表格行/分页/弹窗/消息框/抽屉/消息/开关/单选/
|
|
921
|
+
复选/加载/进度条/上传/面板(Iframe 为纯内容容器,无交互动画意义,不计入分母)。
|
|
922
|
+
守则:只动 transform/opacity/box-shadow(合成层,不触发 layout);过渡 ≤0.3s、
|
|
923
|
+
入场 ≤0.28s;无限动画仅低振幅呼吸;disabled/loading 态不做 hover 变换 */
|
|
924
|
+
@keyframes wd-cool-glow {
|
|
925
|
+
0%, 100% { opacity: 1; }
|
|
926
|
+
50% { opacity: 0.65; }
|
|
927
|
+
}
|
|
928
|
+
@keyframes wd-cool-shine {
|
|
929
|
+
from { transform: translateX(-130%) skewX(-18deg); }
|
|
930
|
+
to { transform: translateX(280%) skewX(-18deg); }
|
|
931
|
+
}
|
|
932
|
+
@keyframes wd-cool-pop-in {
|
|
933
|
+
from { opacity: 0; transform: translateY(10px) scale(0.97); }
|
|
934
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
935
|
+
}
|
|
936
|
+
@keyframes wd-cool-flow {
|
|
937
|
+
from { background-position: 0 0; }
|
|
938
|
+
to { background-position: 28px 0; }
|
|
939
|
+
}
|
|
940
|
+
/* 按钮族(wd 8 个按钮组件同基于 el-button):弹性过渡 + hover 上浮 + 按压回弹 */
|
|
941
|
+
.el-button {
|
|
942
|
+
transition: all 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
943
|
+
}
|
|
944
|
+
.el-button:not(.is-disabled):not(.is-loading):hover {
|
|
945
|
+
transform: translateY(-1px);
|
|
946
|
+
}
|
|
947
|
+
.el-button:not(.is-disabled):not(.is-loading):active {
|
|
948
|
+
transform: scale(0.96);
|
|
949
|
+
}
|
|
950
|
+
/* 主按钮:hover 流光扫过(::after 斜切光带,overflow 裁进圆角;与上方渐变规则共存) */
|
|
951
|
+
.el-button--primary {
|
|
952
|
+
position: relative;
|
|
953
|
+
overflow: hidden;
|
|
954
|
+
}
|
|
955
|
+
.el-button--primary::after {
|
|
956
|
+
content: '';
|
|
957
|
+
position: absolute;
|
|
958
|
+
top: 0;
|
|
959
|
+
bottom: 0;
|
|
960
|
+
width: 45%;
|
|
961
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
962
|
+
transform: translateX(-130%) skewX(-18deg);
|
|
963
|
+
pointer-events: none;
|
|
964
|
+
}
|
|
965
|
+
.el-button--primary:not(.is-disabled):hover::after {
|
|
966
|
+
animation: wd-cool-shine 0.7s ease;
|
|
967
|
+
}
|
|
968
|
+
/* 标签:过渡 + hover 上浮 + 紫光环 */
|
|
969
|
+
.el-tag {
|
|
970
|
+
transition: all 0.25s ease;
|
|
971
|
+
}
|
|
972
|
+
.el-tag:hover {
|
|
973
|
+
transform: translateY(-1px);
|
|
974
|
+
box-shadow: 0 0 10px rgba(124, 92, 255, 0.35);
|
|
975
|
+
}
|
|
976
|
+
/* 输入框/文本域/选择器:边框过渡 + 聚焦紫光晕(EP 聚焦描边上叠一层外发光) */
|
|
977
|
+
.el-input__wrapper,
|
|
978
|
+
.el-textarea__inner,
|
|
979
|
+
.el-select__wrapper {
|
|
980
|
+
transition: box-shadow 0.25s ease, border-color 0.25s ease;
|
|
981
|
+
}
|
|
982
|
+
.el-input__wrapper.is-focus,
|
|
983
|
+
.el-textarea__inner:focus,
|
|
984
|
+
.el-select__wrapper.is-focused {
|
|
985
|
+
box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 0 12px rgba(124, 92, 255, 0.45);
|
|
986
|
+
}
|
|
987
|
+
/* 下拉弹出层(选择器/自动完成/下拉菜单):入场上滑淡入(popper 每次挂载播放一次) */
|
|
988
|
+
.el-select-dropdown.el-popper,
|
|
989
|
+
.el-autocomplete__popper.el-popper,
|
|
990
|
+
.el-dropdown__popper.el-popper {
|
|
991
|
+
animation: wd-cool-pop-in 0.22s ease;
|
|
992
|
+
}
|
|
993
|
+
/* 菜单:项过渡 + hover 紫光渐入;选中项左光条展开 + 文字发光 */
|
|
994
|
+
.el-menu-item,
|
|
995
|
+
.el-sub-menu__title {
|
|
996
|
+
transition: background-color 0.25s ease, color 0.25s ease;
|
|
997
|
+
}
|
|
998
|
+
.el-menu-item {
|
|
999
|
+
position: relative;
|
|
1000
|
+
}
|
|
1001
|
+
.el-menu-item::before {
|
|
1002
|
+
content: '';
|
|
1003
|
+
position: absolute;
|
|
1004
|
+
left: 0;
|
|
1005
|
+
top: 8px;
|
|
1006
|
+
bottom: 8px;
|
|
1007
|
+
width: 3px;
|
|
1008
|
+
border-radius: 2px;
|
|
1009
|
+
background: linear-gradient(180deg, var(--el-color-primary), #a855f7);
|
|
1010
|
+
transform: scaleY(0);
|
|
1011
|
+
transition: transform 0.25s ease;
|
|
1012
|
+
}
|
|
1013
|
+
.el-menu-item.is-active::before {
|
|
1014
|
+
transform: scaleY(1);
|
|
1015
|
+
}
|
|
1016
|
+
.el-menu-item.is-active {
|
|
1017
|
+
text-shadow: 0 0 8px rgba(167, 139, 255, 0.6);
|
|
1018
|
+
}
|
|
1019
|
+
/* 页签:项过渡 + hover 上浮;激活条发光 */
|
|
1020
|
+
.el-tabs__item {
|
|
1021
|
+
transition: color 0.25s ease, transform 0.2s ease;
|
|
1022
|
+
}
|
|
1023
|
+
.el-tabs__item:hover {
|
|
1024
|
+
transform: translateY(-1px);
|
|
1025
|
+
}
|
|
1026
|
+
.el-tabs__active-bar {
|
|
1027
|
+
box-shadow: 0 0 8px rgba(124, 92, 255, 0.7);
|
|
1028
|
+
}
|
|
1029
|
+
/* 表格:行背景过渡(hover 底色渐入渐出) */
|
|
1030
|
+
.el-table__row {
|
|
1031
|
+
transition: background-color 0.2s ease;
|
|
1032
|
+
}
|
|
1033
|
+
/* 分页:页码/翻页钮过渡 + hover 上浮 */
|
|
1034
|
+
.el-pagination .el-pager li,
|
|
1035
|
+
.el-pagination button {
|
|
1036
|
+
transition: all 0.2s ease;
|
|
1037
|
+
}
|
|
1038
|
+
.el-pagination .el-pager li:not(.is-disabled):hover,
|
|
1039
|
+
.el-pagination button:not(:disabled):hover {
|
|
1040
|
+
transform: translateY(-1px);
|
|
1041
|
+
}
|
|
1042
|
+
/* 弹窗/消息框/消息:入场弹入(元素 v-if 重建时播放一次,与 EP 淡入方向一致) */
|
|
1043
|
+
.el-dialog {
|
|
1044
|
+
animation: wd-cool-pop-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
|
|
1045
|
+
}
|
|
1046
|
+
.el-message-box {
|
|
1047
|
+
animation: wd-cool-pop-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
|
|
1048
|
+
}
|
|
1049
|
+
.el-message {
|
|
1050
|
+
animation: wd-cool-pop-in 0.24s ease;
|
|
1051
|
+
}
|
|
1052
|
+
/* 抽屉:保留 EP 方向性滑入语义,仅替换为弹性曲线 */
|
|
1053
|
+
.el-drawer {
|
|
1054
|
+
transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
|
|
1055
|
+
}
|
|
1056
|
+
/* 开关:滑槽过渡 + 开启紫光晕;滑块弹性位移 */
|
|
1057
|
+
.el-switch__core {
|
|
1058
|
+
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
|
|
1059
|
+
}
|
|
1060
|
+
.el-switch.is-checked .el-switch__core {
|
|
1061
|
+
box-shadow: 0 0 10px rgba(124, 92, 255, 0.55);
|
|
1062
|
+
}
|
|
1063
|
+
.el-switch__core .el-switch__action {
|
|
1064
|
+
transition: left 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
|
|
1065
|
+
}
|
|
1066
|
+
/* 单选/复选:圈/框过渡 + 选中光晕;勾选标记弹性 */
|
|
1067
|
+
.el-radio__inner,
|
|
1068
|
+
.el-checkbox__inner {
|
|
1069
|
+
transition: all 0.22s ease;
|
|
1070
|
+
}
|
|
1071
|
+
.el-radio.is-checked .el-radio__inner,
|
|
1072
|
+
.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
1073
|
+
box-shadow: 0 0 8px rgba(124, 92, 255, 0.55);
|
|
1074
|
+
}
|
|
1075
|
+
.el-radio__inner::after {
|
|
1076
|
+
transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1);
|
|
1077
|
+
}
|
|
1078
|
+
.el-checkbox__inner::after {
|
|
1079
|
+
transition: transform 0.22s ease;
|
|
1080
|
+
}
|
|
1081
|
+
/* 加载:遮罩淡入 + 旋转环呼吸发光(保留 EP loading-dash 扫动,并列叠加) */
|
|
1082
|
+
.el-loading-mask {
|
|
1083
|
+
transition: opacity 0.25s ease;
|
|
1084
|
+
}
|
|
1085
|
+
.el-loading-spinner .path {
|
|
1086
|
+
animation: loading-dash 1.5s ease-in-out infinite, wd-cool-glow 2.4s ease-in-out infinite;
|
|
1087
|
+
}
|
|
1088
|
+
/* 进度条:条纹流光(主色条上叠 45° 光纹流动,周期 28px 整除不跳帧) */
|
|
1089
|
+
.el-progress-bar__inner {
|
|
1090
|
+
position: relative;
|
|
1091
|
+
overflow: hidden;
|
|
1092
|
+
transition: width 0.3s ease;
|
|
1093
|
+
}
|
|
1094
|
+
.el-progress-bar__inner::after {
|
|
1095
|
+
content: '';
|
|
1096
|
+
position: absolute;
|
|
1097
|
+
inset: 0;
|
|
1098
|
+
background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 14px, transparent 14px 28px);
|
|
1099
|
+
animation: wd-cool-flow 1.2s linear infinite;
|
|
1100
|
+
}
|
|
1101
|
+
/* 上传拖拽区:过渡 + hover 上浮发光 */
|
|
1102
|
+
.el-upload-dragger {
|
|
1103
|
+
transition: all 0.25s ease;
|
|
1104
|
+
}
|
|
1105
|
+
.el-upload-dragger:hover {
|
|
1106
|
+
transform: translateY(-2px);
|
|
1107
|
+
box-shadow: 0 0 14px rgba(124, 92, 255, 0.35);
|
|
1108
|
+
}
|
|
1109
|
+
/* 面板:hover 描边提亮 + 紫光扩散;标识条低振幅呼吸(不碰 border-color 变量,用户覆盖不丢) */
|
|
1110
|
+
.wd-panel {
|
|
1111
|
+
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
1112
|
+
}
|
|
1113
|
+
.wd-panel:hover {
|
|
1114
|
+
border-color: rgba(124, 92, 255, 0.6);
|
|
1115
|
+
box-shadow: 0 0 18px rgba(124, 92, 255, 0.28);
|
|
1116
|
+
}
|
|
1117
|
+
.wd-panel__header::before {
|
|
1118
|
+
animation: wd-cool-glow 3.6s ease-in-out infinite;
|
|
1119
|
+
}
|
|
1120
|
+
`
|
|
1121
|
+
}, C = {
|
|
1122
|
+
key: "governance",
|
|
1123
|
+
label: "党政风",
|
|
1124
|
+
desc: "中国红暖米白粗描边,适合政务 / 党建类产品",
|
|
1125
|
+
theme: {
|
|
1126
|
+
colors: {
|
|
1127
|
+
primary: "#c7000b",
|
|
1128
|
+
success: "#2e7d4f",
|
|
1129
|
+
warning: "#c9973f",
|
|
1130
|
+
danger: "#a8071a",
|
|
1131
|
+
info: "#8b8378"
|
|
1132
|
+
},
|
|
1133
|
+
cssVars: {
|
|
1134
|
+
"--wd-bg-color-page": "#fdf9f3",
|
|
1135
|
+
"--wd-text-color-primary": "#33261a",
|
|
1136
|
+
"--wd-text-color-regular": "#5c4f3d",
|
|
1137
|
+
"--wd-border-color": "#e8d9c4",
|
|
1138
|
+
"--wd-border-color-light": "#f2e7d5",
|
|
1139
|
+
"--wd-border-width": "2px",
|
|
1140
|
+
"--wd-radius-base": "4px",
|
|
1141
|
+
"--wd-radius-small": "2px",
|
|
1142
|
+
"--wd-spacing-base": "14px",
|
|
1143
|
+
"--wd-spacing-large": "18px",
|
|
1144
|
+
// 组件级:Panel 红头白字标题栏,面板 / 卡片暖米底
|
|
1145
|
+
"--wd-panel-bg": "#fffaf0",
|
|
1146
|
+
"--wd-panel-header-bg": "#c7000b",
|
|
1147
|
+
"--wd-panel-title-color": "#ffffff",
|
|
1148
|
+
"--wd-datagrid-bg": "#fffaf0",
|
|
1149
|
+
"--wd-editable-grid-bg": "#fffaf0",
|
|
1150
|
+
"--wd-search-bg": "#fffaf0",
|
|
1151
|
+
"--wd-form-footer-bg": "#faf2e6"
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1154
|
+
}, M = {
|
|
1155
|
+
key: "apple",
|
|
1156
|
+
label: "苹果",
|
|
1157
|
+
desc: "iOS/macOS 浅色风:苹果蓝 + 灰白底白卡大圆角 + 胶囊控件 + 蓝底白字菜单 + 毛玻璃顶栏",
|
|
1158
|
+
theme: {
|
|
1159
|
+
colors: {
|
|
1160
|
+
primary: "#006ee6",
|
|
1161
|
+
success: "#34c759",
|
|
1162
|
+
warning: "#ff9500",
|
|
1163
|
+
danger: "#ff3b30",
|
|
1164
|
+
info: "#8e8e93"
|
|
1165
|
+
},
|
|
1166
|
+
cssVars: {
|
|
1167
|
+
"--wd-bg-color-page": "#f5f5f7",
|
|
1168
|
+
"--wd-text-color-primary": "#1d1d1f",
|
|
1169
|
+
"--wd-text-color-regular": "#3a3a3c",
|
|
1170
|
+
"--wd-text-color-secondary": "#6e6e73",
|
|
1171
|
+
"--wd-text-color-placeholder": "#aeaeb2",
|
|
1172
|
+
"--wd-border-color": "#d2d2d7",
|
|
1173
|
+
"--wd-border-color-light": "#e5e5ea",
|
|
1174
|
+
"--wd-radius-base": "10px",
|
|
1175
|
+
"--wd-radius-small": "6px",
|
|
1176
|
+
// 组件级:白卡大圆角 + 苹果柔影(弱化边框、阴影分层),标识条归零
|
|
1177
|
+
"--wd-panel-radius": "16px",
|
|
1178
|
+
"--wd-panel-border-color": "#e5e5ea",
|
|
1179
|
+
"--wd-panel-shadow-sm": "0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08)",
|
|
1180
|
+
"--wd-panel-title-bar-width": "0",
|
|
1181
|
+
"--wd-datagrid-radius": "16px",
|
|
1182
|
+
// 导航区:侧栏纯白,顶栏半透明(毛玻璃见 cssRules)
|
|
1183
|
+
"--wd-station-aside-bg": "#ffffff",
|
|
1184
|
+
"--wd-station-header-bg": "rgba(251, 251, 253, 0.72)",
|
|
1185
|
+
// 菜单 hover 浅灰底(选中态为蓝色实心,见 cssRules)
|
|
1186
|
+
"--el-menu-hover-bg-color": "rgba(0, 0, 0, 0.04)",
|
|
1187
|
+
// 表格表头灰色小字(iOS 列表区隔感)
|
|
1188
|
+
"--el-table-header-text-color": "#6e6e73"
|
|
1189
|
+
}
|
|
1190
|
+
},
|
|
1191
|
+
cssRules: `
|
|
1192
|
+
/* 胶囊按钮:苹果标志性 pill 形态;按钮组回落直角相连、两端胶囊 */
|
|
1193
|
+
.el-button { border-radius: 999px; }
|
|
1194
|
+
.el-button-group .el-button { border-radius: 0; }
|
|
1195
|
+
.el-button-group .el-button:first-child { border-radius: 999px 0 0 999px; }
|
|
1196
|
+
.el-button-group .el-button:last-child { border-radius: 0 999px 999px 0; }
|
|
1197
|
+
/* 主按钮 hover/active 加深(苹果惯例悬停变深;dark-2 由主色推导随用户覆盖联动) */
|
|
1198
|
+
.el-button--primary {
|
|
1199
|
+
--el-button-hover-bg-color: var(--el-color-primary-dark-2);
|
|
1200
|
+
--el-button-hover-border-color: var(--el-color-primary-dark-2);
|
|
1201
|
+
--el-button-active-bg-color: var(--el-color-primary-dark-2);
|
|
1202
|
+
--el-button-active-border-color: var(--el-color-primary-dark-2);
|
|
1203
|
+
}
|
|
1204
|
+
/* 默认按钮:iOS 浅灰底 + 无边框 + 近黑字(:not 排除语义色与 text/link 形态) */
|
|
1205
|
+
.el-button:not([class*='el-button--']):not(.is-text):not(.is-link) {
|
|
1206
|
+
--el-button-bg-color: #e8e8ed;
|
|
1207
|
+
--el-button-border-color: transparent;
|
|
1208
|
+
--el-button-text-color: #1d1d1f;
|
|
1209
|
+
--el-button-hover-bg-color: #dedee3;
|
|
1210
|
+
--el-button-hover-border-color: transparent;
|
|
1211
|
+
--el-button-hover-text-color: #1d1d1f;
|
|
1212
|
+
}
|
|
1213
|
+
/* 标签:胶囊徽章;primary 实心蓝白字(iOS 徽章惯例;success 等语义标签仅胶囊化) */
|
|
1214
|
+
.el-tag { border-radius: 999px; }
|
|
1215
|
+
.el-tag.el-tag--primary {
|
|
1216
|
+
--el-tag-bg-color: var(--el-color-primary);
|
|
1217
|
+
--el-tag-border-color: transparent;
|
|
1218
|
+
--el-tag-text-color: #fff;
|
|
1219
|
+
}
|
|
1220
|
+
/* info 标签:白底灰边中性胶囊 */
|
|
1221
|
+
.el-tag.el-tag--info {
|
|
1222
|
+
--el-tag-bg-color: #fff;
|
|
1223
|
+
--el-tag-border-color: var(--el-border-color);
|
|
1224
|
+
--el-tag-text-color: var(--el-text-color-regular);
|
|
1225
|
+
}
|
|
1226
|
+
/* 输入框聚焦:iOS 主色描边 + 同色光晕(color-mix 随主色覆盖联动;不支持时回落整组规则前的 EP 默认描边) */
|
|
1227
|
+
.el-input__wrapper.is-focus {
|
|
1228
|
+
box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 0 0 4px color-mix(in srgb, var(--el-color-primary) 12%, transparent);
|
|
1229
|
+
}
|
|
1230
|
+
/* 顶栏毛玻璃:macOS 标志特性(配合半透明 --wd-station-header-bg) */
|
|
1231
|
+
.wd-station__header {
|
|
1232
|
+
backdrop-filter: saturate(180%) blur(16px);
|
|
1233
|
+
-webkit-backdrop-filter: saturate(180%) blur(16px);
|
|
1234
|
+
}
|
|
1235
|
+
/* 侧栏菜单:iOS 蓝色实心选中态(蓝底白字加粗),hover 浅灰由 --el-menu-hover-bg-color 控制 */
|
|
1236
|
+
.wd-station__menu .el-menu-item,
|
|
1237
|
+
.wd-station__menu .el-sub-menu__title {
|
|
1238
|
+
margin: 2px 8px;
|
|
1239
|
+
border-radius: 8px;
|
|
1240
|
+
}
|
|
1241
|
+
.wd-station__menu .el-menu-item.is-active {
|
|
1242
|
+
background: var(--el-color-primary);
|
|
1243
|
+
color: #fff;
|
|
1244
|
+
font-weight: 600;
|
|
1245
|
+
}
|
|
1246
|
+
.wd-station__menu .el-menu-item.is-active:hover {
|
|
1247
|
+
background: var(--el-color-primary-dark-2);
|
|
1248
|
+
}
|
|
1249
|
+
`
|
|
1250
|
+
}, u = {
|
|
1251
|
+
default: v,
|
|
1252
|
+
fashion: _,
|
|
1253
|
+
business: k,
|
|
1254
|
+
tech: y,
|
|
1255
|
+
cyberpunk: S,
|
|
1256
|
+
chinese: T,
|
|
1257
|
+
flat: P,
|
|
1258
|
+
cool: V,
|
|
1259
|
+
governance: C,
|
|
1260
|
+
apple: M
|
|
1261
|
+
};
|
|
1262
|
+
function x(e) {
|
|
1263
|
+
if (e)
|
|
1264
|
+
return u[e];
|
|
1265
|
+
}
|
|
1266
|
+
function Y() {
|
|
1267
|
+
return Object.values(u);
|
|
1268
|
+
}
|
|
1269
|
+
let g = null;
|
|
1270
|
+
const E = {
|
|
1271
|
+
primary: { wd: "--wd-color-primary", el: "--el-color-primary" },
|
|
1272
|
+
success: { wd: "--wd-color-success", el: "--el-color-success" },
|
|
1273
|
+
warning: { wd: "--wd-color-warning", el: "--el-color-warning" },
|
|
1274
|
+
danger: { wd: "--wd-color-danger", el: "--el-color-danger" },
|
|
1275
|
+
error: { wd: "--wd-color-danger", el: "--el-color-danger" },
|
|
1276
|
+
info: { wd: "--wd-color-info", el: "--el-color-info" }
|
|
1277
|
+
}, z = ["primary", "success", "warning", "danger", "info"], O = [
|
|
1278
|
+
{ suffix: "light-3", target: [255, 255, 255], ratio: 0.3 },
|
|
1279
|
+
{ suffix: "light-5", target: [255, 255, 255], ratio: 0.5 },
|
|
1280
|
+
{ suffix: "light-7", target: [255, 255, 255], ratio: 0.7 },
|
|
1281
|
+
{ suffix: "light-8", target: [255, 255, 255], ratio: 0.8 },
|
|
1282
|
+
{ suffix: "light-9", target: [255, 255, 255], ratio: 0.9 },
|
|
1283
|
+
{ suffix: "dark-2", target: [0, 0, 0], ratio: 0.2 }
|
|
1284
|
+
];
|
|
1285
|
+
function X(e) {
|
|
1286
|
+
const r = /^#?([0-9a-f]{6})$/i.exec(e.trim());
|
|
1287
|
+
if (!r) return [22, 119, 255];
|
|
1288
|
+
const o = parseInt(r[1], 16);
|
|
1289
|
+
return [o >> 16 & 255, o >> 8 & 255, o & 255];
|
|
1290
|
+
}
|
|
1291
|
+
function $(e, r, o) {
|
|
1292
|
+
const [i, d, a] = X(e), n = (c, m) => Math.round(c + (m - c) * o), l = (c) => c.toString(16).padStart(2, "0");
|
|
1293
|
+
return `#${l(n(i, r[0]))}${l(n(d, r[1]))}${l(n(a, r[2]))}`;
|
|
1294
|
+
}
|
|
1295
|
+
function Q(e) {
|
|
1296
|
+
if (!e || !e.skin) return e;
|
|
1297
|
+
const r = x(e.skin);
|
|
1298
|
+
return r ? {
|
|
1299
|
+
colors: { ...r.theme.colors, ...e.colors },
|
|
1300
|
+
cssVars: { ...r.theme.cssVars, ...e.cssVars }
|
|
1301
|
+
} : (console.warn(`[WorkDesktop] 未知皮肤 "${e.skin}",已回退默认皮肤`), { colors: e.colors, cssVars: e.cssVars });
|
|
1302
|
+
}
|
|
1303
|
+
function w(e) {
|
|
1304
|
+
if (typeof document > "u") return;
|
|
1305
|
+
const r = Q(e);
|
|
1306
|
+
if (!r) return;
|
|
1307
|
+
g || (g = document.createElement("style"), g.setAttribute("data-workdesktop-theme", ""), document.head.appendChild(g));
|
|
1308
|
+
const o = [":root {"], i = {};
|
|
1309
|
+
if (r.colors)
|
|
1310
|
+
for (const [a, n] of Object.entries(r.colors)) {
|
|
1311
|
+
const l = E[a.toLowerCase()];
|
|
1312
|
+
if (l)
|
|
1313
|
+
o.push(` ${l.wd}: ${n};`), o.push(` ${l.el}: ${n};`), i[l.el.replace("--el-color-", "")] = n;
|
|
1314
|
+
else {
|
|
1315
|
+
const c = a.startsWith("--") ? a : `--wd-color-${a}`;
|
|
1316
|
+
o.push(` ${c}: ${n};`);
|
|
1317
|
+
}
|
|
1318
|
+
}
|
|
1319
|
+
for (const a of z) {
|
|
1320
|
+
const n = i[a];
|
|
1321
|
+
if (n)
|
|
1322
|
+
for (const l of O)
|
|
1323
|
+
o.push(` --el-color-${a}-${l.suffix}: ${$(n, l.target, l.ratio)};`);
|
|
1324
|
+
}
|
|
1325
|
+
if (r.cssVars)
|
|
1326
|
+
for (const [a, n] of Object.entries(r.cssVars)) {
|
|
1327
|
+
const l = a.startsWith("--") ? a : `--${a}`;
|
|
1328
|
+
o.push(` ${l}: ${n};`);
|
|
1329
|
+
}
|
|
1330
|
+
o.push("}");
|
|
1331
|
+
const d = e != null && e.skin ? x(e.skin) : void 0;
|
|
1332
|
+
d != null && d.cssRules && o.push(d.cssRules), g.textContent = o.join(`
|
|
1333
|
+
`);
|
|
1334
|
+
}
|
|
1335
|
+
let t = s(p);
|
|
1336
|
+
function R() {
|
|
1337
|
+
if (typeof window < "u" && window.workDesktopConfig)
|
|
1338
|
+
return window.workDesktopConfig;
|
|
1339
|
+
}
|
|
1340
|
+
function A(e) {
|
|
1341
|
+
return e && (t = s(t, e)), w(t.theme), t;
|
|
1342
|
+
}
|
|
1343
|
+
function W() {
|
|
1344
|
+
return t;
|
|
1345
|
+
}
|
|
1346
|
+
function D() {
|
|
1347
|
+
return t = s(p), w(t.theme), t;
|
|
1348
|
+
}
|
|
1349
|
+
function K(e) {
|
|
1350
|
+
return e ? s(t, e) : t;
|
|
1351
|
+
}
|
|
1352
|
+
function H(e) {
|
|
1353
|
+
var o;
|
|
1354
|
+
const r = ((o = t.page) == null ? void 0 : o.componentDefault) || {};
|
|
1355
|
+
return r[e] || r[N(e)] || {};
|
|
1356
|
+
}
|
|
1357
|
+
function N(e) {
|
|
1358
|
+
return e.replace(/(^|-|_)(\w)/g, (r, o, i) => i.toUpperCase()).replace(/^wd/i, "Wd");
|
|
1359
|
+
}
|
|
1360
|
+
function I(e) {
|
|
1361
|
+
t = s(p);
|
|
1362
|
+
const r = R();
|
|
1363
|
+
return t = r ? s(t, r, e || {}) : s(t, e || {}), w(t.theme), t;
|
|
1364
|
+
}
|
|
1365
|
+
export {
|
|
1366
|
+
u as S,
|
|
1367
|
+
W as a,
|
|
1368
|
+
x as b,
|
|
1369
|
+
j as c,
|
|
1370
|
+
s as d,
|
|
1371
|
+
H as g,
|
|
1372
|
+
I as i,
|
|
1373
|
+
Y as l,
|
|
1374
|
+
K as m,
|
|
1375
|
+
D as r,
|
|
1376
|
+
A as s
|
|
1377
|
+
};
|
|
1378
|
+
//# sourceMappingURL=config-CDqjABpD.mjs.map
|