├── 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 | 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 | 6 | 7 | 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('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 | 44 | 45 | 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 113 | readonly createPinia: UnwrapRef 114 | readonly defineStore: UnwrapRef 115 | readonly getActivePinia: UnwrapRef 116 | readonly mapActions: UnwrapRef 117 | readonly mapGetters: UnwrapRef 118 | readonly mapState: UnwrapRef 119 | readonly mapStores: UnwrapRef 120 | readonly mapWritableState: UnwrapRef 121 | readonly setActivePinia: UnwrapRef 122 | readonly setMapStoreSuffix: UnwrapRef 123 | readonly storeToRefs: UnwrapRef 124 | readonly useThemeStore: UnwrapRef 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 | } --------------------------------------------------------------------------------