@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/ui/textarea.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    className={cn(
+      'h-[120px] p-[10px] rounded-[4px]',
+      'bg-white border border-[#e0e0e0]',
+      'text-[14px] text-[#030303] placeholder:text-[#999999]',
+      'focus:outline-none focus:border-[#0265ff] focus:ring-0',
+      'disabled:bg-[#eff0f6] disabled:cursor-not-allowed disabled:opacity-100',
+      'dark:bg-background dark:border-border dark:text-foreground dark:placeholder:text-muted-foreground',
+      'dark:disabled:bg-[oklch(0.279_0.041_260.031)]',
+      'resize-none',
+      'w-full',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/const/ui.ts

@@ -1,4 +1,5 @@
 import { FormIconOption } from "../types";
+import { FieldType } from "@baishuyun/types";
 
 export const BotImgUrl = `
   url(data:image/png;base64,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)
@@ -50,3 +51,69 @@ export const FORM_ICON_OPTIONS: FormIconOption[] = [
   { id: 'biaodan35', code: '', label: '表单35', value: 59 },
   { id: 'biaodan36', code: '', label: '表单36', value: 60 },
 ];
+
+export const FieldTypeNameMap: Record<FieldType, string> = {
+  text: '输入框',
+  password: '密码输入框',
+  location: '定位',
+  datetime: '日期时间选择器',
+  radiogroup: '单选框',
+  radio: '单选框',
+  combo: '下拉框',
+  address: '地址',
+  button: '按钮',
+  textarea: '多行输入框',
+  combocheck: '多选下拉框',
+  checkboxgroup: '多选框组',
+  separator: '分割线',
+  upload: '附件上传',
+  number: '数字输入框',
+  dataload: '数据加载',
+  image: '图片上传',
+  signature: '签名',
+  dept: '部门选择',
+  user: '成员选择',
+  usergroup: '成员多选',
+  deptgroup: '部门多选',
+  unknown: '未知类型',
+  sn: '流水号',
+  formula: '公式字段',
+  linkdata: '关联数据',
+  linkquery: '关联查询',
+  subform: '子表单',
+  flowState: '流程状态',
+  flowstate: '流程状态',
+};
+
+export const FIELD_ICON_CODE_MAP: Record<FieldType, string> = {
+  address: '&#xe881;',
+  subform: '&#xe847;',
+  password: '&#xe854;',
+  button: '&#xe8e8;',
+  textarea: '&#xe84f;',
+  datetime: '&#xe849;',
+  text: '&#xe854;',
+  location: '&#xe87f;',
+  radiogroup: '&#xe853;',
+  radio: '&#xe861;',
+  combo: '&#xe84a;',
+  formula: '',
+  flowState: '',
+  flowstate: '',
+  combocheck: '&#xe84b;',
+  separator: '&#xe850;',
+  checkboxgroup: '&#xe84c;',
+  upload: '&#xe621;',
+  number: '&#xe846;',
+  image: '&#xe880;',
+  signature: '&#xe87e;',
+  user: '&#xe856;',
+  dataload: '&#xe848;',
+  linkdata: '&#xe857;',
+  linkquery: '&#xe857;',
+  usergroup: '&#xe851;',
+  dept: '&#xe84d;',
+  sn: '&#xe882;',
+  deptgroup: '&#xe852;',
+  unknown: '&#xe848;',
+};

package/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/src/hooks/use-column-appear.ts

@@ -0,0 +1,78 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const TRANSITION = {
+  appearing: 'width 300ms cubic-bezier(0.4,0,0.2,1), opacity 250ms cubic-bezier(0.4,0,0.2,1) 100ms',
+  hiding: 'width 350ms cubic-bezier(0.4,0,0.2,1) 60ms, opacity 200ms ease-out',
+  neutral: 'width 350ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease-out',
+} as const;
+
+/** hiding 场景最长的 transition 耗时 (width 350ms + delay 60ms)，加少量余量用于 transitionend 兜底 */
+export const TRANSITION_FALLBACK_MS = 500;
+
+interface UseColumnAppearOptions {
+  /** 当前列是否处于隐藏状态 */
+  hidden: boolean;
+}
+
+interface UseColumnAppearResult {
+  /** 列是否正在执行 appear (hidden→visible) 动画 */
+  appearing: boolean;
+  /** 附加到列最外层 DOM 元素的 ref，用于监听 transitionend */
+  colRef: React.RefObject<HTMLDivElement>;
+  /** 当前适用的 transition CSS 属性，直接展开到 style={} */
+  getTransitionStyle: React.CSSProperties;
+}
+
+export const useColumnAppear = ({ hidden }: UseColumnAppearOptions): UseColumnAppearResult => {
+  const [appearing, setAppearing] = useState(false);
+  const prevHiddenRef = useRef<boolean | null>(null);
+  const colRef = useRef<HTMLDivElement>(null);
+
+  // 检测 hidden → visible 转换，触发 appearing
+  useLayoutEffect(() => {
+    if (prevHiddenRef.current === null) {
+      prevHiddenRef.current = hidden;
+      return;
+    }
+    if (prevHiddenRef.current && !hidden) {
+      setAppearing(true);
+    }
+    prevHiddenRef.current = hidden;
+  }, [hidden]);
+
+  // transitionend 监听 + 兜底 timeout 清除 appearing
+  useLayoutEffect(() => {
+    if (!appearing) return;
+    const el = colRef.current;
+    if (!el) return;
+
+    const onTransitionEnd = (e: TransitionEvent) => {
+      if (e.propertyName === 'width') {
+        setAppearing(false);
+      }
+
+      window.dispatchEvent(new Event('resize'));
+    };
+    el.addEventListener('transitionend', onTransitionEnd);
+
+    const fallback = setTimeout(() => setAppearing(false), TRANSITION_FALLBACK_MS);
+
+    return () => {
+      el.removeEventListener('transitionend', onTransitionEnd);
+      clearTimeout(fallback);
+    };
+  }, [appearing]);
+
+  // 计算当前适用的 transition 样式
+  const willChange = hidden || appearing ? ({ willChange: 'width, opacity' } as const) : {};
+  let transitionStyle: React.CSSProperties;
+  if (appearing) {
+    transitionStyle = { transition: TRANSITION.appearing, ...willChange };
+  } else if (hidden) {
+    transitionStyle = { transition: TRANSITION.hiding, ...willChange };
+  } else {
+    transitionStyle = { transition: TRANSITION.neutral };
+  }
+
+  return { appearing, colRef, getTransitionStyle: transitionStyle };
+};

package/src/hooks/use-portal-container.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+export const usePortalContainer = (portalName: string) => {
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const setTriggerRef = useCallback((node: HTMLElement | null) => {
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(`[${portalName}]`);
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute(portalName, 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  return { portalContainer, setTriggerRef };
+};

package/src/hooks/use-resizable-width.ts

@@ -5,6 +5,8 @@ interface UseResizableWidthOptions {
   range: [number, number];
   /** 初始宽度，未指定时取 range 上限 */
   initialWidth?: number;
+  /** 反转拖拽方向：拖拽鼠标向右时宽度减小而非增大 */
+  invertDrag?: boolean;
 }
 
 interface UseResizableWidthResult {
@@ -26,6 +28,7 @@ interface UseResizableWidthResult {
 export const useResizableWidth = ({
   range,
   initialWidth,
+  invertDrag,
 }: UseResizableWidthOptions): UseResizableWidthResult => {
   const [minWidth, maxWidth] = range;
   const [width, setWidth] = useState<number>(initialWidth ?? maxWidth);
@@ -39,11 +42,15 @@ export const useResizableWidth = ({
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       const delta = e.clientX - stateRef.current.startX;
-      const newWidth = Math.min(Math.max(stateRef.current.startWidth + delta, minWidth), maxWidth);
+      const adjustedDelta = invertDrag ? -delta : delta;
+      const newWidth = Math.min(
+        Math.max(stateRef.current.startWidth + adjustedDelta, minWidth),
+        maxWidth
+      );
 
       setWidth(newWidth);
     },
-    [minWidth, maxWidth]
+    [minWidth, maxWidth, invertDrag]
   );
 
   const handleMouseUp = useCallback(() => {
@@ -52,6 +59,7 @@ export const useResizableWidth = ({
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
 
+    window.dispatchEvent(new Event('resize'));
     document.body.style.cursor = ''; // 恢复默认光标
   }, [handleMouseMove]);
 

package/src/index.ts

@@ -1,21 +1,39 @@
 // Utils
-export { cn, copyTextToClipboard } from './lib/utils';
+export { cn, copyTextToClipboard, toHumanReadable, isSubformFieldEqual } from './lib/utils';
 
 // Hooks
 export { useShadow } from './hooks/use-shadow';
 
 // Constants
-export { transCls, BotImgUrl, WarningImgUrl, ChatHeaderBgImgUrl, FORM_ICON_OPTIONS } from './const/ui';
+export {
+  transCls,
+  BotImgUrl,
+  WarningImgUrl,
+  ChatHeaderBgImgUrl,
+  FORM_ICON_OPTIONS,
+  FieldTypeNameMap,
+  FIELD_ICON_CODE_MAP,
+} from './const/ui';
 
 // Types
 export type { FormIconOption, LegacySlotRenderer } from './types';
 
+// Icons
+export { CalendarIcon } from './components/icons/calendar-icon';
+
 // UI primitives (shadcn)
 export * from './components/ui/button';
 export * from './components/ui/dialog';
+export * from './components/ui/drawer';
 export * from './components/ui/popover';
 export * from './components/ui/tooltip';
 export * from './components/ui/spinner';
+export * from './components/ui/label';
+export * from './components/ui/input';
+export * from './components/ui/textarea';
+export * from './components/ui/select';
+export * from './components/ui/calendar';
+export * from './components/ui/form';
 
 // AI Design Components
 export { AbsFullscreenGradientBg } from './components/abs-fullscreen-gradient-bg';
@@ -37,8 +55,84 @@ export { BotIcon } from './components/bot-icon';
 export * from './components/bs-icons';
 export { CardFieldsWrapper, CardField } from './components/card-field';
 export { Card } from './components/card';
+export { IconCard } from './components/icon-card';
+export type { IconCardProps } from './components/icon-card';
+export { AgentTag } from './components/agent-helper/agent-tag';
+export type { AgentTagProps } from './components/agent-helper/agent-tag';
+export { AgentHelperCard } from './components/agent-helper/agent-helper-card';
+export type { AgentHelperCardProps } from './components/agent-helper/agent-helper-card';
+export { AgentHelperCardList } from './components/agent-helper/agent-helper-card-list';
+export type { AgentHelperCardListProps } from './components/agent-helper/agent-helper-card-list';
+export { PlaceholderCard } from './components/agent-helper/placeholder-card';
+export type { PlaceholderCardProps } from './components/agent-helper/placeholder-card';
+export { AgentEntryCard } from './components/agent-helper/agent-entry-card';
+export type { AgentEntryCardProps } from './components/agent-helper/agent-entry-card';
+export { AgentCategorySelectMenu } from './components/agent-helper/agent-category-select-menu';
+export type { AgentCategorySelectMenuProps } from './components/agent-helper/agent-category-select-menu';
+export { TriggerSelect, TriggerConfigList } from './components/agent-helper/trigger-select';
+export { SearchInput, type SearchInputProps } from './components/agent-helper/search-input';
+export type {
+  ITriggerSelectProps,
+  TriggerCardConfig,
+} from './components/agent-helper/trigger-select';
+export { FormSelect } from './components/agent-helper/form-select';
+export { AppSelect, groupsToAppTreeNodes } from './components/agent-helper/app-select';
+export type { AppSelectProps } from './components/agent-helper/app-select';
+export type {
+  FormSelectProps,
+  FormSelectItem,
+  FormSelectChangeResult,
+} from './components/agent-helper/form-select';
+export { FormActionTriggerSelect } from './components/agent-helper/form-action-trigger-select';
+export type { IFormActionTriggerSelectProps } from './components/agent-helper/form-action-trigger-select';
+export { FlowNodeActionTriggerSelect } from './components/agent-helper/flow-node-action-trigger-select';
+export type { IFlowNodeActionTriggerSelectProps } from './components/agent-helper/flow-node-action-trigger-select';
+export { TriggerTimeSourceTypeSelect } from './components/agent-helper/trigger-time-source-type-select';
+export type {
+  TriggerTimeSourceTypeOption,
+  TriggerTimeSourceTypeSelectProps,
+} from './components/agent-helper/trigger-time-source-type-select';
+export { TriggerTimePreferenceSelect } from './components/agent-helper/trigger-time-preference-select';
+export type { TriggerTimePreferenceSelectProps } from './components/agent-helper/trigger-time-preference-select';
+export { OffsetPreferenceSelect } from './components/agent-helper/offset-preference-select';
+export type { OffsetPreferenceSelectProps } from './components/agent-helper/offset-preference-select';
+export { RepeatPreferenceTypeSelect, RepeatPreferenceTypeOptions } from './components/agent-helper/repeat-preference-type-select';
+export type {
+  RepeatPreferenceTypeOption,
+  RepeatPreferenceTypeSelectProps,
+} from './components/agent-helper/repeat-preference-type-select';
+export { WeekdaysSelect, WeekdaysOptions } from './components/agent-helper/weekdays-select';
+export type {
+  WeekdaysOption,
+  WeekdaysSelectProps,
+} from './components/agent-helper/weekdays-select';
+export { MonthdaysSelect, MonthdaysOptions } from './components/agent-helper/monthdays-select';
+export type {
+  MonthdaysOption,
+  MonthdaysSelectProps,
+} from './components/agent-helper/monthdays-select';
+export { RepeatByTypeSelect, RepeatByTypeOptions } from './components/agent-helper/repeat-by-type-select';
+export type {
+  RepeatByTypeOption,
+  RepeatByTypeSelectProps,
+} from './components/agent-helper/repeat-by-type-select';
+export { RepeatPreferenceSelect } from './components/agent-helper/repeat-preference-select';
+export type { RepeatPreferenceSelectProps } from './components/agent-helper/repeat-preference-select';
+export { FieldSelect, FieldSelectPopover } from './components/agent-helper/field-select';
+export type {
+  FieldSelectProps,
+  FieldSelectPopoverProps,
+} from './components/agent-helper/field-select';
+export { FormDivider } from './components/agent-helper/form-divider';
+export type { FormDividerProps } from './components/agent-helper/form-divider';
+export { RelationalOperatorSelect } from './components/agent-helper/relational-operator-select';
+export type { IRelationalOperatorSelectProps } from './components/agent-helper/relational-operator-select';
 export { ChatAreaHeader } from './components/chat-area-header';
 export { CircleChecker } from './components/circle-checker';
+export { RadioCard } from './components/radio-card';
+export type { RadioCardProps } from './components/radio-card';
+export { CheckCard } from './components/check-card';
+export type { CheckCardProps } from './components/check-card';
 export { CollapsibleTxtMsg } from './components/collapsible-txt-msg';
 export { ConfirmDialog } from './components/confirm-dialog';
 export { FieldsDesignInfoTable } from './components/fields-design-info-table';
@@ -62,6 +156,8 @@ export type { MessageContentProps } from './components/message-content';
 export { LinearGradientColorBgAnimation } from './components/linear-gradient-color-bg-animation';
 export { NumbersMsgPart } from './components/number-part';
 export { OptionItem } from './components/option-item';
+export { OutputConfigEditor } from './components/output-config-editor';
+export type { OutputConfigEditorProps, OutputFieldOption } from './components/output-config-editor';
 export { PreviewerHeader } from './components/previewer-header';
 export { PrimaryConfirmBtn } from './components/primary-confirm-btn';
 export { PrimaryEntryBtn } from './components/primary-entry-btn';
@@ -74,3 +170,32 @@ export { UserTextMsgBubble } from './components/user-txt-msg-bubble';
 export { OfficeContainer } from './components/office-container';
 export type { IOfficeContainerProps } from './components/office-container';
 export { WarningMessage } from './components/warning-msg';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './components/collapsible';
+export { FieldIcon } from './components/field-icon';
+export { FieldChecker } from './components/field-checker';
+export type { FieldCheckerProps } from './components/field-checker';
+export { FieldValueChecker } from './components/field-value-checker';
+export type { FieldValueCheckerProps } from './components/field-value-checker';
+export { SubformFieldsValueChecker } from './components/subform-fields-value-checker';
+export { FieldCheckerListMsg, FieldValueCheckerListMsg } from './components/field-checker-list-msg';
+export type { FieldCheckerListMsgRef } from './components/field-checker-list-msg';
+export { FieldValueInput } from './components/agent-helper/field-value-input';
+export type { FieldValueInputProps } from './components/agent-helper/field-value-input';
+export { PromptInput } from './components/agent-helper/prompt-input';
+export type { PromptInputProps } from './components/agent-helper/prompt-input';
+export { AgentHelperMainLayout } from './components/agent-helper/agent-helper-main-layout';
+export type { IAgentHelperMainLayoutProps } from './components/agent-helper/agent-helper-main-layout';
+export * from './components/agent-helper/condition-input';
+export * from './components/agent-helper/field-edit-preference-select';
+export { DataTable } from './components/agent-helper/table';
+export * from './components/agent-helper/table';
+export type { DataTableProps } from './components/agent-helper/table';
+export { DatePicker, DateInput } from './components/agent-helper/date-picker';
+export type { DatePickerProps, DateInputProps, DateFormat } from './components/agent-helper/date-picker';
+export { DateRangePicker } from './components/date-range-picker';
+export type { DateRangePickerProps } from './components/date-range-picker';
+export { ExecLogFilter } from './components/agent-helper/exec-log-filter';
+export type {
+  ExecLogFilterValue,
+  ExecLogFilterProps,
+} from './components/agent-helper/exec-log-filter';

package/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { FieldType, IAddress, ILocation, IField } from '@baishuyun/types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -50,3 +51,69 @@ export async function copyTextToClipboard(text: string): Promise<boolean> {
     return false;
   }
 }
+
+function isOptionArray(value: unknown): value is Array<{ label: string; value: string }> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  return value.every(
+    (item) =>
+      typeof item === 'object' &&
+      item !== null &&
+      'label' in item &&
+      'value' in item &&
+      typeof (item as any).label === 'string' &&
+      typeof (item as any).value === 'string'
+  );
+}
+
+export const toHumanReadable = (value: unknown, type: FieldType): string | unknown => {
+  if (type === 'address' && typeof value === 'object') {
+    const v = value as IAddress;
+    return `${v.province} ${v.city} ${v.district} ${v.detail}`;
+  }
+
+  if (type === 'location' && typeof value === 'object') {
+    const v = value as ILocation;
+    const lnglatXY = v.lnglatXY || ['', ''];
+    return `经度: ${lnglatXY[0] || ''}, 纬度: ${lnglatXY[1] || ''}`;
+  }
+
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  if (isOptionArray(value)) {
+    const values = value.map((item) => item.value);
+    return values.join(', ');
+  }
+
+  return value;
+};
+
+export const isSubformFieldEqual = (f1: IField, f2: IField, widgetArrKey: string = 'value') => {
+  // 不是子表单字段，不进行比较，视为相等
+  if (f1?.widget?.type !== 'subform' || f2?.widget?.type !== 'subform') {
+    return true;
+  }
+
+  const subFields1 = (f1?.widget as any)[widgetArrKey] || [];
+  const subFields2 = (f2?.widget as any)[widgetArrKey] || [];
+
+  // 子表单字段长度不等，视为不同
+  if (subFields1.length !== subFields2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < subFields1.length; i++) {
+    const subField1 = subFields1[i];
+    const subField2 = subFields2[i];
+
+    if (subField1.length !== subField2.length) {
+      return false;
+    }
+  }
+
+  return true;
+};

package/src/stories/AgentCategorySelectMenu.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentCategorySelectMenu } from '../components/agent-helper/agent-category-select-menu';
+
+const meta = {
+  title: 'Agent Helper/AgentCategorySelectMenu',
+  component: AgentCategorySelectMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    value: 'all-agent',
+    onChange: () => {},
+  },
+} satisfies Meta<typeof AgentCategorySelectMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const SystemSelected: Story = {
+  args: {
+    value: 'system-agent',
+  },
+};
+
+export const CustomSelected: Story = {
+  args: {
+    value: 'custom-agent',
+  },
+};

package/src/stories/AgentEntryCard.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AgentEntryCard } from '../components/agent-helper/agent-entry-card';
+import type { IAgentInfo } from '@baishuyun/types';
+
+const sampleAgent: IAgentInfo = {
+  id: 'agent-1',
+  name: 'AI翻译',
+  description:
+    '懂语境，不只是翻译字面——支持多语言互译，精准把握专业术语与日常口语。无论是工作中的外文邮件、旅行中的路标菜单，还是追剧时的生肉，交给它，准确又自然。内容最多两行，超出省略',
+  icon: 'https://picsum.photos/80/80',
+  version: 'V56',
+  lastUpdated: '2026-05-21 13:12:12',
+  installCount: 8000,
+};
+
+const meta = {
+  title: 'Agent Helper/AgentEntryCard',
+  component: AgentEntryCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    agent: sampleAgent,
+    onSelect: () => {},
+    onLogClick: () => {},
+  },
+} satisfies Meta<typeof AgentEntryCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const NoVersion: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      version: undefined,
+    },
+  },
+};
+
+export const NoLastUpdated: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      lastUpdated: undefined,
+    },
+  },
+};
+
+export const NoInstallCount: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      installCount: undefined,
+    },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    agent: {
+      id: 'agent-minimal',
+      name: 'AI翻译',
+      icon: 'https://picsum.photos/80/80',
+    },
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      description:
+        '这是一段非常长的描述文字，用于测试两行省略的效果。当描述内容超过两行时，需要自动省略并在末尾显示省略号，确保卡片整体布局不被超长文本所破坏。这段文字应该足够长以达到测试效果。',
+    },
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    agent: {
+      ...sampleAgent,
+      description: undefined,
+    },
+  },
+};