From b32093a9b0d6031ffb1e8bfdb4ebf13fcc71c603 Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Sat, 1 Mar 2025 20:51:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 6 +- src/assets/styles/animations/animations.scss | 3 +- .../styles/animations/src/transition.scss | 66 +++++++++++++++++++ src/assets/styles/common/common.scss | 19 ++++++ src/assets/styles/common/src/element.scss | 9 +++ src/assets/styles/global.scss | 12 +++- src/layout/index.vue | 48 +++++++------- src/plugins/autofit.ts | 3 + src/router/index.ts | 45 ++----------- src/router/modules/error.ts | 11 ++++ src/router/modules/home.ts | 14 ++++ src/router/modules/remaining.ts | 19 ++++++ 12 files changed, 190 insertions(+), 65 deletions(-) create mode 100644 src/assets/styles/animations/src/transition.scss create mode 100644 src/router/modules/error.ts create mode 100644 src/router/modules/home.ts create mode 100644 src/router/modules/remaining.ts diff --git a/src/App.vue b/src/App.vue index 98240ae..470c788 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,7 @@ diff --git a/src/assets/styles/animations/animations.scss b/src/assets/styles/animations/animations.scss index 81e9eb9..9785671 100644 --- a/src/assets/styles/animations/animations.scss +++ b/src/assets/styles/animations/animations.scss @@ -1 +1,2 @@ -@use "src/rotate"; \ No newline at end of file +@use "src/rotate"; +@use "src/transition"; diff --git a/src/assets/styles/animations/src/transition.scss b/src/assets/styles/animations/src/transition.scss new file mode 100644 index 0000000..50adea9 --- /dev/null +++ b/src/assets/styles/animations/src/transition.scss @@ -0,0 +1,66 @@ +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all 0.38s; +} + +.fade-transform-enter-from { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active { + transition: all 0.4s; +} + +.breadcrumb-leave-active { + position: absolute; + transition: all 0.3s; +} + +.breadcrumb-enter-from, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +/** + * @description 重置el-menu的展开收起动画时长 + */ +.outer-most .el-collapse-transition-leave-active, +.outer-most .el-collapse-transition-enter-active { + transition: 0.2s all ease-in-out !important; +} + +.horizontal-collapse-transition { + transition: var(--pure-transition-duration) all !important; +} + +.slide-enter-active, +.slide-leave-active { + transition: opacity 0.3s, + transform 0.3s; +} + +.slide-enter-from, +.slide-leave-to { + opacity: 0; + transform: translateX(-30%); +} \ No newline at end of file diff --git a/src/assets/styles/common/common.scss b/src/assets/styles/common/common.scss index 936448b..a9e9af5 100644 --- a/src/assets/styles/common/common.scss +++ b/src/assets/styles/common/common.scss @@ -1,3 +1,22 @@ @use "src/element"; +/* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */ +::-webkit-scrollbar { + width: 8px; + height: 8px; + background-color: var(--el-text-color-secondary); +} +/* 定义滚动条轨道内阴影+圆角 */ +::-webkit-scrollbar-track { + background-color: #ebecef; + border-radius: 5px; + box-shadow: inset 0 0 6px #ebecef; +} + +/* 定义滑块内阴影+圆角 */ +::-webkit-scrollbar-thumb { + background-color: #d0d2d6; + border-radius: 5px; + box-shadow: inset 0 0 6px #d0d2d6; +} \ No newline at end of file diff --git a/src/assets/styles/common/src/element.scss b/src/assets/styles/common/src/element.scss index 3b7b9a2..c610d40 100644 --- a/src/assets/styles/common/src/element.scss +++ b/src/assets/styles/common/src/element.scss @@ -8,3 +8,12 @@ border: 2px dashed; /* 边框宽度、样式和颜色 */ border-radius: 50%; /* 将元素变成圆形 */ } + +.hover { + transition: all 0.3s; + cursor: pointer; + + &:hover { + color: var(--color-hover); + } +} \ No newline at end of file diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index 52d1fb2..70bea28 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -1,2 +1,12 @@ @use "animations/animations"; -@use "common/common"; \ No newline at end of file +@use "common/common"; + +:root { + --colot-primary: #027AFF; + --color-primary-secondary: #00FFFF; + --color-info: #7CC1FF; + --color-hover: #1C8ADF; + --color-warning: #FFBE44; + --color-warning-secondary: #FEDB65; + --background-color: #051135; +} \ No newline at end of file diff --git a/src/layout/index.vue b/src/layout/index.vue index 9abb037..4a49da6 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -11,28 +11,32 @@ onMounted(() => { diff --git a/src/plugins/autofit.ts b/src/plugins/autofit.ts index 0deffb2..59748d0 100644 --- a/src/plugins/autofit.ts +++ b/src/plugins/autofit.ts @@ -11,5 +11,8 @@ export const autoFit = () => { dw: 1920, el: 'body', resize: true, + transition: 0.49, + limit: 0.1, + allowScroll: false, }); }; diff --git a/src/router/index.ts b/src/router/index.ts index c0ae6f7..1499403 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,48 +1,12 @@ import type { App } from 'vue'; import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'; -export const Layout = () => import('@/layout/index.vue'); +import error from '@/router/modules/error'; +import home from '@/router/modules/home'; +import remaining from '@/router/modules/remaining'; // 静态路由 -const routes: RouteRecordRaw[] = [ - { - path: '/redirect', - component: Layout, - meta: { hidden: true }, - children: [ - { - path: '/redirect/:path(.*)', - component: () => import('@/views/redirect/index.vue'), - }, - ], - }, - { - path: '/', - name: '/', - component: Layout, - // redirect: '/dashboard', - children: [ - // { - // path: 'dashboard', - // component: () => import('@/views/index.vue'), - // // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致 - // // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude - // name: 'Dashboard', - // meta: { - // title: 'dashboard', - // icon: 'homepage', - // affix: true, - // keepAlive: true, - // }, - // }, - ], - }, - { - path: '/404', - component: () => import('@/views/error-page/404.vue'), - meta: { hidden: true }, - }, -]; +const routes: RouteRecordRaw[] = [...remaining, ...home, ...error]; const router = createRouter({ history: createWebHashHistory(), routes, @@ -58,4 +22,5 @@ export const setUpRouter = (app: App) => { export const resetRouter = () => { router.replace({ path: '/' }).then(); }; + export default router; diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts new file mode 100644 index 0000000..0a1ec66 --- /dev/null +++ b/src/router/modules/error.ts @@ -0,0 +1,11 @@ +import type { RouteRecordRaw } from 'vue-router'; + +const routes: RouteRecordRaw[] = [ + { + path: '/error', + component: () => import('@/views/error-page/404.vue'), + meta: { hidden: true }, + }, +]; + +export default routes; diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts new file mode 100644 index 0000000..4371a95 --- /dev/null +++ b/src/router/modules/home.ts @@ -0,0 +1,14 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import Layout from '@/layout/index.vue'; + +const routes: RouteRecordRaw[] = [ + { + path: '/', + name: '/', + component: Layout, + meta: { transition: 'fade' }, + }, +]; + +export default routes; diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts new file mode 100644 index 0000000..5e17fcb --- /dev/null +++ b/src/router/modules/remaining.ts @@ -0,0 +1,19 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import Layout from '@/layout/index.vue'; + +const routes: RouteRecordRaw[] = [ + { + path: '/redirect', + component: Layout, + meta: { hidden: true }, + children: [ + { + path: '/redirect/:path(.*)', + component: () => import('@/views/redirect/index.vue'), + }, + ], + }, +]; + +export default routes;