chore(config): 配置 antdv css 变量

package.json

@@ -19,8 +19,10 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@vueuse/core": "^12.5.0",
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
     "vue-i18n": "^11.0.1",
@@ -33,6 +35,7 @@
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@tsconfig/node22": "^22.0.0",
     "@types/jsdom": "^21.1.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.2",
     "@unocss/eslint-config": "^0.65.4",
     "@vitejs/plugin-vue": "^5.2.1",

pnpm-lock.yaml

@@ -8,12 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@vueuse/core':
+        specifier: ^12.5.0
+        version: 12.5.0(typescript@5.6.3)
       ant-design-vue:
         specifier: ^4.2.6
         version: 4.2.6(vue@3.5.13(typescript@5.6.3))
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
       pinia:
         specifier: ^2.3.0
         version: 2.3.0(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
@@ -45,6 +51,9 @@ importers:
       '@types/jsdom':
         specifier: ^21.1.7
         version: 21.1.7
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/node':
         specifier: ^22.10.2
         version: 22.10.4
@@ -143,7 +152,7 @@ importers:
         version: 0.65.4(postcss@8.4.49)(rollup@4.29.1)(vite@6.0.7(@types/node@22.10.4)(jiti@2.4.2)(sass@1.83.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.6.3))
       unplugin-auto-import:
         specifier: ^19.0.0
-        version: 19.0.0(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.6.3)))(rollup@4.29.1)
+        version: 19.0.0(@vueuse/core@12.5.0(typescript@5.6.3))(rollup@4.29.1)
       unplugin-vue-components:
         specifier: ^28.0.0
         version: 28.0.0(@babel/parser@7.26.3)(rollup@4.29.1)(vue@3.5.13(typescript@5.6.3))
@@ -1297,6 +1306,12 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.15':
+    resolution: {integrity: sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==}
+
   '@types/node@22.10.4':
     resolution: {integrity: sha512-99l6wv4HEzBQhvaU/UGoeBoCK61SCROQaCCGyQSgX2tEQ3rKkNZ2S7CEWnS/4s1LV+8ODdK21UeyR1fHP2mXug==}
 
@@ -1309,8 +1324,8 @@ packages:
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
-  '@types/web-bluetooth@0.0.16':
-    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
@@ -1616,14 +1631,14 @@ packages:
       vue:
         optional: true
 
-  '@vueuse/core@9.13.0':
-    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+  '@vueuse/core@12.5.0':
+    resolution: {integrity: sha512-GVyH1iYqNANwcahAx8JBm6awaNgvR/SwZ1fjr10b8l1HIgDp82ngNbfzJUgOgWEoxjL+URAggnlilAEXwCOZtg==}
 
-  '@vueuse/metadata@9.13.0':
-    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+  '@vueuse/metadata@12.5.0':
+    resolution: {integrity: sha512-Ui7Lo2a7AxrMAXRF+fAp9QsXuwTeeZ8fIB9wsLHqzq9MQk+2gMYE2IGJW48VMJ8ecvCB3z3GsGLKLbSasQ5Qlg==}
 
-  '@vueuse/shared@9.13.0':
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+  '@vueuse/shared@12.5.0':
+    resolution: {integrity: sha512-vMpcL1lStUU6O+kdj6YdHDixh0odjPAUM15uJ9f7MY781jcYkIwFA4iv2EfoIPO6vBmvutI1HxxAwmf0cx5ISQ==}
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
@@ -5741,6 +5756,12 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.15
+
+  '@types/lodash@4.17.15': {}
+
   '@types/node@22.10.4':
     dependencies:
       undici-types: 6.20.0
@@ -5751,8 +5772,7 @@ snapshots:
 
   '@types/tough-cookie@4.0.5': {}
 
-  '@types/web-bluetooth@0.0.16':
-    optional: true
+  '@types/web-bluetooth@0.0.20': {}
 
   '@types/yauzl@2.10.3':
     dependencies:
@@ -6244,27 +6264,22 @@ snapshots:
       typescript: 5.6.3
       vue: 3.5.13(typescript@5.6.3)
 
-  '@vueuse/core@9.13.0(vue@3.5.13(typescript@5.6.3))':
+  '@vueuse/core@12.5.0(typescript@5.6.3)':
     dependencies:
-      '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.5.13(typescript@5.6.3))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.5.0
+      '@vueuse/shared': 12.5.0(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    optional: true
+      - typescript
 
-  '@vueuse/metadata@9.13.0':
-    optional: true
+  '@vueuse/metadata@12.5.0': {}
 
-  '@vueuse/shared@9.13.0(vue@3.5.13(typescript@5.6.3))':
+  '@vueuse/shared@12.5.0(typescript@5.6.3)':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    optional: true
+      - typescript
 
   JSONStream@1.3.5:
     dependencies:
@@ -9322,7 +9337,7 @@ snapshots:
       - supports-color
       - vue
 
-  unplugin-auto-import@19.0.0(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.6.3)))(rollup@4.29.1):
+  unplugin-auto-import@19.0.0(@vueuse/core@12.5.0(typescript@5.6.3))(rollup@4.29.1):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.29.1)
@@ -9332,7 +9347,7 @@ snapshots:
       unimport: 3.14.5(rollup@4.29.1)
       unplugin: 2.1.2
     optionalDependencies:
-      '@vueuse/core': 9.13.0(vue@3.5.13(typescript@5.6.3))
+      '@vueuse/core': 12.5.0(typescript@5.6.3)
     transitivePeerDependencies:
       - rollup
 

src/components/AntdConfig.vue

@@ -1,30 +1,42 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useStyleTag } from '@vueuse/core';
+import { theme } from 'ant-design-vue';
 import enUS from 'ant-design-vue/es/locale/en_US';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 
+import { generateThemeCSSVar } from '@/utils';
 import { LanguageType } from '@/constants';
 
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 
 import 'dayjs/locale/zh-cn';
 
-const { locale: language } = useI18n();
+const themeConfig = computed<ThemeConfig>(() => {
+  return {
+    token: {
+      colorPrimary: '#32BAC0',
+    },
+  };
+});
 
-const theme: ThemeConfig = {
-  token: {
-    colorPrimary: '#32BAC0',
-  },
-};
+const { locale: language } = useI18n();
 
 const locale = computed(() => {
   return language.value === LanguageType.ZH ? zhCN : enUS;
 });
+
+const { css } = useStyleTag('');
+const { token } = theme.useToken();
+
+watch(token, () => {
+  css.value = generateThemeCSSVar(token.value, 'antd');
+});
 </script>
 
 <template>
-  <AConfigProvider :theme="theme" :locale="locale">
+  <AConfigProvider :theme="themeConfig" :locale="locale">
     <slot></slot>
   </AConfigProvider>
 </template>

src/styles/antd-vars-tip.scss

@@ -0,0 +1,202 @@
+/* stylelint-disable number-max-precision */
+// 此处定义了根据 Antd 默认主题生成的 css 变量，仅在样式代码中起提示作用，不需要引入（实际上在 AntdConfig.vue 中动态生成）
+:root {
+  // 主色和辅色
+  --antd-color-primary: #32bac0;
+  --antd-color-success: #52c41a;
+  --antd-color-warning: #faad14;
+  --antd-color-error: #ff4d4f;
+  --antd-color-info: #1677ff;
+
+  // 背景
+  --antd-color-bg-base: #fff;
+  --antd-color-bg-layout: #f5f5f5;
+  --antd-color-bg-container: #fff;
+  --antd-color-bg-elevated: #fff;
+  --antd-color-bg-spotlight: rgb(0 0 0 / 85%);
+  --antd-color-bg-mask: rgb(0 0 0 / 45%);
+  --antd-color-bg-container-disabled: rgb(0 0 0 / 4%);
+  --antd-color-bg-text-hover: rgb(0 0 0 / 6%);
+  --antd-color-bg-text-active: rgb(0 0 0 / 15%);
+
+  // 文本
+  --antd-color-text-base: #000;
+  --antd-color-text: rgb(0 0 0 / 88%);
+  --antd-color-text-secondary: rgb(0 0 0 / 65%);
+  --antd-color-text-tertiary: rgb(0 0 0 / 45%);
+  --antd-color-text-quaternary: rgb(0 0 0 / 25%);
+  --antd-color-text-placeholder: rgb(0 0 0 / 25%);
+  --antd-color-text-disabled: rgb(0 0 0 / 25%);
+  --antd-color-text-heading: rgb(0 0 0 / 88%);
+  --antd-color-text-label: rgb(0 0 0 / 65%);
+  --antd-color-text-description: rgb(0 0 0 / 45%);
+  --antd-color-text-light-solid: #fff;
+
+  // 填充
+  --antd-color-fill: rgb(0 0 0 / 15%);
+  --antd-color-fill-secondary: rgb(0 0 0 / 6%);
+  --antd-color-fill-tertiary: rgb(0 0 0 / 4%);
+  --antd-color-fill-quaternary: rgb(0 0 0 / 2%);
+  --antd-color-fill-alter: rgb(0 0 0 / 2%);
+  --antd-color-fill-content: rgb(0 0 0 / 6%);
+  --antd-color-fill-content-hover: rgb(0 0 0 / 15%);
+
+  // 边框
+  --antd-color-border: #d9d9d9;
+  --antd-color-border-secondary: #f0f0f0;
+  --antd-color-border-bg: #fff;
+
+  // 主色
+  --antd-color-primary-bg: #f0fffd;
+  --antd-color-primary-bg-hover: #daf2f0;
+  --antd-color-primary-border: #aae6e3;
+  --antd-color-primary-border-hover: #7ed9d7;
+  --antd-color-primary-hover: #56cacc;
+  --antd-color-primary-active: #208f99;
+  --antd-color-primary-text-hover: #56cacc;
+  --antd-color-primary-text: #32bac0;
+  --antd-color-primary-text-active: #208f99;
+
+  // 成功
+  --antd-color-success-bg: #f6ffed;
+  --antd-color-success-bg-hover: #d9f7be;
+  --antd-color-success-border: #b7eb8f;
+  --antd-color-success-border-hover: #95de64;
+  --antd-color-success-hover: #95de64;
+  --antd-color-success-active: #389e0d;
+  --antd-color-success-text-hover: #73d13d;
+  --antd-color-success-text: #52c41a;
+  --antd-color-success-text-active: #389e0d;
+
+  // 错误
+  --antd-color-error-bg: #fff2f0;
+  --antd-color-error-bg-hover: #fff1f0;
+  --antd-color-error-border: #ffccc7;
+  --antd-color-error-border-hover: #ffa39e;
+  --antd-color-error-hover: #ff7875;
+  --antd-color-error-active: #d9363e;
+  --antd-color-error-text-hover: #ff7875;
+  --antd-color-error-text: #ff4d4f;
+  --antd-color-error-text-active: #d9363e;
+
+  // 警戒
+  --antd-color-warning-bg: #fffbe6;
+  --antd-color-warning-bg-hover: #fff1b8;
+  --antd-color-warning-border: #ffe58f;
+  --antd-color-warning-border-hover: #ffd666;
+  --antd-color-warning-hover: #ffd666;
+  --antd-color-warning-active: #d48806;
+  --antd-color-warning-text-hover: #ffc53d;
+  --antd-color-warning-text: #faad14;
+  --antd-color-warning-text-active: #d48806;
+
+  // 信息
+  --antd-color-info-bg: #e6f4ff;
+  --antd-color-info-bg-hover: #bae0ff;
+  --antd-color-info-border: #91caff;
+  --antd-color-info-border-hover: #69b1ff;
+  --antd-color-info-hover: #69b1ff;
+  --antd-color-info-active: #0958d9;
+  --antd-color-info-text-hover: #4096ff;
+  --antd-color-info-text: #1677ff;
+  --antd-color-info-text-active: #0958d9;
+
+  // 其他
+  --antd-color-white: #fff;
+  --antd-color-split: rgb(5 5 5 / 6%);
+  --antd-color-highlight: #ff4d4f;
+  --antd-color-icon: rgb(0 0 0 / 45%);
+  --antd-color-icon-hover: rgb(0 0 0 / 88%);
+  --antd-color-error-outline: rgb(255 38 5 / 6%);
+  --antd-color-warning-outline: rgb(255 215 5 / 10%);
+  --antd-color-link: #1677ff;
+  --antd-color-link-hover: #69b1ff;
+  --antd-color-link-active: #0958d9;
+  --antd-link-decoration: none;
+  --antd-link-hover-decoration: none;
+  --antd-link-focus-decoration: none;
+
+  // 线宽
+  --antd-line-type: solid;
+  --antd-line-width: 1px;
+  --antd-line-width-bold: 2px;
+
+  // 行高
+  --antd-line-height: 1.5714285714285714;
+  --antd-line-height-lg: 1.5;
+  --antd-line-height-sm: 1.6666666666666667;
+  --antd-line-height-heading-1: 1.2105263157894737;
+  --antd-line-height-heading-2: 1.2666666666666666;
+  --antd-line-height-heading-3: 1.3333333333333333;
+  --antd-line-height-heading-4: 1.4;
+  --antd-line-height-heading-5: 1.5;
+
+  // 圆角
+  --antd-border-radius-xs: 2px;
+  --antd-border-radius-sm: 4px;
+  --antd-border-radius-outer: 4px;
+  --antd-border-radius: 6px;
+  --antd-border-radius-lg: 8px;
+
+  // 字体
+  --antd-font-size-sm: 12px;
+  --antd-font-size: 14px;
+  --antd-font-size-lg: 16px;
+  --antd-font-size-xl: 20px;
+  --antd-font-size-heading-1: 38px;
+  --antd-font-size-heading-2: 30px;
+  --antd-font-size-heading-3: 24px;
+  --antd-font-size-heading-4: 20px;
+  --antd-font-size-heading-5: 16px;
+  --antd-font-size-icon: 12px;
+  --antd-font-weight-strong: 600;
+
+  // 内边距
+  --antd-padding-xxs: 4px;
+  --antd-padding-xs: 8px;
+  --antd-padding-sm: 12px;
+  --antd-padding: 16px;
+  --antd-padding-md: 20px;
+  --antd-padding-lg: 24px;
+  --antd-padding-xl: 32px;
+
+  // 外边距
+  --antd-margin-xxs: 4px;
+  --antd-margin-xs: 8px;
+  --antd-margin-sm: 12px;
+  --antd-margin: 16px;
+  --antd-margin-md: 20px;
+  --antd-margin-lg: 24px;
+  --antd-margin-xl: 32px;
+  --antd-margin-xxl: 48px;
+
+  // 屏幕
+  --antd-screen-xs: 480px;
+  --antd-screen-sm: 576px;
+  --antd-screen-md: 768px;
+  --antd-screen-lg: 992px;
+  --antd-screen-xl: 1200px;
+  --antd-screen-xxl: 1600px;
+  --antd-screen-xxxl: 2000px;
+
+  // 动画
+  --antd-motion-unit: 0.1;
+  --antd-motion-base: 0;
+  --antd-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --antd-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  --antd-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --antd-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --antd-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --antd-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --antd-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --antd-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --antd-motion-duration-fast: 0.1s;
+  --antd-motion-duration-mid: 0.2s;
+  --antd-motion-duration-slow: 0.3s;
+
+  // 阴影
+  --antd-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px 0 rgb(0 0 0 / 2%);
+  --antd-box-shadow-secondary: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
+    0 9px 28px 8px rgb(0 0 0 / 5%);
+  --antd-box-shadow-tertiary: 0 1px 2px 0 rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px 0 rgb(0 0 0 / 2%);
+}

src/utils/index.ts

@@ -0,0 +1,20 @@
+import { kebabCase } from 'lodash-es';
+
+import type { GlobalToken } from 'ant-design-vue/es/theme';
+
+/**
+ * 根据 Antd 当前主题的 token 生成 css var
+ */
+export const generateThemeCSSVar = (token: GlobalToken, prefix: string): string => {
+  const cssVar = Object.entries(token)
+    .filter(([key]) => {
+      return /^(color|line|link|motion|border|margin|font(?!fam)|padding(?!con)|screen((?!min|max).)*$|boxShadow(?!pop|dra|tab|car))/i.test(
+        key,
+      );
+    })
+    .map(([key, value]) => {
+      return `--${prefix}-${kebabCase(key)}:${value}${/(size|width|radius|margin|screen|padding)/gi.test(key) ? 'px' : ''}`;
+    });
+
+  return `:root{${cssVar.join(';')}}`;
+};