perf: layout (#50)

src/assets/svg/globalization.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="globalization" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>

src/assets/svg/iconinternationality.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconinternationality" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>

src/components/ReBreadCrumb/index.ts

@@ -1,10 +0,0 @@
-import { App } from "vue";
-import reBreadCrumb from "./src/index.vue";
-
-export const ReBreadCrumb = Object.assign(reBreadCrumb, {
-  install(app: App) {
-    app.component(reBreadCrumb.name, reBreadCrumb);
-  }
-});
-
-export default ReBreadCrumb;

src/components/ReCharts/src/Github.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const lists = ref<ForDataType<undefined>>([
+  { type: "", label: "善良" },
+  { type: "success", label: "好学" },
+  { type: "info", label: "幽默" },
+  { type: "danger", label: "旅游" },
+  { type: "warning", label: "追剧" }
+]);
+</script>
+
 <template>
   <el-descriptions
     class="margin-top"
@@ -75,17 +86,6 @@
   </el-descriptions>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
-const lists = ref<ForDataType<undefined>>([
-  { type: "", label: "善良" },
-  { type: "success", label: "好学" },
-  { type: "info", label: "幽默" },
-  { type: "danger", label: "旅游" },
-  { type: "warning", label: "追剧" }
-]);
-</script>
-
 <style scoped>
 .el-tag--mini {
   margin-right: 10px !important;

src/components/ReHamBurger/index.ts

@@ -1,10 +0,0 @@
-import { App } from "vue";
-import reHamBurger from "./src/index.vue";
-
-export const ReHamBurger = Object.assign(reHamBurger, {
-  install(app: App) {
-    app.component(reHamBurger.name, reHamBurger);
-  }
-});
-
-export default ReHamBurger;

src/layout/components/navbar.vue

@@ -1,3 +1,59 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { emitter } from "/@/utils/mitt";
+import Hamburger from "./sidebar/hamBurger.vue";
+import { useRouter, useRoute } from "vue-router";
+import { storageSession } from "/@/utils/storage";
+import Breadcrumb from "./sidebar/breadCrumb.vue";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { unref, watch, getCurrentInstance } from "vue";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import screenfull from "../components/screenfull/index.vue";
+import globalization from "/@/assets/svg/globalization.svg";
+
+const instance =
+  getCurrentInstance().appContext.config.globalProperties.$storage;
+const pureApp = useAppStoreHook();
+const router = useRouter();
+const route = useRoute();
+let usename = storageSession.getItem("info")?.username;
+const { locale, t } = useI18n();
+
+watch(
+  () => locale.value,
+  () => {
+    //@ts-ignore
+    document.title = t(unref(route.meta.title)); // 动态title
+  }
+);
+
+// 退出登录
+const logout = (): void => {
+  storageSession.removeItem("info");
+  router.push("/login");
+};
+
+function onPanel() {
+  emitter.emit("openPanel");
+}
+
+function toggleSideBar() {
+  pureApp.toggleSideBar();
+}
+
+// 简体中文
+function translationCh() {
+  instance.locale = { locale: "zh" };
+  locale.value = "zh";
+}
+
+// English
+function translationEn() {
+  instance.locale = { locale: "en" };
+  locale.value = "en";
+}
+</script>
+
 <template>
   <div class="navbar">
     <Hamburger
@@ -13,7 +69,7 @@
       <screenfull v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown trigger="click">
-        <iconinternationality />
+        <globalization />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -60,99 +116,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, unref, watch, getCurrentInstance } from "vue";
-import Breadcrumb from "/@/components/ReBreadCrumb";
-import Hamburger from "/@/components/ReHamBurger";
-import screenfull from "../components/screenfull/index.vue";
-import { useRouter, useRoute } from "vue-router";
-import { useAppStoreHook } from "/@/store/modules/app";
-import { storageSession } from "/@/utils/storage";
-import favicon from "/favicon.ico";
-import { emitter } from "/@/utils/mitt";
-import { deviceDetection } from "/@/utils/deviceDetection";
-import { useI18n } from "vue-i18n";
-import iconinternationality from "/@/assets/svg/iconinternationality.svg";
-
-export default defineComponent({
-  name: "Navbar",
-  components: {
-    Breadcrumb,
-    Hamburger,
-    screenfull,
-    iconinternationality
-  },
-  // @ts-ignore
-  computed: {
-    // eslint-disable-next-line vue/return-in-computed-property
-    currentLocale() {
-      switch (this.$storage.locale?.locale) {
-        case "zh":
-          return true;
-        case "en":
-          return false;
-      }
-    }
-  },
-  setup() {
-    const instance =
-      getCurrentInstance().appContext.config.globalProperties.$storage;
-    const pureApp = useAppStoreHook();
-    const router = useRouter();
-    const route = useRoute();
-    let usename = storageSession.getItem("info")?.username;
-    const { locale, t } = useI18n();
-
-    watch(
-      () => locale.value,
-      () => {
-        //@ts-ignore
-        document.title = t(unref(route.meta.title)); // 动态title
-      }
-    );
-
-    // 退出登录
-    const logout = (): void => {
-      storageSession.removeItem("info");
-      router.push("/login");
-    };
-
-    function onPanel() {
-      emitter.emit("openPanel");
-    }
-
-    function toggleSideBar() {
-      pureApp.toggleSideBar();
-    }
-
-    // 简体中文
-    function translationCh() {
-      instance.locale = { locale: "zh" };
-      locale.value = "zh";
-    }
-
-    // English
-    function translationEn() {
-      instance.locale = { locale: "en" };
-      locale.value = "en";
-    }
-
-    return {
-      locale,
-      usename,
-      pureApp,
-      favicon,
-      logout,
-      onPanel,
-      translationCh,
-      translationEn,
-      toggleSideBar,
-      deviceDetection
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .navbar {
   width: 100%;
@@ -190,7 +153,7 @@ export default defineComponent({
       }
     }
 
-    .iconinternationality {
+    .globalization {
       height: 48px;
       width: 40px;
       padding: 11px;

src/layout/components/sidebar/horizontal.vue

@@ -1,81 +1,6 @@
-<template>
+<script setup lang="ts">
-  <div class="horizontal-header">
-    <div class="horizontal-header-left" @click="backHome">
-      <i class="fa fa-optin-monster"></i>
-      <h4>{{ settings.title }}</h4>
-    </div>
-    <el-menu
-      ref="menu"
-      :default-active="activeMenu"
-      unique-opened
-      router
-      class="horizontal-header-menu"
-      mode="horizontal"
-      @select="menuSelect"
-    >
-      <sidebar-item
-        v-for="route in routeStore.wholeRoutes"
-        :key="route.path"
-        :item="route"
-        :base-path="route.path"
-      />
-    </el-menu>
-    <div class="horizontal-header-right">
-      <!-- 全屏 -->
-      <screenfull v-show="!deviceDetection()" />
-      <!-- 国际化 -->
-      <el-dropdown trigger="click">
-        <iconinternationality />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :style="{
-                background: locale === 'zh' ? '#1b2a47' : '',
-                color: locale === 'zh' ? '#f4f4f5' : '#000'
-              }"
-              @click="translationCh"
-              >简体中文</el-dropdown-item
-            >
-            <el-dropdown-item
-              :style="{
-                background: locale === 'en' ? '#1b2a47' : '',
-                color: locale === 'en' ? '#f4f4f5' : '#000'
-              }"
-              @click="translationEn"
-              >English</el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 退出登陆 -->
-      <el-dropdown trigger="click">
-        <span class="el-dropdown-link">
-          <img
-            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
-          />
-          <p>{{ usename }}</p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="logout">
-            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
-              $t("message.hsLoginOut")
-            }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <i
-        class="el-icon-setting"
-        :title="$t('message.hssystemSet')"
-        @click="onPanel"
-      ></i>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
 import {
   computed,
-  defineComponent,
   unref,
   watch,
   nextTick,
@@ -92,54 +17,12 @@ import screenfull from "../screenfull/index.vue";
 import { useRoute, useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";
 import { deviceDetection } from "/@/utils/deviceDetection";
+import globalization from "/@/assets/svg/globalization.svg";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import iconinternationality from "/@/assets/svg/iconinternationality.svg";
 
-let routerArrays: Array<object> = [
-  {
-    path: "/welcome",
-    parentPath: "/",
-    meta: {
-      title: "message.hshome",
-      icon: "el-icon-s-home",
-      showLink: true,
-      savedPosition: false
-    }
-  }
-];
-export default defineComponent({
-  name: "sidebar",
-  components: { SidebarItem, screenfull, iconinternationality },
-  // @ts-ignore
-  computed: {
-    // eslint-disable-next-line vue/return-in-computed-property
-    currentLocale() {
-      if (
-        !this.$storage.routesInStorage ||
-        this.$storage.routesInStorage.length === 0
-      ) {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.$storage.routesInStorage = routerArrays;
-      }
-
-      if (!this.$storage.locale) {
-        // eslint-disable-next-line
-        this.$storage.locale = { locale: "zh" };
-        useI18n().locale.value = "zh";
-      }
-      switch (this.$storage.locale?.locale) {
-        case "zh":
-          return true;
-        case "en":
-          return false;
-      }
-    }
-  },
-  setup() {
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
 const menuRef = templateRef<ElRef | null>("menu", null);
-
 const routeStore = usePermissionStoreHook();
 const route = useRoute();
 const router = useRouter();
@@ -224,25 +107,82 @@ export default defineComponent({
     handleResize();
   });
 });
-
-    return {
-      locale,
-      usename,
-      settings,
-      routeStore,
-      activeMenu,
-      logout,
-      onPanel,
-      backHome,
-      menuSelect,
-      translationCh,
-      translationEn,
-      deviceDetection
-    };
-  }
-});
 </script>
 
+<template>
+  <div class="horizontal-header">
+    <div class="horizontal-header-left" @click="backHome">
+      <i class="fa fa-optin-monster"></i>
+      <h4>{{ settings.title }}</h4>
+    </div>
+    <el-menu
+      ref="menu"
+      :default-active="activeMenu"
+      unique-opened
+      router
+      class="horizontal-header-menu"
+      mode="horizontal"
+      @select="menuSelect"
+    >
+      <sidebar-item
+        v-for="route in routeStore.wholeRoutes"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 全屏 -->
+      <screenfull v-show="!deviceDetection()" />
+      <!-- 国际化 -->
+      <el-dropdown trigger="click">
+        <globalization />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="{
+                background: locale === 'zh' ? '#1b2a47' : '',
+                color: locale === 'zh' ? '#f4f4f5' : '#000'
+              }"
+              @click="translationCh"
+              >简体中文</el-dropdown-item
+            >
+            <el-dropdown-item
+              :style="{
+                background: locale === 'en' ? '#1b2a47' : '',
+                color: locale === 'en' ? '#f4f4f5' : '#000'
+              }"
+              @click="translationEn"
+              >English</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 退出登陆 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link">
+          <img
+            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+          />
+          <p>{{ usename }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{
+              $t("message.hsLoginOut")
+            }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <i
+        class="el-icon-setting"
+        :title="$t('message.hssystemSet')"
+        @click="onPanel"
+      ></i>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .translation {
   .el-dropdown-menu__item {

src/layout/components/sidebar/vertical.vue

@@ -1,52 +1,22 @@
-<template>
+<script setup lang="ts">
-  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
-    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        unique-opened
-        router
-        :collapse-transition="false"
-        mode="vertical"
-        @select="menuSelect"
-      >
-        <sidebar-item
-          v-for="route in routeStore.wholeRoutes"
-          :key="route.path"
-          :item="route"
-          :base-path="route.path"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script lang="ts">
 import Logo from "./logo.vue";
 import { emitter } from "/@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
 import { algorithm } from "/@/utils/algorithm";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
+import { computed, ref, onBeforeMount } from "vue";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { computed, defineComponent, ref, onBeforeMount } from "vue";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
-export default defineComponent({
-  name: "sidebar",
-  components: { SidebarItem, Logo },
-  setup() {
-    const routeStore = usePermissionStoreHook();
-
-    const router = useRouter().options.routes;
-
-    const pureApp = useAppStoreHook();
-
 const route = useRoute();
-
+const pureApp = useAppStoreHook();
+const router = useRouter().options.routes;
+const routeStore = usePermissionStoreHook();
 const showLogo = ref(storageLocal.getItem("logoVal") || "1");
-
+const isCollapse = computed(() => {
+  return !pureApp.getSidebarStatus;
+});
 const activeMenu = computed(() => {
   const { meta, path } = route;
   if (meta.activeMenu) {
@@ -84,14 +54,28 @@ export default defineComponent({
     showLogo.value = key;
   });
 });
-
-    return {
-      activeMenu,
-      isCollapse: computed(() => !pureApp.getSidebarStatus),
-      menuSelect,
-      showLogo,
-      routeStore
-    };
-  }
-});
 </script>
+
+<template>
+  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        unique-opened
+        router
+        :collapse-transition="false"
+        mode="vertical"
+        @select="menuSelect"
+      >
+        <sidebar-item
+          v-for="route in routeStore.wholeRoutes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>

src/layout/components/tag/index.vue

@@ -1,93 +1,14 @@
-<template>
-  <div ref="containerDom" class="tags-view" v-if="!showTags">
-    <el-scrollbar wrap-class="scrollbar-wrapper" class="scroll-container">
-      <div
-        v-for="(item, index) in dynamicTagList"
-        :key="index"
-        :ref="'dynamic' + index"
-        :class="[
-          'scroll-item is-closable',
-          $route.path === item.path ? 'is-active' : '',
-          $route.path === item.path && showModel === 'card' ? 'card-active' : ''
-        ]"
-        @contextmenu.prevent="openMenu(item, $event)"
-        @mouseenter.prevent="onMouseenter(item, index)"
-        @mouseleave.prevent="onMouseleave(item, index)"
-      >
-        <router-link :to="item.path" @click="tagOnClick(item)">{{
-          $t(item.meta.title)
-        }}</router-link>
-        <span
-          v-if="
-            ($route.path === item.path && index !== 0) ||
-            (index === activeIndex && index !== 0)
-          "
-          class="el-icon-close"
-          @click="deleteMenu(item)"
-        ></span>
-        <div
-          :ref="'schedule' + index"
-          v-if="showModel !== 'card'"
-          :class="[$route.path === item.path ? 'schedule-active' : '']"
-        ></div>
-      </div>
-    </el-scrollbar>
-    <!-- 右键菜单按钮 -->
-    <transition name="el-zoom-in-top">
-      <ul
-        v-show="visible"
-        :key="Math.random()"
-        :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
-        class="contextmenu"
-      >
-        <div
-          v-for="(item, key) in tagsViews"
-          :key="key"
-          style="display: flex; align-items: center"
-        >
-          <li v-if="item.show" @click="selectTag(key, item)">
-            <component :is="item.icon" :key="key" />
-            {{ item.text }}
-          </li>
-        </div>
-      </ul>
-    </transition>
-    <!-- 右侧功能按钮 -->
-    <ul class="right-button">
-      <li>
-        <i
-          :title="$t('message.hsrefreshRoute')"
-          class="el-icon-refresh-right rotate"
-          @click="onFresh"
-        ></i>
-      </li>
-      <li>
-        <el-dropdown trigger="click" placement="bottom-end">
-          <i class="el-icon-arrow-down"></i>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                v-for="(item, key) in tagsViews"
-                :key="key"
-                :divided="item.divided"
-                :disabled="item.disabled"
-                @click="onClickDrop(key, item)"
-              >
-                <component :is="item.icon" :key="key" />
-                {{ item.text }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </li>
-      <li>
-        <slot></slot>
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script lang="ts">
+export default {
+  computed: {
+    dynamicTagList() {
+      return this.$storage.routesInStorage;
+    }
+  }
+};
+</script>
+
+<script setup lang="ts">
 import {
   ref,
   watch,
@@ -96,20 +17,29 @@ import {
   nextTick,
   getCurrentInstance
 } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { RouteConfigs } from "../../types";
-import { storageLocal } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
-import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
-import closeOther from "/@/assets/svg/close_other.svg";
+import { storageLocal } from "/@/utils/storage";
-import closeLeft from "/@/assets/svg/close_left.svg";
+import { useRoute, useRouter } from "vue-router";
-import closeRight from "/@/assets/svg/close_right.svg";
+import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
+
 import close from "/@/assets/svg/close.svg";
 import refresh from "/@/assets/svg/refresh.svg";
 import closeAll from "/@/assets/svg/close_all.svg";
+import closeLeft from "/@/assets/svg/close_left.svg";
+import closeOther from "/@/assets/svg/close_other.svg";
+import closeRight from "/@/assets/svg/close_right.svg";
 
 let refreshButton = "refresh-button";
-let routerArrays: Array<object> = [
+const instance = getCurrentInstance();
+let st: any;
+const route = useRoute();
+const router = useRouter();
+const showTags = ref(storageLocal.getItem("tagsVal") || false);
+const containerDom = templateRef<HTMLElement | null>("containerDom", null);
+const activeIndex = ref(-1);
+let routerArrays: Array<RouteConfigs> = [
   {
     path: "/welcome",
     parentPath: "/",
@@ -121,69 +51,44 @@ let routerArrays: Array<object> = [
     }
   }
 ];
-
+const tagsViews = ref<ForDataType<undefined>>([
-export default {
-  name: "tag",
-  components: {
-    closeOther,
-    closeLeft,
-    closeRight,
-    close,
-    refresh,
-    closeAll
-  },
-  // @ts-ignore
-  computed: {
-    dynamicTagList() {
-      return this.$storage.routesInStorage;
-    }
-  },
-  setup() {
-    const instance = getCurrentInstance();
-    let st: any;
-    const route = useRoute();
-    const router = useRouter();
-    const showTags = ref(storageLocal.getItem("tagsVal") || false);
-    const containerDom = templateRef<HTMLElement | null>("containerDom", null);
-    const activeIndex = ref(-1);
-    const tagsViews = ref([
   {
-        icon: "refresh",
+    icon: refresh,
     text: "重新加载",
     divided: false,
     disabled: false,
     show: true
   },
   {
-        icon: "close",
+    icon: close,
     text: "关闭当前标签页",
     divided: false,
     disabled: routerArrays.length > 1 ? false : true,
     show: true
   },
   {
-        icon: "closeLeft",
+    icon: closeLeft,
     text: "关闭左侧标签页",
     divided: true,
     disabled: routerArrays.length > 1 ? false : true,
     show: true
   },
   {
-        icon: "closeRight",
+    icon: closeRight,
     text: "关闭右侧标签页",
     divided: false,
     disabled: routerArrays.length > 1 ? false : true,
     show: true
   },
   {
-        icon: "closeOther",
+    icon: closeOther,
     text: "关闭其他标签页",
     divided: true,
     disabled: routerArrays.length > 2 ? false : true,
     show: true
   },
   {
-        icon: "closeAll",
+    icon: closeAll,
     text: "关闭全部标签页",
     divided: false,
     disabled: routerArrays.length > 1 ? false : true,
@@ -248,13 +153,9 @@ export default {
     return item.path === obj.path;
   });
 
-      const spliceRoute = (
+  const spliceRoute = (start?: number, end?: number, other?: boolean): void => {
-        start?: number,
-        end?: number,
-        other?: boolean
-      ): void => {
     if (other) {
-          st.routesInStorage = routerArrays = [
+      st.routesInStorage = [
         {
           path: "/welcome",
           parentPath: "/",
@@ -267,6 +168,7 @@ export default {
         },
         obj
       ];
+      routerArrays = st.routesInStorage;
     } else {
       routerArrays.splice(start, end);
       st.routesInStorage = routerArrays;
@@ -300,7 +202,7 @@ export default {
   deleteDynamicTag(item, item.path, tag);
 }
 
-    function onClickDrop(key, item, selectRoute) {
+function onClickDrop(key, item, selectRoute?: RouteConfigs) {
   if (item && item.disabled) return;
   // 当前路由信息
   switch (key) {
@@ -471,8 +373,7 @@ export default {
 function onMouseenter(item, index) {
   if (index) activeIndex.value = index;
   if (unref(showModel) === "smart") {
-        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+    if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
-          return;
     toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
     toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
   } else {
@@ -486,8 +387,7 @@ export default {
 function onMouseleave(item, index) {
   activeIndex.value = -1;
   if (unref(showModel) === "smart") {
-        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+    if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
-          return;
     toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
     toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
   } else {
@@ -535,31 +435,97 @@ export default {
     });
   });
 });
-
-    return {
-      deleteMenu,
-      showTags,
-      onFresh,
-      tagsViews,
-      onClickDrop,
-      visible,
-      buttonLeft,
-      buttonTop,
-      openMenu,
-      closeMenu,
-      selectTag,
-      currentSelect,
-      onMouseenter,
-      onMouseleave,
-      tagOnClick,
-      activeIndex,
-      showModel,
-      showMenuModel
-    };
-  }
-};
 </script>
 
+<template>
+  <div ref="containerDom" class="tags-view" v-if="!showTags">
+    <el-scrollbar wrap-class="scrollbar-wrapper" class="scroll-container">
+      <div
+        v-for="(item, index) in dynamicTagList"
+        :key="index"
+        :ref="'dynamic' + index"
+        :class="[
+          'scroll-item is-closable',
+          $route.path === item.path ? 'is-active' : '',
+          $route.path === item.path && showModel === 'card' ? 'card-active' : ''
+        ]"
+        @contextmenu.prevent="openMenu(item, $event)"
+        @mouseenter.prevent="onMouseenter(item, index)"
+        @mouseleave.prevent="onMouseleave(item, index)"
+      >
+        <router-link :to="item.path" @click="tagOnClick(item)">{{
+          $t(item.meta.title)
+        }}</router-link>
+        <span
+          v-if="
+            ($route.path === item.path && index !== 0) ||
+            (index === activeIndex && index !== 0)
+          "
+          class="el-icon-close"
+          @click="deleteMenu(item)"
+        ></span>
+        <div
+          :ref="'schedule' + index"
+          v-if="showModel !== 'card'"
+          :class="[$route.path === item.path ? 'schedule-active' : '']"
+        ></div>
+      </div>
+    </el-scrollbar>
+    <!-- 右键菜单按钮 -->
+    <transition name="el-zoom-in-top">
+      <ul
+        v-show="visible"
+        :key="Math.random()"
+        :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
+        class="contextmenu"
+      >
+        <div
+          v-for="(item, key) in tagsViews"
+          :key="key"
+          style="display: flex; align-items: center"
+        >
+          <li v-if="item.show" @click="selectTag(key, item)">
+            <component :is="item.icon" :key="key" />
+            {{ item.text }}
+          </li>
+        </div>
+      </ul>
+    </transition>
+    <!-- 右侧功能按钮 -->
+    <ul class="right-button">
+      <li>
+        <i
+          :title="$t('message.hsrefreshRoute')"
+          class="el-icon-refresh-right rotate"
+          @click="onFresh"
+        ></i>
+      </li>
+      <li>
+        <el-dropdown trigger="click" placement="bottom-end">
+          <i class="el-icon-arrow-down"></i>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="(item, key) in tagsViews"
+                :key="key"
+                :divided="item.divided"
+                :disabled="item.disabled"
+                @click="onClickDrop(key, item)"
+              >
+                <component :is="item.icon" :key="key" />
+                {{ item.text }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </li>
+      <li>
+        <slot></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @keyframes scheduleInWidth {
   from {

src/layout/index.vue

@@ -1,16 +1,5 @@
 <script lang="ts">
-let routerArrays: Array<object> = [
+import { routerArrays } from "./types";
-  {
-    path: "/welcome",
-    parentPath: "/",
-    meta: {
-      title: "message.hshome",
-      icon: "el-icon-s-home",
-      showLink: true,
-      savedPosition: false
-    }
-  }
-];
 export default {
   computed: {
     layout() {
@@ -204,7 +193,6 @@ onBeforeMount(() => {
 </style>
 
 <style lang="scss" scoped>
-$sideBarWidth: 210px;
 @mixin clearfix {
   &::after {
     content: "";
@@ -241,7 +229,7 @@ $sideBarWidth: 210px;
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
+  width: calc(100% - 210px);
   transition: width 0.28s;
 }
 

src/layout/types.ts

@@ -0,0 +1,23 @@
+export type RouteConfigs = {
+  path?: string;
+  parentPath?: string;
+  meta?: {
+    title?: string;
+    icon?: string;
+    showLink?: boolean;
+    savedPosition?: boolean;
+  };
+};
+
+export const routerArrays: Array<RouteConfigs> = [
+  {
+    path: "/welcome",
+    parentPath: "/",
+    meta: {
+      title: "message.hshome",
+      icon: "el-icon-s-home",
+      showLink: true,
+      savedPosition: false
+    }
+  }
+];

src/style/sidebar.scss

@@ -179,7 +179,7 @@
         }
       }
 
-      .iconinternationality {
+      .globalization {
         height: 62px;
         width: 40px;
         padding: 11px;