# 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`

## 样式说明

- 使用 `<style lang="less">` scoped 样式
- 全局样式部分使用非 scoped (`.fida-` 前缀类名)
- 支持 hover 动画效果
- Agent 模式下样式有所简化

## 注意事项

1. 编辑器使用 `contenteditable`,需手动处理输入事件
2. 图片上传后使用 FileReader 读取本地预览
3. 标签使用 DOM 操作动态插入
4. 项目创建后会路由跳转至 `/home/agent/{projectId}`
5. 组件会自动聚焦编辑器

## 国际化键名参考

- `Input.placeholder` - 输入框占位符
- `Input.typePlaceholder` - 类型选择占位符
- `Input.areaPlaceholder` - 区域选择占位符
- `Input.stylePlaceholder` - 风格选择占位符
- `Input.chooseStyle` - 选择风格标题
- `Input.confirm` - 确认按钮
- `Input.styleTitle` - 设置弹窗标题
- `Input.createProject` - 创建项目按钮
- `Input.trendingReport` - 热点报告按钮文本
- `Input.types.sofa/desk/chair` - 家具类型选项
- `Input.settingOptions.first/second/third` - 设置选项