feat: add meta titles for routing and update document title handling

gkd-kit · Nov 5, 2024 · 1c13f59 · 1c13f59
1 parent b132099
commit 1c13f59
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 11 deletions.
diff --git a/src/router.ts b/src/router.ts
@@ -29,17 +29,20 @@ const router = createRouter({
     {
       path: '/',
       component: recordModule(() => import('@/views/home/HomePage.vue')),
+      meta: { title: '首页' },
     },
     {
       path: '/snapshot/:snapshotId',
       name: 'snapshot',
       component: recordModule(
         () => import('@/views/snapshot/SnapshotPage.vue'),
       ),
+      meta: { title: '快照' },
     },
     {
       path: '/i',
       component: recordModule(() => import('@/views/ImportPage.vue')),
+      meta: { title: '导入快照' },
     },
     {
       path: '/i/:github_asset_id',
@@ -71,10 +74,12 @@ const router = createRouter({
         }
         next();
       },
+      meta: { title: '连接设备' },
     },
     {
       path: '/selector',
       component: recordModule(() => import('@/views/SelectorPage.vue')),
+      meta: { title: '选择器' },
     },
     {
       path: '/:pathMatch(.*)*',
@@ -83,6 +88,10 @@ const router = createRouter({
   ],
 });
 
+router.beforeEach((to) => {
+  document.title = String(to.meta.title || 'GKD');
+});
+
 if (import.meta.env.PROD) {
   setTimeout(() => {
     // 预加载所有路由组件

diff --git a/src/store/snapshot.ts b/src/store/snapshot.ts
@@ -19,7 +19,6 @@ const getRemoteImportId = async (id: number): Promise<number> => {
 export const useSnapshotStore = defineStore('snapshot', () => {
   const route = useRoute();
   const router = useRouter();
-  const title = useTitle();
   const settingsStore = useSettingsStore();
   const storageStore = useStorageStore();
   const { snapshotImportId, snapshotImageId, importSnapshotId } = storageStore;
@@ -42,7 +41,7 @@ export const useSnapshotStore = defineStore('snapshot', () => {
   const snapshot = shallowRef<Snapshot>();
   watchEffect(() => {
     if (snapshot.value) {
-      title.value =
+      document.title =
         '快照-' + (getAppInfo(snapshot.value).name || snapshot.value.appId);
     }
   });
@@ -168,6 +167,7 @@ export const useSnapshotStore = defineStore('snapshot', () => {
   };
 
   const track = shallowRef<TrackValue>();
+  console.log('snapshot');
   return {
     snapshotId,
     snapshot,
@@ -187,3 +187,9 @@ export const useSnapshotStore = defineStore('snapshot', () => {
     track,
   };
 });
+
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    location.reload();
+  });
+}
diff --git a/src/views/DevicePage.vue b/src/views/DevicePage.vue
@@ -13,7 +13,6 @@ import type { SortState } from 'naive-ui/es/data-table/src/interface';
 import pLimit from 'p-limit';
 
 const router = useRouter();
-const title = useTitle(`新设备`);
 const { api, origin } = useDeviceApi();
 const link = useStorage(`device_link`, ``);
 const device = shallowRef<Device>();
@@ -36,7 +35,7 @@ onMounted(async () => {
 const snapshots = shallowRef<Snapshot[]>([]);
 watchEffect(async () => {
   if (!device.value) return;
-  title.value = `已连接 ` + device.value.manufacturer;
+  document.title = `已连接 ` + device.value.manufacturer;
   const result = await api.snapshots();
   result.sort((a, b) => b.id - a.id);
   snapshots.value = result;
@@ -380,7 +379,7 @@ const placeholder = `
   </NModal>
   <div flex flex-col p-10px gap-10px h-full>
     <div flex items-center gap-24px>
-      <a href="/" flex ml-12px title="首页">
+      <RouterLink to="/" flex ml-12px title="首页">
         <NButton text>
           <template #icon>
             <NIcon :size="24">
@@ -397,7 +396,7 @@ const placeholder = `
             </NIcon>
           </template>
         </NButton>
-      </a>
+      </RouterLink>
       <NInputGroup>
         <NInput
           v-model:value="link"

diff --git a/src/views/_404Page.vue b/src/views/_404Page.vue
@@ -1,6 +1,6 @@
 <template>
   <div flex flex-col flex-items-center w-full pt-50px gap-8px>
     <div>当前页面不存在可访问资源</div>
-    <a href="/" @click.prevent="$router.replace({ path: `/` })"> 回到首页 </a>
+    <RouterLink to="/"> 回到首页 </RouterLink>
   </div>
 </template>
diff --git a/src/views/home/HomePage.vue b/src/views/home/HomePage.vue
@@ -343,7 +343,7 @@ const settingsDlgShow = shallowRef(false);
             </NButton>
           </NSpace>
         </NPopover>
-        <a flex href="/device" title="连接设备">
+        <RouterLink flex to="/device" title="连接设备">
           <NButton text>
             <template #icon>
               <NIcon :size="24">
@@ -356,7 +356,7 @@ const settingsDlgShow = shallowRef(false);
               </NIcon>
             </template>
           </NButton>
-        </a>
+        </RouterLink>
         <a
           flex
           href="https://github.com/gkd-kit/inspect"

diff --git a/src/views/snapshot/SnapshotPage.vue b/src/views/snapshot/SnapshotPage.vue
@@ -34,7 +34,7 @@ const clickSettings = () => {
       <div w-28px py-8px flex flex-col gap-16px>
         <NButton text>
           <template #icon>
-            <a href="/" title="首页" color="inherit">
+            <RouterLink to="/" title="首页" color="inherit">
               <NIcon size="24">
                 <svg viewBox="0 0 32 32">
                   <path
@@ -43,7 +43,7 @@ const clickSettings = () => {
                   ></path>
                 </svg>
               </NIcon>
-            </a>
+            </RouterLink>
           </template>
         </NButton>
         <NButton title="设置" @click="clickSettings" text>