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

package/src/stories/AttachmentsPreviewer.stories.tsx

@@ -1,306 +1,306 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AttachmentsPreviewer, AttachmentItem } from '../components/attachments-previewer';
-
-const sampleImages: AttachmentItem[] = [
-  {
-    id: '1',
-    url: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=200&h=200&fit=crop',
-    alt: 'Coffee',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '2',
-    url: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=200&h=200&fit=crop',
-    alt: 'Dog',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '3',
-    url: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=200&fit=crop',
-    alt: 'Cat',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '4',
-    url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=200&fit=crop',
-    alt: 'Coffee cup',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '5',
-    url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop',
-    alt: 'Portrait',
-    contentType: 'image/jpeg',
-  },
-];
-
-const manyImages: AttachmentItem[] = [
-  ...sampleImages,
-  {
-    id: '6',
-    url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&h=200&fit=crop',
-    alt: 'Tech',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '7',
-    url: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=200&h=200&fit=crop',
-    alt: 'Japan',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '8',
-    url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200&h=200&fit=crop',
-    alt: 'Nature',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '9',
-    url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop',
-    alt: 'Fog',
-    contentType: 'image/jpeg',
-  },
-  {
-    id: '10',
-    url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop',
-    alt: 'Forest',
-    contentType: 'image/jpeg',
-  },
-];
-
-const sampleFiles: AttachmentItem[] = [
-  {
-    id: 'file-xlsx',
-    url: '',
-    alt: 'report.xlsx',
-    contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  },
-  {
-    id: 'file-csv',
-    url: '',
-    alt: 'data.csv',
-    contentType: 'text/csv',
-  },
-  {
-    id: 'file-txt',
-    url: '',
-    alt: 'notes.txt',
-    contentType: 'text/plain',
-  },
-  {
-    id: 'file-unknown',
-    url: '',
-    alt: 'archive.bin',
-    contentType: 'application/x-unknown',
-  },
-];
-
-const meta: Meta<typeof AttachmentsPreviewer> = {
-  title: 'Example/Chat/AttachmentsPreviewer',
-  component: AttachmentsPreviewer,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  args: {},
-  decorators: [
-    (Story) => (
-      <div style={{ width: 308 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Base: Story = {
-  args: {
-    attachments: sampleImages,
-  },
-};
-
-export const FewImages: Story = {
-  args: {
-    attachments: sampleImages.slice(0, 3),
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 220 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const ManyImages: Story = {
-  args: {
-    attachments: manyImages,
-    onImageRemove: (attachment, index) => {
-      alert(`Remove image ${index + 1}: ${attachment.alt}`);
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 350 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const WithClickHandler: Story = {
-  args: {
-    attachments: sampleImages,
-    onImageClick: (attachment, index) => {
-      alert(`Clicked image ${index + 1}: ${attachment.alt}`);
-    },
-  },
-};
-
-export const WithRemoveHandler: Story = {
-  args: {
-    attachments: sampleImages,
-    onImageRemove: (attachment, index) => {
-      alert(`Remove image ${index + 1}: ${attachment.alt}`);
-    },
-  },
-};
-
-export const CustomSize: Story = {
-  args: {
-    attachments: sampleImages,
-    imageSize: 80,
-    gap: 12,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 400 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const SmallSize: Story = {
-  args: {
-    attachments: sampleImages,
-    imageSize: 40,
-    gap: 8,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 250 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const SingleImage: Story = {
-  args: {
-    attachments: sampleImages.slice(0, 1),
-  },
-};
-
-export const TwoImages: Story = {
-  args: {
-    attachments: sampleImages.slice(0, 2),
-  },
-};
-
-export const FullWidth: Story = {
-  args: {
-    attachments: manyImages,
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 600 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const WithLoadingItems: Story = {
-  args: {
-    attachments: [
-      ...sampleImages.slice(0, 2),
-      {
-        id: 'loading-1',
-        url: '',
-        alt: 'Uploading file 1',
-        isLoading: true,
-        contentType: 'application/vnd.ms-excel',
-      },
-      {
-        id: 'loading-2',
-        url: '',
-        alt: 'Uploading file 2',
-        isLoading: true,
-        contentType: 'text/csv',
-      },
-    ],
-    onImageRemove: (attachment, index) => {
-      alert(`Remove image ${index + 1}: ${attachment.alt}`);
-    },
-  },
-};
-
-export const MixedLoadingAndLoaded: Story = {
-  args: {
-    attachments: [
-      sampleImages[0],
-      {
-        id: 'loading-1',
-        url: '',
-        alt: 'Uploading...',
-        isLoading: true,
-        contentType: 'image/png',
-      },
-      sampleImages[1],
-      sampleImages[2],
-      {
-        id: 'loading-2',
-        url: '',
-        alt: 'Uploading...',
-        isLoading: true,
-        contentType: 'text/plain',
-      },
-    ],
-    onImageRemove: (attachment, index) => {
-      alert(`Remove image ${index + 1}: ${attachment.alt}`);
-    },
-  },
-};
-
-export const NonImageFiles: Story = {
-  args: {
-    attachments: sampleFiles,
-    onImageRemove: (attachment, index) => {
-      alert(`Remove file ${index + 1}: ${attachment.alt}`);
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 260 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const MixedFilesAndImages: Story = {
-  args: {
-    attachments: [...sampleImages.slice(0, 2), ...sampleFiles],
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: 360 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AttachmentsPreviewer, AttachmentItem } from '../components/attachments-previewer';
+
+const sampleImages: AttachmentItem[] = [
+  {
+    id: '1',
+    url: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=200&h=200&fit=crop',
+    alt: 'Coffee',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '2',
+    url: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=200&h=200&fit=crop',
+    alt: 'Dog',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '3',
+    url: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=200&fit=crop',
+    alt: 'Cat',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '4',
+    url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=200&fit=crop',
+    alt: 'Coffee cup',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '5',
+    url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop',
+    alt: 'Portrait',
+    contentType: 'image/jpeg',
+  },
+];
+
+const manyImages: AttachmentItem[] = [
+  ...sampleImages,
+  {
+    id: '6',
+    url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&h=200&fit=crop',
+    alt: 'Tech',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '7',
+    url: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=200&h=200&fit=crop',
+    alt: 'Japan',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '8',
+    url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200&h=200&fit=crop',
+    alt: 'Nature',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '9',
+    url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop',
+    alt: 'Fog',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '10',
+    url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop',
+    alt: 'Forest',
+    contentType: 'image/jpeg',
+  },
+];
+
+const sampleFiles: AttachmentItem[] = [
+  {
+    id: 'file-xlsx',
+    url: '',
+    alt: 'report.xlsx',
+    contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+  {
+    id: 'file-csv',
+    url: '',
+    alt: 'data.csv',
+    contentType: 'text/csv',
+  },
+  {
+    id: 'file-txt',
+    url: '',
+    alt: 'notes.txt',
+    contentType: 'text/plain',
+  },
+  {
+    id: 'file-unknown',
+    url: '',
+    alt: 'archive.bin',
+    contentType: 'application/x-unknown',
+  },
+];
+
+const meta: Meta<typeof AttachmentsPreviewer> = {
+  title: 'Example/Chat/AttachmentsPreviewer',
+  component: AttachmentsPreviewer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div style={{ width: 308 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    attachments: sampleImages,
+  },
+};
+
+export const FewImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 3),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 220 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const ManyImages: Story = {
+  args: {
+    attachments: manyImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 350 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageClick: (attachment, index) => {
+      alert(`Clicked image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const WithRemoveHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 80,
+    gap: 12,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SmallSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 40,
+    gap: 8,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 250 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleImage: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 1),
+  },
+};
+
+export const TwoImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 2),
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    attachments: manyImages,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithLoadingItems: Story = {
+  args: {
+    attachments: [
+      ...sampleImages.slice(0, 2),
+      {
+        id: 'loading-1',
+        url: '',
+        alt: 'Uploading file 1',
+        isLoading: true,
+        contentType: 'application/vnd.ms-excel',
+      },
+      {
+        id: 'loading-2',
+        url: '',
+        alt: 'Uploading file 2',
+        isLoading: true,
+        contentType: 'text/csv',
+      },
+    ],
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const MixedLoadingAndLoaded: Story = {
+  args: {
+    attachments: [
+      sampleImages[0],
+      {
+        id: 'loading-1',
+        url: '',
+        alt: 'Uploading...',
+        isLoading: true,
+        contentType: 'image/png',
+      },
+      sampleImages[1],
+      sampleImages[2],
+      {
+        id: 'loading-2',
+        url: '',
+        alt: 'Uploading...',
+        isLoading: true,
+        contentType: 'text/plain',
+      },
+    ],
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const NonImageFiles: Story = {
+  args: {
+    attachments: sampleFiles,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove file ${index + 1}: ${attachment.alt}`);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 260 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const MixedFilesAndImages: Story = {
+  args: {
+    attachments: [...sampleImages.slice(0, 2), ...sampleFiles],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/stories/BaseButton.stories.tsx

@@ -1,33 +1,33 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { BaseButton } from '../components/base-button';
-import { ColorfulEditIcon, DockIcon } from '../components/bs-icons';
-
-const meta = {
-  title: 'Example/Button/BaseButton',
-  component: BaseButton,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    children: 'AI填报示例数据',
-    icon: <DockIcon />,
-  },
-} satisfies Meta<typeof BaseButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Base: Story = {
-  args: {
-    icon: <ColorfulEditIcon />,
-  },
-};
-
-export const Hover: Story = {
-  parameters: {
-    pseudo: { hover: true },
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BaseButton } from '../components/base-button';
+import { ColorfulEditIcon, DockIcon } from '../components/bs-icons';
+
+const meta = {
+  title: 'Example/Button/BaseButton',
+  component: BaseButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: 'AI填报示例数据',
+    icon: <DockIcon />,
+  },
+} satisfies Meta<typeof BaseButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    icon: <ColorfulEditIcon />,
+  },
+};
+
+export const Hover: Story = {
+  parameters: {
+    pseudo: { hover: true },
+  },
+};