openxiangda-cli 2.0.0-alpha.61 → 2.0.0-alpha.66

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

@@ -1,19 +1,19 @@
 import {
   ApartmentOutlined,
-  BankOutlined,
+  DatabaseOutlined,
   UserOutlined,
 } from '@ant-design/icons';
 import { Avatar, Select, Space, Spin, Tag, Typography } from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  resolveCollegeScope,
   resolveDirectory,
-  searchCollegeScope,
+  resolveResource,
   searchDirectory,
+  searchResource,
   type DirectoryKind,
 } from './platform-client';
 
-type Source = DirectoryKind | 'college';
+type Source = DirectoryKind | 'resource';
 type Option = {
   value: string;
   label: string;
@@ -55,14 +55,14 @@ async function searchSource(
   source: Source,
   operation: 'create' | 'update',
   keyword: string,
-  cursor?: string
+  cursor?: string,
+  resourceCode?: string,
+  labelField?: string,
 ) {
-  if (source === 'college') {
-    const page = await searchCollegeScope(operation, { keyword, cursor });
-    return {
-      items: page.items.map(item => ({ ...item, source }) as Option),
-      nextCursor: page.nextCursor,
-    };
+  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 };
   }
   const page = await searchDirectory(source, { keyword, cursor });
   return {
@@ -74,12 +74,13 @@ async function searchSource(
 async function resolveSource(
   source: Source,
   operation: 'create' | 'update',
-  values: string[]
+  values: string[],
+  resourceCode?: string,
+  labelField?: string,
 ) {
-  if (source === 'college') {
-    return (await resolveCollegeScope(operation, values)).items.map(
-      item => ({ ...item, source }) as Option
-    );
+  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)
@@ -94,8 +95,8 @@ function optionIcon(option: Pick<Option, 'source' | 'label'>) {
       </Avatar>
     );
   }
-  return option.source === 'college' ? (
-    <BankOutlined className="oxa-selector-icon" />
+  return option.source === 'resource' ? (
+    <DatabaseOutlined className="oxa-selector-icon" />
   ) : (
     <ApartmentOutlined className="oxa-selector-icon" />
   );
@@ -106,6 +107,19 @@ function optionDescription(option: Option) {
   return option.description || '';
 }
 
+export type AuthoritativeSelectorProps = {
+  value?: string | string[];
+  onChange?: (value: string | string[] | undefined) => void;
+  source: Source;
+  operation: 'create' | 'update';
+  multiple?: boolean;
+  disabled?: boolean;
+  id?: string;
+  placeholder: string;
+  resourceCode?: string;
+  labelField?: string;
+};
+
 export function AuthoritativeSelector({
   value,
   onChange,
@@ -115,16 +129,9 @@ export function AuthoritativeSelector({
   disabled = false,
   id,
   placeholder,
-}: {
-  value?: string | string[];
-  onChange?: (value: string | string[] | undefined) => void;
-  source: Source;
-  operation: 'create' | 'update';
-  multiple?: boolean;
-  disabled?: boolean;
-  id?: string;
-  placeholder: string;
-}) {
+  resourceCode,
+  labelField,
+}: AuthoritativeSelectorProps) {
   const [options, setOptions] = useState<Option[]>([]);
   const [keyword, setKeyword] = useState('');
   const [cursor, setCursor] = useState<string | null>(null);
@@ -144,7 +151,7 @@ export function AuthoritativeSelector({
     if (missing.length === 0) return;
     let active = true;
     setLoading(true);
-    void resolveSource(source, operation, missing)
+    void resolveSource(source, operation, missing, resourceCode, labelField)
       .then(items => {
         if (active) setOptions(current => mergeOptions(current, items));
       })
@@ -158,11 +165,11 @@ export function AuthoritativeSelector({
     return () => {
       active = false;
     };
-  }, [operation, options, source, values]);
+  }, [labelField, operation, options, resourceCode, source, values]);
 
   useEffect(() => {
     if (disabled) return;
-    if (source !== 'college' && keyword.trim().length < 2) {
+    if (keyword.trim().length < 2) {
       setCursor(null);
       return;
     }
@@ -170,7 +177,7 @@ export function AuthoritativeSelector({
     const timer = window.setTimeout(() => {
       setLoading(true);
       setError('');
-      void searchSource(source, operation, keyword)
+      void searchSource(source, operation, keyword, undefined, resourceCode, labelField)
         .then(page => {
           if (sequence !== requestSequence.current) return;
           setOptions(current => {
@@ -192,14 +199,38 @@ export function AuthoritativeSelector({
         });
     }, 300);
     return () => window.clearTimeout(timer);
-  }, [disabled, keyword, operation, source, values]);
+  }, [disabled, keyword, labelField, 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)
+      .then(page => {
+        if (sequence !== requestSequence.current) return;
+        setOptions(current => {
+          const selected = current.filter(option => values.includes(option.value));
+          return mergeOptions(selected, page.items);
+        });
+        setCursor(page.nextCursor);
+      })
+      .catch(reason => {
+        if (sequence === requestSequence.current) {
+          setError(reason instanceof Error ? reason.message : String(reason));
+        }
+      })
+      .finally(() => {
+        if (sequence === requestSequence.current) setLoading(false);
+      });
+  }, [disabled, keyword, labelField, open, operation, resourceCode, source, values]);
 
   const loadNext = () => {
     if (!cursor || loading) return;
     const nextCursor = cursor;
     setLoading(true);
     setError('');
-    void searchSource(source, operation, keyword, nextCursor)
+    void searchSource(source, operation, keyword, nextCursor, resourceCode, labelField)
       .then(page => {
         setOptions(current => mergeOptions(current, page.items));
         setCursor(page.nextCursor);
@@ -230,8 +261,8 @@ export function AuthoritativeSelector({
           <Spin size="small" />
         ) : error ? (
           <Typography.Text type="danger">{error}</Typography.Text>
-        ) : source !== 'college' && keyword.trim().length < 2 ? (
-          '请输入至少 2 个字符'
+        ) : keyword.trim().length < 2 ? (
+          '暂无可选数据，可输入至少 2 个字符搜索'
         ) : (
           '无可选数据'
         )
@@ -240,7 +271,10 @@ export function AuthoritativeSelector({
         onChange?.(next || undefined);
         if (!multiple) setOpen(false);
       }}
-      onOpenChange={setOpen}
+      onOpenChange={next => {
+        setOpen(next);
+        if (!next) setKeyword('');
+      }}
       onPopupScroll={event => {
         const element = event.currentTarget;
         if (
@@ -275,8 +309,8 @@ export function AuthoritativeSelector({
       prefix={
         source === 'user' ? (
           <UserOutlined />
-        ) : source === 'college' ? (
-          <BankOutlined />
+        ) : source === 'resource' ? (
+          <DatabaseOutlined />
         ) : (
           <ApartmentOutlined />
         )
@@ -314,12 +348,235 @@ export function AuthoritativeSelector({
   );
 }
 
+/**
+ * Mobile reference picker. It deliberately avoids Ant Design Select so that
+ * resource references have a touch-friendly, full-width interaction on
+ * phones. The search and resolve calls are the same authoritative platform
+ * APIs used by the desktop selector.
+ */
+export function MobileAuthoritativeSelector({
+  value,
+  onChange,
+  source,
+  operation,
+  multiple = false,
+  disabled = false,
+  id,
+  placeholder,
+  resourceCode,
+  labelField,
+}: AuthoritativeSelectorProps) {
+  const [options, setOptions] = useState<Option[]>([]);
+  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 [draftValues, setDraftValues] = useState<string[]>([]);
+  const requestSequence = useRef(0);
+  const values = useMemo(
+    () => (Array.isArray(value) ? value : value ? [value] : []),
+    [value]
+  );
+
+  useEffect(() => {
+    setDraftValues(values);
+  }, [open, values]);
+
+  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]);
+
+  useEffect(() => {
+    if (disabled || !open) return;
+    const trimmed = keyword.trim();
+    if (trimmed.length > 0 && trimmed.length < 2) return;
+    const sequence = ++requestSequence.current;
+    const timer = window.setTimeout(() => {
+      setLoading(true);
+      setError('');
+      void searchSource(source, operation, trimmed, undefined, resourceCode, labelField)
+        .then(page => {
+          if (sequence !== requestSequence.current) return;
+          setOptions(current => {
+            const selected = current.filter(option => values.includes(option.value));
+            return mergeOptions(selected, page.items);
+          });
+          setCursor(page.nextCursor);
+        })
+        .catch(reason => {
+          if (sequence === requestSequence.current) {
+            setError(reason instanceof Error ? reason.message : String(reason));
+          }
+        })
+        .finally(() => {
+          if (sequence === requestSequence.current) setLoading(false);
+        });
+    }, trimmed ? 300 : 0);
+    return () => window.clearTimeout(timer);
+  }, [disabled, keyword, labelField, 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)
+      .then(page => {
+        setOptions(current => mergeOptions(current, page.items));
+        setCursor(page.nextCursor);
+      })
+      .catch(reason => setError(reason instanceof Error ? reason.message : String(reason)))
+      .finally(() => setLoading(false));
+  };
+
+  const selectedItems = values
+    .map(selected => options.find(option => option.value === selected))
+    .filter((item): item is Option => Boolean(item));
+  const selectedLabel = selectedItems.length
+    ? selectedItems.map(item => item.label).join('、')
+    : values.length
+      ? (loading ? '读取中…' : values.join('、'))
+      : `请选择${placeholder}`;
+
+  const toggleValue = (nextValue: string) => {
+    const item = options.find(option => option.value === nextValue);
+    if (!item?.selectable) return;
+    if (!multiple) {
+      onChange?.(nextValue);
+      setOpen(false);
+      return;
+    }
+    setDraftValues(current =>
+      current.includes(nextValue)
+        ? current.filter(itemValue => itemValue !== nextValue)
+        : [...current, nextValue]
+    );
+  };
+
+  return (
+    <>
+      <button
+        aria-haspopup="dialog"
+        className="oxa-mobile-reference-trigger"
+        disabled={disabled}
+        id={id}
+        onClick={() => {
+          setDraftValues(values);
+          setKeyword('');
+          setOpen(true);
+        }}
+        type="button"
+      >
+        <span className={values.length ? '' : 'oxa-mobile-reference-placeholder'}>
+          {selectedLabel}
+        </span>
+        <span aria-hidden="true">⌄</span>
+      </button>
+      {open && (
+        <div
+          aria-label={placeholder}
+          aria-modal="true"
+          className="oxa-mobile-reference-backdrop"
+          onClick={() => setOpen(false)}
+          role="dialog"
+        >
+          <div className="oxa-mobile-reference-sheet" onClick={event => event.stopPropagation()}>
+            <div className="oxa-mobile-reference-header">
+              <strong>{placeholder}</strong>
+              <button onClick={() => setOpen(false)} type="button">关闭</button>
+            </div>
+            <input
+              autoFocus
+              className="oxa-mobile-input oxa-mobile-reference-search"
+              onChange={event => setKeyword(event.target.value)}
+              placeholder={`搜索${placeholder}`}
+              type="search"
+              value={keyword}
+            />
+            {error && <div className="oxa-mobile-reference-error">{error}</div>}
+            {loading && <div className="oxa-mobile-reference-loading">加载中…</div>}
+            {!loading && !error && options.length === 0 && (
+              <div className="oxa-mobile-reference-empty">
+                {keyword.trim().length < 2 ? '请输入至少 2 个字符搜索' : '暂无可选数据'}
+              </div>
+            )}
+            <div aria-multiselectable={multiple} className="oxa-mobile-reference-options" role="listbox">
+              {options.map(option => {
+                const selected = (multiple ? draftValues : values).includes(option.value);
+                const description = optionDescription(option);
+                return (
+                  <button
+                    aria-selected={selected}
+                    className={`oxa-mobile-reference-option${selected ? ' is-selected' : ''}`}
+                    disabled={!option.selectable}
+                    key={option.value}
+                    onClick={() => toggleValue(option.value)}
+                    role="option"
+                    type="button"
+                  >
+                    {optionIcon(option)}
+                    <span className="oxa-mobile-reference-option-copy">
+                      <strong>{option.label}</strong>
+                      {description && <small>{description}</small>}
+                    </span>
+                    {selected && <span aria-hidden="true">✓</span>}
+                  </button>
+                );
+              })}
+            </div>
+            {cursor && (
+              <button className="oxa-mobile-reference-more" onClick={loadNext} type="button">
+                {loading ? '加载中…' : '加载更多'}
+              </button>
+            )}
+            {multiple && (
+              <button
+                className="oxa-mobile-reference-confirm"
+                onClick={() => {
+                  onChange?.(draftValues.length ? draftValues : undefined);
+                  setOpen(false);
+                }}
+                type="button"
+              >
+                确定（{draftValues.length}）
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
 export function ResolvedValueText({
   source,
   value,
+  resourceCode,
+  labelField,
 }: {
   source: Source;
   value?: string | string[];
+  resourceCode?: string;
+  labelField?: string;
 }) {
   const values = useMemo(
     () => (Array.isArray(value) ? value : value ? [value] : []),
@@ -334,7 +591,7 @@ export function ResolvedValueText({
     }
     let active = true;
     setFailed(false);
-    void resolveSource(source, 'update', values)
+    void resolveSource(source, 'update', values, resourceCode, labelField)
       .then(next => {
         if (active) setItems(next);
       })
@@ -344,7 +601,7 @@ export function ResolvedValueText({
     return () => {
       active = false;
     };
-  }, [source, values]);
+  }, [labelField, resourceCode, source, values]);
   if (values.length === 0) return <>-</>;
   if (failed) return <Typography.Text type="danger">目录解析失败</Typography.Text>;
   if (!items.length) return <>读取中…</>;