openxiangda-cli 2.0.0-alpha.169 → 2.0.0-alpha.170

package/template/apps/web/e2e/mobile-selection.spec.ts

@@ -0,0 +1,199 @@
+import { expect, test, type Page } from '@playwright/test';
+
+const field = (page: Page, label: string) => page.locator(`[data-field-code="${label}"]`);
+const picker = (page: Page, label: string) => field(page, label).getByRole('dialog', { name: `选择${label}` });
+const open = async (page: Page, label: string) => {
+  await field(page, label).getByRole('button', { name: `选择${label}`, exact: true }).click();
+  await expect(picker(page, label)).toBeVisible();
+};
+const submit = async (page: Page) => {
+  await page.getByRole('button', { name: '验证表单', exact: true }).click();
+  await expect(page.locator('[data-saved-values]')).not.toBeEmpty();
+  return JSON.parse(await page.locator('[data-saved-values]').innerText());
+};
+const department = (id: string, label: string, hasChildren = false, selectable = true) => ({
+  kind: 'department', id, label, hasChildren, selectable,
+  snapshot: { value: id, label, fullPath: `学校 / ${label}` },
+});
+const member = (id: string, label: string, selectable = true) => ({
+  kind: 'user', id, label, selectable,
+  snapshot: { value: id, label, employeeNo: `E-${id}`, departments: [{ value: 'college-a', label: '理学院' }] },
+});
+
+test.describe('mobile platform selection fields', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.route('**/china-divisions/**', route => route.fulfill({ json: [] }));
+    await page.route('**/files/*/content?**', route => route.fulfill({ status: 204, body: '' }));
+  });
+
+  test('member browsing, paging and search retain staged snapshots until confirmation', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('pageerror', error => errors.push(error.message));
+    const queries: string[] = [];
+    await page.route('**/directory/**', async route => {
+      const url = new URL(route.request().url());
+      queries.push(url.pathname + url.search);
+      const tree = url.pathname.endsWith('/tree');
+      const browse = url.pathname.endsWith('/users') && url.pathname.includes('/departments/');
+      const items = tree ? [department('college-a', '理学院')]
+        : browse ? (url.searchParams.get('page') === '2' ? [member('user-3', '李老师')] : [member('user-2', '王老师'), member('blocked', '不可选成员', false)])
+          : [member('user-4', '陈老师')];
+      await route.fulfill({ json: { schemaVersion: 'openxiangda.directory-entry-page/v2', kind: tree ? 'department' : 'user', items,
+        nextCursor: browse && url.searchParams.get('page') === '1' ? '2' : null } });
+    });
+    await page.goto('/field-protocol.e2e.html?mode=mobile');
+    await open(page, '成员多选');
+    const sheet = picker(page, '成员多选');
+    await sheet.getByRole('button', { name: '进入理学院' }).click();
+    await expect(sheet.getByText('不可选成员', { exact: true })).toBeVisible();
+    await expect(sheet.locator('.adm-check-list-item').filter({ hasText: '不可选成员' })).toHaveAttribute('aria-disabled', 'true');
+    await sheet.getByText('不可选成员', { exact: true }).click({ force: true });
+    await expect(sheet.getByLabel('已选项目')).not.toContainText('不可选成员');
+    await sheet.getByText('王老师', { exact: true }).click();
+    await sheet.getByRole('button', { name: '更多成员' }).click();
+    await sheet.getByText('李老师', { exact: true }).click();
+    await sheet.getByPlaceholder('搜索成员多选').fill('陈老师');
+    await sheet.getByText('陈老师', { exact: true }).click();
+    await expect(sheet.getByLabel('已选项目')).toContainText('王老师');
+    await expect(sheet.getByLabel('已选项目')).toContainText('李老师');
+    await sheet.getByRole('button', { name: '关闭', exact: true }).click();
+    await expect(field(page, '成员多选').getByRole('button', { name: '选择成员多选', exact: true })).toHaveText('张三');
+
+    await open(page, '成员多选');
+    await sheet.getByRole('button', { name: '清空', exact: true }).click();
+    await sheet.getByRole('button', { name: '进入理学院' }).click();
+    await sheet.getByText('王老师', { exact: true }).click();
+    await sheet.getByPlaceholder('搜索成员多选').fill('陈老师');
+    await sheet.getByText('陈老师', { exact: true }).click();
+    await sheet.getByRole('button', { name: '确定（2）', exact: true }).click();
+    const saved = await submit(page);
+    expect(saved['成员多选']).toEqual([member('user-2', '王老师').snapshot, member('user-4', '陈老师').snapshot]);
+    await page.getByRole('button', { name: '重新载入已保存值' }).click();
+    await expect(field(page, '成员多选').getByRole('button', { name: '选择成员多选', exact: true })).toHaveText('王老师、陈老师');
+    expect(queries.some(query => query.includes('page=2'))).toBe(true);
+    expect(errors).toEqual([]);
+    await open(page, '成员多选');
+    await sheet.getByRole('button', { name: '进入理学院' }).click();
+    await expect(sheet.getByText('王老师', { exact: true }).last()).toBeVisible();
+    await page.screenshot({ path: 'test-results/mobile-member-picker.png' });
+  });
+
+  test('explicit mobile department control browses disabled ancestors and retries failed pages', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 900 });
+    let failures = 1;
+    await page.route('**/directory/**', async route => {
+      const url = new URL(route.request().url());
+      const parent = url.searchParams.get('parentId');
+      if (parent === 'root' && failures-- > 0) { await route.fulfill({ status: 503, json: { code: 'OPENXIANGDA_DIRECTORY_REQUEST_FAILED', message: '目录暂时不可用' } }); return; }
+      await route.fulfill({ json: { schemaVersion: 'openxiangda.directory-entry-page/v2', kind: 'department',
+        items: parent === 'root' ? [department('college-a', '理学院'), department('college-b', '文学院')]
+          : url.searchParams.get('offset') ? [department('office', '办公室')]
+            : [department('root', '学校', true, false)], nextCursor: !parent && !url.searchParams.get('offset') ? '100' : null } });
+    });
+    await page.goto('/field-protocol.e2e.html?mode=mobile');
+    await open(page, '部门多选');
+    const sheet = picker(page, '部门多选');
+    await expect(sheet.locator('.ant-tree, .ant-select, .ant-drawer')).toHaveCount(0);
+    await sheet.getByRole('button', { name: '清空', exact: true }).click();
+    await sheet.getByRole('button', { name: '更多部门' }).click();
+    await sheet.getByText('办公室', { exact: true }).click();
+    await sheet.getByRole('button', { name: '进入学校' }).click();
+    await expect(sheet.getByRole('alert')).toContainText('目录暂时不可用');
+    await sheet.getByRole('button', { name: '重试', exact: true }).click();
+    await sheet.getByText('文学院', { exact: true }).click();
+    await sheet.getByRole('button', { name: '确定（2）', exact: true }).click();
+    expect((await submit(page))['部门多选']).toEqual([department('office', '办公室').snapshot, department('college-b', '文学院').snapshot]);
+    await open(page, '部门单选');
+    await picker(page, '部门单选').getByRole('button', { name: '进入学校' }).click();
+    await picker(page, '部门单选').getByText('文学院', { exact: true }).click();
+    await picker(page, '部门单选').getByRole('button', { name: '确定（1）', exact: true }).click();
+    expect((await submit(page))['部门单选']).toEqual(department('college-b', '文学院').snapshot);
+    await page.setViewportSize({ width: 390, height: 844 });
+    await open(page, '部门多选');
+    await sheet.getByRole('button', { name: '进入学校' }).click();
+    await expect(sheet.getByText('文学院', { exact: true }).last()).toBeVisible();
+    await page.screenshot({ path: 'test-results/mobile-department-picker.png' });
+  });
+
+  test('reference search ignores stale pages, preserves off-page choices and retries without losing them', async ({ page }) => {
+    let releaseOld: (() => void) | undefined;
+    let oldFinished = false;
+    let failed = false;
+    const reference = (value: string, label: string) => ({ value, label, resourceCode: 'field-lookups', snapshot: { code: `CODE-${value}` } });
+    await page.route('**/source/query', async route => {
+      const request = route.request().postDataJSON();
+      if (request.cursor === 'old-next') { await new Promise<void>(resolve => { releaseOld = resolve; }); }
+      if (request.keyword === '故障' && !failed) { failed = true; await route.fulfill({ status: 503, json: { code: 'OPENXIANGDA_DATA_SOURCE_FAILED', message: '候选加载失败' } }); return; }
+      const items = request.cursor ? [reference('stale', '过期候选')] : request.keyword ? [reference('b', '测量服务')] : [reference('a', '检测设备')];
+      await route.fulfill({ json: { schemaVersion: 'openxiangda.data-field-source-page/v2',
+        environment: { id: 'env', key: 'production', activeAppVersionId: 'version', headRevision: 1, authzRevisionId: 'authz' },
+        resourceCode: 'field-records', fieldCode: request.fieldCode, operation: request.operation, sourceResourceCode: 'field-lookups',
+        items, nextCursor: request.keyword || request.cursor ? null : 'old-next' } });
+      if (request.cursor) oldFinished = true;
+    });
+    await page.goto('/field-protocol.e2e.html?mode=mobile');
+    await open(page, '动态多选下拉');
+    const sheet = picker(page, '动态多选下拉');
+    await sheet.getByRole('button', { name: '清空', exact: true }).click();
+    await sheet.getByText('检测设备', { exact: true }).click();
+    await sheet.getByRole('button', { name: '加载更多', exact: true }).click();
+    await expect.poll(() => Boolean(releaseOld)).toBe(true);
+    await sheet.getByPlaceholder('搜索动态多选下拉').fill('测量');
+    await sheet.getByText('测量服务', { exact: true }).click();
+    releaseOld!();
+    await expect.poll(() => oldFinished).toBe(true);
+    await expect(sheet.getByText('过期候选')).toHaveCount(0);
+    await expect(sheet.getByRole('button', { name: '加载更多', exact: true })).toHaveCount(0);
+    await expect(sheet.getByLabel('已选项目')).toContainText('检测设备');
+    await page.screenshot({ path: 'test-results/mobile-reference-picker.png' });
+    await sheet.getByPlaceholder('搜索动态多选下拉').fill('故障');
+    await expect(sheet.getByRole('alert')).toContainText('候选加载失败');
+    await sheet.getByRole('button', { name: '重试', exact: true }).click();
+    await expect(sheet.getByText('测量服务', { exact: true }).last()).toBeVisible();
+    await sheet.getByPlaceholder('搜索动态多选下拉').press('Enter');
+    await expect(page.locator('[data-saved-values]')).toBeEmpty();
+    await sheet.getByRole('button', { name: '确定（2）', exact: true }).click();
+    expect((await submit(page))['动态多选下拉']).toEqual([reference('a', '检测设备'), reference('b', '测量服务')]);
+    await page.getByRole('button', { name: '重新载入已保存值' }).click();
+    await open(page, '动态多选下拉');
+    await sheet.getByRole('button', { name: '移除检测设备', exact: true }).click();
+    await sheet.getByRole('button', { name: '确定（1）', exact: true }).click();
+    expect((await submit(page))['动态多选下拉']).toEqual([reference('b', '测量服务')]);
+  });
+
+  test('cascade drilldown and path search commit complete single/multiple snapshots', async ({ page }) => {
+    await page.goto('/field-protocol.e2e.html?mode=mobile');
+    await open(page, '级联多选');
+    const sheet = picker(page, '级联多选');
+    await sheet.getByRole('button', { name: '清空', exact: true }).click();
+    await sheet.getByRole('button', { name: '进入设备' }).click();
+    await sheet.getByText('光谱仪', { exact: true }).click();
+    await sheet.getByRole('button', { name: '首页', exact: true }).click();
+    await sheet.getByPlaceholder('搜索选项或路径').fill('服务');
+    await sheet.getByText('培训', { exact: true }).click();
+    await expect(sheet.getByLabel('已选项目')).toContainText('设备 / 光谱仪');
+    await expect(sheet.getByLabel('已选项目')).toContainText('服务 / 培训');
+    await page.screenshot({ path: 'test-results/mobile-cascade-picker.png' });
+    await sheet.getByRole('button', { name: '关闭', exact: true }).click();
+    await expect(field(page, '级联多选').getByRole('button', { name: '选择级联多选', exact: true })).toHaveText('设备 / 显微镜');
+    await open(page, '级联多选');
+    await sheet.getByRole('button', { name: '进入设备' }).click();
+    await sheet.getByText('光谱仪', { exact: true }).click();
+    await sheet.getByRole('button', { name: '确定（2）', exact: true }).click();
+    const expected = [
+      [{ label: '设备', value: 'equipment' }, { label: '显微镜', value: 'microscope' }],
+      [{ label: '设备', value: 'equipment' }, { label: '光谱仪', value: 'spectrometer' }],
+    ];
+    expect((await submit(page))['级联多选']).toEqual(expected);
+    await open(page, '级联单选');
+    await picker(page, '级联单选').getByRole('button', { name: '首页', exact: true }).click();
+    await picker(page, '级联单选').getByRole('button', { name: '进入服务' }).click();
+    await picker(page, '级联单选').getByText('培训', { exact: true }).click();
+    await picker(page, '级联单选').getByRole('button', { name: '确定', exact: true }).click();
+    expect((await submit(page))['级联单选']).toEqual([{ label: '服务', value: 'service' }, { label: '培训', value: 'training' }]);
+    await page.getByRole('button', { name: '重新载入已保存值' }).click();
+    await expect(field(page, '级联单选').getByRole('button', { name: '选择级联单选', exact: true })).toHaveText('服务 / 培训');
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(0);
+  });
+});

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Button, Typography } from 'antd';
+import { Button, Input, Modal, Select, Typography } from 'antd';
+import { useNavigate } from 'react-router-dom';
 import {
   defineApplicationContributions,
   OpenXiangdaAdminPage,
@@ -8,7 +9,7 @@ import {
 } from 'openxiangda/react';
 import type { DataFieldSurface, DataResourceSurface } from 'openxiangda/core';
 import 'openxiangda/react/styles.css';
-import './theme-contract-fixture.css';
+import './component-defaults-fixture.css';
 
 const field = (
   label: string,
@@ -158,9 +159,29 @@ const surface: DataResourceSurface = {
 };
 
 const { enabled, displayOrder, ...remainingFields } = fields;
-const acceptanceSurface = new URLSearchParams(location.search).get('primary') === 'falsy'
+const fixtureMode = new URLSearchParams(location.search).get('primary') || (location.pathname.includes('/views/') ? 'named' : location.pathname.endsWith('.html') ? null : 'business');
+const acceptanceSurface: DataResourceSurface = fixtureMode === 'falsy'
   ? { ...surface, fields: { enabled, displayOrder, ...remainingFields } }
-  : surface;
+  : fixtureMode === 'business' || fixtureMode === 'named'
+    ? {
+        ...surface,
+        fields: { ...fields, name: { ...fields.name, list: true, requiredHint: true, sortable: true }, displayOrder: { ...fields.displayOrder, sortable: true } },
+        list: { ...surface.list, fieldOrder: ['name', 'enabled', 'displayOrder'], filterFields: ['name', 'enabled', 'displayOrder', ...surface.list!.filterFields!], defaultPageSize: 10 },
+      }
+    : surface;
+
+if (fixtureMode === 'named') acceptanceSurface.views = [
+  { code: 'quick', name: '简要登记', generated: { list: true, detail: true, create: true, update: true, delete: false },
+    list: { fieldOrder: ['name', 'code'], defaultPageSize: 10, searchableFields: ['name'] },
+    form: { layout: 'sections', fieldOrder: ['name', 'code'] }, detail: { layout: 'sections', fieldOrder: ['name', 'code'] },
+    sections: [{ title: '登记信息', fields: ['name', 'code'] }], mobile: { enabled: true } },
+  { code: 'complete', name: '完整管理', generated: { list: true, detail: true, create: true, update: true, delete: true },
+    list: { fieldOrder: ['name', 'enabled', 'displayOrder'], defaultPageSize: 10, searchableFields: ['name'] },
+    form: { layout: 'sections', fieldOrder: ['name', 'code', 'description', 'enabled', 'displayOrder'] },
+    detail: { layout: 'sections', fieldOrder: ['name', 'code', 'description', 'enabled', 'displayOrder'] },
+    sections: [{ title: '栏目信息', fields: ['name', 'code', 'description'] }, { title: '管理设置', fields: ['enabled', 'displayOrder'] }],
+    mobile: { enabled: true } },
+];
 
 const names = [
   '内容栏目',
@@ -197,21 +218,32 @@ const resourceDefinitions = Object.fromEntries(
 );
 
 function ContentOperationsPage() {
+  const navigate = useNavigate();
   return (
     <OpenXiangdaAdminPage
-      className="theme-contract-page"
+      className="component-defaults-page"
       data-testid="custom-admin-page"
     >
       <Typography.Title level={2}>内容业务操作</Typography.Title>
-      <div className="theme-contract-panel">
-        自定义后台页语义主题面板
+      <div className="component-defaults-panel">
+        自定义后台页默认组件面板
+        <Button onClick={() => navigate('/resource-01')}>打开用户端</Button>
       </div>
     </OpenXiangdaAdminPage>
   );
 }
 
 function ResourcePortalPage() {
-  return <Typography.Title level={2}>用户端内容门户</Typography.Title>;
+  const [open, setOpen] = useState(false);
+  return <main>
+    <Typography.Title level={2}>用户端内容门户</Typography.Title>
+    <Input aria-label="用户端输入" />
+    <Select options={[{ label: '可用选项', value: 'available' }]} style={{ width: 200 }} />
+    <Button onClick={() => setOpen(true)}>打开用户弹窗</Button>
+    <Modal open={open} title="用户端确认" onCancel={() => setOpen(false)} onOk={() => setOpen(false)}>
+      默认组件保持可用
+    </Modal>
+  </main>;
 }
 
 const applicationContributions = defineApplicationContributions(
@@ -244,6 +276,7 @@ const applicationContributions = defineApplicationContributions(
         toolbar: [
           {
             code: 'publish-selected',
+        requiresSelection: true,
             label: '发布选中栏目',
             capability: 'app:openxiangda-application:operations:read',
             render: ({ selectedRecords }) => (
@@ -272,6 +305,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
           icon: 'database',
           order: 0,
           items: [
+            ...(acceptanceSurface.views || []).map((view, index) => ({
+              pageCode: `resource:resource-01:view:${view.code}:list`, label: view.name, order: index - 2,
+            })),
             { pageCode: 'resource:resource-01:list', label: '内容栏目', order: 0 },
             { pageCode: 'resource:resource-02:list', label: '内容文章', order: 1 },
             { pageCode: 'resource:resource-03:list', label: '内容专题', order: 2 },
@@ -293,6 +329,15 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         },
       ]}
       adminPages={[
+        ...(acceptanceSurface.views || []).flatMap(view => (['list', 'detail', 'create', 'update'] as const).map(operation => ({
+          code: `resource:resource-01:view:${view.code}:${operation}`,
+          kind: `resource-${operation}` as const,
+          path: `/admin/resources/resource-01/views/${view.code}${({ list: '', detail: '/:id', create: '/new', update: '/:id/edit' })[operation]}`,
+          label: `${({ list: '', detail: '', create: '新增', update: '编辑' })[operation]}${view.name}`,
+          navigationEligible: operation === 'list',
+          capability: resourceDefinitions['resource-01'].capabilities[operation === 'list' || operation === 'detail' ? 'read' : operation],
+          resourceCode: 'resource-01', viewCode: view.code,
+        }))),
         {
           code: 'resource:resource-01:list',
           kind: 'resource-list',

package/template/apps/web/e2e/resource-platform-mock.ts

@@ -0,0 +1,202 @@
+import type { Page, BrowserContext } from '@playwright/test';
+import { appCode, capabilities } from '../../../packages/contracts/src/generated.js';
+const runtimeBase = `/view/${appCode}`;
+const allCapabilities = [...capabilities] as string[];
+
+function runtimeAuthorization(authorized: boolean, superAdmin = false) {
+  return {
+    schemaVersion: 'openxiangda.runtime-authorization/v2',
+    state: 'active',
+    environment: {
+      id: 'preproduction-id',
+      key: 'preproduction',
+      activeAppVersionId: 'app-version-1',
+      headRevision: 1,
+      authzRevisionId: 'authz-1',
+      authzVersion: 1,
+      scopeDataVersion: 'scope-1',
+    },
+    subjectProfile: {
+      schemaVersion: 'openxiangda.subject-profile/v2',
+      userId: 'acceptance-user',
+      displayName: '王老师',
+      avatarUrl: null,
+      jobNumber: 'T001',
+      affiliatedDepartment: { id: 'department-1', name: '理学院' },
+    },
+    roles: [
+      { code: 'college_admin', name: '学院管理员', source: 'package' },
+      { code: 'instrument_admin', name: '仪器管理员', source: 'package' },
+    ],
+    principal: {
+      type: 'user_union',
+      userId: 'acceptance-user',
+      roleCodes: ['college_admin', 'instrument_admin'],
+      capabilityCodes: authorized
+        ? [
+            ...allCapabilities,
+            'app:openxiangda-application:operations:read',
+          ]
+        : [],
+      isAppSuperAdmin: superAdmin,
+      identityScope: 'user-union:preproduction-id:acceptance-user:authz-1',
+    },
+  };
+}
+
+export async function mockPlatform(
+  page: Page | BrowserContext,
+  authorized = true,
+  targetRuntimeBase = runtimeBase,
+  superAdmin = false,
+  queryItemsByResource: Record<string, Array<Record<string, unknown>>> = {},
+) {
+  let contextReads = 0;
+  let avatarCompletes = 0;
+  const observed: Array<{ path: string; perspectiveCode: string }> = [];
+  await page.route('https://upload.example.test/avatar-upload', route =>
+    route.fulfill({ status: 200, body: '' })
+  );
+  await page.route(`**${targetRuntimeBase}/**`, async route => {
+    if (route.request().resourceType() !== 'document') return route.continue();
+    const response = await route.fetch();
+    const body = (await response.text()).replace(
+      '<head>',
+      `<head><meta name="openxiangda-runtime-base" content="${targetRuntimeBase}/" />` +
+        `<meta name="openxiangda-app-code" content="${appCode}" />` +
+        '<meta name="openxiangda-environment" content="preproduction" />'
+    );
+    await route.fulfill({ response, body });
+  });
+  await page.route('**/service/**', async route => {
+    const url = new URL(route.request().url());
+    const request = route.request();
+    const perspectiveCode = request.headers()['x-openxiangda-perspective'] || '';
+    if (url.pathname.endsWith('/native/authz/current')) {
+      contextReads += 1;
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: runtimeAuthorization(authorized, superAdmin),
+        }),
+      });
+    }
+    if (url.pathname.endsWith('/native/authz/profile/avatar/initiate')) {
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            uploadUrl: 'https://upload.example.test/avatar-upload',
+            uploadMethod: 'put',
+            headers: { 'content-type': 'image/png' },
+            objectName: 'images/tenant/app/user/avatar.png',
+          },
+        }),
+      });
+    }
+    if (url.pathname.endsWith('/native/authz/profile/avatar/complete')) {
+      avatarCompletes += 1;
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.subject-profile/v2',
+            userId: 'acceptance-user',
+            displayName: '王老师',
+            avatarUrl: 'https://cdn.example.test/avatar/new.png',
+            jobNumber: 'T001',
+            affiliatedDepartment: { id: 'department-1', name: '理学院' },
+          },
+        }),
+      });
+    }
+    const sourceQuery = url.pathname.match(
+      /\/native\/data-resources\/([^/]+)\/fields\/([^/]+)\/source\/query$/
+    );
+    if (sourceQuery) {
+      observed.push({ path: url.pathname, perspectiveCode });
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.data-field-source-page/v2',
+            resourceCode: decodeURIComponent(sourceQuery[1]),
+            fieldCode: decodeURIComponent(sourceQuery[2]),
+            items: [],
+            nextCursor: null,
+          },
+        }),
+      });
+    }
+    const exportRequest = url.pathname.match(
+      /\/native\/data\/([^/]+)\/export$/
+    );
+    if (exportRequest) {
+      observed.push({ path: url.pathname, perspectiveCode });
+      return route.fulfill({
+        status: 200,
+        contentType: 'text/csv; charset=utf-8',
+        headers: {
+          'content-disposition': `attachment; filename="${decodeURIComponent(
+            exportRequest[1]
+          )}.csv"`,
+        },
+        body: 'id,name\nacceptance-1,OpenXiangda\n',
+      });
+    }
+    const query = url.pathname.match(/\/native\/data\/([^/]+)\/query$/);
+    if (query) {
+      const resourceCode = decodeURIComponent(query[1]);
+      const items = queryItemsByResource[resourceCode] || [];
+      observed.push({ path: url.pathname, perspectiveCode });
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          code: 200,
+          data: {
+            schemaVersion: 'openxiangda.data-page/v2',
+            resourceCode,
+            appVersionId: 'app-version-1',
+            environmentHeadRevision: 1,
+            items,
+            total: items.length,
+            limit: 500,
+            offset: 0,
+          },
+        }),
+      });
+    }
+    if (url.pathname.includes('/directory/')) {
+      observed.push({ path: url.pathname, perspectiveCode });
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, data: { items: [], nextCursor: null } }),
+      });
+    }
+    if (url.pathname.includes('/openxiangda-app-api/v2/')) {
+      observed.push({ path: url.pathname, perspectiveCode });
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ code: 200, data: { status: 'ok' } }),
+      });
+    }
+    return route.fulfill({
+      status: 404,
+      contentType: 'application/json',
+      body: JSON.stringify({ code: 404, message: 'not mocked' }),
+    });
+  });
+  return {
+    observed,
+    get contextReads() {
+      return contextReads;
+    },
+    get avatarCompletes() {
+      return avatarCompletes;
+    },
+  };
+}