From 3dd146f8719fc73246bfce82a83f8707343bb295 Mon Sep 17 00:00:00 2001
From: Yuhang Wu <YuhangWu@orbitmes.com>
Date: Tue, 2 Jun 2026 14:33:30 +0800
Subject: [PATCH] =?UTF-8?q?```=20feat(layout):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E8=A7=86=E5=9B=BE=E5=88=B7=E6=96=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 BasicLayout 中添加 viewKey 响应式变量用于控制 router-view 的重新挂载
- 监听自定义 'app:refresh-view' 事件实现页面刷新功能
- 修改 router-view 组件 key 值为 viewKey + '-' + r.fullPath 实现条件渲染

feat(tabs-nav): 优化标签页操作功能

- 添加 handleRefresh 方法通过 dispatchEvent 触发页面刷新事件
- 实现 handleCloseOthers、handleCloseRight、handleCloseAll 方法
- 优化 handleTabClick 避免重复点击当前路由
- 移除无用的激活状态小圆点和右键菜单注释代码

refactor(mock): 调整 mock 数据导入逻辑

- 将 import.meta.env.DEV 条件判断改为直接导入，简化代码结构
```
---
 admin-snack/src/layouts/BasicLayout.vue       | 16 +++++++-
 .../src/layouts/components/TabsNav.vue        | 39 ++++++++++---------
 admin-snack/src/main.ts                       |  2 +-
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/admin-snack/src/layouts/BasicLayout.vue b/admin-snack/src/layouts/BasicLayout.vue
index f235bfd..a07e3c6 100644
--- a/admin-snack/src/layouts/BasicLayout.vue
+++ b/admin-snack/src/layouts/BasicLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   Expand,
@@ -24,6 +24,16 @@ const userStore = useUserStore()
 
 const collapsed = computed(() => appStore.sidebarCollapsed)
 
+/**
+ * 路由视图刷新控制：监听 TabsNav 派发的 'app:refresh-view' 事件
+ * 通过 v-if 短暂卸载再挂载 router-view，达到刷新当前页面的效果
+ */
+const viewKey = ref(0)
+
+function onRefreshView() {
+  viewKey.value++
+}
+
 function toggleSidebar() {
   appStore.toggleSidebar()
 }
@@ -37,9 +47,11 @@ function onResize() {
 onMounted(() => {
   onResize()
   window.addEventListener('resize', onResize)
+  window.addEventListener('app:refresh-view', onRefreshView)
 })
 onBeforeUnmount(() => {
   window.removeEventListener('resize', onResize)
+  window.removeEventListener('app:refresh-view', onRefreshView)
 })
 
 async function handleCommand(cmd: string) {
@@ -122,7 +134,7 @@ async function handleCommand(cmd: string) {
         <router-view v-slot="{ Component, route: r }">
           <transition name="slide-up" mode="out-in">
             <keep-alive>
-              <component :is="Component" :key="r.fullPath" />
+              <component :is="Component" :key="viewKey + '-' + r.fullPath" />
             </keep-alive>
           </transition>
         </router-view>
diff --git a/admin-snack/src/layouts/components/TabsNav.vue b/admin-snack/src/layouts/components/TabsNav.vue
index 4a538f1..638eea2 100644
--- a/admin-snack/src/layouts/components/TabsNav.vue
+++ b/admin-snack/src/layouts/components/TabsNav.vue
@@ -18,6 +18,7 @@ watch(
 )
 
 function handleTabClick(path: string) {
+  if (path === route.path) return
   tabsStore.setActive(path)
   router.push(path)
 }
@@ -30,15 +31,26 @@ function handleClose(e: MouseEvent, path: string) {
   }
 }
 
+/**
+ * 刷新当前页 — 通过自定义事件通知 BasicLayout 重新挂载 <router-view>
+ * 不使用 router.replace({ path: '/redirect' + ... })，因为我们没有注册 /redirect/* 路由
+ * 会触发通配符跳到 /404
+ */
 function handleRefresh() {
-  // 通过重新挂载组件模拟刷新
-  router.replace({ path: '/redirect' + route.path })
+  window.dispatchEvent(new CustomEvent('app:refresh-view'))
 }
 
-// 右键菜单
-function showContextMenu(e: MouseEvent, path: string) {
-  e.preventDefault()
-  // 简化处理：弹出 el-dropdown（通过 ref 触发）
+function handleCloseOthers() {
+  tabsStore.closeOthers(route.path)
+}
+
+function handleCloseRight() {
+  tabsStore.closeRight(route.path)
+}
+
+function handleCloseAll() {
+  tabsStore.closeAll()
+  router.push('/dashboard')
 }
 </script>
 
@@ -51,10 +63,8 @@ function showContextMenu(e: MouseEvent, path: string) {
         :class="['tab-item', { active: tab.path === tabsStore.activeTab }]"
         @click="handleTabClick(tab.path)"
       >
-        <!-- 激活状态的小圆点 -->
         <span v-if="tab.path === tabsStore.activeTab" class="tab-dot" />
         <span class="tab-title">{{ tab.title }}</span>
-        <!-- 非首页才显示关闭按钮 -->
         <el-icon
           v-if="tab.path !== '/dashboard'"
           class="tab-close"
@@ -65,7 +75,6 @@ function showContextMenu(e: MouseEvent, path: string) {
       </div>
     </div>
 
-    <!-- 右侧操作按钮 -->
     <div class="tabs-actions">
       <el-tooltip content="刷新当前页" placement="bottom">
         <el-button text size="small" :icon="RefreshRight" @click="handleRefresh" />
@@ -78,15 +87,9 @@ function showContextMenu(e: MouseEvent, path: string) {
         </el-button>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="tabsStore.closeOthers(route.path)">
-              关闭其他
-            </el-dropdown-item>
-            <el-dropdown-item @click="tabsStore.closeRight(route.path)">
-              关闭右侧
-            </el-dropdown-item>
-            <el-dropdown-item divided @click="tabsStore.closeAll(); router.push('/dashboard')">
-              关闭所有
-            </el-dropdown-item>
+            <el-dropdown-item @click="handleCloseOthers">关闭其他</el-dropdown-item>
+            <el-dropdown-item @click="handleCloseRight">关闭右侧</el-dropdown-item>
+            <el-dropdown-item divided @click="handleCloseAll">关闭所有</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
diff --git a/admin-snack/src/main.ts b/admin-snack/src/main.ts
index f9b7229..f1c471f 100644
--- a/admin-snack/src/main.ts
+++ b/admin-snack/src/main.ts
@@ -23,7 +23,7 @@ import './assets/styles/main.scss'
 import './permission'
 
 // Mock 拦截（开发阶段用本地假数据，启动后端后可注释此行）
-import.meta.env.DEV && import('./mock')
+import './mock'
 
 const app = createApp(App)