openxiangda-cli 2.0.0-alpha.59 → 2.0.0-alpha.61

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

@@ -0,0 +1,285 @@
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EyeOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import { useCreate, useDelete, useList, useOne, useUpdate } from '@refinedev/core';
+import {
+  App,
+  Button,
+  Card,
+  Descriptions,
+  Empty,
+  Form,
+  Input,
+  Popconfirm,
+  Result,
+  Select,
+  Space,
+  Spin,
+  Table,
+  Typography,
+  type TableColumnsType,
+} from 'antd';
+import dayjs from 'dayjs';
+import type { DataAuditEntry, DataResourceSurface } from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { resourceDefinitions } from '../../../../../packages/contracts/src/generated.js';
+import {
+  MobileResourceDetailPage,
+  MobileResourceFormPage,
+  MobileResourceListPage,
+  ResourceDetailPage,
+  ResourceFormPage,
+  ResourceListPage,
+} from './StandardResourcePages';
+import {
+  listSurfaceFields,
+  MobileSurfaceFieldControl,
+  SurfaceFieldControl,
+  SurfaceFieldValue,
+  SurfaceFilterControl,
+  type SurfaceField,
+} from './SurfaceFields';
+import { createNativeResourceClient, type GenericResourceQuery } from '../../platform-client';
+import { useRuntime } from '../../runtime';
+
+type ResourceRecord = Record<string, unknown> & {
+  id: string;
+  revision: number;
+  updated_at?: string;
+};
+
+type GeneratedDefinition = {
+  code: string;
+  name: string;
+  capabilities: { read: string; create: string; update: string; delete: string };
+  surface: DataResourceSurface;
+};
+
+const definitions = resourceDefinitions as unknown as Record<string, GeneratedDefinition>;
+
+function definitionFor(resourceCode: string) {
+  return definitions[resourceCode];
+}
+
+function fieldFor(surface: DataResourceSurface, key: string): SurfaceField {
+  const field = surface.fields[key];
+  return field ? { key, ...field } : { key, label: key, widget: 'text' };
+}
+
+function fieldsBySection(surface: DataResourceSurface) {
+  const groups = new Map<string, SurfaceField[]>();
+  for (const [key, field] of Object.entries(surface.fields)) {
+    if (field.system) continue;
+    const section = field.section || 'default';
+    groups.set(section, [...(groups.get(section) || []), { key, ...field }]);
+  }
+  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];
+    })
+  );
+}
+
+function normalizeFormValues(values: Record<string, unknown>, surface: DataResourceSurface) {
+  return Object.fromEntries(
+    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
+            ? (value as { format: (pattern: string) => string }).format(widget === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
+            : value]
+        : [key, value];
+    })
+  );
+}
+
+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 [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(surface.list?.defaultPageSize || 20);
+  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 list = useList<ResourceRecord>({
+    resource: code,
+    pagination: { currentPage: page, pageSize },
+    sorters: [sort],
+    meta: { query },
+  });
+  return { draft, list, page, pageSize, query, setDraft, setPage, setPageSize, setQuery, setSort, sort };
+}
+
+export function GeneratedResourcePage({
+  resourceCode,
+  mode = 'list',
+  variant = 'desktop',
+}: {
+  resourceCode: string;
+  mode?: 'list' | 'create' | 'edit' | 'detail';
+  variant?: 'desktop' | 'mobile';
+}) {
+  const definition = definitionFor(resourceCode);
+  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} />;
+}
+
+function GeneratedResourceListPage({ definition, variant }: { definition: GeneratedDefinition; variant: 'desktop' | 'mobile' }) {
+  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 state = useGeneratedList(definition);
+  const { code, name, surface, capabilities } = definition;
+  const fields = listSurfaceFields(surface.fields);
+  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]);
+  return (
+    <ResourceListPage
+      createCapability={capabilities.create}
+      createPath={`/${code}/new`}
+      description={`由 ${code} 资源 Surface 自动生成的标准 CRUD 页面`}
+      onExport={() => message.info('导出将使用当前 Data API 查询条件')}
+      readCapability={capabilities.read}
+      resource={code}
+      surface={surface}
+      title={name}
+    >
+      <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 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}
+        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); } }}
+      />
+    </ResourceListPage>
+  );
+}
+
+function GeneratedMobileList({ definition }: { definition: GeneratedDefinition }) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  const { code, name, surface, capabilities } = definition;
+  const state = useGeneratedList(definition);
+  const rows = (state.list.result.data || []) as unknown as ResourceRecord[];
+  const fields = listSurfaceFields(surface.fields).slice(0, 4);
+  return (
+    <MobileResourceListPage createCapability={capabilities.create} createPath={`/${code}/new`} description={`${code} 资源`} readCapability={capabilities.read} resource={code} surface={surface} title={name}>
+      <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>
+      </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>}
+      <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' }) {
+  const { id = '' } = useParams();
+  const navigate = useNavigate();
+  const { message } = App.useApp();
+  const { hasCapability } = useRuntime();
+  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 record = query.result;
+  const { code, name, surface, capabilities } = definition;
+  useEffect(() => { if (record) form.setFieldsValue(normalizeRecordForForm(record, surface)); }, [form, record, surface]);
+  const listPath = `/${code}`;
+  const detailPath = `/${code}/${id}`;
+  const Page = variant === 'mobile' ? MobileResourceFormPage : ResourceFormPage;
+  if (!hasCapability(mode === 'create' ? capabilities.create : capabilities.update)) return <Result status="403" title="当前平台用户无此操作权限" />;
+  const submit = async (values: Record<string, unknown>) => {
+    const next = normalizeFormValues(values, 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}`); }
+  };
+  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}>
+      <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 => { const capability = mode === 'create' ? field.createCapability : field.updateCapability; return <SurfaceFieldControl key={field.key} disabled={Boolean(capability) && !hasCapability(capability!)} 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>
+      </Form>
+    </Page>
+  );
+}
+
+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 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 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 };
+  return variant === 'mobile' ? <MobileResourceDetailPage {...props} auditTargetId={`${definition.code}-audit`}>{content}</MobileResourceDetailPage> : <ResourceDetailPage {...props} auditTargetId={`${definition.code}-audit`}>{content}</ResourceDetailPage>;
+}