fix allhtml

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

@@ -1,12 +1,10 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      圈子
-    </ion-title>
+    <ion-title size="large">圈子</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>

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

@@ -1,7 +1,23 @@
+// ion-toolbar {
+//   display: flex;
+//   justify-content: space-between; // 使内容在两侧分开
+//   align-items: center; // 垂直居中对齐
+// }
+
 ion-title {
-    align:left;
+  flex: 1; // 使标题占据可用空间
+  text-align: left; // 确保文字左对齐
+  margin-left: 16px; // 左侧边距，可以根据需要调整
+  margin-top: 5px;
+}
+
+ion-buttons {
+  margin-right: 16px; // 右侧边距，可以根据需要调整
+  margin-top: 10px; // 设置按钮与上方内容的间距
+  border-radius: 5px; // 设置按钮圆角
 }
 
+
 ion-header {
     background-color: #3880ff; // 设置头部背景色
     color: white; // 设置头部文字颜色

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

@@ -1,17 +1,93 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title size="large">个性化推荐</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <!-- <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>
+  <app-explore-container name="Tab 2 page"></app-explore-container> -->
+
+    <!-- 用户画像区 -->
+    <section>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>用户画像</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-item>
+            <ion-avatar slot="start">
+              <img src="assets/user-avatar.png" alt="用户头像">
+            </ion-avatar>
+            <ion-label>
+              <h2>{{ username }}</h2>
+              <p>个性化标签: {{ userTags.join(', ') }}</p>
+            </ion-label>
+          </ion-item>
+        </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 movie of recommendedMovies">
+              <ion-thumbnail slot="start">
+                <img [src]="movie.coverImage" alt="{{ movie.title }} 封面">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>{{ movie.title }}</h2>
+                <p>评分: {{ movie.rating }}</p>
+                <p>{{ movie.description }}</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>
+          <p>{{ recommendationReason }}</p>
+        </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 similarMovie of similarMovies">
+              <ion-thumbnail slot="start">
+                <img [src]="similarMovie.coverImage" alt="{{ similarMovie.title }} 封面">
+              </ion-thumbnail>
+              <ion-label>
+                <h2>{{ similarMovie.title }}</h2>
+                <p>评分: {{ similarMovie.rating }}</p>
+                <p>{{ similarMovie.description }}</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+    </section>
 </ion-content>

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

@@ -0,0 +1,60 @@
+ion-title {
+    flex: 1; // 使标题占据可用空间
+    text-align: left; // 确保文字左对齐
+    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-top: 5px;
+  }
+
+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; // 设置列表项背景透明
+    margin: 5px 0; // 设置列表项上下间距
+  }
+  
+  ion-label {
+    color: #333; // 设置标签文字颜色
+  }
+  
+  h2 {
+    font-size: 1em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+  }
+  
+  p {
+    font-size: 0.9em; // 设置段落字体大小
+    color: #666; // 设置段落文字颜色
+  }
+  
+  ion-thumbnail {
+    width: 100px; // 设置封面图宽度
+    height: 150px; // 设置封面图高度
+  }
+  
+  ion-avatar {
+    border-radius: 50%; // 设置头像圆形
+    width: 50px; // 设置头像宽度
+    height: 50px; // 设置头像高度
+  }
+  
+  ion-card-content {
+    padding: 10px; // 设置卡片内容内边距
+  }

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

@@ -1,16 +1,59 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, 
+  IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
+  IonItem, IonAvatar, IonLabel, IonList, IonThumbnail } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
+    IonItem, IonAvatar, IonLabel, IonList, IonThumbnail, 
+  ]
 })
 export class Tab2Page {
 
-  constructor() {}
+  username: string = '用户A'; // 用户名
+  userTags: string[] = ['喜剧迷', '动作片爱好者']; // 用户个性化标签
+  
+  recommendedMovies = [
+    {
+      title: '某某剧名1',
+      rating: '9.0',
+      description: '这是一部精彩的剧集，讲述了...',
+      coverImage: 'assets/movie1.jpg',
+    },
+    {
+      title: '某某剧名2',
+      rating: '8.5',
+      description: '这部剧集以其独特的视角吸引了观众...',
+      coverImage: 'assets/movie2.jpg',
+    },
+    // 其他推荐影视剧...
+  ];
+
+  recommendationReason: string = '根据您的观看历史推荐。'; // 推荐理由
+
+  similarMovies = [
+    {
+      title: '您可能喜欢的剧名1',
+      rating: '8.0',
+      description: '这部剧与您喜欢的风格相似...',
+      coverImage: 'assets/similar1.jpg',
+    },
+    {
+      title: '您可能喜欢的剧名2',
+      rating: '7.5',
+      description: '这部剧是基于相同主题的...',
+      coverImage: 'assets/similar2.jpg',
+    },
+    // 其他可能喜欢的影视剧...
+  ];
 
 }

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

@@ -1,17 +1,59 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title size="large">角色互动</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <!-- <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Tab 3</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <app-explore-container name="Tab 3 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 character of characters" (click)="selectCharacter(character)">
+              <ion-avatar slot="start">
+                <img [src]="character.avatar" alt="{{ character.name }} 头像">
+              </ion-avatar>
+              <ion-label>
+                <h2>{{ character.name }}</h2>
+                <p>{{ character.description }}</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-card-content>
+      </ion-card>
+    </section>
+  
+    <!-- 角色对话区 -->
+    <section *ngIf="selectedCharacter">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>与 {{ selectedCharacter.name }} 对话</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div class="chat-area">
+            <div *ngFor="let message of chatMessages" class="message">
+              <strong>{{ message.sender }}:</strong> {{ message.text }}
+            </div>
+          </div>
+          <ion-item>
+            <ion-input [(ngModel)]="userMessage" placeholder="输入您的消息..."></ion-input>
+            <ion-button (click)="sendMessage()" slot="end">
+              <ion-icon name="send"></ion-icon>
+            </ion-button>
+          </ion-item>
+        </ion-card-content>
+      </ion-card>
+    </section>
 </ion-content>

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

@@ -0,0 +1,51 @@
+ion-title {
+    flex: 1; // 使标题占据可用空间
+    text-align: left; // 确保文字左对齐
+    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-top: 5px;
+  }
+
+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-avatar {
+    border-radius: 50%; // 设置头像圆形
+    width: 50px; // 设置头像宽度
+    height: 50px; // 设置头像高度
+  }
+  
+  h2 {
+    font-size: 1em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+  }
+  
+  p {
+    font-size: 0.9em; // 设置段落字体大小
+    color: #666; // 设置段落文字颜色
+  }
+  
+  ion-thumbnail {
+    width: 100px; // 设置封面图宽度
+    height: 150px; // 设置封面图高度
+  }

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

@@ -1,14 +1,78 @@
-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,
+  IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+  IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon
+ } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
+
+interface Character {
+  name: string;
+  avatar: string;
+  description: string;
+}
+
+interface Message {
+  sender: string;
+  text: string;
+}
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab3Page {
-  constructor() {}
+  characters: Character[] = [
+    {
+      name: '角色A',
+      avatar: 'assets/character-a.png',
+      description: '角色A的简介...',
+    },
+    {
+      name: '角色B',
+      avatar: 'assets/character-b.png',
+      description: '角色B的简介...',
+    },
+    {
+      name: '角色C',
+      avatar: 'assets/character-c.png',
+      description: '角色C的简介...',
+    },
+  ];
+
+  selectedCharacter: Character | null = null; // 当前选择的角色
+  chatMessages: Message[] = []; // 聊天消息列表
+  userMessage: string = ''; // 用户输入的消息
+
+  selectCharacter(character: Character) {
+    this.selectedCharacter = character;
+    this.chatMessages = []; // 清空聊天记录
+  }
+
+  sendMessage() {
+    if (this.userMessage.trim()) {
+      this.chatMessages.push({
+        sender: '您',
+        text: this.userMessage,
+      });
+      this.userMessage = ''; // 清空输入框
+      // 模拟角色的回复
+      setTimeout(() => {
+        this.chatMessages.push({
+          sender: this.selectedCharacter?.name || '角色',
+          text: '这是角色的回复。',
+        });
+      }, 1000);
+    }
+  }
 }

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

@@ -1,18 +1,107 @@
 <ion-header [translucent]="true">
     <ion-toolbar>
-      <ion-title>
-        Tab 4
-      </ion-title>
+      <ion-title size="large">个人中心</ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content [fullscreen]="true">
-    <ion-header collapse="condense">
+    <!-- <ion-header collapse="condense">
       <ion-toolbar>
         <ion-title size="large">Tab 4</ion-title>
       </ion-toolbar>
     </ion-header>
   
-    <app-explore-container name="Tab 4 page"></app-explore-container>
+    <app-explore-container name="Tab 4 page"></app-explore-container> -->
+
+      <!-- 用户信息区 -->
+  <section>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>用户信息</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item>
+          <ion-avatar slot="start">
+            <img src="assets/user-avatar.png" alt="用户头像">
+          </ion-avatar>
+          <ion-label>
+            <h2>{{ username }}</h2>
+          </ion-label>
+          <ion-button slot="end" (click)="editProfile()">
+            <ion-icon name="create"></ion-icon>
+            编辑资料
+          </ion-button>
+        </ion-item>
+      </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 movie of favoriteMovies">
+            <ion-thumbnail slot="start">
+              <img [src]="movie.coverImage" alt="{{ movie.title }} 封面">
+            </ion-thumbnail>
+            <ion-label>
+              <h2>{{ movie.title }}</h2>
+              <p>评分: {{ movie.rating }}</p>
+              <p>{{ movie.description }}</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 userPosts">
+            <ion-label>
+              <h2>{{ post.title }}</h2>
+              <p>时间: {{ post.date }}</p>
+              <p>评论数: {{ post.comments }}</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 button (click)="navigateTo('profile-settings')">
+            <ion-icon slot="start" name="person"></ion-icon>
+            <ion-label>个人信息设置</ion-label>
+          </ion-item>
+          <ion-item button (click)="navigateTo('privacy-settings')">
+            <ion-icon slot="start" name="lock"></ion-icon>
+            <ion-label>隐私设置</ion-label>
+          </ion-item>
+          <ion-item button (click)="navigateTo('notification-settings')">
+            <ion-icon slot="start" name="notifications"></ion-icon>
+            <ion-label>通知设置</ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+  </section>
   </ion-content>
   

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

@@ -0,0 +1,56 @@
+ion-title {
+    flex: 1; // 使标题占据可用空间
+    text-align: left; // 确保文字左对齐
+    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-top: 5px;
+  }
+
+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-avatar {
+    border-radius: 50%; // 设置头像圆形
+    width: 50px; // 设置头像宽度
+    height: 50px; // 设置头像高度
+  }
+  
+  h2 {
+    font-size: 1em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+  }
+  
+  p {
+    font-size: 0.9em; // 设置段落字体大小
+    color: #666; // 设置段落��字颜色
+  }
+  
+  ion-thumbnail {
+    width: 100px; // 设置封面图宽度
+    height: 150px; // 设置封面图高度
+  }
+  
+  ion-button {
+    --background: #3880ff; // 设置按钮背景色
+    --color: white; // 设置按钮文字颜色
+  }

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

@@ -1,14 +1,76 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonContent,
+  IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+  IonList, IonItem, IonLabel, IonAvatar, IonButton, IonIcon, IonThumbnail, 
+} from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
 
+interface Movie {
+  title: string;
+  rating: string;
+  description: string;
+  coverImage: string;
+}
+
+interface Post {
+  title: string;
+  date: string;
+  comments: number;
+}
 @Component({
   selector: 'app-tab4',
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    CommonModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonCard, IonCardHeader, IonCardTitle, IonCardContent,
+    IonList, IonItem, IonLabel, IonAvatar, IonButton, IonIcon, IonThumbnail,
+  ],
 })
 export class Tab4Page {
-  constructor() {}
+  username: string = '用户A'; // 用户名
+
+  favoriteMovies: Movie[] = [
+    {
+      title: '某某剧名1',
+      rating: '9.0',
+      description: '这是一部精彩的剧集，讲述了...',
+      coverImage: 'assets/movie1.jpg',
+    },
+    {
+      title: '某某剧名2',
+      rating: '8.5',
+      description: '这部剧集以其独特的视角吸引了观众...',
+      coverImage: 'assets/movie2.jpg',
+    },
+    // 其他收藏的影视剧...
+  ];
+
+  userPosts: Post[] = [
+    {
+      title: '对《某某剧名》的看法',
+      date: '2024-11-20',
+      comments: 5,
+    },
+    {
+      title: '最新剧集讨论',
+      date: '2024-11-18',
+      comments: 2,
+    },
+    // 其他用户发帖...
+  ];
+
+  editProfile() {
+    // 编辑资料逻辑
+    console.log('编辑资料');
+  }
+
+  navigateTo(setting: string) {
+    // 导航到设置页面逻辑
+    console.log(`导航到 ${setting}`);
+  }
 }