aidlab/FiDA_Front

Fork 0

Files

zhangyahui be29985f3f feat: 报告标签添加后显示新的Placeholder

2026-03-09 10:36:43 +08:00

4.7 KiB

Raw Blame History

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)

defineExpose({
  addReportTag: (text?: string) => void
})

数据结构

上传图片格式

interface UploadedImage {
  url: string      // 预览URL (base64)
  name: string     // 文件名
  path: string     // 服务器路径
}

发送Payload格式

interface SendPayload {
  text: string           // 输入文本
  images: string[]       // 图片服务器路径
  tempImages: UploadedImage[]  // 预览图片数据
}

创建项目参数

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 模式下样式有所简化

注意事项

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

国际化键名参考

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 - 设置选项

4.7 KiB Raw Blame History