feat: 报告标签添加后显示新的Placeholder
This commit is contained in:
172
src/views/home/components/Input.md
Normal file
172
src/views/home/components/Input.md
Normal file
@@ -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`
|
||||
|
||||
## 样式说明
|
||||
|
||||
- 使用 `<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` - 设置选项
|
||||
Reference in New Issue
Block a user