fix

ERADME.md

@@ -117,6 +117,7 @@
       竞赛模式
       锻炼模式
       旅游模式
+      自由模式
 - 社区
       顶部导航
       功能区域

package-lock.json

@@ -21,7 +21,7 @@
         "@capacitor/haptics": "6.0.0",
         "@capacitor/keyboard": "6.0.1",
         "@capacitor/status-bar": "6.0.0",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.4.3",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
         "swiper": "^11.1.4",
@@ -38,7 +38,7 @@
         "@angular/cli": "^18.0.0",
         "@angular/compiler-cli": "^18.0.0",
         "@angular/language-service": "^18.0.0",
-        "@capacitor/cli": "6.1.0",
+        "@capacitor/cli": "^6.1.0",
         "@ionic/angular-toolkit": "^11.0.1",
         "@types/jasmine": "~5.1.0",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -3351,11 +3351,11 @@
       }
     },
     "node_modules/@ionic/angular": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.2.5.tgz",
-      "integrity": "sha512-vvL5TIN8YbrkW5IZ4TYw2zVa4/+boITe19nElPz1Bu7O15lEEzLe+9RqcIMDERwzgqzsBXLh1CUJk+1TXkMhJg==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.4.3.tgz",
+      "integrity": "sha512-dIrO7luoj9Iepo4tYKTzhCEpVFWIqZ1RNgDPttKVHa8hE4xhvbb1y2Ou9zmpz7cI5QShAkr3tnAbb7rkYh4fFQ==",
       "dependencies": {
-        "@ionic/core": "8.2.5",
+        "@ionic/core": "8.4.3",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -3512,11 +3512,11 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.2.5",
-      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.2.5.tgz",
-      "integrity": "sha512-NhK5KfP5NL5NITibj8sOUlfI/ARNCF5rBu5HdIEfFe25MJkd0IYBQWjVaESFhSk7aB8pXEP8DIx1AHbT9e3Sog==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "dependencies": {
-        "@stencil/core": "^4.19.2",
+        "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
@@ -5071,9 +5071,9 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.19.2.tgz",
-      "integrity": "sha512-ZdnbHmHEl8E5vN0GWDtONe5w6j3CrSqqxZM4hNLBPkV/aouWKug7D5/Mi6RazfYO5U4fmHQYLwMz60rHcx0G4g==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.20.0.tgz",
+      "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==",
       "bin": {
         "stencil": "bin/stencil"
       },

package.json

@@ -26,7 +26,7 @@
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.1",
     "@capacitor/status-bar": "6.0.0",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.3",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "swiper": "^11.1.4",
@@ -43,7 +43,7 @@
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "@angular/language-service": "^18.0.0",
-    "@capacitor/cli": "6.1.0",
+    "@capacitor/cli": "^6.1.0",
     "@ionic/angular-toolkit": "^11.0.1",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

src/app/app-routing.module.ts

@@ -1,16 +1,24 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
+import { RideRecordsComponent } from './ride-records/ride-records.component';
+import { RideRecordDetailComponent } from './ride-records/ride-record-detail/ride-record-detail.component';
+import { AddRideRecordComponent } from './ride-records/add-ride-record/add-ride-record.component';
 const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
+  { path: 'ride-records', component: RideRecordsComponent },
+  { path: 'ride-records/:id', component: RideRecordDetailComponent },
+  { path: 'add-ride-record', component: AddRideRecordComponent },
+  { path: '**', redirectTo: '/ride-records' }, // 捕获所有未匹配的路由并重定向
 ];
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
   ],
+
   exports: [RouterModule]
+  
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -4,11 +4,22 @@ import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { RideRecordsComponent } from './ride-records/ride-records.component';
+import { RideRecordDetailComponent } from './ride-records/ride-record-detail/ride-record-detail.component'; // 导入组件
+import { AddRideRecordComponent } from './ride-records/add-ride-record/add-ride-record.component'; // 导入组件
+
+
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    RideRecordsComponent,
+    RideRecordDetailComponent, // 确保组件在这里声明
+    AddRideRecordComponent // 确保组件在这里声明
+  ],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],

src/app/ride-records/add-ride-record/add-ride-record.component.html

@@ -0,0 +1,3 @@
+<p>
+  add-ride-record works!
+</p>

src/app/ride-records/add-ride-record/add-ride-record.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AddRideRecordComponent } from './add-ride-record.component';
+
+describe('AddRideRecordComponent', () => {
+  let component: AddRideRecordComponent;
+  let fixture: ComponentFixture<AddRideRecordComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddRideRecordComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddRideRecordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ride-records/add-ride-record/add-ride-record.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-ride-record',
+  templateUrl: './add-ride-record.component.html',
+  styleUrls: ['./add-ride-record.component.scss'],
+})
+export class AddRideRecordComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/ride-records/ride-record-detail/ride-record-detail.component.html

@@ -0,0 +1,10 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>骑行记录详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <p>记录 ID: {{ recordId }}</p>
+  <p>这里是骑行记录的详细信息...</p>
+</ion-content>

src/app/ride-records/ride-record-detail/ride-record-detail.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { RideRecordDetailComponent } from './ride-record-detail.component';
+
+describe('RideRecordDetailComponent', () => {
+  let component: RideRecordDetailComponent;
+  let fixture: ComponentFixture<RideRecordDetailComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RideRecordDetailComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RideRecordDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ride-records/ride-record-detail/ride-record-detail.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-ride-record-detail',
+  templateUrl: './ride-record-detail.component.html',
+  styleUrls: ['./ride-record-detail.component.scss']
+})
+export class RideRecordDetailComponent implements OnInit {
+  recordId: number | null = null;;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    const id = this.route.snapshot.paramMap.get('id'); // 获取路由参数
+    this.recordId = id ? +id : null; // 如果 id 不为 null，则转换为数字
+    // 根据 recordId 获取记录的详细信息
+  }
+}

src/app/ride-records/ride-records.component.html

@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>骑行记录</ion-title>
+    <ion-buttons slot="end">
+      <ion-button routerLink="/add-ride-record">
+        <ion-icon name="add" slot="start"></ion-icon>
+        添加记录
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let record of records" (click)="viewRecordDetail(record.id)">
+      <ion-label>
+        <h2>{{ record.title }}</h2>
+        <p>{{ record.distance }}</p>  
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/ride-records/ride-records.component.spec.ts

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

src/app/ride-records/ride-records.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-ride-records',
+  templateUrl: './ride-records.component.html',
+  styleUrls: ['./ride-records.component.scss'],
+})
+export class RideRecordsComponent  implements OnInit {
+  records = [
+    { id: 1, title: '骑行记录 1', distance: '10 km' },
+    { id: 2, title: '骑行记录 2', distance: '15 km' },
+    // 更多记录...
+  ];
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {}
+  viewRecordDetail(id: number) {
+    this.router.navigate(['/ride-records', id]); // 导航到骑行记录详情页
+  }
+
+}

src/app/tab1/tab1-routing.module.ts

@@ -1,11 +1,25 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Tab1Page } from './tab1.page';
-
+import { RideRecordsComponent } from '../ride-records/ride-records.component'; // 确保路径正确
+import { RideRecordDetailComponent } from '../ride-records/ride-record-detail/ride-record-detail.component'; // 确保路径正确
+import { AddRideRecordComponent } from '../ride-records/add-ride-record/add-ride-record.component'; // 确保路径正确
 const routes: Routes = [
   {
     path: '',
     component: Tab1Page,
+  },
+  {
+    path: 'ride-records',
+    component: RideRecordsComponent, // 添加骑行记录组件路由
+  },
+  {
+    path: 'ride-records/:id',
+    component: RideRecordDetailComponent, // 添加骑行记录详情组件路由
+  },
+  {
+    path: 'add-ride-record',
+    component: AddRideRecordComponent, // 添加添加骑行记录组件路由
   }
 ];
 

src/app/tab1/tab1.page.html

@@ -1,40 +1,88 @@
 <ion-header>
   <ion-toolbar color="primary">
-    <ion-title>模式</ion-title>
+    <ion-title >模式</ion-title>
+    <ion-buttons slot="end"> <!-- 将按钮放在右侧 -->
+      <ion-button (click)="viewRideRecords()" expand="block" routerLink="./ride-records/ride-records.component.html">
+        <ion-icon name="bike" slot="start"></ion-icon> <!-- 可以选择合适的图标 -->
+        骑行记录
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <!-- 竞赛模式区域 -->
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>竞赛模式</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <!-- 示例数据：竞赛模式相关内容 -->
-      <p>这里是竞赛模式的内容示例。</p>
-    </ion-card-content>
-  </ion-card>
+  <ion-segment value="竞赛模式" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="竞赛模式">
+      <ion-label>竞赛模式</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="锻炼模式">
+      <ion-label>锻炼模式</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="旅游模式">
+      <ion-label>旅游模式</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="自由模式">
+      <ion-label>自由模式</ion-label>
+    </ion-segment-button>
+  </ion-segment>
 
-  <!-- 锻炼模式区域 -->
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>锻炼模式</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <!-- 示例数据：锻炼模式相关内容 -->
-      <p>这里是锻炼模式的内容示例。</p>
-    </ion-card-content>
-  </ion-card>
+  <div [ngSwitch]="selectedSegment">
+    <div *ngSwitchCase="'竞赛模式'">
+      <ion-list lines="none">
+        <ion-item *ngFor="let mode of competitionModes" class="mode-item">
+          <ion-thumbnail slot="start">
+            <img [src]="mode.image" />
+          </ion-thumbnail>
+          <ion-label>
+            <h2>{{ mode.title }}</h2>
+            <p>{{ mode.description }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
 
-  <!-- 旅游模式区域 -->
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>旅游模式</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <!-- 示例数据：旅游模式相关内容 -->
-      <p>这里是旅游模式的内容示例。</p>
-    </ion-card-content>
-  </ion-card>
-</ion-content>
+    <div *ngSwitchCase="'锻炼模式'">
+      <ion-list lines="none">
+        <ion-item *ngFor="let mode of exerciseModes" class="mode-item">
+          <ion-thumbnail slot="start">
+            <img [src]="mode.image" />
+          </ion-thumbnail>
+          <ion-label>
+            <h2>{{ mode.title }}</h2>
+            <p>{{ mode.description }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div *ngSwitchCase="'旅游模式'">
+      <ion-list lines="none">
+        <ion-item *ngFor="let mode of travelModes" class="mode-item">
+          <ion-thumbnail slot="start">
+            <img [src]="mode.image" />
+          </ion-thumbnail>
+          <ion-label>
+            <h2>{{ mode.title }}</h2>
+            <p>{{ mode.description }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div *ngSwitchCase="'自由模式'">
+      <ion-list lines="none">
+        <ion-item *ngFor="let mode of freeModes"  class="mode-item">
+              <ion-thumbnail slot="start">
+                <img [src]="mode.image" />
+              </ion-thumbnail>
+              <ion-label>
+                <h2>{{ mode.title }}</h2>
+                <p>{{ mode.description }}</p>
+              </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+  </div>
+  <!-- <div *ngif="safeHTML" [innerHTML]="safeHML"></div> -->
+  <ico-button expand="block" routerLink="/tsdatetype">轮播图</ico-button>
+</ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,21 @@
+.mode-item {
+    margin-bottom: 20px; /* 根据需要调整间距 */
+  }
+
+  .mode-item ion-thumbnail {
+    width: 50px; /* 根据需要调整图片宽度 */
+    height: 50px; /* 根据需要调整图片高度 */
+  }
+  
+  .mode-item img {
+    width: 100%; /* 确保图片填满thumbnail */
+    height: auto; /* 保持纵横比 */
+  }
+
+  .mode-background {
+    background-color: #ba156a; /* 背景颜色 */
+    border-radius: 8px; /* 圆角边框 */
+    padding: 10px; /* 内边距 */
+    display: flex; /* 使内容横向排列 */
+    align-items: center; /* 垂直居中 */
+  }

src/app/tab1/tab1.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router'; // 导入 Router 如果你需要导航
 
 @Component({
   selector: 'app-tab1',
@@ -7,6 +8,109 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
-  constructor() {}
+  selectedSegment: string = '竞赛模式';
 
-}
+  competitionModes = [
+    {
+      title: '距离模式',
+      description: '在分开的高速公路上行驶完成距离',
+      image: 'assets/images/j01.png',
+    },
+    {
+      title: '炸弹模式',
+      description: '不要让速度下降或炸弹爆炸。',
+      image: 'assets/images/j02.png',
+    },
+    {
+      title: '高速模式',
+      description: '高速行驶，让时间增加。',
+      image: 'assets/images/j03.png',
+    },
+    {
+      title: '双向交通',
+      description: '开车即将到来的车道。',
+      image: 'assets/images/j04.png',
+    },
+  ];
+
+  exerciseModes = [
+    {
+      title: '耐力训练',
+      description: '提高你的耐力，挑战更长的距离。',
+      image: 'assets/images/s01.png',
+    },
+    {
+      title: '速度训练',
+      description: '专注于提高你的驾驶速度。',
+      image: 'assets/images/s02.png',
+    },
+    {
+      title: '技术训练',
+      description: '专注于提高骑行技术，包括转弯、刹车和加速等。',
+      image: 'assets/images/s03.png',
+    },
+    {
+      title: '个性化训练',
+      description: '根据用户的个人目标和能力定制训练计划。',
+      image: 'assets/images/s04.png',
+    },
+  ];
+
+  travelModes = [
+    {
+      title: '风景游',
+      description: '欣赏沿途的美丽风景。',
+      image: 'assets/images/l01.png',
+    },
+    {
+      title: '城市游',
+      description: '探索城市的每一个角落。',
+      image: 'assets/images/l02.png',
+    },
+    {
+      title: '定制游',
+      description: '由官方制作的旅游路线。',
+      image: 'assets/images/l03.png',
+    },
+    {
+      title: '探险游',
+      description: '探索野外的每一个角落。',
+      image: 'assets/images/l04.png',
+    },
+  ];
+
+  freeModes = [
+    {
+      title: '自由驾驶',
+      description: '在开放的道路上自由驾驶。',
+      image: 'assets/images/z01.png',
+    },
+    {
+      title: '冒险模式',
+      description: '挑战未知的道路与环境。',
+      image: 'assets/images/z02.png',
+    },
+    {
+      title: '团体骑行模式',
+      description: '用户可以与朋友或其他玩家一起骑行，进行团体活动。',
+      image: 'assets/images/z03.png',
+    },
+    {
+      title: '教育模式',
+      description: '结合骑行与教育，用户在骑行过程中学习相关知识，如环境保护、交通安全等。',
+      image: 'assets/images/z04.png',
+    },
+  ];
+
+  constructor(private router: Router) {} // 如果需要导航，可以注入 Router
+
+  segmentChanged(event: any) {
+    this.selectedSegment = event.detail.value;
+  }
+
+  viewRideRecords() {
+    console.log('骑行记录按钮被点击');
+    // 这里可以添加实际的逻辑，例如导航到骑行记录页面
+    // this.router.navigate(['/ride-records']); // 如果需要导航到骑行记录页面
+  }
+}

src/app/tab1/tempCodeRunnerFile.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>模式</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 竞赛模式区域 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>竞赛模式</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 示例数据：竞赛模式相关内容 -->
+      <p>这里是竞赛模式的内容示例。</p>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 锻炼模式区域 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>锻炼模式</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 示例数据：锻炼模式相关内容 -->
+      <p>这里是锻炼模式的内容示例。</p>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 旅游模式区域 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>旅游模式</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 示例数据：旅游模式相关内容 -->
+      <p>这里是旅游模式的内容示例。</p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/tab3/tab3.page.html

@@ -30,8 +30,8 @@
     <ion-card-content>
       <!-- 示例数据：用户名、头像、手机号 -->
       <ion-item>
-        <ion-avatar slot="start">
-          <img src="assets/avatar.jpg">
+        <ion-avatar slot="start"> 
+          <img src="https://via.placeholder.com/150">
         </ion-avatar>
         <ion-label>
           <h2>用户名</h2>
@@ -48,16 +48,32 @@
     </ion-card-header>
     <ion-card-content>
       <ion-list>
-        <!-- 退出登录 -->
-        <ion-item button (click)="logout()">
-          <ion-icon name="log-out" slot="start"></ion-icon>
-          <ion-label>退出登录</ion-label>
-        </ion-item>
-        
+         
+
+        <!-- 登录按钮 -->
+          <ion-item button (click)="login()">
+            <ion-icon name="person-add" slot="start"></ion-icon>
+            <ion-label>登录</ion-label>
+          </ion-item>
+
+
         <ion-item button (click)="register()">
           <ion-icon name="person-add" slot="start"></ion-icon>
           <ion-label>注册</ion-label>
         </ion-item>
+
+        <!-- 信息获取按钮 -->
+        <ion-item button (click)="getInfo()">
+          <ion-icon name="information-circle" slot="start"></ion-icon>
+          <ion-label>信息获取与更新</ion-label>
+        </ion-item>
+
+
+         <!-- 退出登录 -->
+         <ion-item button (click)="logout()">
+          <ion-icon name="log-out" slot="start"></ion-icon>
+          <ion-label>退出登录</ion-label>
+        </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>

src/app/tab3/tab3.page.ts

@@ -8,9 +8,11 @@ import { Component } from '@angular/core';
 export class Tab3Page {
 
   constructor() {}
-  logout() {
-    // 在这里编写退出登录的逻辑
-    console.log('用户退出登录');
+  
+  login() {
+    // 登录逻辑
+    console.log('登录按钮被点击');
+    // 这里可以添加实际的登录逻辑，例如导航到登录页面或提交表单
   }
 
   // 定义注册方法
@@ -19,4 +21,14 @@ export class Tab3Page {
     console.log('用户点击注册');
   }
 
+  getInfo() {
+    // 信息获取逻辑
+    console.log('信息获取按钮被点击');
+    // 这里可以添加实际的信息获取逻辑，例如调用API获取用户信息
+  }
+  
+  logout() {
+    // 在这里编写退出登录的逻辑
+    console.log('用户退出登录');
+  }
 }

src/app/tab4/tab4.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 4
+      通讯录
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -9,18 +9,18 @@
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 4</ion-title>
+      <ion-title size="large">通讯录</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-list>
-    <ion-item [lines]="'full'" [color]="'primary'" (click)="presentAlert">
+    <ion-item [lines]="'full'" [color]="'primary'" (click)="presentAlert()">
       <ion-avatar aria-hidden="true" slot="start">
         <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
       </ion-avatar>
       <ion-label>Huey</ion-label>
     </ion-item>
-    <ion-item [lines]="'inset'" [color]="'danger'">
+    <ion-item [lines]="'inset'" [color]="'danger'" (dblclick)="onDBLClick($event)">
       <ion-avatar aria-hidden="true" slot="start">
         <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
       </ion-avatar>
@@ -39,7 +39,7 @@
       <ion-label>Fooie</ion-label>
     </ion-item>
   </ion-list>
-  <app-explore-container name="Tab 4 page"></app-explore-container>
+  <!-- <app-explore-container name="Tab 4 page"></app-explore-container> -->
 </ion-content>
 
 

src/app/tab4/tab4.page.ts

@@ -35,6 +35,9 @@ export class tab4Page {
   }
   ngOnInit(){
 
+  }
+  onDBLClick(ev:Event){
+    console.log(ev)
   }
   async presentAlert() {
     const alert = await this.alertController.create({

src/app/tabs/tabs.page.html

@@ -2,7 +2,7 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+      <ion-icon aria-hidden="true" name="planet-outline"></ion-icon>
       <ion-label>模式</ion-label>
     </ion-tab-button>
 
@@ -11,15 +11,15 @@
       <ion-label>社区</ion-label>
     </ion-tab-button>
 
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
+      <ion-icon aria-hidden="true" name="people-outline"></ion-icon>
+      <ion-label>朋友</ion-label>
+    </ion-tab-button>
+
     <ion-tab-button tab="tab3" href="/tabs/tab3">
       <ion-icon aria-hidden="true" name="person"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
-
-    <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>消息</ion-label>
-    </ion-tab-button>
   </ion-tab-bar>
 
 </ion-tabs>

tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,