feat:2

src/app/tab1/tab1.page.html

@@ -1,17 +1,126 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-title *ngIf="!isSearching">首页</ion-title>
+    <ion-searchbar *ngIf="isSearching" [(ngModel)]="searchQuery" (ionInput)="filterChats()" placeholder="搜一搜"></ion-searchbar>
+    <ion-buttons slot="end">
+      <ion-button *ngIf="isSearching" (click)="hideSearch()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+      <ion-button *ngIf="!isSearching" (click)="showSearch()">
+        <ion-icon name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </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>
+<ion-content>
+  <div *ngIf="!isSearching">
+    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
+      <ion-segment-button value="online">
+        <ion-label>线上陪玩</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="offline">
+        <ion-label>线下陪玩</ion-label>
+      </ion-segment-button>
+    </ion-segment>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+    <div *ngIf="selectedSegment === 'online'" class="scroll-container">
+      <div class="scroll-content">
+        <ion-chip>
+          <ion-label>王者荣耀</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>永劫无间</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>CS:GO</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>steam专区</ion-label>
+        </ion-chip>
+      </div>
+    </div>
+
+    <div *ngIf="selectedSegment === 'offline'" class="scroll-container">
+      <div class="scroll-content">
+        <ion-chip>
+          <ion-label>篮球</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>台球</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>羽毛球</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>钓鱼</ion-label>
+        </ion-chip>
+      </div>
+    </div>
+
+    <ion-list>
+      <ion-list-header>
+        <ion-label>陪玩类型</ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-chip>
+          <ion-label>技术大神</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>包赢承诺</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>优质声优</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>同城代练</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-label>娱乐球局</ion-label>
+        </ion-chip>
+      </ion-item>
+    </ion-list>
+
+    <ion-list>
+      <ion-list-header>
+        <ion-label>推荐的陪玩</ion-label>
+      </ion-list-header>
+      <ion-item *ngFor="let player of recommendedPlayers">
+        <ion-avatar slot="start">
+          <img [src]="player.avatar" />
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ player.name }}</h2>
+          <p>{{ player.info }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <div *ngIf="isSearching">
+    <ion-list>
+      <ion-item>
+        <ion-label>历史搜索</ion-label>
+      </ion-item>
+      <ion-item *ngFor="let history of searchHistory">
+        <ion-label>{{ history }}</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>猜你想搜</ion-label>
+      </ion-item>
+      <ion-item *ngFor="let suggestion of searchSuggestions">
+        <ion-label [innerHTML]="suggestion"></ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>热门房间</ion-label>
+      </ion-item>
+      <div class="room-container">
+        <div *ngFor="let room of popularRooms" class="room-box">
+          <img [src]="room.image" />
+          <div>{{ room.title }}</div>
+          <div>{{ room.subtitle }}</div>
+        </div>
+      </div>
+    </ion-list>
+  </div>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,38 @@
+ion-toolbar {
+  --background: #3880ff;
+}
+
+ion-avatar {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+ion-label h2 {
+  font-weight: bold;
+}
+
+ion-label p {
+  color: gray;
+}
+
+ion-searchbar {
+  margin: 10px;
+}
+
+ion-row {
+  margin-top: 20px;
+}
+
+ion-card {
+  text-align: center;
+}
+
+.scroll-container {
+  display: flex;
+  overflow-x: scroll;
+  white-space: nowrap;
+}
+
+.scroll-content {
+  display: inline-flex;
+}

src/app/tab1/tab1.page.ts

@@ -1,12 +1,53 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
+  selector: 'app-home',
+  templateUrl: 'Tab1.page.html',
+  styleUrls: ['Tab1.page.scss'],
 })
 export class Tab1Page {
+  isSearching = false;
+  searchQuery = '';
+  filteredItems: string[] = [];
+  searchHistory = ['历史搜索项1', '历史搜索项2'];
+  searchSuggestions = [
+    '比心十周年·免单真金等你拿',
+    '十年如初·因你而延续'
+  ];
+  popularRooms = [
+    { title: '故事读文💗心安', subtitle: '直播间', image: 'assets/room1.jpg' },
+    { title: '欢迎来到大东北', subtitle: '聊天室', image: 'assets/room2.jpg' },
+    { title: '有听过这样温柔...', subtitle: '聊天室', image: 'assets/room3.jpg' },
+    { title: '[配对]赖 c', subtitle: '80s💗', image: 'assets/room4.jpg' },
+    { title: '[海龟汤] 0707', subtitle: 'DM.狐狸✌️', image: 'assets/room5.jpg' },
+    { title: '浪漫播客🎧💗...', subtitle: '浪漫播客.小 e', image: 'assets/room6.jpg' }
+  ];
+
+  recommendedPlayers = [
+    { name: 'Player 1', info: '技术大神', avatar: 'assets/avatar1.png' },
+    { name: 'Player 2', info: '包赢承诺', avatar: 'assets/avatar2.png' },
+    { name: 'Player 3', info: '优质声优', avatar: 'assets/avatar3.png' },
+    { name: 'Player 4', info: '同城代练', avatar: 'assets/avatar4.png' },
+  ];
+
+  selectedSegment = 'online';
 
   constructor() {}
 
+  showSearch() {
+    this.isSearching = true;
+  }
+
+  hideSearch() {
+    this.isSearching = false;
+  }
+
+  segmentChanged(event: any) {
+    this.selectedSegment = event.detail.value;
+  }
+
+  filterChats() {
+    const query = this.searchQuery.toLowerCase();
+    this.filteredItems = this.recommendedPlayers.filter(player => player.name.toLowerCase().includes(query)).map(player => player.name);
+  }
 }

src/app/tab2/tab2.page.html

@@ -1,17 +1,32 @@
-<ion-header [translucent]="true">
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>聊天</ion-title>
+  </ion-toolbar>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-icon name="chatbubbles" slot="icon-only"></ion-icon>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="person-add"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let chat of chats">
+      <ion-avatar slot="start">
+        <img [src]="chat.avatar" />
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ chat.name }}</h2>
+        <p>{{ chat.lastMessage }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,17 @@
+ion-toolbar {
+    --background: #3880ff;
+  }
+  
+  ion-avatar {
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  
+  ion-label h2 {
+    font-weight: bold;
+  }
+  
+  ion-label p {
+    color: gray;
+  }
+  

src/app/tab2/tab2.page.ts

@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
+  selector: 'app-chat',
+  templateUrl: 'Tab2.page.html',
+  styleUrls: ['Tab2.page.scss'],
 })
 export class Tab2Page {
-
   constructor() {}
 
+  chats = [
+    { name: 'Chat Room 1', lastMessage: 'Hello!', avatar: 'assets/avatar1.png' },
+    { name: 'Chat Room 2', lastMessage: 'How are you?', avatar: 'assets/avatar2.png' },
+    { name: 'Chat Room 3', lastMessage: 'Good morning!', avatar: 'assets/avatar3.png' },
+    { name: 'Chat Room 4', lastMessage: 'Let\'s play!', avatar: 'assets/avatar4.png' },
+  ];
 }

src/app/tab3/tab3.page.html

@@ -1,17 +1,101 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button>
+        <ion-icon name="wallet-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>我的</ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="menu-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <div class="profile-header">
+    <ion-avatar class="profile-avatar">
+      <img src="https://example.com/avatar.jpg" alt="Avatar">
+    </ion-avatar>
+    <div class="profile-info">
+      <div class="profile-name">
+        <span>,</span> <span role="img">🔥</span><span role="img">🐷</span><span role="img">🎄</span><span role="img">🐰</span><span role="img">🏈</span>
+      </div>
+      <div class="profile-id">ID 166379788</div>
+    </div>
+    <ion-button fill="outline" class="edit-button">
+      <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+    </ion-button>
+  </div>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col>
+          <ion-label>0</ion-label>
+          <ion-note>获赞</ion-note>
+        </ion-col>
+        <ion-col>
+          <ion-label>0</ion-label>
+          <ion-note>关注</ion-note>
+        </ion-col>
+        <ion-col>
+          <ion-label>0</ion-label>
+          <ion-note>足迹</ion-note>
+        </ion-col>
+        <ion-col>
+          <ion-label>0</ion-label>
+          <ion-note>访客</ion-note>
+        </ion-col>
+        <ion-col>
+          <ion-label>0</ion-label>
+          <ion-note>粉丝</ion-note>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        <ion-icon name="location-outline"></ion-icon>
+        <span>江西</span> <span>巨蟹座</span> <span>王者荣耀</span> <span>LOL</span> <span>永劫无间</span> <span>CS:GO</span> <span>Steam专区</span>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-segment [(ngModel)]="segment">
+    <ion-segment-button value="posts">
+      <ion-label>动态</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="about">
+      <ion-label>关于ta</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div [ngSwitch]="segment">
+    <ion-list *ngSwitchCase="'posts'">
+      <ion-item>
+        <ion-label>
+          <h2>初来乍到，新人求罩，哈哈</h2>
+          <p>发布于 07-04</p>
+        </ion-label>
+        <ion-thumbnail slot="end">
+          <img src="https://example.com/game-icons.jpg" />
+        </ion-thumbnail>
+      </ion-item>
+    </ion-list>
+
+    <div *ngSwitchCase="'about'">
+      <p>这是关于ta的内容</p>
+    </div>
+  </div>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="camera-outline"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,51 @@
+.profile-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background-color: #fff;
+  
+    .profile-avatar {
+      --size: 80px;
+      margin-right: 16px;
+    }
+  
+    .profile-info {
+      flex: 1;
+  
+      .profile-name {
+        font-size: 20px;
+        font-weight: bold;
+      }
+  
+      .profile-id {
+        font-size: 14px;
+        color: #888;
+      }
+    }
+  
+    .edit-button {
+      --border-radius: 50%;
+    }
+  }
+  
+  ion-card {
+    margin: 0;
+    padding: 16px;
+  }
+  
+  ion-list {
+    margin-top: 16px;
+  }
+  
+  ion-segment {
+    margin: 16px;
+  }
+  
+  ion-fab {
+    ion-fab-button {
+      --border-radius: 50%;
+      --size: 56px;
+      --background: #3880ff;
+    }
+  }
+  

src/app/tab3/tab3.page.ts

@@ -1,12 +1,37 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
+  selector: 'app-my',
+  templateUrl: 'Tab3.page.html',
+  styleUrls: ['Tab3.page.scss'],
 })
 export class Tab3Page {
+  segment = 'posts';
+  searchQuery = '';
+  searchHistory = ['历史搜索项1', '历史搜索项2'];
+  searchSuggestions = ['猜你想搜1', '猜你想搜2', '猜你想搜3'];
+  popularRooms = [
+    { image: 'https://example.com/room1.jpg', title: '房间1', subtitle: 'subtitle1' },
+    { image: 'https://example.com/room2.jpg', title: '房间2', subtitle: 'subtitle2' }
+  ];
+  isSearching: boolean | undefined;
 
   constructor() {}
 
+  showSearch() {
+    this.isSearching = true;
+  }
+
+  hideSearch() {
+    this.isSearching = false;
+    this.searchQuery = '';
+  }
+
+  filterChats() {
+    // Implement your search logic here
+  }
+
+  segmentChanged(event: any) {
+    this.segment = event.detail.value;
+  }
 }