diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index dcac4fb..0000000 --- a/.eslintignore +++ /dev/null @@ -1,14 +0,0 @@ -*.sh -node_modules -*.md -*.woff -*.ttf -.vscode -.idea -dist -/public -/docs -.husky -.local -/bin -/src/mock/* diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 317409b..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -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- 使用注释或要求在指令后进行描述 - "@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", // 防止 diff --git a/src/layout/components/Header/components/system-settings/index.vue b/src/layout/components/Header/components/system-settings/index.vue index d625882..37f482b 100644 --- a/src/layout/components/Header/components/system-settings/index.vue +++ b/src/layout/components/Header/components/system-settings/index.vue @@ -107,7 +107,7 @@ const onWatermarkGap = (e: number) => { 如果关闭,那么所有tabs全部取消、所有页面缓存全部取消 如果开启,那么添加当前路由到tabs */ -const tabsChange = (e: Boolean) => { +const tabsChange = (e: boolean) => { if (!e) { tabsList.value = []; cacheRoutes.value = []; diff --git a/src/store/modules/theme-config.ts b/src/store/modules/theme-config.ts index 4cf9c9e..4e7c37c 100644 --- a/src/store/modules/theme-config.ts +++ b/src/store/modules/theme-config.ts @@ -35,7 +35,7 @@ const themeConfig = () => { // 水印间隙 const watermarkGap = ref<[number, number]>([100, 100]); // 防止调试 - const debugPrevention = ref(false); + const debugPrevention = ref(false); // 布局模式:layoutDefaults、layoutHead、layoutMixing const layoutType = ref("layoutDefaults"); // 色弱模式 diff --git a/src/style/index.scss b/src/style/index.scss index 226f445..926fdf2 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -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; diff --git a/src/style/media/index.scss b/src/style/media/index.scss index ee71c1c..ebab64b 100644 --- a/src/style/media/index.scss +++ b/src/style/media/index.scss @@ -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"; diff --git a/src/style/media/layout.scss b/src/style/media/layout.scss index f9a322b..90a5dd4 100644 --- a/src/style/media/layout.scss +++ b/src/style/media/layout.scss @@ -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; } } diff --git a/src/style/media/media.scss b/src/style/media/media.scss deleted file mode 100644 index 8d689cb..0000000 --- a/src/style/media/media.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./layout.scss"; diff --git a/src/style/card-animation.scss b/src/style/model/card-animation.scss similarity index 95% rename from src/style/card-animation.scss rename to src/style/model/card-animation.scss index 032ebfc..6ecedc6 100644 --- a/src/style/card-animation.scss +++ b/src/style/model/card-animation.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 + } +} diff --git a/src/style/global-scrollbar.scss b/src/style/model/global-scrollbar.scss similarity index 95% rename from src/style/global-scrollbar.scss rename to src/style/model/global-scrollbar.scss index c3a7cae..3beef7b 100644 --- a/src/style/global-scrollbar.scss +++ b/src/style/model/global-scrollbar.scss @@ -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; +} diff --git a/src/style/global-style.scss b/src/style/model/global-style.scss similarity index 95% rename from src/style/global-style.scss rename to src/style/model/global-style.scss index 37278ff..a3ebecd 100644 --- a/src/style/global-style.scss +++ b/src/style/model/global-style.scss @@ -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; +} diff --git a/src/style/global-transition.scss b/src/style/model/global-transition.scss similarity index 94% rename from src/style/global-transition.scss rename to src/style/model/global-transition.scss index 1d39522..38bea10 100644 --- a/src/style/global-transition.scss +++ b/src/style/model/global-transition.scss @@ -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; + } +} diff --git a/src/style/model/index.scss b/src/style/model/index.scss new file mode 100644 index 0000000..5a89818 --- /dev/null +++ b/src/style/model/index.scss @@ -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"; diff --git a/src/style/loading-page.scss b/src/style/model/loading-page.scss similarity index 93% rename from src/style/loading-page.scss rename to src/style/model/loading-page.scss index 9a58938..0bfb247 100644 --- a/src/style/loading-page.scss +++ b/src/style/model/loading-page.scss @@ -1,54 +1,55 @@ -.loading-page { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -/* HTML:
*/ -.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:
*/ +.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%; + } +} diff --git a/src/style/global-theme.scss b/src/style/var/global-theme.scss similarity index 97% rename from src/style/global-theme.scss rename to src/style/var/global-theme.scss index 21f93b9..99172e7 100644 --- a/src/style/global-theme.scss +++ b/src/style/var/global-theme.scss @@ -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 重线 diff --git a/src/style/var/index.scss b/src/style/var/index.scss new file mode 100644 index 0000000..d7316ee --- /dev/null +++ b/src/style/var/index.scss @@ -0,0 +1,2 @@ +@forward "./global-theme"; +@forward "./media"; diff --git a/src/style/var/media.scss b/src/style/var/media.scss new file mode 100644 index 0000000..6b3f608 --- /dev/null +++ b/src/style/var/media.scss @@ -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; diff --git a/src/views/system/dictionary/dictionary.vue b/src/views/system/dictionary/dictionary.vue index 05ed5d4..d9f27d6 100644 --- a/src/views/system/dictionary/dictionary.vue +++ b/src/views/system/dictionary/dictionary.vue @@ -207,7 +207,7 @@ const reset = () => { getDict(); }; -const open = ref(false); +const open = ref(false); const title = ref(""); const rules = { name: [ diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 2b4d449..5bc2795 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,7 +1,7 @@ /// declare module "*.vue" { import { DefineComponent } from "vue"; - const component: DefineComponent<{}, {}, any>; + const component: DefineComponent; export default component; } declare module "vue-i18n"; diff --git a/vite.config.ts b/vite.config.ts index a5394a9..da19f87 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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 *; ` } } },