style(layout): overall style adjustments

jumpserver · Jul 23, 2024 · 8507b80 · 8507b80
1 parent f7f8582
commit 8507b80
Show file tree

Hide file tree

Showing 21 changed files with 352 additions and 234 deletions.
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -3,6 +3,7 @@
 module.exports = {
 	root: true,
 	// 继承某些已有的规则
+	plugins: ['stylelint-order'],
 	extends: [
 		"stylelint-config-standard", // 配置 stylelint 拓展插件
 		"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
@@ -26,7 +27,6 @@ module.exports = {
 	rules: {
 		"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
 		"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
-		"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
 		"font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
 		"scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
 		"property-no-unknown": null, // 禁止未知的属性
@@ -52,6 +52,20 @@ module.exports = {
 			{
 				ignoreAtRules: ["tailwind", "apply", "variants", "responsive", "screen"]
 			}
+		],
+		"order/order": [
+			"custom-properties",
+			"dollar-variables",
+			"at-rules",
+			"declarations",
+			"rules"
+		],
+		// 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
+		"rule-empty-line-before": [
+			"always", {
+				"except": ["first-nested"],
+				"ignore": ["after-comment"]
+			}
 		]
 	},
 	ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.html"]

diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-config-tailwindcss": "^0.0.7",
+    "stylelint-order": "^6.0.4",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.15.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/ThemeOverrides.ts b/src/ThemeOverrides.ts
@@ -13,5 +13,6 @@ export const initialThemeOverrides = (): GlobalThemeOverrides => ({
   InternalSelectMenu: {},
   Layout: {},
   Collapse: {},
-  Tree: {}
+  Tree: {},
+  Drawer: {}
 });
diff --git a/src/components/ConnectionDialog/index.vue b/src/components/ConnectionDialog/index.vue
@@ -289,6 +289,7 @@ const handleConnect = async () => {
   .n-form-item-label {
     margin-bottom: 25px;
   }
+
   .n-form-item-blank,
   .n-form-item-feedback-wrapper {
     display: none !important;
@@ -301,6 +302,7 @@ const handleConnect = async () => {
     display: none;
   }
 }
+
 .remember-password,
 .advanced_option {
   display: flex;

diff --git a/src/hooks/helper/index.ts b/src/hooks/helper/index.ts
@@ -0,0 +1,192 @@
+import { GlobalThemeOverrides } from 'naive-ui';
+import { initialThemeOverrides } from '@/ThemeOverrides.ts';
+
+/**
+ * @description 获取 HTML 标签中设定的色值
+ * @param {string} variableName
+ */
+const getCssVariableValue = (variableName: string) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+};
+
+/**
+ * @description 亮色主题下颜色的重设
+ */
+export const lightOverrides = () => {
+  const lightOverrides: GlobalThemeOverrides = initialThemeOverrides();
+
+  // Spin 相关
+  (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // List 相关
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
+    getCssVariableValue('--el-main-bg-color');
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // Tag 相关
+  (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
+    getCssVariableValue('--el-color-primary-light-9');
+
+  // Switch 相关
+  (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
+    getCssVariableValue('--el-color-primary-light-1');
+  (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
+    getCssVariableValue('--el-color-primary-light-5');
+
+  // Dropdown 相关
+  (lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
+    getCssVariableValue('--el-color-primary-light-2');
+  (lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
+    '#fff';
+
+  // Select 相关
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderActive = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderHover = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
+
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionCheckColor = '#fff';
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionTextColorActive = '#fff';
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
+
+  // 折叠面板
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
+    '700';
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
+    getCssVariableValue('--el-aside-tree-item-arrow-color');
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
+    getCssVariableValue('--el-aside-tree-divider-color');
+
+  // Tree
+  (lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
+  (lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+
+  // 抽屉
+  (lightOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
+    getCssVariableValue('--el-drawer-bg-color');
+
+  return lightOverrides;
+};
+
+/**
+ * @description 暗色模式下的颜色重设
+ */
+export const darkOverrides = () => {
+  const darkOverrides: GlobalThemeOverrides = initialThemeOverrides();
+
+  (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // List 相关
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
+    getCssVariableValue('--el-main-bg-color');
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // Tag 相关
+  (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
+    getCssVariableValue('--el-color-primary-light-9');
+
+  // Switch 相关
+  (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
+    getCssVariableValue('--el-color-primary-light-1');
+  (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
+    getCssVariableValue('--el-color-primary-light-5');
+
+  // Dropdown 相关
+  (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
+    getCssVariableValue('--el-color-primary-light-2');
+  (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
+    '#fff';
+
+  // Select 相关
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderActive = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderHover = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
+
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionCheckColor = '#fff';
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionTextColorActive = '#fff';
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
+
+  // 折叠面板
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight = '700';
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
+    getCssVariableValue('--el-aside-tree-item-arrow-color');
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
+    getCssVariableValue('--el-aside-tree-divider-color');
+
+  // Tree
+  (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
+  (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+
+  // 抽屉
+  (darkOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
+    getCssVariableValue('--el-drawer-bg-color');
+
+  return darkOverrides;
+};