diff --git a/nkebao/src/components/Upload/ChatFileUpload/example.tsx b/nkebao/src/components/Upload/ChatFileUpload/example.tsx
new file mode 100644
index 000000000..9795e00be
--- /dev/null
+++ b/nkebao/src/components/Upload/ChatFileUpload/example.tsx
@@ -0,0 +1,254 @@
+import React, { useState } from "react";
+import { Input, Button, Card, Space, Typography, Divider } from "antd";
+import { SendOutlined } from "@ant-design/icons";
+import ChatFileUpload from "./index";
+
+const { TextArea } = Input;
+const { Text } = Typography;
+
+interface ChatMessage {
+  id: string;
+  type: "text" | "file";
+  content: string;
+  timestamp: Date;
+  fileInfo?: {
+    url: string;
+    name: string;
+    type: string;
+    size: number;
+  };
+}
+
+const ChatFileUploadExample: React.FC = () => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputValue, setInputValue] = useState("");
+
+  // 处理文件上传
+  const handleFileUploaded = (fileInfo: {
+    url: string;
+    name: string;
+    type: string;
+    size: number;
+  }) => {
+    const newMessage: ChatMessage = {
+      id: Date.now().toString(),
+      type: "file",
+      content: `文件: ${fileInfo.name}`,
+      timestamp: new Date(),
+      fileInfo,
+    };
+
+    setMessages(prev => [...prev, newMessage]);
+  };
+
+  // 处理文本发送
+  const handleSendText = () => {
+    if (!inputValue.trim()) return;
+
+    const newMessage: ChatMessage = {
+      id: Date.now().toString(),
+      type: "text",
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages(prev => [...prev, newMessage]);
+    setInputValue("");
+  };
+
+  // 格式化文件大小
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  // 获取文件类型图标
+  const getFileTypeIcon = (type: string, name: string) => {
+    const lowerType = type.toLowerCase();
+    const lowerName = name.toLowerCase();
+
+    if (lowerType.startsWith("image/")) {
+      return "🖼️";
+    } else if (lowerType.startsWith("video/")) {
+      return "🎥";
+    } else if (lowerType.startsWith("audio/")) {
+      return "🎵";
+    } else if (lowerType === "application/pdf") {
+      return "📄";
+    } else if (lowerName.endsWith(".doc") || lowerName.endsWith(".docx")) {
+      return "📝";
+    } else if (lowerName.endsWith(".xls") || lowerName.endsWith(".xlsx")) {
+      return "📊";
+    } else if (lowerName.endsWith(".ppt") || lowerName.endsWith(".pptx")) {
+      return "📈";
+    } else {
+      return "📎";
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
+      <Card title="聊天文件上传示例" style={{ marginBottom: 20 }}>
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <Text>功能特点：</Text>
+          <ul>
+            <li>点击文件按钮直接唤醒文件选择框</li>
+            <li>选择文件后自动上传</li>
+            <li>上传成功后自动发送到聊天框</li>
+            <li>支持各种文件类型和大小限制</li>
+            <li>显示文件图标和大小信息</li>
+          </ul>
+        </Space>
+      </Card>
+
+      {/* 聊天消息区域 */}
+      <Card
+        title="聊天记录"
+        style={{
+          height: 400,
+          marginBottom: 20,
+          overflowY: "auto",
+        }}
+        bodyStyle={{ height: 320, overflowY: "auto" }}
+      >
+        {messages.length === 0 ? (
+          <div style={{ textAlign: "center", color: "#999", marginTop: 100 }}>
+            暂无消息，开始聊天吧！
+          </div>
+        ) : (
+          <div>
+            {messages.map(message => (
+              <div key={message.id} style={{ marginBottom: 16 }}>
+                <div
+                  style={{
+                    background: "#f0f0f0",
+                    padding: 12,
+                    borderRadius: 8,
+                    maxWidth: "80%",
+                    wordBreak: "break-word",
+                  }}
+                >
+                  {message.type === "text" ? (
+                    <div>{message.content}</div>
+                  ) : (
+                    <div>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          marginBottom: 4,
+                        }}
+                      >
+                        <span>
+                          {getFileTypeIcon(
+                            message.fileInfo!.type,
+                            message.fileInfo!.name,
+                          )}
+                        </span>
+                        <Text strong>{message.fileInfo!.name}</Text>
+                      </div>
+                      <div style={{ fontSize: 12, color: "#666" }}>
+                        大小: {formatFileSize(message.fileInfo!.size)}
+                      </div>
+                      <div style={{ fontSize: 12, color: "#666" }}>
+                        类型: {message.fileInfo!.type}
+                      </div>
+                      <a
+                        href={message.fileInfo!.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ fontSize: 12, color: "#1890ff" }}
+                      >
+                        查看文件
+                      </a>
+                    </div>
+                  )}
+                  <div
+                    style={{
+                      fontSize: 11,
+                      color: "#999",
+                      marginTop: 4,
+                      textAlign: "right",
+                    }}
+                  >
+                    {message.timestamp.toLocaleTimeString()}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* 输入区域 */}
+      <Card title="发送消息">
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <TextArea
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            placeholder="输入消息内容..."
+            autoSize={{ minRows: 2, maxRows: 4 }}
+            onPressEnter={e => {
+              if (!e.shiftKey) {
+                e.preventDefault();
+                handleSendText();
+              }
+            }}
+          />
+
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Space>
+              {/* 文件上传组件 */}
+              <ChatFileUpload
+                onFileUploaded={handleFileUploaded}
+                maxSize={50} // 最大50MB
+                accept="*/*" // 接受所有文件类型
+                buttonText="文件"
+                buttonIcon={<span>📎</span>}
+              />
+
+              {/* 图片上传组件 */}
+              <ChatFileUpload
+                onFileUploaded={handleFileUploaded}
+                maxSize={10} // 最大10MB
+                accept="image/*" // 只接受图片
+                buttonText="图片"
+                buttonIcon={<span>🖼️</span>}
+              />
+
+              {/* 文档上传组件 */}
+              <ChatFileUpload
+                onFileUploaded={handleFileUploaded}
+                maxSize={20} // 最大20MB
+                accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" // 只接受文档
+                buttonText="文档"
+                buttonIcon={<span>📄</span>}
+              />
+            </Space>
+
+            <Button
+              type="primary"
+              icon={<SendOutlined />}
+              onClick={handleSendText}
+              disabled={!inputValue.trim()}
+            >
+              发送
+            </Button>
+          </div>
+        </Space>
+      </Card>
+    </div>
+  );
+};
+
+export default ChatFileUploadExample;
diff --git a/nkebao/src/components/Upload/ChatFileUpload/index.module.scss b/nkebao/src/components/Upload/ChatFileUpload/index.module.scss
new file mode 100644
index 000000000..bb486d625
--- /dev/null
+++ b/nkebao/src/components/Upload/ChatFileUpload/index.module.scss
@@ -0,0 +1,48 @@
+.chatFileUpload {
+  display: inline-block;
+
+  .uploadButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 12px;
+    border: none;
+    background: transparent;
+    color: #666;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: #1890ff;
+      background-color: rgba(24, 144, 255, 0.1);
+    }
+
+    &:disabled {
+      color: #ccc;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    .anticon {
+      font-size: 16px;
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .chatFileUpload {
+    .uploadButton {
+      padding: 6px 8px;
+      font-size: 12px;
+
+      .anticon {
+        font-size: 14px;
+      }
+    }
+  }
+}
diff --git a/nkebao/src/components/Upload/ChatFileUpload/index.tsx b/nkebao/src/components/Upload/ChatFileUpload/index.tsx
new file mode 100644
index 000000000..9262388ce
--- /dev/null
+++ b/nkebao/src/components/Upload/ChatFileUpload/index.tsx
@@ -0,0 +1,189 @@
+import React, { useRef, useState } from "react";
+import { Button, message } from "antd";
+import {
+  PaperClipOutlined,
+  LoadingOutlined,
+  FileOutlined,
+  FileImageOutlined,
+  FileVideoOutlined,
+  FileAudioOutlined,
+  FilePdfOutlined,
+  FileWordOutlined,
+  FileExcelOutlined,
+  FilePptOutlined,
+} from "@ant-design/icons";
+import { uploadFile } from "@/api/common";
+import style from "./index.module.scss";
+
+interface ChatFileUploadProps {
+  onFileUploaded?: (fileInfo: {
+    url: string;
+    name: string;
+    type: string;
+    size: number;
+  }) => void;
+  disabled?: boolean;
+  className?: string;
+  maxSize?: number; // 最大文件大小(MB)
+  accept?: string; // 接受的文件类型
+  buttonText?: string;
+  buttonIcon?: React.ReactNode;
+}
+
+const ChatFileUpload: React.FC<ChatFileUploadProps> = ({
+  onFileUploaded,
+  disabled = false,
+  className,
+  maxSize = 50, // 默认50MB
+  accept = "*/*", // 默认接受所有文件类型
+  buttonText = "发送文件",
+  buttonIcon = <PaperClipOutlined />,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  // 获取文件图标
+  const getFileIcon = (file: File) => {
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+
+    if (type.startsWith("image/")) {
+      return <FileImageOutlined />;
+    } else if (type.startsWith("video/")) {
+      return <FileVideoOutlined />;
+    } else if (type.startsWith("audio/")) {
+      return <FileAudioOutlined />;
+    } else if (type === "application/pdf") {
+      return <FilePdfOutlined />;
+    } else if (name.endsWith(".doc") || name.endsWith(".docx")) {
+      return <FileWordOutlined />;
+    } else if (name.endsWith(".xls") || name.endsWith(".xlsx")) {
+      return <FileExcelOutlined />;
+    } else if (name.endsWith(".ppt") || name.endsWith(".pptx")) {
+      return <FilePptOutlined />;
+    } else {
+      return <FileOutlined />;
+    }
+  };
+
+  // 格式化文件大小
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  // 验证文件
+  const validateFile = (file: File): boolean => {
+    // 检查文件大小
+    if (file.size > maxSize * 1024 * 1024) {
+      message.error(`文件大小不能超过 ${maxSize}MB`);
+      return false;
+    }
+
+    // 检查文件类型（如果指定了accept）
+    if (accept !== "*/*") {
+      const acceptTypes = accept.split(",").map(type => type.trim());
+      const fileType = file.type;
+      const fileName = file.name.toLowerCase();
+
+      const isValidType = acceptTypes.some(type => {
+        if (type.startsWith(".")) {
+          // 扩展名匹配
+          return fileName.endsWith(type);
+        } else if (type.includes("*")) {
+          // MIME类型通配符匹配
+          const baseType = type.replace("*", "");
+          return fileType.startsWith(baseType);
+        } else {
+          // 精确MIME类型匹配
+          return fileType === type;
+        }
+      });
+
+      if (!isValidType) {
+        message.error(`不支持的文件类型: ${file.type}`);
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  // 处理文件选择
+  const handleFileSelect = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+
+    // 验证文件
+    if (!validateFile(file)) {
+      // 清空input值，允许重新选择同一文件
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      return;
+    }
+
+    setUploading(true);
+
+    try {
+      // 上传文件
+      const fileUrl = await uploadFile(file);
+
+      // 调用回调函数，传递文件信息
+      onFileUploaded?.({
+        url: fileUrl,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+      });
+
+      message.success("文件上传成功");
+    } catch (error: any) {
+      message.error(error.message || "文件上传失败");
+    } finally {
+      setUploading(false);
+      // 清空input值，允许重新选择同一文件
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  // 触发文件选择
+  const handleClick = () => {
+    if (disabled || uploading) return;
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className={`${style.chatFileUpload} ${className || ""}`}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        onChange={handleFileSelect}
+        style={{ display: "none" }}
+      />
+
+      <Button
+        type="text"
+        icon={uploading ? <LoadingOutlined /> : buttonIcon}
+        onClick={handleClick}
+        disabled={disabled || uploading}
+        className={style.uploadButton}
+        title={buttonText}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};
+
+export default ChatFileUpload;
diff --git a/nkebao/src/components/Upload/ChatFileUpload/test.tsx b/nkebao/src/components/Upload/ChatFileUpload/test.tsx
new file mode 100644
index 000000000..fc3ddb25f
--- /dev/null
+++ b/nkebao/src/components/Upload/ChatFileUpload/test.tsx
@@ -0,0 +1,65 @@
+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;
diff --git a/nkebao/src/components/Upload/README.md b/nkebao/src/components/Upload/README.md
index 9920f729e..3e7b3f8a3 100644
--- a/nkebao/src/components/Upload/README.md
+++ b/nkebao/src/components/Upload/README.md
@@ -9,6 +9,7 @@
 ### 1. MainImgUpload 主图封面上传组件
 
 #### 功能特点
+
 - 只支持上传一张图片作为主图封面
 - 上传后右上角显示删除按钮
 - 支持图片预览功能
@@ -19,10 +20,10 @@
 #### 使用方法
 
 ```tsx
-import MainImgUpload from '@/components/Upload/MainImgUpload';
+import MainImgUpload from "@/components/Upload/MainImgUpload";
 
 const MyComponent = () => {
-  const [mainImage, setMainImage] = useState<string>('');
+  const [mainImage, setMainImage] = useState<string>("");
 
   return (
     <MainImgUpload
@@ -37,27 +38,32 @@ const MyComponent = () => {
 ```
 
 #### 编辑模式数据回显
+
 ```tsx
 // 编辑模式下，传入已有的图片URL
-const [mainImage, setMainImage] = useState<string>('https://example.com/image.jpg');
+const [mainImage, setMainImage] = useState<string>(
+  "https://example.com/image.jpg",
+);
 
 <MainImgUpload
   value={mainImage} // 会自动显示已上传的图片
   onChange={setMainImage}
-/>
+/>;
 ```
 
 ### 2. ImageUpload 多图上传组件
 
 #### 功能特点
+
 - 支持多张图片上传
 - 可设置最大上传数量
 - 支持图片预览和删除
 - **支持数据回显**：编辑时自动显示已上传的图片数组
 
 #### 使用方法
+
 ```tsx
-import ImageUpload from '@/components/Upload/ImageUpload/ImageUpload';
+import ImageUpload from "@/components/Upload/ImageUpload/ImageUpload";
 
 const MyComponent = () => {
   const [images, setImages] = useState<string[]>([]);
@@ -74,22 +80,24 @@ const MyComponent = () => {
 ```
 
 #### 编辑模式数据回显
+
 ```tsx
 // 编辑模式下，传入已有的图片URL数组
 const [images, setImages] = useState<string[]>([
-  'https://example.com/image1.jpg',
-  'https://example.com/image2.jpg'
+  "https://example.com/image1.jpg",
+  "https://example.com/image2.jpg",
 ]);
 
 <ImageUpload
   value={images} // 会自动显示已上传的图片
   onChange={setImages}
-/>
+/>;
 ```
 
 ### 3. VideoUpload 视频上传组件
 
 #### 功能特点
+
 - 支持视频文件上传
 - 支持单个或多个视频
 - 视频预览功能
@@ -97,11 +105,12 @@ const [images, setImages] = useState<string[]>([
 - **支持数据回显**：编辑时自动显示已上传的视频
 
 #### 使用方法
+
 ```tsx
-import VideoUpload from '@/components/Upload/VideoUpload';
+import VideoUpload from "@/components/Upload/VideoUpload";
 
 const MyComponent = () => {
-  const [videoUrl, setVideoUrl] = useState<string>('');
+  const [videoUrl, setVideoUrl] = useState<string>("");
 
   return (
     <VideoUpload
@@ -115,67 +124,77 @@ const MyComponent = () => {
 ```
 
 #### 编辑模式数据回显
+
 ```tsx
 // 编辑模式下，传入已有的视频URL
-const [videoUrl, setVideoUrl] = useState<string>('https://example.com/video.mp4');
+const [videoUrl, setVideoUrl] = useState<string>(
+  "https://example.com/video.mp4",
+);
 
 <VideoUpload
   value={videoUrl} // 会自动显示已上传的视频
   onChange={setVideoUrl}
-/>
+/>;
 ```
 
 ### 4. FileUpload 文件上传组件
 
 #### 功能特点
+
 - 支持Excel、Word、PPT等文档文件
 - 可配置接受的文件类型
 - 文件预览和下载
 - **支持数据回显**：编辑时自动显示已上传的文件
 
 #### 使用方法
+
 ```tsx
-import FileUpload from '@/components/Upload/FileUpload';
+import FileUpload from "@/components/Upload/FileUpload";
 
 const MyComponent = () => {
-  const [fileUrl, setFileUrl] = useState<string>('');
+  const [fileUrl, setFileUrl] = useState<string>("");
 
   return (
     <FileUpload
       value={fileUrl}
       onChange={setFileUrl}
       maxSize={10} // 最大10MB
-      acceptTypes={['excel', 'word', 'ppt']}
+      acceptTypes={["excel", "word", "ppt"]}
     />
   );
 };
 ```
 
 #### 编辑模式数据回显
+
 ```tsx
 // 编辑模式下，传入已有的文件URL
-const [fileUrl, setFileUrl] = useState<string>('https://example.com/document.xlsx');
+const [fileUrl, setFileUrl] = useState<string>(
+  "https://example.com/document.xlsx",
+);
 
 <FileUpload
   value={fileUrl} // 会自动显示已上传的文件
   onChange={setFileUrl}
-/>
+/>;
 ```
 
 ### 5. AvatarUpload 头像上传组件
 
 #### 功能特点
+
 - 专门的头像上传组件
 - 圆形头像显示
 - 支持删除和重新上传
 - **支持数据回显**：编辑时自动显示已上传的头像
 
 #### 使用方法
+
 ```tsx
-import AvatarUpload from '@/components/Upload/AvatarUpload';
+import AvatarUpload from "@/components/Upload/AvatarUpload";
 
 const MyComponent = () => {
-  const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [avatarUrl, setAvatarUrl] = useState<string>("");
 
   return (
     <AvatarUpload
@@ -188,19 +207,176 @@ const MyComponent = () => {
 ```
 
 #### 编辑模式数据回显
+
 ```tsx
 // 编辑模式下，传入已有的头像URL
-const [avatarUrl, setAvatarUrl] = useState<string>('https://example.com/avatar.jpg');
+const [avatarUrl, setAvatarUrl] = useState<string>(
+  "https://example.com/avatar.jpg",
+);
 
 <AvatarUpload
   value={avatarUrl} // 会自动显示已上传的头像
   onChange={setAvatarUrl}
+/>;
+```
+
+### 6. ChatFileUpload 聊天文件上传组件
+
+#### 功能特点
+
+- 专门为聊天场景设计的文件上传组件
+- 点击按钮直接唤醒文件选择框
+- 选择文件后自动上传
+- 上传成功后自动发送到聊天框
+- 支持各种文件类型和大小限制
+- 显示文件图标和大小信息
+- 支持自定义按钮文本和图标
+
+#### 使用方法
+
+```tsx
+import ChatFileUpload from "@/components/Upload/ChatFileUpload";
+
+const ChatComponent = () => {
+  const handleFileUploaded = (fileInfo: {
+    url: string;
+    name: string;
+    type: string;
+    size: number;
+  }) => {
+    // 处理上传成功的文件
+    console.log("文件上传成功:", fileInfo);
+    // 发送到聊天框
+    sendMessage({
+      type: "file",
+      content: fileInfo,
+    });
+  };
+
+  return (
+    <ChatFileUpload
+      onFileUploaded={handleFileUploaded}
+      maxSize={50} // 最大50MB
+      accept="*/*" // 接受所有文件类型
+      buttonText="发送文件"
+      buttonIcon={<span>📎</span>}
+    />
+  );
+};
+```
+
+#### 不同文件类型的配置示例
+
+```tsx
+// 图片上传
+<ChatFileUpload
+  onFileUploaded={handleFileUploaded}
+  maxSize={10}
+  accept="image/*"
+  buttonText="图片"
+  buttonIcon={<span>🖼️</span>}
 />
+
+// 文档上传
+<ChatFileUpload
+  onFileUploaded={handleFileUploaded}
+  maxSize={20}
+  accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
+  buttonText="文档"
+  buttonIcon={<span>📄</span>}
+/>
+
+// 视频上传
+<ChatFileUpload
+  onFileUploaded={handleFileUploaded}
+  maxSize={100}
+  accept="video/*"
+  buttonText="视频"
+  buttonIcon={<span>🎥</span>}
+/>
+```
+
+#### 在聊天界面中的完整使用示例
+
+```tsx
+import React, { useState } from "react";
+import { Input, Button } from "antd";
+import ChatFileUpload from "@/components/Upload/ChatFileUpload";
+
+const ChatInterface = () => {
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleFileUploaded = fileInfo => {
+    const newMessage = {
+      id: Date.now(),
+      type: "file",
+      content: fileInfo,
+      timestamp: new Date(),
+    };
+    setMessages(prev => [...prev, newMessage]);
+  };
+
+  const handleSendText = () => {
+    if (!inputValue.trim()) return;
+
+    const newMessage = {
+      id: Date.now(),
+      type: "text",
+      content: inputValue,
+      timestamp: new Date(),
+    };
+    setMessages(prev => [...prev, newMessage]);
+    setInputValue("");
+  };
+
+  return (
+    <div>
+      {/* 聊天消息区域 */}
+      <div className="chat-messages">
+        {messages.map(msg => (
+          <div key={msg.id} className="message">
+            {msg.type === "file" ? (
+              <div>
+                <div>📎 {msg.content.name}</div>
+                <div>大小: {formatFileSize(msg.content.size)}</div>
+                <a href={msg.content.url} target="_blank">
+                  查看文件
+                </a>
+              </div>
+            ) : (
+              <div>{msg.content}</div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* 输入区域 */}
+      <div className="chat-input">
+        <Input.TextArea
+          value={inputValue}
+          onChange={e => setInputValue(e.target.value)}
+          placeholder="输入消息..."
+        />
+        <div className="input-actions">
+          <ChatFileUpload
+            onFileUploaded={handleFileUploaded}
+            maxSize={50}
+            accept="*/*"
+            buttonText="文件"
+          />
+          <Button onClick={handleSendText}>发送</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
 ```
 
 ## 数据回显机制
 
 ### 工作原理
+
 所有Upload组件都通过以下机制实现数据回显：
 
 1. **useEffect监听value变化**：当传入的value发生变化时，自动更新内部状态
@@ -209,11 +385,13 @@ const [avatarUrl, setAvatarUrl] = useState<string>('https://example.com/avatar.j
 4. **UI更新**：根据文件列表自动更新界面显示
 
 ### 使用场景
+
 - **新增模式**：value为空或未定义，显示上传按钮
 - **编辑模式**：value包含已上传文件的URL，自动显示文件
 - **混合模式**：支持部分文件已上传，部分文件待上传
 
 ### 注意事项
+
 1. **URL格式**：确保传入的URL是有效的文件访问地址
 2. **权限验证**：确保文件URL在编辑时仍然可访问
 3. **状态同步**：value和onChange需要正确配合使用
@@ -222,6 +400,7 @@ const [avatarUrl, setAvatarUrl] = useState<string>('https://example.com/avatar.j
 ## 技术实现
 
 ### 核心特性
+
 - 基于 antd Upload 组件
 - 使用 antd-mobile 的 Toast 提示
 - 支持 FormData 上传
@@ -230,6 +409,7 @@ const [avatarUrl, setAvatarUrl] = useState<string>('https://example.com/avatar.j
 - **完整的数据回显支持**
 
 ### 文件结构
+
 ```
 src/components/Upload/
 ├── MainImgUpload/          # 主图上传组件
@@ -237,11 +417,17 @@ src/components/Upload/
 ├── VideoUpload/            # 视频上传组件
 ├── FileUpload/             # 文件上传组件
 ├── AvatarUpload/           # 头像上传组件
+├── ChatFileUpload/         # 聊天文件上传组件
+│   ├── index.tsx           # 主组件文件
+│   ├── index.module.scss   # 样式文件
+│   └── example.tsx         # 使用示例
 └── README.md               # 使用说明文档
 ```
 
 ### 统一的数据回显模式
+
 所有组件都遵循相同的数据回显模式：
+
 ```tsx
 // 1. 接收value属性
 interface Props {
diff --git a/nkebao/src/pages/pc/ckbox/components/ChatWindow.module.scss b/nkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss
similarity index 79%
rename from nkebao/src/pages/pc/ckbox/components/ChatWindow.module.scss
rename to nkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss
index 5b73a0596..7df795621 100644
--- a/nkebao/src/pages/pc/ckbox/components/ChatWindow.module.scss
+++ b/nkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss
@@ -86,7 +86,7 @@
 .chatFooter {
   background: #fff;
   border-top: 1px solid #f0f0f0;
-  padding: 16px;
+  padding: 0;
   height: auto;
   min-height: auto;
   flex-shrink: 0;
@@ -94,43 +94,114 @@
   .inputContainer {
     .inputToolbar {
       display: flex;
-      gap: 8px;
-      margin-bottom: 8px;
+      border-bottom: 1px solid #f0f0f0;
+      background: #fafafa;
+      justify-content: space-between;
+
+      .leftTool {
+        display: flex;
+        gap: 4px;
+      }
+
+      .rightTool {
+        display: flex;
+        gap: 8px;
+        padding: 8px;
+      }
 
       .toolbarButton {
-        color: #8c8c8c;
+        color: #666;
         border: none;
-        padding: 4px 8px;
+        padding: 8px;
+        border-radius: 4px;
+        font-size: 18px;
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        transition: all 0.2s;
 
         &:hover {
           color: #1890ff;
-          background: #f5f5f5;
+          background: #e6f7ff;
+        }
+
+        &:active {
+          background: #bae7ff;
         }
       }
     }
 
     .inputArea {
       display: flex;
+      padding: 12px 16px;
       gap: 8px;
       align-items: flex-end;
+      background: #fff;
 
       .messageInput {
         flex: 1;
-        border-radius: 8px;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
         resize: none;
+        padding: 8px 12px;
+        font-size: 14px;
+        line-height: 1.5;
+        min-height: 36px;
+        max-height: 120px;
+        background: #fff;
+        transition: all 0.2s;
 
         &:focus {
           border-color: #1890ff;
           box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+          outline: none;
+        }
+
+        &::placeholder {
+          color: #bfbfbf;
         }
       }
 
       .sendButton {
-        border-radius: 8px;
-        height: 32px;
+        border-radius: 4px;
+        height: 36px;
         padding: 0 16px;
+        font-size: 14px;
+        font-weight: 500;
+        background: #1890ff;
+        border: 1px solid #1890ff;
+        color: #fff;
+        transition: all 0.2s;
+
+        &:hover {
+          background: #40a9ff;
+          border-color: #40a9ff;
+        }
+
+        &:active {
+          background: #096dd9;
+          border-color: #096dd9;
+        }
+
+        &:disabled {
+          background: #f5f5f5;
+          border-color: #d9d9d9;
+          color: #bfbfbf;
+          cursor: not-allowed;
+        }
       }
     }
+
+    .inputHint {
+      padding: 4px 16px 8px;
+      font-size: 12px;
+      color: #8c8c8c;
+      background: #fff;
+      border-top: 1px solid #f0f0f0;
+    }
   }
 }
 
@@ -238,9 +309,7 @@
 
       .contactInfo {
         .contactItem {
-          display: flex;
           align-items: center;
-          gap: 8px;
           margin-bottom: 12px;
           font-size: 14px;
           color: #262626;
@@ -255,9 +324,8 @@
             width: 16px;
           }
 
-          span {
-            flex: 1;
-            word-break: break-all;
+          .contactItemText {
+            padding-left: 10px;
           }
         }
       }
diff --git a/nkebao/src/pages/pc/ckbox/components/ChatWindow.tsx b/nkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
similarity index 59%
rename from nkebao/src/pages/pc/ckbox/components/ChatWindow.tsx
rename to nkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
index bc130d7ae..6e2ead3e2 100644
--- a/nkebao/src/pages/pc/ckbox/components/ChatWindow.tsx
+++ b/nkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
@@ -15,11 +15,13 @@ import {
   Tag,
   Row,
   Col,
+  Modal,
 } from "antd";
 import {
+  ShareAltOutlined,
   SendOutlined,
   SmileOutlined,
-  PaperClipOutlined,
+  FolderOutlined,
   PhoneOutlined,
   VideoCameraOutlined,
   MoreOutlined,
@@ -29,11 +31,16 @@ import {
   EnvironmentOutlined,
   CalendarOutlined,
   BankOutlined,
-  IdcardOutlined,
   CloseOutlined,
+  StarOutlined,
+  EnvironmentOutlined as LocationOutlined,
+  AudioOutlined,
+  AudioOutlined as AudioHoldOutlined,
+  CodeSandboxOutlined,
+  MessageOutlined,
 } from "@ant-design/icons";
 import dayjs from "dayjs";
-import { ChatSession, MessageData, MessageType } from "../data";
+import { ChatSession, MessageData, MessageType } from "../../data";
 // import { getChatHistory, sendMessage } from "../api";
 import styles from "./ChatWindow.module.scss";
 
@@ -56,6 +63,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
   const [messages, setMessages] = useState<MessageData[]>([]);
   const [inputValue, setInputValue] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showMaterialModal, setShowMaterialModal] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -140,6 +148,46 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
     }
   };
 
+  // 素材菜单项
+  const materialMenuItems = [
+    {
+      key: "text",
+      label: "文字素材",
+      icon: <span>📝</span>,
+    },
+    {
+      key: "audio",
+      label: "语音素材",
+      icon: <span>🎵</span>,
+    },
+    {
+      key: "image",
+      label: "图片素材",
+      icon: <span>🖼️</span>,
+    },
+    {
+      key: "video",
+      label: "视频素材",
+      icon: <span>🎬</span>,
+    },
+    {
+      key: "link",
+      label: "链接素材",
+      icon: <span>🔗</span>,
+    },
+    {
+      key: "card",
+      label: "名片素材",
+      icon: <span>📇</span>,
+    },
+  ];
+
+  const handleMaterialSelect = (key: string) => {
+    console.log("选择素材类型:", key);
+    setShowMaterialModal(true);
+    // 这里可以根据不同的素材类型显示不同的模态框
+  };
+
   const renderMessage = (msg: MessageData) => {
     const isOwn = msg.senderId === "me";
     return (
@@ -278,20 +326,94 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
         <Footer className={styles.chatFooter}>
           <div className={styles.inputContainer}>
             <div className={styles.inputToolbar}>
-              <Tooltip title="表情">
-                <Button
-                  type="text"
-                  icon={<SmileOutlined />}
-                  className={styles.toolbarButton}
-                />
-              </Tooltip>
-              <Tooltip title="附件">
-                <Button
-                  type="text"
-                  icon={<PaperClipOutlined />}
-                  className={styles.toolbarButton}
-                />
-              </Tooltip>
+              <div className={styles.leftTool}>
+                <Tooltip title="表情">
+                  <Button
+                    type="text"
+                    icon={<SmileOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Tooltip>
+                <Tooltip title="上传附件">
+                  <Button
+                    type="text"
+                    icon={<FolderOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Tooltip>
+                <Tooltip title="收藏">
+                  <Button
+                    type="text"
+                    icon={<StarOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Tooltip>
+                <Tooltip title="位置">
+                  <Button
+                    type="text"
+                    icon={<LocationOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Tooltip>
+                <Tooltip title="语音">
+                  <Button
+                    type="text"
+                    icon={<AudioOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Tooltip>
+                <Tooltip title="按住说话">
+                  <Button
+                    type="text"
+                    icon={<AudioHoldOutlined />}
+                    className={styles.toolbarButton}
+                    style={{ position: "relative" }}
+                  >
+                    <span
+                      style={{
+                        position: "absolute",
+                        top: "2px",
+                        right: "2px",
+                        fontSize: "8px",
+                        color: "#52c41a",
+                        fontWeight: "bold",
+                      }}
+                    >
+                      H
+                    </span>
+                  </Button>
+                </Tooltip>
+                <Dropdown
+                  overlay={
+                    <Menu
+                      items={materialMenuItems}
+                      onClick={({ key }) => handleMaterialSelect(key)}
+                      style={{
+                        borderRadius: "8px",
+                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                      }}
+                    />
+                  }
+                  trigger={["click"]}
+                  placement="topLeft"
+                >
+                  <Button
+                    type="text"
+                    icon={<CodeSandboxOutlined />}
+                    className={styles.toolbarButton}
+                  />
+                </Dropdown>
+              </div>
+              <div className={styles.rightTool}>
+                <div className={styles.rightToolItem}>
+                  <ShareAltOutlined />
+                  转给他人
+                </div>
+                <div className={styles.rightToolItem}>
+                  <MessageOutlined />
+                  聊天记录
+                </div>
+              </div>
             </div>
             <div className={styles.inputArea}>
               <TextArea
@@ -312,6 +434,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
                 发送
               </Button>
             </div>
+            <div className={styles.inputHint}>按下Ctrl+Enter换行</div>
           </div>
         </Footer>
       </Layout>
@@ -355,23 +478,33 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
                 <div className={styles.contactInfo}>
                   <div className={styles.contactItem}>
                     <PhoneOutlined />
-                    <span>{contactInfo.phone}</span>
+                    <span className={styles.contactItemText}>
+                      {contactInfo.phone}
+                    </span>
                   </div>
                   <div className={styles.contactItem}>
                     <MailOutlined />
-                    <span>{contactInfo.email}</span>
+                    <span className={styles.contactItemText}>
+                      {contactInfo.email}
+                    </span>
                   </div>
                   <div className={styles.contactItem}>
                     <EnvironmentOutlined />
-                    <span>{contactInfo.location}</span>
+                    <span className={styles.contactItemText}>
+                      {contactInfo.location}
+                    </span>
                   </div>
                   <div className={styles.contactItem}>
                     <BankOutlined />
-                    <span>{contactInfo.company}</span>
+                    <span className={styles.contactItemText}>
+                      {contactInfo.company}
+                    </span>
                   </div>
                   <div className={styles.contactItem}>
                     <CalendarOutlined />
-                    <span>入职时间：{contactInfo.joinDate}</span>
+                    <span className={styles.contactItemText}>
+                      入职时间：{contactInfo.joinDate}
+                    </span>
                   </div>
                 </div>
               </Card>
@@ -409,6 +542,88 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
           </div>
         </Sider>
       )}
+
+      {/* 素材选择模态框 */}
+      <Modal
+        title="选择素材"
+        open={showMaterialModal}
+        onCancel={() => setShowMaterialModal(false)}
+        footer={[
+          <Button key="cancel" onClick={() => setShowMaterialModal(false)}>
+            取消
+          </Button>,
+          <Button
+            key="confirm"
+            type="primary"
+            onClick={() => setShowMaterialModal(false)}
+          >
+            确定
+          </Button>,
+        ]}
+        width={800}
+        bodyStyle={{ padding: 0 }}
+      >
+        <div style={{ display: "flex", height: "400px" }}>
+          {/* 左侧素材分类 */}
+          <div
+            style={{
+              width: "200px",
+              background: "#f5f5f5",
+              borderRight: "1px solid #e8e8e8",
+            }}
+          >
+            <div style={{ padding: "16px", borderBottom: "1px solid #e8e8e8" }}>
+              <h4 style={{ margin: 0, color: "#262626" }}>公共素材</h4>
+            </div>
+            <div style={{ padding: "8px 0" }}>
+              <div
+                style={{
+                  padding: "8px 16px",
+                  cursor: "pointer",
+                  background: "#e6f7ff",
+                  borderLeft: "3px solid #1890ff",
+                  color: "#1890ff",
+                }}
+              >
+                暗黑4
+              </div>
+              <div style={{ padding: "8px 16px", cursor: "pointer" }}>
+                针对老客户的...
+              </div>
+              <div style={{ padding: "8px 16px", cursor: "pointer" }}>
+                D2辅助
+              </div>
+              <div style={{ padding: "8px 16px", cursor: "pointer" }}>
+                ROS反馈演示...
+              </div>
+              <div style={{ padding: "8px 16px", cursor: "pointer" }}>
+                一键宏产品素...
+              </div>
+            </div>
+            <div style={{ padding: "16px", borderTop: "1px solid #e8e8e8" }}>
+              <h4 style={{ margin: 0, color: "#262626" }}>部门素材</h4>
+            </div>
+          </div>
+
+          {/* 右侧内容区域 */}
+          <div style={{ flex: 1, padding: "16px" }}>
+            <div style={{ marginBottom: "16px" }}>
+              <Input.Search placeholder="昵称" style={{ width: "100%" }} />
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "300px",
+                color: "#8c8c8c",
+              }}
+            >
+              请选择左侧素材分类
+            </div>
+          </div>
+        </div>
+      </Modal>
     </Layout>
   );
 };
diff --git a/nkebao/src/pages/pc/ckbox/components/ContactList.module.scss b/nkebao/src/pages/pc/ckbox/components/ContactList/ContactList.module.scss
similarity index 100%
rename from nkebao/src/pages/pc/ckbox/components/ContactList.module.scss
rename to nkebao/src/pages/pc/ckbox/components/ContactList/ContactList.module.scss
diff --git a/nkebao/src/pages/pc/ckbox/components/ContactList.tsx b/nkebao/src/pages/pc/ckbox/components/ContactList/index.tsx
similarity index 97%
rename from nkebao/src/pages/pc/ckbox/components/ContactList.tsx
rename to nkebao/src/pages/pc/ckbox/components/ContactList/index.tsx
index 4e4958621..7bf0c898e 100644
--- a/nkebao/src/pages/pc/ckbox/components/ContactList.tsx
+++ b/nkebao/src/pages/pc/ckbox/components/ContactList/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { List, Avatar, Badge } from "antd";
 import { UserOutlined } from "@ant-design/icons";
-import { ContactData } from "../data";
+import { ContactData } from "../../data";
 import styles from "./ContactList.module.scss";
 
 interface ContactListProps {
diff --git a/nkebao/src/pages/pc/ckbox/components/MessageList.module.scss b/nkebao/src/pages/pc/ckbox/components/MessageList/MessageList.module.scss
similarity index 100%
rename from nkebao/src/pages/pc/ckbox/components/MessageList.module.scss
rename to nkebao/src/pages/pc/ckbox/components/MessageList/MessageList.module.scss
diff --git a/nkebao/src/pages/pc/ckbox/components/MessageList.tsx b/nkebao/src/pages/pc/ckbox/components/MessageList/index.tsx
similarity index 100%
rename from nkebao/src/pages/pc/ckbox/components/MessageList.tsx
rename to nkebao/src/pages/pc/ckbox/components/MessageList/index.tsx
diff --git a/nkebao/src/pages/pc/ckbox/index.tsx b/nkebao/src/pages/pc/ckbox/index.tsx
index 352710dd2..1dfd486f9 100644
--- a/nkebao/src/pages/pc/ckbox/index.tsx
+++ b/nkebao/src/pages/pc/ckbox/index.tsx
@@ -32,9 +32,9 @@ import {
 } from "@ant-design/icons";
 import dayjs from "dayjs";
 import { ContactData, MessageData, ChatSession } from "./data";
-import ChatWindow from "./components/ChatWindow";
-import ContactList from "./components/ContactList";
-import MessageList from "./components/MessageList";
+import ChatWindow from "./components/ChatWindow/index";
+import ContactList from "./components/ContactList/index";
+import MessageList from "./components/MessageList/index";
 import styles from "./index.module.scss";
 
 const { Sider, Content } = Layout;