feat: 标签插入

2026-04-30 13:57:41 +08:00
parent b55a5ba896
commit c3d26bdb49
5 changed files with 261 additions and 175 deletions
--- a/src/assets/icons/RegionIcon.svg
+++ b/src/assets/icons/RegionIcon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84839 1.55138C6.37983 1.0828 5.6203 1.08288 5.15115 1.55159C4.68298 2.01933 4.68278 2.77954 5.15158 3.24883C5.61926 3.71701 6.37934 3.71723 6.84859 3.24842C7.31704 2.7804 7.31734 2.02035 6.84839 1.55138ZM4.30303 0.702658C5.24018 -0.233608 6.75921 -0.234902 7.69694 0.70287C8.63426 1.64024 8.63456 3.16037 7.69673 4.09734C7.38215 4.41162 7.00187 4.62058 6.6 4.724V9C6.6 9.33137 6.33137 9.6 6 9.6C5.66863 9.6 5.4 9.33137 5.4 9V4.72439C4.9979 4.62112 4.61738 4.41203 4.3026 4.09692C3.36652 3.15986 3.36495 1.63989 4.30303 0.702658ZM4.1891 7.30443C4.25198 7.62979 4.0392 7.94451 3.71385 8.00738C2.86688 8.17106 2.19276 8.4162 1.74744 8.68995C1.27691 8.97919 1.2 9.20648 1.2 9.3C1.2 9.36533 1.23168 9.49297 1.43046 9.67573C1.62975 9.85897 1.95124 10.0516 2.39909 10.2257C3.29098 10.5726 4.56389 10.8 6 10.8C7.43613 10.8 8.70904 10.5726 9.60092 10.2257C10.0488 10.0516 10.3703 9.85897 10.5695 9.67573C10.7683 9.49297 10.8 9.36533 10.8 9.3C10.8 9.20648 10.7231 8.9792 10.2526 8.68995C9.80723 8.4162 9.13311 8.17106 8.28615 8.00738C7.9608 7.9445 7.74802 7.62978 7.8109 7.30443C7.87378 6.97908 8.1885 6.7663 8.51385 6.82918C9.44493 7.00912 10.2708 7.29258 10.881 7.66766C11.4659 8.02723 12 8.569 12 9.3C12 9.81457 11.7295 10.2394 11.3817 10.5591C11.0345 10.8783 10.5652 11.1383 10.0359 11.3441C8.97332 11.7573 7.54623 12 6 12C4.45378 12 3.02669 11.7573 1.96416 11.3441C1.4348 11.1383 0.965481 10.8783 0.61826 10.5591C0.270528 10.2394 0 9.81457 0 9.3C0 8.569 0.534063 8.02724 1.11901 7.66766C1.72918 7.29258 2.55506 7.00912 3.48615 6.82918C3.8115 6.7663 4.12622 6.97908 4.1891 7.30443Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/StyleIcon.svg
+++ b/src/assets/icons/StyleIcon.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 6.75C4.24706 6.75 4.65 7.15294 4.65 7.65C4.65 8.14706 4.24706 8.55 3.75 8.55C3.25294 8.55 2.85 8.14706 2.85 7.65C2.85 7.15294 3.25294 6.75 3.75 6.75Z" fill="#FF7A51"/>
+<path d="M3.3 3.9C3.79706 3.9 4.2 4.30294 4.2 4.8C4.2 5.29706 3.79706 5.7 3.3 5.7C2.80294 5.7 2.4 5.29706 2.4 4.8C2.4 4.30294 2.80294 3.9 3.3 3.9Z" fill="#FF7A51"/>
+<path d="M8.25 3.15C8.74706 3.15 9.15 3.55294 9.15 4.05C9.15 4.54706 8.74706 4.95 8.25 4.95C7.75294 4.95 7.35 4.54706 7.35 4.05C7.35 3.55294 7.75294 3.15 8.25 3.15Z" fill="#FF7A51"/>
+<path d="M5.55 2.1C6.04706 2.1 6.45 2.50294 6.45 3C6.45 3.49706 6.04706 3.9 5.55 3.9C5.05294 3.9 4.65 3.49706 4.65 3C4.65 2.50294 5.05294 2.1 5.55 2.1Z" fill="#FF7A51"/>
+<path d="M6 0C9.31371 0 12 2.68629 12 6C12 7.21801 11.0125 8.20547 9.79453 8.20547H7.42031C7.20907 8.2055 7.0377 8.37684 7.0377 8.58809C7.03773 8.67163 7.06507 8.75301 7.11563 8.81953L7.65703 9.53145C7.83089 9.76021 7.92534 10.0398 7.92539 10.3271C7.92539 11.2509 7.1763 12 6.25254 12H6C2.68629 12 0 9.31371 0 6C4.83208e-08 2.68629 2.68629 4.83193e-08 6 0ZM6 1.2C3.34903 1.2 1.2 3.34903 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8H6.25254C6.51356 10.8 6.72539 10.5882 6.72539 10.3271C6.72534 10.3022 6.71699 10.2779 6.70195 10.258L6.16055 9.54551C5.9513 9.27019 5.83773 8.93389 5.8377 8.58809C5.8377 7.7141 6.54633 7.0055 7.42031 7.00547H9.79453C10.3498 7.00547 10.8 6.55527 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/TypeIcon.svg
+++ b/src/assets/icons/TypeIcon.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5159_47499)">
+<path d="M0 5.49996H5.49996V0H0V5.49996ZM0.999961 0.999961H4.5V4.5H0.999961V0.999961ZM0 12H5.49996V6.50004H0V12ZM0.999961 7.5H4.5V11H0.999961V7.5ZM12 2.75004C12 1.23363 10.7664 0 9.24996 0C7.73355 0 6.50004 1.23363 6.50004 2.75004V5.50008H9.25008C10.7664 5.49996 12 4.26633 12 2.75004ZM7.5 2.75004C7.5 1.78512 8.28504 1.00008 9.24996 1.00008C10.2149 1.00008 10.9999 1.78512 10.9999 2.75004C10.9999 3.71496 10.215 4.5 9.24996 4.5H7.5V2.75004ZM6.50004 12H12V6.50004H6.50004V12ZM7.5 7.5H11V11H7.5V7.5Z" fill="#FF7A51"/>
+</g>
+<defs>
+<clipPath id="clip0_5159_47499">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/views/home/components/Input.md
+++ b/src/views/home/components/Input.md
@@ -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`
-
-## 样式说明
-
- 使用 `<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` - 设置选项
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -53,7 +53,10 @@
 										<span>Upload files</span>
 									</div>
 									<div class="gap"></div>
-									<div class="report flex align-center" @click="toogltReportTag()">
+									<div
+										class="report flex align-center"
+										@click="toogltReportTag()"
+									>
 										<SvgIcon color="#5A5A5A" name="light" size="11" />
 										<span>Trending report</span>
 									</div>
@@ -232,6 +235,9 @@
 	import { useAgentStore, useProjectStore } from '@/stores'
 	import lightIcon from '@/assets/images/light-icon.png'
 	import closeIcon from '@/assets/images/close-icon.png'
+	import TypeIcon from '@/assets/icons/TypeIcon.svg'
+	import RegionIcon from '@/assets/icons/RegionIcon.svg'
+	import StyleIcon from '@/assets/icons/StyleIcon.svg'
 	import restoreIcon from '@/assets/images/restore.png'
 	import restoreCloseIcon from '@/assets/images/tag-close.png'
 	import { createProject } from '@/api/agent'
@@ -335,9 +341,14 @@
 		'Squiggle'
 	]

+	type OptionTagKind = 'type' | 'area' | 'style'
+
+	const optionTagOrder: OptionTagKind[] = ['type', 'area', 'style']
+
 	const editorRef = ref<HTMLDivElement | null>(null)
 	const inputValue = ref<string>('')
 	const reportTags = ref<HTMLElement[]>([])
+	const optionTags = ref<Partial<Record<OptionTagKind, HTMLElement>>>({})
 	const reportPromptText = ref<Text | null>(null)
 	let reportTypewriterTimeout: ReturnType<typeof setTimeout> | null = null

@@ -393,10 +404,161 @@
 		reportPromptText.value = null
 	}

+	const removeNodeWithNextSpacer = (node: Node) => {
+		const nextNode = node.nextSibling
+		if (nextNode && nextNode.nodeType === Node.TEXT_NODE && nextNode.textContent === '\u200B') {
+			nextNode.remove()
+		}
+		node.parentNode?.removeChild(node)
+	}
+
+	const hasOptionTags = () => {
+		return Object.values(optionTags.value).some((tag) => tag?.parentNode)
+	}
+
+	const getOptionTagValue = (kind: OptionTagKind) => {
+		if (kind === 'type') return typeValue.value
+		if (kind === 'area') return areaValue.value
+		return styleValue.value
+	}
+
+	const getOptionTagIcon = (kind: OptionTagKind) => {
+		if (kind === 'type') return TypeIcon
+		if (kind === 'area') return RegionIcon
+		return StyleIcon
+	}
+
+	const getTranslatedOptionLabel = (
+		options: Array<{ label: string; value: string }>,
+		value: string
+	) => {
+		const option = options.find((item) => item.value === value)
+		return option ? t(option.label) : value
+	}
+
+	const getOptionTagLabel = (kind: OptionTagKind) => {
+		const value = getOptionTagValue(kind)
+		if (kind === 'type') return getTranslatedOptionLabel(typeOptions.value, value)
+		if (kind === 'area') return getTranslatedOptionLabel(areaOptions.value, value)
+		return styleOptions.value.find((item) => item.value === value)?.label || value
+	}
+
+	const removeOptionTag = (kind: OptionTagKind) => {
+		const tag = optionTags.value[kind]
+		if (tag?.parentNode) {
+			removeNodeWithNextSpacer(tag)
+		}
+		delete optionTags.value[kind]
+	}
+
+	const removeAllOptionTags = () => {
+		optionTagOrder.forEach(removeOptionTag)
+		optionTags.value = {}
+	}
+
+	const clearOptionTagValue = (kind: OptionTagKind) => {
+		if (kind === 'type') {
+			typeValue.value = ''
+		} else if (kind === 'area') {
+			areaValue.value = ''
+		} else {
+			styleValue.value = ''
+			tempSelectedValue.value = ''
+		}
+
+		removeOptionTag(kind)
+		handleEditorInput()
+	}
+
+	const getOptionTagInsertBefore = () => {
+		const editor = editorRef.value
+		if (!editor) return null
+
+		for (const child of Array.from(editor.childNodes)) {
+			if (child.nodeType === Node.ELEMENT_NODE) {
+				const childKind = (child as HTMLElement).dataset.optionTagKind as OptionTagKind
+				if (childKind) continue
+			}
+			return child
+		}
+
+		return null
+	}
+
+	const createOptionTag = (kind: OptionTagKind, label: string) => {
+		const tag = document.createElement('div')
+		tag.contentEditable = 'false'
+		tag.className = 'editor-tag option-tag flex-center'
+		tag.dataset.optionTagKind = kind
+
+		const icon = document.createElement('img')
+		icon.className = 'option-tag-icon'
+		icon.src = getOptionTagIcon(kind) as unknown as string
+
+		const textSpan = document.createElement('span')
+		textSpan.className = 'option-tag-text'
+		textSpan.innerText = label
+
+		const close = document.createElement('img')
+		close.className = 'close-icon option-close'
+		close.src = closeIcon as unknown as string
+		close.addEventListener('click', (ev) => {
+			ev.stopPropagation()
+			clearOptionTagValue(kind)
+		})
+
+		tag.appendChild(icon)
+		tag.appendChild(textSpan)
+		tag.appendChild(close)
+
+		return tag
+	}
+
+	const syncOptionTag = (kind: OptionTagKind) => {
+		const value = getOptionTagValue(kind)
+		if (!value) {
+			removeOptionTag(kind)
+			handleEditorInput()
+			return
+		}
+
+		const label = getOptionTagLabel(kind)
+		const existingTag = optionTags.value[kind]
+
+		if (existingTag?.parentNode) {
+			const text = existingTag.querySelector('.option-tag-text')
+			if (text) text.textContent = label
+			handleEditorInput()
+			return
+		}
+
+		const editor = editorRef.value
+		if (!editor) return
+
+		const tag = createOptionTag(kind, label)
+		const referenceNode = getOptionTagInsertBefore()
+		if (referenceNode) {
+			editor.insertBefore(tag, referenceNode)
+		} else {
+			editor.appendChild(tag)
+		}
+
+		if (tag.parentNode) {
+			tag.parentNode.insertBefore(document.createTextNode('\u200B'), tag.nextSibling)
+		}
+
+		optionTags.value[kind] = tag
+		handleEditorInput()
+	}
+
+	const syncAllOptionTags = () => {
+		optionTagOrder.forEach(syncOptionTag)
+	}
+
 	// 控制占位符显示
 	const showPlaceholder = computed(() => {
 		if (!editorRef.value) return true
-		if (inputValue.value || reportTags.value.length > 0) return false
+		if (inputValue.value || reportTags.value.length > 0 || hasOptionTags()) return false

 		const editor = editorRef.value
 		const textContent = editor.textContent?.replace(/[\s\u200B\n]/g, '').trim() || '' // 移除空格、零宽空格、换行
@@ -539,6 +701,7 @@
 				editor.innerHTML = ''
 				editor.textContent = ''
 				reportTags.value = []
+				removeAllOptionTags()
 				stopReportTypewriter()
 				reportPromptText.value = null
 			}
@@ -573,6 +736,7 @@
 		if (!hasChildElements && !hasTextContent) {
 			editor.innerHTML = ''
 			reportTags.value = []
+			removeAllOptionTags()
 			stopReportTypewriter()
 			reportPromptText.value = null
 		}
@@ -642,10 +806,24 @@
 						const element = nodeToDelete as Element
 						const isEditorTag = element.classList.contains('editor-tag')
 						const isReportTag = element.classList.contains('report-tag')
+						const optionTagKind = (element as HTMLElement).dataset
+							.optionTagKind as OptionTagKind
+
+						if (optionTagKind) {
+							e.preventDefault()
+							clearOptionTagValue(optionTagKind)
+							nextTick(() => {
+								cleanupEditor()
+								handleEditorInput()
+							})
+							return
+						}

 						if (isEditorTag || isReportTag) {
 							e.preventDefault()
-							removeReportPromptText()
+							if (reportTags.value.includes(element as HTMLElement)) {
+								removeReportPromptText()
+							}
 							element.remove()

 							// 从 reportTags 中移除
@@ -772,6 +950,30 @@
 		}))
 	)

+	watch(typeValue, () => {
+		nextTick(() => {
+			syncOptionTag('type')
+		})
+	})
+
+	watch(areaValue, () => {
+		nextTick(() => {
+			syncOptionTag('area')
+		})
+	})
+
+	watch(styleValue, () => {
+		nextTick(() => {
+			syncOptionTag('style')
+		})
+	})
+
+	watch(locale, () => {
+		nextTick(() => {
+			syncAllOptionTags()
+		})
+	})
+
 	const handleCreateProject = async () => {
 		if (!inputValue.value.trim()) {
 			return
@@ -822,12 +1024,17 @@
 		if (editorRef.value) {
 			editorRef.value.innerHTML = ''
 		}
+		optionTags.value = {}
+		nextTick(() => {
+			syncAllOptionTags()
+		})
 	}

 	onMounted(() => {
 		MyEvent.add('quote', handleQuote)
 		MyEvent.add('projectChange', handleInitInput)
 		nextTick(() => {
+			syncAllOptionTags()
 			autoResizeEditor()
 		})
 	})
@@ -1360,6 +1567,37 @@
 			box-sizing: border-box;
 		}

+		&.option-tag {
+			width: auto;
+			max-width: 24rem;
+			height: 3.4rem;
+			padding: 0 1rem;
+			box-sizing: border-box;
+			align-items: center;
+			column-gap: 0.8rem;
+			color: #0d0d0d;
+
+			.option-tag-icon {
+				width: 1.2rem;
+				height: 1.2rem;
+				flex-shrink: 0;
+			}
+
+			.option-tag-text {
+				margin: 0;
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.option-close {
+				width: 0.7rem;
+				height: 0.7rem;
+				margin-left: 0.2rem;
+			}
+		}
+
 		span {
 			margin: 0 0.7rem 0 1.2rem;
 			&.restore-text {