From 94212b4d5b3eb1542585485642f9140c3d300ab0 Mon Sep 17 00:00:00 2001 From: wang_fan_w <2547096351@qq.com> Date: Sat, 6 Apr 2024 00:24:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AD=E5=BF=83=E7=9A=84=E7=A9=BA?= =?UTF-8?q?=E9=9A=99=E4=BB=A5=E5=8F=8A=E5=A4=B4=E9=83=A8=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/_/commit-msg | 4 +- .husky/_/pre-commit | 7 +- src/auto-import.d.ts | 130 ++++++++++++++----------- src/components.d.ts | 8 +- src/layout/components/Aside/index.vue | 9 +- src/layout/components/Footer/index.vue | 4 +- src/layout/components/Header/index.vue | 106 +++++++++++++++++++- src/layout/components/Main/index.vue | 18 +++- src/layout/components/Tabs/index.vue | 10 +- src/style/global-theme.scss | 36 ++++--- 10 files changed, 239 insertions(+), 93 deletions(-) diff --git a/.husky/_/commit-msg b/.husky/_/commit-msg index 21c69a4..94647a4 100644 --- a/.husky/_/commit-msg +++ b/.husky/_/commit-msg @@ -1,2 +1,4 @@ #!/usr/bin/env sh -. "${0%/*}/h" \ No newline at end of file +. "$(dirname -- "$0")/husky.sh" + +npx --no-install commitlint --edit $1 \ No newline at end of file diff --git a/.husky/_/pre-commit b/.husky/_/pre-commit index 21c69a4..1bbfe41 100644 --- a/.husky/_/pre-commit +++ b/.husky/_/pre-commit @@ -1,2 +1,5 @@ -#!/usr/bin/env sh -. "${0%/*}/h" \ No newline at end of file +#!/bin/sh + +. "$(dirname "$0")/husky.sh" + +npm run lint-staged \ No newline at end of file diff --git a/src/auto-import.d.ts b/src/auto-import.d.ts index 65b02fd..714a6ac 100644 --- a/src/auto-import.d.ts +++ b/src/auto-import.d.ts @@ -5,67 +5,79 @@ // Generated by unplugin-auto-import export {} declare global { - const EffectScope: typeof import('vue')['EffectScope'] - const computed: typeof import('vue')['computed'] - const createApp: typeof import('vue')['createApp'] - const customRef: typeof import('vue')['customRef'] - const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] - const defineComponent: typeof import('vue')['defineComponent'] - const effectScope: typeof import('vue')['effectScope'] - 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 markRaw: typeof import('vue')['markRaw'] - const nextTick: typeof import('vue')['nextTick'] - const onActivated: typeof import('vue')['onActivated'] - const onBeforeMount: typeof import('vue')['onBeforeMount'] - const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] - const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] - const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] - const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] - const onDeactivated: typeof import('vue')['onDeactivated'] - const onErrorCaptured: typeof import('vue')['onErrorCaptured'] - const onMounted: typeof import('vue')['onMounted'] - const onRenderTracked: typeof import('vue')['onRenderTracked'] - const onRenderTriggered: typeof import('vue')['onRenderTriggered'] - const onScopeDispose: typeof import('vue')['onScopeDispose'] - const onServerPrefetch: typeof import('vue')['onServerPrefetch'] - const onUnmounted: typeof import('vue')['onUnmounted'] - const onUpdated: typeof import('vue')['onUpdated'] - 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 shallowReactive: typeof import('vue')['shallowReactive'] - const shallowReadonly: typeof import('vue')['shallowReadonly'] - const shallowRef: typeof import('vue')['shallowRef'] - 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 useAttrs: typeof import('vue')['useAttrs'] - const useCssModule: typeof import('vue')['useCssModule'] - const useCssVars: typeof import('vue')['useCssVars'] - const useLink: typeof import('vue-router')['useLink'] - const useRoute: typeof import('vue-router')['useRoute'] - const useRouter: typeof import('vue-router')['useRouter'] - const useSlots: typeof import('vue')['useSlots'] - const watch: typeof import('vue')['watch'] - const watchEffect: typeof import('vue')['watchEffect'] - const watchPostEffect: typeof import('vue')['watchPostEffect'] - const watchSyncEffect: typeof import('vue')['watchSyncEffect'] + const EffectScope: (typeof import("vue"))["EffectScope"]; + const computed: (typeof import("vue"))["computed"]; + const createApp: (typeof import("vue"))["createApp"]; + const customRef: (typeof import("vue"))["customRef"]; + const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"]; + const defineComponent: (typeof import("vue"))["defineComponent"]; + const effectScope: (typeof import("vue"))["effectScope"]; + 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 markRaw: (typeof import("vue"))["markRaw"]; + const nextTick: (typeof import("vue"))["nextTick"]; + const onActivated: (typeof import("vue"))["onActivated"]; + const onBeforeMount: (typeof import("vue"))["onBeforeMount"]; + const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"]; + const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"]; + const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"]; + const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"]; + const onDeactivated: (typeof import("vue"))["onDeactivated"]; + const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"]; + const onMounted: (typeof import("vue"))["onMounted"]; + const onRenderTracked: (typeof import("vue"))["onRenderTracked"]; + const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"]; + const onScopeDispose: (typeof import("vue"))["onScopeDispose"]; + const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"]; + const onUnmounted: (typeof import("vue"))["onUnmounted"]; + const onUpdated: (typeof import("vue"))["onUpdated"]; + 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 shallowReactive: (typeof import("vue"))["shallowReactive"]; + const shallowReadonly: (typeof import("vue"))["shallowReadonly"]; + const shallowRef: (typeof import("vue"))["shallowRef"]; + 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 useAttrs: (typeof import("vue"))["useAttrs"]; + const useCssModule: (typeof import("vue"))["useCssModule"]; + const useCssVars: (typeof import("vue"))["useCssVars"]; + const useLink: (typeof import("vue-router"))["useLink"]; + const useRoute: (typeof import("vue-router"))["useRoute"]; + const useRouter: (typeof import("vue-router"))["useRouter"]; + const useSlots: (typeof import("vue"))["useSlots"]; + 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 { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' - import('vue') + export type { + Component, + ComponentPublicInstance, + ComputedRef, + ExtractDefaultPropTypes, + ExtractPropTypes, + ExtractPublicPropTypes, + InjectionKey, + PropType, + Ref, + VNode, + WritableComputedRef + } from "vue"; + import("vue"); } diff --git a/src/components.d.ts b/src/components.d.ts index fa3e33e..3a9bd79 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -5,10 +5,10 @@ // Read more: https://github.com/vuejs/core/pull/3399 export {} -declare module 'vue' { +declare module "vue" { export interface GlobalComponents { - RouterLink: typeof import('vue-router')['RouterLink'] - RouterView: typeof import('vue-router')['RouterView'] - SvgIcon: typeof import('./components/SvgIcon/index.vue')['default'] + RouterLink: (typeof import("vue-router"))["RouterLink"]; + RouterView: (typeof import("vue-router"))["RouterView"]; + SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"]; } } diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue index 88d9671..081e345 100644 --- a/src/layout/components/Aside/index.vue +++ b/src/layout/components/Aside/index.vue @@ -6,7 +6,7 @@ - + Menu 1 @@ -41,7 +41,7 @@ const onCollapse = (type: boolean) => { justify-content: space-around; align-items: center; box-sizing: border-box; - border-bottom: $border-1 solid $color-border-1; + border-right: $border-1 solid $color-border-2; .logo { width: 30px; } @@ -62,4 +62,9 @@ const onCollapse = (type: boolean) => { width: 4px; margin-left: 8px; } +// 去掉右侧阴影并替换为边线 +:deep(.arco-layout-sider-light) { + box-shadow: unset; + border-right: $border-1 solid $color-border-2; +} diff --git a/src/layout/components/Footer/index.vue b/src/layout/components/Footer/index.vue index 5f55a33..f1b846e 100644 --- a/src/layout/components/Footer/index.vue +++ b/src/layout/components/Footer/index.vue @@ -1,6 +1,6 @@ @@ -10,7 +10,7 @@ .footer { height: 30px; box-sizing: border-box; - border-top: $border-1 solid $color-border-1; + border-top: $border-1 solid $color-border-2; display: flex; align-items: center; } diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue index 8d69bbe..6cc0227 100644 --- a/src/layout/components/Header/index.vue +++ b/src/layout/components/Header/index.vue @@ -1,13 +1,113 @@ - + diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue index 1dd68ae..4c4e8e8 100644 --- a/src/layout/components/Main/index.vue +++ b/src/layout/components/Main/index.vue @@ -1,19 +1,31 @@ - + + diff --git a/src/style/global-theme.scss b/src/style/global-theme.scss index 75c0b3a..1fb3ef9 100644 --- a/src/style/global-theme.scss +++ b/src/style/global-theme.scss @@ -5,20 +5,32 @@ $padding: 16px; // 盒子和内容的间距 $radius-box: 2px; // 边框圆角 // 边框宽度 -$border-1: 1px; // 常规 +$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); // 重/按钮描边 + // 默认不占位边框 -$border-no-1: inset 0 0 0 1px red; -$border-no-2: inset 0 0 0 1px cyan; -$border-no-3: inset 0 0 0 1px blue; -$border-no-4: inset 0 0 0 1px gold; -$border-no-5: inset 0 0 0 1px violet; -$border-no-6: inset 0 0 0 1px green; +$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: #eeeeee; // 常规填充色/白底悬浮 +$color-fill-2: #d1d1d1; // 深/灰底悬浮 +$color-fill-3: #b6b6b6; // 重/特殊场景 +$color-fill-4: #9b9b9b; // 浅/禁用 // 设置全局主题色：https://arco.design/vue/docs/token -$color-primary: rgb(var(--primary-6)); // 主题色 +$color-primary: rgb(var(--primary-6)); // 主题色-主要 $color-success: rgb(var(--success-6)); // 成功色 $color-warning: rgb(var(--warning-6)); // 警示色 $color-danger: rgb(var(--danger-6)); // 错误色 @@ -30,12 +42,6 @@ $color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题 $color-text-3: var(--color-text-3); // 次要信息 二级字体色 $color-text-4: var(--color-text-4); // 置灰信息 -// 边框色 -$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); // 重/按钮描边 - // 背景色 $color-bg-1: var(--color-bg-1); // 整体背景色 $color-bg-2: var(--color-bg-2); // 一级容器背景 @@ -51,7 +57,7 @@ $shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3 // 常规大小为字体对应的首选项 // 字体大小 $font-size-body-3: 14px; // 默认大小-正文-常规 -$font-size-body-2: 13px; // 默认的小号字体 +$font-size-body-2: 13px; // 小号字体 $font-size-body-1: 12px; // 说明描述-辅助文案/次要文案 // 标题 $font-size-title-1: 16px; // h3-标题-小