vue2-client 1.14.55 → 1.14.56

package/src/base-client/components/common/XCheckList/XCheckListDemo.vue

@@ -1,41 +1,41 @@
-<template>
-  <div>
-    <x-check-list ref="xCheckList"></x-check-list>
-  </div>
-</template>
-
-<script>
-  import XCheckList from './XCheckList.vue'
-
-  export default {
-    name: 'XCheckListDemo',
-    components: {
-        XCheckList
-    },
-    data () {
-      return {}
-    },
-    mounted () {
-        // 模拟接口返回的配置数据
-        const mockResponse = {
-            leftItems: [
-            { value: 'left1', label: '左项1' },
-            { value: 'left2', label: '左项2' },
-            { value: 'left3', label: '左项3' }
-            ],
-            rightItems: [
-            { value: 'right1', label: '右项1' },
-            { value: 'right2', label: '右项2' },
-            { value: 'right3', label: '右项3' }
-            ]
-        }
-
-        // 模拟接口回调
-        this.$refs.xCheckList.init({
-            leftItems: mockResponse.leftItems,
-            rightItems: mockResponse.rightItems
-        })
-    },
-    methods: {}
-  }
-</script>
+<template>
+  <div>
+    <x-check-list ref="xCheckList"></x-check-list>
+  </div>
+</template>
+
+<script>
+  import XCheckList from './XCheckList.vue'
+
+  export default {
+    name: 'XCheckListDemo',
+    components: {
+        XCheckList
+    },
+    data () {
+      return {}
+    },
+    mounted () {
+        // 模拟接口返回的配置数据
+        const mockResponse = {
+            leftItems: [
+            { value: 'left1', label: '左项1' },
+            { value: 'left2', label: '左项2' },
+            { value: 'left3', label: '左项3' }
+            ],
+            rightItems: [
+            { value: 'right1', label: '右项1' },
+            { value: 'right2', label: '右项2' },
+            { value: 'right3', label: '右项3' }
+            ]
+        }
+
+        // 模拟接口回调
+        this.$refs.xCheckList.init({
+            leftItems: mockResponse.leftItems,
+            rightItems: mockResponse.rightItems
+        })
+    },
+    methods: {}
+  }
+</script>

package/src/base-client/components/common/XConversation/XConversation.vue

@@ -2,35 +2,57 @@
   <div>
     <div class="chat-container" v-if="loading">
       <!-- 对话展示区域 -->
-      <div class="chat-content">
+      <div class="chat-content" ref="chatContent">
         <div
           v-for="(message, index) in messages"
           :key="index"
           :class="['chat-message', message.type]"
         >
           <span class="chat-avatar">{{ message.type === 'user' ? '👤' : '🤖' }}</span>
-          <div
-            class="chat-text markdown-body"
-            v-if="message.text"
-            v-html="renderMarkdown(message.text)"
-          ></div>
-          <div class="chat-text" v-else-if="message.state === 'loading'">
-            <a-spin :spinning="true"/>
+          <div class="chat-text-wrapper">
+            <div
+              class="chat-text markdown-body"
+              v-if="message.text"
+              v-html="renderMarkdown(message.text)"
+            ></div>
+            <div class="chat-text" v-else-if="message.state === 'loading'">
+              <a-spin :spinning="true"/>
+            </div>
+            <a-button
+              v-if="message.sourceInfo"
+              type="link"
+              class="source-info-btn"
+              @click="showSourceInfo(message.sourceInfo)"
+            >
+              查看源信息
+            </a-button>
           </div>
         </div>
       </div>
 
       <!-- 输入框和发送按钮 -->
-      <div class="chat-input">
-        <a-input
-          v-model="inputMessage"
-          placeholder="Type your message..."
-          @pressEnter="sendMessage"
-        />
-        <a-button type="primary" @click="sendMessage">发送</a-button>
+      <div class="chat-input-wrapper">
+        <div class="chat-input">
+          <a-input
+            v-model="inputMessage"
+            placeholder="Type your message..."
+            @pressEnter="sendMessage"
+          />
+          <a-button type="primary" @click="sendMessage">发送</a-button>
+        </div>
       </div>
     </div>
     <a-spin :spinning="!loading"/>
+
+    <!-- 源信息弹窗 -->
+    <a-modal
+      v-model="sourceInfoVisible"
+      title="源信息"
+      :footer="null"
+      width="600px"
+    >
+      <div class="source-info-content markdown-body" v-html="renderMarkdown(currentSourceInfo)"></div>
+    </a-modal>
   </div>
 </template>
 
@@ -118,25 +140,32 @@ export default {
       messages: [ // 消息列表
         { type: 'bot', text: '你好! 今天有什么能帮到您的?' },
       ],
+      sourceInfoVisible: false,
+      currentSourceInfo: '',
     }
   },
   methods: {
     renderMarkdown (text) {
-      const markdownPatterns = [
-        /(^|\s)(#{1,6})\s/, // 标题 (# 到 ######)
-        /(\*\*|__)(.*?)\1/, // 加粗 (** 或 __)
-        /(\*|_)(.*?)\1/, // 斜体 (* 或 _)
-        /\[([^\]]+)\]\([^\)]+\)/, // 链接 [text](url)
-        /`{1,3}[^`]+`{1,3}/, // 行内代码 (`text`)
-        /\n{2,}([^\n]+)\n{2,}/, // 段落之间的换行
-        /\n{3,}([^\n]+)\n{3,}/, // 多行代码块
-        /[-\*\+]\s+/, // 无序列表 (- 或 * 或 +)
-        /\d+\.\s+/, // 有序列表 (1. 或 2. 或 3.)
-      ]
-      if (markdownPatterns.some(pattern => pattern.test(text))) {
-        return marked(text)
-      } else {
-        return text
+      if (!text) return ''
+
+      // 预处理文本，处理特殊字符
+      const processedText = text
+
+      try {
+        // 配置 marked 选项
+        marked.setOptions({
+          breaks: true, // 支持换行符
+          gfm: true, // 启用 GitHub 风格的 Markdown
+          headerIds: false, // 禁用标题 ID
+          mangle: false, // 禁用标题 ID 混淆
+          sanitize: false // 允许 HTML 标签
+        })
+        const rendered = marked(processedText)
+        this.scrollToBottom()
+        return rendered
+      } catch (error) {
+        console.error('Markdown 渲染错误:', error)
+        return processedText
       }
     },
     setAddtionalInfo (params) {
@@ -147,6 +176,14 @@ export default {
       this.loading = true
       this.serviceName = params.serviceName || process.env.VUE_APP_SERVICE_NAME
     },
+    scrollToBottom () {
+      this.$nextTick(() => {
+        const chatContent = this.$refs.chatContent
+        if (chatContent) {
+          chatContent.scrollTop = chatContent.scrollHeight
+        }
+      })
+    },
     async sendMessage () {
       if (this.renderConfig.type === 'AI') {
         // 验证 chatId 和 aiModel
@@ -159,11 +196,12 @@ export default {
 
       // 添加用户消息
       this.messages.push({ type: 'user', text: this.inputMessage })
+      this.scrollToBottom()
 
       // 清空输入框
       const userMessage = this.inputMessage
       this.inputMessage = ''
-      // 模拟机器人的回复
+
       // 通过logic获取消息
       if (this.renderConfig.logicName) {
         const response = await runLogic(this.renderConfig.logicName, {
@@ -197,13 +235,18 @@ export default {
             console.error('JSON解析失败:', e)
           }
         }
-        console.log(response.value.response)
-        this.messages.push({ type: 'bot', text: response.value.response })
+        console.log(response.value)
+        this.messages.push({
+          type: 'bot',
+          text: response.value,
+          sourceInfo: response.sourceInfo || ''
+        })
       } else if (this.renderConfig.api) {
         // 通过api获取消息
-        this.messages.push({ type: 'bot', state: 'loading' })
+        this.messages.push({ type: 'bot', state: 'loading', sourceInfo: '' })
         this.messages[this.messages.length - 1].text = await postByServiceName(this.renderConfig.api, {
           userMessage,
+          additionalInfo: this.additionalInfo,
           model: this.renderConfig.aiModel,
           chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
           prompt: this.prompt
@@ -211,17 +254,61 @@ export default {
         this.$forceUpdate()
       } else if (this.renderConfig.streamApi) {
         // 通过流式api 获取消息
-        this.messages.push({ type: 'bot', state: 'loading' })
+        this.messages.push({ type: 'bot', state: 'loading', sourceInfo: '' })
+
+        // 如果存在之前的连接，先关闭它
+        if (this.stopConnection) {
+          this.stopConnection()
+        }
+
+        let currentMessage = ''
         this.stopConnection = startEventStreamPOST(
           this.renderConfig.streamApi,
           {
             userMessage,
             model: this.renderConfig.aiModel,
             chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
-            prompt: this.prompt
-          }, {},
-          (data) => {
-            this.messages[this.messages.length - 1].text = `${this.messages[this.messages.length - 1]?.text || ''}${data}`
+            prompt: this.prompt,
+            additionalInfo: this.additionalInfo
+          },
+          {},
+          (data, type) => {
+            // 处理 additionalInfo 事件
+            if (type === 'additionalInfo') {
+              console.log('收到 additionalInfo:', data)
+              if (data) {
+                // 更新 additionalInfo
+                this.additionalInfo = {
+                  ...this.additionalInfo,
+                  ...data
+                }
+                // 触发全局数据更新
+                this.setGlobalData?.(this.additionalInfo)
+              }
+              return
+            }
+
+            if (type === 'sourceInfo') {
+              console.log('收到 sourceInfo:', data)
+              if (data) {
+                // 更新 sourceInfo
+                this.messages[this.messages.length - 1].sourceInfo = data.replace(/<br\s*\/?>/gi, '\n')
+              }
+              return
+            }
+            // 处理普通消息
+            if (this.messages[this.messages.length - 1].state === 'loading') {
+              this.messages[this.messages.length - 1].state = undefined
+            }
+            currentMessage += data
+            this.messages[this.messages.length - 1].text = currentMessage.replace(/<br\s*\/?>/gi, '\n')
+            this.renderMarkdown(this.messages[this.messages.length - 1].text)
+            this.$forceUpdate()
+          },
+          (error) => {
+            console.error('流式请求错误:', error)
+            this.messages[this.messages.length - 1].state = undefined
+            this.messages[this.messages.length - 1].text = '抱歉，消息发送失败，请重试。'
             this.$forceUpdate()
           }
         )
@@ -238,7 +325,14 @@ export default {
           text: msg.content
         })
       })
-    }
+      this.scrollToBottom()
+    },
+    showSourceInfo (sourceInfo) {
+      this.currentSourceInfo = typeof sourceInfo === 'string'
+        ? sourceInfo
+        : JSON.stringify(sourceInfo, null, 2)
+      this.sourceInfoVisible = true
+    },
   },
   mounted () {
     this.setAddtionalInfo(this.getMixinData())
@@ -247,6 +341,20 @@ export default {
     if (this.stopConnection) {
       this.stopConnection()
     }
+  },
+  watch: {
+    messages: {
+      handler () {
+        this.scrollToBottom()
+      },
+      deep: true
+    },
+    'messages.$[].text': {
+      handler () {
+        this.scrollToBottom()
+      },
+      deep: true
+    }
   }
 }
 </script>
@@ -255,10 +363,11 @@ export default {
 .chat-container {
   display: flex;
   flex-direction: column;
-  height: 500px;
+  height: 600px; /* 设置最小高度 */
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   overflow: hidden;
+  position: relative;
 }
 
 .chat-content {
@@ -266,6 +375,7 @@ export default {
   padding: 16px;
   overflow-y: auto;
   background: #f5f5f5;
+  padding-bottom: 60px; /* 为底部输入框留出空间 */
 }
 
 .chat-message {
@@ -286,8 +396,13 @@ export default {
   margin: 0 8px;
 }
 
-.chat-text {
+.chat-text-wrapper {
+  display: flex;
+  flex-direction: column;
   max-width: 70%;
+}
+
+.chat-text {
   padding: 8px 12px;
   border-radius: 4px;
   background-color: #fff;
@@ -298,11 +413,18 @@ export default {
   background-color: #e6f7ff;
 }
 
-.chat-input {
-  display: flex;
-  padding: 8px;
+.chat-input-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   background: #fff;
   border-top: 1px solid #d9d9d9;
+  padding: 8px;
+}
+
+.chat-input {
+  display: flex;
   gap: 10px;
 }
 
@@ -357,4 +479,98 @@ code {
   padding-left: 2em;
   margin-bottom: 16px;
 }
+
+/* 按钮样式 */
+.markdown-body :deep(button) {
+  display: inline-block;
+  padding: 4px 15px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5715;
+  text-align: center;
+  white-space: nowrap;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  touch-action: manipulation;
+  margin: 4px 8px 4px 0;
+}
+
+.markdown-body :deep(button:hover) {
+  color: #40a9ff;
+  border-color: #40a9ff;
+  background: #fff;
+}
+
+.markdown-body :deep(button:active) {
+  color: #096dd9;
+  border-color: #096dd9;
+  background: #fff;
+}
+
+/* Markdown 按钮样式 */
+.markdown-button {
+  display: inline-block;
+  padding: 4px 15px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5715;
+  text-align: center;
+  white-space: nowrap;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  touch-action: manipulation;
+  margin: 4px 8px 4px 0;
+}
+
+.markdown-button:hover {
+  color: #40a9ff;
+  border-color: #40a9ff;
+  background: #fff;
+}
+
+.markdown-button:active {
+  color: #096dd9;
+  border-color: #096dd9;
+  background: #fff;
+}
+
+.source-info-btn {
+  font-size: 12px;
+  padding: 0;
+  margin-top: 4px;
+  align-self: flex-start;
+}
+
+.source-info-content {
+  background-color: #f5f5f5;
+  padding: 16px;
+  border-radius: 4px;
+  max-height: 400px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.source-info-content :deep(pre) {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow: auto;
+  margin: 0;
+}
+
+.source-info-content :deep(code) {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+}
 </style>

package/src/base-client/components/common/XDataCard/index.js

@@ -1,3 +1,3 @@
-import XDataCard from './XDataCard.vue'
-
-export default XDataCard
+import XDataCard from './XDataCard.vue'
+
+export default XDataCard

package/src/base-client/components/common/XDataCard/index.md

@@ -1 +1 @@
-# XDataCard
+# XDataCard