@baishuyun/ai-design 2.1.0-alpha.0 → 2.1.0-alpha.2

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

@@ -1,1141 +1,1144 @@
-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' || typeof it.text === 'string')
-    .map((it) => ({
-      label: it.label ?? it.text ?? '',
-      value: it.value,
-    })) 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('', { field: fieldName }).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('', { field: fieldName }).then((users) => {
-          const found = users.find((u) => u.id === value);
-          if (found) setSelectedLabel(found.name);
-        });
-      }
-    }
-  }, [value, service, kind, multiple]);
-
-  const fieldName = field.widget?.widgetName || "";
-  const doSearch = useCallback(
-    async (kw: string) => {
-      if (!searchFn) return;
-      setLoading(true);
-      try {
-        const results = await searchFn(kw, { field: fieldName });
-        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>
-  );
-}
+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';
+
+type PickerItem = {
+  label: string;
+  value: string | number;
+};
+
+function getItems(field: FieldValueInputProps['field']): PickerItem[] {
+  return (field.widget?.items ?? [])
+    .map((it) => {
+      if ('text' in it) {
+        return { label: it.text, value: it.value };
+      }
+
+      return null;
+    })
+    .filter((item): item is PickerItem => item !== null);
+}
+
+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('', { field: fieldName }).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('', { field: fieldName }).then((users) => {
+          const found = users.find((u) => u.id === value);
+          if (found) setSelectedLabel(found.name);
+        });
+      }
+    }
+  }, [value, service, kind, multiple]);
+
+  const fieldName = field.widget?.widgetName || "";
+  const doSearch = useCallback(
+    async (kw: string) => {
+      if (!searchFn) return;
+      setLoading(true);
+      try {
+        const results = await searchFn(kw, { field: fieldName });
+        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>
+  );
+}