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

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

@@ -0,0 +1,195 @@
+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');
+    await expect(page.locator('[data-field-code]')).toHaveCount(fieldCount);
+    await page.waitForLoadState('networkidle');
+    for (const fieldCode of ['资源单选', '资源多选']) {
+      const combobox = page
+        .locator(`[data-field-code="${fieldCode}"]`)
+        .getByRole('combobox');
+      await expect(combobox).toBeVisible();
+      await combobox.click();
+      const dropdown = page.locator('.ant-select-dropdown:visible');
+      await expect(dropdown).toBeVisible();
+      await expect.poll(() => requestCounts.get(fieldCode) || 0).toBe(1);
+      await dropdown
+        .locator('.ant-select-item-option')
+        .filter({ hasText: `候选-${fieldCode}` })
+        .click();
+      await page.waitForTimeout(500);
+      expect(requestCounts.get(fieldCode)).toBe(1);
+      await page.keyboard.press('Escape');
+      await expect(dropdown).toBeHidden();
+    }
+  });
+
+  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' });
+  });
+});

package/template/apps/web/e2e/resource-experience-fixture.tsx

@@ -0,0 +1,446 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button, Typography } from 'antd';
+import {
+  defineApplicationContributions,
+  OpenXiangdaAdminPage,
+  OpenXiangdaApplication,
+} from 'openxiangda/react';
+import type { DataFieldSurface, DataResourceSurface } from 'openxiangda/core';
+import 'openxiangda/react/styles.css';
+import './theme-contract-fixture.css';
+
+const field = (
+  label: string,
+  type: DataFieldSurface['type'] = 'text.short',
+  widget: DataFieldSurface['widget'] = 'text',
+  extra: Partial<DataFieldSurface> = {}
+): DataFieldSurface => ({
+  label,
+  type,
+  widget,
+  readCapabilities: [],
+  createCapabilities: [],
+  updateCapabilities: [],
+  ...extra,
+});
+
+const fields: DataResourceSurface['fields'] = {
+  departmentMultiple: field('构成部门', 'department.multiple', 'directory-department', {
+    list: true,
+    section: '组织信息',
+  }),
+  departmentSingle: field('牵头部门', 'department.single', 'directory-department', {
+    list: true,
+    section: '组织信息',
+  }),
+  userMultiple: field('小组成员', 'user.multiple', 'directory-user', {
+    list: true,
+    section: '组织信息',
+  }),
+  resourceMultiple: field('关联资源', 'resource-ref.multiple', 'resource', {
+    list: true,
+    section: '组织信息',
+    source: {
+      kind: 'resource',
+      resourceCode: 'resource-01',
+      labelField: 'name',
+      searchFields: ['name'],
+    },
+  }),
+  enabled: field('启用状态', 'boolean', 'switch', {
+    list: true,
+    section: '组织信息',
+  }),
+  displayOrder: field('显示顺序', 'number.integer', 'number', {
+    list: true,
+    section: '组织信息',
+  }),
+  description: field('栏目说明', 'text.long', 'textarea', {
+    section: '栏目设置',
+  }),
+  status: field('状态', 'option.single', 'select', {
+    options: [
+      { label: '启用', value: 'enabled' },
+      { label: '停用', value: 'disabled' },
+    ],
+    section: '栏目设置',
+  }),
+  name: field('栏目名称', 'text.short', 'text', { section: '栏目设置' }),
+  code: field('栏目编码', 'text.short', 'text', { section: '栏目设置' }),
+  contentType: field('内容类型', 'option.single', 'select', {
+    options: [
+      { label: '文章', value: 'article' },
+      { label: '图集', value: 'gallery' },
+    ],
+    section: '栏目设置',
+  }),
+  manager: field('栏目管理员', 'user.single', 'directory-user', {
+    section: '管理信息',
+  }),
+  facility: field('配套设施', 'option.multiple', 'multi-select', {
+    options: [
+      { label: '投影仪', value: 'projector' },
+      { label: '白板', value: 'whiteboard' },
+    ],
+    section: '管理信息',
+  }),
+  openingDay: field('开放星期', 'option.single', 'select', {
+    options: [
+      { label: '工作日', value: 'weekday' },
+      { label: '周末', value: 'weekend' },
+    ],
+    section: '管理信息',
+  }),
+};
+
+const routeManifest = {
+  schemaVersion: 'openxiangda.application-route-manifest/v3',
+  appCode: 'openxiangda-application',
+  devicePolicy: {
+    kind: 'viewport-family',
+    mobileMaxWidthPx: 900,
+    desktopMinWidthPx: 901,
+  },
+  rootEntry: { code: 'application-root', desktop: '/', mobile: '/m/' },
+  authentication: {
+    desktop: { routeCode: 'application-login', path: '/login' },
+    mobile: { routeCode: 'application-login-mobile', path: '/m/login' },
+  },
+  routes: [],
+  digest:
+    '88831760f6e672a77babbf039b35a6febca7852092f1579c2721c99596a265c4',
+} as const;
+
+const surface: DataResourceSurface = {
+  mutationOwner: 'native',
+  generated: {
+    list: true,
+    detail: true,
+    create: true,
+    update: true,
+    delete: true,
+  },
+  fields,
+  list: {
+    defaultPageSize: 20,
+    searchableFields: ['name', 'code'],
+    filterFields: ['contentType', 'status', 'manager', 'facility', 'openingDay'],
+    defaultSort: { field: 'code', order: 'asc' },
+  },
+  form: {
+    layout: 'sections',
+    fieldOrder: [
+      'code',
+      'name',
+      'contentType',
+      'description',
+      'status',
+      'manager',
+      'facility',
+      'openingDay',
+    ],
+  },
+  detail: {
+    layout: 'sections',
+    fieldOrder: [
+      'code',
+      'name',
+      'contentType',
+      'description',
+      'status',
+      'manager',
+      'facility',
+      'openingDay',
+    ],
+  },
+  mobile: { enabled: true },
+};
+
+const { enabled, displayOrder, ...remainingFields } = fields;
+const acceptanceSurface = new URLSearchParams(location.search).get('primary') === 'falsy'
+  ? { ...surface, fields: { enabled, displayOrder, ...remainingFields } }
+  : surface;
+
+const names = [
+  '内容栏目',
+  '内容文章',
+  '内容专题',
+  '会员档案',
+  '门户轮播',
+  '工会小组',
+  '场地预约',
+  '场地不可用时段',
+  '场地档案',
+  '通知公告',
+  '活动报名',
+  '资料下载',
+];
+const resourceDefinitions = Object.fromEntries(
+  names.map((name, index) => {
+    const code = `resource-${String(index + 1).padStart(2, '0')}`;
+    return [
+      code,
+      {
+        code,
+        name,
+        capabilities: {
+          read: `app:openxiangda-application:data:${code}:read`,
+          create: `app:openxiangda-application:data:${code}:create`,
+          update: `app:openxiangda-application:data:${code}:update`,
+          delete: `app:openxiangda-application:data:${code}:delete`,
+        },
+        surface: acceptanceSurface,
+      },
+    ];
+  })
+);
+
+function ContentOperationsPage() {
+  return (
+    <OpenXiangdaAdminPage
+      className="theme-contract-page"
+      data-testid="custom-admin-page"
+    >
+      <Typography.Title level={2}>内容业务操作</Typography.Title>
+      <div className="theme-contract-panel">
+        自定义后台页语义主题面板
+      </div>
+    </OpenXiangdaAdminPage>
+  );
+}
+
+function ResourcePortalPage() {
+  return <Typography.Title level={2}>用户端内容门户</Typography.Title>;
+}
+
+const applicationContributions = defineApplicationContributions(
+  {
+    contentOperations: {
+      code: 'content-operations',
+      path: '/admin/operations/content',
+      label: '内容业务操作',
+      surface: 'admin',
+      capability: 'app:openxiangda-application:operations:read',
+      tabPersistence: 'session',
+      keepAlive: 'none',
+    },
+    resourcePortal: {
+      code: 'resource-portal',
+      path: '/resource-01',
+      label: '用户端内容门户',
+      surface: 'user',
+      tabPersistence: 'session',
+      keepAlive: 'none',
+    },
+  } as const,
+  {
+    pages: {
+      contentOperations: ContentOperationsPage,
+      resourcePortal: ResourcePortalPage,
+    },
+    resources: {
+      'resource-01': {
+        toolbar: [
+          {
+            code: 'publish-selected',
+            label: '发布选中栏目',
+            capability: 'app:openxiangda-application:operations:read',
+            render: ({ selectedRecords }) => (
+              <Button>发布选中栏目（{selectedRecords.length}）</Button>
+            ),
+          },
+        ],
+      },
+    },
+  },
+);
+
+if (location.pathname.endsWith('/resource-experience.e2e.html')) {
+  history.replaceState({}, '', '/admin/resources/resource-01');
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <OpenXiangdaApplication
+      appCode="openxiangda-application"
+      appName="资源体验验收"
+      adminNavigation={[
+        {
+          code: 'resources',
+          label: '数据管理',
+          icon: 'database',
+          order: 0,
+          items: [
+            { pageCode: 'resource:resource-01:list', label: '内容栏目', order: 0 },
+            { pageCode: 'resource:resource-02:list', label: '内容文章', order: 1 },
+            { pageCode: 'resource:resource-03:list', label: '内容专题', order: 2 },
+            { pageCode: 'resource:resource-04:list', label: '会员档案', order: 3 },
+            { pageCode: 'resource:resource-05:list', label: '门户轮播', order: 4 },
+            { pageCode: 'resource:resource-06:list', label: '工会小组', order: 5 },
+            { pageCode: 'resource:resource-07:list', label: '场地预约', order: 6 },
+            {
+              pageCode: 'resource:resource-08:list',
+              label: '场地不可用时段',
+              order: 7,
+            },
+            { pageCode: 'resource:resource-09:list', label: '场地档案', order: 8 },
+            { pageCode: 'resource:resource-10:list', label: '通知公告', order: 9 },
+            { pageCode: 'resource:resource-11:list', label: '活动报名', order: 10 },
+            { pageCode: 'resource:resource-12:list', label: '资料下载', order: 11 },
+            { pageCode: 'operation:content-operations', order: 12 },
+          ],
+        },
+      ]}
+      adminPages={[
+        {
+          code: 'resource:resource-01:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-01',
+          label: '资源 01',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-01'].capabilities.read,
+          resourceCode: 'resource-01',
+        },
+        {
+          code: 'resource:resource-01:detail',
+          kind: 'resource-detail',
+          path: '/admin/resources/resource-01/:id',
+          label: '资源 01 详情',
+          navigationEligible: false,
+          capability: resourceDefinitions['resource-01'].capabilities.read,
+          resourceCode: 'resource-01',
+        },
+        {
+          code: 'resource:resource-01:create',
+          kind: 'resource-create',
+          path: '/admin/resources/resource-01/new',
+          label: '新增资源 01',
+          navigationEligible: false,
+          capability: resourceDefinitions['resource-01'].capabilities.create,
+          resourceCode: 'resource-01',
+        },
+        {
+          code: 'resource:resource-01:update',
+          kind: 'resource-update',
+          path: '/admin/resources/resource-01/:id/edit',
+          label: '编辑资源 01',
+          navigationEligible: false,
+          capability: resourceDefinitions['resource-01'].capabilities.update,
+          resourceCode: 'resource-01',
+        },
+        {
+          code: 'resource:resource-02:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-02',
+          label: '内容文章',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-02'].capabilities.read,
+          resourceCode: 'resource-02',
+        },
+        {
+          code: 'resource:resource-03:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-03',
+          label: '内容专题',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-03'].capabilities.read,
+          resourceCode: 'resource-03',
+        },
+        {
+          code: 'resource:resource-04:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-04',
+          label: '会员档案',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-04'].capabilities.read,
+          resourceCode: 'resource-04',
+        },
+        {
+          code: 'resource:resource-05:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-05',
+          label: '门户轮播',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-05'].capabilities.read,
+          resourceCode: 'resource-05',
+        },
+        {
+          code: 'resource:resource-06:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-06',
+          label: '工会小组',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-06'].capabilities.read,
+          resourceCode: 'resource-06',
+        },
+        {
+          code: 'resource:resource-07:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-07',
+          label: '场地预约',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-07'].capabilities.read,
+          resourceCode: 'resource-07',
+        },
+        {
+          code: 'resource:resource-08:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-08',
+          label: '场地不可用时段',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-08'].capabilities.read,
+          resourceCode: 'resource-08',
+        },
+        {
+          code: 'resource:resource-09:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-09',
+          label: '场地档案',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-09'].capabilities.read,
+          resourceCode: 'resource-09',
+        },
+        {
+          code: 'resource:resource-10:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-10',
+          label: '通知公告',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-10'].capabilities.read,
+          resourceCode: 'resource-10',
+        },
+        {
+          code: 'resource:resource-11:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-11',
+          label: '活动报名',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-11'].capabilities.read,
+          resourceCode: 'resource-11',
+        },
+        {
+          code: 'resource:resource-12:list',
+          kind: 'resource-list',
+          path: '/admin/resources/resource-12',
+          label: '资料下载',
+          navigationEligible: true,
+          capability: resourceDefinitions['resource-12'].capabilities.read,
+          resourceCode: 'resource-12',
+        },
+        {
+          code: 'operation:content-operations',
+          kind: 'operation',
+          path: '/admin/operations/content',
+          label: '内容业务操作',
+          navigationEligible: true,
+          capability: 'app:openxiangda-application:operations:read',
+          routeCode: 'content-operations',
+        },
+      ]}
+      contributions={applicationContributions}
+      resourceDefinitions={resourceDefinitions}
+      routeManifest={routeManifest}
+    />
+  </React.StrictMode>
+);