af-mobile-client-vue3 1.4.53 → 1.4.55

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

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { MateChatConfig } from '@af-mobile-client-vue3/components/common/MateChat/types'
+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'
+import { useMateChat } from '@af-mobile-client-vue3/components/common/MateChat/composables/useMateChat'
+import { useDebounceFn } from '@vueuse/core'
+import { Button as VanButton } from 'vant'
+import { computed, nextTick, ref, watch } from 'vue'
+import 'vant/es/image-preview/style'
+
+interface MateChatContentProps {
+  /**
+   * 完整的配置对象
+   */
+  config: MateChatConfig
+}
+
+const props = defineProps<MateChatContentProps>()
+
+// 从配置中获取的值
+const description = computed(() => props.config.description || [])
+const introPrompt = computed(() => props.config.introPrompt || [])
+const simplePrompt = computed(() => props.config.simplePrompt || [])
+const serviceName = computed(() => props.config.serviceName || '智能客服')
+const useStream = computed(() => props.config.useStream || false)
+
+// 初始化 useMateChat
+const mateChatInstance = useMateChat(props.config)
+
+const startPage = computed(() => mateChatInstance.startPage.value)
+const inputValue = computed({
+  get: () => mateChatInstance.inputValue.value,
+  set: (val: string) => {
+    mateChatInstance.inputValue.value = val
+  },
+})
+const messages = computed(() => mateChatInstance.messages.value)
+const newConversation = () => mateChatInstance.newConversation()
+const onSubmit = (evt: string) => mateChatInstance.onSubmit(evt)
+
+// 消息容器的 ref
+const messageContainerRef = ref<HTMLElement | null>(null)
+// 滚动锚点的 ref
+const scrollAnchorRef = ref<HTMLElement | null>(null)
+
+/**
+ * 滚动到底部
+ */
+function scrollToBottom() {
+  nextTick(() => {
+    // 优先使用滚动锚点元素滚动到底部（最可靠）
+    if (scrollAnchorRef.value) {
+      scrollAnchorRef.value.scrollIntoView({ behavior: 'smooth', block: 'end' })
+      return
+    }
+
+    // 使用 ref 获取容器并滚动
+    const container = messageContainerRef.value
+    if (container instanceof HTMLElement) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      })
+    }
+  })
+}
+
+// 使用防抖处理滚动函数，延迟 100ms
+const debouncedScrollToBottom = useDebounceFn(scrollToBottom, 100)
+
+// 计算最后一条消息的长度
+const lastMessageLength = computed(() => {
+  const msgList = messages.value
+  if (msgList.length === 0) {
+    return 0
+  }
+  const lastMsg = msgList[msgList.length - 1]
+  return lastMsg?.content?.length || 0
+})
+
+// 监听消息数量和最后一条消息的长度变化，自动滚动到底部
+// 使用 immediate: false 避免初始化时滚动
+watch(
+  [() => messages.value.length, lastMessageLength],
+  () => {
+    debouncedScrollToBottom()
+  },
+  { flush: 'post' },
+)
+
+/**
+ * 处理历史会话选择
+ */
+function handleSelectSession(session: { chatId: string, title: string, lastTime: string }) {
+  mateChatInstance.loadHistoryMessages(session.chatId)
+  // 加载历史消息后也需要滚动到底部
+  // 使用防抖版本，避免频繁滚动
+  debouncedScrollToBottom()
+}
+</script>
+
+<template>
+  <McLayout class="chat-card">
+    <MateChatHeader
+      :show-title="!startPage"
+      :logo-image="liuliLogo"
+      :title="serviceName"
+      :app-id="props.config.appId"
+      :app-key="props.config.appKey"
+      @select-session="handleSelectSession"
+    />
+    <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 ref="messageContainerRef" 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>
+      <!-- 滚动锚点 -->
+      <div ref="scrollAnchorRef" class="scroll-anchor" />
+    </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>
+</template>
+
+<style scoped lang="less">
+.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) {
+  .chat-card {
+    height: calc(100vh - 16px);
+    border-radius: 16px;
+    padding: 8px;
+  }
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+}
+
+.scroll-anchor {
+  height: 1px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.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/components/MateChatHeader.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import type { ChatHistoryItem } from '@af-mobile-client-vue3/components/common/MateChat/types'
+import { getHistories } from '@af-mobile-client-vue3/components/common/MateChat/apiService'
+import { useChatHistoryCache } from '@af-mobile-client-vue3/components/common/MateChat/composables/useChatHistoryCache'
+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
+  /**
+   * FastGPT 应用 ID
+   */
+  appId: string
+  /**
+   * FastGPT API Key
+   */
+  appKey: string
+  /**
+   * 是否显示标题
+   */
+  showTitle: boolean
+}
+
+interface SessionItem {
+  chatId: string
+  title: string
+  lastTime: string
+}
+
+interface Emits {
+  /**
+   * 选择某条历史会话
+   */
+  (e: 'selectSession', session: SessionItem): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  historyTitle: '对话历史',
+})
+
+const emit = defineEmits<Emits>()
+
+const showHistory = ref(false)
+const isLoading = ref(false)
+const sessionList = ref<SessionItem[]>([])
+
+// 使用历史会话缓存
+const { getCachedHistory, setCachedHistory } = useChatHistoryCache()
+
+function handleOpenHistory() {
+  showHistory.value = true
+  fetchSessions()
+}
+
+function handleSelectSession(session: SessionItem) {
+  emit('selectSession', session)
+  showHistory.value = false
+}
+
+/**
+ * 格式化时间字符串为日期时间字符串
+ */
+function formatDateTime(timeString: string): string {
+  try {
+    const date = new Date(timeString)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}`
+  }
+  catch {
+    return timeString
+  }
+}
+
+/**
+ * 将接口返回的历史会话数据转换为组件需要的格式
+ */
+function transformHistoryItem(item: ChatHistoryItem): SessionItem {
+  return {
+    chatId: item.chatId || '',
+    title: item.title || item.customTitle || '未命名会话',
+    lastTime: item.updateTime ? formatDateTime(item.updateTime) : '',
+  }
+}
+
+async function fetchSessions() {
+  // 先检查缓存
+  const cachedList = getCachedHistory(props.appId, props.appKey)
+  if (cachedList) {
+    // 使用缓存数据
+    sessionList.value = cachedList.map(transformHistoryItem)
+    return
+  }
+
+  // 缓存不存在或已过期，从服务器获取
+  isLoading.value = true
+  try {
+    const response = await getHistories(props.appId, props.appKey, 0, 5)
+
+    // 转换数据格式
+    if (response.data?.list && Array.isArray(response.data.list)) {
+      // 缓存数据
+      setCachedHistory(props.appId, props.appKey, response.data.list)
+      sessionList.value = response.data.list.map(transformHistoryItem)
+    }
+    else {
+      sessionList.value = []
+      // 缓存空数组，避免重复请求
+      setCachedHistory(props.appId, props.appKey, [])
+    }
+  }
+  catch (error) {
+    console.error('获取历史会话失败:', error)
+    sessionList.value = []
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="matechat-header-wrapper">
+    <McHeader :logo-img="showTitle ? props.logoImage : ''" :title="showTitle ? 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.chatId"
+                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/PasswordDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { Dialog as VanDialog, Field as VanField, Icon as VanIcon } from 'vant'
+import { ref, watch } from 'vue'
+
+interface PasswordDialogProps {
+  visible: boolean
+}
+
+const props = defineProps<PasswordDialogProps>()
+
+const emit = defineEmits<{
+  (event: 'confirm', password: string): void
+  (event: 'cancel'): void
+}>()
+
+const password = ref('')
+const showPassword = ref(false)
+const errorMessage = ref('')
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    password.value = ''
+    errorMessage.value = ''
+    showPassword.value = false
+  }
+})
+
+function handleConfirm() {
+  if (!password.value.trim()) {
+    errorMessage.value = '请输入密码'
+    return
+  }
+  emit('confirm', password.value.trim())
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+function togglePasswordVisibility() {
+  showPassword.value = !showPassword.value
+}
+
+/**
+ * 清空密码输入框和错误信息
+ */
+function clearPassword() {
+  password.value = ''
+  errorMessage.value = ''
+  showPassword.value = false
+}
+
+/**
+ * 设置错误信息
+ */
+function setError(message: string) {
+  errorMessage.value = message
+}
+
+// 暴露方法供父组件调用
+defineExpose({
+  clearPassword,
+  setError,
+})
+</script>
+
+<template>
+  <VanDialog
+    :show="visible"
+    title="请输入密码"
+    show-cancel-button
+    confirm-button-text="确定"
+    cancel-button-text="取消"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+    @update:show="(val: boolean) => emit('cancel')"
+  >
+    <div style="padding: 16px 0">
+      <VanField
+        v-model="password"
+        :type="showPassword ? 'text' : 'password'"
+        placeholder="请输入密码"
+        :error="!!errorMessage"
+        :error-message="errorMessage"
+        @update:model-value="errorMessage = ''"
+        @keyup.enter="handleConfirm"
+      >
+        <template #right-icon>
+          <VanIcon
+            :name="showPassword ? 'eye-o' : 'closed-eye'"
+            @click="togglePasswordVisibility"
+          />
+        </template>
+      </VanField>
+    </div>
+  </VanDialog>
+</template>