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

@@ -1,5 +1,16 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+interface DesignItem {
+  image: string;
+  title: string;
+  date: string;
+}
+
+interface FavoriteItem {
+  image: string;
+  title: string;
+  author: string;
+}
 
 @Component({
   selector: 'app-page-mine',
@@ -8,4 +19,52 @@ import { CommonModule } from '@angular/common';
   templateUrl: './page-mine.html',
   styleUrls: ['./page-mine.scss']
 })
-export class PageMineComponent {}
+export class PageMineComponent {
+  // 用户信息
+  user = {
+    name: '用户昵称',
+    level: '黄金会员',
+    avatar: 'assets/images/user-avatar.png' // 本地头像图片
+  };
+
+  // 我的设计数据
+  myDesigns: DesignItem[] = [
+    {
+      image: 'assets/images/my-design1.jpg',
+      title: '蓝色风暴',
+      date: '3天前'
+    },
+    {
+      image: 'assets/images/my-design2.jpg',
+      title: '红黑经典',
+      date: '1周前'
+    }
+  ];
+
+  // 我的收藏数据
+  favorites: FavoriteItem[] = [
+    {
+      image: 'assets/images/fav1.jpg',
+      title: '星空主题',
+      author: 'by 设计师小王'
+    },
+    {
+      image: 'assets/images/fav2.jpg',
+      title: '火焰纹路',
+      author: 'by 创意达人'
+    }
+  ];
+
+  // 处理图片加载错误
+  handleImageError(event: Event) {
+    const img = event.target as HTMLImageElement;
+    img.src = 'assets/images/default-placeholder.png';
+    img.onerror = null; // 防止无限循环
+  }
+
+  // 退出登录
+  logout() {
+    alert('退出登录功能需要后端支持，此处为前端演示');
+    // 实际项目中这里会有路由跳转到登录页
+  }
+}

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

@@ -1,38 +1,71 @@
-<div class="panel">
-  <h2><i class="fas fa-user"></i> 我的设计</h2>
-  <p class="section-desc">查看和管理您保存的羽绒服设计作品</p>
-  
-  <div class="designs-container">
-    <div class="design-card">
-      <div class="design-preview" style="background: linear-gradient(135deg, #3498db, #9b59b6);"></div>
-      <div class="design-info">
-        <div class="design-name">海洋星空</div>
-        <div class="design-date">2023-10-15</div>
-      </div>
-      <div class="design-actions">
-        <button class="btn-action">
-          <i class="fas fa-share-alt"></i>
-        </button>
-        <button class="btn-action">
-          <i class="fas fa-download"></i>
-        </button>
-      </div>
-    </div>
-    
-    <div class="design-card">
-      <div class="design-preview" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);"></div>
-      <div class="design-info">
-        <div class="design-name">日落火焰</div>
-        <div class="design-date">2023-10-10</div>
-      </div>
-      <div class="design-actions">
-        <button class="btn-action">
-          <i class="fas fa-share-alt"></i>
-        </button>
-        <button class="btn-action">
-          <i class="fas fa-download"></i>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="panel" id="my-panel">
+            <h2><i class="fas fa-user"></i> 我的账户</h2>
+            <p class="section-desc">管理你的设计、收藏和个人信息</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>
+                <div>
+                    <div class="stat-name">用户昵称</div>
+                    <div class="stat-count">会员等级: 黄金会员</div>
+                </div>
+            </div>
+            
+            <h3>我的设计 (2)</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" 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://i.ibb.co/0QrZb0C/jacket-base.png" alt="我的设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">红黑经典</div>
+                        <div class="design-author">1周前</div>
+                    </div>
+                </div>
+            </div>
+            
+            <h3>我的收藏 (4)</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" 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://i.ibb.co/0QrZb0C/jacket-base.png" alt="收藏设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">火焰纹路</div>
+                        <div class="design-author">by 创意达人</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="action-buttons" style="margin-top: 30px;">
+                <button class="btn btn-secondary">
+                    <i class="fas fa-cog"></i> 设置
+                </button>
+                <button class="btn btn-primary">
+                    <i class="fas fa-sign-out-alt"></i> 退出登录
+                </button>
+            </div>
+        </div>
+        
+        

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

@@ -1,4 +1,5 @@
-.panel {
+/* 我的账户页面样式 */
+#my-panel {
   background: white;
   border-radius: 25px;
   padding: 30px;
@@ -7,7 +8,7 @@
   animation: fadeIn 0.6s ease;
 }
 
-h2 {
+#my-panel h2 {
   font-size: 1.5rem;
   margin-bottom: 20px;
   color: #2c3e50;
@@ -18,7 +19,7 @@ h2 {
   border-bottom: 2px solid #ecf0f1;
 }
 
-h2 i {
+#my-panel h2 i {
   background: linear-gradient(135deg, #3498db, #9b59b6);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -31,105 +32,168 @@ h2 i {
   background-color: rgba(52, 152, 219, 0.1);
 }
 
-.section-desc {
+#my-panel .section-desc {
   color: #95a5a6;
   margin-bottom: 25px;
   font-size: 0.95rem;
 }
 
-.designs-container {
-  display: grid;
+/* 用户信息样式 */
+.color-stat {
+  max-width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
   gap: 20px;
-  margin-top: 20px;
+  margin-bottom: 30px;
 }
 
-.design-card {
+.color-box {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
   display: flex;
-  background: #f9f9f9;
-  border-radius: 20px;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 2rem;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.stat-name {
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-bottom: 5px;
+}
+
+.stat-count {
+  color: #95a5a6;
+  font-size: 0.95rem;
+}
+
+/* 设计画廊样式 */
+.design-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.design-item {
+  background: white;
+  border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.design-card:hover {
+.design-item:hover {
   transform: translateY(-5px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
 }
 
-.design-preview {
-  width: 100px;
-  height: 120px;
+.design-image {
+  height: 160px;
+  background: #ecf0f1;
+  position: relative;
+  overflow: hidden;
+}
+
+.design-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .design-info {
-  flex: 1;
   padding: 15px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 
-.design-name {
-  font-weight: 700;
-  font-size: 1.1rem;
+.design-title {
+  font-weight: 600;
   margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.design-date {
+.design-author {
   color: #95a5a6;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
-.design-actions {
+/* 按钮样式 */
+.action-buttons {
   display: flex;
-  flex-direction: column;
-  padding: 10px;
+  gap: 15px;
+  margin-top: 30px;
 }
 
-.btn-action {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: white;
-  border: 1px solid #ecf0f1;
+.btn {
+  flex: 1;
+  padding: 18px;
+  border-radius: 50px;
+  border: none;
+  font-weight: 600;
+  font-size: 1.05rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #3498db;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  margin-bottom: 10px;
+  gap: 8px;
 }
 
-.btn-action:hover {
-  background: #3498db;
+.btn-primary {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
   color: white;
+  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
+}
+
+.btn-primary:hover {
+  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
+  transform: translateY(-3px);
+}
+
+.btn-secondary {
+  background: white;
+  color: #3498db;
+  border: 2px solid #3498db;
+}
+
+.btn-secondary:hover {
+  background: rgba(52, 152, 219, 0.05);
   transform: translateY(-3px);
 }
 
+/* 页脚样式 */
+footer {
+  text-align: center;
+  padding: 30px 0 20px;
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+/* 动画 */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
+/* 响应式调整 */
 @media (max-width: 480px) {
-  .panel {
+  #my-panel {
     padding: 25px 20px;
   }
   
-  .design-card {
-    flex-direction: column;
-  }
-  
-  .design-preview {
-    width: 100%;
-    height: 100px;
+  .design-gallery {
+    grid-template-columns: 1fr;
   }
   
-  .design-actions {
-    flex-direction: row;
-    justify-content: center;
-    gap: 15px;
+  .btn {
+    padding: 15px;
+    font-size: 1rem;
   }
 }

cloth-design/src/app/modules/cloth/mobile/page-trends/chart.js

@@ -0,0 +1,64 @@
+// 获取Canvas元素
+const ctx = document.getElementById('colorChart').getContext('2d');
+
+// 准备数据 - 与Angular组件中的colorData结构相同
+const colorData = {
+  labels: ['海洋蓝', '活力红', '森林绿', '阳光黄', '梦幻紫', '珊瑚橙'],
+  datasets: [{
+    label: '使用次数',
+    data: [1850, 1620, 1540, 1420, 1360, 1280],
+    backgroundColor: [
+      '#3498db',
+      '#e74c3c',
+      '#2ecc71',
+      '#f1c40f',
+      '#9b59b6',
+      '#ff7f50'
+    ],
+    borderColor: [
+      '#2980b9',
+      '#c0392b',
+      '#27ae60',
+      '#f39c12',
+      '#8e44ad',
+      '#ff6347'
+    ],
+    borderWidth: 1,
+    borderRadius: 10
+  }]
+};
+
+// 创建图表
+const colorChart = new Chart(ctx, {
+  type: 'bar',
+  data: colorData,
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false
+      },
+      title: {
+        display: true,
+        text: '颜色使用频率统计',
+        font: {
+          size: 16
+        }
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: 'rgba(0, 0, 0, 0.05)'
+        }
+      },
+      x: {
+        grid: {
+          display: false
+        }
+      }
+    }
+  }
+});