<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>WCS AI 助手</title>
|
<link rel="stylesheet" href="../../static/vue/element/element.css" />
|
<style>
|
body { background: #f5f7fa; }
|
.container { max-width: 1100px; margin: 24px auto; }
|
.actions { display: flex; gap: 12px; align-items: center; }
|
.output { height: 60vh; }
|
.markdown-body { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
|
.markdown-body p { margin: 4px 0; }
|
.markdown-body ul, .markdown-body ol { margin: 4px 0 4px 16px; padding: 0; }
|
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 8px; }
|
.markdown-body pre { background: #f6f8fa; padding: 12px; border-radius: 6px; overflow: auto; }
|
.status { color: #909399; }
|
.chat { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; padding-right: 8px; }
|
.msg { display: flex; align-items: flex-start; }
|
.msg.user { justify-content: flex-end; }
|
.msg.assistant { justify-content: flex-start; }
|
.bubble { max-width: 72%; padding: 10px 12px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
|
.assistant .bubble { background: #ffffff; border: 1px solid #ebeef5; color: #303133; }
|
.user .bubble { background: #409EFF; color: #ffffff; }
|
.composer { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
.avatar { width: 24px; height: 24px; display: flex; align-items: center; margin-right: 8px; }
|
.time { font-size: 12px; color: #909399; text-align: right; margin-top: 6px; }
|
.output .el-card__body { height: 100%; padding: 0; }
|
</style>
|
</head>
|
<body>
|
<div id="app" class="container">
|
<el-card shadow="hover">
|
<div slot="header" class="clearfix" style="display: flex; align-items: center;">
|
<div v-html="headerIcon" style="margin-right: 10px; display: flex;"></div>
|
<span>WCS AI 助手</span>
|
</div>
|
|
<div class="actions" style="flex-wrap: wrap;">
|
<el-button type="primary" :loading="loading" :disabled="streaming" @click="start">一键诊断系统</el-button>
|
<el-button type="warning" :disabled="!streaming" @click="stop">停止</el-button>
|
<el-button @click="clear">清空当前聊天</el-button>
|
<span class="status" style="margin-right: 12px;">{{ statusText }}</span>
|
<el-select v-model="currentChatId" placeholder="选择会话" style="min-width:240px;" @change="switchChat" :disabled="streaming">
|
<el-option v-for="c in chats" :key="c.chatId" :label="(c.title||('会话 '+c.chatId)) + '（'+(c.size||0)+'）'" :value="c.chatId" />
|
</el-select>
|
<el-button type="success" plain icon="el-icon-plus" @click="newChat" :disabled="streaming">新会话</el-button>
|
<el-button type="danger" plain icon="el-icon-delete" @click="deleteChat" :disabled="!currentChatId || streaming">删除会话</el-button>
|
</div>
|
|
<el-divider></el-divider>
|
|
<el-card class="output" shadow="never">
|
<div ref="chat" class="chat">
|
<div v-for="(m,i) in messages" :key="i" class="msg" :class="m.role">
|
<div class="avatar" v-html="m.role === 'assistant' ? assistantIcon : userIcon"></div>
|
<div class="bubble">
|
<div v-if="m.role === 'assistant'" class="markdown-body" v-html="m.html"></div>
|
<div v-else v-text="m.text"></div>
|
<div class="time">{{ m.ts }}</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<div class="composer">
|
<el-input v-model="userInput" placeholder="向 AI 助手提问" clearable :disabled="streaming" @keyup.enter.native="ask"></el-input>
|
<el-button type="success" :disabled="sendDisabled" @click="ask">发送</el-button>
|
</div>
|
</el-card>
|
</div>
|
|
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.3/dist/purify.min.js"></script>
|
<script>
|
marked.setOptions({
|
gfm: true,
|
breaks: true
|
});
|
|
function getUserIconHtml(width, height) {
|
width = width || 24; height = height || 24;
|
return '<svg width="'+width+'" height="'+height+'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n'
|
+ '<circle cx="12" cy="7" r="4" fill="#909399"/>\n'
|
+ '<path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#909399" opacity="0.35"/>\n'
|
+ '</svg>';
|
}
|
|
new Vue({
|
el: '#app',
|
data: function() {
|
return {
|
headerIcon: getAiIconHtml(50, 50),
|
assistantIcon: getAiIconHtml(24, 24),
|
userIcon: getUserIconHtml(24, 24),
|
loading: false,
|
streaming: false,
|
source: null,
|
messages: [],
|
pendingText: '',
|
typingTimer: null,
|
lastRenderTs: 0,
|
renderIntervalMs: 120,
|
stepChars: 6,
|
userInput: '',
|
autoScrollThreshold: 80,
|
chats: [],
|
currentChatId: '',
|
resetting: false
|
};
|
},
|
computed: {
|
statusText: function() {
|
if (this.streaming) return '诊断进行中';
|
if (this.loading) return '连接中';
|
return '空闲';
|
},
|
sendDisabled: function() {
|
var t = (this.userInput || '').trim();
|
return this.streaming || t.length === 0;
|
}
|
},
|
methods: {
|
loadChats: function() {
|
var self = this;
|
fetch(baseUrl + '/ai/diagnose/chats', { headers: { 'token': localStorage.getItem('token') } })
|
.then(function(r){ return r.json(); })
|
.then(function(arr){ if (Array.isArray(arr)) { self.chats = arr; } });
|
},
|
switchChat: function() {
|
var self = this;
|
if (!self.currentChatId) { self.clear(); return; }
|
fetch(baseUrl + '/ai/diagnose/chats/' + encodeURIComponent(self.currentChatId) + '/history', { headers: { 'token': localStorage.getItem('token') } })
|
.then(function(r){ return r.json(); })
|
.then(function(arr){
|
if (!Array.isArray(arr)) return;
|
var msgs = [];
|
for (var i=0;i<arr.length;i++) {
|
var m = arr[i];
|
if (m.role === 'assistant') msgs.push({ role: 'assistant', md: m.content || '', html: DOMPurify.sanitize(marked.parse((m.content||'').replace(/\\n/g,'\n'))), ts: self.nowStr() });
|
else msgs.push({ role: 'user', text: m.content || '', ts: self.nowStr() });
|
}
|
self.messages = msgs;
|
self.$nextTick(function(){ self.scrollToBottom(true); });
|
});
|
},
|
newChat: function() {
|
var id = Date.now() + '_' + Math.random().toString(36).substr(2,8);
|
this.currentChatId = id;
|
this.resetting = true;
|
this.clear();
|
},
|
deleteChat: function() {
|
var self = this;
|
if (!self.currentChatId) return;
|
fetch(baseUrl + '/ai/diagnose/chats/' + encodeURIComponent(self.currentChatId), { method: 'DELETE', headers: { 'token': localStorage.getItem('token') } })
|
.then(function(r){ return r.json(); })
|
.then(function(ok){ if (ok === true) { self.currentChatId = ''; self.clear(); self.loadChats(); self.newChat(); } });
|
},
|
shouldAutoScroll: function() {
|
var el = this.$refs.chat;
|
if (!el) return false;
|
return (el.scrollHeight - el.scrollTop - el.clientHeight) <= this.autoScrollThreshold;
|
},
|
scrollToBottom: function(force) {
|
var el = this.$refs.chat;
|
if (!el) return;
|
if (force || this.streaming || this.shouldAutoScroll()) {
|
el.scrollTop = el.scrollHeight;
|
}
|
},
|
nowStr: function() {
|
var d = new Date();
|
function pad(n) { return (n<10?'0':'') + n; }
|
var y = d.getFullYear();
|
var m = pad(d.getMonth() + 1);
|
var day = pad(d.getDate());
|
var hh = pad(d.getHours());
|
var mm = pad(d.getMinutes());
|
var ss = pad(d.getSeconds());
|
return y + '-' + m + '-' + day + ' ' + hh + ':' + mm + ':' + ss;
|
},
|
ask: function() {
|
if (this.streaming) return;
|
var msg = (this.userInput || '').trim();
|
if (!msg) return;
|
this.loading = true;
|
this.streaming = true;
|
this.messages.push({ role: 'user', text: msg, ts: this.nowStr() });
|
this.messages.push({ role: 'assistant', md: '', html: '', ts: this.nowStr() });
|
this.scrollToBottom(true);
|
var url = baseUrl + '/ai/diagnose/askStream?prompt=' + encodeURIComponent(msg);
|
if (this.currentChatId) url += '&chatId=' + encodeURIComponent(this.currentChatId);
|
if (this.resetting) url += '&reset=true';
|
this.source = new EventSource(url);
|
var self = this;
|
this.source.onopen = function() {
|
self.loading = false;
|
};
|
this.source.onmessage = function(e) {
|
if (!e || !e.data) return;
|
var chunk = (e.data || '').replace(/\\n/g, '\n');
|
if (!chunk) return;
|
var normalized = chunk.replace(/\r/g, '');
|
if (/^\n+$/.test(normalized)) return;
|
self.pendingText += chunk;
|
self.ensureTyping();
|
self.scrollToBottom(true);
|
};
|
this.source.onerror = function() {
|
self.stop();
|
};
|
this.userInput = '';
|
this.resetting = false;
|
},
|
start: function() {
|
if (this.streaming) return;
|
this.clear();
|
this.loading = true;
|
this.streaming = true;
|
var url = baseUrl + '/ai/diagnose/runAiStream';
|
this.source = new EventSource(url);
|
this.messages.push({ role: 'assistant', md: '', html: '', ts: this.nowStr() });
|
this.scrollToBottom(true);
|
var self = this;
|
this.source.onopen = function() {
|
self.loading = false;
|
};
|
this.source.onmessage = function(e) {
|
if (!e || !e.data) return;
|
// 后端把换行转义成 \n，这里还原为真正的换行
|
var chunk = (e.data || '').replace(/\\n/g, '\n');
|
if (!chunk) return;
|
// 如果仅包含换行符（如单独 \n 或 \n\n），丢弃避免空白行
|
var normalized = chunk.replace(/\r/g, '');
|
if (/^\n+$/.test(normalized)) return;
|
self.pendingText += chunk;
|
self.ensureTyping();
|
self.scrollToBottom(true);
|
};
|
this.source.onerror = function() {
|
self.stop();
|
};
|
},
|
ensureTyping: function() {
|
if (this.typingTimer) return;
|
var self = this;
|
this.typingTimer = setInterval(function() {
|
if (!self.streaming && self.pendingText.length === 0) {
|
clearInterval(self.typingTimer);
|
self.typingTimer = null;
|
return;
|
}
|
if (self.pendingText.length > 0) {
|
var n = Math.min(self.stepChars, self.pendingText.length);
|
var part = self.pendingText.slice(0, n);
|
self.pendingText = self.pendingText.slice(n);
|
var last = self.messages.length > 0 ? self.messages[self.messages.length - 1] : null;
|
if (last && last.role === 'assistant') {
|
last.md = (last.md || '') + part;
|
}
|
}
|
var now = Date.now();
|
if (now - self.lastRenderTs > self.renderIntervalMs) {
|
self.lastRenderTs = now;
|
var last = self.messages.length > 0 ? self.messages[self.messages.length - 1] : null;
|
if (last && last.role === 'assistant') {
|
var renderSource = (last.md || '').replace(/\\n/g, '\n');
|
last.html = DOMPurify.sanitize(marked.parse(renderSource));
|
self.$nextTick(function() { self.scrollToBottom(true); });
|
}
|
}
|
}, 50);
|
},
|
stop: function() {
|
if (this.source) {
|
this.source.close();
|
this.source = null;
|
}
|
this.streaming = false;
|
this.loading = false;
|
if (this.typingTimer) {
|
clearInterval(this.typingTimer);
|
this.typingTimer = null;
|
}
|
var last = this.messages.length > 0 ? this.messages[this.messages.length - 1] : null;
|
if (last && last.role === 'assistant') {
|
var renderSource = (last.md || '').replace(/\\n/g, '\n');
|
last.html = DOMPurify.sanitize(marked.parse(renderSource));
|
}
|
this.$nextTick(function() { this.scrollToBottom(true); }.bind(this));
|
this.loadChats();
|
},
|
clear: function() {
|
this.messages = [];
|
this.pendingText = '';
|
}
|
}
|
,mounted: function() {
|
this.loadChats();
|
this.newChat();
|
}
|
});
|
</script>
|
</body>
|
</html>
|
