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

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

@@ -1,4 +1,5 @@
 import {
+  ArrowRightOutlined,
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
@@ -8,6 +9,7 @@ import {
 import { useCreate, useDelete, useList, useOne, useUpdate } from '@refinedev/core';
 import {
   App,
+  Alert,
   Button,
   Card,
   Descriptions,
@@ -45,6 +47,7 @@ import {
   type SurfaceField,
 } from './SurfaceFields';
 import { createNativeResourceClient, type GenericResourceQuery } from '../../platform-client';
+import { ResolvedValueText } from '../../AuthoritativeSelector';
 import { useRuntime } from '../../runtime';
 
 type ResourceRecord = Record<string, unknown> & {
@@ -119,17 +122,146 @@ function fieldWritable(
   return mode === 'create';
 }
 
+function auditOperationLabel(operation: DataAuditEntry['operation']) {
+  return operation === 'created'
+    ? '创建'
+    : operation === 'deleted'
+      ? '删除'
+      : '更新';
+}
+
+function auditValue(field: SurfaceField, value: unknown) {
+  if (value === undefined || value === null || value === '') {
+    return <Typography.Text type="secondary">-</Typography.Text>;
+  }
+  return <SurfaceFieldValue field={field} value={value} />;
+}
+
+function auditChangeFields(entry: DataAuditEntry, surface: DataResourceSurface) {
+  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));
+}
+
+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);
+  }
+  if (Array.isArray(value)) {
+    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));
+    if (!Number.isNaN(parsed.getTime())) return parsed.toLocaleString('zh-CN', { hour12: false });
+  }
+  if (typeof value === 'object' && value && 'id' in value) return String((value as { id: unknown }).id);
+  return String(value);
+}
+
+function csvCell(value: string) {
+  return /[\r\n,"]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+}
+
+async function exportResourceRows(
+  code: string,
+  name: string,
+  surface: DataResourceSurface,
+  query: Partial<GenericResourceQuery>,
+  sort: { field: string; order: 'asc' | 'desc' },
+) {
+  const client = createNativeResourceClient(code, surface);
+  const fields = listSurfaceFields(surface.fields);
+  const rows: ResourceRecord[] = [];
+  const pageSize = 500;
+  let page = 1;
+  let total = 0;
+  do {
+    const result = await client.list({
+      page,
+      pageSize,
+      keyword: query.keyword,
+      searchField: query.searchField,
+      filters: query.filters,
+      sort,
+    });
+    rows.push(...(result.rows as ResourceRecord[]));
+    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 url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = `${name}-${dayjs().format('YYYYMMDD-HHmmss')}.csv`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+  return { count: rows.length, truncated: rows.length < total };
+}
+
+function AuditEntry({ entry, surface }: { entry: DataAuditEntry; surface: DataResourceSurface }) {
+  const fields = auditChangeFields(entry, surface);
+  const changes = entry.changes || entry.record || entry.before || {};
+  return (
+    <div className="oxa-audit-entry">
+      <div className="oxa-audit-heading">
+        <strong>{auditOperationLabel(entry.operation)}</strong>
+        <Typography.Text type="secondary">版本 {entry.revision}</Typography.Text>
+      </div>
+      <div className="oxa-audit-meta">
+        <span>操作人</span>
+        {entry.actor.principalType === 'application' ? (
+          <Typography.Text>应用服务{entry.actor.oauthClientId ? `（${entry.actor.oauthClientId}）` : ''}</Typography.Text>
+        ) : (
+          <ResolvedValueText source="user" value={entry.actor.userId} />
+        )}
+        <span>时间</span>
+        <Typography.Text>{new Date(entry.occurredAt).toLocaleString('zh-CN')}</Typography.Text>
+      </div>
+      {fields.length ? (
+        <div className="oxa-audit-changes">
+          {fields.map(field => {
+            const before = entry.operation === 'created' ? undefined : entry.before?.[field.key];
+            const after = entry.operation === 'deleted' ? undefined : changes[field.key];
+            return (
+              <div className="oxa-audit-change" key={field.key}>
+                <Typography.Text strong>{field.label}</Typography.Text>
+                <div className="oxa-audit-change-values">
+                  {auditValue(field, before)}
+                  <ArrowRightOutlined />
+                  {auditValue(field, after)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <Typography.Text type="secondary">未发生字段变化</Typography.Text>
+      )}
+    </div>
+  );
+}
+
 function useGeneratedList(definition: GeneratedDefinition) {
   const { code, surface } = definition;
-  const defaultSort = surface.list?.defaultSort || {
-    field: Object.keys(surface.fields)[0] || 'id',
-    order: 'asc' as const,
-  };
+  const defaultSortField = surface.list?.defaultSort?.field || Object.keys(surface.fields)[0] || 'id';
+  const defaultSortOrder = surface.list?.defaultSort?.order || 'asc';
+  const defaultPageSize = surface.list?.defaultPageSize || 20;
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(surface.list?.defaultPageSize || 20);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [draft, setDraft] = useState<Partial<GenericResourceQuery>>({});
   const [query, setQuery] = useState<Partial<GenericResourceQuery>>({});
-  const [sort, setSort] = useState({ field: defaultSort.field, order: defaultSort.order || 'asc' as const });
+  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' });
+  }, [code, defaultPageSize, defaultSortField, defaultSortOrder]);
   const list = useList<ResourceRecord>({
     resource: code,
     pagination: { currentPage: page, pageSize },
@@ -152,9 +284,10 @@ export function GeneratedResourcePage({
   if (!definition || definition.surface.generated === false) {
     return <Result status="404" title="未声明可生成的资源页面" />;
   }
-  if (mode === 'list') return <GeneratedResourceListPage definition={definition} variant={variant} />;
-  if (mode === 'detail') return <GeneratedResourceDetailPage definition={definition} variant={variant} />;
-  return <GeneratedResourceFormPage definition={definition} mode={mode} variant={variant} />;
+  const pageKey = `${variant}:${mode}:${resourceCode}`;
+  if (mode === 'list') return <GeneratedResourceListPage key={pageKey} definition={definition} variant={variant} />;
+  if (mode === 'detail') return <GeneratedResourceDetailPage key={pageKey} definition={definition} variant={variant} />;
+  return <GeneratedResourceFormPage key={pageKey} definition={definition} mode={mode} variant={variant} />;
 }
 
 function GeneratedResourceListPage({ definition, variant }: { definition: GeneratedDefinition; variant: 'desktop' | 'mobile' }) {
@@ -170,6 +303,7 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
   const state = useGeneratedList(definition);
   const { code, name, surface, capabilities } = definition;
   const fields = listSurfaceFields(surface.fields);
+  const [exporting, setExporting] = useState(false);
   const remove = useDelete();
   const rows = (state.list.result.data || []) as unknown as ResourceRecord[];
   const columns = useMemo<TableColumnsType<ResourceRecord>>(() => [
@@ -199,17 +333,37 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
       ),
     },
   ], [capabilities.delete, capabilities.update, code, fields, hasCapability, message, name, navigate, remove, state.list.query]);
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      const result = await exportResourceRows(code, name, surface, state.query, state.sort);
+      message.success(result.truncated ? `已导出 ${result.count} 条（最多导出 10000 条）` : `已导出 ${result.count} 条`);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '导出失败');
+    } finally {
+      setExporting(false);
+    }
+  };
   return (
     <ResourceListPage
       createCapability={capabilities.create}
       createPath={`/${code}/new`}
       description={`由 ${code} 资源 Surface 自动生成的标准 CRUD 页面`}
-      onExport={() => message.info('导出将使用当前 Data API 查询条件')}
+      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>}
+          description={state.list.query.error instanceof Error ? state.list.query.error.message : '请稍后重试或联系平台管理员'}
+          message="数据读取失败"
+          showIcon
+          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 }))} />
@@ -218,14 +372,14 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
           return <SurfaceFilterControl key={key} field={field} value={state.draft.filters?.[key]} onChange={value => state.setDraft(item => ({ ...item, filters: { ...item.filters, [key]: value } }))} />;
         })}
         <Space>
-          <Button type="primary" icon={<SearchOutlined />} onClick={() => { state.setPage(1); state.setQuery(state.draft); }}>查询</Button>
+          <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>
         </Space>
       </div>
       <Table<ResourceRecord>
         columns={columns}
         dataSource={rows}
-        loading={state.list.query.isLoading}
+        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' }); }}
@@ -238,17 +392,39 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
 function GeneratedMobileList({ definition }: { definition: GeneratedDefinition }) {
   const navigate = useNavigate();
   const { hasCapability } = useRuntime();
+  const { message } = App.useApp();
   const { code, name, surface, capabilities } = definition;
   const state = useGeneratedList(definition);
+  const [exporting, setExporting] = useState(false);
   const rows = (state.list.result.data || []) as unknown as ResourceRecord[];
   const fields = listSurfaceFields(surface.fields).slice(0, 4);
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      const result = await exportResourceRows(code, name, surface, state.query, state.sort);
+      message.success(result.truncated ? `已导出 ${result.count} 条（最多导出 10000 条）` : `已导出 ${result.count} 条`);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '导出失败');
+    } finally {
+      setExporting(false);
+    }
+  };
   return (
-    <MobileResourceListPage createCapability={capabilities.create} createPath={`/${code}/new`} description={`${code} 资源`} 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>}
+          description={state.list.query.error instanceof Error ? state.list.query.error.message : '请稍后重试或联系平台管理员'}
+          message="数据读取失败"
+          showIcon
+          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 icon={<SearchOutlined />} onClick={() => { state.setPage(1); state.setQuery(state.draft); }} type="primary">查询</Button>
+        <Button loading={state.list.query.isFetching} icon={<SearchOutlined />} onClick={() => { state.setPage(1); state.setQuery(state.draft); }} type="primary">查询</Button>
       </div>
-      {state.list.query.isLoading ? <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>}
+      {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>
   );
@@ -269,6 +445,7 @@ function GeneratedResourceFormPage({ definition, mode, variant }: { definition:
   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="当前平台用户无此操作权限" />;
   const submit = async (values: Record<string, unknown>) => {
     const next = normalizeFormValues(
@@ -283,10 +460,10 @@ function GeneratedResourceFormPage({ definition, mode, variant }: { definition:
     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.isLoading} mode={mode} notFound={mode === 'edit' && !record} recordSummary={record ? `${name} · 当前版本 ${record.revision}` : undefined} resource={code} surface={surface} title={name}>
+    <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 => <SurfaceFieldControl 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" type="primary">{mode === 'create' ? '保存' : '保存修改'}</Button></div>
+        <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>
   );
@@ -298,9 +475,31 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
   const query = useOne<ResourceRecord>({ resource: definition.code, id, queryOptions: { retry: false } });
   const record = query.result;
   const [auditEntries, setAuditEntries] = useState<DataAuditEntry[]>([]);
-  useEffect(() => { if (!record) return; void createNativeResourceClient(definition.code, definition.surface).audit(record.id).then(page => setAuditEntries(page.items || []), () => setAuditEntries([])); }, [definition, record]);
-  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`} title="最近变更">{auditEntries.length ? auditEntries.slice(0, 5).map(entry => <div className="oxa-audit-entry" key={`${entry.occurredAt}-${entry.operation}`}><strong>{entry.operation}</strong><span>{new Date(entry.occurredAt).toLocaleString('zh-CN')}</span></div>) : <Typography.Text type="secondary">暂无变更记录</Typography.Text>}</Card></aside></div> : null;
+  const [auditLoading, setAuditLoading] = useState(false);
+  const [auditError, setAuditError] = useState('');
+  useEffect(() => {
+    if (!record) return;
+    let active = true;
+    setAuditLoading(true);
+    setAuditError('');
+    void createNativeResourceClient(definition.code, definition.surface).audit(record.id)
+      .then(page => {
+        if (active) setAuditEntries(page.items || []);
+      })
+      .catch(reason => {
+        if (!active) return;
+        setAuditEntries([]);
+        setAuditError(reason instanceof Error ? reason.message : String(reason));
+      })
+      .finally(() => {
+        if (active) setAuditLoading(false);
+      });
+    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.isLoading && !record) ? query.query.error?.message || '记录不存在' : undefined, hero, loading: query.query.isLoading, 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 };
+  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>;
 }

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

@@ -21,8 +21,12 @@ import type {
   DataFileRef,
 } from 'openxiangda-contracts/browser';
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { AuthoritativeSelector, ResolvedValueText } from '../../AuthoritativeSelector';
-import { AttachmentFileList } from '../platform-fields/AttachmentFileList';
+import {
+  AuthoritativeSelector,
+  MobileAuthoritativeSelector,
+  ResolvedValueText,
+} from '../../AuthoritativeSelector';
+import { AttachmentFileList, formatManagedFileSize } from '../platform-fields/AttachmentFileList';
 import { PlatformDirectoryPicker } from '../platform-fields/PlatformDirectoryPicker';
 
 export type SurfaceField = DataFieldSurface & { key: string };
@@ -321,7 +325,7 @@ export function MobileSurfaceFieldControl({
       break;
     case 'resource':
       control = (
-        <AuthoritativeSelector
+        <MobileAuthoritativeSelector
           disabled={disabled}
           labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined}
           multiple={field.multiple}
@@ -340,6 +344,7 @@ export function MobileSurfaceFieldControl({
           field={field}
           maxCount={field.maxCount}
           multiple={field.multiple}
+          mobile
           onUpload={renderers?.upload}
           recordId={recordId}
         />
@@ -407,6 +412,20 @@ function isFileRef(value: unknown): value is DataFileRef {
   return Boolean(value && typeof value === 'object' && 'id' in value);
 }
 
+type MobilePendingUpload = {
+  id: string;
+  file: File;
+  status: 'uploading' | 'error';
+  error?: string;
+};
+
+let mobileUploadSequence = 0;
+
+function createMobileUploadId() {
+  mobileUploadSequence += 1;
+  return `mobile-upload-${Date.now()}-${mobileUploadSequence}`;
+}
+
 function ManagedFileField({
   field,
   value,
@@ -417,6 +436,7 @@ function ManagedFileField({
   maxCount = 1,
   accept,
   onUpload,
+  mobile = false,
 }: {
   field: SurfaceField;
   value?: DataFileRef | DataFileRef[];
@@ -427,9 +447,13 @@ function ManagedFileField({
   maxCount?: number;
   accept?: string | string[];
   onUpload?: SurfaceFieldRenderers['upload'];
+  mobile?: boolean;
 }) {
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState('');
+  const [mobilePending, setMobilePending] = useState<MobilePendingUpload[]>([]);
+  const mobileInputRef = useRef<HTMLInputElement | null>(null);
+  const mobileActiveUploads = useRef(0);
   const refs = useMemo(() => (Array.isArray(value) ? value : value ? [value] : []), [value]);
   const refsRef = useRef(refs);
   useEffect(() => {
@@ -438,6 +462,91 @@ function ManagedFileField({
   if (!onUpload) {
     return <Alert type="info" showIcon message="该文件字段尚未配置上传能力" />;
   }
+  if (mobile) {
+    const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;
+    const uploadOne = async (item: MobilePendingUpload) => {
+      setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'uploading', error: undefined } : entry));
+      mobileActiveUploads.current += 1;
+      setUploading(true);
+      try {
+        const uploaded = await onUpload(field, item.file, recordId);
+        const next = multiple ? [...refsRef.current, uploaded].slice(0, maxCount) : uploaded;
+        refsRef.current = Array.isArray(next) ? next : next ? [next] : [];
+        onChange?.(next);
+        setMobilePending(current => current.filter(entry => entry.id !== item.id));
+      } catch (error) {
+        setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'error', error: error instanceof Error ? error.message : String(error) } : entry));
+      } finally {
+        mobileActiveUploads.current = Math.max(0, mobileActiveUploads.current - 1);
+        setUploading(mobileActiveUploads.current > 0);
+      }
+    };
+    const selectFiles = (files: File[]) => {
+      const pendingCount = mobilePending.length;
+      const available = Math.max(0, maxCount - refsRef.current.length - pendingCount);
+      const selected = multiple ? files.slice(0, available) : files.slice(0, 1);
+      if (!selected.length) return;
+      const items = selected.map(file => ({ id: createMobileUploadId(), file, status: 'uploading' as const }));
+      setMobilePending(current => multiple ? [...current, ...items] : items);
+      items.forEach(item => void uploadOne(item));
+    };
+    return (
+      <div className="oxa-file-field oxa-mobile-file-field">
+        <input
+          ref={mobileInputRef}
+          accept={acceptValue}
+          disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading') || refs.length + mobilePending.length >= maxCount}
+          multiple={multiple}
+          onChange={event => {
+            selectFiles(Array.from(event.target.files || []));
+            event.currentTarget.value = '';
+          }}
+          style={{ display: 'none' }}
+          type="file"
+        />
+        {(!maxCount || refs.length + mobilePending.length < maxCount) && (
+          <Button
+            className="oxa-mobile-file-button"
+            disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading')}
+            icon={<UploadOutlined />}
+            onClick={() => mobileInputRef.current?.click()}
+          >
+            上传文件
+          </Button>
+        )}
+        {mobilePending.length > 0 && (
+          <div className="oxa-mobile-pending-files">
+            {mobilePending.map(item => (
+              <div className="oxa-mobile-pending-file" key={item.id}>
+                <span className="oxa-mobile-pending-file-copy">
+                  <strong className="oxa-mobile-pending-file-name" title={item.file.name}>{item.file.name}</strong>
+                  <small>{formatManagedFileSize(item.file.size)} · {item.status === 'error' ? '上传失败' : '上传中…'}</small>
+                </span>
+                {item.status === 'error' ? (
+                  <>
+                    <span className="oxa-mobile-pending-error">{item.error || '上传失败'}</span>
+                    <Button onClick={() => void uploadOne(item)} size="small" type="link">重试</Button>
+                    <Button onClick={() => setMobilePending(current => current.filter(entry => entry.id !== item.id))} size="small" type="link">移除</Button>
+                  </>
+                ) : (
+                  <span className="oxa-mobile-pending-status">上传中…</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {refs.length ? (
+          <AttachmentFileList files={refs} onRemove={file => {
+            const next = refs.filter(item => item.id !== file.id);
+            refsRef.current = next;
+            onChange?.(multiple ? next : undefined);
+          }} removable={!disabled} />
+        ) : (
+          <div className="oxa-file-empty">尚未上传文件</div>
+        )}
+      </div>
+    );
+  }
   const uploadProps = {
     accept: Array.isArray(accept) ? accept.join(',') : accept,
     disabled,

package/template/apps/web/src/main.tsx

@@ -1,5 +1,5 @@
 import { Refine } from '@refinedev/core';
-import { App as AntdApp, ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider, Spin } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -11,11 +11,22 @@ import { FilePreviewPage } from './FilePreviewPage';
 import { EmptyApplicationPage } from './Shell';
 import { RuntimeBoundary } from './runtime';
 import { applicationBasename } from './runtime-meta';
+import { useGlobalRequestLoading } from './platform-client';
 import './styles.css';
 
 const codes = Object.keys(resourceDefinitions);
 const firstPath = codes[0] ? `/${codes[0]}` : '/';
 
+function GlobalRequestLoading() {
+  const loading = useGlobalRequestLoading();
+  return loading ? (
+    <div aria-live="polite" className="oxa-global-request-loading">
+      <Spin size="small" />
+      <span>正在加载…</span>
+    </div>
+  ) : null;
+}
+
 const resourceRoutes = codes.flatMap(resourceCode => [
   <Route key={`${resourceCode}-list`} path={`/${resourceCode}`} element={<GeneratedResourcePage resourceCode={resourceCode} />} />,
   <Route key={`${resourceCode}-new`} path={`/${resourceCode}/new`} element={<GeneratedResourcePage mode="create" resourceCode={resourceCode} />} />,
@@ -31,6 +42,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ConfigProvider locale={zhCN} theme={{ token: { borderRadius: 8, colorBgLayout: '#f3f7fd', colorPrimary: '#1677ff', colorText: '#172033', fontSize: 14 }, components: { Card: { headerFontSize: 16 }, Layout: { bodyBg: '#f3f7fd', headerBg: '#ffffff', siderBg: '#ffffff' }, Menu: { itemBorderRadius: 8, itemSelectedBg: '#eaf3ff' } } }}>
       <AntdApp>
+        <GlobalRequestLoading />
         <RuntimeBoundary>
           <BrowserRouter basename={applicationBasename()}>
             <Refine dataProvider={applicationProvider} resources={codes.map(code => ({ name: code, list: `/${code}`, create: `/${code}/new`, edit: `/${code}/:id/edit`, show: `/${code}/:id` }))}>