vue2-client 1.22.2 → 1.22.3

package/.history/src/base-client/components/his/HAi/HAi_20260615103331.vue

@@ -0,0 +1,650 @@
+<template>
+  <div class="ai-consultation-outer">
+    <div class="ai-consultation-container">
+      <div class="chat-area">
+        <!-- 对话区域 -->
+        <div class="dialog-area">
+          <template v-for="(item, index) in displayItems">
+            <div
+              v-if="item.type === 'divider'"
+              :key="`divider-${index}`"
+              class="dialog-divider"
+            >
+              <span class="dialog-divider-text">{{ item.text }}</span>
+            </div>
+            <div
+              v-else
+              :key="`msg-${index}`"
+              :class="['dialog-message', item.type]"
+            >
+              <div class="message-text" v-html="renderMd(item.content)" />
+              <span v-if="isAiStreaming && index === displayItems.length - 1 && item.type === 'ai'" class="typing-cursor">▍</span>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div class="bottom-input-wrapper">
+        <div class="input-container">
+          <div class="input-textarea-area">
+            <a-textarea
+              ref="consultTextarea"
+              v-model="doctorInputText"
+              placeholder="医生补充信息或提问..."
+              class="bottom-input"
+              :rows="1"
+              resize="none"
+              @input="handleInput"
+              @keydown="handleKeydown"
+            ></a-textarea>
+          </div>
+
+          <input
+            ref="uploadInput"
+            type="file"
+            style="display: none"
+            @change="handleFileChange"
+            multiple
+            accept="image/*,.pdf,.doc,.docx"
+          />
+
+          <div class="input-controls">
+            <div class="input-controls-left">
+              <a-button class="upload-btn" @click="triggerUpload">
+                <a-icon type="plus" class="upload-icon" />
+                <span class="upload-text">上传（报告、图片）</span>
+              </a-button>
+            </div>
+
+            <div class="input-controls-right">
+              <span class="enter-tip">Enter</span>
+              <a-button
+                type="primary"
+                shape="circle"
+                class="send-btn"
+                @click="handleSendMessage"
+                :disabled="!doctorInputText.trim()"
+              >
+                <span class="send-icon">↑</span>
+              </a-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { startEventStreamPOST } from '@vue2-client/services/api/restTools'
+import { marked } from 'marked'
+import moment from 'moment/moment'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AIConsultation',
+  data() {
+    return {
+      currentDialogId: null,
+      doctorInputText: '',
+      isPlaying: false,
+      isRecording: false,
+      patientComplaint: '',
+      doctorQuestions: [],
+      examinationOrder: null,
+      aiDiagnosis: null,
+      dialogMessages: [],
+      currentStreamConnection: null,
+      isAiStreaming: false,
+      resizeTimeout: null
+    }
+  },
+  computed: {
+    ...mapState('account', {currUser: 'user'}),
+    // 把 dialogMessages 与日期分隔符合并成最终渲染列表
+    displayItems() {
+      const items = []
+      let lastDateKey = ''
+      this.dialogMessages.forEach(msg => {
+        const dateKey = this.getDateKey(msg.timestamp)
+        if (dateKey && dateKey !== lastDateKey) {
+          items.push({ type: 'divider', text: this.getDateLabel(msg.timestamp) })
+          lastDateKey = dateKey
+        }
+        items.push(msg)
+      })
+      return items
+    }
+  },
+  mounted() {
+    this.initTestData()
+    this.$nextTick(() => {
+      this.autoResizeTextarea()
+    })
+  },
+  beforeDestroy() {
+    // 组件销毁时关闭流式连接
+    if (this.currentStreamConnection) {
+      this.currentStreamConnection()
+      this.currentStreamConnection = null
+    }
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout)
+    }
+  },
+  methods: {
+    autoResizeTextarea() {
+      this.$nextTick(() => {
+        const textarea = this.$refs.consultTextarea?.$el || this.$refs.consultTextarea
+        if (!textarea) return
+
+        textarea.style.height = 'auto'
+        const scrollHeight = textarea.scrollHeight
+        textarea.style.height = `${Math.min(Math.max(scrollHeight, 120), 250)}px`
+      })
+    },
+
+    handleInput() {
+      if (this.resizeTimeout) clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(() => {
+        this.autoResizeTextarea()
+      }, 16)
+    },
+
+    renderMd(text) {
+      if (!text) return ''
+      try {
+        return marked.parse(text, { breaks: true, gfm: true, headerIds: false, mangle: false })
+      } catch {
+        return text
+      }
+    },
+
+    handleKeydown(event) {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault()
+        this.handleSendMessage()
+      }
+    },
+
+    initDialog() {
+      if (!this.currentDialogId) {
+        this.currentDialogId = moment().format('YYYYMMDDHHmmss')
+      }
+    },
+
+    clearDialog() {
+      this.currentDialogId = moment().format('YYYYMMDDHHmmss')
+      this.dialogMessages = []
+    },
+
+    handleSendMessage() {
+      if (!this.doctorInputText.trim()) return
+
+      // 确保有dialogId
+      if (!this.currentDialogId) {
+        this.initDialog()
+      }
+
+      const messageContent = this.doctorInputText.trim()
+      const doctorMessage = {
+        type: 'user',
+        content: messageContent,
+        time: new Date().toLocaleTimeString(),
+        timestamp: Date.now()
+      }
+      this.dialogMessages.push(doctorMessage)
+      this.scrollToBottom()
+
+      this.doctorInputText = ''
+      this.autoResizeTextarea()
+
+      const chatId = this.currentDialogId
+      let aiContent = ''
+      const aiMsgIndex = this.dialogMessages.length
+      this.dialogMessages.push({
+        type: 'ai',
+        content: '',
+        time: new Date().toLocaleTimeString(),
+        timestamp: Date.now()
+      })
+      this.scrollToBottom()
+
+      this.isAiStreaming = true
+
+      this.currentStreamConnection = startEventStreamPOST(
+        '/his-web/api/af-his/ai/chat/stream',
+        { userMessage: messageContent, chatId, model: '', prompt: '', useContext: true, user: this.currUser.operInfo },
+        {'Content-Type': 'application/json'},
+        (data, type) => {
+          if (type === 'additionalInfo' || type === 'sourceInfo') return
+
+          let textChunk = ''
+          if (typeof data === 'object' && data !== null) {
+            const choices = data.choices
+            if (Array.isArray(choices) && choices.length > 0) {
+              const delta = choices[0].delta
+
+              // 优先取 delta.content（标准 OpenAI 格式）
+              if (delta && typeof delta.content === 'string' && delta.content) {
+                textChunk = delta.content
+              }
+
+              // 兼容百川模型的 thinking 字段
+              if (!textChunk && delta && delta.thinking) {
+                const thinking = delta.thinking
+                // 取 summary 描述
+                if (thinking.summary && typeof thinking.summary === 'string') {
+                  textChunk = `[思考中] ${thinking.summary}`
+                }
+                // 取 reasoning steps
+                if (Array.isArray(thinking.steps)) {
+                  const activeStep = thinking.steps.find(s => s.status === 'in_progress')
+                  if (activeStep && activeStep.label) {
+                    textChunk = `[思考中] ${activeStep.label}`
+                  }
+                }
+              }
+
+              // 检测模型拒答
+              const finishReason = choices[0].finish_reason
+              if (finishReason === 'refuse_answer') {
+                const refuseTip = '\n\n> ⚠️ 很抱歉，当前问题我无法回答，请尝试调整提问方式或联系管理员。'
+                if (!this.dialogMessages[aiMsgIndex].content.includes('无法回答')) {
+                  this.dialogMessages[aiMsgIndex].content += refuseTip
+                  this.isAiStreaming = false
+                  this.scrollToBottom()
+                }
+              }
+            }
+          } else if (typeof data === 'string') {
+            textChunk = data
+          }
+
+          if (textChunk) {
+            aiContent += textChunk
+            this.dialogMessages[aiMsgIndex].content = aiContent
+            this.scrollToBottom()
+          }
+        },
+        (error) => {
+          this.isAiStreaming = false
+          this.dialogMessages[aiMsgIndex].content += `\n\n[错误: ${error.message || '请求失败'}]`
+          this.scrollToBottom()
+        },
+        () => {
+          this.isAiStreaming = false
+          this.scrollToBottom()
+        }
+      )
+    },
+
+    setPatientComplaint(complaint) {
+      this.patientComplaint = complaint
+    },
+
+    scrollToBottom(delay = 0) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          const chatArea = document.querySelector('.chat-area')
+          if (chatArea) {
+            chatArea.scrollTop = chatArea.scrollHeight
+          }
+        }, delay)
+      })
+    },
+
+    reset() {
+      if (this.currentStreamConnection) {
+        this.currentStreamConnection()
+        this.currentStreamConnection = null
+      }
+      this.isAiStreaming = false
+      this.patientComplaint = ''
+      this.doctorQuestions = []
+      this.examinationOrder = null
+      this.aiDiagnosis = null
+      this.doctorInputText = ''
+      this.isPlaying = false
+      this.isRecording = false
+      this.dialogMessages = []
+      this.$nextTick(() => {
+        this.autoResizeTextarea()
+        const chatArea = document.querySelector('.chat-area')
+        if (chatArea) {
+          chatArea.scrollTop = 0
+        }
+      })
+    },
+
+    triggerUpload() {
+      this.$refs.uploadInput.click()
+    },
+
+    handleFileChange(event) {
+      const files = Array.from(event.target.files || [])
+      if (!files.length) return
+
+      this.dialogMessages.push({
+        type: 'user',
+        content: `已上传文件：${files.map(f => f.name).join('、')}`,
+        time: new Date().toLocaleTimeString(),
+        timestamp: Date.now()
+      })
+      this.scrollToBottom()
+      event.target.value = ''
+    },
+
+    // 初始化测试数据：两天内容（昨天 + 今天），不调用接口
+    initTestData() {
+      const now = moment()
+      const today = now.clone().startOf('day')
+      const yesterday = today.clone().subtract(1, 'day')
+
+      this.dialogMessages = [
+        // 昨天 - 上午
+        {
+          type: 'user',
+          content: '患者男，65岁，主诉反复胸闷、心悸2年，加重伴乏力1周。既往有高血压病史10年，长期口服氨氯地平。',
+          time: '09:12',
+          timestamp: yesterday.clone().hour(9).minute(12).valueOf()
+        },
+        {
+          type: 'ai',
+          content: '**初步分析：**\n\n1. 患者老年男性，有高血压病史，症状提示可能存在 **冠心病、心律失常** 或 **心力衰竭**\n2. 建议完善以下检查：\n   - 心电图（ECG）\n   - 心脏彩超\n   - 动态心电图（Holter）\n   - 血脂、血糖、BNP\n\n3. 注意鉴别：\n   - 甲状腺功能异常\n   - 电解质紊乱\n   - 药物影响',
+          time: '09:13',
+          timestamp: yesterday.clone().hour(9).minute(13).valueOf()
+        },
+        {
+          type: 'user',
+          content: '心电图提示：窦性心律，ST段压低，T波倒置。心脏彩超：左室舒张功能减退，EF 55%。',
+          time: '10:25',
+          timestamp: yesterday.clone().hour(10).minute(25).valueOf()
+        },
+        {
+          type: 'ai',
+          content: '**进一步分析：**\n\n根据检查结果：\n- ST段压低、T波倒置：考虑 **心肌缺血**\n- 左室舒张功能减退：提示 **舒张性心衰（HFrEF 临界）**\n- EF 55% 处于正常下限\n\n**建议：**\n1. 加用 **阿司匹林** 抗血小板治疗\n2. 加用 **他汀类** 调脂稳斑\n3. 考虑 **ACEI/ARB** 控制血压、逆转心肌重构\n4. 必要时行 **冠脉造影** 明确冠脉病变\n5. 密切监测血压、心率',
+          time: '10:27',
+          timestamp: yesterday.clone().hour(10).minute(27).valueOf()
+        },
+        // 昨天 - 下午
+        {
+          type: 'user',
+          content: '冠脉造影结果：LAD 中段狭窄 70%，LCX 远端狭窄 40%。',
+          time: '15:40',
+          timestamp: yesterday.clone().hour(15).minute(40).valueOf()
+        },
+        {
+          type: 'ai',
+          content: '**冠脉病变评估：**\n\n- **LAD 中段 70% 狭窄**：临界病变，建议 PCI 干预\n- **LCX 远端 40% 狭窄**：轻度，可药物保守治疗\n\n**治疗方案：**\n1. **LAD 行 PCI + 支架植入**\n2. 术后双联抗血小板治疗（阿司匹林 + 氯吡格雷）至少 12 个月\n3. 强化他汀治疗至 LDL < 1.4 mmol/L\n4. 控制血压 < 130/80 mmHg\n5. 心肺康复、规律运动',
+          time: '15:42',
+          timestamp: yesterday.clone().hour(15).minute(42).valueOf()
+        },
+        // 今天 - 上午
+        {
+          type: 'user',
+          content: 'PCI 术后第 1 天，患者诉胸闷较前明显好转，无胸痛，复查心电图未见明显 ST-T 改变。',
+          time: '08:30',
+          timestamp: today.clone().hour(8).minute(30).valueOf()
+        },
+        {
+          type: 'ai',
+          content: '**术后评估：**\n\n术后恢复良好，症状改善明显。\n\n**今日医嘱：**\n1. 继续双联抗血小板治疗\n2. 监测心电图、心肌酶变化\n3. 观察穿刺点有无出血、血肿\n4. 鼓励早期下床活动\n5. 出院前评估：\n   - 心脏彩超复查\n   - 24小时动态心电图\n   - 出院带药及健康宣教',
+          time: '08:31',
+          timestamp: today.clone().hour(8).minute(31).valueOf()
+        },
+        {
+          type: 'user',
+          content: '好的，麻烦帮我整理一下完整的出院小结模板。',
+          time: '09:45',
+          timestamp: today.clone().hour(9).minute(45).valueOf()
+        }
+      ]
+    },
+
+    // 获取时间戳的日期键（YYYY-MM-DD）
+    getDateKey(timestamp) {
+      if (!timestamp) return ''
+      return moment(timestamp).format('YYYY-MM-DD')
+    },
+
+    // 解析日期键为本地日期对象
+    parseDateKey(dateKey) {
+      return moment(dateKey, 'YYYY-MM-DD')
+    },
+
+    // 把日期戳格式化为"今天 / 昨天 / 具体日期"
+    getDateLabel(timestamp) {
+      if (!timestamp) return ''
+      const m = moment(timestamp)
+      const today = moment().startOf('day')
+      const yesterday = today.clone().subtract(1, 'day')
+      const target = m.clone().startOf('day')
+
+      if (target.isSame(today, 'day')) return '今天'
+      if (target.isSame(yesterday, 'day')) return '昨天'
+      // 跨年显示年份
+      if (target.year() !== today.year()) {
+        return m.format('YYYY年M月D日')
+      }
+      return m.format('M月D日')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ai-consultation-outer {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ai-consultation-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border: 1px solid #E5E9F0;
+}
+
+/* 对话区域容器：初始高度 240px（无内容时），最大高度 690px（内容超出滚动） */
+.chat-area {
+  flex: 0 1 auto;
+  overflow-y: auto;
+  padding: 16px;
+  background: #fff;
+  /* 初始高度：没有内容时也保留这块区域 */
+  min-height: 240px;
+  /* 最大高度：内容超过则出现滚动条 */
+  max-height: 690px;
+  box-sizing: border-box;
+}
+
+/* 消息列表：跟随 chat-area 高度 */
+.dialog-area {
+  display: flex;
+  flex-direction: column;
+  min-height: 208px; /* 240(chat-area) - 16*2(padding) = 208 */
+}
+
+/* 日期分隔符 */
+.dialog-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 8px 0 16px;
+}
+
+.dialog-divider::before,
+.dialog-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #E5E9F0;
+}
+
+.dialog-divider-text {
+  padding: 2px 12px;
+  font-size: 12px;
+  color: #8C8C8C;
+  background: #F5F7FA;
+  border-radius: 10px;
+  margin: 0 12px;
+  white-space: nowrap;
+}
+
+/* 底部输入框区域 */
+.bottom-input-wrapper {
+  flex-shrink: 0;
+  padding: 12px 16px;
+  background: #fff;
+}
+
+.input-container {
+  width: 782px;
+  margin: 0 auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #E5E9F0;
+  border-radius: 6px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+}
+
+.input-textarea-area {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-bottom: 8px;
+}
+
+.bottom-input {
+  width: 100%;
+  height: 100%;
+  border: none !important;
+  background: transparent;
+  padding: 0;
+  font-family: 'Source Han Sans', 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
+  color: #313131;
+  resize: none;
+  outline: none;
+  box-shadow: none !important;
+}
+
+.bottom-input:focus,
+.bottom-input:hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.bottom-input::placeholder {
+  color: #999;
+}
+
+.input-controls {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0;
+  border-top: none;
+}
+
+.input-controls-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.input-controls-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.enter-tip {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #9E9E9E;
+  padding: 4px 8px;
+}
+
+.send-btn {
+  width: 30px;
+  height: 30px;
+  background: #0057FE;
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.send-btn:hover {
+  background: #0040cc;
+}
+
+.send-icon {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+/* 对话区域样式 */
+.dialog-message {
+  display: flex;
+  margin-bottom: 16px;
+  align-items: flex-start;
+}
+
+.dialog-message:last-child {
+  margin-bottom: 0;
+}
+
+.dialog-message.ai {
+  flex-direction: row;
+}
+
+.dialog-message.user {
+  flex-direction: row-reverse;
+}
+
+.dialog-message.user .message-text {
+  text-align: right;
+}
+
+.message-text {
+  opacity: 1;
+  font-family: Source Han Sans;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: normal;
+  text-align: justify;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  max-width: 100%;
+  color: #313131;
+}
+
+.typing-cursor {
+  display: inline-block;
+  margin-left: 2px;
+  color: #0057FE;
+  font-size: 18px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+</style>