SikongJueluo
/
FPGA_WebLab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
SikongJueluo 2025-07-12 13:44:48 +08:00
parent 50ffd491fe
commit 44e357b887
No known key found for this signature in database
1 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/User/BoardTable.vue
View File

@ -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)
"
/>
@ -75,18 +81,20 @@
<div class="flex gap-2 ml-auto">
<button
class="btn btn-primary"
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"
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() }"
@ -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";