cloth-design/package-lock.json

@@ -17,6 +17,7 @@
         "@angular/material": "^20.0.4",
         "@angular/platform-browser": "^20.0.5",
         "@angular/router": "^20.0.0",
+        "chart.js": "^4.5.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -1704,6 +1705,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@listr2/prompt-adapter-inquirer": {
       "version": "2.0.22",
       "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-2.0.22.tgz",
@@ -3862,6 +3869,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",

cloth-design/package.json

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

cloth-design/src/app/app.routes.ts

@@ -1,13 +1,15 @@
 import { Routes } from '@angular/router';
+import { PageHomeComponent } from './modules/cloth/mobile/page-home/page-home.component';
+import { PageIpComponent } from './modules/cloth/mobile/page-ip/page-ip.component';
+import { PageDesignComponent } from './modules/cloth/mobile/page-design/page-design.component';
+import { PageMineComponent } from './modules/cloth/mobile/page-mine/page-mine.component';
+import { PageTrendsComponent } from './modules/cloth/mobile/page-trends/page-trends.component';
 
 export const routes: Routes = [
-  {
-    path: 'mobile',
-    loadChildren: () => import('./modules/cloth/mobile/mobile.routes').then(m => m.MOBILE_ROUTES)
-  },
-  {
-    path: '',
-    redirectTo: 'mobile',
-    pathMatch: 'full'
-  }
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: PageHomeComponent },
+  { path: 'ip', component: PageIpComponent },
+  { path: 'design', component: PageDesignComponent },
+  { path:'mine', component: PageMineComponent },
+  { path:'trends', component: PageTrendsComponent }
 ];

cloth-design/src/app/modules/cloth/mobile/mobile.routes.ts

@@ -1,33 +1,14 @@
-import { Routes } from "@angular/router";
-import { Component } from "@angular/core";
-import { NavMobileTabsComponent } from "./nav-mobile-tabs/nav-mobile-tabs.component.js";
-export const MOBILE_ROUTES:Routes=[
-    {
-        path:'',
-        component:NavMobileTabsComponent,
-        children:[
-            {
-                path:'home',
-                loadComponent:() => import('./page-home/page-home.component').then(m=>m.PageHomeComponent)
-            },
-            {
-                path :'IP',
-                loadComponent:()=>import('./page-ip/page-ip.component').then(m=>m.PageIPComponent)
-            },
-            {
-                path:'design',
-                loadComponent:()=>import('./page-design/page-design.component').then(m=>m.PageDesignComponent)
-            },
-            {
-                path :'mine',
-                loadComponent:()=>import('./page-mine/page-mine.component').then(m=>m.PageMineComponent)
-            },
-            {
-                path:' ',
-                redirectTo:'home',
-                pathMatch:'full'
-            }
+import { Routes } from '@angular/router';
+import { PageHomeComponent } from './page-home/page-home.component';
+import { PageDesignComponent } from './page-design/page-design.component';
+import { PageIpComponent } from './page-ip/page-ip.component';
+import { PageMineComponent } from './page-mine/page-mine.component';
+import { PageTrendsComponent } from './page-trends/page-trends.component';
 
-        ]
-    }
-]
+export const mobileRoutes: Routes = [
+  { path: '', component: PageHomeComponent },
+  { path: 'design', component: PageDesignComponent },
+  { path: 'ip', component: PageIpComponent },
+  { path: 'mine', component: PageMineComponent },
+  { path: 'trends', component: PageTrendsComponent },
+];

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

@@ -1,17 +1,14 @@
-<div class="mobile-container">
-  <div class="router-outlet">
-    <router-outlet></router-outlet>
+<div class="tabs">
+  <div class="tab" [class.active]="activeTab === 'design'" (click)="changeTab('design')">
+    <i class="fas fa-palette"></i> 定制
+  </div>
+  <div class="tab" [class.active]="activeTab === 'ip'" (click)="changeTab('ip')">
+    <i class="fas fa-crown"></i> IP
+  </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>
-  
-  <nav class="bottom-nav">
-    <a 
-      *ngFor="let link of navLinks"
-      [routerLink]="link.path"
-      routerLinkActive="active"
-      #rla="routerLinkActive"
-      [class.active]="rla.isActive">
-      <mat-icon>{{ link.icon }}</mat-icon>
-      <span>{{link.label}}</span>
-    </a>
-  </nav>
 </div>

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

@@ -1,34 +1,34 @@
-.mobile-container {
+.tabs {
   display: flex;
-  flex-direction: column;
-  height: 100vh;
-  
-  .router-outlet {
-    flex: 1;
-    overflow-y: auto;
-  }
-  
-  .bottom-nav {
-    display: flex;
-    justify-content: space-around;
-    background: white;
-    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
-    
-    a {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 8px 0;
-      text-decoration: none;
-      color: #666;
-      
-      mat-icon {
-        margin-bottom: 4px;
-      }
-      
-      &.active {
-        color: #3f51b5;
-      }
-    }
-  }
+  background: white;
+  border-radius: 50px;
+  padding: 6px;
+  margin: 25px 0;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  position: relative;
+  z-index: 10;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 14px 0;
+  border-radius: 50px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  color: #95a5a6;
+  position: relative;
+  overflow: hidden;
+}
+
+.tab.active {
+  color: white;
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+}
+
+.tab i {
+  margin-right: 6px;
+  font-size: 1.1rem;
 }

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

@@ -1,15 +1,16 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core'; // 添加缺失的导入
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
+
 @Component({
   selector: 'app-nav-mobile-tabs',
   standalone:true,
   imports: [
-    CommonModule,RouterOutlet,RouterLink,RouterLinkActive,
+    CommonModule,
     MatToolbarModule,
     MatTabsModule,
     MatIconModule
@@ -17,12 +18,14 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
   templateUrl: './nav-mobile-tabs.component.html',
   styleUrls: ['./nav-mobile-tabs.component.scss']
 })
-export class NavMobileTabsComponent 
-{
-    navLinks=[
-      {path:'home',label:'首页',icon:'home'},
-      {path:'IP',label:'IP定制',icon:'image'},
-      {path:'design',label:'设计',icon:'brush'},
-      {path:'mine',label:'我的',icon:'person'}
-    ];
+export class NavMobileTabsComponent {
+  activeTab: string = 'design';
+
+  // 添加缺失的装饰器导入后，这些就不会报错了
+  @Output() tabChanged = new EventEmitter<string>(); // 事件发射器
+
+  changeTab(tabName: string): void {
+    this.activeTab = tabName;
+    this.tabChanged.emit(tabName); // 发出事件
+  }
 }

cloth-design/src/app/modules/cloth/mobile/nav-mobile-tabs/nav-mobile-tabs.spec.ts

@@ -1,23 +1,17 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, EventEmitter, Output } from '@angular/core';
 
-import { NavMobileTabsComponent } from './nav-mobile-tabs.component';
+@Component({
+  selector: 'app-nav-mobile-tabs',
+  standalone: true,
+  templateUrl: './nav-mobile-tabs.component.html',
+  styleUrls: ['./nav-mobile-tabs.component.scss']
+})
+export class NavMobileTabsComponent {
+  activeTab: string = 'design';
+  @Output() tabChanged = new EventEmitter<string>();
 
-describe('NavMobileTabsComponent', () => {
-  let component: NavMobileTabsComponent;
-  let fixture: ComponentFixture<NavMobileTabsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NavMobileTabsComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NavMobileTabsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+  changeTab(tab: string) {
+    this.activeTab = tab;
+    this.tabChanged.emit(tab);
+  }
+}

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

@@ -1,11 +1,100 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-page-design',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule, FormsModule],
   templateUrl: './page-design.html',
-  styleUrl: './page-design.scss'
+  styleUrls: ['./page-design.scss']
 })
 export class PageDesignComponent {
+  activePart: string = 'hood';
+  selectedColor: string = '#3498db';
+  colors: string[] = [
+    '#3498db', '#e74c3c', '#2ecc71', '#f1c40f', 
+    '#9b59b6', '#1abc9c', '#e67e22', '#2c3e50', 
+    '#ecf0f1', '#e84393'
+  ];
+  
+  partColors: { [key: string]: string } = {
+    'hood': '#3498db',
+    'body': '#2980b9',
+    'sleeve-left': '#3498db',
+    'sleeve-right': '#3498db'
+  };
+  
+  aiMessages: any[] = [
+    { text: '您好！我是您的羽绒服设计助手。我可以根据您的喜好推荐颜色搭配，或者帮您分析当前设计的流行度。有什么我可以帮您的吗？', isUser: false }
+  ];
+  aiInput: string = '';
 
-}
+  selectPart(part: string) {
+    this.activePart = part;
+  }
+
+  selectColor(color: string) {
+    this.selectedColor = color;
+    this.partColors[this.activePart] = color;
+  }
+
+  getPartGradient(part: string): string {
+    const color = this.partColors[part];
+    const darker = this.darkenColor(color, 20);
+    return `linear-gradient(135deg, ${color}, ${darker})`;
+  }
+
+  resetDesign() {
+    this.partColors = {
+      'hood': '#3498db',
+      'body': '#2980b9',
+      'sleeve-left': '#3498db',
+      'sleeve-right': '#3498db'
+    };
+    this.selectedColor = '#3498db';
+    this.activePart = 'hood';
+  }
+
+  saveDesign() {
+    // 在实际应用中，这里会调用API保存设计
+    alert('设计已保存！');
+  }
+
+  sendAiMessage() {
+    const text = this.aiInput.trim();
+    if (!text) return;
+    
+    this.aiMessages.push({ text, isUser: true });
+    this.aiInput = '';
+    
+    // 模拟AI回复
+    setTimeout(() => {
+      let response = '';
+      if (text.includes('推荐') || text.includes('搭配')) {
+        response = '根据您的设计，我推荐尝试海洋蓝与珊瑚橙的搭配，这种组合在近期很受欢迎，能体现活力与时尚感。';
+      } else if (text.includes('流行') || text.includes('趋势')) {
+        response = '当前最流行的羽绒服颜色搭配是深海蓝黑渐变和日落橙黄渐变。这两种搭配在本月使用率上升了35%。';
+      } else {
+        response = '我理解您的需求了。作为AI设计助手，我可以为您提供以下帮助：\n1. 推荐颜色搭配方案\n2. 分析当前设计流行度\n3. 提供设计灵感\n4. 生成3D预览效果\n请告诉我您想了解哪方面的内容？';
+      }
+      
+      this.aiMessages.push({ text: response, isUser: false });
+    }, 1000);
+  }
+
+  private darkenColor(color: string, percent: number): string {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) - amt;
+    const G = (num >> 8 & 0x00FF) - amt;
+    const B = (num & 0x0000FF) - amt;
+    
+    return '#' + (
+      0x1000000 +
+      (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255)
+    ).toString(16).slice(1);
+  }
+}

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

@@ -1 +1,61 @@
-<p>page-design works!</p>
+<div class="panel">
+  <h2><i class="fas fa-palette"></i> 个性定制</h2>
+  <p class="section-desc">选择羽绒服的不同部位并自定义颜色，打造属于你的独特设计</p>
+  
+  <div class="jacket-display-container">
+    <div class="jacket-display">
+      <div class="jacket-base"></div>
+      <div class="jacket-part jacket-hood" [class.active-part]="activePart === 'hood'" 
+           (click)="selectPart('hood')" [style.background]="getPartGradient('hood')"></div>
+      <div class="jacket-part jacket-body" [class.active-part]="activePart === 'body'" 
+           (click)="selectPart('body')" [style.background]="getPartGradient('body')"></div>
+      <div class="jacket-part jacket-sleeve left" [class.active-part]="activePart === 'sleeve-left'" 
+           (click)="selectPart('sleeve-left')" [style.background]="getPartGradient('sleeve-left')"></div>
+      <div class="jacket-part jacket-sleeve right" [class.active-part]="activePart === 'sleeve-right'" 
+           (click)="selectPart('sleeve-right')" [style.background]="getPartGradient('sleeve-right')"></div>
+    </div>
+  </div>
+  
+  <h3>选择颜色</h3>
+  <div class="color-palette">
+    <div *ngFor="let color of colors" class="color-option" 
+         [class.active]="selectedColor === color" 
+         [style.background-color]="color"
+         (click)="selectColor(color)">
+    </div>
+  </div>
+  
+  <div class="action-buttons">
+    <button class="btn btn-secondary" (click)="resetDesign()">
+      <i class="fas fa-redo"></i> 重置
+    </button>
+    <button class="btn btn-primary pulse" (click)="saveDesign()">
+      <i class="fas fa-save"></i> 保存设计
+    </button>
+  </div>
+  
+  <div class="ai-recommendation">
+    <div class="ai-header">
+      <div class="ai-icon">
+        <i class="fas fa-robot"></i>
+      </div>
+      <div class="ai-title">AI设计助手</div>
+    </div>
+    
+    <div class="ai-messages">
+      <div *ngFor="let message of aiMessages" class="message" 
+           [class.user-message]="message.isUser" 
+           [class.ai-message]="!message.isUser">
+        {{ message.text }}
+      </div>
+    </div>
+    
+    <div class="ai-input-group">
+      <input type="text" class="ai-input" placeholder="输入您的问题..." 
+             [(ngModel)]="aiInput" (keyup.enter)="sendAiMessage()">
+      <button class="ai-send-btn" (click)="sendAiMessage()">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,339 @@
+.panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin-bottom: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+  transform-origin: top;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+h2 i {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  -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);
+}
+
+.section-desc {
+  color: #95a5a6;
+  margin-bottom: 25px;
+  font-size: 0.95rem;
+}
+
+.jacket-display-container {
+  position: relative;
+  margin: 0 auto 30px;
+  perspective: 1000px;
+}
+
+.jacket-display {
+  width: 300px;
+  height: 420px;
+  margin: 0 auto;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.8s ease;
+}
+
+.jacket-display:hover {
+  transform: rotateY(10deg);
+}
+
+.jacket-base {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://i.ibb.co/0QrZb0C/jacket-base.png') no-repeat center;
+  background-size: contain;
+  z-index: 1;
+  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
+}
+
+.jacket-part {
+  position: absolute;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 2;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.jacket-part:hover {
+  transform: translateY(-3px);
+  filter: brightness(1.05);
+}
+
+.jacket-part.active-part {
+  outline: 3px solid #3498db;
+  outline-offset: 3px;
+  filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5));
+}
+
+.jacket-hood {
+  top: 0;
+  left: 50px;
+  width: 200px;
+  height: 120px;
+  border-radius: 100px 100px 0 0;
+  z-index: 3;
+}
+
+.jacket-body {
+  top: 100px;
+  left: 25px;
+  width: 250px;
+  height: 250px;
+  border-radius: 20px;
+}
+
+.jacket-sleeve {
+  top: 110px;
+  width: 80px;
+  height: 180px;
+  border-radius: 40px;
+}
+
+.jacket-sleeve.left {
+  left: 0;
+}
+
+.jacket-sleeve.right {
+  right: 0;
+}
+
+.color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.color-option {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 3px solid white;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+}
+
+.color-option:hover {
+  transform: scale(1.15);
+}
+
+.color-option.active {
+  transform: scale(1.2);
+  box-shadow: 0 0 0 3px white, 0 0 0 6px #3498db;
+}
+
+.color-option.active::after {
+  content: '\f00c';
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 14px;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+.action-buttons {
+  display: flex;
+  gap: 15px;
+  margin-top: 30px;
+}
+
+.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;
+  gap: 8px;
+}
+
+.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);
+}
+
+.ai-recommendation {
+  background: white;
+  border-radius: 20px;
+  padding: 25px;
+  margin-top: 30px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.ai-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  color: #2c3e50;
+}
+
+.ai-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #9b59b6, #3498db);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.2rem;
+}
+
+.ai-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.ai-messages {
+  height: 250px;
+  overflow-y: auto;
+  padding: 15px;
+  background: #f9f9f9;
+  border-radius: 15px;
+  margin-bottom: 20px;
+}
+
+.message {
+  padding: 12px 15px;
+  margin-bottom: 15px;
+  border-radius: 18px;
+  max-width: 85%;
+  position: relative;
+}
+
+.user-message {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  color: white;
+  margin-left: auto;
+  border-bottom-right-radius: 5px;
+}
+
+.ai-message {
+  background: #ecf0f1;
+  color: #2c3e50;
+  margin-right: auto;
+  border-bottom-left-radius: 5px;
+}
+
+.ai-input-group {
+  display: flex;
+  gap: 10px;
+}
+
+.ai-input {
+  flex: 1;
+  padding: 14px 20px;
+  border: 2px solid #ecf0f1;
+  border-radius: 50px;
+  font-size: 1rem;
+  outline: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.ai-input:focus {
+  border-color: #3498db;
+}
+
+.ai-send-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.ai-send-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 15px rgba(52, 152, 219, 0.3);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+@media (max-width: 480px) {
+  .jacket-display {
+    width: 280px;
+    height: 400px;
+  }
+  
+  .panel {
+    padding: 25px 20px;
+  }
+  
+  .ai-messages {
+    height: 200px;
+  }
+}

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

@@ -1,11 +1,40 @@
 import { Component } from '@angular/core';
+import { NavMobileTabsComponent } from '../nav-mobile-tabs/nav-mobile-tabs.component';
+import { PageDesignComponent } from '../page-design/page-design.component';
+import { PageIpComponent } from '../page-ip/page-ip.component';
+import { PageMineComponent } from '../page-mine/page-mine.component';
+import { PageTrendsComponent } from '../page-trends/page-trends.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-page-home',
-  imports: [],
+  standalone: true,
+  imports: [
+    CommonModule,
+    NavMobileTabsComponent,
+    PageDesignComponent,
+    PageIpComponent,
+    PageMineComponent,
+    PageTrendsComponent
+  ],
   templateUrl: './page-home.html',
-  styleUrl: './page-home.scss'
+  styleUrls: ['./page-home.scss']
 })
 export class PageHomeComponent {
+  // 添加当前标签状态属性
+  currentTab: string = 'design'; // 默认显示设计页
 
+  // 正确接收标签变化事件
+  onTabChanged(tabName: string): void {
+    // 更新当前活动标签
+    this.currentTab = tabName;
+    console.log('标签切换至:', tabName);
+    
+    // 这里可以添加切换内容后的其他逻辑
+    // 例如：滚动到页面顶部
+    window.scrollTo(0, 0);
+    
+    // 或者：重置页面状态
+    // this.resetPageState();
+  }
 }

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

@@ -1 +1,19 @@
-<p>page-home works!</p>
+<header>
+  <div class="logo">
+    <i class="fas fa-vest"></i>
+    <span>羽绒服DIY</span>
+  </div>
+  <p class="tagline">创造属于你的个性羽绒服，展现独特时尚风格</p>
+</header>
+
+<app-nav-mobile-tabs (tabChanged)="onTabChanged($event)"></app-nav-mobile-tabs>
+
+<app-page-design *ngIf="currentTab === 'design'"></app-page-design>
+<app-page-ip *ngIf="currentTab === 'ip'"></app-page-ip>
+<app-page-mine *ngIf="currentTab === 'mine'"></app-page-mine>
+<app-page-trends *ngIf="currentTab === 'trends'"></app-page-trends>
+
+<footer>
+  <p>© 2023 羽绒服DIY - 创造你的个性时尚</p>
+  <p>让每个人都能成为设计师</p>
+</footer>

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

@@ -0,0 +1,45 @@
+header {
+  text-align: center;
+  padding: 20px 0;
+  margin-bottom: 10px;
+  position: relative;
+  animation: fadeInDown 0.8s ease;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: #e74c3c;
+  margin-bottom: 5px;
+}
+
+.logo i {
+  font-size: 2.2rem;
+  background: linear-gradient(135deg, #e74c3c, #9b59b6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.tagline {
+  color: #95a5a6;
+  font-size: 0.95rem;
+  margin-top: 5px;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+footer {
+  text-align: center;
+  padding: 30px 0 20px;
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}

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

@@ -1,11 +1,32 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-page-ip',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './page-ip.html',
-  styleUrl: './page-ip.scss'
+  styleUrls: ['./page-ip.scss']
 })
-export class PageIPComponent {
+export class PageIpComponent {
+  uploadImage() {
+    alert('图片上传功能需要后端支持，此处为前端演示');
+  }
 
-}
+  analyzeImage() {
+    alert('正在分析图片颜色...');
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    const uploadArea = event.target as HTMLElement;
+    uploadArea.style.borderColor = '#3498db';
+    uploadArea.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
+  }
+
+  onDragLeave(event: DragEvent) {
+    const uploadArea = event.target as HTMLElement;
+    uploadArea.style.borderColor = '#bdc3c7';
+    uploadArea.style.backgroundColor = '#f9f9f9';
+  }
+}

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

@@ -1 +1,34 @@
-<p>page-ip works!</p>
+<div class="panel">
+  <h2><i class="fas fa-crown"></i> 热门IP配色</h2>
+  <p class="section-desc">从热门IP图片中提取颜色，应用到你的羽绒服设计</p>
+  
+  <div class="ip-upload">
+    <div class="upload-area" (click)="uploadImage()" 
+         (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">
+      <i class="fas fa-cloud-upload-alt"></i>
+      <p>点击上传图片或拖放文件到这里</p>
+      <small>支持JPG、PNG格式，最大5MB</small>
+    </div>
+    <button class="btn btn-primary" (click)="analyzeImage()">
+      <i class="fas fa-magic"></i> 识别图片颜色
+    </button>
+  </div>
+  
+  <h3>热门IP推荐</h3>
+  <div class="color-stats">
+    <div class="color-stat">
+      <div class="color-box" style="background: linear-gradient(135deg, #FFD700, #C0C0C0);">
+        <i class="fas fa-bolt"></i>
+      </div>
+      <div class="stat-name">漫威英雄</div>
+      <div class="stat-count">12,450 次使用</div>
+    </div>
+    <div class="color-stat">
+      <div class="color-box" style="background: linear-gradient(135deg, #FF69B4, #00FFFF);">
+        <i class="fas fa-vest"></i>
+      </div>
+      <div class="stat-name">芭比娃娃</div>
+      <div class="stat-count">9,870 次使用</div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,171 @@
+.panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin-bottom: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+h2 i {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  -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);
+}
+
+.section-desc {
+  color: #95a5a6;
+  margin-bottom: 25px;
+  font-size: 0.95rem;
+}
+
+.ip-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin: 25px 0;
+}
+
+.upload-area {
+  width: 100%;
+  height: 200px;
+  border: 3px dashed #bdc3c7;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: #f9f9f9;
+  position: relative;
+  overflow: hidden;
+}
+
+.upload-area:hover {
+  border-color: #3498db;
+  background: rgba(52, 152, 219, 0.05);
+  transform: translateY(-5px);
+}
+
+.upload-area i {
+  font-size: 3.5rem;
+  color: #bdc3c7;
+  margin-bottom: 15px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.upload-area:hover i {
+  color: #3498db;
+}
+
+.btn {
+  padding: 18px 25px;
+  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;
+  gap: 8px;
+}
+
+.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);
+}
+
+.color-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.color-stat {
+  flex: 1;
+  min-width: 140px;
+  background: white;
+  border-radius: 18px;
+  padding: 20px 15px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.color-stat:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
+}
+
+.color-stat .color-box {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  margin: 0 auto 15px;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  color: white;
+}
+
+.color-stat .stat-name {
+  font-weight: 700;
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+}
+
+.color-stat .stat-count {
+  color: #95a5a6;
+  font-size: 0.95rem;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 480px) {
+  .panel {
+    padding: 25px 20px;
+  }
+  
+  .color-stats {
+    flex-direction: column;
+  }
+  
+  .color-stat {
+    min-width: 100%;
+  }
+}

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

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-page-mine',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './page-mine.html',
-  styleUrl: './page-mine.scss'
+  styleUrls: ['./page-mine.scss']
 })
-export class PageMineComponent {
-
-}
+export class PageMineComponent {}

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

@@ -1 +1,38 @@
-<p>page-mine works!</p>
+<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>

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

@@ -0,0 +1,135 @@
+.panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin-bottom: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+h2 i {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  -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);
+}
+
+.section-desc {
+  color: #95a5a6;
+  margin-bottom: 25px;
+  font-size: 0.95rem;
+}
+
+.designs-container {
+  display: grid;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.design-card {
+  display: flex;
+  background: #f9f9f9;
+  border-radius: 20px;
+  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);
+}
+
+.design-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.design-preview {
+  width: 100px;
+  height: 120px;
+}
+
+.design-info {
+  flex: 1;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.design-name {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 5px;
+}
+
+.design-date {
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+.design-actions {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.btn-action {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: white;
+  border: 1px solid #ecf0f1;
+  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;
+}
+
+.btn-action:hover {
+  background: #3498db;
+  color: white;
+  transform: translateY(-3px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 480px) {
+  .panel {
+    padding: 25px 20px;
+  }
+  
+  .design-card {
+    flex-direction: column;
+  }
+  
+  .design-preview {
+    width: 100%;
+    height: 100px;
+  }
+  
+  .design-actions {
+    flex-direction: row;
+    justify-content: center;
+    gap: 15px;
+  }
+}

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

@@ -0,0 +1,27 @@
+<div class="panel">
+  <h2><i class="fas fa-chart-line"></i> 颜色流行趋势</h2>
+  <p class="section-desc">查看最受欢迎的颜色搭配和当前流行趋势</p>
+  
+  <h3>本周最受欢迎颜色</h3>
+  <div class="chart-container">
+    <canvas #colorChart></canvas>
+  </div>
+  
+  <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>
+      </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.scss

@@ -0,0 +1,117 @@
+.panel {
+  background: white;
+  border-radius: 25px;
+  padding: 30px;
+  margin-bottom: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  animation: fadeIn 0.6s ease;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+h2 i {
+  background: linear-gradient(135deg, #3498db, #9b59b6);
+  -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);
+}
+
+.section-desc {
+  color: #95a5a6;
+  margin-bottom: 25px;
+  font-size: 0.95rem;
+}
+
+.chart-container {
+  background: white;
+  border-radius: 20px;
+  padding: 20px;
+  margin-top: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  height: 300px;
+}
+
+.color-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.color-stat {
+  flex: 1;
+  min-width: 140px;
+  background: white;
+  border-radius: 18px;
+  padding: 20px 15px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.color-stat:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
+}
+
+.color-stat .color-box {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  margin: 0 auto 15px;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  color: white;
+}
+
+.color-stat .stat-name {
+  font-weight: 700;
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+}
+
+.color-stat .stat-count {
+  color: #95a5a6;
+  font-size: 0.95rem;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 480px) {
+  .panel {
+    padding: 25px 20px;
+  }
+  
+  .color-stats {
+    flex-direction: column;
+  }
+  
+  .color-stat {
+    min-width: 100%;
+  }
+  
+  .chart-container {
+    height: 250px;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageTrendsComponent } from './page-trends.component';
+
+describe('PageTrendsComponent', () => {
+  let component: PageTrendsComponent;
+  let fixture: ComponentFixture<PageTrendsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageTrendsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageTrendsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,78 @@
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Chart } from 'chart.js/auto';
+
+@Component({
+  selector: 'app-page-trends',
+  standalone: true,
+  templateUrl: './page-trends.component.html',
+  styleUrls: ['./page-trends.component.scss']
+})
+export class PageTrendsComponent implements AfterViewInit {
+  @ViewChild('colorChart') colorChartRef!: ElementRef;
+  private colorChart: any;
+
+  ngAfterViewInit() {
+    this.initChart();
+  }
+
+  private initChart() {
+    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
+        }]
+      },
+      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
+            }
+          }
+        }
+      }
+    });
+  }
+}

cloth-design/src/styles.scss

@@ -1,19 +1,70 @@
+/* 在您的全局 styles.scss 文件中添加以下内容 */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.dev/guide/theming
-@use '@angular/material' as mat;
-
-html {
-  @include mat.theme((
-    color: (
-      theme-type: light,
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
-    ),
-    typography: Roboto,
-    density: 0,
-  ));
-}/* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+:root {
+  --primary: #3498db;
+  --primary-dark: #2980b9;
+  --secondary: #e74c3c;
+  --secondary-dark: #c0392b;
+  --accent: #9b59b6;
+  --accent-dark: #8e44ad;
+  --success: #2ecc71;
+  --dark: #2c3e50;
+  --darker: #1a252f;
+  --light: #ecf0f1;
+  --lighter: #f9f9f9;
+  --gray: #95a5a6;
+  --light-gray: #bdc3c7;
+  --border: #e0e0e0;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+body {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  color: var(--dark);
+  line-height: 1.6;
+  min-height: 100vh;
+  padding: 20px 0;
+  overflow-x: hidden;
+}
+
+.container {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 10px;
+  }
+}

cloth-design/tsconfig.app.json

@@ -1,5 +1,4 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {

cloth-design/tsconfig.spec.json

@@ -1,5 +1,4 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {

demo/ai-clothing-design.html

@@ -0,0 +1,947 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>羽绒服DIY - 个性定制</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        
+        :root {
+            --primary: #3498db;
+            --primary-dark: #2980b9;
+            --secondary: #e74c3c;
+            --secondary-dark: #c0392b;
+            --accent: #9b59b6;
+            --accent-dark: #8e44ad;
+            --success: #2ecc71;
+            --dark: #2c3e50;
+            --darker: #1a252f;
+            --light: #ecf0f1;
+            --lighter: #f9f9f9;
+            --gray: #95a5a6;
+            --light-gray: #bdc3c7;
+            --border: #e0e0e0;
+            --shadow: rgba(0, 0, 0, 0.1);
+            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        
+        body {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            color: var(--dark);
+            line-height: 1.6;
+            min-height: 100vh;
+            padding: 20px 0;
+            overflow-x: hidden;
+        }
+        
+        .container {
+            max-width: 480px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+        
+        /* 头部样式 */
+        header {
+            text-align: center;
+            padding: 20px 0;
+            margin-bottom: 10px;
+            position: relative;
+            animation: fadeInDown 0.8s ease;
+        }
+        
+        .logo {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--secondary);
+            margin-bottom: 5px;
+        }
+        
+        .logo i {
+            font-size: 2.2rem;
+            background: linear-gradient(135deg, var(--secondary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .tagline {
+            color: var(--gray);
+            font-size: 0.95rem;
+            margin-top: 5px;
+            max-width: 80%;
+            margin: 0 auto;
+        }
+        
+        /* 标签页样式 */
+        .tabs {
+            display: flex;
+            background: white;
+            border-radius: 50px;
+            padding: 6px;
+            margin: 25px 0;
+            box-shadow: var(--card-shadow);
+            position: relative;
+            z-index: 10;
+        }
+        
+        .tab {
+            flex: 1;
+            text-align: center;
+            padding: 14px 0;
+            border-radius: 50px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            color: var(--gray);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .tab.active {
+            color: white;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+        }
+        
+        .tab i {
+            margin-right: 6px;
+            font-size: 1.1rem;
+        }
+        
+        /* 面板样式 */
+        .panel {
+            display: none;
+            background: white;
+            border-radius: 25px;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: var(--card-shadow);
+            animation: fadeIn 0.6s ease;
+            transform-origin: top;
+        }
+        
+        .panel.active {
+            display: block;
+        }
+        
+        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);
+        }
+        
+        h2 i {
+            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);
+        }
+        
+        .section-desc {
+            color: var(--gray);
+            margin-bottom: 25px;
+            font-size: 0.95rem;
+        }
+        
+        /* 羽绒服展示区域 */
+        .jacket-display-container {
+            position: relative;
+            margin: 0 auto 30px;
+            perspective: 1000px;
+        }
+        
+        .jacket-display {
+            width: 300px;
+            height: 420px;
+            margin: 0 auto;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.8s ease;
+        }
+        
+        .jacket-display:hover {
+            transform: rotateY(10deg);
+        }
+        
+        .jacket-base {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('https://i.ibb.co/0QrZb0C/jacket-base.png') no-repeat center;
+            background-size: contain;
+            z-index: 1;
+            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
+        }
+        
+        .jacket-part {
+            position: absolute;
+            cursor: pointer;
+            transition: var(--transition);
+            z-index: 2;
+            border-radius: 12px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+        }
+        
+        .jacket-part:hover {
+            transform: translateY(-3px);
+            filter: brightness(1.05);
+        }
+        
+        .jacket-part.active-part {
+            outline: 3px solid var(--primary);
+            outline-offset: 3px;
+            filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5));
+        }
+        
+        .jacket-hood {
+            top: 0;
+            left: 50px;
+            width: 200px;
+            height: 120px;
+            background: linear-gradient(135deg, #3498db, #2980b9);
+            border-radius: 100px 100px 0 0;
+            z-index: 3;
+        }
+        
+        .jacket-body {
+            top: 100px;
+            left: 25px;
+            width: 250px;
+            height: 250px;
+            background: linear-gradient(135deg, #2980b9, #1c6ea4);
+            border-radius: 20px;
+        }
+        
+        .jacket-sleeve {
+            top: 110px;
+            width: 80px;
+            height: 180px;
+            border-radius: 40px;
+        }
+        
+        .jacket-sleeve.left {
+            left: 0;
+            background: linear-gradient(135deg, #3498db, #2980b9);
+        }
+        
+        .jacket-sleeve.right {
+            right: 0;
+            background: linear-gradient(135deg, #3498db, #2980b9);
+        }
+        
+        /* 颜色选择器 */
+        .color-palette {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 20px;
+        }
+        
+        .color-option {
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 3px solid white;
+            box-shadow: 0 4px 10px var(--shadow);
+            transition: var(--transition);
+            position: relative;
+        }
+        
+        .color-option:hover {
+            transform: scale(1.15);
+        }
+        
+        .color-option.active {
+            transform: scale(1.2);
+            box-shadow: 0 0 0 3px white, 0 0 0 6px var(--primary);
+        }
+        
+        .color-option.active::after {
+            content: '\f00c';
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 14px;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }
+        
+        /* IP上传区域 */
+        .ip-upload {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            margin: 25px 0;
+        }
+        
+        .upload-area {
+            width: 100%;
+            height: 200px;
+            border: 3px dashed var(--light-gray);
+            border-radius: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+            background: var(--lighter);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .upload-area:hover {
+            border-color: var(--primary);
+            background: rgba(52, 152, 219, 0.05);
+            transform: translateY(-5px);
+        }
+        
+        .upload-area i {
+            font-size: 3.5rem;
+            color: var(--light-gray);
+            margin-bottom: 15px;
+            transition: var(--transition);
+        }
+        
+        .upload-area:hover i {
+            color: var(--primary);
+        }
+        
+        /* 分享区域 */
+        .share-section {
+            text-align: center;
+            padding: 30px 20px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            border-radius: 20px;
+            color: white;
+            margin: 25px 0;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .share-section::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+            transform: rotate(30deg);
+        }
+        
+        .share-section h3 {
+            font-size: 1.4rem;
+            margin-bottom: 10px;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .share-link {
+            display: flex;
+            background: white;
+            border-radius: 50px;
+            padding: 3px;
+            margin: 25px 0 20px;
+            color: var(--dark);
+            align-items: center;
+            position: relative;
+            z-index: 2;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .share-link input {
+            flex: 1;
+            border: none;
+            padding: 14px 20px;
+            font-size: 0.95rem;
+            background: transparent;
+            color: var(--dark);
+            outline: none;
+        }
+        
+        .share-link button {
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 50px;
+            padding: 12px 25px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            white-space: nowrap;
+        }
+        
+        .share-link button:hover {
+            background: var(--accent-dark);
+        }
+        
+        .share-icons {
+            display: flex;
+            justify-content: center;
+            gap: 25px;
+            margin-top: 20px;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .share-icon {
+            width: 55px;
+            height: 55px;
+            border-radius: 50%;
+            background: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--dark);
+            font-size: 1.6rem;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .share-icon:hover {
+            transform: translateY(-8px);
+        }
+        
+        .share-icon.wechat { color: #2ecc71; }
+        .share-icon.weibo { color: #e74c3c; }
+        .share-icon.qq { color: #3498db; }
+        
+        /* 统计卡片 */
+        .color-stats {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        
+        .color-stat {
+            flex: 1;
+            min-width: 140px;
+            background: white;
+            border-radius: 18px;
+            padding: 20px 15px;
+            text-align: center;
+            box-shadow: var(--card-shadow);
+            transition: var(--transition);
+        }
+        
+        .color-stat:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
+        }
+        
+        .color-stat .color-box {
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+            margin: 0 auto 15px;
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.8rem;
+            color: white;
+        }
+        
+        .color-stat .stat-name {
+            font-weight: 700;
+            margin-bottom: 8px;
+            font-size: 1.1rem;
+        }
+        
+        .color-stat .stat-count {
+            color: var(--gray);
+            font-size: 0.95rem;
+        }
+        
+        /* 按钮样式 */
+        .action-buttons {
+            display: flex;
+            gap: 15px;
+            margin-top: 30px;
+        }
+        
+        .btn {
+            flex: 1;
+            padding: 18px;
+            border-radius: 50px;
+            border: none;
+            font-weight: 600;
+            font-size: 1.05rem;
+            cursor: pointer;
+            transition: var(--transition);
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            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: var(--primary);
+            border: 2px solid var(--primary);
+        }
+        
+        .btn-secondary:hover {
+            background: rgba(52, 152, 219, 0.05);
+            transform: translateY(-3px);
+        }
+        
+        /* 图表容器 */
+        .chart-container {
+            background: white;
+            border-radius: 20px;
+            padding: 20px;
+            margin-top: 25px;
+            box-shadow: var(--card-shadow);
+            height: 300px;
+        }
+        
+        /* 页脚 */
+        footer {
+            text-align: center;
+            padding: 30px 0 20px;
+            color: var(--gray);
+            font-size: 0.9rem;
+        }
+        
+        /* 动画 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        
+        /* 响应式调整 */
+        @media (max-width: 480px) {
+            .container {
+                padding: 0 10px;
+            }
+            
+            .jacket-display {
+                width: 280px;
+                height: 400px;
+            }
+            
+            .color-stats {
+                flex-direction: column;
+            }
+            
+            .color-stat {
+                min-width: 100%;
+            }
+            
+            h2 {
+                font-size: 1.4rem;
+            }
+            
+            .panel {
+                padding: 25px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-vest"></i>
+                <span>羽绒服DIY</span>
+            </div>
+            <p class="tagline">创造属于你的个性羽绒服，展现独特时尚风格</p>
+        </header>
+        
+        <div class="tabs">
+            <div class="tab active" data-tab="customize">
+                <i class="fas fa-palette"></i> 定制
+            </div>
+            <div class="tab" data-tab="ip">
+                <i class="fas fa-crown"></i> IP
+            </div>
+            <div class="tab" data-tab="share">
+                <i class="fas fa-share-alt"></i> 分享
+            </div>
+            <div class="tab" data-tab="trends">
+                <i class="fas fa-chart-line"></i> 趋势
+            </div>
+        </div>
+        
+        <!-- 个性定制面板 -->
+        <div class="panel active" id="customize-panel">
+            <h2><i class="fas fa-palette"></i> 个性定制</h2>
+            <p class="section-desc">选择羽绒服的不同部位并自定义颜色，打造属于你的独特设计</p>
+            
+            <div class="jacket-display-container">
+                <div class="jacket-display">
+                    <div class="jacket-base"></div>
+                    <div class="jacket-part jacket-hood active-part" data-part="hood"></div>
+                    <div class="jacket-part jacket-body" data-part="body"></div>
+                    <div class="jacket-part jacket-sleeve left" data-part="sleeve-left"></div>
+                    <div class="jacket-part jacket-sleeve right" data-part="sleeve-right"></div>
+                </div>
+            </div>
+            
+            <h3>选择颜色</h3>
+            <div class="color-palette">
+                <div class="color-option active" style="background-color: #3498db;" data-color="#3498db"></div>
+                <div class="color-option" style="background-color: #e74c3c;" data-color="#e74c3c"></div>
+                <div class="color-option" style="background-color: #2ecc71;" data-color="#2ecc71"></div>
+                <div class="color-option" style="background-color: #f1c40f;" data-color="#f1c40f"></div>
+                <div class="color-option" style="background-color: #9b59b6;" data-color="#9b59b6"></div>
+                <div class="color-option" style="background-color: #1abc9c;" data-color="#1abc9c"></div>
+                <div class="color-option" style="background-color: #e67e22;" data-color="#e67e22"></div>
+                <div class="color-option" style="background-color: #2c3e50;" data-color="#2c3e50"></div>
+                <div class="color-option" style="background-color: #ecf0f1;" data-color="#ecf0f1"></div>
+                <div class="color-option" style="background-color: #e84393;" data-color="#e84393"></div>
+            </div>
+            
+            <div class="action-buttons">
+                <button class="btn btn-secondary">
+                    <i class="fas fa-redo"></i> 重置
+                </button>
+                <button class="btn btn-primary pulse">
+                    <i class="fas fa-save"></i> 保存设计
+                </button>
+            </div>
+        </div>
+        
+        <!-- 热门IP面板 -->
+        <div class="panel" id="ip-panel">
+            <h2><i class="fas fa-crown"></i> 热门IP配色</h2>
+            <p class="section-desc">从热门IP图片中提取颜色，应用到你的羽绒服设计</p>
+            
+            <div class="ip-upload">
+                <div class="upload-area" id="uploadArea">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <p>点击上传图片或拖放文件到这里</p>
+                    <small>支持JPG、PNG格式，最大5MB</small>
+                </div>
+                <button class="btn btn-primary">
+                    <i class="fas fa-magic"></i> 识别图片颜色
+                </button>
+            </div>
+            
+            <h3>热门IP推荐</h3>
+            <div class="color-stats">
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #FFD700, #C0C0C0);">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <div class="stat-name">漫威英雄</div>
+                    <div class="stat-count">12,450 次使用</div>
+                </div>
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #FF69B4, #00FFFF);">
+                        <i class="fas fa-vest"></i>
+                    </div>
+                    <div class="stat-name">芭比娃娃</div>
+                    <div class="stat-count">9,870 次使用</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 分享面板 -->
+        <div class="panel" id="share-panel">
+            <h2><i class="fas fa-share-alt"></i> 分享你的设计</h2>
+            <p class="section-desc">将你的个性羽绒服设计分享给朋友或社交平台</p>
+            
+            <div class="share-section">
+                <h3>我的个性羽绒服设计</h3>
+                <p>扫描二维码或复制链接分享给好友</p>
+                
+                <div class="share-link">
+                    <input type="text" id="shareLink" value="https://diy.jacket.com/design/abc123" readonly>
+                    <button id="copyBtn">
+                        <i class="fas fa-copy"></i> 复制链接
+                    </button>
+                </div>
+                
+                <div class="share-icons">
+                    <div class="share-icon wechat">
+                        <i class="fab fa-weixin"></i>
+                    </div>
+                    <div class="share-icon weibo">
+                        <i class="fab fa-weibo"></i>
+                    </div>
+                    <div class="share-icon qq">
+                        <i class="fab fa-qq"></i>
+                    </div>
+                </div>
+            </div>
+            
+            <h3>热门分享设计</h3>
+            <div class="color-stats">
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #3498db, #9b59b6);">
+                        <i class="fas fa-star"></i>
+                    </div>
+                    <div class="stat-name">星空主题</div>
+                    <div class="stat-count">8,456 次分享</div>
+                </div>
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
+                        <i class="fas fa-fire"></i>
+                    </div>
+                    <div class="stat-name">火焰主题</div>
+                    <div class="stat-count">7,231 次分享</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 流行趋势面板 -->
+        <div class="panel" id="trends-panel">
+            <h2><i class="fas fa-chart-line"></i> 颜色流行趋势</h2>
+            <p class="section-desc">查看最受欢迎的颜色搭配和当前流行趋势</p>
+            
+            <h3>本周最受欢迎颜色</h3>
+            <div class="chart-container">
+                <canvas id="colorChart"></canvas>
+            </div>
+            
+            <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>
+                    </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>
+        
+        <footer>
+            <p>© 2023 羽绒服DIY - 创造你的个性时尚</p>
+            <p>让每个人都能成为设计师</p>
+        </footer>
+    </div>
+    
+    <script>
+        // 页面加载完成后执行
+        document.addEventListener('DOMContentLoaded', function() {
+            // 标签切换功能
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.addEventListener('click', () => {
+                    // 移除所有活动标签
+                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                    // 添加当前活动标签
+                    tab.classList.add('active');
+                    
+                    // 隐藏所有面板
+                    document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active'));
+                    // 显示对应面板
+                    const panelId = tab.getAttribute('data-tab') + '-panel';
+                    document.getElementById(panelId).classList.add('active');
+                });
+            });
+            
+            // 部位选择功能
+            document.querySelectorAll('.jacket-part').forEach(part => {
+                part.addEventListener('click', () => {
+                    document.querySelectorAll('.jacket-part').forEach(p => p.classList.remove('active-part'));
+                    part.classList.add('active-part');
+                });
+            });
+            
+            // 颜色选择功能
+            document.querySelectorAll('.color-option').forEach(color => {
+                color.addEventListener('click', () => {
+                    const selectedColor = color.getAttribute('data-color');
+                    const activePart = document.querySelector('.jacket-part.active-part');
+                    
+                    if (activePart) {
+                        activePart.style.background = `linear-gradient(135deg, ${selectedColor}, ${adjustColor(selectedColor, -20)})`;
+                    }
+                    
+                    // 更新活动颜色指示器
+                    document.querySelectorAll('.color-option').forEach(c => c.classList.remove('active'));
+                    color.classList.add('active');
+                });
+            });
+            
+            // 辅助函数：调整颜色亮度
+            function adjustColor(color, amount) {
+                return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
+            }
+            
+            // 复制链接功能
+            document.getElementById('copyBtn').addEventListener('click', () => {
+                const linkInput = document.getElementById('shareLink');
+                linkInput.select();
+                document.execCommand('copy');
+                
+                // 显示复制成功提示
+                const originalText = linkInput.value;
+                const btnText = document.getElementById('copyBtn');
+                btnText.innerHTML = '<i class="fas fa-check"></i> 已复制';
+                
+                setTimeout(() => {
+                    btnText.innerHTML = '<i class="fas fa-copy"></i> 复制链接';
+                }, 2000);
+            });
+            
+            // 上传区域交互
+            const uploadArea = document.getElementById('uploadArea');
+            uploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadArea.style.borderColor = 'var(--primary)';
+                uploadArea.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
+            });
+            
+            uploadArea.addEventListener('dragleave', () => {
+                uploadArea.style.borderColor = 'var(--light-gray)';
+                uploadArea.style.backgroundColor = 'var(--lighter)';
+            });
+            
+            uploadArea.addEventListener('click', () => {
+                alert('图片上传功能需要后端支持，此处为前端演示');
+            });
+            
+            // 初始化图表
+            const ctx = document.getElementById('colorChart').getContext('2d');
+            const 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
+                    }]
+                },
+                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
+                            }
+                        }
+                    }
+                }
+            });
+            
+            // 重置按钮功能
+            document.querySelector('.btn-secondary').addEventListener('click', () => {
+                document.querySelectorAll('.jacket-part').forEach(part => {
+                    part.style.background = '';
+                });
+                
+                // 重置颜色选择器
+                document.querySelectorAll('.color-option').forEach(color => {
+                    color.classList.remove('active');
+                });
+                
+                // 设置默认颜色为选中
+                document.querySelector('.color-option').classList.add('active');
+                
+                // 设置默认激活部位
+                document.querySelectorAll('.jacket-part').forEach(p => p.classList.remove('active-part'));
+                document.querySelector('.jacket-hood').classList.add('active-part');
+            });
+        });
+    </script>
+</body>
+</html>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "cloth-design",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}