feat:app2.0

Mind-app/package-lock.json

@@ -21,9 +21,10 @@
         "@capacitor/haptics": "6.0.2",
         "@capacitor/keyboard": "6.0.3",
         "@capacitor/status-bar": "6.0.2",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.4.0",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.15",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -16194,6 +16195,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.15.tgz",
+      "integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

Mind-app/package.json

@@ -26,9 +26,10 @@
     "@capacitor/haptics": "6.0.2",
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.0",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.15",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

Mind-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>

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

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

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

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+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 {
+  @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); // 触发分值变化事件
+  }
+}

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

@@ -1,3 +1,9 @@
-<p>
-  edit-tag works!
-</p>
+
+<ion-input [value]="userInputText" (ionInput)="userInput($event)" type="text" placeholder="请输入事务"></ion-input>
+<p>当前输入:{{userInputText}}</p> 
+<ion-button fill="solid" (click)="addTag()" style="--background: rgb(250, 222, 222); --color: black;">添加事务</ion-button>
+
+
+@for(tag of tags;track tag;){
+  <ion-chip>{{tag}} <span (click)="deleteTag(tag)">X</span></ion-chip>
+}

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

@@ -19,4 +19,4 @@ describe('EditTagComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

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

@@ -1,15 +1,45 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,Output, EventEmitter } 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
+  }
+
+
+  /**
+   * 标签列表
+   */
+  tags:Array<string> = []
+  addTag(){
+    this.tags.push(this.userInputText)
+    this.userInputText = ""
+    this.onTagChange.emit(this.tags)
+  }
+  deleteTag(tag:string){
+    let idx = this.tags.findIndex(item=>item==tag);
+    this.tags.splice(idx,1);
+  }
+  @Output()
+  onTagChange:EventEmitter<Array<string>> = new EventEmitter<Array<string>>()
 
   constructor() { }
 
   ngOnInit() {}
 
-}
+}

Mind-app/src/app/page-companion/page-companion.component.html

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

Mind-app/src/app/page-companion/page-companion.component.spec.ts

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

Mind-app/src/app/page-companion/page-companion.component.ts

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

Mind-app/src/app/page-daily/page-daily.component.html

@@ -0,0 +1,31 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+    <div style="display: flex; align-items: center;justify-content: center;">
+      <ion-icon name="sunny" style="color: rgb(250, 222, 222); font-size: 24px;"></ion-icon>
+  <span style="color: rgb(250, 222, 222); font-size: 20px; margin-left: 8px;">日常</span>
+    </div>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <div class="rating-container">
+    <h4>星星打分：分值 {{currentScore}}</h4>
+    <edit-rating-star 
+      [score]="currentScore" 
+      [scoreMax]="5" 
+      (onScoreChange)="handleScoreChange($event)">
+    </edit-rating-star>
+  </div>
+  
+  <div class="tag-container">
+    <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+    <ul>
+      @for(tag of editTags;track tag;){
+        <li>{{tag}}</li>
+      }
+    </ul>
+  </div>
+</ion-content>

Mind-app/src/app/page-daily/page-daily.component.scss

@@ -0,0 +1,28 @@
+ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色，确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果，可以设置为透明 */
+  }
+
+  .rating-container {
+    border: 1px solid #d3d3d3; /* 边框颜色 */
+    border-radius: 8px; /* 圆角 */
+    padding: 16px; /* 内边距 */
+    margin-bottom: 16px; /* 下边距 */
+    margin-top: 16px;
+    background-color: #f6b7b7; /* 背景颜色 */
+  }
+  
+  .tag-container {
+    border: 1px solid #d3d3d3; /* 边框颜色 */
+    border-radius: 8px; /* 圆角 */
+    padding: 16px; /* 内边距 */
+    background-color: #f6b7b7; /* 背景颜色 */
+  }

Mind-app/src/app/page-daily/page-daily.component.spec.ts

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

Mind-app/src/app/page-daily/page-daily.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
+import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
+import {IonHeader, IonToolbar, IonTitle, IonContent, IonIcon } from '@ionic/angular/standalone';
+import { sunny } from 'ionicons/icons';
+import { addIcons } from 'ionicons';
+
+
+@Component({
+  selector: 'app-page-daily',
+  templateUrl: './page-daily.component.html',
+  styleUrls: ['./page-daily.component.scss'],
+  standalone: true,
+  imports:[EditTagComponent,EditRatingStarComponent,IonHeader, IonIcon, IonToolbar, IonTitle, IonContent ]
+})
+export class PageDailyComponent  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() {
+    addIcons({sunny});
+   }
+
+  ngOnInit() {}
+
+}
+

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

@@ -1,17 +1,52 @@
 <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">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  
+
+      <!-- 按钮容器放置在左上角 -->
+  <div class="button-container">
+    <ion-button (click)="goDailyPage()" fill="clear" color="#e0ced7" class="custom-button daily-button" >
+    <ion-icon name="sunny" slot="start"></ion-icon>
+      日常
+    </ion-button>
+
+    <ion-button (click)="goCompanionPage()" fill="clear" color="#e0ced7" class="custom-button companion-button">
+      <ion-icon name="heart" slot="start"></ion-icon>
+      心灵陪伴
+    </ion-button>
+  </div>
+
+  <ion-card class="card1">
+    <img alt="虎杖(boy)" src="/img/虎杖.png" />
+    <ion-card-header>
+      <ion-card-subtitle>你好呀，朋友！</ion-card-subtitle>
+      <ion-card-title>我是虎杖</ion-card-title>
+    </ion-card-header>
+  
+    <ion-card-content>
+      我是你的知心伙伴，你有什么烦心事吗？
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card class="card2">
+    <img alt="阿尼亚(girl)" src="/img/阿尼亚.png" />
+    <ion-card-header>
+      <ion-card-subtitle>你好呀，朋友！</ion-card-subtitle>
+      <ion-card-title>我是阿尼亚</ion-card-title>
+    </ion-card-header>
+  
+    <ion-card-content>
+      我是你的知心伙伴，我会一直陪着你哒！
+    </ion-card-content>
+  </ion-card>
+
+
+    
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
 </ion-content>

Mind-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,46 @@
+.button-container {
+    position: absolute; /* 绝对定位 */
+    top: 66px; /* 距离顶部的距离 */
+    left: 16px; /* 距离左侧的距离 */
+    display: flex; /* 使用flexbox布局 */
+    flex-direction: row; /* 垂直排列 */
+    gap: 8px; /* 按钮之间的间距 */
+  }
+  
+  .custom-button {
+    font-size: 12px; /* 按钮字体大小 */
+    border-radius: 6px; /* 圆角按钮 */
+    color: rgb(245, 82, 82); /* 字体颜色 */
+    transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
+    
+  }
+
+  /* 添加按钮的悬停效果 */
+  .custom-button:hover {
+    opacity: 0.5 !important; /* 悬停时透明度变化 */
+    color:aqua !important;
+  }
+  
+  ion-content {
+    --background: #ffcccb; /* 设置背景颜色为粉色 */
+    color: black; /* 设置文本颜色为黑色，确保可读性 */
+  }
+  ion-header {
+    background-color: #f19595; /* 设置背景颜色为淡粉色 */
+    color: black; /* 设置文本颜色为黑色 */
+  }
+  
+  ion-toolbar {
+    --background: transparent; /* 如果需要透明效果，可以设置为透明 */
+  }
+  
+
+  .card1 {
+    margin-top: 70px; /* 增加顶部边距 */
+    background-color:rgb(250, 222, 222);
+  }
+
+  .card2 {
+    margin-top: 60px; /* 增加顶部边距 */
+    background-color:rgb(250, 222, 222);
+  }

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

@@ -1,14 +1,28 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { Component} from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent,  IonButton, IonIcon,  IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Router } from '@angular/router';
+
+
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,  IonButton, IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent],
 })
 export class Tab1Page {
-  constructor() {}
+ 
+  constructor(private router: Router) {}
+
+  goDailyPage(){
+    this.router.navigate(['tabs/daily']);
+  }
+  goCompanionPage(){
+    this.router.navigate(['tabs/companion'])
+  }
+  navigateTo(page:string){
+    this.router.navigate(['/tabs/${page}']);
+  }
 }

Mind-app/src/app/tabs/tabs.page.scss

@@ -1 +1,12 @@
 
+ion-tab-button {
+    background-color: #f19595; /* 选择您喜欢的颜色 */
+    color: white; /* 文本颜色 */
+  }
+
+ion-tab-bar{
+    background-color: #f19595; /* 选择您喜欢的颜色 */
+    color: white; /* 文本颜色 */
+}
+  
+  

Mind-app/src/app/tabs/tabs.page.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 
 import { TabsPage } from './tabs.page';
+import { By } from '@angular/platform-browser';
 
 describe('TabsPage', () => {
   let component: TabsPage;
@@ -23,4 +24,13 @@ describe('TabsPage', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should have daily button', () => {
+    const dailyButton = fixture.debugElement.query(By.css('ion-button.daily-button'));
+    expect(dailyButton).toBeTruthy(); // 确保“日常”按钮存在
+  });
+
+  it('should have companion button', () => {
+    const companionButton = fixture.debugElement.query(By.css('ion-button.companion-button'));
+    expect(companionButton).toBeTruthy(); // 确保“心灵陪伴”按钮存在
+  });
 });

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

@@ -1,7 +1,10 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { people, infinite, person } from 'ionicons/icons';
+import { people, infinite, person, sunny, heart } from 'ionicons/icons';
+import { star } from 'ionicons/icons';
+import { starOutline } from 'ionicons/icons';
+addIcons({star,starOutline})
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +17,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ people, infinite, person });
+    addIcons({ people, infinite, person, sunny, heart });
   }
 }

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

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

Mind-app/src/global.scss

@@ -34,4 +34,4 @@
 
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import '@ionic/angular/css/palettes/dark.system.css';
+

Mind-app/src/theme/variables.scss

@@ -1,2 +1,26 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+/* src/theme/variables.scss */
+
+:root {
+    /* 主色调 */
+    --ion-color-primary: #3880ff; /* 可以根据需要修改 */
+    
+    /* 次色调 */
+    --ion-color-secondary: #3dc2ff; /* 可以根据需要修改 */
+    
+    /* 背景颜色 */
+    --ion-background-color: white; /* 设置背景颜色为白色 */
+    
+    /* 文本颜色 */
+    --ion-text-color: black; /* 设置文本颜色为黑色 */
+    
+    /* 其他颜色变量 */
+    --ion-color-tertiary: #7044ff; /* 第三色调 */
+    --ion-color-success: #10dc60; /* 成功色 */
+    --ion-color-warning: #ffce00; /* 警告色 */
+    --ion-color-danger: #f04141; /* 危险色 */
+    --ion-color-light: #f4f5f8; /* 浅色 */
+    --ion-color-dark: #222428; /* 深色 */
+  }
+