fix:html

cloth-design/angular.json

@@ -13,7 +13,8 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
-      "architect": {
+      "architect": 
+      {
         "build": {
           "builder": "@angular/build:application",
           "options": {
@@ -73,7 +74,9 @@
         "extract-i18n": {
           "builder": "@angular/build:extract-i18n"
         },
-        "test": {
+
+        "test": 
+        {
           "builder": "@angular/build:karma",
           "options": {
             "polyfills": [

cloth-design/package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^20.0.5",
         "@angular/router": "^20.0.0",
         "chart.js": "^4.5.0",
+        "echarts": "^5.6.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -4404,6 +4405,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8970,6 +8987,21 @@
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
       "license": "MIT"
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

cloth-design/package.json

@@ -30,6 +30,7 @@
     "@angular/platform-browser": "^20.0.5",
     "@angular/router": "^20.0.0",
     "chart.js": "^4.5.0",
+    "echarts": "^5.6.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

cloth-design/src/app/modules/cloth/mobile/nav-mobile-tabs/nav-mobile-tabs.component.html

@@ -5,10 +5,14 @@
   <div class="tab" [class.active]="activeTab === 'ip'" (click)="changeTab('ip')">
     <i class="fas fa-crown"></i> IP
   </div>
+
+   <div class="tab" [class.active]="activeTab === 'trends'" (click)="changeTab('trends')">
+    <i class="fas fa-chart-line"></i> 趋势
+  </div>
+  
   <div class="tab" [class.active]="activeTab === 'mine'" (click)="changeTab('mine')">
     <i class="fas fa-user"></i> 我的
   </div>
-  <div class="tab" [class.active]="activeTab === 'trends'" (click)="changeTab('trends')">
-    <i class="fas fa-chart-line"></i> 趋势
-  </div>
+
+ 
 </div>

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

@@ -9,14 +9,21 @@
   
   <h3>热门搭配方案</h3>
   <div class="color-stats">
-    @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 class="color-stat">
+      <div class="color-box" style="background: linear-gradient(135deg, #3498db, #2c3e50);">
+        <i class="fas fa-water"></i>
       </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>