feat: 重构图标选择器组件

Former-commit-id: c47cd1e04c56da514d3649c36a8d15ce890078f4

src/layout/components/Sidebar/MixNav.vue

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import {
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElMenu,
-  ElMessageBox,
-  ElTooltip
-} from 'element-plus';
-
-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';
-
-import SidebarItem from './SidebarItem.vue';
-import variables from '@/styles/variables.module.scss';
-
-import { useTagsViewStore } from '@/store/modules/tagsView';
-import { useUserStore } from '@/store/modules/user';
-import { usePermissionStore } from '@/store/modules/permission';
-
-const tagsViewStore = useTagsViewStore();
-const userStore = useUserStore();
-const permissionStore = usePermissionStore();
-
-const route = useRoute();
-const router = useRouter();
-const routes = [] as any[];
-onMounted(() => {
-  console.log('origin routes', permissionStore.routes);
-  permissionStore.routes.forEach(item => {
-    const { children, ...newItem } = item;
-    routes.push(newItem);
-  });
-  console.log('routes', routes);
-});
-
-const activeMenu = computed<string>(() => {
-  const { meta, path } = route;
-  if (meta?.activeMenu) {
-    return meta.activeMenu as string;
-  }
-  return path;
-});
-
-function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore
-      .logout()
-      .then(() => {
-        tagsViewStore.delAllViews();
-      })
-      .then(() => {
-        router.push(`/login?redirect=${route.fullPath}`);
-      });
-  });
-}
-</script>
-
-<template>
-  <div class="horizontal-header">
-    <el-menu
-      class="horizontal-header-menu"
-      :default-active="activeMenu"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      mode="horizontal"
-    >
-      <sidebar-item
-        v-for="route in routes"
-        :item="route"
-        :key="route.path"
-        :base-path="route.path"
-      />
-    </el-menu>
-
-    <div class="horizontal-header-right">
-      <!--全屏 -->
-      <screenfull id="screenfull" />
-
-      <!-- 布局大小 -->
-      <el-tooltip content="布局大小" effect="dark" placement="bottom">
-        <size-select />
-      </el-tooltip>
-
-      <!--语言选择-->
-      <lang-select />
-
-      <el-dropdown trigger="click">
-        <div class="flex justify-center items-center pr-[20px]">
-          <img
-            :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
-            class="w-[40px] h-[40px] rounded-lg"
-          />
-          <CaretBottom class="w-3 h-3" />
-        </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>
-
-<style lang="scss" scoped>
-.horizontal-header {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-around;
-  background: #001529;
-
-  &-menu {
-    height: 100%;
-    width: 100%;
-    border: none;
-    background-color: transparent;
-  }
-
-  &-right {
-    display: flex;
-    min-width: 340px;
-    align-items: center;
-    justify-content: flex-end;
-    color: #fff;
-  }
-}
-</style>