feat: 为表格优化界面，添加icon与动画

src/views/User/BoardTable.vue

@@ -1,32 +1,38 @@
 <template>
   <div class="flex flex-row justify-between items-center">
     <h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
-    <button
-      class="btn btn-ghost text-error hover:underline"
-      @click="tableManager.toggleEditMode"
-    >
-      编辑
-    </button>
+    <div>
+      <button 
+        class="btn btn-ghost group" 
+        @click="tableManager.getAllBoards"
+      >
+        <RefreshCw class="w-4 h-4 mr-2 transition-transform duration-300 group-hover:rotate-180" />
+        刷新
+      </button>
+      <button
+        class="btn btn-ghost text-error hover:underline group"
+        @click="tableManager.toggleEditMode"
+      >
+        <Edit class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
+        编辑
+      </button>
+    </div>
   </div>
 
   <div class="card bg-base-100 shadow-xl">
     <div class="card-body">
-      <div class="flex flex-row justify-between items-center mb-4">
-        <h2 class="card-title">IP 地址列表</h2>
-        <button class="btn btn-ghost" @click="tableManager.getAllBoards">
-          刷新
-        </button>
-      </div>
-
       <!-- 搜索和列控制 -->
-      <div class="flex items-center py-4 gap-4">
+      <div class="flex items-center my-2 gap-4">
         <input
           type="text"
           placeholder="筛选 IP 地址..."
           class="input input-bordered max-w-sm"
-          :value="tableManager.getColumnByKey('devAddr')?.getFilterValue() as string"
+          :value="
+            tableManager.getColumnByKey('devAddr')?.getFilterValue() as string
+          "
           @input="
-            tableManager.getColumnByKey('devAddr')
+            tableManager
+              .getColumnByKey('devAddr')
               ?.setFilterValue(($event.target as HTMLInputElement).value)
           "
         />
@@ -74,19 +80,21 @@
         </div>
 
         <div class="flex gap-2 ml-auto">
-          <button 
-            class="btn btn-primary"
+          <button
+            class="btn btn-primary group"
             :disabled="!tableManager.isEditMode.value"
             @click="showAddBoardDialog = true"
           >
+            <Plus class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
             新增实验板
           </button>
 
-          <button 
-            class="btn btn-error"
+          <button
+            class="btn btn-error group"
             :disabled="!tableManager.isEditMode.value"
             @click="tableManager.deleteSelectedBoards"
           >
+            <Trash2 class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110 group-hover:animate-pulse" />
             删除选中
           </button>
         </div>
@@ -112,7 +120,10 @@
           </thead>
           <tbody>
             <template v-if="tableManager.getRowModel().rows?.length">
-              <template v-for="row in tableManager.getRowModel().rows" :key="row.id">
+              <template
+                v-for="row in tableManager.getRowModel().rows"
+                :key="row.id"
+              >
                 <tr
                   class="hover"
                   :class="{ 'bg-primary/10': row.getIsSelected() }"
@@ -181,7 +192,7 @@
   </div>
 
   <!-- 新增实验板对话框 -->
-  <AddBoardDialog 
+  <AddBoardDialog
     v-model:visible="showAddBoardDialog"
     @success="handleAddBoardSuccess"
   />
@@ -190,6 +201,7 @@
 <script lang="ts" setup>
 import { FlexRender } from "@tanstack/vue-table";
 import { onMounted, ref } from "vue";
+import { RefreshCw, Edit, Plus, Trash2 } from "lucide-vue-next";
 import { useProvideBoardManager } from "./BoardManager";
 import { useProvideBoardTableManager } from "./BoardTableManager";
 import AddBoardDialog from "./AddBoardDialog.vue";