feat: 添加AI助手功能及样式，支持消息展示和预设问题

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

@@ -98,4 +98,60 @@
       </div>
     </div>
   </div>
+</div>
+<div class="ai-modal" *ngIf="showAIModal">
+  <div class="ai-modal-content">
+    <div class="ai-modal-header">
+      <div class="ai-icon">
+        <i class="fas fa-robot"></i>
+      </div>
+      <div class="ai-title">AI设计助手</div>
+      <button class="close-btn" (click)="toggleAIModal()">&times;</button>
+    </div>
+    
+    <div class="ai-messages">
+      <div *ngFor="let message of aiMessages; let i = index" class="message" 
+           [class.user-message]="message.isUser" 
+           [class.ai-message]="!message.isUser"
+           [class.trend-message]="message.isTrend">
+        <div *ngIf="message.isLoading" class="loading-dots">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        
+        <div [innerHTML]="message.text"></div>
+        
+        <div *ngIf="message.isTrend" class="trend-actions">
+          <button *ngFor="let trend of trendRecommendations; let j = index" 
+                  class="trend-btn"
+                  (click)="applyTrendRecommendation(j)">
+            应用{{ trend.title }}
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="preset-questions">
+      <div class="preset-title">快捷提问：</div>
+      <div class="preset-buttons">
+        <button *ngFor="let question of presetQuestions" 
+                class="preset-btn"
+                (click)="usePresetQuestion(question.text)">
+          <i [class]="question.icon"></i>
+          {{ question.text }}
+          <span class="preset-desc">{{ question.description }}</span>
+        </button>
+      </div>
+    </div>
+    
+    <div class="ai-input-group">
+      <input type="text" class="ai-input" placeholder="输入您的问题..." 
+             [(ngModel)]="aiInput" [disabled]="isAILoading"
+             (keyup.enter)="sendAiMessage()">
+      <button class="ai-send-btn" (click)="sendAiMessage()" [disabled]="isAILoading">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
 </div>

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

@@ -575,4 +575,151 @@ h2 i {
   .preset-buttons {
     grid-template-columns: 1fr;
   }
+}
+/* 在 SCSS 文件的 AI 助手样式部分进行以下修改 */
+
+/* AI模态框 */
+.ai-modal {
+  /* 保持原有样式不变 */
+}
+
+.ai-modal-content {
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  background: white;
+  border-radius: 25px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
+  animation: modalFadeIn 0.4s ease;
+}
+
+/* 修改消息区域 */
+.ai-messages {
+  flex: 1;
+  min-height: 200px; /* 确保有最小高度 */
+  max-height: 40vh; /* 限制最大高度 */
+  overflow-y: auto;
+  padding: 20px;
+  background: #f9f9f9;
+}
+
+/* 修改预设问题区域 */
+.preset-questions {
+  padding: 15px;
+  background: #f8f9fa;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee; /* 添加底部边框分隔 */
+  max-height: 30vh; /* 限制最大高度 */
+  overflow-y: auto; /* 添加滚动条 */
+}
+
+/* 修改输入框区域 */
+.ai-input-group {
+  display: flex;
+  padding: 15px;
+  background: white;
+  border-top: none; /* 移除顶部边框 */
+  position: relative; /* 确保位置正确 */
+  z-index: 10; /* 确保在顶部显示 */
+}
+
+/* 确保输入框在移动设备上正确显示 */
+.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);
+  box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
+  
+  &:focus {
+    border-color: #3498db;
+  }
+}
+
+/* 响应式调整 - 确保在较小屏幕上所有元素可见 */
+@media (max-width: 768px) {
+  .ai-modal-content {
+    width: 95%;
+    max-height: 85vh;
+  }
+  
+  .ai-messages {
+    min-height: 150px;
+    max-height: 35vh; /* 调整消息区域高度 */
+  }
+  
+  .preset-questions {
+    max-height: 20vh; /* 调整预设问题区域高度 */
+  }
+  
+  .preset-buttons {
+    grid-template-columns: 1fr;
+  }
+  
+  .preset-btn {
+    padding: 10px 12px;
+    font-size: 0.85rem;
+    
+    i {
+      font-size: 1rem;
+      margin-bottom: 5px;
+    }
+  }
+  
+  .preset-desc {
+    font-size: 0.75rem;
+  }
+  
+  .ai-input {
+    padding: 12px 16px;
+    font-size: 0.9rem;
+  }
+  
+  .ai-send-btn {
+    width: 45px;
+    height: 45px;
+  }
+}
+
+/* 针对小屏幕设备的额外调整 */
+@media (max-width: 480px) {
+  .ai-modal-content {
+    max-height: 90vh;
+  }
+  
+  .ai-messages {
+    min-height: 120px;
+    max-height: 30vh;
+    padding: 15px;
+  }
+  
+  .message {
+    padding: 10px 12px;
+    font-size: 0.9rem;
+  }
+  
+  .preset-questions {
+    padding: 10px;
+  }
+  
+  .ai-input-group {
+    padding: 10px;
+  }
+  
+  .ai-float-btn {
+    bottom: 15px;
+    right: 15px;
+    padding: 10px 15px;
+    font-size: 0.85rem;
+    
+    i {
+      font-size: 1rem;
+    }
+  }
 }