@baishuyun/ai-design 2.0.48 → 2.0.50

package/src/components/agent-select.tsx

@@ -13,6 +13,11 @@ export interface AgentSelectProps {
   className?: string;
   activeAgent?: { id: string } | null;
   onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+  /**
+   * 大规格行（移动端设计稿 40434:32068）：行高 40、图标 20、名称 16px、
+   * 分组标题 14px。默认 false，不影响现有 PC 样式
+   */
+  large?: boolean;
 }
 
 interface AgentGroup {
@@ -27,6 +32,7 @@ export const AgentSelect = ({
   onSelect,
   showAllItems,
   className,
+  large = false,
 }: AgentSelectProps) => {
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -60,37 +66,67 @@ export const AgentSelect = ({
   return (
     <div className={classNames('flex flex-col', 'rounded-[4px]', className)}>
       {showSearch && (
-        <div className="px-1.5 pt-1 pb-0.5">
-          <div className="flex h-7.5 items-center gap-1.5 rounded-[4px] bg-white px-2.5 py-1.25 border border-[#E0E0E0]">
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 14 14"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="shrink-0 text-[#999999]"
-            >
-              <path
-                d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M12.25 12.25L9.7125 9.7125"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+        // 大规格（移动端抽屉设计稿 40654:39905）：搜索框高 46、圆角 100、左右 12 边距、
+        // 图标 18、文字 16px、占位「请输入智能体名称」
+        <div className={large ? 'px-[12px] pb-[10px]' : 'px-1.5 pt-1 pb-0.5'}>
+          <div
+            className={cn(
+              'flex items-center bg-white border border-[#E0E0E0]',
+              // shadow 内 --spacing=3.5px，数值类会缩小，设计稿像素一律用任意值
+              large
+                ? 'h-[46px] gap-[6px] px-[10px] py-[5px] rounded-[100px]'
+                : 'h-7.5 gap-1.5 px-2.5 py-1.25 rounded-[4px]'
+            )}
+          >
+            {large ? (
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="shrink-0"
+                aria-hidden="true"
+              >
+                <path
+                  d="M16.7608 15.6971L13.8144 12.6563C14.7965 11.3794 15.3849 9.90789 15.3849 8.14051C15.3849 4.21426 12.146 0.976513 8.21976 0.976513C4.29463 0.975388 1.05688 4.21426 1.05688 8.13939C1.05688 12.0656 4.29576 15.3056 8.22088 15.3056C9.88926 15.3056 11.4609 14.7161 12.7366 13.734L15.6808 16.6781C15.7786 16.875 15.9744 16.875 16.1713 16.875C16.3532 16.8711 16.5276 16.8012 16.6618 16.6781C16.9565 16.4824 16.9565 15.9919 16.7608 15.6971ZM2.52951 8.23839C2.5307 6.72901 3.13083 5.28179 4.19812 4.2145C5.26541 3.14721 6.71263 2.54708 8.22201 2.54589C9.73139 2.54708 11.1786 3.14721 12.2459 4.2145C13.3132 5.28179 13.9133 6.72901 13.9145 8.23839C13.9133 9.74777 13.3132 11.195 12.2459 12.2623C11.1786 13.3296 9.73139 13.9297 8.22201 13.9309C6.71263 13.9297 5.26541 13.3296 4.19812 12.2623C3.13083 11.195 2.5307 9.74777 2.52951 8.23839Z"
+                  fill="#666666"
+                />
+              </svg>
+            ) : (
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="shrink-0 text-[#999999]"
+              >
+                <path
+                  d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
+                  stroke="currentColor"
+                  strokeWidth="1.2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M12.25 12.25L9.7125 9.7125"
+                  stroke="currentColor"
+                  strokeWidth="1.2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
             <input
               type="text"
-              placeholder="搜索智能体助手"
+              placeholder={large ? '请输入智能体名称' : '搜索智能体助手'}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="h-full flex-1 bg-transparent text-[12px] text-[#121111] placeholder:text-[#999999] outline-none"
+              className={cn(
+                'h-full flex-1 bg-transparent text-[#121111] placeholder:text-[#999999] outline-none',
+                large ? 'text-[16px]' : 'text-[12px]'
+              )}
             />
           </div>
         </div>
@@ -101,29 +137,48 @@ export const AgentSelect = ({
           <div key={group.label}>
             <div
               className={cn(
-                'flex h-8 items-start px-2.5 pt-2.25',
+                'flex items-start',
+                large ? 'h-[40px] px-[12px] pt-[9px]' : 'h-8 px-2.5 pt-2.25',
                 groupIndex > 0 && 'mt-0.5'
               )}
             >
-              <div className="flex w-full flex-col gap-1.5">
-                <span className="text-[12px] font-medium text-[#666666] leading-4.25">
+              <div
+                className={cn(
+                  'flex w-full flex-col gap-1.5',
+                  // 设计稿分割线钉在分组头底部（justify-between）
+                  large && 'h-full justify-between'
+                )}
+              >
+                <span
+                  className={cn(
+                    'font-medium text-[#666666]',
+                    large ? 'text-[14px] leading-[20px]' : 'text-[12px] leading-4.25'
+                  )}
+                >
                   {group.label}
                 </span>
                 <div className="h-0 w-full border-b border-[#E0E0E0]" />
               </div>
             </div>
 
-            <div className="px-1">
+            {/* 大规格：全宽行（设计稿行高 46、左右 10） */}
+            <div className={large ? 'px-0' : 'px-1'}>
               {group.agents.map((agent) => {
                 const isActive = activeAgent?.id === agent.id;
                 return (
                   <button
                     key={agent.id}
                     className={cn(
-                      'flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[4px] px-2.5 py-1.5 text-left',
+                      'flex w-full cursor-pointer items-center rounded-[4px] text-left',
+                      large
+                        ? 'h-[46px] px-[12px] py-[10px] gap-[6px]'
+                        : 'h-8 px-2.5 py-1.5 gap-1.5',
                       transCls,
+                      // 选中态：移动端蓝字 + 勾选（无底色高亮，设计稿 40654:39918）；PC 浅蓝底高亮
                       isActive
-                        ? 'bg-[#F0F6FF] text-[#0265FF]'
+                        ? large
+                          ? 'text-[#0265FF]'
+                          : 'bg-[#F0F6FF] text-[#0265FF]'
                         : 'text-[#121111] hover:bg-[#EFF0F6]'
                     )}
                     onClick={() => handleSelect(agent)}
@@ -131,11 +186,36 @@ export const AgentSelect = ({
                     <img
                       src={agent.icon}
                       alt={agent.name}
-                      className="h-4 w-4 rounded-[4px] object-cover shrink-0"
+                      className={cn(
+                        'rounded-[4px] object-cover shrink-0',
+                        large ? 'size-[20px]' : 'h-4 w-4'
+                      )}
                     />
-                    <span className="truncate text-[14px] leading-5">
+                    <span
+                      className={cn(
+                        'truncate',
+                        large && 'flex-1',
+                        large ? 'text-[16px] leading-[22px]' : 'text-[14px] leading-5'
+                      )}
+                    >
                       {agent.name}
                     </span>
+                    {/* 选中勾选（仅移动端 large） */}
+                    {large && isActive && (
+                      <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        className="shrink-0"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M15.7613 5.42387C15.5414 5.22244 15.2506 5.11654 14.9527 5.12943C14.6548 5.14232 14.3742 5.27295 14.1725 5.49262L8.23378 11.9676L5.91628 8.72387L5.82753 8.61387C5.63315 8.40442 5.36635 8.27678 5.08129 8.25687C4.79623 8.23696 4.51428 8.32628 4.29267 8.50668C4.07106 8.68708 3.92641 8.94506 3.88808 9.22823C3.84975 9.5114 3.92061 9.79855 4.08628 10.0314L7.21128 14.4064L7.30628 14.5226C7.41228 14.6356 7.54046 14.7254 7.6828 14.7865C7.82514 14.8477 7.97856 14.8787 8.13346 14.8778C8.28836 14.8768 8.4414 14.8439 8.58299 14.7811C8.72457 14.7183 8.85166 14.6269 8.95628 14.5126L15.8313 7.01262L15.9263 6.89387C16.0811 6.67029 16.1497 6.3982 16.1193 6.12794C16.089 5.85769 15.9618 5.60757 15.7613 5.42387Z"
+                          fill="#0265FF"
+                        />
+                      </svg>
+                    )}
                   </button>
                 );
               })}

package/src/components/card.tsx

@@ -9,22 +9,35 @@ export interface CardProps {
   icon?: ReactNode;
   iconCode?: string;
   onClick?: (title: string, iconCode?: string) => void;
+  /** 追加到根节点的类名（如移动端满宽 max-w-none） */
+  className?: string;
+  /**
+   * 紧凑模式（移动端推荐卡片，对齐 Figma 40040:30035）：
+   * 标题行去内边距、高 26，标题与描述间距 6，卡片总高 92。
+   * 默认 false，不影响现有 PC 样式
+   */
+  compact?: boolean;
 }
 
-export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
+export const Card = ({ title, desc, index, icon, onClick, iconCode, className, compact }: CardProps) => {
   return (
     <div
       className={cn(
-        'bs-card group flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
-        {
-          transCls,
-        }
+        'bs-card group flex flex-col cursor-pointer p-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
+        compact ? 'gap-1.5' : 'gap-2.5',
+        transCls,
+        className
       )}
       onClick={() => {
         onClick?.(title, iconCode);
       }}
     >
-      <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">
+      <div
+        className={cn('flex items-center gap-1.5 rounded-[4px] bg-white', {
+          'h-[26px]': compact,
+          'px-2.5 h-[34px]': !compact,
+        })}
+      >
         {index === undefined ? null : <div>{index}</div>}
         {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
         {/* make title text ellipsis */}

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

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import type { FieldType, IAgentHelperOutputConfig, OutputParam, IField, ISubformField } from '@baishuyun/types';
 import { cn } from '../lib/utils';
 import { transCls } from '../const/ui';
@@ -111,17 +111,16 @@ const VALID_TYPE_MAP: Partial<Record<FieldType, Set<FieldType>>> = {
   'image': new Set(['signature', 'image', 'upload']),
 }
 
-const EMPTY_SET = new Set();
+function isCompatibleType(sourceType?: FieldType | '', targetType?: FieldType | ''): boolean {
+  return !!sourceType && !!targetType && sourceType !== 'subform' && targetType !== 'subform' &&
+    (sourceType === targetType || !!VALID_TYPE_MAP[sourceType]?.has(targetType));
+}
 
-function filterFieldsByType(fields: OutputFieldOption[], targetType: FieldType | ''): OutputFieldOption[] {
+function filterFieldsByType(fields: OutputFieldOption[], sourceType?: FieldType | ''): OutputFieldOption[] {
   return fields.reduce<OutputFieldOption[]>((acc, f) => {
-    const selfMatches = f.type === targetType;
-    const validTypeSet = VALID_TYPE_MAP[targetType as FieldType] ?? EMPTY_SET;
-    const generalMatches = validTypeSet.has(f.type);
-
-    const filteredChildren = f.children ? filterFieldsByType(f.children, targetType) : [];
-    if (selfMatches || generalMatches || filteredChildren.length > 0) {
-      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+    const filteredChildren = f.children ? filterFieldsByType(f.children, sourceType) : [];
+    if (filteredChildren.length > 0 || (!f.children?.length && isCompatibleType(sourceType, f.type))) {
+      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : undefined });
     }
     return acc;
   }, []);
@@ -134,8 +133,8 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
 
   const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-output-config-portal');
 
-  const sourceOptions = sourceFields ? outputParamsToOptions(sourceFields) : [];
-  const targetOptions = targetFields ? fieldsToOptions(targetFields) : [];
+  const sourceOptions = useMemo(() => outputParamsToOptions(sourceFields ?? []), [sourceFields]);
+  const targetOptions = useMemo(() => fieldsToOptions(targetFields ?? []), [targetFields]);
 
   const handleDropdownOpenChange = useCallback((index: number, field: 'source' | 'target', open: boolean) => {
     if (open) {
@@ -162,7 +161,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
     const newItem = { ...newValue[index], sourceField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     if (newItem.targetField.fieldName) {
       const targetOption = findFieldByName(targetOptions, newItem.targetField.fieldName);
-      if (targetOption && targetOption.type !== field.type) {
+      if (!isCompatibleType(field.type, targetOption?.type)) {
         newItem.targetField = { fieldName: '', fieldDesc: '' };
       }
     }
@@ -173,12 +172,21 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
   }, [value, onChange, targetOptions]);
 
   const handleSelectTargetField = useCallback((index: number, field: OutputFieldOption) => {
+    const sourceOption = flattenSourceFields(sourceOptions).find(
+      option => option.fieldName === value[index].sourceField.fieldName
+    );
+    if (!isCompatibleType(sourceOption?.type, field.type)) {
+      if (import.meta.env.DEV) {
+        console.warn('[OutputConfigEditor] 不兼容的输出映射', { sourceType: sourceOption?.type, targetType: field.type });
+      }
+      return;
+    }
     const newValue = [...value];
     newValue[index] = { ...newValue[index], targetField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     onChange?.(newValue);
     setDropdownTarget(null);
     setSearchText('');
-  }, [value, onChange]);
+  }, [value, onChange, sourceOptions]);
 
   const toggleParent = useCallback((fieldName: string) => {
     setCollapsedParents(prev => {
@@ -261,9 +269,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
         const rowSourceFields = filteredSourceFields.filter(
           f => !usedSourceFieldNames.has(f.fieldName) || f.fieldName === item.sourceField.fieldName
         );
-        const rowTargetFields = selectedSourceType
-          ? filterFieldsByType(searchedTargetFields, selectedSourceType)
-          : searchedTargetFields;
+        const rowTargetFields = filterFieldsByType(searchedTargetFields, selectedSourceType);
         return (
         <div key={index} className="flex gap-[10px] items-center">
           {/* Source field selector (JSON output field) */}

package/src/stories/FieldValueInput.stories.tsx

@@ -21,9 +21,12 @@ const mockService: IFieldValueService = {
   searchDepts: async (keyword) => {
     await new Promise((r) => setTimeout(r, 500));
     const depts = [
-      { id: 'dept1', name: '技术部' },
-      { id: 'dept2', name: '产品部' },
-      { id: 'dept3', name: '设计部' },
+      { id: 'dept-root', name: '百数科技' },
+      { id: 'dept1', name: '技术部', parentId: 'dept-root' },
+      { id: 'dept1-1', name: '前端组', parentId: 'dept1' },
+      { id: 'dept1-2', name: '后端组', parentId: 'dept1' },
+      { id: 'dept2', name: '产品部', parentId: 'dept-root' },
+      { id: 'dept3', name: '设计部', parentId: 'dept-root' },
     ];
     return keyword
       ? depts.filter((d) => d.name.includes(keyword))

package/src/stories/RelationalOperatorSelect.stories.tsx

@@ -45,6 +45,33 @@ export const Disabled: Story = {
   },
 };
 
+export const DeptGroupLabels: Story = {
+  args: {
+    defaultValue: 'in',
+    operators: ['in', 'all', 'eq', 'empty', 'not_empty'],
+    fieldType: 'deptgroup',
+  },
+  name: '按字段类型显示描述（部门多选）',
+};
+
+export const AddressLabels: Story = {
+  args: {
+    defaultValue: 'in',
+    operators: ['in', 'nin', 'empty', 'not_empty'],
+    fieldType: 'address',
+  },
+  name: '按字段类型显示描述（地址）',
+};
+
+export const CustomOperatorLabels: Story = {
+  args: {
+    defaultValue: 'eq',
+    operators: ['eq', 'neq'],
+    operatorLabels: { eq: '是', neq: '不是' },
+  },
+  name: '自定义文案（operatorLabels）',
+};
+
 export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState<relationalOperator>('eq');