openxiangda-cli 2.0.0-alpha.89 → 2.0.0-alpha.91

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

@@ -1,661 +0,0 @@
-import {
-  ApartmentOutlined,
-  DatabaseOutlined,
-  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,
-  searchDirectory,
-  searchResource,
-  type DirectoryKind,
-} from './platform-client';
-
-type Source = DirectoryKind | 'resource';
-type Option = {
-  value: string;
-  label: string;
-  selectable: boolean;
-  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: DirectoryEntry): Option {
-  return {
-    source,
-    value: item.id,
-    label: item.label,
-    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,
-  fieldCode?: string,
-  bindings?: Record<string, unknown>,
-) {
-  if (source === 'resource') {
-    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 {
-    items: page.items.map(item => directoryOption(source, item)),
-    nextCursor: page.nextCursor,
-  };
-}
-
-function optionIcon(option: Pick<Option, 'source' | 'label'>) {
-  if (option.source === 'user') {
-    return (
-      <Avatar className="oxa-selector-avatar" size={28}>
-        {option.label.slice(0, 1) || <UserOutlined />}
-      </Avatar>
-    );
-  }
-  return option.source === 'resource' ? (
-    <DatabaseOutlined className="oxa-selector-icon" />
-  ) : (
-    <ApartmentOutlined className="oxa-selector-icon" />
-  );
-}
-
-function optionDescription(option: Option) {
-  if (option.path?.length) return option.path.join(' / ');
-  return option.description || '';
-}
-
-export type AuthoritativeSelectorProps = {
-  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;
-  fieldCode?: string;
-  bindings?: Record<string, unknown>;
-};
-
-export function AuthoritativeSelector({
-  value,
-  onChange,
-  source,
-  operation,
-  multiple = false,
-  disabled = false,
-  id,
-  placeholder,
-  resourceCode,
-  fieldCode,
-  bindings,
-}: AuthoritativeSelectorProps) {
-  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(() => storedValues(value), [value]);
-
-  useEffect(() => {
-    setOptions(current => mergeOptions(current, storedReferenceOptions(source, value)));
-  }, [source, value]);
-
-  useEffect(() => {
-    if (disabled) return;
-    if (keyword.trim().length < 2) {
-      setCursor(null);
-      return;
-    }
-    const sequence = ++requestSequence.current;
-    const timer = window.setTimeout(() => {
-      setLoading(true);
-      setError('');
-      void searchSource(source, operation, keyword, undefined, resourceCode, fieldCode, bindings)
-        .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);
-        });
-    }, 300);
-    return () => window.clearTimeout(timer);
-  }, [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, fieldCode, bindings)
-      .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);
-      });
-  }, [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, fieldCode, bindings)
-      .then(page => {
-        setOptions(current => mergeOptions(current, page.items));
-        setCursor(page.nextCursor);
-      })
-      .catch(reason =>
-        setError(reason instanceof Error ? reason.message : String(reason))
-      )
-      .finally(() => setLoading(false));
-  };
-
-  return (
-    <Select
-      allowClear
-      className={`oxa-authoritative-selector oxa-selector-${source}`}
-      disabled={disabled}
-      id={id}
-      labelRender={({ label, value: selectedValue }) => {
-        const selected = options.find(
-          option => option.value === String(selectedValue)
-        );
-        return selected?.label || label || '读取中…';
-      }}
-      loading={loading}
-      maxTagCount="responsive"
-      mode={multiple ? 'multiple' : undefined}
-      notFoundContent={
-        loading ? (
-          <Spin size="small" />
-        ) : error ? (
-          <Typography.Text type="danger">{error}</Typography.Text>
-        ) : keyword.trim().length < 2 ? (
-          '暂无可选数据，可输入至少 2 个字符搜索'
-        ) : (
-          '无可选数据'
-        )
-      }
-      onChange={next => {
-        onChange?.(
-          selectedValue(
-            source,
-            (next || undefined) as string | string[] | undefined,
-            options,
-            multiple
-          )
-        );
-        if (!multiple) setOpen(false);
-      }}
-      onOpenChange={next => {
-        setOpen(next);
-        if (!next) setKeyword('');
-      }}
-      onPopupScroll={event => {
-        const element = event.currentTarget;
-        if (
-          element.scrollTop + element.clientHeight >=
-          element.scrollHeight - 16
-        )
-          loadNext();
-      }}
-      open={open}
-      optionRender={option => {
-        const item = options.find(
-          current => current.value === String(option.value)
-        );
-        if (!item) return option.label;
-        const description = optionDescription(item);
-        return (
-          <Space className="oxa-selector-option" size={10}>
-            {optionIcon(item)}
-            <span className="oxa-selector-option-copy">
-              <strong>{item.label}</strong>
-              {description && <small>{description}</small>}
-            </span>
-          </Space>
-        );
-      }}
-      options={options.map(option => ({
-        label: option.label,
-        value: option.value,
-        disabled: !option.selectable,
-      }))}
-      placeholder={placeholder}
-      prefix={
-        source === 'user' ? (
-          <UserOutlined />
-        ) : source === 'resource' ? (
-          <DatabaseOutlined />
-        ) : (
-          <ApartmentOutlined />
-        )
-      }
-      showSearch={{
-        filterOption: false,
-        onSearch: next => {
-          setKeyword(next);
-          setOpen(true);
-        },
-      }}
-      status={error ? 'error' : undefined}
-      tagRender={({ label, value: selectedValue, closable, onClose }) => {
-        const selected = options.find(
-          option => option.value === String(selectedValue)
-        );
-        return (
-          <Tag
-            className="oxa-selector-tag"
-            closable={closable}
-            onClose={onClose}
-            onMouseDown={event => {
-              event.preventDefault();
-              event.stopPropagation();
-            }}
-          >
-            {selected && optionIcon(selected)}
-            <span>{selected?.label || label || '读取中…'}</span>
-            {selected?.description && <small>{selected.description}</small>}
-          </Tag>
-        );
-      }}
-      value={multiple ? values : values[0]}
-    />
-  );
-}
-
-/**
- * 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,
-  fieldCode,
-  bindings,
-}: AuthoritativeSelectorProps) {
-  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 [draftValues, setDraftValues] = useState<string[]>([]);
-  const requestSequence = useRef(0);
-  const values = useMemo(() => storedValues(value), [value]);
-
-  useEffect(() => {
-    setOptions(current => mergeOptions(current, storedReferenceOptions(source, value)));
-  }, [source, value]);
-
-  useEffect(() => {
-    setDraftValues(values);
-  }, [open, 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, fieldCode, bindings)
-        .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);
-  }, [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, fieldCode, bindings)
-      .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?.(
-        selectedValue(source, nextValue, options, false) as
-          | StoredValue
-          | undefined
-      );
-      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?.(
-                    selectedValue(
-                      source,
-                      draftValues.length ? draftValues : undefined,
-                      options,
-                      true
-                    ) as StoredValue[] | undefined
-                  );
-                  setOpen(false);
-                }}
-                type="button"
-              >
-                确定（{draftValues.length}）
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-export function ResolvedValueText({
-  source,
-  value,
-}: {
-  source: Source;
-  value?: StoredValue | StoredValue[];
-}) {
-  const values = useMemo(() => storedValues(value), [value]);
-  const items = useMemo(
-    () => storedReferenceOptions(source, value),
-    [source, value]
-  );
-  if (values.length === 0) return <>-</>;
-  const ordered = values.map(value => items.find(item => item.value === value));
-  return (
-    <span className={`oxa-resolved-values oxa-resolved-${source}`}>
-      {ordered.map((item, index) =>
-        item ? (
-          <span className="oxa-resolved-item" key={item.value}>
-            {optionIcon(item)}
-            <span>
-              <strong>{item.label}</strong>
-              {optionDescription(item) && <small>{optionDescription(item)}</small>}
-            </span>
-          </span>
-        ) : (
-          <Typography.Text key={values[index]} type="secondary">
-            目录项不可用
-          </Typography.Text>
-        )
-      )}
-    </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} />;
-}