From c3d26bdb49cf000a870b328fec050608697fbdac Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Thu, 30 Apr 2026 13:57:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=87=E7=AD=BE=E6=8F=92=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/RegionIcon.svg | 3 + src/assets/icons/StyleIcon.svg | 7 + src/assets/icons/TypeIcon.svg | 10 ++ src/views/home/components/Input.md | 172 -------------------- src/views/home/components/Input.vue | 244 +++++++++++++++++++++++++++- 5 files changed, 261 insertions(+), 175 deletions(-) create mode 100644 src/assets/icons/RegionIcon.svg create mode 100644 src/assets/icons/StyleIcon.svg create mode 100644 src/assets/icons/TypeIcon.svg delete mode 100644 src/views/home/components/Input.md diff --git a/src/assets/icons/RegionIcon.svg b/src/assets/icons/RegionIcon.svg new file mode 100644 index 0000000..0db0779 --- /dev/null +++ b/src/assets/icons/RegionIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/StyleIcon.svg b/src/assets/icons/StyleIcon.svg new file mode 100644 index 0000000..c917711 --- /dev/null +++ b/src/assets/icons/StyleIcon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/TypeIcon.svg b/src/assets/icons/TypeIcon.svg new file mode 100644 index 0000000..612f523 --- /dev/null +++ b/src/assets/icons/TypeIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/views/home/components/Input.md b/src/views/home/components/Input.md deleted file mode 100644 index 2d0a079..0000000 --- a/src/views/home/components/Input.md +++ /dev/null @@ -1,172 +0,0 @@ -# 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` - -## 样式说明 - -- 使用 `