Hugging Face's logo

Spaces:
hunian003
/
message
Running

App Files Community
message
File size: 3,168 Bytes
a43ac26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React from 'react';
import { cn } from '@/lib/utils';

/**
 * 控制台数据表格容器组件
 * 提供统一的表格布局和样式基础
 */

interface DataTableShellProps {
  /** 表格标题 */
  title?: string;
  /** 标题右侧的操作区 */
  titleAction?: React.ReactNode;
  /** 表格内容 */
  children: React.ReactNode;
  /** 空状态内容 */
  empty?: React.ReactNode;
  /** 是否为空 */
  isEmpty?: boolean;
  /** 额外的 className */
  className?: string;
  /** 表格容器的 className */
  tableClassName?: string;
}

/**
 * 数据表格容器组件
 * 用于控制台中统一展示表格数据
 */
export function DataTableShell({
  title,
  titleAction,
  children,
  empty,
  isEmpty = false,
  className,
  tableClassName,
}: DataTableShellProps) {
  return (
    <div className={cn('w-full', className)}>
      {/* 标题行 */}
      {(title || titleAction) && (
        <div className="flex items-center justify-between mb-2">
          {title && (
            <h3 className="text-sm font-medium text-console-text-primary">
              {title}
            </h3>
          )}
          {titleAction && (
            <div className="flex items-center gap-2">
              {titleAction}
            </div>
          )}
        </div>
      )}

      {/* 表格容器 */}
      {isEmpty ? (
        empty || (
          <div className="py-8 text-center text-xs text-console-text-muted">
            暂无数据
          </div>
        )
      ) : (
        <div className={cn(
          'overflow-auto border border-console-border rounded-console-md',
          tableClassName
        )}>
          <table className="w-full text-xs">
            {children}
          </table>
        </div>
      )}
    </div>
  );
}

/**
 * 表格头部组件
 */
interface DataTableHeadProps {
  children: React.ReactNode;
  className?: string;
}

export function DataTableHead({ children, className }: DataTableHeadProps) {
  return (
    <thead className={cn('bg-console-surface-raised', className)}>
      {children}
    </thead>
  );
}

/**
 * 表格行组件
 */
interface DataTableRowProps {
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
}

export function DataTableRow({ children, className, onClick }: DataTableRowProps) {
  return (
    <tr
      className={cn(
        'border-b border-console-border last:border-0',
        onClick && 'cursor-pointer hover:bg-console-surface-raised',
        className
      )}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
    >
      {children}
    </tr>
  );
}

/**
 * 表格单元格组件
 */
interface DataTableCellProps {
  children: React.ReactNode;
  className?: string;
  header?: boolean;
}

export function DataTableCell({ children, className, header }: DataTableCellProps) {
  const Tag = header ? 'th' : 'td';
  return (
    <Tag
      className={cn(
        'px-3 py-2 text-left',
        header && 'font-medium text-console-text-secondary bg-console-surface-raised',
        !header && 'text-console-text-primary',
        className
      )}
    >
      {children}
    </Tag>
  );
}