Merge pull request #835 from flipped-aurora/pgsqlDevelop

升级element版本 修改icon

server/source/system/menu.go

@@ -17,31 +17,31 @@ func (m *menu) TableName() string {
 
 func (m *menu) Initialize() error {
 	entities := []system.SysBaseMenu{
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "dashboard", Name: "dashboard", Component: "view/dashboard/index.vue", Sort: 1, Meta: system.Meta{Title: "仪表盘", Icon: "setting"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "about", Name: "about", Component: "view/about/index.vue", Sort: 7, Meta: system.Meta{Title: "关于我们", Icon: "info"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "admin", Name: "superAdmin", Component: "view/superAdmin/index.vue", Sort: 3, Meta: system.Meta{Title: "超级管理员", Icon: "user-solid"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "authority", Name: "authority", Component: "view/superAdmin/authority/authority.vue", Sort: 1, Meta: system.Meta{Title: "角色管理", Icon: "s-custom"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "menu", Name: "menu", Component: "view/superAdmin/menu/menu.vue", Sort: 2, Meta: system.Meta{Title: "菜单管理", Icon: "s-order", KeepAlive: true}},
-		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "api", Name: "api", Component: "view/superAdmin/api/api.vue", Sort: 3, Meta: system.Meta{Title: "api管理", Icon: "s-platform", KeepAlive: true}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "dashboard", Name: "dashboard", Component: "view/dashboard/index.vue", Sort: 1, Meta: system.Meta{Title: "仪表盘", Icon: "odometer"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "about", Name: "about", Component: "view/about/index.vue", Sort: 7, Meta: system.Meta{Title: "关于我们", Icon: "info-filled"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "admin", Name: "superAdmin", Component: "view/superAdmin/index.vue", Sort: 3, Meta: system.Meta{Title: "超级管理员", Icon: "user"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "authority", Name: "authority", Component: "view/superAdmin/authority/authority.vue", Sort: 1, Meta: system.Meta{Title: "角色管理", Icon: "avatar"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "menu", Name: "menu", Component: "view/superAdmin/menu/menu.vue", Sort: 2, Meta: system.Meta{Title: "菜单管理", Icon: "tickets", KeepAlive: true}},
+		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "api", Name: "api", Component: "view/superAdmin/api/api.vue", Sort: 3, Meta: system.Meta{Title: "api管理", Icon: "platform", KeepAlive: true}},
 		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "user", Name: "user", Component: "view/superAdmin/user/user.vue", Sort: 4, Meta: system.Meta{Title: "用户管理", Icon: "coordinate"}},
-		{MenuLevel: 0, Hidden: true, ParentId: "0", Path: "person", Name: "person", Component: "view/person/person.vue", Sort: 4, Meta: system.Meta{Title: "个人信息", Icon: "message-solid"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "example", Name: "example", Component: "view/example/index.vue", Sort: 6, Meta: system.Meta{Title: "示例文件", Icon: "s-management"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "excel", Name: "excel", Component: "view/example/excel/excel.vue", Sort: 4, Meta: system.Meta{Title: "excel导入导出", Icon: "s-marketing"}},
+		{MenuLevel: 0, Hidden: true, ParentId: "0", Path: "person", Name: "person", Component: "view/person/person.vue", Sort: 4, Meta: system.Meta{Title: "个人信息", Icon: "message"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "example", Name: "example", Component: "view/example/index.vue", Sort: 6, Meta: system.Meta{Title: "示例文件", Icon: "management"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "excel", Name: "excel", Component: "view/example/excel/excel.vue", Sort: 4, Meta: system.Meta{Title: "excel导入导出", Icon: "takeaway-box"}},
 		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "upload", Name: "upload", Component: "view/example/upload/upload.vue", Sort: 5, Meta: system.Meta{Title: "媒体库（上传下载）", Icon: "upload"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "breakpoint", Name: "breakpoint", Component: "view/example/breakpoint/breakpoint.vue", Sort: 6, Meta: system.Meta{Title: "断点续传", Icon: "upload"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "customer", Name: "customer", Component: "view/example/customer/customer.vue", Sort: 7, Meta: system.Meta{Title: "客户列表（资源示例）", Icon: "s-custom"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "systemTools", Name: "systemTools", Component: "view/systemTools/index.vue", Sort: 5, Meta: system.Meta{Title: "系统工具", Icon: "s-cooperation"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "breakpoint", Name: "breakpoint", Component: "view/example/breakpoint/breakpoint.vue", Sort: 6, Meta: system.Meta{Title: "断点续传", Icon: "upload-filled"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "customer", Name: "customer", Component: "view/example/customer/customer.vue", Sort: 7, Meta: system.Meta{Title: "客户列表（资源示例）", Icon: "avatar"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "systemTools", Name: "systemTools", Component: "view/systemTools/index.vue", Sort: 5, Meta: system.Meta{Title: "系统工具", Icon: "tools"}},
 		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "autoCode", Name: "autoCode", Component: "view/systemTools/autoCode/index.vue", Sort: 1, Meta: system.Meta{Title: "代码生成器", Icon: "cpu", KeepAlive: true}},
 		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "formCreate", Name: "formCreate", Component: "view/systemTools/formCreate/index.vue", Sort: 2, Meta: system.Meta{Title: "表单生成器", Icon: "magic-stick", KeepAlive: true}},
-		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "system", Name: "system", Component: "view/systemTools/system/system.vue", Sort: 3, Meta: system.Meta{Title: "系统配置", Icon: "s-operation"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "dictionary", Name: "dictionary", Component: "view/superAdmin/dictionary/sysDictionary.vue", Sort: 5, Meta: system.Meta{Title: "字典管理", Icon: "notebook-2"}},
-		{MenuLevel: 0, Hidden: true, ParentId: "3", Path: "dictionaryDetail/:id", Name: "dictionaryDetail", Component: "view/superAdmin/dictionary/sysDictionaryDetail.vue", Sort: 1, Meta: system.Meta{Title: "字典详情", Icon: "s-order"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "operation", Name: "operation", Component: "view/superAdmin/operation/sysOperationRecord.vue", Sort: 6, Meta: system.Meta{Title: "操作历史", Icon: "time"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "system", Name: "system", Component: "view/systemTools/system/system.vue", Sort: 3, Meta: system.Meta{Title: "系统配置", Icon: "operation"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "dictionary", Name: "dictionary", Component: "view/superAdmin/dictionary/sysDictionary.vue", Sort: 5, Meta: system.Meta{Title: "字典管理", Icon: "notebook"}},
+		{MenuLevel: 0, Hidden: true, ParentId: "3", Path: "dictionaryDetail/:id", Name: "dictionaryDetail", Component: "view/superAdmin/dictionary/sysDictionaryDetail.vue", Sort: 1, Meta: system.Meta{Title: "字典详情", Icon: "order"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "3", Path: "operation", Name: "operation", Component: "view/superAdmin/operation/sysOperationRecord.vue", Sort: 6, Meta: system.Meta{Title: "操作历史", Icon: "pie-chart"}},
 		{MenuLevel: 0, Hidden: false, ParentId: "9", Path: "simpleUploader", Name: "simpleUploader", Component: "view/example/simpleUploader/simpleUploader", Sort: 6, Meta: system.Meta{Title: "断点续传（插件版）", Icon: "upload"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "https://www.gin-vue-admin.com", Name: "https://www.gin-vue-admin.com", Component: "/", Sort: 0, Meta: system.Meta{Title: "官方网站", Icon: "s-home"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "https://www.gin-vue-admin.com", Name: "https://www.gin-vue-admin.com", Component: "/", Sort: 0, Meta: system.Meta{Title: "官方网站", Icon: "home-filled"}},
 		{MenuLevel: 0, Hidden: false, ParentId: "0", Path: "state", Name: "state", Component: "view/system/state.vue", Sort: 6, Meta: system.Meta{Title: "服务器状态", Icon: "cloudy"}},
-		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "autoCodeAdmin", Name: "autoCodeAdmin", Component: "view/systemTools/autoCodeAdmin/index.vue", Sort: 1, Meta: system.Meta{Title: "自动化代码管理", Icon: "s-finance"}},
-		{MenuLevel: 0, Hidden: true, ParentId: "14", Path: "autoCodeEdit/:id", Name: "autoCodeEdit", Component: "view/systemTools/autoCode/index.vue", Sort: 0, Meta: system.Meta{Title: "自动化代码（复用）", Icon: "s-finance"}},
+		{MenuLevel: 0, Hidden: false, ParentId: "14", Path: "autoCodeAdmin", Name: "autoCodeAdmin", Component: "view/systemTools/autoCodeAdmin/index.vue", Sort: 1, Meta: system.Meta{Title: "自动化代码管理", Icon: "magic-stick"}},
+		{MenuLevel: 0, Hidden: true, ParentId: "14", Path: "autoCodeEdit/:id", Name: "autoCodeEdit", Component: "view/systemTools/autoCode/index.vue", Sort: 0, Meta: system.Meta{Title: "自动化代码（复用）", Icon: "magic-stick"}},
 	}
 	if err := global.GVA_DB.Create(&entities).Error; err != nil { // 创建 model.User 初始化数据
 		return errors.Wrap(err, m.TableName()+"表数据初始化失败!")

web/package.json

@@ -10,10 +10,11 @@
         "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
     },
     "dependencies": {
+        "@element-plus/icons": "0.0.11",
         "axios": "^0.19.2",
         "core-js": "^3.6.5",
         "echarts": "4.9.0",
-        "element-plus": "^1.1.0-beta.8",
+        "element-plus": "^1.2.0-beta.5",
         "highlight.js": "^10.6.0",
         "marked": "^2.0.0",
         "mitt": "^3.0.0",

web/src/components/chooseImg/index.vue

@@ -10,7 +10,7 @@
       >
         <template #error>
           <div class="header-img-box-list">
-            <i class="el-icon-picture-outline" />
+            <el-icon><picture /></el-icon>
           </div>
         </template>
       </el-image>

web/src/core/config.js

@@ -8,7 +8,6 @@ const config = {
   showViteLogo: true
 }
 
-
 export const viteLogo = (env) => {
   if (config.showViteLogo) {
     const chalk = require('chalk')
@@ -51,6 +50,4 @@ export const viteLogo = (env) => {
   }
 }
 
-
-
 export default config

web/src/core/global.js

@@ -1,11 +1,21 @@
 import config from './config'
 import { emitter } from '@/utils/bus.js'
 
+// 统一导入el-icon图标
+import * as ElIconModules from '@element-plus/icons'
+// 导入转换图标名称的函数
+
 const closeThisPage = () => {
   emitter.emit('closeThisPage')
 }
 
 export const register = (app) => {
+  // 统一注册el-icon图标
+  for (const iconName in ElIconModules) {
+    app.component(iconName, ElIconModules[iconName])
+  }
+
   app.config.globalProperties.$GIN_VUE_ADMIN = config
   app.config.globalProperties.$CloseThisPage = closeThisPage
 }
+

web/src/main.js

@@ -16,6 +16,7 @@ import { store } from '@/store/index'
 import App from './App.vue'
 const app = createApp(App)
 app.config.productionTip = false
+
 app.use(run)
   .use(auth)
   .use(store)

web/src/style/main.scss

@@ -847,7 +847,6 @@ li {
     }
 }
 
-// edit_container
 .edit_container {
     background-color: $white-bg;
     padding: 15px;
@@ -858,95 +857,12 @@ li {
 
 .edit {
     background-color: $white-bg;
-    padding: 15px;
     .el-button {
         margin: 15px 0;
     }
 }
 
-// .el-menu .el-menu--inline {
-//     background: #2c3b41;
-// }
-// .el-sub-menu .el-sub-menu {
-//     background-color: #000408 !important;
-// }
-// .aside .el-scrollbar .el-scrollbar__view .el-sub-menu__title:hover {
-//     background-color: $bg-aside !important;
-// }
-// .el-menu--vertical {
-//     .el-menu {
-//         margin-left: -8px;
-//         background-color: rgb(48, 65, 86);
-//         .el-menu-item {
-//             background-color: rgb(48, 65, 86);
-//         }
-//         .el-menu-item:focus,
-//         .el-menu-item:hover {
-//             background-color: #263445;
-//             color: #fff;
-//         }
-//     }
-// }
-// 导航*****
-// add 5.13
 .el-container {
-    // .admin-box {
-    //     padding: 15px;
-    //     margin: 115px 15px 20px;
-    //     border-radius: 2px;
-    //     .button-box {
-    //         border: none;
-    //         padding: 0 0 10px 0px;
-    //     }
-    //     .el-table--border {
-    //         border-radius: 4px;
-    //         margin-bottom: 15px;
-    //     }
-    //     .el-table {
-    //         thead {
-    //             color: $color-table-thead;
-    //         }
-    //         th {
-    //             padding: 5px 0;
-    //             .cell {
-    //                 min-height: 34px;
-    //                 line-height: 34px;
-    //             }
-    //         }
-    //         td {
-    //             padding: 8px 0;
-    //         }
-    //         td,
-    //         th.is-leaf {
-    //             border-bottom: 1px solid #e8e8e8;
-    //         }
-    //     }
-    //     .el-pagination {
-    //         padding: 20px 0 0 0;
-    //     }
-    //     .upload-demo,
-    //     .upload {
-    //         padding: 0;
-    //     }
-    //     .system {
-    //         padding: 0;
-    //     }
-    //     .el-form.el-form--inline {
-    //         .el-form-item:last-child {
-    //             margin-bottom: 0;
-    //         }
-    //     }
-    //     .edit_container,
-    //     .edit {
-    //         padding: 0;
-    //     }
-    // }
-    // .admin-box:after,
-    // .admin-box:before {
-    //     content: "";
-    //     display: block;
-    //     clear: both;
-    // }
     .tips {
         margin-top: 10px;
         font-size: 14px;
@@ -956,11 +872,6 @@ li {
 }
 
 .el-container.layout-cont {
-    // .header-cont,
-    // .breadcrumb {
-    //     height: 40px !important;
-    //     line-height: 40px !important;
-    // }
     .main-cont.el-main {
         background-color: $bg-main;
         .menu-total {
@@ -969,7 +880,6 @@ li {
             color: #000000;
             margin-top: 16px;
         }
-        // background-color: #f0f2f5;
     }
 }
 
@@ -1093,6 +1003,7 @@ $mainHight: 100vh;
 
 .layout-cont {
     .right-box {
+        padding-top: 16px;
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -1228,6 +1139,7 @@ $mainHight: 100vh;
     width: 120px;
     margin-right: 32px;
     text-align: center;
+    margin-top: -12px;
 }
 
 .screenfull {
@@ -1237,7 +1149,6 @@ $mainHight: 100vh;
 
 .el-dropdown {
     overflow: hidden;
-    height: 60px;
 }
 
 // dashboard

web/src/style/newLogin.scss

@@ -6,6 +6,10 @@
     width: 100%;
     height: 100%;
     position: relative;
+    .input-icon{
+        padding-right: 6px;
+        padding-top: 2px;
+    }
     .login_panle {
         position: absolute;
         top: 3vh;

web/src/view/dashboard/index.vue

@@ -9,17 +9,26 @@
             <el-row>
               <el-col :span="8" :xs="24" :sm="8">
                 <div class="flex-center">
-                  <i class="el-icon-sort icon" />今日流量 (1231231)
+                  <el-icon class="icon">
+                    <sort />
+                  </el-icon>
+                  今日流量 (1231231)
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
                 <div class="flex-center">
-                  <i class="el-icon-s-custom icon" />总用户数 (24001)
+                  <el-icon class="icon">
+                    <avatar />
+                  </el-icon>
+                  总用户数 (24001)
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
                 <div class="flex-center">
-                  <i class="el-icon-s-comment icon" />好评率 (99%)
+                  <el-icon class="icon">
+                    <comment />
+                  </el-icon>
+                  好评率 (99%)
                 </div>
               </el-col>
             </el-row>
@@ -64,7 +73,9 @@
           >
             <div class="quick-entrance-item">
               <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
-                <i :class="card.icon" :style="{ color: card.color }" />
+                <el-icon>
+                  <component :is="card.icon" :style="{ color: card.color }" />
+                </el-icon>
               </div>
               <p>{{ card.label }}</p>
             </div>
@@ -106,42 +117,42 @@ export default {
       toolCards: [
         {
           label: '用户管理',
-          icon: 'el-icon el-icon-monitor',
+          icon: 'monitor',
           name: 'user',
           color: '#ff9c6e',
           bg: 'rgba(255, 156, 110,.3)'
         },
         {
           label: '角色管理',
-          icon: 'el-icon el-icon-setting',
+          icon: 'setting',
           name: 'authority',
           color: '#69c0ff',
           bg: 'rgba(105, 192, 255,.3)'
         },
         {
           label: '菜单管理',
-          icon: 'el-icon el-icon-menu',
+          icon: 'menu',
           name: 'menu',
           color: '#b37feb',
           bg: 'rgba(179, 127, 235,.3)'
         },
         {
           label: '代码生成器',
-          icon: ' el-icon-cpu',
+          icon: 'cpu',
           name: 'autoCode',
           color: '#ffd666',
           bg: 'rgba(255, 214, 102,.3)'
         },
         {
           label: '表单生成器',
-          icon: 'el-icon-document-checked',
+          icon: 'document-checked',
           name: 'formCreate',
           color: '#ff85c0',
           bg: 'rgba(255, 133, 192,.3)'
         },
         {
           label: '关于我们',
-          icon: ' el-icon-user',
+          icon: 'user',
           name: 'about',
           color: '#5cdbd3',
           bg: 'rgba(92, 219, 211,.3)'

web/src/view/example/breakpoint/breakpoint.vue

@@ -13,7 +13,9 @@
       <div class="list">
         <transition name="list" tag="p">
           <div v-if="file" class="list-item">
-            <i class="el-icon-document" />
+            <el-icon>
+              <document />
+            </el-icon>
             <span>{{ file.name }}</span>
             <span class="percentage">{{ percentage }}%</span>
             <el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />

web/src/view/example/customer/customer.vue

@@ -3,7 +3,7 @@
     <warning-bar title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示" />
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="openDialog">新增</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -23,7 +23,7 @@
         <el-table-column align="left" label="接入人ID" prop="sysUserId" width="120" />
         <el-table-column align="left" label="按钮组" min-width="160">
           <template #default="scope">
-            <el-button size="small" type="text" icon="el-icon-edit" @click="updateCustomer(scope.row)">变更</el-button>
+            <el-button size="small" type="text" icon="edit" @click="updateCustomer(scope.row)">变更</el-button>
             <el-popover :visible="scope.row.visible" placement="top" width="160">
               <p>确定要删除吗？</p>
               <div style="text-align: right; margin-top: 8px;">
@@ -31,7 +31,7 @@
                 <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+                <el-button type="text" icon="delete" size="mini">删除</el-button>
               </template>
             </el-popover>
           </template>

web/src/view/example/excel/excel.vue

@@ -10,10 +10,10 @@
           :on-success="loadExcel"
           :show-file-list="false"
         >
-          <el-button size="mini" type="primary" icon="el-icon-upload2">导入</el-button>
+          <el-button size="mini" type="primary" icon="upload">导入</el-button>
         </el-upload>
-        <el-button class="excel-btn" size="mini" type="primary" icon="el-icon-download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
-        <el-button class="excel-btn" size="mini" type="success" icon="el-icon-download" @click="downloadExcelTemplate()">下载模板</el-button>
+        <el-button class="excel-btn" size="mini" type="primary" icon="download" @click="handleExcelExport('ExcelExport.xlsx')">导出</el-button>
+        <el-button class="excel-btn" size="mini" type="success" icon="download" @click="downloadExcelTemplate()">下载模板</el-button>
       </div>
       <el-table :data="tableData" row-key="ID">
         <el-table-column align="left" label="ID" min-width="100" prop="ID" />

web/src/view/example/upload/upload.vue

@@ -45,8 +45,8 @@
         </el-table-column>
         <el-table-column align="left" label="操作" width="160">
           <template #default="scope">
-            <el-button size="small" icon="el-icon-download" type="text" @click="downloadFile(scope.row)">下载</el-button>
-            <el-button size="small" icon="el-icon-delete" type="text" @click="deleteFile(scope.row)">删除</el-button>
+            <el-button size="small" icon="download" type="text" @click="downloadFile(scope.row)">下载</el-button>
+            <el-button size="small" icon="delete" type="text" @click="deleteFile(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>

web/src/view/iconList/index.vue

@@ -1,379 +0,0 @@
-<template>
-  <ul class="icon-list clearfix">
-    <li v-for="item in iconList" :key="item">
-      <span>
-        <i :class="item" />
-        <span class="icon-name">{{ item }}</span>
-      </span>
-    </li>
-  </ul>
-</template>
-
-<script>
-export default {
-  name: 'IconList',
-  data() {
-    return {
-      iconList: [
-        'el-icon-platform-eleme',
-        'el-icon-eleme',
-        'el-icon-delete-solid',
-        'el-icon-delete',
-        'el-icon-s-tools',
-        'el-icon-setting',
-        'el-icon-user-solid',
-        'el-icon-user',
-        'el-icon-phone',
-        'el-icon-phone-outline',
-        'el-icon-more',
-        'el-icon-more-outline',
-        'el-icon-star-on',
-        'el-icon-star-off',
-        'el-icon-s-goods',
-        'el-icon-goods',
-        'el-icon-warning',
-        'el-icon-warning-outline',
-        'el-icon-question',
-        'el-icon-info',
-        'el-icon-remove',
-        'el-icon-circle-plus',
-        'el-icon-success',
-        'el-icon-error',
-        'el-icon-zoom-in',
-        'el-icon-zoom-out',
-        'el-icon-remove-outline',
-        'el-icon-circle-plus-outline',
-        'el-icon-circle-check',
-        'el-icon-circle-close',
-        'el-icon-s-help',
-        'el-icon-help',
-        'el-icon-minus',
-        'el-icon-plus',
-        'el-icon-check',
-        'el-icon-close',
-        'el-icon-picture',
-        'el-icon-picture-outline',
-        'el-icon-picture-outline-round',
-        'el-icon-upload',
-        'el-icon-upload2',
-        'el-icon-download',
-        'el-icon-camera-solid',
-        'el-icon-camera',
-        'el-icon-video-camera-solid',
-        'el-icon-video-camera',
-        'el-icon-message-solid',
-        'el-icon-bell',
-        'el-icon-s-cooperation',
-        'el-icon-s-order',
-        'el-icon-s-platform',
-        'el-icon-s-fold',
-        'el-icon-s-unfold',
-        'el-icon-s-operation',
-        'el-icon-s-promotion',
-        'el-icon-s-home',
-        'el-icon-s-release',
-        'el-icon-s-ticket',
-        'el-icon-s-management',
-        'el-icon-s-open',
-        'el-icon-s-shop',
-        'el-icon-s-marketing',
-        'el-icon-s-flag',
-        'el-icon-s-comment',
-        'el-icon-s-finance',
-        'el-icon-s-claim',
-        'el-icon-s-custom',
-        'el-icon-s-opportunity',
-        'el-icon-s-data',
-        'el-icon-s-check',
-        'el-icon-s-grid',
-        'el-icon-menu',
-        'el-icon-share',
-        'el-icon-d-caret',
-        'el-icon-caret-left',
-        'el-icon-caret-right',
-        'el-icon-caret-bottom',
-        'el-icon-caret-top',
-        'el-icon-bottom-left',
-        'el-icon-bottom-right',
-        'el-icon-back',
-        'el-icon-right',
-        'el-icon-bottom',
-        'el-icon-top',
-        'el-icon-top-left',
-        'el-icon-top-right',
-        'el-icon-arrow-left',
-        'el-icon-arrow-right',
-        'el-icon-arrow-down',
-        'el-icon-arrow-up',
-        'el-icon-d-arrow-left',
-        'el-icon-d-arrow-right',
-        'el-icon-video-pause',
-        'el-icon-video-play',
-        'el-icon-refresh',
-        'el-icon-refresh-right',
-        'el-icon-refresh-left',
-        'el-icon-finished',
-        'el-icon-sort',
-        'el-icon-sort-up',
-        'el-icon-sort-down',
-        'el-icon-rank',
-        'el-icon-loading',
-        'el-icon-view',
-        'el-icon-c-scale-to-original',
-        'el-icon-date',
-        'el-icon-edit',
-        'el-icon-edit-outline',
-        'el-icon-folder',
-        'el-icon-folder-opened',
-        'el-icon-folder-add',
-        'el-icon-folder-remove',
-        'el-icon-folder-delete',
-        'el-icon-folder-checked',
-        'el-icon-tickets',
-        'el-icon-document-remove',
-        'el-icon-document-delete',
-        'el-icon-document-copy',
-        'el-icon-document-checked',
-        'el-icon-document',
-        'el-icon-document-add',
-        'el-icon-printer',
-        'el-icon-paperclip',
-        'el-icon-takeaway-box',
-        'el-icon-search',
-        'el-icon-monitor',
-        'el-icon-attract',
-        'el-icon-mobile',
-        'el-icon-scissors',
-        'el-icon-umbrella',
-        'el-icon-headset',
-        'el-icon-brush',
-        'el-icon-mouse',
-        'el-icon-coordinate',
-        'el-icon-magic-stick',
-        'el-icon-reading',
-        'el-icon-data-line',
-        'el-icon-data-board',
-        'el-icon-pie-chart',
-        'el-icon-data-analysis',
-        'el-icon-collection-tag',
-        'el-icon-film',
-        'el-icon-suitcase',
-        'el-icon-suitcase-1',
-        'el-icon-receiving',
-        'el-icon-collection',
-        'el-icon-files',
-        'el-icon-notebook-1',
-        'el-icon-notebook-2',
-        'el-icon-toilet-paper',
-        'el-icon-office-building',
-        'el-icon-school',
-        'el-icon-table-lamp',
-        'el-icon-house',
-        'el-icon-no-smoking',
-        'el-icon-smoking',
-        'el-icon-shopping-cart-full',
-        'el-icon-shopping-cart-1',
-        'el-icon-shopping-cart-2',
-        'el-icon-shopping-bag-1',
-        'el-icon-shopping-bag-2',
-        'el-icon-sold-out',
-        'el-icon-sell',
-        'el-icon-present',
-        'el-icon-box',
-        'el-icon-bank-card',
-        'el-icon-money',
-        'el-icon-coin',
-        'el-icon-wallet',
-        'el-icon-discount',
-        'el-icon-price-tag',
-        'el-icon-news',
-        'el-icon-guide',
-        'el-icon-male',
-        'el-icon-female',
-        'el-icon-thumb',
-        'el-icon-cpu',
-        'el-icon-link',
-        'el-icon-connection',
-        'el-icon-open',
-        'el-icon-turn-off',
-        'el-icon-set-up',
-        'el-icon-chat-round',
-        'el-icon-chat-line-round',
-        'el-icon-chat-square',
-        'el-icon-chat-dot-round',
-        'el-icon-chat-dot-square',
-        'el-icon-chat-line-square',
-        'el-icon-message',
-        'el-icon-postcard',
-        'el-icon-position',
-        'el-icon-turn-off-microphone',
-        'el-icon-microphone',
-        'el-icon-close-notification',
-        'el-icon-bangzhu',
-        'el-icon-time',
-        'el-icon-odometer',
-        'el-icon-crop',
-        'el-icon-aim',
-        'el-icon-switch-button',
-        'el-icon-full-screen',
-        'el-icon-copy-document',
-        'el-icon-mic',
-        'el-icon-stopwatch',
-        'el-icon-medal-1',
-        'el-icon-medal',
-        'el-icon-trophy',
-        'el-icon-trophy-1',
-        'el-icon-first-aid-kit',
-        'el-icon-discover',
-        'el-icon-place',
-        'el-icon-location',
-        'el-icon-location-outline',
-        'el-icon-location-information',
-        'el-icon-add-location',
-        'el-icon-delete-location',
-        'el-icon-map-location',
-        'el-icon-alarm-clock',
-        'el-icon-timer',
-        'el-icon-watch-1',
-        'el-icon-watch',
-        'el-icon-lock',
-        'el-icon-unlock',
-        'el-icon-key',
-        'el-icon-service',
-        'el-icon-mobile-phone',
-        'el-icon-bicycle',
-        'el-icon-truck',
-        'el-icon-ship',
-        'el-icon-basketball',
-        'el-icon-football',
-        'el-icon-soccer',
-        'el-icon-baseball',
-        'el-icon-wind-power',
-        'el-icon-light-rain',
-        'el-icon-lightning',
-        'el-icon-heavy-rain',
-        'el-icon-sunrise',
-        'el-icon-sunrise-1',
-        'el-icon-sunset',
-        'el-icon-sunny',
-        'el-icon-cloudy',
-        'el-icon-partly-cloudy',
-        'el-icon-cloudy-and-sunny',
-        'el-icon-moon',
-        'el-icon-moon-night',
-        'el-icon-dish',
-        'el-icon-dish-1',
-        'el-icon-food',
-        'el-icon-chicken',
-        'el-icon-fork-spoon',
-        'el-icon-knife-fork',
-        'el-icon-burger',
-        'el-icon-tableware',
-        'el-icon-sugar',
-        'el-icon-dessert',
-        'el-icon-ice-cream',
-        'el-icon-hot-water',
-        'el-icon-water-cup',
-        'el-icon-coffee-cup',
-        'el-icon-cold-drink',
-        'el-icon-goblet',
-        'el-icon-goblet-full',
-        'el-icon-goblet-square',
-        'el-icon-goblet-square-full',
-        'el-icon-refrigerator',
-        'el-icon-grape',
-        'el-icon-watermelon',
-        'el-icon-cherry',
-        'el-icon-apple',
-        'el-icon-pear',
-        'el-icon-orange',
-        'el-icon-coffee',
-        'el-icon-ice-tea',
-        'el-icon-ice-drink',
-        'el-icon-milk-tea',
-        'el-icon-potato-strips',
-        'el-icon-lollipop',
-        'el-icon-ice-cream-square',
-        'el-icon-ice-cream-round'
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.icon-list{
-  -webkit-tap-highlight-color: transparent;
-  font-family: icomoon!important;
-  font-style: normal;
-  font-weight: 400;
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  overflow: hidden;
-  list-style: none;
-  padding: 0!important;
-  border: 1px solid #eaeefb;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #5e6d82;
-  line-height: 2em;
-  li{
-    -webkit-tap-highlight-color: transparent;
-    font-family: icomoon!important;
-    font-style: normal;
-    font-weight: 400;
-    font-variant: normal;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    list-style: none;
-    float: left;
-    width: 16.66%;
-    text-align: center;
-    height: 120px;
-    line-height: 120px;
-    color: #666;
-    font-size: 13px;
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    margin-right: -1px;
-    margin-bottom: -1px;
-    span{
-      -webkit-tap-highlight-color: transparent;
-      font-style: normal;
-      font-weight: 400;
-      font-variant: normal;
-      text-transform: none;
-      -webkit-font-smoothing: antialiased;
-      list-style: none;
-      text-align: center;
-      font-size: 13px;
-      display: inline-block;
-      vertical-align: middle;
-      line-height: normal;
-      font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
-      color: #99a9bf;
-      transition: color .15s linear;
-      i{
-        -webkit-tap-highlight-color: transparent;
-        list-style: none;
-        text-align: center;
-        font-family: element-icons!important;
-        font-style: normal;
-        font-weight: 400;
-        font-variant: normal;
-        text-transform: none;
-        line-height: 1;
-        vertical-align: baseline;
-        -webkit-font-smoothing: antialiased;
-        display: block;
-        font-size: 32px;
-        margin-bottom: 15px;
-        color: #606266;
-        transition: color .15s linear;
-      }
-    }
-  }
-}
-
-</style>

web/src/view/init/index.vue

@@ -117,7 +117,7 @@ export default {
       const loading = this.$loading({
         lock: true,
         text: '正在初始化数据库，请稍候',
-        spinner: 'el-icon-loading',
+        spinner: 'loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
       try {

web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -1,7 +1,9 @@
 <template>
   <el-sub-menu ref="subMenu" :index="routerInfo.name">
     <template #title>
-      <i :class="'el-icon-'+routerInfo.meta.icon" />
+      <el-icon>
+        <component :is="routerInfo.meta.icon" />
+      </el-icon>
       <span>{{ routerInfo.meta.title }}</span>
     </template>
     <slot />

web/src/view/layout/aside/asideComponent/menuItem.vue

@@ -1,8 +1,10 @@
 <template>
   <el-menu-item :index="routerInfo.name" :route="{parameters:routerInfo.parameters}">
-    <i :class="'el-icon-'+routerInfo.meta.icon" />
+    <el-icon>
+      <component :is="routerInfo.meta.icon" />
+    </el-icon>
     <template #title>
-      <span>{{ routerInfo.meta.title }}</span>
+      <span class="gva-menu-item-title">{{ routerInfo.meta.title }}</span>
     </template>
   </el-menu-item>
 </template>
@@ -20,3 +22,8 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.gva-menu-item-title {
+  min-width: 160px;
+}
+</style>

web/src/view/layout/index.vue

@@ -23,8 +23,10 @@
                   <el-row class="pd-0">
                     <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
                       <div class="menu-total" @click="totalCollapse">
-                        <i v-if="isCollapse" class="el-icon-s-unfold" />
-                        <i v-else class="el-icon-s-fold" />
+                        <el-icon v-if="isCollapse" size="24"><expand /></el-icon>
+                        <el-icon v-else size="24">
+                          <fold />
+                        </el-icon>
                       </div>
                     </el-col>
                     <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
@@ -38,13 +40,14 @@
                     <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
                       <div class="right-box">
                         <Search />
-                        <Screenfull class="screenfull" :style="{cursor:'pointer'}" />
                         <el-dropdown>
                           <div class="dp-flex justify-content-center align-items height-full width-full">
                             <span class="header-avatar" style="cursor: pointer">
                               <CustomPic />
                               <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
-                              <i class="el-icon-arrow-down" />
+                              <el-icon>
+                                <arrow-down />
+                              </el-icon>
                             </span>
                           </div>
                           <template #dropdown>
@@ -61,8 +64,8 @@
                                   </span>
                                 </el-dropdown-item>
                               </template>
-                              <el-dropdown-item icon="el-icon-s-custom" @click="toPerson">个人信息</el-dropdown-item>
-                              <el-dropdown-item icon="el-icon-table-lamp" @click="LoginOut">登 出</el-dropdown-item>
+                              <el-dropdown-item icon="avatar" @click="toPerson">个人信息</el-dropdown-item>
+                              <el-dropdown-item icon="reading-lamp" @click="LoginOut">登 出</el-dropdown-item>
                             </el-dropdown-menu>
                           </template>
                         </el-dropdown>
@@ -96,7 +99,6 @@
 <script>
 import Aside from '@/view/layout/aside/index.vue'
 import HistoryComponent from '@/view/layout/aside/historyComponent/history.vue'
-import Screenfull from '@/view/layout/screenfull/index.vue'
 import Search from '@/view/layout/search/search.vue'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
 import { mapGetters, mapActions } from 'vuex'
@@ -109,7 +111,6 @@ export default {
   components: {
     Aside,
     HistoryComponent,
-    Screenfull,
     Search,
     BottomInfo,
     CustomPic,

web/src/view/layout/screenfull/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="click">
+  <el-icon @click="click">
     <svg
       v-if="isShow"
       t="1590133227479"
@@ -59,7 +59,7 @@
         p-id="1871"
       />
     </svg>
-  </div>
+  </el-icon>
 </template>
 
 <script>

web/src/view/layout/search/search.vue

@@ -23,13 +23,23 @@
       v-if="btnShow"
       class="user-box"
     >
-      <i class="el-icon-refresh reload" :class="[reload ? 'reloading' : '']" @click="handleReload" />
+      <el-icon class="reload" :class="[reload ? 'reloading' : '']" @click="handleReload">
+        <refresh />
+      </el-icon>
     </div>
     <div
       v-if="btnShow"
       class="user-box"
     >
-      <i class="el-icon-search search-icon" @click="showSearch()" />
+      <el-icon class="search-icon" @click="showSearch()">
+        <search />
+      </el-icon>
+    </div>
+    <div
+      v-if="btnShow"
+      class="user-box"
+    >
+      <Screenfull class="search-icon" :style="{cursor:'pointer'}" />
     </div>
   </div>
 </template>
@@ -37,9 +47,13 @@
 <script>
 import { mapGetters } from 'vuex'
 import { emitter } from '@/utils/bus.js'
+import Screenfull from '@/view/layout/screenfull/index.vue'
 
 export default {
   name: 'SearchComponent',
+  components: {
+    Screenfull
+  },
   data() {
     return {
       value: '',

web/src/view/layout/setting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawer" />
+    <el-button type="primary" class="drawer-container" icon="setting" @click="showSettingDrawer" />
     <el-drawer
       v-model="drawer"
       title="系统配置"
@@ -13,7 +13,9 @@
             <div class="theme-box">
               <div class="item" @click="changeMode('light')">
                 <div class="item-top">
-                  <i v-if="mode === 'light'" class="el-icon-check check" />
+                  <el-icon v-if="mode === 'light'" class="check">
+                    <check />
+                  </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
                 </div>
                 <p>
@@ -22,7 +24,9 @@
               </div>
               <div class="item" @click="changeMode('dark')">
                 <div class="item-top">
-                  <i v-if="mode === 'dark'" class="el-icon-check check" />
+                  <el-icon v-if="mode === 'dark'" class="check">
+                    <check />
+                  </el-icon>
                   <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
                 </div>
                 <p>

web/src/view/login/index.vue

@@ -19,7 +19,11 @@
           <el-form-item prop="username">
             <el-input v-model="loginForm.username" placeholder="请输入用户名">
               <template #suffix>
-                <i class="el-input__icon el-icon-user" />
+                <span class="input-icon">
+                  <el-icon>
+                    <user />
+                  </el-icon>
+                </span>
               </template>
             </el-input>
           </el-form-item>
@@ -30,10 +34,9 @@
               placeholder="请输入密码"
             >
               <template #suffix>
-                <i
-                  :class="'el-input__icon el-icon-' + lock"
-                  @click="changeLock"
-                />
+                <span class="input-icon">
+                  <el-icon><component :is="lock" @click="changeLock" /></el-icon>
+                </span>
               </template>
             </el-input>
           </el-form-item>
@@ -97,6 +100,9 @@ import { checkDB } from '@/api/initdb'
 import bootomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
 export default {
   name: 'Login',
+  components: {
+    bootomInfo
+  },
   data() {
     const checkUsername = (rule, value, callback) => {
       if (value.length < 5) {
@@ -133,9 +139,6 @@ export default {
       picPath: ''
     }
   },
-  components:{
-    bootomInfo
-  },
   created() {
     this.loginVerify()
   },

web/src/view/person/person.vue

@@ -6,34 +6,56 @@
           <div class="user-card">
             <div class="user-headpic-update" :style="{ 'background-image': `url(${(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg})`,'background-repeat':'no-repeat','background-size':'cover' }">
               <span class="update" @click="openChooseImg">
-                <i class="el-icon-edit" />
+                <el-icon>
+                  <edit />
+                </el-icon>
                 重新上传</span>
             </div>
             <div class="user-personality">
-              <p v-if="!editFlag" class="nickName">{{ userInfo.nickName }} <i class="el-icon-edit pointer" style="color:#66b1ff" @click="openEidt" /></p>
+              <p v-if="!editFlag" class="nickName">{{ userInfo.nickName }}
+                <el-icon class="pointer" color="#66b1ff" @click="openEidt">
+                  <edit />
+                </el-icon>
+              </p>
               <p v-if="editFlag" class="nickName">
                 <el-input v-model="nickName" />
-                <i class="el-icon-check pointer" style="color:#67c23a" @click="enterEdit" />
-                <i class="el-icon-close pointer" style="color:#f23c3c" @click="closeEdit" />
+                <el-icon class="pointer" color="#67c23a" @click="enterEdit">
+                  <check />
+                </el-icon>
+                <el-icon class="pointer" color="#f23c3c" @click="closeEdit">
+                  <close />
+                </el-icon>
               </p>
               <p class="person-info">这个家伙很懒，什么都没有留下</p>
             </div>
             <div class="user-information">
               <ul>
                 <li>
-                  <i class="el-icon-user" />{{ userInfo.nickName }}
+                  <el-icon>
+                    <user />
+                  </el-icon>
+                  {{ userInfo.nickName }}
                 </li>
                 <el-tooltip class="item" effect="light" content="北京反转极光科技有限公司-技术部-前端事业群" placement="top">
                   <li>
-                    <i class="el-icon-data-analysis" />北京反转极光科技有限公司-技术部-前端事业群
+                    <el-icon>
+                      <data-analysis />
+                    </el-icon>
+                    北京反转极光科技有限公司-技术部-前端事业群
                   </li>
                 </el-tooltip>
                 <li>
-                  <i class="el-icon-video-camera-solid" />中国·北京市·朝阳区
+                  <el-icon>
+                    <video-camera />
+                  </el-icon>
+                  中国·北京市·朝阳区
                 </li>
                 <el-tooltip class="item" effect="light" content="GoLang/JavaScript/Vue/Gorm" placement="top">
                   <li>
-                    <i class="el-icon-medal-1" />GoLang/JavaScript/Vue/Gorm
+                    <el-icon>
+                      <medal />
+                    </el-icon>
+                    GoLang/JavaScript/Vue/Gorm
                   </li>
                 </el-tooltip>
 

web/src/view/superAdmin/api/api.vue

@@ -22,14 +22,14 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
         <el-popover v-model:visible="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
           <div style="text-align: right; margin-top: 8px;">
@@ -37,7 +37,7 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button>
+            <el-button icon="delete" size="mini" :disabled="!apis.length" style="margin-left: 10px;">删除</el-button>
           </template>
         </el-popover>
       </div>
@@ -61,13 +61,13 @@
         <el-table-column align="left" fixed="right" label="操作" width="200">
           <template #default="scope">
             <el-button
-              icon="el-icon-edit"
+              icon="edit"
               size="small"
               type="text"
               @click="editApi(scope.row)"
             >编辑</el-button>
             <el-button
-              icon="el-icon-delete"
+              icon="delete"
               size="small"
               type="text"
               @click="deleteApi(scope.row)"

web/src/view/superAdmin/authority/authority.vue

@@ -3,7 +3,7 @@
     <warning-bar title="注：右上角头像下拉可切换角色" />
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addAuthority('0')">新增角色</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="addAuthority('0')">新增角色</el-button>
       </div>
       <el-table
         :data="tableData"
@@ -16,31 +16,31 @@
         <el-table-column align="left" label="操作" width="460">
           <template #default="scope">
             <el-button
-              icon="el-icon-setting"
+              icon="setting"
               size="mini"
               type="text"
               @click="opdendrawer(scope.row)"
             >设置权限</el-button>
             <el-button
-              icon="el-icon-plus"
+              icon="plus"
               size="mini"
               type="text"
               @click="addAuthority(scope.row.authorityId)"
             >新增子角色</el-button>
             <el-button
-              icon="el-icon-copy-document"
+              icon="copy-document"
               size="mini"
               type="text"
               @click="copyAuthority(scope.row)"
             >拷贝</el-button>
             <el-button
-              icon="el-icon-edit"
+              icon="edit"
               size="mini"
               type="text"
               @click="editAuthority(scope.row)"
             >编辑</el-button>
             <el-button
-              icon="el-icon-delete"
+              icon="delete"
               size="mini"
               type="text"
               @click="deleteAuth(scope.row)"

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -21,14 +21,14 @@
           <el-input v-model="searchInfo.desc" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="openDialog">新增</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -54,8 +54,8 @@
 
         <el-table-column align="left" label="按钮组">
           <template #default="scope">
-            <el-button size="mini" icon="el-icon-document" type="text" @click="toDetile(scope.row)">详情</el-button>
-            <el-button size="mini" icon="el-icon-edit" type="text" @click="updateSysDictionary(scope.row)">变更</el-button>
+            <el-button size="mini" icon="document" type="text" @click="toDetile(scope.row)">详情</el-button>
+            <el-button size="mini" icon="edit" type="text" @click="updateSysDictionary(scope.row)">变更</el-button>
             <el-popover :visible="scope.row.visible" placement="top" width="160">
               <p>确定要删除吗？</p>
               <div style="text-align: right; margin-top: 8px;">
@@ -63,7 +63,7 @@
                 <el-button type="primary" size="mini" @click="deleteSysDictionary(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <el-button type="text" icon="el-icon-delete" size="mini" style="margin-left:10px">删除</el-button>
+                <el-button type="text" icon="delete" size="mini" style="margin-left:10px">删除</el-button>
               </template>
             </el-popover>
           </template>

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -15,14 +15,14 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增字典项</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -48,7 +48,7 @@
 
         <el-table-column align="left" label="按钮组">
           <template #default="scope">
-            <el-button size="small" type="text" icon="el-icon-edit" @click="updateSysDictionaryDetail(scope.row)">变更</el-button>
+            <el-button size="small" type="text" icon="edit" @click="updateSysDictionaryDetail(scope.row)">变更</el-button>
             <el-popover :visible="scope.row.visible" placement="top" width="160">
               <p>确定要删除吗？</p>
               <div style="text-align: right; margin-top: 8px;">
@@ -56,7 +56,7 @@
                 <el-button type="primary" size="mini" @click="deleteSysDictionaryDetail(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+                <el-button type="text" icon="delete" size="mini">删除</el-button>
               </template>
             </el-popover>
           </template>

web/src/view/superAdmin/menu/menu.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addMenu('0')">新增根菜单</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
       </div>
 
       <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
@@ -25,8 +25,12 @@
         </el-table-column>
         <el-table-column align="left" label="图标" min-width="140" prop="authorityName">
           <template #default="scope">
-            <i :class="`el-icon-${scope.row.meta.icon}`" />
+            <div class="icon-column">
+              <el-icon>
+                <component :is="scope.row.meta.icon" />
+              </el-icon>
               <span>{{ scope.row.meta.icon }}</span>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="left" fixed="right" label="操作" width="300">
@@ -34,19 +38,19 @@
             <el-button
               size="mini"
               type="text"
-              icon="el-icon-plus"
+              icon="plus"
               @click="addMenu(scope.row.ID)"
             >添加子菜单</el-button>
             <el-button
               size="mini"
               type="text"
-              icon="el-icon-edit"
+              icon="edit"
               @click="editMenu(scope.row.ID)"
             >编辑</el-button>
             <el-button
               size="mini"
               type="text"
-              icon="el-icon-delete"
+              icon="delete"
               @click="deleteMenu(scope.row.ID)"
             >删除</el-button>
           </template>
@@ -134,7 +138,7 @@
         <el-button
           size="small"
           type="primary"
-          icon="el-icon-edit"
+          icon="edit"
           @click="addParameter(form)"
         >新增菜单参数</el-button>
         <el-table :data="form.parameters" style="width: 100%">
@@ -166,7 +170,7 @@
                 <el-button
                   type="danger"
                   size="small"
-                  icon="el-icon-delete"
+                  icon="delete"
                   @click="deleteParameter(form.parameters,scope.$index)"
                 >删除</el-button>
               </div>
@@ -403,4 +407,11 @@ export default {
 .warning {
   color: #dc143c;
 }
+.icon-column{
+  display: flex;
+  align-items: center;
+  .el-icon{
+    margin-right: 8px;
+  }
+}
 </style>

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -12,8 +12,8 @@
           <el-input v-model="searchInfo.status" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
-          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -27,7 +27,7 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;" :disabled="!multipleSelection.length">删除</el-button>
+            <el-button icon="delete" size="mini" style="margin-left: 10px;" :disabled="!multipleSelection.length">删除</el-button>
           </template>
         </el-popover>
       </div>
@@ -66,7 +66,9 @@
                   <pre>{{ fmtBody(scope.row.body) }}</pre>
                 </div>
                 <template #reference>
-                  <i class="el-icon-view" />
+                  <el-icon>
+                    <view />
+                  </el-icon>
                 </template>
               </el-popover>
 
@@ -82,7 +84,9 @@
                   <pre>{{ fmtBody(scope.row.resp) }}</pre>
                 </div>
                 <template #reference>
-                  <i class="el-icon-view" />
+                  <el-icon>
+                    <view />
+                  </el-icon>
                 </template>
               </el-popover>
               <span v-else>无</span>
@@ -98,7 +102,7 @@
                 <el-button size="mini" type="primary" @click="deleteSysOperationRecord(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <el-button icon="el-icon-delete" size="mini" type="text">删除</el-button>
+                <el-button icon="delete" size="mini" type="text">删除</el-button>
               </template>
             </el-popover>
           </template>

web/src/view/superAdmin/user/user.vue

@@ -3,7 +3,7 @@
     <warning-bar title="注：右上角头像下拉可切换角色" />
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="addUser">新增用户</el-button>
       </div>
       <el-table :data="tableData">
         <el-table-column align="left" label="头像" min-width="50">
@@ -15,11 +15,19 @@
         <el-table-column align="left" label="用户名" min-width="150" prop="userName" />
         <el-table-column align="left" label="昵称" min-width="100" prop="nickName">
           <template #default="scope">
-            <p v-if="!scope.row.editFlag" class="nickName">{{ scope.row.nickName }} <i class="el-icon-edit pointer" style="color:#66b1ff" @click="openEidt(scope.row)" /></p>
+            <p v-if="!scope.row.editFlag" class="nickName">{{ scope.row.nickName }}
+              <el-icon class="pointer" color="#66b1ff" @click="openEidt(scope.row)">
+                <edit />
+              </el-icon>
+            </p>
             <p v-if="scope.row.editFlag" class="nickName">
               <el-input v-model="scope.row.nickName" />
-              <i class="el-icon-check pointer" style="color:#67c23a" @click="enterEdit(scope.row)" />
-              <i class="el-icon-close pointer" style="color:#f23c3c" @click="closeEdit(scope.row)" />
+              <el-icon class="pointer" color="#67c23a" @click="enterEdit(scope.row)">
+                <check />
+              </el-icon>
+              <el-icon class="pointer" color="#f23c3c" @click="closeEdit(scope.row)">
+                <close />
+              </el-icon>
             </p>
           </template>
         </el-table-column>
@@ -46,10 +54,10 @@
                 <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
               </div>
               <template #reference>
-                <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
+                <el-button type="text" icon="delete" size="mini">删除</el-button>
               </template>
             </el-popover>
-            <el-button type="text" icon="el-icon-magic-stick" size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button type="text" icon="magic-stick" size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
           </template>
         </el-table-column>
       </el-table>

web/src/view/systemTools/autoCode/index.vue

@@ -7,7 +7,9 @@
           <template #title>
             <div :style="{fontSize:'16px',paddingLeft:'20px'}">
               点这里从现有数据库创建代码
-              <i class="header-icon el-icon-thumb" />
+              <el-icon class="header-icon ">
+                <pointer />
+              </el-icon>
             </div>
           </template>
           <el-form ref="getTableForm" style="margin-top:24px" :inline="true" :model="dbform" label-width="120px">
@@ -101,7 +103,7 @@
             <el-button
               size="mini"
               type="text"
-              icon="el-icon-edit"
+              icon="edit"
               @click="editAndAddField(scope.row)"
             >编辑</el-button>
             <el-button
@@ -123,7 +125,7 @@
                 <el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
               </div>
               <template #reference>
-                <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
+                <el-button size="mini" type="text" icon="delete">删除</el-button>
               </template>
             </el-popover>
           </template>

web/src/view/systemTools/autoCodeAdmin/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="el-icon-plus" @click="goAutoCode(null)">新增</el-button>
+        <el-button size="mini" type="primary" icon="plus" @click="goAutoCode(null)">新增</el-button>
       </div>
       <el-table :data="tableData">
         <el-table-column