@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/PromptInput.stories.tsx

@@ -0,0 +1,217 @@
+import { useState, useCallback } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromptInput } from '../components/agent-helper/prompt-input';
+import type { PromptInputProps } from '../components/agent-helper/prompt-input';
+import type { IField } from '@baishuyun/types';
+
+// ── Mock Data ─────────────────────────────────────────────────────
+
+const mockFields: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text_field', value: '' } },
+  { label: '多行文本', widget: { type: 'textarea', widgetName: 'textarea_field', value: '' } },
+  { label: '数字', widget: { type: 'number', widgetName: 'number_field', value: 0 } },
+  { label: '日期时间', widget: { type: 'datetime', widgetName: 'datetime_field', value: '' } },
+  { label: '附件上传', widget: { type: 'upload', widgetName: 'upload_field', value: '' } },
+  { label: '图片上传', widget: { type: 'image', widgetName: 'image_field', value: '' } },
+  { label: '单选框', widget: { type: 'radio', widgetName: 'radio_field', value: '' } },
+  { label: '下拉框', widget: { type: 'combo', widgetName: 'combo_field', value: '' } },
+  { label: '成员选择', widget: { type: 'user', widgetName: 'user_field', value: '' } },
+  { label: '部门选择', widget: { type: 'dept', widgetName: 'dept_field', value: '' } },
+  { label: '子表单', widget: { type: 'subform', widgetName: 'subform_field', value: '' } },
+  { label: '签名', widget: { type: 'signature', widgetName: 'sig_field', value: '' } },
+  { label: '流水号', widget: { type: 'sn', widgetName: 'sn_field', value: '' } },
+  { label: '公式', widget: { type: 'formula', widgetName: 'formula_field', value: '' } },
+];
+
+const mockFieldsWithSubForms: IField[] = [
+  { label: '单行文本', widget: { type: 'text', widgetName: 'text1', value: '' } },
+  {
+    label: '定位',
+    widget: {
+      type: 'location',
+      widgetName: 'location_field',
+      value: '',
+      items: [
+        { label: '地址', value: 'addr', widget: { type: 'address', widgetName: 'addr_field', value: '' } },
+        { label: '经度', value: 'lng', widget: { type: 'text', widgetName: 'lng_field', value: '' } },
+        { label: '纬度', value: 'lat', widget: { type: 'text', widgetName: 'lat_field', value: '' } },
+      ],
+    },
+  },
+  {
+    label: '子表单',
+    widget: {
+      type: 'subform',
+      widgetName: 'subform1',
+      value: '',
+      items: [
+        { label: '子字段一', value: 'sub1', widget: { type: 'text', widgetName: 'sub_text', value: '' } },
+        { label: '子字段二', value: 'sub2', widget: { type: 'number', widgetName: 'sub_num', value: 0 } },
+      ],
+    },
+  },
+];
+
+// ── Meta ──────────────────────────────────────────────────────────
+
+const meta: Meta<typeof PromptInput> = {
+  title: 'Agent Helper/PromptInput',
+  component: PromptInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {
+    fields: mockFields,
+    placeholder: '示例：放配置时候的提示词内容进行引导说明',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600, padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: '请根据以下信息生成报告：',
+  },
+};
+
+export const WithFieldTags: Story = {
+  args: {
+    defaultValue: 'AI内容翻译 ${text_field} 还有 ${textarea_field} ${number_field} 这几个字段信息',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    fields: [],
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '请输入提示词模板...',
+  },
+};
+
+export const WithSubForms: Story = {
+  args: {
+    fields: mockFieldsWithSubForms,
+  },
+};
+
+// ── Interactive Story ─────────────────────────────────────────────
+
+export const Interactive: Story = {
+  args: {
+    fields: mockFields,
+  },
+  render: (args: PromptInputProps) => {
+    const [template, setTemplate] = useState('');
+
+    const handleChange = useCallback((tpl: string) => {
+      setTemplate(tpl);
+    }, []);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <PromptInput {...args} onChange={handleChange} />
+
+        <div>
+          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>onChange 实时输出：</div>
+          <pre
+            style={{
+              padding: 12,
+              background: '#F5F5F5',
+              borderRadius: 4,
+              fontSize: 13,
+              lineHeight: 1.5,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              margin: 0,
+              minHeight: 40,
+            }}
+          >
+            {template || '(空)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ── Controlled Story ──────────────────────────────────────────────
+
+export const Controlled: Story = {
+  args: {
+    fields: mockFields,
+  },
+  render: (args: PromptInputProps) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <PromptInput {...args} value={value} onChange={setValue} />
+
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button
+            type="button"
+            onClick={() => setValue('预设模板：请填写 ${text_field} 字段')}
+            style={{
+              padding: '6px 12px',
+              fontSize: 14,
+              border: '1px solid #E0E0E0',
+              borderRadius: 4,
+              background: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            设置预设模板
+          </button>
+          <button
+            type="button"
+            onClick={() => setValue('')}
+            style={{
+              padding: '6px 12px',
+              fontSize: 14,
+              border: '1px solid #E0E0E0',
+              borderRadius: 4,
+              background: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            清空
+          </button>
+        </div>
+
+        <div>
+          <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>受控 value（onChange 输出）：</div>
+          <pre
+            style={{
+              padding: 12,
+              background: '#F5F5F5',
+              borderRadius: 4,
+              fontSize: 13,
+              lineHeight: 1.5,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              margin: 0,
+              minHeight: 40,
+            }}
+          >
+            {value || '(空)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/RadioCard.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RadioCard } from '../components/radio-card';
+
+const meta = {
+  title: 'AI Office/RadioCard',
+  component: RadioCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof RadioCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: '支持对话框模式',
+    description: '应用将以对话框形式弹出',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    title: '支持对话框模式',
+    description: '应用将以对话框形式弹出',
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: '支持对话框模式',
+    description: '应用将以对话框形式弹出',
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    title: '支持对话框模式',
+    description: '应用将以对话框形式弹出',
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+const ControlledComponent = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
+      <RadioCard
+        title="支持对话框模式"
+        description="应用将以对话框形式弹出"
+        checked={checked}
+        onCheckedChange={setChecked}
+      />
+      <button onClick={() => setChecked(!checked)}>
+        Toggle from outside (current: {checked ? 'checked' : 'unchecked'})
+      </button>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  args: {} as any,
+  render: () => <ControlledComponent />,
+};
+
+const MultipleOptionsComponent = () => {
+  const [selected, setSelected] = useState('dialog');
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <RadioCard
+        className='shrink-0 grow w-[30%]'
+        title="支持对话框模式"
+        description="应用将以对话框形式弹出"
+        checked={selected === 'dialog'}
+        onCheckedChange={() => setSelected('dialog')}
+      />
+      <RadioCard
+        className='shrink-0 grow w-[30%]'
+        title="支持侧边栏模式"
+        description="应用将以侧边栏形式展示"
+        checked={selected === 'sidebar'}
+        onCheckedChange={() => setSelected('sidebar')}
+      />
+      <RadioCard
+        className='shrink-0 grow w-[30%]'
+        title="支持全屏模式"
+        description="应用将全屏展示"
+        checked={selected === 'fullscreen'}
+        onCheckedChange={() => setSelected('fullscreen')}
+      />
+    </div>
+  );
+};
+
+export const MultipleOptions: Story = {
+  args: {} as any,
+  render: () => <MultipleOptionsComponent />,
+};

package/src/stories/RelationalOperatorSelect.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { RelationalOperatorSelect } from '../components/agent-helper/relational-operator-select';
+import type { relationalOperator } from '@baishuyun/types';
+import { OPERATOR_LABEL_MAP } from '@baishuyun/ai-feat-utils';
+
+const meta = {
+  title: 'Agent Helper/RelationalOperatorSelect',
+  component: RelationalOperatorSelect,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    defaultValue: 'eq',
+    disabled: false,
+  },
+} satisfies Meta<typeof RelationalOperatorSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'eq',
+  },
+};
+
+export const NotEqualSelected: Story = {
+  args: {
+    defaultValue: 'neq',
+  },
+};
+
+export const ContainsSelected: Story = {
+  args: {
+    defaultValue: 'contains',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'eq',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<relationalOperator>('eq');
+
+    return (
+      <div className="flex items-center gap-[12px]">
+        <RelationalOperatorSelect value={value} onChange={setValue} />
+        <span className="text-[14px] text-[#666666]">
+          当前值: {OPERATOR_LABEL_MAP[value]}
+        </span>
+      </div>
+    );
+  },
+};

package/src/stories/RepeatByTypeSelect.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RepeatByTypeSelect } from '../components/agent-helper/repeat-by-type-select';
+import type { repeatByType } from '@baishuyun/types';
+
+const meta: Meta<typeof RepeatByTypeSelect> = {
+  title: 'Agent Helper/RepeatByTypeSelect',
+  component: RepeatByTypeSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: 'week',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'month',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择重复方式',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<repeatByType | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <RepeatByTypeSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>{val ?? '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/RepeatPreferenceSelect.stories.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RepeatPreferenceSelect } from '../components/agent-helper/repeat-preference-select';
+import type { IRepeatPreference } from '@baishuyun/types';
+
+const meta: Meta<typeof RepeatPreferenceSelect> = {
+  title: 'Agent Helper/RepeatPreferenceSelect',
+  component: RepeatPreferenceSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, maxWidth: 900 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithNone: Story = {
+  args: {
+    value: { type: 'none' },
+  },
+};
+
+export const WithDaily: Story = {
+  args: {
+    value: { type: 'daily' },
+  },
+};
+
+export const WithCustomWeek: Story = {
+  args: {
+    value: {
+      type: 'custom',
+      customRepeatPreference: {
+        repeatBy: 'week',
+        interval: 2,
+        repeatDetailDates: ['mon', 'wed', 'fri'],
+      },
+    },
+  },
+};
+
+export const WithCustomMonth: Story = {
+  args: {
+    value: {
+      type: 'custom',
+      customRepeatPreference: {
+        repeatBy: 'month',
+        interval: 1,
+        repeatDetailDates: [1, 15, 'last'],
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: {
+      type: 'custom',
+      customRepeatPreference: {
+        repeatBy: 'week',
+        interval: 1,
+        repeatDetailDates: ['mon', 'tue'],
+      },
+    },
+    disabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<IRepeatPreference | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <RepeatPreferenceSelect
+          {...args}
+          value={val}
+          onChange={setVal}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 13,
+            fontFamily: 'monospace',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-all',
+          }}
+        >
+          <strong>当前值:</strong>
+          <pre style={{ margin: '8px 0 0', fontSize: 12 }}>
+            {val ? JSON.stringify(val, null, 2) : '(未选择)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/RepeatPreferenceTypeSelect.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RepeatPreferenceTypeSelect } from '../components/agent-helper/repeat-preference-type-select';
+import type { repeatPreferenceType } from '@baishuyun/types';
+
+const meta: Meta<typeof RepeatPreferenceTypeSelect> = {
+  title: 'Agent Helper/RepeatPreferenceTypeSelect',
+  component: RepeatPreferenceTypeSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: 'daily',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'none',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择重复类型',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<repeatPreferenceType | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <RepeatPreferenceTypeSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>{val ?? '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/SearchInput.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SearchInput } from '../components/agent-helper/search-input';
+
+const meta = {
+  title: 'Agent Helper/SearchInput',
+  component: SearchInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    placeholder: '搜索智能体名称',
+    onChange: () => {},
+  },
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithValue: Story = {
+  args: {
+    value: 'AI翻译',
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '请输入关键词搜索',
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    value: '数据分析',
+    placeholder: '搜索智能体名称',
+  },
+  render: (args) => {
+    return <SearchInput {...args} />;
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    value: '',
+    placeholder: '搜索智能体名称',
+  },
+};