优化消息渲染中的上传文件。不过滤表单工具yxd_tool_name": "sendFrom"，气泡渲染表单工具。

2026-08-06 18:07:19 +08:00
parent 5c3769019e
commit 53ca1cd851
6 changed files with 596 additions and 85 deletions
--- a/pages/Chat/Chat.css
+++ b/pages/Chat/Chat.css
@@ -755,6 +755,94 @@
 	color: rgba(255, 255, 255, 0.7);
 }

+/* sendFrom 工具表单卡片 */
+.chat-content-assistant .tool-form-card {
+	margin: -8rpx -12rpx;
+}
+
+.tool-form-card {
+	background: #f8f9fc;
+	border-radius: 20rpx;
+	padding: 32rpx 24rpx;
+	border: 1rpx solid #e8ecf2;
+}
+
+.tool-form-title {
+	font-size: 34rpx;
+	font-weight: 600;
+	color: #2c3e50;
+	margin-bottom: 16rpx;
+}
+
+.tool-form-desc {
+	font-size: 28rpx;
+	color: #909399;
+	margin-bottom: 20rpx;
+}
+
+.tool-form-fields {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.tool-form-text {
+	font-size: 28rpx;
+	color: #606266;
+	padding: 8rpx 0;
+}
+
+.tool-form-field {
+	display: flex;
+	flex-direction: column;
+	gap: 10rpx;
+}
+
+.tool-form-label {
+	font-size: 28rpx;
+	color: #303133;
+	font-weight: 500;
+}
+
+.tool-form-input {
+	font-size: 28rpx;
+	color: #303133;
+	padding: 40rpx 20rpx;
+	background: #fff;
+	border-radius: 12rpx;
+	border: 1rpx solid #e4e7ed;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.tool-form-textarea {
+	font-size: 28rpx;
+	color: #303133;
+	padding: 18rpx 20rpx;
+	background: #fff;
+	border-radius: 12rpx;
+	border: 1rpx solid #e4e7ed;
+	width: 100%;
+	box-sizing: border-box;
+	min-height: 100rpx;
+}
+
+.tool-form-submit {
+	margin-top: 24rpx;
+	padding: 18rpx 0;
+	text-align: center;
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: #fff;
+	font-size: 30rpx;
+	font-weight: 500;
+	border-radius: 14rpx;
+}
+
+.tool-form-submitted {
+	background: #c0c4cc;
+	color: #fff;
+}
+

 /* ==========聊天输入容器部分========== */
 .chat-interactive-container {
--- a/pages/Chat/Chat.vue
+++ b/pages/Chat/Chat.vue
@@ -140,8 +140,8 @@
 					</view>
 					<!-- 与AI的对话内容展示 -->
 					<template v-for="(message, index) in currentMessages" :key="index">
-						<view v-if="ChatType === 0 && message.role !== 'tool'" class="chat-message" :id="'msg-' + index"
-							:class="{'message-user':message.role==='user'}">
+<view v-if="ChatType === 0 && (message.role !== 'tool' || message.yxd_tool_name === 'sendFrom')" class="chat-message" :id="'msg-' + index"
+						:class="{'message-user':message.role==='user'}">
 							<!-- <view class="chat-avatar" :class="{'chat-avatar-user':message.role==='user'}">
 						<image v-if="message.role === 'user' && UserData?.avatar" :src="UserData.avatar"
 							class="friend-avatar" mode="aspectFill"></image>
@@ -156,39 +156,82 @@
 								<!-- <view v-if="message.role ==='assistant'" class="iconfont icon-Robot"></view> -->
 								<!-- <view v-if="message.role ==='user'" class="iconfont icon-yonghuziliao"></view> -->
 							</view>
-							<view class="chat-content"
-								:class="{'chat-content-user':message.role==='user', 'chat-content-assistant':message.role==='assistant'}"
-								@click="handleChatContentClick($event, message)"
-								v-if="(message.content && String(message.content).trim() !== '') || message._streaming">
-								<!-- 流式加载中：显示跳动的点 -->
-								<view
-									v-if="message._streaming && (!message.content || String(message.content).trim() === '')"
-									class="bubble-loading-dots">
-									<view class="bubble-dot"></view>
-									<view class="bubble-dot"></view>
-									<view class="bubble-dot"></view>
-								</view>
-								<!-- 文本内容 -->
-								<view v-if="parseFileInfo(message.content).textContent"
-									v-html="pareseMarkdown(parseFileInfo(message.content).textContent)"></view>
-								<!-- 文件卡片列表 -->
-								<view v-if="parseFileInfo(message.content).files.length > 0" class="message-file-list">
-									<view v-for="(file, idx) in parseFileInfo(message.content).files" :key="idx"
-										class="file-item">
-										<!-- 图片：jpg/png/gif/webp 等 -->
-										<image
-											v-if="['jpg','jpeg','png','gif','webp','bmp'].includes(file.extendName.toLowerCase())"
-											:src="file.url" mode="widthFix" class="message-image"
-											@click="previewImage(file.url)"></image>
-										<!-- 普通文件：doc/xlsx/zip/pdf 等 -->
-										<view v-else class="message-file" @click="openFile(file.url)">
-											<view class="file-icon">📄</view>
-											<view class="file-name">{{ file.name }}</view>
-											<view class="file-size">{{ formatFileSize(file.fileSize) }}</view>
-										</view>
+						<view class="chat-content"
+							:class="{'chat-content-user':message.role==='user', 'chat-content-assistant':message.role==='assistant' || message.role==='tool'}"
+							@click="handleChatContentClick($event, message)"
+							v-if="(message.content && String(message.content).trim() !== '') || message._streaming || (message.yxd_files && message.yxd_files.length > 0) || (message.role === 'tool' && message.yxd_tool_name === 'sendFrom')">
+							<!-- 流式加载中：显示跳动的点 -->
+							<view
+								v-if="message._streaming && (!message.content || String(message.content).trim() === '')"
+								class="bubble-loading-dots">
+								<view class="bubble-dot"></view>
+								<view class="bubble-dot"></view>
+								<view class="bubble-dot"></view>
+							</view>
+							<!-- 文本内容（非 tool 消息） -->
+							<view v-if="message.role !== 'tool' && parseFileInfo(message.content).textContent"
+								v-html="pareseMarkdown(parseFileInfo(message.content).textContent)"></view>
+							<!-- 文件卡片列表（非 tool 消息） -->
+							<view v-if="message.role !== 'tool' && parseFileInfo(message.content).files.length > 0" class="message-file-list">
+								<view v-for="(file, idx) in parseFileInfo(message.content).files" :key="idx"
+									class="file-item">
+									<!-- 图片：jpg/png/gif/webp 等 -->
+									<image
+										v-if="['jpg','jpeg','png','gif','webp','bmp'].includes(file.extendName.toLowerCase())"
+										:src="file.url" mode="widthFix" class="message-image"
+										@click="previewImage(file.url)"></image>
+									<!-- 普通文件：doc/xlsx/zip/pdf 等 -->
+									<view v-else class="message-file" @click="openFile(file.url)">
+										<view class="file-icon">📄</view>
+										<view class="file-name">{{ file.name }}</view>
+										<view class="file-size">{{ formatFileSize(file.fileSize) }}</view>
 									</view>
 								</view>
 							</view>
+							<!-- 用户上传文件列表（yxd_files，消息 content 为空时展示） -->
+							<view v-if="message.role === 'user' && message.yxd_files && message.yxd_files.length > 0" class="message-file-list">
+								<view v-for="(fileName, idx) in message.yxd_files" :key="idx" class="file-item">
+									<view class="message-file">
+										<view class="file-icon">📄</view>
+										<view class="file-name">{{ fileName }}</view>
+									</view>
+								</view>
+							</view>
+							<!-- sendFrom 工具消息：可交互表单 -->
+							<template v-if="message.role === 'tool' && message.yxd_tool_name === 'sendFrom'">
+								<view v-if="getToolFormData(message)" class="tool-form-card">
+									<view class="tool-form-title">📋 {{ getToolFormData(message).title || '表单' }}</view>
+									<view v-if="getToolFormData(message).description" class="tool-form-desc">{{ getToolFormData(message).description }}</view>
+									<view class="tool-form-fields">
+										<template v-for="(comp, ci) in getToolFormData(message).components" :key="ci">
+											<!-- 纯文本 -->
+											<view v-if="comp.type === 'text'" class="tool-form-text">{{ comp.content }}</view>
+											<!-- 多行输入 -->
+											<view v-else-if="comp.type === 'textarea'" class="tool-form-field">
+												<view class="tool-form-label">{{ comp.label }}<text v-if="comp.required" style="color:#e74c3c"> *</text></view>
+												<textarea class="tool-form-textarea" :placeholder="comp.placeholder || ''"
+													:disabled="getToolFormData(message)._disabled || (toolFormValues[getToolFormData(message).formId] || {})._submitted"
+													:value="(toolFormValues[getToolFormData(message).formId] || {})[comp.name] || ''"
+													@input="e => { const f = ensureToolForm(getToolFormData(message)); f[comp.name] = e.detail.value }"
+													auto-height />
+											</view>
+											<!-- 单行输入（默认） -->
+											<view v-else class="tool-form-field">
+												<view class="tool-form-label">{{ comp.label }}<text v-if="comp.required" style="color:#e74c3c"> *</text></view>
+												<input class="tool-form-input" :placeholder="comp.placeholder || ''"
+													:disabled="(toolFormValues[getToolFormData(message).formId] || {})._submitted"
+													:value="(toolFormValues[getToolFormData(message).formId] || {})[comp.name] || ''"
+													@input="e => { const f = ensureToolForm(getToolFormData(message)); f[comp.name] = e.detail.value }" />
+											</view>
+										</template>
+									</view>
+									<view class="tool-form-submit" :class="{ 'tool-form-submitted': (toolFormValues[getToolFormData(message).formId] || {})._submitted }"
+										@click="submitToolForm(getToolFormData(message))">
+										{{ (toolFormValues[getToolFormData(message).formId] || {})._submitted ? '已提交' : (getToolFormData(message).submitText || '提交') }}
+									</view>
+								</view>
+							</template>
+							</view>
 						</view>
 					</template>
 					<!-- 与好友的对话内容展示 -->
@@ -349,6 +392,7 @@
 		getCurrentInstance,
 		nextTick,
 		onMounted,
+		reactive,
 		ref,
 		watch
 	} from 'vue';
@@ -691,6 +735,49 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
 		}
 	}

+	// 解析 sendFrom 工具消息的 JSON content，返回原始对象供模板使用
+	const getToolFormData = (message) => {
+		if (!message || !message.content) return null
+		try {
+			const data = typeof message.content === 'string' ? JSON.parse(message.content) : message.content
+			if (!data || (!data.type && !data.components)) return null
+			return data
+		} catch (e) {
+			return null
+		}
+	}
+
+	// 初始化表单值（惰性初始化，首次访问时创建）
+	const ensureToolForm = (formData) => {
+		if (!formData || !formData.formId) return {}
+		if (!toolFormValues[formData.formId]) {
+			const fields = { _submitted: false }
+			;(formData.components || []).forEach(c => {
+				if (c.name) fields[c.name] = ''
+			})
+			toolFormValues[formData.formId] = reactive(fields)
+		}
+		return toolFormValues[formData.formId]
+	}
+
+	// 提交工具表单
+	const submitToolForm = (formData) => {
+		if (!formData || !formData.formId) return
+		const values = toolFormValues[formData.formId]
+		if (!values) return
+		// 检查必填项
+		const missing = (formData.components || [])
+			.filter(c => c.required && c.name && !values[c.name])
+			.map(c => c.label)
+		if (missing.length > 0) {
+			uni.showToast({ title: `请填写：${missing.join('、')}`, icon: 'none' })
+			return
+		}
+		values._submitted = true
+		console.log('表单提交:', formData.formId, { ...values, _submitted: undefined })
+		uni.showToast({ title: '提交成功', icon: 'success' })
+		// TODO: 调用 API 提交表单数据
+	}



@@ -1688,6 +1775,8 @@ import { openFile as openFileNative, downloadAndOpen } from '@/utils/fileOpener.
 	const scrollToView = ref('')
 	const bottomToggle = ref(false)
 	const scrollAnimationEnabled = ref(true) // 控制 scroll-with-animation，加载更多时关闭避免可见滑动
+	// 工具表单交互状态：key 为 formId，value 为 { fieldName: value, _submitted: bool }
+	const toolFormValues = reactive({})
 	// 加载状态和分页相关变量
 	const isLoadingMore = ref(false) // 是否正在加载更多
 	const isAILoadingMore = ref(false) // AI 会话是否正在加载更多（滚动到顶部触发）