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

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

@@ -1,10 +1,17 @@
 import {
   ArrowRightOutlined,
+  ColumnHeightOutlined,
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
+  ExportOutlined,
+  ImportOutlined,
   PlusOutlined,
+  ReloadOutlined,
   SearchOutlined,
+  SettingOutlined,
+  UpOutlined,
+  DownOutlined,
 } from '@ant-design/icons';
 import { useCreate, useDelete, useList, useOne, useUpdate } from '@refinedev/core';
 import {
@@ -12,7 +19,9 @@ import {
   Alert,
   Button,
   Card,
+  Collapse,
   Descriptions,
+  Dropdown,
   Empty,
   Form,
   Input,
@@ -22,7 +31,9 @@ import {
   Space,
   Spin,
   Table,
+  Tooltip,
   Typography,
+  type MenuProps,
   type TableColumnsType,
 } from 'antd';
 import dayjs from 'dayjs';
@@ -299,40 +310,122 @@ function GeneratedResourceListPage({ definition, variant }: { definition: Genera
 function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition }) {
   const navigate = useNavigate();
   const { message } = App.useApp();
-  const { hasCapability, identity } = useRuntime();
+  const { hasCapability } = 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 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');
+  }, [code]);
+  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 +437,34 @@ 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}
@@ -359,21 +474,144 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
         <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
+          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>
+          )}
+          <Button
+            disabled
+            icon={<ImportOutlined />}
+            title="导入能力将在批量事务合同落地后启用"
+          >
+            导入
+          </Button>
+          <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>
       <Table<ResourceRecord>
@@ -382,6 +620,8 @@ function GeneratedDesktopList({ definition }: { definition: GeneratedDefinition
         loading={state.list.query.isFetching}
         locale={{ emptyText: <Empty description={`暂无${name}`} /> }}
         rowKey="id"
+        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); } }}
       />
@@ -415,8 +655,8 @@ function GeneratedMobileList({ definition }: { definition: GeneratedDefinition }
         <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
+          title="数据读取失败"
           type="error"
         />
       )}
@@ -460,7 +700,7 @@ 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.isFetching} 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} 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>
@@ -477,14 +717,19 @@ function GeneratedResourceDetailPage({ definition, variant }: { definition: Gene
   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 || []);
+        if (active) {
+          setAuditEntries(page.items || []);
+          setAuditLoadedFor(record.id);
+        }
       })
       .catch(reason => {
         if (!active) return;
@@ -497,9 +742,124 @@ 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>
+  );
 }