<script setup lang="ts">
import { nextTick, ref } from 'vue';
// @ts
-ignore
- These variables are used in the template
import { marked as originalMarked } from 'marked';
// @ts
-ignore
- These variables are used in the template
import hljs from 'highlight.js';
import 'highlight.js/
styles/github.css';
import { use
Message, useToast } from 'wot
-design
-uni';
import send from '/static/
icons/send.svg';
import { onLoad } from '@dcloudio/uni
-app'; // 添加页面生命周期钩子
// @ts
-ignore
- These variables are used in the template
import { getModellist } from '@/api/
user.js';
const marked: any = originalMarked;
const inputBottom = ref('15rpx'); // 输入框底部间距
const keyboardHeight = ref(0); // 键盘高度
const
message = use
Message();
const toast = useToast();
const picker = ref<any>(null); // 添加选择器引用
// 监听键盘高度变化
uni.onKeyboardHeightChange((res) => {
keyboardHeight.value = res.height;
// 转换为px单位（小程序环境使用px）
inputBottom.value = `${res.height}px`;
});
// 在组件卸载时取消监听
onUnmounted(() => {
uni.offKeyboardHeightChange();
});
// 配置marked选项
marked.setOptions({
highlight: (code: string, lang: string) => {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(code, { language: lang }).value;
} catch (err) {
console.warn('代码高亮失败:', err);
return code;
}
}
return code;
},
gfm: true,
breaks: true,
headerIds: false,
mangle: false
});
function renderMarkdown(content: string) {
try {
// 在小程序中，我们需要确保返回的是字符串
const html = marked(content);
// 处理代码块的样式类，确保返回字符串
return String(html).replace(/<pre><code/g, '<pre><code class="hljs"');
} catch (err) {
console.error('Markdown渲染失败:', err);
return content;
}
}
interface
Message {
role: '
user' | 'assistant';
content: string;
typing?: boolean;
}
const
messages = ref<
Message[]>([
{
role: 'assistant',
content: '你好，我是你的智能助手。有什么问题我可以帮你解答吗？'
}
]);
const input
Message = ref('');
const loading = ref(false);
const scrollTop = ref(0);
const
messageListRef = ref<HTMLElement | null>(null);
// 防抖函数
function debounce(fn: Function, delay: number) {
let timer: number | null = null;
return function (this: any, ...args: any[]) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 节流函数
function throttle(fn: Function, delay: number) {
let lastTime = 0;
let timer: number | null = null;
return function (this: any, ...args: any[]) {
const now = Date.now();
const remaining = delay
- (now
- lastTime);
if (remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
fn.apply(this, args);
lastTime = now;
} else if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
timer = null;
}, remaining);
}
};
}
// 滚动到底部的函数
const scrollToBottom = throttle(async () => {
if (!
messageListRef.value) return;
const last
Message =
messages.value[
messages.value.length
- 1];
if (last
Message?.typing) return; // 打字过程中不触发滚动
await nextTick();
const query = uni.createSelectorQuery();
query
.select('.
message-list')
.boundingClientRect((data: any) => {
if (data) {
scrollTop.value = data.height;
}
})
.exec();
}, 200); // 增加节流时间，减少滚动更新频率
// 监听消息列表变化，自动滚动到底部
watch(
() =>
messages.value.length,
() => {
if (
messages.value[
messages.value.length
- 1]?.typing) return;
scrollToBottom();
}
);
// 监听最后一条消息的内容变化（用于打字效果）
watch(
() =>
messages.value[
messages.value.length
- 1]?.content,
async () => {
const last
Message =
messages.value[
messages.value.length
- 1];
if (last
Message?.typing) {
// 在打字过程中，每次内容变化都尝试滚动
await nextTick();
const query = uni.createSelectorQuery();
query
.select('.
message-list')
.boundingClientRect((data: any) => {
if (data && data.height > scrollTop.value) {
scrollTop.value = data.height;
}
})
.exec();
}
}
);
// 模拟打字效果的函数
async function type
Message(fullContent: string) {
try {
// 获取最后一条消息的引用
const last
Message =
messages.value[
messages.value.length
- 1];
// 初始化内容并标记为正在输入
last
Message.content = '';
last
Message.typing = true;
// 确保滚动到底部
await nextTick();
await scrollToBottom();
// 逐步更新内容
const chars = Array.from(fullContent);
let currentContent = '';
const batchSize = 1;
for (let i = 0; i < chars.length; i += batchSize) {
currentContent += chars.slice(i, i + batchSize).join('');
last
Message.content = currentContent; // 直接更新最后一条消息
await new Promise((resolve) => setTimeout(resolve, 10));
await scrollToBottom();
}
// 最终状态更新
last
Message.content = fullContent;
last
Message.typing = false;
await nextTick();
await scrollToBottom();
} catch (error) {
console.error('打字效果执行失败:', error);
const last
Message =
messages.value[
messages.value.length
- 1];
last
Message.content = fullContent;
last
Message.typing = false;
await scrollToBottom();
}
}
async function send
Message() {
if (!input
Message.value.trim()) return;
const
userContent = input
Message.value;
// 添加用户消息
messages.value.push({
role: '
user',
content:
userContent
});
// 清空输入框
input
Message.value = '';
loading.value = true;
try {
// 创建初始的助手消息
const assistant
Message:
Message = {
role: 'assistant',
content: '',
typing: true
};
messages.value.push(assistant
Message);
await nextTick();
const token = uni.getStorageSync('token');
// 发送请求
const { data } = await uni.request({
url: 'https://qa.mini.xmaas.cn/chat/completions',
method: 'POST',
header: {
logic: 'check',
Authorization: `${token}`,
'Content
-Type': '
application/json'
},
data: {
position: 0,
model: pickerValue.value,
stream: true,
messages: [{ role: '
user', content:
userContent }]
}
});
// 处理流式数据
const streamData = data as string;
const chunks = streamData
.split('\n\n') // 分割事件
.filter((chunk) => chunk.trim().startsWith('data:')); // 过滤有效数据
let fullContent = '';
for (const chunk of chunks) {
try {
const jsonStr = chunk.replace(/^data:/, '').trim();
if (!jsonStr) continue;
const eventData = JSON.parse(jsonStr);
const contentChunk = eventData.choices[0]?.delta?.content || '';
// 处理Unicode转义字符
const decodedContent = unescape(contentChunk.replace(/\\u/g, '%u'));
fullContent += decodedContent;
} catch (err) {
console.error('解析数据块失败:', err);
}
}
// 更新最后一条消息内容，并触发打字效果
messages.value[
messages.value.length
- 1].content = fullContent;
await type
Message(fullContent); // 使用逐字打印效果
// 结束打字状态
messages.value[
messages.value.length
- 1].typing = false;
} catch (error) {
console.error('请求失败:', error);
messages.value[
messages.value.length
- 1].content = '回答生成失败，请稍后重试';
} finally {
loading.value = false;
await scrollToBottom();
}
}
function loadMore
Messages() {
// TODO: 实现加载更多历史消息
console.log('加载更多消息');
}
// ... existing code ...
function handleBack() {
uni.navigateBack({
delta: 1,
fail: () => {
// 如果返回失败（比如没有上一页），则跳转到首页
uni.switchTab({
url: '/pages/index'
});
}
});
}
//清空对话
// 修改 handClear 函数
async function handClear() {
const token = uni.getStorageSync('token');
try {
// 1. 调用清空接口
await uni.request({
url: 'https://qa.mini.xmaas.cn/
message/deleteByChatId',
method: 'DELETE',
header: {
'Content
-Type': '
application/json',
Authorization: `${token}`
}
});
// 2. 重置本地消息状态为初始欢迎消息
messages.value = [
{
role: 'assistant',
content: '你好，我是你的智能助手。有什么问题我可以帮你解答吗？'
}
];
// 3. 重置滚动位置到顶部
scrollTop.value = 0;
// 4. 显示成功提示（已经在 beforeConfirm 中处理）
} catch (error) {
console.error('清空消息失败:', error);
toast.error('清空消息失败');
}
}
function beforeConfirm() {
message
.confirm({
msg: '是否删除',
title: '提示',
beforeConfirm: ({ resolve }) => {
toast.loading('删除中...');
setTimeout(() => {
toast.close();
handClear();
resolve(true);
toast.success('删除成功');
}, 2000);
}
})
.then(() => {})
.catch((error) => {
console.log(error);
});
}
const columns = ref<Record<string, any>>([]);
const pickerValue = ref<string>('');
// 添加获取模型列表的函数
async function fetchModelList() {
try {
const data = await getModellist();
if (data && data.models && data.models.length > 0) {
// 将接口数据映射为选择器需要的格式
columns.value = data.models.map((model: any) => ({
value: model.name,
label: model.name
}));
// 设置默认选中第一个模型
if (columns.value.length > 0) {
pickerValue.value = columns.value[0].value;
}
}
} catch (error) {}
}
function handleChange({ value }: any) {
pickerValue.value = value;
}
// 添加按钮点击处理函数
function handle
ButtonClick() {
picker.value?.open();
}
function pauseLoading() {
console.log(22222222222);
}
// 添加历史消息获取函数
async function fetchHistory
Messages() {
const token = uni.getStorageSync('token');
try {
loading.value = true;
const { data }: any = await uni.request({
url: 'https://qa.mini.xmaas.cn/
message/findByChatId',
method: 'GET',
header: {
'Content
-Type': '
application/json',
Authorization: `${token}`
}
});
// 处理接口返回的数据
if (data && data.
messages && data.
messages.length > 0) {
// 按时间排序（确保消息顺序正确）
const sorted
Messages = data.
messages.sort((a: any, b: any) => a.created_time
- b.created_time);
messages.value = [];
// 转换为需要的格式
sorted
Messages.forEach((msg: any) => {
messages.value.push({
role: msg.model_id === 0 ? '
user' : 'assistant',
content: msg.content,
typing: false // 历史消息不需要打字效果
});
});
// 滚动到底部
await nextTick();
scrollToBottom();
} else {
// 没有历史消息时显示欢迎语
setWelcome
Message();
}
} catch (error) {
console.error('获取历史消息失败:', error);
toast.error('加载历史消息失败');
// 请求失败时也显示欢迎语
setWelcome
Message();
} finally {
loading.value = false;
}
}
function setWelcome
Message() {
messages.value = [
{
role: 'assistant',
content: '你好，我是你的智能助手。有什么问题我可以帮你解答吗？'
}
];
}
// 在页面加载时获取历史消息
onLoad(() => {
fetchHistory
Messages();
fetchModelList();
});
//长按复制
function handleCopy(e: any) {
// 确保是复制操作
if (e.detail.action === 'copy') {
// 获取消息内容
const content = e.currentTarget.dataset.content;
// 复制到剪贴板
uni.setClipboardData({
data: content,
success: () => {
// 使用您现有的 toast 组件
toast.success('复制成功');
},
fail: () => {
toast.error('复制失败');
}
});
}
}
// +++ 添加长按事件处理 +++
function handleLongPress(e: any, content: string) {
console.log('长按事件触发', content);
}
</script>
<template>
<view class="chat
-container">
<wd
-navbar safe
-area
-inset
-top placeholder left
-arrow fixed :bordered="false" @click
-left="handleBack">
<template #right>
<view class="custom
-right">
<wd
-icon name="clear" size="22px" @click="beforeConfirm" />
</view>
</template>
</wd
-navbar>
<scroll
-view
ref="
messageListRef"
scroll
-y
class="chat
-messages"
:scroll
-top="scrollTop"
:scroll
-with
-animation="false"
:scroll
-anchoring="true"
:enhanced="true"
:bounces="false"
@scrolltoupper="loadMore
Messages"
>
<view class="
message-list">
<view
v
-for="(
message, index) in
messages"
:key="index"
class="
message-item"
:class="[
message.role, { typing:
message.typing }]"
>
<view v
-if="
message.role === 'assistant'" class="
message-avatar">
<image src="/static/svg/Hara.svg" mode="aspectFill" style="width: 44rpx; height: 44rpx" />
<text>Hara</text>
</view>
<view class="
message-content">
<!
-- 统一使用rich
-text渲染Markdown
-->
<view
v
-if="!
message.typing"
@longpress="(e) => handleLongPress(e,
message.content)"
>
<rich
-text
:nodes="renderMarkdown(
message.content)"
:data
-content="
message.content"
/>
</view>
<rich
-text
v
-else
:nodes="renderMarkdown(
message.content)"
/>
<view v
-if="
message.typing" class="typing
-indicator">
<view class="dot" />
<view class="dot" />
<view class="dot" />
</view>
</view>
</view>
</view>
</scroll
-view>
<wd
-select
-picker
ref="picker"
v
-model="pickerValue"
:columns="columns"
@change="handleChange"
custom
-class="hidden
-picker"
custom
-style="z
-index:120"
type="radio"
:show
-confirm="false"
></wd
-select
-picker>
<view class="
button_picker" style="margin
-bottom: 45rpx; margin
-left: 25rpx">
<wd
-button type="success" @click="handle
ButtonClick" custom
-class="handbtn">
<text style="font
-family: PingFang SC">{{ pickerValue }}</text>
<wd
-icon name="arrow
-down" size="16px" custom
-style="transform: translateY(3rpx)"></wd
-icon>
</wd
-button>
</view>
<view class="chat
-input safe
-area
-bottom" :style="{ bottom: inputBottom }">
<input
v
-model="input
Message"
type="text"
placeholder="向你的专属知识库提问吧~"
:rows="2"
class="
message-textarea"
:disabled="loading"
:adjust
-position="false"
@keypress.enter.prevent="send
Message"
/>
<!
-- <wd
-button type="primary" size="small" :loading="loading" :disabled="!input
Message.trim()" @click="send
Message">
发送
</wd
-button>
-->
<image
:src="loading ? '/static/
icons/Pause.svg' : !input
Message.trim() ? '/static/
icons/ic_send.svg' : '/static/
icons/arrow.svg'"
@click="loading ? pauseLoading() : input
Message.trim() ? send
Message() : null"
style="width: 56rpx; height: 56rpx"
/>
</view>
</view>
</template>
<style lang="scss" scoped>
:deep(.handbtn) {
background
-color: #d8f2f3 !important;
color: #14c3c9 !important;
width: auto !important;
border
-radius: 16rpx !important;
font
-family: 'PingFang SC';
display: flex;
align
-items: center;
}
.
button_picker {
margin
-bottom: 90rpx;
margin
-left: 80rpx;
}
/* 隐藏原生选择器控件 */
:deep(.hidden
-picker) {
.wd
-select
-picker__field {
display: none !important;
}
.data
-v
-d4a8410a.wd
-icon.wd
-icon
-check {
color: #14c3c9 !important;
}
.data
-v
-aa3a6253.wd
-button.is
-primary.is
-large.is
-round.is
-block {
background
-color: #7f6ce0 !important;
}
}
.custom
-right {
display: flex;
align
-items: center;
/* 垂直居中 */
gap: 10rpx;
/* 元素间距 */
padding
-right: 160rpx;
/* 右侧距离 */
margin
-right: 20rpx;
}
:deep(.wd
-navbar) {
background
-color: #f4f4f5 !important; // 添加背景色
}
:deep(.wd
-navbar__title) {
color: #000000 !important;
}
:deep(.wd
-icon
-arrow
-left) {
color: #000000 !important;
}
.chat
-container {
display: flex;
flex
-direction: column;
height: 100vh;
background
-color: #f4f4f5;
position: relative;
}
.chat
-messages {
flex: 0.9;
box-sizing: border
-box;
padding: 20rpx 0 20rpx 20rpx;
overflow
-y: auto;
-webkit
-overflow
-scrolling: touch;
}
.
message-list {
padding
-bottom: 20rpx;
}
.
message-item {
display: flex;
flex
-direction: column;
margin
-bottom: 48rpx;
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s, transform 0.3s;
// padding: 0 20rpx;
&.typing {
.
message-content {
min
-width: 120rpx;
}
}
&.
user {
flex
-direction: row
-reverse;
.
message-content {
background
-color: #272727;
border
-radius: 24rpx 24rpx 24rpx 24rpx;
padding: 20rpx;
color: #fff;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
max
-width: 80%;
:deep(pre),
:deep(code) {
background
-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
}
}
&.assistant .
message-content {
max
-width: 100%;
// background
-color: #fff;
padding: 0 !important;
// border
-radius: 4rpx 20rpx 20rpx 20rpx;
}
}
.
message-avatar {
width: 140rpx;
flex
-shrink: 0;
margin: 0;
display: flex;
align
-items: center;
image {
width: 100%;
height: 100%;
border
-radius: 50%;
}
text {
margin
-left: 8rpx;
color: 737373;
font
-weight: 400;
font
-size: 28rpx;
}
}
.
message-content {
// max
-width: 80%;
margin: 0 20rpx;
font
-size: 28rpx;
word
-break: break
-word;
overflow
-wrap: break
-word;
:deep(pre) {
background
-color: #f6f8fa;
padding: 16rpx;
border
-radius: 6rpx;
overflow
-x: auto;
margin: 16rpx 0;
white
-space: pre
-wrap;
word
-wrap: break
-word;
}
:deep(code) {
font
-family: Consolas, Monaco, 'Andale Mono', monospace;
font
-size: 24rpx;
padding: 4rpx 8rpx;
background
-color: #f6f8fa;
border
-radius: 4rpx;
white
-space: pre
-wrap;
word
-wrap: break
-word;
}
:deep(p) {
margin: 16rpx 0;
}
:deep(ul),
:deep(ol) {
padding
-left: 32rpx;
margin: 16rpx 0;
}
:deep(table) {
border
-collapse: collapse;
margin: 16rpx 0;
width: 100%;
}
:deep(th),
:deep(td) {
border: 2rpx solid #dfe2e5;
padding: 12rpx 16rpx;
}
:deep(th) {
background
-color: #f6f8fa;
}
:deep(a) {
color: #0366d6;
text
-decoration: none;
&:hover {
text
-decoration: underline;
}
}
:deep(img) {
max
-width: 100%;
height: auto;
}
:deep(blockquote) {
margin: 16rpx 0;
padding: 0 16rpx;
color: #6a737d;
border
-left: 4rpx solid #dfe2e5;
}
}
.chat
-input {
padding: 24rpx 40rpx;
position: fixed;
left: 20rpx;
right: 20rpx;
bottom: 15rpx;
display: flex;
align
-items: center;
gap: 20rpx;
z
-index: 100;
transition: bottom 0.3s ease; // 添加过渡动画
border
-radius: 16rpx;
border: 2rpx solid var(
--Extra
-Shallow
-Theme, #f4f3fc);
background: var(
--White, #fff);
box-shadow: 0px 8rpx 20rpx 0px rgba(62, 46, 136, 0.17);
margin
-bottom: 45rpx;
.
message-textarea {
flex: 1;
}
}
.typing
-indicator {
display: flex;
align
-items: center;
gap: 8rpx;
padding: 8rpx 0;
.dot {
width: 8rpx;
height: 8rpx;
background
-color: #999;
border
-radius: 50%;
animation: typing 1.4s infinite;
&:nth
-child(2) {
animation
-delay: 0.2s;
}
&:nth
-child(3) {
animation
-delay: 0.4s;
}
}
}
@keyframes typing {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.3;
}
30% {
transform: translateY(
-4rpx);
opacity: 1;
}
}
</style>
markdown 输出的消息不能复制咋办
本文深入探讨了消息框的多种类型及其使用场景，包括AbortRetryIgnore、OK、OKCancel、RetryCancel、YesNo、YesNocancel等，并详细解释了它们各自的按钮布局和响应方式。同时，文章还介绍了消息框的模态性（如应用模态、系统模态、任务模态）、图标样式（如警告、信息、疑问、停止）以及默认按钮设置。通过阅读本文，开发者将能够更熟练地运用消息框进行用户交互。
扫一扫
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
