修复侧栏图标，统一icon，升级依赖

admin/package.json

@@ -15,30 +15,30 @@
         "@highlightjs/vue-plugin": "^2.1.0",
         "@logicflow/core": "^1.2.18",
         "@logicflow/extension": "^1.2.19",
-        "@vue/shared": "^3.3.9",
-        "@vueuse/core": "^10.6.1",
+        "@vue/shared": "^3.3.13",
+        "@vueuse/core": "^10.7.1",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
-        "axios": "^1.6.2",
+        "axios": "^1.6.3",
         "consola": "^3.2.3",
         "crypto-js": "^4.2.0",
         "css-color-function": "^1.3.3",
         "echarts": "^5.4.3",
-        "element-plus": "^2.4.3",
+        "element-plus": "^2.4.4",
         "highlight.js": "^11.9.0",
         "lodash-es": "^4.17.21",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "vform3-builds": "^3.0.10",
-        "vue": "^3.3.9",
+        "vue": "^3.3.13",
         "vue-clipboard3": "^2.0.0",
-        "vue-echarts": "^6.6.1",
+        "vue-echarts": "^6.6.8",
         "vue-router": "^4.2.5",
         "vue3-video-play": "^1.3.2",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@rushstack/eslint-patch": "^1.6.0",
+        "@rushstack/eslint-patch": "^1.6.1",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^20.10.1",
         "@types/nprogress": "^0.2.3",
@@ -48,22 +48,22 @@
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/tsconfig": "^0.4.0",
         "autoprefixer": "^10.4.16",
-        "eslint": "^8.54.0",
+        "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.19.0",
         "execa": "^8.0.1",
         "fs-extra": "^11.2.0",
-        "postcss": "^8.4.31",
-        "prettier": "^3.1.0",
+        "postcss": "^8.4.32",
+        "prettier": "^3.1.1",
         "rollup-plugin-visualizer": "^5.9.3",
         "sass": "^1.69.5",
-        "tailwindcss": "^3.3.5",
-        "typescript": "~5.3.2",
-        "unplugin-auto-import": "^0.17.1",
-        "unplugin-vue-components": "^0.25.2",
+        "tailwindcss": "^3.4.0",
+        "typescript": "~5.3.3",
+        "unplugin-auto-import": "^0.17.3",
+        "unplugin-vue-components": "^0.26.0",
         "vite": "^4.5.0",
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-style-import": "^2.0.0",
         "vite-plugin-svg-icons": "^2.0.1",
-        "vue-tsc": "^1.8.24"
+        "vue-tsc": "^1.8.27"
     }
 }

admin/src/components/icon/index.vue

@@ -1,22 +1,17 @@
 <template>
-    <span style="display: inline-block; line-height: 1">
-        <span
-            v-if="isElIcon"
-            class="svg-icon-container"
-            :style="{ height: size ? size + 'px' : 'auto', color: color }"
-        >
-            <!-- <ElIcon v-if="isElIcon" :size="size" :color="color"> -->
+    <div class="svg-icon-container">
+        <ElIcon v-if="isElIcon" :size="size" :color="color">
             <component :is="name" style="width: 1em; height: 1em"></component>
-            <!-- </ElIcon> -->
-        </span>
+        </ElIcon>
+        <!-- </span> -->
         <ISvgIcon
-            v-if="isLocalIcon"
+            v-else-if="isLocalIcon"
             class="local-icon"
             :size="size"
             :color="color"
             :name="name"
         ></ISvgIcon>
-    </span>
+    </div>
 </template>
 <script lang="ts">
 // import { ElIcon } from 'element-plus'
@@ -62,15 +57,5 @@ export default defineComponent({
 <style>
 .svg-icon-container {
     display: inline-block;
-    line-height: 1;
-    overflow: hidden;
-    /* vertical-align: middle; */
-    /* height: auto; */
-    /* width: 1em;
-    */
-}
-.local-icon {
-    display: inline-block;
-    /* margin: 0 8px; */
 }
 </style>

admin/src/components/icon/svg-icon.vue

@@ -1,7 +1,9 @@
 <template>
-    <svg aria-hidden="true" :style="styles">
-        <use :xlink:href="symbolId" fill="currentColor" />
-    </svg>
+    <i class="el-icon" :style="styles">
+        <svg aria-hidden="true" style="width: 1em; height: 1em">
+            <use :xlink:href="symbolId" fill="currentColor" />
+        </svg>
+    </i>
 </template>
 
 <script lang="ts">
@@ -28,8 +30,7 @@ export default defineComponent({
         const symbolId = computed(() => `#${props.name}`)
         const styles = computed<CSSProperties>(() => {
             return {
-                width: addUnit(props.size),
-                height: addUnit(props.size),
+                fontSize: addUnit(props.size),
                 color: props.color
             }
         })

admin/src/layout/default/components/sidebar/menu-item.vue

@@ -2,12 +2,7 @@
     <template v-if="!route.meta?.hidden">
         <app-link v-if="!hasShowChild" :to="`${routePath}?${queryStr}`">
             <el-menu-item :index="routePath">
-                <Icon
-                    class="menu-item-icon"
-                    :size="16"
-                    v-if="routeMeta?.icon"
-                    :name="routeMeta?.icon"
-                />
+                <Icon :size="16" v-if="routeMeta?.icon" :name="routeMeta?.icon" />
                 <template #title>
                     <span>{{ routeMeta?.title }}</span>
                 </template>
@@ -15,14 +10,7 @@
         </app-link>
         <el-sub-menu v-else :index="routePath" :popper-class="props.popperClass">
             <template #title>
-                <!-- {{ routeMeta }} -->
-
-                <Icon
-                    class="menu-item-icon"
-                    :size="16"
-                    v-if="routeMeta?.icon"
-                    :name="routeMeta?.icon"
-                />
+                <Icon :size="16" v-if="routeMeta?.icon" :name="routeMeta?.icon" />
                 <span>{{ routeMeta?.title }}</span>
             </template>
             <menu-item
@@ -78,14 +66,4 @@ const queryStr = computed<string>(() => {
     }
 })
 </script>
-<style lang="scss" scoped>
-.el-menu-item,
-.el-sub-menu__title {
-    .menu-item-icon {
-        margin-right: 8px;
-        width: var(--el-menu-icon-width);
-        text-align: center;
-        vertical-align: middle;
-    }
-}
-</style>
+<style lang="scss" scoped></style>