@baishuyun/ai-design 2.0.41 → 2.0.42

package/.storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from "@storybook/react-vite";
 
 import "../src/style.css";
+// 加载 iconfont（sdk-icon）字体 + .sdk-icon 类，使 FontIcon 字体图标在 storybook 中可渲染
+import "../src/stories/assets/iconfont.css";
 
 const preview: Preview = {
   parameters: {

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baishuyun/ai-design
 
+## 2.0.42
+
+### Patch Changes
+
+- mobile update
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.37
+  - @baishuyun/types@3.0.34
+
 ## 2.0.41
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.41",
+  "version": "2.0.42",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.36",
-    "@baishuyun/types": "3.0.33"
+    "@baishuyun/ai-feat-utils": "2.0.37",
+    "@baishuyun/types": "3.0.34"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.33",
+    "@baishuyun/types": "3.0.34",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/agent-drawer.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useState } from 'react';
+import { EnhancedDrawer } from './ui/enhanced-drawer';
+import { AgentSelect } from './agent-select';
+import type { AgentSelectAgent } from './agent-select';
+
+export interface AgentDrawerProps {
+  agents: Array<AgentSelectAgent>;
+  activeAgent?: { id: string } | null;
+  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showSearch?: boolean;
+  /** 触发器（可选；不传则完全由 open 控制） */
+  trigger?: React.ReactNode;
+}
+
+/**
+ * 智能体选择抽屉（默认从右侧滑入），复用 AgentSelect 列表，选中后自动关闭。
+ * shadow DOM 兼容逻辑统一由 EnhancedDrawer 处理。
+ */
+export const AgentDrawer = ({
+  agents,
+  activeAgent,
+  onSelect,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  showSearch = true,
+  trigger,
+}: AgentDrawerProps) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  const handleSelect = useCallback(
+    async (agent: AgentSelectAgent) => {
+      await onSelect(agent);
+      setOpen(false);
+    },
+    [onSelect, setOpen]
+  );
+
+  return (
+    <>
+      {trigger && (
+        <span onClick={() => setOpen(true)} style={{ display: 'contents' }}>
+          {trigger}
+        </span>
+      )}
+      <EnhancedDrawer
+        open={open}
+        onOpenChange={setOpen}
+        direction="right"
+        width={300}
+        title="选择智能体"
+      >
+        <div className="h-full overflow-hidden p-[12px]">
+          <div
+            className="overflow-y-auto"
+            style={{ maxHeight: 'calc(100vh - 60px)', scrollbarWidth: 'none' }}
+            data-vaul-no-drag
+          >
+            <AgentSelect
+              agents={agents}
+              activeAgent={activeAgent}
+              onSelect={handleSelect}
+              showSearch={showSearch}
+              showAllItems
+            />
+          </div>
+        </div>
+      </EnhancedDrawer>
+    </>
+  );
+};

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

@@ -0,0 +1,109 @@
+import type {
+  IAllAppsAndFormsData,
+  IAppFormListEntry,
+  IAppWithFormList,
+} from '@baishuyun/types';
+import type { TeamWideFormTreeNode, TeamWideFormTreeSection } from './types';
+
+/**
+ * 数据适配：/dashboard/app/form/list 返回 → 树形结构。
+ *
+ * 树层级：应用分组 → 应用 → 表单分组 → 表单（表单分组可嵌套）。
+ * 传入 currentAppId 时拆成「当前应用表单 / 其他应用表单」两个 section，
+ * 当前应用的条目不再带应用/分组层级（平铺到 section 根）。
+ */
+
+/** 条目（含嵌套分组）→ 树节点 */
+function entryToNode(entry: IAppFormListEntry): TeamWideFormTreeNode {
+  const isGroup = entry.type === 'group';
+  return {
+    id: entry.entryId,
+    label: entry.name,
+    type: isGroup ? 'formGroup' : 'form',
+    formIcon: entry.icon,
+    data: isGroup ? undefined : entry,
+    children: entry.child?.map(entryToNode),
+  };
+}
+
+/** 应用 formList → 表单/分组树节点列表（聚合 form/dash/aggregate/etl 各类） */
+function appFormNodes(app: IAppWithFormList): TeamWideFormTreeNode[] {
+  const fl = app.formList;
+  if (!fl) return [];
+
+  const nodes: TeamWideFormTreeNode[] = [];
+  const pushEntries = (entries: IAppFormListEntry[] | null) => {
+    if (entries?.length) {
+      nodes.push(...entries.map(entryToNode));
+    }
+  };
+
+  pushEntries(fl.form);
+  pushEntries(fl.dash);
+  pushEntries(fl.aggregate_table);
+  pushEntries(fl.etl_table);
+
+  return nodes;
+}
+
+/** 应用 → 树节点（含其子树） */
+function appToNode(app: IAppWithFormList): TeamWideFormTreeNode {
+  return {
+    id: app._id,
+    label: app.appname,
+    type: 'app',
+    appIcon: app.style?.icon,
+    children: appFormNodes(app),
+  };
+}
+
+/**
+ * 全量数据 → 树形 section 列表。
+ * - 不传 currentAppId：单个 'all' section，全量树（应用分组→应用→表单分组→表单）
+ * - 传 currentAppId：'current'（当前应用条目，无应用层级）+ 'other'（其余应用全量树）
+ */
+export function appsAndFormsToTree(
+  data: IAllAppsAndFormsData | null | undefined,
+  currentAppId?: string
+): TeamWideFormTreeSection[] {
+  const groups = data?.items ?? [];
+
+  if (!currentAppId) {
+    return [
+      {
+        key: 'all',
+        nodes: groups.map((group) => ({
+          id: group._id,
+          label: group.name,
+          type: 'appGroup' as const,
+          children: (group.apps ?? []).map(appToNode),
+        })),
+      },
+    ];
+  }
+
+  // 当前应用：只取它的条目树（无应用/分组层级）
+  let currentNodes: TeamWideFormTreeNode[] = [];
+  for (const group of groups) {
+    const target = (group.apps ?? []).find((a) => a._id === currentAppId);
+    if (target) {
+      currentNodes = appFormNodes(target);
+      break;
+    }
+  }
+
+  // 其他应用：全量树，剔除当前应用（空应用分组保留）
+  const otherNodes: TeamWideFormTreeNode[] = groups.map((group) => ({
+    id: group._id,
+    label: group.name,
+    type: 'appGroup' as const,
+    children: (group.apps ?? [])
+      .filter((a) => a._id !== currentAppId)
+      .map(appToNode),
+  }));
+
+  return [
+    { key: 'current', title: '当前应用表单', nodes: currentNodes },
+    { key: 'other', title: '其他应用表单', nodes: otherNodes },
+  ];
+}

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

@@ -0,0 +1,289 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { EnhancedDrawer } from '../../ui/enhanced-drawer';
+import { appsAndFormsToTree } from './data-adapter';
+import { TeamWideFormTreePanel } from './tree-panel';
+import type { IAllAppsAndFormsData } from '@baishuyun/types';
+import type {
+  TeamWideFormSelectChangeResult,
+  TeamWideFormTreeNode,
+} from './types';
+
+// ── Shared ────────────────────────────────────────────────────────
+
+/** 下拉箭头（trigger 用） */
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+/** 在 sections 里按 entryId 找选中节点的 label / formIcon */
+function findSelected(
+  sections: ReturnType<typeof appsAndFormsToTree>,
+  entryId?: string
+): { label: string; formIcon?: number } | null {
+  if (!entryId) return null;
+  let found: { label: string; formIcon?: number } | null = null;
+  const walk = (nodes: TeamWideFormTreeNode[]) => {
+    for (const n of nodes) {
+      if (found) return;
+      if (n.type === 'form' && n.id === entryId) {
+        found = { label: n.label, formIcon: n.formIcon };
+        return;
+      }
+      if (n.children) walk(n.children);
+    }
+  };
+  sections.forEach((s) => walk(s.nodes));
+  return found;
+}
+
+interface BaseProps {
+  /** 全量应用+表单数据（/dashboard/app/form/list 返回的 data 字段） */
+  data: IAllAppsAndFormsData | null | undefined;
+  /** 当前应用 ID：传入后按「当前应用表单 / 其他应用表单」分组展示 */
+  currentAppId?: string;
+  /** 选中的 entryId（受控） */
+  value?: string;
+  /** 选中回调（返回 appId + entryId + 原始条目） */
+  onChange?: (result: TeamWideFormSelectChangeResult) => void;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+// ── 1. 下拉选择 ───────────────────────────────────────────────────
+
+export interface TeamWideFormSelectProps extends BaseProps {
+  /** 非受控默认值 */
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/**
+ * 全量表单选择（下拉形式）：数据源为一次拉全的应用+表单接口，
+ * 树形展示 应用分组→应用→表单分组→表单。
+ */
+export const TeamWideFormSelect = ({
+  data,
+  currentAppId,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = '请选择表单',
+  searchPlaceholder,
+  disabled = false,
+  className,
+}: TeamWideFormSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [triggerWidth, setTriggerWidth] = useState(0);
+  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const sections = useMemo(
+    () => appsAndFormsToTree(data, currentAppId),
+    [data, currentAppId]
+  );
+  const selected = useMemo(
+    () => findSelected(sections, value),
+    [sections, value]
+  );
+
+  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
+    triggerBtnRef.current = node;
+    if (node) setTriggerWidth(node.offsetWidth);
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(
+        '[data-bs-team-form-select-portal]'
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-team-form-select-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  const handleChange = useCallback(
+    (result: TeamWideFormSelectChangeResult) => {
+      if (controlledValue === undefined) setInternalValue(result.entryId);
+      onChange?.(result);
+      setOpen(false);
+    },
+    [controlledValue, onChange]
+  );
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          if (disabled) return;
+          setOpen(next);
+          if (next && triggerBtnRef.current) {
+            setTriggerWidth(triggerBtnRef.current.offsetWidth);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5 px-[10px]',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'text-left cursor-pointer hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            <span
+              className={cn(
+                'text-[14px] leading-[normal] truncate',
+                selected ? 'text-[#030303]' : 'text-[#999999]'
+              )}
+            >
+              {selected?.label ?? placeholder}
+            </span>
+            <DropdownChevron open={open} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[12px]"
+          style={{ minWidth: triggerWidth || undefined }}
+        >
+          <TeamWideFormTreePanel
+            sections={sections}
+            value={value}
+            onSelect={handleChange}
+            searchPlaceholder={searchPlaceholder}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+// ── 2. 左侧滑入抽屉 ───────────────────────────────────────────────
+
+export interface TeamWideFormDrawerProps extends BaseProps {
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 触发器（可选；不传则完全由 open 控制） */
+  trigger?: React.ReactNode;
+  /** 数据加载状态：加载中/失败时替代树区域展示（不传则按 data 直接渲染树） */
+  status?: 'loading' | 'error';
+  /** status === 'error' 时展示重试按钮，点击回调 */
+  onRetry?: () => void;
+}
+
+/**
+ * 全量表单选择（左侧滑入抽屉）：选中表单后自动关闭。
+ * 视觉对齐 Figma：左侧 300px 白色面板 + 半透明蒙版。
+ */
+export const TeamWideFormDrawer = ({
+  data,
+  currentAppId,
+  value,
+  onChange,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  searchPlaceholder,
+  trigger,
+  status,
+  onRetry,
+}: TeamWideFormDrawerProps) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const sections = useMemo(
+    () => appsAndFormsToTree(data, currentAppId),
+    [data, currentAppId]
+  );
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  const handleChange = useCallback(
+    (result: TeamWideFormSelectChangeResult) => {
+      onChange?.(result);
+      setOpen(false);
+    },
+    [onChange, setOpen]
+  );
+
+  return (
+    <>
+      {trigger && <span onClick={() => setOpen(true)}>{trigger}</span>}
+      <EnhancedDrawer
+        open={open}
+        onOpenChange={setOpen}
+        direction="left"
+        width={300}
+        title="切换表单"
+      >
+        <div className="h-full overflow-hidden p-[12px]">
+          {status === 'error' ? (
+            <div className="flex flex-col items-center justify-center h-full gap-[12px]">
+              <span className="text-[12px] text-[#999999]">应用/表单加载失败</span>
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  className="h-[30px] px-[16px] rounded-[4px] border border-[#E0E0E0] text-[14px] text-[#0265FF] active:bg-[#F0F6FF]"
+                >
+                  重试
+                </button>
+              )}
+            </div>
+          ) : status === 'loading' ? (
+            <div className="flex items-center justify-center h-full text-[12px] text-[#999999]">
+              加载中…
+            </div>
+          ) : (
+            <TeamWideFormTreePanel
+              sections={sections}
+              value={value}
+              onSelect={handleChange}
+              searchPlaceholder={searchPlaceholder}
+              maxHeight="calc(100vh - 60px)"
+            />
+          )}
+        </div>
+      </EnhancedDrawer>
+    </>
+  );
+};