perf: 优化版本

# Conflicts:
#	Yi.Ai.Vue3/index.html

Yi.Ai.Vue3/index.html

@@ -113,7 +113,7 @@
 <!-- 加载动画容器 -->
 <div id="yixinai-loader" class="loader-container">
   <div class="loader-title">意心Ai 2.8</div>
-  <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
+  <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒，无需梯子</div>
   <div class="loader-logo">
     <div class="pulse-box"></div>
   </div>

Yi.Ai.Vue3/src/components/ChatMessageList/index.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { ref, nextTick, onMounted, onUnmounted } from 'vue';
 
 interface MessageItem {
   key?: number;
@@ -81,6 +81,7 @@ const autoScroll = ref(true); // 是否自动滚动到底部
 const isUserScrolling = ref(false); // 用户是否正在手动滚动
 let scrollTimeout: any = null;
 let mutationObserver: MutationObserver | null = null;
+let scrollRAF: number | null = null; // 用于存储 requestAnimationFrame ID
 
 /**
  * 检查是否滚动到底部
@@ -93,15 +94,29 @@ function isScrolledToBottom(): boolean {
 }
 
 /**
- * 平滑滚动到底部（不使用 smooth 行为，避免跳动）
+ * 立即滚动到底部（用于内容快速变化时）
+ */
+function scrollToBottomImmediate() {
+  if (!scrollContainer.value || !autoScroll.value) return;
+  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
+}
+
+/**
+ * 平滑滚动到底部（使用 RAF 避免过度调用）
  */
 function scrollToBottomSmooth() {
   if (!scrollContainer.value || !autoScroll.value) return;
 
-  requestAnimationFrame(() => {
+  // 取消之前的 RAF，避免重复调用
+  if (scrollRAF !== null) {
+    cancelAnimationFrame(scrollRAF);
+  }
+
+  scrollRAF = requestAnimationFrame(() => {
     if (scrollContainer.value) {
       scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
     }
+    scrollRAF = null;
   });
 }
 
@@ -159,10 +174,21 @@ function observeContentChanges() {
   if (!contentElement) return;
 
   // 创建 MutationObserver 监听内容变化
-  mutationObserver = new MutationObserver(() => {
+  mutationObserver = new MutationObserver((mutations) => {
     // 如果启用了自动滚动且用户没有在滚动，则滚动到底部
     if (autoScroll.value && !isUserScrolling.value) {
-      scrollToBottomSmooth();
+      // 检查是否有文本内容变化（characterData），这通常是 SSE 流式输出
+      const hasCharacterDataChange = mutations.some(
+        mutation => mutation.type === 'characterData'
+      );
+
+      if (hasCharacterDataChange) {
+        // SSE 流式输出时使用立即滚动，避免跳动
+        scrollToBottomImmediate();
+      } else {
+        // 其他情况使用平滑滚动
+        scrollToBottomSmooth();
+      }
     }
   });
 
@@ -175,20 +201,6 @@ function observeContentChanges() {
   });
 }
 
-// 监听列表变化
-watch(
-  () => props.list,
-  () => {
-    // 列表变化时，如果启用了自动滚动，滚动到底部
-    if (autoScroll.value) {
-      nextTick(() => {
-        scrollToBottomSmooth();
-      });
-    }
-  },
-  { deep: true }
-);
-
 // 组件挂载时初始化
 onMounted(() => {
   if (scrollContainer.value) {
@@ -211,6 +223,9 @@ onUnmounted(() => {
   if (scrollTimeout) {
     clearTimeout(scrollTimeout);
   }
+  if (scrollRAF !== null) {
+    cancelAnimationFrame(scrollRAF);
+  }
   if (mutationObserver) {
     mutationObserver.disconnect();
   }

Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownAsync/index.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import type { MarkdownProps } from '../XMarkdownCore/shared/types';
-import { useShiki } from '@components/XMarkdownCore/hooks/useShiki';
-import { MarkdownRendererAsync } from '../XMarkdownCore';
-import { useMarkdownContext } from '../XMarkdownCore/components/MarkdownProvider';
-import { DEFAULT_PROPS } from '../XMarkdownCore/shared/constants';
-
-const props = withDefaults(defineProps<MarkdownProps>(), DEFAULT_PROPS);
-
-const slots = useSlots();
-const customComponents = useMarkdownContext();
-const colorReplacementsComputed = computed(() => {
-  return props.colorReplacements;
-});
-const needViewCodeBtnComputed = computed(() => {
-  return props.needViewCodeBtn;
-});
-useShiki();
-</script>
-
-<template>
-  <div class="elx-xmarkdown-container">
-    <MarkdownRendererAsync
-      v-bind="props"
-      :color-replacements="colorReplacementsComputed"
-      :need-view-code-btn="needViewCodeBtnComputed"
-    >
-      <template
-        v-for="(slot, name) in customComponents"
-        :key="name"
-        #[name]="slotProps"
-      >
-        <component :is="slot" v-bind="slotProps" />
-      </template>
-      <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
-        <slot :name="name" v-bind="slotProps" />
-      </template>
-    </MarkdownRendererAsync>
-  </div>
-</template>

Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/components/CodeBlock/index.vue

@@ -11,7 +11,8 @@ import {
   transformerNotationHighlight,
   transformerNotationWordHighlight
 } from '@shikijs/transformers';
-import { computed, h, reactive, ref, toValue, watch } from 'vue';
+import { computed, h, reactive, ref, toValue, watch, onUnmounted } from 'vue';
+import { debounce } from 'lodash-es';
 import HighLightCode from '../../components/HighLightCode/index.vue';
 import { SHIKI_SUPPORT_LANGS, shikiThemeDefault } from '../../shared';
 import { useMarkdownContext } from '../MarkdownProvider';
@@ -88,16 +89,29 @@ async function generateHtml() {
   }
 }
 
+// 使用防抖优化代码块渲染，避免SSE流式更新时频繁高亮
+const debouncedGenerateHtml = debounce(generateHtml, 100, {
+  leading: false,
+  trailing: true,
+  maxWait: 200
+});
+
 watch(
   () => props.raw?.content,
   async content => {
     if (content) {
-      await generateHtml();
+      debouncedGenerateHtml();
     }
   },
   { immediate: true }
 );
 
+// 清理防抖定时器
+onUnmounted(() => {
+  debouncedGenerateHtml.cancel();
+});
+
+
 const runCodeOptions = reactive<ElxRunCodeProps>({
   code: [],
   content: '',

Yi.Ai.Vue3/src/vue-element-plus-y/components/XMarkdownCore/core/components.ts

@@ -4,10 +4,11 @@ import type { PluggableList } from 'unified';
 import type { PropType } from 'vue';
 
 import type { CustomAttrs, SanitizeOptions, TVueMarkdown } from './types';
-import { defineComponent, shallowRef, toRefs, watch } from 'vue';
+import { defineComponent, shallowRef, toRefs, watch, onUnmounted } from 'vue';
 // import { useMarkdownContext } from '../components/MarkdownProvider';
 import { render } from './hast-to-vnode';
 import { useMarkdownProcessor } from './useProcessor';
+import { debounce } from 'lodash-es';
 
 export type { CustomAttrs, SanitizeOptions, TVueMarkdown };
 
@@ -93,12 +94,42 @@ const vueMarkdownAsyncImpl = defineComponent({
     });
 
     const hast = shallowRef<Root | null>(null);
+    const isProcessing = shallowRef(false);
+
     const process = async (): Promise<void> => {
-      const mdast = processor.value.parse(markdown.value);
+      // 避免重复处理
-      hast.value = (await processor.value.run(mdast)) as Root;
+      if (isProcessing.value) return;
+      isProcessing.value = true;
+
+      try {
+        const mdast = processor.value.parse(markdown.value);
+        hast.value = (await processor.value.run(mdast)) as Root;
+      } finally {
+        isProcessing.value = false;
+      }
     };
 
-    watch(() => [markdown.value, processor.value], process, { flush: 'sync' });
+    // 使用防抖优化SSE流式更新场景
+    // trailing: true 确保最后一次更新会执行
+    // leading: false 避免首次触发两次渲染
+    const debouncedProcess = debounce(process, 50, {
+      leading: false,
+      trailing: true,
+      maxWait: 200 // 最长等待200ms，避免延迟过大
+    });
+
+    watch(
+      () => [markdown.value, processor.value],
+      () => {
+        debouncedProcess();
+      },
+      { flush: 'post' } // 改为post，在DOM更新后执行，避免阻塞UI
+    );
+
+    // 清理防抖定时器
+    onUnmounted(() => {
+      debouncedProcess.cancel();
+    });
 
     await process();