feat: 增强表格交互体验和数据展示
- 新增每页数量localStorage缓存,刷新后保持用户选择 - 增加表格显示高度从600px到800px,显示更多数据 - 支持点击表格行进行选择,提升操作便利性 - 格式化创建时间显示为详细时间(年/月/日 时:分) - 优化复选框和操作按钮的点击事件冲突 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user