fix:ele

MoYun-app/src/app/app.component.scss

@@ -0,0 +1 @@
+// 检查是否有影响全局布局的样式

MoYun-app/src/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule, 
+    IonicModule.forRoot(), 
+    CommonModule
+  ],
+  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {} 

MoYun-app/src/app/app.routes.ts

@@ -1,8 +1,64 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TabsPage } from './tabs/tabs.page';
+import { LearningPage } from './tab1/learning/learning.page'; // 导入学习页面
+import { TestingPage } from './tab1/testing/testing.page'; // 导入在线测试页面
+import { PlanningPage } from './tab1/planning/planning.page'; // 导入学习计划页面
+import { QnaPage } from './tab1/qna/qna.page'; // 导入智能问答页面
 
 export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab1',
+        loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () => import('./tab2/tab2.page').then(m => m.Tab2Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () => import('./tab3/tab3.page').then(m => m.Tab3Page),
+      },
+      {
+        path: 'tab4',
+        loadComponent: () => import('./tab4/tab4.page').then(m => m.Tab4Page),
+      },
+      {
+        path: '',
+        redirectTo: 'tab1',
+        pathMatch: 'full',
+      },
+    ]
+  },
+  {
+    path: 'learning',
+    loadComponent: () => import('./tab1/learning/learning.page').then(m => m.LearningPage),
+  },
+  {
+    path: 'testing',
+    loadComponent: () => import('./tab1/testing/testing.page').then(m => m.TestingPage),
+  },
+  {
+    path: 'planning',
+    loadComponent: () => import('./tab1/planning/planning.page').then(m => m.PlanningPage),
+  },
+  {
+    path: 'qna',
+    loadComponent: () => import('./tab1/qna/qna.page').then(m => m.QnaPage),
+  },
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+    redirectTo: '/tabs/tab1',
+    pathMatch: 'full',
   },
 ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

MoYun-app/src/app/tab1/learning/learning.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      学习
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">学习</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

MoYun-app/src/app/tab1/learning/learning.page.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonBackButton,
+  IonButtons
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-learning',
+  templateUrl: './learning.page.html',
+  styleUrls: ['./learning.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBackButton,
+    IonButtons
+  ]
+})
+export class LearningPage {
+  constructor() {}
+}

MoYun-app/src/app/tab1/planning/planning.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      计划
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">计划</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

MoYun-app/src/app/tab1/planning/planning.page.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonBackButton,
+  IonButtons
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-planning',
+  templateUrl: './planning.page.html',
+  styleUrls: ['./planning.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBackButton,
+    IonButtons
+  ]
+})
+export class PlanningPage {
+  constructor() {}
+}

MoYun-app/src/app/tab1/qna/qna.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      问答
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">问答</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

MoYun-app/src/app/tab1/qna/qna.page.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonBackButton,
+  IonButtons
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-qna',
+  templateUrl: './qna.page.html',
+  styleUrls: ['./qna.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBackButton,
+    IonButtons
+  ]
+})
+export class QnaPage {
+  constructor() {}
+}

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

@@ -1,24 +1,7 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-   
-    <!-- 添加搜索框 -->
-    <ion-searchbar placeholder="搜索..." (ionInput)="onSearch($event)"></ion-searchbar>
-  </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>
-
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
-<!-- <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 1
+      首页
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -26,9 +9,58 @@
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-title size="large">学习</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content> -->
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6">
+        <ion-card (click)="navigateTo('/learning')" class="feature-card">
+          <ion-card-header>
+            <ion-card-title>学习</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="book" slot="start"></ion-icon>
+            点击进入学习页面
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      <ion-col size="6">
+        <ion-card (click)="navigateTo('/testing')" class="feature-card">
+          <ion-card-header>
+            <ion-card-title>测试</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="create" slot="start"></ion-icon>
+            点击进入测试页面
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="6">
+        <ion-card (click)="navigateTo('/planning')" class="feature-card">
+          <ion-card-header>
+            <ion-card-title>计划</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="calendar" slot="start"></ion-icon>
+            点击进入计划页面
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      <ion-col size="6">
+        <ion-card (click)="navigateTo('/qna')" class="feature-card">
+          <ion-card-header>
+            <ion-card-title>问答</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="chatbubbles" slot="start"></ion-icon>
+            点击进入问答页面
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

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

@@ -0,0 +1,170 @@
+ion-content {
+  --background: #F5E6D3;
+  background: linear-gradient(135deg, #F5E6D3 0%, #E6D5C3 100%);
+}
+
+// 搜索卡片样式
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
+  background: #FFF8DC;
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+  }
+  
+  ion-searchbar {
+    --background: rgba(255, 248, 220, 0.8);
+    --border-radius: 8px;
+    --box-shadow: none;
+    --placeholder-color: #8B4513;
+    padding: 0;
+  }
+}
+
+// Logo样式
+.logo-wrapper {
+  text-align: center;
+  padding: 16px 0;
+  
+  img {
+    width: 120px;
+    height: auto;
+  }
+}
+
+// 功能卡片样式
+.feature-card {
+  height: 100%;
+  margin: 0;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  cursor: pointer;
+  transition: transform 0.2s;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  ion-card-content {
+    padding: 16px;
+    
+    ion-icon {
+      font-size: 24px;
+      color: #8B4513;
+      margin-right: 8px;
+    }
+
+    h3 {
+      margin: 8px 0;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      color: var(--ion-color-medium);
+    }
+  }
+}
+
+// 网格布局样式
+ion-grid {
+  padding: 16px;
+}
+
+ion-row {
+  margin: 0 -8px;
+}
+
+ion-col {
+  padding: 8px;
+}
+
+// 卡片通用样式
+ion-card {
+  margin: 10px;
+  text-align: center;
+}
+
+ion-icon {
+  font-size: 48px;
+}
+
+ion-card-title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+ion-searchbar {
+  margin: 16px;
+  --background: rgba(255, 248, 220, 0.8);
+  --placeholder-color: #8B4513;
+  --box-shadow: none;
+  --border-radius: 8px;
+}
+
+// 进度条样式（如果需要的话）
+ion-progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  --progress-background: var(--ion-color-primary);
+  --buffer-background: rgba(var(--ion-color-primary-rgb), 0.2);
+}
+
+// 进度统计样式（如果需要的话）
+.progress-stats {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--ion-color-medium);
+}
+
+// 按钮样式
+.feature-button {
+  height: 120px;
+  margin: 8px;
+  --background: #FFF8DC;
+  --background-hover: #F5E6D3;
+  --background-activated: #E6D5C3;
+  --border-radius: 12px;
+  --border-color: rgba(139, 69, 19, 0.2);
+  --border-style: solid;
+  --border-width: 1px;
+  --box-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
+  --color: #2C1810;
+  --ripple-color: rgba(139, 69, 19, 0.1);
+
+  .button-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    
+    ion-icon {
+      font-size: 32px;
+      margin-bottom: 8px;
+      color: #8B4513;
+    }
+
+    .button-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #2C1810;
+    }
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    transition: transform 0.3s ease;
+  }
+}

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

@@ -1,36 +1,44 @@
-// import { Component } from '@angular/core';
-// import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-
-// @Component({
-//   selector: 'app-tab1',
-//   templateUrl: 'tab1.page.html',
-//   styleUrls: ['tab1.page.scss'],
-//   standalone: true,
-//   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
-// })
-// export class Tab1Page {
-//   constructor() {}
-// }
-
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar } from '@ionic/angular/standalone'; // 导入 IonSearchbar
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Router } from '@angular/router';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonIcon
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, ExploreContainerComponent], // 添加 IonSearchbar
+  imports: [
+    IonHeader, 
+    IonToolbar, 
+    IonTitle, 
+    IonContent,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonIcon
+  ]
 })
 export class Tab1Page {
-  constructor() {}
+  constructor(private router: Router) {}
 
-  // 添加搜索处理方法
-  onSearch(event: any) {
-    const searchTerm = event.target.value; // 获取搜索框的值
-    console.log('搜索内容:', searchTerm);
-    // 在这里实现你的搜索逻辑
+  navigateTo(page: string) {
+    this.router.navigate([page]);
   }
 }

MoYun-app/src/app/tab1/testing/testing.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      测试
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">测试</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

MoYun-app/src/app/tab1/testing/testing.page.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonBackButton,
+  IonButtons
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-testing',
+  templateUrl: './testing.page.html',
+  styleUrls: ['./testing.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBackButton,
+    IonButtons
+  ]
+})
+export class TestingPage {
+  constructor() {}
+}

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

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+      对战
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -9,9 +9,7 @@
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
+      <ion-title size="large">对战</ion-title>
     </ion-toolbar>
   </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
 </ion-content>

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

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent]
 })
 export class Tab2Page {
 

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

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      创作
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -9,9 +9,7 @@
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+      <ion-title size="large">创作</ion-title>
     </ion-toolbar>
   </ion-header>
-
-  <app-explore-container name="Tab 3 page"></app-explore-container>
 </ion-content>

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

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent]
 })
 export class Tab3Page {
   constructor() {}

MoYun-app/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,9 +9,7 @@
 <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>
-
-  <app-explore-container name="Tab 4 page"></app-explore-container>
 </ion-content>

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

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
   selector: 'app-tab4',
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
 })
 export class Tab4Page {
   constructor() {}

MoYun-app/src/app/tabs/tabs.page.html

@@ -1,22 +1,22 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="home"></ion-icon>
+    <ion-tab-button tab="tab1">
+      <ion-icon name="book"></ion-icon>
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="trophy"></ion-icon>
-      <ion-label>对抗</ion-label>
+    <ion-tab-button tab="tab2">
+      <ion-icon name="game-controller"></ion-icon>
+      <ion-label>对战</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon aria-hidden="true" name="pencil"></ion-icon>
+    <ion-tab-button tab="tab3">
+      <ion-icon name="person"></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-tab-button tab="tab4">
+      <ion-icon name="create"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

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

@@ -1 +1,42 @@
+ion-tab-bar {
+  --background: #D2B48C;
+  border-top: 1px solid rgba(139, 69, 19, 0.2);
+  padding: 5px 0;
+}
 
+ion-tab-button {
+  --color: #2C1810;
+  --color-selected: #8B4513;
+  --ripple-color: rgba(139, 69, 19, 0.1);
+
+  &::before {
+    background-color: transparent;
+    display: block;
+    content: "";
+    margin: 0 auto;
+    width: 20px;
+    height: 2px;
+  }
+
+  &.tab-selected::before {
+    background-color: #8B4513;
+  }
+
+  ion-icon {
+    font-size: 24px;
+  }
+
+  ion-label {
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+// 添加过渡动画
+ion-tab-button {
+  transition: all 0.3s ease;
+
+  &:hover {
+    --color: #8B4513;
+  }
+}

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

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { home, trophy, person,pencil } from 'ionicons/icons';
+import { home, trophy, person,pencil, book, gameController, create, calendar,chatbubbles} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ home, trophy, person,pencil });
+    addIcons({book,gameController,person,create,home,trophy,pencil,calendar,chatbubbles});
   }
 }

MoYun-app/src/pages/tab1/tab1.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Tab1Page } from './tab1.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    Tab1PageModule
+  ],
+  declarations: [Tab1Page]
+})
+export class Tab1PageModule {} 

MoYun-app/src/pages/tab1/tab1.page.html

@@ -0,0 +1,85 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      墨韵连连
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding">
+  <!-- 搜索卡片 -->
+  <ion-card class="notification-card">
+    <ion-item lines="none">
+      <ion-icon name="search" slot="start" color="primary"></ion-icon>
+      <ion-searchbar placeholder="搜索作者或风格..."></ion-searchbar>
+    </ion-item>
+  </ion-card>
+
+  <!-- Logo -->
+  <div class="logo-wrapper">
+    <img src="assets/images/logo.png" alt="Logo">
+  </div>
+
+  <!-- 主要功能网格 -->
+  <ion-grid>
+    <ion-row>
+      <!-- 学习 -->
+      <ion-col size="6">
+        <ion-card class="feature-card" (click)="onCardClick('study')">
+          <ion-card-content class="ion-text-center">
+            <ion-icon name="book" color="primary"></ion-icon>
+            <h3>学习</h3>
+            <p>开始学习之旅</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      
+      <!-- 在线测试 -->
+      <ion-col size="6">
+        <ion-card class="feature-card" (click)="onCardClick('test')">
+          <ion-card-content class="ion-text-center">
+            <ion-icon name="create" color="success"></ion-icon>
+            <h3>在线测试</h3>
+            <p>检验学习成果</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      
+      <!-- 学习计划 -->
+      <ion-col size="6">
+        <ion-card class="feature-card" (click)="onCardClick('plan')">
+          <ion-card-content class="ion-text-center">
+            <ion-icon name="calendar" color="tertiary"></ion-icon>
+            <h3>学习计划</h3>
+            <p>规划学习路径</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      
+      <!-- 智能问答 -->
+      <ion-col size="6">
+        <ion-card class="feature-card" (click)="onCardClick('qa')">
+          <ion-card-content class="ion-text-center">
+            <ion-icon name="chatbubbles" color="warning"></ion-icon>
+            <h3>智能问答</h3>
+            <p>AI助手解答</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- 学习进度概览 -->
+  <ion-card class="progress-card">
+    <ion-card-header>
+      <ion-card-title>今日学习进度</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-progress-bar [value]="dailyProgress"></ion-progress-bar>
+      <div class="progress-stats">
+        <span>已完成: {{completedTasks}}/{{totalTasks}}</span>
+        <span>{{(dailyProgress * 100).toFixed(0)}}%</span>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</ion-content> 

MoYun-app/src/pages/tab1/tab1.page.scss

@@ -0,0 +1,106 @@
+ion-content {
+  --background: #f4f5f8;
+}
+
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+  }
+  
+  ion-searchbar {
+    --background: #ffffff;
+    --border-radius: 8px;
+    --box-shadow: none;
+    --placeholder-color: #666;
+    padding: 0;
+  }
+}
+
+.logo-wrapper {
+  text-align: center;
+  padding: 16px 0;
+  
+  img {
+    width: 120px;
+    height: auto;
+  }
+}
+
+.feature-card {
+  height: 100%;
+  margin: 0;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  cursor: pointer;
+  transition: transform 0.2s;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  ion-card-content {
+    padding: 16px;
+    
+    ion-icon {
+      font-size: 32px;
+      margin-bottom: 8px;
+    }
+
+    h3 {
+      margin: 8px 0;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      color: var(--ion-color-medium);
+    }
+  }
+}
+
+ion-grid {
+  padding: 0;
+}
+
+ion-row {
+  margin: 0 -8px;
+}
+
+ion-col {
+  padding: 8px;
+}
+
+ion-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  
+  ion-card-header {
+    padding: 16px;
+  }
+
+  ion-card-content {
+    padding: 16px;
+  }
+}
+
+ion-progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  --progress-background: var(--ion-color-primary);
+  --buffer-background: rgba(var(--ion-color-primary-rgb), 0.2);
+}
+
+.progress-stats {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--ion-color-medium);
+}

MoYun-app/src/pages/tab1/tab1.page.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonBadge,
+  IonProgressBar,
+  IonSearchbar
+} from '@ionic/angular/standalone';
+import { NgIf } from '@angular/common';
+import { addIcons } from 'ionicons';
+import { 
+  search,
+  book,
+  create,
+  calendar,
+  chatbubbles
+} from 'ionicons/icons';
+
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, 
+    IonToolbar, 
+    IonTitle, 
+    IonContent,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonBadge,
+    IonProgressBar,
+    IonSearchbar,
+    NgIf
+  ]
+})
+export class Tab1Page implements OnInit {
+  dailyProgress: number = 0.65;
+  completedTasks: number = 13;
+  totalTasks: number = 20;
+
+  constructor(private router: Router) {
+    addIcons({ 
+      search,
+      book,
+      create,
+      calendar,
+      chatbubbles
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  onCardClick(feature: string) {
+    console.log(`Navigating to ${feature}`);
+    // this.router.navigate([`/tabs/tab1/${feature}`]);
+  }
+} 

MoYun-app/src/theme/variables.scss

@@ -1,2 +1,93 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+// 检查是否有影响组件默认样式的变量设置
+
+:root {
+  // 定义古朴典雅的主题色
+  --ion-background-color: #F5E6D3;  // 米褐色背景
+  --ion-background-color-rgb: 245, 230, 211;
+
+  --ion-text-color: #2C1810;  // 深褐色文字
+  --ion-text-color-rgb: 44, 24, 16;
+
+  // 主色调
+  --ion-color-primary: #8B4513;  // 马鞍棕色
+  --ion-color-primary-rgb: 139, 69, 19;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #7a3d11;
+  --ion-color-primary-tint: #97582b;
+
+  // 次要色调
+  --ion-color-secondary: #A0522D;  // 赭石色
+  --ion-color-secondary-rgb: 160, 82, 45;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #8d4827;
+  --ion-color-secondary-tint: #aa6342;
+
+  // 卡片背景色
+  --ion-card-background: #FFF8DC;  // 玉米丝色
+}
+
+// 修改卡片样式
+ion-card {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(139, 69, 19, 0.2);
+  background: var(--ion-card-background);
+}
+
+// 工具栏样式
+ion-toolbar {
+  --background: #D2B48C;  // 棕褐色
+  --color: #2C1810;
+  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
+}
+
+// 搜索栏样式
+ion-searchbar {
+  --background: rgba(255, 248, 220, 0.8);
+  --box-shadow: none;
+  --border-radius: 8px;
+  --placeholder-color: #8B4513;
+  --icon-color: #8B4513;
+}
+
+// 图标颜色
+ion-icon {
+  color: #8B4513;
+}
+
+// 标题文字样式
+ion-title {
+  font-family: "Times New Roman", serif;
+  font-weight: 500;
+}
+
+// 内容区域的渐变背景
+ion-content {
+  --background: linear-gradient(
+    135deg,
+    #F5E6D3 0%,
+    #E6D5C3 100%
+  );
+}
+
+// 标签页样式
+ion-tab-bar {
+  --background: #D2B48C;
+  --border: 1px solid rgba(139, 69, 19, 0.2);
+}
+
+ion-tab-button {
+  --color: #2C1810;
+  --color-selected: #8B4513;
+}
+
+// 按钮悬停效果
+ion-card:hover {
+  transform: translateY(-2px);
+  transition: transform 0.3s ease;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}