@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.3

package/src/components/agent-helper/team-wide-form-select/types.ts

@@ -0,0 +1,36 @@
+import type { IAppFormListEntry } from '@baishuyun/types';
+
+// ── Tree Node ─────────────────────────────────────────────────────
+
+export type TeamWideFormNodeType = 'appGroup' | 'app' | 'formGroup' | 'form';
+
+export interface TeamWideFormTreeNode {
+  id: string;
+  label: string;
+  type: TeamWideFormNodeType;
+  /** app 节点的图标名（imgbg-bsy-app-N，AppIcon） */
+  appIcon?: number | string;
+  /** form/formGroup 节点的图标 number（FontIcon） */
+  formIcon?: number;
+  /** form 叶子节点的原始条目数据 */
+  data?: IAppFormListEntry;
+  children?: TeamWideFormTreeNode[];
+}
+
+// ── Section（按当前应用分组展示） ──────────────────────────────────
+
+export interface TeamWideFormTreeSection {
+  key: 'all' | 'current' | 'other';
+  /** 分组标题（'当前应用表单' / '其他应用表单'）；'all' 无标题 */
+  title?: string;
+  nodes: TeamWideFormTreeNode[];
+}
+
+// ── Change Result ─────────────────────────────────────────────────
+
+export interface TeamWideFormSelectChangeResult {
+  appId: string;
+  entryId: string;
+  /** 选中的原始条目（含 type/icon/hasCoop 等） */
+  form: IAppFormListEntry;
+}

package/src/components/agent-helper/team-wide-form-select/use-form-tree.ts

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { TeamWideFormTreeNode, TeamWideFormTreeSection } from './types';
+
+/** 收集所有含子节点的 id（默认全部展开——树层级深，折叠会隐藏目标表单） */
+function collectExpandableIds(nodes: TeamWideFormTreeNode[]): Set<string> {
+  const ids = new Set<string>();
+  const walk = (list: TeamWideFormTreeNode[]) => {
+    for (const n of list) {
+      if (n.children && n.children.length > 0) {
+        ids.add(n.id);
+        walk(n.children);
+      }
+    }
+  };
+  walk(nodes);
+  return ids;
+}
+
+/** 按关键字过滤树：命中自身或任一后代即保留（保留祖先链） */
+function filterTree(
+  nodes: TeamWideFormTreeNode[],
+  query: string
+): TeamWideFormTreeNode[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return nodes;
+
+  const walk = (list: TeamWideFormTreeNode[]): TeamWideFormTreeNode[] => {
+    const result: TeamWideFormTreeNode[] = [];
+    for (const node of list) {
+      const selfMatch = node.label.toLowerCase().includes(q);
+      const filteredChildren = node.children ? walk(node.children) : [];
+      if (selfMatch || filteredChildren.length > 0) {
+        result.push({
+          ...node,
+          children:
+            filteredChildren.length > 0 ? filteredChildren : node.children,
+        });
+      }
+    }
+    return result;
+  };
+  return walk(nodes);
+}
+
+/**
+ * 树形面板状态：展开/收起 + 搜索过滤。
+ * 搜索时强制展开（让命中的深层节点可见）。
+ */
+export function useFormTree(sections: TeamWideFormTreeSection[]) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
+
+  const isExpanded = useCallback(
+    (id: string) => !collapsedIds.has(id),
+    [collapsedIds]
+  );
+
+  const toggleExpanded = useCallback((id: string) => {
+    setCollapsedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const filteredSections = useMemo(() => {
+    const searching = searchQuery.trim().length > 0;
+    return sections.map((section) => ({
+      ...section,
+      nodes: filterTree(section.nodes, searchQuery),
+      searching,
+    }));
+  }, [sections, searchQuery]);
+
+  const totalVisible = useMemo(
+    () =>
+      filteredSections.reduce(
+        (sum, s) => sum + countLeaves(s.nodes),
+        0
+      ),
+    [filteredSections]
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    filteredSections,
+    isExpanded,
+    toggleExpanded,
+    /** 搜索中（此时忽略折叠状态，全部展开） */
+    searching: searchQuery.trim().length > 0,
+    hasResult: totalVisible > 0,
+    expandableIds: useMemo(
+      () => collectExpandableIds(sections.reduce((acc, s) => acc.concat(s.nodes), [] as TeamWideFormTreeNode[])),
+      [sections]
+    ),
+  };
+}
+
+function countLeaves(nodes: TeamWideFormTreeNode[]): number {
+  let count = 0;
+  for (const n of nodes) {
+    if (n.children && n.children.length > 0) count += countLeaves(n.children);
+    else count += 1;
+  }
+  return count;
+}

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

@@ -1,5 +1,5 @@
 import type { triggerType } from '@baishuyun/types';
-import { CommonTypeIcon, GoToFormIcon, FlowNodeTypeIcon, FormFieldIcon, FormTypeIcon } from '../../bs-icons';
+import { CommonTypeIcon, GoToFormIcon, FlowNodeTypeIcon, ScheduleTypeIcon, FormFieldIcon, FormTypeIcon } from '../../bs-icons';
 import { IconCard, type IconCardProps } from '../../icon-card';
 
 export type TriggerCardConfig = Pick<

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/bot-avatar-name.tsx

@@ -9,7 +9,7 @@ export const BotAvatarAndName = ({
   icon?: React.ReactNode | string;
   variant?: 'default' | 'active';
 }) => {
-  const size = variant === 'default' ? 20 : 24;
+  const size = variant === 'default' ? 16 : 24;
 
   if (!name) {
     return null;

package/src/components/bs-entry-select/build-tree.ts

@@ -16,12 +16,6 @@ export function getDepthPadding(depth: number): string {
   return DEPTH_PADDING[Math.min(depth, 5)] ?? DEPTH_PADDING[5];
 }
 
-export function getEntryIconClass(entry: IEntryDetail): string {
-  const isNew = entry.icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr}  icon${newStr}-bsy-form-${entry.icon}`;
-}
-
 export function buildEntryTreeFromAliasMap(
   appDetail: IAppDetail,
   searchQuery: string

package/src/components/bs-entry-select/entry-item.tsx

@@ -1,6 +1,7 @@
 import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
-import { getDepthPadding, getEntryIconClass } from './build-tree';
+import { getDepthPadding } from './build-tree';
+import { FontIcon } from '../font-icon';
 import type { EntryTreeItem } from './types';
 
 export function EntryItem({
@@ -26,16 +27,11 @@ export function EntryItem({
       onClick={onClick}
     >
       <span className="flex items-center gap-[6px] min-w-0 flex-1">
-        <i
-          className={
-            item.iconClass
-              ? item.iconClass
-              : item.entry
-                ? getEntryIconClass(item.entry)
-                : 'node-icon icon-bsy-form icon-new-bsy-form-25'
-          }
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
+        {item.iconClass ? (
+          <i className={item.iconClass} style={{ fontSize: 16, lineHeight: 1 }} />
+        ) : (
+          <FontIcon name={item.entry?.icon ?? 25} />
+        )}
         <span className="text-[14px] text-[#030303] truncate">
           {item.name}
         </span>

package/src/components/bs-entry-select/other-app-section.tsx

@@ -6,6 +6,7 @@ import { TreeItemNode } from './tree-item-node';
 import type { IAppDetail } from '@baishuyun/types';
 import type { BsEntrySelectChangeResult } from './types';
 import { SolidArrowDownIcon } from '../bs-icons';
+import { FontIcon } from '../font-icon';
 
 const ChevronRightIcon = ({ size }: { size?: number }) => (
   <SolidArrowDownIcon className="-rotate-90" size={size} />
@@ -59,10 +60,7 @@ export function OtherAppSection({
         >
           <ChevronRightIcon size={18} />
         </span>
-        <i
-          className="node-icon icon-bsy-form icon-new-bsy-form-0"
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
+        <FontIcon name={0} />
         <span className="text-[14px] text-[#030303] truncate">
           {appDetail.name}
         </span>

package/src/components/bs-entry-select/scroll-slider.tsx

@@ -11,9 +11,9 @@ import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
 import { IconBtn } from '../icon-btn';
 import { LeftArrowIcon, SolidArrowDownIcon, DividerIcon } from '../bs-icons';
+import { FontIcon } from '../font-icon';
 import {
   buildEntryTreeFromAliasMap,
-  getEntryIconClass,
   filterTreeBySearch,
   buildFlowCenterTree,
 } from './build-tree';
@@ -648,16 +648,11 @@ export function ScrollSlider({
                       ),
                   )}
                 >
-                  <i
-                    className={
-                      node.iconClass
-                        ? node.iconClass
-                        : node.entry
-                          ? getEntryIconClass(node.entry)
-                          : 'node-icon icon-bsy-form icon-new-bsy-form-25'
-                    }
-                    style={{ fontSize: 16, lineHeight: 1 }}
-                  />
+                  {node.iconClass ? (
+                    <i className={node.iconClass} style={{ fontSize: 16, lineHeight: 1 }} />
+                  ) : (
+                    <FontIcon name={node.entry?.icon ?? 25} />
+                  )}
                   <span className="text-[14px] leading-[normal] truncate">
                     {node.name}
                   </span>