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

package/template/apps/web/src/runtime.tsx

@@ -1,44 +1,114 @@
-import { Alert, Button, Result, Spin } from 'antd';
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { loadCurrentIdentity, type RuntimeIdentity } from './platform-client';
+import { Alert, Button, Result, Space, Spin, Typography } from 'antd';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  loadRuntimeAuthorization,
+  subscribeRoleSessionInvalidation,
+  switchRuntimeRole,
+  type RuntimeAuthorization,
+  type RuntimeIdentity,
+} from './platform-client';
+import { RoleSubjectSelect } from './RoleSubjectSelect';
 import { runtimeMount } from './runtime-meta';
 
 interface RuntimeValue {
   identity: RuntimeIdentity;
+  authorization: RuntimeAuthorization;
+  identityEpoch: number;
+  switchingRole: boolean;
   hasCapability(code: string): boolean;
+  switchRole(targetRoleSubjectKey: string): Promise<void>;
 }
 
 const RuntimeContext = createContext<RuntimeValue | null>(null);
 
 export function RuntimeBoundary({ children }: { children: React.ReactNode }) {
-  const [identity, setIdentity] = useState<RuntimeIdentity>();
+  const [authorization, setAuthorization] = useState<RuntimeAuthorization>();
   const [error, setError] = useState<Error>();
   const [attempt, setAttempt] = useState(0);
+  const [identityEpoch, setIdentityEpoch] = useState(0);
+  const [switchingRole, setSwitchingRole] = useState(false);
+
+  useEffect(
+    () =>
+      subscribeRoleSessionInvalidation(() => {
+        setAuthorization(undefined);
+        setError(undefined);
+        setAttempt(value => value + 1);
+      }),
+    []
+  );
+
   useEffect(() => {
     let active = true;
+    setAuthorization(undefined);
     setError(undefined);
-    void loadCurrentIdentity().then(
-      value => active && setIdentity(value),
-      reason => active && setError(reason instanceof Error ? reason : new Error(String(reason)))
+    void loadRuntimeAuthorization().then(
+      value => {
+        if (!active) return;
+        setAuthorization(value);
+        setIdentityEpoch(epoch => epoch + 1);
+      },
+      reason =>
+        active &&
+        setError(reason instanceof Error ? reason : new Error(String(reason)))
     );
     return () => {
       active = false;
     };
   }, [attempt]);
+
+  const switchRole = useCallback(
+    async (targetRoleSubjectKey: string) => {
+      if (!authorization?.roleContext) {
+        throw new Error('OPENXIANGDA_ROLE_SWITCH_UNAVAILABLE');
+      }
+      setSwitchingRole(true);
+      try {
+        const next = await switchRuntimeRole(
+          targetRoleSubjectKey,
+          authorization.roleContext.roleSession?.id || null
+        );
+        setAuthorization(next);
+        setIdentityEpoch(epoch => epoch + 1);
+      } catch (reason) {
+        setAuthorization(undefined);
+        setAttempt(value => value + 1);
+        throw reason;
+      } finally {
+        setSwitchingRole(false);
+      }
+    },
+    [authorization]
+  );
+
+  const identity = authorization?.identity || null;
   const value = useMemo<RuntimeValue | null>(
     () =>
-      identity
+      identity && authorization
         ? {
             identity,
+            authorization,
+            identityEpoch,
+            switchingRole,
             hasCapability: code =>
-              identity.isAppSuperAdmin || identity.capabilityCodes.includes(code),
+              identity.isAppSuperAdmin ||
+              identity.capabilityCodes.includes(code),
+            switchRole,
           }
         : null,
-    [identity]
+    [authorization, identity, identityEpoch, switchRole, switchingRole]
   );
   const production =
     identity?.environment.key === 'production' ||
     runtimeMount()?.environmentKey === 'production';
+
   return (
     <>
       {production && (
@@ -53,21 +123,103 @@ export function RuntimeBoundary({ children }: { children: React.ReactNode }) {
       {error ? (
         <Result
           status="error"
-          title="无法读取平台当前用户"
+          title="无法读取当前应用角色"
           subTitle={error.message}
-          extra={<Button onClick={() => setAttempt(value => value + 1)}>重试</Button>}
+          extra={
+            <Button onClick={() => setAttempt(value => value + 1)}>
+              重试
+            </Button>
+          }
+        />
+      ) : authorization?.state === 'selection_required' &&
+        authorization.roleContext ? (
+        <InitialRoleSelection
+          authorization={authorization}
+          switching={switchingRole}
+          onSelect={switchRole}
+        />
+      ) : authorization?.state === 'unassigned' ? (
+        <Result
+          status="403"
+          title="尚未分配应用角色"
+          subTitle="请联系应用管理员分配当前环境中的应用角色后重试。"
+          extra={
+            <Button onClick={() => setAttempt(value => value + 1)}>
+              重新检查
+            </Button>
+          }
         />
       ) : value ? (
-        <RuntimeContext.Provider value={value}>{children}</RuntimeContext.Provider>
+        <RuntimeContext.Provider
+          key={`${value.identity.identityScope}:${identityEpoch}`}
+          value={value}
+        >
+          {children}
+        </RuntimeContext.Provider>
       ) : (
         <div className="oxa-loading">
-          <Spin description="正在读取平台身份与权限并集" />
+          <Spin description="正在读取当前应用角色与权限" />
         </div>
       )}
     </>
   );
 }
 
+function InitialRoleSelection({
+  authorization,
+  switching,
+  onSelect,
+}: {
+  authorization: RuntimeAuthorization;
+  switching: boolean;
+  onSelect: (targetRoleSubjectKey: string) => Promise<void>;
+}) {
+  const [selected, setSelected] = useState('');
+  const [selectionError, setSelectionError] = useState('');
+  const roleSubjectPage = authorization.roleContext?.roleSubjectPage;
+  const submit = async () => {
+    if (!selected) return;
+    setSelectionError('');
+    try {
+      await onSelect(selected);
+    } catch (reason) {
+      setSelectionError(
+        reason instanceof Error ? reason.message : '应用角色切换失败'
+      );
+    }
+  };
+  return (
+    <Result
+      status="info"
+      title="选择当前应用角色"
+      subTitle="本次应用访问只使用一个角色；进入应用后仍可从个人菜单切换。"
+      extra={
+        <Space align="start" direction="vertical" size="middle">
+          {roleSubjectPage && (
+            <RoleSubjectSelect
+              disabled={switching}
+              initialPage={roleSubjectPage}
+              onChange={setSelected}
+              value={selected}
+            />
+          )}
+          {selectionError && (
+            <Typography.Text type="danger">{selectionError}</Typography.Text>
+          )}
+          <Button
+            disabled={!selected}
+            loading={switching}
+            onClick={() => void submit()}
+            type="primary"
+          >
+            进入应用
+          </Button>
+        </Space>
+      }
+    />
+  );
+}
+
 export function useRuntime() {
   const value = useContext(RuntimeContext);
   if (!value) throw new Error('OPENXIANGDA_RUNTIME_NOT_READY');

package/template/apps/web/src/styles.css

@@ -314,6 +314,33 @@ body {
   box-shadow: none;
 }
 
+.oxa-role-switch-select {
+  width: 100%;
+}
+
+.oxa-role-switch-option {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+  padding: 2px 0;
+}
+
+.oxa-role-switch-option strong,
+.oxa-role-switch-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-role-switch-option span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-role-switch-help {
+  margin: 10px 0 0 !important;
+}
+
 .oxa-route-history {
   position: sticky;
   z-index: 14;
@@ -978,6 +1005,13 @@ body {
   color: var(--oxa-shell-primary, #1677ff);
 }
 
+.oxa-file-thumbnail {
+  display: block;
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+}
+
 .oxa-file-meta {
   display: grid;
   min-width: 0;
@@ -1033,6 +1067,236 @@ body {
   text-align: center;
 }
 
+.oxa-location-field {
+  display: grid;
+  gap: 10px;
+}
+
+.oxa-location-field .ant-alert {
+  max-width: 520px;
+}
+
+.oxa-location-value {
+  display: inline-grid;
+  max-width: 100%;
+  gap: 2px;
+}
+
+.oxa-location-value > span {
+  overflow-wrap: anywhere;
+}
+
+.oxa-location-value-readonly {
+  min-width: 160px;
+}
+
+.oxa-address-field {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.oxa-address-field > .ant-cascader,
+.oxa-address-field > .ant-select {
+  width: 100%;
+}
+
+.oxa-address-value {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.oxa-mobile-address-field {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.oxa-mobile-address-field > .ant-btn:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-address-mobile-levels {
+  display: grid;
+  gap: 12px;
+}
+
+.oxa-address-mobile-levels > .ant-select {
+  width: 100%;
+}
+
+.oxa-address-mobile-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.oxa-rich-text-field,
+.oxa-json-field {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.oxa-rich-text-toolbar {
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  padding: 6px;
+}
+
+.oxa-rich-text-editor {
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 0 0 6px 6px;
+  min-height: 160px;
+  overflow-wrap: anywhere;
+  padding: 10px 12px;
+}
+
+.oxa-rich-text-editor:focus {
+  border-color: var(--oxa-shell-primary, #1677ff);
+  box-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+  outline: 0;
+}
+
+.oxa-rich-text-value {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.oxa-rich-text-value img {
+  height: auto;
+  max-width: 100%;
+}
+
+.oxa-mobile-rich-text-field .oxa-rich-text-editor {
+  min-height: 220px;
+}
+
+.oxa-json-field textarea,
+.oxa-json-value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.oxa-json-value {
+  margin: 0;
+  max-height: 320px;
+  max-width: 100%;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.oxa-json-valid {
+  color: var(--oxa-shell-success, #389e0d);
+}
+
+.oxa-signature-field,
+.oxa-signature-value,
+.oxa-signature-pad {
+  display: grid;
+  gap: 10px;
+  width: 100%;
+}
+
+.oxa-signature-value {
+  justify-items: start;
+}
+
+.oxa-signature-image {
+  max-height: 180px;
+  max-width: min(100%, 520px);
+  object-fit: contain;
+}
+
+.oxa-signature-hash {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  overflow-wrap: anywhere;
+}
+
+.oxa-signature-canvas {
+  background: #fff;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 6px;
+  height: 240px;
+  touch-action: none;
+  user-select: none;
+  width: 100%;
+}
+
+.oxa-subtable-field {
+  width: 100%;
+  min-width: 0;
+}
+
+.oxa-subtable-toolbar {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.oxa-subtable-loading {
+  display: flex;
+  min-height: 88px;
+  align-items: center;
+  justify-content: center;
+}
+
+.oxa-mobile-subtable-list {
+  border-top: 1px solid #e5e7eb;
+}
+
+.oxa-mobile-subtable-row {
+  padding: 12px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.oxa-mobile-subtable-values {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.oxa-mobile-subtable-values > div {
+  display: grid;
+  grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+
+.oxa-mobile-subtable-editor {
+  display: grid;
+  gap: 4px;
+}
+
+.oxa-mobile-number-field {
+  align-items: center;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 6px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  min-height: 40px;
+  padding: 0 10px;
+}
+
+.oxa-mobile-number-field > input {
+  border: 0;
+  min-width: 0;
+  outline: 0;
+  width: 100%;
+}
+
+.oxa-mobile-location-field .ant-space {
+  width: 100%;
+}
+
 .oxa-dictionary-drawer .ant-drawer-body {
   padding: 22px;
 }

package/template/apps/web/test/address-field.test.ts

@@ -0,0 +1,66 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+import {
+  addressControlValue,
+  addressDisplay,
+  addressStoredValue,
+  deepestAddressPredicate,
+} from '../src/components/platform-fields/address-value';
+
+const path = [
+  { label: '浙江省', value: '330000' },
+  { label: '杭州市', value: '330100' },
+  { label: '西湖区', value: '330106' },
+  { label: '翠苑街道', value: '330106012' },
+];
+
+test('stores a complete administrative snapshot with a stable full address', () => {
+  const value = addressStoredValue(path, '文一路 1 号');
+  assert.deepEqual(value, {
+    country: { label: '中国', value: '100000' },
+    province: path[0],
+    city: path[1],
+    district: path[2],
+    street: path[3],
+    detail: '文一路 1 号',
+    fullAddress: '浙江省杭州市西湖区翠苑街道文一路 1 号',
+  });
+  assert.deepEqual(addressControlValue(value), path.map(item => item.value));
+  assert.equal(addressDisplay(value), '浙江省杭州市西湖区翠苑街道文一路 1 号');
+});
+
+test('deduplicates adjacent municipality labels while retaining both snapshots', () => {
+  const value = addressStoredValue([
+    { label: '上海市', value: '310000' },
+    { label: '上海市', value: '310100' },
+    { label: '浦东新区', value: '310115' },
+  ]);
+  assert.equal(value?.fullAddress, '上海市浦东新区');
+  assert.equal(value?.province?.value, '310000');
+  assert.equal(value?.city?.value, '310100');
+});
+
+test('uses the deepest selected stable code for Data API filtering', () => {
+  assert.deepEqual(
+    deepestAddressPredicate(addressStoredValue(path.slice(0, 3))),
+    { path: 'district.value', value: '330106' }
+  );
+  assert.equal(addressStoredValue([], 'address only'), undefined);
+});
+
+test('address field has lazy desktop and explicit mobile controls', () => {
+  const field = readFileSync(
+    new URL('../src/components/platform-fields/AddressField.tsx', import.meta.url),
+    'utf8'
+  );
+  const client = readFileSync(
+    new URL('../src/platform-client.ts', import.meta.url),
+    'utf8'
+  );
+  assert.match(field, /loadData=/);
+  assert.match(field, /loadChinaDivisions/);
+  assert.match(field, /placement="bottom"/);
+  assert.match(field, /ADDRESS_LEVELS\.map/);
+  assert.match(client, /\/china-divisions\//);
+});

package/template/apps/web/test/cascade-value.test.ts

@@ -0,0 +1,68 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import type { DataFieldOption } from 'openxiangda-contracts/browser';
+import {
+  cascadeControlValue,
+  cascadeStoredValue,
+  cascadeTerminalValues,
+} from '../src/components/platform-fields/cascade-value';
+
+const options: DataFieldOption[] = [
+  {
+    value: 'equipment',
+    label: '设备',
+    children: [
+      {
+        value: 'optical',
+        label: '光学设备',
+        children: [{ value: 'microscope', label: '显微镜' }],
+      },
+      { value: 'electrical', label: '电气设备' },
+    ],
+  },
+];
+
+test('stores every labeled node for a cascade single path', () => {
+  const value = cascadeStoredValue(
+    options,
+    ['equipment', 'optical', 'microscope'],
+    false
+  );
+  assert.deepEqual(value, [
+    { value: 'equipment', label: '设备' },
+    { value: 'optical', label: '光学设备' },
+    { value: 'microscope', label: '显微镜' },
+  ]);
+  assert.deepEqual(cascadeControlValue(value, false), [
+    'equipment',
+    'optical',
+    'microscope',
+  ]);
+  assert.deepEqual(cascadeTerminalValues(value, false), ['microscope']);
+});
+
+test('stores independent complete paths for cascade multiple', () => {
+  const value = cascadeStoredValue(
+    options,
+    [
+      ['equipment', 'optical', 'microscope'],
+      ['equipment', 'electrical'],
+    ],
+    true
+  );
+  assert.deepEqual(cascadeTerminalValues(value, true), [
+    'microscope',
+    'electrical',
+  ]);
+  assert.deepEqual(cascadeControlValue(value, true), [
+    ['equipment', 'optical', 'microscope'],
+    ['equipment', 'electrical'],
+  ]);
+});
+
+test('drops forged paths that do not exist in declared options', () => {
+  assert.equal(
+    cascadeStoredValue(options, ['equipment', 'missing'], false),
+    undefined
+  );
+});