openxiangda-cli 2.0.0-alpha.16 → 2.0.0-alpha.162

package/template/apps/web/e2e/data-api-live-fixture.tsx

@@ -0,0 +1,162 @@
+import { Refine } from '@refinedev/core';
+import { App as AntdApp } from 'antd';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import {
+  AppearanceProvider,
+  createApplicationProvider,
+  GeneratedResourcePage,
+  OpenXiangdaResourceDefinitionsProvider,
+  RuntimeBoundary,
+  type GeneratedResourceDefinition,
+} from 'openxiangda/react';
+import 'openxiangda/react/styles.css';
+
+const code = 'field-records';
+const capabilityBase = `app:native-projection-app:data:${code}`;
+const capabilities = {
+  read: `${capabilityBase}:read`,
+  create: `${capabilityBase}:create`,
+  update: `${capabilityBase}:update`,
+  delete: `${capabilityBase}:delete`,
+};
+
+function fieldCapabilities() {
+  return {
+    readCapabilities: [capabilities.read],
+    createCapabilities: [capabilities.create],
+    updateCapabilities: [capabilities.update],
+  };
+}
+
+export const liveDefinition: GeneratedResourceDefinition = {
+  code,
+  name: '字段协议记录',
+  capabilities,
+  surface: {
+    mutationOwner: 'native',
+    generated: {
+      list: true,
+      detail: true,
+      create: true,
+      update: true,
+      delete: true,
+    },
+    fields: {
+      text_short: {
+        label: '标题',
+        type: 'text.short',
+        widget: 'text',
+        requiredHint: true,
+        maxLength: 120,
+        list: true,
+        searchable: true,
+        sortable: true,
+        ...fieldCapabilities(),
+      },
+      option_single: {
+        label: '单选快照',
+        type: 'option.single',
+        widget: 'radio',
+        options: [
+          { label: 'Open', value: 'open' },
+          { label: 'Closed', value: 'closed' },
+        ],
+        list: true,
+        ...fieldCapabilities(),
+      },
+      option_multiple: {
+        label: '多选快照',
+        type: 'option.multiple',
+        widget: 'checkbox',
+        options: [
+          { label: 'Open', value: 'open' },
+          { label: 'Urgent', value: 'urgent' },
+        ],
+        list: true,
+        ...fieldCapabilities(),
+      },
+      location_value: {
+        label: '精确定位',
+        type: 'location',
+        widget: 'location',
+        list: true,
+        ...fieldCapabilities(),
+      },
+    },
+    list: {
+      defaultPageSize: 20,
+      searchableFields: ['text_short'],
+      filterFields: ['option_single'],
+      defaultSort: { field: 'text_short', order: 'asc' },
+    },
+    form: { layout: 'sections' },
+    detail: { layout: 'sections' },
+    mobile: { enabled: true },
+  },
+};
+
+const definitions = { [code]: liveDefinition };
+const provider = createApplicationProvider(definitions);
+const routeBase = `/admin/resources/${code}`;
+const routePaths = {
+  fallback: '/admin',
+  list: routeBase,
+  create: `${routeBase}/new`,
+  detail: `${routeBase}/:id`,
+  edit: `${routeBase}/:id/edit`,
+};
+const initialPath =
+  new URLSearchParams(window.location.search).get('initial') || routeBase;
+
+function resourcePage(mode: 'list' | 'create' | 'edit' | 'detail') {
+  return (
+    <GeneratedResourcePage
+      definition={liveDefinition}
+      mode={mode}
+      paths={routePaths}
+      resourceCode={code}
+    />
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <OpenXiangdaResourceDefinitionsProvider definitions={definitions}>
+      <AppearanceProvider>
+        <AntdApp>
+          <RuntimeBoundary>
+            <MemoryRouter initialEntries={[initialPath]}>
+            <Refine
+              dataProvider={provider}
+              resources={[
+                {
+                  name: code,
+                  list: routePaths.list,
+                  create: routePaths.create,
+                  edit: routePaths.edit,
+                  show: routePaths.detail,
+                },
+              ]}
+            >
+              <Routes>
+                <Route path={routePaths.list} element={resourcePage('list')} />
+                <Route path={routePaths.create} element={resourcePage('create')} />
+                <Route
+                  path={routePaths.detail}
+                  element={resourcePage('detail')}
+                />
+                <Route
+                  path={routePaths.edit}
+                  element={resourcePage('edit')}
+                />
+              </Routes>
+            </Refine>
+            </MemoryRouter>
+          </RuntimeBoundary>
+        </AntdApp>
+      </AppearanceProvider>
+    </OpenXiangdaResourceDefinitionsProvider>
+  </React.StrictMode>
+);

package/template/apps/web/e2e/data-api-live.spec.ts

@@ -0,0 +1,144 @@
+import { expect, test } from '@playwright/test';
+
+const liveEnabled = process.env.OPENXIANGDA_LIVE_DATA_API === '1';
+const title = 'UI live field record';
+
+test.describe('@live-data-api standard resource UI', () => {
+  test.setTimeout(90_000);
+  test.skip(
+    !liveEnabled,
+    'Requires the disposable PostgreSQL Native Data API acceptance bridge.'
+  );
+
+  test.beforeEach(async ({ context }) => {
+    await context.addCookies([
+      {
+        name: 'openxiangda-field-ui-role',
+        value: 'super',
+        domain: '127.0.0.1',
+        path: '/',
+      },
+    ]);
+  });
+
+  test('runs create, list, query, get, update, audit and delete through the standard page', async ({
+    context,
+    page,
+  }) => {
+    await context.grantPermissions(['geolocation']);
+    await context.setGeolocation({
+      longitude: 120.123456,
+      latitude: 30.234567,
+      accuracy: 4,
+    });
+    await page.goto(
+      '/data-api-live.e2e.html?initial=/admin/resources/field-records',
+    );
+    await expect(page.locator('.oxa-list-surface')).toBeVisible();
+
+    await page.getByRole('button', { name: '新增字段协议记录' }).click();
+    await expect(page.getByRole('heading', { name: '新增字段协议记录' })).toBeVisible();
+    await page.getByLabel('标题').fill(title);
+    await page.getByRole('radio', { name: 'Open' }).check();
+    const openCheckbox = page.getByRole('checkbox', { name: 'Open' });
+    const urgentCheckbox = page.getByRole('checkbox', { name: 'Urgent' });
+    await openCheckbox.click();
+    await urgentCheckbox.click();
+    await expect(openCheckbox).toBeChecked();
+    await expect(urgentCheckbox).toBeChecked();
+    await page.getByRole('button', { name: '浏览器定位' }).click();
+    await expect(page.getByText('120.123456, 30.234567')).toBeVisible();
+    await page.getByRole('button', { name: /^保\s*存$/ }).click();
+
+    await expect(page.locator('.oxa-list-surface')).toBeVisible();
+    await page.locator('.oxa-search-panel .ant-select').first().click();
+    await page.getByText('标题', { exact: true }).last().click();
+    await page.getByPlaceholder('关键词').fill(title);
+    await page.getByRole('button', { name: /查询/ }).click();
+    const createdRow = page.getByRole('row').filter({ hasText: title });
+    await expect(createdRow).toHaveCount(1);
+    await expect(createdRow).toContainText('Open');
+    await expect(createdRow).toContainText('Urgent');
+    await expect(createdRow).toContainText('120.123456, 30.234567');
+
+    await createdRow.getByRole('button', { name: '查看' }).click();
+    await expect(page.getByRole('heading', { name: '字段协议记录详情' })).toBeVisible();
+    await expect(page.getByText(title, { exact: true })).toBeVisible();
+    await expect(page.getByText(/浏览器定位/)).toBeVisible();
+    await page.locator('.oxa-audit-collapse .ant-collapse-header').click();
+    await expect(page.getByText('创建', { exact: true })).toBeVisible();
+    await page.screenshot({
+      fullPage: true,
+      path: 'test-results/data-api-live-detail.png',
+    });
+
+    await page.getByRole('button', { name: /编辑/ }).click();
+    await page.getByLabel('标题').fill(`${title} updated`);
+    await page.getByRole('radio', { name: 'Closed' }).check();
+    await page.getByRole('checkbox', { name: 'Open' }).click();
+    await expect(page.getByRole('checkbox', { name: 'Open' })).not.toBeChecked();
+    await page.getByRole('button', { name: /^保存修改$/ }).click();
+    await expect(page.getByText(`${title} updated`, { exact: true })).toBeVisible();
+    await expect(page.getByText('Closed', { exact: true })).toBeVisible();
+
+    await page.getByRole('button', { name: '返回列表' }).click();
+    const updatedRow = page
+      .getByRole('row')
+      .filter({ hasText: `${title} updated` });
+    await expect(updatedRow).toHaveCount(1);
+    await updatedRow.getByRole('button', { name: '删除' }).click();
+    await page.getByRole('button', { name: /^确\s*定$/ }).click();
+    await expect(updatedRow).toHaveCount(0);
+  });
+
+  test('applies PostgreSQL row scope to the standard list and query UI', async ({
+    context,
+    page,
+  }) => {
+    await context.clearCookies();
+    await context.addCookies([
+      {
+        name: 'openxiangda-field-ui-role',
+        value: 'restricted',
+        domain: '127.0.0.1',
+        path: '/',
+      },
+    ]);
+    await page.goto(
+      '/data-api-live.e2e.html?initial=/admin/resources/field-records',
+    );
+    await expect(page.locator('.oxa-list-surface')).toBeVisible();
+    await page.locator('.oxa-search-panel .ant-select').first().click();
+    await page.getByText('标题', { exact: true }).last().click();
+    await page.getByPlaceholder('关键词').fill('UI RLS');
+    await page.getByRole('button', { name: /查询/ }).click();
+    await expect(page.getByText('UI RLS visible', { exact: true })).toBeVisible();
+    await expect(page.getByText('UI RLS hidden', { exact: true })).toHaveCount(0);
+    await page.screenshot({
+      fullPage: true,
+      path: 'test-results/data-api-live-rls.png',
+    });
+  });
+
+  test('fails closed in the standard page when the role has no read capability', async ({
+    context,
+    page,
+  }) => {
+    await context.clearCookies();
+    await context.addCookies([
+      {
+        name: 'openxiangda-field-ui-role',
+        value: 'denied',
+        domain: '127.0.0.1',
+        path: '/',
+      },
+    ]);
+    await page.goto(
+      '/data-api-live.e2e.html?initial=/admin/resources/field-records',
+    );
+    await expect(
+      page.getByText('当前平台用户无字段协议记录页面权限', { exact: true })
+    ).toBeVisible();
+    await expect(page.locator('.oxa-list-surface')).toHaveCount(0);
+  });
+});

package/template/apps/web/e2e/field-protocol-fixture.tsx

@@ -0,0 +1,350 @@
+import { Button, ConfigProvider, Form, Typography } from 'antd';
+import type {
+  DataAuditEntry,
+  DataFieldSurface,
+  DataFileRef,
+} from 'openxiangda/core';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  auditFieldChange,
+  MobileSurfaceFieldControl,
+  SurfaceAuditFieldValue,
+  SurfaceFieldControl,
+  SurfaceFieldValue,
+  type SurfaceField,
+  type SurfaceFieldRenderers,
+} from 'openxiangda/field-kit';
+import 'openxiangda/react/styles.css';
+
+const options = [
+  { label: '启用', value: 'enabled' },
+  { label: '停用', value: 'disabled' },
+];
+const source = {
+  kind: 'resource' as const,
+  resourceCode: 'field-lookups',
+  labelField: 'name',
+  searchFields: ['name'],
+  snapshotFields: ['code'],
+};
+const field = (
+  key: string,
+  type: string,
+  widget: string,
+  extra: Record<string, unknown> = {}
+) =>
+  ({
+    key,
+    label: key,
+    type,
+    widget,
+    readCapabilities: [],
+    createCapabilities: [],
+    updateCapabilities: [],
+    ...(type === 'date-range' || type === 'datetime-range'
+      ? { rangeBoundary: 'closed' as const }
+      : {}),
+    ...extra,
+  } as unknown as SurfaceField);
+
+const fields = [
+  field('单行文本', 'text.short', 'text', { maxLength: 120 }),
+  field('邮箱', 'text.short', 'email'),
+  field('电话', 'text.short', 'phone'),
+  field('多行文本', 'text.long', 'textarea'),
+  field('富文本', 'text.rich', 'rich-text'),
+  field('整数', 'number.integer', 'number', { scale: 0 }),
+  field('小数', 'number.decimal', 'number', { scale: 2 }),
+  field('金额', 'number.decimal', 'money', { scale: 2 }),
+  field('百分比', 'number.decimal', 'percent', { scale: 2 }),
+  field('布尔', 'boolean', 'switch'),
+  field('日期', 'date', 'date'),
+  field('时间', 'time', 'time', { timePrecision: 'second' }),
+  field('日期时间', 'datetime', 'datetime'),
+  field('日期范围', 'date-range', 'date-range'),
+  field('日期时间范围', 'datetime-range', 'datetime-range'),
+  field('静态单选下拉', 'option.single', 'select', { options }),
+  field('静态多选下拉', 'option.multiple', 'multi-select', { options }),
+  field('单选按钮', 'option.single', 'radio', { options }),
+  field('复选框', 'option.multiple', 'checkbox', { options }),
+  field('动态单选下拉', 'resource-ref.single', 'select', { source }),
+  field('动态多选下拉', 'resource-ref.multiple', 'multi-select', { source }),
+  field('级联单选', 'cascade.single', 'cascade', {
+    options: [
+      {
+        label: '设备',
+        value: 'equipment',
+        children: [{ label: '显微镜', value: 'microscope' }],
+      },
+    ],
+  }),
+  field('级联多选', 'cascade.multiple', 'cascade', {
+    options: [
+      {
+        label: '设备',
+        value: 'equipment',
+        children: [{ label: '显微镜', value: 'microscope' }],
+      },
+    ],
+  }),
+  field('成员单选', 'user.single', 'directory-user'),
+  field('成员多选', 'user.multiple', 'directory-user'),
+  field('部门单选', 'department.single', 'directory-department'),
+  field('部门多选', 'department.multiple', 'directory-department'),
+  field('资源单选', 'resource-ref.single', 'resource', { source }),
+  field('资源多选', 'resource-ref.multiple', 'resource', { source }),
+  field('附件', 'file', 'attachment', {
+    accept: ['.pdf', 'text/plain'],
+    maxCount: 3,
+    maxSizeMb: 20,
+  }),
+  field('图片', 'image', 'image', {
+    accept: ['image/*'],
+    maxCount: 3,
+    maxSizeMb: 20,
+  }),
+  field('业务签名', 'signature', 'signature'),
+  field('地址', 'address', 'address'),
+  field('精确定位', 'location', 'location'),
+  field('UUID', 'uuid', 'readonly', { requiredHint: true }),
+  field('JSON', 'json', 'json'),
+  field('流水号', 'serial-number', 'readonly'),
+  field('子表', 'subtable', 'subtable'),
+] satisfies Array<DataFieldSurface & { key: string }>;
+
+const user = { label: '张三', value: 'user-1', employeeNo: 'E1001' };
+const department = {
+  label: '理学院',
+  value: 'college-a',
+  fullPath: '学校 / 理学院',
+};
+const reference = {
+  label: '显微镜',
+  value: 'resource-1',
+  resourceCode: 'field-lookups',
+  snapshot: { code: 'M-001' },
+};
+const fileRef: DataFileRef = {
+  schemaVersion: 'openxiangda.data-file-ref/v2',
+  id: '11111111-1111-4111-8111-111111111111',
+  name: '验收附件.pdf',
+  size: 1280,
+  contentType: 'application/pdf',
+};
+const imageRef: DataFileRef = {
+  ...fileRef,
+  id: '22222222-2222-4222-8222-222222222222',
+  name: '验收图片.png',
+  contentType: 'image/png',
+  width: 640,
+  height: 480,
+  previewUrl: '/service/openxiangda-api/v2/applications/field-protocol-fixture/native/data/field-records/files/22222222-2222-4222-8222-222222222222/content?disposition=inline',
+  thumbnailUrl: '/service/openxiangda-api/v2/applications/field-protocol-fixture/native/data/field-records/files/22222222-2222-4222-8222-222222222222/content?variant=thumbnail&disposition=inline',
+};
+const values: Record<string, unknown> = {
+  单行文本: '仪器验收记录',
+  邮箱: 'user@example.com',
+  电话: '13800000000',
+  多行文本: '第一行\n第二行',
+  富文本: `<p>已保存的<strong>富文本</strong></p><img src="${imageRef.previewUrl}" alt="富文本图片">`,
+  整数: -7,
+  小数: 12.34,
+  金额: 5600.5,
+  百分比: 98.5,
+  布尔: true,
+  日期: '2026-08-24',
+  时间: '10:20:30',
+  日期时间: '2026-08-24T02:20:30.000Z',
+  日期范围: { start: '2026-08-01', end: '2026-08-31' },
+  日期时间范围: {
+    start: '2026-08-01T00:00:00.000Z',
+    end: '2026-08-31T23:59:59.000Z',
+  },
+  静态单选下拉: options[0],
+  静态多选下拉: options,
+  单选按钮: options[0],
+  复选框: options,
+  动态单选下拉: reference,
+  动态多选下拉: [reference],
+  级联单选: [
+    { label: '设备', value: 'equipment' },
+    { label: '显微镜', value: 'microscope' },
+  ],
+  级联多选: [
+    [
+      { label: '设备', value: 'equipment' },
+      { label: '显微镜', value: 'microscope' },
+    ],
+  ],
+  成员单选: user,
+  成员多选: [user],
+  部门单选: department,
+  部门多选: [department],
+  资源单选: reference,
+  资源多选: [reference],
+  附件: [fileRef],
+  图片: [imageRef],
+  业务签名: {
+    file: {
+      ...fileRef,
+      id: '33333333-3333-4333-8333-333333333333',
+      name: 'signature.png',
+      contentType: 'image/png',
+    },
+    signer: user,
+    signedAt: '2026-08-24T02:20:30.000Z',
+    hash: 'a'.repeat(64),
+    points: [{ x: 1, y: 1, t: 1 }],
+  },
+  地址: {
+    country: { label: '中国', value: 'CN' },
+    province: { label: '浙江省', value: '330000' },
+    city: { label: '杭州市', value: '330100' },
+    district: { label: '西湖区', value: '330106' },
+    detail: '文一路 1 号',
+    fullAddress: '浙江省杭州市西湖区文一路 1 号',
+  },
+  精确定位: {
+    source: 'browser',
+    longitude: 120.123456,
+    latitude: 30.234567,
+    accuracy: 5,
+    capturedAt: '2026-08-24T02:20:30.000Z',
+  },
+  JSON: { status: 'ok', nested: { count: 1 } },
+  流水号: 'FP-001000',
+  子表: [{ item_name: '第一行' }, { item_name: '第二行' }],
+};
+
+const auditEntry: DataAuditEntry = {
+  id: 'field-protocol-event',
+  operation: 'created',
+  recordId: 'field-protocol-record',
+  revision: 1,
+  actor: { principalType: 'user', subjectId: 'user-1' },
+  correlation: {
+    eventId: 'field-protocol-event',
+    requestId: null,
+    traceId: null,
+    environmentKey: 'preproduction',
+    appVersionId: 'field-protocol-version',
+    environmentHeadRevision: 1,
+    capturePlanRevision: 1,
+    cause: { eventId: null, subscriptionCode: null, depth: 0 },
+  },
+  changes: Object.fromEntries(
+    fields.map(item => [item.key, { after: values[item.key] ?? null }])
+  ),
+  projection: {},
+  occurredAt: '2026-08-25T00:00:00.000Z',
+};
+
+const renderers: SurfaceFieldRenderers = {
+  signer: user,
+  upload: async (_field, file) => ({
+    schemaVersion: 'openxiangda.data-file-ref/v2',
+    id: crypto.randomUUID(),
+    name: file.name,
+    size: file.size,
+    contentType: file.type,
+  }),
+  renderSubtable: () => (
+    <div className="field-protocol-subtable">2 行子表 · 新增 · 删除 · 排序</div>
+  ),
+  renderValue: ({ field: item, value }) =>
+    item.type === 'subtable'
+      ? `${Array.isArray(value) ? value.length : 0} 行子表`
+      : undefined,
+};
+
+function AcceptancePage() {
+  const mobile = new URLSearchParams(location.search).get('mode') === 'mobile';
+  const Control = mobile ? MobileSurfaceFieldControl : SurfaceFieldControl;
+  return (
+    <ConfigProvider theme={{ token: { borderRadius: 6 } }}>
+      <main className={`field-protocol-page ${mobile ? 'is-mobile' : 'is-desktop'}`}>
+        <header>
+          <Typography.Title level={mobile ? 4 : 2}>
+            Field Kit 协议验收
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            {mobile ? '移动编辑态' : '桌面编辑态与已存快照只读态'}
+          </Typography.Text>
+        </header>
+        <section aria-label={mobile ? '移动编辑字段' : '桌面编辑字段'} className="field-protocol-edit">
+          <Form initialValues={values} layout="vertical" onFinish={() => undefined}>
+            <div className="field-protocol-grid">
+              {fields.map(item => (
+                <div data-field-code={item.key} key={item.key}>
+                  <Control
+                    disabled={item.widget === 'readonly'}
+                    field={item}
+                    operation="create"
+                    renderers={renderers}
+                    resourceCode="field-records"
+                  />
+                </div>
+              ))}
+            </div>
+            <Button htmlType="submit">验证表单</Button>
+          </Form>
+        </section>
+        {!mobile && (
+          <section aria-label="已存快照只读字段" className="field-protocol-readonly">
+            <Typography.Title level={3}>已存快照</Typography.Title>
+            <div className="field-protocol-read-grid">
+              {fields.map(item => (
+                <div data-read-field={item.key} key={item.key}>
+                  <strong>{item.label}</strong>
+                  <SurfaceFieldValue
+                    field={item}
+                    renderers={renderers}
+                    resourceCode="field-records"
+                    value={values[item.key]}
+                  />
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+        {!mobile && (
+          <section aria-label="当前协议字段变更记录" className="field-protocol-readonly">
+            <Typography.Title level={3}>当前协议字段变更记录</Typography.Title>
+            <div className="field-protocol-read-grid">
+              {fields.map(item => (
+                <div data-audit-field={item.key} key={item.key}>
+                  <strong>{item.label}</strong>
+                  <SurfaceAuditFieldValue
+                    field={item}
+                    resourceCode="field-records"
+                    value={auditFieldChange(auditEntry, item.key)?.after}
+                  />
+                </div>
+              ))}
+              <div data-audit-digest="rich-text">
+                <strong>富文本摘要</strong>
+                <SurfaceAuditFieldValue
+                  field={fields[4]}
+                  value={{
+                    kind: 'digest',
+                    truncated: true,
+                    valueType: 'text.rich',
+                    bytes: 65_537,
+                    sha256: 'a'.repeat(64),
+                  }}
+                />
+              </div>
+            </div>
+          </section>
+        )}
+      </main>
+    </ConfigProvider>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <AcceptancePage />
+  </React.StrictMode>
+);