@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/Label.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from '../components/ui/label';
+import { Input } from '../components/ui/input';
+
+const meta = {
+  title: 'AI Office/Label',
+  component: Label,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '名称',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    children: '应用范围',
+    required: true,
+  },
+};
+
+export const WithInput: Story = {
+  args: {
+    htmlFor: 'demo-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args}>名称</Label>
+      <Input id={args.htmlFor} placeholder="请输入名称" />
+    </div>
+  ),
+};
+
+export const RequiredWithInput: Story = {
+  args: {
+    htmlFor: 'demo-required-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args} required>
+        应用范围
+      </Label>
+      <Input id={args.htmlFor} placeholder="请选择应用范围" />
+    </div>
+  ),
+};
+
+export const DisabledWithInput: Story = {
+  args: {
+    htmlFor: 'disabled-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args}>名称</Label>
+      <Input id={args.htmlFor} defaultValue="不可编辑" disabled />
+    </div>
+  ),
+};

package/src/stories/MonthdaysSelect.stories.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MonthdaysSelect, MonthdaysOptions } from '../components/agent-helper/monthdays-select';
+import type { repeatByMonthDetail } from '@baishuyun/types';
+
+const meta: Meta<typeof MonthdaysSelect> = {
+  title: 'Agent Helper/MonthdaysSelect',
+  component: MonthdaysSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSpecificDays: Story = {
+  args: {
+    value: [1, 15, 28],
+  },
+};
+
+export const WithLastDay: Story = {
+  args: {
+    value: ['last'],
+  },
+};
+
+export const WithMixedSelection: Story = {
+  args: {
+    value: [1, 5, 15, 20, 'last'],
+  },
+};
+
+export const AllDaysSelected: Story = {
+  args: {
+    value: MonthdaysOptions.map((o) => o.value),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: [1, 15],
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择每月重复的日期',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<repeatByMonthDetail[]>([]);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <MonthdaysSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>
+            {val.length > 0 ? val.join(', ') : '(未选择)'}
+          </span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/OfficeContainer.stories.tsx

@@ -1,6 +1,7 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { OfficeContainer } from "../components/office-container";
+import { OfficeContainer, type FullScreenPart } from "../components/office-container";
 
 const meta: Meta<typeof OfficeContainer> = {
   title: "AI Office/OfficeContainer",
@@ -80,3 +81,151 @@ export const CustomHeaderHeight: Story = {
     ),
   },
 };
+
+export const RightColResizable: Story = {
+  args: {
+    rightColWidthRange: [400, 700],
+    leftColHeaderElement: (
+      <PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>
+    ),
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — this column now flex-fills remaining space
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">
+        Right Header (resizable)
+      </PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — drag the resizer to resize this column (400–700px)
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const CustomColumnStyles: Story = {
+  args: {
+    leftColCls: "bg-amber-50",
+    rightColCls: "bg-sky-50",
+    leftColHeaderElement: <PlaceholderHeader>Left (amber-50 bg)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent bg="bg-amber-100">
+        Custom left column background via leftColCls
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-sky-500">Right (sky-50 bg)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-sky-100">
+        Custom right column background via rightColCls
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenLeftCol: Story = {
+  args: {
+    fullscreenPart: "leftCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (Fullscreen)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>Left Content — now filling the entire viewport</PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (hidden)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — hidden when left is fullscreen
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenRightCol: Story = {
+  args: {
+    fullscreenPart: "rightCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (hidden)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — hidden when right is fullscreen
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (Fullscreen)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — now filling the entire viewport
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const ToggleFullscreen: Story = {
+  render: () => {
+    const [part, setPart] = useState<FullScreenPart>("none");
+
+    const labels: Record<FullScreenPart, string> = {
+      none: "Normal",
+      leftCol: "Left Fullscreen",
+      rightCol: "Right Fullscreen",
+    };
+
+    return (
+      <div style={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: 12,
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 20,
+            display: "flex",
+            gap: 8,
+          }}
+        >
+          {(["none", "leftCol", "rightCol"] as FullScreenPart[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => setPart(p)}
+              style={{
+                padding: "6px 16px",
+                borderRadius: 6,
+                border: part === p ? "2px solid #0265fc" : "1px solid #d0d0d0",
+                background: part === p ? "#e8f0fe" : "#fff",
+                cursor: "pointer",
+                fontSize: 13,
+                fontWeight: part === p ? 600 : 400,
+              }}
+            >
+              {labels[p]}
+            </button>
+          ))}
+        </div>
+        <div style={{ flex: 1 }}>
+          <OfficeContainer
+            fullscreenPart={part}
+            leftColHeaderElement={<PlaceholderHeader>Left Header</PlaceholderHeader>}
+            leftColContentElement={
+              <PlaceholderContent>
+                Left Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+            rightColHeaderElement={
+              <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
+            }
+            rightColContentElement={
+              <PlaceholderContent bg="bg-emerald-50">
+                Right Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/OffsetPreferenceSelect.stories.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetPreferenceSelect } from '../components/agent-helper/offset-preference-select';
+import type { IOffsetPreference, DateFieldType } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetPreferenceSelect> = {
+  title: 'Agent Helper/OffsetPreferenceSelect',
+  component: OffsetPreferenceSelect,
+  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 = {
+  args: {
+    dateFieldType: 'date',
+  },
+};
+
+export const DateTimeType: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    value: {
+      dateFieldType: 'datetime',
+      offsetType: 'time',
+      offsetValue: 0,
+      offsetUnit: 'minute',
+    },
+  },
+};
+
+export const WithBeforeOffset: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: {
+      dateFieldType: 'date',
+      offsetType: 'before',
+      offsetValue: 1950,
+      offsetUnit: 'minute',
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: {
+      dateFieldType: 'date',
+      offsetType: 'before',
+      offsetValue: 1950,
+      offsetUnit: 'minute',
+    },
+    disabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [dateFieldType, setDateFieldType] = useState<DateFieldType>('date');
+    const [val, setVal] = useState<IOffsetPreference | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <span style={{ fontSize: 14, fontWeight: 500 }}>dateFieldType:</span>
+          <label style={{ fontSize: 14, cursor: 'pointer' }}>
+            <input
+              type="radio"
+              name="dft"
+              value="date"
+              checked={dateFieldType === 'date'}
+              onChange={() => setDateFieldType('date')}
+            />{' '}
+            date
+          </label>
+          <label style={{ fontSize: 14, cursor: 'pointer' }}>
+            <input
+              type="radio"
+              name="dft"
+              value="datetime"
+              checked={dateFieldType === 'datetime'}
+              onChange={() => setDateFieldType('datetime')}
+            />{' '}
+            datetime
+          </label>
+        </div>
+        <OffsetPreferenceSelect
+          dateFieldType={dateFieldType}
+          value={val}
+          onChange={setVal}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 14,
+            fontFamily: 'monospace',
+          }}
+        >
+          <strong>IOffsetPreference:</strong>
+          <pre style={{ marginTop: 8, whiteSpace: 'pre-wrap' }}>
+            {val ? JSON.stringify(val, null, 2) : '(undefined)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/OffsetTypeSelect.stories.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetTypeSelect } from '../components/agent-helper/offset-type-select';
+import type { offsetType } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetTypeSelect> = {
+  title: 'Agent Helper/OffsetTypeSelect',
+  component: OffsetTypeSelect,
+  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 = {
+  args: {
+    dateFieldType: 'date',
+  },
+};
+
+export const DateTimeField: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    value: 'time',
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: 'before',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: 'day',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    placeholder: '选择偏移类型',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<offsetType | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <OffsetTypeSelect {...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>
+    );
+  },
+  args: {
+    dateFieldType: 'date',
+  },
+};

package/src/stories/OffsetUnitSelect.stories.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetUnitSelect } from '../components/agent-helper/offset-unit-select';
+import type { offsetUnit } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetUnitSelect> = {
+  title: 'Agent Helper/OffsetUnitSelect',
+  component: OffsetUnitSelect,
+  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 = {
+  args: {},
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: 'minute',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'day',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择偏移单位',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<offsetUnit | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <OffsetUnitSelect {...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>
+    );
+  },
+  args: {},
+};

package/src/stories/OutputConfigEditor.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { OutputParam } from '@baishuyun/types';
+import { OutputConfigEditor } from '../components/output-config-editor';
+import type { OutputFieldOption } from '../components/output-config-editor';
+
+const meta: Meta<typeof OutputConfigEditor> = {
+  title: 'Agent Helper/OutputConfigEditor',
+  component: OutputConfigEditor,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 680, minHeight: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const availableFields: OutputFieldOption[] = [
+  { fieldName: 'class', fieldDesc: '班级', type: 'text' },
+  { fieldName: 'count', fieldDesc: '人数', type: 'number' },
+  { fieldName: 'name', fieldDesc: '姓名', type: 'text' },
+  { fieldName: 'age', fieldDesc: '年龄', type: 'number' },
+  { fieldName: 'birthday', fieldDesc: '出生日期', type: 'datetime' },
+  {
+    fieldName: 'studentInfo',
+    fieldDesc: '学生信息',
+    type: 'subform',
+    children: [
+      { fieldName: 'studentName', fieldDesc: '学生姓名', type: 'text' },
+      { fieldName: 'studentAge', fieldDesc: '学生年龄', type: 'number' },
+    ],
+  },
+];
+
+export const Empty: Story = {
+  args: {
+    value: [],
+    availableFields,
+  },
+};
+
+const sampleParams: OutputParam[] = [
+  { name: '班级', type: 'text', description: '' },
+  { name: '人数', type: 'number', description: '' },
+];
+
+export const WithItems: Story = {
+  args: {
+    value: sampleParams,
+    availableFields,
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    value: [] as OutputParam[],
+    availableFields,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<OutputParam[]>(args.value);
+
+    return (
+      <div style={{ width: 680 }}>
+        <OutputConfigEditor value={value} onChange={setValue} availableFields={args.availableFields} />
+      </div>
+    );
+  },
+};

package/src/stories/PlaceholderCard.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PlaceholderCard } from '../components/agent-helper/placeholder-card';
+
+const meta = {
+  title: 'Agent Helper/PlaceholderCard',
+  component: PlaceholderCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    description: '智能体助手可以对表单数据进行XXX，并在表单中再次调用。',
+    detailAddress: 'https://example.com/learn-more',
+    btnLabel: '新建智能体助手',
+    onCreateClick: () => alert('创建智能体助手'),
+  },
+} satisfies Meta<typeof PlaceholderCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomButtonLabel: Story = {
+  args: {
+    btnLabel: '添加助手',
+  },
+};
+
+export const NoButtonLabel: Story = {
+  args: {
+    btnLabel: undefined,
+  },
+};