tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-12 18:26:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/admin/demo/tabs/table-tab.tsx
+186 -68
View File
@@ -1,92 +1,171 @@
// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0
"use client"
'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"
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" },
]
{
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='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 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
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 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>
<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>
<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" />
{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" />
{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" />
{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" />
<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
variant='ghost'
size='icon'
className='h-6 w-6 rounded hover:bg-destructive/10 text-destructive'
>
<Trash2 className='size-3' />
</Button>
</div>
</TableCell>
@@ -97,23 +176,62 @@ export function TableTab() {
</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" />
<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>
<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">
<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">
@@ -138,5 +256,5 @@ export function TableTab() {
</CardContent>
</Card>
</div>
)
);
}