feat: 增强表格交互体验和数据展示

- 新增每页数量localStorage缓存,刷新后保持用户选择
- 增加表格显示高度从600px到800px,显示更多数据
- 支持点击表格行进行选择,提升操作便利性
- 格式化创建时间显示为详细时间(年/月/日 时:分)
- 优化复选框和操作按钮的点击事件冲突

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-24 05:36:37 +08:00
parent 8d02855249
commit 43a828a2c6
2 changed files with 42 additions and 16 deletions

View File

@@ -134,8 +134,8 @@ export function AccountTable({
{/* 分页器 - 移到顶部 */}
{renderPagination()}
{/* 表格区域 - 直接使用原生table确保sticky正常工作 */}
<div className="border rounded-lg max-h-[600px] overflow-auto">
{/* 表格区域 - 增加高度以显示更多数据 */}
<div className="border rounded-lg max-h-[800px] overflow-auto">
<table className="w-full caption-bottom text-sm">
<thead className="sticky top-0 bg-background z-20 border-b shadow-sm">
<tr className="hover:bg-muted/50 border-b transition-colors">
@@ -170,8 +170,12 @@ export function AccountTable({
</tr>
) : (
accounts.map((account) => (
<tr key={account.id} className="hover:bg-muted/50 border-b transition-colors">
<td className="p-2 align-middle w-12">
<tr
key={account.id}
className="hover:bg-muted/50 border-b transition-colors cursor-pointer"
onClick={() => onSelectOne(account.id, !selectedIds.includes(account.id))}
>
<td className="p-2 align-middle w-12" onClick={(e) => e.stopPropagation()}>
<Checkbox
checked={selectedIds.includes(account.id)}
onCheckedChange={(checked) => onSelectOne(account.id, checked as boolean)}
@@ -184,9 +188,15 @@ export function AccountTable({
<td className="p-2 align-middle">{getStatusBadge(account.status)}</td>
<td className="p-2 align-middle max-w-[200px] truncate">{account.notes || '-'}</td>
<td className="p-2 align-middle text-sm text-muted-foreground">
{new Date(account.createdAt).toLocaleDateString('zh-CN')}
{new Date(account.createdAt).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})}
</td>
<td className="p-2 align-middle w-[120px]">
<td className="p-2 align-middle w-[120px]" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center space-x-1">
{onView && (
<Button