feat: 修改路由配置

.env

@@ -1,5 +1,5 @@
 # 应用名称
-VITE_APP_TITLE="Vite 模板"
+VITE_APP_TITLE="智慧管理大屏"
 
 # 平台本地运行端口号
 VITE_PORT=7000

src/components/CommonHeader/CommonHeader.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router';
 
-import BarOp from '@/components/Common/BarOp.vue';
+import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
 import { resetRouter } from '@/router';
 
 const router = useRouter();

src/components/CommonHeader/LayoutHeader.vue

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
-import BarOp from '@/components/Common/BarOp.vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+
+const router = useRouter();
+const route = useRoute();
 </script>
 
 <template>
   <header>
     <div class="title">
-      <h1 class="c-white">后台管理系统大标题</h1>
+      <h1 class="c-white">{{ route.meta.title }}</h1>
       <BarOp />
     </div>
   </header>

src/layout/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
 import LayoutContent from '@/layout/components/layout-content/index.vue';
 import LayoutFooter from '@/layout/components/layout-footer/index.vue';
-import LayoutHeader from '@/layout/components/layout-header/index.vue';
 </script>
 
 <template>

src/plugins/dayjs.ts

@@ -0,0 +1,12 @@
+import 'dayjs/locale/zh-cn';
+
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import weekday from 'dayjs/plugin/weekday';
+
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+
+dayjs.locale('zh-cn');
+
+export default dayjs;

src/plugins/index.ts

@@ -3,13 +3,13 @@ import type { App } from 'vue';
 import { setupDirective } from '@/directive';
 import { autoFit } from '@/plugins/autofit';
 import { useEcharts } from '@/plugins/echarts';
-import { setUpRouter } from '@/router';
+import { setupRouter } from '@/router';
 import { setupStore } from '@/store';
 
 export default {
   install(app: App<Element>) {
     // 设置路由
-    setUpRouter(app);
+    setupRouter(app);
     // 设置状态管理
     setupStore(app);
     // 设置指令

src/router/index.ts

@@ -10,11 +10,11 @@ const routes: RouteRecordRaw[] = [...remaining, ...home, ...error];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
-  scrollBehavior: () => ({ x: 0, y: 0 }),
+  scrollBehavior: () => ({ x: 0, y: 0, behavior: 'smooth' }),
 });
 
 /** 全局注册 router */
-export const setUpRouter = (app: App<Element>) => {
+export const setupRouter = (app: App<Element>) => {
   app.use(router);
 };
 
@@ -23,4 +23,10 @@ export const resetRouter = () => {
   router.replace({ path: '/' }).then();
 };
 
+// router.afterEach((to, from) => {
+//   const toDepth = to.path.split('/').length;
+//   const fromDepth = from.path.split('/').length;
+//   to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left';
+// });
+
 export default router;

src/router/modules/home.ts

@@ -1,18 +1,18 @@
-import type { RouteRecordRaw } from 'vue-router';
-
 import Layout from '@/layout/index.vue';
+import type { RouteConfigsTable } from '@/types/router/Route';
 
-const routes: RouteRecordRaw[] = [
+const routes: RouteConfigsTable[] = [
   {
     path: '/',
     name: '/',
     component: Layout,
-    meta: { transition: 'fade' },
+    meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
   {
     path: '/smart-parking',
     name: 'smartParking',
     component: () => import('@/views/smart-parking/index.vue'),
+    meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
 ];
 

src/types/router/Route.ts

@@ -0,0 +1,29 @@
+import type { RouteComponent } from 'vue-router';
+
+/**
+ * @description 完整子路由的`meta`配置表
+ */
+interface CustomizeRouteMeta {
+  title: string;
+  subtitle: string;
+  transition: string;
+}
+
+/**
+ * @description 整体路由配置表（包括完整子路由）
+ */
+interface RouteConfigsTable {
+  /** 路由地址 `必填` */
+  path: string;
+  /** 路由名字（保持唯一）`可选` */
+  name?: string;
+  /** `Layout`组件 `可选` */
+  component?: RouteComponent;
+  /** 路由重定向 `可选` */
+  redirect?: string;
+  meta?: CustomizeRouteMeta;
+  /** 子路由配置项 */
+  children?: Array<RouteConfigsTable>;
+}
+
+export { RouteConfigsTable };

src/views/smart-parking/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
 import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
-import ParkingHeader from '@/views/smart-parking/components/parking-header/index.vue';
 </script>
 
 <template>
@@ -9,7 +9,7 @@ import ParkingHeader from '@/views/smart-parking/components/parking-header/index
     <div class="arrow left-[38px]">
       <img alt="左箭头" src="@/assets/images/arrow/arrow-left.png" />
     </div>
-    <parking-header />
+    <common-header />
     <parking-content />
     <parking-footer />
     <div class="arrow right-[38px]">