create-koa-boot 1.0.0

package/templates/example/uniapp/pages/mine/help/index.vue

@@ -0,0 +1,607 @@
+<template>
+	<view class="page-ai">
+		<!-- 顶部栏 -->
+		<view class="hero-bar">
+			<view class="hero-bar__inner">
+				<view class="hero-back" @click="uni.navigateBack()">
+					<uv-icon name="arrow-left" size="20" color="#fff"></uv-icon>
+				</view>
+				<text class="hero-bar__title">AI 智能助手</text>
+				<view class="hero-bar__spacer"></view>
+			</view>
+		</view>
+
+		<!-- 对话区 -->
+		<scroll-view class="chat-scroll" scroll-y :scroll-into-view="scrollIntoId" :scroll-with-animation="true">
+			<!-- 空状态：欢迎语 + 快捷提问 -->
+			<view v-if="!messages.length" class="chat-empty">
+				<view class="chat-welcome">
+					<view class="chat-welcome__icon">
+						<uv-icon name="chat" size="36" color="#10B981"></uv-icon>
+					</view>
+					<text class="chat-welcome__title">你好，我是业务智能助手</text>
+					<text class="chat-welcome__desc">可以查询订货排行、销售订单、商品销售分析等业务数据，答案来自系统实时数据</text>
+				</view>
+				<view class="chat-quick" v-for="(q, i) in quickQuestions" :key="i" @click="onSend(q)">
+					<text class="chat-quick__text">{{ q }}</text>
+					<uv-icon name="arrow-right" size="14" color="#B0B7C3"></uv-icon>
+				</view>
+				<view class="chat-contact">
+					<text class="chat-contact__text">人工客服：support@zrhx.com</text>
+				</view>
+			</view>
+
+			<!-- 消息列表 -->
+			<view
+				v-for="(m, i) in messages"
+				:key="i"
+				:id="'msg-' + i"
+				class="chat-item"
+				:class="m.role === 'user' ? 'chat-item--user' : 'chat-item--ai'"
+			>
+				<view class="chat-main">
+					<text class="chat-role" :class="m.role === 'user' ? 'chat-role--user' : 'chat-role--ai'">
+						{{ m.role === 'user' ? '我' : 'AI 助手' }}
+					</text>
+					<view class="bubble" :class="m.role === 'user' ? 'bubble--user' : 'bubble--ai'">
+						<!-- AI 消息 -->
+						<template v-if="m.role === 'assistant'">
+							<!-- 回答依据标签 -->
+							<view v-if="m.toolNames.length" class="ai-tags">
+								<text class="ai-tag" v-for="(t, j) in m.toolNames" :key="j">已查询：{{ t }}</text>
+							</view>
+							<!-- 查询中 -->
+							<view v-if="loadingIndex === i && !m.display" class="ai-loading">
+								<text class="ai-loading__text">正在查询业务数据</text>
+								<view class="ai-dots">
+									<text>.</text><text>.</text><text>.</text>
+								</view>
+							</view>
+							<!-- 结构化内容（表格/代码块等）：Markdown 渲染 -->
+							<uv-parse
+								v-else-if="m.structured"
+								:content="m.html"
+								:tag-style="tagStyle"
+								:scroll-table="true"
+								:selectable="true"
+							/>
+							<!-- 纯文本：打字机 -->
+							<text v-else class="ai-text">{{ m.display }}</text>
+						</template>
+						<!-- 用户消息 -->
+						<text v-else class="user-text">{{ m.display }}</text>
+					</view>
+				</view>
+			</view>
+			<view id="msg-tail" class="chat-tail"></view>
+		</scroll-view>
+
+		<!-- 底部输入栏 -->
+		<view class="chat-inputbar">
+			<view class="chat-inputbar__box">
+				<uv-input
+					v-model="input"
+					placeholder="输入问题，如：近7天门店订货排行"
+					style="border: 0;"
+					:customStyle="{
+						fontSize: '28rpx',
+						padding: '0 20rpx',
+						background: '#fff',
+						borderRadius: '40rpx',
+						height: '80rpx'
+					}"
+					confirm-type="send"
+					@confirm="onInputConfirm"
+				/>
+			</view>
+			<view class="send-btn" :class="{ 'send-btn--disabled': !canSend }" @click="onSend">
+				<text>发送</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import UvParse from '@/uni_modules/uv-parse/components/uv-parse/uv-parse.vue'
+import { markdownToHtml } from '@/utils/markdown'
+import { aiApi } from '@/services/modules/ai'
+
+/** 工具名 → 展示名（对应后端 ai.tools.ts 的工具注册表） */
+const TOOL_NAME_MAP = {
+	query_stores: '门店列表',
+	query_sale_orders: '销售订单',
+	query_order_statistics: '订货统计',
+	query_sku_sale_analysis: '商品销售分析',
+}
+
+/** 历史对话本地存储 key（按用户隔离） */
+function historyKey() {
+	const user = uni.getStorageSync('userInfo') || {}
+	return `ai_chat_history_${user.id || user.userId || 'default'}`
+}
+/** 历史保留条数上限 */
+const HISTORY_LIMIT = 50
+
+export default {
+	components: { UvParse },
+	data() {
+		return {
+			input: '',
+			/** 正在查询的助手消息下标（null 表示空闲） */
+			loadingIndex: null,
+			scrollIntoId: '',
+			messages: [],
+			quickQuestions: [
+				'近 7 天各门店订货排行',
+				'查询今天的销售订单',
+				'商品销售分析',
+				'有哪些门店',
+			],
+			/** uv-parse 标签样式（rpx 适配移动端） */
+			tagStyle: {
+				table: 'width:100%;border-collapse:collapse;font-size:26rpx;margin:16rpx 0;',
+				th: 'border:1rpx solid #E3E8EF;padding:12rpx 10rpx;background:#F5F7FA;font-weight:600;text-align:left;',
+				td: 'border:1rpx solid #E3E8EF;padding:12rpx 10rpx;word-break:break-all;',
+				p: 'margin:8rpx 0;line-height:1.7;',
+				ul: 'padding-left:32rpx;margin:8rpx 0;',
+				ol: 'padding-left:32rpx;margin:8rpx 0;',
+				li: 'line-height:1.7;margin:4rpx 0;',
+				h1: 'font-size:36rpx;font-weight:600;margin:16rpx 0 8rpx;',
+				h2: 'font-size:33rpx;font-weight:600;margin:16rpx 0 8rpx;',
+				h3: 'font-size:30rpx;font-weight:600;margin:12rpx 0 8rpx;',
+				h4: 'font-size:28rpx;font-weight:600;margin:12rpx 0 8rpx;',
+				strong: 'font-weight:600;',
+				code: 'background:#F0F2F5;padding:0 6rpx;border-radius:4rpx;font-size:24rpx;',
+				pre: 'background:#F6F8FA;padding:16rpx;border-radius:8rpx;margin:12rpx 0;overflow-x:auto;',
+				a: 'color:#10B981;text-decoration:none;',
+			},
+		}
+	},
+	computed: {
+		canSend() {
+			return !!this.input.trim() && this.loadingIndex === null
+		},
+	},
+	onShow() {
+		this.loadHistory()
+	},
+	methods: {
+		/** 从本地存储恢复历史对话 */
+		loadHistory() {
+			try {
+				const raw = uni.getStorageSync(historyKey())
+				const list = raw ? JSON.parse(raw) : null
+				if (Array.isArray(list) && list.length) {
+					this.messages = list.map(m => ({
+						role: m.role === 'user' ? 'user' : 'assistant',
+						content: m.content || '',
+						display: m.display || m.content || '',
+						html: m.html || '',
+						structured: !!m.structured,
+						toolNames: m.toolNames || [],
+						reasoningContent: m.reasoningContent || '',
+						error: !!m.error,
+					}))
+					this.$nextTick(() => this.scrollToBottom())
+				}
+			} catch (e) {
+				// 存储数据损坏时静默忽略，回退到空对话
+			}
+		},
+		/** 持久化对话历史（最多保留 HISTORY_LIMIT 条） */
+		saveHistory() {
+			try {
+				const list = this.messages.slice(-HISTORY_LIMIT).map(m => ({
+					role: m.role,
+					content: m.content,
+					display: m.display || m.content,
+					html: m.html || '',
+					structured: !!m.structured,
+					toolNames: m.toolNames || [],
+					reasoningContent: m.reasoningContent || '',
+					error: !!m.error,
+				}))
+				uni.setStorageSync(historyKey(), JSON.stringify(list))
+			} catch (e) {
+				// 存储失败（如容量超限）静默忽略，不影响对话
+			}
+		},
+		/** 检测结构化内容（表格/标题/列表/代码块）：结构化跳过打字机，整体渲染 */
+		isStructured(text) {
+			// m 标志：让 ^ 匹配每一行开头，否则只能匹配整个字符串开头，中间的表格/标题识别不到
+			return /```|^\s*#{1,6}\s|^\s*>\s|^\s*[-*]\s|\d+[.、]\s|^\s*\|.*\|/m.test(text || '')
+		},
+		scrollToBottom() {
+			this.$nextTick(() => {
+				this.scrollIntoId = 'msg-tail'
+			})
+		},
+		onInputConfirm() {
+			this.onSend()
+		},
+		async onSend(text) {
+			const content = (text || this.input || '').trim()
+			if (!content || this.loadingIndex !== null) return
+			this.input = ''
+			this.messages.push({
+				role: 'user',
+				content,
+				display: content,
+				html: '',
+				structured: false,
+				toolNames: [],
+				reasoningContent: '',
+			})
+			this.saveHistory()
+			const aiMsg = {
+				role: 'assistant',
+				content: '',
+				display: '',
+				html: '',
+				structured: false,
+				toolNames: [],
+				reasoningContent: '',
+				// 请求失败的错误气泡不进入发送历史（无 reasoningContent，回传会触发 thinking 400）
+				error: false,
+			}
+			const aiIndex = this.messages.push(aiMsg) - 1
+			this.loadingIndex = aiIndex
+			this.scrollToBottom()
+			try {
+			// 只发送有内容的真实消息：
+			// 1. 过滤空的 assistant 占位气泡（否则 thinking 模式下 {role:'assistant',content:''} 直接 400）
+			// 2. 过滤请求失败的错误气泡（无 reasoningContent，回传同样 400）
+			// 3. 历史 assistant 消息携带 reasoningContent 原样回传（thinking 模式协议要求）
+			const res = await aiApi.chat(
+				this.messages
+					.filter(m => m.content && !m.error)
+					.map(m => ({
+						role: m.role,
+						content: m.content,
+						reasoningContent: m.reasoningContent || undefined,
+					})),
+			)
+			const { reply, toolCalls, reasoningContent } = (res && res.data) || {}
+			aiMsg.content = (reply || '').trim() || '抱歉，我没有理解你的问题，请换一种问法试试。'
+			aiMsg.reasoningContent = reasoningContent || ''
+			aiMsg.structured = this.isStructured(aiMsg.content)
+				aiMsg.html = aiMsg.structured ? markdownToHtml(aiMsg.content) : ''
+				aiMsg.toolNames = (toolCalls || [])
+					.map(c => TOOL_NAME_MAP[(c.function && c.function.name) || ''] || '业务数据')
+					.filter((v, idx, arr) => arr.indexOf(v) === idx)
+				await this.typewrite(aiMsg)
+			} catch (e) {
+				aiMsg.content = (e && e.message) || '请求失败，请稍后重试'
+				aiMsg.display = aiMsg.content
+				aiMsg.html = ''
+				aiMsg.structured = false
+				aiMsg.error = true
+			} finally {
+				this.loadingIndex = null
+				this.scrollToBottom()
+				this.saveHistory()
+			}
+		},
+		/** 打字机效果（结构化内容直接整体显示） */
+		typewrite(msg) {
+			return new Promise(resolve => {
+				const full = msg.content
+				if (msg.structured) {
+					msg.display = full
+					resolve()
+					return
+				}
+				let i = 0
+				msg.display = ''
+				const timer = setInterval(() => {
+					i += 2
+					msg.display = full.slice(0, i)
+					this.scrollToBottom()
+					if (i >= full.length) {
+						clearInterval(timer)
+						msg.display = full
+						resolve()
+					}
+				}, 24)
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.page-ai {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	background: #f5f7fa;
+}
+
+/* 顶部栏 */
+.hero-bar {
+	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	padding-top: calc(var(--status-bar-height, 44px) + 12rpx);
+	padding-bottom: 24rpx;
+	flex-shrink: 0;
+
+	&__inner {
+		display: flex;
+		align-items: center;
+		padding: 0 16rpx;
+	}
+
+	&__title {
+		flex: 1;
+		text-align: center;
+		font-size: 34rpx;
+		font-weight: 600;
+		color: #fff;
+	}
+
+	&__spacer {
+		width: 72rpx;
+	}
+}
+
+.hero-back {
+	width: 72rpx;
+	height: 72rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* 对话滚动区 */
+.chat-scroll {
+	flex: 1;
+	min-height: 0;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.chat-tail {
+	height: 8rpx;
+}
+
+/* 空状态 */
+.chat-empty {
+	padding-top: 48rpx;
+}
+
+.chat-welcome {
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 40rpx 32rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+
+	&__icon {
+		width: 96rpx;
+		height: 96rpx;
+		border-radius: 50%;
+		background: #ecfdf5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 20rpx;
+	}
+
+	&__title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #1a1a2e;
+		margin-bottom: 12rpx;
+	}
+
+	&__desc {
+		font-size: 26rpx;
+		color: #5a6a7e;
+		line-height: 1.6;
+		text-align: center;
+	}
+}
+
+.chat-quick {
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 28rpx 28rpx;
+	margin-top: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+
+	&__text {
+		font-size: 28rpx;
+		color: #1a1a2e;
+		flex: 1;
+		padding-right: 20rpx;
+	}
+
+	&:active {
+		opacity: 0.7;
+	}
+}
+
+.chat-contact {
+	margin-top: 28rpx;
+	text-align: center;
+
+	&__text {
+		font-size: 24rpx;
+		color: #9aa5b4;
+	}
+}
+
+/* 消息项 */
+.chat-item {
+	display: flex;
+	align-items: flex-start;
+	margin-top: 24rpx;
+
+	&--user {
+		justify-content: flex-end;
+	}
+
+	&--ai {
+		justify-content: flex-start;
+	}
+}
+
+.chat-main {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+}
+
+.chat-role {
+	font-size: 22rpx;
+	color: #9aa5b4;
+	margin-bottom: 8rpx;
+
+	&--user {
+		text-align: right;
+	}
+
+	&--ai {
+		text-align: left;
+	}
+}
+
+.bubble {
+	max-width: 100%;
+	border-radius: 16rpx;
+	padding: 20rpx 24rpx;
+	word-break: break-word;
+
+	&--user {
+		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+		color: #fff;
+		border-top-right-radius: 4rpx;
+		box-shadow: 0 4rpx 16rpx rgba(5, 150, 105, 0.2);
+	}
+
+	&--ai {
+		background: #fff;
+		color: #1a1a2e;
+		border-top-left-radius: 4rpx;
+		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+	}
+}
+
+.user-text {
+	font-size: 28rpx;
+	line-height: 1.6;
+}
+
+.ai-text {
+	font-size: 28rpx;
+	line-height: 1.7;
+	color: #1a1a2e;
+	white-space: pre-wrap;
+}
+
+/* 回答依据标签 */
+.ai-tags {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 12rpx;
+}
+
+.ai-tag {
+	font-size: 20rpx;
+	color: #059669;
+	background: #ecfdf5;
+	border: 1rpx solid #a7f3d0;
+	border-radius: 8rpx;
+	padding: 4rpx 12rpx;
+	margin-right: 12rpx;
+	margin-bottom: 8rpx;
+}
+
+/* 查询中 */
+.ai-loading {
+	display: flex;
+	align-items: center;
+
+	&__text {
+		font-size: 26rpx;
+		color: #5a6a7e;
+	}
+}
+
+.ai-dots {
+	display: flex;
+	margin-left: 8rpx;
+
+	text {
+		font-size: 30rpx;
+		color: #5a6a7e;
+		animation: ai-dot 1.2s infinite;
+
+		&:nth-child(2) {
+			animation-delay: 0.2s;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 0.4s;
+		}
+	}
+}
+
+@keyframes ai-dot {
+	0%,
+	100% {
+		opacity: 0.2;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+/* 底部输入栏 */
+.chat-inputbar {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+	background: #fff;
+	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
+	flex-shrink: 0;
+
+	&__box {
+		flex: 1;
+		background: #f5f7fa;
+		border-radius: 40rpx;
+		margin-right: 20rpx;
+		padding: 4rpx;
+	}
+}
+
+.send-btn {
+	width: 128rpx;
+	height: 80rpx;
+	border-radius: 40rpx;
+	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+
+	text {
+		font-size: 28rpx;
+		color: #fff;
+		font-weight: 600;
+	}
+
+	&--disabled {
+		opacity: 0.5;
+	}
+
+	&:active {
+		opacity: 0.8;
+	}
+}
+</style>