OpenFlare/frontend/app/(main)/admin/demo/tabs/table-tab.tsx

// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

"use client"

import * as React from "react"
import {Code, Edit, ListFilter, Plus, Search, Trash2} from "lucide-react"
import {Button} from "@/components/ui/button"
import {Input} from "@/components/ui/input"
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
import {Badge} from "@/components/ui/badge"
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"

export function TableTab() {
  const mockTableData = [
    { id: "TX-1002", name: "用户信息批量同步导出", type: "数据同步", status: "success", duration: "1.2s", time: "2026-06-15 14:22" },
    { id: "TX-1003", name: "系统数据库每周自动备份归档", type: "数据库运维", status: "running", duration: "在执行中", time: "2026-06-15 15:00" },
    { id: "TX-1004", name: "远端S3过期缓存对象自动清理任务", type: "磁盘清理", status: "failed", duration: "0.4s", time: "2026-06-15 10:05" },
  ]

  return (
    <div className="space-y-6">
      {/* 表格控制工具栏 */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div className="flex items-center gap-2">
          <div className="relative w-64">
            <Search className="absolute left-2.5 top-2.5 size-3 text-muted-foreground" />
            <Input placeholder="输入任务名称搜索..." className="h-8 pl-8 text-xs w-full shadow-none border-dashed bg-background" />
          </div>
          <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
            <ListFilter className="size-3 mr-1" />
            过滤
          </Button>
        </div>
        <Button size="sm" className="h-8 text-xs shadow-none">
          <Plus className="size-3.5 mr-1" />
          新建任务
        </Button>
      </div>

      {/* 数据表格本身 */}
      <div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
        <Table className="w-full caption-bottom text-sm min-w-full">
          <TableHeader className="bg-muted/40">
            <TableRow className="border-dashed hover:bg-transparent">
              <TableHead className="w-[100px] text-xs font-semibold">任务编号</TableHead>
              <TableHead className="text-xs font-semibold">执行任务名称</TableHead>
              <TableHead className="w-[120px] text-xs font-semibold">任务类型</TableHead>
              <TableHead className="w-[100px] text-xs font-semibold">状态</TableHead>
              <TableHead className="w-[100px] text-xs font-semibold">执行耗时</TableHead>
              <TableHead className="w-[150px] text-xs font-semibold">触发时间</TableHead>
              <TableHead className="w-[80px] text-xs font-semibold text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {mockTableData.map((row) => (
              <TableRow key={row.id} className="border-dashed hover:bg-muted/10 transition-colors">
                <TableCell className="font-mono text-xs font-semibold">{row.id}</TableCell>
                <TableCell className="text-xs font-medium text-foreground">{row.name}</TableCell>
                <TableCell className="text-xs text-muted-foreground">{row.type}</TableCell>
                <TableCell>
                  {row.status === "success" && (
                    <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2 font-medium">
                      <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
                      成功
                    </Badge>
                  )}
                  {row.status === "running" && (
                    <Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/20 text-blue-600 rounded-full py-0 px-2 font-medium">
                      <span className="size-1 bg-blue-500 rounded-full mr-1.5 shrink-0 animate-pulse" />
                      运行中
                    </Badge>
                  )}
                  {row.status === "failed" && (
                    <Badge variant="outline" className="text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2 font-medium">
                      <span className="size-1 bg-destructive rounded-full mr-1.5 shrink-0" />
                      失败
                    </Badge>
                  )}
                </TableCell>
                <TableCell className="text-xs text-muted-foreground font-mono">{row.duration}</TableCell>
                <TableCell className="text-xs text-muted-foreground">{row.time}</TableCell>
                <TableCell className="text-right">
                  <div className="flex items-center justify-end gap-1.5">
                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-muted text-muted-foreground">
                      <Edit className="size-3" />
                    </Button>
                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-destructive/10 text-destructive">
                      <Trash2 className="size-3" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* 表格规范指引 */}
      <Card className="border-dashed shadow-none bg-muted/20">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
            <Code className="size-4 text-primary" />
            表格设计规范与代码模板
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
            <li>表格容器必须统一使用带有虚线边框的容器，即类名：<code className="bg-muted px-1 py-0.5 rounded font-mono">border border-dashed shadow-none rounded-lg overflow-hidden bg-background</code>。</li>
            <li>表头背景设为 <code className="bg-muted px-1 py-0.5 rounded font-mono">bg-muted/40</code>。表头表项字号统一为小字粗体 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs font-semibold</code>。</li>
            <li>单元格行与列之间使用虚线分割（<code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed</code>）。表格行悬浮交互采用温和过渡色 <code className="bg-muted px-1 py-0.5 rounded font-mono">hover:bg-muted/10 transition-colors</code>。</li>
            <li>编码、主键或唯一 ID 类字段一律采用等宽字体呈现：<code className="bg-muted px-1 py-0.5 rounded font-mono">font-mono text-xs</code>。</li>
            <li>状态标签（Badge）尽量圆角化（<code className="bg-muted px-1 py-0.5 rounded font-mono">rounded-full py-0 px-2</code>），并以浅背景配以各自对应的图标圆点，以实现现代、高对比度的视觉质感。</li>
          </ul>
          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
{`<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
  <Table>
    <TableHeader className="bg-muted/40">
      <TableRow className="border-dashed hover:bg-transparent">
        <TableHead className="text-xs font-semibold">编号</TableHead>
        <TableHead className="text-xs font-semibold">状态</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow className="border-dashed hover:bg-muted/10 transition-colors">
        <TableCell className="font-mono text-xs">ID-1001</TableCell>
        <TableCell>
          <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2">
            <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
            成功
          </Badge>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</div>`}
          </pre>
        </CardContent>
      </Card>
    </div>
  )
}