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

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

@@ -0,0 +1,319 @@
+import { DeleteOutlined, EditOutlined, ImportOutlined } from '@ant-design/icons';
+import { Alert, App, Button, Form, Modal, Select, Space, Table, Typography, Upload } from 'antd';
+import dayjs from 'dayjs';
+import type { DataResourceSurface } from 'openxiangda-contracts/browser';
+import { useMemo, useState } from 'react';
+import { transactNativeData } from '../../platform-client';
+import { SurfaceFieldControl, SurfaceFieldValue, type SurfaceField } from './SurfaceFields';
+import { parseResourceImportFile, type ResourceImportPreview } from './resource-import';
+
+type ResourceRecord = Record<string, unknown> & {
+  id: string;
+  revision: number;
+};
+
+export function ResourceImportButton({
+  code,
+  name,
+  surface,
+  writableFieldCodes,
+  onCompleted,
+}: {
+  code: string;
+  name: string;
+  surface: DataResourceSurface;
+  writableFieldCodes: string[];
+  onCompleted: () => Promise<unknown> | unknown;
+}) {
+  const { message } = App.useApp();
+  const [preview, setPreview] = useState<ResourceImportPreview>();
+  const [parsing, setParsing] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [idempotencyKey, setIdempotencyKey] = useState('');
+  const close = () => {
+    if (submitting) return;
+    setPreview(undefined);
+    setIdempotencyKey('');
+  };
+  const submit = async () => {
+    if (!preview?.operations.length || preview.errors.length) return;
+    setSubmitting(true);
+    try {
+      const key = idempotencyKey || crypto.randomUUID();
+      if (!idempotencyKey) setIdempotencyKey(key);
+      const result = await transactNativeData(preview.operations, key);
+      message.success(`已导入 ${result.items.length} 条${name}`);
+      await onCompleted();
+      setPreview(undefined);
+      setIdempotencyKey('');
+    } catch (error) {
+      message.error(transactionFailureMessage(error, '导入失败'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const previewColumns = useMemo(
+    () => [
+      { title: '行号', dataIndex: 'rowNumber', width: 72 },
+      ...Object.entries(surface.fields)
+        .filter(([code]) => writableFieldCodes.includes(code))
+        .map(([fieldCode, field]) => ({
+          title: field.label,
+          key: fieldCode,
+          render: (_: unknown, row: ResourceImportPreview['rows'][number]) => (
+            <SurfaceFieldValue field={{ key: fieldCode, ...field }} value={row.data[fieldCode]} />
+          ),
+        })),
+    ],
+    [surface.fields, writableFieldCodes]
+  );
+  return (
+    <>
+      <Upload
+        accept=".csv,.xls,.xlsx"
+        beforeUpload={async (file) => {
+          setParsing(true);
+          try {
+            setPreview(await parseResourceImportFile(file, code, surface, writableFieldCodes));
+            setIdempotencyKey(crypto.randomUUID());
+          } catch (error) {
+            message.error(error instanceof Error ? error.message : '文件解析失败');
+          } finally {
+            setParsing(false);
+          }
+          return Upload.LIST_IGNORE;
+        }}
+        maxCount={1}
+        showUploadList={false}
+      >
+        <Button
+          disabled={!writableFieldCodes.length}
+          icon={<ImportOutlined />}
+          loading={parsing}
+          title={!writableFieldCodes.length ? '当前角色没有可导入字段' : undefined}
+        >
+          导入
+        </Button>
+      </Upload>
+      <Modal
+        cancelText="取消"
+        destroyOnHidden
+        okButtonProps={{ disabled: Boolean(preview?.errors.length) }}
+        okText={`确认导入${preview?.operations.length ? ` ${preview.operations.length} 条` : ''}`}
+        open={Boolean(preview)}
+        title={`导入${name}`}
+        width={960}
+        confirmLoading={submitting}
+        onCancel={close}
+        onOk={() => void submit()}
+      >
+        {preview && (
+          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+            <Typography.Text type="secondary">{preview.fileName} · 单次最多 100 行，所有数据将作为一个事务提交</Typography.Text>
+            {preview.errors.length > 0 && (
+              <Alert
+                description={
+                  <ul className="oxa-import-errors">
+                    {preview.errors.slice(0, 20).map((error) => (
+                      <li key={error}>{error}</li>
+                    ))}
+                    {preview.errors.length > 20 && <li>另有 {preview.errors.length - 20} 个错误</li>}
+                  </ul>
+                }
+                message="请先修正导入文件"
+                showIcon
+                type="error"
+              />
+            )}
+            <Table
+              columns={previewColumns}
+              dataSource={preview.rows.slice(0, 20)}
+              locale={{ emptyText: '没有可预览的数据' }}
+              pagination={false}
+              rowKey="rowNumber"
+              scroll={{ x: 'max-content', y: 360 }}
+              size="small"
+            />
+            {preview.rows.length > 20 && <Typography.Text type="secondary">仅预览前 20 行</Typography.Text>}
+          </Space>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+export function ResourceBatchActions({
+  code,
+  name,
+  surface,
+  rows,
+  writableFields,
+  canDelete,
+  onCompleted,
+  onClear,
+}: {
+  code: string;
+  name: string;
+  surface: DataResourceSurface;
+  rows: ResourceRecord[];
+  writableFields: SurfaceField[];
+  canDelete: boolean;
+  onCompleted: () => Promise<unknown> | unknown;
+  onClear: () => void;
+}) {
+  const { message } = App.useApp();
+  const [form] = Form.useForm();
+  const [updateOpen, setUpdateOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedField, setSelectedField] = useState('');
+  const [idempotencyKey, setIdempotencyKey] = useState('');
+  if (!rows.length) return null;
+  const submitUpdate = async (values: Record<string, unknown>) => {
+    const field = writableFields.find((item) => item.key === selectedField);
+    if (!field) return;
+    const value = normalizeValue(field, values[selectedField]);
+    const changed = rows.filter((row) => !sameValue(row[selectedField], value));
+    if (!changed.length) {
+      message.info('所选记录的该字段已经是目标值');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const key = idempotencyKey || crypto.randomUUID();
+      if (!idempotencyKey) setIdempotencyKey(key);
+      await transactNativeData(
+        changed.map((row) => ({
+          operation: 'update',
+          resourceCode: code,
+          id: row.id,
+          expectedRevision: row.revision,
+          data: { [selectedField]: value },
+        })),
+        key
+      );
+      message.success(`已更新 ${changed.length} 条${name}`);
+      await onCompleted();
+      onClear();
+      setUpdateOpen(false);
+      setIdempotencyKey('');
+      form.resetFields();
+      setSelectedField('');
+    } catch (error) {
+      message.error(transactionFailureMessage(error, '批量更新失败'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const submitDelete = async () => {
+    setSubmitting(true);
+    try {
+      const key = idempotencyKey || crypto.randomUUID();
+      if (!idempotencyKey) setIdempotencyKey(key);
+      await transactNativeData(
+        rows.map((row) => ({
+          operation: 'delete',
+          resourceCode: code,
+          id: row.id,
+          expectedRevision: row.revision,
+        })),
+        key
+      );
+      message.success(`已删除 ${rows.length} 条${name}`);
+      await onCompleted();
+      onClear();
+      setDeleteOpen(false);
+      setIdempotencyKey('');
+    } catch (error) {
+      message.error(transactionFailureMessage(error, '批量删除失败'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const field = writableFields.find((item) => item.key === selectedField);
+  return (
+    <>
+      <div className="oxa-batch-bar">
+        <Typography.Text>已选择 {rows.length} 条</Typography.Text>
+        <Space>
+          {writableFields.length > 0 && (
+            <Button icon={<EditOutlined />} onClick={() => setUpdateOpen(true)}>
+              批量修改
+            </Button>
+          )}
+          {canDelete && (
+            <Button danger icon={<DeleteOutlined />} onClick={() => setDeleteOpen(true)}>
+              批量删除
+            </Button>
+          )}
+          <Button onClick={onClear} type="link">
+            取消选择
+          </Button>
+        </Space>
+      </div>
+      <Modal
+        cancelText="取消"
+        okText="确认修改"
+        open={updateOpen}
+        title={`批量修改 ${rows.length} 条${name}`}
+        confirmLoading={submitting}
+        onCancel={() => !submitting && setUpdateOpen(false)}
+        onOk={() => form.submit()}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={(values) => void submitUpdate(values as Record<string, unknown>)}
+          onValuesChange={() => setIdempotencyKey('')}
+        >
+          <Form.Item label="修改字段" required>
+            <Select
+              options={writableFields.map((item) => ({
+                label: item.label,
+                value: item.key,
+              }))}
+              placeholder="选择要统一修改的字段"
+              value={selectedField || undefined}
+              onChange={(value) => {
+                form.resetFields();
+                setSelectedField(value);
+                setIdempotencyKey('');
+              }}
+            />
+          </Form.Item>
+          {field && <SurfaceFieldControl disabled={false} field={{ ...field, requiredHint: true }} operation="update" />}
+        </Form>
+      </Modal>
+      <Modal
+        cancelText="取消"
+        okButtonProps={{ danger: true }}
+        okText="确认删除"
+        open={deleteOpen}
+        title={`删除 ${rows.length} 条${name}`}
+        confirmLoading={submitting}
+        onCancel={() => !submitting && setDeleteOpen(false)}
+        onOk={() => void submitDelete()}
+      >
+        <Alert description="任意一条记录发生权限或版本冲突时，本次删除将全部回滚。" message="删除后不可恢复" showIcon type="warning" />
+      </Modal>
+    </>
+  );
+}
+
+function normalizeValue(field: SurfaceField, value: unknown) {
+  if (field.widget !== 'date' && field.widget !== 'datetime') return value;
+  if (!value) return value;
+  return field.widget === 'datetime' ? dayjs(value as never).toISOString() : dayjs(value as never).format('YYYY-MM-DD');
+}
+
+function sameValue(left: unknown, right: unknown) {
+  if (left === right) return true;
+  if (left === undefined || right === undefined) return false;
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function transactionFailureMessage(error: unknown, fallback: string) {
+  const index = Number((error as any)?.data?.operationIndex);
+  const message = error instanceof Error ? error.message : fallback;
+  return Number.isSafeInteger(index) && index >= 0 ? `第 ${index + 1} 条操作失败：${message}` : message;
+}

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

@@ -4,12 +4,10 @@ import {
   ExportOutlined,
   EyeOutlined,
   HistoryOutlined,
-  ImportOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
 import {
   Alert,
-  App,
   Button,
   Card,
   Result,
@@ -47,17 +45,10 @@ export function ResourceListPage({
   resource,
   surface,
   title,
-  description,
   readCapability,
-  createCapability,
-  createPath,
-  onExport,
-  importDisabledReason = '导入能力将在批量事务合同落地后启用',
   children,
 }: ResourceListPageProps) {
-  const navigate = useNavigate();
   const { hasCapability } = useRuntime();
-  const { message } = App.useApp();
   if (!hasCapability(readCapability)) {
     return (
       <Shell>
@@ -65,7 +56,6 @@ export function ResourceListPage({
       </Shell>
     );
   }
-  const canCreate = createCapability ? hasCapability(createCapability) : false;
   return (
     <Shell>
       <Card
@@ -73,42 +63,7 @@ export function ResourceListPage({
         data-resource={resource}
         data-surface-layout={surface?.list ? 'standard' : undefined}
       >
-        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
-          <div className="oxa-page-heading">
-            <div>
-              <h2 className="oxa-title">{title}</h2>
-              {description && <div className="oxa-muted">{description}</div>}
-            </div>
-            <Space>
-              <Button
-                disabled
-                icon={<ImportOutlined />}
-                title={importDisabledReason}
-              >
-                导入
-              </Button>
-              <Button
-                icon={<ExportOutlined />}
-                onClick={() => {
-                  if (onExport) onExport();
-                  else message.info('导出将使用当前 Data API 查询条件');
-                }}
-              >
-                导出
-              </Button>
-              {canCreate && createPath && (
-                <Button
-                  icon={<PlusOutlined />}
-                  onClick={() => navigate(createPath)}
-                  type="primary"
-                >
-                  新增
-                </Button>
-              )}
-            </Space>
-          </div>
-          {children}
-        </Space>
+        <div className="oxa-list-surface">{children}</div>
       </Card>
     </Shell>
   );
@@ -289,6 +244,7 @@ interface ResourceDetailPageProps extends StandardResourcePageProps {
   editCapability?: string;
   editPath?: string;
   auditTargetId?: string;
+  onAuditOpen?: () => void;
   hero: ReactNode;
   meta?: ReactNode;
   children: ReactNode;
@@ -307,6 +263,7 @@ export function ResourceDetailPage({
   editCapability,
   editPath,
   auditTargetId,
+  onAuditOpen,
   hero,
   meta,
   children,
@@ -356,11 +313,14 @@ export function ResourceDetailPage({
             {auditTargetId && (
               <Button
                 icon={<HistoryOutlined />}
-                onClick={() =>
-                  document
-                    .getElementById(auditTargetId)
-                    ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-                }
+                onClick={() => {
+                  onAuditOpen?.();
+                  window.requestAnimationFrame(() =>
+                    document
+                      .getElementById(auditTargetId)
+                      ?.scrollIntoView({ behavior: 'smooth', block: 'center' }),
+                  );
+                }}
               >
                 操作记录
               </Button>
@@ -399,6 +359,7 @@ export function MobileResourceDetailPage({
   editCapability,
   editPath,
   auditTargetId,
+  onAuditOpen,
   hero,
   meta,
   children,
@@ -417,7 +378,7 @@ export function MobileResourceDetailPage({
           {backLabel}
         </Button>
         <Space>
-          {auditTargetId && <Button icon={<HistoryOutlined />} onClick={() => document.getElementById(auditTargetId)?.scrollIntoView({ behavior: 'smooth', block: 'center' })}>操作记录</Button>}
+          {auditTargetId && <Button icon={<HistoryOutlined />} onClick={() => { onAuditOpen?.(); window.requestAnimationFrame(() => document.getElementById(auditTargetId)?.scrollIntoView({ behavior: 'smooth', block: 'center' })); }}>操作记录</Button>}
           {editCapability && editPath && hasCapability(editCapability) && <Button icon={<EditOutlined />} onClick={() => navigate(editPath)} type="primary">编辑</Button>}
         </Space>
       </header>

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

@@ -460,7 +460,7 @@ function ManagedFileField({
     refsRef.current = refs;
   }, [refs]);
   if (!onUpload) {
-    return <Alert type="info" showIcon message="该文件字段尚未配置上传能力" />;
+    return <Alert type="info" showIcon title="该文件字段尚未配置上传能力" />;
   }
   if (mobile) {
     const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;

package/template/apps/web/src/components/resource/resource-import.ts

@@ -0,0 +1,205 @@
+import type { DataResourceSurface, DataTransactionOperation } from 'openxiangda-contracts/browser';
+
+const MAX_IMPORT_BYTES = 5 * 1024 * 1024;
+const MAX_IMPORT_ROWS = 100;
+
+export interface ResourceImportRow {
+  rowNumber: number;
+  data: Record<string, unknown>;
+  errors: string[];
+}
+
+export interface ResourceImportPreview {
+  fileName: string;
+  rows: ResourceImportRow[];
+  errors: string[];
+  operations: DataTransactionOperation[];
+}
+
+export async function parseResourceImportFile(
+  file: File,
+  resourceCode: string,
+  surface: DataResourceSurface,
+  writableFieldCodes: string[]
+): Promise<ResourceImportPreview> {
+  if (file.size > MAX_IMPORT_BYTES) {
+    return failure(file.name, '导入文件不能超过 5MB');
+  }
+  if (!/\.(?:csv|xls|xlsx)$/i.test(file.name)) {
+    return failure(file.name, '仅支持 CSV、XLS 或 XLSX 文件');
+  }
+  const XLSX = await import('xlsx');
+  const workbook = XLSX.read(await file.arrayBuffer(), {
+    cellDates: true,
+    type: 'array',
+  });
+  const sheetName = workbook.SheetNames[0];
+  if (!sheetName) return failure(file.name, '文件中没有可读取的工作表');
+  const sheet = workbook.Sheets[sheetName];
+  if (!sheet) return failure(file.name, '文件中的首个工作表不可读取');
+  const matrix = XLSX.utils.sheet_to_json<unknown[]>(sheet, {
+    defval: '',
+    header: 1,
+    raw: true,
+  });
+  return parseResourceImportMatrix(file.name, matrix, resourceCode, surface, writableFieldCodes);
+}
+
+export function parseResourceImportMatrix(
+  fileName: string,
+  matrix: unknown[][],
+  resourceCode: string,
+  surface: DataResourceSurface,
+  writableFieldCodes: string[]
+): ResourceImportPreview {
+  if (!matrix.length) return failure(fileName, '导入文件为空');
+  const headerRow = matrix[0];
+  if (!headerRow) return failure(fileName, '导入文件缺少表头');
+  const writable = new Set(writableFieldCodes);
+  const fieldEntries = Object.entries(surface.fields).filter(([, field]) => !field.system);
+  const aliases = new Map<string, string[]>();
+  for (const [code, field] of fieldEntries) {
+    for (const alias of [code, field.label]) {
+      const key = String(alias || '').trim();
+      if (!key) continue;
+      aliases.set(key, [...(aliases.get(key) || []), code]);
+    }
+  }
+  const headers = headerRow.map((value) => String(value ?? '').trim());
+  const errors: string[] = [];
+  const mapped = headers.map((header, index) => {
+    if (!header) return null;
+    const matches = [...new Set(aliases.get(header) || [])];
+    if (matches.length === 0) {
+      errors.push(`第 ${index + 1} 列“${header}”不是已声明字段`);
+      return null;
+    }
+    if (matches.length > 1) {
+      errors.push(`第 ${index + 1} 列“${header}”对应多个字段，请改用字段代码`);
+      return null;
+    }
+    const code = matches[0];
+    if (!code) return null;
+    const field = surface.fields[code];
+    if (!field) return null;
+    if (field.widget === 'file') {
+      errors.push(`文件字段“${field.label}”必须通过平台上传组件录入`);
+      return null;
+    }
+    if (!writable.has(code)) {
+      errors.push(`字段“${field.label}”不可在新增时写入`);
+      return null;
+    }
+    return code;
+  });
+  const duplicateCodes = mapped.filter((code, index): code is string => Boolean(code) && mapped.indexOf(code) !== index);
+  for (const code of [...new Set(duplicateCodes)]) {
+    const field = surface.fields[code];
+    if (field) errors.push(`字段“${field.label}”在表头中重复出现`);
+  }
+  const sourceRows = matrix
+    .slice(1)
+    .filter((row) => row.some((value) => value !== undefined && value !== null && String(value).trim() !== ''));
+  headers.forEach((header, index) => {
+    if (!header && sourceRows.some((row) => row[index] !== undefined && row[index] !== null && String(row[index]).trim() !== '')) {
+      errors.push(`第 ${index + 1} 列存在数据但缺少表头`);
+    }
+  });
+  if (!sourceRows.length) errors.push('导入文件没有数据行');
+  if (sourceRows.length > MAX_IMPORT_ROWS) {
+    errors.push(`单次最多导入 ${MAX_IMPORT_ROWS} 行，当前为 ${sourceRows.length} 行`);
+  }
+  const rows = sourceRows.slice(0, MAX_IMPORT_ROWS).map((source, rowIndex) => {
+    const data: Record<string, unknown> = {};
+    const rowErrors: string[] = [];
+    mapped.forEach((code, columnIndex) => {
+      if (!code) return;
+      const field = surface.fields[code];
+      if (!field) return;
+      try {
+        const value = importValue(field, source[columnIndex]);
+        if (value !== undefined) data[code] = value;
+      } catch (error) {
+        rowErrors.push(`${field.label}：${error instanceof Error ? error.message : String(error)}`);
+      }
+    });
+    for (const [code, field] of fieldEntries) {
+      if (writable.has(code) && field.requiredHint && (data[code] === undefined || data[code] === null || data[code] === '')) {
+        rowErrors.push(`${field.label}为必填项`);
+      }
+    }
+    return { rowNumber: rowIndex + 2, data, errors: rowErrors };
+  });
+  const rowErrors = rows.flatMap((row) => row.errors.map((error) => `第 ${row.rowNumber} 行：${error}`));
+  return {
+    fileName,
+    rows,
+    errors: [...errors, ...rowErrors],
+    operations:
+      errors.length || rowErrors.length
+        ? []
+        : rows.map((row) => ({
+            operation: 'create' as const,
+            resourceCode,
+            data: row.data,
+          })),
+  };
+}
+
+function importValue(field: DataResourceSurface['fields'][string], input: unknown): unknown {
+  if (input === undefined || input === null || input === '') return undefined;
+  if (field.widget === 'number' || field.widget === 'money' || field.widget === 'percent') {
+    const value = Number(input);
+    if (!Number.isFinite(value)) throw new Error('必须是数字');
+    return value;
+  }
+  if (field.widget === 'boolean') {
+    if (input === true || input === 1 || /^(?:是|true|yes|1)$/i.test(String(input).trim())) return true;
+    if (input === false || input === 0 || /^(?:否|false|no|0)$/i.test(String(input).trim())) return false;
+    throw new Error('请填写是或否');
+  }
+  if (field.widget === 'date' || field.widget === 'datetime') {
+    const text = String(input).trim();
+    if (field.widget === 'date' && /^\d{4}-\d{2}-\d{2}$/.test(text)) {
+      const dateParts = text.split('-');
+      const year = Number(dateParts[0]);
+      const month = Number(dateParts[1]);
+      const day = Number(dateParts[2]);
+      const exact = new Date(Date.UTC(year, month - 1, day));
+      if (exact.getUTCFullYear() !== year || exact.getUTCMonth() !== month - 1 || exact.getUTCDate() !== day) {
+        throw new Error('日期格式无效');
+      }
+      return text;
+    }
+    const date = input instanceof Date ? input : new Date(String(input));
+    if (Number.isNaN(date.getTime())) throw new Error('日期格式无效');
+    return field.widget === 'date'
+      ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+      : date.toISOString();
+  }
+  if (field.widget === 'json') {
+    if (typeof input === 'object') return input;
+    try {
+      return JSON.parse(String(input));
+    } catch {
+      throw new Error('必须是有效 JSON');
+    }
+  }
+  const multiple = field.widget === 'multi' || field.multiple;
+  const values = multiple
+    ? (Array.isArray(input) ? input : String(input).split(/[、,，;；\n]+/)).map((value) => String(value).trim()).filter(Boolean)
+    : [String(input).trim()];
+  if (field.options?.length) {
+    const resolved = values.map((value) => {
+      const option = field.options?.find((item) => item.value === value || item.label === value);
+      if (!option) throw new Error(`“${value}”不在可选项中`);
+      return option.value;
+    });
+    return multiple ? resolved : resolved[0];
+  }
+  return multiple ? values : values[0];
+}
+
+function failure(fileName: string, message: string): ResourceImportPreview {
+  return { fileName, rows: [], errors: [message], operations: [] };
+}