openxiangda-cli 2.0.0-alpha.85 → 2.0.0-alpha.89

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>
+);

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

@@ -0,0 +1,100 @@
+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,
+          }],
+        },
+      });
+    });
+  });
+
+  test('renders and operates every desktop edit/read component', async ({ page }) => {
+    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-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 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(
+      await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
+    ).toBe(true);
+    await page.screenshot({ fullPage: true, path: 'test-results/field-protocol-desktop.png' });
+  });
+
+  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' });
+  });
+});