重新构建路由和配置样式文件

2025-03-26 10:04:27 +08:00
parent a42a9990bf
commit 97ccf5a077
141 changed files with 88034 additions and 179 deletions
@@ -0,0 +1,108 @@
+import React from 'react';
+
+interface TableColumn<T> {
+  title: React.ReactNode;
+  dataIndex?: keyof T;
+  key?: string;
+  width?: number | string;
+  render?: (value: any, record: T, index: number) => React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+}
+
+interface TableProps<T> {
+  columns: TableColumn<T>[];
+  dataSource: T[];
+  rowKey: keyof T | ((record: T) => string);
+  loading?: boolean;
+  bordered?: boolean;
+  emptyText?: React.ReactNode;
+  className?: string;
+  onRow?: (record: T, index: number) => React.HTMLAttributes<HTMLTableRowElement>;
+}
+
+export function Table<T extends Record<string, any>>({
+  columns,
+  dataSource,
+  rowKey,
+  loading = false,
+  bordered = false,
+  emptyText = '暂无数据',
+  className = '',
+  onRow,
+}: TableProps<T>) {
+  const getRowKey = (record: T, index: number): string => {
+    if (typeof rowKey === 'function') {
+      return rowKey(record);
+    }
+    return String(record[rowKey]);
+  };
+  
+  return (
+    <div className={`ant-table-wrapper ${className} ${loading ? 'opacity-70' : ''}`}>
+      <table className="ant-table">
+        <thead>
+          <tr>
+            {columns.map((column, index) => (
+              <th 
+                key={column.key || column.dataIndex?.toString() || index}
+                className={column.className}
+                style={{
+                  width: column.width,
+                  textAlign: column.align || 'left',
+                }}
+              >
+                {column.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {dataSource.length > 0 ? (
+            dataSource.map((record, index) => (
+              <tr 
+                key={getRowKey(record, index)}
+                {...(onRow ? onRow(record, index) : {})}
+              >
+                {columns.map((column, colIndex) => (
+                  <td 
+                    key={column.key || column.dataIndex?.toString() || colIndex}
+                    style={{ textAlign: column.align || 'left' }}
+                  >
+                    {column.render 
+                      ? column.render(
+                          column.dataIndex ? record[column.dataIndex] : undefined, 
+                          record, 
+                          index
+                        )
+                      : column.dataIndex 
+                        ? record[column.dataIndex] 
+                        : undefined}
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td 
+                colSpan={columns.length} 
+                className="py-6 text-center text-gray-500"
+              >
+                {emptyText}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10">
+          <div className="flex items-center space-x-2">
+            <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
+            <span className="text-gray-600">加载中...</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}