feat: vite5升级vite6
This commit is contained in:
WANGFan
parent
4820f4e2d0
commit
cb7d54aa7e
@ -1,14 +0,0 @@
|
||||
*.sh
|
||||
node_modules
|
||||
*.md
|
||||
*.woff
|
||||
*.ttf
|
||||
.vscode
|
||||
.idea
|
||||
dist
|
||||
/public
|
||||
/docs
|
||||
.husky
|
||||
.local
|
||||
/bin
|
||||
/src/mock/*
|
||||
@ -1,76 +0,0 @@
|
||||
module.exports = {
|
||||
// 运行环境
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true // 配置后便会启用浏览器和 Node.js 环境，这两个环境中的一些全局变量(如 window 、 global 等)会同时启用。
|
||||
},
|
||||
// 指定如何解析语法 解析 .vue 文件
|
||||
parser: "vue-eslint-parser",
|
||||
// 解析器选项
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest", // 可以配置 ES + 数字(如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法
|
||||
parser: "@typescript-eslint/parser", // ts解析，将ts转换为estree格式，在eslint下通过Espree进行检查
|
||||
sourceType: "module" // 默认为 script ，如果使用 ES Module 则应设置为 module
|
||||
},
|
||||
|
||||
// 继承配置
|
||||
extends: [
|
||||
"./.eslintrc-auto-import.json", // 与vite.config.ts-AutoImport-dts路径一致
|
||||
"plugin:vue/vue3-recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"prettier", // 1.加入 prettier 配置
|
||||
"plugin:prettier/recommended" // prettier配置要写在eslint配置后面
|
||||
],
|
||||
// ESLint插件系统
|
||||
// 添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验，需要在rules进行配置要开启或者调整这些规则
|
||||
plugins: [
|
||||
"@typescript-eslint", // 拓展一些关于 TS 代码的规则
|
||||
"vue",
|
||||
// 2. 加入 prettier 的 eslint 插件
|
||||
"prettier"
|
||||
],
|
||||
/**
|
||||
* key 为规则名，value 配置内容，数组第一项为规则的ID ，第二项为规则的配置
|
||||
* "off" 或 0 ==> 关闭规则
|
||||
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
|
||||
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
|
||||
*/
|
||||
rules: {
|
||||
// 3. 注意要加上这一句，开启 prettier 自动修复的功能
|
||||
"prettier/prettier": "error",
|
||||
|
||||
// 配置：
|
||||
// eslint (http://eslint.cn/docs/rules)
|
||||
"no-var": "error", // 要求使用 let 或 const 而不是 var
|
||||
"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
|
||||
"prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
|
||||
"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
|
||||
|
||||
// typeScript (https://typescript-eslint.io/rules)
|
||||
"@typescript-eslint/no-unused-vars": "warn", // 禁止定义未使用的变量
|
||||
"@typescript-eslint/no-empty-function": "warn", // 禁止空函数
|
||||
"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
|
||||
"@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
|
||||
"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
|
||||
"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
|
||||
"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
|
||||
"@typescript-eslint/ban-types": "off", // 禁止使用特定类型
|
||||
"@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
|
||||
"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
|
||||
|
||||
// vue (https://eslint.vuejs.org/rules)
|
||||
"vue/component-definition-name-casing": "off",
|
||||
"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
|
||||
"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
|
||||
"vue/no-mutating-props": "error", // 不允许改变组件 prop
|
||||
"vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
|
||||
"vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
|
||||
"vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行kebab-case命名：my-prop="prop"
|
||||
"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
|
||||
"vue/no-v-html": "off", // 禁止使用 v-html
|
||||
"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
|
||||
"vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
|
||||
"vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup
|
||||
}
|
||||
};
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
18
.husky/_/h
18
.husky/_/h
@ -1,20 +1,22 @@
|
||||
#!/usr/bin/env sh
|
||||
[ "$HUSKY" = "2" ] && set -x
|
||||
h="${0##*/}"
|
||||
s="${0%/*/*}/$h"
|
||||
n=$(basename "$0")
|
||||
s=$(dirname "$(dirname "$0")")/$n
|
||||
|
||||
[ ! -f "$s" ] && exit 0
|
||||
|
||||
for f in "${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh" "$HOME/.huskyrc"; do
|
||||
# shellcheck disable=SC1090
|
||||
[ -f "$f" ] && . "$f"
|
||||
done
|
||||
if [ -f "$HOME/.huskyrc" ]; then
|
||||
echo "husky - '~/.huskyrc' is DEPRECATED, please move your code to ~/.config/husky/init.sh"
|
||||
fi
|
||||
i="${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh"
|
||||
[ -f "$i" ] && . "$i"
|
||||
|
||||
[ "${HUSKY-}" = "0" ] && exit 0
|
||||
|
||||
export PATH="node_modules/.bin:$PATH"
|
||||
sh -e "$s" "$@"
|
||||
c=$?
|
||||
|
||||
[ $c != 0 ] && echo "husky - $h script failed (code $c)"
|
||||
[ $c != 0 ] && echo "husky - $n script failed (code $c)"
|
||||
[ $c = 127 ] && echo "husky - command not found in PATH=$PATH"
|
||||
exit $c
|
||||
exit $c
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
echo "husky - DEPRECATED
|
||||
|
||||
Please remove the following two lines from $0:
|
||||
|
||||
#!/usr/bin/env sh
|
||||
. \"\$(dirname -- \"\$0\")/_/husky.sh\"
|
||||
|
||||
They WILL FAIL in v10.0.0
|
||||
"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -1,2 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
. "${0%/*}/h"
|
||||
. "$(dirname "$0")/h"
|
||||
@ -11,6 +11,11 @@ module.exports = {
|
||||
"stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,
|
||||
],
|
||||
overrides: [
|
||||
// SCSS 文件解析器
|
||||
{
|
||||
files: ["**/*.scss"],
|
||||
customSyntax: "postcss-scss"
|
||||
},
|
||||
// 扫描 .vue/html 文件中的 <style> 标签内的样式
|
||||
{
|
||||
files: ["**/*.{vue,html}"],
|
||||
@ -18,6 +23,10 @@ module.exports = {
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
"declaration-property-value-no-unknown": null, // 关闭属性值校验
|
||||
"scss/dollar-variable-pattern": /.*/, // 允许任意变量名格式
|
||||
"scss/at-rule-no-unknown": true, // 启用 SCSS 的 @规则校验
|
||||
"scss/no-global-function-names": null, // 允许原生 CSS 函数名
|
||||
"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
|
||||
"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
|
||||
"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
|
||||
|
||||
75
eslint.config.js
Normal file
75
eslint.config.js
Normal file
@ -0,0 +1,75 @@
|
||||
import { defineConfig } from "eslint/config";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
import pluginVue from "eslint-plugin-vue";
|
||||
import eslintConfigPrettier from "eslint-config-prettier";
|
||||
|
||||
export default defineConfig([
|
||||
{ files: ["**/*.{js,mjs,cjs,ts,vue}"] },
|
||||
{
|
||||
files: ["**/*.{js,mjs,cjs,ts,vue}"],
|
||||
languageOptions: { globals: globals.browser }
|
||||
},
|
||||
tseslint.configs.recommended,
|
||||
pluginVue.configs["flat/essential"],
|
||||
{
|
||||
files: ["**/*.vue"],
|
||||
languageOptions: { parserOptions: { parser: tseslint.parser } }
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
// eslint (http://eslint.cn/docs/rules)
|
||||
"no-var": "error", // 要求使用 let 或 const 而不是 var
|
||||
"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
|
||||
"prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
|
||||
"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
|
||||
|
||||
// typeScript (https://typescript-eslint.io/rules)
|
||||
"@typescript-eslint/no-unused-vars": "warn", // 禁止定义未使用的变量
|
||||
"@typescript-eslint/no-empty-function": "warn", // 禁止空函数
|
||||
"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
|
||||
"@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
|
||||
"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
|
||||
"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
|
||||
"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
|
||||
"@typescript-eslint/ban-types": "off", // 禁止使用特定类型
|
||||
"@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
|
||||
"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
|
||||
"@typescript-eslint/no-unused-expressions": "off", // 禁止未使用的表达式
|
||||
|
||||
// vue (https://eslint.vuejs.org/rules)
|
||||
// 'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
|
||||
"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
|
||||
"vue/no-mutating-props": "error", // 不允许改变组件 prop
|
||||
"vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
|
||||
"vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
|
||||
"vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
|
||||
"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
|
||||
"vue/no-v-html": "off", // 禁止使用 v-html
|
||||
"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
|
||||
"vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
|
||||
"vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup
|
||||
}
|
||||
},
|
||||
// 新配置中ignores直接写在defineConfig内
|
||||
{
|
||||
// Note: there should be no other properties in this object
|
||||
ignores: [
|
||||
"*.sh",
|
||||
"node_modules",
|
||||
"*.md",
|
||||
"*.woff",
|
||||
"*.ttf",
|
||||
".vscode",
|
||||
".idea",
|
||||
"dist",
|
||||
"/public",
|
||||
"/docs",
|
||||
".husky",
|
||||
".local",
|
||||
"/bin",
|
||||
"/src/mock/*"
|
||||
]
|
||||
},
|
||||
eslintConfigPrettier
|
||||
]);
|
||||
15076
package-lock.json
generated
15076
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
@ -7,16 +7,16 @@
|
||||
"author": {
|
||||
"name": "WANGFan",
|
||||
"email": "2547096351@qq.com",
|
||||
"url": "https://gitee.com/wang_fan_w"
|
||||
"url": "https://github.com/WANG-Fan0912"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://gitee.com/wang_fan_w/SnowAdmin",
|
||||
"homepage": "https://github.com/WANG-Fan0912/SnowAdmin",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/wang_fan_w/SnowAdmin.git"
|
||||
"url": "https://github.com/WANG-Fan0912/SnowAdmin.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/wang_fan_w/SnowAdmin/issues"
|
||||
"url": "https://github.com/WANG-Fan0912/SnowAdmin/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@ -37,6 +37,7 @@
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@codemirror/lang-vue": "^0.1.3",
|
||||
"@codemirror/theme-one-dark": "^6.1.2",
|
||||
"@fingerprintjs/fingerprintjs": "^4.6.2",
|
||||
"@visactor/vchart": "^1.11.0",
|
||||
"@visactor/vchart-arco-theme": "^1.11.0",
|
||||
"@vueuse/core": "^12.4.0",
|
||||
@ -66,17 +67,18 @@
|
||||
"devDependencies": {
|
||||
"@arco-design/web-vue": "^2.56.3",
|
||||
"@arco-plugins/vite-vue": "^1.4.5",
|
||||
"@commitlint/cli": "^19.2.1",
|
||||
"@commitlint/config-conventional": "^19.1.0",
|
||||
"@types/node": "^20.11.30",
|
||||
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
||||
"@typescript-eslint/parser": "^7.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@commitlint/cli": "^19.8.0",
|
||||
"@commitlint/config-conventional": "^19.8.0",
|
||||
"@types/node": "^22.13.11",
|
||||
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
||||
"@typescript-eslint/parser": "^8.32.1",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"commitlint": "^19.2.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-config-prettier": "^10.1.1",
|
||||
"eslint-plugin-prettier": "^5.2.3",
|
||||
"eslint-plugin-vue": "^10.0.0",
|
||||
"globals": "^16.1.0",
|
||||
"husky": "^9.0.11",
|
||||
"lint-staged": "^15.2.2",
|
||||
"mockjs": "^1.1.0",
|
||||
@ -85,25 +87,25 @@
|
||||
"postcss-preset-env": "^9.5.2",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.2.5",
|
||||
"sass": "^1.72.0",
|
||||
"scss": "^0.2.4",
|
||||
"stylelint": "^16.11.0",
|
||||
"sass-embedded": "^1.86.0",
|
||||
"stylelint": "^16.16.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^5.1.1",
|
||||
"stylelint-config-recess-order": "^6.0.0",
|
||||
"stylelint-config-recommended-scss": "^14.1.0",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard": "^36.0.1",
|
||||
"stylelint-config-recommended-vue": "^1.6.0",
|
||||
"stylelint-config-standard": "^37.0.0",
|
||||
"stylelint-config-standard-scss": "^14.0.0",
|
||||
"terser": "^5.29.2",
|
||||
"typescript": "^5.2.2",
|
||||
"typescript-eslint": "^8.32.1",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.2.0",
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^2.0.6"
|
||||
"vue-tsc": "^2.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18.12.0",
|
||||
|
||||
6417
pnpm-lock.yaml
generated
6417
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
7
src/auto-import.d.ts
vendored
7
src/auto-import.d.ts
vendored
@ -40,6 +40,7 @@ declare global {
|
||||
const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
|
||||
const onUnmounted: (typeof import("vue"))["onUnmounted"];
|
||||
const onUpdated: (typeof import("vue"))["onUpdated"];
|
||||
const onWatcherCleanup: (typeof import("vue"))["onWatcherCleanup"];
|
||||
const provide: (typeof import("vue"))["provide"];
|
||||
const reactive: (typeof import("vue"))["reactive"];
|
||||
const readonly: (typeof import("vue"))["readonly"];
|
||||
@ -57,10 +58,13 @@ declare global {
|
||||
const useAttrs: (typeof import("vue"))["useAttrs"];
|
||||
const useCssModule: (typeof import("vue"))["useCssModule"];
|
||||
const useCssVars: (typeof import("vue"))["useCssVars"];
|
||||
const useId: (typeof import("vue"))["useId"];
|
||||
const useLink: (typeof import("vue-router"))["useLink"];
|
||||
const useModel: (typeof import("vue"))["useModel"];
|
||||
const useRoute: (typeof import("vue-router"))["useRoute"];
|
||||
const useRouter: (typeof import("vue-router"))["useRouter"];
|
||||
const useSlots: (typeof import("vue"))["useSlots"];
|
||||
const useTemplateRef: (typeof import("vue"))["useTemplateRef"];
|
||||
const watch: (typeof import("vue"))["watch"];
|
||||
const watchEffect: (typeof import("vue"))["watchEffect"];
|
||||
const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
|
||||
@ -73,12 +77,15 @@ declare global {
|
||||
Component,
|
||||
ComponentPublicInstance,
|
||||
ComputedRef,
|
||||
DirectiveBinding,
|
||||
ExtractDefaultPropTypes,
|
||||
ExtractPropTypes,
|
||||
ExtractPublicPropTypes,
|
||||
InjectionKey,
|
||||
PropType,
|
||||
Ref,
|
||||
MaybeRef,
|
||||
MaybeRefOrGetter,
|
||||
VNode,
|
||||
WritableComputedRef
|
||||
} from "vue";
|
||||
|
||||
@ -28,7 +28,7 @@ const onCollapsed = () => {
|
||||
};
|
||||
|
||||
// 监听屏幕尺寸变化，PC端自动展开菜单，移动端自动收起
|
||||
watch(isPc, (newV: Boolean) => {
|
||||
watch(isPc, (newV: boolean) => {
|
||||
collapsed.value = newV ? false : true;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -107,7 +107,7 @@ const onWatermarkGap = (e: number) => {
|
||||
如果关闭，那么所有tabs全部取消、所有页面缓存全部取消
|
||||
如果开启，那么添加当前路由到tabs
|
||||
*/
|
||||
const tabsChange = (e: Boolean) => {
|
||||
const tabsChange = (e: boolean) => {
|
||||
if (!e) {
|
||||
tabsList.value = [];
|
||||
cacheRoutes.value = [];
|
||||
|
||||
@ -35,7 +35,7 @@ const themeConfig = () => {
|
||||
// 水印间隙
|
||||
const watermarkGap = ref<[number, number]>([100, 100]);
|
||||
// 防止调试
|
||||
const debugPrevention = ref<Boolean>(false);
|
||||
const debugPrevention = ref<boolean>(false);
|
||||
// 布局模式：layoutDefaults、layoutHead、layoutMixing
|
||||
const layoutType = ref<string>("layoutDefaults");
|
||||
// 色弱模式
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
@import "@/style/global-theme";
|
||||
@import "@/style/global-transition";
|
||||
@import "@/style/global-style";
|
||||
@import "@/style/global-scrollbar";
|
||||
@import "@/style/loading-page";
|
||||
@import "@/style/card-animation";
|
||||
@import "@/style/media/media";
|
||||
@use "@/style/var/index" as *;
|
||||
@use "@/style/model";
|
||||
@use "@/style/media";
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@ -1,16 +1 @@
|
||||
/* 栅格布局 (媒体查询的变量)
|
||||
* 参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
|
||||
* $xs: >= 0px;
|
||||
* $sm: >= 576px;
|
||||
* $md: >= 768px;
|
||||
* $lg: >= 992px;
|
||||
* $xl: >= 1200px;
|
||||
* $xxl: >= 1600px;
|
||||
*/
|
||||
|
||||
$xs: 0px;
|
||||
$sm: 576px;
|
||||
$md: 768px;
|
||||
$lg: 992px;
|
||||
$xl: 1200px;
|
||||
$xxl: 1600px;
|
||||
@use "@/style/media/layout";
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "./index.scss";
|
||||
@use "@/style/var/index" as *;
|
||||
|
||||
// 处理首页数据图大小
|
||||
// 页面宽度 大于 0px 小于 992px;
|
||||
@ -37,9 +37,9 @@
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
.monthly-analysis {
|
||||
margin-left: $padding;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
padding-bottom: $padding;
|
||||
margin-left: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import "./layout.scss";
|
||||
@ -1,23 +1,25 @@
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片过渡动画
|
||||
// 根据遍历的卡片数量应用动画，卡片数量支持20个
|
||||
@for $i from 0 through 20 {
|
||||
.animated-fade-up-#{$i} {
|
||||
opacity: 0; // 初始透明度
|
||||
animation-name: fade-up; // 应用动画
|
||||
animation-duration: 0.5s; // 动画持续时间
|
||||
animation-fill-mode: forwards; // 保持结束后的动画状态
|
||||
/* stylelint-disable-next-line scss/operator-no-unspaced */
|
||||
animation-delay: calc($i/10) + s; // 设置延迟-每次延迟0.1s
|
||||
}
|
||||
}
|
||||
@use "@/style/var/index" as *;
|
||||
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片过渡动画
|
||||
// 根据遍历的卡片数量应用动画，卡片数量支持20个
|
||||
@for $i from 0 through 20 {
|
||||
.animated-fade-up-#{$i} {
|
||||
opacity: 0; // 初始透明度
|
||||
animation-name: fade-up; // 应用动画
|
||||
animation-duration: 0.5s; // 动画持续时间
|
||||
animation-fill-mode: forwards; // 保持结束后的动画状态
|
||||
/* stylelint-disable-next-line scss/operator-no-unspaced */
|
||||
animation-delay: calc($i/10) + s; // 设置延迟-每次延迟0.1s
|
||||
}
|
||||
}
|
||||
@ -1,45 +1,47 @@
|
||||
// 设置滚动条的样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// 基于 WebKit 内核的浏览器
|
||||
// 设置滚动条的样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// 设置滚动条hover样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
|
||||
::-ms-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-ms-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
// arco滚动条样式
|
||||
// 横向
|
||||
.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
|
||||
height: 4px !important;
|
||||
}
|
||||
|
||||
// 纵向
|
||||
.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
|
||||
width: 4px !important;
|
||||
}
|
||||
@use "@/style/var/index" as *;
|
||||
|
||||
// 设置滚动条的样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// 基于 WebKit 内核的浏览器
|
||||
// 设置滚动条的样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// 设置滚动条hover样式，宽、圆角、背景颜色
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
|
||||
::-ms-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-ms-scrollbar-thumb:hover {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $color-border-4;
|
||||
}
|
||||
|
||||
// arco滚动条样式
|
||||
// 横向
|
||||
.arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
|
||||
height: 4px !important;
|
||||
}
|
||||
|
||||
// 纵向
|
||||
.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
|
||||
width: 4px !important;
|
||||
}
|
||||
@ -1,45 +1,46 @@
|
||||
/* global style scss */
|
||||
|
||||
// ============非铺满main窗口============
|
||||
// 整体main窗口容器-有内边距
|
||||
.snow-page {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
padding: $padding;
|
||||
overflow-y: auto;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
|
||||
// 内部main窗口容器-有内边距
|
||||
.snow-inner {
|
||||
padding: $padding;
|
||||
background: $color-bg-1;
|
||||
}
|
||||
|
||||
// ==============铺满main窗口==================
|
||||
// 铺满main窗口-有内边距
|
||||
.snow-fill {
|
||||
height: 100%;
|
||||
padding: $padding;
|
||||
overflow: hidden;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
.snow-fill-inner {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: $padding;
|
||||
overflow: hidden;
|
||||
background: $color-bg-1;
|
||||
}
|
||||
|
||||
// 铺满main窗口-无内边距
|
||||
.snow-fill-pure {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* global style scss */
|
||||
@use "@/style/var/index" as *;
|
||||
|
||||
// ============非铺满main窗口============
|
||||
// 整体main窗口容器-有内边距
|
||||
.snow-page {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
padding: $padding;
|
||||
overflow-y: auto;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
|
||||
// 内部main窗口容器-有内边距
|
||||
.snow-inner {
|
||||
padding: $padding;
|
||||
background: $color-bg-1;
|
||||
}
|
||||
|
||||
// ==============铺满main窗口==================
|
||||
// 铺满main窗口-有内边距
|
||||
.snow-fill {
|
||||
height: 100%;
|
||||
padding: $padding;
|
||||
overflow: hidden;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
.snow-fill-inner {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: $padding;
|
||||
overflow: hidden;
|
||||
background: $color-bg-1;
|
||||
}
|
||||
|
||||
// 铺满main窗口-无内边距
|
||||
.snow-fill-pure {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $color-fill-1;
|
||||
}
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -1,123 +1,125 @@
|
||||
/* global css transition */
|
||||
// Transition过渡动画
|
||||
|
||||
/* 轻过渡 */
|
||||
// 进入
|
||||
.fadeInOut-enter-active {
|
||||
animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.fadeInOut-leave-active {
|
||||
animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-leave-right {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-leave-right {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
// 进入
|
||||
.cardInOut-enter-active {
|
||||
animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
|
||||
}
|
||||
|
||||
@keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotateX(-100deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.cardInOut-leave-active {
|
||||
animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
|
||||
}
|
||||
|
||||
@keyframes swing-out-top-bck {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotateX(-100deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* 渐退 */
|
||||
// 进入
|
||||
.fadeOut-enter-active {
|
||||
animation: fade-in 0.25s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.fadeOut-leave-active {
|
||||
animation: fade-out 0.25s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* global css transition */
|
||||
@use "@/style/var/index" as *;
|
||||
|
||||
// Transition过渡动画
|
||||
|
||||
/* 轻过渡 */
|
||||
// 进入
|
||||
.fadeInOut-enter-active {
|
||||
animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.fadeInOut-leave-active {
|
||||
animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-leave-right {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-leave-right {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
// 进入
|
||||
.cardInOut-enter-active {
|
||||
animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
|
||||
}
|
||||
|
||||
@keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotateX(-100deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.cardInOut-leave-active {
|
||||
animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
|
||||
}
|
||||
|
||||
@keyframes swing-out-top-bck {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotateX(-100deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* 渐退 */
|
||||
// 进入
|
||||
.fadeOut-enter-active {
|
||||
animation: fade-in 0.25s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 离开
|
||||
.fadeOut-leave-active {
|
||||
animation: fade-out 0.25s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
5
src/style/model/index.scss
Normal file
5
src/style/model/index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@use "@/style/model/global-transition";
|
||||
@use "@/style/model/global-style";
|
||||
@use "@/style/model/global-scrollbar";
|
||||
@use "@/style/model/loading-page";
|
||||
@use "@/style/model/card-animation";
|
||||
@ -1,54 +1,55 @@
|
||||
.loading-page {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* HTML: <div class="dc-loader"></div> */
|
||||
.dc-loader {
|
||||
width: 45px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
--c: no-repeat linear-gradient(rgb(var(--primary-6)) 0 0);
|
||||
|
||||
background:
|
||||
var(--c) 0% 50%,
|
||||
var(--c) 50% 50%,
|
||||
var(--c) 100% 50%;
|
||||
background-size: 20% 100%;
|
||||
animation: l1 1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes l1 {
|
||||
0% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
33% {
|
||||
background-size:
|
||||
20% 10%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
50% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 10%,
|
||||
20% 100%;
|
||||
}
|
||||
66% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 10%;
|
||||
}
|
||||
100% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
}
|
||||
@use "@/style/var/index" as *;
|
||||
.loading-page {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* HTML: <div class="dc-loader"></div> */
|
||||
.dc-loader {
|
||||
width: 45px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
--c: no-repeat linear-gradient(rgb(var(--primary-6)) 0 0);
|
||||
|
||||
background:
|
||||
var(--c) 0% 50%,
|
||||
var(--c) 50% 50%,
|
||||
var(--c) 100% 50%;
|
||||
background-size: 20% 100%;
|
||||
animation: l1 1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes l1 {
|
||||
0% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
33% {
|
||||
background-size:
|
||||
20% 10%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
50% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 10%,
|
||||
20% 100%;
|
||||
}
|
||||
66% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 10%;
|
||||
}
|
||||
100% {
|
||||
background-size:
|
||||
20% 100%,
|
||||
20% 100%,
|
||||
20% 100%;
|
||||
}
|
||||
}
|
||||
@ -1,85 +1,85 @@
|
||||
/* global css theme */
|
||||
|
||||
$margin: 14px; // 盒子间距
|
||||
$margin-text: 8px; // 文字间距-行内
|
||||
$padding: 16px; // 盒子和内容的间距
|
||||
$icon-box: 24px; // icon盒子通用大小
|
||||
$icon-size: 18px; // icon通用大小
|
||||
|
||||
$radius-box-1: 4px; // 边框圆角-迷你-用于icon、按钮等一些细微的圆角
|
||||
$radius-box-2: 6px; // 边框圆角-小型
|
||||
$radius-box-3: 8px; // 边框圆角-中型
|
||||
$radius-box-4: 10px; // 边框圆角-大型
|
||||
$radius-box-5: 12px; // 边框圆角-极大
|
||||
|
||||
// 边框宽度
|
||||
$border-1: 1px; // 常规-主要
|
||||
$border-2: 2px; // 较粗
|
||||
$border-3: 3px; // 粗
|
||||
|
||||
// 边框色
|
||||
$color-border-1: var(--color-border-1); // 浅色
|
||||
$color-border-2: var(--color-border-2); // 常规-主要边框色
|
||||
$color-border-3: var(--color-border-3); // 深/悬浮
|
||||
$color-border-4: var(--color-border-4); // 重/按钮描边
|
||||
|
||||
// 默认不占位边框
|
||||
$shadow-border-1: inset 0 0 0 1px red;
|
||||
$shadow-border-2: inset 0 0 0 1px cyan;
|
||||
$shadow-border-3: inset 0 0 0 1px blue;
|
||||
$shadow-border-4: inset 0 0 0 1px gold;
|
||||
$shadow-border-5: inset 0 0 0 1px violet;
|
||||
$shadow-border-6: inset 0 0 0 1px green;
|
||||
|
||||
// 填充色
|
||||
$color-fill-1: var(--color-fill-1); // 浅/禁用-main背景色
|
||||
$color-fill-2: var(--color-fill-2); // 常规填充色/灰底悬浮
|
||||
$color-fill-3: var(--color-fill-3); // 深/灰底悬浮
|
||||
$color-fill-4: var(--color-fill-4); // 重/特殊场景
|
||||
|
||||
// 设置全局主题色：https://arco.design/vue/docs/token
|
||||
$color-primary: rgb(var(--primary-6)); // 主题色-主要
|
||||
$color-success: rgb(var(--success-6)); // 成功色
|
||||
$color-warning: rgb(var(--warning-6)); // 警示色
|
||||
$color-danger: rgb(var(--danger-6)); // 错误色
|
||||
$color-link: rgb(var(--link-6)); // 链接色
|
||||
|
||||
// 字体色
|
||||
$color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题
|
||||
$color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
|
||||
$color-text-3: var(--color-text-3); // 次要信息 二级字体色
|
||||
$color-text-4: var(--color-text-4); // 置灰信息
|
||||
|
||||
// 背景色
|
||||
$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口卡片背景
|
||||
$color-bg-2: var(--color-bg-2); // 一级容器背景
|
||||
$color-bg-3: var(--color-bg-3); // 二级容器背景
|
||||
$color-bg-4: var(--color-bg-4); // 三级容器背景
|
||||
$color-bg-5: var(--color-bg-5); // 下拉弹出框、Tooltip 背景颜色
|
||||
$color-bg-white: var(--color-bg-white); // 白色背景
|
||||
|
||||
// 阴影
|
||||
$shadow-special: 0 0 1px rgb(0 0 0 / 30%); // 特殊阴影
|
||||
$shadow1-center: 0 -2px 5px rgb(0 0 0 / 10%); // 阴影样式1
|
||||
$shadow2-center: 0 0 10px rgb(0 0 0 / 10%); // 阴影样式2
|
||||
$shadow3-center: 0 0 20px rgb(0 0 0 / 10%); // 阴影样式3
|
||||
|
||||
// 常规大小为字体对应的首选项
|
||||
// 字体大小
|
||||
$font-size-body-3: 14px; // 默认大小-正文-常规
|
||||
$font-size-body-2: 13px; // 小号字体
|
||||
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
|
||||
// 标题
|
||||
$font-size-title-1: 16px; // h3-标题-小
|
||||
$font-size-title-2: 20px; // 常规-h2-标题-中
|
||||
$font-size-title-3: 24px; // h1-标题-大
|
||||
$font-size-title-4: 28px; // h1-标题-巨大
|
||||
$font-size-title-5: 32px; // h1-标题-极大
|
||||
// 运营标题
|
||||
$font-size-display-1: 36px; // 运营标题-小
|
||||
$font-size-display-2: 48px; // 常规-运营标题-中
|
||||
$font-size-display-3: 56px; // 运营标题-大
|
||||
|
||||
// icon的衬线类型
|
||||
$stroke-width-3: 3; // 衬线-3 轻线
|
||||
$stroke-width-4: 4; // 默认-衬线-4 重线
|
||||
/* global css theme */
|
||||
|
||||
$margin: 14px; // 盒子间距
|
||||
$margin-text: 8px; // 文字间距-行内
|
||||
$padding: 16px; // 盒子和内容的间距
|
||||
$icon-box: 24px; // icon盒子通用大小
|
||||
$icon-size: 18px; // icon通用大小
|
||||
|
||||
$radius-box-1: 4px; // 边框圆角-迷你-用于icon、按钮等一些细微的圆角
|
||||
$radius-box-2: 6px; // 边框圆角-小型
|
||||
$radius-box-3: 8px; // 边框圆角-中型
|
||||
$radius-box-4: 10px; // 边框圆角-大型
|
||||
$radius-box-5: 12px; // 边框圆角-极大
|
||||
|
||||
// 边框宽度
|
||||
$border-1: 1px; // 常规-主要
|
||||
$border-2: 2px; // 较粗
|
||||
$border-3: 3px; // 粗
|
||||
|
||||
// 边框色
|
||||
$color-border-1: var(--color-border-1); // 浅色
|
||||
$color-border-2: var(--color-border-2); // 常规-主要边框色
|
||||
$color-border-3: var(--color-border-3); // 深/悬浮
|
||||
$color-border-4: var(--color-border-4); // 重/按钮描边
|
||||
|
||||
// 默认不占位边框
|
||||
$shadow-border-1: inset 0 0 0 1px red;
|
||||
$shadow-border-2: inset 0 0 0 1px cyan;
|
||||
$shadow-border-3: inset 0 0 0 1px blue;
|
||||
$shadow-border-4: inset 0 0 0 1px gold;
|
||||
$shadow-border-5: inset 0 0 0 1px violet;
|
||||
$shadow-border-6: inset 0 0 0 1px green;
|
||||
|
||||
// 填充色
|
||||
$color-fill-1: var(--color-fill-1); // 浅/禁用-main背景色
|
||||
$color-fill-2: var(--color-fill-2); // 常规填充色/灰底悬浮
|
||||
$color-fill-3: var(--color-fill-3); // 深/灰底悬浮
|
||||
$color-fill-4: var(--color-fill-4); // 重/特殊场景
|
||||
|
||||
// 设置全局主题色：https://arco.design/vue/docs/token
|
||||
$color-primary: rgb(var(--primary-6)); // 主题色-主要
|
||||
$color-success: rgb(var(--success-6)); // 成功色
|
||||
$color-warning: rgb(var(--warning-6)); // 警示色
|
||||
$color-danger: rgb(var(--danger-6)); // 错误色
|
||||
$color-link: rgb(var(--link-6)); // 链接色
|
||||
|
||||
// 字体色
|
||||
$color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题
|
||||
$color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
|
||||
$color-text-3: var(--color-text-3); // 次要信息 二级字体色
|
||||
$color-text-4: var(--color-text-4); // 置灰信息
|
||||
|
||||
// 背景色
|
||||
$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口卡片背景
|
||||
$color-bg-2: var(--color-bg-2); // 一级容器背景
|
||||
$color-bg-3: var(--color-bg-3); // 二级容器背景
|
||||
$color-bg-4: var(--color-bg-4); // 三级容器背景
|
||||
$color-bg-5: var(--color-bg-5); // 下拉弹出框、Tooltip 背景颜色
|
||||
$color-bg-white: var(--color-bg-white); // 白色背景
|
||||
|
||||
// 阴影
|
||||
$shadow-special: 0 0 1px rgb(0 0 0 / 30%); // 特殊阴影
|
||||
$shadow1-center: 0 -2px 5px rgb(0 0 0 / 10%); // 阴影样式1
|
||||
$shadow2-center: 0 0 10px rgb(0 0 0 / 10%); // 阴影样式2
|
||||
$shadow3-center: 0 0 20px rgb(0 0 0 / 10%); // 阴影样式3
|
||||
|
||||
// 常规大小为字体对应的首选项
|
||||
// 字体大小
|
||||
$font-size-body-3: 14px; // 默认大小-正文-常规
|
||||
$font-size-body-2: 13px; // 小号字体
|
||||
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
|
||||
// 标题
|
||||
$font-size-title-1: 16px; // h3-标题-小
|
||||
$font-size-title-2: 20px; // 常规-h2-标题-中
|
||||
$font-size-title-3: 24px; // h1-标题-大
|
||||
$font-size-title-4: 28px; // h1-标题-巨大
|
||||
$font-size-title-5: 32px; // h1-标题-极大
|
||||
// 运营标题
|
||||
$font-size-display-1: 36px; // 运营标题-小
|
||||
$font-size-display-2: 48px; // 常规-运营标题-中
|
||||
$font-size-display-3: 56px; // 运营标题-大
|
||||
|
||||
// icon的衬线类型
|
||||
$stroke-width-3: 3; // 衬线-3 轻线
|
||||
$stroke-width-4: 4; // 默认-衬线-4 重线
|
||||
2
src/style/var/index.scss
Normal file
2
src/style/var/index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@forward "./global-theme";
|
||||
@forward "./media";
|
||||
16
src/style/var/media.scss
Normal file
16
src/style/var/media.scss
Normal file
@ -0,0 +1,16 @@
|
||||
/* 栅格布局 (媒体查询的变量)
|
||||
* 参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
|
||||
* $xs: >= 0px;
|
||||
* $sm: >= 576px;
|
||||
* $md: >= 768px;
|
||||
* $lg: >= 992px;
|
||||
* $xl: >= 1200px;
|
||||
* $xxl: >= 1600px;
|
||||
*/
|
||||
|
||||
$xs: 0px;
|
||||
$sm: 576px;
|
||||
$md: 768px;
|
||||
$lg: 992px;
|
||||
$xl: 1200px;
|
||||
$xxl: 1600px;
|
||||
@ -207,7 +207,7 @@ const reset = () => {
|
||||
getDict();
|
||||
};
|
||||
|
||||
const open = ref<Boolean>(false);
|
||||
const open = ref<boolean>(false);
|
||||
const title = ref<string>("");
|
||||
const rules = {
|
||||
name: [
|
||||
|
||||
2
src/vite-env.d.ts
vendored
2
src/vite-env.d.ts
vendored
@ -1,7 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
declare module "*.vue" {
|
||||
import { DefineComponent } from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
const component: DefineComponent<object, object, any>;
|
||||
export default component;
|
||||
}
|
||||
declare module "vue-i18n";
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { defineConfig, normalizePath, loadEnv } from "vite";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import path from "path";
|
||||
import { resolve } from "path";
|
||||
import { include } from "./build/optimize";
|
||||
import postcssPresetEnv from "postcss-preset-env";
|
||||
import { createVitePlugins } from "./build/vite-plugin";
|
||||
const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
|
||||
// const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
@ -43,8 +43,7 @@ export default defineConfig(({ mode }) => {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// additionalData的内容会在每个scss文件的开头自动注入
|
||||
additionalData: `@import "${themePath}";
|
||||
`
|
||||
additionalData: `@use "@/style/var/index.scss" as *; `
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user