@baishuyun/ai-design 2.0.47 → 2.0.49

package/src/components/agent-helper/form-select/index.tsx

@@ -13,6 +13,8 @@ import { transCls } from '../../../const/ui';
 import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
 import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
 
+const POPOVER_MAX_HEIGHT = 300;
+
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
@@ -307,11 +309,12 @@ function FormPopover({
     <div
       className={cn(
         'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
-        'flex flex-col gap-[4px]',
+        'flex min-h-0 flex-col gap-[4px] overflow-hidden',
       )}
+      style={{ maxHeight: POPOVER_MAX_HEIGHT }}
     >
       {/* Search input */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
         <SearchIcon />
         <input
           type="text"
@@ -337,7 +340,7 @@ function FormPopover({
       )}
 
       {/* Form list */}
-      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
+      <div className="flex min-h-0 flex-col gap-0 overflow-y-auto">
         {tree.length > 0 ? (
           tree.map((node) => (
             <FormTreeItemNode
@@ -391,7 +394,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
     const { popoverStyle, updatePopoverPosition } =
-      useSelectPopoverPosition(triggerRef);
+      useSelectPopoverPosition(triggerRef, { estimatedHeight: POPOVER_MAX_HEIGHT });
 
     const resolvedValue = controlledValue ?? internalValue;
 
@@ -709,7 +712,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
         {/* Popover */}
         {isOpen &&
           createPortal(
-            <div ref={popoverRef} style={popoverStyle}>
+            <div ref={popoverRef} className="flex flex-col" style={popoverStyle}>
               <FormPopover
                 searchQuery={searchQuery}
                 onSearchChange={setSearchQuery}

package/src/components/agent-helper/relational-operator-select/index.tsx

@@ -1,27 +1,27 @@
 import { useState, useCallback, useMemo } from 'react';
-import type { relationalOperator } from '@baishuyun/types';
-import { OPERATOR_LABEL_MAP } from '@baishuyun/ai-feat-utils';
+import type { FieldType, relationalOperator } from '@baishuyun/types';
+import { getOperatorLabel } from '@baishuyun/ai-feat-utils';
 import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
 import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 
-const ALL_OPTIONS: Array<{ value: relationalOperator; label: string }> = [
-  { value: 'eq', label: OPERATOR_LABEL_MAP.eq },
-  { value: 'neq', label: OPERATOR_LABEL_MAP.neq },
-  { value: 'gt', label: OPERATOR_LABEL_MAP.gt },
-  { value: 'lt', label: OPERATOR_LABEL_MAP.lt },
-  { value: 'gte', label: OPERATOR_LABEL_MAP.gte },
-  { value: 'lte', label: OPERATOR_LABEL_MAP.lte },
-  { value: 'contains', label: OPERATOR_LABEL_MAP.contains },
-  { value: 'not_contains', label: OPERATOR_LABEL_MAP.not_contains },
-  { value: 'in', label: OPERATOR_LABEL_MAP.in },
-  { value: 'nin', label: OPERATOR_LABEL_MAP.nin },
-  { value: 'all', label: OPERATOR_LABEL_MAP.all },
-  { value: 'empty', label: OPERATOR_LABEL_MAP.empty },
-  { value: 'not_empty', label: OPERATOR_LABEL_MAP.not_empty },
-  { value: 'range', label: OPERATOR_LABEL_MAP.range },
-  { value: 'like', label: OPERATOR_LABEL_MAP.like },
-  { value: 'unlike', label: OPERATOR_LABEL_MAP.unlike },
+const ALL_OPERATORS: relationalOperator[] = [
+  'eq',
+  'neq',
+  'gt',
+  'lt',
+  'gte',
+  'lte',
+  'contains',
+  'not_contains',
+  'in',
+  'nin',
+  'all',
+  'empty',
+  'not_empty',
+  'range',
+  'like',
+  'unlike',
 ];
 
 export interface IRelationalOperatorSelectProps {
@@ -29,6 +29,13 @@ export interface IRelationalOperatorSelectProps {
   defaultValue?: relationalOperator;
   onChange?: (value: relationalOperator) => void;
   operators?: relationalOperator[];
+  /**
+   * 字段类型：同一操作符在不同字段类型下描述不同
+   * （如部门多选的 in 为「包含任意一个」），未提供时使用默认文案
+   */
+  fieldType?: FieldType;
+  /** 逐操作符的文案覆盖，优先级高于 fieldType 推导 */
+  operatorLabels?: Partial<Record<relationalOperator, string>>;
   borderless?: boolean;
   disabled?: boolean;
   className?: string;
@@ -39,6 +46,8 @@ export const RelationalOperatorSelect = ({
   defaultValue = 'eq',
   onChange,
   operators,
+  fieldType,
+  operatorLabels,
   borderless = false,
   disabled = false,
   className,
@@ -48,10 +57,15 @@ export const RelationalOperatorSelect = ({
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
   const options = useMemo(() => {
-    if (!operators || operators.length === 0) return ALL_OPTIONS;
-    const set = new Set(operators);
-    return ALL_OPTIONS.filter((o) => set.has(o.value));
-  }, [operators]);
+    const list =
+      !operators || operators.length === 0
+        ? ALL_OPERATORS
+        : ALL_OPERATORS.filter((o) => new Set(operators).has(o));
+    return list.map((value) => ({
+      value,
+      label: operatorLabels?.[value] ?? getOperatorLabel(value, fieldType),
+    }));
+  }, [operators, fieldType, operatorLabels]);
 
   const resolvedValue = (() => {
     const v = controlledValue !== undefined ? controlledValue : internalValue;

package/src/components/agent-helper/table/index.tsx

@@ -47,9 +47,13 @@ export function DataTable<TData>({
   return (
     <div
       className={cn(
-        'rounded-[10px] border border-[#e0e0e0] overflow-hidden bg-white',
+        'rounded-[10px] border border-[#e0e0e0] overflow-auto bg-white',
         className,
       )}
+      // 抽屉(vaul/Radix Dialog)经 react-remove-scroll 在 document 级 preventDefault
+      // wheel 事件；shadow DOM 下其 contains 判定失效，内部滚动会被误杀。
+      // 阻断冒泡使其不可见，恢复触摸板滚动（同 form-select 的处理先例）。
+      onWheel={(e) => e.stopPropagation()}
     >
       <table className="w-full h-full border-collapse">
         <thead>
@@ -59,7 +63,7 @@ export function DataTable<TData>({
                 <th
                   key={header.id}
                   className={cn(
-                    'bg-[#f5f7fa] h-[34px] px-[10px] text-left text-[14px] font-normal text-[#030303] border-b border-[#e0e0e0] align-middle whitespace-nowrap',
+                    'sticky top-0 z-[1] bg-[#f5f7fa] h-[34px] px-[10px] text-left text-[14px] font-normal text-[#030303] border-b border-[#e0e0e0] align-middle whitespace-nowrap',
                     index !== 0 && 'border-l border-[#e0e0e0]',
                   )}
                   style={{

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/fields-portal.tsx

@@ -8,11 +8,11 @@ export interface FieldsPortalProps extends FieldsPreviewerProps {
   children?: React.ReactNode;
 }
 
-export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal => {
+export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal | null => {
   const { shadowContainer: shadowEntry } = useShadow({
     rootEl: portalEl,
     id: 'chat-sdk-fields-portal',
   });
 
-  return createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry!);
+  return shadowEntry ? createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry) : null;
 };

package/src/components/fields-previewer.tsx

@@ -117,6 +117,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
 
     const { shadowContainer } = useShadow({
       id: 'dialog-container',
+      enabled: !disableShadowContainer,
       rootEl: dialogContainer,
       style: containerStyle,
       wrapperStyle: {

package/src/components/legacy-slot.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { LegacySlotRenderer } from '../types';
+import { syncHostStylesIntoShadow } from '@baishuyun/ai-feat-utils';
+import { useInjectedShadowStyle } from '../hooks/use-shadow-boundary';
 
 export interface LegacySlotProps {
   renderLegacy: LegacySlotRenderer;
@@ -10,8 +12,6 @@ export interface LegacySlotProps {
   onSetRef?: (ref: HTMLDivElement) => void;
 }
 
-const STYLE_INJECTED_ATTR = 'data-style-injected';
-
 const injectStylesIntoShadow = (currentElement: Node) => {
   if (!currentElement) return;
 
@@ -31,20 +31,8 @@ const injectStylesIntoShadow = (currentElement: Node) => {
   }
 
   if (!shadowRoot) return;
-  if (shadowRoot.querySelector(`style[${STYLE_INJECTED_ATTR}]`)) return;
-
-  document.head.querySelectorAll('style').forEach((styleEl) => {
-    const cloned = styleEl.cloneNode(true) as HTMLElement;
-    cloned.setAttribute(STYLE_INJECTED_ATTR, '');
-    shadowRoot!.appendChild(cloned);
-  });
-
   // if style is loaded by link tag, we also need to copy it into shadow DOM
-  document.head.querySelectorAll('link[rel="stylesheet"]').forEach((linkEl) => {
-    const cloned = linkEl.cloneNode(true) as HTMLElement;
-    cloned.setAttribute(STYLE_INJECTED_ATTR, '');
-    shadowRoot!.appendChild(cloned);
-  });
+  return syncHostStylesIntoShadow(shadowRoot, shadowRoot.host as HTMLElement);
 };
 
 export function LegacySlot({
@@ -66,13 +54,14 @@ export function LegacySlot({
     const host = hostRef.current;
     onSetRef?.(host);
     let target: HTMLElement | ShadowRoot = host;
+    let disposeStyles: (() => void) | undefined;
 
     if (shadow) {
       const shadowRoot = host.shadowRoot || host.attachShadow({ mode: 'open' });
       target = shadowRoot;
 
       if (withHostStyles) {
-        injectStylesIntoShadow(host);
+        host.setAttribute('data-bs-style-mode', 'host');
       }
       if (typeof injectedStyles === 'string') {
         const styleEl = document.createElement('style');
@@ -86,12 +75,16 @@ export function LegacySlot({
 
     const mountPoint = document.createElement('div');
     mountPoint.style.display = 'contents';
+    mountPoint.setAttribute('data-bs-shadow-content', '');
     target.appendChild(mountPoint);
     mountPointRef.current = mountPoint;
+    if (shadow && withHostStyles) disposeStyles = injectStylesIntoShadow(host);
 
     cleanupRef.current = renderLegacy(mountPoint, props as Record<string, any>);
 
     return () => {
+      disposeStyles?.();
+      host.shadowRoot?.querySelector('style[data-legacy-injected-raw]')?.remove();
       cleanupRef.current?.();
       if (mountPointRef.current) {
         mountPointRef.current.remove();
@@ -101,6 +94,8 @@ export function LegacySlot({
     };
   }, []);
 
+  useInjectedShadowStyle(hostRef, injectedStyles, 'data-legacy-injected-raw');
+
   useEffect(() => {
     if (!mountPointRef.current) return;
     cleanupRef.current = renderLegacy(mountPointRef.current, props as Record<string, any>);

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 => {
@@ -210,6 +218,10 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
     (f) => (matchSearch(f.fieldDesc) || matchSearch(f.fieldName)) && f.type !== 'subform'
   );
 
+  const usedSourceFieldNames = new Set(
+    value.map(item => item.sourceField.fieldName).filter(Boolean)
+  );
+
   const searchedTargetFields = filterFields(targetOptions);
 
   const fieldRowCls = cn(
@@ -254,9 +266,10 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
         const selectedSourceType = item.sourceField.fieldName
           ? flatSourceFields.find(f => f.fieldName === item.sourceField.fieldName)?.type
           : undefined;
-        const rowTargetFields = selectedSourceType
-          ? filterFieldsByType(searchedTargetFields, selectedSourceType)
-          : searchedTargetFields;
+        const rowSourceFields = filteredSourceFields.filter(
+          f => !usedSourceFieldNames.has(f.fieldName) || f.fieldName === item.sourceField.fieldName
+        );
+        const rowTargetFields = filterFieldsByType(searchedTargetFields, selectedSourceType);
         return (
         <div key={index} className="flex gap-[10px] items-center">
           {/* Source field selector (JSON output field) */}
@@ -304,7 +317,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                 />
               </div>
               <div className="max-h-[210px] overflow-auto">
-                {filteredSourceFields.map((field) => (
+                {rowSourceFields.map((field) => (
                   <button
                     key={field.fieldName}
                     type="button"
@@ -320,7 +333,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                     <span className="truncate">{field.fieldDesc}</span>
                   </button>
                 ))}
-                {filteredSourceFields.length === 0 && (
+                {rowSourceFields.length === 0 && (
                   <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
                     无匹配结果
                   </div>

package/src/components/shadow-content.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useShadowBoundary } from '../hooks/use-shadow-boundary';
+import type { ShadowStyle, ShadowStyleMode } from '../hooks/use-shadow-boundary';
+
+export interface ShadowContentProps {
+  children: ReactNode;
+  mode?: ShadowStyleMode;
+  styles?: ShadowStyle;
+}
+
+export const ShadowContent = ({ children, mode = 'sdk', styles }: ShadowContentProps) => {
+  const { setHostRef, container } = useShadowBoundary(mode, styles);
+  return (
+    <div ref={setHostRef} data-bs-style-mode={mode} style={{ display: 'contents' }}>
+      {container && createPortal(children, container)}
+    </div>
+  );
+};