前端增加设备标签栏，方便设备之间切换

Author: 600888

front/components.d.ts

@@ -77,6 +77,7 @@ declare module 'vue' {
     SingleRegister: typeof import('./src/components/register/SingleRegister.vue')['default']
     Slave: typeof import('./src/components/device/Slave.vue')['default']
     Table: typeof import('./src/components/device/Table.vue')['default']
+    TagsView: typeof import('./src/components/layout/TagsView.vue')['default']
     TextNode: typeof import('./src/components/common/TextNode.vue')['default']
     WritePointDialog: typeof import('./src/components/device/WritePointDialog.vue')['default']
   }

front/src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import Sidebar from "./views/SideBar.vue";
 import AppHeader from "@/components/header/AppHeader.vue";
+import TagsView from "@/components/layout/TagsView.vue";
 import { currentTheme } from "@/utils/theme";
 </script>
 
@@ -10,10 +11,16 @@ import { currentTheme } from "@/utils/theme";
       <Sidebar />
       <el-container direction="vertical">
         <AppHeader />
+        <!-- 标签页 -->
+        <TagsView />
         <el-main class="main-content">
           <el-scrollbar view-class="app-scrollbar-view">
             <div class="app-view-container">
-              <router-view />
+              <router-view v-slot="{ Component, route }">
+                <keep-alive>
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </router-view>
             </div>
             <!-- 全局底部版权 -->
             <footer class="app-footer">

front/src/components/layout/TagsView.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="tags-view-container">
+    <el-scrollbar wrap-class="tags-view-wrapper">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :to="{ path: tag.path, query: tag.query }"
+        class="tags-view-item"
+        :class="isActive(tag) ? 'active' : ''"
+        @contextmenu.prevent="openMenu(tag, $event)"
+      >
+        {{ tag.title }}
+        <el-icon
+          v-if="visitedViews.length > 1"
+          class="el-icon-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        >
+          <Close />
+        </el-icon>
+      </router-link>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Close } from '@element-plus/icons-vue';
+import { visitedViews, delView, type TagView } from '@/store/tagsView';
+
+const route = useRoute();
+const router = useRouter();
+
+const isActive = (tag: TagView) => {
+  return tag.path === route.path;
+};
+
+const closeSelectedTag = async (view: TagView) => {
+  const views = await delView(view);
+  if (isActive(view)) {
+    toLastView(views, view);
+  }
+};
+
+const toLastView = (views: TagView[], view: TagView) => {
+  const latestView = views.slice(-1)[0];
+  if (latestView) {
+    router.push((latestView.fullPath || latestView.path) as string);
+  } else {
+    // default redirect to home or somewhere safe if no views
+    router.push('/');
+  }
+};
+
+const openMenu = (tag: TagView, e: MouseEvent) => {
+  // context menu logic can be added here if needed
+};
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  flex-shrink: 0; // prevent being squished by main content
+  background: var(--bg-main);
+  border-bottom: 1px solid var(--sidebar-border);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  z-index: 10; // ensure it is above the main scrollbar content if any shadows exist
+  overflow: hidden;
+  
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid var(--sidebar-border);
+      color: var(--text-primary);
+      background: var(--panel-bg);
+      padding: 0 8px;
+      font-size: 13px;
+      margin-left: 5px;
+      margin-top: 4px;
+      border-radius: 4px;
+      text-decoration: none;
+      
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      
+      &.active {
+        background-color: var(--color-primary);
+        color: #fff;
+        border-color: var(--color-primary);
+        
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
+      
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+        border-radius: 50%;
+        text-align: center;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transform-origin: 100% 50%;
+        margin-left: 2px;
+        
+        &:before {
+          transform: scale(0.6);
+          display: inline-block;
+        }
+        
+        &:hover {
+          background-color: #b4bccc;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

front/src/router/index.ts

@@ -1,5 +1,6 @@
 // src/router/index.js
 import { createRouter, createWebHashHistory } from 'vue-router';
+import { addView } from '@/store/tagsView';
 
 // 创建路由器实例
 const menuRouter = createRouter({
@@ -9,13 +10,21 @@ const menuRouter = createRouter({
       path: '/device/:deviceName',
       name: 'device-detail', // Use a fixed name for the route config
       component: () => import('../views/Device.vue'),
-      props: true // Allow params to be passed as props if needed
+      props: true, // Allow params to be passed as props if needed
     },
     // Optional: Add a default redirect or home route if needed
     // { path: '/', redirect: '/device/some-default' } 
   ],
 });
 
+// 全局后置钩子，用于收集访问过的页面作为标签页
+menuRouter.afterEach((to) => {
+  // 我们只收集设备页面或者其他需要标签页的页面
+  if (to.name || to.path.startsWith('/device')) {
+    addView(to);
+  }
+});
+
 export async function setUpRoutes() {
   // Deprecated: No longer needed as we use dynamic params
   console.log('setUpRoutes is deprecated and no longer needed.');

front/src/store/tagsView.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+
+export interface TagView extends Partial<RouteLocationNormalized> {
+    title?: string;
+}
+
+export const visitedViews = ref<TagView[]>([]);
+
+export const addView = (view: RouteLocationNormalized) => {
+    if (visitedViews.value.some(v => v.path === view.path)) return;
+    visitedViews.value.push(
+        Object.assign({}, view, {
+            title: (view.meta.title as string) || (view.params.deviceName as string) || (view.name as string) || '标签页'
+        })
+    );
+};
+
+export const delView = (view: TagView): Promise<TagView[]> => {
+    return new Promise(resolve => {
+        const index = visitedViews.value.findIndex(v => v.path === view.path);
+        if (index > -1) {
+            visitedViews.value.splice(index, 1);
+        }
+        resolve([...visitedViews.value]);
+    });
+};
+
+export const delOthersViews = (view: TagView): Promise<TagView[]> => {
+    return new Promise(resolve => {
+        visitedViews.value = visitedViews.value.filter(v => v.path === view.path);
+        resolve([...visitedViews.value]);
+    });
+};
+
+export const delAllViews = (): Promise<void> => {
+    return new Promise(resolve => {
+        visitedViews.value = [];
+        resolve();
+    });
+};

front/src/views/SideBar.vue

@@ -72,6 +72,7 @@ import AddDeviceGroupDialog from "@/components/device/AddDeviceGroupDialog.vue";
 import { currentTheme } from "@/utils/theme";
 import { isCollapse } from "@/components/header/isCollapse";
 import menuRouter from "@/router/index";
+import { delView, visitedViews } from "@/store/tagsView";
 import { deleteChannel, getChannelList } from "@/api/channelApi";
 import { 
   getDeviceGroupTree, 
@@ -234,10 +235,11 @@ const navigateToDevice = (deviceName: string, forceRefresh = false) => {
   localStorage.setItem("activeRoute", path);
   
   if (forceRefresh) {
-    router.push(`${path}?t=${Date.now()}`);
-  } else {
-    router.push(path);
+    // For tabs, we actually probably don't want to ever force refresh 
+    // using query params as it breaks keep-alive matching easily by path.
+    // If needed, can use another mechanism. For now, just navigate.
   }
+  router.push(path);
 };
 
 const showAddDeviceDialog = () => {
@@ -293,11 +295,25 @@ const handleDeleteDeviceByName = async (deviceName: string) => {
     await deleteChannel(channel.id);
     ElMessage.success('删除成功');
 
+    const path = `/device/${deviceName}`;
+    // 如果存在这个标签，需要关闭它
+    const targetView = visitedViews.value.find(v => v.path === path);
+    if (targetView) {
+      await delView(targetView);
+    }
+
     if (currentDeviceName.value === deviceName) {
       currentDeviceName.value = '';
       currentNodeKey.value = '';
       localStorage.removeItem("activeRoute");
-      router.push('/');
+      
+      // Navigate to another view if available
+      const latestView = visitedViews.value.slice(-1)[0];
+      if (latestView) {
+        router.push((latestView.fullPath || latestView.path) as string);
+      } else {
+        router.push('/');
+      }
     }
 
     if (menuRouter.hasRoute(deviceName)) {