创建datang tag

src/views/home/Index.vue

@@ -23,7 +23,7 @@
     </el-container>
     <!-- 默认 -->
     <el-container v-else="menuShow === 'default'">
-      <Menu></Menu>
+      <MenuDt></MenuDt>
       <el-main>
         <HeaderCom class="headerBox" @setLoding="setLoding"></HeaderCom>
         <!-- <MenuTag></MenuTag> -->
@@ -42,6 +42,7 @@
 import HeaderCom from "@/components/HeaderCom.vue";
 import MenuHD from "./components/MenuHD.vue";
 import Menu from "./components/Menu.vue";
+import MenuDt from "./components/MenuDt.vue";
 import MenuTag from "@/components/MenuTag.vue";
 
 export default {
@@ -50,6 +51,7 @@ export default {
     MenuHD,
     HeaderCom,
     MenuTag,
+    MenuDt,
   },
   data() {
     return {

src/views/home/components/MenuDt.vue

@@ -0,0 +1,694 @@
+<!--
+ * @Author: your name
+ * @Date: 2026-05-21 15:49:05
+ * @LastEditTime: 2026-05-21 15:49:16
+ * @LastEditors: milo-MacBook-Pro.local
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/home/components/MenuDt.vue
+-->
+<template>
+  <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
+    <div class="homeBox"></div>
+    <el-menu
+      collapse-transition
+      ref="menu"
+      class="mt-3 el-menu-vertical-demo menu-dt-dark"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#141414"
+      text-color="#999999"
+      active-text-color="#ffffff"
+      :router="false"
+      :default-active="menuDefaultActive"
+      :collapse="isCollapse"
+      :default-openeds="openMenus"
+    >
+      <template v-for="item in routerList">
+        <!-- 有子菜单 -->
+        <el-submenu
+          v-if="
+            item.children && item.children.length && item.meta?.hidden === false
+          "
+          :index="normalizedMenuParentIndex(item)"
+          :popper-append-to-body="true"
+        >
+          <template slot="title">
+            <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="item.iconName" />
+            </i>
+            <span>{{ item.name }}</span>
+          </template>
+
+          <!-- 子菜单项 -->
+          <el-menu-item
+            v-for="child in item.children"
+            v-if="child.meta?.hidden === false"
+            :key="child.id"
+            class="menu-dt-leaf"
+            :class="{ 'dt-menu-leaf-active': menuLeafIsActive(child) }"
+            :index="menuItemIndex(child)"
+            @click="handleChangeMenuUrl(child)"
+          >
+            <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="child.iconName" />
+            </i>
+            <span>{{ child.name }}</span>
+          </el-menu-item>
+        </el-submenu>
+
+        <!-- 没有子菜单 -->
+        <el-tooltip
+          v-else-if="item.meta?.hidden === false"
+          class="box-item"
+          effect="dark"
+          :content="item.name"
+          placement="right-start"
+        >
+          <el-menu-item
+            class="menu-dt-leaf"
+            :class="{ 'dt-menu-leaf-active': menuLeafIsActive(item) }"
+            :key="item.id"
+            :index="menuItemIndex(item)"
+            @click="handleChangeMenuUrl(item)"
+          >
+            <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
+            <i v-else-if="item.iconName" class="svnIcon">
+              <svg-icon :icon-class="item.iconName" />
+            </i>
+            <i
+              class="svnIcon"
+              v-else-if="item.path === '/home/laserRangeFinder'"
+            >
+              <svg-icon
+                style="width: 22px; height: 22px"
+                icon-class="laserRangeFinder"
+              />
+            </i>
+            <span>{{ item.name }}</span>
+          </el-menu-item>
+        </el-tooltip>
+      </template>
+    </el-menu>
+
+    <!-- 展开/收起 -->
+    <div class="foldBox flexCenter">
+      <span
+        v-show="isCollapse"
+        class="el-icon-s-unfold icon"
+        @click.stop="isCollapse = false"
+        >展开</span
+      >
+      <el-switch
+        v-show="!isCollapse"
+        :value="isExpanded"
+        @change="toggleAllMenus"
+      />
+      <span
+        v-show="!isCollapse"
+        class="el-icon-s-fold icon"
+        @click.stop="isCollapse = true"
+        >收起</span
+      >
+    </div>
+  </el-aside>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      isExpanded: false,
+      openMenus: [],
+      isCollapse: true,
+      activeIndex: false,
+      keyObject: {},
+      activeTextColor: "#ffffff",
+      /** Element UI 会先响应 default-active 变 '' 并清空内部高亮，解析失败时用最近一次有效 index 兜底，避免闪一下又消失 */
+      staleMenuFallbackIndex: "",
+      routerList: [
+        {
+          id: 1,
+          path: "/home/cockpitManage",
+          name: "首页",
+          iconName: "gps",
+          meta: { hidden: false },
+        },
+      ],
+    };
+  },
+  created() {
+    this.routerList = [
+      ...this.routerList,
+      ...this.$store.state.auth.dynamicRouter,
+    ];
+  },
+  computed: {
+    ...mapState({
+      currentMenuIndex: (state) => state.breadStore?.currentUrl?.routeUrl,
+    }),
+    allMenuIndexes() {
+      return this.routerList.map((item) =>
+        item.children && item.children.length && item.meta?.hidden === false
+          ? this.normalizedMenuParentIndex(item)
+          : this.menuItemIndex(item),
+      );
+    },
+    /** 传给 el-menu 的 default-active：优先按路由解析，失败时若在「同一菜单页」则用 stale 占位，防止 Element 把 activeIndex 清空 */
+    menuDefaultActive() {
+      const direct = this.resolveMenuActiveFromRoute(this.$route);
+      if (direct) return direct;
+      if (
+        this.staleMenuFallbackIndex &&
+        this.routeMatchesMenuIndex(
+          this.$route,
+          this.staleMenuFallbackIndex,
+        )
+      ) {
+        return this.staleMenuFallbackIndex;
+      }
+      return "";
+    },
+  },
+  watch: {
+    currentMenuIndex(newVal) {
+      if (newVal && this.$refs.menu) {
+        this.$refs.menu.close(newVal);
+      }
+    },
+    $route() {
+      const d = this.resolveMenuActiveFromRoute(this.$route);
+      if (d) {
+        this.staleMenuFallbackIndex = d;
+      } else if (
+        !this.routeMatchesMenuIndex(
+          this.$route,
+          this.staleMenuFallbackIndex,
+        )
+      ) {
+        this.staleMenuFallbackIndex = "";
+      }
+      this.$nextTick(() => this.syncElMenuHighlight());
+    },
+    routerList() {
+      const d = this.resolveMenuActiveFromRoute(this.$route);
+      if (d) this.staleMenuFallbackIndex = d;
+      this.$nextTick(() => this.syncElMenuHighlight());
+    },
+  },
+  mounted() {
+    const initial = this.resolveMenuActiveFromRoute(this.$route);
+    if (initial) this.staleMenuFallbackIndex = initial;
+    this.$nextTick(() => this.syncElMenuHighlight());
+  },
+  methods: {
+    ...mapActions("menuTag", ["addTag"]),
+    toggleAllMenus() {
+      this.isExpanded = !this.isExpanded;
+      this.openMenus = this.isExpanded
+        ? this.routerList
+            .filter((item) => item.children && item.children.length)
+            .map((item) => this.normalizedMenuParentIndex(item))
+        : [];
+    },
+    normalizePath(path) {
+      if (path == null || path === "") return "";
+      const t = String(path).trim();
+      return t.startsWith("/") ? t : `/${t}`;
+    },
+    /** 后台 path 常与 vue-router resolve 不一致，用多候选路径对齐 $route.path */
+    menuPathCandidatesForLeaf(rawPath) {
+      const p = this.normalizePath(rawPath);
+      const set = new Set([p]);
+      if (!/^\/home(\/|$)/.test(p)) {
+        set.add(`/home${p.startsWith("/") ? "" : "/"}${p.replace(/^\//, "")}`);
+      }
+      return [...set];
+    },
+    leafMatchesRoute(leaf, routePath, qid) {
+      const pathOk = this.menuPathCandidatesForLeaf(leaf.path).includes(
+        routePath,
+      );
+      if (!pathOk) return false;
+      if (qid === undefined) return true;
+      return String(leaf.id) === qid;
+    },
+    parseMenuIndexString(indexStr) {
+      if (!indexStr || typeof indexStr !== "string") return null;
+      const q = indexStr.indexOf("?");
+      const pathPart = q >= 0 ? indexStr.slice(0, q) : indexStr;
+      let id = undefined;
+      if (q >= 0) {
+        const params = new URLSearchParams(indexStr.slice(q + 1));
+        if (params.has("id")) id = String(params.get("id"));
+      }
+      const pathname = this.normalizePath(pathPart);
+      return { pathname, id };
+    },
+    /** 当前路由是否与某个已注册的菜单 index（含 path + id）一致，用于避免因 path 写法差异误清高亮 */
+    routeMatchesMenuIndex(route, indexStr) {
+      const parsed = this.parseMenuIndexString(indexStr);
+      if (!parsed) return false;
+      const qid =
+        route.query.id !== undefined ? String(route.query.id) : undefined;
+      const candidates = this.menuPathCandidatesForLeaf(parsed.pathname);
+      if (!candidates.includes(route.path)) return false;
+      // 两边的 id 都有则必须一致；若 URL 暂时没有 id（重定向瞬时等），只要 path 对上就视为仍为该菜单页
+      if (parsed.id !== undefined && qid !== undefined) {
+        return parsed.id === qid;
+      }
+      return true;
+    },
+    /** 必须与 el-menu-item 的 :index 字符串完全一致（含路径规范），否则高亮失效 */
+    menuItemIndex(item) {
+      const p = this.normalizePath(item.path);
+      return `${p}?id=${item.id}`;
+    },
+    normalizedMenuParentIndex(item) {
+      return this.normalizePath(item.path);
+    },
+    /** 与 menuDefaultActive 一致即选中（兜底子菜单叶子项未及时打上 is-active 时仍显示蓝底高亮） */
+    menuLeafIsActive(item) {
+      if (!item) return false;
+      const idx = this.menuDefaultActive;
+      return !!idx && idx === this.menuItemIndex(item);
+    },
+    getVisibleLeafMenuItems() {
+      const leaves = [];
+      for (const item of this.routerList) {
+        if (item.meta?.hidden !== false) continue;
+        const isSubmenuParent =
+          item.children &&
+          item.children.length &&
+          item.meta?.hidden === false;
+        if (isSubmenuParent) {
+          for (const child of item.children) {
+            if (child.meta?.hidden === false) {
+              leaves.push(child);
+            }
+          }
+        } else {
+          leaves.push(item);
+        }
+      }
+      return leaves;
+    },
+    resolveMenuActiveFromRoute(route) {
+      const routePath = route.path;
+      const qid =
+        route.query.id !== undefined ? String(route.query.id) : undefined;
+      const leaves = this.getVisibleLeafMenuItems();
+
+      let chosen = null;
+      const pathMatches = leaves.filter((leaf) =>
+        this.leafMatchesRoute(leaf, routePath, qid),
+      );
+
+      if (pathMatches.length === 1) {
+        chosen =
+          qid !== undefined &&
+          String(pathMatches[0].id) !== qid
+            ? null
+            : pathMatches[0];
+      } else if (pathMatches.length > 1) {
+        chosen =
+          qid !== undefined
+            ? pathMatches.find((leaf) => String(leaf.id) === qid) || null
+            : null;
+      }
+
+      let index = chosen ? this.menuItemIndex(chosen) : "";
+
+      /** 兜底：pathname 已对但菜单 index 仅用「无 /home 前缀」等写法注册了 items */
+      if (!index && leaves.length && qid !== undefined) {
+        const idLeaf = leaves.find((leaf) => String(leaf.id) === qid);
+        if (
+          idLeaf &&
+          this.menuPathCandidatesForLeaf(idLeaf.path).includes(routePath)
+        ) {
+          index = this.menuItemIndex(idLeaf);
+        }
+      }
+
+      return index;
+    },
+    syncElMenuHighlight(retriesLeft = 16) {
+      const menu = this.$refs.menu;
+      if (!menu) return;
+
+      const idx = this.menuDefaultActive;
+      const items = menu.items || {};
+      const current = menu.activeIndex;
+
+      if (!idx) {
+        if (
+          current &&
+          items[current] &&
+          this.routeMatchesMenuIndex(this.$route, current)
+        ) {
+          return;
+        }
+        menu.activeIndex = "";
+        return;
+      }
+
+      if (!items[idx]) {
+        if (retriesLeft > 0) {
+          this.$nextTick(() =>
+            this.syncElMenuHighlight(retriesLeft - 1),
+          );
+        } else if (
+          current &&
+          items[current] &&
+          this.routeMatchesMenuIndex(this.$route, current)
+        ) {
+          return;
+        }
+        return;
+      }
+
+      menu.activeIndex = idx;
+      if (idx) this.staleMenuFallbackIndex = idx;
+      menu.initOpenedMenu();
+    },
+    // 修复后的跳转方法
+    handleChangeMenuUrl(item) {
+      const key = this.menuItemIndex(item);
+      this.staleMenuFallbackIndex = key;
+
+      const tag = { path: key, name: item.name, label: item.name };
+      this.addTag(tag);
+
+      // 用 nextTick 兼容 Firefox
+      this.$nextTick(() => {
+        this.$router.push(key).catch((err) => {
+          if (err.name !== "NavigationDuplicated") {
+            console.error("路由跳转失败:", err);
+          }
+        });
+      });
+    },
+    isElPrefix(str) {
+      return /^el-/.test(str);
+    },
+    handleOpen(key, keyPath) {
+      this.activeIndex = false;
+      this.keyObject = { key, keyPath };
+    },
+    handleClose(key, keyPath) {
+      this.activeIndex = false;
+      this.keyObject = { key, keyPath };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 深色侧栏主题色 */
+$dt-bg: #141414;
+$dt-item-blue: #1890ff;
+$dt-active-bg: #1890ff;
+$dt-text-inactive: #999999;
+$dt-radius: 8px;
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+.stop-animation,
+.active-animation {
+  font-size: 0px;
+}
+
+.asideBox {
+  height: 100vh;
+  overflow-y: scroll;
+  position: relative;
+  padding-bottom: 40px;
+  padding-top: 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: column;
+  background: $dt-bg;
+  border-right: 1px solid #2a2a2a;
+  border-radius: 0 16px 16px 0;
+  position: relative;
+
+  .homeBox {
+    width: 100%;
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    box-sizing: border-box;
+
+    .logoItem {
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      span {
+        line-height: 50px;
+        margin: 0 auto;
+      }
+
+      .logoImg {
+        img {
+          height: 100%;
+          width: inherit;
+        }
+
+        width: 50px;
+        height: 50px;
+      }
+    }
+
+    .search {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+
+      .el-icon-search {
+        margin-top: 28px;
+      }
+
+      .el-input {
+        width: inherit;
+      }
+    }
+
+    .frame {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #666;
+      width: 100%;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      cursor: pointer;
+
+      .homeIndex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+
+        .home_active {
+          margin-right: 2px;
+        }
+
+        p {
+          color: #666;
+          font-size: 18px;
+        }
+      }
+
+      &:hover {
+        p {
+          color: #19436d;
+        }
+
+        transition: width 0.5s ease, transform 0.5s ease;
+        transform-origin: left;
+      }
+
+      .left {
+        left: 50%;
+        transform: scaleX(0);
+      }
+
+      .right {
+        left: 0;
+        transform: scaleX(0);
+      }
+    }
+  }
+
+  .el-menu {
+    margin-bottom: 10px;
+    border: none;
+    overflow-y: auto;
+    width: 100% !important;
+    height: 100%;
+    background-color: $dt-bg !important;
+  }
+}
+
+.flexCenter {
+  display: flex;
+  align-items: center !important;
+  justify-content: space-between !important;
+  width: 200px;
+}
+
+.foldBox {
+  position: fixed;
+  bottom: 10px;
+  left: 20px;
+  padding: 10px;
+
+  .icon {
+    cursor: pointer;
+    color: #a6a6a6;
+    font-size: 14px;
+  }
+}
+
+::v-deep .menu-dt-dark.el-menu {
+  .el-menu-item,
+  .el-submenu__title {
+    color: $dt-text-inactive !important;
+    border-radius: $dt-radius;
+    margin: 4px 10px;
+    margin-left: 10px !important;
+    height: 44px;
+    line-height: 44px;
+    border: none !important;
+  }
+
+  /* 未选中：字灰、图标品牌蓝 */
+  .el-menu-item:not(.is-active):not(.dt-menu-leaf-active) .el-icon-menu,
+  .el-submenu__title .el-icon-menu {
+    color: $dt-item-blue !important;
+  }
+
+  .el-menu-item:not(.is-active):not(.dt-menu-leaf-active) span,
+  .el-submenu__title span {
+    color: $dt-text-inactive !important;
+  }
+
+  .el-menu-item:not(.is-active):not(.dt-menu-leaf-active) .svnIcon,
+  .el-submenu__title .svnIcon {
+    color: $dt-item-blue;
+    svg {
+      fill: $dt-item-blue;
+    }
+  }
+
+  /* Element is-active + 路由类：蓝底白字（子菜单内需盖过 theme-chalk hover 底色）*/
+  .el-menu-item.dt-menu-leaf-active,
+  .el-menu-item.is-active {
+    background-color: $dt-active-bg !important;
+    color: #fff !important;
+
+    span {
+      color: #fff !important;
+    }
+
+    .el-icon-menu,
+    .svnIcon {
+      color: #fff !important;
+    }
+    .svnIcon svg {
+      fill: #fff !important;
+    }
+  }
+
+  .el-submenu .el-menu--inline .el-menu-item.dt-menu-leaf-active,
+  .el-submenu .el-menu--inline .el-menu-item.is-active {
+    background-color: $dt-active-bg !important;
+  }
+
+  .el-menu-item.dt-menu-leaf-active:hover,
+  .el-menu-item.dt-menu-leaf-active:focus,
+  .el-menu-item.is-active:hover,
+  .el-menu-item.is-active:focus {
+    background-color: $dt-active-bg !important;
+    color: #fff !important;
+  }
+
+  .el-menu-item:focus,
+  .el-menu-item:hover:not(.is-active):not(.dt-menu-leaf-active) {
+    background-color: rgba(255, 255, 255, 0.06) !important;
+  }
+
+  .el-submenu__title:hover {
+    background-color: rgba(255, 255, 255, 0.06) !important;
+  }
+
+  /* 子菜单展开区域 */
+  .el-menu--inline {
+    background-color: #0d0d0d !important;
+  }
+
+  .el-submenu .el-menu-item {
+    min-width: auto;
+    padding-left: 44px !important;
+  }
+}
+
+::v-deep .el-submenu__title {
+  display: flex;
+  align-items: center;
+}
+
+::v-deep .el-submenu__icon-arrow {
+  right: 16px;
+  color: $dt-text-inactive;
+}
+
+::v-deep .svnIcon {
+  vertical-align: middle;
+  margin-right: 8px;
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #3a3a3a;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #4a4a4a;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: #1a1a1a;
+  border-radius: 10px;
+}
+
+.asideBox:hover ::-webkit-scrollbar {
+  display: block !important;
+}
+
+/* 旧版侧栏左缩进由 ::v-deep 内 margin 统一控制 */
+</style>