优化聊天部分

assets/Scripts/chat18x/ui/components/ChatContentsLayout.ts

@@ -29,6 +29,9 @@ export class ChatContentsLayout extends Component {
 
   fixMaxWidth: number;
 
+  // 用于跟踪延时任务，支持中断清理
+  private delayedTasks: number[] = [];
+
   protected start(): void {
     this.lBubble.node.active = false;
     this.rBubble.node.active = false;
@@ -42,6 +45,9 @@ export class ChatContentsLayout extends Component {
   }
 
   UpdateDialog(dialogs: Dialog[]) {
+    // 清理所有正在进行的延时任务
+    this.clearDelayedTasks();
+
     // 隐藏当前使用的气泡并放入缓存
     for (let i = 0; i < this.bubbles.length; i++) {
       if (this.bubbles[i].node) {
@@ -51,7 +57,7 @@ export class ChatContentsLayout extends Component {
     }
     this.bubbles = [];
 
-    this.updateDialogLayout(dialogs);
+    this.updateDialogLayoutWithDelay(dialogs);
 
     // 清理多余的缓存气泡，避免内存泄漏
     this.cleanupExcessCachedBubbles();
@@ -93,7 +99,7 @@ export class ChatContentsLayout extends Component {
           ? instantiate(this.rBubble.node)
           : instantiate(this.lBubble.node);
         newBubble = newBubbleNode.getComponent(DialogBubble);
-        newBubble.init();
+        newBubble.init(650);
         newBubbleNode.setParent(this.node);
       }
 
@@ -104,6 +110,7 @@ export class ChatContentsLayout extends Component {
       pendingUpdates++;
       newBubble.updateBubbleContent(
         dialog.content,
+        dialog.isPlayer,
         (actualHeight: number) => {
           initPosY += actualHeight + 40;
           pendingUpdates--;
@@ -135,4 +142,154 @@ export class ChatContentsLayout extends Component {
       }
     }
   }
+
+  private clearDelayedTasks() {
+    // 清理所有正在进行的延时任务
+    for (const taskId of this.delayedTasks) {
+      clearTimeout(taskId);
+    }
+    this.delayedTasks = [];
+  }
+
+  private groupConsecutiveNonPlayerDialogs(dialogs: Dialog[]): Dialog[][] {
+    const groups: Dialog[][] = [];
+    let currentGroup: Dialog[] = [];
+
+    for (const dialog of dialogs) {
+      if (dialog.isPlayer) {
+        // 遇到player消息，结束当前非player组
+        if (currentGroup.length > 0) {
+          groups.push([...currentGroup]);
+          currentGroup = [];
+        }
+        // player消息单独成组
+        groups.push([dialog]);
+      } else {
+        // 非player消息加入当前组
+        currentGroup.push(dialog);
+      }
+    }
+
+    // 处理最后一组非player消息
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+
+    return groups;
+  }
+
+  private updateDialogLayoutWithDelay(dialogs: Dialog[]) {
+    const groups = this.groupConsecutiveNonPlayerDialogs(dialogs);
+    let initPosY: number = this.initPos.position.y;
+
+    // 倒序处理组，保持原有的显示顺序
+    this.processGroupsWithDelay(groups, groups.length - 1, initPosY);
+  }
+
+  private processGroupsWithDelay(
+    groups: Dialog[][],
+    groupIndex: number,
+    currentPosY: number
+  ) {
+    if (groupIndex < 0) return;
+
+    const currentGroup = groups[groupIndex];
+
+    // 直接渲染组，延时逻辑已移到单条消息级别
+    this.renderDialogGroup(currentGroup, currentPosY, (newPosY) => {
+      // 递归处理下一组，传递更新后的位置
+      this.processGroupsWithDelay(groups, groupIndex - 1, newPosY);
+    });
+  }
+
+  private renderDialogGroup(
+    dialogs: Dialog[],
+    startPosY: number,
+    onComplete: (finalPosY: number) => void
+  ) {
+    let currentPosY = startPosY;
+
+    const updateNextBubble = (index: number) => {
+      if (index < 0) {
+        onComplete(currentPosY);
+        return;
+      }
+
+      const dialog = dialogs[index];
+
+      // 计算当前消息的延时：非player消息且不是组内最后一条时添加延时
+      const isNonPlayerMessage = !dialog.isPlayer;
+      const isLastInGroup = index === dialogs.length - 1;
+      const delay =
+        isNonPlayerMessage && !isLastInGroup ? Math.random() * 1000 + 500 : 0; // 500-1500ms随机延时
+
+      const renderCurrentBubble = () => {
+        let newBubble: DialogBubble = null;
+
+        // 尝试从缓存中获取合适的气泡
+        const isPlayerBubble = dialog.isPlayer;
+        for (let j = 0; j < this.cachedBubbles.length; j++) {
+          const cached = this.cachedBubbles[j];
+          if (cached && cached.node) {
+            const isRightBubble = cached.node.position.x > 0;
+            if (
+              (isPlayerBubble && isRightBubble) ||
+              (!isPlayerBubble && !isRightBubble)
+            ) {
+              newBubble = cached;
+              this.cachedBubbles.splice(j, 1);
+              break;
+            }
+          }
+        }
+
+        // 如果缓存中没有合适的气泡，创建新的
+        if (!newBubble) {
+          let newBubbleNode = isPlayerBubble
+            ? instantiate(this.rBubble.node)
+            : instantiate(this.lBubble.node);
+          newBubble = newBubbleNode.getComponent(DialogBubble);
+          newBubble.init(650);
+          newBubbleNode.setParent(this.node);
+        }
+
+        newBubble.node.active = true;
+        let pos = newBubble.node.position;
+        newBubble.node.position = new Vec3(pos.x, currentPosY, pos.z);
+
+        newBubble.updateBubbleContent(
+          dialog.content,
+          dialog.isPlayer,
+          (actualHeight: number) => {
+            currentPosY += actualHeight + 40;
+            // 渲染完当前气泡后，处理下一个
+            updateNextBubble(index - 1);
+          },
+          dialog.isLoading || false
+        );
+
+        this.bubbles.push(newBubble);
+      };
+
+      if (delay > 0) {
+        // 添加延时任务ID到跟踪数组
+        const taskId = setTimeout(() => {
+          // 从跟踪数组中移除已完成的任务
+          const taskIndex = this.delayedTasks.indexOf(taskId);
+          if (taskIndex > -1) {
+            this.delayedTasks.splice(taskIndex, 1);
+          }
+          renderCurrentBubble();
+        }, delay);
+
+        this.delayedTasks.push(taskId);
+      } else {
+        // 立即渲染
+        renderCurrentBubble();
+      }
+    };
+
+    // 从组内最后一个对话开始处理（倒序）
+    updateNextBubble(dialogs.length - 1);
+  }
 }