feat:mine

cloth-design/src/app/modules/cloth/mobile/page-mine/page-mine.component.ts

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
+import { Router } from '@angular/router';
+
 interface DesignItem {
   image: string;
   title: string;
@@ -20,6 +23,9 @@ interface FavoriteItem {
   styleUrls: ['./page-mine.scss']
 })
 export class PageMineComponent {
+
+constructor(private router: Router) {}
+
   // 用户信息
   user = {
     name: '用户昵称',
@@ -62,9 +68,38 @@ export class PageMineComponent {
     img.onerror = null; // 防止无限循环
   }
 
+
+  
+openSettings() {
+    // 实际项目中可以导航到设置页面或打开设置模态框
+    console.log('打开设置');
+    this.router.navigate(['/settings']); // 或使用模态框
+  }
+
+
   // 退出登录
   logout() {
     alert('退出登录功能需要后端支持，此处为前端演示');
     // 实际项目中这里会有路由跳转到登录页
+
+
+
+
+ if (confirm('确定要退出登录吗？')) {
+      // 实际项目中这里应该清除用户认证信息
+      localStorage.removeItem('authToken');
+      
+      // 导航到登录页面
+      this.router.navigate(['/login']);
+      
+      // 显示退出成功提示
+      alert('您已成功退出登录');
+    }
+
+
+
+
+
+    
   }
 }

cloth-design/src/app/modules/cloth/mobile/page-mine/page-mine.html

@@ -59,10 +59,10 @@
             </div>
             
             <div class="action-buttons" style="margin-top: 30px;">
-                <button class="btn btn-secondary">
+                <button class="btn btn-secondary"(click)="openSettings()">
                     <i class="fas fa-cog"></i> 设置
                 </button>
-                <button class="btn btn-primary">
+                <button class="btn btn-primary"(click)="logout()">
                     <i class="fas fa-sign-out-alt"></i> 退出登录
                 </button>
             </div>

cloth-design/src/app/modules/cloth/mobile/page-mine/page-mine.scss

@@ -72,6 +72,7 @@
   font-size: 0.95rem;
 }
 
+
 /* 设计画廊样式 */
 .design-gallery {
   display: grid;
@@ -130,6 +131,7 @@
   margin-top: 30px;
 }
 
+
 .btn {
   flex: 1;
   padding: 18px;

cloth-design/src/app/modules/cloth/mobile/page-mine/page-mine.spec.ts

@@ -2,22 +2,131 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PageMineComponent } from './page-mine.component';
 
+import { Router } from '@angular/router'; 
+
+
 describe('PageMineComponent', () => {
   let component: PageMineComponent;
   let fixture: ComponentFixture<PageMineComponent>;
 
+  let router: Router; // NEW: 声明router变量
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageMineComponent]
+      imports: [PageMineComponent],
+
+      providers: [
+        { provide: Router, useValue: { navigate: jasmine.createSpy('navigate') } } // NEW: 模拟Router
+      ]
+
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(PageMineComponent);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router); // NEW: 获取Router实例
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  
+
+
+// 以下是全部新增的测试套件和用例（NEW:）:
+  describe('logout() 方法测试', () => {
+    it('点击确认时应跳转到登录页', () => {
+      spyOn(window, 'confirm').and.returnValue(true);
+      spyOn(localStorage, 'removeItem');
+      spyOn(window, 'alert');
+      
+      component.logout();
+      
+      expect(window.confirm).toHaveBeenCalledWith('确定要退出登录吗？');
+      expect(localStorage.removeItem).toHaveBeenCalledWith('authToken');
+      expect(localStorage.removeItem).toHaveBeenCalledWith('userData');
+      expect(router.navigate).toHaveBeenCalledWith(['/login']);
+      expect(window.alert).toHaveBeenCalledWith('您已成功退出登录');
+    });
+
+    it('点击取消时应不执行任何操作', () => {
+      spyOn(window, 'confirm').and.returnValue(false);
+      component.logout();
+      expect(localStorage.removeItem).not.toHaveBeenCalled();
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('openSettings() 方法测试', () => {
+    it('应跳转到设置页面', () => {
+      component.openSettings();
+      expect(router.navigate).toHaveBeenCalledWith(['/settings']);
+    });
+
+    it('应输出调试日志', () => {
+      spyOn(console, 'log');
+      component.openSettings();
+      expect(console.log).toHaveBeenCalledWith('设置功能已触发');
+    });
+  });
+
+  describe('handleImageError() 方法测试', () => {
+    it('应替换为默认图片并防止错误循环', () => {
+      const mockImg = {
+        src: 'invalid.jpg',
+        onerror: jasmine.createSpy('onerror')
+      };
+      const mockEvent = { target: mockImg } as unknown as Event;
+      
+      component.handleImageError(mockEvent);
+      expect(mockImg.src).toBe('assets/images/default-placeholder.png');
+      expect(mockImg.onerror).toBeNull();
+    });
+  });
+
+  describe('模板交互测试', () => {
+    it('应正确显示设计数量', () => {
+      component.myDesigns = [
+        { image: '1.jpg', title: '临时设计1', date: '今天' },
+        { image: '2.jpg', title: '临时设计2', date: '昨天' }
+      ];
+      fixture.detectChanges();
+      const countElement = fixture.nativeElement.querySelector('h3:nth-of-type(1)');
+      expect(countElement.textContent).toContain('(2)');
+    });
+
+    it('点击退出按钮应调用logout()', () => {
+      spyOn(component, 'logout');
+      const button = fixture.nativeElement.querySelector('.btn-primary');
+      button.click();
+      expect(component.logout).toHaveBeenCalled();
+    });
+
+    it('点击设置按钮应调用openSettings()', () => {
+      spyOn(component, 'openSettings');
+      const button = fixture.nativeElement.querySelector('.btn-secondary');
+      button.click();
+      expect(component.openSettings).toHaveBeenCalled();
+    });
+  });
+
+  describe('初始化状态测试', () => {
+    it('应正确初始化用户数据', () => {
+      expect(component.user).toEqual({
+        name: '用户昵称',
+        level: '黄金会员',
+        avatar: 'assets/images/user-avatar.png'
+      });
+    });
+
+    it('应加载默认设计数据', () => {
+      expect(component.myDesigns.length).toBe(2);
+      expect(component.myDesigns[0].title).toBe('蓝色风暴');
+    });
+  });
+
+
+
+
 });