FEAT => 本次更新项目为:
This commit is contained in:
@@ -1,65 +0,0 @@
|
||||
import React from "react";
|
||||
import { Card, Space, Typography } from "antd";
|
||||
import ChatFileUpload from "./index";
|
||||
import ChatFileUploadExample from "./example";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const ChatFileUploadTest: React.FC = () => {
|
||||
const handleFileUploaded = (fileInfo: {
|
||||
url: string;
|
||||
name: string;
|
||||
type: string;
|
||||
size: number;
|
||||
}) => {
|
||||
console.log("文件上传成功:", fileInfo);
|
||||
alert(
|
||||
`文件上传成功!\n文件名: ${fileInfo.name}\n大小: ${(fileInfo.size / 1024 / 1024).toFixed(2)}MB\n类型: ${fileInfo.type}\nURL: ${fileInfo.url}`,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 20 }}>
|
||||
<Title level={2}>ChatFileUpload 组件测试</Title>
|
||||
|
||||
<Space direction="vertical" size="large" style={{ width: "100%" }}>
|
||||
{/* 基础用法 */}
|
||||
<Card title="基础用法" size="small">
|
||||
<Paragraph>
|
||||
点击下面的按钮选择文件,选择后会自动上传并显示文件信息。
|
||||
</Paragraph>
|
||||
<Space>
|
||||
<ChatFileUpload
|
||||
onFileUploaded={handleFileUploaded}
|
||||
buttonText="选择文件"
|
||||
/>
|
||||
<ChatFileUpload
|
||||
onFileUploaded={handleFileUploaded}
|
||||
maxSize={10}
|
||||
accept="image/*"
|
||||
buttonText="选择图片"
|
||||
buttonIcon={<span>🖼️</span>}
|
||||
/>
|
||||
<ChatFileUpload
|
||||
onFileUploaded={handleFileUploaded}
|
||||
maxSize={20}
|
||||
accept=".pdf,.doc,.docx"
|
||||
buttonText="选择文档"
|
||||
buttonIcon={<span>📄</span>}
|
||||
/>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* 完整聊天示例 */}
|
||||
<Card title="完整聊天示例" size="small">
|
||||
<Paragraph>
|
||||
下面的示例展示了如何在聊天界面中使用ChatFileUpload组件。
|
||||
</Paragraph>
|
||||
<ChatFileUploadExample />
|
||||
</Card>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatFileUploadTest;
|
||||
Reference in New Issue
Block a user