@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/components/icons/empty-table-icon.tsx

@@ -0,0 +1,104 @@
+export const EmptyTableIcon = () => (
+  <svg width="226" height="140" viewBox="0 0 226 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_27318_12913" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="2" y="104" width="224" height="26">
+<rect x="2" y="104" width="224" height="26" fill="white"/>
+</mask>
+<g mask="url(#mask0_27318_12913)">
+<ellipse cx="114" cy="125.388" rx="112" ry="21.3877" fill="url(#paint0_linear_27318_12913)"/>
+</g>
+<ellipse cx="180.5" cy="88" rx="9.5" ry="13" fill="url(#paint1_linear_27318_12913)"/>
+<path d="M180.174 115.619V76.75L181.313 115.619H180.174Z" fill="#D5DDF4"/>
+<path d="M180.335 98.452L174.316 92.9456L180.335 96.6705V98.452Z" fill="#D5DDF4"/>
+<path d="M183.263 87.1152L180.335 90.3543V91.488L183.263 87.1152Z" fill="#D5DDF4"/>
+<path d="M180.361 114.658L151.396 115.619H180.361V114.658Z" fill="url(#paint2_linear_27318_12913)"/>
+<ellipse cx="57.0939" cy="96.3957" rx="5.5" ry="7" transform="rotate(-4.32208 57.0939 96.3957)" fill="url(#paint3_linear_27318_12913)"/>
+<path d="M57.9574 110.568L56.5527 91.9824L56.609 110.429L57.9574 110.568Z" fill="#D5DDF4"/>
+<path d="M57.2532 102.29L59.9123 99.4604L57.1893 101.444L57.2532 102.29Z" fill="#D5DDF4"/>
+<path d="M55.4569 97.0143L56.9627 98.4465L57.0034 98.9846L55.4569 97.0143Z" fill="#D5DDF4"/>
+<path d="M57.7578 109.621L25.897 112.752L57.8303 110.58L57.7578 109.621Z" fill="url(#paint4_linear_27318_12913)"/>
+<g filter="url(#filter0_f_27318_12913)">
+<ellipse cx="114" cy="105" rx="32" ry="3" fill="#D9E3FF"/>
+</g>
+<path d="M100.076 41.8107C99.8672 41.319 99.9595 40.8175 100.317 40.4996C101.071 39.8294 102.543 40.2799 102.984 41.3161L108.731 54.7977C109.054 55.5548 108.657 56.2807 107.846 56.418C107.036 56.5551 106.119 56.053 105.798 55.2965L100.076 41.8107Z" fill="#90ACF8"/>
+<path d="M100.076 41.8107C99.8672 41.319 99.9595 40.8175 100.317 40.4996C101.071 39.8294 102.543 40.2799 102.984 41.3161L108.731 54.7977C109.054 55.5548 108.657 56.2807 107.846 56.418C107.036 56.5551 106.119 56.053 105.798 55.2965L100.076 41.8107Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M128.076 41.8107C127.867 41.319 127.96 40.8175 128.317 40.4996C129.071 39.8294 130.543 40.2799 130.984 41.3161L136.731 54.7977C137.054 55.5548 136.657 56.2807 135.846 56.418C135.036 56.5551 134.119 56.053 133.798 55.2965L128.076 41.8107Z" fill="#90ACF8"/>
+<path d="M128.076 41.8107C127.867 41.319 127.96 40.8175 128.317 40.4996C129.071 39.8294 130.543 40.2799 130.984 41.3161L136.731 54.7977C137.054 55.5548 136.657 56.2807 135.846 56.418C135.036 56.5551 134.119 56.053 133.798 55.2965L128.076 41.8107Z" fill="#90ACF8" fillOpacity="0.2"/>
+<rect x="83" y="49.0039" width="62" height="56" rx="6" fill="#A1BCFF"/>
+<path d="M83 55.0039C83 51.6902 85.6863 49.0039 89 49.0039H139C142.314 49.0039 145 51.6902 145 55.0039V99.0039C145 102.318 142.314 105.004 139 105.004H89C85.6863 105.004 83 102.318 83 99.0039V55.0039Z" fill="#6590F8" fillOpacity="0.2"/>
+<rect x="85" y="51.0039" width="58" height="52" rx="6" fill="white"/>
+<mask id="mask1_27318_12913" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="85" y="51" width="58" height="53">
+<rect x="85" y="51.0039" width="58" height="52" rx="6" fill="white"/>
+</mask>
+<g mask="url(#mask1_27318_12913)">
+<g filter="url(#filter4_f_27318_12913)">
+<circle cx="94.5" cy="50.5039" r="22.5" fill="#B9FAFF"/>
+</g>
+</g>
+<path d="M99.2387 41.3748C99.5599 40.6177 100.478 40.1151 101.289 40.2524C102.1 40.3896 102.496 41.1146 102.175 41.8717L96.5177 55.2053C96.1965 55.9624 95.2787 56.4649 94.4678 56.3277C93.6569 56.1905 93.2599 55.4655 93.5811 54.7084L99.2387 41.3748Z" fill="#90ACF8"/>
+<path d="M99.2387 41.3748C99.5599 40.6177 100.478 40.1151 101.289 40.2524C102.1 40.3896 102.496 41.1146 102.175 41.8717L96.5177 55.2053C96.1965 55.9624 95.2787 56.4649 94.4678 56.3277C93.6569 56.1905 93.2599 55.4655 93.5811 54.7084L99.2387 41.3748Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M127.239 41.3748C127.56 40.6177 128.478 40.1151 129.289 40.2524C130.1 40.3896 130.496 41.1146 130.175 41.8717L124.518 55.2053C124.196 55.9624 123.279 56.4649 122.468 56.3277C121.657 56.1905 121.26 55.4655 121.581 54.7084L127.239 41.3748Z" fill="#90ACF8"/>
+<path d="M127.239 41.3748C127.56 40.6177 128.478 40.1151 129.289 40.2524C130.1 40.3896 130.496 41.1146 130.175 41.8717L124.518 55.2053C124.196 55.9624 123.279 56.4649 122.468 56.3277C121.657 56.1905 121.26 55.4655 121.581 54.7084L127.239 41.3748Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M93 72C95.5455 72 122.061 72 135 72" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 78C95.5455 78 122.061 78 135 78" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 84C95.5455 84 122.061 84 135 84" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 90C95.5455 90 122.061 90 135 90" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 65C93 63.8954 93.8954 63 95 63H133C134.105 63 135 63.8954 135 65V67H93V65Z" fill="#90ACF8"/>
+<path d="M81.1403 34.5888C79.9314 33.9913 77.705 34.2123 77.705 34.2123C77.705 34.2123 78.8677 36.5458 80.2271 37.3255C81.4631 38.0345 83.8153 38.0059 83.8153 38.0059C83.8153 38.0059 82.6624 35.3412 81.1403 34.5888Z" fill="url(#paint5_linear_27318_12913)"/>
+<path d="M87.2808 35.0187C87.3779 34.2182 86.8061 33.009 86.8061 33.009C86.8061 33.009 85.7135 34.1317 85.5431 35.0534C85.3882 35.8916 85.876 37.2102 85.876 37.2102C85.876 37.2102 87.1586 36.0266 87.2808 35.0187Z" fill="url(#paint6_linear_27318_12913)"/>
+<path d="M153.928 47.3664C156.181 46.1202 158.244 42.3936 158.244 42.3936C158.244 42.3936 153.297 41.6869 150.592 42.9715C148.133 44.1394 145.63 47.8547 145.63 47.8547C145.63 47.8547 151.09 48.9356 153.928 47.3664Z" fill="url(#paint7_linear_27318_12913)"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M153.637 76.3923L155.699 72.8501L157.686 76.4173L153.637 76.3923ZM153.367 88.8968L153.492 76.9325L157.821 76.9591L157.696 88.9234L153.367 88.8968ZM157.667 91.6253C157.661 92.2343 157.202 92.7251 156.642 92.7217L154.342 92.7084C153.782 92.7049 153.333 92.2083 153.339 91.5994L153.362 89.4388L157.691 89.4654L157.667 91.6253Z" fill="url(#paint8_linear_27318_12913)"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M153.637 76.3923L155.699 72.8501L157.686 76.4173L153.637 76.3923ZM153.367 88.8968L153.492 76.9325L157.821 76.9591L157.696 88.9234L153.367 88.8968ZM157.667 91.6253C157.661 92.2343 157.202 92.7251 156.642 92.7217L154.342 92.7084C153.782 92.7049 153.333 92.2083 153.339 91.5994L153.362 89.4388L157.691 89.4654L157.667 91.6253Z" fill="url(#paint9_linear_27318_12913)" fillOpacity="0.2"/>
+<defs>
+<filter id="filter0_f_27318_12913" x="78" y="98" width="72" height="14" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+<feFlood floodOpacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_27318_12913"/>
+</filter>
+<filter id="filter4_f_27318_12913" x="8" y="-35.9961" width="173" height="173" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+<feFlood floodOpacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_27318_12913"/>
+</filter>
+<linearGradient id="paint0_linear_27318_12913" x1="114" y1="104" x2="114" y2="125.628" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E6EEFF"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_27318_12913" x1="180.5" y1="75" x2="180.5" y2="101" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E7EFFF"/>
+<stop offset="1" stopColor="#F3F7FD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_27318_12913" x1="180.361" y1="115.139" x2="151.396" y2="115.139" gradientUnits="userSpaceOnUse">
+<stop stopColor="#D5DDF4"/>
+<stop offset="1" stopColor="#EDF2FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_27318_12913" x1="57.0939" y1="89.3957" x2="57.0939" y2="103.396" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E7EFFF"/>
+<stop offset="1" stopColor="#F3F7FD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_27318_12913" x1="57.5801" y1="109.876" x2="25.8608" y2="112.273" gradientUnits="userSpaceOnUse">
+<stop stopColor="#D5DDF4"/>
+<stop offset="1" stopColor="#EDF2FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_27318_12913" x1="80.3215" y1="37.4237" x2="81.2554" y2="34.6" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_27318_12913" x1="85.5063" y1="35.1263" x2="87.2977" y2="35.0905" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_27318_12913" x1="150.335" y1="43.013" x2="153.754" y2="47.5582" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_27318_12913" x1="151.15" y1="98.5161" x2="150.2" y2="78.1749" gradientUnits="userSpaceOnUse">
+<stop stopColor="#6893F9"/>
+<stop offset="1" stopColor="#92B3FD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_27318_12913" x1="151.15" y1="98.5161" x2="150.2" y2="78.1749" gradientUnits="userSpaceOnUse">
+<stop stopColor="#6893F9"/>
+<stop offset="1" stopColor="#92B3FD"/>
+</linearGradient>
+</defs>
+</svg>
+);

package/src/components/icons/grids-icon.tsx

@@ -0,0 +1,5 @@
+export const GridsIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M6.5 8.5C7.05228 8.5 7.5 8.94772 7.5 9.5V14C7.5 14.5177 7.10667 14.9438 6.60254 14.9951L6.5 15H2L1.89746 14.9951C1.42703 14.9472 1.05278 14.573 1.00488 14.1025L1 14V9.5C1 8.94772 1.44772 8.5 2 8.5H6.5ZM14 8.5C14.5523 8.5 15 8.94772 15 9.5V14C15 14.5177 14.6067 14.9438 14.1025 14.9951L14 15H9.5L9.39746 14.9951C8.92703 14.9472 8.55278 14.573 8.50488 14.1025L8.5 14V9.5C8.5 8.94772 8.94772 8.5 9.5 8.5H14ZM9.5 14H14V9.5H9.5V14ZM2 14H6.5V9.5H2V14ZM6.5 1C7.05228 1 7.5 1.44772 7.5 2V6.5C7.5 7.01768 7.10667 7.44379 6.60254 7.49512L6.5 7.5H2L1.89746 7.49512C1.42703 7.44722 1.05278 7.07297 1.00488 6.60254L1 6.5V2C1 1.44772 1.44772 1 2 1H6.5ZM14 1C14.5523 1 15 1.44772 15 2V6.5C15 7.01768 14.6067 7.44379 14.1025 7.49512L14 7.5H9.5L9.39746 7.49512C8.92703 7.44722 8.55278 7.07297 8.50488 6.60254L8.5 6.5V2C8.5 1.44772 8.94772 1 9.5 1H14ZM2 6.5H6.5V2H2V6.5ZM9.5 6.5H14V2H9.5V6.5Z" fill="#666666"/>
+  </svg>
+);

package/src/components/office-container.tsx

@@ -22,6 +22,9 @@ export interface IOfficeContainerProps {
     rightColContentElement?: React.ReactNode;
 
     fullscreenPart?: FullScreenPart;
+
+    children?: React.ReactNode;
+
 }
 
 
@@ -32,6 +35,7 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
     rightColWidthRange,
     leftColCls,
     rightColCls,
+    children,
     leftColHeaderElement,
     leftColContentElement,
     rightColHeaderElement,
@@ -109,10 +113,17 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
 
     return (
         <div className="relative h-full w-full flex overflow-hidden bg-white">
+            {/* fullscreen overlay */}
+            {children && (
+                <div>
+                    {children}
+                </div>
+            )}
+
             {/* left col */}
             <div
                 ref={leftColRef}
-                className={classNames("h-full flex flex-col relative", leftColCls, leftFlexCls, {
+                className={classNames("h-full flex flex-col relative office-left-col", leftColCls, leftFlexCls, {
                     "pointer-events-none": hideLeftCol || isRightFullscreen,
                     "opacity-0": hideLeftCol || isRightFullscreen,
                     "overflow-hidden": /* isRightFullscreen */ true,
@@ -143,7 +154,7 @@ export const OfficeContainer: FC<IOfficeContainerProps> = ({
             {/* right col */}
             <div
                 ref={rightColRef}
-                className={classNames("h-full flex flex-col min-w-0", rightColCls, rightFlexCls, {
+                className={classNames("h-full flex flex-col min-w-0 office-right-col", rightColCls, rightFlexCls, {
                     "pointer-events-none": isLeftFullscreen,
                     "opacity-0": isLeftFullscreen,
                     "overflow-hidden": isLeftFullscreen,

package/src/components/output-config-editor.tsx

@@ -0,0 +1,409 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { OutputParam, FieldType } from '@baishuyun/types';
+import { cn } from '../lib/utils';
+import { transCls, FieldTypeNameMap } from '../const/ui';
+import { TrashIcon, SearchIcon } from '../components/bs-icons';
+import { FieldIcon } from '../components/field-icon';
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3.5v9M3.5 8h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+);
+
+const CaretIcon = ({ className }: { className?: string }) => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const ExpandArrowIcon = ({ className }: { className?: string }) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export interface OutputFieldOption {
+  fieldName: string;
+  fieldDesc: string;
+  type: FieldType;
+  children?: OutputFieldOption[];
+}
+
+type DropdownTarget = { index: number; field: 'name' | 'type' } | null;
+
+export interface OutputConfigEditorProps {
+  value: OutputParam[];
+  onChange?: (value: OutputParam[]) => void;
+  availableFields?: OutputFieldOption[];
+  className?: string;
+}
+
+export function OutputConfigEditor({ value, onChange, availableFields, className }: OutputConfigEditorProps) {
+  const [dropdownTarget, setDropdownTarget] = useState<DropdownTarget>(null);
+  const [searchText, setSearchText] = useState('');
+  const [collapsedParents, setCollapsedParents] = useState<Set<string>>(new Set());
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!dropdownTarget) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setDropdownTarget(null);
+        setSearchText('');
+        setCollapsedParents(new Set());
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [dropdownTarget]);
+
+  useEffect(() => {
+    if (dropdownTarget && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 0);
+    }
+  }, [dropdownTarget]);
+
+  const handleAdd = useCallback(() => {
+    onChange?.([...value, { name: '', type: '', description: '' }]);
+  }, [value, onChange]);
+
+  const handleDelete = useCallback((index: number) => {
+    onChange?.(value.filter((_, i) => i !== index));
+  }, [value, onChange]);
+
+  const handleOpenDropdown = useCallback((index: number, field: 'name' | 'type') => {
+    setDropdownTarget({ index, field });
+    setSearchText('');
+    setCollapsedParents(new Set());
+  }, []);
+
+  const handleSelectField = useCallback((index: number, field: OutputFieldOption) => {
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], name: field.fieldDesc };
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange]);
+
+  const handleSelectType = useCallback((index: number, type: FieldType | '') => {
+    const newValue = [...value];
+    newValue[index] = {
+      ...newValue[index],
+      type,
+      subformParams: type === 'subform' ? (newValue[index].subformParams || []) : undefined,
+    };
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange]);
+
+  const toggleParent = useCallback((fieldName: string) => {
+    setCollapsedParents(prev => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) {
+        next.delete(fieldName);
+      } else {
+        next.add(fieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  const matchSearch = (text: string) =>
+    !searchText || text?.toLowerCase().includes(searchText.toLowerCase());
+
+  const filteredTypes = Object.entries(FieldTypeNameMap).filter(([, name]) =>
+    matchSearch(name),
+  );
+
+  const filterFields = (fields: OutputFieldOption[]): OutputFieldOption[] =>
+    fields.reduce<OutputFieldOption[]>((acc, f) => {
+      const selfMatches = matchSearch(f.fieldDesc) || matchSearch(f.fieldName);
+      const filteredChildren = f.children ? filterFields(f.children) : [];
+      if (selfMatches || filteredChildren.length > 0) {
+        acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+      }
+      return acc;
+    }, []);
+
+  const filteredFields = availableFields ? filterFields(availableFields) : [];
+
+  const fieldRowCls = cn(
+    'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px]',
+    'flex items-center min-w-0',
+    'text-[14px] text-[#030303] leading-normal',
+    'hover:border-[#0265ff]',
+    transCls,
+  );
+
+  const isDropdownOpen = (index: number, field: 'name' | 'type') =>
+    dropdownTarget?.index === index && dropdownTarget?.field === field;
+
+  if (value.length === 0) {
+    return (
+      <div className={className}>
+        <button
+          type="button"
+          onClick={handleAdd}
+          className={cn(
+            'inline-flex items-center gap-[6px]',
+            'bg-transparent border-0 cursor-pointer p-0',
+            'text-[#0265ff] text-[14px] leading-normal',
+            'hover:opacity-80',
+            transCls,
+          )}
+        >
+          <PlusIcon />
+          <span>添加出参名称</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(
+      'bg-[#f5f5f5] border border-[#e0e0e0] border-dashed rounded-[4px] p-[10px]',
+      'flex flex-col gap-[10px]',
+      className,
+    )}>
+      {value.map((param, index) => (
+        <div key={index} className="flex gap-[10px] items-center">
+          {/* Name selector */}
+          <div className="relative flex-1 min-w-0">
+            <button
+              type="button"
+              onClick={() => handleOpenDropdown(index, 'name')}
+              className={cn(
+                fieldRowCls,
+                'w-full justify-between cursor-pointer',
+                isDropdownOpen(index, 'name') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+              )}
+            >
+              <span className="text-[14px] text-[#030303] leading-normal truncate">
+                {param.name || <span className="text-[#999]">请选择字段</span>}
+              </span>
+              <CaretIcon className={cn(
+                'shrink-0 text-[#666]',
+                isDropdownOpen(index, 'name') && 'rotate-180',
+                transCls,
+              )} />
+            </button>
+
+            {isDropdownOpen(index, 'name') && (
+              <div
+                ref={dropdownRef}
+                className={cn(
+                  'absolute top-[38px] left-0 z-10 w-[216px]',
+                  'bg-white rounded-[4px] p-[4px]',
+                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                )}
+              >
+                <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                  <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                    <SearchIcon />
+                  </span>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchText}
+                    onChange={e => setSearchText(e.target.value)}
+                    placeholder="搜索"
+                    className={cn(
+                      'w-full h-[34px] pl-[32px] pr-[10px]',
+                      'text-[14px] text-[#030303] leading-normal outline-none',
+                      'bg-transparent border-0 rounded-[4px]',
+                      'placeholder:text-[#999]',
+                    )}
+                  />
+                </div>
+                <div className="max-h-[210px] overflow-auto">
+                  {filteredFields.map((field) => {
+                    const isParent = field.children && field.children.length > 0;
+                    const isCollapsed = collapsedParents.has(field.fieldName);
+
+                    return (
+                      <div key={field.fieldName}>
+                        {isParent ? (
+                          <button
+                            type="button"
+                            onClick={() => toggleParent(field.fieldName)}
+                            className={cn(
+                              'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              transCls,
+                            )}
+                          >
+                            <ExpandArrowIcon className={cn(
+                              'shrink-0 text-[#999]',
+                              !isCollapsed && 'rotate-90',
+                              transCls,
+                            )} />
+                            <span className="truncate">{field.fieldDesc}</span>
+                          </button>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => handleSelectField(index, field)}
+                            className={cn(
+                              'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              param.name === field.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                              transCls,
+                            )}
+                          >
+                            <span className="truncate">{field.fieldDesc}</span>
+                          </button>
+                        )}
+                        {isParent && !isCollapsed && field.children!.map((child) => (
+                          <button
+                            key={child.fieldName}
+                            type="button"
+                            onClick={() => handleSelectField(index, child)}
+                            className={cn(
+                              'flex items-center w-full pl-[34px] pr-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              param.name === child.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                              transCls,
+                            )}
+                          >
+                            <span className="truncate">{child.fieldDesc}</span>
+                          </button>
+                        ))}
+                      </div>
+                    );
+                  })}
+                  {filteredFields.length === 0 && (
+                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                      无匹配结果
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* "设置为" label */}
+          <div className="bg-[#d9d9d9] rounded-[4px] h-[34px] w-[98px] shrink-0 flex items-center justify-center">
+            <span className="text-[14px] text-[#030303] leading-normal whitespace-nowrap">设置为</span>
+          </div>
+
+          {/* Type selector */}
+          <div className="relative flex-1 min-w-0">
+            <button
+              type="button"
+              onClick={() => handleOpenDropdown(index, 'type')}
+              className={cn(
+                fieldRowCls,
+                'w-full justify-between cursor-pointer',
+                isDropdownOpen(index, 'type') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+              )}
+            >
+              <span className="flex items-center gap-[6px] min-w-0">
+                {param.type ? (
+                  <>
+                    <FieldIcon type={param.type} />
+                    <span className="text-[14px] text-[#030303] leading-normal truncate">
+                      {FieldTypeNameMap[param.type]}
+                    </span>
+                  </>
+                ) : (
+                  <span className="text-[14px] text-[#999] leading-normal">请选择</span>
+                )}
+              </span>
+              <CaretIcon className={cn(
+                'shrink-0 text-[#666]',
+                isDropdownOpen(index, 'type') && 'rotate-180',
+                transCls,
+              )} />
+            </button>
+
+            {isDropdownOpen(index, 'type') && (
+              <div
+                ref={dropdownRef}
+                className={cn(
+                  'absolute top-[38px] left-0 z-10 w-[216px]',
+                  'bg-white rounded-[4px] p-[4px]',
+                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                )}
+              >
+                <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                  <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                    <SearchIcon />
+                  </span>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchText}
+                    onChange={e => setSearchText(e.target.value)}
+                    placeholder="搜索"
+                    className={cn(
+                      'w-full h-[34px] pl-[32px] pr-[10px]',
+                      'text-[14px] text-[#030303] leading-normal outline-none',
+                      'bg-transparent border-0 rounded-[4px]',
+                      'placeholder:text-[#999]',
+                    )}
+                  />
+                </div>
+                <div className="max-h-[210px] overflow-auto">
+                  {filteredTypes.map(([type, name]) => (
+                    <button
+                      key={type}
+                      type="button"
+                      onClick={() => handleSelectType(index, type as FieldType)}
+                      className={cn(
+                        'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                        'text-[14px] text-[#030303] leading-normal',
+                        'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                        param.type === type && 'bg-[#EFF0F6] text-[#0265ff]',
+                        transCls,
+                      )}
+                    >
+                      <FieldIcon type={type as FieldType} />
+                      <span className="truncate">{name}</span>
+                    </button>
+                  ))}
+                  {filteredTypes.length === 0 && (
+                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                      无匹配结果
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Delete button */}
+          <button
+            type="button"
+            onClick={() => handleDelete(index)}
+            className="shrink-0 cursor-pointer bg-transparent border-0 p-0"
+          >
+            <span className="inline-flex items-center justify-center size-[16px] text-[#666] hover:text-[#FF4D4F] [&_svg_path]:fill-[#666] [&_svg_path]:hover:fill-[#FF4D4F]">
+              <TrashIcon />
+            </span>
+          </button>
+        </div>
+      ))}
+
+      <button
+        type="button"
+        onClick={handleAdd}
+        className={cn(
+          'inline-flex items-center gap-[6px] w-fit',
+          'bg-transparent border-0 cursor-pointer p-0',
+          'text-[#0265ff] text-[14px] leading-normal',
+          'hover:opacity-80',
+          transCls,
+        )}
+      >
+        <PlusIcon />
+        <span>添加出参名称</span>
+      </button>
+    </div>
+  );
+}

package/src/components/radio-card.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { cn } from '../lib/utils';
+import { CircleChecker, type CircleCheckerProps } from './circle-checker';
+
+export interface RadioCardProps extends CircleCheckerProps {
+  title: string;
+  description: string;
+}
+
+export const RadioCard = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  title,
+  description,
+  disabled = false,
+  className,
+}: RadioCardProps) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newChecked = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isChecked}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none',
+        'border border-[#e0e0e0]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <div className="inline-flex items-center gap-[6px]">
+        <CircleChecker
+          checked={isChecked}
+          onCheckedChange={(_) => {
+            if (!isChecked) {
+              handleClick();
+            }
+          }}
+          disabled={disabled}
+        />
+        <span className="text-[#030303] text-[14px]">{title}</span>
+      </div>
+      <p className="text-[#666] text-[12px] pl-[22px]">{description}</p>
+    </button>
+  );
+};

package/src/components/ui/button.tsx

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[14px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-[4px]',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-[#e0e0e0] bg-white hover:bg-[#e0e0e0] text-[#121111]',
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',