af-mobile-client-vue3 1.4.53 → 1.4.55

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

@@ -0,0 +1,429 @@
+<script setup lang="ts">
+import type { MateChatConfig, MateChatConfigs } from '@af-mobile-client-vue3/components/common/MateChat/types'
+import MateChatContent from '@af-mobile-client-vue3/components/common/MateChat/components/MateChatContent.vue'
+import PasswordDialog from '@af-mobile-client-vue3/components/common/MateChat/components/PasswordDialog.vue'
+import { usePasswordManager } from '@af-mobile-client-vue3/components/common/MateChat/composables/usePasswordManager'
+import { getConfigByNameAsync } from '@af-mobile-client-vue3/services/api/common'
+// MateChat ai 对话相关
+import { showFailToast, Button as VanButton, Icon as VanIcon, Loading as VanLoading } from 'vant'
+import { computed, defineProps, onMounted, ref } from 'vue'
+
+interface MateChatProps {
+  /**
+   * 配置名称，用于从配置中心获取配置
+   */
+  configName: string
+  /**
+   * 服务名
+   */
+  serviceName?: string
+}
+
+const props = defineProps<MateChatProps>()
+
+// 使用密码管理 composable
+const { getStoredPassword, savePassword, clearPassword } = usePasswordManager()
+
+// 配置加载状态
+const isLoading = ref(true)
+const configError = ref<string | null>(null)
+const showPasswordDialog = ref(false)
+const passwordDialogRef = ref<InstanceType<typeof PasswordDialog> | null>(null)
+
+// 临时变量：强制保持 loading 状态（用于调整 loading 样式）
+// 设置为 true 时，组件将始终保持 loading 状态
+const forceLoading = ref(false)
+
+// 计算最终的 loading 状态
+// 当有错误时也应该保持 loading 状态（显示错误信息），而不是显示对话页面
+const finalLoading = computed(() => forceLoading.value || isLoading.value || !!configError.value)
+
+// 当前使用的配置
+const currentConfig = ref<MateChatConfig | null>(null)
+
+// 存储原始配置数据
+const rawConfigs = ref<MateChatConfigs | MateChatConfig | null>(null)
+
+/**
+ * 检查配置对象中是否有密码保护的配置
+ */
+function hasPasswordProtectedConfig(configs: MateChatConfigs | MateChatConfig | null): boolean {
+  if (!configs) {
+    return false
+  }
+  if (Array.isArray(configs)) {
+    return configs.some(config => !!config.password)
+  }
+  if (typeof configs === 'object' && configs !== null) {
+    // 如果是配置对象集合
+    return Object.values(configs).some((config) => {
+      if (typeof config === 'object' && config !== null && 'password' in config) {
+        return !!config.password
+      }
+      return false
+    })
+  }
+  // 单个配置对象
+  return !!(configs as MateChatConfig).password
+}
+
+/**
+ * 根据密码匹配配置
+ */
+function findConfigByPassword(
+  configs: MateChatConfigs | MateChatConfig | null,
+  password: string,
+): MateChatConfig | null {
+  if (!configs) {
+    return null
+  }
+  if (typeof configs === 'object' && configs !== null) {
+    // 如果是配置对象集合（MateChatConfigs）
+    if (props.configName in configs) {
+      const targetConfig = (configs as MateChatConfigs)[props.configName]
+      if (targetConfig && targetConfig.password === password) {
+        return targetConfig
+      }
+    }
+    // 遍历所有配置查找匹配的密码
+    for (const config of Object.values(configs)) {
+      if (typeof config === 'object' && config !== null && 'password' in config) {
+        if (config.password === password) {
+          return config as MateChatConfig
+        }
+      }
+    }
+  }
+  // 单个配置对象
+  const singleConfig = configs as MateChatConfig
+  if (singleConfig && singleConfig.password === password) {
+    return singleConfig
+  }
+  return null
+}
+
+/**
+ * 获取配置（无密码保护时）
+ */
+function getConfigWithoutPassword(
+  configs: MateChatConfigs | MateChatConfig | null,
+): MateChatConfig | null {
+  if (!configs) {
+    return null
+  }
+  if (typeof configs === 'object' && configs !== null) {
+    // 如果是配置对象集合，根据 configName 获取
+    if (props.configName in configs) {
+      return (configs as MateChatConfigs)[props.configName]
+    }
+    // 如果没有找到，返回第一个配置
+    const firstConfig = Object.values(configs)[0]
+    if (firstConfig && typeof firstConfig === 'object' && 'appId' in firstConfig) {
+      return firstConfig as MateChatConfig
+    }
+  }
+  // 单个配置对象，直接返回
+  return configs as MateChatConfig
+}
+
+/**
+ * 处理密码确认
+ */
+function handlePasswordConfirm(password: string) {
+  if (!rawConfigs.value) {
+    showFailToast('配置数据异常')
+    return
+  }
+
+  const matchedConfig = findConfigByPassword(rawConfigs.value, password)
+  if (matchedConfig) {
+    // 验证配置的有效性
+    if (!validateConfig(matchedConfig)) {
+      configError.value = '配置不完整，请联系管理员检查配置'
+      showPasswordDialog.value = false
+      isLoading.value = false
+      return
+    }
+    // 验证成功，保存密码
+    savePassword(password)
+    currentConfig.value = matchedConfig
+    showPasswordDialog.value = false
+    isLoading.value = false
+  }
+  else {
+    // 验证失败，清除保存的密码
+    clearPassword()
+    // 清空输入框并显示错误，保持对话框打开
+    passwordDialogRef.value?.clearPassword()
+    passwordDialogRef.value?.setError('密码错误，请重新输入')
+  }
+}
+
+/**
+ * 处理密码取消
+ */
+function handlePasswordCancel() {
+  // 取消时保持 loading 状态，不加载配置
+  showPasswordDialog.value = false
+}
+
+/**
+ * 验证配置的有效性
+ * @param config 配置对象
+ * @returns 如果配置有效返回 true，否则返回 false
+ */
+function validateConfig(config: MateChatConfig | null): boolean {
+  if (!config) {
+    return false
+  }
+
+  // 检查必需的字段
+  if (!config.appId || typeof config.appId !== 'string' || config.appId.trim() === '') {
+    return false
+  }
+
+  if (!config.appKey || typeof config.appKey !== 'string' || config.appKey.trim() === '') {
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 获取友好的错误提示信息
+ */
+function getFriendlyErrorMessage(error: string | null): string {
+  if (!error) {
+    return '加载配置失败，请稍后再试'
+  }
+
+  // 根据错误信息返回更友好的提示
+  if (error.includes('未找到') || error.includes('资源')) {
+    return '未找到相关配置，请联系管理员'
+  }
+
+  if (error.includes('网络') || error.includes('请求')) {
+    return '网络连接异常，请检查网络后重试'
+  }
+
+  if (error.includes('超时')) {
+    return '请求超时，请稍后重试'
+  }
+
+  // 默认返回原始错误信息，但可以稍作优化
+  return error.length > 50 ? `${error.substring(0, 50)}...` : error
+}
+
+/**
+ * 处理重试
+ */
+function handleRetry() {
+  loadConfig()
+}
+
+/**
+ * 加载配置
+ */
+async function loadConfig() {
+  try {
+    isLoading.value = true
+    configError.value = null
+
+    const configs = await getConfigByNameAsync(props.configName, props.serviceName)
+
+    // 检查配置是否为空或无效
+    if (!configs) {
+      configError.value = '未找到有效配置'
+      isLoading.value = false
+      return
+    }
+
+    rawConfigs.value = configs
+
+    // 检查是否有密码保护的配置
+    if (hasPasswordProtectedConfig(configs)) {
+      // 尝试从 localStorage 读取保存的密码
+      const storedPassword = getStoredPassword()
+      if (storedPassword) {
+        // 自动验证保存的密码
+        const matchedConfig = findConfigByPassword(configs, storedPassword)
+        if (matchedConfig) {
+          // 验证配置的有效性
+          if (validateConfig(matchedConfig)) {
+            // 验证成功，直接加载配置
+            currentConfig.value = matchedConfig
+            isLoading.value = false
+            return
+          }
+          else {
+            // 配置无效，清除密码并显示对话框
+            clearPassword()
+            showPasswordDialog.value = true
+            return
+          }
+        }
+        else {
+          // 密码不匹配，清除保存的密码并显示对话框
+          clearPassword()
+          showPasswordDialog.value = true
+          return
+        }
+      }
+      // 没有保存的密码，显示密码输入对话框
+      showPasswordDialog.value = true
+      // 保持 loading 状态，等待密码验证
+      return
+    }
+
+    // 没有密码保护，直接加载配置
+    const config = getConfigWithoutPassword(configs)
+    if (config) {
+      // 验证配置的有效性
+      if (!validateConfig(config)) {
+        configError.value = '配置不完整，请联系管理员检查配置'
+        isLoading.value = false
+        return
+      }
+      currentConfig.value = config
+      isLoading.value = false
+    }
+    else {
+      configError.value = '未找到有效配置'
+      isLoading.value = false
+    }
+  }
+  catch (error: any) {
+    console.error('加载配置失败:', error)
+    configError.value = error?.message || '加载配置失败，请稍后再试'
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  loadConfig()
+})
+</script>
+
+<template>
+  <div id="mate-chat-view">
+    <!-- 密码输入对话框 -->
+    <PasswordDialog
+      ref="passwordDialogRef"
+      :visible="showPasswordDialog"
+      @confirm="handlePasswordConfirm"
+      @cancel="handlePasswordCancel"
+    />
+    <!-- Loading 状态 -->
+    <div v-if="finalLoading" class="loading-container">
+      <div v-if="configError" class="error-container">
+        <VanIcon name="warning-o" size="48" class="error-icon" />
+        <div class="error-title">
+          抱歉，加载失败
+        </div>
+        <div class="error-message">
+          {{ getFriendlyErrorMessage(configError) }}
+        </div>
+        <VanButton
+          type="primary"
+          size="small"
+          class="retry-button"
+          @click="handleRetry"
+        >
+          重试
+        </VanButton>
+      </div>
+      <VanLoading v-else vertical>
+        <template #icon>
+          <VanIcon name="star-o" size="30" />
+        </template>
+        加载中...
+      </VanLoading>
+    </div>
+    <!-- 对话内容 -->
+    <MateChatContent
+      v-else-if="currentConfig"
+      :config="currentConfig"
+    />
+  </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;
+
+  /* 移动端适配 */
+  @media (max-width: 768px) {
+    padding: 8px;
+  }
+
+  .loading-container {
+    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);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    padding: 20px;
+    box-sizing: border-box;
+
+    /* 移动端适配 */
+    @media (max-width: 768px) {
+      height: calc(100vh - 16px);
+      border-radius: 16px;
+      padding: 8px;
+    }
+
+    .loading-message {
+      font-size: 14px;
+      color: #71757f;
+      text-align: center;
+    }
+
+    .error-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      text-align: center;
+
+      .error-icon {
+        color: #ff9800;
+        margin-bottom: 16px;
+      }
+
+      .error-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #323233;
+        margin-bottom: 8px;
+      }
+
+      .error-message {
+        font-size: 14px;
+        color: #969799;
+        line-height: 1.5;
+        margin-bottom: 24px;
+        max-width: 280px;
+      }
+
+      .retry-button {
+        min-width: 100px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,236 @@
+/**
+ * MateChat 提示项接口
+ */
+export interface MateChatPromptItem {
+  value: string
+  label: string
+  iconConfig?: {
+    name: string
+    color?: string
+  }
+  desc?: string
+}
+
+/**
+ * MateChat 配置接口
+ */
+export interface MateChatConfig {
+  /**
+   * 可选密码，如果存在则需要密码验证
+   */
+  password?: string
+  /**
+   * FastGPT 应用 ID
+   */
+  appId: string
+  /**
+   * FastGPT API Key
+   */
+  appKey: string
+  /**
+   * 介绍文案
+   */
+  description: string[]
+  /**
+   * 首屏推荐问题列表
+   */
+  introPrompt: MateChatPromptItem[]
+  /**
+   * 底部快捷问题列表
+   */
+  simplePrompt: MateChatPromptItem[]
+  /**
+   * 客服名称
+   */
+  serviceName: string
+  /**
+   * 是否使用流式对话
+   */
+  useStream: boolean
+}
+
+/**
+ * 配置中心返回的多个配置对象
+ * key 为配置名称，value 为 MateChatConfig
+ */
+export type MateChatConfigs = Record<string, MateChatConfig>
+
+// ==================== API 相关类型定义 ====================
+
+/**
+ * 聊天消息接口
+ */
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+}
+
+/**
+ * 聊天请求参数接口
+ */
+export interface ChatCompletionsRequest {
+  chatId: string
+  stream: boolean
+  detail: boolean
+  messages: ChatMessage[]
+  customUid?: string
+}
+
+/**
+ * 聊天响应使用情况接口
+ */
+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
+}
+
+/**
+ * 历史会话项接口
+ */
+export interface ChatHistoryItem {
+  chatId: string
+  updateTime: string
+  appId: string
+  customTitle: string
+  title: string
+  top: boolean
+  [key: string]: any
+}
+
+/**
+ * 历史会话查询请求参数接口
+ */
+export interface GetHistoriesRequest {
+  appId: string
+  outLinkUid: string
+  offset: number
+  pageSize: number
+  source: string
+}
+
+/**
+ * 历史会话查询响应接口
+ */
+export interface GetHistoriesResponse {
+  code: number
+  statusText: string
+  message: string
+  data: {
+    list: ChatHistoryItem[]
+    total: number
+  }
+}
+
+/**
+ * 历史会话记录项接口
+ */
+export interface ChatRecordItem {
+  _id: string
+  dataId: string
+  hideInUI: boolean
+  obj: 'Human' | 'AI'
+  value: Array<{
+    type: string
+    text: {
+      content: string
+    }
+  }>
+  customFeedbacks: any[]
+  time: string
+  durationSeconds?: number
+  llmModuleAccount?: number
+  totalQuoteList?: any[]
+  historyPreviewLength?: number
+  [key: string]: any
+}
+
+/**
+ * 获取历史会话记录请求参数接口
+ */
+export interface GetPaginationRecordsRequest {
+  appId: string
+  chatId: string
+  offset: number
+  pageSize: number
+  loadCustomFeedbacks: boolean
+}
+
+/**
+ * 获取历史会话记录响应接口
+ */
+export interface GetPaginationRecordsResponse {
+  code: number
+  statusText: string
+  message: string
+  data: {
+    list: ChatRecordItem[]
+    total: number
+  }
+}
+
+// ==================== MateChat 组件内部类型 ====================
+
+/**
+ * MateChat 组件内部使用的消息结构
+ */
+export interface MateChatMessage {
+  from: 'user' | 'model' | 'service'
+  content: string
+  loading?: boolean
+}