🎉 项目基础架构完成
This commit is contained in:
li-chx
commit
15c0a1de0e
Binary file not shown.
|
|
@ -0,0 +1,24 @@
|
|||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
/pnpm-lock.yaml
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 由于使用了 @nuxtjs/tailwindcss，tailwindcss 不是直接依赖，
|
||||
# 需要将依赖平铺在 node_modules 中，否则 VS Code 插件不会启用语法支持
|
||||
shamefully-hoist=true
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
{
|
||||
"i18n-ally.localesPaths": "lang", // 相对于项目根目录的语言环境目录路径
|
||||
"i18n-ally.sourceLanguage": "zh", // 根据此语言文件翻译其他语言文件的变量和内容
|
||||
"i18n-ally.displayLanguage": "zh", // 显示语言
|
||||
"i18n-ally.keystyle": "nested", // 翻译后变量格式 nested：嵌套式 flat:扁平式
|
||||
"i18n-ally.preferredDelimiter": "_",
|
||||
"i18n-ally.sortKeys": true,
|
||||
// "i18n-ally.extract.keygenStrategy": "random", // 生成密钥路径的策略。可以slug，random或empty
|
||||
// "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
|
||||
"i18n-ally.enabledParsers": ["json", "js", "ts"],
|
||||
"i18n-ally.keysInUse": [
|
||||
"view.progress_submenu.translated_keys",
|
||||
"view.progress_submenu.missing_keys",
|
||||
"view.progress_submenu.empty_keys"
|
||||
],
|
||||
"i18n-ally.theme.annotationMissingBorder": "#d37070",
|
||||
"i18n-ally.theme.annotationMissing": "#d37070",
|
||||
|
||||
"npm.packageManager": "pnpm",
|
||||
"editor.tabSize": 2,
|
||||
"files.eol": "\n",
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.expand": false,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.asax": "$(capture).*.cs, $(capture).*.vb",
|
||||
"*.ascx": "$(capture).*.cs, $(capture).*.vb",
|
||||
"*.ashx": "$(capture).*.cs, $(capture).*.vb",
|
||||
"*.aspx": "$(capture).*.cs, $(capture).*.vb",
|
||||
"*.bloc.dart": "$(capture).event.dart, $(capture).state.dart",
|
||||
"*.c": "$(capture).h",
|
||||
"*.cc": "$(capture).hpp, $(capture).h, $(capture).hxx",
|
||||
"*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.css, $(capture).component.scss, $(capture).component.sass, $(capture).component.less",
|
||||
"*.cpp": "$(capture).hpp, $(capture).h, $(capture).hxx",
|
||||
"*.cs": "$(capture).*.cs",
|
||||
"*.cshtml": "$(capture).cshtml.cs",
|
||||
"*.csproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
|
||||
"*.css": "$(capture).css.map, $(capture).*.css",
|
||||
"*.cxx": "$(capture).hpp, $(capture).h, $(capture).hxx",
|
||||
"*.dart": "$(capture).freezed.dart, $(capture).g.dart",
|
||||
"*.ex": "$(capture).html.eex, $(capture).html.heex, $(capture).html.leex",
|
||||
"*.go": "$(capture)_test.go",
|
||||
"*.java": "$(capture).class",
|
||||
"*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js",
|
||||
"*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx",
|
||||
"*.master": "$(capture).*.cs, $(capture).*.vb",
|
||||
"*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts",
|
||||
"*.pubxml": "$(capture).pubxml.user",
|
||||
"*.resx": "$(capture).*.resx, $(capture).designer.cs, $(capture).designer.vb",
|
||||
"*.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",
|
||||
"*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts",
|
||||
"*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx",
|
||||
"*.vbproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
|
||||
"*.vue": "$(capture).*.ts, $(capture).*.js, $(capture).story.vue",
|
||||
"*.xaml": "$(capture).xaml.cs",
|
||||
"+layout.svelte": "+layout.ts,+layout.ts,+layout.js,+layout.server.ts,+layout.server.js",
|
||||
"+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js ",
|
||||
".clang-tidy": ".clang-format, .clangd, compile_commands.json",
|
||||
".env": "*.env, .env.*, .envrc, env.d.ts",
|
||||
".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
|
||||
".project": ".classpath",
|
||||
"BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE",
|
||||
"CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json",
|
||||
"I*.cs": "$(capture).cs",
|
||||
"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.*",
|
||||
"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.*",
|
||||
"cargo.toml": ".clippy.toml, .rustfmt.toml, cargo.lock, clippy.toml, cross.toml, rust-toolchain.toml, rustfmt.toml",
|
||||
"composer.json": ".php*.cache, composer.lock, phpunit.xml*, psalm*.xml",
|
||||
"default.nix": "shell.nix",
|
||||
"deno.json*": "*.env, .env.*, .envrc, api-extractor.json, env.d.ts, import-map.json, import_map.json, jsconfig.*, tsconfig.*, tsdoc.*",
|
||||
"dockerfile": ".dockerignore, docker-compose.*, dockerfile*",
|
||||
"flake.nix": "flake.lock",
|
||||
"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.*",
|
||||
"gemfile": ".ruby-version, gemfile.lock",
|
||||
"go.mod": ".air*, go.sum",
|
||||
"go.work": "go.work.sum",
|
||||
"mix.exs": ".credo.exs, .dialyzer_ignore.exs, .formatter.exs, .iex.exs, .tool-versions, mix.lock",
|
||||
"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.*",
|
||||
"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.*",
|
||||
"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*",
|
||||
"pubspec.yaml": ".metadata, .packages, all_lint_rules.yaml, analysis_options.yaml, build.yaml, pubspec.lock, pubspec_overrides.yaml",
|
||||
"pyproject.toml": ".pdm.toml, pdm.lock, pyproject.toml",
|
||||
"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.*",
|
||||
"readme*": "authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*",
|
||||
"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.*",
|
||||
"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*",
|
||||
"shims.d.ts": "*.d.ts",
|
||||
"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.*",
|
||||
"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.*",
|
||||
"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.*"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
# TDesign Vue + Nuxt Starter
|
||||
|
||||
> [!NOTE]
|
||||
> 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) 分支。
|
||||
|
||||
|
||||
|
||||
本模板仓库使用 [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) (Vue 3) 和 [TDesign Vue Next](https://tdesign.tencent.com/vue-next) 组件库。
|
||||
|
||||
除此之外，还使用了以下依赖：
|
||||
|
||||
- [Tailwind CSS](https://tailwindcss.com/)
|
||||
- [Nuxt Color Mode](https://color-mode.nuxtjs.org/): 深色/浅色模式
|
||||
- ESLint + Prettier: 代码风格检查 + 美化
|
||||
- [unplugin-auto-import 和 unplugin-vue-components](https://unplugin.unjs.io): 自动导入 TDesign Vue Next 的组件以实现 [tree shaking](https://en.wikipedia.org/wiki/Tree_shaking)
|
||||
- pnpm v9
|
||||
|
||||
## 快速使用本模板
|
||||
|
||||
```bash
|
||||
# 使用 main 分支
|
||||
npx -y nuxi init -t gh:AnotiaWang/tdesign-vue-nuxt-starter <项目名>
|
||||
# 如要继续使用 Nuxt 3 版本，请使用 `nuxt3` 分支
|
||||
npx -y nuxi init -t gh:AnotiaWang/tdesign-vue-nuxt-starter#nuxt3 <项目名>
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
.
|
||||
├── app # 前端相关
|
||||
│ ├── components # 全局组件
|
||||
│ ├── hooks # 自定义 hooks
|
||||
│ ├── layouts # Nuxt 布局
|
||||
│ ├── pages # 页面，每个 SFC 代表一个页面，可用文件夹嵌套
|
||||
│ └── types # TypeScript 类型定义，目前包含了 unplugin 自动生成的类型
|
||||
├── node_modules
|
||||
├── public # 静态资源
|
||||
│ └── styles
|
||||
└── server # 后端相关
|
||||
```
|
||||
|
||||
## 自定义主题
|
||||
|
||||
TDesign 支持 [自定义主题](https://tdesign.tencent.com/vue-next/custom-theme)。按照以下步骤修改主题：
|
||||
|
||||
1. 在文档页面，点击页面底部的刷子图标，进入主题编辑器。调整完想要的效果后，点击下载按钮，保存 CSS 文件到本地。
|
||||
2. 将 CSS 文件移动到 `public/styles` 文件夹下，并命名为 `tdesign-theme-{name}.css`，其中 `name` 是你给主题取的名字。
|
||||
3. 在 `hooks/useTheme.ts` 中，修改:
|
||||
|
||||
```ts
|
||||
type Theme = 'default' | 'test' // 添加/修改成你自己的主题名
|
||||
```
|
||||
|
||||
如有需要，可以配置 defineStore 部分中的 `theme` 变量为你想要的初始主题，默认为 `default`。
|
||||
|
||||
然后就可以在代码中调用了：
|
||||
|
||||
```ts
|
||||
const theme = useThemeStore()
|
||||
|
||||
theme.setTheme('default')
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
pnpm preview
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const colorMode = useColorMode();
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
if (colorMode.value === 'dark') {
|
||||
document.documentElement.setAttribute('theme-mode', 'dark');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('theme-mode');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import type { TableProps, TableRowData } from 'tdesign-vue-next';
|
||||
|
||||
const emit = defineEmits(['pageChange', 'onRowClick']);
|
||||
|
||||
const data = defineModel<unknown>('data');
|
||||
const columns = defineModel<TableProps['columns']>('columns');
|
||||
const loading = defineModel<boolean>('loading');
|
||||
const pagination = defineModel<TableProps['pagination']>('pagination');
|
||||
|
||||
async function onPageChange(pageInfo: { current: number; pageSize: number }) {
|
||||
console.log('Page change');
|
||||
console.log(pageInfo);
|
||||
emit('pageChange', pageInfo);
|
||||
}
|
||||
function onRowClick(x: any) {
|
||||
emit('onRowClick', x);
|
||||
}
|
||||
function onSelectChange() {
|
||||
console.log('Select change');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<t-table
|
||||
row-key="index"
|
||||
:data="data as TableRowData[]"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:table-layout="'auto'"
|
||||
:bordered="true"
|
||||
:stripe="true"
|
||||
:lazy-load="true"
|
||||
:loading="loading"
|
||||
@page-change="onPageChange"
|
||||
@select-change="onSelectChange"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
</t-table>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
type Theme = 'default' | 'test' | 'self';
|
||||
|
||||
const themeStorageKey = 'tdesign-vue-next-theme';
|
||||
|
||||
export const useThemeStore = defineStore('theme', () => {
|
||||
const theme = ref<Theme>('default');
|
||||
|
||||
const setTheme = (_theme: Theme) => {
|
||||
theme.value = _theme;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const storageValue = localStorage.getItem(themeStorageKey);
|
||||
|
||||
if (storageValue) theme.value = storageValue as Theme;
|
||||
const styleElement = document.createElement('link');
|
||||
|
||||
watch(theme, () => {
|
||||
localStorage.setItem(themeStorageKey, theme.value);
|
||||
styleElement.type = 'text/css';
|
||||
styleElement.rel = 'stylesheet';
|
||||
styleElement.href = `/styles/tdesign-theme-${theme.value}.css?t=${Date.now()}`;
|
||||
if (styleElement.parentElement === document.head) {
|
||||
document.head.removeChild(styleElement);
|
||||
}
|
||||
document.head.appendChild(styleElement);
|
||||
});
|
||||
});
|
||||
|
||||
return { theme, setTheme };
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="w-screen h-screen bg-white dark:bg-black dark:text-white transition-all"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<script setup lang="ts">
|
||||
import resolveConfig from 'tailwindcss/resolveConfig';
|
||||
import tailwindConfig from '~/tailwind.config';
|
||||
import type { Config } from 'tailwindcss';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
|
||||
const theme = useThemeStore();
|
||||
const config = resolveConfig(tailwindConfig as Config);
|
||||
const { collapsed, manualCollapsed } = storeToRefs(useSystemStore());
|
||||
const lg = parseFloat(
|
||||
config.theme.screens.lg.substring(0, config.theme.screens.lg.length - 2),
|
||||
);
|
||||
const modeName = ref('sunny');
|
||||
// watch()
|
||||
// computed(())
|
||||
watch(useWindowSize().width, (val) => {
|
||||
console.log(val);
|
||||
console.log(collapsed.value);
|
||||
console.log(manualCollapsed.value);
|
||||
setCollapsed(val);
|
||||
});
|
||||
function setCollapsed(val: number) {
|
||||
if ((val > lg && !collapsed.value) || (val < lg && collapsed.value)) {
|
||||
manualCollapsed.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (val > lg && collapsed.value) {
|
||||
if (manualCollapsed.value) return;
|
||||
collapsed.value = false;
|
||||
} else if (val < lg && !collapsed.value) {
|
||||
if (manualCollapsed.value) return;
|
||||
collapsed.value = true;
|
||||
}
|
||||
}
|
||||
function changeCollapsed() {
|
||||
collapsed.value = !collapsed.value;
|
||||
manualCollapsed.value = true;
|
||||
}
|
||||
const { currentPage } = storeToRefs(useSystemStore());
|
||||
|
||||
function changeMode() {
|
||||
const x = useColorMode();
|
||||
console.log(x.preference);
|
||||
console.log(x.value);
|
||||
if (x.preference === 'light') {
|
||||
x.preference = 'dark';
|
||||
modeName.value = 'moon';
|
||||
} else if (x.preference === 'dark') {
|
||||
x.preference = 'sepia';
|
||||
modeName.value = 'tea';
|
||||
} else {
|
||||
x.preference = 'light';
|
||||
modeName.value = 'sunny';
|
||||
}
|
||||
}
|
||||
function changeTheme() {
|
||||
console.log(theme.theme);
|
||||
if (theme.theme === 'default') {
|
||||
theme.setTheme('test');
|
||||
} else if (theme.theme === 'test') {
|
||||
theme.setTheme('self');
|
||||
} else if (theme.theme === 'self') {
|
||||
theme.setTheme('default');
|
||||
}
|
||||
}
|
||||
|
||||
function backToLogin() {
|
||||
const router = useRouter();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
watch(currentPage, (val) => {
|
||||
const router = useRouter();
|
||||
router.push('/base/' + val);
|
||||
});
|
||||
|
||||
async function sendTest() {
|
||||
try {
|
||||
// const response = await $fetch('/api/login/test', {
|
||||
// method: 'GET',
|
||||
// });
|
||||
$fetch('/api/file/test', { method: 'GET' }).catch(() => {
|
||||
console.log('error');
|
||||
$fetch('/api/login/login', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
username: 'admin',
|
||||
password: 'password',
|
||||
},
|
||||
}).then(async () => {
|
||||
const result = await $fetch('/api/file/test', { method: 'GET' });
|
||||
console.log(result);
|
||||
});
|
||||
});
|
||||
// const response = await $fetch('/api/login/login', {
|
||||
// method: 'POST',
|
||||
// body: {
|
||||
// username: 'admin',
|
||||
// password: 'password',
|
||||
// },
|
||||
// });
|
||||
// console.log(response);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
onMounted(() => setCollapsed(useWindowSize().width.value));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<t-layout class="h-full">
|
||||
<t-header>
|
||||
<t-head-menu value="item1" height="120px">
|
||||
<span class="text-xl">李晨鑫 的 Web 实验</span>
|
||||
<template #operations>
|
||||
<a @click="changeMode">
|
||||
<t-icon class="t-menu__operations-icon" :name="modeName" />
|
||||
</a>
|
||||
<a @click="changeTheme">
|
||||
<t-icon class="t-menu__operations-icon" name="fill-color" />
|
||||
</a>
|
||||
<a @click="backToLogin">
|
||||
<t-icon class="t-menu__operations-icon" name="rollback" />
|
||||
</a>
|
||||
<t-button @click="sendTest" />
|
||||
</template>
|
||||
<!-- <template #logo>-->
|
||||
<!-- <img-->
|
||||
<!-- width="136"-->
|
||||
<!-- class="logo"-->
|
||||
<!-- src="https://www.tencent.com/img/index/menu_logo_hover.png"-->
|
||||
<!-- alt="logo"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<!-- <t-menu-item value="item1"> 已选内容 </t-menu-item>-->
|
||||
<!-- <t-menu-item value="item2"> 菜单内容一 </t-menu-item>-->
|
||||
<!-- <t-menu-item value="item3"> 菜单内容二 </t-menu-item>-->
|
||||
<!-- <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>-->
|
||||
<!-- <template #operations>-->
|
||||
<!-- <a href="javascript:;"-->
|
||||
<!-- ><t-icon class="t-menu__operations-icon" name="search"-->
|
||||
<!-- /></a>-->
|
||||
<!-- <a href="javascript:;"-->
|
||||
<!-- ><t-icon class="t-menu__operations-icon" name="notification-filled"-->
|
||||
<!-- /></a>-->
|
||||
<!-- <a href="javascript:;"-->
|
||||
<!-- ><t-icon class="t-menu__operations-icon" name="index"-->
|
||||
<!-- /></a>-->
|
||||
<!-- </template>-->
|
||||
</t-head-menu>
|
||||
</t-header>
|
||||
<t-layout :class="{ collapsed: collapsed, 'non-collapsed': !collapsed }">
|
||||
<t-aside class="border-t border-gray-100 dark:border-gray-700">
|
||||
<t-menu
|
||||
v-model="currentPage"
|
||||
theme="light"
|
||||
value="dashboard"
|
||||
height="550px"
|
||||
:collapsed="collapsed"
|
||||
>
|
||||
<t-menu-item value="home">
|
||||
<template #icon>
|
||||
<t-icon name="home" />
|
||||
</template>
|
||||
首页
|
||||
</t-menu-item>
|
||||
<t-submenu value="resource" title="功能菜单">
|
||||
<template #icon>
|
||||
<t-icon name="server" />
|
||||
</template>
|
||||
<t-menu-item value="peopleManage">
|
||||
<span>用户管理</span>
|
||||
</t-menu-item>
|
||||
<t-menu-item value="fileManage">
|
||||
<span>文件管理</span>
|
||||
</t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="root">
|
||||
<template #icon>
|
||||
<t-icon name="root-list" />
|
||||
</template>
|
||||
导航三
|
||||
</t-menu-item>
|
||||
<t-menu-item value="control-platform">
|
||||
<template #icon>
|
||||
<t-icon name="control-platform" />
|
||||
</template>
|
||||
导航四
|
||||
</t-menu-item>
|
||||
<t-menu-item value="precise-monitor">
|
||||
<template #icon>
|
||||
<t-icon name="precise-monitor" />
|
||||
</template>
|
||||
导航五
|
||||
</t-menu-item>
|
||||
<t-menu-item value="mail">
|
||||
<template #icon>
|
||||
<t-icon name="mail" />
|
||||
</template>
|
||||
导航六
|
||||
</t-menu-item>
|
||||
<t-menu-item value="user-circle">
|
||||
<template #icon>
|
||||
<t-icon name="user-circle" />
|
||||
</template>
|
||||
导航七
|
||||
</t-menu-item>
|
||||
<t-menu-item value="play-circle">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
导航八
|
||||
</t-menu-item>
|
||||
<t-menu-item value="edit1">
|
||||
<template #icon>
|
||||
<t-icon name="edit-1" />
|
||||
</template>
|
||||
导航九
|
||||
</t-menu-item>
|
||||
<template #operations>
|
||||
<t-button
|
||||
class="t-demo-collapse-btn"
|
||||
variant="text"
|
||||
shape="square"
|
||||
@click="changeCollapsed"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="view-list" />
|
||||
</template>
|
||||
</t-button>
|
||||
</template>
|
||||
</t-menu>
|
||||
</t-aside>
|
||||
<t-layout>
|
||||
<t-content class="overflow-auto">
|
||||
<NuxtPage />
|
||||
</t-content>
|
||||
<t-footer class="m-auto">
|
||||
Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights
|
||||
Reserved
|
||||
</t-footer>
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.collapsed {
|
||||
:deep(.t-layout__sider) {
|
||||
@apply w-20;
|
||||
}
|
||||
}
|
||||
.non-collapsed {
|
||||
:deep(.t-layout__sider) {
|
||||
@apply w-60;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
const x = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<div class="flex md:flex-row flex-col">
|
||||
<div class="flex-[1] m-2 max-h-80">
|
||||
<div class="flex flex-row md:flex-col justify-center">
|
||||
<span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
|
||||
>欢迎 {{ useUserStore().userName }}
|
||||
</span>
|
||||
<t-image
|
||||
src="/avatar.jpg"
|
||||
alt="头像"
|
||||
shape="circle"
|
||||
:fit="'contain'"
|
||||
class="max-h-80 max-w-80 m-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-[2] m-2">
|
||||
<t-calendar> </t-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script setup lang="tsx">
|
||||
import SuperTable from '~/components/SuperTable.vue';
|
||||
import type { TableProps } from 'tdesign-vue-next';
|
||||
|
||||
const pagination = ref<TableProps['pagination']>({
|
||||
defaultPageSize: 10,
|
||||
total: 100,
|
||||
defaultCurrent: 1,
|
||||
});
|
||||
const columns = ref<TableProps['columns']>([
|
||||
{
|
||||
colKey: 'index',
|
||||
title: '序号',
|
||||
},
|
||||
{
|
||||
colKey: 'date',
|
||||
title: '日期',
|
||||
},
|
||||
{
|
||||
colKey: 'name',
|
||||
title: '姓名',
|
||||
},
|
||||
{
|
||||
colKey: 'province',
|
||||
title: '省份',
|
||||
},
|
||||
{
|
||||
colKey: 'city',
|
||||
title: '市区',
|
||||
},
|
||||
{
|
||||
colKey: 'address',
|
||||
title: '地址',
|
||||
},
|
||||
{
|
||||
colKey: '',
|
||||
title: '邮编',
|
||||
},
|
||||
{
|
||||
colKey: 'operator',
|
||||
title: '操作',
|
||||
cell: (_, { row }) => (
|
||||
<div>
|
||||
<t-button onClick={() => editUser(row)}>编辑</t-button>
|
||||
<t-button onClick={() => deleteUser(row)}>删除</t-button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]);
|
||||
const data = ref([]);
|
||||
for (let i = 0; i < 30; i++) {
|
||||
data.value.push({
|
||||
index: i + 1,
|
||||
date: '2023-10-01',
|
||||
name: 'John Doe',
|
||||
province: 'Province A',
|
||||
city: 'City A',
|
||||
address: 'Address A',
|
||||
postalCode: '123456',
|
||||
} as never);
|
||||
}
|
||||
|
||||
function editUser(row: never) {}
|
||||
|
||||
function deleteUser(row: never) {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between p-4">
|
||||
<t-button>新增</t-button>
|
||||
<t-input placeholder="搜索" clearable class="max-w-60">
|
||||
<template #suffixIcon>
|
||||
<search-icon :style="{ cursor: 'pointer' }" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
<super-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:loading="false"
|
||||
:pagination="pagination"
|
||||
></super-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center px-4 py-10 gap-y-8 h-full">
|
||||
<h1 class="text-[26px]">Nuxt & TDesign Vue Next</h1>
|
||||
<div class="space-x-2">
|
||||
<TButton
|
||||
ghost
|
||||
@click="
|
||||
$colorMode.preference =
|
||||
$colorMode.preference === 'light' ? 'dark' : 'light'
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<TIcon
|
||||
class="mr-1"
|
||||
:name="$colorMode.preference === 'light' ? 'heart' : 'heart-filled'"
|
||||
/>
|
||||
当前主题：{{ $colorMode.preference === 'light' ? 'Light' : 'Dark' }}
|
||||
</template>
|
||||
</TButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-4">
|
||||
<TButton @click="theme.setTheme('default')">默认主题</TButton>
|
||||
<TButton @click="theme.setTheme('test')">主题 1</TButton>
|
||||
<TButton @click="theme.setTheme('self')">主题 2</TButton>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 sm:flex flex-row items-center gap-2">
|
||||
<TButton>按钮示例</TButton>
|
||||
<TButton theme="warning" loading>按钮示例</TButton>
|
||||
<TButton theme="danger" disabled>按钮示例</TButton>
|
||||
<TButton theme="success" variant="outline">按钮示例</TButton>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4">
|
||||
<!-- tag-name 和 TagName 写法都可以 -->
|
||||
<t-switch v-model="isLoading" class="flex-none" size="large">
|
||||
<template #label> 加载中 </template>
|
||||
</t-switch>
|
||||
<TTagInput v-model="tags" drag-sort clearable>
|
||||
<template #label> 你喜欢的前端框架： </template>
|
||||
</TTagInput>
|
||||
</div>
|
||||
<TAlert :theme="alertTheme" close>{{ date }}</TAlert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const theme = useThemeStore();
|
||||
|
||||
const tags = ref(['Vue', 'React', 'Angular']);
|
||||
const isLoading = ref(true);
|
||||
const alertTheme = ref<'success' | 'warning' | 'error' | 'info'>('success');
|
||||
let date: Date;
|
||||
|
||||
onMounted(() => {
|
||||
date = new Date();
|
||||
setInterval(() => {
|
||||
isLoading.value = !isLoading.value;
|
||||
if (alertTheme.value === 'success') {
|
||||
alertTheme.value = 'warning';
|
||||
} else if (alertTheme.value === 'warning') {
|
||||
alertTheme.value = 'error';
|
||||
} else if (alertTheme.value === 'error') {
|
||||
alertTheme.value = 'info';
|
||||
} else {
|
||||
alertTheme.value = 'success';
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<script setup lang="ts">
|
||||
import { PageType } from '~/stores/login';
|
||||
|
||||
const store = useLoginStore();
|
||||
const { currentType, loginForm } = storeToRefs(store);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<button class="w-56 h-10 bg-qqColor text-white rounded-md"
|
||||
><img class="max-h-7 inline" src="/QQ.png" alt="QQ logo" />
|
||||
<span class="text-white">QQ登录</span>
|
||||
</button>
|
||||
<button class="w-56 h-10 bg-wechatColor rounded-md"
|
||||
><img
|
||||
class="max-h-7 inline"
|
||||
src="public/微信.png"
|
||||
alt="wechat logo"
|
||||
/>
|
||||
<span class="text-white">微信登录</span>
|
||||
</button>
|
||||
<button class="w-56 h-10 bg-alipayColor rounded-md"
|
||||
><img
|
||||
class="max-h-7 inline"
|
||||
src="public/支付,支付宝.png"
|
||||
alt="alipay logo"
|
||||
/>
|
||||
<span class="text-black">支付宝登录</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="relative hidden md:flex flex-col items-center gap-4 w-2/5 max-w-24 select-none"
|
||||
>
|
||||
<div class="w-1 h-44 bg-gray-200"></div>
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-gray-200 w-10 h-10 bg-loginBG"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1"
|
||||
>or
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4 mt-3 md:mt-0">
|
||||
<TInput
|
||||
v-model="loginForm.username"
|
||||
class="w-56"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
<TInput
|
||||
v-model="loginForm.password"
|
||||
class="w-56"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
<TButton class="w-56" @click="store.login">登录</TButton>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
|
||||
>
|
||||
<button class="text-white" @click="currentType = PageType.register"
|
||||
>注册
|
||||
</button>
|
||||
<button class="text-white" @click="currentType = PageType.reset"
|
||||
>忘记密码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<script setup lang="ts">
|
||||
import type {
|
||||
FormProps,
|
||||
UploadInstanceFunctions,
|
||||
FormInstanceFunctions,
|
||||
} from 'tdesign-vue-next';
|
||||
import type { IAPIResponse } from '~/utils/APIResponse';
|
||||
const store = useLoginStore();
|
||||
const { registerForm, currentType } = storeToRefs(store);
|
||||
const rules: FormProps['rules'] = {
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ email: true, message: '请输入邮箱', trigger: 'change' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
passwordRepeat: [
|
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (val) => val === registerForm.value.password,
|
||||
message: '两次输入密码不一致',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
birth: [{ required: true, message: '请输入出生日期', trigger: 'change' }],
|
||||
};
|
||||
const uploadImage = ref<UploadInstanceFunctions>();
|
||||
const formInstance = ref<FormInstanceFunctions>();
|
||||
async function submitForm() {
|
||||
console.log(formInstance.value);
|
||||
if (!formInstance.value) return;
|
||||
const result = await formInstance.value.validate();
|
||||
if (typeof result === 'boolean' && result) {
|
||||
formInstance.value.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="flex md:flex-row flex-col items-center gap-4 justify-around">
|
||||
<div class="flex flex-col items-center gap-4 max-w-96">
|
||||
<t-form
|
||||
ref="formInstance"
|
||||
:label-width="10"
|
||||
:data="registerForm"
|
||||
:rules="rules"
|
||||
@submit="() => store.register()"
|
||||
>
|
||||
<t-form-item name="email">
|
||||
<TInput v-model="registerForm.email" placeholder="请输入邮箱" />
|
||||
</t-form-item>
|
||||
<t-form-item name="username">
|
||||
<TInput
|
||||
v-model="registerForm.username"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item name="password">
|
||||
<TInput
|
||||
v-model="registerForm.password"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item name="passwordRepeat">
|
||||
<TInput
|
||||
v-model="registerForm.passwordRepeat"
|
||||
placeholder="请再次输入密码"
|
||||
type="password"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item name="birth">
|
||||
<TDatePicker
|
||||
v-model="registerForm.birth"
|
||||
placeholder="请输入出生日期"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
|
||||
<TUpload
|
||||
ref="uploadImage"
|
||||
action="/api/file/uploadAvatar"
|
||||
class="set-width-length bg-white bg-opacity-70"
|
||||
theme="custom"
|
||||
accept="image/*"
|
||||
:draggable="true"
|
||||
:format-response="
|
||||
(res) => {
|
||||
res = res as IAPIResponse<string>;
|
||||
if (res.code === 200) {
|
||||
registerForm.avatarURL = res.data;
|
||||
return { url: res.data };
|
||||
}
|
||||
return { fail: res.message };
|
||||
}
|
||||
"
|
||||
>
|
||||
<div v-if="registerForm.avatarURL" class="aspect-square h-full">
|
||||
<t-image
|
||||
:src="registerForm.avatarURL"
|
||||
class="w-40 h-40 object-cover rounded-md"
|
||||
fit="contain"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="text-blue-400"> 点击上传头像</span>
|
||||
<span> / 拖拽到此区域 </span>
|
||||
</div>
|
||||
</TUpload>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
|
||||
>
|
||||
<button class="text-white" @click="submitForm">注册用户</button>
|
||||
<button class="text-white" @click="currentType = PageType.login"
|
||||
>返回登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.t-upload__dragger),
|
||||
.set-width-length {
|
||||
@apply w-64;
|
||||
@apply h-40;
|
||||
@apply p-0;
|
||||
@apply border-0;
|
||||
}
|
||||
// {
|
||||
// @apply w-40;
|
||||
// @apply h-40;
|
||||
//}
|
||||
:deep(.t-date-picker) {
|
||||
@apply w-full;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
const store = useLoginStore();
|
||||
const { currentType } = storeToRefs(store);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<!-- <TInput class="w-56" placeholder="请输入邮箱" />-->
|
||||
<!-- <TButton class="w-56">发送验证码</TButton>-->
|
||||
<!-- <TInput class="w-56" placeholder="请输入验证码" />-->
|
||||
<!-- <TInput class="w-56" type="password" placeholder="请输入新密码" />-->
|
||||
<!-- <TButton class="w-56">确认</TButton>-->
|
||||
<TInput class="w-56" placeholder="用户名" />
|
||||
<TInput class="w-56" placeholder="旧密码" />
|
||||
</div>
|
||||
<div
|
||||
class="hidden md:flex flex-col items-center gap-4 w-2/5 max-w-24 select-none"
|
||||
>
|
||||
<div class="w-1 h-44 bg-gray-200"></div>
|
||||
<!-- <div-->
|
||||
<!-- class="hidden absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-gray-200 w-10 h-10 bg-loginBG"-->
|
||||
<!-- >-->
|
||||
<!--<!– <span–>-->
|
||||
<!--<!– class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1"–>-->
|
||||
<!--<!– >or–>-->
|
||||
<!--<!– </span>–>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<TInput class="w-56" placeholder="新密码" />
|
||||
<TInput class="w-56" placeholder="确认新密码" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
|
||||
>
|
||||
<button class="text-white" @click="store.register()">修改密码</button>
|
||||
<button class="text-white" @click="currentType = PageType.login"
|
||||
>返回登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import LoginPart from '~/pages/login/components/LoginPart.vue';
|
||||
import RegisterPart from '~/pages/login/components/RegisterPart.vue';
|
||||
import ResetPart from '~/pages/login/components/ResetPart.vue';
|
||||
import { PageType } from '~/stores/login';
|
||||
|
||||
const store = useLoginStore();
|
||||
const { currentType } = storeToRefs(store);
|
||||
// watch(currentType, (val) => {
|
||||
// console.log(val);
|
||||
// });
|
||||
|
||||
onMounted(() => {
|
||||
// useThemeStore().setTheme('test');
|
||||
// useThemeStore().setTheme('self');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex justify-center items-center min-h-screen bg-[url('public/fll.jpg')] bg-cover bg-no-repeat bg-fixed bg-center"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center gap-4 w-3/5 md:w-4/5 max-w-2xl bg-loginBG pt-4 rounded-md bg-opacity-30 dark:bg-darkLoginBG dark:bg-opacity-40"
|
||||
>
|
||||
<h1 class="text-3xl font-bold">{{ store.getTypeName }}</h1>
|
||||
<LoginPart v-if="currentType === PageType.login" />
|
||||
<register-part v-else-if="currentType === PageType.register" />
|
||||
<reset-part v-else-if="currentType === PageType.reset" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
interface RegisterData {
|
||||
email: string;
|
||||
username: string;
|
||||
password: string;
|
||||
passwordRepeat: string;
|
||||
birth: string;
|
||||
avatarURL: string;
|
||||
}
|
||||
|
||||
interface LoginData {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
interface resetData {
|
||||
username: string;
|
||||
oldPassword: string;
|
||||
password: string;
|
||||
passwordRepeat: string;
|
||||
}
|
||||
|
||||
export enum PageType {
|
||||
'login',
|
||||
'register',
|
||||
'reset',
|
||||
}
|
||||
|
||||
export interface LoginStore {
|
||||
loginForm: LoginData;
|
||||
registerForm: RegisterData;
|
||||
resetForm: resetData;
|
||||
currentType: PageType;
|
||||
}
|
||||
|
||||
export const useLoginStore = defineStore('Login', {
|
||||
state: (): LoginStore => ({
|
||||
loginForm: { username: '', password: '' },
|
||||
registerForm: {
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
passwordRepeat: '',
|
||||
birth: '',
|
||||
avatarURL: '',
|
||||
},
|
||||
resetForm: {
|
||||
username: '',
|
||||
oldPassword: '',
|
||||
password: '',
|
||||
passwordRepeat: '',
|
||||
},
|
||||
currentType: PageType.login,
|
||||
}),
|
||||
actions: {
|
||||
async login() {
|
||||
console.log(this.loginForm);
|
||||
const router = useRouter();
|
||||
await router.push('/base/home');
|
||||
},
|
||||
async register() {
|
||||
console.log(this.registerForm);
|
||||
},
|
||||
async reset() {
|
||||
console.log(this.resetForm);
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getTypeName: (state) => {
|
||||
switch (state.currentType) {
|
||||
case PageType.login:
|
||||
return '登录';
|
||||
case PageType.register:
|
||||
return '注册';
|
||||
case PageType.reset:
|
||||
return '重置密码';
|
||||
default:
|
||||
console.log('未知');
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
export interface SystemStore {
|
||||
currentPage: string;
|
||||
collapsed: boolean;
|
||||
manualCollapsed: boolean;
|
||||
}
|
||||
export const useSystemStore = defineStore('System', {
|
||||
state: (): SystemStore => ({
|
||||
currentPage: 'dashboard',
|
||||
collapsed: false,
|
||||
manualCollapsed: false,
|
||||
}),
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export interface UserState {
|
||||
userId: string;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
userAvatar: string;
|
||||
}
|
||||
export const useUserStore = defineStore('User', {
|
||||
state: (): UserState => ({
|
||||
userId: '',
|
||||
userName: '李晨鑫',
|
||||
userEmail: '',
|
||||
userAvatar: '',
|
||||
}),
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// tailwind config file
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
|
||||
export default {
|
||||
mode: 'jit',
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
wechatColor: '#79b542',
|
||||
qqColor: '#2f85c4',
|
||||
alipayColor: '#e9ebea',
|
||||
loginBG: '#f2f2f2',
|
||||
darkLoginBG: '#1a1a1a',
|
||||
},
|
||||
letterSpacing: {
|
||||
doublewidest: '.2em',
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '800px',
|
||||
lg: '1000px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({ addUtilities }) {
|
||||
addUtilities({
|
||||
'.scrollbar-hide': {
|
||||
/* IE and Edge */
|
||||
'-ms-overflow-style': 'none',
|
||||
|
||||
/* Firefox */
|
||||
'scrollbar-width': 'none',
|
||||
|
||||
/* Safari and Chrome */
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
],
|
||||
content: [
|
||||
'./app.vue',
|
||||
'./components/**/*.{vue,js,ts}',
|
||||
'./layouts/**/*.vue',
|
||||
'./pages/**/*.vue',
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const APIResponse: typeof import('../utils/APIResponse')['APIResponse']
|
||||
const ApolloError: (typeof import('@apollo/client/core'))['ApolloError']
|
||||
const EffectScope: (typeof import('vue'))['EffectScope']
|
||||
const NetworkStatus: (typeof import('@apollo/client/core'))['NetworkStatus']
|
||||
const PageType: typeof import('../stores/login')['PageType']
|
||||
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||
const computed: (typeof import('vue'))['computed']
|
||||
const createApp: (typeof import('vue'))['createApp']
|
||||
const createPinia: typeof import('pinia')['createPinia']
|
||||
const customRef: (typeof import('vue'))['customRef']
|
||||
const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
|
||||
const defineComponent: (typeof import('vue'))['defineComponent']
|
||||
const defineStore: typeof import('pinia')['defineStore']
|
||||
const effectScope: (typeof import('vue'))['effectScope']
|
||||
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||
const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
|
||||
const getCurrentScope: (typeof import('vue'))['getCurrentScope']
|
||||
const h: (typeof import('vue'))['h']
|
||||
const inject: (typeof import('vue'))['inject']
|
||||
const isProxy: (typeof import('vue'))['isProxy']
|
||||
const isReactive: (typeof import('vue'))['isReactive']
|
||||
const isReadonly: (typeof import('vue'))['isReadonly']
|
||||
const isRef: (typeof import('vue'))['isRef']
|
||||
const mapActions: typeof import('pinia')['mapActions']
|
||||
const mapGetters: typeof import('pinia')['mapGetters']
|
||||
const mapState: typeof import('pinia')['mapState']
|
||||
const mapStores: typeof import('pinia')['mapStores']
|
||||
const mapWritableState: typeof import('pinia')['mapWritableState']
|
||||
const markRaw: (typeof import('vue'))['markRaw']
|
||||
const nextTick: (typeof import('vue'))['nextTick']
|
||||
const onActivated: (typeof import('vue'))['onActivated']
|
||||
const onAddToFavorites: (typeof import('@dcloudio/uni-app'))['onAddToFavorites']
|
||||
const onBackPress: (typeof import('@dcloudio/uni-app'))['onBackPress']
|
||||
const onBeforeMount: (typeof import('vue'))['onBeforeMount']
|
||||
const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
|
||||
const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
|
||||
const onDeactivated: (typeof import('vue'))['onDeactivated']
|
||||
const onError: (typeof import('@dcloudio/uni-app'))['onError']
|
||||
const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
|
||||
const onHide: (typeof import('@dcloudio/uni-app'))['onHide']
|
||||
const onLaunch: (typeof import('@dcloudio/uni-app'))['onLaunch']
|
||||
const onLoad: (typeof import('@dcloudio/uni-app'))['onLoad']
|
||||
const onMounted: (typeof import('vue'))['onMounted']
|
||||
const onNavigationBarButtonTap: (typeof import('@dcloudio/uni-app'))['onNavigationBarButtonTap']
|
||||
const onNavigationBarSearchInputChanged: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputChanged']
|
||||
const onNavigationBarSearchInputClicked: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputClicked']
|
||||
const onNavigationBarSearchInputConfirmed: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputConfirmed']
|
||||
const onNavigationBarSearchInputFocusChanged: (typeof import('@dcloudio/uni-app'))['onNavigationBarSearchInputFocusChanged']
|
||||
const onPageNotFound: (typeof import('@dcloudio/uni-app'))['onPageNotFound']
|
||||
const onPageScroll: (typeof import('@dcloudio/uni-app'))['onPageScroll']
|
||||
const onPullDownRefresh: (typeof import('@dcloudio/uni-app'))['onPullDownRefresh']
|
||||
const onReachBottom: (typeof import('@dcloudio/uni-app'))['onReachBottom']
|
||||
const onReady: (typeof import('@dcloudio/uni-app'))['onReady']
|
||||
const onRenderTracked: (typeof import('vue'))['onRenderTracked']
|
||||
const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
|
||||
const onResize: (typeof import('@dcloudio/uni-app'))['onResize']
|
||||
const onScopeDispose: (typeof import('vue'))['onScopeDispose']
|
||||
const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
|
||||
const onShareAppMessage: (typeof import('@dcloudio/uni-app'))['onShareAppMessage']
|
||||
const onShareTimeline: (typeof import('@dcloudio/uni-app'))['onShareTimeline']
|
||||
const onShow: (typeof import('@dcloudio/uni-app'))['onShow']
|
||||
const onTabItemTap: (typeof import('@dcloudio/uni-app'))['onTabItemTap']
|
||||
const onThemeChange: (typeof import('@dcloudio/uni-app'))['onThemeChange']
|
||||
const onUnhandledRejection: (typeof import('@dcloudio/uni-app'))['onUnhandledRejection']
|
||||
const onUnload: (typeof import('@dcloudio/uni-app'))['onUnload']
|
||||
const onUnmounted: (typeof import('vue'))['onUnmounted']
|
||||
const onUpdated: (typeof import('vue'))['onUpdated']
|
||||
const produce: (typeof import('immer'))['produce']
|
||||
const provide: (typeof import('vue'))['provide']
|
||||
const reactive: (typeof import('vue'))['reactive']
|
||||
const readonly: (typeof import('vue'))['readonly']
|
||||
const ref: (typeof import('vue'))['ref']
|
||||
const resolveComponent: (typeof import('vue'))['resolveComponent']
|
||||
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||
const shallowReactive: (typeof import('vue'))['shallowReactive']
|
||||
const shallowReadonly: (typeof import('vue'))['shallowReadonly']
|
||||
const shallowRef: (typeof import('vue'))['shallowRef']
|
||||
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||
const toRaw: (typeof import('vue'))['toRaw']
|
||||
const toRef: (typeof import('vue'))['toRef']
|
||||
const toRefs: (typeof import('vue'))['toRefs']
|
||||
const toValue: (typeof import('vue'))['toValue']
|
||||
const triggerRef: (typeof import('vue'))['triggerRef']
|
||||
const unref: (typeof import('vue'))['unref']
|
||||
const useApolloClient: (typeof import('@vue/apollo-composable'))['useApolloClient']
|
||||
const useAttrs: (typeof import('vue'))['useAttrs']
|
||||
const useCssModule: (typeof import('vue'))['useCssModule']
|
||||
const useCssVars: (typeof import('vue'))['useCssVars']
|
||||
const useLazyQuery: (typeof import('@vue/apollo-composable'))['useLazyQuery']
|
||||
const useLoginStore: typeof import('../stores/login')['useLoginStore']
|
||||
const useMutation: (typeof import('@vue/apollo-composable'))['useMutation']
|
||||
const useQuery: (typeof import('@vue/apollo-composable'))['useQuery']
|
||||
const useSlots: (typeof import('vue'))['useSlots']
|
||||
const useSystemStore: typeof import('../stores/system')['useSystemStore']
|
||||
const useThemeStore: typeof import('../hooks/useTheme')['useThemeStore']
|
||||
const useUserStore: typeof import('../stores/user')['useUserStore']
|
||||
const watch: (typeof import('vue'))['watch']
|
||||
const watchEffect: (typeof import('vue'))['watchEffect']
|
||||
const watchPostEffect: (typeof import('vue'))['watchPostEffect']
|
||||
const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { PageType, LoginStore } from '../stores/login'
|
||||
import('../stores/login')
|
||||
// @ts-ignore
|
||||
export type { SystemStore } from '../stores/system'
|
||||
import('../stores/system')
|
||||
// @ts-ignore
|
||||
export type { UserState } from '../stores/user'
|
||||
import('../stores/user')
|
||||
// @ts-ignore
|
||||
export type { APIResponse, IAPIResponse } from '../utils/APIResponse'
|
||||
import('../utils/APIResponse')
|
||||
}
|
||||
|
||||
// for vue template auto import
|
||||
import { UnwrapRef } from 'vue'
|
||||
declare module 'vue' {
|
||||
interface GlobalComponents {}
|
||||
interface ComponentCustomProperties {
|
||||
readonly APIResponse: UnwrapRef<typeof import('../utils/APIResponse')['APIResponse']>
|
||||
readonly PageType: UnwrapRef<typeof import('../stores/login')['PageType']>
|
||||
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
|
||||
readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
|
||||
readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
|
||||
readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
|
||||
readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
|
||||
readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
|
||||
readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
|
||||
readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
|
||||
readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
|
||||
readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
|
||||
readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
|
||||
readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
|
||||
readonly useLoginStore: UnwrapRef<typeof import('../stores/login')['useLoginStore']>
|
||||
readonly useSystemStore: UnwrapRef<typeof import('../stores/system')['useSystemStore']>
|
||||
readonly useThemeStore: UnwrapRef<typeof import('../hooks/useTheme')['useThemeStore']>
|
||||
readonly useUserStore: UnwrapRef<typeof import('../stores/user')['useUserStore']>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export interface IAPIResponse<T> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
}
|
||||
export class APIResponse<T> implements IAPIResponse<T> {
|
||||
code: number = 200;
|
||||
message: string = '';
|
||||
data: T = undefined as T;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs';
|
||||
// @ts-ignore
|
||||
import configPrettier from 'eslint-config-prettier';
|
||||
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
|
||||
|
||||
export default withNuxt(pluginPrettierRecommended, configPrettier);
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import Components from 'unplugin-vue-components/vite';
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
'@pinia/nuxt', // '@nuxtjs/robots',
|
||||
'@nuxtjs/tailwindcss',
|
||||
'@nuxtjs/color-mode', // '@nuxtjs/sitemap',
|
||||
'@nuxt/eslint',
|
||||
'@tdesign-vue-next/nuxt', // '@nuxt/content',
|
||||
'@nuxt/scripts',
|
||||
],
|
||||
|
||||
build: {
|
||||
transpile: ['tdesign-vue-next'],
|
||||
},
|
||||
|
||||
plugins: [],
|
||||
|
||||
tailwindcss: {
|
||||
configPath: './app/tailwind.config.js',
|
||||
exposeConfig: true,
|
||||
viewer: true,
|
||||
},
|
||||
|
||||
colorMode: {
|
||||
preference: 'system',
|
||||
dataValue: 'theme',
|
||||
classSuffix: '',
|
||||
},
|
||||
|
||||
// Sitemap module configuration: https://nuxtseo.com/site-config/getting-started/how-it-works
|
||||
// site: {
|
||||
// url: 'https://tdesign-vue-nuxt-starter.ataw.top', // FIXME: Your website URL
|
||||
// },
|
||||
|
||||
nitro: {
|
||||
compressPublicAssets: { brotli: true, gzip: true },
|
||||
},
|
||||
|
||||
vite: {
|
||||
vue: {
|
||||
script: {
|
||||
defineModel: true,
|
||||
propsDestructure: true,
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
Components({
|
||||
dts: 'types/components.d.ts',
|
||||
resolvers: [],
|
||||
}),
|
||||
AutoImport({
|
||||
imports: ['pinia'],
|
||||
dts: 'types/auto-imports.d.ts',
|
||||
dirs: ['hooks/**', 'stores', 'constants', 'utils/**', 'layouts'],
|
||||
vueTemplate: true,
|
||||
resolvers: [],
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080', // 替换为你的 API 服务器地址
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
future: {
|
||||
// 启用 Nuxt 4 功能前瞻
|
||||
compatibilityVersion: 4,
|
||||
},
|
||||
|
||||
compatibilityDate: '2024-07-19',
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
{
|
||||
"name": "tdesign-vue-nuxt-starter",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tdesign-vue-next/nuxt": "^0.1.5",
|
||||
"@types/node": "^22.14.1",
|
||||
"eslint": "^9.24.0",
|
||||
"eslint-config-prettier": "^10.1.2",
|
||||
"eslint-plugin-prettier": "^5.2.6",
|
||||
"less": "^4.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/content": "3.4.0",
|
||||
"@nuxt/devtools": "2.3.0",
|
||||
"@nuxt/eslint": "1.2.0",
|
||||
"@nuxt/scripts": "0.11.2",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/robots": "^5.2.9",
|
||||
"@nuxtjs/sitemap": "7.2.9",
|
||||
"@nuxtjs/tailwindcss": "^6.13.2",
|
||||
"@pinia/nuxt": "^0.10.1",
|
||||
"@unhead/vue": "^2.0.5",
|
||||
"nuxt": "^3.16.2",
|
||||
"pinia": "^3.0.2",
|
||||
"tdesign-vue-next": "^1.11.5",
|
||||
"unplugin-auto-import": "^19.1.2",
|
||||
"unplugin-vue-components": "^28.4.1"
|
||||
},
|
||||
"packageManager": "pnpm@10.9.0",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
"better-sqlite3",
|
||||
"esbuild"
|
||||
],
|
||||
"ignoredBuiltDependencies": [
|
||||
"unrs-resolver"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
module.exports = {
|
||||
semi: true,
|
||||
vueIndentScriptAndStyle: true,
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
proseWrap: 'never',
|
||||
htmlWhitespaceSensitivity: 'strict',
|
||||
endOfLine: 'auto',
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
|
|
@ -0,0 +1,377 @@
|
|||
:root,:root[theme-mode="light"] {
|
||||
--td-brand-color-1: #f2f3ff;
|
||||
--td-brand-color-2: #d9e1ff;
|
||||
--td-brand-color-3: #b5c7ff;
|
||||
--td-brand-color-4: #8eabff;
|
||||
--td-brand-color-5: #618dff;
|
||||
--td-brand-color-6: #366ef4;
|
||||
--td-brand-color-7: #0052d9;
|
||||
--td-brand-color-8: #003cab;
|
||||
--td-brand-color-9: #002a7c;
|
||||
--td-brand-color-10: #001a57;
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-6);
|
||||
--td-brand-color: var(--td-brand-color-7);
|
||||
--td-brand-color-active: var(--td-brand-color-8);
|
||||
--td-error-color-1: #fff0ed;
|
||||
--td-error-color-2: #ffd8d2;
|
||||
--td-error-color-3: #ffb9b0;
|
||||
--td-error-color-4: #ff9285;
|
||||
--td-error-color-5: #f6685d;
|
||||
--td-error-color-6: #d54941;
|
||||
--td-error-color-7: #ad352f;
|
||||
--td-error-color-8: #881f1c;
|
||||
--td-error-color-9: #68070a;
|
||||
--td-error-color-10: #490002;
|
||||
--td-error-color: var(--td-error-color-6);
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
--td-success-color-1: #e3f9e9;
|
||||
--td-success-color-2: #c6f3d7;
|
||||
--td-success-color-3: #92dab2;
|
||||
--td-success-color-4: #56c08d;
|
||||
--td-success-color-5: #2ba471;
|
||||
--td-success-color-6: #008858;
|
||||
--td-success-color-7: #006c45;
|
||||
--td-success-color-8: #005334;
|
||||
--td-success-color-9: #003b23;
|
||||
--td-success-color-10: #002515;
|
||||
--td-success-color: var(--td-success-color-5);
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
--td-warning-color-1: #fff1e9;
|
||||
--td-warning-color-2: #ffd9c2;
|
||||
--td-warning-color-3: #ffb98c;
|
||||
--td-warning-color-4: #fa9550;
|
||||
--td-warning-color-5: #e37318;
|
||||
--td-warning-color-6: #be5a00;
|
||||
--td-warning-color-7: #954500;
|
||||
--td-warning-color-8: #713300;
|
||||
--td-warning-color-9: #532300;
|
||||
--td-warning-color-10: #3b1700;
|
||||
--td-warning-color: var(--td-warning-color-5);
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-2);
|
||||
--td-bg-color-container: #fff;
|
||||
--td-bg-color-container-hover: var(--td-gray-color-1);
|
||||
--td-bg-color-container-active: var(--td-gray-color-3);
|
||||
--td-bg-color-container-select: #fff;
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
|
||||
--td-bg-color-component: var(--td-gray-color-3);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-4);
|
||||
--td-bg-color-component-active: var(--td-gray-color-6);
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
|
||||
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-2);
|
||||
--td-component-stroke: var(--td-gray-color-3);
|
||||
--td-component-border: var(--td-gray-color-4);
|
||||
--td-font-white-1: rgba(255, 255, 255, 1);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 8%);
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 10%);
|
||||
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
|
||||
--td-scroll-track-color: #fff;
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
--td-border-level-1-color: var(--td-gray-color-3);
|
||||
--td-border-level-2-color: var(--td-gray-color-4);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
|
||||
--td-mask-active: rgba(0, 0, 0, 0.6);
|
||||
--td-mask-disabled: rgba(255, 255, 255, 0.6);
|
||||
/* 字体配置 */
|
||||
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
|
||||
--td-font-size-link-small: 12px;
|
||||
--td-font-size-link-medium: 14px;
|
||||
--td-font-size-link-large: 16px;
|
||||
--td-font-size-mark-small: 12px;
|
||||
--td-font-size-mark-medium: 14px;
|
||||
--td-font-size-body-small: 12px;
|
||||
--td-font-size-body-medium: 14px;
|
||||
--td-font-size-body-large: 16px;
|
||||
--td-font-size-title-small: 14px;
|
||||
--td-font-size-title-medium: 16px;
|
||||
--td-font-size-title-large: 20px;
|
||||
--td-font-size-headline-small: 24px;
|
||||
--td-font-size-headline-medium: 28px;
|
||||
--td-font-size-headline-large: 36px;
|
||||
--td-font-size-display-medium: 48px;
|
||||
--td-font-size-display-large: 64px;
|
||||
--td-line-height-common: 8px;
|
||||
--td-line-height-link-small: calc( var(--td-font-size-link-small) + var(--td-line-height-common) );
|
||||
--td-line-height-link-medium: calc( var(--td-font-size-link-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-link-large: calc( var(--td-font-size-link-large) + var(--td-line-height-common) );
|
||||
--td-line-height-mark-small: calc( var(--td-font-size-mark-small) + var(--td-line-height-common) );
|
||||
--td-line-height-mark-medium: calc( var(--td-font-size-mark-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-body-small: calc( var(--td-font-size-body-small) + var(--td-line-height-common) );
|
||||
--td-line-height-body-medium: calc( var(--td-font-size-body-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-body-large: calc( var(--td-font-size-body-large) + var(--td-line-height-common) );
|
||||
--td-line-height-title-small: calc( var(--td-font-size-title-small) + var(--td-line-height-common) );
|
||||
--td-line-height-title-medium: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-title-large: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-small: calc( var(--td-font-size-headline-small) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-medium: calc( var(--td-font-size-headline-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-large: calc( var(--td-font-size-headline-large) + var(--td-line-height-common) );
|
||||
--td-line-height-display-medium: calc( var(--td-font-size-display-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-display-large: calc( var(--td-font-size-display-large) + var(--td-line-height-common) );
|
||||
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
|
||||
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
|
||||
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
|
||||
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
|
||||
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
|
||||
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
|
||||
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
|
||||
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
|
||||
--td-font-title-small: var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
|
||||
--td-font-title-medium: var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);
|
||||
--td-font-title-large: var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
|
||||
--td-font-headline-small: var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);
|
||||
--td-font-headline-medium: var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);
|
||||
--td-font-headline-large: var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);
|
||||
--td-font-display-medium: var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);
|
||||
--td-font-display-large: var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);
|
||||
/* 字体颜色 */
|
||||
--td-text-color-primary: var(--td-font-gray-1);
|
||||
--td-text-color-secondary: var(--td-font-gray-2);
|
||||
--td-text-color-placeholder: var(--td-font-gray-3);
|
||||
--td-text-color-disabled: var(--td-font-gray-4);
|
||||
--td-text-color-anti: #fff;
|
||||
--td-text-color-brand: var(--td-brand-color);
|
||||
--td-text-color-link: var(--td-brand-color);
|
||||
/* end 字体配置 */ /* 圆角配置 */
|
||||
--td-radius-small: 2px;
|
||||
--td-radius-default: 3px;
|
||||
--td-radius-medium: 6px;
|
||||
--td-radius-large: 9px;
|
||||
--td-radius-extraLarge: 12px;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
/* end 圆角配置 */ /* 阴影配置 */
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
/* end 阴影配置 */ /* 尺寸配置 */
|
||||
--td-size-1: 2px;
|
||||
--td-size-2: 4px;
|
||||
--td-size-3: 6px;
|
||||
--td-size-4: 8px;
|
||||
--td-size-5: 12px;
|
||||
--td-size-6: 16px;
|
||||
--td-size-7: 20px;
|
||||
--td-size-8: 24px;
|
||||
--td-size-9: 28px;
|
||||
--td-size-10: 32px;
|
||||
--td-size-11: 36px;
|
||||
--td-size-12: 40px;
|
||||
--td-size-13: 48px;
|
||||
--td-size-14: 56px;
|
||||
--td-size-15: 64px;
|
||||
--td-size-16: 72px;
|
||||
--td-comp-size-xxxs: var(--td-size-6);
|
||||
--td-comp-size-xxs: var(--td-size-7);
|
||||
--td-comp-size-xs: var(--td-size-8);
|
||||
--td-comp-size-s: var(--td-size-9);
|
||||
--td-comp-size-m: var(--td-size-10);
|
||||
--td-comp-size-l: var(--td-size-11);
|
||||
--td-comp-size-xl: var(--td-size-12);
|
||||
--td-comp-size-xxl: var(--td-size-13);
|
||||
--td-comp-size-xxxl: var(--td-size-14);
|
||||
--td-comp-size-xxxxl: var(--td-size-15);
|
||||
--td-comp-size-xxxxxl: var(--td-size-16);
|
||||
--td-pop-padding-s: var(--td-size-2);
|
||||
--td-pop-padding-m: var(--td-size-3);
|
||||
--td-pop-padding-l: var(--td-size-4);
|
||||
--td-pop-padding-xl: var(--td-size-5);
|
||||
--td-pop-padding-xxl: var(--td-size-6);
|
||||
--td-comp-paddingLR-xxs: var(--td-size-1);
|
||||
--td-comp-paddingLR-xs: var(--td-size-2);
|
||||
--td-comp-paddingLR-s: var(--td-size-4);
|
||||
--td-comp-paddingLR-m: var(--td-size-5);
|
||||
--td-comp-paddingLR-l: var(--td-size-6);
|
||||
--td-comp-paddingLR-xl: var(--td-size-8);
|
||||
--td-comp-paddingLR-xxl: var(--td-size-10);
|
||||
--td-comp-paddingTB-xxs: var(--td-size-1);
|
||||
--td-comp-paddingTB-xs: var(--td-size-2);
|
||||
--td-comp-paddingTB-s: var(--td-size-4);
|
||||
--td-comp-paddingTB-m: var(--td-size-5);
|
||||
--td-comp-paddingTB-l: var(--td-size-6);
|
||||
--td-comp-paddingTB-xl: var(--td-size-8);
|
||||
--td-comp-paddingTB-xxl: var(--td-size-10);
|
||||
--td-comp-margin-xxs: var(--td-size-1);
|
||||
--td-comp-margin-xs: var(--td-size-2);
|
||||
--td-comp-margin-s: var(--td-size-4);
|
||||
--td-comp-margin-m: var(--td-size-5);
|
||||
--td-comp-margin-l: var(--td-size-6);
|
||||
--td-comp-margin-xl: var(--td-size-7);
|
||||
--td-comp-margin-xxl: var(--td-size-8);
|
||||
--td-comp-margin-xxxl: var(--td-size-10);
|
||||
--td-comp-margin-xxxxl: var(--td-size-12);
|
||||
/* end 尺寸配置 */
|
||||
}
|
||||
|
||||
:root[theme-mode="dark"] {
|
||||
--brand-main: var(--td-brand-color);
|
||||
--td-brand-color-1: #1b2f51;
|
||||
--td-brand-color-2: #173463;
|
||||
--td-brand-color-3: #143975;
|
||||
--td-brand-color-4: #103d88;
|
||||
--td-brand-color-5: #0d429a;
|
||||
--td-brand-color-6: #054bbe;
|
||||
--td-brand-color-7: #2667d4;
|
||||
--td-brand-color-8: #4582e6;
|
||||
--td-brand-color-9: #699ef5;
|
||||
--td-brand-color-10: #96bbf8;
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-7);
|
||||
--td-brand-color: var(--td-brand-color-8);
|
||||
--td-brand-color-active: var(--td-brand-color-9);
|
||||
--td-warning-color-1: #4f2a1d;
|
||||
--td-warning-color-2: #582f21;
|
||||
--td-warning-color-3: #733c23;
|
||||
--td-warning-color-4: #a75d2b;
|
||||
--td-warning-color-5: #cf6e2d;
|
||||
--td-warning-color-6: #dc7633;
|
||||
--td-warning-color-7: #e8935c;
|
||||
--td-warning-color-8: #ecbf91;
|
||||
--td-warning-color-9: #eed7bf;
|
||||
--td-warning-color-10: #f3e9dc;
|
||||
--td-warning-color: var(--td-warning-color-5);
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
--td-error-color-1: #472324;
|
||||
--td-error-color-2: #5e2a2d;
|
||||
--td-error-color-3: #703439;
|
||||
--td-error-color-4: #83383e;
|
||||
--td-error-color-5: #a03f46;
|
||||
--td-error-color-6: #c64751;
|
||||
--td-error-color-7: #de6670;
|
||||
--td-error-color-8: #ec888e;
|
||||
--td-error-color-9: #edb1b6;
|
||||
--td-error-color-10: #eeced0;
|
||||
--td-error-color: var(--td-error-color-6);
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
--td-success-color-1: #193a2a;
|
||||
--td-success-color-2: #1a4230;
|
||||
--td-success-color-3: #17533d;
|
||||
--td-success-color-4: #0d7a55;
|
||||
--td-success-color-5: #059465;
|
||||
--td-success-color-6: #43af8a;
|
||||
--td-success-color-7: #46bf96;
|
||||
--td-success-color-8: #80d2b6;
|
||||
--td-success-color-9: #b4e1d3;
|
||||
--td-success-color-10: #deede8;
|
||||
--td-success-color: var(--td-success-color-5);
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-14);
|
||||
--td-bg-color-container: var(--td-gray-color-13);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12);
|
||||
--td-bg-color-container-active: var(--td-gray-color-10);
|
||||
--td-bg-color-container-select: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component: var(--td-gray-color-11);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10);
|
||||
--td-bg-color-component-active: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-10);
|
||||
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-text-color-primary: var(--td-font-white-1);
|
||||
--td-text-color-secondary: var(--td-font-white-2);
|
||||
--td-text-color-placeholder: var(--td-font-white-3);
|
||||
--td-text-color-disabled: var(--td-font-white-4);
|
||||
--td-text-color-anti: #fff;
|
||||
--td-text-color-brand: var(--td-brand-color);
|
||||
--td-text-color-link: var(--td-brand-color);
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 55%);
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 10%);
|
||||
--td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
|
||||
--td-scroll-track-color: #333;
|
||||
--td-bg-color-specialcomponent: transparent;
|
||||
--td-border-level-1-color: var(--td-gray-color-11);
|
||||
--td-border-level-2-color: var(--td-gray-color-9);
|
||||
--td-mask-active: rgba(0, 0, 0, 0.4);
|
||||
--td-mask-disabled: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
:root,:root[theme-mode="light"] {
|
||||
--brand-main: var(--td-brand-color-6);
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-5);
|
||||
--td-brand-color: var(--td-brand-color-6);
|
||||
--td-brand-color-active: var(--td-brand-color-7);
|
||||
--td-brand-color-1: #f0f3ff;
|
||||
--td-brand-color-2: #d6e2ff;
|
||||
--td-brand-color-3: #afc9ff;
|
||||
--td-brand-color-4: #81adff;
|
||||
--td-brand-color-5: #4a90ff;
|
||||
--td-brand-color-6: #007aff;
|
||||
--td-brand-color-7: #005ac3;
|
||||
--td-brand-color-8: #004396;
|
||||
--td-brand-color-9: #002e6c;
|
||||
--td-brand-color-10: #001e4b;
|
||||
--td-warning-color-1: #fff4ec;
|
||||
--td-warning-color-2: #ffe5d0;
|
||||
--td-warning-color-3: #ffd0a7;
|
||||
--td-warning-color-4: #ffb36c;
|
||||
--td-warning-color-5: #fc9830;
|
||||
--td-warning-color-6: #d07502;
|
||||
--td-warning-color-7: #a35900;
|
||||
--td-warning-color-8: #774000;
|
||||
--td-warning-color-9: #512900;
|
||||
--td-warning-color-10: #341900;
|
||||
--td-warning-color: var(--td-warning-color-5);
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
--td-error-color-1: #fff0ed;
|
||||
--td-error-color-2: #ffd8d3;
|
||||
--td-error-color-3: #ffb8b1;
|
||||
--td-error-color-4: #ff928b;
|
||||
--td-error-color-5: #ff5f5a;
|
||||
--td-error-color-6: #f24444;
|
||||
--td-error-color-7: #b6272a;
|
||||
--td-error-color-8: #8f1018;
|
||||
--td-error-color-9: #6b0009;
|
||||
--td-error-color-10: #490004;
|
||||
--td-error-color: var(--td-error-color-6);
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
--td-success-color-1: #e1f9ec;
|
||||
--td-success-color-2: #c4f2dd;
|
||||
--td-success-color-3: #8edbbc;
|
||||
--td-success-color-4: #06ba8e;
|
||||
--td-success-color-5: #14a47d;
|
||||
--td-success-color-6: #008765;
|
||||
--td-success-color-7: #006c50;
|
||||
--td-success-color-8: #00523c;
|
||||
--td-success-color-9: #003b2a;
|
||||
--td-success-color-10: #002519;
|
||||
--td-success-color: var(--td-success-color-5);
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
--td-gray-color-1: #f3f3f4;
|
||||
--td-gray-color-2: #edeef0;
|
||||
--td-gray-color-3: #e7e8eb;
|
||||
--td-gray-color-4: #dbdde1;
|
||||
--td-gray-color-5: #c3c6cd;
|
||||
--td-gray-color-6: #a0a6b1;
|
||||
--td-gray-color-7: #818b99;
|
||||
--td-gray-color-8: #697686;
|
||||
--td-gray-color-9: #535e6a;
|
||||
--td-gray-color-10: #424b55;
|
||||
--td-gray-color-11: #323941;
|
||||
--td-gray-color-12: #272c33;
|
||||
--td-gray-color-13: #20242a;
|
||||
--td-gray-color-14: #15181c;
|
||||
--td-bg-color-container: #fff;
|
||||
--td-bg-color-container-select: #fff;
|
||||
--td-bg-color-page: var(--td-gray-color-2);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-1);
|
||||
--td-bg-color-container-active: var(--td-gray-color-3);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
|
||||
--td-bg-color-component: var(--td-gray-color-3);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-4);
|
||||
--td-bg-color-component-active: var(--td-gray-color-6);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-2);
|
||||
--td-component-stroke: var(--td-gray-color-3);
|
||||
--td-component-border: var(--td-gray-color-4);
|
||||
--td-font-white-1: #ffffff;
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-brand-color-light-hover: var(--td-brand-color-2);
|
||||
--td-warning-color-light-hover: var(--td-warning-color-2);
|
||||
--td-error-color-light-hover: var(--td-error-color-2);
|
||||
--td-success-color-light-hover: var(--td-success-color-2);
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
|
||||
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 8%);
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 10%);
|
||||
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
|
||||
--td-scroll-track-color: #fff;
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
--td-border-level-1-color: var(--td-gray-color-3);
|
||||
--td-border-level-2-color: var(--td-gray-color-4);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
|
||||
--td-mask-active: rgba(0, 0, 0, 0.6);
|
||||
--td-mask-disabled: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
:root[theme-mode="dark"] {
|
||||
--brand-main: var(--td-brand-color-6);
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-5);
|
||||
--td-brand-color: var(--td-brand-color-6);
|
||||
--td-brand-color-active: var(--td-brand-color-7);
|
||||
--td-brand-color-1: #4a90ff20;
|
||||
--td-brand-color-2: #002e6c;
|
||||
--td-brand-color-3: #004396;
|
||||
--td-brand-color-4: #005ac3;
|
||||
--td-brand-color-5: #007aff;
|
||||
--td-brand-color-6: #4a90ff;
|
||||
--td-brand-color-7: #81adff;
|
||||
--td-brand-color-8: #afc9ff;
|
||||
--td-brand-color-9: #d6e2ff;
|
||||
--td-brand-color-10: #f0f3ff;
|
||||
--td-warning-color-1: #4f2a1d;
|
||||
--td-warning-color-2: #582f21;
|
||||
--td-warning-color-3: #733c23;
|
||||
--td-warning-color-4: #a75d2b;
|
||||
--td-warning-color-5: #cf6e2d;
|
||||
--td-warning-color-6: #dc7633;
|
||||
--td-warning-color-7: #e8935c;
|
||||
--td-warning-color-8: #ecbf91;
|
||||
--td-warning-color-9: #eed7bf;
|
||||
--td-warning-color-10: #f3e9dc;
|
||||
--td-error-color-1: #472324;
|
||||
--td-error-color-2: #5e2a2d;
|
||||
--td-error-color-3: #703439;
|
||||
--td-error-color-4: #83383e;
|
||||
--td-error-color-5: #a03f46;
|
||||
--td-error-color-6: #c64751;
|
||||
--td-error-color-7: #de6670;
|
||||
--td-error-color-8: #ec888e;
|
||||
--td-error-color-9: #edb1b6;
|
||||
--td-error-color-10: #eeced0;
|
||||
--td-success-color-1: #193a2a;
|
||||
--td-success-color-2: #1a4230;
|
||||
--td-success-color-3: #17533d;
|
||||
--td-success-color-4: #0d7a55;
|
||||
--td-success-color-5: #059465;
|
||||
--td-success-color-6: #43af8a;
|
||||
--td-success-color-7: #46bf96;
|
||||
--td-success-color-8: #80d2b6;
|
||||
--td-success-color-9: #b4e1d3;
|
||||
--td-success-color-10: #deede8;
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-14);
|
||||
--td-bg-color-container: var(--td-gray-color-13);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12);
|
||||
--td-bg-color-container-active: var(--td-gray-color-10);
|
||||
--td-bg-color-container-select: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component: var(--td-gray-color-11);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10);
|
||||
--td-bg-color-component-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-14);
|
||||
--td-bg-color-container: var(--td-gray-color-13);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12);
|
||||
--td-bg-color-container-active: var(--td-gray-color-10);
|
||||
--td-bg-color-container-select: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component: var(--td-gray-color-11);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10);
|
||||
--td-bg-color-component-active: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-10);
|
||||
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-text-color-primary: var(--td-font-white-1);
|
||||
--td-text-color-secondary: var(--td-font-white-2);
|
||||
--td-text-color-placeholder: var(--td-font-white-3);
|
||||
--td-text-color-disabled: var(--td-font-white-4);
|
||||
--td-text-color-anti: #fff;
|
||||
--td-text-color-brand: var(--td-brand-color);
|
||||
--td-text-color-link: var(--td-brand-color);
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 55%);
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 10%);
|
||||
--td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
|
||||
--td-scroll-track-color: #333;
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
--td-border-level-1-color: var(--td-gray-color-11);
|
||||
--td-border-level-2-color: var(--td-gray-color-9);
|
||||
--td-mask-active: rgba(0, 0, 0, 0.4);
|
||||
--td-mask-disabled: rgba(0, 0, 0, 0.6);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
|
||||
}
|
||||
|
|
@ -0,0 +1,459 @@
|
|||
:root,:root[theme-mode="light"] {
|
||||
--brand-main: var(--td-brand-color-5);
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-4);
|
||||
--td-brand-color: var(--td-brand-color-5);
|
||||
--td-brand-color-active: var(--td-brand-color-6);
|
||||
--td-brand-color-1: #fff0f6;
|
||||
--td-brand-color-2: #ffd8eb;
|
||||
--td-brand-color-3: #ffafda;
|
||||
--td-brand-color-4: #ff7aca;
|
||||
--td-brand-color-5: #ef45b3;
|
||||
--td-brand-color-6: #cb2a96;
|
||||
--td-brand-color-7: #a61379;
|
||||
--td-brand-color-8: #83005e;
|
||||
--td-brand-color-9: #620044;
|
||||
--td-brand-color-10: #44002e;
|
||||
--td-warning-color-1: #fef3e6;
|
||||
--td-warning-color-2: #f9e0c7;
|
||||
--td-warning-color-3: #f7c797;
|
||||
--td-warning-color-4: #f2995f;
|
||||
--td-warning-color-5: #ed7b2f;
|
||||
--td-warning-color-6: #d35a21;
|
||||
--td-warning-color-7: #ba431b;
|
||||
--td-warning-color-8: #9e3610;
|
||||
--td-warning-color-9: #842b0b;
|
||||
--td-warning-color-10: #5a1907;
|
||||
--td-warning-color: var(--td-warning-color-5);
|
||||
--td-warning-color-hover: var(--td-warning-color-4);
|
||||
--td-warning-color-focus: var(--td-warning-color-2);
|
||||
--td-warning-color-active: var(--td-warning-color-6);
|
||||
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||
--td-warning-color-light: var(--td-warning-color-1);
|
||||
--td-error-color-1: #fdecee;
|
||||
--td-error-color-2: #f9d7d9;
|
||||
--td-error-color-3: #f8b9be;
|
||||
--td-error-color-4: #f78d94;
|
||||
--td-error-color-5: #f36d78;
|
||||
--td-error-color-6: #e34d59;
|
||||
--td-error-color-7: #c9353f;
|
||||
--td-error-color-8: #b11f26;
|
||||
--td-error-color-9: #951114;
|
||||
--td-error-color-10: #680506;
|
||||
--td-error-color: var(--td-error-color-6);
|
||||
--td-error-color-hover: var(--td-error-color-5);
|
||||
--td-error-color-focus: var(--td-error-color-2);
|
||||
--td-error-color-active: var(--td-error-color-7);
|
||||
--td-error-color-disabled: var(--td-error-color-3);
|
||||
--td-error-color-light: var(--td-error-color-1);
|
||||
--td-success-color-1: #e8f8f2;
|
||||
--td-success-color-2: #bcebdc;
|
||||
--td-success-color-3: #85dbbe;
|
||||
--td-success-color-4: #48c79c;
|
||||
--td-success-color-5: #00a870;
|
||||
--td-success-color-6: #078d5c;
|
||||
--td-success-color-7: #067945;
|
||||
--td-success-color-8: #056334;
|
||||
--td-success-color-9: #044f2a;
|
||||
--td-success-color-10: #033017;
|
||||
--td-success-color: var(--td-success-color-5);
|
||||
--td-success-color-hover: var(--td-success-color-4);
|
||||
--td-success-color-focus: var(--td-success-color-2);
|
||||
--td-success-color-active: var(--td-success-color-6);
|
||||
--td-success-color-disabled: var(--td-success-color-3);
|
||||
--td-success-color-light: var(--td-success-color-1);
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-container: #fff;
|
||||
--td-bg-color-container-select: #fff;
|
||||
--td-bg-color-page: var(--td-gray-color-2);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-1);
|
||||
--td-bg-color-container-active: var(--td-gray-color-3);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
|
||||
--td-bg-color-component: var(--td-gray-color-3);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-4);
|
||||
--td-bg-color-component-active: var(--td-gray-color-6);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-2);
|
||||
--td-component-stroke: var(--td-gray-color-3);
|
||||
--td-component-border: var(--td-gray-color-4);
|
||||
--td-font-white-1: #ffffff;
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 8%);
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 10%);
|
||||
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
|
||||
--td-scroll-track-color: #fff;
|
||||
--td-bg-color-specialcomponent: #fff;
|
||||
--td-border-level-1-color: var(--td-gray-color-3);
|
||||
--td-border-level-2-color: var(--td-gray-color-4);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
|
||||
--td-mask-active: rgba(0, 0, 0, 0.6);
|
||||
--td-mask-disabled: rgba(255, 255, 255, 0.6);
|
||||
/* 字体配置 */
|
||||
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
|
||||
--td-font-size-link-small: 13px;
|
||||
--td-font-size-link-medium: 15px;
|
||||
--td-font-size-link-large: 17px;
|
||||
--td-font-size-mark-small: 13px;
|
||||
--td-font-size-mark-medium: 15px;
|
||||
--td-font-size-body-small: 13px;
|
||||
--td-font-size-body-medium: 15px;
|
||||
--td-font-size-body-large: 17px;
|
||||
--td-font-size-title-small: 15px;
|
||||
--td-font-size-title-medium: 17px;
|
||||
--td-font-size-title-large: 21px;
|
||||
--td-font-size-headline-small: 25px;
|
||||
--td-font-size-headline-medium: 29px;
|
||||
--td-font-size-headline-large: 37px;
|
||||
--td-font-size-display-medium: 49px;
|
||||
--td-font-size-display-large: 65px;
|
||||
--td-line-height-common: 8px;
|
||||
--td-line-height-link-small: calc( var(--td-font-size-link-small) + var(--td-line-height-common) );
|
||||
--td-line-height-link-medium: calc( var(--td-font-size-link-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-link-large: calc( var(--td-font-size-link-large) + var(--td-line-height-common) );
|
||||
--td-line-height-mark-small: calc( var(--td-font-size-mark-small) + var(--td-line-height-common) );
|
||||
--td-line-height-mark-medium: calc( var(--td-font-size-mark-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-body-small: calc( var(--td-font-size-body-small) + var(--td-line-height-common) );
|
||||
--td-line-height-body-medium: calc( var(--td-font-size-body-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-body-large: calc( var(--td-font-size-body-large) + var(--td-line-height-common) );
|
||||
--td-line-height-title-small: calc( var(--td-font-size-title-small) + var(--td-line-height-common) );
|
||||
--td-line-height-title-medium: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-title-large: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-small: calc( var(--td-font-size-headline-small) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-medium: calc( var(--td-font-size-headline-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-headline-large: calc( var(--td-font-size-headline-large) + var(--td-line-height-common) );
|
||||
--td-line-height-display-medium: calc( var(--td-font-size-display-medium) + var(--td-line-height-common) );
|
||||
--td-line-height-display-large: calc( var(--td-font-size-display-large) + var(--td-line-height-common) );
|
||||
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
|
||||
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
|
||||
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
|
||||
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
|
||||
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
|
||||
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
|
||||
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
|
||||
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
|
||||
--td-font-title-small: var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
|
||||
--td-font-title-medium: var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);
|
||||
--td-font-title-large: var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
|
||||
--td-font-headline-small: var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);
|
||||
--td-font-headline-medium: var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);
|
||||
--td-font-headline-large: var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);
|
||||
--td-font-display-medium: var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);
|
||||
--td-font-display-large: var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);
|
||||
/* 字体颜色 */
|
||||
--td-text-color-primary: var(--td-font-gray-1);
|
||||
--td-text-color-secondary: var(--td-font-gray-2);
|
||||
--td-text-color-placeholder: var(--td-font-gray-3);
|
||||
--td-text-color-disabled: var(--td-font-gray-4);
|
||||
--td-text-color-anti: #fff;
|
||||
--td-text-color-brand: var(--td-brand-color);
|
||||
--td-text-color-link: var(--td-brand-color);
|
||||
/* end 字体配置 */ /* 圆角配置 */
|
||||
--td-radius-small: 0px;
|
||||
--td-radius-default: 0px;
|
||||
--td-radius-medium: 0px;
|
||||
--td-radius-large: 0px;
|
||||
--td-radius-extraLarge: 0px;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
/* end 圆角配置 *//* 阴影配置 */
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
/* end 阴影配置 *//* 尺寸配置 */
|
||||
--td-size-1: 2px;
|
||||
--td-size-2: 4px;
|
||||
--td-size-3: 6px;
|
||||
--td-size-4: 8px;
|
||||
--td-size-5: 12px;
|
||||
--td-size-6: 16px;
|
||||
--td-size-7: 20px;
|
||||
--td-size-8: 24px;
|
||||
--td-size-9: 28px;
|
||||
--td-size-10: 32px;
|
||||
--td-size-11: 36px;
|
||||
--td-size-12: 40px;
|
||||
--td-size-13: 48px;
|
||||
--td-size-14: 56px;
|
||||
--td-size-15: 64px;
|
||||
--td-size-16: 72px;
|
||||
--td-comp-size-xxxs: var(--td-size-6);
|
||||
--td-comp-size-xxs: var(--td-size-7);
|
||||
--td-comp-size-xs: var(--td-size-8);
|
||||
--td-comp-size-s: var(--td-size-9);
|
||||
--td-comp-size-m: var(--td-size-10);
|
||||
--td-comp-size-l: var(--td-size-11);
|
||||
--td-comp-size-xl: var(--td-size-12);
|
||||
--td-comp-size-xxl: var(--td-size-13);
|
||||
--td-comp-size-xxxl: var(--td-size-14);
|
||||
--td-comp-size-xxxxl: var(--td-size-15);
|
||||
--td-comp-size-xxxxxl: var(--td-size-16);
|
||||
--td-pop-padding-s: var(--td-size-2);
|
||||
--td-pop-padding-m: var(--td-size-3);
|
||||
--td-pop-padding-l: var(--td-size-4);
|
||||
--td-pop-padding-xl: var(--td-size-5);
|
||||
--td-pop-padding-xxl: var(--td-size-6);
|
||||
--td-comp-paddingLR-xxs: var(--td-size-1);
|
||||
--td-comp-paddingLR-xs: var(--td-size-2);
|
||||
--td-comp-paddingLR-s: var(--td-size-4);
|
||||
--td-comp-paddingLR-m: var(--td-size-5);
|
||||
--td-comp-paddingLR-l: var(--td-size-6);
|
||||
--td-comp-paddingLR-xl: var(--td-size-8);
|
||||
--td-comp-paddingLR-xxl: var(--td-size-10);
|
||||
--td-comp-paddingTB-xxs: var(--td-size-1);
|
||||
--td-comp-paddingTB-xs: var(--td-size-2);
|
||||
--td-comp-paddingTB-s: var(--td-size-4);
|
||||
--td-comp-paddingTB-m: var(--td-size-5);
|
||||
--td-comp-paddingTB-l: var(--td-size-6);
|
||||
--td-comp-paddingTB-xl: var(--td-size-8);
|
||||
--td-comp-paddingTB-xxl: var(--td-size-10);
|
||||
--td-comp-margin-xxs: var(--td-size-1);
|
||||
--td-comp-margin-xs: var(--td-size-2);
|
||||
--td-comp-margin-s: var(--td-size-4);
|
||||
--td-comp-margin-m: var(--td-size-5);
|
||||
--td-comp-margin-l: var(--td-size-6);
|
||||
--td-comp-margin-xl: var(--td-size-7);
|
||||
--td-comp-margin-xxl: var(--td-size-8);
|
||||
--td-comp-margin-xxxl: var(--td-size-10);
|
||||
--td-comp-margin-xxxxl: var(--td-size-12);
|
||||
/* end 尺寸配置 */
|
||||
}
|
||||
|
||||
:root[theme-mode="dark"] {
|
||||
--brand-main: var(--td-brand-color-6);
|
||||
--td-brand-color-light: var(--td-brand-color-1);
|
||||
--td-brand-color-focus: var(--td-brand-color-2);
|
||||
--td-brand-color-disabled: var(--td-brand-color-3);
|
||||
--td-brand-color-hover: var(--td-brand-color-5);
|
||||
--td-brand-color: var(--td-brand-color-6);
|
||||
--td-brand-color-active: var(--td-brand-color-7);
|
||||
--td-brand-color-1: #ef45b320;
|
||||
--td-brand-color-2: #620044;
|
||||
--td-brand-color-3: #83005e;
|
||||
--td-brand-color-4: #a61379;
|
||||
--td-brand-color-5: #cb2a96;
|
||||
--td-brand-color-6: #ef45b3;
|
||||
--td-brand-color-7: #ff7aca;
|
||||
--td-brand-color-8: #ffafda;
|
||||
--td-brand-color-9: #ffd8eb;
|
||||
--td-brand-color-10: #fff0f6;
|
||||
--td-warning-color-1: #4f2a1d;
|
||||
--td-warning-color-2: #582f21;
|
||||
--td-warning-color-3: #733c23;
|
||||
--td-warning-color-4: #a75d2b;
|
||||
--td-warning-color-5: #cf6e2d;
|
||||
--td-warning-color-6: #dc7633;
|
||||
--td-warning-color-7: #e8935c;
|
||||
--td-warning-color-8: #ecbf91;
|
||||
--td-warning-color-9: #eed7bf;
|
||||
--td-warning-color-10: #f3e9dc;
|
||||
--td-error-color-1: #472324;
|
||||
--td-error-color-2: #5e2a2d;
|
||||
--td-error-color-3: #703439;
|
||||
--td-error-color-4: #83383e;
|
||||
--td-error-color-5: #a03f46;
|
||||
--td-error-color-6: #c64751;
|
||||
--td-error-color-7: #de6670;
|
||||
--td-error-color-8: #ec888e;
|
||||
--td-error-color-9: #edb1b6;
|
||||
--td-error-color-10: #eeced0;
|
||||
--td-success-color-1: #193a2a;
|
||||
--td-success-color-2: #1a4230;
|
||||
--td-success-color-3: #17533d;
|
||||
--td-success-color-4: #0d7a55;
|
||||
--td-success-color-5: #059465;
|
||||
--td-success-color-6: #43af8a;
|
||||
--td-success-color-7: #46bf96;
|
||||
--td-success-color-8: #80d2b6;
|
||||
--td-success-color-9: #b4e1d3;
|
||||
--td-success-color-10: #deede8;
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-14);
|
||||
--td-bg-color-container: var(--td-gray-color-13);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12);
|
||||
--td-bg-color-container-active: var(--td-gray-color-10);
|
||||
--td-bg-color-container-select: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component: var(--td-gray-color-11);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10);
|
||||
--td-bg-color-component-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-gray-color-1: #f3f3f3;
|
||||
--td-gray-color-2: #eee;
|
||||
--td-gray-color-3: #e7e7e7;
|
||||
--td-gray-color-4: #dcdcdc;
|
||||
--td-gray-color-5: #c5c5c5;
|
||||
--td-gray-color-6: #a6a6a6;
|
||||
--td-gray-color-7: #8b8b8b;
|
||||
--td-gray-color-8: #777;
|
||||
--td-gray-color-9: #5e5e5e;
|
||||
--td-gray-color-10: #4b4b4b;
|
||||
--td-gray-color-11: #383838;
|
||||
--td-gray-color-12: #2c2c2c;
|
||||
--td-gray-color-13: #242424;
|
||||
--td-gray-color-14: #181818;
|
||||
--td-bg-color-page: var(--td-gray-color-14);
|
||||
--td-bg-color-container: var(--td-gray-color-13);
|
||||
--td-bg-color-container-hover: var(--td-gray-color-12);
|
||||
--td-bg-color-container-active: var(--td-gray-color-10);
|
||||
--td-bg-color-container-select: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
|
||||
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
|
||||
--td-bg-color-component: var(--td-gray-color-11);
|
||||
--td-bg-color-component-hover: var(--td-gray-color-10);
|
||||
--td-bg-color-component-active: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-10);
|
||||
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12);
|
||||
--td-component-stroke: var(--td-gray-color-11);
|
||||
--td-component-border: var(--td-gray-color-9);
|
||||
--td-font-white-1: rgba(255, 255, 255, 0.9);
|
||||
--td-font-white-2: rgba(255, 255, 255, 0.55);
|
||||
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
||||
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
||||
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
||||
--td-text-color-primary: var(--td-font-white-1);
|
||||
--td-text-color-secondary: var(--td-font-white-2);
|
||||
--td-text-color-placeholder: var(--td-font-white-3);
|
||||
--td-text-color-disabled: var(--td-font-white-4);
|
||||
--td-text-color-anti: #fff;
|
||||
--td-text-color-brand: var(--td-brand-color);
|
||||
--td-text-color-link: var(--td-brand-color);
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 55%);
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 10%);
|
||||
--td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
|
||||
--td-scroll-track-color: #333;
|
||||
--td-bg-color-specialcomponent: transparent;
|
||||
--td-border-level-1-color: var(--td-gray-color-11);
|
||||
--td-border-level-2-color: var(--td-gray-color-9);
|
||||
--td-mask-active: rgba(0, 0, 0, 0.4);
|
||||
--td-mask-disabled: rgba(0, 0, 0, 0.6);
|
||||
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
|
||||
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
|
||||
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
|
||||
/* 圆角配置 */
|
||||
--td-radius-small: 2px;
|
||||
--td-radius-default: 3px;
|
||||
--td-radius-medium: 6px;
|
||||
--td-radius-large: 9px;
|
||||
--td-radius-extraLarge: 12px;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
/* end 圆角配置 *//* 阴影配置 */
|
||||
--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);
|
||||
--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);
|
||||
--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);
|
||||
/* end 阴影配置 *//* 尺寸配置 */
|
||||
--td-size-1: 2px;
|
||||
--td-size-2: 4px;
|
||||
--td-size-3: 6px;
|
||||
--td-size-4: 8px;
|
||||
--td-size-5: 12px;
|
||||
--td-size-6: 16px;
|
||||
--td-size-7: 20px;
|
||||
--td-size-8: 24px;
|
||||
--td-size-9: 28px;
|
||||
--td-size-10: 32px;
|
||||
--td-size-11: 36px;
|
||||
--td-size-12: 40px;
|
||||
--td-size-13: 48px;
|
||||
--td-size-14: 56px;
|
||||
--td-size-15: 64px;
|
||||
--td-size-16: 72px;
|
||||
--td-comp-size-xxxs: var(--td-size-6);
|
||||
--td-comp-size-xxs: var(--td-size-7);
|
||||
--td-comp-size-xs: var(--td-size-8);
|
||||
--td-comp-size-s: var(--td-size-9);
|
||||
--td-comp-size-m: var(--td-size-10);
|
||||
--td-comp-size-l: var(--td-size-11);
|
||||
--td-comp-size-xl: var(--td-size-12);
|
||||
--td-comp-size-xxl: var(--td-size-13);
|
||||
--td-comp-size-xxxl: var(--td-size-14);
|
||||
--td-comp-size-xxxxl: var(--td-size-15);
|
||||
--td-comp-size-xxxxxl: var(--td-size-16);
|
||||
--td-pop-padding-s: var(--td-size-2);
|
||||
--td-pop-padding-m: var(--td-size-3);
|
||||
--td-pop-padding-l: var(--td-size-4);
|
||||
--td-pop-padding-xl: var(--td-size-5);
|
||||
--td-pop-padding-xxl: var(--td-size-6);
|
||||
--td-comp-paddingLR-xxs: var(--td-size-1);
|
||||
--td-comp-paddingLR-xs: var(--td-size-2);
|
||||
--td-comp-paddingLR-s: var(--td-size-4);
|
||||
--td-comp-paddingLR-m: var(--td-size-5);
|
||||
--td-comp-paddingLR-l: var(--td-size-6);
|
||||
--td-comp-paddingLR-xl: var(--td-size-8);
|
||||
--td-comp-paddingLR-xxl: var(--td-size-10);
|
||||
--td-comp-paddingTB-xxs: var(--td-size-1);
|
||||
--td-comp-paddingTB-xs: var(--td-size-2);
|
||||
--td-comp-paddingTB-s: var(--td-size-4);
|
||||
--td-comp-paddingTB-m: var(--td-size-5);
|
||||
--td-comp-paddingTB-l: var(--td-size-6);
|
||||
--td-comp-paddingTB-xl: var(--td-size-8);
|
||||
--td-comp-paddingTB-xxl: var(--td-size-10);
|
||||
--td-comp-margin-xxs: var(--td-size-1);
|
||||
--td-comp-margin-xs: var(--td-size-2);
|
||||
--td-comp-margin-s: var(--td-size-4);
|
||||
--td-comp-margin-m: var(--td-size-5);
|
||||
--td-comp-margin-l: var(--td-size-6);
|
||||
--td-comp-margin-xl: var(--td-size-7);
|
||||
--td-comp-margin-xxl: var(--td-size-8);
|
||||
--td-comp-margin-xxxl: var(--td-size-10);
|
||||
--td-comp-margin-xxxxl: var(--td-size-12);
|
||||
/* end 尺寸配置 */
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
Reference in New Issue