#1
dubin
2026-01-10 bfbb0cbe87bbacbaf3fdfb5fb3caa935ec91da1f
src/main/webapp/views/ai/diagnosis.html
@@ -27,6 +27,27 @@
    .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; }
    .assistant-running { display: flex; align-items: center; gap: 8px; color: #909399; }
    details.think-block {
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 8px;
      margin: 8px 0;
      background-color: #fcfcfc;
    }
    details.think-block summary {
      cursor: pointer;
      color: #909399;
      font-size: 13px;
      font-weight: bold;
      outline: none;
    }
    details.think-block .content {
      margin-top: 8px;
      color: #606266;
      font-size: 13px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
@@ -40,7 +61,7 @@
      <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>
        <!-- <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" />
@@ -56,7 +77,11 @@
          <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-if="m.role === 'assistant' && m.html" class="markdown-body" v-html="m.html"></div>
              <div v-else-if="m.role === 'assistant' && streaming && i === messages.length - 1" class="assistant-running">
                <span v-html="assistantIcon"></span>
                <span>AI助手正在运行中</span>
              </div>
              <div v-else v-text="m.text"></div>
              <div class="time">{{ m.ts }}</div>
            </div>
@@ -74,8 +99,8 @@
  <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 src="../../static/js/marked.min.js"></script>
  <script src="../../static/js/purify.min.js"></script>
  <script>
    marked.setOptions({
      gfm: true,
@@ -125,6 +150,17 @@
        }
      },
      methods: {
        renderMarkdown: function(md, streaming) {
          if (!md) return '';
          var src = md.replace(/\\n/g, '\n');
          var openAttr = streaming ? ' open' : '';
          src = src.replace(/<think>/g, '<details class="think-block"' + openAttr + '><summary>AI深度思考</summary><div class="content">');
          src = src.replace(/<\/think>/g, '</div></details>');
          if (streaming && src.indexOf('<details class="think-block"') >= 0 && src.indexOf('</div></details>') < 0) {
             src += '</div></details>';
          }
          return DOMPurify.sanitize(marked.parse(src));
        },
        loadChats: function() {
          var self = this;
          fetch(baseUrl + '/ai/diagnose/chats', { headers: { 'token': localStorage.getItem('token') } })
@@ -141,7 +177,7 @@
              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() });
                if (m.role === 'assistant') msgs.push({ role: 'assistant', md: m.content || '', html: self.renderMarkdown(m.content || '', false), ts: self.nowStr() });
                else msgs.push({ role: 'user', text: m.content || '', ts: self.nowStr() });
              }
              self.messages = msgs;
@@ -269,8 +305,7 @@
              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));
                last.html = self.renderMarkdown(last.md || '', true);
                self.$nextTick(function() { self.scrollToBottom(true); });
              }
            }
@@ -281,16 +316,19 @@
            this.source.close();
            this.source = null;
          }
          var last = this.messages.length > 0 ? this.messages[this.messages.length - 1] : null;
          if (last && last.role === 'assistant' && this.pendingText && this.pendingText.length > 0) {
            last.md = (last.md || '') + this.pendingText;
            this.pendingText = '';
          }
          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));
            last.html = this.renderMarkdown(last.md || '', false);
          }
          this.$nextTick(function() { this.scrollToBottom(true); }.bind(this));
          this.loadChats();