From 65f6ef27e23540436a52cfb7705e8108ce1ef68e Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Sat, 1 Mar 2025 21:32:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |  2 +-
 .../CommonHeader/CommonHeader.vue}            |  2 +-
 .../HeaderBarOp.vue}                          |  0
 .../CommonHeader/LayoutHeader.vue}            |  9 ++++--
 src/layout/index.vue                          |  2 +-
 src/plugins/dayjs.ts                          | 12 ++++++++
 src/plugins/index.ts                          |  4 +--
 src/router/index.ts                           | 10 +++++--
 src/router/modules/home.ts                    |  8 ++---
 src/types/router/Route.ts                     | 29 +++++++++++++++++++
 src/views/smart-parking/index.vue             |  4 +--
 11 files changed, 67 insertions(+), 15 deletions(-)
 rename src/{views/smart-parking/components/parking-header/index.vue => components/CommonHeader/CommonHeader.vue} (95%)
 rename src/components/{Common/BarOp.vue => CommonHeader/HeaderBarOp.vue} (100%)
 rename src/{layout/components/layout-header/index.vue => components/CommonHeader/LayoutHeader.vue} (64%)
 create mode 100644 src/plugins/dayjs.ts
 create mode 100644 src/types/router/Route.ts

diff --git a/.env b/.env
index c7028d7..223648d 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 # 应用名称
-VITE_APP_TITLE="Vite 模板"
+VITE_APP_TITLE="智慧管理大屏"
 
 # 平台本地运行端口号
 VITE_PORT=7000
diff --git a/src/views/smart-parking/components/parking-header/index.vue b/src/components/CommonHeader/CommonHeader.vue
similarity index 95%
rename from src/views/smart-parking/components/parking-header/index.vue
rename to src/components/CommonHeader/CommonHeader.vue
index a36da59..930e53d 100644
--- a/src/views/smart-parking/components/parking-header/index.vue
+++ b/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();
diff --git a/src/components/Common/BarOp.vue b/src/components/CommonHeader/HeaderBarOp.vue
similarity index 100%
rename from src/components/Common/BarOp.vue
rename to src/components/CommonHeader/HeaderBarOp.vue
diff --git a/src/layout/components/layout-header/index.vue b/src/components/CommonHeader/LayoutHeader.vue
similarity index 64%
rename from src/layout/components/layout-header/index.vue
rename to src/components/CommonHeader/LayoutHeader.vue
index 65be940..3fee0ff 100644
--- a/src/layout/components/layout-header/index.vue
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 9f28a7d..31ee18d 100644
--- a/src/layout/index.vue
+++ b/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>
diff --git a/src/plugins/dayjs.ts b/src/plugins/dayjs.ts
new file mode 100644
index 0000000..3551381
--- /dev/null
+++ b/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;
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index bab9d90..1d3a994 100644
--- a/src/plugins/index.ts
+++ b/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);
     // 设置指令
diff --git a/src/router/index.ts b/src/router/index.ts
index 1499403..be6e006 100644
--- a/src/router/index.ts
+++ b/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;
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index cf2d889..0f5e69e 100644
--- a/src/router/modules/home.ts
+++ b/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: '车辆监控中心' },
   },
 ];
 
diff --git a/src/types/router/Route.ts b/src/types/router/Route.ts
new file mode 100644
index 0000000..c718c54
--- /dev/null
+++ b/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 };
diff --git a/src/views/smart-parking/index.vue b/src/views/smart-parking/index.vue
index c3d9df1..e6c81b6 100644
--- a/src/views/smart-parking/index.vue
+++ b/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]">