优化重构管理页面

web/src/components/AdminDataTable.tsx

@@ -0,0 +1,21 @@
+import type {TableProps} from 'antd';
+import {Table, theme} from 'antd';
+
+/** 管理列表共用的数据表格：紧凑、直角，并跟随 Ant Design 主题背景。 */
+export const AdminDataTable = <RecordType extends object>(props: TableProps<RecordType>) => {
+    const {token} = theme.useToken();
+
+    return (
+        <div className="min-w-0 overflow-hidden bg-white dark:bg-[#171a21] p-4 rounded-md">
+            <Table<RecordType>
+                size="small"
+                {...props}
+                styles={{
+                    root: {borderRadius: 0, background: token.colorBgContainer},
+                    content: {borderRadius: 0, background: token.colorBgContainer},
+                    ...props.styles,
+                }}
+            />
+        </div>
+    );
+};

web/src/components/PagePanel.tsx

@@ -0,0 +1,14 @@
+import type {HTMLAttributes, PropsWithChildren} from 'react';
+import {cn} from '@/lib/utils';
+
+type PagePanelProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+/** 一级页面使用的统一内容面板。 */
+export const PagePanel = ({children, className, ...props}: PagePanelProps) => (
+    <section className={cn(
+        'overflow-hidden rounded-[10px] border border-[#e8ebf0] bg-white p-[18px] dark:border-[#272b33] dark:bg-[#171a21] max-sm:rounded-[13px] max-sm:p-3.5',
+        className,
+    )} {...props}>
+        {children}
+    </section>
+);