<template>
<div class="main">
<base
-drawer
v
-model="drawerVisible"
title=""
direction="rtl"
size="20%"
:before
-close="onDrawerClose">
<!
-- 抽屉内容
-->
<div v
-if="currentRow">
<div class="trend
-content">
<div class="chart
-placeholder">
<!
-- 加载中提示
-->
<div v
-if="isLoading" class="loading">
<p>正在加载中
...</p>
</div>
<!
-- 后端返回内容渲染（支持Markdown格式）
-->
<div v
-else class="strategy
-content" v
-html="talkStrategy"></div>
</div>
</div>
</div>
<!
-- 无数据提示
-->
<div v
-else
-if="!isLoading" class="empty提示">
<p>未获取到数据，请重试</p>
</div>
<!
-- 底部插槽（Vue3标准语法）
-->
<template #footer></template>
</base
-drawer>
</div>
</template>
<script lang='ts'>
import {
reactive, toRefs, onMounted, nextTick } from 'vue'
// import { useRoute } from 'vue
-router'
import { marked } from 'marked'
// 导入WebSocket工具函数
import { getWsUrl } from '
./utils/webscoket';
// 导入抽屉组件
import BaseDrawer from "
./components/BaseDrawer
.vue";
// 定义类型接口，规范数据结构
// interface CurrentRow {
// id
: string | number;
// intervieweeName?
: string;
// thyy?
: string;
// startTime?
: string;
// [key
: string]
: any;
// }
interface WsResponse {
answer?
: string;
is_stop?
: boolean;
[key
: string]
: any;
}
export default {
name
: 'TrendDrawerPage',
components
: {
BaseDrawer,
},
setup() {
// const route = useRoute();
const data =
reactive({
// 抽屉相关状态
drawerVisible
: true,
currentRow
: null as CurrentRow | null,
socket
: null as WebSocket | null,
wsMessage
: null as string | null,
isLoading
: false,
talkStrategy
: "",
});
// Markdown格式化函数
const formatMarkdown = (content
: string)
: string => {
if (!content) return "<p>暂无分析结果</p>";
// 使用marked库解析Markdown（更规范的处理方式）
// 自定义marked渲染器来优化样式
const renderer = new marked
.Renderer();
// 自定义标题渲染
- 修复方法签名
renderer
.heading = ({ text, depth }
: { text
: string; depth
: number }) => {
const headingClass = `md
-heading md
-heading
-${depth}`;
return `<h${depth} class="${headingClass}">${text}</h${depth}>`;
};
// 自定义段落渲染
renderer
.paragraph = (text) => {
return `<p class="md
-paragraph">${text}</p>`;
};
// 自定义列表渲染
renderer
.list = (body, ordered, start) => {
const tag = ordered ? "ol"
: "ul";
return `<${tag} class="md
-list"${
start ? ` start="${start}"`
: ""
}>${body}</${tag}>`;
};
renderer
.listitem = (text) => {
return `<li class="md
-list
-item">${text}</li>`;
};
// 自定义分隔线
renderer
.hr = () => '<hr class="md
-divider">';
//
配置marked选项
marked
.setOptions({
renderer
: renderer,
breaks
: true,
gfm
: true,
});
// 解析Markdown
return marked(content);
};
// 发送分析请求
const sendAnalysisRequest = () => {
if (!data
.socket || data
.socket
.readyState !== WebSocket
.OPEN) {
console
.error("WebSocket 未连接");
return;
}
const requestData = {
task_type
: data
.currentRow?
.type,
person_name
: data
.currentRow?
.intervieweeName,
talk_reason
: data
.currentRow?
.thyy,
timestamp
: data
.currentRow?
.startTime,
context
: "",
question
: "",
};
try {
const
jsonStr =
JSON
.stringify(requestData);
data
.socket
.send(
jsonStr);
} catch (error) {
console
.error("
JSON序列化失败
:", error);
data
.talkStrategy = `<p>数据发送失败：${(error as Error)
.message}</p>`;
data
.isLoading = false;
}
};
// 抽屉关闭回调
const onDrawerClose = (done
: () => void) => {
// 关闭WebSocket连接
if (data
.socket) {
data
.socket
.close(
1000, "用户关闭抽屉");
data
.socket = null;
}
done(); // 确认关闭抽屉
};
// 初始化趋势分析
const trend = async () => {
data
.currentRow = {
id
: -1,
type
: '历史趋势',
intervieweeName
: '测试51号',
thyy
: '耳目谈话',
startTime
: '1751253194000',
};
data
.drawerVisible = true;
data
.isLoading = true;
data
.talkStrategy = "";
// 关闭现有连接
if (data
.socket) {
data
.socket
.close();
data
.socket = null;
}
// 等待DOM更新
await nextTick();
if (!data
.currentRow?
.id) {
console
.error("缺少任务ID");
data
.isLoading = false;
data
.talkStrategy = "<p>数据错误：缺少任务ID</p>";
return;
}
// 构建WebSocket URL（结合环境变量）
let wsUrl = '';
if (import
.meta
.env
.VITE_APP_ENV === 'development') {
// 开发环境使用代理路径
wsUrl = `/tendency/ws/ws/talkAnalysis/${data
.currentRow
.id}`;
// wsUrl = `ws
://192
.168
.3
.148
:8000/ws/talkAnalysis/${data
.currentRow
.id}`;
} else {
wsUrl = getWsUrl(`/ws/talkAnalysis/${data
.currentRow
.id}`);
}
console
.log('WebSocket URL
:', wsUrl);
try {
data
.socket = new WebSocket(wsUrl);
let accumulatedAnswer = "";
data
.socket
.onopen = () => {
console
.log("WebSocket连接成功");
sendAnalysisRequest();
};
data
.socket
.onmessage = (event) => {
data
.isLoading = false;
try {
const res
: WsResponse = typeof event
.data === "string"
?
JSON
.parse(event
.data)
: event
.data;
if (res
.answer) {
accumulatedAnswer += res
.answer;
data
.talkStrategy = formatMarkdown(accumulatedAnswer);
}
if (res
.is_stop) {
data
.socket?
.close();
data
.socket = null;
console
.log("流式输出结束");
}
} catch (error) {
console
.error("消息解析错误
:", error);
data
.talkStrategy = `<p>数据解析失败：${(error as Error)
.message}</p>`;
}
};
data
.socket
.onerror = (error) => {
console
.error("WebSocket错误
:", error);
data
.talkStrategy = "<p>连接失败，请重试</p>";
data
.isLoading = false;
};
data
.socket
.onclose = (event) => {
if (data
.isLoading) data
.isLoading = false;
console
.log(`WebSocket关闭：${event
.code}
- ${event
.reason}`);
};
} catch (error) {
console
.error("创建WebSocket失败
:", error);
data
.isLoading = false;
data
.talkStrategy = `<p>连接创建失败：${(error as Error)
.message}</p>`;
}
};
// 组件挂载时初始化
onMounted(() => {
// trend();
});
return {
...toRefs(data),
onDrawerClose,
};
},
};
</script>
<style scoped>
.trend
-content {
height
: calc(
100%
- 40px);
min
-height
: 300px;
overflow
: auto;
padding
: 10px 0;
}
.chart
-placeholder {
padding
: 16px;
min
-height
: 200px;
}
.loading {
display
: flex;
align
-items
: center;
justify
-content
: center;
height
: 200px;
color
: #666;
}
.strategy
-content {
line
-height
: 1
.8;
color
: #333;
}
.empty提示 {
text
-align
: center;
padding
: 50px 0;
color
: #999;
}
/* Markdown渲染样式 */
.md
-heading {
margin
: 1
.2em 0 0
.5em;
font
-weight
: 600;
}
.md
-heading
-1 {
font
-size
: 1
.5em;
border
-bottom
: 1px solid #eee;
padding
-bottom
: 0
.3em;
}
.md
-heading
-2 {
font
-size
: 1
.3em;
}
.md
-heading
-3 {
font
-size
: 1
.1em;
}
.md
-paragraph {
margin
: 0
.8em 0;
}
.md
-list {
margin
: 0
.8em 0;
padding
-left
: 1
.5em;
}
.md
-list
-item {
margin
: 0
.3em 0;
}
.md
-divider {
margin
: 1em 0;
border
: 0;
border
-top
: 1px solid #eee;
}
</style> 不使用组件弹框了base
-drawer 正常div绘制 marked第三方插件没有生效 基于提供代码修复下呢 亲
Vite高级配置与技巧全解析
超级会员免费看
订阅专栏 解锁全文
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
