From 1ff7f5dec5bf297a1489d97e7b6057bf9f1cff3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Sun, 15 Jan 2023 13:50:58 +0800
Subject: [PATCH] =?UTF-8?q?element-plus=20=E7=89=88=E6=9C=AC=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/menu.ts                |  6 +--
 src/static/common.less            |  4 +-
 src/views/Home.vue                |  8 +--
 src/views/api/Hitokoto.vue        | 16 +++---
 src/views/api/Music.vue           | 87 +++++++++++++++++--------------
 src/views/api/PhotoWall.vue       | 26 ++++-----
 src/views/api/SourceImage.vue     | 10 ++--
 src/views/system/Article.vue      | 49 +++++++++--------
 src/views/system/SystemConfig.vue | 12 ++---
 src/views/system/SystemRole.vue   | 18 +++----
 src/views/system/SystemUser.vue   | 12 ++---
 src/views/tool/SqlReplace.vue     |  2 +-
 12 files changed, 132 insertions(+), 118 deletions(-)

diff --git a/src/config/menu.ts b/src/config/menu.ts
index 8e70a86..de8cc18 100644
--- a/src/config/menu.ts
+++ b/src/config/menu.ts
@@ -2,7 +2,7 @@ export default [
   {
     name: 'system',
     title: '系统管理',
-    icon: 'el-icon-s-operation',
+    icon: 'Operation',
     child: [
       { title: '系统配置', path: '/system/config' },
       { title: '用户管理', path: '/system/user' },
@@ -13,7 +13,7 @@ export default [
   },{
     name: 'api',
     title: 'API数据',
-    icon: 'el-icon-s-data',
+    icon: 'Histogram',
     child: [
       { title: '一言', path: '/api/hitokoto' },
       { title: '照片墙', path: '/api/photoWall' },
@@ -23,7 +23,7 @@ export default [
   },{
     name: 'tool',
     title: '工具',
-    icon: 'el-icon-s-tools',
+    icon: 'Tools',
     child: [
       { title: 'SQL占位符替换', path: '/tool/sqlReplace' }
     ]
diff --git a/src/static/common.less b/src/static/common.less
index b958aa5..235665a 100644
--- a/src/static/common.less
+++ b/src/static/common.less
@@ -7,6 +7,7 @@ html,body,#app,.layout {
 .layout-header{
   color: #fff;
   background-color: #515a6e;
+  position: relative;
   div.main-title {
     display: inline-block;
     font-size: 22px;
@@ -16,7 +17,8 @@ html,body,#app,.layout {
     display: inline-block;
     position: absolute;
     right: 20px;
-    top: 9px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 }
 .layout-main {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5d31f76..1c43968 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,10 +4,10 @@
       <div class="main-title">博客API管理后台</div>
       <div class="nav-btns-right">
         <el-dropdown @command="dropdownMenuCommand">
-          <el-button type="text">
-            <i class="el-icon-user-solid"></i>
+          <el-button link type="primary">
+            <UserFilled />
             {{ realname }}
-            <i class="el-icon-arrow-down el-icon--right"></i>
+            <ArrowDown />
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
@@ -24,7 +24,7 @@
         <el-menu :default-active="activeMenuItem" :default-openeds="openMenuNames" style="height: 100%;">
           <el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name">
             <template #title>
-              <i :class="menu.icon"></i>
+              <component :is="menu.icon" style="width: 18px; margin-right: 5px;"></component>
               <span>{{menu.title}}</span>
             </template>
             <el-menu-item v-for="(subItem,subIndex) in menu.child" :key="subIndex" :index="subItem.path" @click="openMenu(subItem.path)">
diff --git a/src/views/api/Hitokoto.vue b/src/views/api/Hitokoto.vue
index 99a5ceb..b170f8f 100644
--- a/src/views/api/Hitokoto.vue
+++ b/src/views/api/Hitokoto.vue
@@ -2,15 +2,15 @@
 <div>
   <el-form inline :model="search">
     <el-form-item label="内容">
-      <el-input size="small" v-model="search.content" />
+      <el-input v-model="search.content" />
     </el-form-item>
     <el-form-item label="类型">
-      <el-select size="small" v-model="search.type" multiple collapse-tags>
+      <el-select v-model="search.type" multiple collapse-tags>
         <el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label" />
       </el-select>
     </el-form-item>
     <el-form-item label="创建时间">
-      <el-date-picker size="small"
+      <el-date-picker
         v-model="search.createdAt"
         type="daterange"
         range-separator="至"
@@ -19,15 +19,15 @@
     </el-form-item>
   </el-form>
   <div class="btn-container">
-    <el-button size="small" type="primary" @click="addModal = true">添加</el-button>
-    <el-button size="small" type="danger" @click="deleteAll">删除</el-button>
+    <el-button type="primary" @click="addModal = true">添加</el-button>
+    <el-button type="danger" @click="deleteAll">删除</el-button>
     <div class="search-btn">
-      <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
   <div class="table-container">
-    <el-table :data="hitokotoData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
+    <el-table :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="type" label="类型" width="180">
         <template #default="scope">
diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index 5e9cc7a..7f6bd1e 100644
--- a/src/views/api/Music.vue
+++ b/src/views/api/Music.vue
@@ -2,38 +2,38 @@
 <div>
   <el-form inline :model="search">
     <el-form-item label="名称">
-      <el-input size="small" v-model="search.name" />
+      <el-input v-model="search.name" />
     </el-form-item>
     <el-form-item label="所属歌单">
-      <el-select size="small" v-model="search.lib_id" multiple collapse-tags>
+      <el-select v-model="search.lib_id" multiple collapse-tags>
         <el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
       </el-select>
     </el-form-item>
     <el-form-item label="文件类型">
-      <el-select size="small" v-model="search.ext" multiple >
+      <el-select v-model="search.ext" multiple >
         <el-option v-for="ext in exts" :key="ext" :value="ext" :label="ext" />
       </el-select>
     </el-form-item>
     <el-form-item label="标题">
-      <el-input size="small" v-model="search.title" />
+      <el-input v-model="search.title" />
     </el-form-item>
     <el-form-item label="唱片集">
-      <el-input size="small" v-model="search.album" />
+      <el-input v-model="search.album" />
     </el-form-item>
     <el-form-item label="艺术家">
-      <el-input size="small" v-model="search.artist" />
+      <el-input v-model="search.artist" />
     </el-form-item>
   </el-form>
   <div class="btn-container">
-    <el-button type="success" plain size="small" icon="el-icon-caret-right" @click="playMusic">播放</el-button>
-    <el-button type="primary" size="small" icon="el-icon-upload" @click="openUploadModal">上传音乐</el-button>
+    <el-button type="success" plain icon="VideoPlay" @click="playMusic">播放</el-button>
+    <el-button type="primary" icon="Upload" @click="openUploadModal">上传音乐</el-button>
     <div class="search-btn">
-      <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
   <div class="table-container">
-    <el-table :data="musicData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
+    <el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
       <el-table-column prop="ext" label="类型" width="100" />
@@ -48,19 +48,15 @@
       <el-table-column prop="lib_id" label="所属歌单" >
         <template #default="scope">
           <template v-if="scope.row.isEditing && currentRow">
-            <el-select v-model="currentRow.lib_id" size="mini">
+            <el-select v-model="currentRow.lib_id">
               <el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
             </el-select>
-            <el-button type="text" @click="saveMusicLib(scope.row)">
-              <i class="el-icon-check"></i>
-            </el-button>
-            <el-button type="text" @click="scope.row.isEditing = false">
-              <i class="el-icon-close"></i>
-            </el-button>
+            <el-button link icon="Check" type="primary" @click="saveMusicLib(scope.row)"></el-button>
+            <el-button link icon="Close" type="primary" @click="scope.row.isEditing = false"></el-button>
           </template>
           <template v-else>
             {{ findMusicLib(scope.row.lib_id) }}
-            <el-button type="text" @click="updateLib(scope.row)">
+            <el-button link type="primary" @click="updateLib(scope.row)">
               <i class="el-icon-edit-outline"></i>
             </el-button>
           </template>
@@ -68,13 +64,18 @@
       </el-table-column>
       <el-table-column prop="lyric_id" label="歌词" width="120" >
         <template #default="scope">
-          <i :class="scope.row.lyric_id ? 'el-icon-check' : 'el-icon-close'" ></i>
+          <div style="width: 18px">
+            <el-icon>
+              <Check v-if="scope.row.lyric_id" />
+              <Close v-else/>
+            </el-icon>
+          </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="230" >
         <template #default="scope">
-          <el-button size="mini" plain @click="updateLyric(scope.row)">歌词</el-button>
-          <el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
+          <el-button link icon="Document" @click="updateLyric(scope.row)" title="歌词"></el-button>
+          <el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -111,25 +112,31 @@
   <el-dialog v-model="uploadModal" title="上传音乐" :width="550" @closed="uploadModalClosed" >
     <el-form :label-width="80">
       <el-form-item label="歌单">
-        <el-radio-group v-model="libIdSelected">
-          <el-radio v-for="item in musicLibs" :key="item._id" :label="item._id" border size="small">{{item.name}}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item >
-        <el-upload
-          ref="musicUpload"
-          action="/api/v2/music/upload"
-          name="file"
-          accept=".mp3,.flac"
-          :headers="{token: $store.state.loginInfo.token}"
-          :on-success="uploadSuccess"
-          :on-error="uploadError" 
-          :auto-upload="false"
-          multiple
-          :data="{libId: libIdSelected}">
-          <el-button size="small" type="primary">选择文件</el-button>
-        </el-upload>
+        <el-select v-model="libIdSelected">
+          <el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
+        </el-select>
       </el-form-item>
+      <el-upload
+        ref="musicUpload"
+        action="/api/v2/music/upload"
+        name="file"
+        accept=".mp3,.flac"
+        :headers="{token: $store.state.loginInfo.token}"
+        :on-success="uploadSuccess"
+        :on-error="uploadError" 
+        :auto-upload="false"
+        multiple
+        drag
+        :data="{libId: libIdSelected}">
+        <div class="el-upload__text">
+          拖拽到此处或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            可选择 mp3/flac 文件
+          </div>
+        </template>
+      </el-upload>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
diff --git a/src/views/api/PhotoWall.vue b/src/views/api/PhotoWall.vue
index ca7e79b..578f357 100644
--- a/src/views/api/PhotoWall.vue
+++ b/src/views/api/PhotoWall.vue
@@ -1,30 +1,30 @@
 <template>
 <div>
-  <el-alert type="info" show-icon :closable="false" >
+  <el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px" >
     <template #title>上传要求</template>
     图片格式为{{allowUploadExt.join('、')}}，文件大小不超过10MB。
   </el-alert>
   <el-form inline :model="search">
     <el-form-item label="文件名">
-      <el-input size="small" v-model="search.name" />
+      <el-input v-model="search.name" />
     </el-form-item>
     <el-form-item label="宽度" >
-      <el-input size="small" v-model="search.widthMin" type="number" style="vertical-align: middle;" >
+      <el-input v-model="search.widthMin" type="number" style="vertical-align: middle;" >
         <template #prepend>≥</template>
       </el-input>
     </el-form-item>
     <el-form-item>
-      <el-input size="small" v-model="search.widthMax" type="number" style="vertical-align: middle;" >
+      <el-input v-model="search.widthMax" type="number" style="vertical-align: middle;" >
         <template #prepend>≤</template>
       </el-input>
     </el-form-item>
     <el-form-item label="高度" >
-      <el-input size="small" v-model="search.heightMin" type="number" style="vertical-align: middle;" >
+      <el-input v-model="search.heightMin" type="number" style="vertical-align: middle;" >
         <template #prepend>≥</template>
       </el-input>
     </el-form-item>
     <el-form-item>
-      <el-input size="small" v-model="search.heightMax" type="number" style="vertical-align: middle;" >
+      <el-input v-model="search.heightMax" type="number" style="vertical-align: middle;" >
         <template #prepend>≤</template>
       </el-input>
     </el-form-item>
@@ -41,17 +41,17 @@
       auto-upload
       :show-file-list="false"
       style="display: inline-block;margin-right: 10px;">
-      <el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
+      <el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
     </el-upload>
-    <el-button size="small" type="danger" @click="deleteAll">删除</el-button>
+    <el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
     <div class="search-btn">
-      <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
    
   <div class="table-container">
-    <el-table :data="photowallData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
+    <el-table :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="name" label="文件名" />
       <el-table-column prop="md5" label="md5" width="300" />
@@ -60,7 +60,7 @@
       <el-table-column prop="height" label="高度" width="70" />
       <el-table-column label="操作" width="100" >
         <template #default="scope">
-          <el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
+          <el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -146,7 +146,7 @@ export default class PhotoWall extends BaseList<PhotoWallPage> {
       message: h('img', { style: `width:500px;height:${previewHeight}px;`, src: `${pictureCdn}/${row.name}` }, ''),
       showCancelButton: false,
       confirmButtonText: '关闭',
-      customStyle: {width: '530px'}
+      customStyle: {width: '600px'}
     }).catch(() => {})
   }
   created() {
diff --git a/src/views/api/SourceImage.vue b/src/views/api/SourceImage.vue
index aa37121..f2dc3b3 100644
--- a/src/views/api/SourceImage.vue
+++ b/src/views/api/SourceImage.vue
@@ -16,12 +16,12 @@
       auto-upload
       :show-file-list="false"
       style="display: inline-block;margin-right: 10px;">
-      <el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
+      <el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
     </el-upload>
-    <el-button size="small" type="danger" @click="deleteAll">删除</el-button>
+    <el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
   </div>
   <div class="table-container">
-    <el-table :data="sourceImageData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
+    <el-table :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="hash" label="md5" width="300" />
       <el-table-column prop="size" label="文件大小" >
@@ -42,8 +42,8 @@
       </el-table-column>
       <el-table-column label="操作" >
         <template #default="scope">
-          <el-button size="mini" type="primary" plain @click="modifyTags(scope.row)">修改标签</el-button>
-          <el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
+          <el-button link icon="EditPen" type="primary" plain @click="modifyTags(scope.row)" title="修改标签"></el-button>
+          <el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/system/Article.vue b/src/views/system/Article.vue
index 1f9dd91..f3161a6 100644
--- a/src/views/system/Article.vue
+++ b/src/views/system/Article.vue
@@ -3,10 +3,10 @@
   <div class="search-panel">
   <el-form inline :model="search">
     <el-form-item label="标题">
-      <el-input size="small" v-model="search.title" />
+      <el-input v-model="search.title" />
     </el-form-item>
     <el-form-item label="创建时间">
-      <el-date-picker size="small"
+      <el-date-picker
         v-model="search.createDate"
         type="daterange"
         range-separator="至"
@@ -14,17 +14,17 @@
         end-placeholder="结束日期" />
     </el-form-item>
     <el-form-item label="分类">
-      <el-select size="small" v-model="search.category" filterable clearable>
+      <el-select v-model="search.category" filterable clearable>
         <el-option v-for="item in categories" :key="item" :value="item" :label="item" />
       </el-select>
     </el-form-item>
     <el-form-item label="标签">
-      <el-select size="small" v-model="search.tag" filterable clearable>
+      <el-select v-model="search.tag" filterable clearable>
         <el-option v-for="item in tags" :key="item" :value="item" :label="item" />
       </el-select>
     </el-form-item>
     <el-form-item label="已分词">
-      <el-select size="small" v-model="search.isSplited" >
+      <el-select v-model="search.isSplited" >
         <el-option :value="true" label="是" />
         <el-option :value="false" label="否" />
       </el-select>
@@ -32,8 +32,8 @@
   </el-form>
   </div>
   <div class="btn-container">
-    <el-button type="primary" @click="splitWord" size="small" >分词处理</el-button>
-    <el-button @click="pullArticles" size="small" >拉取文章</el-button>
+    <el-button type="primary" @click="splitWord" style="vertical-align: bottom">分词处理</el-button>
+    <el-button @click="pullArticles" style="vertical-align: bottom">拉取文章</el-button>
     <el-upload
       action="/api/system/deployBlog"
       accept="application/zip"
@@ -45,11 +45,11 @@
       auto-upload
       :show-file-list="false"
       style="display: inline-block;margin-left: 10px;">
-      <el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">发布博客</el-button>
+      <el-button type="primary" icon="Upload" :loading="isUploading">发布博客</el-button>
     </el-upload>
     <div class="search-btn">
-      <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
   <el-row>
@@ -57,7 +57,7 @@
       <el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
     </el-col>
     <el-col :span="20">
-      <el-table :data="articleData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
+      <el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="title" label="标题" />
         <el-table-column prop="path" label="路径" >
@@ -83,22 +83,27 @@
         </el-table-column>
         <el-table-column prop="tags" label="是否已分词" width="120" >
           <template #default="scope">
-            <i :class="scope.row.is_splited ? 'el-icon-check' : 'el-icon-close'" ></i>
+            <div style="width: 18px">
+              <el-icon>
+                <Check v-if="scope.row.is_splited" />
+                <Close v-else/>
+              </el-icon>
+            </div>
           </template>
         </el-table-column>
       </el-table>
+      <div class="page-container">
+        <el-pagination background 
+          :page-sizes="$store.state.pageSizeOpts"
+          :layout="$store.state.pageLayout"
+          :current-page="search.pageNum"
+          :total="total"
+          @size-change="pageSizeChange"
+          @current-change="pageChange">
+        </el-pagination>
+      </div>
     </el-col>
   </el-row>
-  <div class="page-container">
-    <el-pagination background 
-      :page-sizes="$store.state.pageSizeOpts"
-      :layout="$store.state.pageLayout"
-      :current-page="search.pageNum"
-      :total="total"
-      @size-change="pageSizeChange"
-      @current-change="pageChange">
-    </el-pagination>
-  </div>
   <el-drawer
     v-model="markdownPreview.show"
     :title="markdownPreview.title"
diff --git a/src/views/system/SystemConfig.vue b/src/views/system/SystemConfig.vue
index a8b5551..e1bdca1 100644
--- a/src/views/system/SystemConfig.vue
+++ b/src/views/system/SystemConfig.vue
@@ -2,14 +2,14 @@
 <div>
   <el-form inline :model="search" @submit.prevent>
     <el-form-item label="配置项">
-      <el-input size="small" placeholder="名称/描述" v-model="search.name" />
+      <el-input placeholder="名称/描述" v-model="search.name" />
     </el-form-item>
   </el-form>
   <div class="btn-container">
-    <el-button size="small" type="primary" @click="add">添加</el-button>
+    <el-button type="primary" @click="add">添加</el-button>
     <div class="search-btn">
-      <el-button type="primary" @click="loadData" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadData" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
   <div class="table-container">
@@ -38,8 +38,8 @@
       </el-table-column>
       <el-table-column label="操作" >
         <template #default="scope">
-          <el-button size="mini" plain @click="update(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
+          <el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
+          <el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/system/SystemRole.vue b/src/views/system/SystemRole.vue
index 3d16da6..ec1bed3 100644
--- a/src/views/system/SystemRole.vue
+++ b/src/views/system/SystemRole.vue
@@ -2,14 +2,14 @@
   <div>
     <el-form inline :model="search" @submit.prevent>
       <el-form-item label="角色名称/描述">
-        <el-input size="small" v-model="search.name" />
+        <el-input v-model="search.name" />
       </el-form-item>
     </el-form>
     <div class="btn-container">
-      <el-button size="small" type="primary" @click="add">添加</el-button>
+      <el-button type="primary" @click="add">添加</el-button>
       <div class="search-btn">
-        <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-        <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+        <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+        <el-button @click="reset" icon="RefreshLeft">重置</el-button>
       </div>
     </div>
     <div class="table-container">
@@ -17,7 +17,7 @@
         <el-table-column prop="name" label="角色名称" />
         <el-table-column prop="methods" label="允许的请求类型" >
           <template #default="scope">
-            <el-tag type="info" size="small" v-for="method in scope.row.methods" :key="method">{{method}}</el-tag>
+            <el-tag type="info" v-for="method in scope.row.methods" :key="method">{{method}}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="created_at" label="创建时间" >
@@ -32,8 +32,8 @@
         </el-table-column>
         <el-table-column label="操作" >
           <template #default="scope">
-            <el-button size="mini" plain @click="update(scope.row)">修改</el-button>
-            <el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
+            <el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
+            <el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -67,7 +67,7 @@
         <el-form-item label="允许的URI">
           <el-input v-model="uri.include">
             <template #append>
-              <el-button icon="el-icon-plus" @click="addUri('include_uri', uri.include)"></el-button>
+              <el-button icon="Plus" @click="addUri('include_uri', uri.include)"></el-button>
             </template>
           </el-input>
           <el-tag v-for="uri in formData.include_uri" :key="uri" closable @close="removeUri('include_uri', uri)">{{uri}}</el-tag>
@@ -75,7 +75,7 @@
         <el-form-item label="禁止的URI">
           <el-input v-model="uri.exclude">
             <template #append>
-              <el-button icon="el-icon-plus" @click="addUri('exclude_uri', uri.exclude)"></el-button>
+              <el-button icon="Plus" @click="addUri('exclude_uri', uri.exclude)"></el-button>
             </template>
           </el-input>
           <el-tag v-for="uri in formData.exclude_uri" :key="uri" closable @close="removeUri('exclude_uri', uri)">{{uri}}</el-tag>
diff --git a/src/views/system/SystemUser.vue b/src/views/system/SystemUser.vue
index cd25055..3bf9f0b 100644
--- a/src/views/system/SystemUser.vue
+++ b/src/views/system/SystemUser.vue
@@ -2,14 +2,14 @@
 <div>
   <el-form inline :model="search" @submit.prevent>
     <el-form-item label="用户名/昵称">
-      <el-input size="small" v-model="search.username" />
+      <el-input v-model="search.username" />
     </el-form-item>
   </el-form>
   <div class="btn-container">
-    <el-button size="small" type="primary" @click="add">添加</el-button>
+    <el-button type="primary" @click="add">添加</el-button>
     <div class="search-btn">
-      <el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
-      <el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
+      <el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
+      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
   <div class="table-container">
@@ -28,8 +28,8 @@
       </el-table-column>
       <el-table-column label="操作" >
         <template #default="scope">
-          <el-button size="mini" plain @click="update(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
+          <el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
+          <el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
         </template>
       </el-table-column>
     </el-table>
diff --git a/src/views/tool/SqlReplace.vue b/src/views/tool/SqlReplace.vue
index 0570319..ae5c5e9 100644
--- a/src/views/tool/SqlReplace.vue
+++ b/src/views/tool/SqlReplace.vue
@@ -13,7 +13,7 @@
   </el-form>
   <div style="text-align:center">
     <el-button-group size="large" >
-      <el-button type="primary" icon="el-icon-document-copy" @click="replacePlaceholder">替换占位符</el-button>
+      <el-button type="primary" icon="DocumentCopy" @click="replacePlaceholder">替换占位符</el-button>
       <el-button type="default" @click="clear">清空</el-button>
     </el-button-group>
   </div>