s202226701053/E-Cover-app/src/app/generate-option/generate-option.component.ts

import { CommonModule } from '@angular/common';
import { Component, input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IonicModule, NavController } from '@ionic/angular';
import { addIcons } from 'ionicons';
import { arrowBackOutline } from 'ionicons/icons';
import { FormsModule } from '@angular/forms';
addIcons({ 'arrow-back-outline': arrowBackOutline });
@Component({
  selector: 'app-generate-option',
  templateUrl: './generate-option.component.html',
  styleUrls: ['./generate-option.component.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
})
export class GenerateOptionComponent implements OnInit {
  userProfile: UserProfile = {
    gender: '不限制',
    age: '不限制',
    height: '不限制',
    weight: '不限制',
    season: '不限制',
    regStyle: '不限制',
    sceFunction: '不限制',
    dsgPhilosophy: '不限制',
    artStyle: '不限制',
    color: '不限制',
   }
  //构造器
  constructor(private router: Router, private navCtrl: NavController) { }
  //初始化
  ngOnInit() {
  }
  //返回按钮事件
  goBack() {
    this.navCtrl.back();
  }
  //性别选项卡定义变量,第一位为男，第二位为女
  gender: { [key: string]: boolean } = {
    '男': false,
    '女': false
  };
  //年龄选项卡定义变量
  age: { [key: string]: boolean } = {
    '20岁以下': false,
    '20-30岁': false,
    '30-40岁': false,
    '40岁以上': false
  };
  //身高选项卡定义变量
  height: { [key: string]: boolean } = {
    '160cm以下': false,
    '160-170cm': false,
    '170-180cm': false,
    '180-190cm': false,
    '190cm以上': false
  };
  /**
   * @切换选项卡
   * 1.将其他选项卡设置为false
   * 2.将当前选项卡设置为true
   * 3.将true对应的键赋值给userProfile中对应的属性
   */
  toggleActive(option: { [key: string]: boolean }, index: number,name: string) {
    for (const optkey in option) {
      option[optkey] = false;
    }
    const keys = Object.keys(option); // 获取 option 对象中的所有键
    const selectedKey = keys[index]; // 根据索引找到选中的键
    // 将选中的键对应的值设置为 true
    option[selectedKey] = true;
    // 更新 userProfile 中的对应字段
    this.userProfile[name as keyof UserProfile] = selectedKey;
    console.log(this.userProfile);
  }
  /**
   * 获取图片路径
  */
  getImageSrc(option: { [key: string]: boolean }, index: number, String: string): string {
    const keys = Object.keys(option); // 获取 option 对象中的所有键
    const selectedKey = keys[index]; // 根据索引找到选中的键
    const isActive = option[selectedKey];
    return isActive ? '/assets/generate-option-style/' + String + '-isActive-true.png' : '/assets/generate-option-style/' + String + '-isActive-false.png';
  }

  //选项卡结构配置数据
  cards = [
    {
      id: '体重',
      chips: [
        { id: 1, isElected: false, label: '50kg以下' },
        { id: 2, isElected: false, label: '50-55kg' },
        { id: 3, isElected: false, label: '55-60kg' },
        { id: 4, isElected: false, label: '60-70kg' },
        { id: 5, isElected: false, label: '70kg以上' },
      ],
    },
    {
      id: '季节',
      chips: [
        { id: 1, isElected: false, label: '春季' },
        { id: 2, isElected: false, label: '夏季' },
        { id: 3, isElected: false, label: '秋季' },
        { id: 4, isElected: false, label: '冬季' },
      ],
    },
    {
      id: '区域风格',
      chips: [
        { id: 1, isElected: false, label: '中国风' },
        { id: 2, isElected: false, label: '日系' },
        { id: 3, isElected: false, label: '韩系' },
        { id: 4, isElected: false, label: '欧美风' },
        { id: 5, isElected: false, label: '英伦风' },
        { id: 6, isElected: false, label: '法式' },
        { id: 7, isElected: false, label: '波西米亚风' },
      ],
    },
    {
      id: '场景功能',
      chips: [
        { id: 1, isElected: false, label: '通勤风' },
        { id: 2, isElected: false, label: '休闲风' },
        { id: 3, isElected: false, label: '田园风' },
        { id: 4, isElected: false, label: '校园风' },
        { id: 5, isElected: false, label: 'Party风' },
        { id: 6, isElected: false, label: '约会装' },
        { id: 7, isElected: false, label: '度假风' },
      ],
    },
    {
      id: '设计理念',
      chips: [
        { id: 1, isElected: false, label: '新中式' },
        { id: 2, isElected: false, label: '淑女风' },
        { id: 3, isElected: false, label: '名媛风' },
        { id: 4, isElected: false, label: '瑞丽风' },
        { id: 5, isElected: false, label: '简约风' },
        { id: 6, isElected: false, label: '极简风' },
        { id: 7, isElected: false, label: '中性风' },
        { id: 8, isElected: false, label: '性冷淡风' },
        { id: 9, isElected: false, label: '民族风' },
        { id: 10, isElected: false, label: '戏剧风' },
        { id: 11, isElected: false, label: '复古风' },
        { id: 12, isElected: false, label: 'Y2K' },
        { id: 13, isElected: false, label: '嘻哈风' },
        { id: 14, isElected: false, label: '朋克风' },
        { id: 15, isElected: false, label: '嬉皮风' },
        { id: 16, isElected: false, label: '甜酷风' },
      ],
    },
    {
      id: '艺术风格',
      chips: [
        { id: 1, isElected: false, label: '拜占庭艺术' },
        { id: 2, isElected: false, label: '哥特风格' },
        { id: 3, isElected: false, label: '浪漫主义' },
        { id: 4, isElected: false, label: '巴洛克风格' },
        { id: 5, isElected: false, label: '洛可可风格' },
        { id: 6, isElected: false, label: '洛丽塔风格' },
        { id: 7, isElected: false, label: '维多利亚风' },
        { id: 8, isElected: false, label: '欧普风格' },
        { id: 9, isElected: false, label: '未来主义' },
        { id: 10, isElected: false, label: '极简主义' },
        { id: 11, isElected: false, label: '新古典主义' },
      ],
    },
    {
      id: '色彩搭配',
      chips: [
        { id: 1, isElected: false, label: '多巴胺穿搭' },
        { id: 2, isElected: false, label: '美拉德穿搭' },
      ],
    },
  ];


  //补充说明
  styleDesc: string = '';
  //用户提示词
  userPrompt: string = '';

  //点击选项卡事件
  toggleChip(cardId: string, chipId: number): void {
    this.cards.forEach((card) => {
      if (card.id === cardId) {
        card.chips.forEach((chip) => {
          chip.isElected = chip.id === chipId; // 当前点击的 chip 设为 active，其他设为 false
        });

        switch (card.id) {
          case '体重':
            this.userProfile.weight = card.chips[chipId - 1].label;
            break;
          case '季节':
            this.userProfile.season = card.chips[chipId - 1].label;
            break;
          case '区域风格':
            this.userProfile.regStyle = card.chips[chipId - 1].label;
            break;
          case '场景功能':
            this.userProfile.sceFunction = card.chips[chipId - 1].label;
            break;
          case '设计理念':
            this.userProfile.dsgPhilosophy = card.chips[chipId - 1].label;
            break;
          case '艺术风格':
            this.userProfile.artStyle = card.chips[chipId - 1].label;
            break;
          case '色彩搭配':
            this.userProfile.color = card.chips[chipId - 1].label;
            break;
        }
      }
    })
  };

  //生成传递提示词事件
  sendMsg() {
    this.userPrompt = "请生成一个穿搭照片绘画提示词：模板如下：\n" +
      "穿搭主题：夏季通勤风格\n" +
      "性别：男性\n" +
      "体重：70kg\n" +
      "年龄：约40-45岁\n" +
      "整体风格：简约、舒适、专业\n" +
      "上装：\n" +
      "衬衫：选择一款轻薄透气的短袖衬衫，颜色可以是浅蓝色或淡灰色，搭配细条纹或小格纹图案，以增加层次感。衬衫的剪裁要稍微宽松，以便于活动，适合办公室环境。\n" +
      "外套（可选）：如果需要在空调环境中，搭配一件轻便的深色西装外套，面料应为透气的棉麻混纺，能够增添正式感。\n" +
      "下装：\n" +
      "裤子：选择一条修身但不紧身的深色休闲裤（如海军蓝或深灰色），采用轻便的面料，保持通勤的舒适性。裤子长度适中，裤脚可微微收口，展现干练的形象。\n" +
      "鞋子：\n" +
      "鞋款：搭配一双经典的休闲皮鞋或轻便的商务休闲鞋，颜色可以选择黑色或深棕色，鞋面光滑，适合正式场合，同时也提供舒适的步行体验。\n" +
      "配饰：" +
      "腰带：搭配一条与鞋子颜色一致的皮质腰带，简约设计，增加整体协调感。\n" +
      "手表：佩戴一款简约风格的手表，金属表带或皮表带均可，展现成熟稳重的气质。\n" +
      "公文包：选择一款深色的公文包，材质为皮革或优质帆布，既实用又具有商务气息。\n" +
      "场景功能：适合在办公室、商务会议、午餐约会等场合穿着，整体搭配既显得专业又不失时尚感，适合夏季通勤的需求。\n" +
      "以上模板仅供参考，可以写的更详细一些，但不要过于繁琐和冗长。\n" +
      "以下内容为用户需求:\n" +
      "性别：" + this.userProfile.gender + "\n" +
      "年龄：" + this.userProfile.age + "\n" +
      "身高：" + this.userProfile.height + "\n" +
      "体重：" + this.userProfile.weight + "\n" +
      "季节：" + this.userProfile.season + "\n" +
      "区域风格：" + this.userProfile.regStyle + "\n" +
      "场景功能：" + this.userProfile.sceFunction + "\n" +
      "设计理念：" + this.userProfile.dsgPhilosophy + "\n" +
      "艺术风格：" + this.userProfile.artStyle + "\n" +
      "色彩搭配：" + this.userProfile.color + "\n" +
      "补充说明：" + this.styleDesc + "\n";
    console.log(this.userPrompt)
  }

  goChatPanel() {
    this.router.navigate(['/chatPanel'], {
      queryParams: { userPrompt: this.userPrompt }
    });
  }
  onHelperTextClick() {
    // 处理点击事件的逻辑，比如打开一个对话框或执行其他操作
    alert('你点击了帮助文本！');
  }
  sendMsgAndGoGenerateResult() {
    this.sendMsg();
    //this.goChatPanel();
  }
}

type UserProfile = {
  gender: string;
  age: string;
  height: string;
  weight: string;
  season: string;
  regStyle: string;
  sceFunction: string;
  dsgPhilosophy: string;
  artStyle: string;
  color: string;
};