Merge branch 'master' of http://git.fmode.cn:3000/AAA/cloth-color11

cloth-dit-web/src/modules/cloth/color/pages-design-center/design-center.routes.ts

@@ -1,3 +1,4 @@
+// design-center.routes.ts
 import { Routes } from '@angular/router';
 
 export const designCenterRoutes: Routes = [
@@ -17,6 +18,26 @@ export const designCenterRoutes: Routes = [
       {
         path: 'advanced-custom',
         loadComponent: () => import('./pages-design-center/advanced-custom/advanced-custom').then(m => m.AdvancedCustom)
+      },
+      {
+        path: 'embroidery-editor',
+        loadComponent: () => import('./pages-design-center/advanced-custom/components/embroidery-editor/embroidery-editor').then(m => m.EmbroideryEditor)
+      },
+      {
+        path: 'accessory-system',
+        loadComponent: () => import('./pages-design-center/advanced-custom/components/accessory-system/accessory-system').then(m => m.AccessorySystem)
+      },
+      {
+        path: 'sticker-library',
+        loadComponent: () => import('./pages-design-center/advanced-custom/components/sticker-library/sticker-library').then(m => m.StickerLibrary)
+      },
+      {
+        path: 'material-texture',
+        loadComponent: () => import('./pages-design-center/color-diy/components/material-texture/material-texture').then(m => m.MaterialTexture)
+      },
+      {
+        path: 'trending-colors',
+        loadComponent: () => import('./pages-design-center/color-diy/components/trending-colors/trending-colors').then(m => m.TrendingColors)
       }
     ]
   }

cloth-dit-web/src/modules/cloth/color/pages-design-center/pages-design-center/advanced-custom/components/embroidery-editor/embroidery-editor.ts

@@ -1,11 +1,112 @@
+// embroidery-editor.ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-embroidery-editor',
-  imports: [],
-  templateUrl: './embroidery-editor.html',
-  styleUrl: './embroidery-editor.scss'
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="editor-container">
+      <div class="canvas-area">
+        <div class="embroidery-canvas">
+          <!-- Canvas for embroidery design would go here -->
+          <p>刺绣设计区域</p>
+        </div>
+      </div>
+      
+      <div class="controls">
+        <div class="pattern-library">
+          <h4>刺绣图案库</h4>
+          <div class="patterns">
+            <div *ngFor="let pattern of patterns" class="pattern-item">
+              {{pattern}}
+            </div>
+          </div>
+        </div>
+        
+        <div class="color-controls">
+          <h4>线色选择</h4>
+          <div class="thread-colors">
+            <div *ngFor="let color of threadColors" 
+                 class="thread-color" 
+                 [style.background]="color">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .editor-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    
+    .embroidery-canvas {
+      background: #f8f9fa;
+      border-radius: 15px;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    }
+    
+    .controls {
+      background: white;
+      border-radius: 15px;
+      padding: 20px;
+      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    }
+    
+    .patterns {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      margin-top: 15px;
+    }
+    
+    .pattern-item {
+      background: #e9ecef;
+      border-radius: 10px;
+      padding: 15px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    
+    .pattern-item:hover {
+      background: #dee2e6;
+      transform: scale(1.05);
+    }
+    
+    .thread-colors {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 8px;
+      margin-top: 15px;
+    }
+    
+    .thread-color {
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    
+    .thread-color:hover {
+      transform: scale(1.2);
+    }
+  `]
 })
 export class EmbroideryEditor {
-
-}
+  patterns = ['花朵', '动物', '字母', '几何', '传统', '现代'];
+  threadColors = [
+    '#ff0000', '#00ff00', '#0000ff', '#ffff00',
+    '#ff00ff', '#00ffff', '#000000', '#ffffff',
+    '#ff9999', '#99ff99', '#9999ff', '#ffcc00'
+  ];
+}

cloth-dit-web/src/modules/cloth/color/pages-design-center/pages-design-center/color-diy/color-diy.ts

@@ -1,11 +1,176 @@
+// color-diy.ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-color-diy',
-  imports: [],
-  templateUrl: './color-diy.html',
-  styleUrl: './color-diy.scss'
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="preview-3d">
+      <div class="model-3d">👕</div>
+    </div>
+
+    <div class="tool-grid">
+      <div class="tool-card" (click)="openColorPicker()">
+        <span class="tool-icon">🎨</span>
+        <div class="tool-title">颜色设计</div>
+      </div>
+      <div class="tool-card" (click)="openPatternEditor()">
+        <span class="tool-icon">✨</span>
+        <div class="tool-title">图案编辑</div>
+      </div>
+      <div class="tool-card" (click)="openEmbroidery()">
+        <span class="tool-icon">🧵</span>
+        <div class="tool-title">刺绣定制</div>
+      </div>
+      <div class="tool-card" (click)="openAccessories()">
+        <span class="tool-icon">💍</span>
+        <div class="tool-title">配饰搭配</div>
+      </div>
+    </div>
+
+    <div class="color-picker">
+      <h4>选择颜色</h4>
+      <div class="color-palette">
+        <div *ngFor="let color of colors" 
+             class="color-swatch" 
+             [style.background]="color" 
+             [class.active]="selectedColor === color"
+             (click)="selectColor(color)">
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .preview-3d {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 15px;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 18px;
+      margin-bottom: 20px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .preview-3d::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
+    }
+
+    .model-3d {
+      font-size: 80px;
+      z-index: 2;
+      position: relative;
+      animation: rotate3d 10s infinite linear;
+    }
+
+    @keyframes rotate3d {
+      0% { transform: rotateY(0deg); }
+      100% { transform: rotateY(360deg); }
+    }
+
+    .tool-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+      margin-bottom: 20px;
+    }
+
+    .tool-card {
+      background: white;
+      border-radius: 15px;
+      padding: 20px;
+      text-align: center;
+      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .tool-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+    }
+
+    .tool-icon {
+      font-size: 40px;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .tool-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .color-picker {
+      background: white;
+      border-radius: 15px;
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    }
+
+    .color-palette {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 10px;
+      margin-top: 15px;
+    }
+
+    .color-swatch {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 2px solid transparent;
+    }
+
+    .color-swatch:hover,
+    .color-swatch.active {
+      transform: scale(1.2);
+      border-color: #333;
+    }
+  `]
 })
 export class ColorDiy {
+  colors = [
+    '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4',
+    '#ffeaa7', '#dda0dd', '#98d8c8', '#f7dc6f',
+    '#bb8a89', '#a29bfe', '#fd79a8', '#fdcb6e',
+    '#e17055', '#81ecec', '#fab1a0', '#00b894'
+  ];
+  selectedColor = '#ff6b6b';
+
+  selectColor(color: string) {
+    this.selectedColor = color;
+  }
+
+  openColorPicker() {
+    console.log('Opening color picker');
+  }
+
+  openPatternEditor() {
+    console.log('Opening pattern editor');
+  }
+
+  openEmbroidery() {
+    console.log('Opening embroidery editor');
+  }
 
-}
+  openAccessories() {
+    console.log('Opening accessories');
+  }
+}

cloth-dit-web/src/modules/cloth/color/pages-design-center/pages-design-center/pages-design-center.ts

@@ -1,14 +1,116 @@
+// pages-design-center.ts
 import { Component } from '@angular/core';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-pages-design-center',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, CommonModule],
-  templateUrl: './pages-design-center.html',
-  styleUrl: './pages-design-center.scss'
-})
-export class PagesDesignCenter {
+  imports: [CommonModule, RouterOutlet],
+  template: `
+    <header class="header">
+      <div class="header-content">
+        <h1>设计中心</h1>
+        <p>释放你的创意想象</p>
+      </div>
+    </header>
+
+    <div class="design-tool-nav">
+      <nav>
+        <ul>
+          <li><a routerLink="color-diy" routerLinkActive="active">颜色设计</a></li>
+          <li><a routerLink="advanced-custom" routerLinkActive="active">高级定制</a></li>
+          <li><a routerLink="embroidery-editor" routerLinkActive="active">刺绣编辑</a></li>
+          <li><a routerLink="accessory-system" routerLinkActive="active">配饰系统</a></li>
+          <li><a routerLink="sticker-library" routerLinkActive="active">贴图库</a></li>
+          <li><a routerLink="material-texture" routerLinkActive="active">材质纹理</a></li>
+          <li><a routerLink="trending-colors" routerLinkActive="active">流行色彩</a></li>
+        </ul>
+      </nav>
+    </div>
+
+    <main>
+      <router-outlet></router-outlet>
+    </main>
+  `,
+  styles: [`
+    .header {
+      background: linear-gradient(45deg, #ff6b6b, #ffa726);
+      padding: 20px 20px 15px;
+      color: white;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .header::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+      animation: float 20s infinite linear;
+    }
+
+    @keyframes float {
+      0% { transform: translate(-50%, -50%) rotate(0deg); }
+      100% { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+
+    .header-content {
+      position: relative;
+      z-index: 2;
+    }
+
+    .header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 5px;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
 
-}
+    .header p {
+      opacity: 0.9;
+      font-size: 14px;
+    }
+
+    .design-tool-nav {
+      background: white;
+      padding: 15px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+
+    .design-tool-nav nav ul {
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding-bottom: 5px;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .design-tool-nav nav a {
+      display: block;
+      padding: 8px 15px;
+      background: #f8f9fa;
+      border-radius: 20px;
+      color: #333;
+      text-decoration: none;
+      font-size: 14px;
+      white-space: nowrap;
+      transition: all 0.3s ease;
+    }
+
+    .design-tool-nav nav a:hover {
+      background: #e9ecef;
+    }
+
+    .design-tool-nav nav a.active {
+      background: linear-gradient(45deg, #ff6b6b, #ffa726);
+      color: white;
+    }
+  `]
+})
+export class PagesDesignCenter {}