update: 增加表格为空的placeholder

packages/app/src/components/table/index.tsx

@@ -1,4 +1,4 @@
-import {Spin, Pagination} from 'antd';
+import {Spin, Pagination, Empty} from 'antd';
 import {ColumnsType, ColumnType} from 'antd/es/table';
 import {
   createPageContext,
@@ -80,35 +80,57 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
                 })}
               </thead>
               <tbody className={css.tableBody}>
-                {getRowModel().rows.map(function ({id, getVisibleCells}) {
-                  return (
-                    <tr key={id}>
-                      {getVisibleCells().map(function ({
-                        id,
-                        column,
-                        getContext,
-                      }) {
-                        const align =
-                          (
-                            column.columnDef.meta as {
-                              align: 'left' | 'right' | 'center';
-                            }
-                          )?.align ?? 'left';
-                        return (
-                          <td
-                            key={id}
-                            style={{
-                              width: column.getSize(),
-                              textAlign: align,
-                            }}
-                          >
-                            {flexRender(column.columnDef.cell, getContext())}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  );
-                })}
+                {getRowModel().rows.length > 0 ? (
+                  getRowModel().rows.map(function ({id, getVisibleCells}) {
+                    return (
+                      <tr key={id}>
+                        {getVisibleCells().map(function ({
+                          id,
+                          column,
+                          getContext,
+                        }) {
+                          const align =
+                            (
+                              column.columnDef.meta as {
+                                align: 'left' | 'right' | 'center';
+                              }
+                            )?.align ?? 'left';
+                          return (
+                            <td
+                              key={id}
+                              style={{
+                                width: column.getSize(),
+                                textAlign: align,
+                              }}
+                            >
+                              {flexRender(column.columnDef.cell, getContext())}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })
+                ) : (
+                  <tr>
+                    <td
+                      colSpan={getHeaderGroups()[0].headers.length}
+                      style={{padding: 0}}
+                    >
+                      <Empty
+                        image={Empty.PRESENTED_IMAGE_SIMPLE}
+                        style={{
+                          width: '400px',
+                          position: 'sticky',
+                          left: '50%',
+                          transform: 'translateX(-50%)',
+                          overflow: 'hidden',
+                          margin: 0,
+                          padding: '50px 10px',
+                        }}
+                      />
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
             <DragOverlay>