@baishuyun/ai-design 1.0.3 → 1.0.5

package/src/components/ui/select.tsx

@@ -0,0 +1,236 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex items-center justify-between gap-2',
+      '[&>span]:truncate [&>span]:min-w-0',
+      'h-[34px] px-[10px] py-[7px] rounded-[4px]',
+      'bg-white border border-[#e0e0e0]',
+      'text-[14px] text-[#030303]',
+      'data-[placeholder]:text-[#999999]',
+      'focus:outline-none focus:border-[#0265ff] focus:ring-0',
+      'disabled:bg-[#eff0f6] disabled:cursor-not-allowed',
+      'dark:bg-background dark:border-border dark:text-foreground',
+      'dark:data-[placeholder]:text-muted-foreground',
+      'dark:disabled:bg-[oklch(0.279_0.041_260.031)]',
+      'w-full',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50 transition-transform data-[state=open]:rotate-180" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: HTMLElement | null;
+  }
+>(
+  (
+    { className, children, position = 'popper', container: containerProp, style, ...props },
+    ref
+  ) => {
+    const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
+
+    const setDetectorRef = React.useCallback((node: HTMLElement | null) => {
+      if (!node) return;
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>('[data-bs-select-portal]');
+        if (existing) {
+          setAutoContainer(existing);
+          return;
+        }
+
+        const container = document.createElement('div');
+        container.setAttribute('data-bs-select-portal', 'true');
+        rootNode.appendChild(container);
+        setAutoContainer(container);
+      }
+    }, []);
+
+    const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
+
+    return (
+      <>
+        {containerProp === undefined && (
+          <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
+        )}
+        <SelectPrimitive.Portal container={effectiveContainer ?? undefined}>
+          <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+              'z-50 bg-white rounded-[4px] p-[4px]',
+              'shadow-[0_0_8px_rgba(0,0,0,0.1)]',
+              'data-[state=open]:animate-in data-[state=closed]:animate-out',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+              'data-[side=bottom]:slide-in-from-top-2',
+              'data-[side=left]:slide-in-from-right-2',
+              'data-[side=right]:slide-in-from-left-2',
+              'data-[side=top]:slide-in-from-bottom-2',
+              'dark:bg-background dark:border-border',
+              position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+              className
+            )}
+            position={position}
+            style={{
+              boxSizing: 'border-box',
+              maxHeight: 'var(--radix-select-content-available-height)',
+              minWidth:
+                position === 'popper'
+                  ? 'var(--radix-select-trigger-width)'
+                  : '120px',
+              ...style,
+            }}
+            {...props}
+          >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+              className={cn(
+                'p-1',
+                position === 'popper' && 'w-full'
+              )}
+              style={
+                position === 'popper'
+                  ? {
+                      height: 'var(--radix-select-trigger-height)',
+                      minWidth: 'var(--radix-select-trigger-width)',
+                    }
+                  : undefined
+              }
+            >
+              {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </>
+    );
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-[10px] py-[6px] text-[14px] font-bold text-[#030303] dark:text-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex items-center gap-2 px-[10px] py-[7px]',
+      'text-[14px] text-[#030303]',
+      'cursor-pointer select-none rounded-[4px]',
+      'data-[highlighted]:bg-[#eff0f6] data-[highlighted]:outline-none',
+      'data-[state=checked]:bg-[#f0f6ff] data-[state=checked]:text-[#0265ff]',
+      'dark:text-foreground dark:data-[highlighted]:bg-accent dark:data-[state=checked]:bg-accent',
+      className
+    )}
+    {...props}
+  >
+    {/* <span className="absolute left-[10px] flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span> */}
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('h-px bg-[#e0e0e0] my-1 dark:bg-border', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-[#4ACC8C]/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[20px] data-[size=default]:w-[40px] data-[size=sm]:h-[14px] data-[size=sm]:w-[28px] data-[state=checked]:bg-[#4ACC8C] data-[state=unchecked]:bg-[#ccc]",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-white transition-transform group-data-[size=default]/switch:size-[16px] group-data-[size=sm]/switch:size-[10px] data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center w-full gap-[2px] p-[2px] bg-[#EFF0F6] rounded-[4px]',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center w-full h-[30px]',
+      'px-[10px] py-[7px] rounded-[4px]',
+      'text-[14px] text-[#121111] leading-normal',
+      'bg-transparent border border-solid border-[#EFF0F6]',
+      'transition-all duration-200 ease-out',
+      'outline-none cursor-pointer',
+      'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
+      'data-[state=active]:text-[#0265FF] data-[state=active]:border-[#E0E0E0] data-[state=active]:bg-white',
+      'focus-visible:ring-2 focus-visible:ring-[#0265FF] focus-visible:ring-offset-1',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 outline-none',
+      'data-[state=inactive]:hidden',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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/css.d.ts

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

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/index.ts

@@ -5,17 +5,35 @@ export { cn, copyTextToClipboard, toHumanReadable, isSubformFieldEqual } from '.
 export { useShadow } from './hooks/use-shadow';
 
 // Constants
-export { transCls, BotImgUrl, WarningImgUrl, ChatHeaderBgImgUrl, FORM_ICON_OPTIONS, FieldTypeNameMap, FIELD_ICON_CODE_MAP } 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';
@@ -83,3 +179,23 @@ 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/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,
+    },
+  },
+};