<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 defa
ult {
name: 'TrendDrawerPage',
components: {
BaseDrawer,
},
setup() {
// const route = useRoute();
const data = reactive({
// 抽屉相关状态
drawerVisible: true,
currentRow: n
ull as CurrentRow | n
ull,
socket: n
ull as WebSocket | n
ull,
wsMessage: n
ull as string | n
ull,
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 heading
Class = `md
-heading md
-heading
-${depth}`;
return `<h${depth}
class="${heading
Class}">${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 = n
ull;
}
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 = n
ull;
}
// 等待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 accum
ulatedAnswer = "";
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) {
accum
ulatedAnswer += res.answer;
data.talkStrategy = formatMarkdown(accum
ulatedAnswer);
}
if (res.is_stop) {
data.socket?.close();
data.socket = n
ull;
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第三方插件没有生效 基于提供代码修复下呢 亲
本文探讨了在IE6浏览器中<UL>列表包含<input>控件时出现的行高属性失效问题，并提供了解决方案。通过定义input标签的宽度、高度和边距，实现了与其他列表项相同的视觉效果。
扫一扫
3511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
