修复(#97): 区分邀请管理加载失败状态

packages/ui/src/composed/pro-table/pro-table.tsx

@@ -39,7 +39,13 @@ import { SortableRow } from "@workspace/ui/composed/pro-table/sortable-row";
 import { ProTableWrapper } from "@workspace/ui/composed/pro-table/wrapper";
 import { cn } from "@workspace/ui/lib/utils";
 import { useSize } from "ahooks";
-import { GripVertical, ListRestart, Loader, RefreshCcw } from "lucide-react";
+import {
+  CircleAlert,
+  GripVertical,
+  ListRestart,
+  Loader,
+  RefreshCcw,
+} from "lucide-react";
 import type React from "react";
 import {
   Fragment,
@@ -79,6 +85,7 @@ export interface ProTableProps<TData, TValue> {
     selectedRowsText: (total: number) => string;
   }>;
   empty?: React.ReactNode;
+  error?: React.ReactNode;
   onSort?: (
     sourceId: string | number,
     targetId: string | number | null,
@@ -104,6 +111,7 @@ export function ProTable<
   action,
   texts,
   empty,
+  error,
   onSort,
   initialFilters,
 }: ProTableProps<TData, TValue>) {
@@ -121,6 +129,8 @@ export function ProTable<
   const [rowSelection, setRowSelection] = useState({});
   const [data, setData] = useState<TData[]>([]);
   const [rowCount, setRowCount] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [requestError, setRequestError] = useState(false);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: 200,
@@ -193,6 +203,8 @@ export function ProTable<
   const fetchData = async () => {
     if (loading.current) return;
     loading.current = true;
+    setIsLoading(true);
+    setRequestError(false);
     try {
       const response = await request(
         {
@@ -205,10 +217,13 @@ export function ProTable<
       );
       setData(response.list);
       setRowCount(response.total);
-    } catch (error) {
-      console.log("Fetch data error:", error);
+    } catch (_error) {
+      setData([]);
+      setRowCount(0);
+      setRequestError(true);
     } finally {
       loading.current = false;
+      setIsLoading(false);
     }
   };
   const reset = async () => {
@@ -316,7 +331,16 @@ export function ProTable<
               ))}
             </TableHeader>
             <TableBody>
-              {table.getRowModel()?.rows?.length ? (
+              {requestError ? (
+                <TableRow>
+                  <TableCell
+                    className="py-12"
+                    colSpan={table.getAllLeafColumns().length}
+                  >
+                    {error || <ProTableErrorState />}
+                  </TableCell>
+                </TableRow>
+              ) : table.getRowModel()?.rows?.length ? (
                 onSort ? (
                   table.getRowModel().rows.map((row) => (
                     <SortableRow
@@ -371,7 +395,10 @@ export function ProTable<
                 )
               ) : (
                 <TableRow>
-                  <TableCell className="py-24" colSpan={columns.length + 2}>
+                  <TableCell
+                    className="py-24"
+                    colSpan={table.getAllLeafColumns().length}
+                  >
                     {empty || <Empty />}
                   </TableCell>
                 </TableRow>
@@ -380,8 +407,12 @@ export function ProTable<
           </Table>
         </ProTableWrapper>
 
-        {loading.current && (
-          <div className="absolute top-0 z-20 flex h-full w-full items-center justify-center bg-muted/80">
+        {isLoading && (
+          <div
+            aria-label="Loading data"
+            className="absolute top-0 z-20 flex h-full w-full items-center justify-center bg-muted/80"
+            role="status"
+          >
             <Loader className="h-4 w-4 animate-spin" />
           </div>
         )}
@@ -391,6 +422,16 @@ export function ProTable<
   );
 }
 
+function ProTableErrorState() {
+  return (
+    <Alert className="mx-auto max-w-md" variant="destructive">
+      <CircleAlert aria-hidden="true" />
+      <AlertTitle>Failed to load data</AlertTitle>
+      <AlertDescription>Refresh the table or try again later.</AlertDescription>
+    </Alert>
+  );
+}
+
 function createSelectColumn<TData, TValue>(): ColumnDef<TData, TValue> {
   return {
     id: "selected",