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

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

@@ -4,10 +4,15 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import { Avatar, Select, Space, Spin, Tag, Typography } from 'antd';
+import type {
+  DepartmentReferenceValue,
+  DirectoryEntry,
+  ResourceReferenceValue,
+  UserReferenceValue,
+} from 'openxiangda-contracts/browser';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   resolveDirectory,
-  resolveResource,
   searchDirectory,
   searchResource,
   type DirectoryKind,
@@ -21,48 +26,105 @@ type Option = {
   description?: string;
   path?: string[];
   source: Source;
+  reference?: StoredValue;
 };
 
+type StoredValue =
+  | UserReferenceValue
+  | DepartmentReferenceValue
+  | ResourceReferenceValue;
+
 function mergeOptions(current: Option[], incoming: Option[]) {
   const merged = new Map(current.map(option => [option.value, option]));
   for (const option of incoming) merged.set(option.value, option);
   return [...merged.values()];
 }
 
-function directoryOption(
-  source: DirectoryKind,
-  item: {
-    id: string;
-    label: string;
-    selectable: boolean;
-    description?: string;
-    path?: Array<{ label: string }>;
-  }
-): Option {
+function directoryOption(source: DirectoryKind, item: DirectoryEntry): Option {
   return {
     source,
     value: item.id,
     label: item.label,
-    selectable: item.selectable,
+    selectable: item.selectable !== false,
     ...(item.description ? { description: item.description } : {}),
     ...(item.path?.length
       ? { path: item.path.map(entry => entry.label) }
       : {}),
+    reference: item.snapshot,
+  };
+}
+
+function resourceOption(item: ResourceReferenceValue): Option {
+  return {
+    source: 'resource',
+    value: item.value,
+    label: item.label,
+    selectable: true,
+    ...(item.description ? { description: item.description } : {}),
+    reference: item,
   };
 }
 
+function storedValues(value: StoredValue | StoredValue[] | undefined) {
+  return (Array.isArray(value) ? value : value ? [value] : []).map(item => item.value);
+}
+
+function storedReferenceOptions(
+  source: Source,
+  value: StoredValue | StoredValue[] | undefined
+) {
+  return (Array.isArray(value) ? value : value ? [value] : []).map(item =>
+    source === 'resource'
+      ? resourceOption(item as ResourceReferenceValue)
+      : {
+          source,
+          value: item.value,
+          label: item.label,
+          selectable: true,
+          ...(source === 'user' && (item as UserReferenceValue).employeeNo
+            ? { description: (item as UserReferenceValue).employeeNo }
+            : {}),
+          ...(source === 'department' && (item as DepartmentReferenceValue).fullPath
+            ? { description: (item as DepartmentReferenceValue).fullPath }
+            : {}),
+          reference: item,
+        }
+  );
+}
+
+function selectedValue(
+  source: Source,
+  ids: string | string[] | undefined,
+  options: Option[],
+  multiple: boolean
+) {
+  const values = (Array.isArray(ids) ? ids : ids ? [ids] : [])
+    .map(id => options.find(option => option.value === id)?.reference)
+    .filter((item): item is StoredValue => Boolean(item));
+  return multiple ? values : values[0];
+}
+
 async function searchSource(
   source: Source,
   operation: 'create' | 'update',
   keyword: string,
   cursor?: string,
   resourceCode?: string,
-  labelField?: string,
+  fieldCode?: string,
+  bindings?: Record<string, unknown>,
 ) {
   if (source === 'resource') {
-    if (!resourceCode || !labelField) throw new Error('OPENXIANGDA_RESOURCE_REFERENCE_CONFIG_INVALID');
-    const page = await searchResource(resourceCode, labelField, { keyword, cursor });
-    return { items: page.items.map(item => ({ ...item, value: item.id, source }) as Option), nextCursor: page.nextCursor };
+    if (!resourceCode || !fieldCode) throw new Error('OPENXIANGDA_RESOURCE_REFERENCE_CONFIG_INVALID');
+    const page = await searchResource(resourceCode, fieldCode, {
+      operation,
+      keyword,
+      cursor,
+      bindings,
+    });
+    return {
+      items: page.items.map(resourceOption),
+      nextCursor: page.nextCursor,
+    };
   }
   const page = await searchDirectory(source, { keyword, cursor });
   return {
@@ -71,22 +133,6 @@ async function searchSource(
   };
 }
 
-async function resolveSource(
-  source: Source,
-  operation: 'create' | 'update',
-  values: string[],
-  resourceCode?: string,
-  labelField?: string,
-) {
-  if (source === 'resource') {
-    if (!resourceCode || !labelField) throw new Error('OPENXIANGDA_RESOURCE_REFERENCE_CONFIG_INVALID');
-    return (await resolveResource(resourceCode, values, labelField)).items.map(item => ({ ...item, value: item.id, source }) as Option);
-  }
-  return (await resolveDirectory(source, values)).items.map(item =>
-    directoryOption(source, item)
-  );
-}
-
 function optionIcon(option: Pick<Option, 'source' | 'label'>) {
   if (option.source === 'user') {
     return (
@@ -108,16 +154,18 @@ function optionDescription(option: Option) {
 }
 
 export type AuthoritativeSelectorProps = {
-  value?: string | string[];
-  onChange?: (value: string | string[] | undefined) => void;
+  value?: StoredValue | StoredValue[];
+  onChange?: (value: StoredValue | StoredValue[] | undefined) => void;
   source: Source;
   operation: 'create' | 'update';
   multiple?: boolean;
   disabled?: boolean;
   id?: string;
   placeholder: string;
+  /** Host resource and field; the platform resolves the target source declaration. */
   resourceCode?: string;
-  labelField?: string;
+  fieldCode?: string;
+  bindings?: Record<string, unknown>;
 };
 
 export function AuthoritativeSelector({
@@ -130,42 +178,23 @@ export function AuthoritativeSelector({
   id,
   placeholder,
   resourceCode,
-  labelField,
+  fieldCode,
+  bindings,
 }: AuthoritativeSelectorProps) {
-  const [options, setOptions] = useState<Option[]>([]);
+  const [options, setOptions] = useState<Option[]>(() =>
+    storedReferenceOptions(source, value)
+  );
   const [keyword, setKeyword] = useState('');
   const [cursor, setCursor] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [open, setOpen] = useState(false);
   const requestSequence = useRef(0);
-  const values = useMemo(
-    () => (Array.isArray(value) ? value : value ? [value] : []),
-    [value]
-  );
+  const values = useMemo(() => storedValues(value), [value]);
 
   useEffect(() => {
-    const missing = values.filter(
-      selected => !options.some(option => option.value === selected)
-    );
-    if (missing.length === 0) return;
-    let active = true;
-    setLoading(true);
-    void resolveSource(source, operation, missing, resourceCode, labelField)
-      .then(items => {
-        if (active) setOptions(current => mergeOptions(current, items));
-      })
-      .catch(reason => {
-        if (active)
-          setError(reason instanceof Error ? reason.message : String(reason));
-      })
-      .finally(() => {
-        if (active) setLoading(false);
-      });
-    return () => {
-      active = false;
-    };
-  }, [labelField, operation, options, resourceCode, source, values]);
+    setOptions(current => mergeOptions(current, storedReferenceOptions(source, value)));
+  }, [source, value]);
 
   useEffect(() => {
     if (disabled) return;
@@ -177,7 +206,7 @@ export function AuthoritativeSelector({
     const timer = window.setTimeout(() => {
       setLoading(true);
       setError('');
-      void searchSource(source, operation, keyword, undefined, resourceCode, labelField)
+      void searchSource(source, operation, keyword, undefined, resourceCode, fieldCode, bindings)
         .then(page => {
           if (sequence !== requestSequence.current) return;
           setOptions(current => {
@@ -199,14 +228,14 @@ export function AuthoritativeSelector({
         });
     }, 300);
     return () => window.clearTimeout(timer);
-  }, [disabled, keyword, labelField, operation, resourceCode, source, values]);
+  }, [bindings, disabled, fieldCode, keyword, operation, resourceCode, source, values]);
 
   useEffect(() => {
     if (disabled || !open || keyword.trim().length >= 2) return;
     const sequence = ++requestSequence.current;
     setLoading(true);
     setError('');
-    void searchSource(source, operation, '', undefined, resourceCode, labelField)
+    void searchSource(source, operation, '', undefined, resourceCode, fieldCode, bindings)
       .then(page => {
         if (sequence !== requestSequence.current) return;
         setOptions(current => {
@@ -223,14 +252,14 @@ export function AuthoritativeSelector({
       .finally(() => {
         if (sequence === requestSequence.current) setLoading(false);
       });
-  }, [disabled, keyword, labelField, open, operation, resourceCode, source, values]);
+  }, [bindings, disabled, fieldCode, keyword, open, operation, resourceCode, source, values]);
 
   const loadNext = () => {
     if (!cursor || loading) return;
     const nextCursor = cursor;
     setLoading(true);
     setError('');
-    void searchSource(source, operation, keyword, nextCursor, resourceCode, labelField)
+    void searchSource(source, operation, keyword, nextCursor, resourceCode, fieldCode, bindings)
       .then(page => {
         setOptions(current => mergeOptions(current, page.items));
         setCursor(page.nextCursor);
@@ -268,7 +297,14 @@ export function AuthoritativeSelector({
         )
       }
       onChange={next => {
-        onChange?.(next || undefined);
+        onChange?.(
+          selectedValue(
+            source,
+            (next || undefined) as string | string[] | undefined,
+            options,
+            multiple
+          )
+        );
         if (!multiple) setOpen(false);
       }}
       onOpenChange={next => {
@@ -343,7 +379,7 @@ export function AuthoritativeSelector({
           </Tag>
         );
       }}
-      value={value}
+      value={multiple ? values : values[0]}
     />
   );
 }
@@ -364,9 +400,12 @@ export function MobileAuthoritativeSelector({
   id,
   placeholder,
   resourceCode,
-  labelField,
+  fieldCode,
+  bindings,
 }: AuthoritativeSelectorProps) {
-  const [options, setOptions] = useState<Option[]>([]);
+  const [options, setOptions] = useState<Option[]>(() =>
+    storedReferenceOptions(source, value)
+  );
   const [keyword, setKeyword] = useState('');
   const [cursor, setCursor] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -374,36 +413,15 @@ export function MobileAuthoritativeSelector({
   const [open, setOpen] = useState(false);
   const [draftValues, setDraftValues] = useState<string[]>([]);
   const requestSequence = useRef(0);
-  const values = useMemo(
-    () => (Array.isArray(value) ? value : value ? [value] : []),
-    [value]
-  );
+  const values = useMemo(() => storedValues(value), [value]);
 
   useEffect(() => {
-    setDraftValues(values);
-  }, [open, values]);
+    setOptions(current => mergeOptions(current, storedReferenceOptions(source, value)));
+  }, [source, value]);
 
   useEffect(() => {
-    const missing = values.filter(
-      selected => !options.some(option => option.value === selected)
-    );
-    if (missing.length === 0) return;
-    let active = true;
-    setLoading(true);
-    void resolveSource(source, operation, missing, resourceCode, labelField)
-      .then(items => {
-        if (active) setOptions(current => mergeOptions(current, items));
-      })
-      .catch(reason => {
-        if (active) setError(reason instanceof Error ? reason.message : String(reason));
-      })
-      .finally(() => {
-        if (active) setLoading(false);
-      });
-    return () => {
-      active = false;
-    };
-  }, [labelField, operation, options, resourceCode, source, values]);
+    setDraftValues(values);
+  }, [open, values]);
 
   useEffect(() => {
     if (disabled || !open) return;
@@ -413,7 +431,7 @@ export function MobileAuthoritativeSelector({
     const timer = window.setTimeout(() => {
       setLoading(true);
       setError('');
-      void searchSource(source, operation, trimmed, undefined, resourceCode, labelField)
+      void searchSource(source, operation, trimmed, undefined, resourceCode, fieldCode, bindings)
         .then(page => {
           if (sequence !== requestSequence.current) return;
           setOptions(current => {
@@ -432,14 +450,14 @@ export function MobileAuthoritativeSelector({
         });
     }, trimmed ? 300 : 0);
     return () => window.clearTimeout(timer);
-  }, [disabled, keyword, labelField, open, operation, resourceCode, source, values]);
+  }, [bindings, disabled, fieldCode, keyword, open, operation, resourceCode, source, values]);
 
   const loadNext = () => {
     if (!cursor || loading) return;
     const nextCursor = cursor;
     setLoading(true);
     setError('');
-    void searchSource(source, operation, keyword.trim(), nextCursor, resourceCode, labelField)
+    void searchSource(source, operation, keyword.trim(), nextCursor, resourceCode, fieldCode, bindings)
       .then(page => {
         setOptions(current => mergeOptions(current, page.items));
         setCursor(page.nextCursor);
@@ -461,7 +479,11 @@ export function MobileAuthoritativeSelector({
     const item = options.find(option => option.value === nextValue);
     if (!item?.selectable) return;
     if (!multiple) {
-      onChange?.(nextValue);
+      onChange?.(
+        selectedValue(source, nextValue, options, false) as
+          | StoredValue
+          | undefined
+      );
       setOpen(false);
       return;
     }
@@ -552,7 +574,14 @@ export function MobileAuthoritativeSelector({
               <button
                 className="oxa-mobile-reference-confirm"
                 onClick={() => {
-                  onChange?.(draftValues.length ? draftValues : undefined);
+                  onChange?.(
+                    selectedValue(
+                      source,
+                      draftValues.length ? draftValues : undefined,
+                      options,
+                      true
+                    ) as StoredValue[] | undefined
+                  );
                   setOpen(false);
                 }}
                 type="button"
@@ -570,41 +599,16 @@ export function MobileAuthoritativeSelector({
 export function ResolvedValueText({
   source,
   value,
-  resourceCode,
-  labelField,
 }: {
   source: Source;
-  value?: string | string[];
-  resourceCode?: string;
-  labelField?: string;
+  value?: StoredValue | StoredValue[];
 }) {
-  const values = useMemo(
-    () => (Array.isArray(value) ? value : value ? [value] : []),
-    [value]
+  const values = useMemo(() => storedValues(value), [value]);
+  const items = useMemo(
+    () => storedReferenceOptions(source, value),
+    [source, value]
   );
-  const [items, setItems] = useState<Option[]>([]);
-  const [failed, setFailed] = useState(false);
-  useEffect(() => {
-    if (values.length === 0) {
-      setItems([]);
-      return;
-    }
-    let active = true;
-    setFailed(false);
-    void resolveSource(source, 'update', values, resourceCode, labelField)
-      .then(next => {
-        if (active) setItems(next);
-      })
-      .catch(() => {
-        if (active) setFailed(true);
-      });
-    return () => {
-      active = false;
-    };
-  }, [labelField, resourceCode, source, values]);
   if (values.length === 0) return <>-</>;
-  if (failed) return <Typography.Text type="danger">目录解析失败</Typography.Text>;
-  if (!items.length) return <>读取中…</>;
   const ordered = values.map(value => items.find(item => item.value === value));
   return (
     <span className={`oxa-resolved-values oxa-resolved-${source}`}>
@@ -626,3 +630,32 @@ export function ResolvedValueText({
     </span>
   );
 }
+
+/** Resolve operational identities such as audit actors; business fields never use this path. */
+export function DirectoryIdentityText({
+  source,
+  id,
+}: {
+  source: DirectoryKind;
+  id: string;
+}) {
+  const [value, setValue] = useState<UserReferenceValue | DepartmentReferenceValue>();
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let active = true;
+    setFailed(false);
+    void resolveDirectory(source, [id])
+      .then(page => {
+        if (active) setValue(page.items[0]?.snapshot);
+      })
+      .catch(() => {
+        if (active) setFailed(true);
+      });
+    return () => {
+      active = false;
+    };
+  }, [id, source]);
+  if (failed) return <Typography.Text type="secondary">{id}</Typography.Text>;
+  if (!value) return <>读取中…</>;
+  return <ResolvedValueText source={source} value={value} />;
+}

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

@@ -12,7 +12,7 @@ import type { DataFilePreview } from 'openxiangda-contracts/browser';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-  dataFileContentUrl,
+  downloadDataFile,
   fetchDataFileBlob,
   loadDataFilePreview,
 } from './platform-client';
@@ -220,6 +220,7 @@ export function FilePreviewPage() {
   const [preview, setPreview] = useState<DataFilePreview>();
   const [blob, setBlob] = useState<Blob>();
   const [error, setError] = useState('');
+  const [downloading, setDownloading] = useState(false);
   useEffect(() => {
     let active = true;
     setPreview(undefined);
@@ -249,10 +250,21 @@ export function FilePreviewPage() {
     };
   }, [fileId, resourceCode]);
 
-  const downloadUrl =
-    resourceCode && fileId
-      ? dataFileContentUrl(resourceCode, fileId, 'attachment')
-      : '';
+  const download = async () => {
+    if (!resourceCode || !fileId) return;
+    setDownloading(true);
+    try {
+      await downloadDataFile(
+        resourceCode,
+        fileId,
+        preview?.file.name || 'attachment'
+      );
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    } finally {
+      setDownloading(false);
+    }
+  };
   return (
     <div className="oxa-file-preview-page">
       <header className="oxa-file-preview-toolbar">
@@ -268,8 +280,12 @@ export function FilePreviewPage() {
           </div>
         </div>
         <div>
-          {downloadUrl && (
-            <Button href={downloadUrl} icon={<DownloadOutlined />}>
+          {resourceCode && fileId && (
+            <Button
+              icon={<DownloadOutlined />}
+              loading={downloading}
+              onClick={() => void download()}
+            >
               下载文件
             </Button>
           )}
@@ -285,8 +301,13 @@ export function FilePreviewPage() {
             title="文件预览加载失败"
             subTitle={error}
             extra={
-              downloadUrl ? (
-                <Button href={downloadUrl} icon={<DownloadOutlined />} type="primary">
+              resourceCode && fileId ? (
+                <Button
+                  icon={<DownloadOutlined />}
+                  loading={downloading}
+                  onClick={() => void download()}
+                  type="primary"
+                >
                   下载文件
                 </Button>
               ) : undefined

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

@@ -0,0 +1,128 @@
+import { Select, Typography } from 'antd';
+import { useEffect, useState } from 'react';
+import type {
+  RoleSubjectChoice,
+  RoleSubjectChoicePage,
+} from 'openxiangda-contracts/browser';
+import { loadRoleSubjects } from './platform-client';
+
+function mergeSubjects(
+  current: RoleSubjectChoice[],
+  incoming: RoleSubjectChoice[]
+) {
+  const merged = new Map(current.map(item => [item.subjectKey, item]));
+  for (const item of incoming) merged.set(item.subjectKey, item);
+  return [...merged.values()];
+}
+
+export function RoleSubjectSelect({
+  disabled,
+  initialPage,
+  onChange,
+  value,
+}: {
+  disabled?: boolean;
+  initialPage: RoleSubjectChoicePage;
+  onChange: (value: string) => void;
+  value?: string;
+}) {
+  const [keyword, setKeyword] = useState('');
+  const [options, setOptions] = useState(initialPage.items);
+  const [cursor, setCursor] = useState(initialPage.nextCursor);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    const timer = window.setTimeout(() => {
+      setLoading(true);
+      setLoadError('');
+      void loadRoleSubjects({ keyword, limit: 20 })
+        .then(page => {
+          if (!active) return;
+          setOptions(current =>
+            mergeSubjects(
+              current.filter(item => item.subjectKey === value),
+              page.items
+            )
+          );
+          setCursor(page.nextCursor);
+        })
+        .catch(reason => {
+          if (!active) return;
+          setLoadError(
+            reason instanceof Error ? reason.message : '应用角色读取失败'
+          );
+        })
+        .finally(() => {
+          if (active) setLoading(false);
+        });
+    }, keyword ? 250 : 0);
+    return () => {
+      active = false;
+      window.clearTimeout(timer);
+    };
+  }, [keyword, value]);
+
+  const loadMore = async () => {
+    if (!cursor || loading) return;
+    setLoading(true);
+    setLoadError('');
+    try {
+      const page = await loadRoleSubjects({ keyword, cursor, limit: 20 });
+      setOptions(current => mergeSubjects(current, page.items));
+      setCursor(page.nextCursor);
+    } catch (reason) {
+      setLoadError(
+        reason instanceof Error ? reason.message : '更多应用角色读取失败'
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Select
+      aria-label="选择应用角色"
+      className="oxa-role-switch-select"
+      disabled={disabled}
+      filterOption={false}
+      loading={loading}
+      notFoundContent={
+        loadError ? (
+          <Typography.Text type="danger">应用角色读取失败，请重试</Typography.Text>
+        ) : undefined
+      }
+      onChange={onChange}
+      onPopupScroll={event => {
+        const target = event.currentTarget;
+        if (
+          target.scrollTop + target.clientHeight >=
+          target.scrollHeight - 12
+        ) {
+          void loadMore();
+        }
+      }}
+      onSearch={setKeyword}
+      optionRender={option => {
+        const subject = options.find(item => item.subjectKey === option.value);
+        return (
+          <div className="oxa-role-switch-option">
+            <strong>{subject?.role.name || option.label}</strong>
+            {subject?.role.description && (
+              <span>{subject.role.description}</span>
+            )}
+          </div>
+        );
+      }}
+      options={options.map(subject => ({
+        label: subject.role.name,
+        value: subject.subjectKey,
+      }))}
+      placeholder="选择当前应用角色"
+      showSearch
+      status={loadError ? 'error' : undefined}
+      value={value}
+    />
+  );
+}