openxiangda-cli 2.0.0-alpha.67 → 2.0.0-alpha.69

package/template/apps/web/src/components/resource/GeneratedResourceCrud.tsx

@@ -1,10 +1,16 @@
 import {
   ArrowRightOutlined,
+  ColumnHeightOutlined,
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
+  ExportOutlined,
   PlusOutlined,
+  ReloadOutlined,
   SearchOutlined,
+  SettingOutlined,
+  UpOutlined,
+  DownOutlined,
 } from '@ant-design/icons';
 import { useCreate, useDelete, useList, useOne, useUpdate } from '@refinedev/core';
 import {
@@ -12,7 +18,9 @@ import {
   Alert,
   Button,
   Card,
+  Collapse,
   Descriptions,
+  Dropdown,
   Empty,
   Form,
   Input,
@@ -22,7 +30,9 @@ import {
   Space,
   Spin,
   Table,
+  Tooltip,
   Typography,
+  type MenuProps,
   type TableColumnsType,
 } from 'antd';
 import dayjs from 'dayjs';
@@ -49,6 +59,7 @@ import {
 import { createNativeResourceClient, type GenericResourceQuery } from '../../platform-client';
 import { ResolvedValueText } from '../../AuthoritativeSelector';
 import { useRuntime } from '../../runtime';
+import { ResourceBatchActions, ResourceImportButton } from './ResourceBatchActions';
 
 type ResourceRecord = Record<string, unknown> & {
   id: string;
@@ -59,7 +70,12 @@ type ResourceRecord = Record<string, unknown> & {
 type GeneratedDefinition = {
   code: string;
   name: string;
-  capabilities: { read: string; create: string; update: string; delete: string };
+  capabilities: {
+    read: string;
+    create: string;
+    update: string;
+    delete: string;
+  };
   surface: DataResourceSurface;
 };
 
@@ -81,16 +97,17 @@ function fieldsBySection(surface: DataResourceSurface) {
     const section = field.section || 'default';
     groups.set(section, [...(groups.get(section) || []), { key, ...field }]);
   }
-  return [...groups.entries()].map(([section, fields]) => ({ section, fields }));
+  return [...groups.entries()].map(([section, fields]) => ({
+    section,
+    fields,
+  }));
 }
 
 function normalizeRecordForForm(record: ResourceRecord, surface: DataResourceSurface) {
   return Object.fromEntries(
     Object.entries(record).map(([key, value]) => {
       const widget = surface.fields[key]?.widget;
-      return widget === 'date' || widget === 'datetime'
-        ? [key, value ? dayjs(String(value)) : undefined]
-        : [key, value];
+      return widget === 'date' || widget === 'datetime' ? [key, value ? dayjs(String(value)) : undefined] : [key, value];
     })
   );
 }
@@ -100,22 +117,20 @@ function normalizeFormValues(values: Record<string, unknown>, surface: DataResou
     Object.entries(values).map(([key, value]) => {
       const widget = surface.fields[key]?.widget;
       return widget === 'date' || widget === 'datetime'
-        ? [key, value && typeof value === 'object' && 'format' in value
-            ? (widget === 'datetime'
-              ? dayjs(value as never).toISOString()
-              : (value as { format: (pattern: string) => string }).format('YYYY-MM-DD'))
-            : value]
+        ? [
+            key,
+            value && typeof value === 'object' && 'format' in value
+              ? widget === 'datetime'
+                ? dayjs(value as never).toISOString()
+                : (value as { format: (pattern: string) => string }).format('YYYY-MM-DD')
+              : value,
+          ]
         : [key, value];
     })
   );
 }
 
-function fieldWritable(
-  field: SurfaceField,
-  mode: 'create' | 'edit',
-  hasCapability: (code: string) => boolean,
-  isAppSuperAdmin: boolean
-) {
+function fieldWritable(field: SurfaceField, mode: 'create' | 'edit', hasCapability: (code: string) => boolean, isAppSuperAdmin: boolean) {
   const capability = mode === 'create' ? field.createCapability : field.updateCapability;
   if (isAppSuperAdmin) return true;
   if (capability) return hasCapability(capability);
@@ -123,11 +138,7 @@ function fieldWritable(
 }
 
 function auditOperationLabel(operation: DataAuditEntry['operation']) {
-  return operation === 'created'
-    ? '创建'
-    : operation === 'deleted'
-      ? '删除'
-      : '更新';
+  return operation === 'created' ? '创建' : operation === 'deleted' ? '删除' : '更新';
 }
 
 function auditValue(field: SurfaceField, value: unknown) {
@@ -138,19 +149,19 @@ function auditValue(field: SurfaceField, value: unknown) {
 }
 
 function auditChangeFields(entry: DataAuditEntry, surface: DataResourceSurface) {
-  const fields = fieldsBySection(surface).flatMap(group => group.fields);
+  const fields = fieldsBySection(surface).flatMap((group) => group.fields);
   const source = entry.changes || entry.record || entry.before || {};
-  return fields.filter(field => Object.prototype.hasOwnProperty.call(source, field.key));
+  return fields.filter((field) => Object.prototype.hasOwnProperty.call(source, field.key));
 }
 
 function exportCellValue(field: SurfaceField, value: unknown) {
   if (value === undefined || value === null || value === '') return '';
   if (field.widget === 'boolean') return value ? '是' : '否';
   if (field.options && !Array.isArray(value)) {
-    return field.options.find(option => option.value === value)?.label || String(value);
+    return field.options.find((option) => option.value === value)?.label || String(value);
   }
   if (Array.isArray(value)) {
-    return value.map(item => field.options?.find(option => option.value === item)?.label || String(item)).join('、');
+    return value.map((item) => field.options?.find((option) => option.value === item)?.label || String(item)).join('、');
   }
   if (field.widget === 'date' || field.widget === 'datetime') {
     const parsed = new Date(String(value));
@@ -169,7 +180,7 @@ async function exportResourceRows(
   name: string,
   surface: DataResourceSurface,
   query: Partial<GenericResourceQuery>,
-  sort: { field: string; order: 'asc' | 'desc' },
+  sort: { field: string; order: 'asc' | 'desc' }
 ) {
   const client = createNativeResourceClient(code, surface);
   const fields = listSurfaceFields(surface.fields);
@@ -190,9 +201,11 @@ async function exportResourceRows(
     total = result.total;
     page += 1;
   } while (rows.length < total && rows.length < 10000 && page <= 20);
-  const header = fields.map(field => csvCell(field.label)).join(',');
-  const body = rows.map(row => fields.map(field => csvCell(exportCellValue(field, row[field.key]))).join(','));
-  const blob = new Blob([`\uFEFF${[header, ...body].join('\r\n')}`], { type: 'text/csv;charset=utf-8' });
+  const header = fields.map((field) => csvCell(field.label)).join(',');
+  const body = rows.map((row) => fields.map((field) => csvCell(exportCellValue(field, row[field.key]))).join(','));
+  const blob = new Blob([`\uFEFF${[header, ...body].join('\r\n')}`], {
+    type: 'text/csv;charset=utf-8',
+  });
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement('a');
   anchor.href = url;
@@ -214,7 +227,10 @@ function AuditEntry({ entry, surface }: { entry: DataAuditEntry; surface: DataRe
       <div className="oxa-audit-meta">
         <span>操作人</span>
         {entry.actor.principalType === 'application' ? (
-          <Typography.Text>应用服务{entry.actor.oauthClientId ? `（${entry.actor.oauthClientId}）` : ''}</Typography.Text>
+          <Typography.Text>
+            应用服务
+            {entry.actor.oauthClientId ? `（${entry.actor.oauthClientId}）` : ''}
+          </Typography.Text>
         ) : (
           <ResolvedValueText source="user" value={entry.actor.userId} />
         )}
@@ -223,7 +239,7 @@ function AuditEntry({ entry, surface }: { entry: DataAuditEntry; surface: DataRe
       </div>
       {fields.length ? (
         <div className="oxa-audit-changes">
-          {fields.map(field => {
+          {fields.map((field) => {
             const before = entry.operation === 'created' ? undefined : entry.before?.[field.key];
             const after = entry.operation === 'deleted' ? undefined : changes[field.key];
             return (
@@ -254,13 +270,19 @@ function useGeneratedList(definition: GeneratedDefinition) {
   const [pageSize, setPageSize] = useState(defaultPageSize);
   const [draft, setDraft] = useState<Partial<GenericResourceQuery>>({});
   const [query, setQuery] = useState<Partial<GenericResourceQuery>>({});
-  const [sort, setSort] = useState({ field: defaultSortField, order: defaultSortOrder as 'asc' | 'desc' });
+  const [sort, setSort] = useState({
+    field: defaultSortField,
+    order: defaultSortOrder as 'asc' | 'desc',
+  });
   useEffect(() => {
     setPage(1);
     setPageSize(defaultPageSize);
     setDraft({});
     setQuery({});
-    setSort({ field: defaultSortField, order: defaultSortOrder as 'asc' | 'desc' });
+    setSort({
+      field: defaultSortField,
+      order: defaultSortOrder as 'asc' | 'desc',
+    });
   }, [code, defaultPageSize, defaultSortField, defaultSortOrder]);
   const list = useList<ResourceRecord>({
     resource: code,
@@ -268,7 +290,19 @@ function useGeneratedList(definition: GeneratedDefinition) {
     sorters: [sort],
     meta: { query },
   });
-  return { draft, list, page, pageSize, query, setDraft, setPage, setPageSize, setQuery, setSort, sort };
+  return {
+    draft,
+    list,
+    page,
+    pageSize,
+    query,
+    setDraft,
+    setPage,
+    setPageSize,
+    setQuery,
+    setSort,
+    sort,
+  };
 }
 
 export function GeneratedResourcePage({
@@ -291,9 +325,7 @@ export function GeneratedResourcePage({
 }
 
 function GeneratedResourceListPage({ definition, variant }: { definition: GeneratedDefinition; variant: 'desktop' | 'mobile' }) {
-  return variant === 'mobile'
-    ? <GeneratedMobileList definition={definition} />
-    : <GeneratedDesktopList definition={definition} />;
+  return variant === 'mobile' ? <GeneratedMobileList definition={definition} /> : <GeneratedDesktopList definition={definition} />;
 }
 
 function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition }) {
@@ -304,35 +336,114 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
   const { code, name, surface, capabilities } = definition;
   const fields = listSurfaceFields(surface.fields);
   const [exporting, setExporting] = useState(false);
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const [density, setDensity] = useState<'small' | 'middle' | 'large'>('middle');
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>(() => fields.map((field) => field.key));
+  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const remove = useDelete();
   const rows = (state.list.result.data || []) as unknown as ResourceRecord[];
-  const columns = useMemo<TableColumnsType<ResourceRecord>>(() => [
-    ...fields.map(field => ({
-      title: field.label,
-      dataIndex: field.key,
-      key: field.key,
-      sorter: Boolean(field.sortable),
-      render: (value: unknown, record: ResourceRecord) => (
-        <SurfaceFieldValue field={field} value={value} renderers={{ renderValue: ({ value: current }) => field.key === fields[0]?.key ? <a onClick={() => navigate(`/${code}/${record.id}`)}>{String(current || '-')}</a> : undefined }} />
-      ),
-    })),
-    {
-      title: '更新时间',
-      dataIndex: 'updated_at',
-      render: value => value ? new Date(String(value)).toLocaleString('zh-CN') : '-',
-    },
-    {
-      title: '操作',
-      key: 'actions',
-      render: (_: unknown, record: ResourceRecord) => (
-        <Space>
-          <Button aria-label="查看" icon={<EyeOutlined />} onClick={() => navigate(`/${code}/${record.id}`)} size="small" />
-          {hasCapability(capabilities.update) && <Button aria-label="编辑" icon={<EditOutlined />} onClick={() => navigate(`/${code}/${record.id}/edit`)} size="small" />}
-          {hasCapability(capabilities.delete) && <Popconfirm title={`确定删除${name}？`} onConfirm={() => remove.mutate({ resource: code, id: record.id, meta: { expectedRevision: record.revision } }, { onSuccess: () => { message.success('已删除'); void state.list.query.refetch(); } })}><Button aria-label="删除" danger icon={<DeleteOutlined />} size="small" /></Popconfirm>}
-        </Space>
-      ),
-    },
-  ], [capabilities.delete, capabilities.update, code, fields, hasCapability, message, name, navigate, remove, state.list.query]);
+  useEffect(() => {
+    setVisibleColumnKeys(fields.map((field) => field.key));
+    setFiltersExpanded(false);
+    setDensity('middle');
+    setSelectedRowKeys([]);
+  }, [code]);
+  useEffect(() => {
+    setSelectedRowKeys([]);
+  }, [code, state.page, state.pageSize, state.query, state.sort.field, state.sort.order]);
+  const formFields = fieldsBySection(surface).flatMap((group) => group.fields);
+  const importWritableFieldCodes = formFields
+    .filter((field) => field.widget !== 'readonly' && fieldWritable(field, 'create', hasCapability, identity.isAppSuperAdmin))
+    .map((field) => field.key);
+  const batchWritableFields = formFields.filter(
+    (field) => !['file', 'readonly'].includes(field.widget || '') && fieldWritable(field, 'edit', hasCapability, identity.isAppSuperAdmin)
+  );
+  const selectedRows = rows.filter((row) => selectedRowKeys.includes(row.id));
+  const canBatch = hasCapability(capabilities.update) || hasCapability(capabilities.delete);
+  const columns = useMemo<TableColumnsType<ResourceRecord>>(
+    () => [
+      ...fields
+        .filter((field) => visibleColumnKeys.includes(field.key))
+        .map((field) => ({
+          title: field.label,
+          dataIndex: field.key,
+          key: field.key,
+          sorter: Boolean(field.sortable),
+          render: (value: unknown, record: ResourceRecord) => (
+            <SurfaceFieldValue
+              field={field}
+              value={value}
+              renderers={{
+                renderValue: ({ value: current }) =>
+                  field.key === fields[0]?.key ? (
+                    <a onClick={() => navigate(`/${code}/${record.id}`)}>{String(current || '-')}</a>
+                  ) : undefined,
+              }}
+            />
+          ),
+        })),
+      {
+        title: '更新时间',
+        dataIndex: 'updated_at',
+        key: 'updated_at',
+        render: (value) => (value ? new Date(String(value)).toLocaleString('zh-CN') : '-'),
+      },
+      {
+        title: '操作',
+        key: 'actions',
+        fixed: 'right' as const,
+        render: (_: unknown, record: ResourceRecord) => (
+          <Space size={4}>
+            <Button aria-label="查看" icon={<EyeOutlined />} onClick={() => navigate(`/${code}/${record.id}`)} size="small" type="text" />
+            {hasCapability(capabilities.update) && (
+              <Button
+                aria-label="编辑"
+                icon={<EditOutlined />}
+                onClick={() => navigate(`/${code}/${record.id}/edit`)}
+                size="small"
+                type="text"
+              />
+            )}
+            {hasCapability(capabilities.delete) && (
+              <Popconfirm
+                onConfirm={() =>
+                  remove.mutate(
+                    {
+                      resource: code,
+                      id: record.id,
+                      meta: { expectedRevision: record.revision },
+                    },
+                    {
+                      onSuccess: () => {
+                        message.success('已删除');
+                        void state.list.query.refetch();
+                      },
+                    }
+                  )
+                }
+                title={`确定删除${name}？`}
+              >
+                <Button aria-label="删除" danger icon={<DeleteOutlined />} size="small" type="text" />
+              </Popconfirm>
+            )}
+          </Space>
+        ),
+      },
+    ],
+    [
+      capabilities.delete,
+      capabilities.update,
+      code,
+      fields,
+      hasCapability,
+      message,
+      name,
+      navigate,
+      remove,
+      state.list.query,
+      visibleColumnKeys,
+    ]
+  );
   const handleExport = async () => {
     setExporting(true);
     try {
@@ -344,12 +455,33 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
       setExporting(false);
     }
   };
+  const filterFields = surface.list?.filterFields || [];
+  const hasMoreFilters = filterFields.length > 2;
+  const columnMenu: MenuProps = {
+    items: fields.map((field) => ({ key: field.key, label: field.label })),
+    multiple: true,
+    selectable: true,
+    selectedKeys: visibleColumnKeys,
+    onSelect: ({ selectedKeys }) => setVisibleColumnKeys(selectedKeys.map(String)),
+    onDeselect: ({ selectedKeys }) => {
+      if (selectedKeys.length) setVisibleColumnKeys(selectedKeys.map(String));
+      else message.info('至少保留一列');
+    },
+  };
+  const densityMenu: MenuProps = {
+    items: [
+      { key: 'large', label: '宽松' },
+      { key: 'middle', label: '标准' },
+      { key: 'small', label: '紧凑' },
+    ],
+    selectable: true,
+    selectedKeys: [density],
+    onClick: ({ key }) => setDensity(key as typeof density),
+  };
   return (
     <ResourceListPage
       createCapability={capabilities.create}
       createPath={`/${code}/new`}
-      description={`由 ${code} 资源 Surface 自动生成的标准 CRUD 页面`}
-      onExport={() => void handleExport()}
       readCapability={capabilities.read}
       resource={code}
       surface={surface}
@@ -357,33 +489,189 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
     >
       {state.list.query.isError && (
         <Alert
-          action={<Button onClick={() => void state.list.query.refetch()} size="small">重试</Button>}
+          action={
+            <Button onClick={() => void state.list.query.refetch()} size="small">
+              重试
+            </Button>
+          }
           description={state.list.query.error instanceof Error ? state.list.query.error.message : '请稍后重试或联系平台管理员'}
-          message="数据读取失败"
           showIcon
+          title="数据读取失败"
           type="error"
         />
       )}
-      <div className="oxa-filter-grid">
-        <Select allowClear options={(surface.list?.searchableFields || []).map(key => ({ label: fieldFor(surface, key).label, value: key }))} placeholder="搜索字段" value={state.draft.searchField} onChange={value => state.setDraft(item => ({ ...item, searchField: value }))} />
-        <Input allowClear prefix={<SearchOutlined />} placeholder="关键词" value={state.draft.keyword} onChange={event => state.setDraft(item => ({ ...item, keyword: event.target.value }))} />
-        {(surface.list?.filterFields || []).map(key => {
-          const field = fieldFor(surface, key);
-          return <SurfaceFilterControl key={key} field={field} value={state.draft.filters?.[key]} onChange={value => state.setDraft(item => ({ ...item, filters: { ...item.filters, [key]: value } }))} />;
-        })}
-        <Space>
-          <Button loading={state.list.query.isFetching} type="primary" icon={<SearchOutlined />} onClick={() => { state.setPage(1); state.setQuery(state.draft); }}>查询</Button>
-          <Button onClick={() => { state.setDraft({}); state.setQuery({}); state.setPage(1); }}>重置</Button>
+      <section aria-label="数据筛选" className="oxa-search-panel">
+        <div className="oxa-filter-grid">
+          <div className="oxa-filter-item">
+            <Select
+              allowClear
+              options={(surface.list?.searchableFields || []).map((key) => ({
+                label: fieldFor(surface, key).label,
+                value: key,
+              }))}
+              placeholder="搜索字段"
+              value={state.draft.searchField}
+              onChange={(value) => state.setDraft((item) => ({ ...item, searchField: value }))}
+            />
+          </div>
+          <div className="oxa-filter-item">
+            <Input
+              allowClear
+              onChange={(event) =>
+                state.setDraft((item) => ({
+                  ...item,
+                  keyword: event.target.value,
+                }))
+              }
+              onPressEnter={() => {
+                state.setPage(1);
+                state.setQuery(state.draft);
+              }}
+              placeholder="关键词"
+              prefix={<SearchOutlined />}
+              value={state.draft.keyword}
+            />
+          </div>
+          {filterFields.map((key, index) => {
+            const field = fieldFor(surface, key);
+            return (
+              <div className={`oxa-filter-item${index >= 2 && !filtersExpanded ? ' is-collapsed' : ''}`} key={key}>
+                <SurfaceFilterControl
+                  field={field}
+                  onChange={(value) =>
+                    state.setDraft((item) => ({
+                      ...item,
+                      filters: { ...item.filters, [key]: value },
+                    }))
+                  }
+                  value={state.draft.filters?.[key]}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div className="oxa-filter-actions">
+          <Button
+            icon={<SearchOutlined />}
+            loading={state.list.query.isFetching}
+            onClick={() => {
+              state.setPage(1);
+              state.setQuery(state.draft);
+            }}
+            type="primary"
+          >
+            查询
+          </Button>
+          <Button
+            onClick={() => {
+              state.setDraft({});
+              state.setQuery({});
+              state.setPage(1);
+            }}
+          >
+            重置
+          </Button>
+          {hasMoreFilters && (
+            <Button
+              icon={filtersExpanded ? <UpOutlined /> : <DownOutlined />}
+              onClick={() => setFiltersExpanded((value) => !value)}
+              type="link"
+            >
+              {filtersExpanded ? '收起筛选' : `更多筛选（${filterFields.length - 2}）`}
+            </Button>
+          )}
+        </div>
+      </section>
+      <div className="oxa-list-toolbar">
+        <Space className="oxa-list-toolbar-primary" wrap>
+          {hasCapability(capabilities.create) && (
+            <Button icon={<PlusOutlined />} onClick={() => navigate(`/${code}/new`)} type="primary">
+              新增{name}
+            </Button>
+          )}
+          {hasCapability(capabilities.create) && (
+            <ResourceImportButton
+              code={code}
+              name={name}
+              surface={surface}
+              writableFieldCodes={importWritableFieldCodes}
+              onCompleted={() => state.list.query.refetch()}
+            />
+          )}
+          <Button icon={<ExportOutlined />} loading={exporting} onClick={() => void handleExport()}>
+            导出
+          </Button>
+        </Space>
+        <Space className="oxa-list-toolbar-secondary" size={4}>
+          <Tooltip title="刷新">
+            <Button
+              aria-label="刷新数据"
+              icon={<ReloadOutlined />}
+              loading={state.list.query.isFetching}
+              onClick={() => void state.list.query.refetch()}
+              type="text"
+            />
+          </Tooltip>
+          <Dropdown menu={columnMenu} trigger={['click']}>
+            <Button icon={<SettingOutlined />} type="text">
+              列设置
+            </Button>
+          </Dropdown>
+          <Dropdown menu={densityMenu} trigger={['click']}>
+            <Button icon={<ColumnHeightOutlined />} type="text">
+              密度
+            </Button>
+          </Dropdown>
         </Space>
       </div>
+      <ResourceBatchActions
+        canDelete={hasCapability(capabilities.delete)}
+        code={code}
+        name={name}
+        onClear={() => setSelectedRowKeys([])}
+        onCompleted={() => state.list.query.refetch()}
+        rows={selectedRows}
+        surface={surface}
+        writableFields={batchWritableFields}
+      />
       <Table<ResourceRecord>
         columns={columns}
         dataSource={rows}
         loading={state.list.query.isFetching}
         locale={{ emptyText: <Empty description={`暂无${name}`} /> }}
         rowKey="id"
-        onChange={(_, __, sorter) => { const item = Array.isArray(sorter) ? sorter[0] : sorter; if (item?.field && item.order) state.setSort({ field: String(item.field), order: item.order === 'ascend' ? 'asc' : 'desc' }); }}
-        pagination={{ current: state.page, pageSize: state.pageSize, total: state.list.result.total || 0, showSizeChanger: true, onChange: (next, size) => { state.setPage(next); state.setPageSize(size); } }}
+        rowSelection={
+          canBatch
+            ? {
+                selectedRowKeys,
+                onChange: (keys) => {
+                  const next = keys.map(String);
+                  if (next.length > 100) message.warning('单次最多选择 100 条记录');
+                  setSelectedRowKeys(next.slice(0, 100));
+                },
+              }
+            : undefined
+        }
+        scroll={{ x: 'max-content' }}
+        size={density}
+        onChange={(_, __, sorter) => {
+          const item = Array.isArray(sorter) ? sorter[0] : sorter;
+          if (item?.field && item.order)
+            state.setSort({
+              field: String(item.field),
+              order: item.order === 'ascend' ? 'asc' : 'desc',
+            });
+        }}
+        pagination={{
+          current: state.page,
+          pageSize: state.pageSize,
+          total: state.list.result.total || 0,
+          showSizeChanger: true,
+          onChange: (next, size) => {
+            state.setPage(next);
+            state.setPageSize(size);
+          },
+        }}
       />
     </ResourceListPage>
   );
@@ -410,27 +698,113 @@ function GeneratedMobileList({ definition }: { definition: GeneratedDefinition }
     }
   };
   return (
-    <MobileResourceListPage createCapability={capabilities.create} createPath={`/${code}/new`} description={`${code} 资源`} onExport={() => void handleExport()} readCapability={capabilities.read} resource={code} surface={surface} title={name}>
+    <MobileResourceListPage
+      createCapability={capabilities.create}
+      createPath={`/${code}/new`}
+      description={`${code} 资源`}
+      onExport={() => void handleExport()}
+      readCapability={capabilities.read}
+      resource={code}
+      surface={surface}
+      title={name}
+    >
       {state.list.query.isError && (
         <Alert
-          action={<Button onClick={() => void state.list.query.refetch()} size="small">重试</Button>}
+          action={
+            <Button onClick={() => void state.list.query.refetch()} size="small">
+              重试
+            </Button>
+          }
           description={state.list.query.error instanceof Error ? state.list.query.error.message : '请稍后重试或联系平台管理员'}
-          message="数据读取失败"
           showIcon
+          title="数据读取失败"
           type="error"
         />
       )}
       <div className="oxa-mobile-filter">
-        <Input allowClear placeholder="关键词" value={state.draft.keyword} onChange={event => state.setDraft(item => ({ ...item, keyword: event.target.value }))} onPressEnter={() => { state.setPage(1); state.setQuery(state.draft); }} />
-        <Button loading={state.list.query.isFetching} icon={<SearchOutlined />} onClick={() => { state.setPage(1); state.setQuery(state.draft); }} type="primary">查询</Button>
+        <Input
+          allowClear
+          placeholder="关键词"
+          value={state.draft.keyword}
+          onChange={(event) => state.setDraft((item) => ({ ...item, keyword: event.target.value }))}
+          onPressEnter={() => {
+            state.setPage(1);
+            state.setQuery(state.draft);
+          }}
+        />
+        <Button
+          loading={state.list.query.isFetching}
+          icon={<SearchOutlined />}
+          onClick={() => {
+            state.setPage(1);
+            state.setQuery(state.draft);
+          }}
+          type="primary"
+        >
+          查询
+        </Button>
+      </div>
+      {state.list.query.isFetching ? (
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
+      ) : rows.length ? (
+        <div className="oxa-mobile-record-list">
+          {rows.map((record) => (
+            <Card className="oxa-mobile-record-card" key={record.id} size="small">
+              <div className="oxa-mobile-record-heading">
+                <a onClick={() => navigate(`/${code}/${record.id}`)}>{String(record[fields[0]?.key || 'id'] || '-')}</a>
+              </div>
+              <div className="oxa-mobile-record-fields">
+                {fields.slice(1).map((field) => (
+                  <div key={field.key}>
+                    <Typography.Text type="secondary">{field.label}</Typography.Text>
+                    <div>
+                      <SurfaceFieldValue field={field} value={record[field.key]} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <Space>
+                <Button onClick={() => navigate(`/${code}/${record.id}`)} size="small">
+                  查看
+                </Button>
+                {hasCapability(capabilities.update) && (
+                  <Button onClick={() => navigate(`/${code}/${record.id}/edit`)} size="small">
+                    编辑
+                  </Button>
+                )}
+              </Space>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <Empty description={`暂无${name}`} />
+        </Card>
+      )}
+      <div className="oxa-mobile-pagination">
+        <Button disabled={state.page <= 1} onClick={() => state.setPage((item) => item - 1)}>
+          上一页
+        </Button>
+        <Typography.Text>第 {state.page} 页</Typography.Text>
+        <Button disabled={rows.length < (surface.list?.defaultPageSize || 20)} onClick={() => state.setPage((item) => item + 1)}>
+          下一页
+        </Button>
       </div>
-      {state.list.query.isFetching ? <div className="oxa-page-loading"><Spin /></div> : rows.length ? <div className="oxa-mobile-record-list">{rows.map(record => <Card className="oxa-mobile-record-card" key={record.id} size="small"><div className="oxa-mobile-record-heading"><a onClick={() => navigate(`/${code}/${record.id}`)}>{String(record[fields[0]?.key || 'id'] || '-')}</a></div><div className="oxa-mobile-record-fields">{fields.slice(1).map(field => <div key={field.key}><Typography.Text type="secondary">{field.label}</Typography.Text><div><SurfaceFieldValue field={field} value={record[field.key]} /></div></div>)}</div><Space><Button onClick={() => navigate(`/${code}/${record.id}`)} size="small">查看</Button>{hasCapability(capabilities.update) && <Button onClick={() => navigate(`/${code}/${record.id}/edit`)} size="small">编辑</Button>}</Space></Card>)}</div> : <Card><Empty description={`暂无${name}`} /></Card>}
-      <div className="oxa-mobile-pagination"><Button disabled={state.page <= 1} onClick={() => state.setPage(item => item - 1)}>上一页</Button><Typography.Text>第 {state.page} 页</Typography.Text><Button disabled={rows.length < (surface.list?.defaultPageSize || 20)} onClick={() => state.setPage(item => item + 1)}>下一页</Button></div>
     </MobileResourceListPage>
   );
 }
 
-function GeneratedResourceFormPage({ definition, mode, variant }: { definition: GeneratedDefinition; mode: 'create' | 'edit'; variant: 'desktop' | 'mobile' }) {
+function GeneratedResourceFormPage({
+  definition,
+  mode,
+  variant,
+}: {
+  definition: GeneratedDefinition;
+  mode: 'create' | 'edit';
+  variant: 'desktop' | 'mobile';
+}) {
   const { id = '' } = useParams();
   const navigate = useNavigate();
   const { message } = App.useApp();
@@ -438,32 +812,97 @@ function GeneratedResourceFormPage({ definition, mode, variant }: { definition:
   const [form] = Form.useForm();
   const create = useCreate<ResourceRecord>();
   const update = useUpdate<ResourceRecord>();
-  const query = useOne<ResourceRecord>({ resource: definition.code, id, queryOptions: { enabled: mode === 'edit' } });
+  const query = useOne<ResourceRecord>({
+    resource: definition.code,
+    id,
+    queryOptions: { enabled: mode === 'edit' },
+  });
   const record = query.result;
   const { code, name, surface, capabilities } = definition;
-  useEffect(() => { if (record) form.setFieldsValue(normalizeRecordForForm(record, surface)); }, [form, record, surface]);
+  useEffect(() => {
+    if (record) form.setFieldsValue(normalizeRecordForForm(record, surface));
+  }, [form, record, surface]);
   const listPath = `/${code}`;
   const detailPath = `/${code}/${id}`;
   const Page = variant === 'mobile' ? MobileResourceFormPage : ResourceFormPage;
   const FieldControl = variant === 'mobile' ? MobileSurfaceFieldControl : SurfaceFieldControl;
-  if (!hasCapability(mode === 'create' ? capabilities.create : capabilities.update)) return <Result status="403" title="当前平台用户无此操作权限" />;
+  if (!hasCapability(mode === 'create' ? capabilities.create : capabilities.update))
+    return <Result status="403" title="当前平台用户无此操作权限" />;
   const submit = async (values: Record<string, unknown>) => {
     const next = normalizeFormValues(
       Object.fromEntries(
         Object.entries(values).filter(([key]) =>
-          fieldWritable(surface.fields[key] ? { key, ...surface.fields[key] } : { key, label: key, widget: 'text' }, mode, hasCapability, identity.isAppSuperAdmin)
+          fieldWritable(
+            surface.fields[key] ? { key, ...surface.fields[key] } : { key, label: key, widget: 'text' },
+            mode,
+            hasCapability,
+            identity.isAppSuperAdmin
+          )
         )
       ),
       surface
     );
-    if (mode === 'create') { await create.mutateAsync({ resource: code, values: next }); message.success(`${name}已创建`); navigate(listPath); }
-    else { const result = await update.mutateAsync({ resource: code, id, values: next, meta: { expectedRevision: record?.revision } }); message.success('修改已保存'); navigate(`/${code}/${result.data.id}`); }
+    if (mode === 'create') {
+      await create.mutateAsync({ resource: code, values: next });
+      message.success(`${name}已创建`);
+      navigate(listPath);
+    } else {
+      const result = await update.mutateAsync({
+        resource: code,
+        id,
+        values: next,
+        meta: { expectedRevision: record?.revision },
+      });
+      message.success('修改已保存');
+      navigate(`/${code}/${result.data.id}`);
+    }
   };
   return (
-    <Page backLabel={mode === 'edit' ? `返回${name}详情` : `返回${name}`} backPath={mode === 'edit' ? detailPath : listPath} capability={mode === 'create' ? capabilities.create : capabilities.update} detailPath={record ? detailPath : undefined} loading={mode === 'edit' && query.query.isFetching} mode={mode} notFound={mode === 'edit' && !record} recordSummary={record ? `${name} · 当前版本 ${record.revision}` : undefined} resource={code} surface={surface} title={name}>
-      <Form className={variant === 'mobile' ? 'oxa-mobile-form' : 'oxa-form-full'} form={form} initialValues={undefined} layout="vertical" onFinish={values => void submit(values as Record<string, unknown>)}>
-        <div className="oxa-sections">{fieldsBySection(surface).map(group => <Card className="oxa-section-card" key={group.section} title={group.section === 'default' ? '基本信息' : group.section}><div className="oxa-grid">{group.fields.map(field => <FieldControl key={field.key} disabled={!fieldWritable(field, mode, hasCapability, identity.isAppSuperAdmin)} field={field} operation={mode === 'create' ? 'create' : 'update'} recordId={record?.id} renderers={{ upload: (current, file, recordId) => createNativeResourceClient(code, surface).upload(current.key, file, recordId) }} />)}</div></Card>)}</div>
-        <div className="oxa-actions"><Button onClick={() => navigate(mode === 'edit' ? detailPath : listPath)}>取消</Button><Button htmlType="submit" loading={create.mutation.isPending || update.mutation.isPending} type="primary">{mode === 'create' ? '保存' : '保存修改'}</Button></div>
+    <Page
+      backLabel={mode === 'edit' ? `返回${name}详情` : `返回${name}`}
+      backPath={mode === 'edit' ? detailPath : listPath}
+      capability={mode === 'create' ? capabilities.create : capabilities.update}
+      detailPath={record ? detailPath : undefined}
+      loading={mode === 'edit' && query.query.isFetching}
+      mode={mode}
+      notFound={mode === 'edit' && !record}
+      resource={code}
+      surface={surface}
+      title={name}
+    >
+      <Form
+        className={variant === 'mobile' ? 'oxa-mobile-form' : 'oxa-form-full'}
+        form={form}
+        initialValues={undefined}
+        layout="vertical"
+        onFinish={(values) => void submit(values as Record<string, unknown>)}
+      >
+        <div className="oxa-sections">
+          {fieldsBySection(surface).map((group) => (
+            <Card className="oxa-section-card" key={group.section} title={group.section === 'default' ? '基本信息' : group.section}>
+              <div className="oxa-grid">
+                {group.fields.map((field) => (
+                  <FieldControl
+                    key={field.key}
+                    disabled={!fieldWritable(field, mode, hasCapability, identity.isAppSuperAdmin)}
+                    field={field}
+                    operation={mode === 'create' ? 'create' : 'update'}
+                    recordId={record?.id}
+                    renderers={{
+                      upload: (current, file, recordId) => createNativeResourceClient(code, surface).upload(current.key, file, recordId),
+                    }}
+                  />
+                ))}
+              </div>
+            </Card>
+          ))}
+        </div>
+        <div className="oxa-actions">
+          <Button onClick={() => navigate(mode === 'edit' ? detailPath : listPath)}>取消</Button>
+          <Button htmlType="submit" loading={create.mutation.isPending || update.mutation.isPending} type="primary">
+            {mode === 'create' ? '保存' : '保存修改'}
+          </Button>
+        </div>
       </Form>
     </Page>
   );
@@ -472,21 +911,31 @@ function GeneratedResourceFormPage({ definition, mode, variant }: { definition:
 function GeneratedResourceDetailPage({ definition, variant }: { definition: GeneratedDefinition; variant: 'desktop' | 'mobile' }) {
   const { id = '' } = useParams();
   const navigate = useNavigate();
-  const query = useOne<ResourceRecord>({ resource: definition.code, id, queryOptions: { retry: false } });
+  const query = useOne<ResourceRecord>({
+    resource: definition.code,
+    id,
+    queryOptions: { retry: false },
+  });
   const record = query.result;
   const [auditEntries, setAuditEntries] = useState<DataAuditEntry[]>([]);
   const [auditLoading, setAuditLoading] = useState(false);
   const [auditError, setAuditError] = useState('');
+  const [auditExpanded, setAuditExpanded] = useState(false);
+  const [auditLoadedFor, setAuditLoadedFor] = useState('');
   useEffect(() => {
-    if (!record) return;
+    if (!record || !auditExpanded || auditLoadedFor === record.id) return;
     let active = true;
     setAuditLoading(true);
     setAuditError('');
-    void createNativeResourceClient(definition.code, definition.surface).audit(record.id)
-      .then(page => {
-        if (active) setAuditEntries(page.items || []);
+    void createNativeResourceClient(definition.code, definition.surface)
+      .audit(record.id)
+      .then((page) => {
+        if (active) {
+          setAuditEntries(page.items || []);
+          setAuditLoadedFor(record.id);
+        }
       })
-      .catch(reason => {
+      .catch((reason) => {
         if (!active) return;
         setAuditEntries([]);
         setAuditError(reason instanceof Error ? reason.message : String(reason));
@@ -497,9 +946,96 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
     return () => {
       active = false;
     };
-  }, [definition.code, definition.surface, record?.id]);
-  const content = record ? <div className="oxa-detail-layout"> <div className="oxa-detail-main">{fieldsBySection(definition.surface).map(group => <Card className="oxa-section-card" key={group.section} title={group.section === 'default' ? '基本信息' : group.section}><Descriptions column={{ xs: 1, sm: 2, lg: 3 }} items={group.fields.map(field => ({ key: field.key, label: field.label, children: <SurfaceFieldValue field={field} value={record[field.key]} /> }))} /></Card>)}</div><aside className="oxa-detail-aside"><Card className="oxa-section-card" id={`${definition.code}-audit`} loading={auditLoading} title="最近变更">{auditError ? <Alert message="变更记录读取失败" description={auditError} type="error" showIcon /> : auditEntries.length ? auditEntries.slice(0, 5).map(entry => <AuditEntry entry={entry} key={entry.id} surface={definition.surface} />) : <Typography.Text type="secondary">暂无变更记录</Typography.Text>}</Card></aside></div> : null;
-  const hero = record ? <div><Typography.Title level={variant === 'mobile' ? 3 : 2}>{definition.name}详情</Typography.Title><Typography.Text type="secondary">{record.id} · 版本 {record.revision}</Typography.Text></div> : null;
-  const props = { backLabel: `返回${definition.name}`, backPath: `/${definition.code}`, editCapability: definition.capabilities.update, editPath: `/${definition.code}/${id}/edit`, error: query.query.isError || (!query.query.isFetching && !record) ? query.query.error?.message || '记录不存在' : undefined, hero, loading: query.query.isFetching, meta: record ? <><span>版本 {record.revision}</span><span>最近更新 {record.updated_at ? new Date(record.updated_at).toLocaleString('zh-CN') : '-'}</span></> : null, readCapability: definition.capabilities.read, resource: definition.code, surface: definition.surface, title: definition.name };
-  return variant === 'mobile' ? <MobileResourceDetailPage {...props} auditTargetId={`${definition.code}-audit`}>{content}</MobileResourceDetailPage> : <ResourceDetailPage {...props} auditTargetId={`${definition.code}-audit`}>{content}</ResourceDetailPage>;
+  }, [auditExpanded, auditLoadedFor, definition.code, definition.surface, record]);
+  const auditContent = auditError ? (
+    <Alert
+      action={
+        <Button
+          onClick={() => {
+            setAuditError('');
+            setAuditLoadedFor('');
+          }}
+          size="small"
+        >
+          重试
+        </Button>
+      }
+      description={auditError}
+      showIcon
+      title="变更记录读取失败"
+      type="error"
+    />
+  ) : auditLoading ? (
+    <div className="oxa-audit-loading">
+      <Spin size="small" /> 正在读取操作记录
+    </div>
+  ) : auditEntries.length ? (
+    auditEntries.slice(0, 5).map((entry) => <AuditEntry entry={entry} key={entry.id} surface={definition.surface} />)
+  ) : (
+    <Typography.Text type="secondary">暂无变更记录</Typography.Text>
+  );
+  const content = record ? (
+    <div className="oxa-detail-layout">
+      <div className="oxa-detail-main">
+        {fieldsBySection(definition.surface).map((group) => (
+          <Card className="oxa-section-card" key={group.section} title={group.section === 'default' ? '基本信息' : group.section}>
+            <Descriptions
+              column={{ xs: 1, sm: 2, lg: 3 }}
+              items={group.fields.map((field) => ({
+                key: field.key,
+                label: field.label,
+                children: <SurfaceFieldValue field={field} value={record[field.key]} />,
+              }))}
+            />
+          </Card>
+        ))}
+        <div id={`${definition.code}-audit`}>
+          <Collapse
+            activeKey={auditExpanded ? ['audit'] : []}
+            className="oxa-audit-collapse"
+            expandIconPlacement="end"
+            items={[
+              {
+                key: 'audit',
+                label: (
+                  <div className="oxa-audit-collapse-heading">
+                    <strong>操作记录</strong>
+                    <span>查看创建、更新和删除的字段变化</span>
+                  </div>
+                ),
+                children: auditContent,
+              },
+            ]}
+            onChange={(keys) => setAuditExpanded((Array.isArray(keys) ? keys : [keys]).includes('audit'))}
+          />
+        </div>
+      </div>
+    </div>
+  ) : null;
+  const hero = record ? (
+    <div>
+      <Typography.Title level={variant === 'mobile' ? 3 : 2}>{definition.name}详情</Typography.Title>
+    </div>
+  ) : null;
+  const props = {
+    auditTargetId: `${definition.code}-audit`,
+    backLabel: `返回${definition.name}`,
+    backPath: `/${definition.code}`,
+    editCapability: definition.capabilities.update,
+    editPath: `/${definition.code}/${id}/edit`,
+    error: query.query.isError || (!query.query.isFetching && !record) ? query.query.error?.message || '记录不存在' : undefined,
+    hero,
+    loading: query.query.isFetching,
+    meta: record ? <span>最近更新 {record.updated_at ? new Date(record.updated_at).toLocaleString('zh-CN') : '-'}</span> : null,
+    onAuditOpen: () => setAuditExpanded(true),
+    readCapability: definition.capabilities.read,
+    resource: definition.code,
+    surface: definition.surface,
+    title: definition.name,
+  };
+  return variant === 'mobile' ? (
+    <MobileResourceDetailPage {...props}>{content}</MobileResourceDetailPage>
+  ) : (
+    <ResourceDetailPage {...props}>{content}</ResourceDetailPage>
+  );
 }