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

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

@@ -5,7 +5,6 @@ import {
   EditOutlined,
   EyeOutlined,
   ExportOutlined,
-  ImportOutlined,
   PlusOutlined,
   ReloadOutlined,
   SearchOutlined,
@@ -60,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;
@@ -70,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;
 };
 
@@ -92,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];
     })
   );
 }
@@ -111,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);
@@ -134,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) {
@@ -149,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));
@@ -180,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);
@@ -201,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;
@@ -225,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} />
         )}
@@ -234,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 (
@@ -265,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,
@@ -279,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({
@@ -302,36 +325,46 @@ 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 }) {
   const navigate = useNavigate();
   const { message } = App.useApp();
-  const { hasCapability } = useRuntime();
+  const { hasCapability, identity } = useRuntime();
   const state = useGeneratedList(definition);
   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 [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[];
   useEffect(() => {
-    setVisibleColumnKeys(fields.map(field => field.key));
+    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 => ({
+        .filter((field) => visibleColumnKeys.includes(field.key))
+        .map((field) => ({
           title: field.label,
           dataIndex: field.key,
           key: field.key,
@@ -343,9 +376,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
               renderers={{
                 renderValue: ({ value: current }) =>
                   field.key === fields[0]?.key ? (
-                    <a onClick={() => navigate(`/${code}/${record.id}`)}>
-                      {String(current || '-')}
-                    </a>
+                    <a onClick={() => navigate(`/${code}/${record.id}`)}>{String(current || '-')}</a>
                   ) : undefined,
               }}
             />
@@ -355,8 +386,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
         title: '更新时间',
         dataIndex: 'updated_at',
         key: 'updated_at',
-        render: value =>
-          value ? new Date(String(value)).toLocaleString('zh-CN') : '-',
+        render: (value) => (value ? new Date(String(value)).toLocaleString('zh-CN') : '-'),
       },
       {
         title: '操作',
@@ -364,13 +394,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
         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"
-            />
+            <Button aria-label="查看" icon={<EyeOutlined />} onClick={() => navigate(`/${code}/${record.id}`)} size="small" type="text" />
             {hasCapability(capabilities.update) && (
               <Button
                 aria-label="编辑"
@@ -394,18 +418,12 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
                         message.success('已删除');
                         void state.list.query.refetch();
                       },
-                    },
+                    }
                   )
                 }
                 title={`确定删除${name}？`}
               >
-                <Button
-                  aria-label="删除"
-                  danger
-                  icon={<DeleteOutlined />}
-                  size="small"
-                  type="text"
-                />
+                <Button aria-label="删除" danger icon={<DeleteOutlined />} size="small" type="text" />
               </Popconfirm>
             )}
           </Space>
@@ -424,7 +442,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
       remove,
       state.list.query,
       visibleColumnKeys,
-    ],
+    ]
   );
   const handleExport = async () => {
     setExporting(true);
@@ -440,12 +458,11 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
   const filterFields = surface.list?.filterFields || [];
   const hasMoreFilters = filterFields.length > 2;
   const columnMenu: MenuProps = {
-    items: fields.map(field => ({ key: field.key, label: field.label })),
+    items: fields.map((field) => ({ key: field.key, label: field.label })),
     multiple: true,
     selectable: true,
     selectedKeys: visibleColumnKeys,
-    onSelect: ({ selectedKeys }) =>
-      setVisibleColumnKeys(selectedKeys.map(String)),
+    onSelect: ({ selectedKeys }) => setVisibleColumnKeys(selectedKeys.map(String)),
     onDeselect: ({ selectedKeys }) => {
       if (selectedKeys.length) setVisibleColumnKeys(selectedKeys.map(String));
       else message.info('至少保留一列');
@@ -472,7 +489,11 @@ 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 : '请稍后重试或联系平台管理员'}
           showIcon
           title="数据读取失败"
@@ -484,22 +505,20 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
           <div className="oxa-filter-item">
             <Select
               allowClear
-              options={(surface.list?.searchableFields || []).map(key => ({
+              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 }))
-              }
+              onChange={(value) => state.setDraft((item) => ({ ...item, searchField: value }))}
             />
           </div>
           <div className="oxa-filter-item">
             <Input
               allowClear
-              onChange={event =>
-                state.setDraft(item => ({
+              onChange={(event) =>
+                state.setDraft((item) => ({
                   ...item,
                   keyword: event.target.value,
                 }))
@@ -516,14 +535,11 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
           {filterFields.map((key, index) => {
             const field = fieldFor(surface, key);
             return (
-              <div
-                className={`oxa-filter-item${index >= 2 && !filtersExpanded ? ' is-collapsed' : ''}`}
-                key={key}
-              >
+              <div className={`oxa-filter-item${index >= 2 && !filtersExpanded ? ' is-collapsed' : ''}`} key={key}>
                 <SurfaceFilterControl
                   field={field}
-                  onChange={value =>
-                    state.setDraft(item => ({
+                  onChange={(value) =>
+                    state.setDraft((item) => ({
                       ...item,
                       filters: { ...item.filters, [key]: value },
                     }))
@@ -558,7 +574,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
           {hasMoreFilters && (
             <Button
               icon={filtersExpanded ? <UpOutlined /> : <DownOutlined />}
-              onClick={() => setFiltersExpanded(value => !value)}
+              onClick={() => setFiltersExpanded((value) => !value)}
               type="link"
             >
               {filtersExpanded ? '收起筛选' : `更多筛选（${filterFields.length - 2}）`}
@@ -569,26 +585,20 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
       <div className="oxa-list-toolbar">
         <Space className="oxa-list-toolbar-primary" wrap>
           {hasCapability(capabilities.create) && (
-            <Button
-              icon={<PlusOutlined />}
-              onClick={() => navigate(`/${code}/new`)}
-              type="primary"
-            >
+            <Button icon={<PlusOutlined />} onClick={() => navigate(`/${code}/new`)} type="primary">
               新增{name}
             </Button>
           )}
-          <Button
-            disabled
-            icon={<ImportOutlined />}
-            title="导入能力将在批量事务合同落地后启用"
-          >
-            导入
-          </Button>
-          <Button
-            icon={<ExportOutlined />}
-            loading={exporting}
-            onClick={() => void handleExport()}
-          >
+          {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>
@@ -614,16 +624,54 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
           </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"
+        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); } }}
+        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>
   );
@@ -650,10 +698,23 @@ 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 : '请稍后重试或联系平台管理员'}
           showIcon
           title="数据读取失败"
@@ -661,16 +722,89 @@ function GeneratedMobileList({ definition }: { definition: GeneratedDefinition }
         />
       )}
       <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();
@@ -678,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} 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>
   );
@@ -712,7 +911,11 @@ 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);
@@ -724,14 +927,15 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
     let active = true;
     setAuditLoading(true);
     setAuditError('');
-    void createNativeResourceClient(definition.code, definition.surface).audit(record.id)
-      .then(page => {
+    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));
@@ -762,37 +966,25 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
       type="error"
     />
   ) : auditLoading ? (
-    <div className="oxa-audit-loading"><Spin size="small" /> 正在读取操作记录</div>
+    <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}
-        />
-      ))
+    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}
-          >
+        {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 => ({
+              items={group.fields.map((field) => ({
                 key: field.key,
                 label: field.label,
-                children: (
-                  <SurfaceFieldValue field={field} value={record[field.key]} />
-                ),
+                children: <SurfaceFieldValue field={field} value={record[field.key]} />,
               }))}
             />
           </Card>
@@ -814,11 +1006,7 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
                 children: auditContent,
               },
             ]}
-            onChange={keys =>
-              setAuditExpanded(
-                (Array.isArray(keys) ? keys : [keys]).includes('audit'),
-              )
-            }
+            onChange={(keys) => setAuditExpanded((Array.isArray(keys) ? keys : [keys]).includes('audit'))}
           />
         </div>
       </div>
@@ -826,9 +1014,7 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
   ) : null;
   const hero = record ? (
     <div>
-      <Typography.Title level={variant === 'mobile' ? 3 : 2}>
-        {definition.name}详情
-      </Typography.Title>
+      <Typography.Title level={variant === 'mobile' ? 3 : 2}>{definition.name}详情</Typography.Title>
     </div>
   ) : null;
   const props = {
@@ -837,20 +1023,10 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
     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,
+    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,
+    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,