vue_zhongyou 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "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,17 @@
           发送
         </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'
 
 // 消息列表
 const messages = ref([])
@@ -126,6 +136,13 @@ const isLoading = ref(false)
 const chatContainerRef = ref(null)
 // 会话ID
 const sessionId = ref('')
+// 输入组件引用
+const inputComRef = ref(null)
+// SSE连接引用
+const eventSourceRef = ref(null)
+// 当前正在接收流式响应的消息索引
+const streamingMessageIndex = ref(-1)
+
 
 // 判断消息类型
 const isTextMessage = (message) => {
@@ -190,10 +207,8 @@ const generateSuggestions = (content) => {
   // 这里可以根据实际内容生成相关的推荐信息
   // 目前先使用一些示例推荐信息
   const sampleSuggestions = [
-    '您还可以询问相关问题',
-    '了解更多详细信息',
-    '查看相关文档',
-    '获取更多帮助'
+    '查找当前待办',
+    '发起出差流程',
   ]
   
   // 根据内容类型生成不同的推荐信息
@@ -206,9 +221,9 @@ const generateSuggestions = (content) => {
       return ['比较不同产品', '查看用户评价', '获取优惠信息']
     }
   } else if (content && content.type === 'form') {
-    return ['查看表单填写示例', '了解字段含义', '下载填写模板']
+    return ['查找当前待办', '查看我发起的流程',]
   } else if (content && content.type === 'cardList') {
-    return ['筛选产品类别', '按价格排序', '查看更多产品']
+    return ['创建出差流程', '创建请假流程', '查看待办列表']
   }
   
   // 默认推荐信息
@@ -217,169 +232,165 @@ const generateSuggestions = (content) => {
 
 // 发送消息
 const sendMessage = async () => {
-  const text = inputText.value.trim()
+  const text = inputComRef.value.inputText.trim()
   if (!text || isLoading.value) return
 
+  // 关闭之前的SSE连接
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+
   // 添加用户消息
   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
       }
     }
   }
 
   try {
-    // 模拟AI回复（实际应该调用API）
-    await simulateAIResponse(text)
+    // 创建SSE连接
+    const baseURL = import.meta.env.VITE_API_BASE_URL || ''
+    const url = `${baseURL}/api/ai/chat/stream`
+    
+    // 构建查询参数
+    const params = new URLSearchParams()
+    params.append('sessionId', requestBody.sessionId)
+    params.append('input', requestBody.input)
+    params.append('payload', JSON.stringify(requestBody.payload))
+    
+    const fullUrl = `${url}?${params.toString()}`
+    
+    // 创建EventSource连接
+    eventSourceRef.value = new EventSource(fullUrl)
+    
+    // 监听消息事件
+    eventSourceRef.value.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+        handleSSEMessage(data)
+      } catch (error) {
+        console.error('解析SSE消息失败:', error)
+      }
+    }
+    
+    // 监听错误事件
+    eventSourceRef.value.onerror = (error) => {
+      console.error('SSE连接错误:', error)
+      handleSSEError()
+    }
+    
+    // 监听连接打开事件
+    eventSourceRef.value.onopen = () => {
+      console.log('SSE连接已建立')
+    }
+    
   } catch (error) {
-    console.error('发送消息失败:', error)
-    showToast('发送失败，请重试')
-    // 移除加载中的消息
-    messages.value.pop()
-  } finally {
-    isLoading.value = false
+    console.error('创建SSE连接失败:', error)
+    showToast('连接失败，请重试')
+    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') {
+    // 文本流式更新
+    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 === 'done') {
+    // 流式传输完成
+    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 // 初始化加载状态
+    // 关闭SSE连接
+    if (eventSourceRef.value) {
+      eventSourceRef.value.close()
+      eventSourceRef.value = null
     }
-  } else {
-    response = `我理解您说的是："${userMessage}"。这是一个很好的问题，让我为您详细解答...\n\n（这是模拟回复，实际使用时需要接入真实的AI API）`
+    streamingMessageIndex.value = -1
+  } else if (data.type === 'error') {
+    // 错误消息
+    handleSSEError(data.message || '服务器错误')
   }
+}
 
-  // 添加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)
+  
+  // 关闭SSE连接
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+  streamingMessageIndex.value = -1
 }
 
+// 组件卸载时清理SSE连接
+onUnmounted(() => {
+  if (eventSourceRef.value) {
+    eventSourceRef.value.close()
+    eventSourceRef.value = null
+  }
+})
+
 // 格式化消息内容（支持换行）
 const formatMessage = (content) => {
   if (!content) return ''
@@ -440,7 +451,7 @@ const handleShiftEnter = () => {
 }
 
 // 处理表单提交
-const handleFormSubmit = (index, formData) => {
+const handleSubmit = (formData) => {
   // 在实际应用中，这里应该将表单数据发送到服务器
   console.log('表单提交数据:', formData)
   
@@ -463,7 +474,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 +623,7 @@ const handleLoadMore = (message) => {
   display: flex;
   flex-direction: column;
   // max-width: 75%;
+  flex: 1;
   gap: 6px;
 }
 
@@ -688,45 +700,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 +719,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,
+        })
+      ]
+    }
+  }
+})