fix 11

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

@@ -3,15 +3,99 @@
     <ion-title>
       圈子
     </ion-title>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <!-- <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">圈子</ion-title>
     </ion-toolbar>
-  </ion-header>
+  </ion-header> -->
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <!-- 热门话题区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>热门话题</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let topic of topics">
+            <ion-label>
+              <h2>{{ topic.title }}</h2>
+              <p>参与人数: {{ topic.participants }} | 热度: {{ topic.popularity }}</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <!-- 话题讨论区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>讨论区</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let post of posts">
+            <ion-label>
+              <h2>{{ post.title }}</h2>
+              <p>作者: {{ post.author }} | 评论数: {{ post.comments }} | 热度: {{ post.popularity }}</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <!-- 发帖区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>发帖</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item>
+          <ion-label position="floating">发帖标题</ion-label>
+          <ion-input [(ngModel)]="newPost.title"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="floating">发帖内容</ion-label>
+          <ion-textarea [(ngModel)]="newPost.content"></ion-textarea>
+        </ion-item>
+        <ion-button expand="full" (click)="submitPost()">发布</ion-button>
+      </ion-card-content>
+    </ion-card>
+  </section>
+
+  <!-- 评论区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>评论区</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item *ngFor="let comment of comments">
+            <ion-avatar slot="start">
+              <img [src]="comment.userAvatar">
+            </ion-avatar>
+            <ion-label>
+              <h2>{{ comment.username }}</h2>
+              <p>{{ comment.content }}</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
+   <!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->
 </ion-content>

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

@@ -0,0 +1,62 @@
+ion-title {
+    align:left;
+}
+
+ion-header {
+    background-color: #3880ff; // 设置头部背景色
+    color: white; // 设置头部文字颜色
+  }
+  
+  ion-card {
+    margin: 10px; // 设置卡片之间的间距
+    border-radius: 10px; // 设置卡片圆角
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+  }
+  
+  ion-card-header {
+    background-color: #f0f0f0; // 设置卡片头部背景色
+  }
+  
+  ion-card-title {
+    font-size: 1.2em; // 设置卡片标题字体大小
+    font-weight: bold; // 设置卡片标题字体加粗
+  }
+  
+  ion-item {
+    --ion-item-background: transparent; // 设置列表项背景透明
+  }
+  
+  ion-label {
+    color: #333; // 设置标签文字颜色
+  }
+  
+  ion-button {
+    --background: #3880ff; // 设置按钮背景色
+    --color: white; // 设置按钮文字颜色
+    margin-top: 10px; // 设置按钮与上方内容的间距
+    border-radius: 5px; // 设置按钮圆角
+  }
+  
+  ion-avatar {
+    border-radius: 50%; // 设置头像圆形
+    width: 40px; // 设置头像宽度
+    height: 40px; // 设置头像高度
+  }
+  
+  h2 {
+    font-size: 1em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+  }
+  
+  p {
+    font-size: 0.9em; // 设置段落字体大小
+    color: #666; // 设置段落文字颜色
+  }
+  
+  ion-list {
+    padding: 0; // 去掉列表内边距
+  }
+  
+  ion-card-content {
+    padding: 10px; // 设置卡片内容内边距
+  }

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

@@ -1,13 +1,59 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonContent, 
+  IonButton, IonButtons, IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+  IonItem, IonLabel, IonList, IonInput, IonTextarea, IonAvatar  } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+ 
+    IonButton, IonButtons, IonIcon, 
+
+    IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonTextarea,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab1Page {
-  constructor() {}
+  topics = [
+    { title: '年度最佳剧集', participants: 120, popularity: '⭐⭐⭐⭐⭐' },
+    { title: '经典电影回顾', participants: 80, popularity: '⭐⭐⭐⭐' },
+    { title: '新剧推荐', participants: 200, popularity: '⭐⭐⭐⭐⭐⭐' },
+  ];
+
+  posts = [
+    { title: '对《某某剧名》的看法', author: '用户A', comments: 5, popularity: '⭐⭐⭐⭐⭐' },
+    { title: '最新剧集讨论', author: '用户B', comments: 2, popularity: '⭐⭐⭐⭐' },
+  ];
+
+  newPost = {
+    title: '',
+    content: ''
+  };
+
+  comments = [
+    { username: '用户C', content: '我觉得这部剧非常精彩！', userAvatar: 'assets/avatar1.png' },
+    { username: '用户D', content: '剧情发展很吸引人！', userAvatar: 'assets/avatar2.png' },
+  ];
+
+  submitPost() {
+    if (this.newPost.title && this.newPost.content) {
+      this.posts.push({
+        title: this.newPost.title,
+        author: '当前用户', // 这里可以替换为实际用户
+        comments: 0,
+        popularity: '⭐⭐' // 默认热度
+      });
+      this.newPost.title = '';
+      this.newPost.content = '';
+    }
+  }
 }