af-mobile-client-vue3 1.4.68 → 1.4.70

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

@@ -1,274 +1,274 @@
-<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 { 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"
-      @new-conversation="newConversation"
-    />
-    <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="msg.typing === true"
-          />
-        </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"
-        variant="shortcut"
-        class="shortcut-prompt"
-        style="flex: 1"
-        @item-click="onSubmit($event.desc)"
-      />
-    </div>
-    <McLayoutSender>
-      <McInput
-        :value="inputValue"
-        placeholder="请输入您的问题，我会为您解答"
-        :max-length="2000"
-        :autosize="true"
-        @change="(e) => (inputValue = e)"
-        @submit="onSubmit"
-      />
-    </McLayoutSender>
-  </McLayout>
-</template>
-
-<style scoped lang="less">
-.chat-card {
-  width: 100%;
-  max-width: 1200px;
-  height: 100%;
-  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 {
-    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>
+<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 { 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"
+      @new-conversation="newConversation"
+    />
+    <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="msg.typing === true"
+          />
+        </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"
+        variant="shortcut"
+        class="shortcut-prompt"
+        style="flex: 1"
+        @item-click="onSubmit($event.desc)"
+      />
+    </div>
+    <McLayoutSender>
+      <McInput
+        :value="inputValue"
+        placeholder="请输入您的问题，我会为您解答"
+        :max-length="2000"
+        :autosize="true"
+        @change="(e) => (inputValue = e)"
+        @submit="onSubmit"
+      />
+    </McLayoutSender>
+  </McLayout>
+</template>
+
+<style scoped lang="less">
+.chat-card {
+  width: 100%;
+  max-width: 1200px;
+  height: 100%;
+  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 {
+    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>