@baishuyun/ai-design 2.0.40 → 2.0.42

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

@@ -0,0 +1,180 @@
+import { useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { SearchIcon } from '../../bs-icons';
+import { AppIcon, FontIcon } from '../../font-icon';
+import { useFormTree } from './use-form-tree';
+import type {
+  TeamWideFormSelectChangeResult,
+  TeamWideFormTreeNode,
+  TeamWideFormTreeSection,
+} from './types';
+
+// ── Inline Icons（与 app-select / form-select 保持一致） ──────────
+
+/** 文件夹/分组图标 */
+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"
+    />
+  </svg>
+);
+
+/** 展开/收起箭头 */
+const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+  >
+    <path
+      d="M6 8L9 11L12 8"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// ── Props ─────────────────────────────────────────────────────────
+
+export interface TeamWideFormTreePanelProps {
+  sections: TeamWideFormTreeSection[];
+  /** 当前选中的 entryId */
+  value?: string;
+  onSelect: (result: TeamWideFormSelectChangeResult) => void;
+  searchPlaceholder?: string;
+  /** 树区最大高度，超出滚动（数字按 px，或任意 CSS 长度如 calc(100vh-60px)） */
+  maxHeight?: number | string;
+  className?: string;
+}
+
+// ── Component ─────────────────────────────────────────────────────
+
+/**
+ * 全量表单选择的树形主体（搜索 + 树），下拉与抽屉两种交互共用。
+ * 视觉对齐 Figma：行高 34px、每级缩进 22px、选中行 bg #EFF0F6。
+ */
+export const TeamWideFormTreePanel = ({
+  sections,
+  value,
+  onSelect,
+  searchPlaceholder = '输入应用/表单名称来搜索',
+  maxHeight = 400,
+  className,
+}: TeamWideFormTreePanelProps) => {
+  const {
+    searchQuery,
+    setSearchQuery,
+    filteredSections,
+    isExpanded,
+    toggleExpanded,
+    searching,
+    hasResult,
+  } = useFormTree(sections);
+
+  const handleSelect = useCallback(
+    (node: TeamWideFormTreeNode) => {
+      const hasChildren = node.children && node.children.length > 0;
+      // 分组/应用行：切换展开；叶子（表单）：选中
+      if (hasChildren || node.type !== 'form') {
+        if (hasChildren) toggleExpanded(node.id);
+        return;
+      }
+      if (node.data) {
+        onSelect({
+          appId: node.data.appId,
+          entryId: node.data.entryId,
+          form: node.data,
+        });
+      }
+    },
+    [onSelect, toggleExpanded]
+  );
+
+  const renderNodeRow = (node: TeamWideFormTreeNode, depth: number): React.ReactNode => {
+    const hasChildren = node.children && node.children.length > 0;
+    const expanded = searching || isExpanded(node.id);
+    const isSelected = node.type === 'form' && value === node.id;
+    const leftPad = depth * 22 + 10; // 10, 32, 54, 78, 102...
+
+    return (
+      <div key={node.id}>
+        <button
+          type="button"
+          onClick={() => handleSelect(node)}
+          className={cn(
+            'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left pr-[10px] py-[10px]',
+            transCls,
+            isSelected ? 'bg-[#EFF0F6] text-[#030303]' : 'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+          style={{ paddingLeft: `${leftPad}px` }}
+        >
+          {hasChildren && <ToggleIcon expanded={expanded} />}
+          {node.type === 'appGroup' || node.type === 'formGroup' ? <FolderIcon /> : null}
+          {node.type === 'app' && node.appIcon != null && <AppIcon name={node.appIcon} />}
+          {node.type === 'form' && node.formIcon != null && <FontIcon name={node.formIcon} />}
+          <span className="text-[14px] truncate leading-[normal] flex-1 min-w-0">{node.label}</span>
+        </button>
+
+        {hasChildren && expanded && (
+          <div>{node.children!.map((child) => renderNodeRow(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-[4px]', className)}>
+      {/* 搜索框 */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* 树区（data-vaul-no-drag：滚动交给原生；抽屉侧 modal=false + dismissible=false
+          关掉 body 滚动锁与 vaul 拖拽指针捕获，此处无需额外覆盖） */}
+      <div
+        className="overflow-y-auto"
+        style={{ maxHeight, scrollbarWidth: 'none' }}
+        data-vaul-no-drag
+      >
+        {hasResult ? (
+          filteredSections.map((section) => (
+            <div key={section.key}>
+              {/* section 标题（当前应用表单 / 其他应用表单） */}
+              {section.title && (
+                <div className="flex flex-col justify-between h-[32px] pr-[10px] pt-[9px]">
+                  <div className="flex items-center gap-[6px]">
+                    <FolderIcon />
+                    <span className="text-[12px] text-[#666666] leading-[normal]">
+                      {section.title}
+                    </span>
+                  </div>
+                  <div className="h-px bg-[#E0E0E0] mt-[7px]" />
+                </div>
+              )}
+              {section.nodes.map((node) => renderNodeRow(node, 0))}
+            </div>
+          ))
+        ) : (
+          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+            {searching ? '未找到相关应用/表单' : '暂无可选表单'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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/font-icon.tsx

@@ -1,10 +1,4 @@
-import { getIconUnicode } from "@baishuyun/ai-feat-utils";
-
-function getFormIconClass(icon: number): string {
-  const isNew = icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
-}
+import { getIconUnicode, FORM_ICON_UNICODE_MAP } from "@baishuyun/ai-feat-utils";
 
 export const AppIcon = ({
   name
@@ -31,7 +25,10 @@ export const FontIcon = ({
   style?: React.CSSProperties;
   color?: string;
 }) => {
-  if (!code && !name) {
+  // 判空：只有 null/undefined 才算「无图标」。
+  // 注意不能用 !name——icon 为 0 是合法图标（表单默认 icon 0），
+  // !0 为真会把它误判成无图标，导致绝大多数表单图标不渲染。
+  if (!code && (name === undefined || name === null)) {
     return null;
   }
 
@@ -47,10 +44,16 @@ export const FontIcon = ({
 
   const iconCode = code || getIconUnicode(name?.toString() || '');
   if (!iconCode) {
+    // 数字表单图标：不用 .icon-bsy-form-N 的 :before 内码（部分环境
+    // shadow DOM / WebView 中 :before content 无法生成），改为把 unicode
+    // 字符直接放进文本内容（与 sdk-icon 同法），font-family 走 finex/finex-new
+    const unicode = FORM_ICON_UNICODE_MAP[name!];
+    const fontFamily = name! >= 25 ? 'finex-new' : 'finex';
     return (
       <i
-        className={getFormIconClass(name!)}
-        style={{ fontSize: 16, lineHeight: 1 }}
+        className={className}
+        style={{ fontSize: 16, lineHeight: 1, fontStyle: 'normal', fontFamily, color: '#0265ff', ...style }}
+        dangerouslySetInnerHTML={{ __html: unicode ? `&#x${unicode};` : '' }}
       />
     )
   }

package/src/components/ui/enhanced-drawer.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../lib/utils';
+import { Drawer, DrawerContent, DrawerTitle } from './drawer';
+
+export type EnhancedDrawerDirection = 'left' | 'right' | 'top' | 'bottom';
+
+export interface EnhancedDrawerProps {
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 滑入方向，默认 right */
+  direction?: EnhancedDrawerDirection;
+  /** 侧边抽屉宽度（left/right 生效），默认 300 */
+  width?: number;
+  /** 无障碍标题（sr-only 展示） */
+  title?: string;
+  /** 是否显示遮罩，默认 true */
+  showOverlay?: boolean;
+  /** 点击遮罩是否关闭，默认 true */
+  overlayClosable?: boolean;
+  /** 遮罩点击回调（额外行为，如打点） */
+  onOverlayClick?: () => void;
+  /** 遮罩附加样式 */
+  overlayStyle?: React.CSSProperties;
+  /** 抽屉面板附加 className */
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * 增强版抽屉（基于 vaul，面向 shadow DOM / WebView 环境的封装）。
+ *
+ * 统一处理了以下兼容问题，业务组件无需再各自处理：
+ * 1. `modal={false}` —— 关闭 Radix Dialog 的 body 滚动锁（react-remove-scroll 的
+ *    touchmove preventDefault 在 shadow DOM 里因事件目标 retarget 无法识别抽屉内
+ *    滚动容器，会锁死滚动）；同时 vaul 的 Overlay 在 modal=false 时返回 null。
+ * 2. `dismissible={false}` —— 关闭 vaul 拖拽关闭，避免 onPress 每次 pointerdown 都
+ *    setPointerCapture 禁掉原生触摸滚动。
+ * 3. 手动渲染遮罩（vaul 遮罩因 modal=false 消失），点遮罩关闭走受控路径
+ *    （绕过被 dismissible 拦掉的 vaul 关闭路径）。
+ *
+ * 内容区若需滚动，业务组件在自身滚动容器上加 `data-vaul-no-drag`（保险，
+ * dismissible=false 已阻止拖拽，此标记可防未来语义变化）。
+ */
+export const EnhancedDrawer = ({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  direction = 'right',
+  width = 300,
+  title,
+  showOverlay = true,
+  overlayClosable = true,
+  onOverlayClick,
+  overlayStyle,
+  className,
+  children,
+}: EnhancedDrawerProps) => {
+  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]
+  );
+
+  // 遮罩 portal 容器：抽屉内容经 vaul portal 进所在 shadow root，遮罩需与之同层
+  // 才能正确叠在抽屉下方（z 更低）且覆盖全屏
+  const [maskContainer, setMaskContainer] = useState<Element | null>(null);
+  const maskHostRef = useCallback((node: HTMLSpanElement | null) => {
+    if (!node) {
+      setMaskContainer(null);
+      return;
+    }
+    const root = node.getRootNode();
+    setMaskContainer(
+      root instanceof ShadowRoot ? (root as unknown as Element) : document.body
+    );
+  }, []);
+
+  const handleOverlayClick = useCallback(() => {
+    onOverlayClick?.();
+    if (overlayClosable) setOpen(false);
+  }, [onOverlayClick, overlayClosable, setOpen]);
+
+  const isHorizontal = direction === 'left' || direction === 'right';
+
+  return (
+    <>
+      <span ref={maskHostRef} style={{ display: 'none' }} />
+
+      {showOverlay &&
+        open &&
+        maskContainer &&
+        createPortal(
+          <div
+            onClick={handleOverlayClick}
+            aria-hidden="true"
+            style={{
+              position: 'fixed',
+              inset: 0,
+              background: 'rgba(0,0,0,0.3)',
+              zIndex: 40,
+              ...overlayStyle,
+            }}
+          />,
+          maskContainer
+        )}
+
+      <Drawer
+        open={open}
+        onOpenChange={setOpen}
+        direction={direction}
+        modal={false}
+        dismissible={false}
+      >
+        <DrawerContent
+          className={cn(className)}
+          hideOverlay
+          style={isHorizontal ? { width: `${width}px`, maxWidth: `${width}px` } : undefined}
+        >
+          {title != null && <DrawerTitle className="sr-only">{title}</DrawerTitle>}
+          {children}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};

package/src/index.ts

@@ -26,6 +26,7 @@ export { EmptyAgentIcon } from './components/icons/empty-agent-icon';
 export * from './components/ui/button';
 export * from './components/ui/dialog';
 export * from './components/ui/drawer';
+export * from './components/ui/enhanced-drawer';
 export * from './components/ui/popover';
 export * from './components/ui/tooltip';
 export * from './components/ui/spinner';
@@ -41,6 +42,8 @@ export { AbsFullscreenGradientBg } from './components/abs-fullscreen-gradient-bg
 export { AgentSelect } from './components/agent-select';
 export type { AgentSelectAgent, AgentSelectProps } from './components/agent-select';
 export { AgentScrollSelector } from './components/agent-scroll-selector';
+export { AgentDrawer } from './components/agent-drawer';
+export type { AgentDrawerProps } from './components/agent-drawer';
 export type { AgentScrollSelectorProps } from './components/agent-scroll-selector';
 export { AttachmentPartGroup } from './components/attachment-part-group';
 export { AttachmentPart } from './components/attachment-part';
@@ -87,6 +90,21 @@ export type {
   TriggerCardConfig,
 } from './components/agent-helper/trigger-select';
 export { FormSelect } from './components/agent-helper/form-select';
+export {
+  TeamWideFormSelect,
+  TeamWideFormDrawer,
+} from './components/agent-helper/team-wide-form-select';
+export type {
+  TeamWideFormSelectProps,
+  TeamWideFormDrawerProps,
+} from './components/agent-helper/team-wide-form-select';
+export type {
+  TeamWideFormTreeNode,
+  TeamWideFormTreeSection,
+  TeamWideFormSelectChangeResult,
+} from './components/agent-helper/team-wide-form-select/types';
+export { appsAndFormsToTree } from './components/agent-helper/team-wide-form-select/data-adapter';
+
 export {
   AppSelect,
   groupsToAppTreeNodes,

package/src/stories/IconfontPicker.stories.tsx

@@ -0,0 +1,106 @@
+import { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FontIcon } from '../components/font-icon';
+import { copyTextToClipboard } from '../lib/utils';
+import { ICON_UNICODE_MAP, getIconUnicode } from '@baishuyun/ai-feat-utils';
+
+/**
+ * iconfont（sdk-icon 字体）图标浏览：
+ * 枚举 ICON_UNICODE_MAP 全部命名图标，支持搜索、点击复制图标名，
+ * 方便给 <FontIcon code={getIconUnicode(name)} /> 选图标。
+ */
+const IconfontPicker = () => {
+  const [keyword, setKeyword] = useState('');
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const names = useMemo(() => {
+    const all = Object.keys(ICON_UNICODE_MAP);
+    const kw = keyword.trim().toLowerCase();
+    return kw ? all.filter((n) => n.toLowerCase().includes(kw)) : all;
+  }, [keyword]);
+
+  return (
+    <div style={{ padding: 16, maxWidth: 960 }}>
+      <input
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        placeholder="搜索图标名（如 image / resourcelibrary / Scan）"
+        style={{
+          width: '100%',
+          height: 34,
+          padding: '0 10px',
+          marginBottom: 16,
+          border: '1px solid #E0E0E0',
+          borderRadius: 4,
+          fontSize: 14,
+          outline: 'none',
+          boxSizing: 'border-box',
+        }}
+      />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(96px, 1fr))',
+          gap: 8,
+        }}
+      >
+        {names.map((name) => (
+          <button
+            key={name}
+            type="button"
+            title={`点击复制：${name}`}
+            onClick={async () => {
+              await copyTextToClipboard(name);
+              setCopied(name);
+              setTimeout(() => setCopied((c) => (c === name ? null : c)), 800);
+            }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 6,
+              padding: '12px 4px',
+              background: copied === name ? '#F0F6FF' : '#fff',
+              border: `1px solid ${copied === name ? '#0265FF' : '#E0E0E0'}`,
+              borderRadius: 8,
+              cursor: 'pointer',
+            }}
+          >
+            <FontIcon
+              code={getIconUnicode(name)}
+              style={{ fontSize: 22, lineHeight: 1, color: '#121111' }}
+            />
+            <span
+              style={{
+                fontSize: 11,
+                color: '#666',
+                wordBreak: 'break-all',
+                textAlign: 'center',
+                lineHeight: 1.2,
+              }}
+            >
+              {name}
+            </span>
+          </button>
+        ))}
+      </div>
+      {names.length === 0 && (
+        <div style={{ textAlign: 'center', color: '#999', padding: 24 }}>
+          未找到匹配「{keyword}」的图标
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'Example/Icons/Iconfont Picker',
+  component: IconfontPicker,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof IconfontPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {};