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

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

@@ -6,6 +6,7 @@ import {
   LogoutOutlined,
   MenuUnfoldOutlined,
   SettingOutlined,
+  SwapOutlined,
 } from '@ant-design/icons';
 import {
   App,
@@ -16,6 +17,7 @@ import {
   Empty,
   Layout,
   Menu,
+  Modal,
   Segmented,
   Tabs,
   Typography,
@@ -27,6 +29,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
 import { useAppearance, type AppearancePreference } from './appearance';
 import { logoutCurrentUser, resolveDirectory } from './platform-client';
+import { RoleSubjectSelect } from './RoleSubjectSelect';
 import { useRuntime } from './runtime';
 
 const { Content, Header, Sider } = Layout;
@@ -89,13 +92,22 @@ function storeHistory(items: HistoryItem[]) {
 }
 
 export function Shell({ children }: { children: ReactNode }) {
-  const { identity, hasCapability } = useRuntime();
+  const {
+    identity,
+    hasCapability,
+    switchRole,
+    switchingRole,
+  } = useRuntime();
   const { effectiveAppearance, preference, setPreference } = useAppearance();
   const { message } = App.useApp();
   const location = useLocation();
   const navigate = useNavigate();
   const [collapsed, setCollapsed] = useState(false);
   const [loggingOut, setLoggingOut] = useState(false);
+  const [roleModalOpen, setRoleModalOpen] = useState(false);
+  const [selectedRoleSubjectKey, setSelectedRoleSubjectKey] = useState(
+    identity.currentRoleSubject?.subjectKey || ''
+  );
   const [history, setHistory] = useState<HistoryItem[]>(readHistory);
   const [user, setUser] = useState({
     label: '当前用户',
@@ -117,6 +129,14 @@ export function Shell({ children }: { children: ReactNode }) {
     : '/';
 
   useEffect(() => {
+    if (identity.subjectProfile) {
+      setUser({
+        label: identity.subjectProfile.displayName || '当前用户',
+        description:
+          identity.subjectProfile.affiliatedDepartment?.name || '平台用户',
+      });
+      return;
+    }
     let active = true;
     void resolveDirectory('user', [identity.userId])
       .then(page => {
@@ -132,7 +152,7 @@ export function Shell({ children }: { children: ReactNode }) {
     return () => {
       active = false;
     };
-  }, [identity.userId]);
+  }, [identity.subjectProfile, identity.userId]);
 
   useEffect(() => {
     if (!definition || location.pathname.startsWith('/m/')) return;
@@ -199,8 +219,44 @@ export function Shell({ children }: { children: ReactNode }) {
     }
   };
 
+  const handleRoleSwitch = async () => {
+    if (
+      !selectedRoleSubjectKey ||
+      selectedRoleSubjectKey === identity.currentRoleSubject?.subjectKey
+    ) {
+      return;
+    }
+    try {
+      await switchRole(selectedRoleSubjectKey);
+      setRoleModalOpen(false);
+      message.success('应用角色已切换');
+    } catch (reason) {
+      message.warning(
+        reason instanceof Error
+          ? `${reason.message}；已重新读取当前角色`
+          : '应用角色上下文已变化，请重试'
+      );
+    }
+  };
+
+  const currentRoleLabel =
+    identity.currentRoleSubject?.role.name ||
+    (identity.roleSwitchingAvailable
+      ? identity.roleCodes.join('、') || '普通成员'
+      : '开发者联合权限');
+
   const userMenu: MenuProps = {
     items: [
+      ...(identity.roleSwitchingAvailable &&
+      (identity.roleSubjectPage?.total || 0) > 1
+        ? [
+            {
+              icon: <SwapOutlined />,
+              key: 'switch-role',
+              label: '切换应用角色',
+            } as NonNullable<MenuProps['items']>[number],
+          ]
+        : []),
       { type: 'divider' },
       {
         danger: true,
@@ -210,6 +266,12 @@ export function Shell({ children }: { children: ReactNode }) {
       },
     ],
     onClick: ({ key }) => {
+      if (key === 'switch-role') {
+        setSelectedRoleSubjectKey(
+          identity.currentRoleSubject?.subjectKey || ''
+        );
+        setRoleModalOpen(true);
+      }
       if (key === 'logout' && !loggingOut) void handleLogout();
     },
   };
@@ -285,11 +347,9 @@ export function Shell({ children }: { children: ReactNode }) {
                   </div>
                 </div>
                 <div className="oxa-user-dropdown-roles">
-                  <span>当前角色</span>
+                  <span>当前应用角色</span>
                   <Typography.Text ellipsis>
-                    {identity.isAppSuperAdmin
-                      ? '应用管理员'
-                      : identity.roleCodes.join('、') || '普通成员'}
+                    {currentRoleLabel}
                   </Typography.Text>
                 </div>
                 <div className="oxa-user-dropdown-theme">
@@ -345,6 +405,33 @@ export function Shell({ children }: { children: ReactNode }) {
           <main className="oxa-main">{children}</main>
         </Content>
       </Layout>
+      <Modal
+        cancelText="取消"
+        centered
+        destroyOnHidden
+        okButtonProps={{
+          disabled:
+            !selectedRoleSubjectKey ||
+            selectedRoleSubjectKey === identity.currentRoleSubject?.subjectKey,
+        }}
+        okText="切换角色"
+        onCancel={() => setRoleModalOpen(false)}
+        onOk={() => void handleRoleSwitch()}
+        open={roleModalOpen}
+        confirmLoading={switchingRole}
+        title="切换当前应用角色"
+      >
+        {identity.roleSubjectPage && (
+          <RoleSubjectSelect
+            initialPage={identity.roleSubjectPage}
+            onChange={setSelectedRoleSubjectKey}
+            value={selectedRoleSubjectKey || undefined}
+          />
+        )}
+        <Typography.Paragraph className="oxa-role-switch-help" type="secondary">
+          切换后页面、数据和操作权限会按目标角色重新加载。
+        </Typography.Paragraph>
+      </Modal>
     </Layout>
   );
 }

package/template/apps/web/src/components/platform-fields/AddressField.tsx

@@ -0,0 +1,338 @@
+import {
+  CloseOutlined,
+  EnvironmentOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Cascader,
+  Drawer,
+  Input,
+  Select,
+  Space,
+  Spin,
+  Typography,
+} from 'antd';
+import type {
+  LabeledValue,
+  StableAddressValue,
+} from 'openxiangda-contracts/browser';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  loadChinaDivisions,
+  type ChinaDivisionListItem,
+} from '../../platform-client';
+import {
+  ADDRESS_LEVELS,
+  addressControlValue,
+  addressDisplay,
+  addressPath,
+  addressStoredValue,
+  type AddressLevel,
+} from './address-value';
+
+interface AddressOption extends LabeledValue {
+  hasChildren: boolean;
+  isLeaf: boolean;
+  children?: AddressOption[];
+}
+
+const LEVEL_LABELS: Record<AddressLevel, string> = {
+  province: '省份',
+  city: '城市',
+  district: '区县',
+  street: '街道',
+};
+
+function divisionOption(item: ChinaDivisionListItem): AddressOption {
+  return {
+    label: item.name,
+    value: item.adcode,
+    hasChildren: item.hasChildren,
+    isLeaf: !item.hasChildren,
+  };
+}
+
+function snapshotBranch(path: LabeledValue[], index = 0): AddressOption[] {
+  const item = path[index];
+  if (!item) return [];
+  const children = snapshotBranch(path, index + 1);
+  return [{
+    ...item,
+    hasChildren: children.length > 0,
+    isLeaf: children.length === 0,
+    ...(children.length ? { children } : {}),
+  }];
+}
+
+function mergeStoredPath(
+  options: AddressOption[],
+  path: LabeledValue[],
+  index = 0
+): AddressOption[] {
+  const stored = path[index];
+  if (!stored) return options;
+  let matched = false;
+  const next = options.map(option => {
+    if (option.value !== stored.value) return option;
+    matched = true;
+    const children = mergeStoredPath(option.children || [], path, index + 1);
+    return {
+      ...option,
+      label: stored.label || option.label,
+      ...(children.length ? { children, isLeaf: false } : {}),
+    };
+  });
+  return matched ? next : [...next, ...snapshotBranch(path, index)];
+}
+
+function replaceChildren(
+  options: AddressOption[],
+  path: string[],
+  children: AddressOption[],
+  index = 0
+): AddressOption[] {
+  const current = path[index];
+  return options.map(option => {
+    if (option.value !== current) return option;
+    if (index === path.length - 1) {
+      return {
+        ...option,
+        children,
+        hasChildren: children.length > 0,
+        isLeaf: children.length === 0,
+      };
+    }
+    return {
+      ...option,
+      children: replaceChildren(option.children || [], path, children, index + 1),
+    };
+  });
+}
+
+function optionSnapshot(option: AddressOption): LabeledValue {
+  return { label: option.label, value: option.value };
+}
+
+export function AddressValueDisplay({ value }: { value: StableAddressValue }) {
+  const parts = addressPath(value);
+  return (
+    <span className="oxa-address-value">
+      <Typography.Text>{addressDisplay(value) || '-'}</Typography.Text>
+      {parts.length > 0 && (
+        <Typography.Text type="secondary">
+          {parts.map(item => item.label).join(' / ')}
+        </Typography.Text>
+      )}
+    </span>
+  );
+}
+
+export function AddressField({
+  value,
+  onChange,
+  disabled = false,
+  mobile = false,
+  detailEnabled = true,
+}: {
+  value?: StableAddressValue;
+  onChange?: (value: StableAddressValue | undefined) => void;
+  disabled?: boolean;
+  mobile?: boolean;
+  detailEnabled?: boolean;
+}) {
+  const storedPath = useMemo(() => addressPath(value), [value]);
+  const [options, setOptions] = useState<AddressOption[]>(() =>
+    snapshotBranch(storedPath)
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [draft, setDraft] = useState<StableAddressValue | undefined>(value);
+  const [mobileOptions, setMobileOptions] = useState<AddressOption[][]>([]);
+
+  const loadOptions = useCallback(async (parentAdcode?: string) =>
+    (await loadChinaDivisions(parentAdcode)).map(divisionOption), []);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    loadOptions()
+      .then(items => {
+        if (active) setOptions(mergeStoredPath(items, storedPath));
+      })
+      .catch(reason => {
+        if (active) setError(reason instanceof Error ? reason.message : String(reason));
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [loadOptions, storedPath]);
+
+  const loadChildren = async (selected: AddressOption[]) => {
+    const target = selected[selected.length - 1];
+    if (!target) return;
+    setError('');
+    try {
+      const children = await loadOptions(target.value);
+      setOptions(current => replaceChildren(
+        current,
+        selected.map(item => item.value),
+        children
+      ));
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    }
+  };
+
+  const hydrateMobile = async (stored?: StableAddressValue) => {
+    setLoading(true);
+    setError('');
+    try {
+      const path = addressPath(stored);
+      const lists: AddressOption[][] = [];
+      lists[0] = await loadOptions();
+      for (let index = 0; index < path.length && index < ADDRESS_LEVELS.length - 1; index += 1) {
+        lists[index + 1] = await loadOptions(path[index]?.value);
+      }
+      setMobileOptions(lists);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openMobile = () => {
+    setDraft(value);
+    setMobileOpen(true);
+    void hydrateMobile(value);
+  };
+
+  const selectMobileLevel = async (index: number, selectedValue?: string) => {
+    const currentPath = addressPath(draft).slice(0, index);
+    const selected = mobileOptions[index]?.find(item => item.value === selectedValue);
+    const nextPath = selected ? [...currentPath, optionSnapshot(selected)] : currentPath;
+    const next = addressStoredValue(nextPath, draft?.detail);
+    setDraft(next);
+    setMobileOptions(current => current.slice(0, index + 1));
+    if (selected?.hasChildren && index < ADDRESS_LEVELS.length - 1) {
+      try {
+        const children = await loadOptions(selected.value);
+        setMobileOptions(current => {
+          const lists = current.slice(0, index + 1);
+          lists[index + 1] = children;
+          return lists;
+        });
+      } catch (reason) {
+        setError(reason instanceof Error ? reason.message : String(reason));
+      }
+    }
+  };
+
+  const detailInput = (current?: StableAddressValue, commit?: (next?: StableAddressValue) => void) =>
+    detailEnabled ? (
+      <Input
+        disabled={disabled || !addressPath(current).length}
+        maxLength={4000}
+        onChange={event => commit?.(
+          addressStoredValue(addressPath(current), event.target.value)
+        )}
+        placeholder="请输入详细门牌地址"
+        value={current?.detail || ''}
+      />
+    ) : null;
+
+  if (mobile) {
+    return (
+      <div className="oxa-address-field oxa-mobile-address-field">
+        <Button
+          block
+          disabled={disabled}
+          icon={<EnvironmentOutlined />}
+          onClick={openMobile}
+        >
+          {addressDisplay(value) || '请选择行政区地址'}
+        </Button>
+        {value && !disabled && (
+          <Button
+            aria-label="清除地址"
+            icon={<CloseOutlined />}
+            onClick={() => onChange?.(undefined)}
+            type="text"
+          />
+        )}
+        <Drawer
+          destroyOnHidden
+          onClose={() => setMobileOpen(false)}
+          open={mobileOpen}
+          placement="bottom"
+          size="85vh"
+          title="选择行政区地址"
+        >
+          {loading ? <Spin /> : (
+            <div className="oxa-address-mobile-levels">
+              {ADDRESS_LEVELS.map((level, index) => {
+                const selected = addressPath(draft)[index]?.value;
+                const choices = mobileOptions[index] || [];
+                if (index > 0 && !choices.length && !selected) return null;
+                return (
+                  <Select
+                    allowClear
+                    key={level}
+                    onChange={next => void selectMobileLevel(index, next)}
+                    options={choices}
+                    placeholder={`请选择${LEVEL_LABELS[level]}`}
+                    value={selected}
+                  />
+                );
+              })}
+              {detailInput(draft, setDraft)}
+            </div>
+          )}
+          {error && <Alert showIcon title={error} type="error" />}
+          <Space className="oxa-address-mobile-actions">
+            <Button onClick={() => setMobileOpen(false)}>取消</Button>
+            <Button
+              disabled={!addressPath(draft).length}
+              onClick={() => {
+                onChange?.(draft);
+                setMobileOpen(false);
+              }}
+              type="primary"
+            >
+              确定
+            </Button>
+          </Space>
+        </Drawer>
+      </div>
+    );
+  }
+
+  return (
+    <div className="oxa-address-field">
+      <Cascader
+        allowClear
+        changeOnSelect
+        disabled={disabled}
+        loadData={selected => void loadChildren(selected as AddressOption[])}
+        loading={loading}
+        onChange={(_path, selected) => onChange?.(
+          addressStoredValue(
+            (selected as AddressOption[]).map(optionSnapshot),
+            value?.detail
+          )
+        )}
+        options={options}
+        placeholder="请选择行政区地址"
+        showSearch={false}
+        value={addressControlValue(value)}
+      />
+      {detailInput(value, onChange)}
+      {error && <Alert showIcon title={error} type="error" />}
+    </div>
+  );
+}

package/template/apps/web/src/components/platform-fields/AttachmentFileList.tsx

@@ -13,7 +13,7 @@ import { App, Button, Image, Space } from 'antd';
 import type { DataFileRef } from 'openxiangda-contracts/browser';
 import { useEffect, useMemo, useState } from 'react';
 import {
-  dataFileContentUrl,
+  downloadDataFile,
   fetchDataFileBlob,
   loadDataFilePreview,
 } from '../../platform-client';
@@ -89,6 +89,7 @@ export function AttachmentFileList({
 }) {
   const { message } = App.useApp();
   const [openingId, setOpeningId] = useState('');
+  const [downloadingId, setDownloadingId] = useState('');
   const [images, setImages] = useState<PreviewImage[]>([]);
   const [imageOpen, setImageOpen] = useState(false);
   const [currentImage, setCurrentImage] = useState(0);
@@ -156,9 +157,14 @@ export function AttachmentFileList({
     }
   };
 
-  const download = (file: DataFileRef) => {
-    if (!openIsolatedWindow(dataFileContentUrl(resourceCode, file.id))) {
-      void message.warning('浏览器阻止了下载窗口，请允许弹出窗口后重试');
+  const download = async (file: DataFileRef) => {
+    setDownloadingId(file.id);
+    try {
+      await downloadDataFile(resourceCode, file.id, file.name);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      setDownloadingId('');
     }
   };
 
@@ -167,7 +173,19 @@ export function AttachmentFileList({
       <div className="oxa-file-list">
         {files.map(file => (
           <div className="oxa-file-item" key={file.id}>
-            <span className="oxa-file-kind">{fileIcon(file)}</span>
+            <span className="oxa-file-kind">
+              {file.thumbnailUrl ? (
+                <img
+                  alt=""
+                  className="oxa-file-thumbnail"
+                  height={file.height}
+                  src={file.thumbnailUrl}
+                  width={file.width}
+                />
+              ) : (
+                fileIcon(file)
+              )}
+            </span>
             <button
               className="oxa-file-meta oxa-file-name-button"
               disabled={openingId === file.id}
@@ -189,7 +207,8 @@ export function AttachmentFileList({
               <Button
                 aria-label={`下载${file.name}`}
                 icon={<DownloadOutlined />}
-                onClick={() => download(file)}
+                loading={downloadingId === file.id}
+                onClick={() => void download(file)}
                 size="small"
                 type="text"
               />

package/template/apps/web/src/components/platform-fields/CascadeField.tsx

@@ -0,0 +1,49 @@
+import { Cascader } from 'antd';
+import type { DataFieldSurface, LabeledValue } from 'openxiangda-contracts/browser';
+import {
+  cascadeControlValue,
+  cascadeStoredValue,
+  type CascadeStoredValue,
+} from './cascade-value';
+
+export function CascadeField({
+  field,
+  value,
+  onChange,
+  disabled,
+}: {
+  field: DataFieldSurface;
+  value?: CascadeStoredValue;
+  onChange?: (value: LabeledValue[] | LabeledValue[][] | undefined) => void;
+  disabled?: boolean;
+}) {
+  const multiple = field.type === 'cascade.multiple';
+  return (
+    <Cascader
+      allowClear
+      disabled={disabled}
+      maxTagCount="responsive"
+      multiple={multiple}
+      onChange={(next: unknown) => onChange?.(
+        cascadeStoredValue(field.options || [], next, multiple)
+      )}
+      options={field.options}
+      placeholder={`请选择${field.label}`}
+      showSearch
+      value={cascadeControlValue(value, multiple) as never}
+    />
+  );
+}
+
+export function CascadeValueDisplay({
+  value,
+  multiple,
+}: {
+  value: CascadeStoredValue;
+  multiple: boolean;
+}) {
+  const paths = multiple
+    ? value as LabeledValue[][]
+    : [value as LabeledValue[]];
+  return <>{paths.map(path => path.map(item => item.label).join(' / ')).join('；') || '-'}</>;
+}