├── server
    └── tsconfig.json
├── public
    ├── favicon.ico
    └── styles
    │   ├── tdesign-theme-default.css
    │   └── tdesign-theme-test.css
├── tsconfig.json
├── .npmrc
├── app
    ├── layouts
    │   └── default.vue
    ├── app.vue
    ├── types
    │   ├── components.d.ts
    │   └── auto-imports.d.ts
    ├── hooks
    │   └── useTheme.ts
    ├── tailwind.config.js
    └── pages
    │   └── index.vue
├── prettier.config.cjs
├── .gitignore
├── eslint.config.mjs
├── package.json
├── nuxt.config.ts
├── README.md
└── .vscode
    └── settings.json


/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnotiaWang/tdesign-vue-nuxt-starter/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # 由于使用了 @nuxtjs/tailwindcss，tailwindcss 不是直接依赖，
2 | # 需要将依赖平铺在 node_modules 中，否则 VS Code 插件不会启用语法支持
3 | shamefully-hoist=true
4 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div
3 |     class="w-screen h-screen bg-white dark:bg-black dark:text-white transition-all"
4 |   >
5 |     <slot />
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   semi: false,
 3 |   vueIndentScriptAndStyle: true,
 4 |   singleQuote: true,
 5 |   trailingComma: 'all',
 6 |   proseWrap: 'never',
 7 |   htmlWhitespaceSensitivity: 'strict',
 8 |   endOfLine: 'auto',
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | dist
 7 | 
 8 | # Node dependencies
 9 | node_modules
10 | 
11 | # Logs
12 | logs
13 | *.log
14 | 
15 | # Misc
16 | .DS_Store
17 | .fleet
18 | .idea
19 | 
20 | # Local env files
21 | .env
22 | .env.*
23 | !.env.example
24 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import withNuxt from './.nuxt/eslint.config.mjs'
3 | // @ts-ignore
4 | import configPrettier from 'eslint-config-prettier'
5 | import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
6 | 
7 | export default withNuxt(pluginPrettierRecommended, configPrettier)
8 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NuxtLayout>
 3 |     <NuxtPage />
 4 |   </NuxtLayout>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 |   const colorMode = useColorMode()
 9 | 
10 |   onMounted(() => {
11 |     watchEffect(() => {
12 |       if (colorMode.value === 'dark') {
13 |         document.documentElement.setAttribute('theme-mode', 'dark')
14 |       } else {
15 |         document.documentElement.removeAttribute('theme-mode')
16 |       }
17 |     })
18 |   })
19 | </script>
20 | 


--------------------------------------------------------------------------------
/app/types/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // @ts-nocheck
 3 | // Generated by unplugin-vue-components
 4 | // Read more: https://github.com/vuejs/core/pull/3399
 5 | // biome-ignore lint: disable
 6 | export {}
 7 | 
 8 | /* prettier-ignore */
 9 | declare module 'vue' {
10 |   export interface GlobalComponents {
11 |     RouterLink: typeof import('vue-router')['RouterLink']
12 |     RouterView: typeof import('vue-router')['RouterView']
13 |     TAlert: typeof import('tdesign-vue-next')['Alert']
14 |     TButton: typeof import('tdesign-vue-next')['Button']
15 |     TIcon: typeof import('tdesign-vue-next')['Icon']
16 |     TSwitch: typeof import('tdesign-vue-next')['Switch']
17 |     TTagInput: typeof import('tdesign-vue-next')['TagInput']
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tdesign-vue-nuxt-starter",
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare",
 9 |     "lint": "eslint .",
10 |     "lint:fix": "eslint . --fix"
11 |   },
12 |   "devDependencies": {
13 |     "@tdesign-vue-next/nuxt": "^0.1.5",
14 |     "@types/node": "^22.13.16",
15 |     "eslint": "^9.23.0",
16 |     "eslint-config-prettier": "^10.1.1",
17 |     "eslint-plugin-prettier": "^5.2.5"
18 |   },
19 |   "dependencies": {
20 |     "@nuxt/devtools": "2.3.2",
21 |     "@nuxt/eslint": "1.3.0",
22 |     "@nuxtjs/color-mode": "^3.5.2",
23 |     "@nuxtjs/robots": "^5.2.8",
24 |     "@nuxtjs/sitemap": "7.2.9",
25 |     "@nuxtjs/tailwindcss": "^6.13.2",
26 |     "@pinia/nuxt": "^0.10.1",
27 |     "nuxt": "^3.16.2",
28 |     "tdesign-vue-next": "^1.11.5",
29 |     "unplugin-auto-import": "^19.1.2",
30 |     "unplugin-vue-components": "^28.4.1"
31 |   }
32 | }


--------------------------------------------------------------------------------
/app/hooks/useTheme.ts:
--------------------------------------------------------------------------------
 1 | type Theme = 'default' | 'test'
 2 | 
 3 | const themeStorageKey = 'tdesign-vue-next-theme'
 4 | 
 5 | export const useThemeStore = defineStore('theme', () => {
 6 |   const theme = ref<Theme>('default')
 7 | 
 8 |   const setTheme = (_theme: Theme) => {
 9 |     theme.value = _theme
10 |   }
11 | 
12 |   onMounted(() => {
13 |     const storageValue = localStorage.getItem(themeStorageKey)
14 | 
15 |     if (storageValue) theme.value = storageValue as Theme
16 |     const styleElement = document.createElement('link')
17 | 
18 |     watch(theme, () => {
19 |       localStorage.setItem(themeStorageKey, theme.value)
20 |       styleElement.type = 'text/css'
21 |       styleElement.rel = 'stylesheet'
22 |       styleElement.href = `/styles/tdesign-theme-${theme.value}.css?t=${Date.now()}`
23 |       if (styleElement.parentElement === document.head) {
24 |         document.head.removeChild(styleElement)
25 |       }
26 |       document.head.appendChild(styleElement)
27 |     })
28 |   })
29 | 
30 |   return { theme, setTheme }
31 | })
32 | 


--------------------------------------------------------------------------------
/app/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | // tailwind config file
 2 | import plugin from 'tailwindcss/plugin'
 3 | 
 4 | export default {
 5 |   mode: 'jit',
 6 |   darkMode: 'class',
 7 |   theme: {
 8 |     extend: {
 9 |       colors: {},
10 |       letterSpacing: {
11 |         doublewidest: '.2em',
12 |       },
13 |     },
14 |     screens: {
15 |       sm: '640px',
16 |       md: '768px',
17 |       lg: '1024px',
18 |       xl: '1280px',
19 |       '2xl': '1536px',
20 |     },
21 |   },
22 |   plugins: [
23 |     plugin(function ({ addUtilities }) {
24 |       addUtilities({
25 |         '.scrollbar-hide': {
26 |           /* IE and Edge */
27 |           '-ms-overflow-style': 'none',
28 | 
29 |           /* Firefox */
30 |           'scrollbar-width': 'none',
31 | 
32 |           /* Safari and Chrome */
33 |           '&::-webkit-scrollbar': {
34 |             display: 'none',
35 |           },
36 |         },
37 |       })
38 |     }),
39 |   ],
40 |   content: [
41 |     './app.vue',
42 |     './components/**/*.{vue,js,ts}',
43 |     './layouts/**/*.vue',
44 |     './pages/**/*.vue',
45 |   ],
46 | }
47 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import Components from 'unplugin-vue-components/vite'
 2 | import AutoImport from 'unplugin-auto-import/vite'
 3 | 
 4 | // https://nuxt.com/docs/api/configuration/nuxt-config
 5 | export default defineNuxtConfig({
 6 |   devtools: { enabled: true },
 7 | 
 8 |   modules: [
 9 |     '@pinia/nuxt',
10 |     '@nuxtjs/robots',
11 |     '@nuxtjs/tailwindcss',
12 |     '@nuxtjs/color-mode',
13 |     '@nuxtjs/sitemap',
14 |     '@nuxt/eslint',
15 |     '@tdesign-vue-next/nuxt',
16 |   ],
17 | 
18 |   build: {
19 |     transpile: ['tdesign-vue-next'],
20 |   },
21 | 
22 |   plugins: [],
23 | 
24 |   tailwindcss: {
25 |     configPath: './app/tailwind.config.js',
26 |     exposeConfig: true,
27 |     viewer: true,
28 |   },
29 | 
30 |   colorMode: {
31 |     preference: 'system',
32 |     dataValue: 'theme',
33 |     classSuffix: '',
34 |   },
35 | 
36 |   // Sitemap module configuration: https://nuxtseo.com/site-config/getting-started/how-it-works
37 |   site: {
38 |     url: 'https://tdesign-vue-nuxt-starter.ataw.top', // FIXME: Your website URL
39 |   },
40 | 
41 |   nitro: {
42 |     compressPublicAssets: { brotli: true, gzip: true },
43 |   },
44 | 
45 |   vite: {
46 |     vue: {
47 |       script: {
48 |         defineModel: true,
49 |         propsDestructure: true,
50 |       },
51 |     },
52 |     plugins: [
53 |       Components({
54 |         dts: 'types/components.d.ts',
55 |         resolvers: [],
56 |       }),
57 |       AutoImport({
58 |         imports: ['pinia'],
59 |         dts: 'types/auto-imports.d.ts',
60 |         dirs: ['hooks/**', 'stores', 'constants', 'utils/**', 'layouts'],
61 |         vueTemplate: true,
62 |         resolvers: [],
63 |       }),
64 |     ],
65 |   },
66 | 
67 |   future: {
68 |     // 启用 Nuxt 4 功能前瞻
69 |     compatibilityVersion: 4,
70 |   },
71 | 
72 |   compatibilityDate: '2024-07-19',
73 | })
74 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TDesign Vue + Nuxt Starter
 2 | 
 3 | > [!NOTE] 
 4 | > Nuxt 4 即将发布，此模板的维护重心将会转向 Nuxt 4，请留意官方的 [Nuxt 3 -> 4 迁移说明](https://nuxt.com/docs/getting-started/upgrade#migrating-to-nuxt-4)。Nuxt 3 版本的模板将会移动到 [`nuxt3`](https://github.com/AnotiaWang/tdesign-vue-nuxt-starter/tree/nuxt3) 分支。
 5 | 
 6 | ![](https://s21.ax1x.com/2024/06/15/pkwSjC6.png)
 7 | 
 8 | 本模板仓库使用 [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) (Vue 3) 和 [TDesign Vue Next](https://tdesign.tencent.com/vue-next) 组件库。
 9 | 
10 | 除此之外，还使用了以下依赖：
11 | 
12 | - [Tailwind CSS](https://tailwindcss.com/)
13 | - [Nuxt Color Mode](https://color-mode.nuxtjs.org/): 深色/浅色模式
14 | - ESLint + Prettier: 代码风格检查 + 美化
15 | - [unplugin-auto-import 和 unplugin-vue-components](https://unplugin.unjs.io): 自动导入 TDesign Vue Next 的组件以实现 [tree shaking](https://en.wikipedia.org/wiki/Tree_shaking)
16 | - pnpm v9
17 | 
18 | ## 快速使用本模板
19 | 
20 | ```bash
21 | # 使用 main 分支
22 | npx -y nuxi init -t gh:AnotiaWang/tdesign-vue-nuxt-starter <项目名>
23 | # 如要继续使用 Nuxt 3 版本，请使用 `nuxt3` 分支
24 | npx -y nuxi init -t gh:AnotiaWang/tdesign-vue-nuxt-starter#nuxt3 <项目名>
25 | ```
26 | 
27 | ## 目录结构
28 | 
29 | ```
30 | .
31 | ├── app             # 前端相关
32 | │   ├── components  # 全局组件
33 | │   ├── hooks       # 自定义 hooks
34 | │   ├── layouts     # Nuxt 布局
35 | │   ├── pages       # 页面，每个 SFC 代表一个页面，可用文件夹嵌套
36 | │   └── types       # TypeScript 类型定义，目前包含了 unplugin 自动生成的类型
37 | ├── node_modules
38 | ├── public          # 静态资源
39 | │   └── styles
40 | └── server          # 后端相关
41 | ```
42 | 
43 | ## 自定义主题
44 | 
45 | TDesign 支持 [自定义主题](https://tdesign.tencent.com/vue-next/custom-theme)。按照以下步骤修改主题：
46 | 
47 | 1. 在文档页面，点击页面底部的刷子图标，进入主题编辑器。调整完想要的效果后，点击下载按钮，保存 CSS 文件到本地。
48 | 2. 将 CSS 文件移动到 `public/styles` 文件夹下，并命名为 `tdesign-theme-{name}.css`，其中 `name` 是你给主题取的名字。
49 | 3. 在 `hooks/useTheme.ts` 中，修改:
50 | 
51 | ```ts
52 | type Theme = 'default' | 'test' // 添加/修改成你自己的主题名
53 | ```
54 | 
55 | 如有需要，可以配置 defineStore 部分中的 `theme` 变量为你想要的初始主题，默认为 `default`。
56 | 
57 | 然后就可以在代码中调用了：
58 | 
59 | ```ts
60 | const theme = useThemeStore()
61 | 
62 | theme.setTheme('default')
63 | ```
64 | 
65 | ## Setup
66 | 
67 | ```bash
68 | pnpm install
69 | ```
70 | 
71 | ## Development Server
72 | 
73 | Start the development server on `http://localhost:3000`:
74 | 
75 | ```bash
76 | pnpm dev
77 | ```
78 | 
79 | ## Production
80 | 
81 | Build the application for production:
82 | 
83 | ```bash
84 | pnpm build
85 | ```
86 | 
87 | Locally preview production build:
88 | 
89 | ```bash
90 | pnpm preview
91 | ```
92 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col items-center px-4 py-10 gap-y-8 h-full">
 3 |     <h1 class="text-[26px]">Nuxt & TDesign Vue Next</h1>
 4 |     <div class="space-x-2">
 5 |       <TButton
 6 |         ghost
 7 |         @click="
 8 |           $colorMode.preference =
 9 |             $colorMode.preference === 'light' ? 'dark' : 'light'
10 |         "
11 |       >
12 |         <template #icon>
13 |           <TIcon
14 |             class="mr-1"
15 |             :name="$colorMode.preference === 'light' ? 'heart' : 'heart-filled'"
16 |           />
17 |           当前主题：{{ $colorMode.preference === 'light' ? 'Light' : 'Dark' }}
18 |         </template>
19 |       </TButton>
20 |     </div>
21 |     <div class="flex items-center gap-x-4">
22 |       <TButton @click="theme.setTheme('default')">默认主题</TButton>
23 |       <TButton @click="theme.setTheme('test')">主题 1</TButton>
24 |     </div>
25 |     <div class="grid grid-cols-2 sm:flex flex-row items-center gap-2">
26 |       <TButton>按钮示例</TButton>
27 |       <TButton theme="warning" loading>按钮示例</TButton>
28 |       <TButton theme="danger" disabled>按钮示例</TButton>
29 |       <TButton theme="success" variant="outline">按钮示例</TButton>
30 |     </div>
31 | 
32 |     <div class="flex flex-col sm:flex-row items-center gap-4">
33 |       <!-- tag-name 和 TagName 写法都可以 -->
34 |       <t-switch v-model="isLoading" class="flex-none" size="large">
35 |         <template #label> 加载中 </template>
36 |       </t-switch>
37 |       <TTagInput v-model="tags" drag-sort clearable>
38 |         <template #label> 你喜欢的前端框架： </template>
39 |       </TTagInput>
40 |     </div>
41 |     <TAlert :theme="alertTheme" close>{{ date }}</TAlert>
42 |   </div>
43 | </template>
44 | 
45 | <script setup lang="ts">
46 |   const theme = useThemeStore()
47 | 
48 |   const tags = ref(['Vue', 'React', 'Angular'])
49 |   const isLoading = ref(true)
50 |   const alertTheme = ref<'success' | 'warning' | 'error' | 'info'>('success')
51 |   let date: Date
52 | 
53 |   onMounted(() => {
54 |     date = new Date()
55 |     setInterval(() => {
56 |       isLoading.value = !isLoading.value
57 |       if (alertTheme.value === 'success') {
58 |         alertTheme.value = 'warning'
59 |       } else if (alertTheme.value === 'warning') {
60 |         alertTheme.value = 'error'
61 |       } else if (alertTheme.value === 'error') {
62 |         alertTheme.value = 'info'
63 |       } else {
64 |         alertTheme.value = 'success'
65 |       }
66 |     }, 2000)
67 |   })
68 | </script>
69 | 


--------------------------------------------------------------------------------
/app/types/auto-imports.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* prettier-ignore */
  3 | // @ts-nocheck
  4 | // noinspection JSUnusedGlobalSymbols
  5 | // Generated by unplugin-auto-import
  6 | // biome-ignore lint: disable
  7 | export {}
  8 | declare global {
  9 |   const ApolloError: (typeof import('@apollo/client/core'))['ApolloError']
 10 |   const EffectScope: (typeof import('vue'))['EffectScope']
 11 |   const NetworkStatus: (typeof import('@apollo/client/core'))['NetworkStatus']
 12 |   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
 13 |   const computed: (typeof import('vue'))['computed']
 14 |   const createApp: (typeof import('vue'))['createApp']
 15 |   const createPinia: typeof import('pinia')['createPinia']
 16 |   const customRef: (typeof import('vue'))['customRef']
 17 |   const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
 18 |   const defineComponent: (typeof import('vue'))['defineComponent']
 19 |   const defineStore: typeof import('pinia')['defineStore']
 20 |   const effectScope: (typeof import('vue'))['effectScope']
 21 |   const getActivePinia: typeof import('pinia')['getActivePinia']
 22 |   const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
 23 |   const getCurrentScope: (typeof import('vue'))['getCurrentScope']
 24 |   const h: (typeof import('vue'))['h']
 25 |   const inject: (typeof import('vue'))['inject']
 26 |   const isProxy: (typeof import('vue'))['isProxy']
 27 |   const isReactive: (typeof import('vue'))['isReactive']
 28 |   const isReadonly: (typeof import('vue'))['isReadonly']
 29 |   const isRef: (typeof import('vue'))['isRef']
 30 |   const mapActions: typeof import('pinia')['mapActions']
 31 |   const mapGetters: typeof import('pinia')['mapGetters']
 32 |   const mapState: typeof import('pinia')['mapState']
 33 |   const mapStores: typeof import('pinia')['mapStores']
 34 |   const mapWritableState: typeof import('pinia')['mapWritableState']
 35 |   const markRaw: (typeof import('vue'))['markRaw']
 36 |   const nextTick: (typeof import('vue'))['nextTick']
 37 |   const onActivated: (typeof import('vue'))['onActivated']
 38 |   const onAddToFavorites: (typeof import('@dcloudio/uni-app'))['onAddToFavorites']
 39 |   const onBackPress: (typeof import('@dcloudio/uni-app'))['onBackPress']
 40 |   const onBeforeMount: (typeof import('vue'))['onBeforeMount']
 41 |   const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
 42 |   const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
 43 |   const onDeactivated: (typeof import('vue'))['onDeactivated']
 44 |   const onError: (typeof import('@dcloudio/uni-app'))['onError']
 45 |   const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
 46 |   const onHide: (typeof import('@dcloudio/uni-app'))['onHide']
 47 |   const onLaunch: (typeof import('@dcloudio/uni-app'))['onLaunch']
 48 |   const onLoad: (typeof import('@dcloudio/uni-app'))['onLoad']
 49 |   const onMounted: (typeof import('vue'))['onMounted']
 50 |   const onNavigationBarButtonTap: (typeof import('@dcloudio/uni-app'))['onNavigationBarButtonTap']
 51 |   const onNavigationBarSearchInputChanged: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputChanged']
 52 |   const onNavigationBarSearchInputClicked: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputClicked']
 53 |   const onNavigationBarSearchInputConfirmed: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputConfirmed']
 54 |   const onNavigationBarSearchInputFocusChanged: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputFocusChanged']
 55 |   const onPageNotFound: (typeof import('@dcloudio/uni-app'))['onPageNotFound']
 56 |   const onPageScroll: (typeof import('@dcloudio/uni-app'))['onPageScroll']
 57 |   const onPullDownRefresh: (typeof import('@dcloudio/uni-app'))['onPullDownRefresh']
 58 |   const onReachBottom: (typeof import('@dcloudio/uni-app'))['onReachBottom']
 59 |   const onReady: (typeof import('@dcloudio/uni-app'))['onReady']
 60 |   const onRenderTracked: (typeof import('vue'))['onRenderTracked']
 61 |   const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
 62 |   const onResize: (typeof import('@dcloudio/uni-app'))['onResize']
 63 |   const onScopeDispose: (typeof import('vue'))['onScopeDispose']
 64 |   const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
 65 |   const onShareAppMessage: (typeof import('@dcloudio/uni-app'))['onShareAppMessage']
 66 |   const onShareTimeline: (typeof import('@dcloudio/uni-app'))['onShareTimeline']
 67 |   const onShow: (typeof import('@dcloudio/uni-app'))['onShow']
 68 |   const onTabItemTap: (typeof import('@dcloudio/uni-app'))['onTabItemTap']
 69 |   const onThemeChange: (typeof import('@dcloudio/uni-app'))['onThemeChange']
 70 |   const onUnhandledRejection: (typeof import('@dcloudio/uni-app'))['onUnhandledRejection']
 71 |   const onUnload: (typeof import('@dcloudio/uni-app'))['onUnload']
 72 |   const onUnmounted: (typeof import('vue'))['onUnmounted']
 73 |   const onUpdated: (typeof import('vue'))['onUpdated']
 74 |   const produce: (typeof import('immer'))['produce']
 75 |   const provide: (typeof import('vue'))['provide']
 76 |   const reactive: (typeof import('vue'))['reactive']
 77 |   const readonly: (typeof import('vue'))['readonly']
 78 |   const ref: (typeof import('vue'))['ref']
 79 |   const resolveComponent: (typeof import('vue'))['resolveComponent']
 80 |   const setActivePinia: typeof import('pinia')['setActivePinia']
 81 |   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
 82 |   const shallowReactive: (typeof import('vue'))['shallowReactive']
 83 |   const shallowReadonly: (typeof import('vue'))['shallowReadonly']
 84 |   const shallowRef: (typeof import('vue'))['shallowRef']
 85 |   const storeToRefs: typeof import('pinia')['storeToRefs']
 86 |   const toRaw: (typeof import('vue'))['toRaw']
 87 |   const toRef: (typeof import('vue'))['toRef']
 88 |   const toRefs: (typeof import('vue'))['toRefs']
 89 |   const toValue: (typeof import('vue'))['toValue']
 90 |   const triggerRef: (typeof import('vue'))['triggerRef']
 91 |   const unref: (typeof import('vue'))['unref']
 92 |   const useApolloClient: (typeof import('@vue/apollo-composable'))['useApolloClient']
 93 |   const useAttrs: (typeof import('vue'))['useAttrs']
 94 |   const useCssModule: (typeof import('vue'))['useCssModule']
 95 |   const useCssVars: (typeof import('vue'))['useCssVars']
 96 |   const useLazyQuery: (typeof import('@vue/apollo-composable'))['useLazyQuery']
 97 |   const useMutation: (typeof import('@vue/apollo-composable'))['useMutation']
 98 |   const useQuery: (typeof import('@vue/apollo-composable'))['useQuery']
 99 |   const useSlots: (typeof import('vue'))['useSlots']
100 |   const useThemeStore: typeof import('../hooks/useTheme')['useThemeStore']
101 |   const watch: (typeof import('vue'))['watch']
102 |   const watchEffect: (typeof import('vue'))['watchEffect']
103 |   const watchPostEffect: (typeof import('vue'))['watchPostEffect']
104 |   const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
105 | }
106 | 
107 | // for vue template auto import
108 | import { UnwrapRef } from 'vue'
109 | declare module 'vue' {
110 |   interface GlobalComponents {}
111 |   interface ComponentCustomProperties {
112 |     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
113 |     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
114 |     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
115 |     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
116 |     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
117 |     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
118 |     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
119 |     readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
120 |     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
121 |     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
122 |     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
123 |     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
124 |     readonly useThemeStore: UnwrapRef<typeof import('../hooks/useTheme')['useThemeStore']>
125 |   }
126 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"i18n-ally.localesPaths": "lang", // 相对于项目根目录的语言环境目录路径
  3 | 	"i18n-ally.sourceLanguage": "zh", // 根据此语言文件翻译其他语言文件的变量和内容
  4 | 	"i18n-ally.displayLanguage": "zh", // 显示语言
  5 | 	"i18n-ally.keystyle": "nested", // 翻译后变量格式 nested：嵌套式  flat:扁平式
  6 | 	"i18n-ally.preferredDelimiter": "_",
  7 | 	"i18n-ally.sortKeys": true,
  8 | 	// "i18n-ally.extract.keygenStrategy": "random", // 生成密钥路径的策略。可以slug，random或empty
  9 | 	// "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
 10 | 	"i18n-ally.enabledParsers": ["json", "js", "ts"],
 11 | 	"i18n-ally.keysInUse": [
 12 | 		"view.progress_submenu.translated_keys",
 13 | 		"view.progress_submenu.missing_keys",
 14 | 		"view.progress_submenu.empty_keys"
 15 | 	],
 16 | 	"i18n-ally.theme.annotationMissingBorder": "#d37070",
 17 | 	"i18n-ally.theme.annotationMissing": "#d37070",
 18 | 
 19 | 	"npm.packageManager": "pnpm",
 20 | 	"editor.tabSize": 2,
 21 | 	"files.eol": "\n",
 22 | 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 23 | 	"editor.codeActionsOnSave": {
 24 | 		"source.fixAll.eslint": "explicit"
 25 | 	},
 26 | 	"[vue]": {
 27 | 		"editor.codeActionsOnSave": {
 28 | 			"source.fixAll.eslint": "explicit"
 29 | 		},
 30 | 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 31 | 	},
 32 | 
 33 | 	"explorer.fileNesting.enabled": true,
 34 | 	"explorer.fileNesting.expand": false,
 35 | 	"explorer.fileNesting.patterns": {
 36 | 		"*.asax": "$(capture).*.cs, $(capture).*.vb",
 37 | 		"*.ascx": "$(capture).*.cs, $(capture).*.vb",
 38 | 		"*.ashx": "$(capture).*.cs, $(capture).*.vb",
 39 | 		"*.aspx": "$(capture).*.cs, $(capture).*.vb",
 40 | 		"*.bloc.dart": "$(capture).event.dart, $(capture).state.dart",
 41 | 		"*.c": "$(capture).h",
 42 | 		"*.cc": "$(capture).hpp, $(capture).h, $(capture).hxx",
 43 | 		"*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.css, $(capture).component.scss, $(capture).component.sass, $(capture).component.less",
 44 | 		"*.cpp": "$(capture).hpp, $(capture).h, $(capture).hxx",
 45 | 		"*.cs": "$(capture).*.cs",
 46 | 		"*.cshtml": "$(capture).cshtml.cs",
 47 | 		"*.csproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
 48 | 		"*.css": "$(capture).css.map, $(capture).*.css",
 49 | 		"*.cxx": "$(capture).hpp, $(capture).h, $(capture).hxx",
 50 | 		"*.dart": "$(capture).freezed.dart, $(capture).g.dart",
 51 | 		"*.ex": "$(capture).html.eex, $(capture).html.heex, $(capture).html.leex",
 52 | 		"*.go": "$(capture)_test.go",
 53 | 		"*.java": "$(capture).class",
 54 | 		"*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js",
 55 | 		"*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx",
 56 | 		"*.master": "$(capture).*.cs, $(capture).*.vb",
 57 | 		"*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts",
 58 | 		"*.pubxml": "$(capture).pubxml.user",
 59 | 		"*.resx": "$(capture).*.resx, $(capture).designer.cs, $(capture).designer.vb",
 60 | 		"*.tex": "$(capture).acn, $(capture).acr, $(capture).alg, $(capture).aux, $(capture).bbl, $(capture).blg, $(capture).fdb_latexmk, $(capture).fls, $(capture).glg, $(capture).glo, $(capture).gls, $(capture).idx, $(capture).ind, $(capture).ist, $(capture).lof, $(capture).log, $(capture).lot, $(capture).out, $(capture).pdf, $(capture).synctex.gz, $(capture).toc, $(capture).xdv",
 61 | 		"*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts",
 62 | 		"*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx",
 63 | 		"*.vbproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
 64 | 		"*.vue": "$(capture).*.ts, $(capture).*.js, $(capture).story.vue",
 65 | 		"*.xaml": "$(capture).xaml.cs",
 66 | 		"+layout.svelte": "+layout.ts,+layout.ts,+layout.js,+layout.server.ts,+layout.server.js",
 67 | 		"+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js ",
 68 | 		".clang-tidy": ".clang-format, .clangd, compile_commands.json",
 69 | 		".env": "*.env, .env.*, .envrc, env.d.ts",
 70 | 		".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
 71 | 		".project": ".classpath",
 72 | 		"BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE",
 73 | 		"CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json",
 74 | 		"I*.cs": "$(capture).cs",
 75 | 		"artisan": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, server.php, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, webpack.mix.js, windi.config.*",
 76 | 		"astro.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 77 | 		"cargo.toml": ".clippy.toml, .rustfmt.toml, cargo.lock, clippy.toml, cross.toml, rust-toolchain.toml, rustfmt.toml",
 78 | 		"composer.json": ".php*.cache, composer.lock, phpunit.xml*, psalm*.xml",
 79 | 		"default.nix": "shell.nix",
 80 | 		"deno.json*": "*.env, .env.*, .envrc, api-extractor.json, env.d.ts, import-map.json, import_map.json, jsconfig.*, tsconfig.*, tsdoc.*",
 81 | 		"dockerfile": ".dockerignore, docker-compose.*, dockerfile*",
 82 | 		"flake.nix": "flake.lock",
 83 | 		"gatsby-config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, gatsby-browser.*, gatsby-node.*, gatsby-ssr.*, gatsby-transformer.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 84 | 		"gemfile": ".ruby-version, gemfile.lock",
 85 | 		"go.mod": ".air*, go.sum",
 86 | 		"go.work": "go.work.sum",
 87 | 		"mix.exs": ".credo.exs, .dialyzer_ignore.exs, .formatter.exs, .iex.exs, .tool-versions, mix.lock",
 88 | 		"next.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, next-env.d.ts, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 89 | 		"nuxt.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 90 | 		"package.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, jenkins*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*",
 91 | 		"pubspec.yaml": ".metadata, .packages, all_lint_rules.yaml, analysis_options.yaml, build.yaml, pubspec.lock, pubspec_overrides.yaml",
 92 | 		"pyproject.toml": ".pdm.toml, pdm.lock, pyproject.toml",
 93 | 		"quasar.conf.js": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, quasar.extensions.json, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 94 | 		"readme*": "authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*",
 95 | 		"remix.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, remix.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 96 | 		"rush.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, jenkins*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*",
 97 | 		"shims.d.ts": "*.d.ts",
 98 | 		"svelte.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, mdsvex.config.js, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
 99 | 		"vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
100 | 		"vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"
101 | 	}
102 | }
103 | 


--------------------------------------------------------------------------------
/public/styles/tdesign-theme-default.css:
--------------------------------------------------------------------------------
  1 | :root,:root[theme-mode="light"] {
  2 |     --td-brand-color-1: #f2f3ff;
  3 |     --td-brand-color-2: #d9e1ff;
  4 |     --td-brand-color-3: #b5c7ff;
  5 |     --td-brand-color-4: #8eabff;
  6 |     --td-brand-color-5: #618dff;
  7 |     --td-brand-color-6: #366ef4;
  8 |     --td-brand-color-7: #0052d9;
  9 |     --td-brand-color-8: #003cab;
 10 |     --td-brand-color-9: #002a7c;
 11 |     --td-brand-color-10: #001a57;
 12 |     --td-brand-color-light: var(--td-brand-color-1);
 13 |     --td-brand-color-focus: var(--td-brand-color-2);
 14 |     --td-brand-color-disabled: var(--td-brand-color-3);
 15 |     --td-brand-color-hover: var(--td-brand-color-6);
 16 |     --td-brand-color: var(--td-brand-color-7);
 17 |     --td-brand-color-active: var(--td-brand-color-8);
 18 |     --td-error-color-1: #fff0ed;
 19 |     --td-error-color-2: #ffd8d2;
 20 |     --td-error-color-3: #ffb9b0;
 21 |     --td-error-color-4: #ff9285;
 22 |     --td-error-color-5: #f6685d;
 23 |     --td-error-color-6: #d54941;
 24 |     --td-error-color-7: #ad352f;
 25 |     --td-error-color-8: #881f1c;
 26 |     --td-error-color-9: #68070a;
 27 |     --td-error-color-10: #490002;
 28 |     --td-error-color: var(--td-error-color-6);
 29 |     --td-error-color-hover: var(--td-error-color-5);
 30 |     --td-error-color-focus: var(--td-error-color-2);
 31 |     --td-error-color-active: var(--td-error-color-7);
 32 |     --td-error-color-disabled: var(--td-error-color-3);
 33 |     --td-error-color-light: var(--td-error-color-1);
 34 |     --td-success-color-1: #e3f9e9;
 35 |     --td-success-color-2: #c6f3d7;
 36 |     --td-success-color-3: #92dab2;
 37 |     --td-success-color-4: #56c08d;
 38 |     --td-success-color-5: #2ba471;
 39 |     --td-success-color-6: #008858;
 40 |     --td-success-color-7: #006c45;
 41 |     --td-success-color-8: #005334;
 42 |     --td-success-color-9: #003b23;
 43 |     --td-success-color-10: #002515;
 44 |     --td-success-color: var(--td-success-color-5);
 45 |     --td-success-color-hover: var(--td-success-color-4);
 46 |     --td-success-color-focus: var(--td-success-color-2);
 47 |     --td-success-color-active: var(--td-success-color-6);
 48 |     --td-success-color-disabled: var(--td-success-color-3);
 49 |     --td-success-color-light: var(--td-success-color-1);
 50 |     --td-warning-color-1: #fff1e9;
 51 |     --td-warning-color-2: #ffd9c2;
 52 |     --td-warning-color-3: #ffb98c;
 53 |     --td-warning-color-4: #fa9550;
 54 |     --td-warning-color-5: #e37318;
 55 |     --td-warning-color-6: #be5a00;
 56 |     --td-warning-color-7: #954500;
 57 |     --td-warning-color-8: #713300;
 58 |     --td-warning-color-9: #532300;
 59 |     --td-warning-color-10: #3b1700;
 60 |     --td-warning-color: var(--td-warning-color-5);
 61 |     --td-warning-color-hover: var(--td-warning-color-4);
 62 |     --td-warning-color-focus: var(--td-warning-color-2);
 63 |     --td-warning-color-active: var(--td-warning-color-6);
 64 |     --td-warning-color-disabled: var(--td-warning-color-3);
 65 |     --td-warning-color-light: var(--td-warning-color-1);
 66 |     --td-gray-color-1: #f3f3f3;
 67 |     --td-gray-color-2: #eee;
 68 |     --td-gray-color-3: #e7e7e7;
 69 |     --td-gray-color-4: #dcdcdc;
 70 |     --td-gray-color-5: #c5c5c5;
 71 |     --td-gray-color-6: #a6a6a6;
 72 |     --td-gray-color-7: #8b8b8b;
 73 |     --td-gray-color-8: #777;
 74 |     --td-gray-color-9: #5e5e5e;
 75 |     --td-gray-color-10: #4b4b4b;
 76 |     --td-gray-color-11: #383838;
 77 |     --td-gray-color-12: #2c2c2c;
 78 |     --td-gray-color-13: #242424;
 79 |     --td-gray-color-14: #181818;
 80 |     --td-bg-color-page: var(--td-gray-color-2);
 81 |     --td-bg-color-container: #fff;
 82 |     --td-bg-color-container-hover: var(--td-gray-color-1);
 83 |     --td-bg-color-container-active: var(--td-gray-color-3);
 84 |     --td-bg-color-container-select: #fff;
 85 |     --td-bg-color-secondarycontainer: var(--td-gray-color-1);
 86 |     --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
 87 |     --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
 88 |     --td-bg-color-component: var(--td-gray-color-3);
 89 |     --td-bg-color-component-hover: var(--td-gray-color-4);
 90 |     --td-bg-color-component-active: var(--td-gray-color-6);
 91 |     --td-bg-color-secondarycomponent: var(--td-gray-color-4);
 92 |     --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
 93 |     --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
 94 |     --td-bg-color-component-disabled: var(--td-gray-color-2);
 95 |     --td-component-stroke: var(--td-gray-color-3);
 96 |     --td-component-border: var(--td-gray-color-4);
 97 |     --td-font-white-1: rgba(255, 255, 255, 1);
 98 |     --td-font-white-2: rgba(255, 255, 255, 0.55);
 99 |     --td-font-white-3: rgba(255, 255, 255, 0.35);
100 |     --td-font-white-4: rgba(255, 255, 255, 0.22);
101 |     --td-font-gray-1: rgba(0, 0, 0, 0.9);
102 |     --td-font-gray-2: rgba(0, 0, 0, 0.6);
103 |     --td-font-gray-3: rgba(0, 0, 0, 0.4);
104 |     --td-font-gray-4: rgba(0, 0, 0, 0.26);
105 |     --td-table-shadow-color: rgba(0, 0, 0, 8%);
106 |     --td-scrollbar-color: rgba(0, 0, 0, 10%);
107 |     --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
108 |     --td-scroll-track-color: #fff;
109 |     --td-bg-color-specialcomponent: #fff;
110 |     --td-border-level-1-color: var(--td-gray-color-3);
111 |     --td-border-level-2-color: var(--td-gray-color-4);
112 |     --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
113 |     --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
114 |     --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
115 |     --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
116 |     --td-mask-active: rgba(0, 0, 0, 0.6);
117 |     --td-mask-disabled: rgba(255, 255, 255, 0.6);
118 |   /* 字体配置 */
119 |     --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
120 |     --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
121 |     --td-font-size-link-small: 12px;
122 |     --td-font-size-link-medium: 14px;
123 |     --td-font-size-link-large: 16px;
124 |     --td-font-size-mark-small: 12px;
125 |     --td-font-size-mark-medium: 14px;
126 |     --td-font-size-body-small: 12px;
127 |     --td-font-size-body-medium: 14px;
128 |     --td-font-size-body-large: 16px;
129 |     --td-font-size-title-small: 14px;
130 |     --td-font-size-title-medium: 16px;
131 |     --td-font-size-title-large: 20px;
132 |     --td-font-size-headline-small: 24px;
133 |     --td-font-size-headline-medium: 28px;
134 |     --td-font-size-headline-large: 36px;
135 |     --td-font-size-display-medium: 48px;
136 |     --td-font-size-display-large: 64px;
137 |     --td-line-height-common: 8px;
138 |     --td-line-height-link-small: calc(    var(--td-font-size-link-small) + var(--td-line-height-common)  );
139 |     --td-line-height-link-medium: calc(    var(--td-font-size-link-medium) + var(--td-line-height-common)  );
140 |     --td-line-height-link-large: calc(    var(--td-font-size-link-large) + var(--td-line-height-common)  );
141 |     --td-line-height-mark-small: calc(    var(--td-font-size-mark-small) + var(--td-line-height-common)  );
142 |     --td-line-height-mark-medium: calc(    var(--td-font-size-mark-medium) + var(--td-line-height-common)  );
143 |     --td-line-height-body-small: calc(    var(--td-font-size-body-small) + var(--td-line-height-common)  );
144 |     --td-line-height-body-medium: calc(    var(--td-font-size-body-medium) + var(--td-line-height-common)  );
145 |     --td-line-height-body-large: calc(    var(--td-font-size-body-large) + var(--td-line-height-common)  );
146 |     --td-line-height-title-small: calc(    var(--td-font-size-title-small) + var(--td-line-height-common)  );
147 |     --td-line-height-title-medium: calc(    var(--td-font-size-title-medium) + var(--td-line-height-common)  );
148 |     --td-line-height-title-large: calc(    var(--td-font-size-title-medium) + var(--td-line-height-common)  );
149 |     --td-line-height-headline-small: calc(    var(--td-font-size-headline-small) + var(--td-line-height-common)  );
150 |     --td-line-height-headline-medium: calc(    var(--td-font-size-headline-medium) + var(--td-line-height-common)  );
151 |     --td-line-height-headline-large: calc(    var(--td-font-size-headline-large) + var(--td-line-height-common)  );
152 |     --td-line-height-display-medium: calc(    var(--td-font-size-display-medium) + var(--td-line-height-common)  );
153 |     --td-line-height-display-large: calc(    var(--td-font-size-display-large) + var(--td-line-height-common)  );
154 |     --td-font-link-small: var(--td-font-size-link-small) /    var(--td-line-height-link-small) var(--td-font-family);
155 |     --td-font-link-medium: var(--td-font-size-link-medium) /    var(--td-line-height-link-medium) var(--td-font-family);
156 |     --td-font-link-large: var(--td-font-size-link-large) /    var(--td-line-height-link-large) var(--td-font-family);
157 |     --td-font-mark-small: 600 var(--td-font-size-mark-small) /    var(--td-line-height-mark-small) var(--td-font-family);
158 |     --td-font-mark-medium: 600 var(--td-font-size-mark-medium) /    var(--td-line-height-mark-medium) var(--td-font-family);
159 |     --td-font-body-small: var(--td-font-size-body-small) /    var(--td-line-height-body-small) var(--td-font-family);
160 |     --td-font-body-medium: var(--td-font-size-body-medium) /    var(--td-line-height-body-medium) var(--td-font-family);
161 |     --td-font-body-large: var(--td-font-size-body-large) /    var(--td-line-height-body-large) var(--td-font-family);
162 |     --td-font-title-small: var(--td-font-size-title-small) /    var(--td-line-height-title-small) var(--td-font-family);
163 |     --td-font-title-medium: var(--td-font-size-title-medium) /    var(--td-line-height-title-medium) var(--td-font-family);
164 |     --td-font-title-large: var(--td-font-size-title-large) /    var(--td-line-height-title-large) var(--td-font-family);
165 |     --td-font-headline-small: var(--td-font-size-headline-small) /    var(--td-line-height-headline-small) var(--td-font-family);
166 |     --td-font-headline-medium: var(--td-font-size-headline-medium) /    var(--td-line-height-headline-medium) var(--td-font-family);
167 |     --td-font-headline-large: var(--td-font-size-headline-large) /    var(--td-line-height-headline-large) var(--td-font-family);
168 |     --td-font-display-medium: var(--td-font-size-display-medium) /    var(--td-line-height-display-medium) var(--td-font-family);
169 |     --td-font-display-large: var(--td-font-size-display-large) /    var(--td-line-height-display-large) var(--td-font-family);
170 |   /* 字体颜色 */
171 |     --td-text-color-primary: var(--td-font-gray-1);
172 |     --td-text-color-secondary: var(--td-font-gray-2);
173 |     --td-text-color-placeholder: var(--td-font-gray-3);
174 |     --td-text-color-disabled: var(--td-font-gray-4);
175 |     --td-text-color-anti: #fff;
176 |     --td-text-color-brand: var(--td-brand-color);
177 |     --td-text-color-link: var(--td-brand-color);
178 |   /* end 字体配置 */  /* 圆角配置 */
179 |     --td-radius-small: 2px;
180 |     --td-radius-default: 3px;
181 |     --td-radius-medium: 6px;
182 |     --td-radius-large: 9px;
183 |     --td-radius-extraLarge: 12px;
184 |     --td-radius-round: 999px;
185 |     --td-radius-circle: 50%;
186 |   /* end 圆角配置 */  /* 阴影配置 */
187 |     --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
188 |     --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
189 |     --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
190 |   /* end 阴影配置 */  /* 尺寸配置 */
191 |     --td-size-1: 2px;
192 |     --td-size-2: 4px;
193 |     --td-size-3: 6px;
194 |     --td-size-4: 8px;
195 |     --td-size-5: 12px;
196 |     --td-size-6: 16px;
197 |     --td-size-7: 20px;
198 |     --td-size-8: 24px;
199 |     --td-size-9: 28px;
200 |     --td-size-10: 32px;
201 |     --td-size-11: 36px;
202 |     --td-size-12: 40px;
203 |     --td-size-13: 48px;
204 |     --td-size-14: 56px;
205 |     --td-size-15: 64px;
206 |     --td-size-16: 72px;
207 |     --td-comp-size-xxxs: var(--td-size-6);
208 |     --td-comp-size-xxs: var(--td-size-7);
209 |     --td-comp-size-xs: var(--td-size-8);
210 |     --td-comp-size-s: var(--td-size-9);
211 |     --td-comp-size-m: var(--td-size-10);
212 |     --td-comp-size-l: var(--td-size-11);
213 |     --td-comp-size-xl: var(--td-size-12);
214 |     --td-comp-size-xxl: var(--td-size-13);
215 |     --td-comp-size-xxxl: var(--td-size-14);
216 |     --td-comp-size-xxxxl: var(--td-size-15);
217 |     --td-comp-size-xxxxxl: var(--td-size-16);
218 |     --td-pop-padding-s: var(--td-size-2);
219 |     --td-pop-padding-m: var(--td-size-3);
220 |     --td-pop-padding-l: var(--td-size-4);
221 |     --td-pop-padding-xl: var(--td-size-5);
222 |     --td-pop-padding-xxl: var(--td-size-6);
223 |     --td-comp-paddingLR-xxs: var(--td-size-1);
224 |     --td-comp-paddingLR-xs: var(--td-size-2);
225 |     --td-comp-paddingLR-s: var(--td-size-4);
226 |     --td-comp-paddingLR-m: var(--td-size-5);
227 |     --td-comp-paddingLR-l: var(--td-size-6);
228 |     --td-comp-paddingLR-xl: var(--td-size-8);
229 |     --td-comp-paddingLR-xxl: var(--td-size-10);
230 |     --td-comp-paddingTB-xxs: var(--td-size-1);
231 |     --td-comp-paddingTB-xs: var(--td-size-2);
232 |     --td-comp-paddingTB-s: var(--td-size-4);
233 |     --td-comp-paddingTB-m: var(--td-size-5);
234 |     --td-comp-paddingTB-l: var(--td-size-6);
235 |     --td-comp-paddingTB-xl: var(--td-size-8);
236 |     --td-comp-paddingTB-xxl: var(--td-size-10);
237 |     --td-comp-margin-xxs: var(--td-size-1);
238 |     --td-comp-margin-xs: var(--td-size-2);
239 |     --td-comp-margin-s: var(--td-size-4);
240 |     --td-comp-margin-m: var(--td-size-5);
241 |     --td-comp-margin-l: var(--td-size-6);
242 |     --td-comp-margin-xl: var(--td-size-7);
243 |     --td-comp-margin-xxl: var(--td-size-8);
244 |     --td-comp-margin-xxxl: var(--td-size-10);
245 |     --td-comp-margin-xxxxl: var(--td-size-12);
246 |   /* end 尺寸配置 */
247 | }
248 | 
249 | :root[theme-mode="dark"] {
250 |     --brand-main: var(--td-brand-color);
251 |     --td-brand-color-1: #1b2f51;
252 |     --td-brand-color-2: #173463;
253 |     --td-brand-color-3: #143975;
254 |     --td-brand-color-4: #103d88;
255 |     --td-brand-color-5: #0d429a;
256 |     --td-brand-color-6: #054bbe;
257 |     --td-brand-color-7: #2667d4;
258 |     --td-brand-color-8: #4582e6;
259 |     --td-brand-color-9: #699ef5;
260 |     --td-brand-color-10: #96bbf8;
261 |     --td-brand-color-light: var(--td-brand-color-1);
262 |     --td-brand-color-focus: var(--td-brand-color-2);
263 |     --td-brand-color-disabled: var(--td-brand-color-3);
264 |     --td-brand-color-hover: var(--td-brand-color-7);
265 |     --td-brand-color: var(--td-brand-color-8);
266 |     --td-brand-color-active: var(--td-brand-color-9);
267 |     --td-warning-color-1: #4f2a1d;
268 |     --td-warning-color-2: #582f21;
269 |     --td-warning-color-3: #733c23;
270 |     --td-warning-color-4: #a75d2b;
271 |     --td-warning-color-5: #cf6e2d;
272 |     --td-warning-color-6: #dc7633;
273 |     --td-warning-color-7: #e8935c;
274 |     --td-warning-color-8: #ecbf91;
275 |     --td-warning-color-9: #eed7bf;
276 |     --td-warning-color-10: #f3e9dc;
277 |     --td-warning-color: var(--td-warning-color-5);
278 |     --td-warning-color-hover: var(--td-warning-color-4);
279 |     --td-warning-color-focus: var(--td-warning-color-2);
280 |     --td-warning-color-active: var(--td-warning-color-6);
281 |     --td-warning-color-disabled: var(--td-warning-color-3);
282 |     --td-warning-color-light: var(--td-warning-color-1);
283 |     --td-error-color-1: #472324;
284 |     --td-error-color-2: #5e2a2d;
285 |     --td-error-color-3: #703439;
286 |     --td-error-color-4: #83383e;
287 |     --td-error-color-5: #a03f46;
288 |     --td-error-color-6: #c64751;
289 |     --td-error-color-7: #de6670;
290 |     --td-error-color-8: #ec888e;
291 |     --td-error-color-9: #edb1b6;
292 |     --td-error-color-10: #eeced0;
293 |     --td-error-color: var(--td-error-color-6);
294 |     --td-error-color-hover: var(--td-error-color-5);
295 |     --td-error-color-focus: var(--td-error-color-2);
296 |     --td-error-color-active: var(--td-error-color-7);
297 |     --td-error-color-disabled: var(--td-error-color-3);
298 |     --td-error-color-light: var(--td-error-color-1);
299 |     --td-success-color-1: #193a2a;
300 |     --td-success-color-2: #1a4230;
301 |     --td-success-color-3: #17533d;
302 |     --td-success-color-4: #0d7a55;
303 |     --td-success-color-5: #059465;
304 |     --td-success-color-6: #43af8a;
305 |     --td-success-color-7: #46bf96;
306 |     --td-success-color-8: #80d2b6;
307 |     --td-success-color-9: #b4e1d3;
308 |     --td-success-color-10: #deede8;
309 |     --td-success-color: var(--td-success-color-5);
310 |     --td-success-color-hover: var(--td-success-color-4);
311 |     --td-success-color-focus: var(--td-success-color-2);
312 |     --td-success-color-active: var(--td-success-color-6);
313 |     --td-success-color-disabled: var(--td-success-color-3);
314 |     --td-success-color-light: var(--td-success-color-1);
315 |     --td-gray-color-1: #f3f3f3;
316 |     --td-gray-color-2: #eee;
317 |     --td-gray-color-3: #e7e7e7;
318 |     --td-gray-color-4: #dcdcdc;
319 |     --td-gray-color-5: #c5c5c5;
320 |     --td-gray-color-6: #a6a6a6;
321 |     --td-gray-color-7: #8b8b8b;
322 |     --td-gray-color-8: #777;
323 |     --td-gray-color-9: #5e5e5e;
324 |     --td-gray-color-10: #4b4b4b;
325 |     --td-gray-color-11: #383838;
326 |     --td-gray-color-12: #2c2c2c;
327 |     --td-gray-color-13: #242424;
328 |     --td-gray-color-14: #181818;
329 |     --td-bg-color-page: var(--td-gray-color-14);
330 |     --td-bg-color-container: var(--td-gray-color-13);
331 |     --td-bg-color-container-hover: var(--td-gray-color-12);
332 |     --td-bg-color-container-active: var(--td-gray-color-10);
333 |     --td-bg-color-container-select: var(--td-gray-color-9);
334 |     --td-bg-color-secondarycontainer: var(--td-gray-color-12);
335 |     --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
336 |     --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
337 |     --td-bg-color-component: var(--td-gray-color-11);
338 |     --td-bg-color-component-hover: var(--td-gray-color-10);
339 |     --td-bg-color-component-active: var(--td-gray-color-9);
340 |     --td-bg-color-secondarycomponent: var(--td-gray-color-10);
341 |     --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
342 |     --td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
343 |     --td-bg-color-component-disabled: var(--td-gray-color-12);
344 |     --td-component-stroke: var(--td-gray-color-11);
345 |     --td-component-border: var(--td-gray-color-9);
346 |     --td-font-white-1: rgba(255, 255, 255, 0.9);
347 |     --td-font-white-2: rgba(255, 255, 255, 0.55);
348 |     --td-font-white-3: rgba(255, 255, 255, 0.35);
349 |     --td-font-white-4: rgba(255, 255, 255, 0.22);
350 |     --td-font-gray-1: rgba(0, 0, 0, 0.9);
351 |     --td-font-gray-2: rgba(0, 0, 0, 0.6);
352 |     --td-font-gray-3: rgba(0, 0, 0, 0.4);
353 |     --td-font-gray-4: rgba(0, 0, 0, 0.26);
354 |     --td-text-color-primary: var(--td-font-white-1);
355 |     --td-text-color-secondary: var(--td-font-white-2);
356 |     --td-text-color-placeholder: var(--td-font-white-3);
357 |     --td-text-color-disabled: var(--td-font-white-4);
358 |     --td-text-color-anti: #fff;
359 |     --td-text-color-brand: var(--td-brand-color);
360 |     --td-text-color-link: var(--td-brand-color);
361 |     --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
362 |     --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.10), 0 5px 5px rgba(0, 0, 0, 0.16);
363 |     --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.20);
364 |     --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
365 |     --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
366 |     --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
367 |     --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
368 |     --td-table-shadow-color: rgba(0, 0, 0, 55%);
369 |     --td-scrollbar-color: rgba(255, 255, 255, 10%);
370 |     --td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
371 |     --td-scroll-track-color: #333;
372 |     --td-bg-color-specialcomponent: transparent;
373 |     --td-border-level-1-color: var(--td-gray-color-11);
374 |     --td-border-level-2-color: var(--td-gray-color-9);
375 |     --td-mask-active: rgba(0, 0, 0, 0.4);
376 |     --td-mask-disabled: rgba(0, 0, 0, 0.6);
377 | }


--------------------------------------------------------------------------------
/public/styles/tdesign-theme-test.css:
--------------------------------------------------------------------------------
  1 | :root,:root[theme-mode="light"] {
  2 |     --brand-main: var(--td-brand-color-5);
  3 |     --td-brand-color-light: var(--td-brand-color-1);
  4 |     --td-brand-color-focus: var(--td-brand-color-2);
  5 |     --td-brand-color-disabled: var(--td-brand-color-3);
  6 |     --td-brand-color-hover: var(--td-brand-color-4);
  7 |     --td-brand-color: var(--td-brand-color-5);
  8 |     --td-brand-color-active: var(--td-brand-color-6);
  9 |     --td-brand-color-1: #fff0f6;
 10 |     --td-brand-color-2: #ffd8eb;
 11 |     --td-brand-color-3: #ffafda;
 12 |     --td-brand-color-4: #ff7aca;
 13 |     --td-brand-color-5: #ef45b3;
 14 |     --td-brand-color-6: #cb2a96;
 15 |     --td-brand-color-7: #a61379;
 16 |     --td-brand-color-8: #83005e;
 17 |     --td-brand-color-9: #620044;
 18 |     --td-brand-color-10: #44002e;
 19 |     --td-warning-color-1: #fef3e6;
 20 |     --td-warning-color-2: #f9e0c7;
 21 |     --td-warning-color-3: #f7c797;
 22 |     --td-warning-color-4: #f2995f;
 23 |     --td-warning-color-5: #ed7b2f;
 24 |     --td-warning-color-6: #d35a21;
 25 |     --td-warning-color-7: #ba431b;
 26 |     --td-warning-color-8: #9e3610;
 27 |     --td-warning-color-9: #842b0b;
 28 |     --td-warning-color-10: #5a1907;
 29 |     --td-warning-color: var(--td-warning-color-5);
 30 |     --td-warning-color-hover: var(--td-warning-color-4);
 31 |     --td-warning-color-focus: var(--td-warning-color-2);
 32 |     --td-warning-color-active: var(--td-warning-color-6);
 33 |     --td-warning-color-disabled: var(--td-warning-color-3);
 34 |     --td-warning-color-light: var(--td-warning-color-1);
 35 |     --td-error-color-1: #fdecee;
 36 |     --td-error-color-2: #f9d7d9;
 37 |     --td-error-color-3: #f8b9be;
 38 |     --td-error-color-4: #f78d94;
 39 |     --td-error-color-5: #f36d78;
 40 |     --td-error-color-6: #e34d59;
 41 |     --td-error-color-7: #c9353f;
 42 |     --td-error-color-8: #b11f26;
 43 |     --td-error-color-9: #951114;
 44 |     --td-error-color-10: #680506;
 45 |     --td-error-color: var(--td-error-color-6);
 46 |     --td-error-color-hover: var(--td-error-color-5);
 47 |     --td-error-color-focus: var(--td-error-color-2);
 48 |     --td-error-color-active: var(--td-error-color-7);
 49 |     --td-error-color-disabled: var(--td-error-color-3);
 50 |     --td-error-color-light: var(--td-error-color-1);
 51 |     --td-success-color-1: #e8f8f2;
 52 |     --td-success-color-2: #bcebdc;
 53 |     --td-success-color-3: #85dbbe;
 54 |     --td-success-color-4: #48c79c;
 55 |     --td-success-color-5: #00a870;
 56 |     --td-success-color-6: #078d5c;
 57 |     --td-success-color-7: #067945;
 58 |     --td-success-color-8: #056334;
 59 |     --td-success-color-9: #044f2a;
 60 |     --td-success-color-10: #033017;
 61 |     --td-success-color: var(--td-success-color-5);
 62 |     --td-success-color-hover: var(--td-success-color-4);
 63 |     --td-success-color-focus: var(--td-success-color-2);
 64 |     --td-success-color-active: var(--td-success-color-6);
 65 |     --td-success-color-disabled: var(--td-success-color-3);
 66 |     --td-success-color-light: var(--td-success-color-1);
 67 |     --td-gray-color-1: #f3f3f3;
 68 |     --td-gray-color-2: #eee;
 69 |     --td-gray-color-3: #e7e7e7;
 70 |     --td-gray-color-4: #dcdcdc;
 71 |     --td-gray-color-5: #c5c5c5;
 72 |     --td-gray-color-6: #a6a6a6;
 73 |     --td-gray-color-7: #8b8b8b;
 74 |     --td-gray-color-8: #777;
 75 |     --td-gray-color-9: #5e5e5e;
 76 |     --td-gray-color-10: #4b4b4b;
 77 |     --td-gray-color-11: #383838;
 78 |     --td-gray-color-12: #2c2c2c;
 79 |     --td-gray-color-13: #242424;
 80 |     --td-gray-color-14: #181818;
 81 |     --td-bg-color-container: #fff;
 82 |     --td-bg-color-container-select: #fff;
 83 |     --td-bg-color-page: var(--td-gray-color-2);
 84 |     --td-bg-color-container-hover: var(--td-gray-color-1);
 85 |     --td-bg-color-container-active: var(--td-gray-color-3);
 86 |     --td-bg-color-secondarycontainer: var(--td-gray-color-1);
 87 |     --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
 88 |     --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
 89 |     --td-bg-color-component: var(--td-gray-color-3);
 90 |     --td-bg-color-component-hover: var(--td-gray-color-4);
 91 |     --td-bg-color-component-active: var(--td-gray-color-6);
 92 |     --td-bg-color-component-disabled: var(--td-gray-color-2);
 93 |     --td-component-stroke: var(--td-gray-color-3);
 94 |     --td-component-border: var(--td-gray-color-4);
 95 |     --td-font-white-1: #ffffff;
 96 |     --td-font-white-2: rgba(255, 255, 255, 0.55);
 97 |     --td-font-white-3: rgba(255, 255, 255, 0.35);
 98 |     --td-font-white-4: rgba(255, 255, 255, 0.22);
 99 |     --td-font-gray-1: rgba(0, 0, 0, 0.9);
100 |     --td-font-gray-2: rgba(0, 0, 0, 0.6);
101 |     --td-font-gray-3: rgba(0, 0, 0, 0.4);
102 |     --td-font-gray-4: rgba(0, 0, 0, 0.26);
103 |     --td-table-shadow-color: rgba(0, 0, 0, 8%);
104 |     --td-scrollbar-color: rgba(0, 0, 0, 10%);
105 |     --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
106 |     --td-scroll-track-color: #fff;
107 |     --td-bg-color-specialcomponent: #fff;
108 |     --td-border-level-1-color: var(--td-gray-color-3);
109 |     --td-border-level-2-color: var(--td-gray-color-4);
110 |     --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
111 |     --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
112 |     --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
113 |     --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
114 |     --td-mask-active: rgba(0, 0, 0, 0.6);
115 |     --td-mask-disabled: rgba(255, 255, 255, 0.6);
116 |     /* 字体配置 */
117 |     --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
118 |     --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
119 |     --td-font-size-link-small: 13px;
120 |     --td-font-size-link-medium: 15px;
121 |     --td-font-size-link-large: 17px;
122 |     --td-font-size-mark-small: 13px;
123 |     --td-font-size-mark-medium: 15px;
124 |     --td-font-size-body-small: 13px;
125 |     --td-font-size-body-medium: 15px;
126 |     --td-font-size-body-large: 17px;
127 |     --td-font-size-title-small: 15px;
128 |     --td-font-size-title-medium: 17px;
129 |     --td-font-size-title-large: 21px;
130 |     --td-font-size-headline-small: 25px;
131 |     --td-font-size-headline-medium: 29px;
132 |     --td-font-size-headline-large: 37px;
133 |     --td-font-size-display-medium: 49px;
134 |     --td-font-size-display-large: 65px;
135 |     --td-line-height-common: 8px;
136 |     --td-line-height-link-small: calc(    var(--td-font-size-link-small) + var(--td-line-height-common)  );
137 |     --td-line-height-link-medium: calc(    var(--td-font-size-link-medium) + var(--td-line-height-common)  );
138 |     --td-line-height-link-large: calc(    var(--td-font-size-link-large) + var(--td-line-height-common)  );
139 |     --td-line-height-mark-small: calc(    var(--td-font-size-mark-small) + var(--td-line-height-common)  );
140 |     --td-line-height-mark-medium: calc(    var(--td-font-size-mark-medium) + var(--td-line-height-common)  );
141 |     --td-line-height-body-small: calc(    var(--td-font-size-body-small) + var(--td-line-height-common)  );
142 |     --td-line-height-body-medium: calc(    var(--td-font-size-body-medium) + var(--td-line-height-common)  );
143 |     --td-line-height-body-large: calc(    var(--td-font-size-body-large) + var(--td-line-height-common)  );
144 |     --td-line-height-title-small: calc(    var(--td-font-size-title-small) + var(--td-line-height-common)  );
145 |     --td-line-height-title-medium: calc(    var(--td-font-size-title-medium) + var(--td-line-height-common)  );
146 |     --td-line-height-title-large: calc(    var(--td-font-size-title-medium) + var(--td-line-height-common)  );
147 |     --td-line-height-headline-small: calc(    var(--td-font-size-headline-small) + var(--td-line-height-common)  );
148 |     --td-line-height-headline-medium: calc(    var(--td-font-size-headline-medium) + var(--td-line-height-common)  );
149 |     --td-line-height-headline-large: calc(    var(--td-font-size-headline-large) + var(--td-line-height-common)  );
150 |     --td-line-height-display-medium: calc(    var(--td-font-size-display-medium) + var(--td-line-height-common)  );
151 |     --td-line-height-display-large: calc(    var(--td-font-size-display-large) + var(--td-line-height-common)  );
152 |     --td-font-link-small: var(--td-font-size-link-small) /    var(--td-line-height-link-small) var(--td-font-family);
153 |     --td-font-link-medium: var(--td-font-size-link-medium) /    var(--td-line-height-link-medium) var(--td-font-family);
154 |     --td-font-link-large: var(--td-font-size-link-large) /    var(--td-line-height-link-large) var(--td-font-family);
155 |     --td-font-mark-small: 600 var(--td-font-size-mark-small) /    var(--td-line-height-mark-small) var(--td-font-family);
156 |     --td-font-mark-medium: 600 var(--td-font-size-mark-medium) /    var(--td-line-height-mark-medium) var(--td-font-family);
157 |     --td-font-body-small: var(--td-font-size-body-small) /    var(--td-line-height-body-small) var(--td-font-family);
158 |     --td-font-body-medium: var(--td-font-size-body-medium) /    var(--td-line-height-body-medium) var(--td-font-family);
159 |     --td-font-body-large: var(--td-font-size-body-large) /    var(--td-line-height-body-large) var(--td-font-family);
160 |     --td-font-title-small: var(--td-font-size-title-small) /    var(--td-line-height-title-small) var(--td-font-family);
161 |     --td-font-title-medium: var(--td-font-size-title-medium) /    var(--td-line-height-title-medium) var(--td-font-family);
162 |     --td-font-title-large: var(--td-font-size-title-large) /    var(--td-line-height-title-large) var(--td-font-family);
163 |     --td-font-headline-small: var(--td-font-size-headline-small) /    var(--td-line-height-headline-small) var(--td-font-family);
164 |     --td-font-headline-medium: var(--td-font-size-headline-medium) /    var(--td-line-height-headline-medium) var(--td-font-family);
165 |     --td-font-headline-large: var(--td-font-size-headline-large) /    var(--td-line-height-headline-large) var(--td-font-family);
166 |     --td-font-display-medium: var(--td-font-size-display-medium) /    var(--td-line-height-display-medium) var(--td-font-family);
167 |     --td-font-display-large: var(--td-font-size-display-large) /    var(--td-line-height-display-large) var(--td-font-family);
168 |   /* 字体颜色 */
169 |     --td-text-color-primary: var(--td-font-gray-1);
170 |     --td-text-color-secondary: var(--td-font-gray-2);
171 |     --td-text-color-placeholder: var(--td-font-gray-3);
172 |     --td-text-color-disabled: var(--td-font-gray-4);
173 |     --td-text-color-anti: #fff;
174 |     --td-text-color-brand: var(--td-brand-color);
175 |     --td-text-color-link: var(--td-brand-color);
176 |   /* end 字体配置 */    /* 圆角配置 */
177 |     --td-radius-small: 0px;
178 |     --td-radius-default: 0px;
179 |     --td-radius-medium: 0px;
180 |     --td-radius-large: 0px;
181 |     --td-radius-extraLarge: 0px;
182 |     --td-radius-round: 999px;
183 |     --td-radius-circle: 50%;
184 |   /* end 圆角配置 *//* 阴影配置 */
185 |     --td-shadow-1: 0 5px 20px rgba(0, 0, 0, 0.08),0 5px 8px rgba(0, 0, 0, 0.12),0 5px 10px -1px rgba(0, 0, 0, 0.18);
186 |     --td-shadow-2: 0 7px 23px 2px rgba(0, 0, 0, 0.09),0 12px 17px 1px rgba(0, 0, 0, 0.1),0 8px 14px -4px rgba(0, 0, 0, 0.18);
187 |     --td-shadow-3: 0 11px 37px 5px rgba(0, 0, 0, 0.1),0 21px 31px 2px rgba(0, 0, 0, 0.12),0 14px 20px -6px rgba(0, 0, 0, 0.16);
188 |   /* end 阴影配置 *//* 尺寸配置 */
189 |     --td-size-1: 2px;
190 |     --td-size-2: 4px;
191 |     --td-size-3: 6px;
192 |     --td-size-4: 8px;
193 |     --td-size-5: 12px;
194 |     --td-size-6: 16px;
195 |     --td-size-7: 20px;
196 |     --td-size-8: 24px;
197 |     --td-size-9: 28px;
198 |     --td-size-10: 32px;
199 |     --td-size-11: 36px;
200 |     --td-size-12: 40px;
201 |     --td-size-13: 48px;
202 |     --td-size-14: 56px;
203 |     --td-size-15: 64px;
204 |     --td-size-16: 72px;
205 |     --td-comp-size-xxxs: var(--td-size-6);
206 |     --td-comp-size-xxs: var(--td-size-7);
207 |     --td-comp-size-xs: var(--td-size-8);
208 |     --td-comp-size-s: var(--td-size-9);
209 |     --td-comp-size-m: var(--td-size-10);
210 |     --td-comp-size-l: var(--td-size-11);
211 |     --td-comp-size-xl: var(--td-size-12);
212 |     --td-comp-size-xxl: var(--td-size-13);
213 |     --td-comp-size-xxxl: var(--td-size-14);
214 |     --td-comp-size-xxxxl: var(--td-size-15);
215 |     --td-comp-size-xxxxxl: var(--td-size-16);
216 |     --td-pop-padding-s: var(--td-size-2);
217 |     --td-pop-padding-m: var(--td-size-3);
218 |     --td-pop-padding-l: var(--td-size-4);
219 |     --td-pop-padding-xl: var(--td-size-5);
220 |     --td-pop-padding-xxl: var(--td-size-6);
221 |     --td-comp-paddingLR-xxs: var(--td-size-1);
222 |     --td-comp-paddingLR-xs: var(--td-size-2);
223 |     --td-comp-paddingLR-s: var(--td-size-4);
224 |     --td-comp-paddingLR-m: var(--td-size-5);
225 |     --td-comp-paddingLR-l: var(--td-size-6);
226 |     --td-comp-paddingLR-xl: var(--td-size-8);
227 |     --td-comp-paddingLR-xxl: var(--td-size-10);
228 |     --td-comp-paddingTB-xxs: var(--td-size-1);
229 |     --td-comp-paddingTB-xs: var(--td-size-2);
230 |     --td-comp-paddingTB-s: var(--td-size-4);
231 |     --td-comp-paddingTB-m: var(--td-size-5);
232 |     --td-comp-paddingTB-l: var(--td-size-6);
233 |     --td-comp-paddingTB-xl: var(--td-size-8);
234 |     --td-comp-paddingTB-xxl: var(--td-size-10);
235 |     --td-comp-margin-xxs: var(--td-size-1);
236 |     --td-comp-margin-xs: var(--td-size-2);
237 |     --td-comp-margin-s: var(--td-size-4);
238 |     --td-comp-margin-m: var(--td-size-5);
239 |     --td-comp-margin-l: var(--td-size-6);
240 |     --td-comp-margin-xl: var(--td-size-7);
241 |     --td-comp-margin-xxl: var(--td-size-8);
242 |     --td-comp-margin-xxxl: var(--td-size-10);
243 |     --td-comp-margin-xxxxl: var(--td-size-12);
244 |   /* end 尺寸配置 */
245 | }
246 | 
247 | :root[theme-mode="dark"] {
248 |     --brand-main: var(--td-brand-color-6);
249 |     --td-brand-color-light: var(--td-brand-color-1);
250 |     --td-brand-color-focus: var(--td-brand-color-2);
251 |     --td-brand-color-disabled: var(--td-brand-color-3);
252 |     --td-brand-color-hover: var(--td-brand-color-5);
253 |     --td-brand-color: var(--td-brand-color-6);
254 |     --td-brand-color-active: var(--td-brand-color-7);
255 |     --td-brand-color-1: #ef45b320;
256 |     --td-brand-color-2: #620044;
257 |     --td-brand-color-3: #83005e;
258 |     --td-brand-color-4: #a61379;
259 |     --td-brand-color-5: #cb2a96;
260 |     --td-brand-color-6: #ef45b3;
261 |     --td-brand-color-7: #ff7aca;
262 |     --td-brand-color-8: #ffafda;
263 |     --td-brand-color-9: #ffd8eb;
264 |     --td-brand-color-10: #fff0f6;
265 |     --td-warning-color-1: #4f2a1d;
266 |     --td-warning-color-2: #582f21;
267 |     --td-warning-color-3: #733c23;
268 |     --td-warning-color-4: #a75d2b;
269 |     --td-warning-color-5: #cf6e2d;
270 |     --td-warning-color-6: #dc7633;
271 |     --td-warning-color-7: #e8935c;
272 |     --td-warning-color-8: #ecbf91;
273 |     --td-warning-color-9: #eed7bf;
274 |     --td-warning-color-10: #f3e9dc;
275 |     --td-error-color-1: #472324;
276 |     --td-error-color-2: #5e2a2d;
277 |     --td-error-color-3: #703439;
278 |     --td-error-color-4: #83383e;
279 |     --td-error-color-5: #a03f46;
280 |     --td-error-color-6: #c64751;
281 |     --td-error-color-7: #de6670;
282 |     --td-error-color-8: #ec888e;
283 |     --td-error-color-9: #edb1b6;
284 |     --td-error-color-10: #eeced0;
285 |     --td-success-color-1: #193a2a;
286 |     --td-success-color-2: #1a4230;
287 |     --td-success-color-3: #17533d;
288 |     --td-success-color-4: #0d7a55;
289 |     --td-success-color-5: #059465;
290 |     --td-success-color-6: #43af8a;
291 |     --td-success-color-7: #46bf96;
292 |     --td-success-color-8: #80d2b6;
293 |     --td-success-color-9: #b4e1d3;
294 |     --td-success-color-10: #deede8;
295 |     --td-gray-color-1: #f3f3f3;
296 |     --td-gray-color-2: #eee;
297 |     --td-gray-color-3: #e7e7e7;
298 |     --td-gray-color-4: #dcdcdc;
299 |     --td-gray-color-5: #c5c5c5;
300 |     --td-gray-color-6: #a6a6a6;
301 |     --td-gray-color-7: #8b8b8b;
302 |     --td-gray-color-8: #777;
303 |     --td-gray-color-9: #5e5e5e;
304 |     --td-gray-color-10: #4b4b4b;
305 |     --td-gray-color-11: #383838;
306 |     --td-gray-color-12: #2c2c2c;
307 |     --td-gray-color-13: #242424;
308 |     --td-gray-color-14: #181818;
309 |     --td-bg-color-page: var(--td-gray-color-14);
310 |     --td-bg-color-container: var(--td-gray-color-13);
311 |     --td-bg-color-container-hover: var(--td-gray-color-12);
312 |     --td-bg-color-container-active: var(--td-gray-color-10);
313 |     --td-bg-color-container-select: var(--td-gray-color-9);
314 |     --td-bg-color-secondarycontainer: var(--td-gray-color-12);
315 |     --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
316 |     --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
317 |     --td-bg-color-component: var(--td-gray-color-11);
318 |     --td-bg-color-component-hover: var(--td-gray-color-10);
319 |     --td-bg-color-component-active: var(--td-gray-color-9);
320 |     --td-bg-color-component-disabled: var(--td-gray-color-12);
321 |     --td-component-stroke: var(--td-gray-color-11);
322 |     --td-component-border: var(--td-gray-color-9);
323 |     --td-font-white-1: rgba(255, 255, 255, 0.9);
324 |     --td-font-white-2: rgba(255, 255, 255, 0.55);
325 |     --td-font-white-3: rgba(255, 255, 255, 0.35);
326 |     --td-font-white-4: rgba(255, 255, 255, 0.22);
327 |     --td-font-gray-1: rgba(0, 0, 0, 0.9);
328 |     --td-font-gray-2: rgba(0, 0, 0, 0.6);
329 |     --td-font-gray-3: rgba(0, 0, 0, 0.4);
330 |     --td-font-gray-4: rgba(0, 0, 0, 0.26);
331 |     --td-gray-color-1: #f3f3f3;
332 |     --td-gray-color-2: #eee;
333 |     --td-gray-color-3: #e7e7e7;
334 |     --td-gray-color-4: #dcdcdc;
335 |     --td-gray-color-5: #c5c5c5;
336 |     --td-gray-color-6: #a6a6a6;
337 |     --td-gray-color-7: #8b8b8b;
338 |     --td-gray-color-8: #777;
339 |     --td-gray-color-9: #5e5e5e;
340 |     --td-gray-color-10: #4b4b4b;
341 |     --td-gray-color-11: #383838;
342 |     --td-gray-color-12: #2c2c2c;
343 |     --td-gray-color-13: #242424;
344 |     --td-gray-color-14: #181818;
345 |     --td-bg-color-page: var(--td-gray-color-14);
346 |     --td-bg-color-container: var(--td-gray-color-13);
347 |     --td-bg-color-container-hover: var(--td-gray-color-12);
348 |     --td-bg-color-container-active: var(--td-gray-color-10);
349 |     --td-bg-color-container-select: var(--td-gray-color-9);
350 |     --td-bg-color-secondarycontainer: var(--td-gray-color-12);
351 |     --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
352 |     --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
353 |     --td-bg-color-component: var(--td-gray-color-11);
354 |     --td-bg-color-component-hover: var(--td-gray-color-10);
355 |     --td-bg-color-component-active: var(--td-gray-color-9);
356 |     --td-bg-color-secondarycomponent: var(--td-gray-color-10);
357 |     --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
358 |     --td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
359 |     --td-bg-color-component-disabled: var(--td-gray-color-12);
360 |     --td-component-stroke: var(--td-gray-color-11);
361 |     --td-component-border: var(--td-gray-color-9);
362 |     --td-font-white-1: rgba(255, 255, 255, 0.9);
363 |     --td-font-white-2: rgba(255, 255, 255, 0.55);
364 |     --td-font-white-3: rgba(255, 255, 255, 0.35);
365 |     --td-font-white-4: rgba(255, 255, 255, 0.22);
366 |     --td-font-gray-1: rgba(0, 0, 0, 0.9);
367 |     --td-font-gray-2: rgba(0, 0, 0, 0.6);
368 |     --td-font-gray-3: rgba(0, 0, 0, 0.4);
369 |     --td-font-gray-4: rgba(0, 0, 0, 0.26);
370 |     --td-text-color-primary: var(--td-font-white-1);
371 |     --td-text-color-secondary: var(--td-font-white-2);
372 |     --td-text-color-placeholder: var(--td-font-white-3);
373 |     --td-text-color-disabled: var(--td-font-white-4);
374 |     --td-text-color-anti: #fff;
375 |     --td-text-color-brand: var(--td-brand-color);
376 |     --td-text-color-link: var(--td-brand-color);
377 |     --td-table-shadow-color: rgba(0, 0, 0, 55%);
378 |     --td-scrollbar-color: rgba(255, 255, 255, 10%);
379 |     --td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
380 |     --td-scroll-track-color: #333;
381 |     --td-bg-color-specialcomponent: transparent;
382 |     --td-border-level-1-color: var(--td-gray-color-11);
383 |     --td-border-level-2-color: var(--td-gray-color-9);
384 |     --td-mask-active: rgba(0, 0, 0, 0.4);
385 |     --td-mask-disabled: rgba(0, 0, 0, 0.6);
386 |     --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
387 |     --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
388 |     --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
389 |     --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
390 |       /* 圆角配置 */
391 |     --td-radius-small: 2px;
392 |     --td-radius-default: 3px;
393 |     --td-radius-medium: 6px;
394 |     --td-radius-large: 9px;
395 |     --td-radius-extraLarge: 12px;
396 |     --td-radius-round: 999px;
397 |     --td-radius-circle: 50%;
398 |   /* end 圆角配置 *//* 阴影配置 */
399 |     --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
400 |     --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
401 |     --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
402 |   /* end 阴影配置 *//* 尺寸配置 */
403 |     --td-size-1: 2px;
404 |     --td-size-2: 4px;
405 |     --td-size-3: 6px;
406 |     --td-size-4: 8px;
407 |     --td-size-5: 12px;
408 |     --td-size-6: 16px;
409 |     --td-size-7: 20px;
410 |     --td-size-8: 24px;
411 |     --td-size-9: 28px;
412 |     --td-size-10: 32px;
413 |     --td-size-11: 36px;
414 |     --td-size-12: 40px;
415 |     --td-size-13: 48px;
416 |     --td-size-14: 56px;
417 |     --td-size-15: 64px;
418 |     --td-size-16: 72px;
419 |     --td-comp-size-xxxs: var(--td-size-6);
420 |     --td-comp-size-xxs: var(--td-size-7);
421 |     --td-comp-size-xs: var(--td-size-8);
422 |     --td-comp-size-s: var(--td-size-9);
423 |     --td-comp-size-m: var(--td-size-10);
424 |     --td-comp-size-l: var(--td-size-11);
425 |     --td-comp-size-xl: var(--td-size-12);
426 |     --td-comp-size-xxl: var(--td-size-13);
427 |     --td-comp-size-xxxl: var(--td-size-14);
428 |     --td-comp-size-xxxxl: var(--td-size-15);
429 |     --td-comp-size-xxxxxl: var(--td-size-16);
430 |     --td-pop-padding-s: var(--td-size-2);
431 |     --td-pop-padding-m: var(--td-size-3);
432 |     --td-pop-padding-l: var(--td-size-4);
433 |     --td-pop-padding-xl: var(--td-size-5);
434 |     --td-pop-padding-xxl: var(--td-size-6);
435 |     --td-comp-paddingLR-xxs: var(--td-size-1);
436 |     --td-comp-paddingLR-xs: var(--td-size-2);
437 |     --td-comp-paddingLR-s: var(--td-size-4);
438 |     --td-comp-paddingLR-m: var(--td-size-5);
439 |     --td-comp-paddingLR-l: var(--td-size-6);
440 |     --td-comp-paddingLR-xl: var(--td-size-8);
441 |     --td-comp-paddingLR-xxl: var(--td-size-10);
442 |     --td-comp-paddingTB-xxs: var(--td-size-1);
443 |     --td-comp-paddingTB-xs: var(--td-size-2);
444 |     --td-comp-paddingTB-s: var(--td-size-4);
445 |     --td-comp-paddingTB-m: var(--td-size-5);
446 |     --td-comp-paddingTB-l: var(--td-size-6);
447 |     --td-comp-paddingTB-xl: var(--td-size-8);
448 |     --td-comp-paddingTB-xxl: var(--td-size-10);
449 |     --td-comp-margin-xxs: var(--td-size-1);
450 |     --td-comp-margin-xs: var(--td-size-2);
451 |     --td-comp-margin-s: var(--td-size-4);
452 |     --td-comp-margin-m: var(--td-size-5);
453 |     --td-comp-margin-l: var(--td-size-6);
454 |     --td-comp-margin-xl: var(--td-size-7);
455 |     --td-comp-margin-xxl: var(--td-size-8);
456 |     --td-comp-margin-xxxl: var(--td-size-10);
457 |     --td-comp-margin-xxxxl: var(--td-size-12);
458 |   /* end 尺寸配置 */
459 | }


--------------------------------------------------------------------------------