@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/stories/DatePicker.stories.tsx

@@ -1,174 +1,174 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DatePicker } from '../components/agent-helper/date-picker/date-picker';
-import { DateInput } from '../components/agent-helper/date-picker/date-input';
-import type { DateFormat } from '../components/agent-helper/date-picker/types';
-
-// ── DatePicker Stories ──────────────────────────────────────────────────
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Agent Helper/DatePicker',
-  component: DatePicker,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 40 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { format: 'yyyy-MM-dd' },
-};
-
-export const WithInitialValue: Story = {
-  args: { value: new Date(2026, 4, 15), format: 'yyyy-MM-dd' },
-};
-
-export const DateTimeWithSeconds: Story = {
-  args: { value: new Date(2026, 4, 15, 14, 30, 45), format: 'yyyy-MM-dd HH:mm:ss' },
-};
-
-export const DateTimeWithMinutes: Story = {
-  args: { value: new Date(2026, 4, 15, 14, 30), format: 'yyyy-MM-dd HH:mm' },
-};
-
-export const TimeOnlyWithSeconds: Story = {
-  args: { value: new Date(2026, 0, 1, 14, 30, 45), format: 'HH:mm:ss' },
-};
-
-export const HourMinuteOnly: Story = {
-  args: { value: new Date(2026, 0, 1, 14, 30), format: 'HH:mm' },
-};
-
-export const MonthOnly: Story = {
-  args: { value: new Date(2026, 4, 1), format: 'yyyy-MM' },
-};
-
-export const YearOnly: Story = {
-  args: { value: new Date(2026, 0, 1), format: 'yyyy' },
-};
-
-export const WithDateRange: Story = {
-  args: { format: 'yyyy-MM-dd', minDate: new Date(2026, 0, 1), maxDate: new Date(2026, 11, 31) },
-};
-
-export const WithDateTimeRange: Story = {
-  args: {
-    value: new Date(2026, 4, 15, 12, 0, 0),
-    format: 'yyyy-MM-dd HH:mm:ss',
-    minDate: new Date(2026, 4, 1, 8, 0, 0),
-    maxDate: new Date(2026, 4, 31, 18, 0, 0),
-  },
-};
-
-export const DisabledToday: Story = {
-  args: { format: 'yyyy-MM-dd', maxDate: new Date(2020, 0, 1) },
-};
-
-export const Interactive: Story = {
-  render: (args) => {
-    const [val, setVal] = useState<Date | undefined>(
-      args.value ? new Date(args.value as Date) : undefined
-    );
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <DatePicker
-          {...(args as any)}
-          value={val}
-          onChange={(date) => setVal(date ?? undefined)}
-        />
-        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
-          <strong>当前值: </strong>
-          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
-        </div>
-      </div>
-    );
-  },
-  args: { format: 'yyyy-MM-dd' as DateFormat },
-};
-
-// ── DateInput Stories ───────────────────────────────────────────────────
-
-export const DateInputDefault: StoryObj<typeof DateInput> = {
-  render: () => <DateInput />,
-  name: 'DateInput / Default',
-};
-
-export const DateInputWithValue: StoryObj<typeof DateInput> = {
-  render: () => <DateInput value={new Date(2026, 4, 15)} format="yyyy-MM-dd" />,
-  name: 'DateInput / With Value',
-};
-
-export const DateInputDateTime: StoryObj<typeof DateInput> = {
-  render: () => (
-    <DateInput
-      value={new Date(2026, 4, 15, 14, 30, 45)}
-      format="yyyy-MM-dd HH:mm:ss"
-    />
-  ),
-  name: 'DateInput / DateTime',
-};
-
-export const DateInputTimeOnly: StoryObj<typeof DateInput> = {
-  render: () => (
-    <DateInput value={new Date(2026, 0, 1, 14, 30, 0)} format="HH:mm" />
-  ),
-  name: 'DateInput / Time Only',
-};
-
-export const DateInputMonthOnly: StoryObj<typeof DateInput> = {
-  render: () => (
-    <DateInput value={new Date(2026, 4, 1)} format="yyyy-MM" />
-  ),
-  name: 'DateInput / Month Only',
-};
-
-export const DateInputYearOnly: StoryObj<typeof DateInput> = {
-  render: () => (
-    <DateInput value={new Date(2026, 0, 1)} format="yyyy" />
-  ),
-  name: 'DateInput / Year Only',
-};
-
-export const DateInputWithRange: StoryObj<typeof DateInput> = {
-  render: () => (
-    <DateInput
-      format="yyyy-MM-dd"
-      minDate={new Date(2026, 4, 1)}
-      maxDate={new Date(2026, 4, 31)}
-    />
-  ),
-  name: 'DateInput / With Range',
-};
-
-export const DateInputDisabled: StoryObj<typeof DateInput> = {
-  render: () => <DateInput value={new Date(2026, 4, 15)} disabled />,
-  name: 'DateInput / Disabled',
-};
-
-export const DateInputInteractive: StoryObj<typeof DateInput> = {
-  render: () => {
-    const [val, setVal] = useState<Date | undefined>();
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <DateInput
-          value={val}
-          onChange={(date) => setVal(date ?? undefined)}
-          format="yyyy-MM-dd HH:mm:ss"
-        />
-        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
-          <strong>当前值: </strong>
-          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
-        </div>
-      </div>
-    );
-  },
-  name: 'DateInput / Interactive',
-};
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from '../components/agent-helper/date-picker/date-picker';
+import { DateInput } from '../components/agent-helper/date-picker/date-input';
+import type { DateFormat } from '../components/agent-helper/date-picker/types';
+
+// ── DatePicker Stories ──────────────────────────────────────────────────
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Agent Helper/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { format: 'yyyy-MM-dd' },
+};
+
+export const WithInitialValue: Story = {
+  args: { value: new Date(2026, 4, 15), format: 'yyyy-MM-dd' },
+};
+
+export const DateTimeWithSeconds: Story = {
+  args: { value: new Date(2026, 4, 15, 14, 30, 45), format: 'yyyy-MM-dd HH:mm:ss' },
+};
+
+export const DateTimeWithMinutes: Story = {
+  args: { value: new Date(2026, 4, 15, 14, 30), format: 'yyyy-MM-dd HH:mm' },
+};
+
+export const TimeOnlyWithSeconds: Story = {
+  args: { value: new Date(2026, 0, 1, 14, 30, 45), format: 'HH:mm:ss' },
+};
+
+export const HourMinuteOnly: Story = {
+  args: { value: new Date(2026, 0, 1, 14, 30), format: 'HH:mm' },
+};
+
+export const MonthOnly: Story = {
+  args: { value: new Date(2026, 4, 1), format: 'yyyy-MM' },
+};
+
+export const YearOnly: Story = {
+  args: { value: new Date(2026, 0, 1), format: 'yyyy' },
+};
+
+export const WithDateRange: Story = {
+  args: { format: 'yyyy-MM-dd', minDate: new Date(2026, 0, 1), maxDate: new Date(2026, 11, 31) },
+};
+
+export const WithDateTimeRange: Story = {
+  args: {
+    value: new Date(2026, 4, 15, 12, 0, 0),
+    format: 'yyyy-MM-dd HH:mm:ss',
+    minDate: new Date(2026, 4, 1, 8, 0, 0),
+    maxDate: new Date(2026, 4, 31, 18, 0, 0),
+  },
+};
+
+export const DisabledToday: Story = {
+  args: { format: 'yyyy-MM-dd', maxDate: new Date(2020, 0, 1) },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<Date | undefined>(
+      args.value ? new Date(args.value as Date) : undefined
+    );
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <DatePicker
+          {...(args as any)}
+          value={val}
+          onChange={(date) => setVal(date ?? undefined)}
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值: </strong>
+          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  args: { format: 'yyyy-MM-dd' as DateFormat },
+};
+
+// ── DateInput Stories ───────────────────────────────────────────────────
+
+export const DateInputDefault: StoryObj<typeof DateInput> = {
+  render: () => <DateInput />,
+  name: 'DateInput / Default',
+};
+
+export const DateInputWithValue: StoryObj<typeof DateInput> = {
+  render: () => <DateInput value={new Date(2026, 4, 15)} format="yyyy-MM-dd" />,
+  name: 'DateInput / With Value',
+};
+
+export const DateInputDateTime: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput
+      value={new Date(2026, 4, 15, 14, 30, 45)}
+      format="yyyy-MM-dd HH:mm:ss"
+    />
+  ),
+  name: 'DateInput / DateTime',
+};
+
+export const DateInputTimeOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 0, 1, 14, 30, 0)} format="HH:mm" />
+  ),
+  name: 'DateInput / Time Only',
+};
+
+export const DateInputMonthOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 4, 1)} format="yyyy-MM" />
+  ),
+  name: 'DateInput / Month Only',
+};
+
+export const DateInputYearOnly: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput value={new Date(2026, 0, 1)} format="yyyy" />
+  ),
+  name: 'DateInput / Year Only',
+};
+
+export const DateInputWithRange: StoryObj<typeof DateInput> = {
+  render: () => (
+    <DateInput
+      format="yyyy-MM-dd"
+      minDate={new Date(2026, 4, 1)}
+      maxDate={new Date(2026, 4, 31)}
+    />
+  ),
+  name: 'DateInput / With Range',
+};
+
+export const DateInputDisabled: StoryObj<typeof DateInput> = {
+  render: () => <DateInput value={new Date(2026, 4, 15)} disabled />,
+  name: 'DateInput / Disabled',
+};
+
+export const DateInputInteractive: StoryObj<typeof DateInput> = {
+  render: () => {
+    const [val, setVal] = useState<Date | undefined>();
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <DateInput
+          value={val}
+          onChange={(date) => setVal(date ?? undefined)}
+          format="yyyy-MM-dd HH:mm:ss"
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值: </strong>
+          <span>{val ? val.toLocaleString() : '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  name: 'DateInput / Interactive',
+};

package/src/stories/ExecLogFilter.stories.tsx

@@ -1,145 +1,145 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ExecLogFilter } from '../components/agent-helper/exec-log-filter';
-import type { ExecLogFilterValue } from '../components/agent-helper/exec-log-filter';
-import { subDays } from 'date-fns';
-
-const mockExecUserOptions = [
-  { value: 'user1', label: '张三' },
-  { value: 'user2', label: '李四' },
-  { value: 'user3', label: '王五' },
-  { value: 'user4', label: '赵六' },
-];
-
-const mockExecResultOptions = [
-  { value: 'success', label: '执行成功' },
-  { value: 'failure', label: '执行失败' },
-  { value: 'timeout', label: '执行超时' },
-];
-
-const meta: Meta<typeof ExecLogFilter> = {
-  title: 'Agent Helper/ExecLogFilter',
-  component: ExecLogFilter,
-  tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  args: {
-    execUserOptions: mockExecUserOptions,
-    execResultOptions: mockExecResultOptions,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 20, minWidth: 1200 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithInitialValue: Story = {
-  args: {
-    value: {
-      startDate: subDays(new Date(), 7),
-      endDate: new Date(),
-      triggerType: 'scheduler',
-      execResult: 'success',
-    },
-  },
-};
-
-export const AllOptionsProvided: Story = {
-  args: {
-    execUserOptions: [
-      { value: 'user1', label: '张三(管理员)' },
-      { value: 'user2', label: '李四(编辑者)' },
-      { value: 'user3', label: '王五(查看者)' },
-      { value: 'user4', label: '赵六(开发者)' },
-      { value: 'user5', label: '孙七(测试员)' },
-      { value: 'user6', label: '周八(运维)' },
-    ],
-    execResultOptions: [
-      { value: 'success', label: '执行成功' },
-      { value: 'failure', label: '执行失败' },
-      { value: 'timeout', label: '执行超时' },
-      { value: 'cancelled', label: '已取消' },
-    ],
-  },
-};
-
-export const EmptyOptions: Story = {
-  args: {
-    execUserOptions: [],
-    execResultOptions: [],
-  },
-};
-
-export const Interactive: Story = {
-  render: (args) => {
-    const [filterValue, setFilterValue] = useState<ExecLogFilterValue>({});
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <ExecLogFilter
-          {...args}
-          value={filterValue}
-          onChange={setFilterValue}
-        />
-        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
-          <strong>当前筛选值:</strong>
-          <pre style={{ marginTop: 8, fontSize: 12 }}>
-            {JSON.stringify(filterValue, (_key, val) =>
-              val instanceof Date ? val.toISOString() : val, 2
-            )}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-  args: {
-    execUserOptions: mockExecUserOptions,
-    execResultOptions: mockExecResultOptions,
-  },
-};
-
-export const WithFilterCallback: Story = {
-  render: (args) => {
-    const [lastFiltered, setLastFiltered] = useState<ExecLogFilterValue | null>(null);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <ExecLogFilter
-          {...args}
-          onFilter={(v) => setLastFiltered(v)}
-        />
-        {lastFiltered && (
-          <div style={{ padding: 12, background: '#F0F6FF', borderRadius: 8, fontSize: 14 }}>
-            <strong>筛选已触发:</strong>
-            <pre style={{ marginTop: 8, fontSize: 12 }}>
-              {JSON.stringify(lastFiltered, (_key, val) =>
-                val instanceof Date ? val.toISOString() : val, 2
-              )}
-            </pre>
-          </div>
-        )}
-      </div>
-    );
-  },
-  args: {
-    execUserOptions: mockExecUserOptions,
-    execResultOptions: mockExecResultOptions,
-  },
-};
-
-export const NarrowContainer: Story = {
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 20, width: 900 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ExecLogFilter } from '../components/agent-helper/exec-log-filter';
+import type { ExecLogFilterValue } from '../components/agent-helper/exec-log-filter';
+import { subDays } from 'date-fns';
+
+const mockExecUserOptions = [
+  { value: 'user1', label: '张三' },
+  { value: 'user2', label: '李四' },
+  { value: 'user3', label: '王五' },
+  { value: 'user4', label: '赵六' },
+];
+
+const mockExecResultOptions = [
+  { value: 'success', label: '执行成功' },
+  { value: 'failure', label: '执行失败' },
+  { value: 'timeout', label: '执行超时' },
+];
+
+const meta: Meta<typeof ExecLogFilter> = {
+  title: 'Agent Helper/ExecLogFilter',
+  component: ExecLogFilter,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, minWidth: 1200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: {
+      startDate: subDays(new Date(), 7),
+      endDate: new Date(),
+      triggerType: 'scheduler',
+      execResult: 'success',
+    },
+  },
+};
+
+export const AllOptionsProvided: Story = {
+  args: {
+    execUserOptions: [
+      { value: 'user1', label: '张三(管理员)' },
+      { value: 'user2', label: '李四(编辑者)' },
+      { value: 'user3', label: '王五(查看者)' },
+      { value: 'user4', label: '赵六(开发者)' },
+      { value: 'user5', label: '孙七(测试员)' },
+      { value: 'user6', label: '周八(运维)' },
+    ],
+    execResultOptions: [
+      { value: 'success', label: '执行成功' },
+      { value: 'failure', label: '执行失败' },
+      { value: 'timeout', label: '执行超时' },
+      { value: 'cancelled', label: '已取消' },
+    ],
+  },
+};
+
+export const EmptyOptions: Story = {
+  args: {
+    execUserOptions: [],
+    execResultOptions: [],
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [filterValue, setFilterValue] = useState<ExecLogFilterValue>({});
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <ExecLogFilter
+          {...args}
+          value={filterValue}
+          onChange={setFilterValue}
+        />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前筛选值:</strong>
+          <pre style={{ marginTop: 8, fontSize: 12 }}>
+            {JSON.stringify(filterValue, (_key, val) =>
+              val instanceof Date ? val.toISOString() : val, 2
+            )}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+};
+
+export const WithFilterCallback: Story = {
+  render: (args) => {
+    const [lastFiltered, setLastFiltered] = useState<ExecLogFilterValue | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <ExecLogFilter
+          {...args}
+          onFilter={(v) => setLastFiltered(v)}
+        />
+        {lastFiltered && (
+          <div style={{ padding: 12, background: '#F0F6FF', borderRadius: 8, fontSize: 14 }}>
+            <strong>筛选已触发:</strong>
+            <pre style={{ marginTop: 8, fontSize: 12 }}>
+              {JSON.stringify(lastFiltered, (_key, val) =>
+                val instanceof Date ? val.toISOString() : val, 2
+              )}
+            </pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    execUserOptions: mockExecUserOptions,
+    execResultOptions: mockExecResultOptions,
+  },
+};
+
+export const NarrowContainer: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, width: 900 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};