From 72b871a898b11732da67518862be4b478df69ee8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 24 Apr 2022 15:07:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E8=BF=98=E5=8E=9Flayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 0a0193d9da494ff9ee7ff48a8ffec11b4a010411
---
 src/layout copy/components/AppMain.vue        |  55 ---
 src/layout copy/components/Navbar.vue         | 180 --------
 src/layout copy/components/Settings/index.vue | 103 -----
 src/layout copy/components/Sidebar/Link.vue   |  53 ---
 src/layout copy/components/Sidebar/Logo.vue   |  85 ----
 .../components/Sidebar/SidebarItem.vue        | 102 -----
 src/layout copy/components/Sidebar/index.vue  |  51 ---
 .../components/TagsView/ScrollPane.vue        | 132 ------
 src/layout copy/components/TagsView/index.vue | 392 ------------------
 src/layout copy/components/index.ts           |   4 -
 src/layout copy/index.vue                     | 105 -----
 11 files changed, 1262 deletions(-)
 delete mode 100644 src/layout copy/components/AppMain.vue
 delete mode 100644 src/layout copy/components/Navbar.vue
 delete mode 100644 src/layout copy/components/Settings/index.vue
 delete mode 100644 src/layout copy/components/Sidebar/Link.vue
 delete mode 100644 src/layout copy/components/Sidebar/Logo.vue
 delete mode 100644 src/layout copy/components/Sidebar/SidebarItem.vue
 delete mode 100644 src/layout copy/components/Sidebar/index.vue
 delete mode 100644 src/layout copy/components/TagsView/ScrollPane.vue
 delete mode 100644 src/layout copy/components/TagsView/index.vue
 delete mode 100644 src/layout copy/components/index.ts
 delete mode 100644 src/layout copy/index.vue

diff --git a/src/layout copy/components/AppMain.vue b/src/layout copy/components/AppMain.vue
deleted file mode 100644
index 3480cd75..00000000
--- a/src/layout copy/components/AppMain.vue	
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <section class="app-main">
-    <router-view v-slot="{ Component, route }">
-      <transition name="router-fade" mode="out-in">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-      </transition>
-    </router-view>
-  </section>
-</template>
-
-
-<script setup lang="ts">
-import { computed } from "vue";
-import useStore from "@/store";
-
-const { tagsView } = useStore();
-
-const cachedViews = computed(() => tagsView.cachedViews);
-</script>
-
-<style lang="scss" scoped>
-.app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
-
-.hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
-
-  .fixed-header+.app-main {
-    padding-top: 84px;
-  }
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>
diff --git a/src/layout copy/components/Navbar.vue b/src/layout copy/components/Navbar.vue
deleted file mode 100644
index 0593570f..00000000
--- a/src/layout copy/components/Navbar.vue	
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger
-      id="hamburger-container"
-      :is-active="sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
-    <div class="right-menu">
-      <template v-if="device !== 'mobile'">
-        <!--        <search id="header-search" class="right-menu-item" />
-                <error-log class="errLog-container right-menu-item hover-effect" />-->
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-        <lang-select class="right-menu-item hover-effect" />
-      </template>
-
-      <el-dropdown
-        class="avatar-container right-menu-item hover-effect"
-        trigger="click"
-      >
-        <div class="avatar-wrapper">
-          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
-          <CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
-        </div>
-
-        <template #dropdown>
-          <el-dropdown-menu>
-            <router-link to="/">
-              <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
-            </router-link>
-            <a target="_blank" href="https://github.com/hxrui">
-              <el-dropdown-item>Github</el-dropdown-item>
-            </a>
-            <a target="_blank" href="https://gitee.com/haoxr">
-              <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
-            </a>
-            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
-              <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
-            </a>
-            <el-dropdown-item divided @click="logout">
-              {{ $t("navbar.logout") }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessageBox } from "element-plus";
-
-import useStore from "@/store";
-
-// 组件依赖
-import Breadcrumb from "@/components/Breadcrumb/index.vue";
-import Hamburger from "@/components/Hamburger/index.vue";
-import Screenfull from "@/components/Screenfull/index.vue";
-import SizeSelect from "@/components/SizeSelect/index.vue";
-import LangSelect from "@/components/LangSelect/index.vue";
-
-// 图标依赖
-import { CaretBottom } from "@element-plus/icons-vue";
-
-const { app, user } = useStore();
-
-const route = useRoute();
-const router = useRouter();
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-const avatar = computed(() => user.avatar);
-
-function toggleSideBar() {
-  app.toggleSidebar();
-}
-
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
-    user.logout().then(() => {
-      router.push(`/login?redirect=${route.fullPath}`);
-    });
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.navbar {
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/layout copy/components/Settings/index.vue b/src/layout copy/components/Settings/index.vue
deleted file mode 100644
index 5e5f5588..00000000
--- a/src/layout copy/components/Settings/index.vue	
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <h3 class="drawer-title">系统布局配置</h3>
-    <div class="drawer-item">
-      <span>主题颜色</span>
-      <div style="float: right; height: 26px; margin: -3px 8px 0 0">
-        <theme-picker @change="themeChange" />
-      </div>
-    </div>
-
-    <div class="drawer-item">
-      <span>开启 Tags-View</span>
-      <el-switch v-model="tagsView" class="drawer-switch" />
-    </div>
-
-    <div class="drawer-item">
-      <span>固定 Header</span>
-      <el-switch v-model="fixedHeader" class="drawer-switch" />
-    </div>
-
-    <div class="drawer-item">
-      <span>侧边栏 Logo</span>
-      <el-switch v-model="sidebarLogo" class="drawer-switch" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, toRefs, watch } from "vue";
-
-import ThemePicker from "@/components/ThemePicker/index.vue";
-
-import useStore from "@/store";
-
-const { setting } = useStore();
-
-const state = reactive({
-  fixedHeader: setting.fixedHeader,
-  tagsView: setting.tagsView,
-  sidebarLogo: setting.sidebarLogo,
-});
-
-const { fixedHeader, tagsView, sidebarLogo } = toRefs(state);
-
-function themeChange(val: any) {
-  setting.changeSetting({ key: "theme", value: val });
-}
-
-watch(
-  () => state.fixedHeader,
-  (value) => {
-    setting.changeSetting({ key: "fixedHeader", value: value });
-  }
-);
-
-watch(
-  () => state.tagsView,
-  (value) => {
-    setting.changeSetting({ key: "tagsView", value: value });
-  }
-);
-
-watch(
-  () => state.sidebarLogo,
-  (value) => {
-    setting.changeSetting({ key: "sidebarLogo", value: value });
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right;
-  }
-
-  .job-link {
-    display: block;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-  }
-}
-</style>
diff --git a/src/layout copy/components/Sidebar/Link.vue b/src/layout copy/components/Sidebar/Link.vue
deleted file mode 100644
index 0254b59a..00000000
--- a/src/layout copy/components/Sidebar/Link.vue	
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <a
-      v-if="isExternal(to)"
-      :href="to"
-      target="_blank"
-      rel="noopener"
-  >
-    <slot />
-  </a>
-  <div
-      v-else
-      @click="push"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
-import { isExternal } from '@/utils/validate'
-import { useRouter } from 'vue-router'
-
-import useStore from "@/store";
-
-const {app}=useStore()
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-
-export default defineComponent({
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter()
-    const push = () => {
-      if (device.value === 'mobile' && sidebar.value.opened == true) {
-        app.closeSideBar(false)
-      }
-      router.push(props.to).catch((err) => {
-        console.log(err)
-      })
-    }
-    return {
-      push,
-      isExternal
-    }
-  }
-})
-</script>
\ No newline at end of file
diff --git a/src/layout copy/components/Sidebar/Logo.vue b/src/layout copy/components/Sidebar/Logo.vue
deleted file mode 100644
index 39c5a7e1..00000000
--- a/src/layout copy/components/Sidebar/Logo.vue	
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="sidebar-logo-container" :class="{ 'collapse': isCollapse }">
-    <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
-      </router-link>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, toRefs } from 'vue';
-
-const props = defineProps({
-  collapse: {
-    type: Boolean,
-    required: true
-  }
-})
-
-const state = reactive({
-  isCollapse: props.collapse
-})
-
-const { isCollapse } = toRefs(state)
-
-const title = ref("vue3-element-admin")
-const logo = ref("https://www.youlai.tech/files/blog/logo.png")
-
-</script>
-
-<style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
-.sidebar-logo-container {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
-  overflow: hidden;
-
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-      margin-left: 12px;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
-}
-</style>
diff --git a/src/layout copy/components/Sidebar/SidebarItem.vue b/src/layout copy/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 069fe7c2..00000000
--- a/src/layout copy/components/Sidebar/SidebarItem.vue	
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div v-if="!item.meta || !item.meta.hidden">
-    <template
-        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&(!item.meta|| !item.meta.alwaysShow)"
-    >
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
-          <template #title>
-            {{ generateTitle(onlyOneChild.meta.title ) }}
-          </template>
-        </el-menu-item>
-      </app-link>
-    </template>
-    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
-      <!-- popper-append-to-body -->
-      <template #title>
-        <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{generateTitle(item.meta.title) }}</span>
-      </template>
-
-      <sidebar-item
-          v-for="child in item.children"
-          :key="child.path"
-          :item="child"
-          :is-nest="true"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu"
-      />
-    </el-sub-menu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref} from "vue";
-import path from 'path-browserify'
-import {isExternal} from '@/utils/validate'
-import AppLink from './Link.vue'
-
-import { generateTitle } from '@/utils/i18n'
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true
-  },
-  isNest: {
-    type: Boolean,
-    required: false
-  },
-  basePath: {
-    type: String,
-    required: true
-  }
-})
-
-const onlyOneChild = ref();
-
-function hasOneShowingChild(children = [] as any, parent: any) {
-  if (!children) {
-    children = [];
-  }
-  const showingChildren = children.filter((item: any) => {
-    if (item.meta && item.meta.hidden) {
-      return false
-    } else {
-      // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = item
-      return true
-    }
-  })
-
-  // When there is only one child router, the child router is displayed by default
-  if (showingChildren.length === 1) {
-    return true
-  }
-
-  // Show parent if there are no child router to display
-  if (showingChildren.length === 0) {
-    onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
-    return true
-  }
-
-  return false
-}
-
-function resolvePath(routePath: string) {
-  if (isExternal(routePath)) {
-    return routePath
-  }
-  if (isExternal(props.basePath)) {
-    return props.basePath
-  }
-  return path.resolve(props.basePath, routePath)
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/layout copy/components/Sidebar/index.vue b/src/layout copy/components/Sidebar/index.vue
deleted file mode 100644
index 3f320d8d..00000000
--- a/src/layout copy/components/Sidebar/index.vue	
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse"/>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-          :default-active="activeMenu"
-          :collapse="isCollapse"
-          :background-color="variables.menuBg"
-          :text-color="variables.menuText"
-          :active-text-color="variables.menuActiveText"
-          :unique-opened="false"
-          :collapse-transition="false"
-          mode="vertical">
-        <sidebar-item
-            v-for="route in routes"
-            :item="route"
-            :key="route.path"
-            :base-path="route.path"
-            :is-collapse="isCollapse"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-import {computed} from "vue";
-import {useRoute} from 'vue-router'
-
-import SidebarItem from './SidebarItem.vue'
-import Logo from './Logo.vue'
-import variables from '@/styles/variables.module.scss'
-import useStore from "@/store";
-
-const {permission,setting,app} =useStore();
-
-const route =useRoute()
-const routes =computed(() => permission.routes)
-const showLogo = computed(() => setting.sidebarLogo)
-const isCollapse = computed(() => !app.sidebar.opened)
-
-const activeMenu = computed(() => {
-  const {meta, path} = route
-  // if set path, the sidebar will highlight the path you set
-  if (meta.activeMenu) {
-    return meta.activeMenu as string
-  }
-  return path
-})
-</script>
diff --git a/src/layout copy/components/TagsView/ScrollPane.vue b/src/layout copy/components/TagsView/ScrollPane.vue
deleted file mode 100644
index b00e4caa..00000000
--- a/src/layout copy/components/TagsView/ScrollPane.vue	
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <el-scrollbar
-    ref="scrollContainerRef"
-    :vertical="false"
-    class="scroll-container"
-    @wheel.prevent="handleScroll"
-  >
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  getCurrentInstance
-} from "vue";
-import { TagView } from "@/types";
-import useStore from "@/store";
-
-
-const tagAndTagSpacing = ref(4);
-const scrollContainerRef = ref(null);
-
-const { tagsView } = useStore();
-
-const visitedViews = computed(() => tagsView.visitedViews);
-
-
-const { ctx } = getCurrentInstance() as any;
-const scrollWrapper = computed(() => {
-  return (scrollContainerRef.value as any).$refs.wrap as HTMLElement;
-});
-
-onMounted(() => {
-  //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
-});
-
-onBeforeUnmount(() => {
-  // scrollWrapper.value.removeEventListener('scroll', emitScroll);
-});
-
-function handleScroll(e: WheelEvent) {
-  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
-  scrollWrapper.value.scrollLeft =
-    scrollWrapper.value.scrollLeft + eventDelta / 4;
-}
-
-function moveToTarget(currentTag: TagView) {
-  const $container = ctx.$refs.scrollContainer.$el;
-  const $containerWidth = $container.offsetWidth;
-  const $scrollWrapper = scrollWrapper.value;
-
-  let firstTag = null;
-  let lastTag = null;
-
-  // find first tag and last tag
-  if (visitedViews.value.length > 0) {
-    firstTag = visitedViews.value[0];
-    lastTag = visitedViews.value[visitedViews.value.length - 1];
-  }
-
-  if (firstTag === currentTag) {
-    $scrollWrapper.scrollLeft = 0;
-  } else if (lastTag === currentTag) {
-    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
-  } else {
-    const tagListDom = document.getElementsByClassName("tags-view-item");
-    const currentIndex = visitedViews.value.findIndex(
-      (item) => item === currentTag
-    );
-    let prevTag = null;
-    let nextTag = null;
-    for (const k in tagListDom) {
-      if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
-        if (
-          (tagListDom[k] as any).dataset.path ===
-          visitedViews.value[currentIndex - 1].path
-        ) {
-          prevTag = tagListDom[k];
-        }
-        if (
-          (tagListDom[k] as any).dataset.path ===
-          visitedViews.value[currentIndex + 1].path
-        ) {
-          nextTag = tagListDom[k];
-        }
-      }
-    }
-
-    // the tag's offsetLeft after of nextTag
-    const afterNextTagOffsetLeft =
-      (nextTag as any).offsetLeft +
-      (nextTag as any).offsetWidth +
-      tagAndTagSpacing.value;
-
-    // the tag's offsetLeft before of prevTag
-    const beforePrevTagOffsetLeft =
-      (prevTag as any).offsetLeft - tagAndTagSpacing.value;
-    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
-    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
-    }
-  }
-}
-
-defineExpose({
-  moveToTarget,
-});
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  .el-scrollbar__bar {
-    bottom: 0px;
-  }
-
-  .el-scrollbar__wrap {
-    height: 49px;
-  }
-}
-
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-</style>
diff --git a/src/layout copy/components/TagsView/index.vue b/src/layout copy/components/TagsView/index.vue
deleted file mode 100644
index 664ec722..00000000
--- a/src/layout copy/components/TagsView/index.vue	
+++ /dev/null
@@ -1,392 +0,0 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link v-for="tag in visitedViews" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)">
-        {{ generateTitle(tag.meta.title) }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)">
-          <Close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
-        </span>
-      </router-link>
-    </scroll-pane>
-    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">
-        <refresh-right style="width: 1em; height: 1em" />
-        刷新
-      </li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <close style="width: 1em; height: 1em" />
-        关闭
-      </li>
-      <li @click="closeOtherTags">
-        <circle-close style="width: 1em; height: 1em" />
-        关闭其它
-      </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
-        <back style="width: 1em; height: 1em" />
-        关闭左侧
-      </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
-        <right style="width: 1em; height: 1em" />
-        关闭右侧
-      </li>
-      <li @click="closeAllTags(selectedTag)">
-        <circle-close style="width: 1em; height: 1em" />
-        关闭所有
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts" >
-import {
-  computed,
-  getCurrentInstance,
-  nextTick,
-  ref,
-  watch,
-  onMounted,
-  ComponentInternalInstance,
-} from "vue";
-
-import path from "path-browserify";
-
-import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
-import { TagView } from "@/types";
-
-import ScrollPane from "./ScrollPane.vue";
-import {
-  Close,
-  RefreshRight,
-  CircleClose,
-  Back,
-  Right,
-} from "@element-plus/icons-vue";
-import { generateTitle } from "@/utils/i18n";
-import useStore from "@/store";
-
-const { tagsView, permission } = useStore();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance; // 获取当前组件实例
-const router = useRouter();
-const route = useRoute();
-
-const visitedViews = computed<any>(() => tagsView.visitedViews);
-const routes = computed<any>(() => permission.routes);
-
-const affixTags = ref([]);
-const visible = ref(false);
-const selectedTag = ref({});
-const scrollPaneRef = ref();
-const left = ref(0);
-const top = ref(0);
-
-watch(route, () => {
-  addTags();
-  moveToCurrentTag();
-});
-
-watch(visible, (value) => {
-  if (value) {
-    document.body.addEventListener("click", closeMenu);
-  } else {
-    document.body.removeEventListener("click", closeMenu);
-  }
-});
-
-function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
-  let tags: TagView[] = [];
-
-  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 childTags = filterAffixTags(route.children, route.path);
-      if (childTags.length >= 1) {
-        tags = tags.concat(childTags);
-      }
-    }
-  });
-  return tags;
-}
-
-function initTags() {
-  const res = filterAffixTags(routes.value) as [];
-  affixTags.value = res;
-  for (const tag of res) {
-    // Must have tag name
-    if ((tag as TagView).name) {
-      tagsView.addVisitedView(tag);
-    }
-  }
-}
-
-function addTags() {
-  if (route.name) {
-    tagsView.addView(route);
-  }
-}
-
-function moveToCurrentTag() {
-  const tags = getCurrentInstance()?.refs.tag as any[];
-  nextTick(() => {
-    if (tags === null || tags === undefined || !Array.isArray(tags)) {
-      return;
-    }
-    for (const tag of tags) {
-      if ((tag.to as TagView).path === route.path) {
-        (scrollPaneRef.value as any).value.moveToTarget(tag);
-        // when query is different then update
-        if ((tag.to as TagView).fullPath !== route.fullPath) {
-          tagsView.updateVisitedView(route);
-        }
-      }
-    }
-  });
-}
-
-function isActive(tag: TagView) {
-  return tag.path === route.path;
-}
-
-function isAffix(tag: TagView) {
-  return tag.meta && tag.meta.affix;
-}
-
-function isFirstView() {
-  try {
-    return (
-      (selectedTag.value as TagView).fullPath ===
-      visitedViews.value[1].fullPath ||
-      (selectedTag.value as TagView).fullPath === "/index"
-    );
-  } catch (err) {
-    return false;
-  }
-}
-
-function isLastView() {
-  try {
-    return (
-      (selectedTag.value as TagView).fullPath ===
-      visitedViews.value[visitedViews.value.length - 1].fullPath
-    );
-  } catch (err) {
-    return false;
-  }
-}
-
-function refreshSelectedTag(view: TagView) {
-  tagsView.delCachedView(view);
-  const { fullPath } = view;
-  nextTick(() => {
-    router.replace({ path: "/redirect" + fullPath }).catch((err) => {
-      console.warn(err);
-    });
-  });
-}
-
-function toLastView(visitedViews: TagView[], view?: any) {
-  const latestView = visitedViews.slice(-1)[0];
-  if (latestView && latestView.fullPath) {
-    router.push(latestView.fullPath);
-  } else {
-    // now the default is to redirect to the home page if there is no tags-view,
-    // you can adjust it according to your needs.
-    if (view.name === "Dashboard") {
-      // to reload home page
-      router.replace({ path: "/redirect" + view.fullPath });
-    } else {
-      router.push("/");
-    }
-  }
-}
-
-function closeSelectedTag(view: TagView) {
-  tagsView.delView(view).then((res: any) => {
-    if (isActive(view)) {
-      toLastView(res.visitedViews, view);
-    }
-  });
-}
-
-function closeLeftTags() {
-  tagsView.delLeftViews(selectedTag.value).then((res: any) => {
-    if (
-      !res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
-    ) {
-      toLastView(res.visitedViews);
-    }
-  });
-}
-function closeRightTags() {
-  tagsView.delRightViews(selectedTag.value).then((res: any) => {
-    if (
-      !res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
-    ) {
-      toLastView(res.visitedViews);
-    }
-  });
-}
-
-function closeOtherTags() {
-  tagsView.delOtherViews(selectedTag.value).then(() => {
-    moveToCurrentTag();
-  });
-}
-
-function closeAllTags(view: TagView) {
-  tagsView.delRightViews(selectedTag.value).then((res: any) => {
-    if (affixTags.value.some((tag: any) => tag.path === route.path)) {
-      return;
-    }
-    toLastView(res.visitedViews, view);
-  });
-}
-
-function openMenu(tag: TagView, e: MouseEvent) {
-  const menuMinWidth = 105;
-  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
-  const offsetWidth = proxy?.$el.offsetWidth; // container width
-  const maxLeft = offsetWidth - menuMinWidth; // left boundary
-  const l = e.clientX - offsetLeft + 15; // 15: margin right
-
-  if (l > maxLeft) {
-    left.value = maxLeft;
-  } else {
-    left.value = l;
-  }
-
-  top.value = e.clientY;
-  visible.value = true;
-  selectedTag.value = tag;
-}
-
-function closeMenu() {
-  visible.value = false;
-}
-
-function handleScroll() {
-  closeMenu();
-}
-
-onMounted(() => {
-  initTags();
-   addTags();
-});
-</script>
-
-<style lang='scss' scoped>
-.tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-
-      &:first-of-type {
-        margin-left: 15px;
-      }
-
-      &:last-of-type {
-        margin-right: 15px;
-      }
-
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-
-        &::before {
-          content: "";
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
-        }
-      }
-    }
-  }
-
-  .contextmenu {
-    margin: 0;
-    background: #fff;
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
-
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
-
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 0px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      transform-origin: 100% 50%;
-
-      &:before {
-        transform: scale(0.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
-
-      &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-        width: 12px !important;
-        height: 12px !important;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/layout copy/components/index.ts b/src/layout copy/components/index.ts
deleted file mode 100644
index 6fea3b87..00000000
--- a/src/layout copy/components/index.ts	
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Navbar } from './Navbar.vue'
-export { default as AppMain } from './AppMain.vue'
-export { default as Settings } from './Settings/index.vue'
-export { default as TagsView } from './TagsView/index.vue'
diff --git a/src/layout copy/index.vue b/src/layout copy/index.vue
deleted file mode 100644
index b177484e..00000000
--- a/src/layout copy/index.vue	
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div :class="classObj" class="app-wrapper">
-    <div
-      v-if="device === 'mobile' && sidebar.opened"
-      class="drawer-bg"
-      @click="handleClickOutside"
-    />
-    <Sidebar class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView }" class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar />
-        <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
-      <RightPanel v-if="showSettings">
-        <settings />
-      </RightPanel>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, watchEffect } from "vue";
-import { useWindowSize } from "@vueuse/core";
-import { AppMain, Navbar, Settings, TagsView } from "./components/index";
-import Sidebar from "./components/Sidebar/index.vue";
-import RightPanel from "@/components/RightPanel/index.vue";
-
-import useStore from "@/store";
-
-const { width } = useWindowSize();
-const WIDTH = 992;
-
-const { app, setting } = useStore();
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-const needTagsView = computed(() => setting.tagsView);
-const fixedHeader = computed(() => setting.fixedHeader);
-const showSettings = computed(() => setting.showSettings);
-
-const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === "mobile",
-}));
-
-watchEffect(() => {
-  if (width.value < WIDTH) {
-    app.toggleDevice("mobile");
-    app.closeSideBar(true);
-  } else {
-    app.toggleDevice("desktop");
-  }
-});
-
-function handleClickOutside() {
-  app.closeSideBar(false);
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/mixin.scss";
-@import "@/styles/variables.module.scss";
-
-.app-wrapper {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
-}
-
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
-
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
-  transition: width 0.28s;
-}
-
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
-</style>