feat: weburl卡片位置

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>

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>

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>

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue

@@ -20,7 +20,7 @@
 	const stateManager = inject('stateManager') as any
 	const data = reactive({
 		url: stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID),
-		mode: 'Advanced',
+		mode: 'Normal',
 	})
 	const modeList = ref([
 		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },

src/components/Canvas/FlowCanvas/components/tools/threeModel/model.vue

@@ -41,6 +41,9 @@ const captureView = ()=>{
 onMounted(()=>{
 })
 onUnmounted(()=>{
+	console.log('onUnmounted')
+	threeModel.disposeModel()
+	threeModel = null
 })
 defineExpose({open,captureView})
 </script>

src/components/Canvas/FlowCanvas/components/tools/threeModel/threeTool.ts

@@ -24,7 +24,7 @@ export class ThreeManager {
     camera: THREE.PerspectiveCamera;//相机对象
     renderer: THREE.WebGLRenderer;//渲染器对象
     controls: OrbitControls;//轨道控制器对象
-
+	animationId: number | null = null;
 
     pointLight: THREE.AmbientLight;//环境光对象
     studioLights: any;//工作室光对象数组
@@ -316,15 +316,14 @@ export class ThreeManager {
 	}
 
 	operation(){
-		let this_ = this
 		const animate = () => {
-			requestAnimationFrame(animate);
+            this.animationId = requestAnimationFrame(animate);
-			this.controls.update();
+            this.controls?.update();
-			this.updateStudioLighting();
+            this.updateStudioLighting();
-			this.updateImagePipeline();
+            this.updateImagePipeline();
-			this.renderer.render(this.scene, this.camera);
+            this.renderer?.render(this.scene, this.camera);
-		}
+        };
-		animate();
+        animate();
 	}
 
 	// 释放模型资源
@@ -343,7 +342,91 @@ export class ThreeManager {
 			}
 		});
 	}
+	disposeModel() {
+        console.log('开始销毁 ThreeManager...');
+        // 1. 停止动画
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
         
+        // 2. 销毁控制器
+        if (this.controls) {
+            this.controls.dispose();
+            this.controls = null;
+        }
+        
+        // 3. 销毁模型
+        if (this.currentModel) {
+            this.dispose(this.currentModel);
+            this.scene?.remove(this.currentModel);
+            this.currentModel = null;
+        }
+        
+        // 4. 销毁灯光
+        if (this.studioLights?.length) {
+            this.studioLights.forEach(item => {
+                if (item.light) {
+                    this.scene?.remove(item.light);
+                    item.light.dispose?.();
+                }
+            });
+            this.studioLights = [];
+        }
+        
+        // 5. 清理环境光
+        if (this.pointLight) {
+            this.scene?.remove(this.pointLight);
+            this.pointLight = null;
+        }
+        
+        // 6. 清理场景
+        if (this.scene) {
+            this.scene.traverse((obj) => {
+                if (obj.isMesh) {
+                    const mesh = obj as THREE.Mesh;
+                    mesh.geometry?.dispose();
+                    if (mesh.material) {
+                        if (Array.isArray(mesh.material)) {
+                            mesh.material.forEach(m => m.dispose());
+                        } else {
+                            mesh.material.dispose();
+                        }
+                    }
+                }
+            });
+            
+            while (this.scene.children.length) {
+                this.scene.remove(this.scene.children[0]);
+            }
+            this.scene = null;
+        }
+        
+        // 7. 销毁渲染器
+        if (this.renderer) {
+            this.renderer.dispose();
+            if (this.renderer.domElement?.parentNode) {
+                this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
+            }
+            this.renderer = null;
+        }
+        
+        // 8. 清空 DOM 容器
+        if (this.threeDom) {
+            this.threeDom.innerHTML = '';
+            this.threeDom = null;
+        }
+        
+        // 9. 清空其他引用
+        this.camera = null;
+        this.v1 = null;
+        this.camDir = null;
+        this.camForward = null;
+        this.camToTarget = null;
+        this.modelInfo = null;
+        
+        console.log('ThreeManager 已销毁');
+    }
 
 	exportAsImage(){
 		return this.renderer.domElement.toDataURL('image/png');

src/lang/en.ts

@@ -41,7 +41,7 @@ export default {
 		retrievePassword: 'Retrieve password'
 	},
 	Nuic: {
-		hiName: `Hi, {name}, I'm Fiphant.`,
+		hiName: `Hi {name}, I'm Fiphant.`,
 		nuic1Title: `Let’s reveal the creative paths waiting for you.`,
 		nuic1Tip: `Let's set up your profile. A few quick details will help Fiphant understand<br />your needs and find exactly what you're looking for.`,
 		letsGo: 'Let’s go, Fiphant!',

src/stores/agent.ts

@@ -16,6 +16,7 @@ type InitialProjectData = {
 	useReport:boolean
 	needSuggestion:boolean
 	quoteList: Array<string>
+	parameterTags?: Array<{ kind: string; label: string }>
 	tempImages: any[]
 }
 export const useAgentStore = defineStore('agent', () => {

src/views/home/agent/AGENTS.md

@@ -0,0 +1,125 @@
+# Agent 页面 — 开发者指南
+
+## 目录结构
+
+```
+agent/
+├── index.vue                        # 主入口：布局 + 路由 + 事件注册
+├── AGENTS.md
+└── components/
+    ├── Agent.vue                    # AI 对话核心组件
+    ├── List.vue                     # 消息列表容器（自动滚动）
+    ├── Item.vue                     # 单条消息渲染（用户/AI）
+    ├── Preview.vue                  # 右侧预览面板（sketch/report/url）
+    ├── Menu.vue                     # 三点菜单（仅 UI，暂无逻辑）
+    ├── Pause.vue                    # 生成暂停提示条
+    ├── ReportCard.vue               # 报告/URL/草图的卡片插槽组件
+    ├── UrlCard.vue                  # URL 卡片（包裹 ReportCard）
+    ├── SketchCard.vue               # 草图卡片（包裹 ReportCard）
+    └── versionTree/                 # 版本树抽屉面板
+        ├── index.vue                # 版本树入口（el-drawer）
+        ├── detail/                  # 版本详情/聊天详情
+        ├── tree/                    # 树形视图组件
+        ├── components/              # 版本树内部子组件
+        └── tools/                   # 版本数据工具
+```
+
+## 数据流
+
+### 1. 项目加载流程
+```
+路由参数 id → index.vue:handleGetProjectInfoAndHistory()
+  → getProjectInfo API → Agent.vue:setChatInfo(conversation, project)
+  → messageList + sketchList 填充 → Preview 渲染
+```
+
+### 2. 对话发送流程
+```
+用户输入 → Input.vue @send
+  → Agent.vue:handleSendMessage()
+  → SSE GET 请求（/api/ai-design/chat）
+  → 逐行解析 event/data → 实时更新 messageList
+  → 草图/报告/URL 事件 → Preview 切换模式
+```
+
+### 3. 跨组件通信（MyEvent 事件总线）
+
+| 事件名 | 触发方 | 监听方 | 说明 |
+|--------|--------|--------|------|
+| `openReport` | Item.vue | index.vue | 点击报告卡片，Preview 切 report 模式 |
+| `openUrls` | Item.vue | index.vue | 点击 URL 卡片，Preview 切 url 模式 |
+| `openSketch` | Item.vue | index.vue | 点击草图卡片，Preview 切 sketch 模式 |
+| `quote` | Preview.vue | Input 组件 | 引用草图图片到输入框 |
+| `openFlowCanvas` | Preview.vue | Flow Canvas | 编辑草图 |
+| `resetAgent` | 外部 (Flow Canvas) | Agent.vue | 重置对话状态 |
+| `closeFlowCanvas` | 外部 | index.vue | 关闭 Flow Canvas 后刷新 |
+| `stopChat` | Agent.vue | Item.vue | 停止生成时显示暂停提示 |
+| `newTitle` | Agent.vue | 对话列表 | 更新项目标题 |
+| `projectChange` | index.vue | 外部 | 项目切换通知 |
+| `renameConversation` | 外部 | index.vue | 重命名项目时更新标题 |
+
+### 4. Store 使用
+
+| Store | 用途 |
+|-------|------|
+| `projectStore` | 当前项目 ID、nodeId、type/region/style/temperature |
+| `userStore` | 用户 token、头像 |
+| `agentStore` | 初始项目数据（跨页面传递首次对话参数） |
+
+## SSE 协议
+
+请求 URL: `/api/ai-design/chat` (GET)
+参数: `AgentParamsType` (message, projectID, versionID, configParams, token 等)
+
+响应格式: Server-Sent Events (SSE)
+
+### 事件类型
+
+| event 名称 | data 格式 | 作用 |
+|-----------|-----------|------|
+| `message` (默认) | `{"content": "..."}` | AI 回复文本流 |
+| `reasoning` | `{"reasoning": "..."}` | AI 推理过程 |
+| `nodeId` | 纯文本 `versionId` | 记录当前对话节点 ID |
+| `sketchIDAndUrl` | `{"key": "url", ...}` | 生成的草图键值对 |
+| `report` | `{"report": "..."}` | 报告内容流 |
+| `reportName` / `reportTitle` | `{"reportName": "..."}` | 报告名称 |
+| `tool` | 无 | 草图工具调用中 |
+| `title` | `{"title": "..."}` | 自动生成的对话标题 |
+| `webAddress` | `{"webAddress": "[...]"}` | 引用的网页来源 |
+| `error` | 无 | 服务端错误 |
+| `todo` | 无 | 忽略事件 |
+| `end` | `{"type": "end"}` 或 `[DONE]` | 流结束 |
+
+## 关键组件说明
+
+### Agent.vue
+- **`setChatInfo(info)`**: 加载历史对话，解析 `ancestors` + `current` 结构，合并连续 assistant 消息
+- **`handleSendMessage()`**: 核心方法，处理发消息、SSE 流式接收、解析各种事件
+- **`handlePause()`**: 通过 `AbortController.abort()` 中止请求
+- **`processDialogue()`**: 将原始对话数组中的连续 assistant 消息合并为一条，追加插槽标记
+- **`mergeUniqueKeys()`**: 防止草图片列表插入重复 key
+
+### Item.vue
+- 使用 `VueMarkdown` + `rehype-raw` 渲染 Markdown
+- 自定义插槽: `s-card`(报告), `s-url`(网页), `s-sketch`(草图)
+- 用户消息显示参数标签(type/area/style)
+- 仅最后一条 AI 消息显示操作按钮（点赞/点踩/重新生成/复制）
+
+### Preview.vue
+- **sketch 模式**: 4列网格展示草图，每个图片支持引用/编辑(Flow Canvas)/删除
+- **report 模式**: 渲染 Markdown 报告，支持下载 `.md` 文件
+- **url 模式**: 网页来源卡片，点击跳转
+- 使用自定义指令 `v-img-loading` 实现图片预加载占位
+
+### VersionTree (versionTree/index.vue)
+- `el-drawer` 抽屉面板，73.5rem 宽度
+- 加载版本树数据 → 递归遍历添加 `versionId` 路径标识
+- 选中节点可恢复对话 (Restore) 或导出图片 (Export)
+
+## 注意事项
+
+1. **AbortController** 每次请求前重新创建，旧的未完成请求会被中止
+2. **KeepAlive** 包裹 Agent 组件，切换项目时通过 `:key="proJectId"` 强制重建
+3. `onActivated` 处理缓存激活时的新队列数据（后台对话完成的节点/标题/草图）
+4. SSE 解析先用 `\n\n` 拆分事件块，再按 `\n` 解析 event/data 行，不完整的 JSON 放回 buffer
+5. 草图删除调用 `deleteSketchFlowCanvas` API 后需在父组件同步清理 sketchList

src/views/home/agent/components/Agent.vue

@@ -37,8 +37,12 @@
 	import type { AgentParamsType } from '@/api/agent'
 	import { useUserInfoStore, useProjectStore, useAgentStore } from '@/stores'
 	import MyEvent from '@/utils/myEvent'
+	import { areaList } from '@/utils/area'
 	import { useI18n } from 'vue-i18n'
 	import { useRoute } from 'vue-router'
+	import { ElMessage } from 'element-plus'
+	import { createStyleOptions, createTypeOptions } from '../../components/input/options'
+	import type { OptionItem, ParameterTag } from '../../components/input/types'
 
 	const { t } = useI18n()
 	const route = useRoute()
@@ -83,6 +87,59 @@
 	})
 
 	const sketchList = ref([])
+	const typeOptions = createTypeOptions()
+	const areaOptions = areaList
+	const styleOptions = createStyleOptions()
+
+	const getTranslatedOptionLabel = (options: OptionItem[], value?: string) => {
+		if (!value) return ''
+		const option = options.find((item) => item.value === value)
+		return option ? t(option.label) : value
+	}
+
+	const getOptionLabel = (options: OptionItem[], value?: string) => {
+		if (!value) return ''
+		return options.find((item) => item.value === value)?.label || value
+	}
+
+	const getProjectParameterTags = (project: any): ParameterTag[] => {
+		const type = project?.type || ''
+		const region = project?.region || project?.area || ''
+		const style = project?.style || ''
+		const tags: ParameterTag[] = []
+
+		if (type) {
+			tags.push({
+				kind: 'type',
+				label: getTranslatedOptionLabel(typeOptions, type)
+			})
+		}
+		if (region) {
+			tags.push({
+				kind: 'area',
+				label: getTranslatedOptionLabel(areaOptions, region)
+			})
+		}
+		if (style) {
+			tags.push({
+				kind: 'style',
+				label: getOptionLabel(styleOptions, style)
+			})
+		}
+
+		return tags
+	}
+
+	const applyProjectParameterTags = (messages: any[], project: any) => {
+		const parameterTags = getProjectParameterTags(project)
+		if (parameterTags.length === 0) return
+
+		const firstUserMessage = messages.find((item) => item.isUser || item.role === 'user')
+		if (firstUserMessage) {
+			firstUserMessage.parameterTags = parameterTags
+		}
+	}
+
 	watch(
 		sketchList,
 		(newVal) => {
@@ -119,8 +176,22 @@
 		return abort
 	}
 
+	let debouncedWebAddress: string[] | null = null
+	let openUrlsTimer: ReturnType<typeof setTimeout> | null = null
+	const triggerOpenUrls = (list: string[]) => {
+		debouncedWebAddress = list
+		if (openUrlsTimer) clearTimeout(openUrlsTimer)
+		openUrlsTimer = setTimeout(() => {
+			if (debouncedWebAddress) {
+				MyEvent.emit('openUrls', debouncedWebAddress)
+				debouncedWebAddress = null
+			}
+		}, 400)
+	}
+
 	onUnmounted(() => {
 		// abort?.abort()
+		if (openUrlsTimer) clearTimeout(openUrlsTimer)
 		MyEvent.remove('resetAgent', handleReset)
 	})
 
@@ -143,7 +214,8 @@
 				images: initialData.images,
 				useReport: initialData.useReport,
 				tempImages: initialData.tempImages,
-				quoteList: initialData.quoteList
+				quoteList: initialData.quoteList,
+				parameterTags: initialData.parameterTags || []
 			})
 			// 更新 configParams
 
@@ -181,6 +253,7 @@
 			tempImages: any[]
 			useReport: boolean
 			quoteList: Array<string>
+			parameterTags?: Array<{ kind: string; label: string }>
 		},
 		skipUserMessage = false
 	) => {
@@ -199,7 +272,8 @@
 				id: messageList.value.length + 1,
 				text: message.text,
 				isUser: true,
-				imageUrls: message.tempImages.concat(message.quoteList)
+				imageUrls: message.tempImages.concat(message.quoteList),
+				parameterTags: message.parameterTags || []
 			})
 		}
 
@@ -288,7 +362,6 @@
 
 			let hasSketchEvent = false
 			let hasReportEvent = false
-
 			try {
 				let flag = true
 				while (flag) {
@@ -391,8 +464,12 @@
 							const jsonData = JSON.parse(jsonText)
 							// console.log('jsonData', jsonData)
 							if (jsonData.webAddress) {
-								aiMessage.webAddress = JSON.parse(jsonData.webAddress)
+								const parsed = JSON.parse(jsonData.webAddress)
-								contentBody += `<slot slot-name="url"></slot>`
+								aiMessage.webAddress = parsed
+								aiMessage.loading = false
+								if (String(aiMessage.sessionId) === String(projectStore.state.id)) {
+									triggerOpenUrls(parsed)
+								}
 							}
 							if (jsonData.title) {
 								if (aiMessage.sessionId === projectStore.state.id) {
@@ -628,7 +705,7 @@
 	const setChatInfo = (info) => {
 		const initialData = agentStore.getInitialProjectData
 		if (isGenerating.value || initialData) return
-
+		console.log('---', info)
 		const data = info.conversation
 		let project = info.project
 		if (info.id) {
@@ -641,7 +718,7 @@
 
 		if (project) {
 			params.configParams.type = project.type || ''
-			params.configParams.region = project.area || ''
+			params.configParams.region = project.region || project.area || ''
 			params.configParams.style = project.style || ''
 			params.configParams.temperature = project.temperature
 			params.projectID = project.id
@@ -668,6 +745,7 @@
 					item.text += `<slot slot-name="sketch"></slot>`
 				}
 			})
+			applyProjectParameterTags(ancestorsList, project)
 			// console.log('ancestorslist', ancestorsList)
 			messageList.value = [...ancestorsList]
 			params.versionID = current?.id

src/views/home/agent/components/Item.vue

@@ -52,22 +52,42 @@
 						</div>
 					</div>
 				</div> -->
-				<div class="message-txt markdown-body flex flex-col">
+				<div class="message-txt markdown-body">
+					<span
+						v-if="parameterTags.length > 0"
+						class="message-parameter-tags"
+					>
+						<span
+							v-for="tag in parameterTags"
+							:key="`${tag.kind}-${tag.label}`"
+							class="message-parameter-tag"
+						>
+							<img :src="getParameterTagIcon(tag.kind)" class="parameter-tag-icon" />
+							<span>{{ tag.label }}</span>
+						</span>
+					</span>
 					<VueMarkdown
+						class="message-markdown"
 						:custom-attrs="customAttrs"
 						:markdown="content.text"
 						:rehype-plugins="[rehypeRaw]"
 					>
 						<template v-slot:s-card="{ children: children, ...attrs }">
-							<Card title="Trend Report" @click.native="handleClickReport" />
+							<Card title="Trend Report" @click="handleClickReport" />
-						</template>
-						<template v-slot:s-url="{ children: children }">
-							<Url :list="content.webAddress" @click.native="handleClickUrls" />
 						</template>
 						<template v-slot:s-sketch="{ children: children }">
-							<Sketch @click.native="handleClickSketch" />
+							<Sketch @click="handleClickSketch" />
 						</template>
 					</VueMarkdown>
+					<div
+						v-if="content.webAddress?.length > 0"
+						class="url-card-container"
+					>
+						<Url
+							:list="content.webAddress"
+							@click="handleClickUrls"
+						/>
+					</div>
 					<div
 						class="web-address flex align-center"
 						v-show="content.webAddress?.length > 0"
@@ -116,6 +136,9 @@
 	import { useI18n } from 'vue-i18n'
 	import userThumb from '@/assets/images/user-thumb.jpg'
 	import agentThumb from '@/assets/images/agent-thumb.png'
+	import TypeIcon from '@/assets/icons/TypeIcon.svg'
+	import RegionIcon from '@/assets/icons/RegionIcon.svg'
+	import StyleIcon from '@/assets/icons/StyleIcon.svg'
 	import Card from './ReportCard.vue'
 	import Url from './UrlCard.vue'
 	import Sketch from './SketchCard.vue'
@@ -126,6 +149,7 @@
 	import rehypeRaw from 'rehype-raw'
 	import MyEvent from '@/utils/myEvent'
 	import { useUserInfoStore, useProjectStore } from '@/stores'
+	import { ElMessage } from 'element-plus'
 
 	const userStore = useUserInfoStore()
 	const projectStore = useProjectStore()
@@ -136,8 +160,14 @@
 		return locale.value === 'CHINESE_SIMPLIFIED'
 	})
 
+	type ParameterTagKind = 'type' | 'area' | 'style'
+	type ParameterTag = {
+		kind: ParameterTagKind
+		label: string
+	}
+
 	const props = defineProps<{
-		content: Object
+		content: any
 		isLast: Boolean
 	}>()
 
@@ -174,6 +204,16 @@
 		return list
 	})
 
+	const parameterTags = computed<ParameterTag[]>(() => {
+		return Array.isArray(props.content?.parameterTags) ? props.content.parameterTags : []
+	})
+
+	const getParameterTagIcon = (kind: ParameterTagKind) => {
+		if (kind === 'type') return TypeIcon
+		if (kind === 'area') return RegionIcon
+		return StyleIcon
+	}
+
 	const customAttrs: CustomAttrs = {
 		img: {
 			style: 'max-width: 100%;'
@@ -348,6 +388,39 @@
 				width: fit-content;
 				max-width: 82%;
 			}
+			.message-parameter-tags {
+				display: inline;
+			}
+			.message-parameter-tag {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+				height: 3rem;
+				max-width: 24rem;
+				padding: 0 1rem;
+				margin: 0 0.8rem 0.4rem 0;
+				border: 0.1rem solid #0000001a;
+				border-radius: 2.2rem;
+				column-gap: 0.8rem;
+				font-family: 'Medium';
+				font-weight: 500;
+				font-size: 1.2rem;
+				color: #0d0d0d;
+				background-color: #fff;
+				box-sizing: border-box;
+				.parameter-tag-icon {
+					width: 1.2rem;
+					height: 1.2rem;
+					flex-shrink: 0;
+					object-fit: contain;
+				}
+				span {
+					min-width: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
 			.web-address {
 				width: fit-content;
 				min-width: 22.5rem;
@@ -443,6 +516,21 @@
 <style lang="less">
 	.message-txt {
 		user-select: text;
+
+		.message-markdown,
+		> div:not(.web-address):not(.url-card-container) {
+			display: inline;
+		}
+
+		.message-markdown > p:first-child,
+		> div:not(.web-address):not(.url-card-container) > p:first-child {
+			display: inline;
+			margin-top: 0;
+		}
+		.url-card-container {
+			display: block;
+		}
+
 		ul {
 			list-style-position: inside;
 		}

src/views/home/agent/components/Preview.vue

@@ -2,6 +2,7 @@
 	<div
 		ref="containerRef"
 		class="preview-container flex"
+		v-loading="urlLoading"
 		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
 	>
 		<template v-if="type === 'sketch'">
@@ -53,15 +54,15 @@
 			</div>
 		</template>
 		<template v-else-if="type === 'url'">
-			<div class="url-list flex">
+			<TransitionGroup name="url-card" class="url-list flex" tag="div">
-				<div class="url-item flex flex-col" v-for="item in urlList" :key="item">
+				<div class="url-item flex flex-col" v-for="item in urlList" :key="item.url">
 					<div class="url-title" v-ellipsis="3" @click="handleClickUrl(item)">
 						{{ item.title }}
 						<img src="@/assets/images/link-outer.png" class="link-outer" />
 					</div>
 					<div class="url-link" v-ellipsis="3">{{ item.url }}</div>
 				</div>
-			</div>
+			</TransitionGroup>
 		</template>
 		<div v-else class="reportBorder">
 			<div class="report">
@@ -128,6 +129,16 @@
 		}
 	)
 
+	watch(
+		() => props.type,
+		(val) => {
+			if (val === 'sketch') {
+				fetchedUrlSet.value = new Set()
+				urlList.value = []
+			}
+		}
+	)
+
 	watch(
 		() => props.sketchList,
 		() => {
@@ -136,7 +147,10 @@
 			// 当 type 为 sketch 时，自动滚动到最底部
 			if (props.type === 'sketch') {
 				nextTick(() => {
-					containerRef.value?.scrollTo({ top: containerRef.value.scrollHeight, behavior: 'smooth' })
+					containerRef.value?.scrollTo({
+						top: containerRef.value.scrollHeight,
+						behavior: 'smooth'
+					})
 				})
 			}
 		}
@@ -194,10 +208,45 @@
 		markdownContent.value = content
 	}
 
+	const urlLoading = ref(false)
+	const fetchedUrlSet = ref<Set<string>>(new Set())
+
+	const BATCH_SIZE = 4
+	let isFetchingUrls = false
+	let pendingUrlList: string[] | null = null
+
+	const fetchBatch = async (batch: string[]) => {
+		const res = await fetchUrlTitle(batch)
+		batch.forEach((url) => fetchedUrlSet.value.add(url))
+		urlList.value = [...urlList.value, ...res]
+	}
+
 	const setUrls = async (list: string[]) => {
 		reportType.value = 'urls'
-		const res = await fetchUrlTitle(list)
+		const newUrls = [...new Set(list.filter((url) => !fetchedUrlSet.value.has(url)))]
-		urlList.value = res
+		if (newUrls.length === 0) return
+
+		if (isFetchingUrls) {
+			pendingUrlList = list
+			return
+		}
+
+		isFetchingUrls = true
+		if (urlList.value.length < 1) {
+			urlLoading.value = true
+		}
+		for (let i = 0; i < newUrls.length; i += BATCH_SIZE) {
+			const batch = newUrls.slice(i, i + BATCH_SIZE)
+			await fetchBatch(batch)
+			urlLoading.value = false
+		}
+		isFetchingUrls = false
+
+		if (pendingUrlList) {
+			const next = pendingUrlList
+			pendingUrlList = null
+			setUrls(next)
+		}
 	}
 	// watch(
 	// 	() => sessionId.value,
@@ -384,6 +433,19 @@
 				}
 			}
 		}
+		.url-card-enter-active {
+				animation: urlCardIn 0.4s ease-out;
+			}
+			@keyframes urlCardIn {
+				from {
+					opacity: 0;
+					transform: translateY(2rem) scale(0.95);
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0) scale(1);
+				}
+			}
 		.url-list {
 			flex: 1;
 			flex-wrap: wrap;

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

src/views/home/components/input/AgentOperatePopover.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="agent-operate flex flex-center">
+		<el-popover placement="top" trigger="click" popper-class="agent-plus-popover">
+			<template #reference>
+				<SvgIcon name="plus" color="#0D0D0D" size="16" />
+			</template>
+			<template #default>
+				<div class="agent-modal flex flex-col">
+					<div class="file flex align-center" @click="emit('upload')">
+						<img src="@/assets/icons/attach.svg" class="file-icon" />
+						<span>Upload files</span>
+					</div>
+					<div class="gap"></div>
+					<div class="report flex align-center" @click="emit('toggle-report')">
+						<SvgIcon color="#5A5A5A" name="light" size="11" />
+						<span>Trending report</span>
+					</div>
+				</div>
+			</template>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+	const emit = defineEmits<{
+		(e: 'upload'): void
+		(e: 'toggle-report'): void
+	}>()
+</script>
+
+<style lang="less" scoped>
+	.agent-operate {
+		width: 3.2rem;
+		height: 3.2rem;
+		cursor: pointer;
+		border-radius: 50%;
+
+		&:hover {
+			background-color: #f0f0f0;
+		}
+	}
+</style>
+
+<style lang="less">
+	.agent-plus-popover {
+		display: flex;
+		justify-content: flex-start;
+		background: transparent !important;
+		box-shadow: none !important;
+		border: none !important;
+		padding: 0 !important;
+		margin-bottom: -1rem;
+		width: fit-content !important;
+		min-width: initial !important;
+
+		.el-popper__arrow:before {
+			display: none;
+		}
+
+		.agent-modal {
+			row-gap: 1.2rem;
+			font-family: 'Medium';
+			font-weight: 500;
+			font-size: 1.3rem;
+			color: #222;
+			background-color: #fff;
+			border: 1px solid #d9d9d9;
+			box-shadow: 0px 6.53px 32.63px 0px #0000000d;
+			border-radius: 1rem;
+			padding: 1.2rem 1.4rem;
+			transform: translateX(calc(50% - 1.6rem));
+
+			.c-svg {
+				width: initial;
+				width: 1rem;
+				height: 1.3rem;
+			}
+
+			.file,
+			.report {
+				line-height: 1.8rem;
+				column-gap: 1rem;
+				cursor: pointer;
+			}
+
+			.file {
+				.file-icon {
+					width: 1.1rem;
+					height: 1.3rem;
+				}
+			}
+
+			.gap {
+				height: 0.05rem;
+				background-color: #d4d4d4;
+			}
+		}
+	}
+</style>

src/views/home/components/input/InputEditor.vue

@@ -0,0 +1,234 @@
+<template>
+	<div class="editor-wrapper" :class="{ agent: isAgentMode }">
+		<div v-if="showPlaceholder" class="editor-placeholder">
+			{{ placeholder }}
+		</div>
+		<div
+			ref="editorRef"
+			class="editor"
+			contenteditable="true"
+			@input="emit('input')"
+			@paste="emit('paste', $event)"
+			@keydown="emit('keydown', $event)"
+		></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { onMounted, ref } from 'vue'
+
+	withDefaults(
+		defineProps<{
+			showPlaceholder?: boolean
+			placeholder: string
+			isAgentMode?: boolean
+		}>(),
+		{
+			showPlaceholder: false,
+			isAgentMode: false
+		}
+	)
+
+	const emit = defineEmits<{
+		(e: 'ready', element: HTMLDivElement | null): void
+		(e: 'input'): void
+		(e: 'paste', event: ClipboardEvent): void
+		(e: 'keydown', event: KeyboardEvent): void
+	}>()
+
+	const editorRef = ref<HTMLDivElement | null>(null)
+
+	const focus = () => {
+		editorRef.value?.focus()
+	}
+
+	onMounted(() => {
+		emit('ready', editorRef.value)
+	})
+
+	defineExpose({
+		editorRef,
+		focus
+	})
+</script>
+
+<style lang="less" scoped>
+	.editor-wrapper {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		min-height: 0;
+
+		.editor-placeholder {
+			position: absolute;
+			z-index: 0;
+			pointer-events: none;
+			top: 0;
+			left: 0;
+			padding: 0 1.4rem 1.4rem;
+			font-size: 2rem;
+			font-family: 'InterRegular';
+			font-weight: 400;
+			color: #999;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+			width: calc(100% - 2.8rem);
+			box-sizing: border-box;
+		}
+
+		.editor {
+			width: 100%;
+			flex: 1;
+			border: none;
+			outline: none;
+			padding: 0 1.4rem 1.4rem;
+			font-size: 1.8rem;
+			font-family: 'InterRegular';
+			font-weight: 400;
+			color: #000000;
+			overflow-y: auto;
+			overflow-x: hidden;
+			line-height: 2.8rem;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+
+			&::-webkit-scrollbar {
+				width: 0;
+				display: none;
+			}
+
+			&::-webkit-scrollbar-thumb,
+			&::-webkit-scrollbar-track {
+				display: none;
+			}
+
+			&:empty::before {
+				content: attr(placeholder);
+				color: #999;
+				pointer-events: none;
+			}
+		}
+
+		&.agent {
+			.editor {
+				font-family: 'Regular';
+				font-weight: 400;
+				font-size: 1.4rem;
+				min-height: 5rem;
+				max-height: initial;
+				padding: 0;
+				height: 100%;
+				line-height: 1.4rem;
+			}
+
+			.editor-placeholder {
+				font-family: 'Regular';
+				font-size: 1.4rem;
+				padding: 0;
+				line-height: 1.4rem;
+			}
+		}
+	}
+</style>
+
+<style lang="less">
+	.assist-input-wrapper .editor .editor-tag {
+		width: 15.6rem;
+		height: 3.1rem;
+		display: inline-flex;
+		border: 1px solid #0000001a;
+		font-weight: 500;
+		font-size: 1.3rem;
+		column-gap: 0;
+		margin: 0 0.5rem;
+		vertical-align: middle;
+		border-radius: 2.2rem;
+
+		&.restore {
+			width: auto;
+			max-width: 100%;
+			display: inline-flex;
+			border: none;
+			border-radius: 0.4rem;
+			background-color: rgba(0, 0, 0, 0.05);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 0.9rem 0 0.7rem;
+			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;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			.option-tag-icon {
+				width: 1.2rem;
+				height: 1.2rem;
+				flex-shrink: 0;
+				object-fit: contain;
+			}
+
+			.option-tag-text {
+				margin: 0;
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.option-tag-close {
+				cursor: pointer;
+			}
+		}
+
+		span {
+			margin: 0 0.7rem 0 1.2rem;
+
+			&.restore-text {
+				flex: 1;
+				min-width: 0;
+				max-width: 52rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		.light-icon {
+			width: 0.9rem;
+			height: 1.2rem;
+			flex-shrink: 0;
+		}
+
+		.close-icon {
+			width: 0.9rem;
+			height: 0.9rem;
+			cursor: pointer;
+			flex-shrink: 0;
+
+			&.restore {
+				width: 0.5rem;
+				height: 0.5rem;
+			}
+		}
+
+		.restore-icon {
+			width: 1.2rem;
+			height: 1.2rem;
+		}
+	}
+</style>

src/views/home/components/input/InputImagePreviewList.vue

@@ -0,0 +1,89 @@
+<template>
+	<div v-if="previewItems.length > 0" class="image-preview-list flex wrap">
+		<div
+			v-for="(image, index) in previewItems"
+			:key="`${index}-${getPreviewUrl(image)}`"
+			class="image-preview-item"
+		>
+			<img
+				:src="getPreviewUrl(image)"
+				class="preview-image"
+				@click="emit('preview', getPreviewUrl(image))"
+			/>
+			<div class="image-remove-btn" @click="emit('remove', index, image)">
+				<SvgIcon name="delete" size="16" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import type { PreviewImage, UploadedImage } from './types'
+
+	const props = defineProps<{
+		uploadedImages: UploadedImage[]
+		quoteList: string[]
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'preview', url: string): void
+		(e: 'remove', index: number, image: PreviewImage): void
+	}>()
+
+	const previewItems = computed<PreviewImage[]>(() => [
+		...props.uploadedImages,
+		...props.quoteList
+	])
+
+	const getPreviewUrl = (image: PreviewImage) => {
+		return typeof image === 'string' ? image : image.url
+	}
+</script>
+
+<style lang="less" scoped>
+	.image-preview-list {
+		padding: 0 1.4rem 1rem;
+		column-gap: 1rem;
+		max-height: 15rem;
+		overflow-y: auto;
+		flex-shrink: 0;
+
+		.image-preview-item {
+			position: relative;
+			width: 8.6rem;
+			height: 8.6rem;
+			border-radius: 1.5rem;
+			overflow: hidden;
+			flex-shrink: 0;
+			border: 0.1rem solid #cdcdcd;
+
+			.preview-image {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				border-radius: 0.8rem;
+				cursor: pointer;
+			}
+
+			.image-remove-btn {
+				position: absolute;
+				top: 0.6rem;
+				right: 0.6rem;
+				width: 1.6rem;
+				height: 1.6rem;
+				color: #fff;
+				border-radius: 50%;
+				align-items: center;
+				justify-content: center;
+				font-size: 1.2rem;
+				cursor: pointer;
+				display: none;
+			}
+
+			&:hover .image-remove-btn {
+				display: flex;
+			}
+		}
+	}
+</style>

src/views/home/components/input/InputToolbar.vue

@@ -0,0 +1,282 @@
+<template>
+	<div class="operate input-toolbar flex align-center space-between" :class="{ agent: isAgentMode }">
+		<div class="left flex align-center">
+			<AgentOperatePopover
+				v-if="isAgentMode"
+				@upload="triggerFileUpload"
+				@toggle-report="emit('toggle-report')"
+			/>
+			<div
+				v-if="!isAgentMode"
+				class="attach flex flex-center"
+				@click="triggerFileUpload"
+			>
+				<img src="@/assets/icons/attach.svg" />
+			</div>
+			<input
+				ref="fileInputRef"
+				type="file"
+				accept="image/*"
+				style="display: none"
+				@change="emit('file-change', $event)"
+			/>
+			<el-select
+				v-if="!isAgentMode"
+				v-model="typeModel"
+				:placeholder="typePlaceholder"
+				:disabled="parametersDisabled"
+			>
+				<el-option
+					v-for="item in typeOptions"
+					class="input-option"
+					:key="item.value"
+					:label="translate(item.label)"
+					:value="item.value"
+				/>
+			</el-select>
+			<el-select
+				v-if="!isAgentMode"
+				v-model="areaModel"
+				:placeholder="areaPlaceholder"
+				:disabled="parametersDisabled"
+			>
+				<el-option
+					v-for="item in areaOptions"
+					class="input-option"
+					:key="item.value"
+					:label="translate(item.label)"
+					:value="item.value"
+				/>
+			</el-select>
+			<StyleSelect
+				v-if="!isAgentMode"
+				v-model="styleModel"
+				:type-value="typeValue"
+				:options="styleOptions"
+				:placeholder="stylePlaceholder"
+				:title="styleTitle"
+				:confirm-text="confirmText"
+				:disabled="parametersDisabled"
+			/>
+			<!-- <SettingPopover
+				v-model:options="settingOptionsModel"
+				:title="settingTitle"
+				:translate="translate"
+			/> -->
+		</div>
+		<div class="right">
+			<div
+				v-if="!isAgentMode"
+				class="create-btn flex flex-center"
+				@click="emit('create')"
+			>
+				<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
+				<span class="create-btn-text">{{ createText }}</span>
+			</div>
+
+			<div v-else class="sender-btn flex flex-center" @click="emit('send')">
+				<img
+					v-show="!generating"
+					src="@/assets/images/sender.png"
+					alt=""
+					class="sender-icon"
+				/>
+				<div v-show="generating" class="sender-pause" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import AgentOperatePopover from './AgentOperatePopover.vue'
+	import SettingPopover from './SettingPopover.vue'
+	import StyleSelect from './StyleSelect.vue'
+	import type { OptionItem, SettingOption } from './types'
+
+	const props = withDefaults(
+		defineProps<{
+			isAgentMode?: boolean
+			generating?: boolean
+			typeValue: string
+			areaValue: string
+			styleValue: string
+			typeOptions: OptionItem[]
+			areaOptions: OptionItem[]
+			styleOptions: OptionItem[]
+			settingOptions: SettingOption[]
+			typePlaceholder: string
+			areaPlaceholder: string
+			stylePlaceholder: string
+			styleTitle: string
+			settingTitle: string
+			confirmText: string
+			createText: string
+			parametersDisabled?: boolean
+			translate: (key: string) => string
+		}>(),
+		{
+			isAgentMode: false,
+			generating: false,
+			parametersDisabled: false
+		}
+	)
+
+	const emit = defineEmits<{
+		(e: 'update:typeValue', value: string): void
+		(e: 'update:areaValue', value: string): void
+		(e: 'update:styleValue', value: string): void
+		(e: 'update:settingOptions', value: SettingOption[]): void
+		(e: 'file-change', event: Event): void
+		(e: 'toggle-report'): void
+		(e: 'create'): void
+		(e: 'send'): void
+	}>()
+
+	const fileInputRef = ref<HTMLInputElement | null>(null)
+
+	const typeModel = computed({
+		get: () => props.typeValue,
+		set: (value: string) => emit('update:typeValue', value)
+	})
+
+	const areaModel = computed({
+		get: () => props.areaValue,
+		set: (value: string) => emit('update:areaValue', value)
+	})
+
+	const styleModel = computed({
+		get: () => props.styleValue,
+		set: (value: string) => emit('update:styleValue', value)
+	})
+
+	const settingOptionsModel = computed({
+		get: () => props.settingOptions,
+		set: (value: SettingOption[]) => emit('update:settingOptions', value)
+	})
+
+	const triggerFileUpload = () => {
+		fileInputRef.value?.click()
+	}
+</script>
+
+<style lang="less" scoped>
+	.input-toolbar {
+		flex-shrink: 0;
+		margin-top: auto;
+		padding: 0 1.7rem 1.7rem;
+
+		.left {
+			column-gap: 2rem;
+		}
+
+		.attach {
+			width: 4rem;
+			height: 4rem;
+			border: 1px solid rgba(0, 0, 0, 0.1);
+			border-radius: 50%;
+			cursor: pointer;
+
+			img {
+				width: 1.65rem;
+				height: 1.86rem;
+			}
+		}
+
+		.el-select {
+			width: 13.9rem;
+			height: 4rem;
+
+			:deep(.el-select__wrapper) {
+				border-radius: 0.8rem;
+				height: 100%;
+				box-shadow: none;
+				border: 0.1rem solid rgba(0, 0, 0, 0.1);
+				font-weight: 500;
+				font-size: 1.4rem;
+				min-height: initial;
+
+				.el-select__placeholder {
+					color: #000;
+				}
+
+				.el-select__icon {
+					color: #000;
+				}
+
+				&.is-disabled {
+					.el-select__placeholder,
+					.el-select__selected-item {
+						color: #c9c9c9;
+					}
+				}
+			}
+		}
+
+		.create-btn {
+			background-color: #ff7a51;
+			height: 4rem;
+			width: 13rem;
+			color: #fff;
+			border-radius: 4.2rem;
+			font-family: 'SemiBold';
+			font-weight: 600;
+			font-size: 1.3rem;
+			cursor: pointer;
+			column-gap: 0.3rem;
+
+			.shining-icon {
+				width: 1.4rem;
+				height: 1.4rem;
+			}
+		}
+
+		&.agent {
+			padding: 1.2rem 0 0;
+			margin: 0;
+
+			.right {
+				display: flex;
+				align-items: center;
+
+				.sender-btn {
+					width: 3.2rem;
+					height: 3.2rem;
+					cursor: pointer;
+					background-color: #ff7a51;
+					border-radius: 50%;
+
+					&:hover {
+						background-color: #f8693d;
+					}
+
+					.sender-icon {
+						width: 1.3rem;
+						height: 1.3rem;
+					}
+
+					.sender-pause {
+						width: 1rem;
+						height: 1rem;
+						background-color: #fff;
+					}
+				}
+			}
+		}
+	}
+</style>
+
+<style lang="less">
+	.input-option {
+		padding-left: 2rem !important;
+		color: #0d0d0d;
+		font-weight: 510;
+		font-size: 1.3rem;
+		height: 3rem;
+		line-height: 3rem;
+
+		&.el-select-dropdown__item.is-hovering {
+			background-color: rgba(13, 13, 13, 0.05);
+		}
+	}
+</style>

src/views/home/components/input/ReportShortcutButton.vue

@@ -0,0 +1,46 @@
+<template>
+	<div
+		class="report-btn flex space-between align-center outer"
+		:class="{ 'is-cn': isCn }"
+		@click="emit('click')"
+	>
+		<SvgIcon class="light-icon" color="#FFDB56" name="light" size="16" />
+		<span>{{ label }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	defineProps<{
+		isCn: boolean
+		label: string
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'click'): void
+	}>()
+</script>
+
+<style lang="less" scoped>
+	.report-btn {
+		position: absolute;
+		bottom: -7.4rem;
+		height: 4.4rem;
+		border-radius: 2.2rem;
+		width: 19.7rem;
+		padding: 0 2rem;
+		font-size: 1.8rem;
+		background-color: #fff;
+		border: 1.1px solid #f6f4ef1a;
+		cursor: pointer;
+
+		&.outer.is-cn {
+			justify-content: center;
+			column-gap: 3rem;
+		}
+
+		.c-svg {
+			width: 1.5rem;
+			height: 2rem;
+		}
+	}
+</style>

src/views/home/components/input/SettingPopover.vue

@@ -0,0 +1,160 @@
+<template>
+	<el-popover
+		v-model:visible="settingPopupVisible"
+		placement="top"
+		:width="342"
+		:show-arrow="false"
+		trigger="click"
+		popper-class="fida-setting-popover"
+	>
+		<template #reference>
+			<img src="@/assets/images/setting.png" class="setting-icon" />
+		</template>
+		<div class="fida-setting-popover-content flex flex-col">
+			<div class="fida-setting-popover-header">
+				{{ title }}
+			</div>
+			<div class="fida-setting-slider-list">
+				<div
+					v-for="(item, index) in options"
+					:key="item.label"
+					class="fida-setting-slider-item"
+				>
+					<div class="fida-slider-label">{{ translate(item.label) }}</div>
+					<div class="fida-slider-row flex align-center">
+						<el-slider
+							class="setting-popover-slider"
+							:model-value="item.value"
+							:show-tooltip="false"
+							@update:model-value="updateOptionValue(index, $event)"
+						/>
+						<span class="fida-slider-value">{{ item.value }}%</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</el-popover>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import type { SettingOption } from './types'
+
+	const props = defineProps<{
+		options: SettingOption[]
+		title: string
+		translate: (key: string) => string
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'update:options', value: SettingOption[]): void
+	}>()
+
+	const settingPopupVisible = ref(false)
+
+	const updateOptionValue = (index: number, value: number | number[]) => {
+		const nextValue = Array.isArray(value) ? value[0] : value
+		const nextOptions = props.options.map((item, itemIndex) =>
+			itemIndex === index ? { ...item, value: nextValue } : item
+		)
+		emit('update:options', nextOptions)
+	}
+</script>
+
+<style lang="less" scoped>
+	.setting-icon {
+		width: 2.4rem;
+		height: 2.4rem;
+		cursor: pointer;
+	}
+</style>
+
+<style lang="less">
+	.fida-setting-popover {
+		padding: 0 !important;
+		border-radius: 0.6rem !important;
+		background-color: #fff !important;
+		border: none !important;
+		width: 25.6rem;
+		height: 23.9rem;
+		box-shadow: 0px 11px 20px 0px #0000001a;
+	}
+
+	.fida-setting-popover-header {
+		font-weight: 400;
+		font-size: 1.4rem;
+		color: #000;
+		margin-bottom: 2rem !important;
+	}
+
+	.fida-setting-popover-content {
+		padding: 1.6rem 1.4rem 2.2rem !important;
+	}
+
+	.fida-setting-slider-list {
+		display: flex;
+		flex-direction: column;
+		row-gap: 1rem;
+	}
+
+	.fida-setting-slider-item {
+		.fida-slider-label {
+			font-weight: 400;
+			font-size: 1.2rem;
+			color: #000;
+			margin-bottom: 1rem;
+		}
+
+		.fida-slider-row {
+			column-gap: 2.6rem;
+
+			.el-slider {
+				flex: 1;
+			}
+
+			.fida-slider-value {
+				font-weight: 400;
+				font-size: 1.4rem;
+				color: #000;
+			}
+		}
+	}
+
+	.setting-popover-slider {
+		--el-slider-height: 0.4rem;
+		height: fit-content;
+
+		.el-slider__runway {
+			height: var(--el-slider-height);
+			background-color: #e8e8e8;
+			border-radius: 0.2rem;
+		}
+
+		.el-slider__bar {
+			height: var(--el-slider-height);
+			background-color: #000;
+			border-radius: 0.2rem;
+		}
+
+		.el-slider__button-wrapper {
+			width: fit-content;
+			height: fit-content;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			display: flex;
+			align-items: center;
+		}
+
+		.el-slider__button {
+			width: 1rem;
+			height: 1rem;
+			background-color: #000;
+			border-radius: 50%;
+			border: none;
+		}
+
+		.el-slider__stop {
+			display: none;
+		}
+	}
+</style>

src/views/home/components/input/StyleSelect.vue

@@ -0,0 +1,259 @@
+<template>
+	<div class="fida-style-select-wrapper" :class="{ 'is-disabled': disabled }">
+		<el-select
+			:model-value="modelValue"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			@focus="openStylePopup"
+		/>
+
+		<el-popover
+			v-model:visible="stylePopupVisible"
+			:disabled="disabled"
+			placement="top"
+			:width="342"
+			:show-arrow="false"
+			trigger="click"
+			popper-class="fida-style-select-popover"
+		>
+			<template #reference>
+				<div class="fida-style-select-trigger"></div>
+			</template>
+			<div class="fida-style-popover-content flex flex-col">
+				<div class="fida-style-popover-header">
+					{{ title }}
+				</div>
+				<div class="fida-style-popover-grid">
+					<div
+						v-for="item in options"
+						:key="item.value"
+						class="fida-style-popover-item flex flex-center"
+						:class="{ 'is-selected': tempSelectedValue === item.value }"
+						@click="selectStyle(item.value)"
+					>
+						<img :src="getStyleImage(typeValue, item.value)" class="style-bg" />
+						<span class="fida-option-label flex flex-center">{{ item.label }}</span>
+						<img
+							v-show="tempSelectedValue === item.value"
+							src="@/assets/images/checked.png"
+							class="checked-item-icon"
+						/>
+					</div>
+				</div>
+				<!-- <div class="fida-style-popover-footer flex flex-center">
+					<button class="fida-confirm-btn" @click="confirmStyle">
+						{{ confirmText }}
+					</button>
+				</div> -->
+			</div>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, watch } from 'vue'
+	import { getStyleImage } from '../style'
+	import type { OptionItem } from './types'
+
+	const props = defineProps<{
+		modelValue: string
+		typeValue: string
+		options: OptionItem[]
+		placeholder: string
+		title: string
+		confirmText: string
+		disabled?: boolean
+	}>()
+
+	const emit = defineEmits<{
+		(e: 'update:modelValue', value: string): void
+	}>()
+
+	const tempSelectedValue = ref('')
+	const stylePopupVisible = ref(false)
+
+	watch(
+		() => props.modelValue,
+		(value) => {
+			tempSelectedValue.value = value
+		},
+		{ immediate: true }
+	)
+
+	watch(
+		() => props.disabled,
+		(disabled) => {
+			if (disabled) {
+				stylePopupVisible.value = false
+			}
+		}
+	)
+
+	const openStylePopup = () => {
+		if (props.disabled) return
+		tempSelectedValue.value = props.modelValue
+		stylePopupVisible.value = true
+	}
+
+	const selectStyle = (value: string) => {
+		if (props.disabled) return
+		tempSelectedValue.value = value
+		confirmStyle()
+	}
+
+	const confirmStyle = () => {
+		emit('update:modelValue', tempSelectedValue.value)
+		stylePopupVisible.value = false
+	}
+</script>
+
+<style lang="less" scoped>
+	.fida-style-select-wrapper {
+		position: relative;
+		width: 13.9rem;
+		height: 4rem;
+
+		.el-select {
+			width: 13.9rem;
+			height: 4rem;
+
+			:deep(.el-select__wrapper) {
+				border-radius: 0.8rem;
+				height: 100%;
+				box-shadow: none;
+				border: 0.1rem solid rgba(0, 0, 0, 0.1);
+				font-weight: 500;
+				font-size: 1.4rem;
+				min-height: initial;
+
+				.el-select__placeholder {
+					color: #000;
+				}
+
+				.el-select__icon {
+					color: #000;
+				}
+
+				&.is-disabled {
+					.el-select__placeholder,
+					.el-select__selected-item {
+						color: #c9c9c9;
+					}
+				}
+			}
+		}
+	}
+
+	.fida-style-select-trigger {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		cursor: pointer;
+	}
+
+	.is-disabled {
+		.fida-style-select-trigger {
+			cursor: not-allowed;
+		}
+	}
+</style>
+
+<style lang="less">
+	.fida-style-select-popover {
+		width: 34.2rem !important;
+		padding: 0 !important;
+		border-radius: 0.6rem !important;
+		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
+		background-color: #fff !important;
+		border: none !important;
+	}
+
+	.fida-style-popover-content {
+		padding: 2rem 2.4rem 2.4rem;
+	}
+
+	.fida-style-popover-header {
+		font-weight: 500;
+		font-size: 1.6rem;
+		color: #000;
+		margin-bottom: 2rem;
+		padding: 2rem 2.4rem !important;
+	}
+
+	.fida-style-popover-grid {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		justify-content: center;
+		height: 28.5rem;
+		overflow-y: auto;
+		padding-bottom: 2rem !important;
+	}
+
+	.fida-style-popover-item {
+		height: 9.1rem;
+		width: 9.1rem;
+		border-radius: 1.4rem;
+		cursor: pointer;
+		position: relative;
+		border: none;
+
+		.checked-item-icon {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			transform: translate(50%, 50%);
+			width: 2.4rem;
+			height: 2.4rem;
+		}
+
+		.style-bg {
+			width: 100%;
+			height: 100%;
+			border-radius: 1.4rem;
+		}
+
+		.fida-option-label {
+			font-weight: 500;
+			font-size: 1.2rem;
+			color: #fff;
+			text-align: center;
+			padding: 0.5rem;
+			position: absolute;
+			height: 100%;
+			width: 100%;
+			background-color: rgba(0, 0, 0, 0.3);
+			border-radius: 1.4rem;
+		}
+
+		&.is-selected {
+			border: 0.3rem solid #000;
+
+			.fida-option-label {
+				display: none;
+			}
+		}
+	}
+
+	.fida-style-popover-footer {
+		padding: 2.4rem 0 !important;
+		margin-top: 2.4rem;
+
+		.fida-confirm-btn {
+			margin: 0 auto;
+			width: 15.7rem;
+			height: 3.4rem;
+			line-height: 3.4rem;
+			background-color: #ff7a51;
+			color: #fff;
+			border: none;
+			border-radius: 3.8rem;
+			font-weight: 500;
+			font-size: 1.4rem;
+			cursor: pointer;
+		}
+	}
+</style>

src/views/home/components/input/options.ts

@@ -0,0 +1,48 @@
+import type { OptionItem, SettingOption } from './types'
+
+export const styleKeys: string[] = [
+	'Venetian Modern',
+	'Coastal',
+	'Maximalism',
+	'Memphis',
+	'Verdant',
+	'Century Chrome',
+	'Modern Revival',
+	'Transitional',
+	"Tuscan 2000's",
+	'Kitsch-core',
+	'Bauhaus',
+	'Constructivism',
+	'Nordic Noir',
+	'Dopamine',
+	'Squiggle'
+]
+
+export const optionTagOrder = ['type', 'area', 'style'] as const
+
+export const createTypeOptions = (): OptionItem[] => [
+	{
+		label: 'Input.types.sofa',
+		value: 'Sofa'
+	},
+	{
+		label: 'Input.types.desk',
+		value: 'Desk'
+	},
+	{
+		label: 'Input.types.chair',
+		value: 'Chair'
+	}
+]
+
+export const createStyleOptions = (): OptionItem[] =>
+	styleKeys.map((key) => ({
+		label: key,
+		value: key
+	}))
+
+export const createSettingOptions = (): SettingOption[] => [
+	{ label: 'Input.settingOptions.first', value: 50 },
+	{ label: 'Input.settingOptions.second', value: 50 },
+	{ label: 'Input.settingOptions.third', value: 50 }
+]

src/views/home/components/input/types.ts

@@ -0,0 +1,24 @@
+export interface OptionItem {
+	label: string
+	value: string
+}
+
+export interface SettingOption {
+	label: string
+	value: number
+}
+
+export interface UploadedImage {
+	url: string
+	name: string
+	path?: any
+}
+
+export type PreviewImage = UploadedImage | string
+
+export type OptionTagKind = 'type' | 'area' | 'style'
+
+export interface ParameterTag {
+	kind: OptionTagKind
+	label: string
+}

src/views/home/components/input/useInputEditor.ts

@@ -0,0 +1,552 @@
+import { computed, nextTick, ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+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 { optionTagOrder } from './options'
+import type { OptionItem, OptionTagKind } from './types'
+
+interface UseInputEditorOptions {
+	isAgentMode: Ref<boolean> | ComputedRef<boolean>
+	t: (key: string) => string
+	typeValue: Ref<string>
+	areaValue: Ref<string>
+	styleValue: Ref<string>
+	typeOptions: Ref<OptionItem[]>
+	areaOptions: Ref<OptionItem[]>
+	styleOptions: Ref<OptionItem[]>
+	onSubmit: () => void | Promise<void>
+}
+
+export function useInputEditor(options: UseInputEditorOptions) {
+	const editorRef = ref<HTMLDivElement | null>(null)
+	const inputValue = ref<string>('')
+	const reportTags = ref<HTMLElement[]>([])
+	const optionTags = ref<Partial<Record<OptionTagKind, HTMLElement>>>({})
+	const optionTagKinds = ref<OptionTagKind[]>([])
+	const reportPromptText = ref<Text | null>(null)
+	let reportTypewriterTimeout: ReturnType<typeof setTimeout> | null = null
+
+	const setEditorElement = (element: HTMLDivElement | null) => {
+		editorRef.value = element
+	}
+
+	const focusEditor = () => {
+		editorRef.value?.focus()
+	}
+
+	const stopReportTypewriter = () => {
+		if (reportTypewriterTimeout) {
+			clearTimeout(reportTypewriterTimeout)
+			reportTypewriterTimeout = null
+		}
+	}
+
+	const moveCaretToTextEnd = (textNode: Text) => {
+		const selection = window.getSelection()
+		if (!selection || selection.anchorNode !== textNode) return
+
+		const range = document.createRange()
+		range.setStart(textNode, textNode.data.length)
+		range.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+
+	const typeReportPromptText = (textNode: Text, text: string, index = 0) => {
+		if (reportPromptText.value !== textNode) return
+
+		if (index >= text.length) {
+			reportTypewriterTimeout = null
+			return
+		}
+
+		textNode.textContent = `${textNode.textContent || ''}${text.charAt(index)}`
+		handleEditorInput()
+		moveCaretToTextEnd(textNode)
+
+		reportTypewriterTimeout = setTimeout(() => {
+			typeReportPromptText(textNode, text, index + 1)
+		}, 30)
+	}
+
+	const removeReportPromptText = () => {
+		stopReportTypewriter()
+		const promptText = reportPromptText.value
+		if (promptText?.parentNode) {
+			const nextNode = promptText.nextSibling
+			if (
+				nextNode &&
+				nextNode.nodeType === Node.TEXT_NODE &&
+				nextNode.textContent === '\u200B'
+			) {
+				nextNode.remove()
+			}
+			promptText.parentNode.removeChild(promptText)
+		}
+		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 options.typeValue.value
+		if (kind === 'area') return options.areaValue.value
+		return options.styleValue.value
+	}
+
+	const getOptionTagIcon = (kind: OptionTagKind) => {
+		if (kind === 'type') return TypeIcon
+		if (kind === 'area') return RegionIcon
+		return StyleIcon
+	}
+
+	const refreshOptionTagKinds = () => {
+		const editor = editorRef.value
+		if (!editor) {
+			optionTagKinds.value = []
+			return
+		}
+
+		optionTagKinds.value = Array.from(editor.children)
+			.map((child) => (child as HTMLElement).dataset.optionTagKind as OptionTagKind)
+			.filter(Boolean)
+	}
+
+	const getTranslatedOptionLabel = (items: OptionItem[], value: string) => {
+		const option = items.find((item) => item.value === value)
+		return option ? options.t(option.label) : value
+	}
+
+	const getOptionTagLabel = (kind: OptionTagKind) => {
+		const value = getOptionTagValue(kind)
+		if (kind === 'type') return getTranslatedOptionLabel(options.typeOptions.value, value)
+		if (kind === 'area') return getTranslatedOptionLabel(options.areaOptions.value, value)
+		return options.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]
+		refreshOptionTagKinds()
+	}
+
+	const removeAllOptionTags = () => {
+		optionTagOrder.forEach(removeOptionTag)
+		optionTags.value = {}
+		optionTagKinds.value = []
+	}
+
+	const clearOptionTagValue = (kind: OptionTagKind) => {
+		if (kind === 'type') {
+			options.typeValue.value = ''
+		} else if (kind === 'area') {
+			options.areaValue.value = ''
+		} else {
+			options.styleValue.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 optionIcon = getOptionTagIcon(kind) as unknown as string
+
+		const icon = document.createElement('img')
+		icon.className = 'option-tag-icon'
+		icon.src = optionIcon
+		icon.addEventListener('click', (ev) => {
+			ev.stopPropagation()
+			clearOptionTagValue(kind)
+		})
+
+		const textSpan = document.createElement('span')
+		textSpan.className = 'option-tag-text'
+		textSpan.innerText = label
+
+		tag.addEventListener('mouseenter', () => {
+			icon.src = closeIcon as unknown as string
+			icon.classList.add('option-tag-close')
+			tag.classList.add('is-hovered')
+		})
+		tag.addEventListener('mouseleave', () => {
+			icon.src = optionIcon
+			icon.classList.remove('option-tag-close')
+			tag.classList.remove('is-hovered')
+		})
+
+		tag.appendChild(icon)
+		tag.appendChild(textSpan)
+
+		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
+		refreshOptionTagKinds()
+		handleEditorInput()
+	}
+
+	const syncAllOptionTags = () => {
+		optionTagOrder.forEach(syncOptionTag)
+	}
+
+	const showPlaceholder = computed(() => {
+		if (!editorRef.value) return true
+		if (inputValue.value || reportTags.value.length > 0 || hasOptionTags()) return false
+
+		const editor = editorRef.value
+		const textContent = editor.textContent?.replace(/[\s\u200B\n]/g, '').trim() || ''
+		const isEmptyHTML = editor.innerHTML === '' || editor.innerHTML === '<br>'
+		const hasMeaningfulChildren = Array.from(editor.children).some(
+			(child) => child.tagName !== 'BR' && !child.classList.contains('editor-tag')
+		)
+
+		return textContent === '' && !hasMeaningfulChildren && isEmptyHTML
+	})
+
+	const addReportTag = (text?: string) => {
+		const tagText = text || options.t('Input.trendingReport')
+
+		const tag = document.createElement('div')
+		tag.contentEditable = 'false'
+		const imgLeft = document.createElement('img')
+		const imgClose = document.createElement('img')
+		const textSpan = document.createElement('span')
+		imgClose.className = 'close-icon'
+		if (text) {
+			tag.className = 'editor-tag restore flex-center'
+			imgLeft.className = 'restore-icon'
+			imgLeft.src = restoreIcon as unknown as string
+			imgClose.src = restoreCloseIcon as unknown as string
+			imgClose.className = 'close-icon restore'
+			textSpan.className = 'restore-text'
+		} else {
+			tag.className = 'editor-tag report-btn flex-center'
+			imgLeft.className = 'light-icon'
+			imgLeft.src = lightIcon as unknown as string
+			imgClose.src = closeIcon as unknown as string
+		}
+
+		textSpan.innerText = tagText
+
+		imgClose.addEventListener('click', (ev) => {
+			ev.stopPropagation()
+			removeReportPromptText()
+			tag.remove()
+			const idx = reportTags.value.indexOf(tag)
+			if (idx > -1) reportTags.value.splice(idx, 1)
+			handleEditorInput()
+		})
+
+		tag.appendChild(imgLeft)
+		tag.appendChild(textSpan)
+		tag.appendChild(imgClose)
+
+		const selection = window.getSelection()
+		const isInEditor =
+			editorRef.value && selection && editorRef.value.contains(selection.anchorNode)
+
+		if (isInEditor && selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0)
+			range.insertNode(tag)
+			focusEditor()
+		} else if (editorRef.value) {
+			editorRef.value.appendChild(tag)
+			focusEditor()
+		}
+
+		reportTags.value.push(tag)
+		const promptText = document.createTextNode('')
+		if (tag.parentNode) {
+			tag.parentNode.insertBefore(promptText, tag.nextSibling)
+			const zwsp = document.createTextNode('\u200B')
+			tag.parentNode.insertBefore(zwsp, promptText.nextSibling)
+			const newRange = document.createRange()
+			newRange.setStart(promptText, promptText.data.length)
+			newRange.collapse(true)
+			const currentSelection = window.getSelection()
+			currentSelection?.removeAllRanges()
+			currentSelection?.addRange(newRange)
+		}
+		reportPromptText.value = promptText
+		typeReportPromptText(promptText, options.t('Input.reportPlaceholder'))
+	}
+
+	const toggleReportTag = (clear = false) => {
+		const shouldClear = clear === true
+		reportTags.value = reportTags.value.filter((tag) => tag.parentNode !== null)
+
+		if (shouldClear) {
+			removeReportPromptText()
+			reportTags.value.forEach((tag) => {
+				tag.remove()
+			})
+			reportTags.value = []
+			return
+		}
+
+		if (reportTags.value.length > 0) {
+			removeReportPromptText()
+			reportTags.value.forEach((tag) => {
+				if (
+					tag.nextSibling &&
+					tag.nextSibling.nodeType === Node.TEXT_NODE &&
+					tag.nextSibling.textContent === '\u200B'
+				) {
+					tag.nextSibling.remove()
+				}
+				tag.remove()
+			})
+			reportTags.value = []
+			handleEditorInput()
+		} else {
+			addReportTag()
+		}
+	}
+
+	const cleanupEditor = () => {
+		if (!editorRef.value) return
+
+		const editor = editorRef.value
+
+		if (editor.textContent) {
+			const cleanedText = editor.textContent.replace(/[\u200B-\u200D\uFEFF]/g, '')
+
+			if (!cleanedText.trim() && editor.children.length === 0) {
+				editor.innerHTML = ''
+				editor.textContent = ''
+				reportTags.value = []
+				removeAllOptionTags()
+				stopReportTypewriter()
+				reportPromptText.value = null
+			}
+		}
+	}
+
+	const autoResizeEditor = () => {
+		if (options.isAgentMode.value) return
+	}
+
+	const handleEditorInput = () => {
+		if (!editorRef.value) return
+
+		let text = ''
+		const walker = document.createTreeWalker(editorRef.value, NodeFilter.SHOW_TEXT, null)
+
+		let node: Node | null
+		while ((node = walker.nextNode())) {
+			if (node.parentElement?.closest('.editor-tag')) continue
+			text += node.textContent
+		}
+
+		text = text.replace(/[\s\u200B]+$/, '')
+		inputValue.value = text
+
+		const editor = editorRef.value
+		const hasChildElements = editor.children.length > 0
+		const hasTextContent = editor.textContent?.replace(/[\s\u200B]/g, '').trim().length > 0
+
+		if (!hasChildElements && !hasTextContent) {
+			editor.innerHTML = ''
+			reportTags.value = []
+			removeAllOptionTags()
+			stopReportTypewriter()
+			reportPromptText.value = null
+		}
+
+		autoResizeEditor()
+	}
+
+	const handleEditorPaste = (e: ClipboardEvent) => {
+		e.preventDefault()
+		const text = e.clipboardData?.getData('text/plain') || ''
+		document.execCommand('insertText', false, text)
+	}
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			options.onSubmit()
+			return
+		}
+		if (e.key !== 'Backspace') return
+
+		const selection = window.getSelection()
+		if (!selection || selection.rangeCount <= 0) return
+
+		const range = selection.getRangeAt(0)
+		if (!range.collapsed) return
+
+		let nodeToDelete: Node | null = null
+		const startContainer = range.startContainer
+		const startOffset = range.startOffset
+
+		if (startContainer.nodeType === Node.TEXT_NODE) {
+			const textNode = startContainer as Text
+			if (startOffset === textNode.length) {
+				nodeToDelete = textNode.nextSibling
+			}
+		} else if (startContainer.nodeType === Node.ELEMENT_NODE) {
+			nodeToDelete = startContainer.childNodes[startOffset]
+		}
+
+		if (
+			nodeToDelete &&
+			nodeToDelete.nodeType === Node.ELEMENT_NODE &&
+			(nodeToDelete as Element).classList
+		) {
+			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()
+				if (reportTags.value.includes(element as HTMLElement)) {
+					removeReportPromptText()
+				}
+				element.remove()
+
+				const index = reportTags.value.indexOf(nodeToDelete as HTMLElement)
+				if (index > -1) {
+					reportTags.value.splice(index, 1)
+				}
+
+				nextTick(() => {
+					cleanupEditor()
+					handleEditorInput()
+				})
+				return
+			}
+		}
+
+		nextTick(() => {
+			if (editorRef.value) {
+				const text = editorRef.value.textContent || ''
+				const cleanedText = text.replace(/[\u200B-\u200D\uFEFF]/g, '')
+
+				if (editorRef.value.innerHTML === '<br>' || !cleanedText.trim()) {
+					editorRef.value.innerHTML = ''
+					if (editorRef.value.children.length === 0) {
+						reportTags.value = []
+						reportPromptText.value = null
+					}
+				}
+				handleEditorInput()
+			}
+		})
+	}
+
+	const clearEditorText = () => {
+		if (editorRef.value) {
+			editorRef.value.innerHTML = ''
+		}
+		inputValue.value = ''
+	}
+
+	const resetOptionTags = () => {
+		optionTags.value = {}
+		optionTagKinds.value = []
+	}
+
+	return {
+		editorRef,
+		inputValue,
+		reportTags,
+		optionTagKinds,
+		showPlaceholder,
+		setEditorElement,
+		focusEditor,
+		stopReportTypewriter,
+		addReportTag,
+		toggleReportTag,
+		handleEditorInput,
+		handleEditorPaste,
+		handleKeyDown,
+		autoResizeEditor,
+		syncOptionTag,
+		syncAllOptionTags,
+		clearEditorText,
+		resetOptionTags
+	}
+}

src/views/home/components/input/useInputImages.ts

@@ -0,0 +1,78 @@
+import { nextTick, ref } from 'vue'
+import { uploadImage } from '@/api/upload'
+import type { PreviewImage, UploadedImage } from './types'
+
+export function useInputImages(focusEditor: () => void) {
+	const uploadedImages = ref<UploadedImage[]>([])
+	const quoteList = ref<string[]>([])
+	const showPreview = ref(false)
+	const previewUrl = ref('')
+
+	const handleFileChange = (event: Event) => {
+		const input = event.target as HTMLInputElement
+
+		if (input.files) {
+			Array.from(input.files).forEach((file) => {
+				if (file.type.startsWith('image/')) {
+					const formData = new FormData()
+					formData.append('file', file)
+
+					uploadImage(formData).then((res) => {
+						const reader = new FileReader()
+						reader.onload = (e) => {
+							uploadedImages.value.push({
+								url: e.target?.result as string,
+								name: file.name,
+								path: res
+							})
+						}
+						reader.readAsDataURL(file)
+					})
+				}
+			})
+		}
+
+		nextTick(focusEditor)
+		input.value = ''
+	}
+
+	const removeImage = (index: number, item: PreviewImage) => {
+		if (typeof item === 'string') {
+			const quoteIndex = quoteList.value.indexOf(item)
+			if (quoteIndex > -1) {
+				quoteList.value.splice(quoteIndex, 1)
+			}
+			return
+		}
+
+		uploadedImages.value.splice(index, 1)
+	}
+
+	const previewImage = (url: string) => {
+		showPreview.value = true
+		previewUrl.value = url
+	}
+
+	const handleQuote = (url: string) => {
+		const hasQuoted = quoteList.value.includes(url)
+		if (hasQuoted) return
+		quoteList.value[0] = url
+	}
+
+	const clearImages = () => {
+		uploadedImages.value = []
+		quoteList.value = []
+	}
+
+	return {
+		uploadedImages,
+		quoteList,
+		showPreview,
+		previewUrl,
+		handleFileChange,
+		removeImage,
+		previewImage,
+		handleQuote,
+		clearImages
+	}
+}

src/views/home/mainInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-input-container flex-1">
     <div class="slogan">
-      <p>Creating Things with <span class="fiDA">FiDA</span> that</p>
+      <p>Creating Works with <span class="fiDA">FiDA</span> that</p>
       <p>Bloom Your Creativity</p>
     </div>
     <Input />

src/views/login/register.vue

@@ -127,6 +127,7 @@
 				if (res) {
 					userInfoStore.setToken(res)
 					userInfoStore.setUserInfo({
+						username: formData.name,
 						email: formData.email
 					})
 					router.push({ name: 'nuic' })