From ba8dca9e4792ebdec2953fe10c9a721927603712 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Tue, 26 Apr 2022 11:24:16 +0800
Subject: [PATCH] =?UTF-8?q?svgicon=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9Eele?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconSelect/index.vue           | 59 ++++++++++++-------
 src/components/SvgIcon/index.vue              | 18 +++++-
 src/layout/components/Sidebar/SidebarItem.vue |  3 +-
 src/views/index.vue                           |  6 +-
 src/views/index_v1.vue                        |  4 +-
 5 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 3ba8cbd..e1e5bcd 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="icon-body">
-    <el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
+    <el-input v-model="iconName" style="position: relative" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
       <template #prefix>
         <el-icon class="el-input__icon">
           <search />
@@ -15,20 +15,32 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="svg-icon" name="1">
         <div class="icon-list">
-          <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-            <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
-            <span>{{ item }}</span>
+          <div class="icon-item mb10" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+            <svg-icon :icon-class="item" style="height: 30px; width: 16px" />
+            <div class="name">{{ item }}</div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons" name="2">
+        <div class="icon-list">
+          <div class="icon-item mb10" v-for="item of elementIcons" :key="item" @click="selectedIcon(item, 'ele-')">
+            <svg-icon :icon-class="'ele-' + item" style="height: 30px; width: 16px" />
+            <div class="name">{{ item }}</div>
           </div>
         </div>
       </el-tab-pane>
     </el-tabs>
-
   </div>
 </template>
 
 <script setup>
 import icons from './requireIcons'
+import * as elIcons from '@element-plus/icons-vue'
 
+const elementIcons = ref([])
+for (const key in elIcons) {
+  elementIcons.value.push(key)
+}
 const iconName = ref('')
 const iconList = ref(icons)
 const activeName = ref('1')
@@ -41,8 +53,8 @@ function filterIcons() {
   }
 }
 
-function selectedIcon(name) {
-  emit('selected', name)
+function selectedIcon(name, prefix) {
+  emit('selected', prefix != undefined ? prefix + name : name)
   document.body.click()
 }
 
@@ -56,27 +68,32 @@ defineExpose({
 })
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .icon-body {
   width: 100%;
   padding: 10px;
   .icon-list {
-    height: 200px;
     overflow-y: scroll;
-    div {
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: -5px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    height: 200px;
+
+    .icon-item {
+      // height: 30px;
+      // line-height: 30px;
+      // margin-bottom: -5px;
       cursor: pointer;
-      width: 33%;
-      float: left;
+      width: 19%;
+      text-align: center;
+      // float: left;
     }
-    span {
-      display: inline-block;
-      vertical-align: -0.15em;
-      fill: currentColor;
-      overflow: hidden;
+    .name {
+      // display: inline-block;
+      // vertical-align: -0.15em;
+      // fill: currentColor;
+      // overflow: hidden;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 2111e5a..b6f8272 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,7 +1,8 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true">
+  <svg :class="svgClass" aria-hidden="true" v-if="iconType == 0">
     <use :xlink:href="iconName" :fill="color" />
   </svg>
+  <el-icon v-else><component :is="iconName" /></el-icon>
 </template>
 
 <script>
@@ -22,7 +23,20 @@ export default defineComponent({
   },
   setup(props) {
     return {
-      iconName: computed(() => `#icon-${props.iconClass}`),
+      iconType: computed(() => {
+        if (props.iconClass.startsWith('ele')) {
+          return 1
+        } else {
+          return 0
+        }
+      }),
+      iconName: computed(() => {
+        if (props.iconClass?.startsWith('ele-')) {
+          return props.iconClass.replace('ele-', '')
+        } else {
+          return `#icon-${props.iconClass}`
+        }
+      }),
       svgClass: computed(() => {
         if (props.className) {
           return `svg-icon ${props.className}`
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 1bed323..6838f61 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -17,8 +17,7 @@
         <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
-      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)"
-        class="nest-menu" />
+      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
     </el-sub-menu>
   </div>
 </template>
diff --git a/src/views/index.vue b/src/views/index.vue
index b463975..cfe814a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -96,10 +96,12 @@
           <ul>
             <li>Vue3</li>
             <li>Vuex</li>
-            <li>Element-ui</li>
+            <li>Element plus</li>
             <li>Axios</li>
             <li>Sass</li>
-            <li>Quill</li>
+            <li>Wangeditor</li>
+						<li>Vite</li>
+						<li>Composition api</li>
             <li>...</li>
           </ul>
         </el-col>
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 4187a2e..1b4bb1d 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -18,11 +18,11 @@
                   {{ userInfo.welcomeMessage + ',' + userInfo.nickName + ' ,' + userInfo.welcomeContent }}
                 </el-col>
                 <el-col :xs="24" :sm="24" :md="24">
-                  <el-col :xs="24" :md="8" class="right-l-v">
+                  <el-col :xs="24" :lg="8" class="right-l-v">
                     <div class="right-label">昵称：</div>
                     <div class="right-value">{{ userInfo.nickName }}</div>
                   </el-col>
-                  <el-col :xs="24" :md="16" class="right-l-v">
+                  <el-col :xs="24" :lg="16" class="right-l-v">
                     <div class="right-label">身份：</div>
                     <div class="right-value">
                       <span v-for="item in userInfo.roles" :key="item.roleId">