|
|
@@ -1,7 +1,23 @@
|
|
|
-import { Component } from '@angular/core';
|
|
|
+// page-design.component.ts
|
|
|
+import { Component, ChangeDetectorRef } from '@angular/core';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { ColorUsage } from '../../../../../lib/ncloud';
|
|
|
+import { TestMessage, TestCompletion } from '../../../../../lib/completion';
|
|
|
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
|
|
+
|
|
|
+// 定义类型
|
|
|
+interface TrendRecommendation {
|
|
|
+ title: string;
|
|
|
+ colors: string[];
|
|
|
+ description: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface PresetQuestion {
|
|
|
+ text: string;
|
|
|
+ description: string;
|
|
|
+ icon: string;
|
|
|
+}
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-page-design',
|
|
|
@@ -11,6 +27,7 @@ import { ColorUsage } from '../../../../../lib/ncloud';
|
|
|
styleUrls: ['./page-design.scss']
|
|
|
})
|
|
|
export class PageDesignComponent {
|
|
|
+ // 原有设计界面的变量（保持不变）
|
|
|
activePart: string = 'hood';
|
|
|
selectedColor: string = '#3498db';
|
|
|
colors: string[] = [
|
|
|
@@ -19,7 +36,6 @@ export class PageDesignComponent {
|
|
|
'#ecf0f1', '#e84393', '#ffeaa7','#ffb6c1',
|
|
|
'#98ff98','#b399d4','#ff7f50','#89cff0',
|
|
|
'#ff9aa2','#40e0d0','#f0e68c','#c8a2c8'
|
|
|
-
|
|
|
];
|
|
|
|
|
|
partColors: { [key: string]: string } = {
|
|
|
@@ -29,13 +45,63 @@ export class PageDesignComponent {
|
|
|
'sleeve-right': '#3498db'
|
|
|
};
|
|
|
|
|
|
- aiMessages: any[] = [
|
|
|
+ colorUsage: ColorUsage = new ColorUsage();
|
|
|
+
|
|
|
+ // 新增的AI助手相关变量
|
|
|
+ aiMessages: { text: string | SafeHtml; isUser: boolean; isLoading?: boolean; isTrend?: boolean }[] = [
|
|
|
{ text: '您好！我是您的羽绒服设计助手。我可以根据您的喜好推荐颜色搭配，或者帮您分析当前设计的流行度。有什么我可以帮您的吗？', isUser: false }
|
|
|
];
|
|
|
aiInput: string = '';
|
|
|
+ showAIModal: boolean = false;
|
|
|
+ isAILoading: boolean = false;
|
|
|
+
|
|
|
+ presetQuestions: PresetQuestion[] = [
|
|
|
+ {
|
|
|
+ text: '推荐一些流行颜色搭配',
|
|
|
+ description: '获取当前最受欢迎的配色方案',
|
|
|
+ icon: 'fas fa-palette'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '分析我的设计流行度',
|
|
|
+ description: '评估当前设计的市场吸引力',
|
|
|
+ icon: 'fas fa-chart-line'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '生成3D预览效果',
|
|
|
+ description: '创建设计的3D可视化预览',
|
|
|
+ icon: 'fas fa-cube'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '提供设计灵感',
|
|
|
+ description: '获取创意设计建议',
|
|
|
+ icon: 'fas fa-lightbulb'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ trendRecommendations: TrendRecommendation[] = [
|
|
|
+ {
|
|
|
+ title: '海洋蓝渐变',
|
|
|
+ colors: ['#89CFF0', '#40E0D0', '#008080'],
|
|
|
+ description: '从浅蓝到深蓝的渐变效果，清新自然'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '日落橙黄',
|
|
|
+ colors: ['#FF7F50', '#FFD700', '#FFA500'],
|
|
|
+ description: '温暖活力的橙黄色系，充满活力'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '森林绿系',
|
|
|
+ colors: ['#98FF98', '#2E8B57', '#006400'],
|
|
|
+ description: '自然森林色调，环保且时尚'
|
|
|
+ }
|
|
|
+ ];
|
|
|
|
|
|
- colorUsage: ColorUsage = new ColorUsage();
|
|
|
+ constructor(
|
|
|
+ private cdr: ChangeDetectorRef,
|
|
|
+ private sanitizer: DomSanitizer
|
|
|
+ ) {}
|
|
|
|
|
|
+ // 原有设计界面的方法（保持不变）
|
|
|
selectPart(part: string) {
|
|
|
this.activePart = part;
|
|
|
}
|
|
|
@@ -64,32 +130,9 @@ export class PageDesignComponent {
|
|
|
}
|
|
|
|
|
|
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);
|
|
|
@@ -104,8 +147,112 @@ export class PageDesignComponent {
|
|
|
(B < 255 ? B < 1 ? 0 : B : 255)
|
|
|
).toString(16).slice(1);
|
|
|
}
|
|
|
- // 新增颜色使用统计
|
|
|
+
|
|
|
getColorUsage(): { [key: string]: number } {
|
|
|
return this.colorUsage.getAll();
|
|
|
-}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 新增的AI助手方法
|
|
|
+ toggleAIModal() {
|
|
|
+ this.showAIModal = !this.showAIModal;
|
|
|
+ if (this.showAIModal) {
|
|
|
+ this.showTrendRecommendations();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ showTrendRecommendations() {
|
|
|
+ if (this.aiMessages.length > 1) return;
|
|
|
+
|
|
|
+ let trendMessage = '根据当前流行趋势，我为您推荐以下设计方向：\n\n';
|
|
|
+
|
|
|
+ this.trendRecommendations.forEach((trend: TrendRecommendation, index: number) => {
|
|
|
+ trendMessage += `${index + 1}. ${trend.title}\n`;
|
|
|
+ trendMessage += ` ${trend.description}\n`;
|
|
|
+ trendMessage += ` 推荐颜色: `;
|
|
|
+
|
|
|
+ trend.colors.forEach((color: string) => {
|
|
|
+ trendMessage += `<span class="color-dot" style="background-color:${color}"></span> `;
|
|
|
+ });
|
|
|
+
|
|
|
+ trendMessage += '\n\n';
|
|
|
+ });
|
|
|
+
|
|
|
+ trendMessage += '您可以直接选择应用这些推荐，或者告诉我您的具体需求！';
|
|
|
+
|
|
|
+ this.aiMessages.push({
|
|
|
+ text: this.sanitizer.bypassSecurityTrustHtml(trendMessage),
|
|
|
+ isUser: false,
|
|
|
+ isTrend: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ applyTrendRecommendation(index: number) {
|
|
|
+ if (index < 0 || index >= this.trendRecommendations.length) return;
|
|
|
+
|
|
|
+ const trend = this.trendRecommendations[index];
|
|
|
+
|
|
|
+ // 应用推荐颜色
|
|
|
+ this.partColors['hood'] = trend.colors[0];
|
|
|
+ this.partColors['body'] = trend.colors[1];
|
|
|
+ this.partColors['sleeve-left'] = trend.colors[0];
|
|
|
+ this.partColors['sleeve-right'] = trend.colors[0];
|
|
|
+
|
|
|
+ // 更新选中颜色
|
|
|
+ this.selectedColor = trend.colors[0];
|
|
|
+
|
|
|
+ this.aiMessages.push({
|
|
|
+ text: `已应用推荐：${trend.title}`,
|
|
|
+ isUser: true
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.aiMessages.push({
|
|
|
+ text: `太棒了！您已成功应用了${trend.title}设计。这个方案在当前非常流行，预计会受到年轻群体的喜爱。您想进一步调整还是保存设计？`,
|
|
|
+ isUser: false
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+
|
|
|
+ async sendAiMessage() {
|
|
|
+ const text = this.aiInput.trim();
|
|
|
+ if (!text) return;
|
|
|
+
|
|
|
+ this.aiMessages.push({ text, isUser: true });
|
|
|
+ this.aiInput = '';
|
|
|
+
|
|
|
+ const aiReplyIndex = this.aiMessages.length;
|
|
|
+ this.aiMessages.push({ text: '思考中...', isUser: false, isLoading: true });
|
|
|
+
|
|
|
+ this.isAILoading = true;
|
|
|
+ this.cdr.detectChanges();
|
|
|
+
|
|
|
+ try {
|
|
|
+ const messages: TestMessage[] = this.aiMessages
|
|
|
+ .filter(msg => !msg.isLoading && typeof msg.text === 'string')
|
|
|
+ .map(msg => ({
|
|
|
+ role: msg.isUser ? 'user' : 'assistant',
|
|
|
+ content: msg.text as string
|
|
|
+ }));
|
|
|
+
|
|
|
+ const completion = new TestCompletion(messages);
|
|
|
+
|
|
|
+ await completion.sendMessage(null, (content) => {
|
|
|
+ this.aiMessages[aiReplyIndex].text = content;
|
|
|
+ this.cdr.detectChanges();
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('AI请求失败:', error);
|
|
|
+ this.aiMessages[aiReplyIndex].text = '抱歉，AI助手暂时无法回答，请稍后再试。';
|
|
|
+ } finally {
|
|
|
+ this.aiMessages[aiReplyIndex].isLoading = false;
|
|
|
+ this.isAILoading = false;
|
|
|
+ this.cdr.detectChanges();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ usePresetQuestion(question: string) {
|
|
|
+ this.aiInput = question;
|
|
|
+ this.sendAiMessage();
|
|
|
+ }
|
|
|
}
|
0235625