自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
Junjie
13 小时以前 c8de85433e5800a7b5595a96d99f4b49f24c38b4 
 src/main/webapp/views/ai/diagnosis.html


@@ -9,7 +9,7 @@


    body { background: #f5f7fa; }


    .container { max-width: 1100px; margin: 24px auto; }


    .actions { display: flex; gap: 12px; align-items: center; }


    .output { height: 65vh; }


    .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; }


@@ -27,6 +27,7 @@


    .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; }


  </style>


</head>


<body>


@@ -37,11 +38,16 @@


        <span>WCS AI 助手</span>


      </div>




      <div class="actions">


      <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">{{ statusText }}</span>


        <!-- <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>


@@ -51,7 +57,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>


@@ -69,8 +79,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,


@@ -102,7 +112,10 @@


          renderIntervalMs: 120,


          stepChars: 6,


          userInput: '',


          autoScrollThreshold: 80


          autoScrollThreshold: 80,


          chats: [],


          currentChatId: '',


          resetting: false


        };


      },


      computed: {


@@ -117,6 +130,42 @@


        }


      },


      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;


@@ -150,6 +199,8 @@


          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() {


@@ -169,6 +220,7 @@


            self.stop();


          };


          this.userInput = '';


          this.resetting = false;


        },


        start: function() {


          if (this.streaming) return;


@@ -234,24 +286,33 @@


            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');


            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>