feat:"王铮最后一次"

poem-life-app/src/app/login/login.component.html

@@ -1,48 +0,0 @@
-<!-- src/app/login/login.component.html -->
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
-    </ion-buttons>
-    <ion-title>登录注册</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<div class="ion-padding">
-
-  <div id="login_card">
-    <h1>诗创坊</h1>
-    @if(!currentUser?.id){
-      <div class=".custom-button" (click)="login()">
-          <h4>登录</h4>
-        </div>
-        <div class=".custom-button" (click)="signup()">
-          <h4>注册</h4>
-        </div>
-    }
-    @if(currentUser?.id){
-      <div class="lower">您已登录</div>
-    }
-    <div class=".custom-button" (click)="logout()">
-      <h4>登出</h4>
-    </div>
-  </div>
-
-  
-
-  <!-- 登录表单 -->
-  <form *ngIf="showLoginForm" (ngSubmit)="onSubmit()">
-    <ion-item lines="none">
-      <ion-label position="floating" color="primary">请输入用户名</ion-label>
-      <ion-input [(ngModel)]="username" name="username" type="text"></ion-input>
-    </ion-item>
-    
-    <ion-item lines="none">
-      <ion-label position="floating" color="primary">请输入密码</ion-label>
-      <ion-input [(ngModel)]="password" name="password" type="password"></ion-input>
-    </ion-item>
-    
-    <ion-button expand="block" shape="round" type="submit" class="login-button">登录</ion-button>
-  </form>
-
-</div>

poem-life-app/src/app/login/login.component.scss

@@ -1,228 +0,0 @@
-/* src/app/login/login.component.scss */
-.bg-color {
-    --background: #f4f4f4;  /* 设置背景颜色 */
-  }
-  
-  .top-list {
-    margin-top: 10px;
-  }
-  
-  ion-item {
-    --inner-padding-end: 10px;
-  }
-  
-  ion-avatar {
-    width: 40px;
-    height: 40px;
-  }
-  
-  ion-label h1 {
-    font-size: 60px;
-    font-weight: bold;
-  }
-  
-  ion-label p {
-    font-size: 14px;
-    color: #888;
-  }
-  
-  ion-button {
-    margin-top: 20px;
-  }
-  
-  .box {
-    width: 100%;
-    margin: auto;
-  }
-  
-  .top {
-    position: relative;
-    padding-top: 30px; /* 使用 px 替代 rpx */
-    width: 100%;
-    height: 300px; /* 使用 px 替代 rpx */
-  }
-  
-  .top:after {
-    width: 140%;
-    height: 300px;
-    position: absolute;
-    left: -20%;
-    top: 0;
-    z-index: -1;
-    content: '';
-    border-radius: 0 0 60% 60%;
-    background-color: #426db5;
-  }
-  
-  .region {
-    margin: auto;
-    width: 450px;
-  }
-  
-  .upper {
-    display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
-    justify-content: center; /* 在主轴上居中对齐子元素 */
-    align-items: center; /* 在交叉轴上居中对齐子元素 */
-  }
-  
-  .img-box {
-    width: 120px;
-    height: 120px; 
-    border-radius: 50%; /* 设置边框半径为 50%，使盒子变为圆形 */
-    overflow: hidden; /* 确保任何超出部分都被隐藏 */
-  }
-  
-  .img-box img {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .info {
-    padding-left: 30px; /* 设置左侧内边距为 30 像素 */
-    line-height: 55px; /* 设置行高为 55 像素，增加文本行之间的垂直间距 */
-    flex-direction: column; /* 将子元素排列为纵向（列）方向 */
-  }
-  
-  .name {
-    font-size: 20px; /* 设置字体大小为 40 像素 */
-    letter-spacing: 5px; /* 设置字母间距为 5 像素 */
-    color: #FFFFFF; /* 设置字体颜色为白色 */
-  }
-  
-  .no {
-    font-size: 18px; /* 设置字体大小为 24 像素 */
-    letter-spacing: 2px; /* 设置字母间距为 2 像素 */
-    color: #b3dffe; /* 设置字体颜色为淡蓝色 */
-  }
-  
-  .lower {
-    display: flex;
-    justify-content: center;
-    line-height: 100px; 
-    font-size: 20px; 
-    color: #6d0cec;
-  }
-  
-  .lower1 {
-    width: 200px;
-    height: 10px;
-    display: flex;
-    margin: auto;
-    flex-direction: column; /* 设置为垂直方向 */
-  }
-  
-  .custom-button {
-    color: #ffffff; /* 按钮文字颜色 */
-    border: none;
-    font-weight: bold;
-    padding: 15px 20px; /* 添加内边距 */
-    border-radius: 10px; /* 圆角边框 */
-    text-align: center; /* 文本居中 */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 透明阴影 */
-  }
-  
-  .count {
-    display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
-    margin: auto;
-    width: 200px; /* 设置元素的宽度为 350 像素 */
-    line-height: 16px; /* 设置行高为 80 像素，增加文本行之间的垂直间距 */
-    border-radius: 50px; /* 设置边框半径为 50 像素，使元素的角变圆润 */
-    background-color: #426db5;
-  }
-  
-  .title {
-    width: auto;
-    display: flex; /* 将元素设置为弹性盒布局，使子元素能够灵活排列 */
-    justify-content: center; /* 在主轴上居中对齐子元素 */
-    align-items: center; /* 在交叉轴上居中对齐子元素 */
-  }
-  
-  .title span {
-    font-size: 16px; 
-    padding-left: 15px; 
-    color: #b3dffe;
-  }
-  
-  .icon-container {
-    margin-top: 10px;
-    display: flex; /* 使用弹性盒布局 */
-    justify-content: space-around; /* 在主轴上均匀分配空间 */
-  }
-  
-  .icon-item {
-    text-align: center; /* 使文本居中对齐 */
-  }
-  
-  .icon-item ion-icon {
-    font-size: 25px; /* 设置图标大小 */
-    margin-bottom: 10px; /* 图标与文本之间的间距 */
-  }
-  
-  .icon-item span {
-    display: block; /* 将文本设置为块级元素，以便于控制布局 */
-    font-size: 16px; /* 设置文本大小 */
-    color: #333; /* 设置文本颜色 */
-  }
-  
-  #login_card {
-    width: 90%;
-    max-width: 400px;
-    background-color: rgba(255, 255, 255, 0.8); /* 透明背景 */
-    margin: auto;
-    margin-top: 20%;
-    text-align: center;
-    border-radius: 10px;
-    padding: 50px 50px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
-  
-    h2 {
-      color: #330867;
-      margin-bottom: 30px;
-    }
-  
-    .auth-button {
-      margin-bottom: 20px;
-      background-image: linear-gradient(to right, #30cfd0, #330867); /* 渐变颜色 */
-      border: none;
-      color: white;
-      font-weight: bold;
-  
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-  
-  .login-button {
-    margin-top: 20px;
-    background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 彩色渐变 */
-    border: none;
-    color: white;
-    font-weight: bold;
-    padding: 10px 20px; /* 添加一些内边距 */
-    border-radius: 5px; /* 圆角边框 */
-    cursor: pointer; /* 改变鼠标悬停时的光标样式 */
-
-    &:hover {
-        opacity: 0.2;
-    }
-}
-  
-.ion-padding {
-  background-image: url('../../assets/image/06/login.jpg'); /* 确保路径正确 */
-  background-size: cover; /* 背景图覆盖整个区域 */
-  background-position: center; /* 背景图居中 */
-  background-repeat: no-repeat; /* 确保背景图不重复 */
-  position: fixed; /* 固定背景图，使其覆盖整个视口 */
-  top: 0;
-  left: 0;
-  width: 100%; /* 使用视口宽度 */
-  height: 100vh; /* 使用视口高度 */
-  z-index: -1; /* 将背景图置于最底层 */
-  image-rendering: pixelated; /* 其他浏览器 */
-  }
-  
-  
-  
-  
-  

poem-life-app/src/app/login/login.component.spec.ts

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

poem-life-app/src/app/login/login.component.ts

@@ -1,83 +0,0 @@
-// src/app/login/login.component.ts
-import { Component } from '@angular/core';
-import { Router } from '@angular/router'; // 导入 Router 模块
-import { IonicModule, IonContent, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonButton, IonIcon, IonLabel, IonInput, IonItem,  } from '@ionic/angular';
-import { FormsModule } from '@angular/forms'; // 导入 FormsModule
-import { CloudUser } from 'src/lib/ncloud';
-import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
-import { addIcons } from 'ionicons';
-import { folderOutline, timeOutline, starOutline, heartOutline, chevronForwardOutline, personOutline, shieldOutline, callOutline, lockClosedOutline } from 'ionicons/icons';
-import { ModalController } from '@ionic/angular/standalone';
-import { AlertController } from '@ionic/angular/standalone'; // 导入所需的模块
-
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss'],
-  standalone: true,
-  imports: [IonicModule, FormsModule], // 确保导入 FormsModule
-})
-export class LoginComponent {
-  username: string = '';
-  password: string = '';
-  currentUser: CloudUser | undefined;
-  isRegistered: boolean = false;
-  showLoginForm: boolean = false;
-
-  constructor(
-    private router: Router,
-    private alertController: AlertController,
-    private modalCtrl: ModalController
-  ) {
-    addIcons({ folderOutline, timeOutline, starOutline, heartOutline, chevronForwardOutline, personOutline, shieldOutline, callOutline, lockClosedOutline });
-    this.currentUser = new CloudUser();
-  }
-
-  async onSubmit() {
-    // 处理登录逻辑
-    console.log('Username:', this.username);
-    console.log('Password:', this.password);
-
-    // 示例：成功登录后导航到主页或其他页面
-    if (this.username && this.password) {
-      // 这里可以添加实际的登录验证逻辑
-      this.currentUser = new CloudUser(); // 假设登录成功
-      this.router.navigate(['/tab3']); // 假设主页面是 tabs/tab3
-    }
-  }
-
-  async login() {
-    // 弹出登录窗口
-    let user = await openUserLoginModal(this.modalCtrl);
-    if (user?.id) {
-      this.currentUser = user;
-      this.showLoginForm = false; // 关闭登录表单
-      this.router.navigate(['/tabs/tab3']);
-    }
-  }
-
-  async signup() {
-    // 弹出注册窗口
-    let user = await openUserLoginModal(this.modalCtrl, "signup");
-    if (user?.id) {
-      this.isRegistered = true; // 设置注册状态为已注册
-      this.currentUser = user;
-      this.showLoginForm = false; // 关闭登录表单
-    }
-  }
-
-  logout() {
-    this.currentUser?.logout();
-    this.isRegistered = false; // 设置注册状态为未注册
-    this.showLoginForm = false; // 关闭登录表单
-  }
-
- 
-
- 
-
-  toggleLoginForm(show: boolean) {
-    this.showLoginForm = show;
-  }
-}

poem-life-app/src/app/tab3/tab3.page.html

@@ -88,9 +88,19 @@
 
     <div class="profile-card">
 
-
-
-
+      <!-- @if(!currentUser?.id){
+      <div class="avatar-container" *ngIf="!currentUser?.id">
+        <img [src]="profile.avatar" alt="默认头像" class="avatar" />
+      </div>
+    }
+    @if(currentUser?.id){
+    <div class="avatar-container">
+      <img [src]="currentUser.get('avatar')" alt="头像" class="avatar" />
+    </div>
+  } -->
+  <div class="avatar-container">
+    <img [src]="currentUser?.get('avatar') ?? profile.avatar" alt="头像" class="avatar" />
+  </div>
       @if(!currentUser?.id){
       <!-- <button (click)="fileInput.click()" class="avatar-button">
         <img src="currentUser.get("avatar")" alt="头像" class="avatar" />
@@ -99,7 +109,7 @@
       <!-- <button (click)="editName()" class="name-button">
         <h2>未知的某位网友</h2>
       </button> -->
-      <div>未知的某位网友</div>
+      <div><h3>未知的某位网友</h3></div>
     }
     @if(currentUser?.id){
       <!-- <button (click)="fileInput.click()" class="avatar-button">
@@ -109,16 +119,18 @@
       <button (click)="editName()" class="name-button">
         <h2>{{ currentUser?.get("realname")}}</h2>
       </button> -->
-      <div>{{currentUser?.get("username")}}</div>
+      <div (click)="!currentUser?.id ? showAlert() : editUser()"><h3>{{currentUser?.get("username")}}</h3></div>
     }
 
 
 
-      <p *ngIf="profile.vipStatus">VIP <button (click)="openVipPage()">开通VIP&gt;</button></p>
+    <p *ngIf="profile.vipStatus" class="vip-status">
+      VIP <button (click)="openVipPage()" class="vip-button">开通VIP&gt;</button>
+    </p>
       <!-- <p>{{ profile.level }}</p> -->
     </div>
 
-    <div class="cards-container" (click)="!currentUser?.id ? showAlert() : editUser()">
+    <div class="cards-container" >
       <div class="card" *ngFor="let button of profile.buttons">
         <ion-icon [name]="button.icon"></ion-icon>
         <p>{{ button.text }}</p>
@@ -158,5 +170,8 @@
     </ion-segment>
   }
   </div>
+  <div class="content-container" id="content-container" *ngIf="showTabs && activeTab !== null">
+    <!-- 内容将由updateContent方法动态插入 -->
+  </div>
 </ion-content>
 </div>

poem-life-app/src/app/tab3/tab3.page.scss

@@ -1,141 +1,189 @@
 .profile-container {
- position: relative;
- overflow: hidden;
- background-size: cover;
- background-position: center;
-
- img {
-width: 100%;
-height: 320px; /* 根据需要调整 */
-object-fit: cover;
- }
-}
-
-.profile-card {
- position: absolute;
- top: 20px; /* 调整位置 */
- left: 50%;
- transform: translateX(-50%); /* 居中 */
- padding: 20px;
- background: rgba(0, 0, 0, 0.0); /* 半透明背景 */
- color: white;
- text-align: center;
- border-radius: 10px;
-
- .avatar {
-width: 70px; /* 保持宽度 */
-height: 70px; /* 修改为与宽度相等的高度 */
-border-radius: 50%; /* 圆形 */
-margin-bottom: 10px;
-border: 3px solid white;
-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
- }
-
- h2 {
-font-size: 16px; /* 调整为较小的字体大小 */
- }
-
- p {
-font-size: 12px; /* 调整为较小的字体大小 */
- }
-}
-
-.cards-container {
- position: absolute; /* 使容器绝对定位 */
- bottom: 20px; /* 距离底部的距离 */
- left: 50%;
- transform: translateX(-50%); /* 居中 */
- display: flex;
- justify-content: space-around; /* 水平排列 */
- width: 90%; /* 设置宽度 */
- padding: 10px 0; /* 上下内边距 */
-
- .card {
-width: 80px; /* 设置宽度 */
-height: 60px; /* 设置高度 */
-background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
-border-radius: 10px;
-padding: 5px; /* 内边距 */
-display: flex;
-flex-direction: column; /* 垂直排列内容 */
-align-items: center;
-gap: 2px; /* 减小间距 */
-color: black;
-font-size: 14px; /* 设置字体大小 */
-border: none;
-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
-transition: all 0.2s ease-in-out;
-
-ion-icon {
- font-size: 32px; /* 设置图标大小 */
- flex: 0 0 40%; /* 使图标占据盒子的40% */
- display: flex; /* 使图标能够使用flex属性 */
- justify-content: center; /* 水平居中图标 */
- align-items: center; /* 垂直居中图标 */
- width: 100%; /* 使图标宽度为100% */
-}
-
-p {
- margin: 0; /* 去除默认的外边距 */
-}
-
-&:hover {
- background: rgba(255, 255, 255, 1); /* 悬停时变为不透明 */
-}
-}
-}
-
-.tabs-container {
- margin-top: 20px;
- padding: 0 20px;
-
- ion-segment {
---background: rgba(255, 255, 255, 0.5);
---border-width: 0;
---padding-start: 0;
---padding-end: 0;
- }
-ion-segment-button {
---indicator-background: transparent;
---padding-top: 8px;
---padding-bottom: 8px;
---padding-start: 16px;
---padding-end: 16px;
-
-&.active {
- color: blue; /* 激活时文字变为蓝色 */
- border-bottom: 2px solid blue; /* 激活时显示蓝色横线 */
-}
- }
-}
-.like-collection-buttons {
- display: flex;
- justify-content: space-between; /* 水平排列并在两端对齐 */
- width: 100%; /* 使容器宽度为100% */
- margin-top: 10px; /* 与上方内容的间距 */
-
- .card {
-flex: 0 0 calc(25%); /* 设置卡片宽度为页面宽度的25% */
-margin: 0 calc(12.5%); /* 左右间距为页面宽度的12.5% */
-background: rgba(255, 255, 255, 0.0); /* 半透明背景 */
-border-radius: 10px;
-padding: 10px; /* 内边距 */
-display: flex;
-align-items: center;
-justify-content: center;
-// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
-transition: background 0.2s ease-in-out;
-
-.action-button {
- background: none; /* 无背景 */
- border: none; /* 无边框 */
- color: black; /* 字体颜色 */
- font-size: 14px; /* 字体大小 */
- cursor: pointer; /* 鼠标指针样式 */
-
- &:hover {
-background: rgba(255, 255, 255, 0.5); /* 悬停时变为半透明 */
- }
-}
- }
-}
+    position: relative;
+    overflow: hidden;
+    background-size: cover;
+    background-position: center;
+  
+    img {
+      width: 100%;
+      height: 320px; /* 根据需要调整 */
+      object-fit: cover;
+    }
+  }
+  
+  .profile-card {
+    position: absolute;
+    top: 20px; /* 调整位置 */
+    left: 50%;
+    transform: translateX(-50%); /* 居中 */
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.0); /* 半透明背景 */
+    color: white;
+    text-align: center;
+    border-radius: 10px;
+  
+    .avatar {
+      width: 70px; /* 保持宽度 */
+      height: 70px; /* 修改为与宽度相等的高度 */
+      border-radius: 50%; /* 圆形 */
+      margin-bottom: 10px;
+      border: 3px solid white;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+  
+    h2 {
+      font-size: 16px; /* 调整为较小的字体大小 */
+    }
+  
+    p {
+      font-size: 12px; /* 调整为较小的字体大小 */
+    }
+  }
+  
+  .cards-container {
+    position: absolute; /* 使容器绝对定位 */
+    bottom: 20px; /* 距离底部的距离 */
+    left: 50%;
+    transform: translateX(-50%); /* 居中 */
+    display: flex;
+    justify-content: space-around; /* 水平排列 */
+    width: 90%; /* 设置宽度 */
+    padding: 10px 0; /* 上下内边距 */
+  
+    .card {
+      width: 80px; /* 设置宽度 */
+      height: 60px; /* 设置高度 */
+      background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
+      border-radius: 10px;
+      padding: 5px; /* 内边距 */
+      display: flex;
+      flex-direction: column; /* 垂直排列内容 */
+      align-items: center;
+      gap: 2px; /* 减小间距 */
+      color: black;
+      font-size: 14px; /* 设置字体大小 */
+      border: none;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
+      transition: all 0.2s ease-in-out;
+  
+      ion-icon {
+        font-size: 32px; /* 设置图标大小 */
+        flex: 0 0 40%; /* 使图标占据盒子的40% */
+        display: flex; /* 使图标能够使用flex属性 */
+        justify-content: center; /* 水平居中图标 */
+        align-items: center; /* 垂直居中图标 */
+        width: 100%; /* 使图标宽度为100% */
+      }
+  
+      p {
+        margin: 0; /* 去除默认的外边距 */
+      }
+  
+      &:hover {
+        background: rgba(255, 255, 255, 1); /* 悬停时变为不透明 */
+      }
+    }
+  }
+  
+  .tabs-container {
+    margin-top: 20px;
+    padding: 0 20px;
+  
+    ion-segment {
+      --background: rgba(255, 255, 255, 0.5);
+      --border-width: 0;
+      --padding-start: 0;
+      --padding-end: 0;
+    }
+  
+    ion-segment-button {
+      --indicator-background: transparent;
+      --padding-top: 8px;
+      --padding-bottom: 8px;
+      --padding-start: 16px;
+      --padding-end: 16px;
+  
+      &.active {
+        color: blue; /* 激活时文字变为蓝色 */
+        border-bottom: 2px solid blue; /* 激活时显示蓝色横线 */
+      }
+    }
+  }
+  
+  .like-collection-buttons {
+    display: flex;
+    justify-content: space-between; /* 水平排列并在两端对齐 */
+    width: 100%; /* 使容器宽度为100% */
+    margin-top: 10px; /* 与上方内容的间距 */
+    padding: 10px 20px;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.3); /* 添加阴影线 */
+  }
+  
+  .like-collection-buttons .card {
+    flex: 0 0 calc(25%); /* 设置卡片宽度为页面宽度的25% */
+    margin: 0 calc(12.5%); /* 左右间距为页面宽度的12.5% */
+    background: rgba(255, 255, 255, 0.0); /* 半透明背景 */
+    border-radius: 10px;
+    padding: 10px; /* 内边距 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease-in-out;
+  }
+  
+  .like-collection-buttons .card .action-button {
+    background: none; /* 无背景 */
+    border: none; /* 无边框 */
+    color: black; /* 字体颜色 */
+    font-size: 14px; /* 字体大小 */
+    cursor: pointer; /* 鼠标指针样式 */
+  }
+  
+  .like-collection-buttons .card .action-button:hover {
+    background: rgba(255, 255, 255, 0.5); /* 悬停时变为半透明 */
+  }
+  .content-container {
+    border-top: 2px solid black; /* 添加上边框 */
+    padding-top: 10px; /* 可选：增加一些内边距以便更好地展示内容 */
+  }
+  .content-container {
+    border-top: 2px solid black; /* 添加上边框 */
+    padding-top: 10px; /* 可选：增加一些内边距以便更好地展示内容 */
+  }
+  
+  .avatar-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid black; /* 添加圆形边框 */
+  }
+  .vip-status {
+    background: transparent; /* 透明背景 */
+    border: none; /* 无边框 */
+    margin: 0; /* 去除默认的外边距 */
+    padding: 0; /* 去除默认的内边距 */
+  }
+
+  .vip-button {
+    background: transparent; /* 透明背景 */
+    border: none; /* 无边框 */
+    color: white; /* 白色文字 */
+    font-size: 14px; /* 字体大小 */
+    cursor: pointer; /* 鼠标指针样式 */
+    text-decoration: underline; /* 下划线 */
+  }
+
+  .vip-button:hover {
+    color: lightblue; /* 悬停时改变颜色 */
+  }
+
+  
+  

poem-life-app/src/app/tab3/tab3.page.ts

@@ -1,14 +1,11 @@
-import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonicModule } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
 import { addIcons } from 'ionicons';
 import { bookmarkOutline, cartOutline, documentTextOutline, downloadOutline, ellipsisHorizontal, heartOutline, imageOutline, imagesOutline, search, timeOutline, walletOutline } from 'ionicons/icons';
-
-
-
-import { EnvironmentInjector,inject } from '@angular/core';
+import { EnvironmentInjector, inject } from '@angular/core';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { CloudUser } from 'src/lib/ncloud';
@@ -24,10 +21,10 @@ import { AlertController } from '@ionic/angular/standalone'; // 导入所需的
 })
 export class Tab3Page {
   profile = {
-    name: 'X',
-    level: 'X',
+    // name: 'X',
+    // level: 'X',
     vipStatus: true,
-    avatar: '../../assets/image/default-avatar.png', // 默认头像路径
+    avatar: '../../assets/image/07/1.jpg', // 默认头像路径
     buttons: [
       { icon: 'time-outline', text: '浏览记录' },
       { icon: 'download-outline', text: '我的下载' },
@@ -42,37 +39,47 @@ export class Tab3Page {
   };
 
   showTabs = false;
-  activeTab: string = 'all';
+  activeTab: string | null = null; // 初始状态为null
   public environmentInjector = inject(EnvironmentInjector);
 
-  currentUser:CloudUser|undefined
-  constructor(private router: Router,
+  currentUser: CloudUser | undefined;
 
+  constructor(
+    private router: Router,
     private alertController: AlertController,
-    private modalCtrl:ModalController) {
+    private modalCtrl: ModalController
+  ) {
     this.currentUser = new CloudUser();
-    addIcons({search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline});
+    addIcons({ 
+      search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, 
+      heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline 
+    });
   }
 
   toggleTabs(action: string) {
-    this.showTabs = true;
-    this.activeTab = action === 'like' ? 'all' : 'collect';
+    this.showTabs = !this.showTabs;
+    if (action === 'like') {
+      this.setActiveTab('all');
+    } else if (action === 'collect') {
+      this.setActiveTab('collect'); // 假设有一个收藏选项卡
+    }
   }
 
-  setActiveTab(tab: string) {
+  setActiveTab(tab: string | null) {
     this.activeTab = tab;
+    this.updateContent();
   }
 
   navigateToLogin() {
     this.router.navigate(['/tabs/login']);
   }
 
-  editName() {
-    const newName = prompt("请输入新的名字", this.profile.name); // 仅示例
-    if (newName) {
-      this.profile.name = newName;
-    }
-  }
+  // editName() {
+  //   const newName = prompt("请输入新的名字", this.profile.name); // 仅示例
+  //   if (newName) {
+  //     this.profile.name = newName;
+  //   }
+  // }
 
   openVipPage() {
     // 这里可以添加逻辑来导航到VIP开通页面
@@ -93,82 +100,84 @@ export class Tab3Page {
     }
   }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-  async login(){
+  async login() {
     // 弹出登录窗口
     let user = await openUserLoginModal(this.modalCtrl);
-    if(user?.id){
-      this.currentUser = user
+    if (user?.id) {
+      this.currentUser = user;
     }
   }
-  async signup(){
+
+  async signup() {
     // 弹出注册窗口
-    let user = await openUserLoginModal(this.modalCtrl,"signup");
-    if(user?.id){
-      this.currentUser = user
+    let user = await openUserLoginModal(this.modalCtrl, "signup");
+    if (user?.id) {
+      this.currentUser = user;
     }
   }
-  logout(){
+
+  logout() {
     this.currentUser?.logout();
   }
-  editUser(){
-    openUserEditModal(this.modalCtrl)
+
+  editUser() {
+    openUserEditModal(this.modalCtrl);
+  }
+
+  editTags: Array<string> = [];
+
+  async setTagsValue(ev: any) {
+    let currentUser = new CloudUser();
+    let userPrompt = ``;
+    if (!currentUser?.id) {
+      console.log("用户未登录，请登录后重试");
+      let user = await openUserLoginModal(this.modalCtrl);
+      if (!user?.id) {
+        return;
+      }
+      currentUser = user;
+    }
+    this.editTags = ev;
   }
-editTags:Array<String>=[]
-    async setTagsValue(ev:any){
-     let currentUser = new CloudUser();
-     let userPrompt = ``
-     if(!currentUser?.id){
-       console.log("用户未登录，请登录后重试");
-       let user = await openUserLoginModal(this.modalCtrl);
-       if(!user?.id){
-         return
-       }
-       currentUser = user;
-     }
-   //console.log("setTagsValue",ev);
-   this.editTags=ev;
- }
- async showAlert() {
-  const alert = await this.alertController.create({
-    header: '提示', // 提示框的标题
-    message: '请先登录以查看个人信息。', // 提示框的消息
-    buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
-  });
-
-  await alert.present(); // 显示提示框
-}
 
+  async showAlert() {
+    const alert = await this.alertController.create({
+      header: '提示', // 提示框的标题
+      message: '请先登录以查看个人信息。', // 提示框的消息
+      buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
+    });
 
+    await alert.present(); // 显示提示框
+  }
+
+  updateContent() {
+    const contentContainer = document.getElementById('content-container');
+    if (!contentContainer) return;
+
+    switch (this.activeTab) {
+      case 'all':
+        contentContainer.innerHTML = `
+          <h2>全部内容</h2>
+          <p>这里是全部内容的详细信息。</p>
+        `;
+        break;
+      case 'image':
+        contentContainer.innerHTML = `
+          <h2>图文内容</h2>
+          <p>这里是图文内容的详细信息。</p>
+        `;
+        break;
+      case 'document':
+        contentContainer.innerHTML = `
+          <h2>文章内容</h2>
+          <p>这里是文章内容的详细信息。</p>
+        `;
+        break;
+      default:
+        contentContainer.innerHTML = ''; // 默认情况下清空内容
+    }
+  }
+}
 
 
 
-}

poem-life-app/src/app/tab5/tab5.component.html

@@ -1,195 +0,0 @@
-<ion-menu side="end" contentId="main-content">
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>设置</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content class="ion-padding">
-
-<!-- 控件区域 -->
-<ion-list>
-  <ion-item>
-    <ion-label>安全隐私</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>地址信息</ion-label>
-  </ion-item>
-</ion-list>
-<div style="text-align: center; margin: 10px;"></div>
-<div style="text-align: center; margin: 10px;"></div>
-<ion-list>
-  <ion-item>
-    <ion-label>我的客服</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>关于我</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>商务合作</ion-label>
-  </ion-item>
-</ion-list>
-<div style="text-align: center; margin: 10px;"></div>
-<div style="text-align: center; margin: 10px;"></div>
-<!-- 版本号和关于区域 -->
-<ion-list>
-  <ion-item>
-    <ion-label>隐私政策</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>个人信息清单</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>第三方信息共享清单</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>用户协议</ion-label>
-  </ion-item>
-  <ion-item>
-    <ion-label>版本号</ion-label>
-    <ion-badge slot="end" color="primary">V6.0</ion-badge>
-  </ion-item>
-</ion-list>
-<!-- 退出登录按钮 -->
-<div style="text-align: center; margin: 30px;">
-
-  <ion-button expand="block" (click)="logout()">登出</ion-button>
-</div>
-  </ion-content>
-</ion-menu>
-
-<div class="ion-page" id="main-content">
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>我的</ion-title>
-      <ion-buttons slot="end">
-        <ion-menu-button></ion-menu-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-<ion-content>   
-    <div class="box">
-      <div class="top">
-        <div class="region">
-          <div class="upper">
-            @if(!currentUser?.id){
-            <div class="img-box">
-              <img src="../../assets/icon/head1.png" alt="User Image" />
-            </div>
-            <div class="info">
-              <div class="name">未登录</div>
-              <div class="no">***********</div>
-            </div>
-          }
-          @if(currentUser?.id){
-            <div class="img-box">
-              <img src="../../assets/icon/head1.png" alt="User Image" />
-            </div>
-            <div class="info">
-              <div class="name">{{currentUser?.get("realname")}}</div>
-              <div class="no">邮箱:{{currentUser?.get("email")||"-"}}</div>
-            </div>
-            }
-          </div>
-        </div>
-        @if(!currentUser?.id){
-          <div class="lower1">
-  
-          <ion-button expand="block" class="custom-button" (click)="login()">登录</ion-button>
-          <ion-button expand="block"class="custom-button"  (click)="signup()">注册</ion-button>  
-        </div>
-        }
-        @if(currentUser?.id){
-        <div class="lower">落霞与孤鹜齐飞，天水共长天一色</div>
-        <div class="count">
-          <div class="title">
-            <span>关注:0</span>
-            <span>粉丝:0</span>
-            <span>获赞:99</span>
-          </div>
-        </div>
-      }
-      </div>
- </div>
-<div class="icon-container">
-  <div class="icon-item">
-    <ion-icon name="folder-outline"></ion-icon>
-    <span>离线缓存</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="time-outline"></ion-icon>
-    <span>历史记录</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="star-outline"></ion-icon>
-    <span>我的收藏</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="heart-outline"></ion-icon>
-    <span>我的喜欢</span>
-  </div>
-</div>
-
-<div style="margin-top: 60px;width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div>
-<div class="icon-container">
-  <div class="icon-item">
-    <ion-icon name="folder-outline"></ion-icon>
-    <span>离线缓存</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="time-outline"></ion-icon>
-    <span>历史记录</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="star-outline"></ion-icon>
-    <span>我的收藏</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="heart-outline"></ion-icon>
-    <span>我的喜欢</span>
-  </div>
-</div>
-<div class="icon-container">
-  <div class="icon-item">
-    <ion-icon name="folder-outline"></ion-icon>
-    <span>离线缓存</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="time-outline"></ion-icon>
-    <span>历史记录</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="star-outline"></ion-icon>
-    <span>我的收藏</span>
-  </div>
-  <div class="icon-item">
-    <ion-icon name="heart-outline"></ion-icon>
-    <span>我的喜欢</span>
-  </div>
-</div>
-<div style="margin-top: 60px;width: 100%;">
-  <div style="width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div>
-<ion-list lines="none">
-  <ion-item (click)="!currentUser?.id ? showAlert() : editUser()">
-    <ion-icon slot="start" name="person-outline" style="font-size: 20px;"></ion-icon>
-    <ion-label>个人信息</ion-label>
-    <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
-  </ion-item>
-  <ion-item>
-    <ion-icon slot="start" name="shield-outline"style="font-size: 20px;"></ion-icon>
-    <ion-label>安全隐私</ion-label>
-    <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
-  </ion-item>
-  <ion-item>
-    <ion-icon slot="start" name="call-outline"style="font-size: 20px;"></ion-icon>
-    <ion-label>联系客服</ion-label>
-    <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
-  </ion-item>
-  <ion-item>
-    <ion-icon slot="start" name="lock-closed-outline"style="font-size: 20px;"></ion-icon>
-    <ion-label>隐私政策</ion-label>
-    <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
-  </ion-item>
-</ion-list>
-</div>
-</ion-content>
-</div>

poem-life-app/src/app/tab5/tab5.component.scss

@@ -1,178 +0,0 @@
-.bg-color {
-    --background: #f4f4f4;  /* 设置背景颜色 */
-  }
-  
-  .top-list {
-    margin-top: 10px;
-  }
-  
-  ion-item {
-    --inner-padding-end: 10px;
-  }
-  
-  ion-avatar {
-    width: 40px;
-    height: 40px;
-  }
-  
-  ion-label h2 {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  
-  ion-label p {
-    font-size: 14px;
-    color: #888;
-  }
-  
-  ion-button {
-    margin-top: 20px;
-  }
-  
-
-
-
-  .box {
-    width: 100%;
-    margin: auto;
-  }
-  
-  .top {
-    position: relative;
-    padding-top: 30px; /* 使用 px 替代 rpx */
-    width: 100%;
-    height: 300px; /* 使用 px 替代 rpx */
-  }
-  
-  .top:after {
-    width: 140%;
-    height:300px;
-    position: absolute;
-    left: -20%;
-    top: 0;
-    z-index: -1;
-    content: '';
-    border-radius: 0 0 60% 60%;
-    background-color: #426db5;
-  }
-  
-  .region {
-    margin:auto;
-    width: 450px;
-  }
-  
-  .upper {
-  
-      display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
-      justify-content: center; /* 在主轴上居中对齐子元素 */
-     align-items: center; /* 在交叉轴上居中对齐子元素 */
-  
-  }
-  
-  .img-box {
-    width: 120px;
-    height: 120px; 
-    border-radius: 50%; /* 设置边框半径为 50%，使盒子变为圆形 */
-    overflow: hidden; /* 确保任何超出部分都被隐藏 */
-  }
-  
-  .img-box img {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .info {
-    padding-left: 30px; /* 设置左侧内边距为 30 像素 */
-    line-height: 55px; /* 设置行高为 55 像素，增加文本行之间的垂直间距 */
-    flex-direction: column; /* 将子元素排列为纵向（列）方向 */
-}
-  
-.name {
-  font-size: 20px; /* 设置字体大小为 40 像素 */
-  letter-spacing: 5px; /* 设置字母间距为 5 像素 */
-  color: #FFFFFF; /* 设置字体颜色为白色 */
-}
-  
-.no {
-  font-size: 18px; /* 设置字体大小为 24 像素 */
-  letter-spacing: 2px; /* 设置字母间距为 2 像素 */
-  color: #b3dffe; /* 设置字体颜色为淡蓝色 */
-}
-.lower {
-  display: flex;
-  justify-content: center;
-  line-height: 100px; 
-  font-size: 20px; 
-  color: #6b37f0;
-}
-.lower1 {
-  width: 200px;
-  height: 10px;
-  display: flex;
-  margin: auto;
-  flex-direction: column; /* 设置为垂直方向 */
-}
-
-.custom-button {
-  color: #660dd4;
-}
-
-.custom-button:hover {
-  --background: rgba(255, 255, 255, 0.7); /* 悬停时背景颜色变亮 */
-}
-
-.count {
-  display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
-  margin: auto;
-  width: 200px; /* 设置元素的宽度为 350 像素 */
-  line-height: 16px; /* 设置行高为 80 像素，增加文本行之间的垂直间距 */
-  border-radius: 50px; /* 设置边框半径为 50 像素，使元素的角变圆润 */
-  background-color:   #426db5;
-  // box-shadow: 0 3px 9px #bdbdbd; /* 添加阴影效果，使元素看起来有浮起的效果 */
-}
-
-.title {
-  width: auto;
-  display: flex; /* 将元素设置为弹性盒布局，使子元素能够灵活排列 */
-  justify-content: center; /* 在主轴上居中对齐子元素 */
-  align-items: center; /* 在交叉轴上居中对齐子元素 */
-}
-
-.title img {
-  width: 30px; 
-  height: auto;
-}
-
-.title span {
-  font-size: 16px; 
-  padding-left: 15px; 
-  color: #b3dffe;
-}
-
-
-.icon-container {
-  margin-top: 10px;
-  display: flex; /* 使用弹性盒布局 */
-  justify-content: space-around; /* 在主轴上均匀分配空间 */
-}
-
-.icon-container1 {
-  margin-top: 40px;
-  display: flex; /* 使用弹性盒布局 */
-  justify-content: space-around; /* 在主轴上均匀分配空间 */
-}
-
-.icon-item {
-  text-align: center; /* 使文本居中对齐 */
-}
-
-.icon-item ion-icon {
-  font-size: 25px; /* 设置图标大小 */
-  margin-bottom: 10px; /* 图标与文本之间的间距 */
-}
-
-.icon-item span {
-  display: block; /* 将文本设置为块级元素，以便于控制布局 */
-  font-size: 16px; /* 设置文本大小 */
-  color: #333; /* 设置文本颜色 */
-}

poem-life-app/src/app/tab5/tab5.component.spec.ts

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

poem-life-app/src/app/tab5/tab5.component.ts

@@ -1,91 +0,0 @@
-import { Component,EnvironmentInjector,inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonBadge, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-import { IonLabel } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {folderOutline,timeOutline,starOutline,heartOutline,chevronForwardOutline,personOutline,shieldOutline,callOutline,lockClosedOutline} from 'ionicons/icons';
-addIcons({folderOutline,timeOutline,starOutline,heartOutline,chevronForwardOutline,personOutline,shieldOutline,callOutline,lockClosedOutline})
-
-import { CloudUser } from 'src/lib/ncloud';
-import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
-import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-import { Router } from '@angular/router';
-import { ModalController } from '@ionic/angular/standalone';
-import { AlertController } from '@ionic/angular/standalone'; // 导入所需的模块
-
-@Component({
-  selector: 'app-tab5',
-  templateUrl: './tab5.component.html',
-  styleUrls: ['./tab5.component.scss'],
-  standalone: true,
-  imports: [CommonModule,IonIcon,IonLabel,IonList,IonButton,IonMenu,IonToolbar,IonMenuButton,IonTitle,IonButtons,IonItem,IonHeader,IonContent,IonBadge
-  ],
-})
-export class Tab5Component{
-
-  public environmentInjector = inject(EnvironmentInjector);
-
- currentUser:CloudUser|undefined
-   constructor(
-    private alertController: AlertController,
-     private router: Router,
-     private modalCtrl:ModalController) {
-     addIcons({ folderOutline,timeOutline,starOutline,heartOutline});
-     this.currentUser = new CloudUser();
-   }
-   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(){
-     openUserEditModal(this.modalCtrl)
-   }
- 
-   editTags:Array<String>=[]
-    async setTagsValue(ev:any){
-     let currentUser = new CloudUser();
-     let userPrompt = ``
-     if(!currentUser?.id){
-       console.log("用户未登录，请登录后重试");
-       let user = await openUserLoginModal(this.modalCtrl);
-       if(!user?.id){
-         return
-       }
-       currentUser = user;
-     }
-   //console.log("setTagsValue",ev);
-   this.editTags=ev;
- }
-
-
-
-
-
-
-
-
- 
- async showAlert() {
-  const alert = await this.alertController.create({
-    header: '提示', // 提示框的标题
-    message: '请先登录以查看个人信息。', // 提示框的消息
-    buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
-  });
-
-  await alert.present(); // 显示提示框
-}
-}

poem-life-app/src/app/tabs/tabs.routes.ts

@@ -25,11 +25,11 @@ export const routes: Routes = [
         path: 'tab4',
         loadComponent: () => import('../tab4/tab4.page').then( m => m.Tab4Page)
       },
-      {
-        path: 'tab5',
-        loadComponent: () =>
-          import('../tab5/tab5.component').then((m) => m.Tab5Component),
-      },
+      // {
+      //   path: 'tab5',
+      //   loadComponent: () =>
+      //     import('../tab5/tab5.component').then((m) => m.Tab5Component),
+      // },
       {
         path: 'create',
         loadComponent: () => import('../page-create/page-create.component').then( m => m.PageCreateComponent)
@@ -39,10 +39,10 @@ export const routes: Routes = [
         loadComponent: () => import('../page-createpic/page-createpic.component').then( m => m.PageCreatepicComponent)
       },
       
-      {
-        path: 'login',  // 添加 login 页面路径
-        loadComponent: () => import('../login/login.component').then(m => m.LoginComponent)
-      },
+      // {
+      //   path: 'login',  // 添加 login 页面路径
+      //   loadComponent: () => import('../login/login.component').then(m => m.LoginComponent)
+      // },
       {
         path: '',
         redirectTo: '/tabs/tab1',