zc

app/myapp/src/lib/user/page-mine/page-mine.component.html

@@ -6,57 +6,62 @@
   </ion-header>
 
   <div class="profile-section">
-    @if(currentUser?.id){
     <!-- 已登录状态 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-avatar class="profile-avatar">
-          <img [src]="currentUser?.get('avatar') || 'assets/icon/avatar-default.png'" alt="用户头像" />
-        </ion-avatar>
-        <ion-card-title class="ion-text-center">
-          {{currentUser?.get("username")}}
-        </ion-card-title>
-        <ion-card-subtitle class="ion-text-center">
-          {{currentUser?.get('realname') || '未设置姓名'}}
-        </ion-card-subtitle>
-      </ion-card-header>
+    <ng-container *ngIf="currentUser?.id; else notLoggedIn">
+      <ion-card>
+        <ion-card-header>
+          <ion-avatar class="profile-avatar">
+            <img [src]="currentUser?.get('avatar') || 'assets/icon/avatar-default.png'" alt="用户头像" />
+          </ion-avatar>
+          <ion-card-title class="ion-text-center">
+            {{currentUser?.get("username")}}
+          </ion-card-title>
+          <ion-card-subtitle class="ion-text-center">
+            {{currentUser?.get('realname') || '未设置姓名'}}
+          </ion-card-subtitle>
+        </ion-card-header>
 
-      <ion-card-content>
-        <ion-list lines="none">
-          <ion-item>
-            <ion-icon name="person-outline" slot="start"></ion-icon>
-            <ion-label>性别</ion-label>
-            <ion-note slot="end">{{currentUser?.get('gender') || '未设置'}}</ion-note>
-          </ion-item>
-          <ion-item>
-            <ion-icon name="calendar-outline" slot="start"></ion-icon>
-            <ion-label>年龄</ion-label>
-            <ion-note slot="end">{{currentUser?.get('age') || '未设置'}}</ion-note>
-          </ion-item>
-        </ion-list>
+        <ion-card-content>
+          <ion-list lines="none">
+            <ion-item>
+              <ion-icon name="person-outline" slot="start"></ion-icon>
+              <ion-label>性别</ion-label>
+              <ion-note slot="end">{{currentUser?.get('gender') || '未设置'}}</ion-note>
+            </ion-item>
+            <ion-item>
+              <ion-icon name="calendar-outline" slot="start"></ion-icon>
+              <ion-label>年龄</ion-label>
+              <ion-note slot="end">{{currentUser?.get('age') || '未设置'}}</ion-note>
+            </ion-item>
+          </ion-list>
 
-        <ion-button expand="block" (click)="edit()" color="primary">
-          <ion-icon name="create-outline" slot="start"></ion-icon>
-          编辑资料
+          <ion-button expand="block" (click)="edit()" color="primary">
+            <ion-icon name="create-outline" slot="start"></ion-icon>
+            编辑资料
+          </ion-button>
+          <ion-button expand="block" (click)="logout()" color="danger" fill="outline">
+            <ion-icon name="log-out-outline" slot="start"></ion-icon>
+            登出
+          </ion-button>
+        </ion-card-content>
+      </ion-card>
+    </ng-container>
+
+    <!-- 未登录状态 -->
+    <ng-template #notLoggedIn>
+      <div class="login-prompt">
+        <ion-icon name="person-circle-outline" class="login-icon"></ion-icon>
+        <h2>您还未登录</h2>
+        <p>登录后可以保存您的个人资料</p>
+        <ion-button expand="block" (click)="login()" color="primary">
+          <ion-icon name="log-in-outline" slot="start"></ion-icon>
+          登录
         </ion-button>
-        <ion-button expand="block" (click)="logout()" color="danger" fill="outline">
-          <ion-icon name="log-out-outline" slot="start"></ion-icon>
-          登出
+        <ion-button expand="block" (click)="signup()" color="secondary">
+          <ion-icon name="person-add-outline" slot="start"></ion-icon>
+          注册
         </ion-button>
-      </ion-card-content>
-    </ion-card>
-    }
-    @if(!currentUser?.id){
-    <!-- 未登录状态 -->
-    <div class="login-prompt">
-      <ion-icon name="person-circle-outline" class="login-icon"></ion-icon>
-      <h2>您还未登录</h2>
-      <p>登录后可以保存您的个人资料</p>
-      <ion-button expand="block" (click)="login()" color="primary">
-        <ion-icon name="log-in-outline" slot="start"></ion-icon>
-        登录用户 cccac 123
-      </ion-button>
-    </div>
-    }
+      </div>
+    </ng-template>
   </div>
 </ion-content>

app/myapp/src/lib/user/page-mine/page-mine.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-
+import { CommonModule } from '@angular/common';
 import { ModalController } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
 import { ModalUserEditComponent } from './modal-user-edit/modal-user-edit.component';
@@ -21,6 +21,7 @@ import {
   standalone: true,
   providers: [ModalController],
   imports: [
+    CommonModule,
     IonContent, IonHeader, IonTitle, IonToolbar, IonCard,
     IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent,
     IonButton, IonAvatar, IonList, IonItem, IonLabel, IonNote, IonIcon
@@ -37,7 +38,18 @@ export class PageMineComponent {
     });
   }
 
-
+  async signup() {
+    const username = window.prompt('请输入用户名', 'ff');
+    if (!username) return;
+    const password = window.prompt('请输入密码', '1234');
+    if (!password) return;
+    const user = new CloudUser();
+    // 假设 signUp 会存储到你的用户表
+    const newUser = await user.signUp(username, password);
+    if (newUser?.id) {
+      this.currentUser = newUser;
+    }
+  }
   async edit() {
     const modal = await this.modalCtrl.create({
       component: ModalUserEditComponent,
@@ -46,8 +58,12 @@ export class PageMineComponent {
   }
 
   async login() {
+    const username = window.prompt('请输入用户名', 'ff');
+    if (!username) return;
+    const password = window.prompt('请输入密码', '1234');
+    if (!password) return;
     const user = new CloudUser();
-    const loggedInUser = await user.login("cccac", "123");
+    const loggedInUser = await user.login(username, password);
     if (loggedInUser?.id) {
       this.currentUser = loggedInUser;
     }