Release v0.2.21304

src/app/components/ai-response.component.html

@@ -0,0 +1,99 @@
+<div class="ai-response-container">
+  <!-- 头部工具栏 -->
+  <div class="header-toolbar">
+    <div class="session-info">
+      @if (currentResponse) {
+        <div class="type-indicator" [style.backgroundColor]="getTypeColor(getCurrentType())">
+          <mat-icon class="type-icon">{{ getTypeIcon(getCurrentType()) }}</mat-icon>
+          <span class="type-label">{{ getTypeLabel(getCurrentType()) }}</span>
+        </div>
+        
+        <div class="session-id">
+          <mat-icon>fingerprint</mat-icon>
+          <span>{{ getCurrentSessionId() | slice:0:8 }}...</span>
+        </div>
+        
+        <div class="timestamp">
+          <mat-icon>schedule</mat-icon>
+          <span>{{ getFormattedTimestamp() }}</span>
+        </div>
+      } @else {
+        <div class="empty-state">
+          <mat-icon>smart_toy</mat-icon>
+          <span>等待AI回复...</span>
+        </div>
+      }
+    </div>
+    
+    <div class="toolbar-actions">
+      <button mat-icon-button matTooltip="切换完整/折叠视图" (click)="toggleFullText()">
+        <mat-icon>{{ showFullText ? 'unfold_less' : 'unfold_more' }}</mat-icon>
+      </button>
+      <button mat-icon-button matTooltip="清空响应" (click)="clearResponses()">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </div>
+  
+  <!-- 内容区域 -->
+  <div class="content-area" [class.streaming]="isStreaming" [class.collapsed]="!showFullText">
+    @if (currentResponse) {
+      <div class="content-wrapper">
+        <!-- 响应内容 -->
+        <div class="response-content" [innerHTML]="getDisplayContent() | markdown"></div>
+        
+        <!-- 流式传输进度 -->
+        @if (isStreaming) {
+          <div class="streaming-indicator">
+            <mat-progress-bar mode="determinate" [value]="streamingProgress"></mat-progress-bar>
+            <div class="streaming-text">
+              <mat-icon>hourglass_empty</mat-icon>
+              <span>AI正在思考... {{ streamingProgress | number:'1.0-0' }}%</span>
+            </div>
+          </div>
+        } @else {
+          <div class="response-complete">
+            <mat-icon>check_circle</mat-icon>
+            <span>回复完成</span>
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="no-response">
+        <mat-icon class="empty-icon">chat</mat-icon>
+        <p>暂无AI回复内容</p>
+        <p class="hint">AI的回复将实时显示在这里</p>
+      </div>
+    }
+  </div>
+  
+  <!-- 响应历史（可选） -->
+  @if (responses.length > 1) {
+    <div class="response-history">
+      <div class="history-header">
+        <mat-icon>history</mat-icon>
+        <span>历史响应 ({{ responses.length - 1 }})</span>
+      </div>
+      <div class="history-list">
+        @for (response of responses.slice(-5); track $index) {
+          @if (response !== currentResponse) {
+            <div class="history-item" 
+                 [style.borderLeftColor]="getTypeColor(response.type)"
+                 (click)="currentResponse = response">
+              <div class="history-type-icon">
+                <mat-icon>{{ getTypeIcon(response.type) }}</mat-icon>
+              </div>
+              <div class="history-content">
+                <div class="history-session">{{ response.sessionId | slice:0:6 }}...</div>
+                <div class="history-preview">{{ response.content | slice:0:60 }}...</div>
+              </div>
+              <div class="history-time">
+                {{ response.timestamp | date:'HH:mm' }}
+              </div>
+            </div>
+          }
+        }
+      </div>
+    </div>
+  }
+</div>

src/app/components/ai-response.component.scss

@@ -0,0 +1,383 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.ai-response-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--mat-app-background-color, #f5f5f5);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 头部工具栏 */
+.header-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid var(--mat-divider-color, #e0e0e0);
+  min-height: 56px;
+  box-sizing: border-box;
+}
+
+.session-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.type-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.type-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.type-label {
+  line-height: 1;
+}
+
+.session-id, .timestamp, .empty-state {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--mat-secondary-text-color, #666);
+}
+
+.empty-state {
+  font-size: 14px;
+  color: var(--mat-primary-text-color, #333);
+  
+  mat-icon {
+    color: var(--mat-primary-color, #3f51b5);
+  }
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 4px;
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background: white;
+  transition: all 0.3s ease;
+  
+  &.streaming {
+    background: linear-gradient(135deg, #f9f9ff 0%, #f0f8ff 100%);
+  }
+  
+  &.collapsed {
+    max-height: 200px;
+    overflow: hidden;
+    position: relative;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 60px;
+      background: linear-gradient(to bottom, transparent, white);
+      pointer-events: none;
+    }
+  }
+}
+
+.content-wrapper {
+  min-height: 100%;
+}
+
+.response-content {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--mat-primary-text-color, #333);
+  
+  // Markdown样式增强
+  ::ng-deep {
+    h1, h2, h3, h4 {
+      margin-top: 1.2em;
+      margin-bottom: 0.6em;
+      color: var(--mat-primary-color, #3f51b5);
+    }
+    
+    code {
+      background: var(--mat-app-background-color, #f5f5f5);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'Courier New', monospace;
+      font-size: 0.9em;
+    }
+    
+    pre {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      padding: 16px;
+      border-radius: 6px;
+      overflow: auto;
+      margin: 1em 0;
+      
+      code {
+        background: transparent;
+        padding: 0;
+        border-radius: 0;
+        font-size: 0.9em;
+        line-height: 1.5;
+      }
+    }
+    
+    blockquote {
+      border-left: 4px solid var(--mat-primary-color, #3f51b5);
+      margin: 1em 0;
+      padding-left: 1em;
+      color: var(--mat-secondary-text-color, #666);
+      font-style: italic;
+    }
+    
+    ul, ol {
+      padding-left: 1.5em;
+      margin: 0.5em 0;
+    }
+    
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 1em 0;
+      
+      th, td {
+        border: 1px solid var(--mat-divider-color, #e0e0e0);
+        padding: 8px 12px;
+        text-align: left;
+      }
+      
+      th {
+        background: var(--mat-app-background-color, #f5f5f5);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.streaming-indicator {
+  margin-top: 20px;
+  padding: 12px;
+  background: rgba(33, 150, 243, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(33, 150, 243, 0.2);
+  
+  .streaming-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--mat-primary-color, #3f51b5);
+    
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+      animation: pulse 1.5s infinite;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.response-complete {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  padding: 8px 12px;
+  background: rgba(76, 175, 80, 0.1);
+  border-radius: 8px;
+  color: #2e7d32;
+  font-size: 13px;
+  
+  mat-icon {
+    color: #2e7d32;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+  }
+}
+
+.no-response {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--mat-secondary-text-color, #666);
+  text-align: center;
+  
+  .empty-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    margin-bottom: 16px;
+    color: var(--mat-primary-color, #3f51b5);
+    opacity: 0.3;
+  }
+  
+  .hint {
+    font-size: 12px;
+    margin-top: 4px;
+    color: var(--mat-secondary-text-color, #888);
+  }
+}
+
+/* 响应历史 */
+.response-history {
+  border-top: 1px solid var(--mat-divider-color, #e0e0e0);
+  background: var(--mat-app-background-color, #f5f5f5);
+  max-height: 200px;
+  overflow: auto;
+}
+
+.history-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--mat-secondary-text-color, #666);
+  background: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid var(--mat-divider-color, #e0e0e0);
+}
+
+.history-list {
+  padding: 8px;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: white;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  border-left: 3px solid;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: var(--mat-app-background-color, #f5f5f5);
+    transform: translateX(2px);
+  }
+  
+  &:active {
+    transform: translateX(0);
+  }
+}
+
+.history-type-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.2;
+  
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    color: white;
+  }
+}
+
+.history-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.history-session {
+  font-size: 10px;
+  color: var(--mat-secondary-text-color, #888);
+  margin-bottom: 2px;
+}
+
+.history-preview {
+  font-size: 11px;
+  color: var(--mat-primary-text-color, #444);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.history-time {
+  font-size: 10px;
+  color: var(--mat-secondary-text-color, #888);
+  white-space: nowrap;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--mat-divider-color, #ccc);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--mat-secondary-text-color, #999);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .header-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  
+  .session-info {
+    justify-content: space-between;
+  }
+  
+  .toolbar-actions {
+    align-self: flex-end;
+  }
+}

src/app/components/ai-response.component.ts

@@ -0,0 +1,279 @@
+import { Component, OnInit, OnDestroy, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { Subscription } from 'rxjs';
+import { EventService } from '../services/event.service';
+import { MarkdownPipe } from '../shared/pipes/markdown.pipe';
+
+export interface AIResponse {
+  sessionId: string;
+  content: string;
+  timestamp: Date;
+  type: 'thinking' | 'tool' | 'error' | 'message' | 'markdown';
+  isComplete: boolean;
+}
+
+@Component({
+  selector: 'app-ai-response',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatCardModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatProgressBarModule,
+    MarkdownPipe
+  ],
+  templateUrl: './ai-response.component.html',
+  styleUrl: './ai-response.component.scss'
+})
+export class AIResponseComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() sessionId?: string;
+  @Input() multipleSessionIds: string[] = [];
+  
+  currentResponse: AIResponse | null = null;
+  responses: AIResponse[] = [];
+  isStreaming = false;
+  streamingProgress = 0;
+  showFullText = true;
+  
+  private subscriptions: Subscription = new Subscription();
+  private typingInterval: any;
+  private typingContent = '';
+  private typingIndex = 0;
+  
+  constructor(private eventService: EventService) {}
+  
+  ngOnInit() {
+    this.setupEventListeners();
+  }
+  
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['sessionId'] || changes['multipleSessionIds']) {
+      this.resetResponse();
+      this.setupEventListeners();
+    }
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+    this.clearTypingInterval();
+  }
+  
+  private setupEventListeners() {
+    // 清除现有订阅
+    this.subscriptions.unsubscribe();
+    this.subscriptions = new Subscription();
+    
+    if (this.multipleSessionIds && this.multipleSessionIds.length > 0) {
+      // 多会话模式 - 监听所有文档会话的事件
+      this.multipleSessionIds.forEach(sessionId => {
+        if (sessionId && sessionId.trim()) {
+          this.subscriptions.add(
+            this.eventService.subscribeToSessionEvents(sessionId).subscribe({
+              next: (event) => {
+                this.processEvent(sessionId, event);
+              },
+              error: (error) => console.error(`会话 ${sessionId} 事件监听错误:`, error)
+            })
+          );
+        }
+      });
+    } else if (this.sessionId) {
+      // 单会话模式 - 监听当前会话的事件
+      this.subscriptions.add(
+        this.eventService.subscribeToSessionEvents(this.sessionId!).subscribe({
+          next: (event) => {
+            this.processEvent(this.sessionId!, event);
+          },
+          error: (error) => console.error(`会话 ${this.sessionId!} 事件监听错误:`, error)
+        })
+      );
+    }
+  }
+  
+  private processEvent(sessionId: string, event: any) {
+    const payload = event.payload;
+    const timestamp = new Date();
+    
+    // 确定事件类型
+    let type: AIResponse['type'] = 'message';
+    if (payload.type === 'thinking' || payload.type === 'tool_call') {
+      type = 'thinking';
+    } else if (payload.type === 'tool' || payload.type === 'tool_result') {
+      type = 'tool';
+    } else if (payload.type === 'error') {
+      type = 'error';
+    } else if (payload.type === 'markdown' || payload.type?.includes('markdown')) {
+      type = 'markdown';
+    }
+    
+    // 提取内容
+    let content = '';
+    const properties = payload.properties || {};
+    
+    if (payload.type === 'message.updated') {
+      // 处理消息更新事件
+      const messageInfo = properties.info || {};
+      if (messageInfo.content) {
+        content = messageInfo.content;
+      }
+    } else if (properties.content) {
+      content = properties.content;
+    } else if (properties.message) {
+      content = properties.message;
+    } else if (properties.info && properties.info.content) {
+      content = properties.info.content;
+    } else {
+      // 如果无法提取，将整个payload转换为字符串
+      content = JSON.stringify(payload, null, 2);
+    }
+    
+    // 如果是思考或工具调用，可能需要特殊处理
+    if (type === 'thinking' || type === 'tool') {
+      // 这些内容可以折叠显示
+      content = content.replace(/^\[思考\]|^\[工具\]|^\[错误\]/, '').trim();
+    }
+    
+    const newResponse: AIResponse = {
+      sessionId,
+      content,
+      timestamp,
+      type,
+      isComplete: true
+    };
+    
+    // 添加到响应列表
+    this.responses.push(newResponse);
+    
+    // 如果是当前会话，开始打字机效果
+    if ((this.multipleSessionIds && this.multipleSessionIds.includes(sessionId)) || 
+        sessionId === this.sessionId) {
+      this.startTypingEffect(newResponse);
+    }
+    
+    // 限制响应数量，防止内存泄漏
+    if (this.responses.length > 100) {
+      this.responses = this.responses.slice(-50);
+    }
+  }
+  
+  private startTypingEffect(response: AIResponse) {
+    this.clearTypingInterval();
+    
+    this.currentResponse = response;
+    this.isStreaming = true;
+    this.streamingProgress = 0;
+    this.typingContent = response.content;
+    this.typingIndex = 0;
+    
+    const totalChars = this.typingContent.length;
+    if (totalChars === 0) {
+      this.isStreaming = false;
+      return;
+    }
+    
+    // 计算打字速度（每秒50个字符）
+    const speed = 50; // 字符/秒
+    const interval = 1000 / speed;
+    
+    this.typingInterval = setInterval(() => {
+      this.typingIndex++;
+      this.streamingProgress = (this.typingIndex / totalChars) * 100;
+      
+      if (this.typingIndex >= totalChars) {
+        this.isStreaming = false;
+        this.clearTypingInterval();
+      }
+    }, interval);
+  }
+  
+  private clearTypingInterval() {
+    if (this.typingInterval) {
+      clearInterval(this.typingInterval);
+      this.typingInterval = null;
+    }
+  }
+  
+  getDisplayContent(): string {
+    if (!this.currentResponse) return '';
+    
+    if (this.isStreaming) {
+      return this.typingContent.substring(0, this.typingIndex);
+    }
+    
+    return this.currentResponse.content;
+  }
+  
+  getCurrentType(): AIResponse['type'] {
+    return this.currentResponse?.type || 'message';
+  }
+  
+  getCurrentSessionId(): string {
+    return this.currentResponse?.sessionId || '';
+  }
+  
+  getFormattedTimestamp(): string {
+    if (!this.currentResponse?.timestamp) return '';
+    
+    const date = this.currentResponse.timestamp;
+    return date.toLocaleTimeString('zh-CN', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      second: '2-digit'
+    });
+  }
+  
+  toggleFullText() {
+    this.showFullText = !this.showFullText;
+  }
+  
+  clearResponses() {
+    this.responses = [];
+    this.currentResponse = null;
+    this.isStreaming = false;
+    this.streamingProgress = 0;
+  }
+  
+  private resetResponse() {
+    this.currentResponse = null;
+    this.isStreaming = false;
+    this.streamingProgress = 0;
+    this.clearTypingInterval();
+  }
+  
+  getTypeIcon(type: AIResponse['type']): string {
+    switch (type) {
+      case 'thinking': return 'psychology';
+      case 'tool': return 'build';
+      case 'error': return 'error';
+      case 'markdown': return 'code';
+      default: return 'chat';
+    }
+  }
+  
+  getTypeColor(type: AIResponse['type']): string {
+    switch (type) {
+      case 'thinking': return 'var(--thinking-color, #2196f3)';
+      case 'tool': return 'var(--tool-color, #ff9800)';
+      case 'error': return 'var(--error-color, #f44336)';
+      case 'markdown': return 'var(--markdown-color, #673ab7)';
+      default: return 'var(--message-color, #4caf50)';
+    }
+  }
+  
+  getTypeLabel(type: AIResponse['type']): string {
+    switch (type) {
+      case 'thinking': return '思考中';
+      case 'tool': return '工具调用';
+      case 'error': return '错误';
+      case 'markdown': return '代码';
+      default: return '消息';
+    }
+  }
+}

src/app/components/conversation.component.html

@@ -1,6 +1,6 @@
     <div class="conversation-container">
       <!-- 消息区域 -->
-      <div class="messages-container" #messagesContainer>
+      <div class="messages-container" #messagesContainer (scroll)="onMessagesContainerScroll()">
         <div *ngFor="let message of messages" class="message-wrapper">
           <div class="message" [class.user]="message.role === 'user'" [class.assistant]="message.role === 'assistant'">
             <div class="message-header">

src/app/components/conversation.component.scss

@@ -15,23 +15,24 @@
       margin-bottom: 20px;
     }
     .message {
-      max-width: 80%;
+      max-width: 95%;
       padding: 12px 16px;
       border-radius: 18px;
       position: relative;
+      margin-bottom: 12px;
     }
     .message.user {
-      background: #007bff;
+      background: linear-gradient(135deg, #007bff, #0056b3);
       color: white;
-      margin-left: auto;
-      border-bottom-right-radius: 4px;
+      border-left: 4px solid #0056b3;
+      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
     }
     .message.assistant {
-      background: white;
+      background: linear-gradient(135deg, #ffffff, #f8f9fa);
       color: #333;
       border: 1px solid #e0e0e0;
-      margin-right: auto;
-      border-bottom-left-radius: 4px;
+      border-left: 4px solid #6c757d;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .message-header {
       display: flex;
@@ -108,13 +109,17 @@
     }
 
     .thinking-details {
-      border: 1px solid #e3f2fd;
-      background-color: #f5fbff;
+      border: 2px solid #2196f3;
+      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
     }
 
     .tool-details {
-      border: 1px solid #f3e5f5;
-      background-color: #faf5ff;
+      border: 2px solid #9c27b0;
+      background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
     }
 
     .thinking-summary,
@@ -129,13 +134,17 @@
     }
 
     .thinking-summary {
-      color: #1565c0;
-      background-color: #e3f2fd;
+      color: #0d47a1;
+      background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
+      border-bottom: 1px solid #64b5f6;
+      font-weight: 600;
     }
 
     .tool-summary {
-      color: #7b1fa2;
-      background-color: #f3e5f5;
+      color: #4a148c;
+      background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
+      border-bottom: 1px solid #ba68c8;
+      font-weight: 600;
     }
 
     /* details元素内的内容样式 */
@@ -146,11 +155,19 @@
     }
 
     .thinking-details > *:not(summary) {
-      background-color: #f5fbff;
+      background-color: #f0f7ff;
+      color: #0d47a1;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.95em;
+      line-height: 1.5;
     }
 
     .tool-details > *:not(summary) {
-      background-color: #faf5ff;
+      background-color: #f5f0ff;
+      color: #4a148c;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.95em;
+      line-height: 1.5;
     }
 
     /* 标签样式（非折叠） */

src/app/components/conversation.component.ts

@@ -49,6 +49,8 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
   private currentStreamSubscription: Subscription | null = null;
   private sessionEventSubscription: Subscription | null = null;
   private shouldScroll = false;
+  private isUserScrolling = false;
+  private scrollDebounceTimeout: any = null;
   private isInThinking = false; // 是否正在思考过程中
   private thinkingStartIndex = 0; // 思考内容的起始位置（在消息内容中的索引）
   
@@ -284,7 +286,7 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
   }
 
   ngAfterViewChecked() {
-    if (this.shouldScroll) {
+    if (this.shouldScroll && !this.isUserScrolling) {
       this.scrollToBottom();
       this.shouldScroll = false;
     }
@@ -482,6 +484,12 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
     // 添加用户消息
     this.messages.push(userMessage);
     this.shouldScroll = true;
+    // 用户发送新消息时重置手动滚动标志
+    this.isUserScrolling = false;
+    if (this.scrollDebounceTimeout) {
+      clearTimeout(this.scrollDebounceTimeout);
+      this.scrollDebounceTimeout = null;
+    }
 
     // 添加AI响应占位
     const aiMessage: ChatMessage = {
@@ -534,6 +542,21 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
 
 
 
+  onMessagesContainerScroll() {
+    // 用户手动滚动时触发
+    this.isUserScrolling = true;
+    
+    // 清除之前的超时
+    if (this.scrollDebounceTimeout) {
+      clearTimeout(this.scrollDebounceTimeout);
+    }
+    
+    // 设置超时，2秒后重置滚动标志
+    this.scrollDebounceTimeout = setTimeout(() => {
+      this.isUserScrolling = false;
+    }, 2000);
+  }
+
   private scrollToBottom() {
     try {
       this.messagesContainer.nativeElement.scrollTop = 

src/app/components/document-list.component.html

@@ -0,0 +1,74 @@
+<div class="document-list-container">
+  <div class="document-list-header">
+    <mat-icon class="header-icon">folder_open</mat-icon>
+    <h3 class="header-title">项目文档</h3>
+  </div>
+  
+  <div class="document-items">
+    @for (docType of documentTypeOrder; track docType) {
+      @let doc = getDocumentByType(docType);
+      @if (doc) {
+        <div class="document-item" [class.has-content]="hasContent(doc)" [class.loading]="doc.isLoading">
+          <!-- 文档标题区域 -->
+          <div class="document-header" (click)="toggleDocument(docType)">
+            <div class="document-icon-title">
+              <mat-icon class="document-icon">{{ getIcon(docType) }}</mat-icon>
+              <span class="document-title">{{ getDisplayName(docType) }}</span>
+              @if (doc.isLoading) {
+                <mat-spinner diameter="16" class="document-loading-spinner"></mat-spinner>
+              }
+            </div>
+            
+            <div class="document-actions">
+              @if (hasContent(doc)) {
+                <span class="document-updated" matTooltip="最后更新时间">
+                  {{ getLastUpdatedText(doc) }}
+                </span>
+              }
+              <mat-icon class="expand-icon">
+                {{ expandedStates[docType] ? 'expand_less' : 'expand_more' }}
+              </mat-icon>
+            </div>
+          </div>
+          
+          <!-- 文档内容区域（可折叠） -->
+          @if (expandedStates[docType]) {
+            <div class="document-content">
+              @if (hasContent(doc)) {
+                <div class="document-content-inner" [innerHTML]="doc.content | markdown"></div>
+              } @else {
+                <div class="document-empty">
+                  <mat-icon>inbox</mat-icon>
+                  <p>暂无内容</p>
+                  @if (doc.isLoading) {
+                    <p class="loading-text">正在加载中...</p>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <!-- 折叠状态下的预览 -->
+            @if (hasContent(doc)) {
+              <div class="document-preview">
+                <span class="preview-text">{{ getContentPreview(doc.content) }}</span>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <!-- 文档不存在的情况 -->
+        <div class="document-item empty">
+          <div class="document-header">
+            <div class="document-icon-title">
+              <mat-icon class="document-icon">{{ getIcon(docType) }}</mat-icon>
+              <span class="document-title">{{ getDisplayName(docType) }}</span>
+            </div>
+            <div class="document-status">
+              <span class="status-text">未创建</span>
+            </div>
+          </div>
+        </div>
+      }
+    }
+  </div>
+</div>

src/app/components/document-list.component.scss

@@ -0,0 +1,244 @@
+.document-list-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f8f9fa;
+}
+
+.document-list-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #ffffff;
+  flex-shrink: 0;
+  
+  .header-icon {
+    color: #1976d2;
+  }
+  
+  .header-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.document-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.document-item {
+  background: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  
+  &:hover {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  }
+  
+  &.has-content {
+    border-left: 4px solid #1976d2;
+  }
+  
+  &.loading {
+    opacity: 0.8;
+  }
+  
+  &.empty {
+    opacity: 0.6;
+    border-left: 4px solid #ccc;
+  }
+}
+
+.document-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+  min-height: 48px;
+  
+  &:hover {
+    background-color: #f5f5f5;
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.document-icon-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  
+  .document-icon {
+    color: #666;
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    flex-shrink: 0;
+  }
+  
+  .document-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .document-loading-spinner {
+    margin-left: 8px;
+  }
+}
+
+.document-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  
+  .document-updated {
+    font-size: 12px;
+    color: #888;
+    white-space: nowrap;
+  }
+  
+  .expand-icon {
+    color: #999;
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    transition: transform 0.2s ease;
+  }
+}
+
+.document-content {
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #ffffff;
+  border-radius: 0 0 8px 8px;
+  max-height: 400px;
+  overflow-y: auto;
+  
+  .document-content-inner {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #444;
+    
+    // Markdown内容样式
+    :deep(h1), :deep(h2), :deep(h3) {
+      margin-top: 0;
+      margin-bottom: 12px;
+      font-weight: 600;
+    }
+    
+    :deep(h1) { font-size: 16px; }
+    :deep(h2) { font-size: 15px; }
+    :deep(h3) { font-size: 14px; }
+    
+    :deep(p) {
+      margin: 8px 0;
+    }
+    
+    :deep(ul), :deep(ol) {
+      padding-left: 20px;
+      margin: 8px 0;
+    }
+    
+    :deep(li) {
+      margin: 4px 0;
+    }
+    
+    :deep(code) {
+      background: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 12px;
+    }
+    
+    :deep(pre) {
+      background: #f5f5f5;
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 12px 0;
+    }
+  }
+}
+
+.document-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: #999;
+  text-align: center;
+  
+  mat-icon {
+    font-size: 32px;
+    height: 32px;
+    width: 32px;
+    margin-bottom: 12px;
+    color: #ccc;
+  }
+  
+  p {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+  
+  .loading-text {
+    color: #666;
+    font-size: 12px;
+  }
+}
+
+.document-preview {
+  padding: 8px 16px 12px 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+  border-radius: 0 0 8px 8px;
+  
+  .preview-text {
+    font-size: 12px;
+    color: #666;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.document-status {
+  .status-text {
+    font-size: 12px;
+    color: #999;
+    font-style: italic;
+  }
+}
+
+// 响应式调整
+@media (max-height: 700px) {
+  .document-content {
+    max-height: 300px;
+  }
+}
+
+@media (max-height: 600px) {
+  .document-content {
+    max-height: 250px;
+  }
+}

src/app/components/document-list.component.ts

@@ -0,0 +1,122 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DocumentSession, DocumentType, DocumentTypeDisplayName, DocumentTypeIcon, getDocumentTypeOrder } from '../models/document.model';
+import { MarkdownPipe } from '../shared/pipes/markdown.pipe';
+
+@Component({
+  selector: 'app-document-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatExpansionModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    MarkdownPipe
+  ],
+  templateUrl: './document-list.component.html',
+  styleUrl: './document-list.component.scss'
+})
+export class DocumentListComponent implements OnInit {
+  @Input() documents: DocumentSession[] = [];
+  @Input() defaultExpanded: boolean = false;
+  
+  // 按固定顺序排序的文档类型
+  documentTypeOrder = getDocumentTypeOrder();
+  
+  // 控制每个文档的展开状态
+  expandedStates: Record<DocumentType, boolean> = {
+    [DocumentType.UserRequirement]: false,
+    [DocumentType.Requirement]: false,
+    [DocumentType.Technical]: false,
+    [DocumentType.Implementation]: false,
+    [DocumentType.Test]: false
+  };
+  
+  ngOnInit() {
+    // 初始化展开状态
+    if (this.defaultExpanded) {
+      this.documentTypeOrder.forEach(docType => {
+        this.expandedStates[docType] = true;
+      });
+    }
+  }
+  
+  /**
+   * 获取指定类型的文档
+   */
+  getDocumentByType(docType: DocumentType): DocumentSession | undefined {
+    return this.documents.find(doc => doc.type === docType);
+  }
+  
+  /**
+   * 切换文档的展开状态
+   */
+  toggleDocument(docType: DocumentType) {
+    this.expandedStates[docType] = !this.expandedStates[docType];
+  }
+  
+  /**
+   * 获取文档显示名称
+   */
+  getDisplayName(docType: DocumentType): string {
+    return DocumentTypeDisplayName[docType];
+  }
+  
+  /**
+   * 获取文档图标
+   */
+  getIcon(docType: DocumentType): string {
+    return DocumentTypeIcon[docType];
+  }
+  
+  /**
+   * 检查文档是否有内容
+   */
+  hasContent(doc: DocumentSession): boolean {
+    return !!doc.hasContent && !!doc.content && doc.content.trim().length > 0;
+  }
+  
+  /**
+   * 获取文档最后更新时间显示文本
+   */
+  getLastUpdatedText(doc: DocumentSession): string {
+    if (!doc.lastUpdated) return '';
+    
+    const now = new Date();
+    const diffMs = now.getTime() - doc.lastUpdated.getTime();
+    const diffMins = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    
+    if (diffMins < 60) {
+      return `${diffMins}分钟前`;
+    } else if (diffHours < 24) {
+      return `${diffHours}小时前`;
+    } else {
+      return `${diffDays}天前`;
+    }
+  }
+  
+  /**
+   * 格式化内容长度，用于预览
+   */
+  getContentPreview(content: string): string {
+    if (!content) return '暂无内容';
+    
+    const maxLength = 100;
+    const plainText = content.replace(/[#\*`]/g, '').replace(/\n/g, ' ');
+    
+    if (plainText.length <= maxLength) {
+      return plainText;
+    }
+    
+    return plainText.substring(0, maxLength) + '...';
+  }
+}

src/app/components/project-tab.component.html

@@ -1,4 +1,4 @@
-<div class="project-tab-container" [style.gridTemplateColumns]="leftWidth + 'px 8px 1fr'">
+<div class="project-tab-container" [style.gridTemplateColumns]="leftWidth + 'px 8px ' + middleWidth + 'px 8px 1fr'">
   <!-- 左侧面板：项目信息和步骤列表 -->
   <div class="left-panel">
     @if (project) {
@@ -163,7 +163,15 @@
             <div class="step-status">待完成</div>
           </div>
         </mat-expansion-panel>
-      </mat-accordion>
+       </mat-accordion>
+       
+       <!-- 文档列表 -->
+       <div class="document-list-section">
+         <app-document-list 
+           [documents]="documentSessions"
+           [defaultExpanded]="false">
+         </app-document-list>
+       </div>
     } @else {
       <div class="no-project">
         <mat-icon>error</mat-icon>
@@ -172,17 +180,34 @@
     }
   </div>
   
-  <!-- 分割线（调整左侧宽度） -->
-  <div class="splitter"
+  <!-- 左侧分割线（调整左侧宽度） -->
+  <div class="splitter left-splitter"
        (mousedown)="startDrag($event)"
        [class.dragging]="isDragging">
     <div class="splitter-handle"></div>
   </div>
   
-  <!-- 右侧面板：对话区域 -->
-  <div class="right-panel">
+  <!-- 中间面板：对话区域 -->
+  <div class="middle-panel">
     <div class="conversation-wrapper">
       <app-conversation [instanceId]="project?.id"></app-conversation>
     </div>
   </div>
+  
+  <!-- 中间分割线（调整中间宽度） -->
+  <div class="splitter middle-splitter"
+       (mousedown)="startMiddleDrag($event)"
+       [class.dragging]="isDraggingMiddle">
+    <div class="splitter-handle"></div>
+  </div>
+  
+  <!-- 右侧面板：AI回复显示框 -->
+  <div class="right-panel">
+    <div class="ai-response-wrapper">
+      <app-ai-response
+        [multipleSessionIds]="getDocumentSessionIds()"
+        [sessionId]="project?.id">
+      </app-ai-response>
+    </div>
+  </div>
 </div>

src/app/components/project-tab.component.scss

@@ -4,7 +4,7 @@
   overflow: hidden;
 }
 
-.left-panel, .right-panel {
+.left-panel, .middle-panel, .right-panel {
   height: 100%;
   overflow-y: auto;
   padding: 16px;
@@ -15,10 +15,17 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-height: 0;
 }
 
-.right-panel {
+.middle-panel {
   background: #ffffff;
+  border-left: 1px solid #e0e0e0;
+  border-right: 1px solid #e0e0e0;
+}
+
+.right-panel {
+  background: #fafafa;
 }
 
 .project-info-card {
@@ -113,9 +120,10 @@
 }
 
 .steps-accordion {
-  flex: 1;
+  flex: 0;
   min-height: 0;
   overflow-y: auto;
+  max-height: 300px;
 }
 
 .step-content {
@@ -169,4 +177,47 @@
 .conversation-wrapper {
   height: 100%;
   overflow: hidden;
+}
+
+.ai-response-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.placeholder mat-icon {
+  font-size: 48px;
+  height: 48px;
+  width: 48px;
+  margin-bottom: 16px;
+  color: #ccc;
+}
+
+.placeholder p {
+  font-size: 14px;
+  color: #888;
+}
+
+.document-list-section {
+  margin-top: 16px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  
+  app-document-list {
+    flex: 1;
+    min-height: 0;
+  }
 }

src/app/components/project-tab.component.ts

@@ -11,10 +11,15 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Subscription } from 'rxjs';
 import { ConversationComponent } from './conversation.component';
+import { DocumentListComponent } from './document-list.component';
+import { AIResponseComponent } from './ai-response.component';
 import { TabService, Tab } from '../services/tab.service';
 import { SessionService } from '../services/session.service';
 import { AgentService } from '../services/agent.service';
+import { MockDataService } from '../services/mock-data.service';
+import { EventService } from '../services/event.service';
 import { Session, SessionStatus } from '../models/session.model';
+import { DocumentType, DocumentSession } from '../models/document.model';
 
 @Component({
   selector: 'app-project-tab',
@@ -29,7 +34,9 @@ import { Session, SessionStatus } from '../models/session.model';
     MatChipsModule,
     MatProgressBarModule,
     MatTooltipModule,
-    ConversationComponent
+    ConversationComponent,
+    DocumentListComponent,
+    AIResponseComponent
   ],
   templateUrl: './project-tab.component.html',
   styleUrl: './project-tab.component.scss',
@@ -40,25 +47,39 @@ export class ProjectTabComponent implements OnInit, OnDestroy {
   project: Session | null = null;
   activeTab: Tab | null = null;
   
+  // 文档数据
+  documentSessions: DocumentSession[] = [];
+  
   leftWidth = 320;
+  middleWidth = 500;
   isDragging = false;
+  isDraggingMiddle = false;
   minLeftWidth = 280;
   maxLeftWidth = 500;
+  minMiddleWidth = 400;
+  maxMiddleWidth = 800;
   
   private subscriptions: Subscription = new Subscription();
+  private eventSubscription?: Subscription;
   
   constructor(
     private tabService: TabService,
     private sessionService: SessionService,
     private agentService: AgentService,
+    private mockDataService: MockDataService,
+    private eventService: EventService,
     private route: ActivatedRoute
   ) {}
   
   ngOnInit() {
     // 从本地存储恢复宽度
-    const savedWidth = localStorage.getItem('project_tab_leftWidth');
-    if (savedWidth) {
-      this.leftWidth = parseInt(savedWidth, 10);
+    const savedLeftWidth = localStorage.getItem('project_tab_leftWidth');
+    if (savedLeftWidth) {
+      this.leftWidth = parseInt(savedLeftWidth, 10);
+    }
+    const savedMiddleWidth = localStorage.getItem('project_tab_middleWidth');
+    if (savedMiddleWidth) {
+      this.middleWidth = parseInt(savedMiddleWidth, 10);
     }
     
     // 监听路由参数变化
@@ -92,8 +113,12 @@ export class ProjectTabComponent implements OnInit, OnDestroy {
         this.activeTab = tab;
         this.project = tab.session;
         this.sessionService.setActiveSession(this.project);
+        this.loadDocumentSessions();
       }
     }
+    
+    // 加载文档数据
+    this.loadDocumentSessions();
   }
   
   private loadTabByProjectId(projectId: string) {
@@ -178,6 +203,13 @@ export class ProjectTabComponent implements OnInit, OnDestroy {
     document.body.style.userSelect = 'none';
   }
   
+  startMiddleDrag(event: MouseEvent) {
+    event.preventDefault();
+    this.isDraggingMiddle = true;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }
+  
   @HostListener('document:mousemove', ['$event'])
   onDrag(event: MouseEvent) {
     if (this.isDragging) {
@@ -186,6 +218,12 @@ export class ProjectTabComponent implements OnInit, OnDestroy {
         this.leftWidth = newWidth;
       }
     }
+    if (this.isDraggingMiddle) {
+      const newWidth = event.clientX - this.leftWidth - 8;
+      if (newWidth >= this.minMiddleWidth && newWidth <= this.maxMiddleWidth) {
+        this.middleWidth = newWidth;
+      }
+    }
   }
   
   @HostListener('document:mouseup')
@@ -194,11 +232,138 @@ export class ProjectTabComponent implements OnInit, OnDestroy {
       this.isDragging = false;
       localStorage.setItem('project_tab_leftWidth', this.leftWidth.toString());
     }
+    if (this.isDraggingMiddle) {
+      this.isDraggingMiddle = false;
+      localStorage.setItem('project_tab_middleWidth', this.middleWidth.toString());
+    }
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
   }
   
+  /**
+   * 加载文档会话数据
+   */
+  private loadDocumentSessions() {
+    if (!this.project) return;
+    
+    const projectId = this.project.project_id || this.project.id;
+    this.mockDataService.getProjectDocuments(projectId).subscribe({
+      next: (documents) => {
+        this.documentSessions = documents;
+        
+        // 设置文档会话的事件订阅
+        this.setupDocumentEventSubscriptions();
+      },
+      error: (error) => {
+        console.error('加载文档数据失败:', error);
+        // 使用空文档作为回退
+        import('../models/document.model').then(module => {
+          this.documentSessions = module.createEmptyDocumentSessions(projectId);
+          // 即使使用空文档，也尝试设置事件订阅
+          this.setupDocumentEventSubscriptions();
+        });
+      }
+    });
+  }
+  
+  /**
+   * 设置文档会话的事件订阅
+   */
+  private setupDocumentEventSubscriptions() {
+    // 取消现有的事件订阅
+    if (this.eventSubscription) {
+      this.eventSubscription.unsubscribe();
+      this.eventSubscription = undefined;
+    }
+    
+    // 获取有效的文档会话ID
+    const sessionIds = this.getDocumentSessionIds();
+    if (sessionIds.length === 0) {
+      console.log('没有有效的文档会话ID可订阅');
+      return;
+    }
+    
+    console.log(`设置文档事件订阅，会话ID:`, sessionIds);
+    
+    // 连接到多会话事件流
+    this.eventService.connectToMultipleSessions(sessionIds);
+    
+    // 订阅多会话事件
+    this.eventSubscription = this.eventService.multiSessionEvents$.subscribe({
+      next: ({ sessionId, event }) => {
+        this.handleDocumentEvent(sessionId, event);
+      },
+      error: (error) => {
+        console.error('文档事件订阅错误:', error);
+      }
+    });
+  }
+  
+  /**
+   * 处理文档事件，更新文档内容
+   */
+  private handleDocumentEvent(sessionId: string, event: any) {
+    // 找到对应的文档
+    const docIndex = this.documentSessions.findIndex(doc => doc.sessionId === sessionId);
+    if (docIndex === -1) {
+      // 未找到对应文档，可能是其他事件
+      return;
+    }
+    
+    const payload = event.payload;
+    console.log(`处理文档事件，会话ID: ${sessionId}, 类型: ${payload.type}`);
+    
+    // 提取内容
+    let content = '';
+    const properties = payload.properties || {};
+    
+    if (payload.type === 'message.updated') {
+      // 处理消息更新事件
+      const messageInfo = properties.info || {};
+      if (messageInfo.content) {
+        content = messageInfo.content;
+      }
+    } else if (properties.content) {
+      content = properties.content;
+    } else if (properties.message) {
+      content = properties.message;
+    } else if (properties.info && properties.info.content) {
+      content = properties.info.content;
+    }
+    
+    if (content) {
+      // 更新文档内容
+      this.documentSessions[docIndex] = {
+        ...this.documentSessions[docIndex],
+        content: content,
+        lastUpdated: new Date(),
+        hasContent: true,
+        isLoading: false
+      };
+      
+      // 触发变更检测（使用展开操作符创建新数组）
+      this.documentSessions = [...this.documentSessions];
+      
+      console.log(`文档 ${this.documentSessions[docIndex].title} 内容已更新，长度: ${content.length} 字符`);
+    }
+  }
+  
+  /**
+   * 获取所有文档会话ID（过滤空值）
+   */
+  getDocumentSessionIds(): string[] {
+    return this.documentSessions
+      .map(doc => doc.sessionId)
+      .filter(sessionId => sessionId && sessionId.trim() !== '');
+  }
+  
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
+    
+    // 取消文档事件订阅
+    if (this.eventSubscription) {
+      this.eventSubscription.unsubscribe();
+      this.eventSubscription = undefined;
+    }
   }
 }

src/app/models/document.model.ts

@@ -0,0 +1,85 @@
+// 文档类型枚举
+export enum DocumentType {
+  UserRequirement = 'user_requirement',    // 用户原始需求
+  Requirement = 'requirement',             // 需求文档
+  Technical = 'technical',                 // 技术文档
+  Implementation = 'implementation',       // 业务实现
+  Test = 'test'                           // 测试文档
+}
+
+// 文档类型显示名称映射
+export const DocumentTypeDisplayName: Record<DocumentType, string> = {
+  [DocumentType.UserRequirement]: '用户原始需求',
+  [DocumentType.Requirement]: '需求文档',
+  [DocumentType.Technical]: '技术文档',
+  [DocumentType.Implementation]: '业务实现',
+  [DocumentType.Test]: '测试文档'
+};
+
+// 文档类型图标映射
+export const DocumentTypeIcon: Record<DocumentType, string> = {
+  [DocumentType.UserRequirement]: 'description',
+  [DocumentType.Requirement]: 'assignment',
+  [DocumentType.Technical]: 'code',
+  [DocumentType.Implementation]: 'architecture',
+  [DocumentType.Test]: 'bug_report'
+};
+
+// 文档会话信息
+export interface DocumentSession {
+  id: string;                           // 文档唯一ID (DocumentType值)
+  sessionId: string;                    // 对应会话ID
+  title: string;                        // 文档标题 (显示名称)
+  content: string;                      // 从SSE获取的内容
+  type: DocumentType;                   // 文档类型
+  lastUpdated: Date;                    // 最后更新时间
+  isLoading?: boolean;                  // 是否正在加载
+  hasContent?: boolean;                 // 是否有内容
+}
+
+// 项目文档会话映射
+export interface ProjectDocumentSessions {
+  projectId: string;                    // 项目ID
+  documents: {
+    [DocumentType.UserRequirement]?: string;  // 用户原始需求会话ID
+    [DocumentType.Requirement]?: string;      // 需求文档会话ID
+    [DocumentType.Technical]?: string;        // 技术文档会话ID
+    [DocumentType.Implementation]?: string;   // 业务实现会话ID
+    [DocumentType.Test]?: string;             // 测试文档会话ID
+  };
+}
+
+// 获取文档类型顺序（按照显示顺序）
+export function getDocumentTypeOrder(): DocumentType[] {
+  return [
+    DocumentType.UserRequirement,
+    DocumentType.Requirement,
+    DocumentType.Technical,
+    DocumentType.Implementation,
+    DocumentType.Test
+  ];
+}
+
+// 从会话ID获取文档类型
+export function getDocumentTypeFromSessionId(sessionId: string, projectDocs: ProjectDocumentSessions): DocumentType | null {
+  for (const docType of getDocumentTypeOrder()) {
+    if (projectDocs.documents[docType] === sessionId) {
+      return docType;
+    }
+  }
+  return null;
+}
+
+// 创建空的文档会话数组（用于初始化）
+export function createEmptyDocumentSessions(projectId: string): DocumentSession[] {
+  return getDocumentTypeOrder().map(docType => ({
+    id: docType,
+    sessionId: '',
+    title: DocumentTypeDisplayName[docType],
+    content: '',
+    type: docType,
+    lastUpdated: new Date(),
+    isLoading: false,
+    hasContent: false
+  }));
+}

src/app/models/instance.model.ts

@@ -1,10 +1,14 @@
+import { DocumentType } from './document.model';
+
 // 实例类型
 export interface Instance {
   id: string; // 实例唯一ID
   menuItemId: string; // 关联的菜单项ID
   title: string; // 实例标题（通常为菜单项名称）
   sessionIds: string[]; // 该实例关联的会话ID列表
+  documentSessionIds: string[]; // 5个文档会话ID列表
   activeSessionId?: string; // 当前活动的会话ID
+  activeDocumentType?: DocumentType; // 当前活动的文档类型
   createdAt: Date;
 }
 

src/app/services/event.service.ts

@@ -48,6 +48,13 @@ export class EventService implements OnDestroy {
   // 会话ID到实例ID的注册映射
   private sessionToInstanceMap = new Map<string, string>();
   
+  // 多会话事件源映射（用于文档列表等场景）
+  private multiSessionEventSources = new Map<string, EventSource>();
+  
+  // 多会话事件主题
+  private multiSessionEventsSubject = new Subject<{sessionId: string, event: GlobalEvent}>();
+  multiSessionEvents$ = this.multiSessionEventsSubject.asObservable();
+  
   constructor(
     private authService: AuthService,
     @Optional() private instanceService?: InstanceService,
@@ -173,6 +180,137 @@ export class EventService implements OnDestroy {
     };
   }
   
+  /**
+   * 连接到多会话事件流（用于文档列表等场景）
+   * @param sessionIds 会话ID数组
+   */
+  connectToMultipleSessions(sessionIds: string[]) {
+    if (!sessionIds || sessionIds.length === 0) {
+      return;
+    }
+    
+    // 检查是否已登录
+    if (!this.authService.isAuthenticated()) {
+      console.warn('未登录状态，不连接多会话事件流');
+      return;
+    }
+    
+    // 获取认证token
+    const token = this.authService.getToken();
+    if (!token) {
+      console.error('无法获取认证token');
+      return;
+    }
+    
+    // 为每个会话ID创建独立的EventSource连接
+    sessionIds.forEach(sessionId => {
+      // 如果已经存在连接，先关闭
+      if (this.multiSessionEventSources.has(sessionId)) {
+        const existingSource = this.multiSessionEventSources.get(sessionId);
+        if (existingSource) {
+          existingSource.close();
+        }
+        this.multiSessionEventSources.delete(sessionId);
+      }
+      
+      // 构建带认证参数的URL
+      const url = `/api/logs/stream?token=${encodeURIComponent(token)}&sessionId=${sessionId}`;
+      console.log(`EventService: 连接多会话事件流，会话ID: ${sessionId}, URL: ${url}`);
+      
+      const eventSource = new EventSource(url);
+      this.multiSessionEventSources.set(sessionId, eventSource);
+      
+      eventSource.onopen = () => {
+        console.log(`EventService: 多会话事件流连接已建立，会话ID: ${sessionId}`);
+      };
+      
+      eventSource.onmessage = (event) => {
+        const eventData = event.data;
+        
+        // 跳过心跳消息
+        if (eventData === ': heartbeat' || eventData.startsWith(': ')) {
+          return;
+        }
+        
+        try {
+          // 解析JSON事件
+          const globalEvent: GlobalEvent = JSON.parse(eventData);
+          console.log(`EventService: 收到多会话事件，会话ID: ${sessionId}, 类型: ${globalEvent.payload.type}`);
+          
+          // 分发到多会话事件主题
+          this.multiSessionEventsSubject.next({ sessionId, event: globalEvent });
+          
+          // 同时分发到全局事件流（保持兼容性）
+          this.distributeEventBySession(globalEvent);
+        } catch (error) {
+          console.error(`EventService: 解析多会话事件失败，会话ID: ${sessionId}, 数据:`, eventData.substring(0, 100));
+        }
+      };
+      
+      eventSource.onerror = (error) => {
+        console.error(`EventService: 多会话事件流连接错误，会话ID: ${sessionId}:`, error);
+        // 多会话连接错误不触发全局重连，只关闭该连接
+        eventSource.close();
+        this.multiSessionEventSources.delete(sessionId);
+        
+        // 可选：重新连接单个会话（延迟重试）
+        setTimeout(() => {
+          if (this.authService.isAuthenticated()) {
+            this.connectToMultipleSessions([sessionId]);
+          }
+        }, 5000);
+      };
+    });
+  }
+  
+  /**
+   * 断开指定会话的多会话事件流
+   * @param sessionIds 会话ID数组（如果为空则断开所有）
+   */
+  disconnectMultipleSessions(sessionIds?: string[]) {
+    if (!sessionIds) {
+      // 断开所有多会话连接
+      this.multiSessionEventSources.forEach((eventSource, sessionId) => {
+        eventSource.close();
+        console.log(`EventService: 断开多会话事件流，会话ID: ${sessionId}`);
+      });
+      this.multiSessionEventSources.clear();
+    } else {
+      // 断开指定会话的连接
+      sessionIds.forEach(sessionId => {
+        const eventSource = this.multiSessionEventSources.get(sessionId);
+        if (eventSource) {
+          eventSource.close();
+          this.multiSessionEventSources.delete(sessionId);
+          console.log(`EventService: 断开多会话事件流，会话ID: ${sessionId}`);
+        }
+      });
+    }
+  }
+  
+  /**
+   * 获取指定会话的事件流（按会话ID过滤）
+   * @param sessionId 会话ID
+   * @returns 过滤后的事件Observable
+   */
+  getSessionEvents(sessionId: string): Observable<GlobalEvent> {
+    return this.sessionEvents$.pipe(
+      filter(({ sessionId: eventSessionId }) => eventSessionId === sessionId),
+      map(({ event }) => event)
+    );
+  }
+  
+  /**
+   * 获取多个会话的事件流（按会话ID数组过滤）
+   * @param sessionIds 会话ID数组
+   * @returns 过滤后的事件Observable
+   */
+  getMultipleSessionEvents(sessionIds: string[]): Observable<{sessionId: string, event: GlobalEvent}> {
+    return this.multiSessionEvents$.pipe(
+      filter(({ sessionId }) => sessionIds.includes(sessionId))
+    );
+  }
+  
   // 处理全局事件
   private handleGlobalEvent(event: GlobalEvent) {
     console.log('EventService: 处理全局事件，类型:', event.payload.type);

src/app/services/instance.service.ts

@@ -57,6 +57,7 @@ export class InstanceService {
       menuItemId: params.menuItemId,
       title: params.title || menuItem.name,
       sessionIds: [],
+      documentSessionIds: [], // 初始化为空数组
       activeSessionId: undefined,
       createdAt: new Date()
     };

src/app/services/mock-data.service.ts

@@ -0,0 +1,373 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { DocumentSession, DocumentType, createEmptyDocumentSessions } from '../models/document.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MockDataService {
+  // 模拟项目ID
+  private mockProjectId = 'proj_mock_001';
+  
+  // 模拟文档会话数据
+  private mockDocumentSessions: DocumentSession[] = [
+    {
+      id: DocumentType.UserRequirement,
+      sessionId: 'session_user_req_001',
+      title: '用户原始需求',
+      content: `帮我建立自动补货：要求先按销售业绩进行店铺分组，商品按爆畅平滞分类，后，按照售罄率进行补货等等来编写sql代码，分步骤建立临时表保存过度数据，最后测试通过，发布。
+
+具体要求：
+1. 店铺分组：按最近30天销售额分为A、B、C三类店铺
+2. 商品分类：按销售表现分为爆款、畅款、平款、滞销款
+3. 补货逻辑：基于售罄率计算补货数量
+4. 临时表：每个步骤建立临时表保存中间结果
+5. 最终输出：完整的补货建议报告`,
+      type: DocumentType.UserRequirement,
+      lastUpdated: new Date('2025-02-13T10:00:00'),
+      isLoading: false,
+      hasContent: true
+    },
+    {
+      id: DocumentType.Requirement,
+      sessionId: 'session_req_002',
+      title: '需求文档',
+      content: `# 自动补货系统需求文档
+
+## 1. 业务目标
+建立智能补货系统，基于销售数据和库存情况自动生成补货建议。
+
+## 2. 核心功能
+### 2.1 店铺分级
+- 输入：店铺最近30天销售数据
+- 逻辑：按销售额排序，分为A(前30%)、B(中间40%)、C(后30%)
+- 输出：店铺分级表
+
+### 2.2 商品分类
+- 输入：商品销售数据（销量、销售额、库存）
+- 逻辑：按销售表现分类：
+  - 爆款：销量Top 20%，售罄率>80%
+  - 畅款：销量中间60%，售罄率40-80%
+  - 平款：销量较低但稳定
+  - 滞销款：30天无销售或售罄率<20%
+- 输出：商品分类表
+
+### 2.3 补货计算
+- 输入：商品分类、店铺分级、当前库存、销售预测
+- 逻辑：基于售罄率计算建议补货数量
+- 公式：建议补货量 = (销售预测 × 补货系数) - 当前库存
+- 输出：补货建议表
+
+## 3. 数据流程
+1. 原始销售数据 → 店铺分级
+2. 商品销售数据 → 商品分类
+3. 分级+分类+库存 → 补货计算
+4. 输出补货建议报告`,
+      type: DocumentType.Requirement,
+      lastUpdated: new Date('2025-02-13T11:30:00'),
+      isLoading: false,
+      hasContent: true
+    },
+    {
+      id: DocumentType.Technical,
+      sessionId: 'session_tech_003',
+      title: '技术文档',
+      content: `# 自动补货系统技术方案
+
+## 1. 系统架构
+### 1.1 数据层
+- 数据源：销售事实表、店铺维度表、商品维度表
+- 存储：MySQL + Redis缓存
+- ETL：每日定时任务更新数据
+
+### 1.2 计算层
+- 临时表设计：
+  \`\`\`sql
+  -- 临时表1：店铺分级
+  CREATE TEMPORARY TABLE tmp_store_level AS
+  SELECT 
+    store_id,
+    sales_amount,
+    CASE 
+      WHEN sales_percentile <= 0.3 THEN 'A'
+      WHEN sales_percentile <= 0.7 THEN 'B'
+      ELSE 'C'
+    END AS store_level
+  FROM (
+    SELECT 
+      store_id,
+      SUM(sales_amount) as sales_amount,
+      PERCENT_RANK() OVER (ORDER BY SUM(sales_amount)) as sales_percentile
+    FROM sales_fact
+    WHERE sale_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
+    GROUP BY store_id
+  ) t;
+  \`\`\`
+
+### 1.3 业务层
+- 补货算法实现
+- 参数配置管理
+- 结果输出接口
+
+## 2. 关键技术
+- SQL窗口函数（PERCENT_RANK）
+- 临时表管理
+- 参数化查询
+- 批量数据处理`,
+      type: DocumentType.Technical,
+      lastUpdated: new Date('2025-02-13T13:15:00'),
+      isLoading: false,
+      hasContent: true
+    },
+    {
+      id: DocumentType.Implementation,
+      sessionId: 'session_impl_004',
+      title: '业务实现',
+      content: `# 自动补货SQL实现代码
+
+## 步骤1：店铺分级
+\`\`\`sql
+-- 创建店铺分级临时表
+DROP TEMPORARY TABLE IF EXISTS tmp_store_level;
+CREATE TEMPORARY TABLE tmp_store_level AS
+WITH store_sales AS (
+  SELECT 
+    s.store_id,
+    st.store_name,
+    SUM(f.sales_amount) as total_sales,
+    COUNT(DISTINCT f.sale_date) as sales_days,
+    ROW_NUMBER() OVER (ORDER BY SUM(f.sales_amount) DESC) as rank,
+    COUNT(*) OVER () as total_stores
+  FROM sales_fact f
+  JOIN store_dim s ON f.store_id = s.store_id
+  WHERE f.sale_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
+  GROUP BY s.store_id, st.store_name
+)
+SELECT 
+  store_id,
+  store_name,
+  total_sales,
+  sales_days,
+  CASE 
+    WHEN rank <= total_stores * 0.3 THEN 'A'
+    WHEN rank <= total_stores * 0.7 THEN 'B'
+    ELSE 'C'
+  END as store_level
+FROM store_sales;
+\`\`\`
+
+## 步骤2：商品分类
+\`\`\`sql
+-- 创建商品分类临时表
+DROP TEMPORARY TABLE IF EXISTS tmp_product_category;
+CREATE TEMPORARY TABLE tmp_product_category AS
+SELECT 
+  p.product_id,
+  p.product_name,
+  SUM(f.quantity) as total_sales_qty,
+  SUM(f.sales_amount) as total_sales_amount,
+  AVG(p.current_stock) as avg_stock,
+  CASE
+    WHEN SUM(f.quantity) > PERCENTILE_CONT(0.8) WITHIN GROUP (ORDER BY SUM(f.quantity)) OVER () 
+         AND (SUM(f.quantity) / (AVG(p.current_stock) + SUM(f.quantity))) > 0.8 
+         THEN '爆款'
+    WHEN SUM(f.quantity) > PERCENTILE_CONT(0.2) WITHIN GROUP (ORDER BY SUM(f.quantity)) OVER () 
+         THEN '畅款'
+    WHEN SUM(f.quantity) > 0 THEN '平款'
+    ELSE '滞销款'
+  END as product_category
+FROM sales_fact f
+JOIN product_dim p ON f.product_id = p.product_id
+WHERE f.sale_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
+GROUP BY p.product_id, p.product_name;
+\`\`\`
+
+## 步骤3：补货计算
+\`\`\`sql
+-- 最终补货建议
+SELECT 
+  s.store_id,
+  s.store_name,
+  s.store_level,
+  p.product_id,
+  p.product_name,
+  p.product_category,
+  p.current_stock,
+  f.avg_daily_sales,
+  ROUND(f.avg_daily_sales * 7 - p.current_stock, 0) as suggested_replenishment
+FROM store_dim s
+CROSS JOIN product_dim p
+JOIN (
+  SELECT 
+    store_id,
+    product_id,
+    AVG(quantity) as avg_daily_sales
+  FROM sales_fact
+  WHERE sale_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
+  GROUP BY store_id, product_id
+) f ON s.store_id = f.store_id AND p.product_id = f.product_id
+WHERE p.current_stock < f.avg_daily_sales * 3  -- 库存小于3天销量
+ORDER BY s.store_level, p.product_category, suggested_replenishment DESC;
+\`\`\``,
+      type: DocumentType.Implementation,
+      lastUpdated: new Date('2025-02-13T14:45:00'),
+      isLoading: false,
+      hasContent: true
+    },
+    {
+      id: DocumentType.Test,
+      sessionId: 'session_test_005',
+      title: '测试文档',
+      content: `# 自动补货系统测试方案
+
+## 1. 测试数据准备
+### 1.1 模拟数据
+\`\`\`sql
+-- 创建测试店铺数据
+INSERT INTO store_dim (store_id, store_name, region, create_time) VALUES
+('S001', '测试店铺A', '华东', NOW()),
+('S002', '测试店铺B', '华南', NOW()),
+('S003', '测试店铺C', '华北', NOW());
+
+-- 创建测试商品数据
+INSERT INTO product_dim (product_id, product_name, category, current_stock, create_time) VALUES
+('P001', '测试商品1', '服装', 100, NOW()),
+('P002', '测试商品2', '鞋类', 50, NOW()),
+('P003', '测试商品3', '配件', 200, NOW());
+
+-- 创建测试销售数据
+INSERT INTO sales_fact (sale_id, store_id, product_id, sale_date, quantity, sales_amount) VALUES
+(UUID(), 'S001', 'P001', DATE_SUB(CURDATE(), INTERVAL 1 DAY), 10, 1000),
+(UUID(), 'S001', 'P002', DATE_SUB(CURDATE(), INTERVAL 2 DAY), 5, 750),
+(UUID(), 'S002', 'P001', DATE_SUB(CURDATE(), INTERVAL 3 DAY), 8, 800);
+\`\`\`
+
+## 2. 功能测试用例
+### 2.1 店铺分级测试
+- 输入：30天销售数据
+- 预期：正确分为A、B、C三级
+- 验证：检查分级逻辑和比例
+
+### 2.2 商品分类测试
+- 输入：商品销售数据
+- 预期：正确分为爆、畅、平、滞四类
+- 验证：检查分类算法准确性
+
+### 2.3 补货计算测试
+- 输入：分级+分类+库存
+- 预期：合理的补货建议
+- 验证：检查计算公式和阈值
+
+## 3. 性能测试
+- 数据量：1000店铺 × 10000商品
+- 响应时间：< 30秒
+- 内存使用：< 2GB
+
+## 4. 集成测试
+- 数据流：源系统 → 临时表 → 结果表
+- 异常处理：空数据、异常值、连接中断
+- 恢复机制：失败重试、数据回滚`,
+      type: DocumentType.Test,
+      lastUpdated: new Date('2025-02-13T16:00:00'),
+      isLoading: false,
+      hasContent: true
+    }
+  ];
+
+  constructor() { }
+
+  /**
+   * 获取项目文档会话数据
+   */
+  getProjectDocuments(projectId: string): Observable<DocumentSession[]> {
+    if (projectId === this.mockProjectId) {
+      return of(this.mockDocumentSessions);
+    }
+    // 其他项目返回空数据
+    return of(createEmptyDocumentSessions(projectId));
+  }
+
+  /**
+   * 获取项目文档会话映射
+   */
+  getProjectDocumentSessionIds(projectId: string): Observable<Record<DocumentType, string>> {
+    const sessionIds: Record<DocumentType, string> = {
+      [DocumentType.UserRequirement]: 'session_user_req_001',
+      [DocumentType.Requirement]: 'session_req_002',
+      [DocumentType.Technical]: 'session_tech_003',
+      [DocumentType.Implementation]: 'session_impl_004',
+      [DocumentType.Test]: 'session_test_005'
+    };
+    
+    return of(sessionIds);
+  }
+
+  /**
+   * 模拟SSE事件流
+   * 在实际中将被真实的EventService替换
+   */
+  simulateSSEEvent(sessionId: string, content: string): Observable<string> {
+    // 模拟打字机效果
+    return new Observable<string>(observer => {
+      let index = 0;
+      const interval = setInterval(() => {
+        if (index < content.length) {
+          observer.next(content.charAt(index));
+          index++;
+        } else {
+          clearInterval(interval);
+          observer.complete();
+        }
+      }, 50);
+    });
+  }
+
+  /**
+   * 获取模拟AI回复
+   */
+  getMockAIResponse(): string {
+    return `# 自动补货系统实现建议
+
+我已经分析了您的需求，以下是完整的实现方案：
+
+## 1. 架构设计
+采用**分层临时表**策略，确保数据处理流程清晰：
+
+1. **店铺分级表** (tmp_store_level)
+2. **商品分类表** (tmp_product_category)  
+3. **销售预测表** (tmp_sales_forecast)
+4. **补货建议表** (tmp_replenishment_suggestion)
+
+## 2. 关键技术点
+
+### 2.1 窗口函数应用
+\`\`\`sql
+-- 使用PERCENT_RANK进行店铺分级
+PERCENT_RANK() OVER (ORDER BY sales_amount) as sales_percentile
+\`\`\`
+
+### 2.2 临时表管理
+\`\`\`sql
+-- 创建临时表保存中间结果
+CREATE TEMPORARY TABLE tmp_intermediate AS ...
+\`\`\`
+
+### 2.3 性能优化
+- 索引优化：在store_id, product_id, sale_date上建立索引
+- 分区策略：按日期分区销售事实表
+- 批量处理：分批次处理大数据量
+
+## 3. 完整实现代码
+[详见业务实现文档]
+
+## 4. 测试建议
+1. 单元测试：每个临时表独立测试
+2. 集成测试：完整流程测试
+3. 性能测试：大数据量压力测试
+
+## 5. 部署建议
+1. 生产环境：每日凌晨执行
+2. 监控：执行时间、数据质量
+3. 报警：异常情况及时通知`;
+  }
+}

src/app/shared/pipes/markdown.pipe.ts

@@ -81,7 +81,7 @@ export class MarkdownPipe implements PipeTransform {
         return `<details class="${cssClass}-details"><summary class="${cssClass}-summary">${emoji} ${tagName}</summary></details>`;
       }
       
-      return `<details class="${cssClass}-details" ${cssClass === 'thinking' || cssClass === 'tool' ? '' : 'open'}><summary class="${cssClass}-summary">${emoji} ${tagName}</summary>${trimmedContent}</details>`;
+      return `<details class="${cssClass}-details" ${cssClass === 'thinking' || cssClass === 'tool' ? 'open' : ''}><summary class="${cssClass}-summary">${emoji} ${tagName}</summary>${trimmedContent}</details>`;
     });
   }