diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg
index 29b0e11..3d7f8e2 100644
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@@ -1,4 +1,5 @@
diff --git a/src/components/Preview/Preview.vue b/src/components/Preview/Preview.vue
new file mode 100644
index 0000000..a3c3f20
--- /dev/null
+++ b/src/components/Preview/Preview.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
![Preview Image]()
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/home/components/Input.md b/src/views/home/components/Input.md
new file mode 100644
index 0000000..2d0a079
--- /dev/null
+++ b/src/views/home/components/Input.md
@@ -0,0 +1,172 @@
+# Input 组件文档
+
+## 组件概述
+
+`Input.vue` 是一个输入框组件,用于家具设计项目的创建和AI对话场景。主要提供文本输入、图片上传、选项选择和项目创建等功能。
+
+## 组件位置
+
+`src/views/home/components/Input.vue`
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `isAgentMode` | `boolean` | `false` | 是否为Agent模式(简化界面) |
+| `generating` | `boolean` | `false` | 是否正在生成内容 |
+
+## Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `send` | `{ text: string, images: string[], tempImages: Array }` | 发送消息/创建项目 |
+| `pause` | - | 暂停生成 |
+
+## 组件模式
+
+### 普通模式 (isAgentMode = false)
+
+完整的输入界面,包含以下功能:
+- 图片上传附件按钮
+- 类型选择下拉框 (Sofa/Desk/Chair)
+- 区域选择下拉框
+- 风格选择弹窗 (15种风格)
+- 设置弹窗 (3个滑块参数)
+- 创建项目按钮
+
+### Agent模式 (isAgentMode = true)
+
+简化界面,仅包含:
+- 文本输入区域
+- 发送/暂停按钮
+
+## 功能详解
+
+### 1. 图片上传
+
+- 支持通过附件按钮或拖拽上传图片
+- 图片预览区域显示已上传图片
+- 可删除单个图片
+- 图片通过 `uploadImage` API 上传
+
+### 2. 富文本编辑
+
+使用 `contenteditable` div 实现:
+- 支持粘贴纯文本
+- 支持回车发送/创建
+- 支持退格键删除标签
+
+### 3. 热点报告标签
+
+点击底部按钮添加特殊标签:
+- 标签包含图标和文本
+- 可通过关闭按钮删除
+- 插入到编辑器光标位置
+
+### 4. 风格选择弹窗
+
+15种家具风格可选:
+```
+Venetian Modern, Coastal, Maximalism, Memphis, Verdant,
+Century Chrome, Modern Revival, Transitional, Tuscan 2000's,
+Kitsch-core, Bauhaus, Constructivism, Nordic Noir, Dopamine, Squiggle
+```
+
+### 5. 设置弹窗
+
+3个滑块参数配置 (默认值50%):
+- 对应翻译路径: `Input.settingOptions.first/second/third`
+
+## 关键方法
+
+| 方法名 | 作用域 | 说明 |
+|--------|--------|------|
+| `triggerFileUpload` | 公开 | 触发文件选择 |
+| `handleFileChange` | 私有 | 处理文件选择变化 |
+| `removeImage` | 私有 | 删除指定索引的图片 |
+| `handleEditorInput` | 私有 | 处理编辑器输入 |
+| `handleEditorPaste` | 私有 | 处理粘贴事件 |
+| `handleKeyDown` | 私有 | 处理键盘事件 |
+| `handleSendAgent` | 私有 | Agent模式发送 |
+| `handleCreateProject` | 私有 | 创建项目 |
+| `addReportTag` | 公开 | 添加热点报告标签 |
+| `toogltReportTag` | 私有 | 切换热点报告标签 |
+| `selectStyle` | 私有 | 选择风格 |
+| `confirmStyle` | 私有 | 确认风格选择 |
+| `confirmSetting` | 私有 | 确认设置 |
+
+## 公开API (defineExpose)
+
+```typescript
+defineExpose({
+ addReportTag: (text?: string) => void
+})
+```
+
+## 数据结构
+
+### 上传图片格式
+```typescript
+interface UploadedImage {
+ url: string // 预览URL (base64)
+ name: string // 文件名
+ path: string // 服务器路径
+}
+```
+
+### 发送Payload格式
+```typescript
+interface SendPayload {
+ text: string // 输入文本
+ images: string[] // 图片服务器路径
+ tempImages: UploadedImage[] // 预览图片数据
+}
+```
+
+### 创建项目参数
+```typescript
+interface ProjectParams {
+ type: string // 家具类型
+ area: string // 区域
+ style: string // 风格
+ temperature: number // 温度参数 (固定0.7)
+}
+```
+
+## 依赖项
+
+- **Vue API**: `computed`, `ref`, `watch`, `nextTick`, `onMounted`
+- **Store**: `useAgentStore`, `useProjectStore`
+- **Utils**: `areaList` (区域列表), `getStyleImage` (风格图片)
+- **API**: `createProject`, `uploadImage`
+- **UI库**: Element Plus (`el-select`, `el-popover`, `el-slider`)
+- **国际化**: `vue-i18n`
+
+## 样式说明
+
+- 使用 `