dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/file-icon/index.stories.tsx
+++ b/dify/web/app/components/base/file-icon/index.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import FileIcon from '.'
+
+const meta = {
+  title: 'Base/General/FileIcon',
+  component: FileIcon,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Maps a file extension to the appropriate SVG icon used across upload and attachment surfaces.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'text',
+      description: 'File extension or identifier used to resolve the icon.',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom classes passed to the SVG wrapper.',
+    },
+  },
+  args: {
+    type: 'pdf',
+    className: 'h-10 w-10',
+  },
+} satisfies Meta<typeof FileIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => (
+    <div className="flex items-center gap-4 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+      <FileIcon {...args} />
+      <span className="text-sm text-text-secondary">Extension: {args.type}</span>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<FileIcon type="pdf" className="h-10 w-10" />
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Gallery: Story = {
+  render: () => {
+    const examples = ['pdf', 'docx', 'xlsx', 'csv', 'json', 'md', 'txt', 'html', 'notion', 'unknown']
+    return (
+      <div className="grid grid-cols-5 gap-4 rounded-lg border border-divider-subtle bg-components-panel-bg p-4">
+        {examples.map(type => (
+          <div key={type} className="flex flex-col items-center gap-1">
+            <FileIcon type={type} className="h-9 w-9" />
+            <span className="text-xs uppercase text-text-tertiary">{type}</span>
+          </div>
+        ))}
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+{['pdf','docx','xlsx','csv','json','md','txt','html','notion','unknown'].map(type => (
+  <FileIcon key={type} type={type} className="h-9 w-9" />
+))}
+        `.trim(),
+      },
+    },
+  },
+}
--- a/dify/web/app/components/base/file-icon/index.tsx
+++ b/dify/web/app/components/base/file-icon/index.tsx
@@ -0,0 +1,55 @@
+import type { FC } from 'react'
+import {
+  Csv,
+  Doc,
+  Docx,
+  Html,
+  Json,
+  Md,
+  Pdf,
+  Txt,
+  Unknown,
+  Xlsx,
+} from '@/app/components/base/icons/src/public/files'
+import { Notion } from '@/app/components/base/icons/src/public/common'
+
+type FileIconProps = {
+  type: string
+  className?: string
+}
+
+const FileIcon: FC<FileIconProps> = ({
+  type,
+  className,
+}) => {
+  switch (type) {
+    case 'csv':
+      return <Csv className={className} />
+    case 'doc':
+      return <Doc className={className} />
+    case 'docx':
+      return <Docx className={className} />
+    case 'htm':
+    case 'html':
+      return <Html className={className} />
+    case 'json':
+      return <Json className={className} />
+    case 'md':
+    case 'markdown':
+    case 'mdx':
+      return <Md className={className} />
+    case 'pdf':
+      return <Pdf className={className} />
+    case 'txt':
+      return <Txt className={className} />
+    case 'xls':
+    case 'xlsx':
+      return <Xlsx className={className} />
+    case 'notion':
+      return <Notion className={className} />
+    default:
+      return <Unknown className={className} />
+  }
+}
+
+export default FileIcon