Skip to content

Commit 8507b80

Browse files
ZhaoJiSenZhaoJiSen
committed
style(layout): overall style adjustments
1 parent f7f8582 commit 8507b80

File tree

21 files changed

+352
-234
lines changed

21 files changed

+352
-234
lines changed

‎.stylelintrc.cjs

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
module.exports = {
44
root: true,
55
// 继承某些已有的规则
6+
plugins: ['stylelint-order'],
67
extends: [
78
"stylelint-config-standard", // 配置 stylelint 拓展插件
89
"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
@@ -26,7 +27,6 @@ module.exports = {
2627
rules: {
2728
"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
2829
"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
29-
"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
3030
"font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
3131
"scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
3232
"property-no-unknown": null, // 禁止未知的属性
@@ -52,6 +52,20 @@ module.exports = {
5252
{
5353
ignoreAtRules: ["tailwind", "apply", "variants", "responsive", "screen"]
5454
}
55+
],
56+
"order/order": [
57+
"custom-properties",
58+
"dollar-variables",
59+
"at-rules",
60+
"declarations",
61+
"rules"
62+
],
63+
// 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
64+
"rule-empty-line-before": [
65+
"always", {
66+
"except": ["first-nested"],
67+
"ignore": ["after-comment"]
68+
}
5569
]
5670
},
5771
ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.html"]

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"stylelint-config-standard": "^36.0.0",
6464
"stylelint-config-standard-scss": "^13.0.0",
6565
"stylelint-config-tailwindcss": "^0.0.7",
66+
"stylelint-order": "^6.0.4",
6667
"tailwindcss": "^3.4.6",
6768
"typescript": "^5.5.3",
6869
"typescript-eslint": "^7.15.0",

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ThemeOverrides.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ export const initialThemeOverrides = (): GlobalThemeOverrides => ({
1313
InternalSelectMenu: {},
1414
Layout: {},
1515
Collapse: {},
16-
Tree: {}
16+
Tree: {},
17+
Drawer: {}
1718
});

‎src/components/ConnectionDialog/index.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@ const handleConnect = async () => {
289289
.n-form-item-label {
290290
margin-bottom: 25px;
291291
}
292+
292293
.n-form-item-blank,
293294
.n-form-item-feedback-wrapper {
294295
display: none !important;
@@ -301,6 +302,7 @@ const handleConnect = async () => {
301302
display: none;
302303
}
303304
}
305+
304306
.remember-password,
305307
.advanced_option {
306308
display: flex;

‎src/hooks/helper/index.ts

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import { GlobalThemeOverrides } from 'naive-ui';
2+
import { initialThemeOverrides } from '@/ThemeOverrides.ts';
3+
4+
/**
5+
* @description 获取 HTML 标签中设定的色值
6+
* @param {string} variableName
7+
*/
8+
const getCssVariableValue = (variableName: string) => {
9+
return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
10+
};
11+
12+
/**
13+
* @description 亮色主题下颜色的重设
14+
*/
15+
export const lightOverrides = () => {
16+
const lightOverrides: GlobalThemeOverrides = initialThemeOverrides();
17+
18+
// Spin 相关
19+
(lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
20+
'--el-color-primary-light-1'
21+
);
22+
(lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
23+
getCssVariableValue('--el-main-text-color');
24+
25+
// List 相关
26+
(lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
27+
(lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
28+
getCssVariableValue('--el-main-bg-color');
29+
(lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
30+
getCssVariableValue('--el-main-text-color');
31+
32+
// Tag 相关
33+
(lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
34+
'--el-color-primary-light-1'
35+
);
36+
(lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
37+
getCssVariableValue('--el-color-primary-light-9');
38+
39+
// Switch 相关
40+
(lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
41+
getCssVariableValue('--el-color-primary-light-1');
42+
(lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
43+
getCssVariableValue('--el-color-primary-light-5');
44+
45+
// Dropdown 相关
46+
(lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
47+
getCssVariableValue('--el-color-primary-light-2');
48+
(lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
49+
'#fff';
50+
51+
// Select 相关
52+
(
53+
lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
54+
).borderFocus = getCssVariableValue('--el-color-primary-light-6');
55+
(
56+
lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
57+
).borderActive = getCssVariableValue('--el-color-primary-light-6');
58+
(
59+
lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
60+
).borderHover = getCssVariableValue('--el-color-primary-light-6');
61+
(
62+
lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
63+
).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
64+
(
65+
lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
66+
).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
67+
68+
(
69+
lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
70+
).optionCheckColor = '#fff';
71+
(
72+
lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
73+
).optionTextColorActive = '#fff';
74+
(
75+
lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
76+
).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
77+
(
78+
lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
79+
).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
80+
81+
// 折叠面板
82+
(lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
83+
getCssVariableValue('--el-aside-tree-item-title-color');
84+
(lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
85+
(lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
86+
'700';
87+
(lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
88+
getCssVariableValue('--el-aside-tree-item-arrow-color');
89+
(lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
90+
getCssVariableValue('--el-aside-tree-divider-color');
91+
92+
// Tree
93+
(lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
94+
(lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
95+
getCssVariableValue('--el-aside-tree-item-title-color');
96+
97+
// 抽屉
98+
(lightOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
99+
getCssVariableValue('--el-drawer-bg-color');
100+
101+
return lightOverrides;
102+
};
103+
104+
/**
105+
* @description 暗色模式下的颜色重设
106+
*/
107+
export const darkOverrides = () => {
108+
const darkOverrides: GlobalThemeOverrides = initialThemeOverrides();
109+
110+
(darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
111+
'--el-color-primary-light-1'
112+
);
113+
(darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
114+
getCssVariableValue('--el-main-text-color');
115+
116+
// List 相关
117+
(darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
118+
(darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
119+
getCssVariableValue('--el-main-bg-color');
120+
(darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
121+
getCssVariableValue('--el-main-text-color');
122+
123+
// Tag 相关
124+
(darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
125+
'--el-color-primary-light-1'
126+
);
127+
(darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
128+
getCssVariableValue('--el-color-primary-light-9');
129+
130+
// Switch 相关
131+
(darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
132+
getCssVariableValue('--el-color-primary-light-1');
133+
(darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
134+
getCssVariableValue('--el-color-primary-light-5');
135+
136+
// Dropdown 相关
137+
(darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
138+
getCssVariableValue('--el-color-primary-light-2');
139+
(darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
140+
'#fff';
141+
142+
// Select 相关
143+
(
144+
darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
145+
).borderFocus = getCssVariableValue('--el-color-primary-light-6');
146+
(
147+
darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
148+
).borderActive = getCssVariableValue('--el-color-primary-light-6');
149+
(
150+
darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
151+
).borderHover = getCssVariableValue('--el-color-primary-light-6');
152+
(
153+
darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
154+
).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
155+
(
156+
darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
157+
).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
158+
159+
(
160+
darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
161+
).optionCheckColor = '#fff';
162+
(
163+
darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
164+
).optionTextColorActive = '#fff';
165+
(
166+
darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
167+
).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
168+
(
169+
darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
170+
).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
171+
172+
// 折叠面板
173+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
174+
getCssVariableValue('--el-aside-tree-item-title-color');
175+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
176+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight = '700';
177+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
178+
getCssVariableValue('--el-aside-tree-item-arrow-color');
179+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
180+
getCssVariableValue('--el-aside-tree-divider-color');
181+
182+
// Tree
183+
(darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
184+
(darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
185+
getCssVariableValue('--el-aside-tree-item-title-color');
186+
187+
// 抽屉
188+
(darkOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
189+
getCssVariableValue('--el-drawer-bg-color');
190+
191+
return darkOverrides;
192+
};

0 commit comments

Comments
 (0)