@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/components/agent-helper/field-value-input/picker-inputs.tsx

@@ -0,0 +1,1135 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type {
+  IFieldValueService,
+  IUserOption,
+  IDeptOption,
+  ILinkDataOption,
+  IAddressOption,
+  ILocationOption,
+} from '@baishuyun/types';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { FieldWrapper, type FieldValueInputProps } from './index';
+import { DropdownChevron, ClearIcon, CloseIcon, CheckIcon } from './icons';
+import { SearchIcon } from '../../bs-icons';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { chinaAddressData } from './china-address-data';
+
+const inputBaseCls =
+  'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border text-[14px] text-[#030303] placeholder:text-[#999999] focus:outline-none focus:border-[#0265FF] w-full disabled:bg-[#EFF0F6] disabled:cursor-not-allowed';
+
+interface WidgetItem {
+  label: string;
+  value: string | number;
+}
+
+function getItems(field: FieldValueInputProps['field']): WidgetItem[] {
+  return field.widget?.items?.filter((it) => typeof it.label === 'string') as WidgetItem[] ?? [];
+}
+
+function usePortalContainer(attr: string) {
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const setTriggerRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      if (!node) { setPortalContainer(null); return; }
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>(`[${attr}]`);
+        if (existing) { setPortalContainer(existing); return; }
+        const container = document.createElement('div');
+        container.setAttribute(attr, 'true');
+        rootNode.appendChild(container);
+        setPortalContainer(container);
+      } else {
+        setPortalContainer(null);
+      }
+    },
+    [attr],
+  );
+  return { portalContainer, setTriggerRef };
+}
+
+// ── ComboInput (combo / linkdata / linkquery) ───────────────────────
+
+export function ComboInput({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
+  const [open, setOpen] = useState(false);
+  const [asyncItems, setAsyncItems] = useState<ILinkDataOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-input-portal');
+
+  const staticItems = getItems(field);
+  const hasAsync = !!(field.widget?.type === 'linkdata' || field.widget?.type === 'linkquery');
+
+  const selectedLabel =
+    staticItems.find((it) => it.value === value)?.label ??
+    asyncItems.find((it) => it.value === value)?.label ??
+    '';
+
+  useEffect(() => {
+    if (hasAsync && open && service?.fetchLinkData) {
+      setLoading(true);
+      service.fetchLinkData(field.widget?.widgetName ?? '').then((data) => {
+        setAsyncItems(data);
+        setLoading(false);
+      });
+    }
+  }, [hasAsync, open, field.widget?.widgetName, service]);
+
+  const displayItems = hasAsync ? asyncItems : staticItems;
+
+  const handleSelect = useCallback(
+    (v: string | number) => {
+      onChange?.(v);
+      setOpen(false);
+    },
+    [onChange],
+  );
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between gap-[10px]',
+              inputBaseCls,
+              'text-left cursor-pointer',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            )}
+          >
+            <span className={cn('truncate', !selectedLabel && 'text-[#999999]')}>
+              {selectedLabel || (field.description ?? `请选择${field.label}`)}
+            </span>
+            <DropdownChevron open={open} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          {loading ? (
+            <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">加载中...</div>
+          ) : displayItems.length === 0 ? (
+            <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+          ) : (
+            <div className="flex flex-col gap-0 max-h-[240px] overflow-y-auto">
+              {displayItems.map((item) => (
+                <button
+                  key={item.value}
+                  type="button"
+                  onClick={() => handleSelect(item.value)}
+                  className={cn(
+                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    value === item.value
+                      ? 'bg-[#F0F6FF] text-[#0265FF]'
+                      : 'text-[#030303] hover:bg-[#EFF0F6]',
+                    transCls,
+                  )}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}
+
+// ── CheckboxGroupInput ──────────────────────────────────────────────
+
+export function CheckboxGroupInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  const items = getItems(field);
+  const selectedValues: string[] = Array.isArray(value) ? value.map(String) : [];
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      const next = selectedValues.includes(itemValue)
+        ? selectedValues.filter((v) => v !== itemValue)
+        : [...selectedValues, itemValue];
+      onChange?.(next);
+    },
+    [selectedValues, onChange],
+  );
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <div className="flex flex-col gap-[8px]">
+        {items.map((item) => {
+          const checked = selectedValues.includes(String(item.value));
+          return (
+            <label
+              key={item.value}
+              className={cn(
+                'flex items-center gap-[8px] cursor-pointer text-[14px] text-[#030303]',
+                disabled && 'cursor-not-allowed opacity-50',
+              )}
+            >
+              <div
+                className={cn(
+                  'w-[16px] h-[16px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                  transCls,
+                  checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                  !disabled && 'hover:border-[#0265FF]',
+                )}
+              >
+                {checked && <CheckIcon />}
+              </div>
+              <input
+                type="checkbox"
+                checked={checked}
+                onChange={() => toggle(String(item.value))}
+                disabled={disabled}
+                className="sr-only"
+              />
+              {item.label}
+            </label>
+          );
+        })}
+      </div>
+    </FieldWrapper>
+  );
+}
+
+// ── RadioGroupInput ─────────────────────────────────────────────────
+
+export function RadioGroupInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  const items = getItems(field);
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <div className="flex flex-col gap-[8px]">
+        {items.map((item) => {
+          const checked = String(value) === String(item.value);
+          return (
+            <label
+              key={item.value}
+              className={cn(
+                'flex items-center gap-[8px] cursor-pointer text-[14px] text-[#030303]',
+                disabled && 'cursor-not-allowed opacity-50',
+              )}
+            >
+              <div
+                className={cn(
+                  'w-[16px] h-[16px] rounded-full flex items-center justify-center shrink-0 border',
+                  transCls,
+                  checked ? 'border-[#0265FF]' : 'border-[#CCCCCC]',
+                  !disabled && 'hover:border-[#0265FF]',
+                )}
+              >
+                {checked && <div className="w-[8px] h-[8px] rounded-full bg-[#0265FF]" />}
+              </div>
+              <input
+                type="radio"
+                checked={checked}
+                onChange={() => onChange?.(item.value)}
+                disabled={disabled}
+                className="sr-only"
+              />
+              {item.label}
+            </label>
+          );
+        })}
+      </div>
+    </FieldWrapper>
+  );
+}
+
+// ── AsyncPicker (user / dept / usergroup / deptgroup) ──────────────
+
+type PickerKind = 'user' | 'dept' | 'usergroup' | 'deptgroup';
+
+interface AsyncPickerProps extends FieldValueInputProps {
+  kind: PickerKind;
+  multiple?: boolean;
+}
+
+function getSearchFn(kind: PickerKind, service?: IFieldValueService) {
+  switch (kind) {
+    case 'user': return service?.searchUsers;
+    case 'dept': return service?.searchDepts;
+    case 'usergroup': return service?.searchUserGroups;
+    case 'deptgroup': return service?.searchDeptGroups;
+  }
+}
+
+export function AsyncPicker({ field, value, onChange, disabled, service, kind, multiple = false, showLabel, showDescription }: AsyncPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [options, setOptions] = useState<Array<IUserOption | IDeptOption>>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState('');
+  const [nameMap, setNameMap] = useState<Record<string, string>>({});
+  const [isHovering, setIsHovering] = useState(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const searchFn = getSearchFn(kind, service);
+
+  const selectedIds: string[] = multiple
+    ? (Array.isArray(value) ? value.map(String) : [])
+    : [];
+  const selectedIdSet = new Set(selectedIds);
+
+  // Resolve labels for existing values
+  useEffect(() => {
+    if (multiple) {
+      if (!Array.isArray(value) || value.length === 0) {
+        setNameMap({});
+        return;
+      }
+      if (service?.searchUsers && kind === 'user') {
+        service.searchUsers('').then((users) => {
+          const map: Record<string, string> = {};
+          users.forEach((u) => {
+            if (value.includes(u.id)) map[u.id] = u.name;
+          });
+          setNameMap(map);
+        });
+      }
+    } else {
+      if (!value || value === '') {
+        setSelectedLabel('');
+        return;
+      }
+      if (service?.searchUsers && kind === 'user') {
+        service.searchUsers('').then((users) => {
+          const found = users.find((u) => u.id === value);
+          if (found) setSelectedLabel(found.name);
+        });
+      }
+    }
+  }, [value, service, kind, multiple]);
+
+  const doSearch = useCallback(
+    async (kw: string) => {
+      if (!searchFn) return;
+      setLoading(true);
+      try {
+        const results = await searchFn(kw);
+        setOptions(results);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchFn],
+  );
+
+  useEffect(() => {
+    if (open) doSearch(keyword);
+  }, [open, keyword, doSearch]);
+
+  const handleSelect = useCallback(
+    (opt: IUserOption | IDeptOption) => {
+      if (multiple) {
+        const next = selectedIdSet.has(opt.id)
+          ? selectedIds.filter((id) => id !== opt.id)
+          : [...selectedIds, opt.id];
+        onChange?.(next);
+        setNameMap((prev) => {
+          if (selectedIdSet.has(opt.id)) {
+            const nextMap = { ...prev };
+            delete nextMap[opt.id];
+            return nextMap;
+          }
+          return { ...prev, [opt.id]: opt.name };
+        });
+      } else {
+        onChange?.(opt.id);
+        setSelectedLabel(opt.name);
+        setOpen(false);
+        setKeyword('');
+      }
+    },
+    [onChange, multiple, selectedIds, selectedIdSet],
+  );
+
+  const handleClear = useCallback(() => {
+    if (multiple) {
+      onChange?.([]);
+      setNameMap({});
+    } else {
+      onChange?.('');
+      setSelectedLabel('');
+    }
+  }, [onChange, multiple]);
+
+  const handleRemoveMultiple = useCallback(
+    (id: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(selectedIds.filter((v) => v !== id));
+      setNameMap((prev) => {
+        const next = { ...prev };
+        delete next[id];
+        return next;
+      });
+    },
+    [selectedIds, onChange],
+  );
+
+  const handleClearAllMultiple = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+      setNameMap({});
+    },
+    [onChange],
+  );
+
+  const hasSelectionMulti = multiple && selectedIds.length > 0;
+  const showClearMulti = hasSelectionMulti && isHovering;
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border rounded-[4px]',
+              'py-[7px]',
+              (multiple ? hasSelectionMulti : !!selectedLabel) ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+              transCls,
+            )}
+          >
+            {multiple ? (
+              hasSelectionMulti ? (
+                <>
+                  <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                    {selectedIds.map((id) => (
+                      <span
+                        key={id}
+                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                      >
+                        <span className="text-[14px] text-[#030303] leading-[normal]">
+                          {nameMap[id] || id}
+                        </span>
+                        <span
+                          className="cursor-pointer flex items-center shrink-0"
+                          onClick={(e) => handleRemoveMultiple(id, e)}
+                        >
+                          <CloseIcon />
+                        </span>
+                      </span>
+                    ))}
+                  </div>
+                  {showClearMulti ? (
+                    <span className="cursor-pointer flex items-center shrink-0" onClick={handleClearAllMultiple}>
+                      <ClearAllIcon />
+                    </span>
+                  ) : (
+                    <DropdownChevron open={open} />
+                  )}
+                </>
+              ) : (
+                <>
+                  <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                    {field.description ?? `请选择${field.label}`}
+                  </span>
+                  <DropdownChevron open={open} />
+                </>
+              )
+            ) : (
+              <>
+                <span className={cn('truncate', !selectedLabel && 'text-[#999999]')}>
+                  {selectedLabel || (field.description ?? `请选择${field.label}`)}
+                </span>
+                <div className="flex items-center gap-[4px] shrink-0">
+                  {!!selectedLabel && (
+                    <span
+                      role="button"
+                      tabIndex={-1}
+                      onClick={(e) => { e.stopPropagation(); handleClear(); }}
+                      className="flex items-center justify-center w-[18px] h-[18px] hover:bg-[#EFF0F6] rounded-full"
+                    >
+                      <ClearIcon />
+                    </span>
+                  )}
+                  <DropdownChevron open={open} />
+                </div>
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder={`搜索${field.label}`}
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-0 max-h-[200px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">搜索中...</div>
+            ) : options.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              options.map((opt) => {
+                const isSelected = multiple ? selectedIdSet.has(opt.id) : value === opt.id;
+                return (
+                <button
+                  key={opt.id}
+                  type="button"
+                  onClick={() => handleSelect(opt)}
+                  className={cn(
+                    'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                    isSelected
+                      ? 'bg-[#F0F6FF] text-[#0265FF]'
+                      : 'text-[#030303] hover:bg-[#EFF0F6]',
+                    transCls,
+                  )}
+                >
+                  {multiple && (
+                    <div
+                      className={cn(
+                        'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                        isSelected ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                      )}
+                    >
+                      {isSelected && <CheckIcon />}
+                    </div>
+                  )}
+                  {'avatar' in opt && opt.avatar && (
+                    <img src={opt.avatar} alt="" className="w-[20px] h-[20px] rounded-full" />
+                  )}
+                  <span className="text-[14px]">{opt.name}</span>
+                </button>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}
+
+// ── TextMultiSelect (in/nin operators for text fields) ───────────────
+
+export function TextMultiSelect({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [options, setOptions] = useState<ILinkDataOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [labelMap, setLabelMap] = useState<Record<string, string>>({});
+  const [isHovering, setIsHovering] = useState(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const selectedValues: string[] = Array.isArray(value) ? value.map(String) : [];
+  const selectedSet = new Set(selectedValues);
+
+  useEffect(() => {
+    if (open && service?.searchDistinctValues) {
+      setLoading(true);
+      service.searchDistinctValues(field, keyword).then((data) => {
+        setOptions(data);
+        const map: Record<string, string> = {};
+        data.forEach((opt) => { map[opt.value] = opt.label; });
+        setLabelMap(map);
+        setLoading(false);
+      });
+    }
+  }, [open, keyword, field, service]);
+
+  const handleToggle = useCallback(
+    (opt: ILinkDataOption) => {
+      const next = selectedSet.has(opt.value)
+        ? selectedValues.filter((v) => v !== opt.value)
+        : [...selectedValues, opt.value];
+      onChange?.(next);
+    },
+    [selectedValues, selectedSet, onChange],
+  );
+
+  const handleClearAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange],
+  );
+
+  const handleRemove = useCallback(
+    (val: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(selectedValues.filter((v) => v !== val));
+    },
+    [selectedValues, onChange],
+  );
+
+  const hasSelection = selectedValues.length > 0;
+  const showClear = hasSelection && isHovering;
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border rounded-[4px]',
+              'py-[7px]',
+              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+              transCls,
+            )}
+          >
+            {hasSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {selectedValues.map((val) => (
+                    <span
+                      key={val}
+                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                    >
+                      <span className="text-[14px] text-[#030303] leading-[normal]">
+                        {labelMap[val] || val}
+                      </span>
+                      <span
+                        className="cursor-pointer flex items-center shrink-0"
+                        onClick={(e) => handleRemove(val, e)}
+                      >
+                        <CloseIcon />
+                      </span>
+                    </span>
+                  ))}
+                </div>
+                {showClear ? (
+                  <span className="cursor-pointer flex items-center shrink-0" onClick={handleClearAll}>
+                    <ClearAllIcon />
+                  </span>
+                ) : (
+                  <DropdownChevron open={open} />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {field.description ?? `请输入${field.label}`}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder="输入关键字搜索"
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-0 max-h-[200px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">搜索中...</div>
+            ) : options.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              options.map((opt) => {
+                const checked = selectedSet.has(opt.value);
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => handleToggle(opt)}
+                    className={cn(
+                      'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                      checked
+                        ? 'bg-[#F0F6FF] text-[#0265FF]'
+                        : 'text-[#030303] hover:bg-[#EFF0F6]',
+                      transCls,
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                        checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                      )}
+                    >
+                      {checked && <CheckIcon />}
+                    </div>
+                    <span className="text-[14px]">{opt.label}</span>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}
+
+// ── CascadingAddressInput (province → city → district) ──────────────
+
+const provinceList = Object.keys(chinaAddressData);
+
+interface AddressValue {
+  province?: string;
+  city?: string;
+  district?: string;
+}
+
+export function CascadingAddressInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  const [open, setOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const provinceRef = useRef<HTMLDivElement>(null);
+  const cityRef = useRef<HTMLDivElement>(null);
+  const districtRef = useRef<HTMLDivElement>(null);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const addrValue: AddressValue =
+    value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as AddressValue)
+      : {};
+
+  const selectedProvince = addrValue.province || '';
+  const selectedCity = addrValue.city || '';
+  const selectedDistrict = addrValue.district || '';
+
+  const cityList = selectedProvince && chinaAddressData[selectedProvince]
+    ? Object.keys(chinaAddressData[selectedProvince])
+    : [];
+  const districtList = selectedProvince && selectedCity && chinaAddressData[selectedProvince]?.[selectedCity]
+    ? chinaAddressData[selectedProvince][selectedCity]
+    : [];
+
+  const displayText =
+    selectedProvince
+      ? `${selectedProvince}${selectedCity ? ` ${selectedCity}` : ''}${selectedDistrict ? ` ${selectedDistrict}` : ''}`
+      : '';
+
+  const handleSelectProvince = useCallback(
+    (province: string) => {
+      if (province === selectedProvince) return;
+      onChange?.({ province, city: undefined, district: undefined });
+      setTimeout(() => {
+        const el = cityRef.current;
+        if (el) el.scrollTop = 0;
+      }, 0);
+    },
+    [onChange, selectedProvince],
+  );
+
+  const handleSelectCity = useCallback(
+    (city: string) => {
+      if (city === selectedCity) return;
+      onChange?.({ province: selectedProvince, city, district: undefined });
+      setTimeout(() => {
+        const el = districtRef.current;
+        if (el) el.scrollTop = 0;
+      }, 0);
+    },
+    [onChange, selectedProvince, selectedCity],
+  );
+
+  const handleSelectDistrict = useCallback(
+    (district: string) => {
+      onChange?.({ province: selectedProvince, city: selectedCity, district });
+      setOpen(false);
+    },
+    [onChange, selectedProvince, selectedCity],
+  );
+
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.({});
+    },
+    [onChange],
+  );
+
+  const scrollToSelected = useCallback(() => {
+    if (provinceRef.current) {
+      const idx = provinceList.indexOf(selectedProvince);
+      if (idx >= 0) provinceRef.current.scrollTop = idx * 32;
+    }
+    if (cityRef.current) {
+      const idx = cityList.indexOf(selectedCity);
+      if (idx >= 0) cityRef.current.scrollTop = idx * 32;
+    }
+    if (districtRef.current) {
+      const idx = districtList.indexOf(selectedDistrict);
+      if (idx >= 0) districtRef.current.scrollTop = idx * 32;
+    }
+  }, [selectedProvince, selectedCity, selectedDistrict, cityList, districtList]);
+
+  useEffect(() => {
+    if (open) scrollToSelected();
+  }, [open, scrollToSelected]);
+
+  const hasValue = !!displayText;
+  const showClear = hasValue && isHovering;
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between gap-[10px]',
+              inputBaseCls,
+              'text-left cursor-pointer',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            )}
+          >
+            <span className={cn('truncate', !displayText && 'text-[#999999]')}>
+              {displayText || (field.description ?? `请选择${field.label}`)}
+            </span>
+            {showClear ? (
+              <span className="cursor-pointer flex items-center shrink-0" onClick={handleClear}>
+                <ClearAllIcon />
+              </span>
+            ) : (
+              <DropdownChevron open={open} />
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-0"
+          style={{ width: '520px' }}
+        >
+          <div className="flex h-[280px]">
+            {/* Province Column */}
+            <div className="flex-1 border-r border-[#F0F0F0] flex flex-col min-w-0">
+              <div className="h-[34px] px-[12px] flex items-center text-[12px] text-[#999999] bg-[#FAFAFA] shrink-0 border-b border-[#F0F0F0]">
+                省份
+              </div>
+              <div ref={provinceRef} className="flex-1 overflow-y-auto">
+                {provinceList.map((province) => (
+                  <button
+                    key={province}
+                    type="button"
+                    onClick={() => handleSelectProvince(province)}
+                    className={cn(
+                      'w-full h-[32px] px-[12px] flex items-center justify-between text-left text-[14px]',
+                      transCls,
+                      province === selectedProvince
+                        ? 'bg-[#F0F6FF] text-[#0265FF]'
+                        : 'text-[#030303] hover:bg-[#EFF0F6]',
+                    )}
+                  >
+                    <span className="truncate">{province}</span>
+                    {chinaAddressData[province] && (
+                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0 ml-[4px]">
+                        <path d="M4.5 2.5L8 6L4.5 9.5" stroke={province === selectedProvince ? '#0265FF' : '#999999'} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {/* City Column */}
+            <div className="flex-1 border-r border-[#F0F0F0] flex flex-col min-w-0">
+              <div className="h-[34px] px-[12px] flex items-center text-[12px] text-[#999999] bg-[#FAFAFA] shrink-0 border-b border-[#F0F0F0]">
+                城市
+              </div>
+              <div ref={cityRef} className="flex-1 overflow-y-auto">
+                {cityList.length === 0 ? (
+                  <div className="px-[12px] py-[16px] text-[14px] text-[#999999] text-center">请选择省份</div>
+                ) : (
+                  cityList.map((city) => (
+                    <button
+                      key={city}
+                      type="button"
+                      onClick={() => handleSelectCity(city)}
+                      className={cn(
+                        'w-full h-[32px] px-[12px] flex items-center justify-between text-left text-[14px]',
+                        transCls,
+                        city === selectedCity
+                          ? 'bg-[#F0F6FF] text-[#0265FF]'
+                          : 'text-[#030303] hover:bg-[#EFF0F6]',
+                      )}
+                    >
+                      <span className="truncate">{city}</span>
+                      {selectedProvince && chinaAddressData[selectedProvince]?.[city] && (
+                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0 ml-[4px]">
+                          <path d="M4.5 2.5L8 6L4.5 9.5" stroke={city === selectedCity ? '#0265FF' : '#999999'} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      )}
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+            {/* District Column */}
+            <div className="flex-1 flex flex-col min-w-0">
+              <div className="h-[34px] px-[12px] flex items-center text-[12px] text-[#999999] bg-[#FAFAFA] shrink-0 border-b border-[#F0F0F0]">
+                区/县
+              </div>
+              <div ref={districtRef} className="flex-1 overflow-y-auto">
+                {districtList.length === 0 ? (
+                  <div className="px-[12px] py-[16px] text-[14px] text-[#999999] text-center">请选择城市</div>
+                ) : (
+                  districtList.map((district) => (
+                    <button
+                      key={district}
+                      type="button"
+                      onClick={() => handleSelectDistrict(district)}
+                      className={cn(
+                        'w-full h-[32px] px-[12px] flex items-center text-left text-[14px]',
+                        transCls,
+                        district === selectedDistrict
+                          ? 'bg-[#F0F6FF] text-[#0265FF]'
+                          : 'text-[#030303] hover:bg-[#EFF0F6]',
+                      )}
+                    >
+                      <span className="truncate">{district}</span>
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}
+
+// ── AddressInput ────────────────────────────────────────────────────
+
+export function AddressInput({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [options, setOptions] = useState<IAddressOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const selectedLabel =
+    value && typeof value === 'object' && 'province' in (value as Record<string, unknown>)
+      ? `${(value as IAddressOption).province}${(value as IAddressOption).city}${(value as IAddressOption).district}`
+      : typeof value === 'string'
+        ? value
+        : '';
+
+  useEffect(() => {
+    if (open && service?.searchAddress) {
+      setLoading(true);
+      service.searchAddress(keyword).then((data) => {
+        setOptions(data);
+        setLoading(false);
+      });
+    }
+  }, [open, keyword, service]);
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between gap-[10px]',
+              inputBaseCls,
+              'text-left cursor-pointer',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            )}
+          >
+            <span className={cn('truncate', !selectedLabel && 'text-[#999999]')}>
+              {selectedLabel || (field.description ?? `请选择${field.label}`)}
+            </span>
+            <DropdownChevron open={open} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder={`搜索${field.label}`}
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-0 max-h-[200px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">搜索中...</div>
+            ) : options.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              options.map((opt, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => {
+                    onChange?.(opt);
+                    setOpen(false);
+                    setKeyword('');
+                  }}
+                  className={cn(
+                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    'text-[#030303] hover:bg-[#EFF0F6]',
+                    transCls,
+                  )}
+                >
+                  {opt.province}{opt.city}{opt.district}
+                </button>
+              ))
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}
+
+// ── LocationInput ───────────────────────────────────────────────────
+
+export function LocationInput({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [options, setOptions] = useState<ILocationOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const selectedLabel =
+    value && typeof value === 'object' && 'detail' in (value as Record<string, unknown>)
+      ? (value as ILocationOption).detail
+      : typeof value === 'string'
+        ? value
+        : '';
+
+  useEffect(() => {
+    if (open && service?.searchLocation) {
+      setLoading(true);
+      service.searchLocation(keyword).then((data) => {
+        setOptions(data);
+        setLoading(false);
+      });
+    }
+  }, [open, keyword, service]);
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between gap-[10px]',
+              inputBaseCls,
+              'text-left cursor-pointer',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0] hover:border-[#0265FF]',
+            )}
+          >
+            <span className={cn('truncate', !selectedLabel && 'text-[#999999]')}>
+              {selectedLabel || (field.description ?? `请选择${field.label}`)}
+            </span>
+            <DropdownChevron open={open} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder={`搜索${field.label}`}
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-0 max-h-[200px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">搜索中...</div>
+            ) : options.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              options.map((opt, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => {
+                    onChange?.(opt);
+                    setOpen(false);
+                    setKeyword('');
+                  }}
+                  className={cn(
+                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    'text-[#030303] hover:bg-[#EFF0F6]',
+                    transCls,
+                  )}
+                >
+                  {opt.province}{opt.city}{opt.district} {opt.detail}
+                </button>
+              ))
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}