perf:文件名字修改

src/components/Charts/gauge/index.vue

@@ -0,0 +1,127 @@
+
+
+<template>
+  <div class="echarts" ref="echarts"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  data(){
+    return{
+      chart:null
+    }
+  },
+  methods:{
+    initEcharts(){
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            center: ['50%', '80%'],
+            radius: '100%',
+            min: 0,
+            max: 1,
+            z: 5,
+            splitNumber: 12,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 6,
+                color: [
+                  [0.12, "#d92d4d"],
+                  [0.35, "#eb8349"],
+                  [0.63, "#e6e462"],
+                  [0.8, "#74c7da"],
+                  [1, "#67b45a"],
+                ]
+              }
+            },
+            axisTick: {
+              splitNumber: 13,
+              show: true,
+              lineStyle: {
+                color: "auto",
+                width: 2,
+              },
+              length: 17,
+            },
+            splitLine: {
+              length: 25,
+              lineStyle: {
+                color: 'auto',
+                width: 8
+              }
+            },
+            axisLabel: {
+              color: '#a0a7b8',
+              fontSize: 20,
+              distance: -60,
+              rotate: 'tangential',
+              formatter: function (value) {
+                var value = value.toFixed(2);
+                if (value == 0.0) {
+                  return "危";
+                } else if (value == 0.25) {
+                  return "差";
+                } else if (value == 0.5) {
+                  return "中";
+                } else if (value == 0.75) {
+                  return "良";
+                } else if (value == 1.0) {
+                  return "优";
+                } else {
+                  return "";
+                }
+              }
+            },
+            title: {
+              offsetCenter: [0, '-10%'],
+              fontSize: 20
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 25,
+              itemStyle: {
+                borderWidth: 10
+              }
+            },
+            detail: {
+              fontSize: 30,
+              offsetCenter: [0, '-25%'],
+              valueAnimation: true,
+              formatter: function (value) {
+                return Math.round(value * 100);
+              },
+              color: 'auto'
+            },
+            data: [
+              {
+                value: 0.7,
+                name: 'Grade Rating'
+              }
+            ]
+          }
+        ]
+      };
+
+
+      this.chart = echarts.init(this.$refs.echarts)
+      this.chart.setOption(option)
+    }
+  },
+  mounted() {
+    this.initEcharts()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.echarts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/Theme/index.vue

@@ -193,7 +193,7 @@
     }
   }
 
-  ::v-deep(.el-drawer__title) {
+:deep(.el-drawer__title) {
     font-weight: bold;
     color: black;
   }

src/layout/TagsView/components/MoreButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dropdown trigger="hover">
+    <el-button size="small" type="primary">
+      <span>更多</span>
+      <el-icon class="el-icon--right"><arrow-down /></el-icon>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
+        <el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
+        <el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script lang="ts" setup>
+import {computed} from "vue";
+import {useSettingStore} from "@/store/modules/setting"
+import {useTagsViewStore} from "@/store/modules/tagsView"
+
+const SettingStore = useSettingStore()
+const TagsViewStore = useTagsViewStore()
+const visitedViews = computed(() => TagsViewStore.visitedViews)
+const refresh = () => {
+  SettingStore.setReload()
+}
+// 关闭当前
+const closeCurrentTab = (event)=>{
+  closeSelectedTag(event,route)
+}
+// 关闭其他
+const closeOtherTab= async ()=>{
+  const { name } = route
+  for(let item of visitedViews.value){
+    if(item.name!==name){
+      await closeSelectedTag(null,item)
+    }
+  }
+}
+
+
+
+// 关闭所有 去首页
+const closeAllTab = async ()=>{
+  let visitedViews = await TagsViewStore.delAllViews()
+  await TagsViewStore.goHome()
+}
+</script>
+<style lang="scss" scoped>
+.more{
+  background-color: $primaryColor;
+  color: white;
+  .tags-view-item{
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/layout/TagsView/index.vue

@@ -1,329 +1,166 @@
 <template>
   <div class="tags-wrap-container">
-    <div class="tags-view" ref="scrollContainer">
+    <div class="tags-view">
-      <better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
+      <el-tabs
-        <div class="tags-scroll-inner">
+          v-model="activeTabsValue"
-          <div
+          type="card"
-            v-for="tag in visitedViews"
+          @tab-click="tabClick"
-            :ref="setTagRef"
+          @tab-remove="removeTab"
-            :path="tag.path"
+      >
-            :data-id="tag.path"
+        <el-tab-pane
-            :fullPath="tag.fullPath"
+            v-for="item in visitedViews"
-            :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+            :key="item.path"
-            :key="tag.path"
+            :path="item.path"
-            class="item-tag-wrap"
+            :label="item.title"
-            :class="isActive(tag) ? 'active' : ''"
+            :name="item.path"
-            @click.stop="routerGo(tag)"
+            :closable="!(item.meta&&item.meta.affix)"
-          >
+        >
-            <div class="tags-view-item">{{ tag.title }}</div>
+          <template #label>
-            <el-icon
+            <el-icon class="tabs-icon" v-if="item.icon">
-                v-if="!isAffix(tag)"
+              <component :is="item.icon"></component>
-                @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
+            </el-icon>
-              <circle-close-filled
+            {{ item.title }}
-            /></el-icon>
+          </template>
-          </div>
+        </el-tab-pane>
-        </div>
+      </el-tabs>
-      </better-scroll>
+    </div>
+    <div class="right-btn">
+      <MoreButton/>
     </div>
-    <el-dropdown trigger="click">
-      <div class="item-tag-wrap more">
-          <div class="tags-view-item">更多 <el-icon class="el-icon--right"><arrow-down /></el-icon></div>
-      </div>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
-          <el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
-          <el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
-          <el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
   </div>
 </template>
-
 <script lang="ts" setup>
-  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import {computed, watch, ref, onMounted} from "vue";
-  import betterScroll from './betterScroll.vue'
+import { useRoute, useRouter } from "vue-router";
-  import { useRoute, useRouter } from 'vue-router'
+import { TabsPaneContext } from "element-plus";
+import MoreButton from './components/MoreButton'
+import path from 'path-browserify'
+import {useTagsViewStore} from "@/store/modules/tagsView"
+import {usePermissionStore} from "@/store/modules/permission"
 
-  import {useSettingStore} from "@/store/modules/setting"
+const route = useRoute()
-  import {useTagsViewStore} from "@/store/modules/tagsView"
+const router = useRouter()
-  import {usePermissionStore} from "@/store/modules/permission"
+const TagsViewStore = useTagsViewStore()
+const PermissionStore = usePermissionStore()
+const visitedViews = computed(() => TagsViewStore.visitedViews)
+const routes = computed(() => PermissionStore.routes)
 
-  import path from 'path-browserify'
+const addTags = () => {
-  const route = useRoute()
+  const { name } = route
-  const router = useRouter()
+  if (name === 'Login') {
-  const SettingStore = useSettingStore()
+    return
-  const TagsViewStore = useTagsViewStore()
-  const PermissionStore = usePermissionStore()
-
-  const refresh = () => {
-    SettingStore.setReload()
   }
-
+  if (name) {
-  const routes = computed(() => PermissionStore.routes)
+    TagsViewStore.addView(route)
-
-  const visitedViews = computed(() => TagsViewStore.visitedViews)
-
-  const bsScroll = ref<Expose.BetterScroll>()
-  let obj = new WeakMap()
-
-  let affixTags = ref([])
-  const tags = ref(new Map())
-  // 多个ref 添加tag
-  const setTagRef = (el) => {
-    if (el) {
-      if (!obj.get(el)) {
-        tags.value.set(el.dataset['id'], el)
-      }
-      obj.set(el, el)
-    }
   }
-
+  return false
-  const rollPane = ref()
+}
-  const scrollContainer = ref()
+let affixTags = ref([])
-
+function filterAffixTags(routes, basePath = '/') {
-  function filterAffixTags(routes, basePath = '/') {
+  let tags = []
-    let tags = []
+  routes.forEach((route) => {
-    routes.forEach((route) => {
+    if (route.meta && route.meta.affix) {
-      if (route.meta && route.meta.affix) {
+      const tagPath = path.resolve(basePath, route.path)
-        const tagPath = path.resolve(basePath, route.path)
+      tags.push({
-        tags.push({
+        fullPath: tagPath,
-          fullPath: tagPath,
+        path: tagPath,
-          path: tagPath,
+        name: route.name,
-          name: route.name,
+        meta: { ...route.meta },
-          meta: { ...route.meta },
-        })
-      }
-      if (route.children) {
-        const tempTags = filterAffixTags(route.children, route.path)
-        if (tempTags.length >= 1) {
-          tags = [...tags, ...tempTags]
-        }
-      }
-    })
-    return tags
-  }
-
-  const initTags = () => {
-    let routesNew = routes.value
-    let affixTag = (affixTags.value = filterAffixTags(routesNew))
-    for (const tag of affixTag) {
-      if (tag.name) {
-        TagsViewStore.addVisitedView(tag)
-      }
-    }
-  }
-
-  const isActive = (rou) => {
-    return rou.path === route.path
-  }
-  const isAffix = (tag) => {
-    return tag.meta && tag.meta.affix
-  }
-  const addTags = () => {
-    const { name } = route
-    if (name === 'Login') {
-      return
-    }
-    if (name) {
-      TagsViewStore.addView(route)
-    }
-    return false
-  }
-
-  function toLastView(visitedViews, view) {
-    const latestView = visitedViews.slice(-1)[0]
-    if (latestView) {
-      router.push(latestView.fullPath)
-    } else {
-      if (view.name === 'home') {
-        router.replace({ path: '/redirect' + view.fullPath })
-      } else {
-        router.push('/')
-      }
-    }
-  }
-
-  const closeSelectedTag = async (event, view) => {
-    if (tags.value.get(view.path)) {
-      tags.value.delete(view.path)
-    }
-    let { visitedViews } = await TagsViewStore.delView(view)
-    if (isActive(view)) {
-      toLastView(visitedViews, view)
-    }
-  }
-
-  // 关闭当前
-  const closeCurrentTab = (event)=>{
-    closeSelectedTag(event,route)
-  }
-
-  // 关闭其他
-  const closeOtherTab= async ()=>{
-    const { name } = route
-    for(let item of visitedViews.value){
-      if(item.name!==name){
-        await closeSelectedTag(null,item)
-      }
-    }
-  }
-
-  // 关闭所有 去首页
-  const closeAllTab = async ()=>{
-    let visitedViews = await TagsViewStore.delAllViews()
-    toLastView(visitedViews,route)
-  }
-
-  const routerGo = (tag) => {
-    router.push({
-      path: tag.path,
-      query: tag.query,
-    })
-  }
-
-  function handleScrollAction(currentTag) {
-    const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
-    let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
-    const clientX = currx + currentWidth / 2
-    const currentX = clientX - scrollContainerRect.left
-    const deltaX = currentX - scrollContainerRect.width / 2
-    if (bsScroll.value) {
-      const { maxScrollX, x: leftX } = bsScroll.value.instance
-      const rightX = maxScrollX - leftX
-      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
-      bsScroll.value?.instance.scrollBy(update, 0, 300)
-    }
-  }
-
-  function moveToCurrentTag() {
-    nextTick(() => {
-      for (const [key, tag] of tags.value) {
-        let path = tag.attributes.path.value
-        if (path === route.path) {
-          let fullPath = tag.attributes.fullPath.value
-          // 移动
-          handleScrollAction(tag, tags.value)
-          if (fullPath !== route.fullPath) {
-            TagsViewStore.updateVisitedView(route)
-          }
-          break
-        }
-      }
-    })
-  }
-
-  onMounted(() => {
-    initTags()
-    addTags()
-    nextTick(() => {
-      setTimeout(() => {
-        moveToCurrentTag()
-      }, 50)
-    })
-
-    watch(route, () => {
-      addTags()
-      nextTick(() => {
-        setTimeout(() => {
-          moveToCurrentTag()
-        }, 100)
       })
-    })
+    }
-
+    if (route.children) {
-    router.beforeEach(async (to, from, next) => {
+      const tempTags = filterAffixTags(route.children, route.path)
-      if (
+      if (tempTags.length >= 1) {
-        (from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
+        tags = [...tags, ...tempTags]
-        to.fullPath === '/home'
-      ) {
-        let whiteList = ['/error/404', '/error/401']
-        await TagsViewStore.removeView(whiteList)
       }
-      next()
+    }
-    })
   })
-</script>
+  return tags
+}
+const initTags = () => {
+  let routesNew = routes.value
+  let affixTag = (affixTags.value = filterAffixTags(routesNew))
+  for (const tag of affixTag) {
+    if (tag.name) {
+      TagsViewStore.addVisitedView(tag)
+    }
+  }
+}
+onMounted(()=>{
+  initTags()
+  addTags()
+})
+watch(route, () => {
+  addTags()
+})
+let tabIndex = 2
+const activeTabsValue = computed({
+  get: () => {
+    return TagsViewStore.activeTabsValue;
+  },
+  set: val => {
+    TagsViewStore.setTabsMenuValue(val);
+  }
+});
+function toLastView(activeTabPath) {
+  let index = visitedViews.value.findIndex(item=>item.path===activeTabPath)
+  const nextTab = visitedViews.value[index + 1] || visitedViews.value[index - 1];
+  if (!nextTab) return;
+  router.push(nextTab.path);
+  TagsViewStore.addVisitedView(nextTab)
+}
+// Tab Click
+const tabClick = (tabItem: TabsPaneContext) => {
+  let path = tabItem.props.name as string;
+  router.push(path);
+};
 
+const isActive = (path) => {
+  return path === route.path
+}
+const removeTab = async (activeTabPath: string) => {
+  if (isActive(activeTabPath)) {
+    toLastView(activeTabPath)
+  }
+  await TagsViewStore.delView(activeTabPath)
+}
+</script>
 <style lang="scss" scoped>
-  .tags-wrap-container {
+.tags-wrap-container{
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    padding-left: 10px;
+  padding-left: 10px;
-    .tags-view {
+  padding-right: 10px;
-      height: 30px;
+  .right-btn{
-      background: white;
+    height: 100%;
-      display: flex;
+    flex-shrink: 0;
-      align-items: center;
-      flex: 1;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-    .refresh {
-      //margin-left: 20px;
-      cursor: pointer;
-      font-size: 22px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .refresh-inner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50px;
-        height: 100%;
-      }
-      //box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
-    }
-    //padding-right: 10px;
   }
-  .item-tag-wrap {
+}
-    position: relative;
+.tags-view {
-    display: inline-flex;
+  flex: 1;
-    align-items: center;
+  overflow: hidden;
-    padding: 4px 12px;
+  box-sizing: border-box;
-    font-size: 14px;
+}
-    cursor: pointer;
+
-    margin-right: 10px;
+.tags-view{
-    border: 1px solid #d8dce5;
+  .el-tabs--card :deep(.el-tabs__header){
-    &.active .tag-icon {
+    box-sizing: border-box;
-      display: block;
+    height: 40px;
+    padding: 0 10px;
+    margin: 0;
+  }
+  :deep(.el-tabs){
+    .el-tabs__nav {
+      border: none;
     }
-    &.active {
+    .el-tabs__header .el-tabs__item {
-      background-color: $primaryColor;
+      border: none;
-      color: #fff;
+    }
-      border-color: $primaryColor;
+    .el-tabs__header .el-tabs__item.is-active {
-    }
+      color: $primaryColor;
-  }
+      border-bottom:2px solid $primaryColor;
-  .item-tag-wrap:hover {
-    border-color: $primaryColor;
-  }
-  .tags-scroll-inner {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-  .tag-icon {
-    margin-left: 6px;
-  }
-  .tags-view-item {
-    position: relative;
-    z-index: 2;
-    white-space: nowrap;
-    font-size: 12px;
-    .tags-inner {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-    }
-  }
-  .more{
-    background-color: $primaryColor;
-    color: white;
-    .tags-view-item{
-      display: flex;
-      align-items: center;
     }
   }
+}
 </style>

src/layout/TagsView/index1.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="tags-wrap-container">
+    <div class="tags-view" ref="scrollContainer">
+      <better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
+        <div class="tags-scroll-inner">
+          <div
+            v-for="tag in visitedViews"
+            :ref="setTagRef"
+            :path="tag.path"
+            :data-id="tag.path"
+            :fullPath="tag.fullPath"
+            :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+            :key="tag.path"
+            class="item-tag-wrap"
+            :class="isActive(tag) ? 'active' : ''"
+            @click.stop="routerGo(tag)"
+          >
+            <div class="tags-view-item">{{ tag.title }}</div>
+            <el-icon
+                v-if="!isAffix(tag)"
+                @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
+              <circle-close-filled
+            /></el-icon>
+          </div>
+        </div>
+      </better-scroll>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+  import betterScroll from './betterScroll.vue'
+  import { useRoute, useRouter } from 'vue-router'
+
+  import {useSettingStore} from "@/store/modules/setting"
+  import {useTagsViewStore} from "@/store/modules/tagsView"
+  import {usePermissionStore} from "@/store/modules/permission"
+
+  import path from 'path-browserify'
+  const route = useRoute()
+  const router = useRouter()
+  const SettingStore = useSettingStore()
+  const TagsViewStore = useTagsViewStore()
+  const PermissionStore = usePermissionStore()
+
+  const refresh = () => {
+    SettingStore.setReload()
+  }
+
+  const routes = computed(() => PermissionStore.routes)
+
+  const visitedViews = computed(() => TagsViewStore.visitedViews)
+
+  const bsScroll = ref<Expose.BetterScroll>()
+  let obj = new WeakMap()
+
+  let affixTags = ref([])
+  const tags = ref(new Map())
+  // 多个ref 添加tag
+  const setTagRef = (el) => {
+    if (el) {
+      if (!obj.get(el)) {
+        tags.value.set(el.dataset['id'], el)
+      }
+      obj.set(el, el)
+    }
+  }
+
+  const rollPane = ref()
+  const scrollContainer = ref()
+
+  function filterAffixTags(routes, basePath = '/') {
+    let tags = []
+    routes.forEach((route) => {
+      if (route.meta && route.meta.affix) {
+        const tagPath = path.resolve(basePath, route.path)
+        tags.push({
+          fullPath: tagPath,
+          path: tagPath,
+          name: route.name,
+          meta: { ...route.meta },
+        })
+      }
+      if (route.children) {
+        const tempTags = filterAffixTags(route.children, route.path)
+        if (tempTags.length >= 1) {
+          tags = [...tags, ...tempTags]
+        }
+      }
+    })
+    return tags
+  }
+
+  const initTags = () => {
+    let routesNew = routes.value
+    let affixTag = (affixTags.value = filterAffixTags(routesNew))
+    for (const tag of affixTag) {
+      if (tag.name) {
+        TagsViewStore.addVisitedView(tag)
+      }
+    }
+  }
+
+  const isActive = (rou) => {
+    return rou.path === route.path
+  }
+  const isAffix = (tag) => {
+    return tag.meta && tag.meta.affix
+  }
+  const addTags = () => {
+    const { name } = route
+    if (name === 'Login') {
+      return
+    }
+    if (name) {
+      TagsViewStore.addView(route)
+    }
+    return false
+  }
+
+  function toLastView(visitedViews, view) {
+    const latestView = visitedViews.slice(-1)[0]
+    if (latestView) {
+      router.push(latestView.fullPath)
+    } else {
+      if (view.name === 'home') {
+        router.replace({ path: '/redirect' + view.fullPath })
+      } else {
+        router.push('/')
+      }
+    }
+  }
+
+  const closeSelectedTag = async (event, view) => {
+    if (tags.value.get(view.path)) {
+      tags.value.delete(view.path)
+    }
+    let { visitedViews } = await TagsViewStore.delView(view)
+    if (isActive(view)) {
+      toLastView(visitedViews, view)
+    }
+  }
+
+  // 关闭当前
+  const closeCurrentTab = (event)=>{
+    closeSelectedTag(event,route)
+  }
+
+  // 关闭其他
+  const closeOtherTab= async ()=>{
+    const { name } = route
+    for(let item of visitedViews.value){
+      if(item.name!==name){
+        await closeSelectedTag(null,item)
+      }
+    }
+  }
+
+  // 关闭所有 去首页
+  const closeAllTab = async ()=>{
+    let visitedViews = await TagsViewStore.delAllViews()
+    toLastView(visitedViews,route)
+  }
+
+  const routerGo = (tag) => {
+    router.push({
+      path: tag.path,
+      query: tag.query,
+    })
+  }
+
+  function handleScrollAction(currentTag) {
+    const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
+    let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
+    const clientX = currx + currentWidth / 2
+    const currentX = clientX - scrollContainerRect.left
+    const deltaX = currentX - scrollContainerRect.width / 2
+    if (bsScroll.value) {
+      const { maxScrollX, x: leftX } = bsScroll.value.instance
+      const rightX = maxScrollX - leftX
+      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
+      bsScroll.value?.instance.scrollBy(update, 0, 300)
+    }
+  }
+
+  function moveToCurrentTag() {
+    nextTick(() => {
+      for (const [key, tag] of tags.value) {
+        let path = tag.attributes.path.value
+        if (path === route.path) {
+          let fullPath = tag.attributes.fullPath.value
+          // 移动
+          handleScrollAction(tag, tags.value)
+          if (fullPath !== route.fullPath) {
+            TagsViewStore.updateVisitedView(route)
+          }
+          break
+        }
+      }
+    })
+  }
+
+  onMounted(() => {
+    initTags()
+    addTags()
+    nextTick(() => {
+      setTimeout(() => {
+        moveToCurrentTag()
+      }, 50)
+    })
+
+    watch(route, () => {
+      addTags()
+      nextTick(() => {
+        setTimeout(() => {
+          moveToCurrentTag()
+        }, 100)
+      })
+    })
+
+    router.beforeEach(async (to, from, next) => {
+      if (
+        (from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
+        to.fullPath === '/home'
+      ) {
+        let whiteList = ['/error/404', '/error/401']
+        await TagsViewStore.removeView(whiteList)
+      }
+      next()
+    })
+  })
+</script>
+
+<style lang="scss" scoped>
+  .tags-wrap-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 10px;
+    .tags-view {
+      height: 30px;
+      background: white;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    .refresh {
+      //margin-left: 20px;
+      cursor: pointer;
+      font-size: 22px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .refresh-inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 100%;
+      }
+      //box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+    }
+    //padding-right: 10px;
+  }
+  .item-tag-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-right: 10px;
+    border: 1px solid #d8dce5;
+    &.active .tag-icon {
+      display: block;
+    }
+    &.active {
+      background-color: $primaryColor;
+      color: #fff;
+      border-color: $primaryColor;
+    }
+  }
+  .item-tag-wrap:hover {
+    border-color: $primaryColor;
+  }
+  .tags-scroll-inner {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  .tag-icon {
+    margin-left: 6px;
+  }
+  .tags-view-item {
+    position: relative;
+    z-index: 2;
+    white-space: nowrap;
+    font-size: 12px;
+    .tags-inner {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+  }
+  .more{
+    background-color: $primaryColor;
+    color: white;
+    .tags-view-item{
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>

src/layout/index.vue

@@ -8,7 +8,7 @@
         hideSliderLayout: mode === 'horizontal',
       }"
     >
-      <div :style="{ height:`${showTag?80:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
+      <div :style="{ height:`${showTag?90:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />

src/store/modules/tagsView.ts

@@ -1,11 +1,13 @@
 import {defineStore} from 'pinia'
-
+import {  useRouter } from "vue-router";
+const router = useRouter()
 
 export const useTagsViewStore = defineStore({
     // id: 必须的，在所有 Store 中唯一
     id:'tagsViewState',
     // state: 返回对象的函数
     state: ()=>({
+        activeTabsValue:'/home',
         visitedViews:[],
         cachedViews:[],
 
@@ -13,6 +15,9 @@ export const useTagsViewStore = defineStore({
     getters: {},
     // 可以同步 也可以异步
     actions:{
+        setTabsMenuValue(val){
+            this.activeTabsValue = val
+        },
         addView(view){
             this.addVisitedView(view)
         },
@@ -23,7 +28,9 @@ export const useTagsViewStore = defineStore({
             })
         },
         addVisitedView(view){
+            this.setTabsMenuValue(view.path);
             if (this.visitedViews.some(v => v.path === view.path)) return
+
             this.visitedViews.push(
                 Object.assign({}, view, {
                     title: view.meta.title || 'no-name'
@@ -32,11 +39,12 @@ export const useTagsViewStore = defineStore({
             if (view.meta.keepAlive) {
                 this.cachedViews.push(view.name)
             }
+
         },
-        delView(view){
+        delView(activeTabPath){
             return new Promise(resolve => {
-                this.delVisitedView(view)
+                this.delVisitedView(activeTabPath)
-                this.delCachedView(view)
+                this.delCachedView(activeTabPath)
                 resolve({
                     visitedViews: [...this.visitedViews],
                     cachedViews: [...this.cachedViews]
@@ -44,13 +52,13 @@ export const useTagsViewStore = defineStore({
             })
 
         },
-        delVisitedView(view){
+        delVisitedView(path){
             return new Promise(resolve => {
                 this.visitedViews = this.visitedViews.filter(v=>{
-                    return (v.path !== view.path||v.meta.affix)
+                    return (v.path !== path||v.meta.affix)
                 })
                 this.cachedViews = this.cachedViews.filter(v=>{
-                    return (v.path !== view.path||v.meta.affix)
+                    return (v.path !== path||v.meta.affix)
                 })
                 resolve([...this.visitedViews])
             })
@@ -74,6 +82,10 @@ export const useTagsViewStore = defineStore({
                 resolve([...this.visitedViews])
             })
         },
+        async goHome() {
+            router.push('/home');
+            this.activeTabsValue = '/home';
+        },
         updateVisitedView(view){
             for (let v of this.visitedViews) {
                 if (v.path === view.path) {

src/views/charts/components/js/data.js

@@ -5,33 +5,33 @@ export const cityIconData = [
     value: [88.999903, 43.607078],
   },
   {
-    adcode: 150000,
+    // adcode: 150000,
     name: '内蒙古自治区',
     value: [119.24787, 42.205741],
   },
   ,
   {
-    adcode: 150000,
+    // adcode: 150000,
     name: '内蒙古自治区',
     value: [110.627161, 41.16628],
   },
   {
-    adcode: 540000,
+    // adcode: 540000,
     name: '西藏自治区',
     value: [89.483714, 30.251951],
   },
   {
-    adcode: 630000,
+    // adcode: 630000,
     name: '青海省',
     value: [102.064693, 37.084008],
   },
   {
-    adcode: 530000,
+    // adcode: 530000,
     name: '云南省',
     value: [102.187665, 25.083688],
   },
   {
-    adcode: 610000,
+    // adcode: 610000,
     name: '陕西省',
     value: [109.20663, 35.018625],
   },

src/views/login/index.scss

@@ -1,5 +1,5 @@
 $dark_gray: #889aa4;
-::v-deep(input) {
+:deep(input) {
   background: transparent;
   border: 0;
   color: white;