fix: polish channel groups and add production deployment

src/components/ui/Table.tsx

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { Pagination } from './PagePrimitives';
 
 export type TableColumn<T> = {
   key: string;
@@ -13,13 +15,26 @@ type TableProps<T> = {
   data: T[];
   rowKey: keyof T | ((record: T) => string);
   emptyText?: string;
+  pagination?: boolean;
+  pageSize?: number;
 };
 
-export function Table<T>({ columns, data, rowKey, emptyText = '暂无数据' }: TableProps<T>) {
+export function Table<T>({ columns, data, rowKey, emptyText = '暂无数据', pageSize = 10, pagination = true }: TableProps<T>) {
+  const [page, setPage] = useState(1);
   const minimumTableWidth = columns.reduce((sum, column) => {
     const match = column.width?.match(/^(\d+)px$/);
     return sum + (match ? Number(match[1]) : 0);
   }, 0);
+  const totalPages = Math.max(1, Math.ceil(data.length / pageSize));
+  const activePage = Math.min(page, totalPages);
+  const visibleData = useMemo(
+    () => pagination ? data.slice((activePage - 1) * pageSize, activePage * pageSize) : data,
+    [activePage, data, pageSize, pagination],
+  );
+
+  useEffect(() => {
+    setPage(1);
+  }, [data, pageSize]);
 
   function getRowKey(record: T) {
     if (typeof rowKey === 'function') {
@@ -50,14 +65,14 @@ export function Table<T>({ columns, data, rowKey, emptyText = '暂无数据' }:
           </tr>
         </thead>
         <tbody>
-          {data.length === 0 ? (
+          {visibleData.length === 0 ? (
             <tr>
               <td className="ui-table__empty" colSpan={columns.length}>
                 {emptyText}
               </td>
             </tr>
           ) : (
-            data.map((record, index) => (
+            visibleData.map((record, index) => (
               <tr key={getRowKey(record)}>
                 {columns.map((column) => (
                   <td
@@ -72,6 +87,16 @@ export function Table<T>({ columns, data, rowKey, emptyText = '暂无数据' }:
           )}
         </tbody>
       </table>
+      {pagination && data.length > pageSize ? (
+        <Pagination
+          nextDisabled={activePage >= totalPages}
+          onNext={() => setPage((current) => Math.min(totalPages, current + 1))}
+          onPrevious={() => setPage((current) => Math.max(1, current - 1))}
+          page={activePage}
+          previousDisabled={activePage <= 1}
+          total={data.length}
+        />
+      ) : null}
     </div>
   );
 }