af-mobile-client-vue3 1.4.53 → 1.4.54

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.4.53",
+  "version": "1.4.54",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/App.vue

@@ -7,9 +7,21 @@ import { useHead } from '@unhead/vue'
 import {
   ConfigProvider as VanConfigProvider,
 } from 'vant/es'
-import { computed } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
+import { useRoute } from 'vue-router'
 import { appDescription, appName } from './constants'
 
+const instance = getCurrentInstance()
+const route = useRoute()
+
+// 是否使用 fullPath 作为 component key
+// 配置：是否使用 fullPath 作为 router-view 的 component key
+// 该配置作用为：区分keep-alive缓存组件，为true时 如果跳转相同的缓存组件但是url携带参数不同 就会进行区分。反之则会只会根据路由名称进行命中
+// 普通走基座的项目无需进行设置，只有特殊的单项目部署的服务 需要固定缓存顶层组件时进行开启，例如微信-开启方式在自己项目的main.ts中增加 app.config.globalProperties.$useFullPathKey = false
+const useFullPathKey = computed(() => {
+  return instance?.appContext.config.globalProperties.$useFullPathKey ?? true
+})
+
 useHead({
   title: appName,
   meta: [
@@ -48,7 +60,7 @@ const mode = computed(() => {
     <router-view v-slot="{ Component }">
       <section class="app-wrapper">
         <keep-alive :include="keepAliveRouteNames" :max="5">
-          <component :is="Component" :key="$route.fullPath" />
+          <component :is="Component" :key="useFullPathKey ? route.fullPath : undefined" />
         </keep-alive>
       </section>
     </router-view>

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

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import liuliLogo from '@af-mobile-client-vue3/assets/img/component/liuli.png'
+import userAvatarImg from '@af-mobile-client-vue3/components/common/MateChat/assets/035-avatar-13.svg'
+import MateChatHeader from '@af-mobile-client-vue3/components/common/MateChat/components/MateChatHeader.vue'
+import { PromptList } from '@af-mobile-client-vue3/components/common/MateChat/components/PromptList'
+// MateChat ai 对话相关
+import { Button as VanButton } from 'vant'
+import { defineProps, toRefs, withDefaults } from 'vue'
+import { useMateChat } from './useMateChat'
+import 'vant/es/image-preview/style'
+
+interface MateChatPromptItem {
+  value: string
+  label: string
+  iconConfig?: {
+    name: string
+    color?: string
+  }
+  desc?: string
+}
+
+interface MateChatProps {
+  /**
+   * 介绍文案，不传或为空数组时不展示 McIntroduction
+   */
+  description?: string[]
+  /**
+   * 首屏推荐问题列表
+   */
+  introPrompt?: MateChatPromptItem[]
+  /**
+   * 底部快捷问题列表
+   */
+  simplePrompt?: MateChatPromptItem[]
+  /**
+   * 客服名称，默认：智能能客服
+   */
+  serviceName?: string
+  /**
+   * 是否使用流式对话
+   */
+  useStream?: boolean
+}
+
+const props = withDefaults(defineProps<MateChatProps>(), {
+  description: () => [],
+  introPrompt: () => [],
+  simplePrompt: () => [],
+  serviceName: '智能客服',
+  useStream: false,
+})
+
+const { description, introPrompt, simplePrompt, serviceName, useStream } = toRefs(props)
+
+const {
+  startPage,
+  inputValue,
+  messages,
+  newConversation,
+  onSubmit,
+} = useMateChat({
+  useStream: useStream.value,
+})
+</script>
+
+<template>
+  <div id="mate-chat-view">
+    <McLayout class="chat-card">
+      <MateChatHeader
+        v-if="!startPage"
+        :logo-image="liuliLogo"
+        :title="serviceName"
+      />
+      <McLayoutContent
+        v-if="startPage"
+        style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
+      >
+        <McIntroduction
+          v-if="description && description.length"
+          :logo-img="liuliLogo"
+          :title="serviceName"
+          :sub-title="`Hi，我是${serviceName}`"
+          :description="description"
+          class="McIntroduction"
+        />
+        <PromptList
+          v-if="introPrompt && introPrompt.length"
+          :list="introPrompt"
+          @item-click="onSubmit($event.label)"
+        />
+      </McLayoutContent>
+      <McLayoutContent v-else class="content-container">
+        <template v-for="(msg, idx) in messages" :key="idx">
+          <McBubble
+            v-if="msg.from === 'user'"
+            :content="msg.content"
+            align="right"
+            :avatar-config="{ imgSrc: userAvatarImg }"
+          />
+          <McBubble
+            v-else-if="msg.from === 'service'"
+            :content="msg.content"
+            :avatar-config="{ imgSrc: userAvatarImg }"
+          />
+          <McBubble v-else :content="msg.content" :avatar-config="{ imgSrc: liuliLogo }" :loading="msg.loading">
+            <McMarkdownCard
+              :content="msg.content"
+              :typing="!useStream"
+            />
+          </McBubble>
+        </template>
+      </McLayoutContent>
+      <div class="shortcut" style="display: flex; align-items: center; gap: 8px">
+        <PromptList
+          v-if="!startPage && simplePrompt && simplePrompt.length"
+          :list="simplePrompt"
+          direction="horizontal"
+          class="shortcut-prompt"
+          style="flex: 1"
+          @item-click="onSubmit($event.label)"
+        />
+        <VanButton
+          style="margin-left: auto"
+          icon="add"
+          title="新建对话"
+          size="small"
+          round
+          @click="newConversation"
+        />
+      </div>
+      <McLayoutSender>
+        <McInput
+          :value="inputValue"
+          placeholder="请输入您的问题，我会为您解答"
+          :max-length="2000"
+          @change="(e) => (inputValue = e)"
+          @submit="onSubmit"
+        />
+      </McLayoutSender>
+    </McLayout>
+  </div>
+</template>
+
+<style scoped lang="less">
+#mate-chat-view {
+  /* 外层渐变背景容器 */
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(to bottom, #a8f0ed 0%, #a8e6cf 8%, #c5b3ff 12%, #e0b3ff 40%, #fff4b8 60%, #ffb8d1 90%);
+  /* background: linear-gradient(to bottom, #d0c9ff 0%, #e6d6f0 8%, #f1dbea 12%, #c8dcfb 40%, #abc6f6 60%, #87aefe 90%); */
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+
+  /* 中间白色圆角卡片 */
+  .chat-card {
+    width: 100%;
+    max-width: 1200px;
+    height: calc(100vh - 40px);
+    background: #ffffff;
+    border-radius: 24px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s ease;
+    padding: 20px;
+    gap: 8px;
+  }
+
+  .chat-card:hover {
+    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
+  }
+
+  /* 移动端适配 */
+  @media (max-width: 768px) {
+    padding: 8px;
+    .chat-card {
+      height: calc(100vh - 16px);
+      border-radius: 16px;
+      padding: 8px;
+    }
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: auto;
+  }
+
+  .input-foot-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    margin-right: 8px;
+
+    .input-foot-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        font-size: 14px;
+        line-height: 18px;
+        color: #252b3a;
+        cursor: pointer;
+      }
+
+      .input-foot-dividing-line {
+        width: 1px;
+        height: 14px;
+        background-color: #d7d8da;
+      }
+
+      .input-foot-maxlength {
+        font-size: 14px;
+        color: #71757f;
+      }
+    }
+
+    .input-foot-right {
+      .demo-button-content {
+        font-size: 14px;
+      }
+
+      & > *:not(:first-child) {
+        margin-left: 8px;
+      }
+    }
+  }
+  :deep(.mc-header-logo-container img) {
+    width: 32px;
+    height: 32px;
+  }
+
+  .McIntroduction {
+    :deep(.mc-introduction-logo-container img) {
+      width: 64px;
+      height: 64px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,254 @@
+import type { AxiosInstance } from 'axios'
+import axios from 'axios'
+
+/**
+ * 聊天消息接口
+ */
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+}
+
+/**
+ * 聊天请求参数接口
+ */
+export interface ChatCompletionsRequest {
+  chatId: string
+  stream: boolean
+  detail: boolean
+  variables: {
+    uid: string
+    name: string
+  }
+  messages: ChatMessage[]
+}
+
+/**
+ * 聊天响应使用情况接口
+ */
+export interface ChatUsage {
+  prompt_tokens: number
+  completion_tokens: number
+  total_tokens: number
+}
+
+/**
+ * 聊天响应选择项接口
+ */
+export interface ChatChoice {
+  message: {
+    role: 'assistant'
+    content: string
+  }
+  finish_reason: string
+  index: number
+}
+
+/**
+ * 聊天响应接口
+ */
+export interface ChatCompletionsResponse {
+  id: string
+  model: string
+  usage: ChatUsage
+  choices: ChatChoice[]
+}
+
+/**
+ * 业务层聊天结果
+ */
+export interface ChatBizResult {
+  /**
+   * normal: 普通回复
+   * transfer: 转人工
+   */
+  type: 'normal' | 'transfer'
+  /**
+   * 大模型原始返回内容
+   */
+  content: string
+}
+
+/**
+ * 流式对话回调
+ */
+export interface ChatStreamCallbacks {
+  /**
+   * 每次收到 FastGPT SSE 的增量内容时触发
+   */
+  onMessage?: (chunk: string) => void
+  /**
+   * 流结束时触发（包括收到 [DONE] 或正常读取结束）
+   */
+  onComplete?: () => void
+  /**
+   * 请求或解析发生异常时触发
+   */
+  onError?: (error: unknown) => void
+}
+
+/**
+ * 创建独立的 axios 实例，不经过拦截器
+ */
+const chatAxiosInstance: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_APP_API_BASE_URL || '',
+  timeout: 20000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+/**
+ * 发送聊天请求
+ * @param content 用户输入的内容
+ * @returns Promise<ChatCompletionsResponse>
+ */
+export function chatCompletions(content: string): Promise<ChatCompletionsResponse> {
+  const requestData: ChatCompletionsRequest = {
+    chatId: 'chatId13333113',
+    stream: false,
+    detail: false,
+    variables: {
+      uid: 'asdfadsfasfd2323',
+      name: '张三',
+    },
+    messages: [
+      {
+        role: 'user',
+        content,
+      },
+    ],
+  }
+
+  return chatAxiosInstance.post<ChatCompletionsResponse>(
+    '/v1/chat/completions',
+    requestData,
+    {
+      headers: {
+        Authorization: 'Bearer fastgpt-f5FO1pkucnrEJvQsP4g8N9V3mUZNI396eiuef5PJjYty4vJztufB1',
+      },
+    },
+  ).then(response => response.data)
+}
+
+/**
+ * 封装后的业务聊天请求
+ * - 负责从大模型返回中解析出业务含义（普通回复 / 转人工）
+ * - UI 层只需要根据 type 决定渲染哪种气泡
+ */
+export async function chatBiz(content: string): Promise<ChatBizResult> {
+  const response = await chatCompletions(content)
+
+  if (!response.choices || response.choices.length === 0) {
+    throw new Error('响应数据格式错误')
+  }
+
+  const text = response.choices[0].message.content
+
+  try {
+    const parsed = JSON.parse(text) as { msgType?: string }
+    if (parsed.msgType === 'transfer') {
+      return {
+        type: 'transfer',
+        content: text,
+      }
+    }
+  }
+  catch {
+    // 忽略解析错误，按普通文本处理
+  }
+
+  return {
+    type: 'normal',
+    content: text,
+  }
+}
+
+/**
+ * 使用 FastGPT /v1/chat/completions 的 stream=true 进行流式对话
+ * 参考官方文档: https://doc.fastgpt.io/docs/introduction/development/openapi/chat
+ */
+export async function chatCompletionsStream(
+  content: string,
+  callbacks: ChatStreamCallbacks,
+): Promise<void> {
+  const { onMessage, onComplete, onError } = callbacks
+
+  const requestData: ChatCompletionsRequest = {
+    chatId: 'chatId13333113',
+    stream: true,
+    detail: false,
+    variables: {
+      uid: 'asdfadsfasfd2323',
+      name: '张三',
+    },
+    messages: [
+      {
+        role: 'user',
+        content,
+      },
+    ],
+  }
+
+  try {
+    const baseUrl = import.meta.env.VITE_APP_API_BASE_URL || ''
+    const res = await fetch(`${baseUrl}/v1/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer fastgpt-f5FO1pkucnrEJvQsP4g8N9V3mUZNI396eiuef5PJjYty4vJztufB1',
+      },
+      body: JSON.stringify(requestData),
+    })
+
+    if (!res.ok || !res.body) {
+      throw new Error(`请求失败: ${res.status}`)
+    }
+
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done)
+        break
+
+      buffer += decoder.decode(value, { stream: true })
+      const lines = buffer.split('\n')
+      buffer = lines.pop() ?? ''
+
+      for (const rawLine of lines) {
+        const line = rawLine.trim()
+        if (!line.startsWith('data:'))
+          continue
+
+        const dataStr = line.slice(5).trim()
+        if (!dataStr || dataStr === '[DONE]') {
+          onComplete?.()
+          return
+        }
+
+        try {
+          const json = JSON.parse(dataStr) as {
+            choices?: Array<{ delta?: { content?: string } }>
+          }
+          const delta = json.choices?.[0]?.delta
+          const chunkText = delta?.content || ''
+          if (chunkText) {
+            onMessage?.(chunkText)
+          }
+        }
+        catch (e) {
+          console.error('解析数据失败', e, dataStr)
+        }
+      }
+    }
+
+    onComplete?.()
+  }
+  catch (error) {
+    console.error('FastGPT 流式请求异常', error)
+    onError?.(error)
+  }
+}

package/src/components/common/MateChat/assets/035-avatar-13.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764664883478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17459" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="192"><path d="M896 803.94V992H128v-188.06a128 128 0 0 1 96.96-124.18L384 640a57.878 57.878 0 0 0 32-51.78V480h192v108.22A57.878 57.878 0 0 0 640 640l159.04 39.76A128 128 0 0 1 896 803.94z" fill="#FDC8A2" p-id="17460"></path><path d="M608 480v101.34l-12.8 17.06c-1.02 1.36-2.08 2.66-3.2 3.92A63.984 63.984 0 0 1 544 624h-64a63.984 63.984 0 0 1-48-21.68c-1.12-1.26-2.18-2.56-3.2-3.92l-12.8-17.06V480z" fill="#FDBF92" p-id="17461"></path><path d="M873.72 731.78a128.2 128.2 0 0 0-74.68-52.02L640 640c-23.12 57.76-75.56 86.66-128 86.66s-104.88-28.9-128-86.66l-159.04 39.76A128 128 0 0 0 128 803.94V992h768v-188.06a127.624 127.624 0 0 0-22.28-72.16z" fill="#E9D6BB" p-id="17462"></path><path d="M672 240v186.66a64.034 64.034 0 0 1-12.8 38.4l-64 85.34c-1.02 1.36-2.08 2.66-3.2 3.92A63.984 63.984 0 0 1 544 576h-64a63.984 63.984 0 0 1-48-21.68c-1.12-1.26-2.18-2.56-3.2-3.92l-64-85.34a64.034 64.034 0 0 1-12.8-38.4V240c0-88.36 71.64-144 160-144 44.18 0 84.18 13.92 113.14 38.86S672 195.82 672 240z" fill="#FDC8A2" p-id="17463"></path><path d="M428 336a28 28 0 1 1 28-28 28.03 28.03 0 0 1-28 28zM596 336a28 28 0 1 1 28-28 28.03 28.03 0 0 1-28 28z" fill="#91563A" p-id="17464"></path><path d="M344 368h8v-112h-8a56 56 0 0 0-56 56 56 56 0 0 0 56 56zM680 256h-8v112h8a56 56 0 0 0 56-56 56 56 0 0 0-56-56z" fill="#FDB683" p-id="17465"></path><path d="M608 128l64 128V144a64 64 0 0 0-64-64zM352 256V128h64z" fill="#2B4266" p-id="17466"></path><path d="M608 80v48H352a79.75 79.75 0 0 1 23.44-56.56 81.26 81.26 0 0 1 12.08-9.94 79.324 79.324 0 0 1 29.62-12.12A80.848 80.848 0 0 1 432 48h124.22A57.878 57.878 0 0 1 608 80z" fill="#34507B" p-id="17467"></path><path d="M880 864h32v128h-32zM802.92 664.238l-157.2-39.3A41.854 41.854 0 0 1 624 588.22v-49.554l48-64.012a80.568 80.568 0 0 0 16-48v-43.11a71.988 71.988 0 0 0 0-143.088V144a80.102 80.102 0 0 0-70.528-79.42A73.4 73.4 0 0 0 556.222 32H432c-27.334 0-51.164 14.36-51.164 14.36l6.34 12.662L408.368 112H370a63.432 63.432 0 0 1 10.8-22.4l-25.6-19.22A95.2 95.2 0 0 0 336 128v112.456a71.988 71.988 0 0 0 0 143.088v43.116a80.578 80.578 0 0 0 16 48l48 64v49.56a41.634 41.634 0 0 1-21.718 36.718l-157.2 39.298A143.8 143.8 0 0 0 112 803.94V992h32v-188.06A111.8 111.8 0 0 1 161.366 744l51.32 51.318 22.628-22.628-53.064-53.07a111.828 111.828 0 0 1 46.6-24.338l146.1-36.526c26.208 52.094 77.538 83.904 137.05 83.904s110.842-31.8 137.058-83.904l146.102 36.528a111.8 111.8 0 0 1 46.6 24.336l-53.064 53.066 22.628 22.628L862.634 744A111.8 111.8 0 0 1 880 803.94V830h32v-26.06a143.786 143.786 0 0 0-109.08-139.702zM720 312a40.076 40.076 0 0 1-32 39.2v-78.4a40.076 40.076 0 0 1 32 39.2z m-64-168v44.222l-32-64v-25.48A48.084 48.084 0 0 1 656 144z m-64-59.904V112h-21.168l-19.2-48S577.5 63 592 84.096zM506.832 112l-19.2-48h29.536l19.2 48z m-53.664-48l19.2 48h-29.536l-18.988-47.47c2.688-0.33 29.324-0.53 29.324-0.53z m-63.056 80L368 188.222V144zM304 312a40.076 40.076 0 0 1 32-39.2v78.4a40.076 40.076 0 0 1-32-39.2z m64 114.66v-166.882L425.888 144h172.224L656 259.778v166.882a48.342 48.342 0 0 1-9.6 28.8s-65.536 87.308-66.4 88.286A47.964 47.964 0 0 1 544 560h-64a48 48 0 0 1-36.04-16.306c-0.822-0.926-66.354-88.228-66.354-88.228A48.35 48.35 0 0 1 368 426.66z m144 284c-36.948 0-83.13-17.29-107.694-64.73A73.42 73.42 0 0 0 432 588.22v-12.242A79.974 79.974 0 0 0 480 592h64a80.018 80.018 0 0 0 48-16.014v12.234a73.79 73.79 0 0 0 27.712 57.676C595.152 693.36 548.956 710.66 512 710.66z" p-id="17468"></path><path d="M512 784c-69.65 0-97.6-39.308-98.76-40.982l-26.552 17.858C388.188 763.126 424.444 816 512 816s123.812-52.874 125.312-55.124l-26.624-17.752C610.414 743.534 582.622 784 512 784zM240 899.43c-19.884-20.152-29.754-54.956-32.2-69.98l-31.6 5.078c0.546 3.426 13.22 79.016 63.8 104.214V992h32v-176h-32zM784 899.43V816h-32v176h32v-53.258c50.578-25.2 63.252-100.788 63.8-104.214l-31.6-5.078c-2.446 15.024-12.316 49.828-32.2 69.98zM456 308a28 28 0 1 0-28 28 28.03 28.03 0 0 0 28-28zM596 336a28 28 0 1 0-28-28 28.03 28.03 0 0 0 28 28zM496 320h32v64h-32zM565.738 446.936l-11.476-29.872c-0.364 0.142-36.8 13.942-72.568 10.14l-3.388 31.82a152.936 152.936 0 0 0 16.2 0.834 220.662 220.662 0 0 0 71.232-12.922z" p-id="17469"></path></svg>