refactor:icon

src/components.d.ts

@@ -14,17 +14,15 @@ declare module 'vue' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElIcon: typeof import('./components/ElIcon.vue')['default']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('./components/ElSelect.vue')['default']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    XIcon: typeof import('./components/XIcon.vue')['default']
   }
 }
 

src/components/ElIcon.vue

@@ -0,0 +1,58 @@
+<template>
+    <template v-if="name">
+        <svg v-if="svg" class="x-icon" aria-hidden="true">
+            <use :href="symbolId" :fill="color" />
+        </svg>
+        <i v-else-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
+        <ElIcon v-else class="x-icon">
+            <component :is="icons[name]" />
+        </ElIcon>
+    </template>
+</template>
+<script setup>
+    import * as icons from '@element-plus/icons';
+    import { ElIcon } from 'element-plus/es/components/icon/index';
+    const props = defineProps({
+        // 图标名称
+        name: {
+            type: String,
+            default: '',
+        },
+        // 图标尺寸
+        size: {
+            type: [String, Number],
+            default: 14,
+        },
+        // 是否为自定义SVG图标
+        svg: {
+            type: Boolean,
+            default: false,
+        },
+        // 图标颜色
+        color: {
+            type: String,
+            default: 'inherit',
+        },
+    });
+    // 自定义SVG唯一标识
+    const symbolId = computed(() => `#icon-${props.name}`);
+    // 补全图标尺寸
+    const size = computed(() => (Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'));
+    // 判断是remix图标还是element-plus图标
+    const isRemix = computed(() => !Object.keys(icons).includes(props.name));
+</script>
+
+<style lang="less" scoped>
+    .x-icon {
+        font-size: v-bind(size);
+        color: v-bind(color);
+        line-height: 1;
+        vertical-align: middle;
+        position: relative;
+        top: 1px;
+    }
+    svg.x-icon {
+        width: v-bind(size);
+        height: v-bind(size);
+    }
+</style>

src/components/ElSelect.vue

@@ -0,0 +1,9 @@
+<template>
+    1
+    <component :is="ElSelect" />
+</template>
+<script setup>
+    import { ElSelect } from 'element-plus/es/components/select/index';
+</script>
+
+<style lang="less" scoped></style>

src/components/XIcon.vue

@@ -1,71 +0,0 @@
-<template>
-    <template v-if="name">
-        <svg v-if="svg" class="x-icon" aria-hidden="true">
-            <use :href="symbolId" :fill="color" />
-        </svg>
-        <i v-else-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
-        <el-icon v-else class="x-icon">
-            <component :is="icons[name]" />
-        </el-icon>
-    </template>
-</template>
-<script>
-    import * as icons from '@element-plus/icons';
-    export default defineComponent({
-        name: 'XIcon',
-        props: {
-            // 图标名称
-            name: {
-                type: String,
-                default: '',
-            },
-            // 图标尺寸
-            size: {
-                type: [String, Number],
-                default: 14,
-            },
-            // 是否为自定义SVG图标
-            svg: {
-                type: Boolean,
-                default: false,
-            },
-            // 图标颜色
-            color: {
-                type: String,
-                default: 'inherit',
-            },
-        },
-        setup(props) {
-            // 自定义SVG唯一标识
-            const symbolId = computed(() => `#icon-${props.name}`);
-            // 补全图标尺寸
-            const size = computed(() =>
-                Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'
-            );
-            // 判断是remix图标还是element-plus图标
-            const isRemix = computed(() => !Object.keys(icons).includes(props.name));
-            return {
-                symbolId,
-                size,
-                color: props.color,
-                isRemix,
-                icons,
-            };
-        },
-    });
-</script>
-
-<style lang="less" scoped>
-    .x-icon {
-        font-size: v-bind(size);
-        color: v-bind(color);
-        line-height: 1;
-        vertical-align: middle;
-        position: relative;
-        top: 1px;
-    }
-    svg.x-icon {
-        width: v-bind(size);
-        height: v-bind(size);
-    }
-</style>

src/layouts/components/aside.vue

@@ -2,7 +2,7 @@
     <el-scrollbar class="layout-aside">
         <el-menu collapse :default-active="activeAside">
             <el-menu-item v-for="(item, index) in asideList" :key="index" :index="item.name" @click="handleClick(item)">
-                <XIcon :name="item.meta.icon" size="30" />
+                <el-icon :name="item.meta.icon" size="30" />
                 <p>{{ item.meta.title }}</p>
             </el-menu-item>
         </el-menu>

src/layouts/components/header.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="layout-header">
         <div class="header-left">
-            <XIcon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
+            <el-icon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
             <LayoutBreakcrumb />
         </div>
         <div class="header-right">

src/layouts/components/logo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="layout-logo">
-        <XIcon name="msb" svg :size="size" />
+        <el-icon name="msb" svg :size="size" />
     </div>
 </template>
 

src/layouts/components/menu-item.vue

@@ -1,11 +1,11 @@
 <template>
     <el-menu-item v-if="!menuItem.children?.length" :index="props.menuItem.name" :route="{ name: props.menuItem.name }">
-        <XIcon :name="props.menuItem.meta.icon" size="20" />
+        <el-icon :name="props.menuItem.meta.icon" size="20" />
         <p>{{ props.menuItem.meta.title }}</p>
     </el-menu-item>
     <el-sub-menu v-else :index="props.menuItem.name">
         <template #title>
-            <XIcon :name="props.menuItem.meta.icon" size="20" />
+            <el-icon :name="props.menuItem.meta.icon" size="20" />
             <p>{{ props.menuItem.meta.title }}</p>
         </template>
         <MenuItem v-for="(item, index) in menuItem.children" :key="index" :menu-item="item" />

src/layouts/components/menu.vue

@@ -13,6 +13,7 @@
     const router = useRouter();
     const store = useStore();
     const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
+    const activeAside = computed(() => store.state.layout.activeAside);
     const menuList = computed(() => store.state.layout.menuList);
     const activeMenu = computed(() => store.state.layout.activeMenu);
     const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
@@ -20,6 +21,21 @@
         // TODO 支持外链
         router.push({ name: index });
     };
+    // 菜单栏收起时自动跳转
+    watch(
+        () => unref(menuList),
+        (value) => {
+            if (value.length === 1) {
+                handleSelect(value[0].name);
+            } else if (value.length === 0) {
+                handleSelect(unref(activeAside));
+            }
+        },
+        {
+            immediate: true,
+            deep: true,
+        }
+    );
 </script>
 
 <style lang="less" scoped>

src/layouts/components/operation.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="layout-operation">
         <el-button type="text" @click="handleFullscreen">
-            <XIcon :name="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
+            <el-icon :name="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
         </el-button>
     </div>
 </template>

src/layouts/components/profile.vue

@@ -4,7 +4,7 @@
         <el-dropdown size="middle" @command="handleCommand">
             <span class="el-dropdown-link">
                 <span>{{ userInfo?.nickname || userInfo?.username }}</span>
-                <XIcon class="el-icon--right" name="ArrowDown" />
+                <el-icon class="el-icon--right" name="ArrowDown" />
             </span>
             <template #dropdown>
                 <el-dropdown-menu>

src/layouts/components/tabs.vue

@@ -3,9 +3,9 @@
         <el-tabs :modelValue="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
             <el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.name">
                 <template #label>
-                    <XIcon class="tab-icon" :name="item.meta.icon" />
+                    <el-icon class="tab-icon" :name="item.meta.icon" />
                     <span>{{ item.meta.title }}</span>
-                    <XIcon
+                    <el-icon
                         v-if="tabList.length > 1"
                         class="tab-close"
                         name="close-fill"
@@ -17,7 +17,7 @@
         <div class="operation">
             <el-dropdown trigger="hover" @command="handleCommand">
                 <span class="el-dropdown-link">
-                    <XIcon name="apps-fill" />
+                    <el-icon name="apps-fill" />
                 </span>
                 <template #dropdown>
                     <el-dropdown-menu>

src/store/modules/auth.js

@@ -25,7 +25,10 @@ const mutations = {
                     },
                 };
                 if (!route.path.startsWith('/')) {
-                    route.path = parent.path + '/' + route.path;
+                    if (!parent.path.endsWith('/')) {
+                        parent.path += '/';
+                    }
+                    route.path = parent.path + route.path;
                 }
                 route.meta.menu = route.path.replaceAll(/\/:[^?]+\?/g, '');
                 let activeMenu = route.meta.activeMenu;

src/views/home/index.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="container">
+        <el-select></el-select>
         <h1>{{ $route.name }}</h1>
         <h1>TOKEN:{{ token }}</h1>
         <h2>{{ userInfo }}</h2>
         <h4>{{ permission }}</h4>
         <h1>
-            <XIcon name="app-store" size="30" />
+            <el-icon name="app-store" size="30" />
             <span>马士兵严选</span>
-            <XIcon name="msb" svg size="30"></XIcon>
-            <XIcon name="vue" svg color="red" size="30" />
+            <el-icon name="msb" svg size="30"></el-icon>
+            <el-icon name="vue" svg color="red" size="30" />
+            <el-icon name="Avatar" color="red" size="30" />
         </h1>
         <p>count:{{ count }}, double count:{{ doubleCount }}</p>
         <el-button type="primary" @click="handleAdd">增加</el-button>