new

youth-app/src/app/edit-rating-star/edit-rating-star.component.html

@@ -0,0 +1,8 @@
+<div class="star-rating">
+  <ng-container *ngFor="let star of starList; let i = index">
+    <ion-icon 
+      [name]="star ? 'star' : 'star-outline'" 
+      (click)="rate(i)">
+    </ion-icon>
+  </ng-container>
+</div>

youth-app/src/app/edit-rating-star/edit-rating-star.component.scss

@@ -0,0 +1,10 @@
+.star-rating {
+    display: flex;
+    cursor: pointer;
+  
+    ion-icon {
+      font-size: 30px; // 调整星星大小
+      color: gold; // 星星颜色
+      margin-right: 5px; // 星星间距
+    }
+  }

youth-app/src/app/edit-rating-star/edit-rating-star.component.spec.ts

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

youth-app/src/app/edit-rating-star/edit-rating-star.component.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import {  Input, Output, EventEmitter } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+//与在tabs.page.ts引用作用相同
+// import { star } from 'ionicons/icons';
+// import { starOutline } from 'ionicons/icons';
+// addIcons({star,starOutline})
+@Component({
+  selector: 'edit-rating-star',
+  templateUrl: './edit-rating-star.component.html',
+  styleUrls: ['./edit-rating-star.component.scss'],
+  imports:[IonIcon,CommonModule],
+  standalone: true,
+})
+export class EditRatingStarComponent  implements OnInit {
+  @Input() score: number = 0; // 默认分值为0
+  @Input() scoreMax: number = 5; // 最大分值
+  starList: boolean[] = []; // 星星状态数组
+
+  @Output() onScoreChange: EventEmitter<number> = new EventEmitter<number>();
+
+  constructor() {
+    this.updateStarList();
+  }
+
+  ngOnInit() {
+    this.updateStarList();
+  }
+  ngOnChanges() {
+    this.updateStarList();
+  }
+
+  // 更新星星数组
+  private updateStarList() {
+    this.starList = Array(this.scoreMax).fill(false);
+    for (let i = 0; i < this.score; i++) {
+      this.starList[i] = true;
+    }
+  }
+
+  // 打分方法
+  rate(index: number) {
+    if (this.score === index + 1) {
+      // 如果点击的是当前分值，清零
+      this.score = 0;
+    } else {
+      // 否则更新分值
+      this.score = index + 1;
+    }
+    this.updateStarList();
+    this.onScoreChange.emit(this.score); // 触发分值变化事件
+  }
+}

youth-app/src/app/edit-tag/README.md

@@ -0,0 +1,3 @@
+# 标签编辑组件
+- 上面：输入框和确认按钮
+- 下面：字符串数组，每个字符串是一个标签

youth-app/src/app/edit-tag/edit-tag.component.html

@@ -0,0 +1,7 @@
+<ion-input [value]="userInputText" (ionInput)="userInput($event)" type="text" placeholder="请输入标签"></ion-input>
+<p>当前输入：{{userInputText}}</p><ion-button (click)="addTag()">添加标签</ion-button>
+
+@for(tag of tags;track tags;){
+  <ion-chip>{{tag}}<span (click)="deleteTag(tag)"> &nbsp; X</span></ion-chip>
+
+}

youth-app/src/app/edit-tag/edit-tag.component.spec.ts

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

youth-app/src/app/edit-tag/edit-tag.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, OnInit,Output } from '@angular/core';
+import { IonInput,IonButton,IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-edit-tag',
+  templateUrl: './edit-tag.component.html',
+  styleUrls: ['./edit-tag.component.scss'],
+  imports:[
+    IonInput,IonButton,IonChip
+  ],
+  standalone: true,
+})
+export class EditTagComponent  implements OnInit {
+/*
+*用户输入
+*/
+  userInputText:String = "" 
+  userInput(ev:any){
+    console.log(ev);
+    this.userInputText=ev.detail.value;
+    this.onTagChange.emit(this.tags);
+  }
+  /*
+  *标签列表
+  */
+tags:Array<String> =[]
+addTag(){
+  this.tags.push(this.userInputText);
+  this.userInputText ="";
+}
+deleteTag(tag:any){
+  let idx=this.tags.findIndex(item=>item==tag);
+  this.tags.splice(idx,1);
+}
+@Output()
+onTagChange:EventEmitter<Array<String>> = new EventEmitter<Array<String>>();
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

youth-app/src/app/page-dream-analysis/page-dream-analysis.component.html

@@ -0,0 +1,10 @@
+<ion-list>
+  <ion-item>梦境标签：</ion-item>
+  <ion-item>
+    <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+  </ion-item>
+    <ion-item>
+      <ion-textarea [value]="dreamDesc" (ionInput)="userInput($event)" label="梦境描述" placeholder="具体描述您的感受" [autoGrow]="true"></ion-textarea>
+    </ion-item>
+</ion-list>
+<ion-button expand="block" (click)="analysisDream()">解析梦境</ion-button>

youth-app/src/app/page-dream-analysis/page-dream-analysis.component.spec.ts

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

youth-app/src/app/page-dream-analysis/page-dream-analysis.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
+import { IonTextarea ,IonItem, IonList } from '@ionic/angular/standalone';
+import { IonButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-page-dream-analysis',
+  templateUrl: './page-dream-analysis.component.html',
+  styleUrls: ['./page-dream-analysis.component.scss'],
+  imports:[
+    EditTagComponent,IonList,IonItem,IonTextarea,IonButton
+  ],
+  standalone: true,
+})
+export class PageDreamAnalysisComponent  implements OnInit {
+  // 梦境关键词和梦境描述
+  dreamTags:Array<string>=[];
+  dreamDesc:string="";
+
+  setTagsValue(ev:any){
+  console.log("setTagsValue",ev);
+  this.dreamTags=ev;
+  }
+  userInput(ev:any){
+    this.dreamDesc=ev.detail.value;
+  }
+  analysisDream(){
+    console.log("关键词：",this.dreamTags);
+    console.log("描述",this.dreamDesc);
+    console.log("开始解析梦境");
+  }
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

youth-app/src/app/page-test/page-test.component.html

@@ -0,0 +1,16 @@
+<h2>星星打分演示:分值{{currentScore}}</h2>
+  <edit-rating-star 
+  [score]="currentScore" 
+  [scoreMax]="5" 
+  (onScoreChange)="handleScoreChange($event)">
+  </edit-rating-star>
+
+  <h2>编辑标签演示</h2>
+  <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+
+  <h1>父级页面：从子组件输出事件获取属性</h1>
+  <ul>
+    @for(tag of editTags;track tag;){
+      <li>{{tag}}</li>
+    }
+  </ul>

youth-app/src/app/page-test/page-test.component.spec.ts

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

youth-app/src/app/page-test/page-test.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
+import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
+
+@Component({
+  selector: 'app-page-test',
+  templateUrl: './page-test.component.html',
+  styleUrls: ['./page-test.component.scss'],
+  imports:[EditTagComponent,EditRatingStarComponent],
+  standalone: true,
+})
+export class PageTestComponent  implements OnInit {
+//星星打分
+currentScore: number = 0; // 初始分值
+
+handleScoreChange(newScore: number) {
+  this.currentScore = newScore;
+  console.log('新分值:', newScore); // 处理分值变化
+}
+//编辑标签
+editTags:Array<String>=[]
+setTagsValue(ev:any){
+  console.log("setTagsValue",ev);
+  this.editTags=ev;
+}
+  constructor() { }
+
+  ngOnInit() {}
+
+}

youth-app/src/app/tab4/tab4.page.html

@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      我的信息
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">我的信息</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 4 page"></app-explore-container>
+</ion-content>

youth-app/src/app/tab4/tab4.page.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Tab4Page } from './tab4.page';
+
+describe('Tab4Page', () => {
+  let component: Tab4Page;
+  let fixture: ComponentFixture<Tab4Page>;
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(Tab4Page);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

youth-app/src/app/tab4/tab4.page.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+
+@Component({
+  selector: 'app-tab4',
+  templateUrl: 'tab4.page.html',
+  styleUrls: ['tab4.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+})
+export class Tab4Page {
+  constructor() {}
+}

youth-app/src/app/tabs/tabs.page.html

@@ -1,18 +1,23 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon aria-hidden="true" name="heart"></ion-icon>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon aria-hidden="true" name="home"></ion-icon>
+      <ion-label>商城</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon aria-hidden="true" name="document"></ion-icon>
+      <ion-label>计划</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
+      <ion-icon aria-hidden="true" name="accessibility"></ion-icon>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>

youth-app/src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { triangle, ellipse, square } from 'ionicons/icons';
+import { heart,home,document,accessibility,star,starOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ triangle, ellipse, square });
+    addIcons({ heart,home,document,accessibility,star,starOutline });
   }
 }

youth-app/src/app/tabs/tabs.routes.ts

@@ -21,6 +21,21 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
+      {
+        path: 'tab4',
+        loadComponent: () =>
+          import('../tab4/tab4.page').then((m) => m.Tab4Page),
+      },
+      {
+        path: 'test',
+        loadComponent: () =>
+          import('../page-test/page-test.component').then((m) => m.PageTestComponent),
+      },
+      {
+        path: 'dream-analysis',
+        loadComponent: () =>
+          import('../page-dream-analysis/page-dream-analysis.component').then((m) => m.PageDreamAnalysisComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',