openxiangda-cli 2.0.0-alpha.84 → 2.0.0-alpha.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda-cli",
-  "version": "2.0.0-alpha.84",
+  "version": "2.0.0-alpha.86",
   "description": "Thin application-level CLI for OpenXiangda 2.0.",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,9 +23,9 @@
   ],
   "dependencies": {
     "@oclif/core": "4.13.3",
-    "openxiangda-contracts": "2.0.0-alpha.38",
-    "openxiangda-devkit-core": "2.0.0-alpha.51",
-    "openxiangda-mcp": "2.0.0-alpha.51"
+    "openxiangda-contracts": "2.0.0-alpha.40",
+    "openxiangda-devkit-core": "2.0.0-alpha.53",
+    "openxiangda-mcp": "2.0.0-alpha.53"
   },
   "devDependencies": {
     "tsx": "4.23.12",

package/template/AGENTS.md

@@ -7,13 +7,13 @@
 - Ordinary list/get/create/update/delete, filters, export and batch operations use the platform Native Data API. Do not create Function CRUD or NestJS wrappers.
 - Add NestJS only for a named business action that needs a cross-resource transaction, an invariant or an external side effect.
 - A NestJS backend declares only `enabled`, `isolation: 'shared' | 'dedicated'` and `resourceProfile: 'light' | 'standard'`. Never put raw Kubernetes resources, replicas, ports or environment maps in application metadata; the platform owns capacity and scaling.
-- Use the current logged-in user and the union of application roles. Do not select RoleSession, persist platform Token or implement a second authorization path.
+- Use the current logged-in user and the union of that user's application roles. The generated shell automatically carries the platform's opaque authorization context for Data, Directory and App API requests. Business code must not read or persist that identifier, a platform Token, or authorization results, and must not implement a second identity path.
 - Fields inherit the resource read/create/update capabilities. Use field `access` only to tighten them; arrays are all-of and `false` is explicit deny. There is no `write` fallback.
-- Field storage types are exactly `string`, `text`, `integer`, `decimal`, `boolean`, `date`, `datetime`, `uuid`, `json` and `file`; there is no `number` type.
+- Field `type` is semantic, never a hand-authored database type. The supported catalog is exactly `text.short`, `text.long`, `text.rich`, `number.integer`, `number.decimal`, `boolean`, `date`, `time`, `datetime`, `date-range`, `datetime-range`, `option.single`, `option.multiple`, `cascade.single`, `cascade.multiple`, `user.single`, `user.multiple`, `department.single`, `department.multiple`, `resource-ref.single`, `resource-ref.multiple`, `file`, `image`, `signature`, `address`, `location`, `json`, `serial-number`, `uuid` and `subtable`. The compiler alone derives PostgreSQL columns, constraints and indexes.
 - Declare every custom operation capability in `authz.capabilities` with `kind: 'backend'`, then reference that same code from the operation and its allowed roles. Generated resource CRUD capabilities do not go in this catalog.
 - Visitor duplicate protection uses `createVisitorReservation({ duplicateMatch: { fieldCode: submittedValue }, ... })`. `duplicateMatch` is a non-empty value map, never a field-name array, and no mutable pre-read is allowed.
-- Desktop and mobile pages share values, validation and authorization, but use separate renderers. Members, departments, resources and attachments use platform-owned selectors and stable IDs.
-- A single directory user reference uses a `string` field; a single department or same-app resource reference uses `uuid`; every `multiple: true` reference uses `json`. Roles that consume directory-backed fields explicitly include `app:<app-code>:directory:read`.
+- Desktop and mobile pages share values, validation and authorization, but use separate renderers. Options, members, departments and resource references store their complete display snapshots; attachments, images and signatures use platform-managed file references.
+- `option.*`, `user.*`, `department.*` and `resource-ref.*` values never collapse to scalar IDs. Single values store one labeled snapshot and multiple values store snapshot arrays. `location` accepts only exact WGS84 coordinates captured by DingTalk or browser geolocation; it has no manual input or `manual` source. Roles that consume directory-backed fields explicitly include `app:<app-code>:directory:read`.
 - Derive role grants with `resourceCapabilityCodes(appCode, resourceCode)`. Declare current-user rows only with `currentUserDataPolicy(...)`; do not invent operators, values or alternate current-user spellings.
 - Do not add compatibility aliases, migration branches or silent fallbacks for an earlier 2.0 alpha contract. Replace an incorrect contract and regenerate the application.
 - Run `pnpm openxiangda check` after contract changes. Deploy with `pnpm openxiangda deploy`, inspect with `pnpm openxiangda status` and `pnpm openxiangda logs`, and use the platform rollback command rather than mutating K3s directly.

package/template/README.md

@@ -12,9 +12,9 @@ pnpm openxiangda dev
 
 成员、部门和资源关系分别使用 `reference: { kind: 'directory-user' }`、`directory-department`、`resource`，只保存稳定 ID，不复制目录数据。单选成员字段使用 `string`，单选部门和资源引用使用 `uuid`，多选引用统一使用 `json`。需要目录选择器的业务角色必须显式拥有 `app:<app-code>:directory:read` 能力。用 `resourceCapabilityCodes` 生成资源 CRUD 权限，用 `currentUserDataPolicy` 声明唯一的当前用户行规则。
 
-所有 CRUD 位于 `apps/web/src/platform-client.ts` 的 Data API adapter；Nest 只在需要复杂事务或外部集成时增加 App API。选择器显式携带当前环境、使用同源 Cookie，浏览器不读取 Token，也不发送 RoleSession header。
+所有 CRUD 位于 `apps/web/src/platform-client.ts` 的 Data API adapter；Nest 只在需要复杂事务或外部集成时增加 App API。选择器显式携带当前环境、使用同源 Cookie。标准客户端在内存中恢复平台 RoleSession，并自动为 Data、Directory、文件和 App API 请求携带 header；业务代码不读取或持久化 Token、RoleSession 标识与授权结果。
 
-前端读取平台 current-user 的角色/能力并集进行展示保护，服务端始终权威。字段默认继承资源 read/create/update；`access` 数组为 all-of，`false` 为明确拒绝，无权字段在提交前从 payload 删除。
+前端读取当前单一应用角色和 capability 做展示保护；多角色用户从当前应用个人菜单切换，切换后页面、数据和操作上下文整体替换，不做权限并集。服务端始终权威。字段默认继承资源 read/create/update；`access` 数组为 all-of，`false` 为明确拒绝，无权字段在提交前从 payload 删除。
 
 ```bash
 pnpm openxiangda check

package/template/apps/server/package.json

@@ -15,7 +15,7 @@
     "@nestjs/common": "11.1.29",
     "@nestjs/core": "11.1.29",
     "@nestjs/platform-fastify": "11.1.29",
-    "openxiangda-nest": "2.0.0-alpha.47",
+    "openxiangda-nest": "2.0.0-alpha.49",
     "reflect-metadata": "0.2.2",
     "rxjs": "7.8.2"
   },

package/template/apps/web/data-api-live.e2e.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="openxiangda-runtime-base" content="/" />
+    <meta name="openxiangda-app-code" content="native-projection-app" />
+    <meta name="openxiangda-environment" content="production" />
+    <title>OpenXiangda Standard Data API Live Acceptance</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/e2e/data-api-live-fixture.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,141 @@
+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 { createApplicationProvider } from '../src/data-provider';
+import { GeneratedResourcePage } from '../src/components/resource/GeneratedResourceCrud';
+import type { GeneratedResourceDefinition } from '../src/components/resource/generated-resource-definition';
+import { AppearanceProvider } from '../src/appearance';
+import { RuntimeBoundary } from '../src/runtime';
+import '../src/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: {
+    generated: 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 initialPath =
+  new URLSearchParams(window.location.search).get('initial') || `/${code}`;
+
+function resourcePage(mode: 'list' | 'create' | 'edit' | 'detail') {
+  return (
+    <GeneratedResourcePage
+      definition={liveDefinition}
+      mode={mode}
+      resourceCode={code}
+    />
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <AppearanceProvider>
+      <AntdApp>
+        <RuntimeBoundary>
+          <MemoryRouter initialEntries={[initialPath]}>
+            <Refine
+              dataProvider={provider}
+              resources={[
+                {
+                  name: code,
+                  list: `/${code}`,
+                  create: `/${code}/new`,
+                  edit: `/${code}/:id/edit`,
+                  show: `/${code}/:id`,
+                },
+              ]}
+            >
+              <Routes>
+                <Route path={`/${code}`} element={resourcePage('list')} />
+                <Route path={`/${code}/new`} element={resourcePage('create')} />
+                <Route
+                  path={`/${code}/:id`}
+                  element={resourcePage('detail')}
+                />
+                <Route
+                  path={`/${code}/:id/edit`}
+                  element={resourcePage('edit')}
+                />
+              </Routes>
+            </Refine>
+          </MemoryRouter>
+        </RuntimeBoundary>
+      </AntdApp>
+    </AppearanceProvider>
+  </React.StrictMode>
+);

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,280 @@
+import { ConfigProvider, Form, Typography } from 'antd';
+import type { DataFieldSurface, DataFileRef } from 'openxiangda-contracts/browser';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  MobileSurfaceFieldControl,
+  SurfaceFieldControl,
+  SurfaceFieldValue,
+  type SurfaceField,
+  type SurfaceFieldRenderers,
+} from '../src/components/resource/SurfaceFields';
+import '../src/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'),
+  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 = {
+  id: '11111111-1111-4111-8111-111111111111',
+  name: '验收附件.pdf',
+  size: 1280,
+  contentType: 'application/pdf',
+};
+const values: Record<string, unknown> = {
+  单行文本: '仪器验收记录',
+  邮箱: 'user@example.com',
+  电话: '13800000000',
+  多行文本: '第一行\n第二行',
+  富文本: '<p>已保存的<strong>富文本</strong></p>',
+  整数: -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],
+  图片: [
+    {
+      ...fileRef,
+      id: '22222222-2222-4222-8222-222222222222',
+      name: '验收图片.png',
+      contentType: 'image/png',
+      width: 640,
+      height: 480,
+    },
+  ],
+  业务签名: {
+    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',
+  },
+  UUID: '44444444-4444-4444-8444-444444444444',
+  JSON: { status: 'ok', nested: { count: 1 } },
+  流水号: 'FP-001000',
+  子表: [{ item_name: '第一行' }, { item_name: '第二行' }],
+};
+
+const renderers: SurfaceFieldRenderers = {
+  signer: user,
+  upload: async (_field, file) => ({
+    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">
+            <div className="field-protocol-grid">
+              {fields.map(item => (
+                <div data-field-code={item.key} key={item.key}>
+                  <Control
+                    disabled={false}
+                    field={item}
+                    operation="create"
+                    renderers={renderers}
+                    resourceCode="field-records"
+                  />
+                </div>
+              ))}
+            </div>
+          </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} value={values[item.key]} />
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </main>
+    </ConfigProvider>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <AcceptancePage />
+  </React.StrictMode>
+);