fix:11-30project

paint-app/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

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

@@ -0,0 +1,10 @@
+<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>
+ 
+

paint-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();
+  });
+});

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

@@ -0,0 +1,54 @@
+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';
+import { star, 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); // 触发分值变化事件
+  }
+}

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

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

paint-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();
+  });
+});

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

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

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

@@ -0,0 +1,3 @@
+<p>
+  page-test works!
+</p>

paint-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();
+  });
+});

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

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

paint-app/src/app/tab1/tab1.page.html

@@ -14,4 +14,16 @@
   </ion-header>
 
   <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
+
+
+<ion-button (click)="goTestPage()">进入测试页面</ion-button>
+
+<h1>星星打分组件演示:分值{{currentScore}}</h1>
+<edit-rating-star
+  [score]="currentScore" 
+  [scoreMax]="5" 
+  (onScoreChange)="handleScoreChange($event)">
+</edit-rating-star>
+<h1>编辑标签的演示</h1>
+
+</ion-content>

paint-app/src/app/tab1/tab1.page.ts

@@ -1,14 +1,31 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader,IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
+import { Router } from '@angular/router';
+import { IonButton} from '@ionic/angular/standalone';
+
+
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonToolbar, IonTitle, IonContent, ExploreContainerComponent,EditRatingStarComponent,IonHeader,IonButton],
 })
 export class Tab1Page {
-  constructor() {}
+  //星星打分
+  currentScore: number = 0; // 初始分值
+
+  constructor(private router: Router){}
+  goTestPage(){
+    this.router.navigate(['/tabs/test'])
+  }
+  
+  handleScoreChange(newScore: number) {
+    this.currentScore = newScore;
+    console.log('新分值:', newScore); // 处理分值变化
+  }
+
 }

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

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
 import { Router } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [CommonModule, IonicModule],
+  imports: [CommonModule,IonicModule],
 })
 export class Tab3Page {
   userInfoPage = '/user-info'; // 用户信息页面的路由

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

@@ -1,7 +1,9 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { podium, aperture, person } from 'ionicons/icons';
+import { podium, aperture, person, compass } from 'ionicons/icons';
+addIcons({compass,person})
 
 @Component({
   selector: 'app-tabs',

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

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