openxiangda-cli 2.0.0-alpha.100

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

@@ -0,0 +1,138 @@
+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=/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=/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=/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,347 @@
+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: [],
+    ...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>
+);

package/template/apps/web/e2e/field-protocol.spec.ts

@@ -0,0 +1,186 @@
+import { expect, test } from '@playwright/test';
+
+const fieldCount = 38;
+
+test.describe('Field Kit protocol acceptance', () => {
+  test.use({
+    geolocation: { longitude: 120.123456, latitude: 30.234567 },
+    permissions: ['geolocation'],
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/china-divisions/**', async route => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: {
+          code: 200,
+          data: [{
+            adcode: '330000',
+            name: '浙江省',
+            level: 'province',
+            hasChildren: true,
+          }],
+        },
+      });
+    });
+    await page.route('**/files/*/content?*', async route => {
+      await route.fulfill({
+        body: Buffer.from(
+          'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+          'base64'
+        ),
+        contentType: 'image/png',
+        status: 200,
+      });
+    });
+  });
+
+  test('renders and operates every desktop edit/read component', async ({ page }) => {
+    const pageErrors: string[] = [];
+    const addressRequests: string[] = [];
+    page.on('pageerror', error => pageErrors.push(error.message));
+    page.on('request', request => {
+      if (request.url().includes('/china-divisions/')) {
+        addressRequests.push(request.url());
+      }
+    });
+    await page.setViewportSize({ width: 1440, height: 1100 });
+    await page.goto('/field-protocol.e2e.html');
+    await expect(page.locator('[data-field-code]')).toHaveCount(fieldCount);
+    await expect(page.locator('[data-read-field]')).toHaveCount(fieldCount);
+    await expect(page.locator('[data-audit-field]')).toHaveCount(fieldCount);
+    await expect(page.locator('[data-field-code="静态单选下拉"] .ant-select')).toBeVisible();
+    await expect(page.locator('[data-field-code="单选按钮"] .ant-radio-group')).toBeVisible();
+    await expect(page.locator('[data-field-code="复选框"] .ant-checkbox-group')).toBeVisible();
+    await expect(page.locator('[data-field-code="时间"] input')).toBeVisible();
+    await expect(page.locator('[data-field-code="精确定位"] input')).toHaveCount(0);
+    await expect(page.locator('[data-field-code="精确定位"]')).not.toContainText('手工');
+    await expect(page.locator('.ant-alert-error')).toHaveCount(0);
+    await expect.poll(() => addressRequests.length).toBeGreaterThan(0);
+    expect(addressRequests.every(url => new URL(url).pathname.startsWith('/service/china-divisions/'))).toBe(true);
+
+    await page.getByRole('button', { name: '验证表单' }).click();
+    await expect(page.locator('[data-field-code="UUID"] .ant-form-item-has-error')).toHaveCount(0);
+
+    await expect(page.locator('[data-read-field="图片"] img.oxa-file-thumbnail')).toHaveAttribute('src', /blob:/);
+    await expect(page.locator('[data-read-field="富文本"] img')).toHaveAttribute('src', /blob:/);
+    expect(await page.locator('[data-read-field="图片"] img.oxa-file-thumbnail').evaluate(
+      image => (image as HTMLImageElement).naturalWidth
+    )).toBeGreaterThan(0);
+    expect(await page.locator('[data-read-field="富文本"] img').evaluate(
+      image => (image as HTMLImageElement).naturalWidth
+    )).toBeGreaterThan(0);
+    await expect(page.locator('[aria-label="当前协议字段变更记录"]')).not.toContainText('[object Object]');
+    await expect(page.locator('[data-audit-digest="rich-text"]')).toContainText('大值摘要');
+
+    await page.locator('[data-field-code="精确定位"]').getByRole('button', { name: '浏览器定位' }).click();
+    await expect(page.locator('[data-field-code="精确定位"]')).toContainText('120.123456');
+    await expect(page.locator('[data-field-code="精确定位"]')).toContainText('30.234567');
+
+    await page
+      .locator('[data-field-code="业务签名"]')
+      .getByRole('button', { name: /(?:开始|重新)签名/ })
+      .click();
+    const canvas = page.locator('canvas[aria-label="手写签名画布"]');
+    await expect(canvas).toBeVisible();
+    const box = await canvas.boundingBox();
+    expect(box).not.toBeNull();
+    await canvas.dispatchEvent('pointerdown', {
+      pointerId: 1,
+      pointerType: 'pen',
+      buttons: 1,
+      clientX: box!.x + 30,
+      clientY: box!.y + 40,
+    });
+    for (let step = 1; step <= 8; step += 1) {
+      await canvas.dispatchEvent('pointermove', {
+        pointerId: 1,
+        pointerType: 'pen',
+        buttons: 1,
+        clientX: box!.x + 30 + (130 * step) / 8,
+        clientY: box!.y + 40 + (80 * step) / 8,
+      });
+    }
+    await canvas.dispatchEvent('pointerup', {
+      pointerId: 1,
+      pointerType: 'pen',
+      buttons: 0,
+      clientX: box!.x + 160,
+      clientY: box!.y + 120,
+    });
+    const saveSignature = page.getByRole('button', { name: '保存签名' });
+    await expect(saveSignature).toBeEnabled();
+    await saveSignature.click();
+    await expect(page.locator('[data-field-code="业务签名"]')).not.toContainText('尚未签名');
+
+    expect(pageErrors).toEqual([]);
+
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
+    ).toBe(true);
+    await page.screenshot({ fullPage: true, path: 'test-results/field-protocol-desktop.png' });
+  });
+
+  test('resource selectors query once when selection changes', async ({ page }) => {
+    const requestCounts = new Map<string, number>();
+    await page.route('**/source/query', async route => {
+      const match = new URL(route.request().url()).pathname.match(/\/fields\/([^/]+)\/source\/query$/);
+      const fieldCode = decodeURIComponent(match?.[1] || 'unknown');
+      requestCounts.set(fieldCode, (requestCounts.get(fieldCode) || 0) + 1);
+      const body = route.request().postDataJSON() as { operation?: 'create' | 'update' };
+      await route.fulfill({
+        contentType: 'application/json',
+        json: {
+          schemaVersion: 'openxiangda.data-field-source-page/v2',
+          environment: {
+            id: 'field-protocol-environment',
+            key: 'preproduction',
+            activeAppVersionId: 'field-protocol-version',
+            headRevision: 1,
+            authzRevisionId: 'field-protocol-authz',
+            authzVersion: 1,
+            scopeDataVersion: 'field-protocol-scope',
+          },
+          resourceCode: 'field-records',
+          fieldCode,
+          sourceResourceCode: 'field-lookups',
+          operation: body.operation || 'create',
+          items: [{
+            label: `候选-${fieldCode}`,
+            value: `candidate-${fieldCode}`,
+            resourceCode: 'field-lookups',
+            snapshot: { code: `code-${fieldCode}` },
+          }],
+          nextCursor: null,
+        },
+      });
+    });
+
+    await page.goto('/field-protocol.e2e.html');
+    for (const fieldCode of ['资源单选', '资源多选']) {
+      await page.locator(`[data-field-code="${fieldCode}"]`).getByRole('combobox').click();
+      await expect.poll(() => requestCounts.get(fieldCode) || 0).toBe(1);
+      await page
+        .locator('.ant-select-dropdown:visible .oxa-selector-option')
+        .filter({ hasText: `候选-${fieldCode}` })
+        .click();
+      await page.waitForTimeout(500);
+      expect(requestCounts.get(fieldCode)).toBe(1);
+      await page.keyboard.press('Escape');
+    }
+  });
+
+  test('renders every mobile control without horizontal overflow', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/field-protocol.e2e.html?mode=mobile');
+    await expect(page.locator('[data-field-code]')).toHaveCount(fieldCount);
+    await expect(page.locator('.oxa-mobile-field')).toHaveCount(fieldCount);
+    await expect(page.locator('[data-field-code="精确定位"] input')).toHaveCount(0);
+    await expect(page.locator('[data-field-code="附件"] input[type="file"]')).toBeHidden();
+    await expect(page.locator('.ant-alert-error')).toHaveCount(0);
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
+    ).toBe(true);
+    await page.screenshot({ fullPage: true, path: 'test-results/field-protocol-mobile.png' });
+  });
+});