vue_zhongyou 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/aiChatPage.vue

@@ -30,10 +30,13 @@
                 <!-- 文字介绍 -->
                 <div v-if="message.output" class="message-output" v-html="formatMessage(message.output)"></div>
                 <!-- 表单内容 -->
-                <ChatForm 
+                <DynamicMobileForm
+                  v-model="message.formData"
                   :schema="message.formSchema"
-                  :model-value="message.formData || {}"
-                  @submit="handleFormSubmit(index, $event)"
+                  submit-button-label="确认"
+                  reset-button-label="重置"
+                  @submit="handleSubmit"
+                  @change="handleChange"
                 />
               </div>
               
@@ -81,7 +84,12 @@
     </div>
 
     <!-- 输入区域 -->
-    <div class="input-area">
+    <inputCom
+      ref="inputComRef"
+      :isLoading="isLoading"
+      @sendMessage="sendMessage"
+    ></inputCom>
+    <!-- <div class="input-area">
       <div class="input-wrapper">
         <van-field
           v-model="inputText"
@@ -106,15 +114,41 @@
           发送
         </van-button>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
-import { ref, nextTick, onMounted, watch } from 'vue'
+import { ref, nextTick, onMounted, watch, onUnmounted } from 'vue'
 import { showToast } from 'vant'
 import ChatForm from '@/components/ChatForm.vue'
 import NewChatCardList from '@/components/newChatCardList.vue'
+import DynamicMobileForm from '@/components/dynamicMobileForm.vue'
+import inputCom from '@/components/inputCom.vue'
+import request from '@/api/request'
+// 引入核心库
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+// 引入高亮样式（任选一种）
+import 'highlight.js/styles/github.css';
+
+// 配置marked
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight: function(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+    return hljs.highlight(code, { language }).value;
+  },
+  langPrefix: 'hljs language-',
+  pedantic: false,
+  gfm: true,
+  breaks: true,
+  sanitize: false,
+  smartLists: true,
+  smartypants: false,
+  xhtml: false
+});
+
 
 // 消息列表
 const messages = ref([])
@@ -126,6 +160,13 @@ const isLoading = ref(false)
 const chatContainerRef = ref(null)
 // 会话ID
 const sessionId = ref('')
+// 输入组件引用
+const inputComRef = ref(null)
+// Axios取消请求控制器
+const abortControllerRef = ref(null)
+// 当前正在接收流式响应的消息索引
+const streamingMessageIndex = ref(-1)
+
 
 // 判断消息类型
 const isTextMessage = (message) => {
@@ -142,6 +183,7 @@ const isCardListMessage = (message) => {
 
 // 初始化欢迎消息
 onMounted(() => {
+
   addMessage('assistant', '您好！有什么可以帮助您的吗？', false)
   scrollToBottom()
 })
@@ -190,10 +232,8 @@ const generateSuggestions = (content) => {
   // 这里可以根据实际内容生成相关的推荐信息
   // 目前先使用一些示例推荐信息
   const sampleSuggestions = [
-    '您还可以询问相关问题',
-    '了解更多详细信息',
-    '查看相关文档',
-    '获取更多帮助'
+    '查找当前待办',
+    '发起出差流程',
   ]
   
   // 根据内容类型生成不同的推荐信息
@@ -206,9 +246,9 @@ const generateSuggestions = (content) => {
       return ['比较不同产品', '查看用户评价', '获取优惠信息']
     }
   } else if (content && content.type === 'form') {
-    return ['查看表单填写示例', '了解字段含义', '下载填写模板']
+    return ['查找当前待办', '查看我发起的流程',]
   } else if (content && content.type === 'cardList') {
-    return ['筛选产品类别', '按价格排序', '查看更多产品']
+    return ['创建出差流程', '创建请假流程', '查看待办列表']
   }
   
   // 默认推荐信息
@@ -217,173 +257,227 @@ const generateSuggestions = (content) => {
 
 // 发送消息
 const sendMessage = async () => {
-  const text = inputText.value.trim()
+  const text = inputComRef.value.inputText.trim()
   if (!text || isLoading.value) return
 
+  // 取消之前的请求
+  if (abortControllerRef.value) {
+    abortControllerRef.value.abort()
+  }
+
   // 添加用户消息
   addMessage('user', text)
-  inputText.value = ''
+  inputComRef.value.inputText = ''
 
   // 添加AI加载消息
   addMessage('assistant', '', true)
   isLoading.value = true
 
-  // 拼装一下请求体
-  let requestBody = {
+  // 记录当前消息索引
+  streamingMessageIndex.value = messages.value.length - 1
+
+  // 拼装请求体
+  const requestBody = {
     sessionId: sessionId.value,
     input: text,
     payload: {
-      sceneType : "QUERY",
-      queryType : "CREATOR",
-      processType : "BUSINESS_TRIP",
+      sceneType: "QUERY",
+      queryType: "CREATOR",
+      processType: "BUSINESS_TRIP",
       queryBackLogReq: {
         userId: '123456',
-        pageNum:1,
+        pageNum: 1,
         pageSize: 10
       }
     }
   }
 
+  // 创建新的AbortController
+  abortControllerRef.value = new AbortController()
+
   try {
-    // 模拟AI回复（实际应该调用API）
-    await simulateAIResponse(text)
+    // 使用fetch API发送SSE请求
+    const baseURL = import.meta.env.VITE_API_BASE_URL || ''
+    const url = `http://localhost:8080/ai/chat`
+    
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'text/event-stream',
+        'Cache-Control': 'no-cache'
+      },
+      body: JSON.stringify({
+        message: text
+      }),
+      signal: abortControllerRef.value.signal
+    })
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    // 使用ReadableStream处理流式响应
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+    
+    while (true) {
+      const { done, value } = await reader.read()
+      
+      if (done) {
+        console.log('SSE流读取完成')
+        break
+      }
+      
+      // 解码数据块
+      const chunk = decoder.decode(value, { stream: true })
+      console.log(chunk);
+      
+      buffer += chunk
+      
+      // 处理buffer中的完整消息
+      const lines = buffer.split('\n')
+      buffer = lines.pop() || '' // 保留最后一个不完整的行
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const dataStr = line.slice(6).trim()
+          if (dataStr) {
+            try {
+              const data = JSON.parse(dataStr)
+              handleSSEMessage(data)
+            } catch (error) {
+              console.error('解析SSE消息失败:', error, dataStr)
+            }
+          }
+        }
+      }
+    }
+    
+    // 处理buffer中剩余的数据
+    if (buffer.trim()) {
+      const lines = buffer.split('\n')
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const dataStr = line.slice(6).trim()
+          if (dataStr) {
+            try {
+              const data = JSON.parse(dataStr)
+              handleSSEMessage(data)
+            } catch (error) {
+              console.error('解析SSE消息失败:', error, dataStr)
+            }
+          }
+        }
+      }
+    }
+    
+    // 请求完成
+    console.log('SSE请求完成')
   } catch (error) {
-    console.error('发送消息失败:', error)
-    showToast('发送失败，请重试')
-    // 移除加载中的消息
-    messages.value.pop()
-  } finally {
-    isLoading.value = false
+    if (error.name === 'AbortError') {
+      console.log('请求已取消')
+    } else {
+      console.error('SSE请求失败:', error)
+      handleSSEError('连接失败，请重试')
+    }
   }
 }
 
-// 模拟AI回复（实际应该替换为真实的API调用）
-const simulateAIResponse = async (userMessage) => {
-  // 模拟网络延迟
-  await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))
-
-  // 移除加载中的消息
-  const loadingMessage = messages.value.pop()
-
-  // 生成模拟回复
-  let response = ''
-  if (userMessage.includes('你好') || userMessage.includes('您好')) {
-    response = '您好！很高兴为您服务。'
-  } else if (userMessage.includes('帮助') || userMessage.includes('功能')) {
-    response = '我可以帮您解答问题、提供建议、分析数据等。请告诉我您需要什么帮助？'
-  } else if (userMessage.includes('时间')) {
-    response = `当前时间是：${new Date().toLocaleString('zh-CN')}`
-  } else if (userMessage.includes('表单')) {
-    // 返回表单类型消息，带介绍文字
-    response = {
-      type: 'form',
-      output: '请您填写以下信息，以便我们为您提供更好的服务。所有信息都将严格保密，请放心填写。',
-      schema: [
-        {
-          field: 'name',
-          label: '姓名',
-          type: 'input',
-          placeholder: '请输入您的姓名',
-          rules: [{ required: true, message: '请输入姓名' }]
-        },
-        {
-          field: 'email',
-          label: '邮箱',
-          type: 'input',
-          placeholder: '请输入您的邮箱',
-          rules: [{ required: true, message: '请输入邮箱' }, { pattern: /\w+@\w+\.\w+/, message: '邮箱格式不正确' }]
-        },
-        {
-          field: 'age',
-          label: '年龄',
-          type: 'input',
-          placeholder: '请输入您的年龄'
-        },
-        {
-          field: 'gender',
-          label: '性别',
-          type: 'radio',
-          options: [
-            { label: '男', value: 'male' },
-            { label: '女', value: 'female' }
-          ]
-        },
-        {
-          field: 'hobbies',
-          label: '爱好',
-          type: 'checkbox',
-          options: [
-            { label: '阅读', value: 'reading' },
-            { label: '运动', value: 'sports' },
-            { label: '音乐', value: 'music' },
-            { label: '旅行', value: 'travel' }
-          ]
-        },
-        {
-          field: 'bio',
-          label: '个人简介',
-          type: 'textarea',
-          placeholder: '请简单介绍一下自己',
-          rows: 3
-        }
-      ]
+// 处理SSE消息
+const handleSSEMessage = (data) => {
+  
+  const messageIndex = streamingMessageIndex.value
+  
+  if (messageIndex === -1 || !messages.value[messageIndex]) return
+  
+  const currentMessage = messages.value[messageIndex]
+  // 根据消息类型处理
+  if (data.type === 'text' || data.type === 'message') {
+    // 文本流式更新
+    if (typeof currentMessage.content !== 'string') {
+      currentMessage.content = ''
     }
-  } else if (userMessage.includes('列表') || userMessage.includes('卡片')) {
-    // 返回列表卡片类型消息，带介绍文字
-    // TODO 生成这种卡片列表的时候，要初始化一个这张卡片的独有的page,用来做分页
-    const items = [
-      {
-        title: '产品A',
-        subtitle: '高性能计算服务',
-        statusName : '待审',
-        creator : '刘松煜',
-        createTime : '2023-10-01 10:00:00',
-        currentNode : '节点1',
-        dpName : '信息科技部',
-      },
-      {
-        title: '产品B',
-        subtitle: '云存储解决方案',
-        statusName : '驳回',
-        creator : '刘松煜',
-        createTime : '2023-10-01 10:00:00',
-        currentNode : '节点1',
-        dpName : '固定收益投资部',
-      },
-      {
-        title: '信息科技部xxxaaaa啊啊啊你还是低哦是大家扫IDiOS滴哦啊啊大家送啊点喝酒哦洒几滴撒娇都i爱睡觉',
-        subtitle: '人工智能平台',
-        statusName : '待审',
-        creator : '刘松煜',
-        createTime : '2023-10-01',
-        currentNode : '节点1',
-        dpName : '信息科技部',
-      }
-    ];
-    const total = 10
+    currentMessage.content += data.content || ''
+    scrollToBottom()
+  } else if (data.type === 'form') {
+    // 表单消息
+    currentMessage.type = 'form'
+    currentMessage.formSchema = data.schema
+    currentMessage.formData = data.data || {}
+    if (data.output) {
+      currentMessage.output = data.output
+    }
+  } else if (data.type === 'cardList') {
+    // 列表卡片消息
+    for (let key in data) {
+      currentMessage[key] = data[key]
+    }
+  } else if (data.type === 'end') {
+    // 流式传输完成
+    currentMessage.loading = false
+    isLoading.value = false
+    
+    // 为AI助手消息添加推荐信息
+    currentMessage.suggestions = generateSuggestions(currentMessage.content)
     
-    response = {
-      type: 'cardList',
-      output: '根据您的需求，我们为您推荐以下几款热门产品，您可以点击查看详细信息或进行相关操作：',
-      showLoadMore: items.length < total, // 根据当前items长度与总数的比较来确定是否显示"查看更多"
-      currentPage: 1,
-      pageSize: 10,
-      total: total,
-      items: items,
-      loading: false // 初始化加载状态
+    // 清理请求控制器
+    if (abortControllerRef.value) {
+      abortControllerRef.value = null
     }
-  } else {
-    response = `我理解您说的是："${userMessage}"。这是一个很好的问题，让我为您详细解答...\n\n（这是模拟回复，实际使用时需要接入真实的AI API）`
+    streamingMessageIndex.value = -1
+  } else if (data.type === 'error') {
+    // 错误消息
+    handleSSEError(data.message || '服务器错误')
   }
+  console.log(messages.value);
+  
+}
 
-  // 添加AI回复
-  addMessage('assistant', response, false)
+// 处理SSE错误
+const handleSSEError = (errorMessage = '连接中断，请重试') => {
+  console.error('SSE错误:', errorMessage)
+  
+  const messageIndex = streamingMessageIndex.value
+  if (messageIndex !== -1 && messages.value[messageIndex]) {
+    messages.value[messageIndex].loading = false
+    if (!messages.value[messageIndex].content) {
+      messages.value[messageIndex].content = errorMessage
+    }
+  }
+  
+  isLoading.value = false
+  showToast(errorMessage)
+  
+  // 清理请求控制器
+  if (abortControllerRef.value) {
+    abortControllerRef.value = null
+  }
+  streamingMessageIndex.value = -1
 }
 
-// 格式化消息内容（支持换行）
+// 组件卸载时清理SSE连接
+onUnmounted(() => {
+  if (abortControllerRef.value) {
+    abortControllerRef.value.abort()
+    abortControllerRef.value = null
+  }
+})
+
+// 格式化消息内容（支持Markdown）
 const formatMessage = (content) => {
   if (!content) return ''
-  return content.replace(/\n/g, '<br>')
+  
+  try {
+    // 使用marked将Markdown转换为HTML
+    const html = marked(content)
+    return html
+  } catch (error) {
+    console.error('Markdown转换失败:', error)
+    // 如果转换失败，回退到简单的换行处理
+    return content.replace(/\n/g, '<br>')
+  }
 }
 
 // 格式化时间
@@ -440,7 +534,7 @@ const handleShiftEnter = () => {
 }
 
 // 处理表单提交
-const handleFormSubmit = (index, formData) => {
+const handleSubmit = (formData) => {
   // 在实际应用中，这里应该将表单数据发送到服务器
   console.log('表单提交数据:', formData)
   
@@ -463,7 +557,7 @@ const handleCardActionClick = (index, { action, item, index: itemIndex }) => {
 const handleSuggestionClick = (suggestion) => {
   console.log('Suggestion clicked:', suggestion)
   // 将推荐信息作为用户消息发送
-  inputText.value = suggestion
+  inputComRef.value.inputText = suggestion
   sendMessage()
 }
 
@@ -612,6 +706,7 @@ const handleLoadMore = (message) => {
   display: flex;
   flex-direction: column;
   // max-width: 75%;
+  flex: 1;
   gap: 6px;
 }
 
@@ -625,6 +720,190 @@ const handleLoadMore = (message) => {
 .message-text {
   font-size: 15px;
   white-space: pre-wrap;
+  
+  // Markdown样式隔离 - 使用深度选择器控制所有Markdown元素
+  :deep(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  // 标题样式
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+    margin: 0.5em 0 0.3em 0;
+    font-weight: 600;
+    line-height: 1.4;
+    color: inherit;
+  }
+  
+  :deep(h1) {
+    font-size: 1.5em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+  }
+  
+  :deep(h2) {
+    font-size: 1.3em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+  }
+  
+  :deep(h3) {
+    font-size: 1.15em;
+  }
+  
+  :deep(h4) {
+    font-size: 1.05em;
+  }
+  
+  // 段落样式
+  :deep(p) {
+    margin: 0.3em 0;
+    line-height: 1.6;
+  }
+  
+  // 列表样式
+  :deep(ul), :deep(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-position: outside;
+  }
+  
+  :deep(ul) {
+    list-style-type: disc;
+  }
+  
+  :deep(ol) {
+    list-style-type: decimal;
+  }
+  
+  :deep(li) {
+    margin: 0.25em 0;
+    line-height: 1.6;
+    padding-left: 0.3em;
+  }
+  
+  :deep(ul ul), :deep(ol ul), :deep(ul ol), :deep(ol ol) {
+    margin: 0.25em 0;
+  }
+  
+  // 嵌套列表样式
+  :deep(ul ul) {
+    list-style-type: circle;
+  }
+  
+  :deep(ul ul ul) {
+    list-style-type: square;
+  }
+  
+  // 代码样式
+  :deep(code) {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: rgba(0, 0, 0, 0.06);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    color: #e83e8c;
+  }
+  
+  :deep(pre) {
+    background-color: #f6f8fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    padding: 12px;
+    margin: 0.5em 0;
+    overflow-x: auto;
+    font-size: 0.9em;
+    line-height: 1.5;
+  }
+  
+  :deep(pre code) {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+    color: inherit;
+  }
+  
+  // 引用样式
+  :deep(blockquote) {
+    margin: 0.5em 0;
+    padding: 0.5em 1em;
+    border-left: 4px solid #dfe2e5;
+    background-color: #f6f8fa;
+    color: #6a737d;
+  }
+  
+  // 表格样式
+  :deep(table) {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.5em 0;
+    font-size: 0.95em;
+  }
+  
+  :deep(table th), :deep(table td) {
+    border: 1px solid #dfe2e5;
+    padding: 6px 12px;
+    text-align: left;
+  }
+  
+  :deep(table th) {
+    background-color: #f6f8fa;
+    font-weight: 600;
+  }
+  
+  :deep(table tr:nth-child(even)) {
+    background-color: #fafbfc;
+  }
+  
+  // 链接样式
+  :deep(a) {
+    color: #1989fa;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-bottom-color 0.2s;
+  }
+  
+  :deep(a:hover) {
+    border-bottom-color: #1989fa;
+  }
+  
+  // 图片样式
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 0.5em 0;
+  }
+  
+  // 分隔线样式
+  :deep(hr) {
+    border: none;
+    border-top: 2px solid #e1e4e8;
+    margin: 1em 0;
+  }
+  
+  // 强调样式
+  :deep(strong), :deep(b) {
+    font-weight: 600;
+  }
+  
+  :deep(em), :deep(i) {
+    font-style: italic;
+  }
+  
+  // 删除线样式
+  :deep(del), :deep(s) {
+    text-decoration: line-through;
+    color: #6a737d;
+  }
+  
+  // 任务列表样式
+  :deep(input[type="checkbox"]) {
+    margin-right: 0.5em;
+    vertical-align: middle;
+  }
 }
 
 .message-output {
@@ -636,6 +915,57 @@ const handleLoadMore = (message) => {
   background-color: #f8f9fa;
   border-radius: 8px;
   // border-left: 3px solid #1989fa;
+  
+  // Markdown样式隔离
+  :deep(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  :deep(p) {
+    margin: 0.3em 0;
+    line-height: 1.6;
+  }
+  
+  :deep(ul), :deep(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-position: outside;
+  }
+  
+  :deep(ul) {
+    list-style-type: disc;
+  }
+  
+  :deep(ol) {
+    list-style-type: decimal;
+  }
+  
+  :deep(li) {
+    margin: 0.25em 0;
+    line-height: 1.6;
+    padding-left: 0.3em;
+  }
+  
+  :deep(code) {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: rgba(0, 0, 0, 0.06);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    color: #e83e8c;
+  }
+  
+  :deep(a) {
+    color: #1989fa;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+  }
+  
+  :deep(a:hover) {
+    border-bottom-color: #1989fa;
+  }
 }
 
 .message-time {
@@ -688,45 +1018,7 @@ const handleLoadMore = (message) => {
   }
 }
 
-.input-area {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
-  border-top: 1px solid #ebedf0;
-  padding: 8px 12px;
-  padding-bottom: calc(8px + env(safe-area-inset-bottom));
-  z-index: 100;
-
-  .input-wrapper {
-    display: flex;
-    align-items: flex-end;
-    gap: 8px;
-    max-width: 100%;
-  }
-
-  .chat-input {
-    flex: 1;
-    background: #f7f8fa;
-    border-radius: 20px;
-    padding: 8px 12px;
-    min-height: 40px;
-    max-height: 120px;
 
-    :deep(.van-field__control) {
-      font-size: 15px;
-      line-height: 1.5;
-    }
-  }
-
-  .send-btn {
-    flex-shrink: 0;
-    height: 40px;
-    padding: 0 20px;
-    border-radius: 20px;
-  }
-}
 
 
 /* 推荐信息样式 */
@@ -745,6 +1037,7 @@ const handleLoadMore = (message) => {
 .suggestion-tag {
   margin-right: 8px;
   margin-bottom: 8px;
+  padding: 4px;
   background-color: #f0f0f0;
   border-color: #ddd;
   color: #666;

package//345/212/237/350/203/275/344/273/243/347/240/201//351/241/265/351/235/242/345/223/215/345/272/224/345/274/217/351/200/202/351/205/215/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import px2rem from 'postcss-pxtorem'
+
+export default defineConfig({
+  plugins: [
+    createVuePlugin()
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        px2rem({
+          rootValue: 16, // 设计稿为375px时，rootValue设为16（16px * 375/375 = 16px）
+          propList: ['*'],
+          minPixelValue: 1,
+        })
+      ]
+    }
+  }
+})