Merge pull request #585 from TaleLin/refactor/element-plus-icon-support

refactor: 修改sitebar配置,以支持兼容使用element-plus-icon

Author: smileShirmy

package-lock.json

@@ -14,11 +14,12 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
+    "@element-plus/icons-vue": "^2.1.0",
     "@tinymce/tinymce-vue": "^4.0.0",
     "axios": "^0.24.0",
     "core-js": "^3.23.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^2.1.4",
+    "element-plus": "^2.3.8",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
@@ -33,7 +34,8 @@
     "vue-picture-cropper": "^0.1.9",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2",
-    "vuex-persist": "^2.0.1"
+    "vuex-persist": "^2.0.1",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",

package.json

@@ -8,7 +8,7 @@
 
 <script>
 import { ElConfigProvider } from 'element-plus'
-import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 export default {
   components: {

src/app.vue

@@ -2,16 +2,26 @@
   <!--el-submenu改名为el-sub-menu-->
   <el-sub-menu v-if="item.children?.length > 0" :index="item.path" popper-append-to-body>
     <template #title>
-      <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
-      <img v-else :src="item.icon" class="img-icon" />
+      <el-icon v-if="item.isElementIcon" size="16">
+        <component :is="item.icon"></component>
+      </el-icon>
+      <div v-else>
+        <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+        <img v-else :src="item.icon" alt="icon" class="img-icon" />
+      </div>
       <span>{{ item.title }}</span>
     </template>
     <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
   </el-sub-menu>
 
   <el-menu-item v-else :index="item.path" @click="navigateTo(item.path)">
-    <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
-    <img v-else :src="item.icon" class="img-icon" />
+    <el-icon v-if="item.isElementIcon" size="16">
+      <component :is="item.icon"></component>
+    </el-icon>
+    <div v-else>
+      <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+      <img v-else :src="item.icon" alt="icon" class="img-icon" />
+    </div>
     <template #title
       ><span class="title">{{ item.title }}</span></template
     >