添加项目管理api

ng-code.log

@@ -1,44 +0,0 @@
-
-> ng-code@0.0.0 start
-> ng serve
-
-Component HMR has been enabled, see https://angular.dev/hmr for more info.
-❯ Building...
-✔ Building...
-Initial chunk files | Names         |  Raw size
-scripts.js          | scripts       | 566.47 kB | 
-styles.css          | styles        | 386.31 kB | 
-main.js             | main          | 303.30 kB | 
-polyfills.js        | polyfills     |  89.77 kB | 
-
-                    | Initial total |   1.35 MB
-
-Application bundle generation complete. [4.173 seconds]
-
-Watch mode enabled. Watching for file changes...
-NOTE: Raw file sizes do not reflect development server per-request transformations.
-  ➜  Local:   http://localhost:4200/
-❯ Changes detected. Rebuilding...
-✔ Changes detected. Rebuilding...
-Initial chunk files | Names |  Raw size
-main.js             | main  | 303.26 kB | 
-
-Application bundle generation complete. [3.544 seconds]
-
-Page reload sent to client(s).
-❯ Changes detected. Rebuilding...
-✔ Changes detected. Rebuilding...
-Initial chunk files | Names |  Raw size
-main.js             | main  | 303.23 kB | 
-
-Application bundle generation complete. [1.331 seconds]
-
-Page reload sent to client(s).
-❯ Changes detected. Rebuilding...
-✔ Changes detected. Rebuilding...
-Initial chunk files | Names |  Raw size
-main.js             | main  | 303.24 kB | 
-
-Application bundle generation complete. [1.370 seconds]
-
-Page reload sent to client(s).

src/app/app.component.html

@@ -1,7 +1,7 @@
 @if (isLoginPage) {
   <router-outlet></router-outlet>
 } @else {
-  <!-- 多实例标签页布局 -->
+  <!-- 项目标签页布局 -->
   <div class="app-container">
     <!-- 顶部导航栏 -->
     <header class="app-header">
@@ -11,16 +11,32 @@
           <h1 class="logo-text">AGI对话系统</h1>
         </div>
         
-        <!-- 菜单项 -->
-        <nav class="menu-nav">
-          @for (menuItem of topMenuItems; track menuItem.id) {
-            <button mat-button 
-                    class="menu-button"
-                    (click)="openOrActivateInstance(menuItem.id)"
-                    [class.active]="isInstanceActiveForMenuItem(menuItem.id)">
-              <mat-icon>{{ menuItem.icon || 'folder' }}</mat-icon>
-              <span>{{ menuItem.name }}</span>
-            </button>
+        <!-- 主页按钮 -->
+        <button mat-button 
+                class="menu-button"
+                routerLink="/home"
+                routerLinkActive="active"
+                (click)="goHome()">
+          <mat-icon>home</mat-icon>
+          <span>主页</span>
+        </button>
+        
+
+        
+        <!-- 项目标签页 -->
+        <nav class="tabs-nav">
+          @for (tab of (tabs$ | async); track tab.id) {
+            <div class="tab-item" 
+                 [class.active]="(activeTabId$ | async) === tab.id"
+                 (click)="openProjectTab(tab.id)">
+              <mat-icon class="tab-icon">folder</mat-icon>
+              <span class="tab-title">{{ tab.title || '未命名项目' }}</span>
+              <button mat-icon-button 
+                      class="tab-close"
+                      (click)="closeProjectTab(tab.id, $event)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
           }
         </nav>
       </div>
@@ -38,6 +54,14 @@
         
         <!-- 用户信息 -->
         <div class="user-info">
+          <!-- 新建项目按钮（加号） -->
+          <button mat-icon-button 
+                  class="new-project-btn"
+                  (click)="openNewProjectModal()"
+                  matTooltip="新建项目">
+            <mat-icon>add</mat-icon>
+          </button>
+          
           <span class="username">{{ username }}</span>
           <button mat-icon-button [matMenuTriggerFor]="userMenu">
             <mat-icon>account_circle</mat-icon>
@@ -54,26 +78,15 @@
     
     <!-- 主内容区域 -->
     <main class="app-main">
-      @if (isInstancesLoading) {
-        <div class="loading-state">
-          <mat-spinner diameter="40"></mat-spinner>
-          <p>正在加载实例...</p>
-        </div>
-      } @else {
-        <!-- 当前活动实例 -->
-        @if (getActiveInstance(); as activeInstance) {
-          <div class="active-instance-container">
-            <app-instance [instanceId]="activeInstance.id"></app-instance>
-          </div>
-        } @else {
-          <!-- 空状态 -->
-          <div class="empty-state">
-            <mat-icon class="empty-icon">chat</mat-icon>
-            <h3>暂无实例</h3>
-            <p>点击上方菜单项创建实例</p>
-          </div>
-        }
-      }
+      <router-outlet></router-outlet>
     </main>
   </div>
+  
+  <!-- 新建项目模态框 -->
+  @if (showNewProjectModal) {
+    <app-new-project-modal
+      [(visible)]="showNewProjectModal"
+      (projectCreated)="onProjectCreated($event)">
+    </app-new-project-modal>
+  }
 }

src/app/app.component.scss

@@ -130,21 +130,34 @@
   }
 }
 
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  
-  .username {
-    font-size: 14px;
-    color: #4b5563;
-    font-weight: 500;
-  }
-  
-  mat-icon {
-    color: #6b7280;
-  }
-}
+ .user-info {
+   display: flex;
+   align-items: center;
+   gap: 10px;
+   
+   .new-project-btn {
+     margin-right: 8px;
+     
+     mat-icon {
+       color: #3b82f6;
+       transition: color 0.2s;
+     }
+     
+     &:hover mat-icon {
+       color: #2563eb;
+     }
+   }
+   
+   .username {
+     font-size: 14px;
+     color: #4b5563;
+     font-weight: 500;
+   }
+   
+   mat-icon {
+     color: #6b7280;
+   }
+ }
 
 /* 主内容区域 */
 .app-main {
@@ -263,4 +276,94 @@
 
 ::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
+}
+
+/* 标签页导航 */
+.tabs-nav {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: 16px;
+  overflow-x: auto;
+  max-width: 600px;
+  padding: 4px 0;
+  
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+  }
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  flex-shrink: 0;
+  
+  .tab-icon {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+    color: #6b7280;
+  }
+  
+  .tab-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: #4b5563;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .tab-close {
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    margin-left: 2px;
+    
+    mat-icon {
+      font-size: 14px;
+      height: 14px;
+      width: 14px;
+      color: #9ca3af;
+    }
+    
+    &:hover mat-icon {
+      color: #ef4444;
+    }
+  }
+  
+  &:hover {
+    background: #e5e7eb;
+    border-color: #d1d5db;
+  }
+  
+  &.active {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    
+    .tab-icon,
+    .tab-title {
+      color: white;
+    }
+    
+    .tab-close mat-icon {
+      color: rgba(255, 255, 255, 0.8);
+    }
+    
+    .tab-close:hover mat-icon {
+      color: white;
+    }
+  }
 }

src/app/app.component.ts

@@ -1,70 +1,58 @@
-import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router, RouterOutlet } from '@angular/router';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+import { Observable } from 'rxjs';
 import { MatIcon } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AuthService } from './services/auth.service';
 import { EventService } from './services/event.service';
-import { InstanceService } from './services/instance.service';
-import { MenuService } from './services/menu.service';
-import { InstanceComponent } from './components/instance.component';
+import { TabService } from './services/tab.service';
+import { SessionService } from './services/session.service';
 import { Subscription } from 'rxjs';
 import { ConfigService } from 'base-core';
-import { MenuItem } from './models/menu.model';
+import { NewProjectModalComponent } from './components/new-project-modal.component';
 
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterOutlet, InstanceComponent, MatIcon, MatButtonModule, MatMenuModule, DragDropModule, MatTooltipModule, MatProgressSpinnerModule],
+  imports: [CommonModule, RouterOutlet, RouterLink, MatIcon, MatButtonModule, MatMenuModule, MatTabsModule, MatTooltipModule, MatProgressSpinnerModule, NewProjectModalComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent implements OnInit, OnDestroy {
-  // 多实例管理相关属性
-  topMenuItems: MenuItem[] = [];
-  instances$: any; // 在构造函数中初始化
-  activeInstanceId$: any; // 在构造函数中初始化
-  isInstancesLoading = false;
+  // 项目标签页管理
+  tabs$: Observable<any>;
+  activeTabId$: Observable<string | null>;
+  showNewProjectModal = false;
   
-  // 布局相关属性（保留向后兼容）
-  leftWidth = 320; // 左侧会话列表宽度
-  rightWidth = 400; // 右侧日志区域宽度
-  isDraggingLeft = false;
-  isDraggingRight = false;
-  minLeftWidth = 200;
-  maxLeftWidth = 500;
-  minRightWidth = 300;
-  maxRightWidth = 600;
   private subscriptions: Subscription = new Subscription();
   isEventStreamConnected = false;
 
-   constructor(
+  constructor(
     private router: Router,
     public authService: AuthService,
     private config: ConfigService,
     private eventService: EventService,
-    private instanceService: InstanceService,
-    private menuService: MenuService
+    private tabService: TabService,
+    private sessionService: SessionService
   ) {
-    this.instances$ = this.instanceService.instances$;
-    this.activeInstanceId$ = this.instanceService.activeInstanceId$;
+    this.tabs$ = this.tabService.tabs$;
+    this.activeTabId$ = this.tabService.activeTabId$;
   }
   
   ngOnInit() {
     console.log('AppComponent初始化');
-    console.log('当前路由:', this.router.url);
     
-     // 禁用模拟数据，使用真实API
-     this.config.useMockData = false;
-     this.config.apiBaseUrl = '/api'; // 确保使用代理路径
-     console.log('使用真实API，配置:', {
-       useMockData: this.config.useMockData,
-       apiBaseUrl: this.config.apiBaseUrl
-     });
+    // 禁用模拟数据，使用真实API
+    this.config.useMockData = false;
+    this.config.apiBaseUrl = '/api';
+    console.log('使用真实API，配置:', {
+      useMockData: this.config.useMockData,
+      apiBaseUrl: this.config.apiBaseUrl
+    });
     
     // 订阅事件流连接状态
     this.subscriptions.add(
@@ -74,52 +62,50 @@ export class AppComponent implements OnInit, OnDestroy {
       })
     );
 
-    // 如果已登录，加载菜单和实例
+    // 如果已登录，加载项目
     if (this.authService.isAuthenticated()) {
-      this.loadMenuAndInstances();
+      this.loadProjects();
     } else {
       // 订阅认证状态变化
       this.subscriptions.add(
         this.authService.authState$.subscribe(authState => {
           if (authState.isAuthenticated) {
-            console.log('用户已认证，加载菜单和实例');
-            this.loadMenuAndInstances();
+            console.log('用户已认证，加载项目');
+            this.loadProjects();
           }
         })
       );
     }
   }
 
-  // 加载菜单并初始化实例
-  loadMenuAndInstances() {
-    this.isInstancesLoading = true;
-    
-    // 加载顶部菜单
-    this.menuService.getTopMenu().subscribe({
-      next: (menuItems) => {
-        this.topMenuItems = menuItems;
-        console.log('加载菜单项:', menuItems.length);
-        console.log('菜单项详细信息:', JSON.stringify(menuItems, null, 2));
-        if (menuItems.length > 0) {
-          console.log('第一个菜单项:', menuItems[0]);
-          console.log('第一个菜单项ID:', menuItems[0].id);
-        }
+  // 加载项目列表
+  loadProjects() {
+    this.sessionService.getSessions().subscribe({
+      next: (sessions) => {
+        // 从会话中提取项目信息
+        const projects = sessions
+          .filter(session => session.project_id)
+          .map(session => ({
+            id: session.project_id!,
+            title: session.title,
+            description: session.description,
+            agent: session.agent_name,
+            created_at: session.created_at,
+            updated_at: session.updated_at
+          }));
         
-        // 为每个菜单项创建实例
-        this.instanceService.initializeInstances().subscribe({
-          next: () => {
-            this.isInstancesLoading = false;
-            console.log('实例初始化完成');
-          },
-          error: (error) => {
-            console.error('实例初始化失败:', error);
-            this.isInstancesLoading = false;
-          }
-        });
+        // 去重：相同project_id只保留最新
+        const uniqueProjects = Array.from(
+          new Map(projects.map(p => [p.id, p])).values()
+        );
+        
+        console.log('加载项目列表:', uniqueProjects.length);
+        
+        // 可以在这里更新标签页服务中的项目数据（如果需要）
+        // this.tabService.updateProjects(uniqueProjects);
       },
       error: (error) => {
-        console.error('加载菜单失败:', error);
-        this.isInstancesLoading = false;
+        console.error('加载项目失败:', error);
       }
     });
   }
@@ -128,122 +114,58 @@ export class AppComponent implements OnInit, OnDestroy {
     return this.router.url.includes('/login');
   }
 
-  startLeftDrag(event: MouseEvent) {
-    event.preventDefault();
-    this.isDraggingLeft = true;
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  }
-
-  startRightDrag(event: MouseEvent) {
-    event.preventDefault();
-    this.isDraggingRight = true;
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  }
-
-  @HostListener('document:mousemove', ['$event'])
-  onDrag(event: MouseEvent) {
-    // 处理左侧拖动
-    if (this.isDraggingLeft) {
-      const newWidth = event.clientX;
-      if (newWidth >= this.minLeftWidth && newWidth <= this.maxLeftWidth) {
-        this.leftWidth = newWidth;
-      }
-    }
-    // 处理右侧拖动
-    if (this.isDraggingRight) {
-      // 右侧宽度 = 窗口宽度 - 鼠标X坐标 - 分割线宽度(8px)
-      const newRightWidth = window.innerWidth - event.clientX - 8;
-      if (newRightWidth >= this.minRightWidth && newRightWidth <= this.maxRightWidth) {
-        this.rightWidth = newRightWidth;
-      }
-    }
+  // 导航到主页
+  goHome() {
+    this.router.navigate(['/home']);
+    this.tabService.setActiveTab(null);
   }
 
-  @HostListener('document:mouseup')
-  stopDrag() {
-    if (this.isDraggingLeft) {
-      this.isDraggingLeft = false;
-      localStorage.setItem('leftWidth', this.leftWidth.toString());
-    }
-    if (this.isDraggingRight) {
-      this.isDraggingRight = false;
-      localStorage.setItem('rightWidth', this.rightWidth.toString());
-    }
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
+  // 打开项目标签页
+  openProjectTab(projectId: string) {
+    this.router.navigate(['/project', projectId]);
+    this.tabService.setActiveTab(projectId);
   }
 
-  logout() {
-    this.authService.logout();
-  }
-
-  // 打开或激活实例
-  openOrActivateInstance(menuItemId: string) {
-    const menuItem = this.topMenuItems.find(item => item.id === menuItemId);
-    if (!menuItem) {
-      console.error('菜单项不存在:', menuItemId);
-      return;
-    }
-
-    // 检查是否已存在该菜单项的实例
-    const existingInstance = this.instanceService.getInstanceByMenuItemId(menuItemId);
-    if (existingInstance) {
-      // 激活现有实例
-      this.instanceService.setActiveInstance(existingInstance.id);
-      console.log('激活现有实例:', existingInstance.title);
-    } else {
-      // 创建新实例
-      this.instanceService.createInstance({
-        menuItemId: menuItemId,
-        title: menuItem.name
-      }).subscribe({
-        next: (instance) => {
-          console.log('创建新实例:', instance.title);
-        },
-        error: (error) => {
-          console.error('创建实例失败:', error);
-        }
-      });
-    }
-  }
-
-  // 关闭实例
-  closeInstance(instanceId: string, event?: MouseEvent) {
+  // 关闭项目标签页
+  closeProjectTab(projectId: string, event?: MouseEvent) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
     }
     
-    this.instanceService.closeInstance(instanceId);
-    console.log('关闭实例:', instanceId);
+    this.tabService.closeTab(projectId);
+    
+    // 如果关闭的是当前活动标签页，导航到主页
+    this.tabService.activeTabId$.subscribe(activeId => {
+      if (activeId === projectId) {
+        this.router.navigate(['/home']);
+      }
+    }).unsubscribe();
+    
+    console.log('关闭项目标签页:', projectId);
   }
 
-  // 获取实例标题
-  getInstanceTitle(instanceId: string): string {
-    const instance = this.instanceService.getInstanceById(instanceId);
-    return instance?.title || '未知实例';
+  // 打开新建项目模态框
+  openNewProjectModal() {
+    console.log('🔍 [AppComponent] 打开新建项目模态框，当前状态:', this.showNewProjectModal);
+    this.showNewProjectModal = true;
+    console.log('🔍 [AppComponent] 设置后状态:', this.showNewProjectModal);
   }
 
-  get username(): string {
-    return this.authService.getCurrentUser()?.username || '用户';
+  // 处理项目创建
+  onProjectCreated(project: any) {
+    this.openProjectTab(project.id);
   }
 
-  // 检查菜单项对应的实例是否处于活动状态
-  isInstanceActiveForMenuItem(menuItemId: string): boolean {
-    const instance = this.instanceService.getInstanceByMenuItemId(menuItemId);
-    const activeInstance = this.instanceService.getActiveInstance();
-    return instance && activeInstance ? instance.id === activeInstance.id : false;
+  logout() {
+    this.authService.logout();
   }
 
-  // 获取当前活动实例
-  getActiveInstance() {
-    return this.instanceService.getActiveInstance();
+  get username(): string {
+    return this.authService.getCurrentUser()?.username || '用户';
   }
 
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }
-
 }

src/app/app.routes.ts

@@ -1,10 +1,13 @@
 import { Routes } from '@angular/router';
 import { LoginComponent } from './pages/login/login.component';
-import { DummyComponent } from './components/dummy.component';
+import { HomeComponent } from './components/home.component';
+import { ProjectTabComponent } from './components/project-tab.component';
 import { authGuard } from './guards/auth.guard';
 
 export const routes: Routes = [
   { path: 'login', component: LoginComponent },
-  { path: '', component: DummyComponent, canActivate: [authGuard] },
-  { path: '**', component: DummyComponent, canActivate: [authGuard] }
+  { path: 'home', component: HomeComponent, canActivate: [authGuard] },
+  { path: 'project/:projectId', component: ProjectTabComponent, canActivate: [authGuard] },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: '**', redirectTo: '/home' }
 ];

src/app/components/home.component.ts

@@ -0,0 +1,464 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subscription } from 'rxjs';
+import { SessionService } from '../services/session.service';
+import { TabService } from '../services/tab.service';
+import { AgentService } from '../services/agent.service';
+import { EventService } from '../services/event.service';
+import { Session } from '../models/session.model';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule
+  ],
+  template: `
+    <div class="home-container">
+      <!-- 顶部工具栏 -->
+      <div class="toolbar">
+        <h1>项目列表</h1>
+      </div>
+      
+      <!-- 项目卡片网格 -->
+      @if (isLoading) {
+        <div class="loading-state">
+          <mat-spinner diameter="40"></mat-spinner>
+          <p>加载项目中...</p>
+        </div>
+      } @else if (projects.length === 0) {
+        <div class="empty-state">
+          <mat-icon class="empty-icon">inbox</mat-icon>
+          <h3>暂无项目</h3>
+          <p>点击"新建项目"按钮创建第一个项目</p>
+        </div>
+      } @else {
+        <div class="projects-grid">
+          @for (project of projects; track project.project_id) {
+            <mat-card class="project-card">
+              <mat-card-header>
+                <mat-card-title>{{ project.title }}</mat-card-title>
+                <mat-card-subtitle>
+                  <span class="agent-badge">{{ getAgentDisplayName(project.agent_name) }}</span>
+                  <span class="status-badge" [class]="getStatusClass(project.status)">
+                    {{ getStatusDisplayName(project.status) }}
+                  </span>
+                </mat-card-subtitle>
+              </mat-card-header>
+              
+              <mat-card-content>
+                @if (project.description) {
+                  <p class="project-description">{{ project.description }}</p>
+                }
+                
+                <div class="project-meta">
+                  <div class="meta-item">
+                    <mat-icon>calendar_today</mat-icon>
+                    <span>{{ formatDate(project.created_at) }}</span>
+                  </div>
+                  <div class="meta-item">
+                    <mat-icon>update</mat-icon>
+                    <span>{{ formatDate(project.updated_at) }}</span>
+                  </div>
+                </div>
+                
+                <!-- 最新AI对话预览 -->
+                <div class="log-preview">
+                  <mat-icon>chat</mat-icon>
+                  <span class="log-text">最新对话：{{ getProjectLatestMessage(project.project_id || project.id) }}</span>
+                </div>
+              </mat-card-content>
+              
+              <mat-card-actions>
+                <button mat-button color="primary" (click)="runProject(project)">
+                  <mat-icon>play_arrow</mat-icon>
+                  运行
+                </button>
+                <button mat-button (click)="editProject(project)">
+                  <mat-icon>edit</mat-icon>
+                  编辑
+                </button>
+                <button mat-button color="warn" (click)="deleteProject(project)">
+                  <mat-icon>delete</mat-icon>
+                  删除
+                </button>
+              </mat-card-actions>
+            </mat-card>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .home-container {
+      padding: 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    
+    .toolbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 32px;
+    }
+    
+    .toolbar h1 {
+      margin: 0;
+      font-size: 1.8rem;
+      font-weight: 500;
+    }
+    
+    .loading-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: #666;
+    }
+    
+    .empty-state {
+      text-align: center;
+      padding: 80px 20px;
+      color: #666;
+    }
+    
+    .empty-icon {
+      font-size: 72px;
+      height: 72px;
+      width: 72px;
+      margin-bottom: 20px;
+      color: #ccc;
+    }
+    
+    .projects-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+      gap: 24px;
+    }
+    
+    .project-card {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .project-card mat-card-header {
+      margin-bottom: 16px;
+    }
+    
+    .agent-badge {
+      display: inline-block;
+      background: #e3f2fd;
+      color: #1976d2;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+    
+    .status-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+    }
+    
+    .status-requirement_document { background: #fff3e0; color: #f57c00; }
+    .status-technical_document { background: #e8f5e8; color: #388e3c; }
+    .status-code { background: #e3f2fd; color: #1976d2; }
+    .status-test { background: #f3e5f5; color: #7b1fa2; }
+    .status-release { background: #e8f5e8; color: #388e3c; }
+    
+    .project-description {
+      color: #666;
+      line-height: 1.5;
+      margin-bottom: 16px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    
+    .project-meta {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 16px;
+      color: #888;
+      font-size: 14px;
+    }
+    
+    .meta-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    .meta-item mat-icon {
+      font-size: 16px;
+      height: 16px;
+      width: 16px;
+    }
+    
+    .log-preview {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px;
+      background: #f5f5f5;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #666;
+    }
+    
+    .log-preview mat-icon {
+      font-size: 16px;
+      height: 16px;
+      width: 16px;
+    }
+    
+    .log-text {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    mat-card-actions {
+      margin-top: auto;
+      padding: 16px;
+    }
+  `]
+})
+export class HomeComponent implements OnInit, OnDestroy {
+  projects: Session[] = [];
+  isLoading = false;
+  showNewProjectModal = false;
+  
+  // 存储项目最新消息的映射（project_id -> 最新消息内容）
+  private projectMessages = new Map<string, string>();
+  
+  private subscriptions: Subscription = new Subscription();
+  
+  constructor(
+    private sessionService: SessionService,
+    private tabService: TabService,
+    private agentService: AgentService,
+    private eventService: EventService
+  ) {}
+  
+  ngOnInit() {
+    this.loadProjects();
+    
+    // 订阅会话更新事件，更新项目列表
+    this.subscriptions.add(
+      this.sessionService.sessions$.subscribe(sessions => {
+        this.updateProjects(sessions);
+      })
+    );
+    
+    // 订阅事件流，接收实时更新
+    this.subscriptions.add(
+      this.eventService.allEvents$.subscribe(event => {
+        const payload = event.payload;
+        
+        // 处理会话更新事件，更新对应项目卡片
+        if (payload.type === 'session.updated') {
+          this.refreshProjects();
+        }
+        
+        // 处理消息更新事件，更新项目卡片中的最新消息预览
+        if (payload.type === 'message.updated') {
+          this.handleMessageUpdated(event);
+        }
+        
+        // 处理消息部分更新事件（流式输出）
+        if (payload.type === 'message.part.updated') {
+          this.handleMessagePartUpdated(event);
+        }
+      })
+    );
+  }
+  
+  loadProjects() {
+    this.isLoading = true;
+    this.sessionService.loadSessions();
+  }
+  
+  updateProjects(sessions: Session[]) {
+    // 按project_id去重，获取唯一项目
+    const projectMap = new Map<string, Session>();
+    
+    sessions.forEach(session => {
+      const projectId = session.project_id || session.id;
+      // 保留最新或第一个会话（简单起见，保留第一个遇到的）
+      if (!projectMap.has(projectId)) {
+        projectMap.set(projectId, session);
+      }
+    });
+    
+    const newProjects = Array.from(projectMap.values());
+    this.projects = newProjects;
+    this.isLoading = false;
+    
+    // 清理不再存在的项目的消息缓存
+    this.cleanupProjectMessages(newProjects);
+  }
+  
+  // 清理无效项目的消息缓存
+  private cleanupProjectMessages(currentProjects: Session[]) {
+    const currentProjectIds = new Set(currentProjects.map(p => p.project_id || p.id));
+    
+    // 删除不再存在的项目的消息
+    for (const projectId of this.projectMessages.keys()) {
+      if (!currentProjectIds.has(projectId)) {
+        this.projectMessages.delete(projectId);
+      }
+    }
+  }
+  
+  refreshProjects() {
+    this.sessionService.loadSessions();
+  }
+  
+  getAgentDisplayName(agentId: string): string {
+    return this.agentService.getAgentDisplayName(agentId);
+  }
+  
+  getStatusDisplayName(status: string): string {
+    const statusMap: Record<string, string> = {
+      'requirement_document': '需求文档',
+      'technical_document': '技术文档',
+      'code': '代码开发',
+      'test': '测试',
+      'release': '发布'
+    };
+    return statusMap[status] || status;
+  }
+  
+  getStatusClass(status: string): string {
+    return `status-${status}`;
+  }
+  
+  formatDate(dateString?: string): string {
+    if (!dateString) return '未知';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN');
+  }
+  
+  runProject(project: Session) {
+    console.log('运行项目:', project.title);
+    // TODO: 发送需求文档开始工作
+    // 1. 打开项目页签
+    this.editProject(project);
+    // 2. 发送需求文档到AI（如果存在需求文档）
+    alert('运行功能待实现');
+  }
+  
+  editProject(project: Session) {
+    console.log('编辑项目:', project.title);
+    // 打开项目页签
+    const tabOpened = this.tabService.openProjectTab(project);
+    if (!tabOpened) {
+      alert('页签打开失败（可能达到页签数量限制）');
+    }
+  }
+  
+  deleteProject(project: Session) {
+    if (confirm(`确定删除项目 "${project.title}" 吗？`)) {
+      console.log('删除项目:', project.title);
+      // TODO: 调用删除API
+      alert('删除功能待实现');
+    }
+  }
+  
+  onProjectCreated(session: Session) {
+    console.log('新项目创建:', session.title);
+    // 刷新项目列表
+    this.refreshProjects();
+  }
+  
+  // 处理消息更新事件
+  private handleMessageUpdated(event: any) {
+    const payload = event.payload;
+    const messageInfo = payload.properties?.info;
+    
+    if (!messageInfo) return;
+    
+    // 提取会话ID（可能来自不同字段）
+    const sessionId = messageInfo.sessionID || messageInfo.sessionId || messageInfo.session_id;
+    if (!sessionId) return;
+    
+    // 查找对应的项目ID（会话ID可能等于项目ID，或需要映射）
+    // 这里简单假设会话ID就是项目ID，或者通过projects数组查找
+    const project = this.projects.find(p => p.id === sessionId || p.project_id === sessionId);
+    if (!project) return;
+    
+    const projectId = project.project_id || project.id;
+    const content = messageInfo.content || '';
+    
+    // 只存储AI消息（assistant角色）
+    if (messageInfo.role === 'assistant' && content.trim()) {
+      // 截断过长的消息
+      const truncatedContent = content.length > 100 ? content.substring(0, 100) + '...' : content;
+      this.projectMessages.set(projectId, truncatedContent);
+      console.log(`🔍 [HomeComponent] 更新项目 ${projectId} 的最新消息:`, truncatedContent);
+    }
+  }
+  
+  // 处理消息部分更新事件（流式输出）
+  private handleMessagePartUpdated(event: any) {
+    const payload = event.payload;
+    const part = payload.properties?.part;
+    const delta = payload.properties?.delta;
+    
+    if (!part || !delta) return;
+    
+    // 提取会话ID
+    const sessionId = part.sessionID || part.sessionId || part.session_id;
+    if (!sessionId) return;
+    
+    // 查找对应的项目
+    const project = this.projects.find(p => p.id === sessionId || p.project_id === sessionId);
+    if (!project) return;
+    
+    const projectId = project.project_id || project.id;
+    
+    // 只处理文本类型的部分更新
+    if (part.type === 'text' || part.type === 'reasoning') {
+      // 获取当前消息或初始化
+      const currentMessage = this.projectMessages.get(projectId) || '';
+      const newMessage = currentMessage + delta;
+      
+      // 截断过长的消息
+      const truncatedMessage = newMessage.length > 100 ? newMessage.substring(0, 100) + '...' : newMessage;
+      this.projectMessages.set(projectId, truncatedMessage);
+      
+      console.log(`🔍 [HomeComponent] 流式更新项目 ${projectId} 的消息:`, truncatedMessage.substring(0, 50));
+    }
+  }
+  
+  // 获取项目的最新消息预览
+  getProjectLatestMessage(projectId: string): string {
+    const message = this.projectMessages.get(projectId);
+    if (message) {
+      return message;
+    }
+    // 默认消息
+    return '项目已创建，等待需求文档';
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+}

src/app/components/new-project-modal.component.ts

@@ -0,0 +1,244 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AgentService } from '../services/agent.service';
+import { SessionService } from '../services/session.service';
+import { TabService } from '../services/tab.service';
+import { ProjectCreateRequest } from '../models/session.model';
+
+@Component({
+  selector: 'app-new-project-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatSelectModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule
+  ],
+  template: `
+    @if (visible) {
+      <div class="modal-overlay" (click)="close()">
+        <div class="modal-container" (click)="$event.stopPropagation()">
+          <div class="modal-header">
+            <h2>新建项目</h2>
+            <button mat-icon-button (click)="close()">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+          
+          <div class="modal-content">
+            <form #projectForm="ngForm" (ngSubmit)="createProject()">
+              <!-- 智能体选择 -->
+              <mat-form-field appearance="outline" class="full-width">
+                <mat-label>选择智能体</mat-label>
+                <mat-select [(ngModel)]="projectData.agent_name" name="agent_name" required>
+                  @for (agent of agents; track agent.value) {
+                    <mat-option [value]="agent.value">{{ agent.label }}</mat-option>
+                  }
+                </mat-select>
+                <mat-hint>选择处理项目的智能体</mat-hint>
+              </mat-form-field>
+              
+              <!-- 项目标题 -->
+              <mat-form-field appearance="outline" class="full-width">
+                <mat-label>项目标题</mat-label>
+                <input matInput [(ngModel)]="projectData.title" name="title" required maxlength="100">
+                <mat-hint>输入项目标题，最多100个字符</mat-hint>
+              </mat-form-field>
+              
+              <!-- 项目描述 -->
+              <mat-form-field appearance="outline" class="full-width">
+                <mat-label>项目描述</mat-label>
+                <textarea matInput [(ngModel)]="projectData.description" name="description" rows="4"></textarea>
+                <mat-hint>详细描述项目需求和目标</mat-hint>
+              </mat-form-field>
+              
+              <div class="modal-actions">
+                <button mat-button type="button" (click)="close()">取消</button>
+                <button 
+                  mat-raised-button 
+                  color="primary" 
+                  type="submit"
+                  [disabled]="!projectForm.valid || isLoading"
+                >
+                  @if (isLoading) {
+                    <mat-spinner diameter="20"></mat-spinner>
+                  } @else {
+                    创建项目
+                  }
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+  styles: [`
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    
+    .modal-container {
+      background: white;
+      border-radius: 8px;
+      width: 500px;
+      max-width: 90vw;
+      max-height: 80vh;
+      overflow: auto;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    }
+    
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 24px;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    
+    .modal-header h2 {
+      margin: 0;
+      font-size: 1.5rem;
+      font-weight: 500;
+    }
+    
+    .modal-content {
+      padding: 24px;
+    }
+    
+    .full-width {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 24px;
+    }
+    
+    mat-spinner {
+      display: inline-block;
+      margin-right: 8px;
+    }
+  `]
+})
+export class NewProjectModalComponent implements OnInit {
+  @Input() visible = false;
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() projectCreated = new EventEmitter<any>();
+  
+  agents: {value: string, label: string}[] = [];
+  projectData: ProjectCreateRequest = {
+    title: '',
+    agent_name: '',
+    description: ''
+  };
+  isLoading = false;
+  
+  constructor(
+    private agentService: AgentService,
+    private sessionService: SessionService,
+    private tabService: TabService
+  ) {}
+  
+  ngOnInit() {
+    this.loadAgents();
+  }
+  
+  loadAgents() {
+    this.agentService.getAgentOptions().subscribe({
+      next: (agents) => {
+        this.agents = agents;
+        // 设置默认智能体
+        if (agents.length > 0 && !this.projectData.agent_name) {
+          this.projectData.agent_name = agents[0].value;
+        }
+      },
+      error: (error) => {
+        console.error('加载智能体列表失败:', error);
+        // 使用本地映射作为备选
+        this.agents = Object.entries(this.agentService.getAgentDisplayName('')).map(([value, label]) => ({
+          value,
+          label
+        }));
+      }
+    });
+  }
+  
+  createProject() {
+    if (!this.projectData.title.trim() || !this.projectData.agent_name) {
+      return;
+    }
+    
+    this.isLoading = true;
+    
+    // 生成项目ID
+    const projectId = `proj_${crypto.randomUUID()}`;
+    const request: ProjectCreateRequest = {
+      ...this.projectData,
+      project_id: projectId
+    };
+    
+    this.sessionService.createProject(request).subscribe({
+      next: (session) => {
+        console.log('项目创建成功:', session);
+        this.isLoading = false;
+        
+        // 打开项目页签
+        const tabOpened = this.tabService.openProjectTab(session);
+        if (!tabOpened) {
+          // 页签打开失败（可能达到限制）
+          alert('项目创建成功，但页签打开失败（可能达到页签数量限制）');
+        }
+        
+        // 通知父组件
+        this.projectCreated.emit(session);
+        this.close();
+        
+        // 重置表单
+        this.resetForm();
+      },
+      error: (error) => {
+        console.error('创建项目失败:', error);
+        alert(`创建项目失败: ${error.message}`);
+        this.isLoading = false;
+      }
+    });
+  }
+  
+  close() {
+    this.visible = false;
+    this.visibleChange.emit(false);
+    this.resetForm();
+  }
+  
+  resetForm() {
+    this.projectData = {
+      title: '',
+      agent_name: this.agents.length > 0 ? this.agents[0].value : '',
+      description: ''
+    };
+  }
+}

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

@@ -0,0 +1,532 @@
+import { Component, OnInit, OnDestroy, HostListener, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subscription } from 'rxjs';
+import { ConversationComponent } from './conversation.component';
+import { TabService, Tab } from '../services/tab.service';
+import { SessionService } from '../services/session.service';
+import { AgentService } from '../services/agent.service';
+import { Session, SessionStatus } from '../models/session.model';
+
+@Component({
+  selector: 'app-project-tab',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIcon,
+    MatButtonModule,
+    MatCardModule,
+    MatListModule,
+    MatExpansionModule,
+    MatChipsModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    ConversationComponent
+  ],
+  template: `
+    <div class="project-tab-container" [style.gridTemplateColumns]="leftWidth + 'px 8px 1fr'">
+      <!-- 左侧面板：项目信息和步骤列表 -->
+      <div class="left-panel">
+        @if (project) {
+          <!-- 项目信息卡片 -->
+          <mat-card class="project-info-card">
+            <mat-card-header>
+              <mat-card-title>{{ project.title }}</mat-card-title>
+              <mat-card-subtitle>
+                <span class="agent-chip">{{ getAgentDisplayName(project.agent_name) }}</span>
+                <span class="status-chip" [class]="getStatusClass(project.status)">
+                  {{ getStatusDisplayName(project.status) }}
+                </span>
+              </mat-card-subtitle>
+            </mat-card-header>
+            
+            <mat-card-content>
+              @if (project.description) {
+                <p class="project-description">{{ project.description }}</p>
+              }
+              
+              <div class="project-meta">
+                <div class="meta-item">
+                  <mat-icon>person</mat-icon>
+                  <span>{{ project.user_id || '未知用户' }}</span>
+                </div>
+                <div class="meta-item">
+                  <mat-icon>calendar_today</mat-icon>
+                  <span>{{ formatDate(project.created_at) }}</span>
+                </div>
+              </div>
+              
+              <!-- 进度条 -->
+              <div class="progress-section">
+                <div class="progress-label">项目进度</div>
+                <mat-progress-bar 
+                  mode="determinate" 
+                  [value]="getProgressValue(project.status)">
+                </mat-progress-bar>
+                <div class="progress-text">{{ getProgressText(project.status) }}</div>
+              </div>
+              
+              <!-- 最新日志 -->
+              <div class="latest-log">
+                <div class="log-header">
+                  <mat-icon>info</mat-icon>
+                  <span>最新日志</span>
+                </div>
+                <div class="log-content">项目已创建，等待需求文档输入</div>
+              </div>
+            </mat-card-content>
+          </mat-card>
+          
+          <!-- 步骤列表 -->
+          <mat-accordion class="steps-accordion" multi>
+            <!-- 需求文档 -->
+            <mat-expansion-panel [expanded]="project.status === 'requirement_document'">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>description</mat-icon>
+                  <span>需求文档</span>
+                </mat-panel-title>
+                <mat-panel-description>
+                  @if (project.status === 'requirement_document') {
+                    <span class="current-step">当前步骤</span>
+                  }
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <div class="step-content">
+                <p>详细描述项目需求和目标</p>
+                <button mat-button color="primary" (click)="focusRequirementInput()">
+                  <mat-icon>edit</mat-icon>
+                  编辑需求
+                </button>
+              </div>
+            </mat-expansion-panel>
+            
+            <!-- 技术文档 -->
+            <mat-expansion-panel [expanded]="project.status === 'technical_document'">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>code</mat-icon>
+                  <span>技术文档</span>
+                </mat-panel-title>
+                <mat-panel-description>
+                  @if (project.status === 'technical_document') {
+                    <span class="current-step">当前步骤</span>
+                  }
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <div class="step-content">
+                <p>技术架构和实现方案</p>
+                <div class="step-status">待完成</div>
+              </div>
+            </mat-expansion-panel>
+            
+            <!-- 代码开发 -->
+            <mat-expansion-panel [expanded]="project.status === 'code'">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>terminal</mat-icon>
+                  <span>代码开发</span>
+                </mat-panel-title>
+                <mat-panel-description>
+                  @if (project.status === 'code') {
+                    <span class="current-step">当前步骤</span>
+                  }
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <div class="step-content">
+                <p>自动生成的代码步骤</p>
+                <mat-list dense>
+                  <mat-list-item>
+                    <mat-icon matListItemIcon>looks_one</mat-icon>
+                    <div matListItemTitle>步骤1: 数据模型设计</div>
+                  </mat-list-item>
+                  <mat-list-item>
+                    <mat-icon matListItemIcon>looks_two</mat-icon>
+                    <div matListItemTitle>步骤2: API接口开发</div>
+                  </mat-list-item>
+                  <mat-list-item>
+                    <mat-icon matListItemIcon>looks_3</mat-icon>
+                    <div matListItemTitle>步骤3: 前端页面实现</div>
+                  </mat-list-item>
+                </mat-list>
+              </div>
+            </mat-expansion-panel>
+            
+            <!-- 测试 -->
+            <mat-expansion-panel [expanded]="project.status === 'test'">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>bug_report</mat-icon>
+                  <span>测试</span>
+                </mat-panel-title>
+                <mat-panel-description>
+                  @if (project.status === 'test') {
+                    <span class="current-step">当前步骤</span>
+                  }
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <div class="step-content">
+                <p>功能测试和验证</p>
+                <div class="step-status">待完成</div>
+              </div>
+            </mat-expansion-panel>
+            
+            <!-- 发布 -->
+            <mat-expansion-panel [expanded]="project.status === 'release'">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>rocket_launch</mat-icon>
+                  <span>发布</span>
+                </mat-panel-title>
+                <mat-panel-description>
+                  @if (project.status === 'release') {
+                    <span class="current-step">当前步骤</span>
+                  }
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <div class="step-content">
+                <p>部署和发布上线</p>
+                <div class="step-status">待完成</div>
+              </div>
+            </mat-expansion-panel>
+          </mat-accordion>
+        } @else {
+          <div class="no-project">
+            <mat-icon>error</mat-icon>
+            <p>未找到项目信息</p>
+          </div>
+        }
+      </div>
+      
+      <!-- 分割线（调整左侧宽度） -->
+      <div class="splitter"
+           (mousedown)="startDrag($event)"
+           [class.dragging]="isDragging">
+        <div class="splitter-handle"></div>
+      </div>
+      
+      <!-- 右侧面板：对话区域 -->
+      <div class="right-panel">
+        <div class="conversation-wrapper">
+          <app-conversation [instanceId]="project?.id"></app-conversation>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .project-tab-container {
+      display: grid;
+      height: 100vh;
+      overflow: hidden;
+    }
+    
+    .left-panel, .right-panel {
+      height: 100%;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    
+    .left-panel {
+      background: #f8f9fa;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    
+    .right-panel {
+      background: #ffffff;
+    }
+    
+    .project-info-card {
+      margin-bottom: 8px;
+    }
+    
+    .agent-chip {
+      display: inline-block;
+      background: #e3f2fd;
+      color: #1976d2;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+    
+    .status-chip {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+    }
+    
+    .status-requirement_document { background: #fff3e0; color: #f57c00; }
+    .status-technical_document { background: #e8f5e8; color: #388e3c; }
+    .status-code { background: #e3f2fd; color: #1976d2; }
+    .status-test { background: #f3e5f5; color: #7b1fa2; }
+    .status-release { background: #e8f5e8; color: #388e3c; }
+    
+    .project-description {
+      color: #666;
+      line-height: 1.5;
+      margin: 12px 0;
+    }
+    
+    .project-meta {
+      display: flex;
+      gap: 16px;
+      margin: 12px 0;
+      color: #888;
+      font-size: 14px;
+    }
+    
+    .meta-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    
+    .meta-item mat-icon {
+      font-size: 16px;
+      height: 16px;
+      width: 16px;
+    }
+    
+    .progress-section {
+      margin: 16px 0;
+    }
+    
+    .progress-label {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 4px;
+    }
+    
+    .progress-text {
+      font-size: 12px;
+      color: #888;
+      text-align: right;
+      margin-top: 4px;
+    }
+    
+    .latest-log {
+      background: #f5f5f5;
+      border-radius: 4px;
+      padding: 12px;
+      margin-top: 16px;
+    }
+    
+    .log-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+    
+    .log-content {
+      font-size: 12px;
+      color: #888;
+    }
+    
+    .steps-accordion {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+    }
+    
+    .step-content {
+      padding: 12px 0;
+    }
+    
+    .current-step {
+      color: #1976d2;
+      font-weight: 500;
+    }
+    
+    .step-status {
+      display: inline-block;
+      background: #f5f5f5;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #666;
+    }
+    
+    .no-project {
+      text-align: center;
+      padding: 40px 20px;
+      color: #666;
+    }
+    
+    .splitter {
+      background: #f0f0f0;
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    
+    .splitter:hover, .splitter.dragging {
+      background: #e0e0e0;
+    }
+    
+    .splitter-handle {
+      width: 4px;
+      height: 40px;
+      background: #ccc;
+      border-radius: 2px;
+    }
+    
+    .splitter.dragging .splitter-handle {
+      background: #007bff;
+    }
+    
+    .conversation-wrapper {
+      height: 100%;
+      overflow: hidden;
+    }
+  `]
+})
+export class ProjectTabComponent implements OnInit, OnDestroy {
+  @Input() tabId?: string;
+  
+  project: Session | null = null;
+  activeTab: Tab | null = null;
+  
+  leftWidth = 320;
+  isDragging = false;
+  minLeftWidth = 280;
+  maxLeftWidth = 500;
+  
+  private subscriptions: Subscription = new Subscription();
+  
+  constructor(
+    private tabService: TabService,
+    private sessionService: SessionService,
+    private agentService: AgentService
+  ) {}
+  
+  ngOnInit() {
+    // 从本地存储恢复宽度
+    const savedWidth = localStorage.getItem('project_tab_leftWidth');
+    if (savedWidth) {
+      this.leftWidth = parseInt(savedWidth, 10);
+    }
+    
+    // 获取活动页签
+    this.subscriptions.add(
+      this.tabService.activeTab$.subscribe(tab => {
+        this.activeTab = tab || null;
+        if (tab) {
+          this.project = tab.session;
+          // 设置活动会话
+          this.sessionService.setActiveSession(this.project);
+        } else {
+          this.project = null;
+        }
+      })
+    );
+    
+    // 如果指定了tabId，直接获取
+    if (this.tabId) {
+      const tab = this.tabService.getTabById(this.tabId);
+      if (tab) {
+        this.activeTab = tab;
+        this.project = tab.session;
+        this.sessionService.setActiveSession(this.project);
+      }
+    }
+  }
+  
+  getAgentDisplayName(agentId: string): string {
+    return this.agentService.getAgentDisplayName(agentId);
+  }
+  
+  getStatusDisplayName(status: string): string {
+    const statusMap: Record<string, string> = {
+      'requirement_document': '需求文档',
+      'technical_document': '技术文档',
+      'code': '代码开发',
+      'test': '测试',
+      'release': '发布'
+    };
+    return statusMap[status] || status;
+  }
+  
+  getStatusClass(status: string): string {
+    return `status-${status}`;
+  }
+  
+  formatDate(dateString?: string): string {
+    if (!dateString) return '未知';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN');
+  }
+  
+  getProgressValue(status: string): number {
+    const progressMap: Record<string, number> = {
+      'requirement_document': 20,
+      'technical_document': 40,
+      'code': 60,
+      'test': 80,
+      'release': 100
+    };
+    return progressMap[status] || 0;
+  }
+  
+  getProgressText(status: string): string {
+    const progressMap: Record<string, string> = {
+      'requirement_document': '20% - 需求分析',
+      'technical_document': '40% - 技术设计',
+      'code': '60% - 代码开发',
+      'test': '80% - 测试验证',
+      'release': '100% - 发布完成'
+    };
+    return progressMap[status] || '0% - 未开始';
+  }
+  
+  focusRequirementInput() {
+    // TODO: 聚焦到对话输入框，并提示输入需求
+    console.log('聚焦需求输入');
+    // 可以通过服务或事件通知ConversationComponent
+  }
+  
+  startDrag(event: MouseEvent) {
+    event.preventDefault();
+    this.isDragging = true;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }
+  
+  @HostListener('document:mousemove', ['$event'])
+  onDrag(event: MouseEvent) {
+    if (this.isDragging) {
+      const newWidth = event.clientX;
+      if (newWidth >= this.minLeftWidth && newWidth <= this.maxLeftWidth) {
+        this.leftWidth = newWidth;
+      }
+    }
+  }
+  
+  @HostListener('document:mouseup')
+  stopDrag() {
+    if (this.isDragging) {
+      this.isDragging = false;
+      localStorage.setItem('project_tab_leftWidth', this.leftWidth.toString());
+    }
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+}

src/app/models/event.model.ts

@@ -35,6 +35,15 @@ export interface SessionInfo {
     deletions: number;
     files: number;
   };
+  // 扩展字段（用于项目功能）
+  project_id?: string;
+  agent_name?: string;
+  description?: string;
+  status?: string;
+  user_id?: string;
+  tenant_id?: string;
+  created_at?: string;
+  updated_at?: string;
 }
 
 // 会话差异事件

src/app/models/session.model.ts

@@ -1,36 +1,119 @@
-// 会话信息
+// 会话状态枚举
+export enum SessionStatus {
+  RequirementDocument = 'requirement_document',
+  TechnicalDocument = 'technical_document',
+  Code = 'code',
+  Test = 'test',
+  Release = 'release'
+}
+
+// 智能体枚举
+export enum Agent {
+  Replenish = 'replenish',
+  Transfer = 'transfer',
+  Allocation = 'allocation',
+  Report = 'report'
+}
+
+// 智能体显示名称映射
+export const AgentDisplayName: Record<Agent, string> = {
+  [Agent.Replenish]: '补货',
+  [Agent.Transfer]: '调拨',
+  [Agent.Allocation]: '配货',
+  [Agent.Report]: '报表'
+}
+
+// 会话信息（对应后端Session模型）
 export interface Session {
-  id: string;
-  title: string;
+  id: string;                    // 会话ID
+  project_id: string;           // 项目ID
+  title: string;                // 标题
+  agent_name: string;           // 智能体名称
+  description?: string;         // 项目描述
+  status: string;               // 状态：requirement_document|technical_document|code|test|release
+  user_id?: string;             // 用户ID
+  tenant_id?: string;           // 租户ID
+  created_at?: string;          // 创建时间
+  updated_at?: string;          // 更新时间
+  
+  // 向后兼容字段
   parentID?: string;
   path?: { [key: string]: string };
-  createdAt?: string;
   port?: number;
   baseURL?: string;
 }
 
-// 创建会话请求
-export interface SessionCreateRequest {
-  title: string;
-  menu_item_id: string; // 菜单项ID，必填
+// 代码项（对应后端CodeItem模型）
+export interface CodeItem {
+  order: number;                // 执行次序
+  title: string;                // 步骤标题
+  select_part: string;          // select部分SQL代码
+  from_part: string;            // from部分代码
+  where_part: string;           // where部分
+  group_by_part: string;        // group by部分
+  order_by_part: string;        // order by部分
+  temp_table_name: string;      // 临时表名称
+  parameters: Record<string, any>; // 参数集合
+  return_columns: Record<string, string>; // 返回的列名称和对应的中文名称（映射）
+}
+
+// 会话明细（对应后端SessionDetail模型）
+export interface SessionDetail {
+  id?: string;                  // MongoDB自动生成的ID
+  session_id: string;           // 关联的会话ID
+  requirement_doc: string;      // 需求文档
+  technical_doc: string;        // 技术文档
+  code_items: CodeItem[];       // 代码数组
+  history_sessions: string[];   // 历史会话ID数组
+  created_at?: string;          // 创建时间
+  updated_at?: string;          // 更新时间
+}
+
+// 包含主会话和明细的完整响应
+export interface SessionWithDetail {
+  session: Session;
+  detail?: SessionDetail;
+  history_count?: number;       // 历史消息数量
+}
+
+// 创建项目请求（对应后端SessionCreateRequest）
+export interface ProjectCreateRequest {
+  title: string;                // 标题
+  agent_name: string;           // 智能体名称
+  project_id?: string;          // 项目ID（前端生成proj_前缀UUID）
+  description?: string;         // 项目描述
+}
+
+// 创建项目响应
+export interface ProjectCreateResponse extends Session {
+  // 继承Session所有字段
+}
+
+// 创建项目API响应
+export interface ProjectCreateApiResponse extends QueryResult<ProjectCreateResponse> {
+  // data字段包含ProjectCreateResponse
+}
+
+// 项目列表响应
+export interface ProjectListResponse extends QueryResult<Session[]> {
+  // data字段包含会话数组（按项目分组）
+}
+
+// 向后兼容：保留原有接口名称
+export interface SessionCreateRequest extends ProjectCreateRequest {
+  // 保持兼容，实际使用ProjectCreateRequest
 }
 
-// 创建会话响应
-export interface SessionCreateResponse {
-  id: string;
-  title: string;
-  port: number;
-  baseURL: string;
+export interface SessionCreateResponse extends ProjectCreateResponse {
+  // 保持兼容
 }
 
-// 创建会话响应
-export interface SessionCreateApiResponse extends QueryResult<SessionCreateResponse> {
-  // data字段包含SessionCreateResponse
+export interface SessionCreateApiResponse extends ProjectCreateApiResponse {
+  // 保持兼容
 }
 
-// 会话列表响应
-export interface SessionListResponse extends QueryResult<Session[]> {
-  // data字段包含会话数组
+export interface SessionListResponse extends ProjectListResponse {
+  // 保持兼容
 }
 
 // 从通用QueryResult导入

src/app/services/agent.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Agent, AgentDisplayName } from '../models/session.model';
+
+// 智能体项接口（对应后端AgentItem）
+export interface AgentItem {
+  id: string;   // 智能体ID
+  name: string; // 智能体名称（标题）
+}
+
+// 智能体列表响应
+interface AgentListResponse {
+  success: boolean;
+  message?: string;
+  data?: AgentItem[];
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AgentService {
+  
+  constructor(private http: HttpClient) {}
+
+  /**
+   * 获取智能体列表
+   */
+  getAgents(): Observable<AgentItem[]> {
+    return this.http.get<AgentListResponse>('/api/agents').pipe(
+      map(response => {
+        if (response.success && response.data) {
+          return response.data;
+        } else {
+          throw new Error(response.message || '获取智能体列表失败');
+        }
+      })
+    );
+  }
+
+  /**
+   * 获取智能体显示名称
+   * @param agentId 智能体ID
+   */
+  getAgentDisplayName(agentId: string): string {
+    // 首先尝试从映射中获取
+    if (agentId in AgentDisplayName) {
+      return AgentDisplayName[agentId as Agent];
+    }
+    
+    // 如果映射中没有，返回ID本身
+    return agentId;
+  }
+
+  /**
+   * 获取智能体选项列表（用于下拉框）
+   */
+  getAgentOptions(): Observable<{value: string, label: string}[]> {
+    return this.getAgents().pipe(
+      map(agents => agents.map(agent => ({
+        value: agent.id,
+        label: this.getAgentDisplayName(agent.id)
+      })))
+    );
+  }
+
+  /**
+   * 验证智能体ID是否有效
+   */
+  isValidAgent(agentId: string): boolean {
+    return agentId in AgentDisplayName;
+  }
+
+  /**
+   * 获取默认智能体（第一个智能体）
+   */
+  getDefaultAgent(): string {
+    const agents = Object.keys(AgentDisplayName);
+    return agents.length > 0 ? agents[0] : 'report';
+  }
+}

src/app/services/session.service.ts

@@ -2,7 +2,14 @@ import { Injectable, OnDestroy, Injector } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-import { Session, SessionCreateRequest, SessionCreateApiResponse, SessionListResponse } from '../models/session.model';
+import { 
+  Session, 
+  SessionCreateRequest, 
+  SessionCreateApiResponse, 
+  SessionListResponse,
+  ProjectCreateRequest,
+  ProjectCreateApiResponse
+} from '../models/session.model';
 import { AuthService } from './auth.service';
 import { EventService } from './event.service';
 import { SessionUpdatedEvent } from '../models/event.model';
@@ -45,7 +52,7 @@ export class SessionService implements OnDestroy {
     return this._eventService;
   }
 
-  // 获取会话列表（需要认证）
+  // 获取会话列表（需要认证）- 使用新API端点
   getSessions(): Observable<Session[]> {
     // 检查用户是否已认证
     if (!this.authService.isAuthenticated()) {
@@ -53,13 +60,39 @@ export class SessionService implements OnDestroy {
       return of([]);
     }
     
-    return this.http.get<SessionListResponse>('/api/session/list').pipe(
+    return this.http.get<any>('/api/sessions').pipe(
       map(response => {
+        console.log('🔍 [SessionService] 获取会话列表响应:', response);
+        
         if (response.success && response.data) {
-          this.sessions = response.data;
+          // 处理嵌套的 sessions 字段（后端返回 { data: { sessions: [], ...pagination } }）
+          let sessionsArray: any[] = [];
+          
+          if (response.data.sessions && Array.isArray(response.data.sessions)) {
+            // 新格式：response.data.sessions 是数组
+            sessionsArray = response.data.sessions;
+            console.log('🔍 [SessionService] 从嵌套 sessions 字段获取数据，数量:', sessionsArray.length);
+          } else if (Array.isArray(response.data)) {
+            // 兼容旧格式：response.data 直接是数组
+            sessionsArray = response.data;
+            console.log('🔍 [SessionService] 从 data 字段直接获取数组，数量:', sessionsArray.length);
+          } else {
+            console.warn('🔍 [SessionService] 无法识别响应数据格式，使用空数组');
+            sessionsArray = [];
+          }
+          
+          // 确保每个会话都有 project_id 字段（向后兼容）
+          const sessions = sessionsArray.map(session => ({
+            ...session,
+            project_id: session.project_id || session.id // 如果没有 project_id，使用 id 作为默认
+          }));
+          
+          this.sessions = sessions;
           this.sessionsSubject.next(this.sessions);
-          return response.data;
+          console.log('🔍 [SessionService] 会话列表处理完成，数量:', sessions.length);
+          return sessions;
         } else {
+          console.error('🔍 [SessionService] 获取会话列表失败:', response.message);
           throw new Error(response.message || '获取会话列表失败');
         }
       }),
@@ -72,26 +105,41 @@ export class SessionService implements OnDestroy {
     );
   }
 
-  // 创建新会话
+  // 创建新会话（向后兼容，建议使用createProject）
   createSession(title: string, menuItemId: string): Observable<Session> {
+    console.warn('createSession已过时，请使用createProject方法');
+    // 尝试使用默认智能体创建项目
+    const defaultAgent = 'report'; // 默认智能体
+    return this.createProject({
+      title,
+      agent_name: defaultAgent,
+      description: `由旧会话创建，菜单项: ${menuItemId}`
+    });
+  }
+
+  // 创建新项目
+  createProject(request: ProjectCreateRequest): Observable<Session> {
     // 检查用户是否已认证
     if (!this.authService.isAuthenticated()) {
-      console.error('用户未认证，无法创建会话');
+      console.error('用户未认证，无法创建项目');
       throw new Error('用户未认证，请先登录');
     }
     
-    const request: SessionCreateRequest = { title, menu_item_id: menuItemId };
+    // 生成项目ID（如果未提供）
+    const projectRequest = {
+      ...request,
+      project_id: request.project_id || `proj_${crypto.randomUUID()}`
+    };
     
-    return this.http.post<SessionCreateApiResponse>('/api/session/create', request).pipe(
+    return this.http.post<ProjectCreateApiResponse>('/api/session/create', projectRequest).pipe(
       map(response => {
-        console.log('🔍 [SessionService] 创建会话响应:', response);
+        console.log('🔍 [SessionService] 创建项目响应:', response);
         if (response.success && response.data) {
           const sessionData = response.data;
+          // 确保有project_id字段
           const newSession: Session = {
-            id: sessionData.id,
-            title: sessionData.title,
-            port: sessionData.port,
-            baseURL: sessionData.baseURL
+            ...sessionData,
+            project_id: sessionData.project_id || projectRequest.project_id
           };
           
           this.sessions.unshift(newSession);
@@ -100,7 +148,7 @@ export class SessionService implements OnDestroy {
           
           return newSession;
         } else {
-          throw new Error(response.message || '创建会话失败');
+          throw new Error(response.message || '创建项目失败');
         }
       })
     );
@@ -129,9 +177,13 @@ export class SessionService implements OnDestroy {
       return;
     }
     
+    console.log('🔍 [SessionService] 开始加载会话列表...');
     this.getSessions().subscribe({
+      next: (sessions) => {
+        console.log('🔍 [SessionService] 会话列表加载成功，数量:', sessions.length);
+      },
       error: (error) => {
-        console.error('加载会话列表失败:', error);
+        console.error('🔍 [SessionService] 加载会话列表失败:', error);
         // 如果API不可用，使用空列表
         this.sessionsSubject.next([]);
       }
@@ -183,7 +235,10 @@ export class SessionService implements OnDestroy {
       const updatedSession: Session = {
         ...this.sessions[existingSessionIndex],
         title: sessionInfo.title,
-        // 保留其他字段如port、baseURL等
+        agent_name: sessionInfo.agent_name || this.sessions[existingSessionIndex].agent_name,
+        description: sessionInfo.description || this.sessions[existingSessionIndex].description,
+        status: sessionInfo.status || this.sessions[existingSessionIndex].status,
+        // 保留其他字段
       };
       this.sessions[existingSessionIndex] = updatedSession;
       console.log('SessionService: 更新现有会话', updatedSession.title);
@@ -191,7 +246,11 @@ export class SessionService implements OnDestroy {
       // 添加新会话到列表开头
       const newSession: Session = {
         id: sessionInfo.id,
+        project_id: sessionInfo.project_id || sessionInfo.projectID || sessionInfo.id,
         title: sessionInfo.title,
+        agent_name: sessionInfo.agent_name || 'report',
+        description: sessionInfo.description || '',
+        status: sessionInfo.status || 'requirement_document',
         // port和baseURL可能在后端创建会话时提供，这里使用默认值
         // 实际使用中，可以从事件或后续API调用中获取
         port: 8020, // 默认端口，可根据需要调整

src/app/services/tab.service.ts

@@ -0,0 +1,283 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Session } from '../models/session.model';
+
+// 页签接口
+export interface Tab {
+  id: string;           // 页签ID（使用project_id）
+  projectId: string;    // 项目ID
+  title: string;        // 页签标题（使用项目标题）
+  session: Session;     // 项目会话信息
+  createdAt: Date;      // 打开时间
+}
+
+// 页签状态
+export interface TabState {
+  tabs: Tab[];
+  activeTabId: string | null;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TabService {
+  private readonly STORAGE_KEY = 'project_tabs_state';
+  private readonly MAX_TABS = 7;
+  
+  private tabsSubject = new BehaviorSubject<Tab[]>([]);
+  private activeTabIdSubject = new BehaviorSubject<string | null>(null);
+  
+  tabs$ = this.tabsSubject.asObservable();
+  activeTabId$ = this.activeTabIdSubject.asObservable();
+  activeTab$ = this.activeTabId$.pipe(
+    map(activeId => activeId ? this.tabsSubject.value.find(tab => tab.id === activeId) : undefined)
+  );
+  
+  constructor() {
+    this.loadFromStorage();
+  }
+
+  /**
+   * 打开项目页签
+   * @param session 项目会话
+   * @returns 是否成功打开
+   */
+  openProjectTab(session: Session): boolean {
+    const projectId = session.project_id;
+    
+    // 检查是否已打开
+    const existingTab = this.tabsSubject.value.find(tab => tab.projectId === projectId);
+    if (existingTab) {
+      // 已打开，激活该页签
+      this.activateTab(existingTab.id);
+      return true;
+    }
+    
+    // 检查页签数量限制
+    if (this.tabsSubject.value.length >= this.MAX_TABS) {
+      alert(`最多只能打开 ${this.MAX_TABS} 个页签，请先关闭一个页签`);
+      return false;
+    }
+    
+    // 创建新页签
+    const tab: Tab = {
+      id: projectId,  // 使用project_id作为页签ID
+      projectId: projectId,
+      title: session.title,
+      session: session,
+      createdAt: new Date()
+    };
+    
+    // 添加页签并激活
+    const tabs = [...this.tabsSubject.value, tab];
+    this.tabsSubject.next(tabs);
+    this.activateTab(tab.id);
+    this.saveToStorage();
+    
+    return true;
+  }
+  
+  /**
+   * 关闭页签
+   * @param tabId 页签ID
+   */
+  closeTab(tabId: string): void {
+    const tabs = this.tabsSubject.value.filter(tab => tab.id !== tabId);
+    this.tabsSubject.next(tabs);
+    
+    // 如果关闭的是活动页签，设置新的活动页签
+    if (this.activeTabIdSubject.value === tabId) {
+      this.activeTabIdSubject.next(tabs.length > 0 ? tabs[0].id : null);
+    }
+    
+    this.saveToStorage();
+  }
+  
+  /**
+   * 激活页签
+   * @param tabId 页签ID
+   */
+  activateTab(tabId: string): void {
+    const tab = this.tabsSubject.value.find(t => t.id === tabId);
+    if (tab) {
+      this.activeTabIdSubject.next(tabId);
+      this.saveToStorage();
+    }
+  }
+  
+  /**
+   * 设置活动页签（支持null）
+   * @param tabId 页签ID或null
+   */
+  setActiveTab(tabId: string | null): void {
+    this.activeTabIdSubject.next(tabId);
+    this.saveToStorage();
+  }
+  
+  /**
+   * 关闭所有页签
+   */
+  closeAllTabs(): void {
+    this.tabsSubject.next([]);
+    this.activeTabIdSubject.next(null);
+    this.saveToStorage();
+  }
+  
+  /**
+   * 关闭其他页签（保留指定页签）
+   * @param tabId 要保留的页签ID
+   */
+  closeOtherTabs(tabId: string): void {
+    const tab = this.tabsSubject.value.find(t => t.id === tabId);
+    if (tab) {
+      this.tabsSubject.next([tab]);
+      this.activeTabIdSubject.next(tabId);
+      this.saveToStorage();
+    }
+  }
+  
+  /**
+   * 关闭左侧页签
+   * @param tabId 当前页签ID
+   */
+  closeLeftTabs(tabId: string): void {
+    const tabs = this.tabsSubject.value;
+    const tabIndex = tabs.findIndex(t => t.id === tabId);
+    
+    if (tabIndex > 0) {
+      const remainingTabs = tabs.slice(tabIndex);
+      this.tabsSubject.next(remainingTabs);
+      
+      // 如果活动页签被关闭，激活当前页签
+      const activeTabId = this.activeTabIdSubject.value;
+      if (activeTabId && !remainingTabs.some(t => t.id === activeTabId)) {
+        this.activeTabIdSubject.next(tabId);
+      }
+      
+      this.saveToStorage();
+    }
+  }
+  
+  /**
+   * 关闭右侧页签
+   * @param tabId 当前页签ID
+   */
+  closeRightTabs(tabId: string): void {
+    const tabs = this.tabsSubject.value;
+    const tabIndex = tabs.findIndex(t => t.id === tabId);
+    
+    if (tabIndex >= 0 && tabIndex < tabs.length - 1) {
+      const remainingTabs = tabs.slice(0, tabIndex + 1);
+      this.tabsSubject.next(remainingTabs);
+      
+      // 如果活动页签被关闭，激活当前页签
+      const activeTabId = this.activeTabIdSubject.value;
+      if (activeTabId && !remainingTabs.some(t => t.id === activeTabId)) {
+        this.activeTabIdSubject.next(tabId);
+      }
+      
+      this.saveToStorage();
+    }
+  }
+  
+  /**
+   * 获取页签数量
+   */
+  getTabCount(): number {
+    return this.tabsSubject.value.length;
+  }
+  
+  /**
+   * 获取页签是否已满
+   */
+  isTabFull(): boolean {
+    return this.tabsSubject.value.length >= this.MAX_TABS;
+  }
+  
+  /**
+   * 根据项目ID获取页签
+   */
+  getTabByProjectId(projectId: string): Tab | undefined {
+    return this.tabsSubject.value.find(tab => tab.projectId === projectId);
+  }
+  
+  /**
+   * 获取当前活动页签
+   */
+  getActiveTab(): Tab | undefined {
+    const activeId = this.activeTabIdSubject.value;
+    return activeId ? this.getTabById(activeId) : undefined;
+  }
+  
+  /**
+   * 根据ID获取页签
+   */
+  getTabById(tabId: string): Tab | undefined {
+    return this.tabsSubject.value.find(tab => tab.id === tabId);
+  }
+  
+  /**
+   * 获取所有页签
+   */
+  getTabs(): Tab[] {
+    return this.tabsSubject.value;
+  }
+  
+  /**
+   * 更新页签会话信息（当会话更新时调用）
+   */
+  updateTabSession(projectId: string, session: Session): void {
+    const tabs = this.tabsSubject.value.map(tab => {
+      if (tab.projectId === projectId) {
+        return {
+          ...tab,
+          title: session.title,
+          session: session
+        };
+      }
+      return tab;
+    });
+    
+    this.tabsSubject.next(tabs);
+    this.saveToStorage();
+  }
+  
+  // 私有方法：存储管理
+  private loadFromStorage(): void {
+    try {
+      const saved = localStorage.getItem(this.STORAGE_KEY);
+      if (saved) {
+        const state: TabState = JSON.parse(saved);
+        // 转换日期字符串为Date对象
+        const tabs = state.tabs.map(tab => ({
+          ...tab,
+          createdAt: new Date(tab.createdAt),
+          session: {
+            ...tab.session,
+            // 确保session有必要的字段
+            project_id: tab.session.project_id || tab.session.id
+          }
+        }));
+        this.tabsSubject.next(tabs);
+        this.activeTabIdSubject.next(state.activeTabId);
+      }
+    } catch (error) {
+      console.error('加载页签状态失败:', error);
+    }
+  }
+  
+  private saveToStorage(): void {
+    try {
+      const state: TabState = {
+        tabs: this.tabsSubject.value,
+        activeTabId: this.activeTabIdSubject.value
+      };
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
+    } catch (error) {
+      console.error('保存页签状态失败:', error);
+    }
+  }
+}
+
+// 导入rxjs操作符
+import { map } from 'rxjs/operators';