feat:new

fashion-app/src/app/tab2/tab2.page.html

@@ -31,4 +31,32 @@
     <h3>{{perfer}}</h3>
   </ion-item>
 
+  <!-- 用户登录状态 -->
+  <ion-card>
+    <!-- 未登录 -->
+     @if(!currentUser?.id){
+       <ion-card-header>
+         <ion-card-title>请登录</ion-card-title>
+         <ion-card-subtitle>暂无信息</ion-card-subtitle>
+        </ion-card-header>
+      }
+        <!-- 已登录 -->
+     @if(currentUser?.id){
+      <ion-card-header>
+        <ion-card-title>{{currentUser?.get("name")}} </ion-card-title>
+        
+      </ion-card-header>
+      }
+      <ion-card-content>
+      @if(!currentUser?.id){
+        <ion-button expand="block" (click)="signup()">注册</ion-button>
+        <ion-button expand="block" (click)="login()">登录</ion-button>
+      }
+     @if(currentUser?.id){
+      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
+      <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
+    }
+    </ion-card-content>
+  </ion-card>
+
 </ion-content>

fashion-app/src/app/tab2/tab2.page.ts

@@ -1,11 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCardContent, IonCardSubtitle, IonCardTitle, IonCardHeader, IonCard } from '@ionic/angular/standalone';
 import { IonTextarea, IonButton } from "@ionic/angular/standalone";
 import { DalleOptions, ImagineWork } from 'fmode-ng';
 // 引用设计的对象类和查询类
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { RecommendationService } from 'src/lib/recommend';
+import { CloudUser } from 'src/lib/ncloud';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
+import { ModalController } from '@ionic/angular/standalone';
+
 
 @Component({
   selector: 'app-tab2', 
@@ -13,9 +17,9 @@ import { RecommendationService } from 'src/lib/recommend';
   styleUrls: ['tab2.page.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, 
-    IonButton,
-    IonTextarea,IonItem,CommonModule
+    IonHeader, IonToolbar, IonTitle, IonContent, IonCard,
+    IonButton,IonCardTitle,IonCardHeader,IonCardHeader,
+    IonTextarea,IonItem,CommonModule,IonCardContent,IonCardSubtitle
   ],
 })
 export class Tab2Page {
@@ -42,13 +46,15 @@ async loadPerferList(){
   imagineWork:ImagineWork|undefined
   images:Array<string> = []
   constructor(
-    private cdRef:ChangeDetectorRef
+    private cdRef:ChangeDetectorRef,
+    private modalCtrl: ModalController
   ){
     // 示例任务，自己生成图片后请存储新的ID
     this.imagineWork = new ImagineWork("lpJGiFwWeA");
     this.imagineWork.fetchTask().then(work=>{
       this.images = this.imagineWork?.images || [];
     })
+    this.currentUser = new CloudUser();
   }
 
   async createImage(){
@@ -63,4 +69,30 @@ async loadPerferList(){
     })
   }
 
+
+
+  currentUser:CloudUser|undefined
+ 
+  async login(){
+    //弹窗登录
+    let user=await openUserLoginModal(this.modalCtrl);
+    if(user?.id){
+      this.currentUser = user;
+    }
+
+  }
+  async signup(){
+    //弹窗注册
+    let user=await openUserLoginModal(this.modalCtrl,"signup");
+    if(user?.id){
+      this.currentUser = user;
+    }
+  }
+  logout(){
+    this.currentUser?.logout();
+  }
+  editUser(){
+
+  }
+
 }

fashion-app/src/app/tab3/tab3.page.ts

@@ -10,6 +10,8 @@ import { DalleOptions, ImagineWork } from 'fmode-ng';
 import { PageAiChatComponent } from '../page-ai-chat/page-ai-chat.component';
 import { PageEvaluateComponent } from '../page-evaluate/page-evaluate.component';
 import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
+import { CloudUser } from 'src/lib/ncloud';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 
 
 
@@ -60,6 +62,15 @@ export class Tab3Page {
     this.selectedGender = gender; // 更新选中的性别
   }
   async sendMessage(){
+    //如果未登录弹出登录框
+    let currentUser=new CloudUser()
+    if(!currentUser.id){
+      let user=await openUserLoginModal(this.modalCtrl)
+      if(!user?.id) return; // 未登录则返回
+
+
+    }
+
     // 如果正在生成，弹出警告框并返回
     if (this.isGenerating) {
       const alert = await this.alertController.create({

fashion-app/src/lib/ncloud.ts

@@ -211,4 +211,131 @@ export class CloudQuery {
             return existsObject;
         }
     }
+// CloudUser.ts
+export class CloudUser extends CloudObject {
+    constructor() {
+        super("_User"); // 假设用户类在Parse中是"_User"
+        // 读取用户缓存信息
+        let userCacheStr = localStorage.getItem("NCloud/ylj/User")
+        if(userCacheStr){
+            let userData = JSON.parse(userCacheStr)
+            // 设置用户信息
+            this.id = userData?.objectId;
+            this.sessionToken = userData?.sessionToken;
+            this.data = userData; // 保存用户数据
+        }
+    }
+
+    sessionToken:string|null = ""
+    /** 获取当前用户信息 */
+    async current() {
+        if (!this.sessionToken) {
+            console.error("用户未登录");
+            return null;
+        }
+        return this;
+        /*const response = await fetch(`http://1.94.237.145:1337/parse/users/me`, {
+            headers: {
+                "x-parse-application-id": "hcx",
+                "x-parse-session-token": this.sessionToken // 使用sessionToken进行身份验证
+            },
+            method: "GET"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+        return result;*/
+    }
 
+    /** 登录 */
+    async login(username: string, password: string):Promise<CloudUser|null> {
+        const response = await fetch(`http://1.94.237.145:1339/parse/login`, {
+            headers: {
+                "x-parse-application-id": "ylj",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ username, password }),
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+        
+        // 设置用户信息
+        this.id = result?.objectId;
+        this.sessionToken = result?.sessionToken;
+        this.data = result; // 保存用户数据
+        // 缓存用户信息
+        console.log(result)
+        localStorage.setItem("NCloud/ylj/User",JSON.stringify(result))
+        return this;
+    }
+
+    /** 登出 */
+    async logout() {
+        if (!this.sessionToken) {
+            console.error("用户未登录");
+            return;
+        }
+
+        const response = await fetch(`http://1.94.237.145:1339/parse/logout`, {
+            headers: {
+                "x-parse-application-id": "ylj",
+                "x-parse-session-token": this.sessionToken
+            },
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return false;
+        }
+
+        // 清除用户信息
+        localStorage.removeItem("NCloud/ylj/User")
+        this.id = null;
+        this.sessionToken = null;
+        this.data = {};
+        return true;
+    }
+
+    /** 注册 */
+    async signUp(username: string, password: string, additionalData: Record<string, any> = {}) {
+        const userData = {
+            username,
+            password,
+            ...additionalData // 合并额外的用户数据
+        };
+
+        const response = await fetch(`http://1.94.237.145:1339/parse/users`, {
+            headers: {
+                "x-parse-application-id": "ylj",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(userData),
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+
+        // 设置用户信息
+        // 缓存用户信息
+        console.log(result)
+        localStorage.setItem("NCloud/ylj/User",JSON.stringify(result))
+        this.id = result?.objectId;
+        this.sessionToken = result?.sessionToken;
+        this.data = result; // 保存用户数据
+        return this;
+    }
+}

fashion-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -0,0 +1,3 @@
+<p>
+  modal-user-edit works!
+</p>

fashion-app/src/lib/user/modal-user-edit/modal-user-edit.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ModalUserEditComponent } from './modal-user-edit.component';
+
+describe('ModalUserEditComponent', () => {
+  let component: ModalUserEditComponent;
+  let fixture: ComponentFixture<ModalUserEditComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ModalUserEditComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalUserEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

fashion-app/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-modal-user-edit',
+  templateUrl: './modal-user-edit.component.html',
+  styleUrls: ['./modal-user-edit.component.scss'],
+  standalone: true,
+})
+export class ModalUserEditComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

fashion-app/src/lib/user/modal-user-login/modal-user-login.component.html

@@ -0,0 +1,40 @@
+<!-- 用户登录状态 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>
+      <ion-segment [value]="type" (ionChange)="typeChange($event)">
+        <ion-segment-button value="login">
+          <ion-label>登录</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="signup">
+          <ion-label>注册</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-card-title>
+    <ion-card-subtitle>请输入账号密码</ion-card-subtitle>
+  </ion-card-header>
+
+  <ion-card-content>
+    <ion-item>
+      <ion-input [value]="username" (ionChange)="usernameChange($event)" label="账号" placeholder="请输入"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input [value]="password" (ionChange)="passwordChange($event)" label="密码" type="password"
+        value="password"></ion-input>
+    </ion-item>
+    @if(type == 'signup'){
+    <ion-item>
+      <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码2" type="password"
+        value="password2"></ion-input>
+    </ion-item>
+    }
+    @if(type == 'login'){
+    <ion-button expand="block" (click)="login()">登录</ion-button>
+    }
+    @if(type == 'signup'){
+    <ion-button expand="block" (click)="signup()">注册</ion-button>
+    }
+
+
+  </ion-card-content>
+</ion-card>

fashion-app/src/lib/user/modal-user-login/modal-user-login.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ModalUserLoginComponent } from './modal-user-login.component';
+
+describe('ModalUserLoginComponent', () => {
+  let component: ModalUserLoginComponent;
+  let fixture: ComponentFixture<ModalUserLoginComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ModalUserLoginComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalUserLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

fashion-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-modal-user-login',
+  templateUrl: './modal-user-login.component.html',
+  styleUrls: ['./modal-user-login.component.scss'],
+  standalone: true,
+  imports: [IonicModule],
+})
+export class ModalUserLoginComponent implements OnInit {
+  @Input()
+  type: "login" | "signup" = "login";
+  typeChange(ev: any) {
+    this.type = ev?.detail?.value || ev?.value || 'login';
+  }
+  username: string = "";
+  usernameChange(ev: any) {
+    this.username = ev?.detail?.value;
+  }
+  password: string = "";
+  passwordChange(ev: any) {
+    this.password = ev?.detail?.value;
+  }
+  password2: string = "";
+  password2Change(ev: any) {
+    this.password2 = ev?.detail?.value;
+  }
+  constructor(private modalCtrl: ModalController) { }
+
+  ngOnInit() { }
+
+  async login() {
+    if (!this.username || !this.password) {
+      console.log("请输入完整")
+      return
+    }
+    let user: any = new CloudUser();
+    user = await user.login(this.username, this.password);
+    if (user?.id) {
+      this.modalCtrl.dismiss(user, "confirm")
+    } else {
+      console.log("登录失败");
+    }
+  }
+
+  async signup() {
+    if (!this.username || !this.password || !this.password2) {
+      console.log("请输入完整")
+      return
+    }
+    if (this.password2 != this.password) {
+      console.log("两次密码不一致")
+      return
+    }
+
+    let user: any = new CloudUser();
+    user = await user.signUp(this.username, this.password);
+    if(user){
+      this.type = "login";
+      console.log("注册成功，请登录");
+    }
+
+  }
+}
+
+export async function openUserLoginModal(modalCtrl: ModalController,type:"login"|"signup"="login"): Promise<CloudUser | null> {
+  const modal = await modalCtrl.create({
+    component: ModalUserLoginComponent,
+    componentProps: { type:type },
+    breakpoints: [0.5, 0.7],
+    initialBreakpoint: 0.5
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null;
+}