feat: 列表页按钮样式调整

frontend/src/views/CodeList.vue

@@ -5,12 +5,10 @@
         <el-header>
             <div class="action-bar-container">
                 <el-space class="action-bar-item-container action-bar-action-left">
-                    <el-button size="small" type="success" @click="resetFilterAndRefreshTableList">
-                        刷新
-                    </el-button>
-                    <el-button size="small" type="success" @click="userClaimCodes" v-if="showRenLingButton">
-                        认领
-                    </el-button>
+                    <el-button-group class="ml-4">
+                        <el-button type="primary" :icon="Refresh" @click="resetFilterAndRefreshTableList">刷新</el-button>
+                        <el-button type="primary" :icon="Box" @click="userClaimCodes" v-if="showRenLingButton">认领</el-button>
+                    </el-button-group>
                 </el-space>
                 <el-space class="action-bar-item-container action-bar-action-right">
                     <div class="action-bar-item" v-if="showModifyUserFilter">
@@ -50,6 +48,9 @@
                     <div class="action-bar-item">
                         <el-input v-model="filters.search" placeholder="按照爬虫代码搜索" @keydown.enter="onInputSearch" />
                     </div>
+                    <div class="action-bar-item">
+                        <el-button type="primary" :icon="Search" @click="onInputSearch">搜索</el-button>
+                    </div>
                 </el-space>
             </div>
         </el-header>
@@ -66,57 +67,36 @@
                     <template #default="scope">
                         <el-tooltip content="标注" placement="top">
                             <el-button size="small" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
-                                <el-icon>
-                                    <SetUp />
-                                </el-icon>
+                                <el-icon><Link /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="编辑" placement="top">
                             <el-button size="small" @click="tableEvents.handleEdit(scope.$index, scope.row)">
-                                <el-icon>
-                                    <Edit />
-                                </el-icon>
+                                <el-icon><Edit /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="调试" placement="top">
                             <el-button size="small" @click="tableEvents.handleDebug(scope.$index, scope.row)">
-                                <el-icon>
-                                    <Promotion />
-                                </el-icon>
+                                <el-icon><SetUp /></el-icon>
                             </el-button>
                         </el-tooltip>
-                        <!-- <el-button size="small" type="success" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
-                            标注
-                        </el-button>
-                        <el-button size="small" type="warning" @click="tableEvents.handleEdit(scope.$index, scope.row)">
-                            编辑
-                        </el-button>
-                        <el-button size="small" type="danger" @click="tableEvents.handleDebug(scope.$index, scope.row)">
-                            调试
-                        </el-button> -->
                     </template>
                 </el-table-column>
                 <el-table-column label="功能" width="160">
                     <template #default="scope">
                         <el-tooltip content="验证" placement="top">
                             <el-button size="small" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
-                                <el-icon>
-                                    <SetUp />
-                                </el-icon>
+                                <el-icon><Aim /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="提交" placement="top">
                             <el-button size="small" @click="tableEvents.handleEdit(scope.$index, scope.row)">
-                                <el-icon>
-                                    <Edit />
-                                </el-icon>
+                                <el-icon><Promotion /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="回退" placement="top">
                             <el-button size="small" @click="tableEvents.handleDebug(scope.$index, scope.row)">
-                                <el-icon>
-                                    <Promotion />
-                                </el-icon>
+                                <el-icon><RefreshLeft /></el-icon>
                             </el-button>
                         </el-tooltip>
                     </template>
@@ -146,6 +126,7 @@ import Navigator from "../components/Navigator.vue"
 import EditSpider from "../components/EditSpider.vue"
 import useCodeListFiltersWithRole from '../composables/filter-options'
 import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../data/user'
+import { Refresh, Search, Box } from '@element-plus/icons-vue'
 
 const router = useRouter();
 const store = useStore();
@@ -374,18 +355,21 @@ const userClaimCodes = async () => {
             ElMessage({
                 message: msg || '认领成功',
                 type: 'success',
+                duration: 3000,
             })
             resetFilterAndRefreshTableList()
         } else {
             ElMessage({
                 message: msg || '认领失败',
                 type: 'error',
+                duration: 3000,
             })
         }
     } catch (error) {
         ElMessage({
             message: '认领失败',
             type: 'error',
+            duration: 3000,
         })
     }
 }