feat:page-mine reset upgrade

cloth-design/package-lock.json

@@ -17,7 +17,10 @@
         "@angular/material": "^20.0.4",
         "@angular/platform-browser": "^20.0.5",
         "@angular/router": "^20.0.0",
+        "@fortawesome/angular-fontawesome": "^2.0.1",
         "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "chart.js": "^4.5.0",
         "echarts": "^5.6.0",
         "rxjs": "~7.8.0",
@@ -3229,6 +3232,28 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/angular-fontawesome": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-2.0.1.tgz",
+      "integrity": "sha512-IdklZkuw+WS2GQWhFnr1EX/tOALnrKaj4YGnUmPaUg2Uf+Amj8Xi+M/qDrr915YJ5MaDxd9tZ1kqOHRcvQqq2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@angular/core": "^20.0.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-free": {
       "version": "6.7.2",
       "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
@@ -3238,6 +3263,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.8.tgz",

cloth-design/package.json

@@ -29,7 +29,10 @@
     "@angular/material": "^20.0.4",
     "@angular/platform-browser": "^20.0.5",
     "@angular/router": "^20.0.0",
+    "@fortawesome/angular-fontawesome": "^2.0.1",
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "chart.js": "^4.5.0",
     "echarts": "^5.6.0",
     "rxjs": "~7.8.0",

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

@@ -2,65 +2,176 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { Router } from '@angular/router';
+// 修改1：添加Material图标模块导入
+import { MatIconModule } from '@angular/material/icon';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; // NEW: 添加FontAwesome模块
+import { 
+  faUser, 
+  faCog, 
+  faSignOutAlt, 
+  faPlus, 
+  faShoppingBag, 
+  faHeart, 
+  faPalette,
+  faEye,
+  faRedo,
+  faTruck,
+  faDownload,
+  faBoxOpen,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'; // NEW: 添加所需图标
+
 
 interface DesignItem {
   image: string;
   title: string;
   date: string;
+  likes?: number; // NEW: 添加点赞数属性
 }
 
 interface FavoriteItem {
   image: string;
   title: string;
   author: string;
+   downloads?: number; // NEW: 添加下载数属性
+}
+
+interface OrderItem { // NEW: 新增订单接口
+  id: string;
+  date: string;
+  status: 'processing' | 'shipped' | 'delivered';
+  image: string;
+  title: string;
+  description: string;
+  price: number;
 }
 
 @Component({
   selector: 'app-page-mine',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,MatIconModule,FontAwesomeModule],
   templateUrl: './page-mine.html',
   styleUrls: ['./page-mine.scss']
 })
 export class PageMineComponent {
 
+   // 修改3：定义Material图标名称映射
+  icons = {
+    //user: 'account_circle',  // 对应fa-user
+    //cog: 'settings',         // 对应fa-cog
+    //signOut: 'logout'        // 对应fa-sign-out-alt
+    // NEW: 定义使用的图标
+  
+    user: faUser,
+    cog: faCog,
+    signOut: faSignOutAlt,
+    plus: faPlus,
+    shoppingBag: faShoppingBag,
+    heart: faHeart,
+    palette: faPalette,
+    eye: faEye,
+    redo: faRedo,
+    truck: faTruck,
+    download: faDownload,
+    boxOpen: faBoxOpen,
+    search: faSearch
+  
+  };
+
 constructor(private router: Router) {}
 
   // 用户信息
   user = {
     name: '用户昵称',
     level: '黄金会员',
-    avatar: 'assets/images/user-avatar.png' // 本地头像图片
+    avatar: 'https://p26-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d10684d06ebf447bb47c209b902d5a1f~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=U5qRj87JEvvtHaTGc8GYAtFreO8%3D&format=.webp', // 本地头像图片
+    stats: { // 新增字段
+      designs: 12,
+      favorites: 8,
+      orders: 5
+    }
+
   };
 
   // 我的设计数据
   myDesigns: DesignItem[] = [
     {
-      image: 'assets/images/my-design1.jpg',
+    image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/c84173af695e4d26999dbe49f363f030~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=IJ9j8rxWCnN04rUmutS0glRDE2g%3D&format=.webp',
       title: '蓝色风暴',
-      date: '3天前'
+      date: '3天前',
+      likes: 24 // 新增字段
     },
     {
-      image: 'assets/images/my-design2.jpg',
+      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/9a7b56c915f2430f82ee49dd0df876e0~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=bn8z99XYKH6rcsIs%2FvRJvXOc6C8%3D&format=.webp',
       title: '红黑经典',
-      date: '1周前'
+      date: '1周前',
+      likes: 18 // 新增字段
+    },
+    {
+      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/0332b05f30db4e1ab594deda70cfd5b9~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=qyxMs%2B%2Bx2HtKaXkuazBDp%2BEogB8%3D&format=.webp',
+      title: '星空主题',
+      date: '2周前',
+      likes: 32 // 新增字段
+    },
+    {
+      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d0df63176686402ab842a99bec6486a6~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=%2BxTttfK%2BzH8dFg%2BoOaP8Bz2ejZA%3D&format=.webp',
+      title: '火焰纹路',
+      date: '3周前',
+      likes: 15 // 新增字段
     }
   ];
 
   // 我的收藏数据
   favorites: FavoriteItem[] = [
-    {
-      image: 'assets/images/fav1.jpg',
+     {
+      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/0332b05f30db4e1ab594deda70cfd5b9~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=qyxMs%2B%2Bx2HtKaXkuazBDp%2BEogB8%3D&format=.webp',
       title: '星空主题',
-      author: 'by 设计师小王'
+      author: 'by 设计师小王',
+      downloads: 56 // 新增字段
     },
     {
-      image: 'assets/images/fav2.jpg',
+      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/d0df63176686402ab842a99bec6486a6~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=%2BxTttfK%2BzH8dFg%2BoOaP8Bz2ejZA%3D&format=.webp',
       title: '火焰纹路',
-      author: 'by 创意达人'
+      author: 'by 创意达人',
+      downloads: 42 // 新增字段
+    },
+    {
+      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/59ff9deac094430d8b09eb960be3cccb~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=f3YWBwq%2BEdNcaKhlmvJR4q37j5A%3D&format=.webp',
+      title: '极简主义',
+      author: 'by 简约大师',
+      downloads: 38 // 新增字段
     }
   ];
 
+ orders: OrderItem[] = [
+    {
+      id: '#DS20230715',
+      date: '2023-07-15',
+      status: 'delivered',
+      image: 'https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/c8c4792091c546a79238a6f88e05570d~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=3%2Fn5k8LO9q6okBhlu1qzTjYpgLg%3D&format=.webp',
+      title: '蓝色风暴羽绒服',
+      description: '颜色: 天蓝色 / 尺码: L / 定制图案: 风暴纹理',
+      price: 899.00
+    },
+    {
+      id: '#DS20230710',
+      date: '2023-07-10',
+      status: 'shipped',
+      image: 'https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/6d08ff960f54452a801914baa8ac4091~tplv-tb4s082cfz-aigc_resize:360:360.webp?lk3s=43402efa&x-expires=1753488000&x-signature=uXsUOLZO6jiNoxX1DnQlquiwe5g%3D&format=.webp',
+      title: '红黑经典羽绒服',
+      description: '颜色: 红黑渐变 / 尺码: M / 定制图案: 几何线条',
+      price: 799.00
+    }
+  ];
+
+  // NEW: 快速操作项
+  quickActions = [
+    { icon: this.icons.plus, title: '新建设计', color: 'primary' },
+    { icon: this.icons.shoppingBag, title: '我的订单', color: 'success' },
+    { icon: this.icons.heart, title: '我的收藏', color: 'warning' },
+    { icon: this.icons.cog, title: '账户设置', color: 'danger' }
+  ];
+
   // 处理图片加载错误
   handleImageError(event: Event) {
     const img = event.target as HTMLImageElement;
@@ -68,38 +179,51 @@ constructor(private router: Router) {}
     img.onerror = null; // 防止无限循环
   }
 
-
   
 openSettings() {
     // 实际项目中可以导航到设置页面或打开设置模态框
-    console.log('打开设置');
+    console.log('设置功能已触发');
     this.router.navigate(['/settings']); // 或使用模态框
   }
 
-
   // 退出登录
   logout() {
     alert('退出登录功能需要后端支持，此处为前端演示');
-    // 实际项目中这里会有路由跳转到登录页
-
 
+    // 实际项目中这里会有路由跳转到登录页
+  
 
 
  if (confirm('确定要退出登录吗？')) {
       // 实际项目中这里应该清除用户认证信息
       localStorage.removeItem('authToken');
-      
+       localStorage.removeItem('userData'); // 新增清除项
       // 导航到登录页面
       this.router.navigate(['/login']);
-      
       // 显示退出成功提示
       alert('您已成功退出登录');
     }
-
+    
 
 
 
 
     
   }
-}
+
+  // 修改16：新增获取状态样式类的方法
+  getStatusClass(status: string): string {
+    return `status-${status}`;
+  }
+
+  // 修改17：新增获取操作按钮渐变背景的方法
+  getActionGradient(color: string): string {
+    const gradients: Record<string, string> = {
+      primary: 'linear-gradient(135deg, #3498db, #9b59b6)',
+      success: 'linear-gradient(135deg, #2ecc71, #27ae60)',
+      warning: 'linear-gradient(135deg, #f39c12, #d35400)',
+      danger: 'linear-gradient(135deg, #e74c3c, #c0392b)'
+    };
+    return gradients[color] ;
+  }
+}

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

@@ -1,71 +1,145 @@
 <div class="panel" id="my-panel">
-            <h2><i class="fas fa-user"></i> 我的账户</h2>
-            <p class="section-desc">管理你的设计、收藏和个人信息</p>
+    <h2><fa-icon [icon]="icons.user"></fa-icon> 我的账户</h2>
+    <p class="section-desc">管理你的设计、收藏、订单和个人信息</p>
+    
+    <!-- 用户信息卡片 -->
+    <div class="user-profile-card">
+        <img [src]="user.avatar" alt="用户头像" class="user-avatar" (error)="handleImageError($event)">
+        <div class="user-info">
+            <div class="user-name">{{user.name}}</div>
+            <span class="user-level">{{user.level}}</span>
+            <p>欢迎回来！您已设计了{{user.stats.designs}}款羽绒服，收藏了{{user.stats.favorites}}款设计。</p>
             
-            <div class="color-stat" style="max-width: 100%; text-align: left; display: flex; align-items: center; gap: 20px;">
-                <div class="color-box" style="background: linear-gradient(135deg, var(--primary), var(--accent)); width: 80px; height: 80px;">
-                    <i class="fas fa-user" style="font-size: 2rem;"></i>
+            <div class="user-stats">
+                <div class="stat-item">
+                    <div class="stat-value">{{user.stats.designs}}</div>
+                    <div class="stat-label">我的设计</div>
                 </div>
-                <div>
-                    <div class="stat-name">用户昵称</div>
-                    <div class="stat-count">会员等级: 黄金会员</div>
+                <div class="stat-item">
+                    <div class="stat-value">{{user.stats.favorites}}</div>
+                    <div class="stat-label">我的收藏</div>
                 </div>
-            </div>
-            
-            <h3>我的设计 (2)</h3>
-            <div class="design-gallery">
-                <div class="design-item">
-                    <div class="design-image">
-                        <img src="https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/c00c46e3473f416da69ab26bc2baece0~tplv-tb4s082cfz-aigc_resize:720:720.webp?lk3s=43402efa&x-expires=1753488000&x-signature=83g7O%2BguEUuA3WIbuDJz9IB74aQ%3D&format=.webp" alt="我的设计1">
-                    </div>
-                    <div class="design-info">
-                        <div class="design-title">蓝色风暴</div>
-                        <div class="design-author">3天前</div>
-                    </div>
-                </div>
-                
-                <div class="design-item">
-                    <div class="design-image">
-                        <img src="https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/4b32af173e334309a0cf167026a8d978~tplv-tb4s082cfz-aigc_resize:720:720.webp?lk3s=43402efa&x-expires=1753488000&x-signature=%2BOatqZslhlNi7BYEXjcTMWrzeFk%3D&format=.webp" alt="我的设计2">
-                    </div>
-                    <div class="design-info">
-                        <div class="design-title">红黑经典</div>
-                        <div class="design-author">1周前</div>
-                    </div>
+                <div class="stat-item">
+                    <div class="stat-value">{{user.stats.orders}}</div>
+                    <div class="stat-label">我的订单</div>
                 </div>
             </div>
-            
-            <h3>我的收藏 (4)</h3>
-            <div class="design-gallery">
-                <div class="design-item">
-                    <div class="design-image">
-                        <img src="https://p9-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/418fca777325423bb4d3361d04266b4c~tplv-tb4s082cfz-aigc_resize:720:720.webp?lk3s=43402efa&x-expires=1753488000&x-signature=SHnd17s7c5WxEk6DSrScXnQSDKY%3D&format=.webp" alt="收藏设计1">
-                    </div>
-                    <div class="design-info">
-                        <div class="design-title">星空主题</div>
-                        <div class="design-author">by 设计师小王</div>
-                    </div>
-                </div>
-                
-                <div class="design-item">
-                    <div class="design-image">
-                        <img src="https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/7d0396cbdd6d46ad834791df677ea31a~tplv-tb4s082cfz-aigc_resize:720:720.webp?lk3s=43402efa&x-expires=1753488000&x-signature=NIYh%2FXC0zsQL35qDJyPh4d8k4XA%3D&format=.webp" alt="收藏设计2">
-                    </div>
-                    <div class="design-info">
-                        <div class="design-title">火焰纹路</div>
-                        <div class="design-author">by 创意达人</div>
-                    </div>
+        </div>
+    </div>
+    
+    <!-- 快速操作区域 -->
+    <div class="quick-actions">
+        <div class="action-item" *ngFor="let action of quickActions">
+            <div class="action-icon" [style.background]="getActionGradient(action.color)">
+                <fa-icon [icon]="action.icon"></fa-icon>
+            </div>
+            <div class="action-title">{{action.title}}</div>
+        </div>
+    </div>
+    
+    <!-- 我的订单部分 -->
+    <div class="section-title">
+        <h3><fa-icon [icon]="icons.shoppingBag"></fa-icon> 最近订单 ({{orders.length}})</h3>
+        <a class="view-all">查看全部 ></a>
+    </div>
+    
+    <div class="order-card" *ngFor="let order of orders">
+        <div class="order-header">
+            <div>
+                <span class="order-id">订单号: {{order.id}}</span>
+                <span class="order-date">{{order.date}}</span>
+            </div>
+            <span class="order-status" [ngClass]="getStatusClass(order.status)">
+                {{order.status === 'processing' ? '处理中' : 
+                  order.status === 'shipped' ? '已发货' : '已完成'}}
+            </span>
+        </div>
+        <div class="order-content">
+            <img [src]="order.image" alt="订单商品" class="order-image" (error)="handleImageError($event)">
+            <div class="order-details">
+                <div class="order-title">{{order.title}}</div>
+                <div class="order-description">{{order.description}}</div>
+                <div class="order-price">¥{{order.price.toFixed(2)}}</div>
+            </div>
+        </div>
+        <div class="order-actions">
+            <button class="btn btn-outline btn-sm">
+                <fa-icon [icon]="icons.eye"></fa-icon> 查看详情
+            </button>
+            <button class="btn btn-primary btn-sm">
+                <fa-icon [icon]="order.status === 'delivered' ? icons.redo : icons.truck"></fa-icon>
+                {{order.status === 'delivered' ? '再次购买' : '物流跟踪'}}
+            </button>
+        </div>
+    </div>
+    
+    <!-- 我的设计部分 -->
+    <div class="section-title">
+        <h3><fa-icon [icon]="icons.palette"></fa-icon> 我的设计 ({{myDesigns.length}})</h3>
+        <a class="view-all">查看全部 ></a>
+    </div>
+    
+    <div class="design-gallery">
+        <div class="design-item" *ngFor="let design of myDesigns">
+            <div class="design-image">
+                <img [src]="design.image" alt="我的设计" (error)="handleImageError($event)">
+            </div>
+            <div class="design-info">
+                <div class="design-title">{{design.title}}</div>
+                <div class="design-meta">
+                    <span>{{design.date}}</span>
+                    <span><fa-icon [icon]="icons.heart" style="color: #e74c3c;"></fa-icon> {{design.likes}}</span>
                 </div>
             </div>
-            
-            <div class="action-buttons" style="margin-top: 30px;">
-                <button class="btn btn-secondary"(click)="openSettings()">
-                    <i class="fas fa-cog"></i> 设置
-                </button>
-                <button class="btn btn-primary"(click)="logout()">
-                    <i class="fas fa-sign-out-alt"></i> 退出登录
-                </button>
+        </div>
+    </div>
+    
+    <!-- 我的收藏部分 -->
+    <div class="section-title">
+        <h3><fa-icon [icon]="icons.heart"></fa-icon> 我的收藏 ({{favorites.length}})</h3>
+        <a class="view-all">查看全部 ></a>
+    </div>
+    
+    <div class="design-gallery">
+        <div class="design-item" *ngFor="let favorite of favorites">
+            <div class="design-image">
+                <img [src]="favorite.image" alt="收藏设计" (error)="handleImageError($event)">
+            </div>
+            <div class="design-info">
+                <div class="design-title">{{favorite.title}}</div>
+                <div class="design-meta">
+                    <span>{{favorite.author}}</span>
+                    <span><fa-icon [icon]="icons.download"></fa-icon> {{favorite.downloads}}</span>
+                </div>
             </div>
         </div>
-        
-        
+    </div>
+    
+    <!-- 空状态示例 (注释掉，实际使用时根据需要显示) -->
+    
+    <div class="empty-state">
+        <fa-icon [icon]="icons.boxOpen" size="2x"></fa-icon>
+        <h4>暂无收藏的设计</h4>
+        <p>您还没有收藏任何设计，快去发现您喜欢的设计吧！</p>
+        <button class="btn btn-primary">
+            <fa-icon [icon]="icons.search"></fa-icon> 浏览设计
+        </button>
+    </div>
+    
+    
+    <div class="action-buttons">
+        <button class="btn btn-outline" (click)="openSettings()">
+            <fa-icon [icon]="icons.cog"></fa-icon> 设置
+        </button>
+        <button class="btn btn-primary" (click)="logout()">
+            <fa-icon [icon]="icons.signOut"></fa-icon> 退出登录
+        </button>
+    </div>
+</div>
+
+
+
+
+
+
+

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

@@ -72,7 +72,6 @@
   font-size: 0.95rem;
 }
 
-
 /* 设计画廊样式 */
 .design-gallery {
   display: grid;
@@ -131,7 +130,6 @@
   margin-top: 30px;
 }
 
-
 .btn {
   flex: 1;
   padding: 18px;
@@ -198,4 +196,493 @@ footer {
     padding: 15px;
     font-size: 1rem;
   }
-}
+}
+/* 修改8：添加Material图标基础样式 */
+mat-icon {
+  font-family: 'Material Icons';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+/* 修改23：添加CSS变量定义 */
+:root {
+  --primary: #3498db;
+  --accent: #9b59b6;
+  --success: #2ecc71;
+  --warning: #f39c12;
+  --danger: #e74c3c;
+  --light: #ecf0f1;
+  --dark: #2c3e50;
+  --gray: #95a5a6;
+}
+
+/* 修改24：其他样式保持不变但使用CSS变量 */
+#my-panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin: 0 auto 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+  max-width: 1200px;
+}
+
+/* 其余样式保持不变... */
+
+/* 定义颜色变量 */
+:root {
+  --primary: #3498db;
+  --accent: #9b59b6;
+  --success: #2ecc71;
+  --warning: #f39c12;
+  --danger: #e74c3c;
+  --light: #ecf0f1;
+  --dark: #2c3e50;
+  --gray: #95a5a6;
+}
+
+/* 基础样式重置 */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* 主面板样式 */
+#my-panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin: 0 auto 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+  max-width: 1200px;
+}
+
+#my-panel h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid var(--light);
+}
+
+#my-panel h2 fa-icon {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: rgba(52, 152, 219, 0.1);
+}
+
+#my-panel .section-desc {
+  color: var(--gray);
+  margin-bottom: 25px;
+  font-size: 0.95rem;
+}
+
+/* 用户信息卡片 */
+.user-profile-card {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
+  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
+  padding: 20px;
+  border-radius: 15px;
+  align-items: center;
+}
+
+.user-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid white;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.user-info {
+  flex: 1;
+}
+
+.user-name {
+  font-weight: 700;
+  font-size: 1.3rem;
+  margin-bottom: 5px;
+}
+
+.user-level {
+  display: inline-block;
+  background: linear-gradient(135deg, var(--warning), #e67e22);
+  color: white;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  margin-bottom: 10px;
+}
+
+.user-stats {
+  display: flex;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-value {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--dark);
+}
+
+.stat-label {
+  font-size: 0.8rem;
+  color: var(--gray);
+}
+
+/* 快速操作区域 */
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.action-item {
+  background: white;
+  border-radius: 12px;
+  padding: 15px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  border: 1px solid #eee;
+}
+
+.action-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary);
+}
+
+.action-icon {
+  width: 40px;
+  height: 40px;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  font-size: 1.2rem;
+}
+
+.action-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+/* 订单卡片样式 */
+.order-card {
+  background: white;
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  border: 1px solid #eee;
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.order-id {
+  font-weight: 600;
+  color: var(--dark);
+}
+
+.order-date {
+  color: var(--gray);
+  font-size: 0.9rem;
+}
+
+.order-status {
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.status-processing {
+  background-color: rgba(52, 152, 219, 0.1);
+  color: var(--primary);
+}
+
+.status-shipped {
+  background-color: rgba(46, 204, 113, 0.1);
+  color: var(--success);
+}
+
+.status-delivered {
+  background-color: rgba(155, 89, 182, 0.1);
+  color: var(--accent);
+}
+
+.order-content {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.order-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 10px;
+  object-fit: cover;
+  border: 1px solid #eee;
+}
+
+.order-details {
+  flex: 1;
+}
+
+.order-title {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.order-description {
+  color: var(--gray);
+  font-size: 0.9rem;
+  margin-bottom: 5px;
+}
+
+.order-price {
+  font-weight: 700;
+  color: var(--dark);
+}
+
+.order-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 设计画廊样式 */
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 30px 0 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.section-title h3 {
+  font-size: 1.2rem;
+  color: var(--dark);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.view-all {
+  font-size: 0.9rem;
+  color: var(--primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.design-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.design-item {
+  background: white;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 1px solid #eee;
+}
+
+.design-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary);
+}
+
+.design-image {
+  height: 160px;
+  background: var(--light);
+  position: relative;
+  overflow: hidden;
+}
+
+.design-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.design-item:hover .design-image img {
+  transform: scale(1.05);
+}
+
+.design-info {
+  padding: 15px;
+}
+
+.design-title {
+  font-weight: 600;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.design-meta {
+  color: var(--gray);
+  font-size: 0.85rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* 按钮样式 */
+.btn {
+  padding: 8px 15px;
+  border-radius: 20px;
+  border: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 0.8rem;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--primary);
+  border: 1px solid var(--primary);
+}
+
+.btn-outline:hover {
+  background: rgba(52, 152, 219, 0.05);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 15px;
+  margin-top: 30px;
+  justify-content: flex-end;
+}
+
+/* 空状态提示 */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--gray);
+  background-color: #f9f9f9;
+  border-radius: 15px;
+  margin: 20px 0;
+}
+
+.empty-state h4 {
+  margin-bottom: 15px;
+}
+
+.empty-state p {
+  margin-bottom: 15px;
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .quick-actions {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .user-profile-card {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .user-stats {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  #my-panel {
+    padding: 20px 15px;
+  }
+  
+  .quick-actions {
+    grid-template-columns: 1fr;
+  }
+  
+  .design-gallery {
+    grid-template-columns: 1fr;
+  }
+  
+  .order-content {
+    flex-direction: column;
+  }
+  
+  .order-image {
+    width: 100%;
+    height: 150px;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+  }
+}
+

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

@@ -33,7 +33,6 @@ describe('PageMineComponent', () => {
   });
   
 
-
 // 以下是全部新增的测试套件和用例（NEW:）:
   describe('logout() 方法测试', () => {
     it('点击确认时应跳转到登录页', () => {
@@ -116,7 +115,13 @@ describe('PageMineComponent', () => {
       expect(component.user).toEqual({
         name: '用户昵称',
         level: '黄金会员',
-        avatar: 'assets/images/user-avatar.png'
+        avatar: 'assets/images/user-avatar.png',
+        stats: { // 新增字段
+      designs: 12,
+      favorites: 8,
+      orders: 5
+    }
+
       });
     });
 
@@ -128,5 +133,6 @@ describe('PageMineComponent', () => {
 
 
 
-
 });
+
+