af-mobile-client-vue3 1.4.53 → 1.4.54

package/src/components/common/MateChat/components/MateChatHeader.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { Empty, Icon, Loading, Popup } from 'vant'
+import { ref } from 'vue'
+import 'vant/es/popup/style'
+import 'vant/es/empty/style'
+import 'vant/es/loading/style'
+import 'vant/es/icon/style'
+
+interface Props {
+  /**
+   * 头部左侧 Logo 图片
+   */
+  logoImage: string
+  /**
+   * 头部标题文案
+   */
+  title: string
+  /**
+   * 历史对话弹层标题
+   */
+  historyTitle?: string
+}
+
+interface SessionItem {
+  id: string
+  title: string
+  lastTime: string
+}
+
+interface Emits {
+  /**
+   * 选择某条历史会话
+   */
+  (e: 'selectSession', session: SessionItem): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  historyTitle: '对话历史',
+})
+
+const emit = defineEmits<Emits>()
+
+const userStore = useUserStore()
+
+const showHistory = ref(false)
+const isLoading = ref(false)
+const sessionList = ref<SessionItem[]>([])
+
+function handleOpenHistory() {
+  showHistory.value = true
+  fetchSessions()
+}
+
+function handleSelectSession(session: SessionItem) {
+  emit('selectSession', session)
+  showHistory.value = false
+}
+
+async function fetchSessions() {
+  isLoading.value = true
+  try {
+    const userInfo = userStore.getUserInfo()
+    const userId = userInfo?.id ?? 'guest'
+    const userName = userInfo?.name ?? '当前用户'
+
+    // 模拟接口延迟
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    // 模拟会话列表数据
+    sessionList.value = [
+      {
+        id: `${userId}-1`,
+        title: `${userName} 最近的缴费咨询`,
+        lastTime: '2025-01-01 10:00',
+      },
+      {
+        id: `${userId}-2`,
+        title: `${userName} 燃气报修记录`,
+        lastTime: '2025-01-02 14:30',
+      },
+      {
+        id: `${userId}-3`,
+        title: `${userName} 安全用气相关问题`,
+        lastTime: '2025-01-03 09:15',
+      },
+    ]
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="matechat-header-wrapper">
+    <McHeader :logo-img="props.logoImage" :title="props.title" :logo-clickable="false">
+      <template #operationArea>
+        <div class="matechat-header-history-btn" @click="handleOpenHistory">
+          <Icon name="clock-o" size="16" />
+        </div>
+      </template>
+    </McHeader>
+
+    <Popup
+      v-model:show="showHistory"
+      position="center"
+      round
+      :overlay="true"
+      class="matechat-history-popup"
+    >
+      <div class="matechat-history-card">
+        <div class="matechat-history-card__header">
+          <span class="matechat-history-card__title">
+            {{ props.historyTitle }}
+          </span>
+        </div>
+        <div class="matechat-history-card__content">
+          <div v-if="isLoading" class="matechat-history-card__loading">
+            <Loading size="24px" />
+          </div>
+          <template v-else>
+            <div
+              v-if="sessionList.length"
+              class="matechat-history-card__list"
+            >
+              <div
+                v-for="session in sessionList"
+                :key="session.id"
+                class="matechat-history-card__item"
+                @click="handleSelectSession(session)"
+              >
+                <div class="matechat-history-card__item-title">
+                  {{ session.title }}
+                </div>
+                <div class="matechat-history-card__item-time">
+                  {{ session.lastTime }}
+                </div>
+              </div>
+            </div>
+            <div v-else class="matechat-history-card__empty">
+              <Empty description="无数据" />
+            </div>
+          </template>
+        </div>
+      </div>
+    </Popup>
+  </div>
+</template>
+
+<style scoped lang="less">
+.matechat-header-wrapper {
+  position: relative;
+}
+
+.matechat-header-history-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 1);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.matechat-history-popup {
+  .matechat-history-card {
+    width: 320px;
+    max-width: 80vw;
+    background-color: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+    padding: 16px 16px 12px;
+    box-sizing: border-box;
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    &__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #252b3a;
+    }
+
+    &__content {
+      min-height: 120px;
+      max-height: 260px;
+      overflow: auto;
+    }
+
+    &__loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 0;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    &__item {
+      padding: 10px 8px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: #f5f6f9;
+      }
+    }
+
+    &__item-title {
+      font-size: 14px;
+      color: #252b3a;
+      margin-bottom: 2px;
+    }
+
+    &__item-time {
+      font-size: 12px;
+      color: #a0a4af;
+    }
+
+    &__empty {
+      padding: 16px 0 8px;
+
+      :deep(.van-empty__image) {
+        width: 80px;
+        height: 80px;
+      }
+
+      :deep(.van-empty__description) {
+        font-size: 13px;
+        color: #a0a4af;
+      }
+    }
+  }
+}
+</style>

package/src/components/common/MateChat/components/PromptList/PromptList.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { Icon } from 'vant'
+import 'vant/es/icon/style'
+
+// 定义 props 接口
+interface IconConfig {
+  name: string
+  color?: string
+}
+
+interface PromptItem {
+  value: string
+  label: string
+  iconConfig?: IconConfig
+  desc?: string
+}
+
+interface Props {
+  list: PromptItem[]
+  direction?: 'horizontal' | 'vertical'
+}
+
+// 定义 emits
+interface Emits {
+  (e: 'itemClick', item: PromptItem): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'vertical',
+})
+
+const emit = defineEmits<Emits>()
+
+// 处理点击事件
+function handleItemClick(item: PromptItem) {
+  emit('itemClick', item)
+}
+
+// 将 icon-info-o 等图标名称转换为 Vant 图标名称
+function getVantIconName(iconName: string): string {
+  const iconMap: Record<string, string> = {
+    'icon-info-o': 'info-o',
+    'icon-star': 'star',
+    'icon-priority': 'fire',
+  }
+  return iconMap[iconName] || iconName.replace('icon-', '')
+}
+</script>
+
+<template>
+  <div class="prompt-list" :class="[`prompt-list--${direction}`]">
+    <div
+      v-for="item in list"
+      :key="item.value"
+      class="prompt-item"
+      @click="handleItemClick(item)"
+    >
+      <div v-if="item.iconConfig" class="prompt-item__icon">
+        <Icon
+          :name="getVantIconName(item.iconConfig.name)"
+          :color="item.iconConfig.color"
+          size="20"
+        />
+      </div>
+      <div class="prompt-item__content">
+        <div class="prompt-item__label">
+          {{ item.label }}
+        </div>
+        <div v-if="item.desc" class="prompt-item__desc">
+          {{ item.desc }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.prompt-list {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+
+  &--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+}
+
+.prompt-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, rgba(94, 124, 224, 0.05) 0%, rgba(58, 194, 149, 0.05) 100%);
+  border-radius: 12px;
+  border: 1px solid rgba(94, 124, 224, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex: 1;
+  min-width: 0;
+
+  &:hover {
+    background: linear-gradient(135deg, rgba(94, 124, 224, 0.1) 0%, rgba(58, 194, 149, 0.1) 100%);
+    border-color: rgba(94, 124, 224, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(94, 124, 224, 0.15);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #252b3a;
+    line-height: 20px;
+    margin-bottom: 4px;
+  }
+
+  &__desc {
+    font-size: 12px;
+    color: #71757f;
+    line-height: 16px;
+  }
+}
+
+// 水平方向时的特殊样式
+.prompt-list--horizontal {
+  .prompt-item {
+    flex: 1;
+    min-width: 140px;
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+// 垂直方向时的特殊样式
+.prompt-list--vertical {
+  .prompt-item {
+    width: 100%;
+  }
+}
+
+// 简化版样式（用于快捷提示）
+.shortcut-prompt {
+  .prompt-item {
+    padding: 10px 14px;
+    min-width: auto;
+
+    &__icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    &__label {
+      font-size: 13px;
+      margin-bottom: 0;
+    }
+
+    &__desc {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/common/MateChat/components/PromptList/index.ts

@@ -0,0 +1 @@
+export { default as PromptList } from './PromptList.vue'

package/src/components/common/MateChat/useMateChat.ts

@@ -0,0 +1,212 @@
+import type { ChatBizResult, ChatStreamCallbacks } from './apiService'
+import { showToast } from 'vant'
+import { ref } from 'vue'
+import { chatBiz, chatCompletionsStream } from './apiService'
+
+/**
+ * MateChat 组件内部使用的消息结构
+ */
+export interface MateChatMessage {
+  from: 'user' | 'model' | 'service'
+  content: string
+  loading?: boolean
+}
+
+/**
+ * 封装 MateChat 核心对话逻辑的组合式函数
+ * - 负责 startPage / inputValue / messages 等状态
+ * - 根据 useStream 决定使用非流式(chatBiz)还是流式(chatCompletionsStream)
+ */
+export function useMateChat(options?: { useStream?: boolean }) {
+  const startPage = ref(true)
+  const inputValue = ref('')
+  const messages = ref<MateChatMessage[]>([])
+  const useStream = options?.useStream === true
+
+  /**
+   * 新建会话：回到起始页并清空历史消息
+   */
+  function newConversation() {
+    startPage.value = true
+    messages.value = []
+  }
+
+  /**
+   * 发送一条消息
+   * - 推入用户消息
+   * - 添加一条 loading 的模型消息
+   * - 根据 useStream 调用对应的接口
+   */
+  async function onSubmit(evt: string) {
+    if (!evt.trim()) {
+      return
+    }
+
+    inputValue.value = ''
+    startPage.value = false
+
+    // 用户发送消息
+    messages.value.push({
+      from: 'user',
+      content: evt,
+    })
+
+    // 添加 loading 状态的 model 消息
+    const loadingMessageIndex = messages.value.length
+    messages.value.push({
+      from: 'model',
+      content: '',
+      loading: true,
+    })
+
+    if (!useStream) {
+      // 非流式：一次性拿到完整结果
+      try {
+        const result: ChatBizResult = await chatBiz(evt)
+
+        if (result.type === 'transfer') {
+          // 移除 loading 消息
+          messages.value.splice(loadingMessageIndex, 1)
+          // 添加人工客服消息
+          messages.value.push({
+            from: 'service',
+            content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。',
+          })
+        }
+        else {
+          // 正常消息：替换 loading 为模型回复
+          messages.value[loadingMessageIndex] = {
+            from: 'model',
+            content: result.content,
+            loading: false,
+          }
+        }
+      }
+      catch (error: any) {
+        // 处理错误
+        console.error('聊天请求失败:', error)
+        messages.value[loadingMessageIndex] = {
+          from: 'model',
+          content: '抱歉，服务暂时不可用，请稍后再试。',
+          loading: false,
+        }
+        showToast(error?.message || '请求失败，请稍后再试')
+      }
+
+      return
+    }
+
+    // 流式：使用 FastGPT SSE，增量更新最后一条模型消息内容，并在前缀为 {"msgType":"transfer"} 时转人工
+    const transferPrefix = '{"msgType":"transfer"'
+    let checkedTransfer = false
+    let transferHandled = false
+    let prefixBuffer = ''
+
+    const callbacks: ChatStreamCallbacks = {
+      onMessage(chunk) {
+        if (transferHandled) {
+          return
+        }
+
+        // 尚未判断是否为转人工前缀
+        if (!checkedTransfer) {
+          const trimmed = chunk.trimStart()
+          if (!trimmed) {
+            // 纯空白，等待下一帧
+            return
+          }
+
+          // 第一个有效字符不是 { ，本次不会是转人工 JSON，后续直接按普通文本处理
+          if (!prefixBuffer && trimmed[0] !== '{') {
+            checkedTransfer = true
+            const msg = messages.value[loadingMessageIndex]
+            if (!msg) {
+              return
+            }
+            msg.content += chunk
+            msg.loading = true
+            return
+          }
+
+          // 有可能是 JSON，累积前缀做精准匹配
+          prefixBuffer += trimmed
+
+          // 如果当前前缀还是 transferPrefix 的前缀，继续等后续 chunk
+          if (transferPrefix.startsWith(prefixBuffer)) {
+            // 还没完整匹配上整个标识，继续等待
+            if (prefixBuffer.length < transferPrefix.length) {
+              return
+            }
+          }
+
+          if (prefixBuffer.startsWith(transferPrefix)) {
+            // 确认是转人工：移除 loading 模型气泡，插入客服气泡
+            messages.value.splice(loadingMessageIndex, 1)
+            messages.value.push({
+              from: 'service',
+              content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。',
+            })
+            transferHandled = true
+            checkedTransfer = true
+            return
+          }
+
+          // 前缀与约定不匹配，当作普通内容处理，并不再尝试转人工识别
+          checkedTransfer = true
+          const msg = messages.value[loadingMessageIndex]
+          if (!msg) {
+            return
+          }
+          msg.content += prefixBuffer
+          msg.loading = true
+          prefixBuffer = ''
+          return
+        }
+
+        // 已经判断过不会转人工，正常流式追加内容
+        const msg = messages.value[loadingMessageIndex]
+        if (!msg) {
+          return
+        }
+        msg.content += chunk
+        msg.loading = true
+      },
+      onComplete() {
+        if (transferHandled) {
+          return
+        }
+        const msg = messages.value[loadingMessageIndex]
+        if (!msg) {
+          return
+        }
+        msg.loading = false
+      },
+      onError(error) {
+        console.error('聊天请求失败:', error)
+        const msg = messages.value[loadingMessageIndex]
+        if (!msg) {
+          return
+        }
+        msg.content = '抱歉，服务暂时不可用，请稍后再试。'
+        msg.loading = false
+        showToast((error as any)?.message || '请求失败，请稍后再试')
+      },
+    }
+
+    try {
+      await chatCompletionsStream(evt, callbacks)
+    }
+    catch (error: any) {
+      // 兜底错误处理（理论上 callbacks.onError 已经处理）
+      console.error('聊天流式请求异常:', error)
+    }
+  }
+
+  return {
+    startPage,
+    inputValue,
+    messages,
+    newConversation,
+    onSubmit,
+  }
+}