fix:add star-icon

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

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

AIart-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; // 星星间距
+    }
+}

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

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

@@ -0,0 +1,56 @@
+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 {
+
+  ngOnInit() {
+    this.updateStarList();
+  }
+  @Input() score: number = 0; // 默认分值为0
+  @Input() scoreMax: number = 5; // 最大分值
+  starList: boolean[] = []; // 星星状态数组
+
+  @Output() onScoreChange: EventEmitter<number> = new EventEmitter<number>();
+
+  constructor() {
+    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); // 触发分值变化事件
+  }
+}

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

@@ -8,4 +8,7 @@
 
 <ion-content [fullscreen]="true">
   <edit-tag></edit-tag>
+  <h1>星星打分组件演示：分值{{currentScore}}</h1>
+  <edit-rating-star [score]="currentScore" [scoreMax]="5" (onScoreChange)="handleScoreChange($event)">
+  </edit-rating-star>
 </ion-content>

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

@@ -2,16 +2,24 @@ import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { EditTagComponent } from '../edit-tag/edit-tag.component'
+import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, EditTagComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    EditTagComponent, EditRatingStarComponent]
 })
 export class Tab2Page {
 
   constructor() { }
 
+  currentScore: number = 0; // 初始分值
+
+  handleScoreChange(newScore: number) {
+    this.currentScore = newScore;
+    console.log('新分值:', newScore); // 处理分值变化
+  }
 }

AIart-app/src/app/tab5/tab5.page.html

@@ -68,7 +68,7 @@
     </div>
     <div class="center" style="background-color:#f2efde;border-radius: 0px 0px 8px 8px;font-size: 15px;">
       <ion-icon name="heart-circle-outline" style="height: 23px;width: 23px;margin-right: 5px;"></ion-icon>
-      <p>邀请好友</p>
+      <p style="font-weight: 900;">邀请好友</p>
       <ion-icon name="chevron-forward-outline" style="margin-left: 5px;"></ion-icon>
     </div>
   </div>