feat: 添加路由动画

src/App.vue

@@ -1,3 +1,7 @@
 <template>
-  <router-view />
+  <router-view v-slot="{ Component, route }">
+    <transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
+      <component :is="Component" :key="route.path" />
+    </transition>
+  </router-view>
 </template>

src/assets/styles/animations/animations.scss

@@ -1 +1,2 @@
 @use "src/rotate";
+@use "src/transition";

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%);
+}

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;
+}

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);
+  }
+}

src/assets/styles/global.scss

@@ -1,2 +1,12 @@
 @use "animations/animations";
 @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;
+}

src/layout/index.vue

@@ -11,6 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <div>
     <div class="w-full flex items-center justify-center flex-wrap gap-x-4 text-4xl p-2 mt-4">
       <div class="w-full flex items-center justify-center mb-4">
         <button>清除默认样式的按钮</button>
@@ -26,7 +27,9 @@ onMounted(() => {
       <!-- 太阳在亮模式，月亮在暗模式，来自 Carbon -->
       <button class="i-carbon-sun dark:i-carbon-moon" />
       <!-- Twemoji 笑脸，悬停时变成流泪表情 -->
-    <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
+      <div
+        class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"
+      />
       <div class="i-vscode-icons:file-type-light-pnpm" />
       <div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" />
       <span class="i-ic:baseline-16mp" />
@@ -35,4 +38,5 @@ onMounted(() => {
     <div class="w-full flex items-center justify-center mb-4">
       {{ userStore.userinfo }}
     </div>
+  </div>
 </template>

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,
   });
 };

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<Element>) => {
 export const resetRouter = () => {
   router.replace({ path: '/' }).then();
 };
+
 export default router;

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;

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;

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;