feat:trends.json

cloth-design/src/app/modules/cloth/mobile/page-trends/page-trends.component.html

@@ -9,19 +9,14 @@
   
   <h3>热门搭配方案</h3>
   <div class="color-stats">
-    <div class="color-stat">
-      <div class="color-box" style="background: linear-gradient(135deg, #3498db, #2c3e50);">
-        <i class="fas fa-water"></i>
+    @for (combo of popularCombinations; track combo.name) {
+      <div class="color-stat">
+        <div class="color-box" [style]="getGradientStyle(combo.colors)">
+          <i [class]="combo.icon"></i>
+        </div>
+        <div class="stat-name">{{ combo.name }}</div>
+        <div class="stat-count">{{ combo.count }}</div>
       </div>
-      <div class="stat-name">深海蓝黑</div>
-      <div class="stat-count">5,678 次使用</div>
-    </div>
-    <div class="color-stat">
-      <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
-        <i class="fas fa-sun"></i>
-      </div>
-      <div class="stat-name">日落橙黄</div>
-      <div class="stat-count">4,987 次使用</div>
-    </div>
+    }
   </div>
 </div>

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

@@ -1,6 +1,26 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { Chart } from 'chart.js/auto';
 
+// 定义JSON数据结构
+interface ColorData {
+  labels: string[];
+  datasets: {
+    label: string;
+    data: number[];
+    backgroundColor: string[];
+    borderColor: string[];
+    borderWidth: number;
+    borderRadius: number;
+  }[];
+}
+
+interface ColorCombination {
+  colors: string[];
+  icon: string;
+  name: string;
+  count: string;
+}
+
 @Component({
   selector: 'app-page-trends',
   standalone: true,
@@ -11,6 +31,49 @@ export class PageTrendsComponent implements AfterViewInit {
   @ViewChild('colorChart') colorChartRef!: ElementRef;
   private colorChart: any;
 
+  // JSON格式的颜色数据
+  colorData: 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
+    }]
+  };
+
+  // JSON格式的热门搭配数据
+  popularCombinations: ColorCombination[] = [
+    {
+      colors: ['#3498db', '#2c3e50'],
+      icon: 'fas fa-water',
+      name: '深海蓝黑',
+      count: '5,678 次使用'
+    },
+    {
+      colors: ['#e74c3c', '#f1c40f'],
+      icon: 'fas fa-sun',
+      name: '日落橙黄',
+      count: '4,987 次使用'
+    }
+  ];
+
   ngAfterViewInit() {
     this.initChart();
   }
@@ -19,31 +82,7 @@ export class PageTrendsComponent implements AfterViewInit {
     const ctx = this.colorChartRef.nativeElement.getContext('2d');
     this.colorChart = new Chart(ctx, {
       type: 'bar',
-      data: {
-        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
-        }]
-      },
+      data: this.colorData,
       options: {
         responsive: true,
         maintainAspectRatio: false,
@@ -75,4 +114,9 @@ export class PageTrendsComponent implements AfterViewInit {
       }
     });
   }
+
+  // 生成渐变背景样式
+  getGradientStyle(colors: string[]): string {
+    return `background: linear-gradient(135deg, ${colors[0]}, ${colors[1]});`;
+  }
 }