update:Significant modifications to the front-end code

AIart-app/src/app/comp-markmap/comp-markmap.component.scss

@@ -1,7 +1,59 @@
 // @import "../../../node_modules/katex/dist/katex.min.css";
 // @import "../../../node_modules/highlight.js/styles/default.min.css";
 
-.maparea{
-    width:100%;
-    // height:100%;
+.maparea {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    // 防止SVG内容溢出
+    overflow: hidden;
+
+    // 确保SVG内容居中
+    &>g {
+        transform-origin: center !important;
+    }
+}
+
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    ::ng-deep {
+        .node-checkbox {
+            appearance: none;
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #666;
+            border-radius: 3px;
+            outline: none;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.2s;
+
+            &:checked {
+                background-color: var(--ion-color-primary);
+                border-color: var(--ion-color-primary);
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    left: 4px;
+                    top: 1px;
+                    width: 5px;
+                    height: 9px;
+                    border: solid white;
+                    border-width: 0 2px 2px 0;
+                    transform: rotate(45deg);
+                }
+            }
+
+            &:hover {
+                border-color: var(--ion-color-primary);
+            }
+        }
+    }
 }

AIart-app/src/app/comp-markmap/comp-markmap.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, AfterViewInit, ViewChild, Output, EventEmitter } from '@angular/core';
 
 import * as markmap from 'markmap-view';
 import { Markmap, loadCSS, loadJS } from 'markmap-view';
@@ -13,67 +13,138 @@ import { Transformer, builtInPlugins } from 'markmap-lib';
   styleUrls: ['./comp-markmap.component.scss'],
   standalone: true,
 })
-export class CompMarkmapComponent  implements AfterViewInit {
+export class CompMarkmapComponent implements AfterViewInit {
+
+  @ViewChild("mapView") mapView: ElementRef | undefined
+  @Input() markdown: string = ""
+  @Input() height: string = "350px";
+  @Input() nodeStates: { [key: string]: boolean } = {};
+
+  private currentMarkmap?: Markmap;
+  private isLoading = false;
 
-  @ViewChild("mapView") mapView:ElementRef | undefined
-  @Input() markdown:string = ""
-  @Input() height:string = "350px";
   constructor() { }
 
   ngAfterViewInit() {
-    setTimeout(() => {
-      
-      this.loadMarkMap();
-    }, 500);
+    this.loadMarkMap();
   }
 
-  loadMarkMap(){
-    // 通过markmap-lib 解析markdown提取所需的结构和素材
-    // With additional plugins
-    const transformer = new Transformer([...builtInPlugins]);
-    // 1. transform Markdown
-    const { root, features } = transformer.transform(this.markdown);
-    // 2. get assets
-    // or get all possible assets that could be used later
-    let assets = transformer.getAssets();
-
-    assets.scripts?.forEach((item:any)=>{
-      console.log(item)
-      if(item.data?.src?.endsWith("webfontloader.js")){
-        item.data.src = "assets/markmap/webfontloader.js"
-      }
-    })
-    assets.styles?.forEach((item:any)=>{
+  // 添加一个方法来提取markdown中的标题
+  extractTitle(markdown: string): string {
+    // 查找以 # 开头的第一行
+    const titleMatch = markdown.match(/^#\s+(.+)$/m);
+    if (titleMatch && titleMatch[1]) {
+      return titleMatch[1].trim();
+    }
+    return '未命名计划';
+  }
 
-      if(item.data?.src?.endsWith("katex.min.css")){
-        item.data.src = "assets/markmap/katex.min.css"
-      }
-      if(item.data?.src?.endsWith("default.min.css")){
-        item.data.src = "assets/markmap/default.min.css"
+  // 添加一个输出事件，用于通知父组件标题变化
+  @Output() titleExtracted = new EventEmitter<string>();
+
+  // 添加事件发射器
+  @Output() nodeStateChange = new EventEmitter<{ nodeId: string, checked: boolean }>();
+
+  loadMarkMap() {
+    if (this.isLoading || !this.mapView?.nativeElement || !this.markdown) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    try {
+      const svg = this.mapView.nativeElement;
+      while (svg.firstChild) {
+        svg.removeChild(svg.firstChild);
       }
-    })
-    console.log(assets)
-    if(assets.styles){
-     // 通过markmap-view 渲染svg效果图
-      // 1. load assets
-      if (assets.styles) loadCSS(assets.styles);
-      if (assets.scripts) {
+
+      const transformer = new Transformer([...builtInPlugins]);
+      const { root, features } = transformer.transform(this.markdown);
+      const assets = transformer.getAssets();
+
+      assets.scripts?.forEach((item: any) => {
+        if (item.data?.src?.endsWith("webfontloader.js")) {
+          item.data.src = "assets/markmap/webfontloader.js";
+        }
+      });
+
+      assets.styles?.forEach((item: any) => {
+        if (item.data?.src?.endsWith("katex.min.css")) {
+          item.data.src = "assets/markmap/katex.min.css";
+        }
+        if (item.data?.src?.endsWith("default.min.css")) {
+          item.data.src = "assets/markmap/default.min.css";
+        }
+      });
+
+      if (assets.styles) {
+        loadCSS(assets.styles);
+        if (assets.scripts) {
           loadJS(assets.scripts, {
             getMarkmap: () => markmap,
-          }).then(()=>{
-              // 向页面Dom渲染svg图
-              // 2. create markmap
-              // `options` is optional, i.e. `undefined` can be passed here
-              setTimeout(() => {
-                const svgEl = this.mapView?.nativeElement;
-                console.log(svgEl,root)
-                Markmap.create(svgEl, undefined, root); // -> returns a Markmap instance
-              }, 1000);
-          })
-        }
-    } 
+          }).then(() => {
+            const svgEl = this.mapView?.nativeElement;
+            if (svgEl) {
+              const options = {
+                autoFit: true,
+                center: true,
+                fitRatio: 0.95,
+                duration: 500,
+                maxWidth: 800,
+                nodeFormatter: (node: any) => {
+                  if (node.depth > 0) { // 只给子节点添加复选框
+                    const isChecked = this.nodeStates[node.id] ? 'checked' : '';
+                    const originalContent = node.content;
+                    node.content = `
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <input type="checkbox" ${isChecked} 
+                          data-node-id="${node.id}" 
+                          class="node-checkbox" 
+                          style="width: 16px; height: 16px; cursor: pointer;">
+                        <span>${originalContent}</span>
+                      </div>
+                    `;
+                  }
+                  return node;
+                },
+                htmlLabels: true,
+                onClick: (node: any, event: any) => {
+                  const checkbox = event.target.closest('.node-checkbox');
+                  if (checkbox) {
+                    event.stopPropagation();
+                    const nodeId = checkbox.getAttribute('data-node-id');
+                    const checked = checkbox.checked;
+                    this.onNodeCheckChange(nodeId, checked);
+                  }
+                }
+              };
+              this.currentMarkmap = Markmap.create(svgEl, options, root);
+
+              Object.entries(this.nodeStates).forEach(([nodeId, checked]) => {
+                const checkbox = svgEl.querySelector(`[data-node-id="${nodeId}"]`);
+                if (checkbox) {
+                  (checkbox as HTMLInputElement).checked = checked;
+                }
+              });
 
-     
+              const title = this.extractTitle(this.markdown);
+              this.titleExtracted.emit(title);
+            }
+            this.isLoading = false;
+          }).catch(() => {
+            this.isLoading = false;
+          });
+        }
+      }
+    } catch (error) {
+      console.error('Error loading markmap:', error);
+      this.isLoading = false;
     }
+  }
 
+  // 添加节点状态变化处理方法
+  private onNodeCheckChange(nodeId: string, checked: boolean) {
+    // 发出事件通知父组件
+    this.nodeStateChange.emit({ nodeId, checked });
+  }
 }

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

@@ -1,164 +1,150 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <ion-title style="font-family: 'Courier New', Courier, monospace;">
-      <span>AI艺速</span>
-      <img src="../../assets/img/logo2.png" alt="AI艺速"
-        style="height: 20px;width: 20px;text-align: center;justify-content: center;margin-top: 3px;margin-left: 5px;">
-    </ion-title>
+    <div class="brand-header">
+      <div class="brand-title">
+        <div class="title-container">
+          <span>AI艺速</span>
+          <img src="assets/img/logo2.png" alt="AI艺速">
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <div style="display: flex;align-items: center;justify-content: center;gap: 10px;height: 50px;">
-    <ion-searchbar placeholder="输入搜索内容" style="width: 65%"></ion-searchbar>
-    <ion-icon name="mail-outline" style="height: 30px;width: 30px;"></ion-icon>
-    <div style="display: flex;align-items: center;">
-      <ion-icon name="calendar-outline" style="height: 25px;width: 30px;"></ion-icon>
-      <p>签到</p>
+  <!-- 搜索栏部分 -->
+  <div class="search-section">
+    <ion-searchbar mode="ios" placeholder="搜索你感兴趣的内容" class="custom-searchbar"></ion-searchbar>
+    <div class="action-buttons">
+      <ion-button fill="clear" class="icon-button">
+        <ion-icon name="mail-outline"></ion-icon>
+      </ion-button>
+      <ion-button fill="clear" class="sign-in-button">
+        <ion-icon name="calendar-outline"></ion-icon>
+        <span>签到</span>
+      </ion-button>
     </div>
   </div>
-  <div>
-    <!-- 首部导航栏部分开始 -->
-    <ion-toolbar style="height: 40px;">
-      <ion-tabs>
-        <ion-tab-bar slot="top">
-          <ion-tab-button tab="home">
-            <ion-label>首页</ion-label>
-          </ion-tab-button>
-          <ion-tab-button tab="psychology">
-            <ion-label tab="search" (click)="goToInterestSearch()">兴趣调查</ion-label>
-          </ion-tab-button>
-          <ion-tab-button tab="course">
-            <ion-label>课程</ion-label>
-          </ion-tab-button>
-          <ion-tab-button tab="test" class="rounded-rectangle" (click)="goToInterestTest()">
-            <ion-label>兴趣探索</ion-label>
-          </ion-tab-button>
-          <ion-tab-button tab="ebook" class="rounded-rectangle" (click)="goToInterestPicture()">
-            <ion-label>意境呈现</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-      </ion-tabs>
-    </ion-toolbar>
-    <!-- 首部导航栏部分结束 -->
-  </div>
-  <!-- 轮播图部分开始 -->
-  <!-- <div>
-    <ion-segment-view>
-      <img alt="wu" src="../../assets/img/study.png" style="border-radius: 8px;position: relative;margin: 15px;display:flex ;align-items: center;
-    justify-content: center;height: 200px;width: 90%;" />
-    </ion-segment-view>
-  </div> -->
-  <!-- 轮播图部分结束 -->
-  <!-- 创建外部展示容器 -->
-  <div class="banner-container">
-    <!-- 创建图片存储容器 -->
-    <!-- 轮播图圆点 -->
-    <input type="radio" name="radio-set" checked="checked" id="banner-control-1">
-    <a class="banner-nav-a" href="#banner01"></a>
-    <input type="radio" name="radio-set" id="banner-control-2">
-    <a class="banner-nav-a" href="#banner02"></a>
-    <input type="radio" name="radio-set" id="banner-control-3">
-    <a class="banner-nav-a" href="#banner03"></a>
-    <input type="radio" name="radio-set" id="banner-control-4">
-    <a class="banner-nav-a" href="#banner04"></a>
-    <input type="radio" name="radio-set" id="banner-control-5">
-    <a class="banner-nav-a" href="#banner05"></a>
-    <div class="banner-img-container">
-      <img src="../../assets/img/lunbo4.png" alt="">
-      <img src="../../assets/img/lunbo1.png" alt="">
-      <img src="../../assets/img/lunbo2.png" alt="">
-      <img src="../../assets/img/lunbo3.png" alt="">
-      <img src="../../assets/img/study.png" alt="">
-    </div>
+  <!-- 顶部导航栏 -->
+  <div class="top-nav-section">
+    <ion-segment value="home" mode="ios">
+      <ion-segment-button value="home">
+        <ion-label>首页</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="psychology" (click)="goToInterestSearch()">
+        <ion-label>兴趣调查</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="course">
+        <ion-label>课程</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="test" (click)="goToInterestTest()">
+        <ion-label>兴趣探索</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="ebook" (click)="goToInterestPicture()">
+        <ion-label>意境呈现</ion-label>
+      </ion-segment-button>
+    </ion-segment>
   </div>
 
-  <!-- 中部导航栏部分开始 -->
-  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px;">
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="storefront-outline"></ion-icon>
-      <ion-label>商业</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="business-outline"></ion-icon>
-      <ion-label>职场</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="book-outline"></ion-icon>
-      <ion-label>历史</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="heart-outline"></ion-icon>
-      <ion-label>心理学</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="football-outline"></ion-icon>
-      <ion-label>运动</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
+  <!-- 轮播图部分 -->
+  <div class="banner-section">
+    <div class="banner-container" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()">
+      <div class="banner-img-container" [style.transform]="'translateX(' + translateX + 'px)'">
+        <img *ngFor="let slide of slides" [src]="slide.image" [alt]="slide.alt">
+      </div>
+      <div class="banner-indicators">
+        <span class="indicator" *ngFor="let slide of slides; let i = index" [class.active]="currentIndex === i"
+          (click)="goToSlide(i)">
+        </span>
+      </div>
+      <div class="banner-arrows">
+        <button class="arrow-btn prev" (click)="prevSlide()">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+        </button>
+        <button class="arrow-btn next" (click)="nextSlide()">
+          <ion-icon name="chevron-forward-outline"></ion-icon>
+        </button>
+      </div>
     </div>
   </div>
 
-  <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 15px;">
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="rocket-outline"></ion-icon>
-      <ion-label>训练营</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="documents-outline"></ion-icon>
-      <ion-label>清单广场</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="sparkles-outline"></ion-icon>
-      <ion-label>兴趣视频</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="medal-outline"></ion-icon>
-      <ion-label>会员专享</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
+  <!-- 功能导航区 -->
+  <div class="features-grid">
+    <div class="features-row">
+      <div class="feature-item">
+        <ion-icon name="storefront-outline"></ion-icon>
+        <span>商业</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="business-outline"></ion-icon>
+        <span>职场</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="book-outline"></ion-icon>
+        <span>历史</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="heart-outline"></ion-icon>
+        <span>心理学</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="football-outline"></ion-icon>
+        <span>运动</span>
+      </div>
     </div>
-    <div class="ion-activatable ripple-parent rounded-rectangle">
-      <ion-icon name="list-outline"></ion-icon>
-      <ion-label>全部分类</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-    </div>
-  </div>
-  <!-- 中部导航栏部分结束 -->
-  <!-- 下面轮播图展示部分开始 -->
-  <div class="mid-nav">
-    <div style="font-weight: bold;">
-      最近在学
-    </div>
-    <div class="under_slide">
-      <ion-label (click)="goToViewAll()">查看全部</ion-label>
-      <ion-ripple-effect></ion-ripple-effect>
-      <ion-icon name="chevron-forward-outline"></ion-icon>
+
+    <div class="features-row">
+      <div class="feature-item">
+        <ion-icon name="rocket-outline"></ion-icon>
+        <span>训练营</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="documents-outline"></ion-icon>
+        <span>清单广场</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="sparkles-outline"></ion-icon>
+        <span>兴趣视频</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="medal-outline"></ion-icon>
+        <span>会员专享</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="list-outline"></ion-icon>
+        <span>全部分类</span>
+      </div>
     </div>
   </div>
-  <div class="book_img">
-    <div class="book_item">
-      <img src="../../assets/img/book1.png" alt="book1" style="height: 100px;width: 200px;">
-      <p>城南旧事</p>
-    </div>
-    <div class="book_item">
-      <img src="../../assets/img/book2.png" alt="book2" style="height: 100px;width: 200px;">
-      <p>朝花夕拾</p>
-    </div>
-    <div class="book_item">
-      <img src="../../assets/img/book3.png" alt="book3" style="height: 100px;width: 200px;">
-      <p>狂人日记</p>
+
+  <!-- 最近在学部分 -->
+  <div class="recent-learning">
+    <div class="section-header">
+      <h2>最近在学</h2>
+      <div class="view-all" (click)="goToViewAll()">
+        <span>查看全部</span>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
     </div>
-    <div class="book_item">
-      <img src="../../assets/img/book4.png" alt="book4" style="height: 100px;width: 200px;">
-      <p>彷徨</p>
+
+    <div class="learning-cards">
+      <div class="learning-card">
+        <img src="../../assets/img/book1.png" alt="城南旧事">
+        <h3>城南旧事</h3>
+      </div>
+      <div class="learning-card">
+        <img src="../../assets/img/book2.png" alt="朝花夕拾">
+        <h3>朝花夕拾</h3>
+      </div>
+      <div class="learning-card">
+        <img src="../../assets/img/book3.png" alt="狂人日记">
+        <h3>狂人日记</h3>
+      </div>
+      <div class="learning-card">
+        <img src="../../assets/img/book4.png" alt="彷徨">
+        <h3>彷徨</h3>
+      </div>
     </div>
   </div>
-  <!-- 下面轮播图展示部分结束 -->
-
 </ion-content>

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

@@ -1,206 +1,340 @@
-.wrapper {
-    display: flex;
-    flex-wrap: wrap;
-
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-
-    height: 170px;
-    width: 400px;
-
-    margin: 0 auto;
+:host {
+    --page-padding: 16px;
+    --primary-color: #b64d24;
+    --background-color: #f5f5f5;
 }
 
-.ripple-parent {
-    font-size: 15px;
+// 头部样式
+.brand-header {
+    padding: 8px var(--page-padding);
     display: flex;
-    align-items: center;
     justify-content: center;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-    flex-direction: column;
-}
 
-.rounded-rectangle {
-    width: 75px;
-    height: 35px;
-    border-radius: 8px;
-}
-
-.circle {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-}
-
-.mid-nav {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-left: 15px;
-    margin-right: 15px;
-
-}
-
-.under_slide {
-    display: flex;
-    align-items: center;
-    text-align: right;
-    font-size: smaller;
+    .brand-title {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+
+        .title-container {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 16px;
+            font-weight: 600;
+
+            span {
+                color: var(--primary-color);
+            }
+
+            img {
+                height: 18px;
+                width: 18px;
+                margin-top: 2px;
+            }
+        }
+    }
 }
 
-.book_img {
-    margin-top: 0;
+// 搜索栏部分
+.search-section {
+    padding: 8px var(--page-padding);
     display: flex;
     align-items: center;
-    padding: 10px;
-    position: absolute;
-}
-
-.book_item p {
-    margin-top: 5px;
-    font-size: 14px;
-    font-weight: bold;
-    text-align: center;
-}
-
-
+    gap: 12px;
+    background: white;
+
+    .custom-searchbar {
+        flex: 1;
+        --background: #f4f5f8;
+        --border-radius: 8px;
+        --box-shadow: none;
+        --placeholder-color: #666;
+        margin: 0;
+        padding: 0;
+    }
 
-/* 自动轮播样式 */
-.banner-container {
-    width: 1200px;
-    height: 200px;
-    /* 轮播图居中 */
-    margin-bottom: 10px;
-    /* 隐藏超出展示容器的内容 */
-    overflow: hidden;
-    position: relative;
+    .action-buttons {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .icon-button {
+            --padding-start: 8px;
+            --padding-end: 8px;
+            margin: 0;
+
+            ion-icon {
+                font-size: 24px;
+                color: var(--primary-color);
+            }
+        }
+
+        .sign-in-button {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            --padding-start: 8px;
+            --padding-end: 8px;
+            margin: 0;
+
+            ion-icon {
+                font-size: 20px;
+                color: var(--primary-color);
+            }
+
+            span {
+                color: var(--primary-color);
+                font-size: 14px;
+            }
+        }
+    }
 }
 
-.banner-container .banner-img-container {
-    width: 6000px;
-    height: 200px;
-    overflow: hidden;
-    position: absolute;
-    /* 开启弹性盒，让图片横向排列 */
-    display: flex;
-    transition: transform 0.6s ease;
+// 顶部导航栏
+.top-nav-section {
+    padding: 4px var(--page-padding);
+    background: white;
+    margin-bottom: var(--section-gap);
+
+    ion-segment {
+        --background: transparent;
+
+        ion-segment-button {
+            --color: #666;
+            --color-checked: var(--primary-color);
+            --indicator-color: transparent; // 移除选中指示器
+            --indicator-height: 0; // 移除指示器高度
+            --padding-top: 4px;
+            --padding-bottom: 4px;
+            min-width: 70px;
+            min-height: 32px;
+            font-size: 13px;
+            text-transform: none;
+            transition: none; // 移除过渡动画
+
+            &::part(indicator) {
+                display: none; // 彻底隐藏指示器
+            }
+
+            &::part(native) {
+                padding: 0;
+                margin: 0;
+            }
+
+            ion-label {
+                margin: 0;
+                padding: 0;
+            }
+        }
+    }
 }
 
-.banner-container .banner-img-container img {
-    width: 400px;
-    height: 200px;
+// 轮播图部分
+.banner-section {
+    padding: 16px var(--page-padding);
+    background: white;
+
+    .banner-container {
+        position: relative;
+        border-radius: 12px;
+        overflow: hidden;
+        height: 160px;
+        user-select: none;
+        touch-action: pan-y pinch-zoom;
+
+        .banner-img-container {
+            display: flex;
+            height: 100%;
+            transition: transform 0.3s ease-in-out;
+
+            img {
+                min-width: 100%;
+                height: 160px;
+                object-fit: cover;
+                pointer-events: none;
+            }
+        }
+
+        .banner-indicators {
+            position: absolute;
+            bottom: 12px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+            z-index: 2;
+
+            .indicator {
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.5);
+                transition: all 0.3s;
+                cursor: pointer;
+
+                &.active {
+                    width: 18px;
+                    border-radius: 3px;
+                    background: white;
+                }
+            }
+        }
+
+        .banner-arrows {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            transform: translateY(-50%);
+            display: flex;
+            justify-content: space-between;
+            padding: 0 16px;
+            pointer-events: none;
+
+            .arrow-btn {
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+                background: rgba(0, 0, 0, 0.3);
+                border: none;
+                color: white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                pointer-events: auto;
+                transition: all 0.3s;
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.5);
+                }
+
+                ion-icon {
+                    font-size: 20px;
+                }
+            }
+        }
+    }
 }
 
-/* 动画关键帧 */
-@keyframes run {
-
-    0%,
-    10% {
-        /* margin-left: 0; */
-        transform: translateX(0);
-    }
+// 功能导航区
+.features-grid {
+    padding: 16px var(--page-padding);
+    background: white;
 
-    20%,
-    30% {
-        transform: translateX(-400px);
-    }
+    .features-row {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 16px;
+        margin-bottom: 20px;
 
-    40%,
-    50% {
-        transform: translateX(-800px);
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
-    60%,
-    70% {
-        transform: translateX(-1200px);
+    .feature-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 8px;
+        border-radius: 8px;
+        transition: all 0.3s;
+
+        &:active {
+            background: rgba(182, 77, 36, 0.1);
+        }
+
+        ion-icon {
+            font-size: 24px;
+            color: var(--primary-color);
+        }
+
+        span {
+            font-size: 12px;
+            color: #333;
+        }
     }
+}
 
-    80%,
-    90% {
-        transform: translateX(-1600px);
+// 最近在学部分
+.recent-learning {
+    padding: 16px var(--page-padding);
+    background: white;
+    margin-top: 8px;
+
+    .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        h2 {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .view-all {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: #666;
+            font-size: 14px;
+
+            ion-icon {
+                font-size: 16px;
+            }
+        }
     }
 
-    100% {
-        transform: translateX(0);
+    .learning-cards {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 16px;
+        overflow-x: auto;
+        padding-bottom: 8px;
+
+        .learning-card {
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s;
+
+            &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            }
+
+            img {
+                width: 100%;
+                height: 120px;
+                object-fit: cover;
+            }
+
+            h3 {
+                margin: 8px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #333;
+                text-align: center;
+            }
+        }
     }
 }
 
-/* 轮播图圆点样式 */
-.banner-container a {
-    width: 18px;
-    height: 8px;
-    background: #898b8e;
-    position: absolute;
-    bottom: 1rem;
-    border-radius: 7px;
-    margin: 0;
-    z-index: 1;
-}
-
-.banner-container input {
-    width: 18px;
-    height: 8px;
-    position: absolute;
-    bottom: 1rem;
-    margin: 0;
-    cursor: pointer;
-    z-index: 2;
-    opacity: 0;
+// 全局样式
+ion-content {
+    --background: var(--background-color);
 }
 
-/* 设置导航圆点偏移量（居中布局）*/
-#banner-control-1,
-#banner-control-1+.banner-nav-a {
-    left: 9%;
-}
-
-#banner-control-2,
-#banner-control-2+.banner-nav-a {
-    left: 12%;
-}
-
-#banner-control-3,
-#banner-control-3+.banner-nav-a {
-    left: 15%;
-}
-
-#banner-control-4,
-#banner-control-4+.banner-nav-a {
-    left: 18%;
-}
+ion-header {
+    background: white;
 
-#banner-control-5,
-#banner-control-5+.banner-nav-a {
-    left: 21%;
-}
-
-/* 设置高亮 */
-/*当 input 被选中时 他的兄弟级a标签高亮展示*/
-input:checked+.banner-nav-a {
-    background-color: #b64d24;
-}
-
-/* 设置轮播图动画 */
-#banner-control-1:checked~.banner-img-container {
-    transform: translateX(0px);
-}
-
-#banner-control-2:checked~.banner-img-container {
-    transform: translateX(-400px);
-}
-
-#banner-control-3:checked~.banner-img-container {
-    transform: translateX(-800px);
-}
-
-#banner-control-4:checked~.banner-img-container {
-    transform: translateX(-1200px);
-}
-
-#banner-control-5:checked~.banner-img-container {
-    transform: translateX(-1600px);
+    ion-toolbar {
+        --background: transparent;
+    }
 }

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

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
   IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon,
   IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView,
@@ -8,20 +9,116 @@ import {
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { Router } from '@angular/router';
 
+interface Slide {
+  image: string;
+  alt: string;
+}
 
 @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,
     IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
     IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton,
-    IonRippleEffect, IonBackButton],
+    IonRippleEffect, IonBackButton
+  ],
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit, OnDestroy {
+  slides: Slide[] = [
+    { image: 'assets/img/lunbo4.png', alt: '轮播图1' },
+    { image: 'assets/img/lunbo1.png', alt: '轮播图2' },
+    { image: 'assets/img/lunbo2.png', alt: '轮播图3' },
+    { image: 'assets/img/lunbo3.png', alt: '轮播图4' },
+    { image: 'assets/img/study.png', alt: '轮播图5' }
+  ];
+
+  currentIndex = 0;
+  translateX = 0;
+  private autoPlayInterval: any;
+  private touchStartX = 0;
+  private touchDeltaX = 0;
+  private slideWidth = 0;
+
   constructor(private router: Router) { }
 
+  ngOnInit() {
+    this.startAutoPlay();
+    // 获取轮播图容器宽度
+    setTimeout(() => {
+      const container = document.querySelector('.banner-container');
+      if (container) {
+        this.slideWidth = container.clientWidth;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.stopAutoPlay();
+  }
+
+  private startAutoPlay() {
+    this.stopAutoPlay();
+    this.autoPlayInterval = setInterval(() => {
+      this.nextSlide();
+    }, 3000); // 每3秒切换一次
+  }
+
+  private stopAutoPlay() {
+    if (this.autoPlayInterval) {
+      clearInterval(this.autoPlayInterval);
+    }
+  }
+
+  nextSlide() {
+    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  prevSlide() {
+    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  goToSlide(index: number) {
+    this.currentIndex = index;
+    this.updateTranslateX();
+  }
+
+  private updateTranslateX() {
+    this.translateX = -this.currentIndex * this.slideWidth;
+  }
+
+  // 触摸事件处理
+  onTouchStart(event: TouchEvent) {
+    this.stopAutoPlay();
+    this.touchStartX = event.touches[0].clientX;
+    this.touchDeltaX = 0;
+  }
+
+  onTouchMove(event: TouchEvent) {
+    this.touchDeltaX = event.touches[0].clientX - this.touchStartX;
+    const newTranslateX = -this.currentIndex * this.slideWidth + this.touchDeltaX;
+    this.translateX = newTranslateX;
+  }
+
+  onTouchEnd() {
+    const threshold = this.slideWidth / 3;
+    if (Math.abs(this.touchDeltaX) > threshold) {
+      if (this.touchDeltaX > 0) {
+        this.prevSlide();
+      } else {
+        this.nextSlide();
+      }
+    } else {
+      this.updateTranslateX();
+    }
+    this.startAutoPlay();
+  }
+
   goToInterestTest() {
     this.router.navigate(['/tabs/interest-test'])
   }

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

@@ -1,30 +1,93 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
-      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
-      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
-      <ion-icon name="mail-outline" style="height: 27px;width: 27px;margin-right: 5px;"></ion-icon>
+    <div class="header-container">
+      <div class="search-box">
+        <ion-searchbar placeholder="搜索计划" mode="ios" class="custom-searchbar"></ion-searchbar>
+      </div>
+      <div class="header-icons">
+        <ion-icon name="bookmark-outline" class="action-icon"></ion-icon>
+        <ion-icon name="notifications-outline" class="action-icon"></ion-icon>
+      </div>
     </div>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-
+<ion-content [fullscreen]="true" class="ion-padding-horizontal">
+  @if(mapListOnline.length > 0){
+  <div class="content-container">
+    <!-- 标题部分 -->
+    <div class="page-title">
+      <h1>学习计划</h1>
+      <p class="subtitle">探索你的学习之旅</p>
+    </div>
 
-  
-  @for(item of mapListOnline;track item.id){
-    <ion-card>
+    <!-- 计划卡片 -->
+    <ion-card class="plan-card">
       <ion-card-header>
-        <ion-card-title>
-          {{item?.get("title")}}
-        </ion-card-title>
+        <div class="card-header-content">
+          <div>
+            <ion-card-title>
+              {{currentTitle}}
+            </ion-card-title>
+            <ion-card-subtitle>
+              计划 {{currentIndex + 1}} / {{ mapListOnline.length }}
+            </ion-card-subtitle>
+          </div>
+          <div class="header-actions">
+            <ion-button fill="clear" class="edit-button" (click)="editPlan()">
+              <ion-icon name="create-outline"></ion-icon>
+              编辑计划
+            </ion-button>
+            <ion-button fill="clear" class="delete-button" (click)="confirmDelete()">
+              <ion-icon name="trash-outline"></ion-icon>
+              删除计划
+            </ion-button>
+          </div>
+        </div>
       </ion-card-header>
       <ion-card-content>
-        <comp-markmap [height]="'400px'" [markdown]="item.get('markmap')"></comp-markmap>
+        @if(!isEditing) {
+        <comp-markmap [height]="'45vh'" [markdown]="mapListOnline[currentIndex].get('markmap')"
+          [nodeStates]="nodeStates" (titleExtracted)="onTitleExtracted($event)"
+          (nodeStateChange)="onNodeStateChange($event)"></comp-markmap>
+        } @else {
+        <div class="edit-container">
+          <ion-textarea [(ngModel)]="editingMarkdown" rows="10" class="markdown-editor"
+            placeholder="在此编辑你的学习计划..."></ion-textarea>
+          <div class="edit-actions">
+            <ion-button fill="outline" (click)="cancelEdit()">
+              取消
+            </ion-button>
+            <ion-button (click)="savePlan()">
+              保存
+            </ion-button>
+          </div>
+        </div>
+        }
       </ion-card-content>
     </ion-card>
+
+    <!-- 导航按钮 -->
+    <div class="navigation-buttons">
+      <ion-button fill="clear" (click)="previousPlan()" [disabled]="currentIndex === 0" class="nav-button">
+        <ion-icon name="chevron-back-outline"></ion-icon>
+        <span>上一个</span>
+      </ion-button>
+      <ion-button fill="clear" (click)="nextPlan()" [disabled]="currentIndex === mapListOnline.length - 1"
+        class="nav-button">
+        <span>下一个</span>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </ion-button>
+    </div>
+  </div>
+  }
+  @else {
+  <div class="no-plans">
+    <ion-icon name="documents-outline"></ion-icon>
+    <h2>暂无计划内容</h2>
+    <p>开始创建你的第一个学习计划吧</p>
+  </div>
   }
-  
 </ion-content>
 
 

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

@@ -0,0 +1,249 @@
+// 自定义变量
+:host {
+    --page-padding: 16px;
+    --card-border-radius: 16px;
+    --primary-color: var(--ion-color-primary);
+    --text-color: var(--ion-color-dark);
+    --background-color: var(--ion-background-color);
+}
+
+// 头部样式
+.header-container {
+    display: flex;
+    align-items: center;
+    padding: 8px var(--page-padding);
+    background: var(--background-color);
+
+    .search-box {
+        flex: 1;
+
+        .custom-searchbar {
+            --background: #f4f5f8;
+            --border-radius: 12px;
+            --placeholder-color: #666;
+            --icon-color: #666;
+            padding: 0;
+        }
+    }
+
+    .header-icons {
+        display: flex;
+        gap: 16px;
+        margin-left: 16px;
+
+        .action-icon {
+            font-size: 24px;
+            color: var(--text-color);
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: rgba(var(--ion-color-primary-rgb), 0.1);
+            }
+        }
+    }
+}
+
+// 内容区域
+.content-container {
+    padding: 16px 0;
+}
+
+.page-title {
+    margin-bottom: 24px;
+    padding: 0 var(--page-padding);
+
+    h1 {
+        font-size: 32px;
+        font-weight: 700;
+        color: var(--text-color);
+        margin: 0;
+    }
+
+    .subtitle {
+        font-size: 16px;
+        color: var(--ion-color-medium);
+        margin: 8px 0 0;
+    }
+}
+
+// 计划卡片样式
+.plan-card {
+    margin: 0 var(--page-padding) 24px;
+    border-radius: var(--card-border-radius);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    background: white;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+    }
+
+    ion-card-header {
+        padding: 20px;
+        background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-primary-shade));
+
+        ion-card-title {
+            font-size: 1.4em;
+            font-weight: 600;
+            color: white;
+        }
+
+        ion-card-subtitle {
+            color: rgba(255, 255, 255, 0.8);
+            margin-top: 8px;
+        }
+    }
+
+    ion-card-content {
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: white;
+        overflow: hidden;
+
+        comp-markmap {
+            width: 100%;
+            height: 45vh;
+            display: block;
+        }
+    }
+}
+
+// 导航按钮样式
+.navigation-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    margin-top: 16px;
+
+    .nav-button {
+        --padding-start: 16px;
+        --padding-end: 16px;
+        --background: var(--ion-color-light);
+        --background-hover: var(--ion-color-light-shade);
+        --border-radius: 24px;
+        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+        height: 48px;
+        min-width: 120px;
+
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        ion-icon {
+            font-size: 20px;
+            color: var(--text-color);
+        }
+
+        span {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+
+        &:hover:not([disabled]) {
+            --background: var(--ion-color-light-shade);
+        }
+    }
+}
+
+// 无计划状态样式
+.no-plans {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 70vh;
+    text-align: center;
+    padding: 0 32px;
+
+    ion-icon {
+        font-size: 64px;
+        color: var(--ion-color-medium);
+        margin-bottom: 24px;
+    }
+
+    h2 {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--text-color);
+        margin: 0 0 12px;
+    }
+
+    p {
+        font-size: 16px;
+        color: var(--ion-color-medium);
+        margin: 0;
+    }
+}
+
+.card-header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .header-actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    .edit-button {
+        --color: rgba(255, 255, 255, 0.9);
+        font-size: 14px;
+
+        ion-icon {
+            margin-right: 4px;
+        }
+
+        &:hover {
+            --color: white;
+        }
+    }
+
+    .delete-button {
+        --color: rgba(255, 255, 255, 0.9);
+        font-size: 14px;
+
+        ion-icon {
+            margin-right: 4px;
+        }
+
+        &:hover {
+            --color: var(--ion-color-danger);
+        }
+    }
+}
+
+.edit-container {
+    width: 100%;
+    height: 45vh;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .markdown-editor {
+        flex: 1;
+        border: 1px solid var(--ion-color-medium);
+        border-radius: 8px;
+        padding: 12px;
+        font-family: monospace;
+        background: #f8f9fa;
+    }
+
+    .edit-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+    }
+}

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

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabs, IonLabel, IonTabButton, IonTabBar, IonCard, IonCardHeader, IonCardContent, IonCardTitle } from '@ionic/angular/standalone';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabs, IonLabel, IonTabButton, IonTabBar, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonButton, IonTextarea, AlertController } from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { EditTagComponent } from '../edit-tag/edit-tag.component'
 import { EditRatingStarComponent } from '../edit-rating-star/edit-rating-star.component';
@@ -11,21 +12,46 @@ import { CloudQuery } from 'src/lib/ncloud';
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    EditTagComponent, EditRatingStarComponent, IonSearchbar, IonIcon, IonTabs, IonLabel, IonTabButton, IonTabBar,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    ExploreContainerComponent,
+    EditTagComponent,
+    EditRatingStarComponent,
+    IonSearchbar,
+    IonIcon,
+    IonTabs,
+    IonLabel,
+    IonTabButton,
+    IonTabBar,
     CompMarkmapComponent,
-    IonCard,IonCardHeader,IonCardContent,IonCardTitle
+    IonCardSubtitle,
+    IonCard,
+    IonCardHeader,
+    IonCardContent,
+    IonCardTitle,
+    IonButton,
+    IonTextarea,
+    FormsModule
   ]
 })
 export class Tab2Page {
 
-  async loadMapList(){
+  async loadMapList() {
     let query = new CloudQuery("GoPlan");
     this.mapListOnline = await query.find();
+    if (this.mapListOnline.length > 0) {
+      this.currentIndex = 0;
+      this.refreshMarkmap();
+    }
   }
-  mapListOnline:any = []
+  mapListOnline: any = []
   mapList = [
-    {title:"demo",content:` ---
+    {
+      title: "demo", content: ` ---
 markmap:
   maxWidth: 300
   colorFreezeLevel: 2
@@ -52,18 +78,22 @@ markmap:
 - inline code
 - Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
 - This is a very very very very very very very very very very very very very very very long line.`},
-    {title:"每日学习计划",content:`# 每日学习计划
+    {
+      title: "每日学习计划", content: `# 每日学习计划
 ## 时间
 ## 计划
 ## 总结      
       `},
-      {title:"每周学习计划",content:`# 每周学习计划
+    {
+      title: "每周学习计划", content: `# 每周学习计划
 ## 时间
 ## 计划
 ## 总结        
         `}
   ]
-  constructor() { 
+  constructor(
+    private alertController: AlertController
+  ) {
     this.loadMapList();
   }
 
@@ -73,4 +103,155 @@ markmap:
     this.currentScore = newScore;
     console.log('新分值:', newScore); // 处理分值变化
   }
+
+  currentIndex: number = 0;
+
+  nextPlan() {
+    if (this.currentIndex < this.mapListOnline.length - 1) {
+      this.currentIndex++;
+      this.refreshMarkmap();
+    }
+  }
+
+  previousPlan() {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+      this.refreshMarkmap();
+    }
+  }
+
+  @ViewChild(CompMarkmapComponent) markmapComponent?: CompMarkmapComponent;
+
+  currentTitle: string = '';
+
+  onTitleExtracted(title: string) {
+    this.currentTitle = title;
+  }
+
+  refreshMarkmap() {
+    setTimeout(() => {
+      if (this.markmapComponent) {
+        const markdown = this.mapListOnline[this.currentIndex].get('markmap');
+        this.nodeStates = this.mapListOnline[this.currentIndex].get('nodeStates') || {};
+
+        this.markmapComponent.markdown = markdown;
+        this.markmapComponent.loadMarkMap();
+        this.currentTitle = this.markmapComponent.extractTitle(markdown);
+      }
+    }, 100);
+  }
+
+  isEditing = false;
+  editingMarkdown = '';
+
+  editPlan() {
+    this.isEditing = true;
+    this.editingMarkdown = this.mapListOnline[this.currentIndex].get('markmap');
+  }
+
+  cancelEdit() {
+    this.isEditing = false;
+    this.editingMarkdown = '';
+  }
+
+  async savePlan() {
+    try {
+      const currentPlan = this.mapListOnline[this.currentIndex];
+      await currentPlan.set('markmap', this.editingMarkdown);
+      await currentPlan.save();
+
+      this.isEditing = false;
+      this.refreshMarkmap();
+
+      // 显示成功提示
+      const toast = document.createElement('ion-toast');
+      toast.message = '计划已保存';
+      toast.duration = 2000;
+      toast.position = 'bottom';
+      document.body.appendChild(toast);
+      await toast.present();
+    } catch (error) {
+      console.error('Error saving plan:', error);
+      // 显示错误提示
+      const toast = document.createElement('ion-toast');
+      toast.message = '保存失败，请重试';
+      toast.duration = 2000;
+      toast.position = 'bottom';
+      toast.color = 'danger';
+      document.body.appendChild(toast);
+      await toast.present();
+    }
+  }
+
+  async confirmDelete() {
+    const alert = await this.alertController.create({
+      header: '确认删除',
+      message: '是否删除该计划？删除后将无法恢复。',
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: '删除',
+          role: 'destructive',
+          handler: () => {
+            this.deletePlan();
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async deletePlan() {
+    try {
+      const currentPlan = this.mapListOnline[this.currentIndex];
+      if (!currentPlan) return;
+
+      // 删除计划
+      await currentPlan['destroy']();
+
+      // 重新加载计划列表
+      await this.loadMapList();
+
+      // 显示成功提示
+      const toast = document.createElement('ion-toast');
+      toast.message = '计划已删除';
+      toast.duration = 2000;
+      toast.position = 'bottom';
+      document.body.appendChild(toast);
+      await toast.present();
+
+    } catch (error) {
+      console.error('Error deleting plan:', error);
+      // 显示错误提示
+      const toast = document.createElement('ion-toast');
+      toast.message = '删除失败，请重试';
+      toast.duration = 2000;
+      toast.position = 'bottom';
+      toast.color = 'danger';
+      document.body.appendChild(toast);
+      await toast.present();
+    }
+  }
+
+  // 存储节点状态
+  nodeStates: { [key: string]: boolean } = {};
+
+  // 处理节点状态变化
+  async onNodeStateChange(event: { nodeId: string, checked: boolean }) {
+    this.nodeStates[event.nodeId] = event.checked;
+
+    // 保存状态到数据库
+    try {
+      const currentPlan = this.mapListOnline[this.currentIndex];
+      await currentPlan.set('nodeStates', this.nodeStates);
+      await currentPlan.save();
+    } catch (error) {
+      console.error('Error saving node states:', error);
+    }
+  }
 }

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

@@ -1,25 +1,21 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <div style="display: flex;align-items: center;justify-content: space-between;">
-      <div style="margin-left: 10px;">
-        <ion-icon name="menu-outline" style="height: 30px;width: 30px;"></ion-icon>
-      </div>
-      <div style="display: flex;gap: 30px;">
-        <span (click)="red_underline('关注')" data-id="关注">关注</span>
-        <span (click)="red_underline('发现')" data-id="发现">发现</span>
-        <span (click)="red_underline('附近')" data-id="附近">附近</span>
-      </div>
-      <div style="margin-right: 10px;">
-        <ion-icon name="search-outline" style="height: 25px;width: 25px;"></ion-icon>
+    <div class="header-container">
+      <ion-menu-button class="menu-icon"></ion-menu-button>
+      <div class="nav-links">
+        <span class="nav-item" (click)="red_underline('关注')" data-id="关注">关注</span>
+        <span class="nav-item" (click)="red_underline('发现')" data-id="发现">发现</span>
+        <span class="nav-item" (click)="red_underline('附近')" data-id="附近">附近</span>
       </div>
+      <ion-icon name="search-outline" class="search-icon"></ion-icon>
     </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <!-- 首部导航栏部分开始 -->
-  <div>
-    <ion-toolbar style="height: 40px;">
+  <!-- 分类导航 -->
+  <div class="category-nav">
+    <ion-toolbar>
       <ion-tabs>
         <ion-tab-bar slot="top">
           <ion-tab-button tab="home">
@@ -41,79 +37,133 @@
       </ion-tabs>
     </ion-toolbar>
   </div>
-  <!-- 首部导航栏部分结束 -->
-  <!-- 推荐内容部分1开始 -->
-  <div style="display: flex;align-items: center;">
-    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
-      <div style="margin: 5px;">
-        <img src="../../assets/img/xingkong.png" alt="星空-梵高" style="height: 200px;">
-        <span style="font-size: 15px;">梵高-星空高清画作#致敬梵高 #艺术品 #星空</span>
-        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
-          <img src="../../assets/img/book1.png" alt="tou`xi`ang1"
-            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
-          <div style="display: grid;align-items: center;font-size: 12px;">
-            <span>霸王别姬</span>
-            <span>11-27</span>
+
+  <!-- 内容网格 -->
+  <div class="content-grid">
+    <!-- 内容卡片1 -->
+    <div class="content-card">
+      <img src="../../assets/img/xingkong.png" alt="星空-梵高" class="card-image">
+      <div class="card-content">
+        <div class="title">梵高-星空高清画作 #致敬梵高 #艺术品 #星空</div>
+        <div class="user-info">
+          <div class="user">
+            <img src="../../assets/img/book1.png" alt="头像" class="avatar">
+            <div class="info">
+              <span class="name">霸王别姬</span>
+              <span class="date">11-27</span>
+            </div>
+          </div>
+          <div class="likes">
+            <ion-icon name="heart-outline"></ion-icon>
+            <span>1687</span>
           </div>
-          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
-          <span>1687</span>
         </div>
       </div>
     </div>
-    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
-      <div style="margin: 5px;">
-        <img src="../../assets/img/xiangrikui.png" alt="星空-梵高" style="height: 200px;">
-        <span style="font-size: 15px;">梵高《向日葵》，经典中的经典，笔触很牛！#花</span>
-        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
-          <img src="../../assets/img/book2.png" alt="tou`xi`ang1"
-            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
-          <div style="display: grid;align-items: center;font-size: 12px;">
-            <span>HestLF艺术</span>
-            <span>11-07</span>
+
+    <!-- 内容卡片2 -->
+    <div class="content-card">
+      <img src="../../assets/img/xiangrikui.png" alt="向日葵-梵高" class="card-image">
+      <div class="card-content">
+        <div class="title">梵高《向日葵》，经典中的经典，笔触很牛！#花</div>
+        <div class="user-info">
+          <div class="user">
+            <img src="../../assets/img/book2.png" alt="头像" class="avatar">
+            <div class="info">
+              <span class="name">HestLF艺术</span>
+              <span class="date">11-07</span>
+            </div>
+          </div>
+          <div class="likes">
+            <ion-icon name="heart-outline"></ion-icon>
+            <span>310</span>
           </div>
-          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
-          <span>310</span>
         </div>
       </div>
     </div>
-  </div>
-  <!-- 推荐内容部分1结束 -->
-  <!-- 推荐内容部分2开始 -->
-  <div style="display: flex;align-items: center;">
-    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
-      <div style="margin: 5px;">
-        <img src="../../assets/img/fangao.png" alt="星空-梵高" style="height: 200px;">
-        <span style="font-size: 15px;">梵高生平自画像之其中🔟副👩‍🎨#艺术欣赏 #美</span>
-        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
-          <img src="../../assets/img/book3.png" alt="tou`xi`ang1"
-            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
-          <div style="display: grid;align-items: center;font-size: 12px;">
-            <span>小梅同学</span>
-            <span>10-5</span>
+
+    <!-- 内容卡片3 -->
+    <div class="content-card">
+      <img src="../../assets/img/fangao.png" alt="梵高自画像" class="card-image">
+      <div class="card-content">
+        <div class="title">梵高生平自画像之其中🔟副👩‍🎨 #艺术欣赏 #美</div>
+        <div class="user-info">
+          <div class="user">
+            <img src="../../assets/img/book3.png" alt="头像" class="avatar">
+            <div class="info">
+              <span class="name">小梅同学</span>
+              <span class="date">10-5</span>
+            </div>
+          </div>
+          <div class="likes">
+            <ion-icon name="heart-outline"></ion-icon>
+            <span>1.5万</span>
           </div>
-          <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
-          <span>1.5万</span>
         </div>
       </div>
     </div>
-    <div style="background-color: #fcfafafa;margin-left: 7px;margin-top: 3px;border-radius: 8px;width: 47%">
-      <div style="margin: 5px;">
-        <img src="../../assets/img/cunzhuang.png" alt="星空-梵高" style="height: 200px;">
-        <span style="font-size: 15px;">走吧，梵高，去你最爱的阿尔看看，《阿尔小镇》</span>
-        <div style="display: flex;align-items: center;justify-content: space-between;margin-right: 10px;">
-          <img src="../../assets/img/book4.png" alt="tou`xi`ang1"
-            style="border-radius: 100%;width: 27px;height: 27px;margin: 5px;">
-          <div style="display: grid;align-items: center;font-size: 12px;">
-            <span>玛丽的名画</span>
-            <span>11-19</span>
+
+    <!-- 内容卡片4 -->
+    <div class="content-card">
+      <img src="../../assets/img/cunzhuang.png" alt="阿尔小镇" class="card-image">
+      <div class="card-content">
+        <div class="title">走吧，梵高，去你最爱的阿尔看看，���阿尔小镇》</div>
+        <div class="user-info">
+          <div class="user">
+            <img src="../../assets/img/book4.png" alt="头像" class="avatar">
+            <div class="info">
+              <span class="name">玛丽的名画</span>
+              <span class="date">11-19</span>
+            </div>
           </div>
-          <div>
-            <ion-icon name="heart-outline" style="margin-left: 15px;height: 15px;width: 15px;"></ion-icon>
+          <div class="likes">
+            <ion-icon name="heart-outline"></ion-icon>
             <span>180</span>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <!-- 推荐内容部分2结束 -->
-</ion-content>
+</ion-content>
+
+<!-- 添加侧边菜单 -->
+<ion-menu contentId="main-content" side="start">
+  <ion-content class="menu-content">
+    <div class="menu-header">
+      <h2>个人中心</h2>
+    </div>
+
+    <ion-list lines="none">
+      <ion-item button detail>
+        <ion-icon name="create-outline" slot="start"></ion-icon>
+        <ion-label>创作中心</ion-label>
+      </ion-item>
+
+      <ion-item button detail>
+        <ion-icon name="document-outline" slot="start"></ion-icon>
+        <ion-label>我的草稿</ion-label>
+      </ion-item>
+
+      <ion-item button detail>
+        <ion-icon name="chatbubble-outline" slot="start"></ion-icon>
+        <ion-label>我的评论</ion-label>
+      </ion-item>
+
+      <ion-item button detail>
+        <ion-icon name="heart-outline" slot="start"></ion-icon>
+        <ion-label>我的收藏</ion-label>
+      </ion-item>
+
+      <ion-item button detail>
+        <ion-icon name="time-outline" slot="start"></ion-icon>
+        <ion-label>浏览记录</ion-label>
+      </ion-item>
+
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<!-- 主内容区域添加 id -->
+<div class="ion-page" id="main-content">
+  <!-- 其他内容保持不变 -->
+</div>

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

@@ -1,6 +1,271 @@
-span[underline="true"] {
-    text-decoration: underline;
-    text-decoration-color: red;
-    text-decoration-thickness: 10px;
-    text-underline-offset: 7px;
+:host {
+    --page-padding: 16px;
+    --primary-color: #b64d24;
+    --card-border-radius: 12px;
+    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+// 头部导航样式
+.header-container {
+    padding: 8px var(--page-padding);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: white;
+
+    .menu-icon {
+        font-size: 24px;
+        color: #333;
+        padding: 8px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: background-color 0.3s;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    .nav-links {
+        display: flex;
+        gap: 32px;
+
+        .nav-item {
+            font-size: 15px;
+            color: #666;
+            padding: 6px 2px;
+            cursor: pointer;
+            position: relative;
+            transition: color 0.3s;
+
+            &[underline="true"] {
+                color: var(--primary-color);
+                font-weight: 500;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 3px;
+                    background: var(--primary-color);
+                    border-radius: 2px;
+                }
+            }
+        }
+    }
+
+    .search-icon {
+        font-size: 22px;
+        color: #666;
+        padding: 8px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+            color: var(--primary-color);
+            background-color: rgba(182, 77, 36, 0.1);
+        }
+    }
+}
+
+// 分类导航样式
+.category-nav {
+    background: white;
+    border-bottom: 1px solid #f5f5f5;
+    margin-bottom: 8px;
+
+    ion-tab-bar {
+        --background: transparent;
+        --border-color: transparent;
+        padding: 0 var(--page-padding);
+
+        ion-tab-button {
+            --color: #666;
+            --color-selected: var(--primary-color);
+            --padding-top: 8px;
+            --padding-bottom: 8px;
+
+            ion-label {
+                font-size: 14px;
+                font-weight: 500;
+            }
+
+            &.tab-selected::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 20px;
+                height: 3px;
+                background: var(--primary-color);
+                border-radius: 1.5px;
+            }
+        }
+    }
+}
+
+// 内容网格样式
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    padding: 12px;
+
+    .content-card {
+        background: white;
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-shadow);
+        overflow: hidden;
+
+        .card-image {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+        }
+
+        .card-content {
+            padding: 12px;
+
+            .title {
+                font-size: 14px;
+                color: #333;
+                margin-bottom: 12px;
+                line-height: 1.4;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+
+            .user-info {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .user {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+
+                    .avatar {
+                        width: 28px;
+                        height: 28px;
+                        border-radius: 50%;
+                        object-fit: cover;
+                    }
+
+                    .info {
+                        display: flex;
+                        flex-direction: column;
+
+                        .name {
+                            font-size: 13px;
+                            color: #333;
+                            font-weight: 500;
+                        }
+
+                        .date {
+                            font-size: 12px;
+                            color: #999;
+                        }
+                    }
+                }
+
+                .likes {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: #666;
+                    font-size: 13px;
+
+                    ion-icon {
+                        font-size: 16px;
+                        color: #999;
+                        transition: all 0.3s;
+                        cursor: pointer;
+
+                        &:hover {
+                            color: #ff4b4b;
+                            transform: scale(1.1);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 侧边菜单样式
+ion-menu {
+    --width: 280px;
+    --background: white;
+
+    .menu-content {
+        --background: white;
+
+        .menu-header {
+            padding: 24px 20px;
+            background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
+
+            h2 {
+                color: white;
+                margin: 0;
+                font-size: 20px;
+                font-weight: 600;
+            }
+        }
+
+        ion-list {
+            padding: 12px 0;
+
+            ion-item {
+                --padding-start: 20px;
+                --padding-end: 16px;
+                --min-height: 50px;
+                --background: transparent;
+                --background-hover: rgba(182, 77, 36, 0.05);
+                --ripple-color: rgba(182, 77, 36, 0.1);
+
+                ion-icon {
+                    color: #666;
+                    font-size: 20px;
+                    margin-right: 12px;
+                }
+
+                ion-label {
+                    font-size: 15px;
+                    font-weight: 500;
+                    color: #333;
+                }
+
+                &:hover {
+                    ion-icon {
+                        color: var(--primary-color);
+                    }
+
+                    ion-label {
+                        color: var(--primary-color);
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 修改菜单按钮样式
+.menu-icon {
+    font-size: 24px;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #333;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
 }

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonMenu, IonList, IonItem, IonMenuButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -8,7 +8,9 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   styleUrls: ['tab3.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,],
+    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
+    IonMenu, IonList, IonItem, IonMenuButton
+  ],
 })
 export class Tab3Page {
   ngOnInit() {
@@ -23,8 +25,8 @@ export class Tab3Page {
     });
     const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
     if (target) {
-      target.style.textDecoration = 'underline';
-      target.style.textDecorationColor = 'red';
+      // target.style.textDecoration = 'underline';
+      // target.style.textDecorationColor = 'red';
       target.setAttribute('underline', 'true');
     }
   }

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

@@ -1,22 +1,49 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <ion-title>
-      Chat模块组件演示
-    </ion-title>
+    <div class="header-container">
+      <ion-title class="page-title">AI学习助手</ion-title>
+      <ion-icon name="help-circle-outline" class="help-icon"></ion-icon>
+    </div>
   </ion-toolbar>
 </ion-header>
 
-<!-- {{title}} -->
-<ion-content [fullscreen]="true">
-  
-  
-  <h1>示例：兴趣分析的智能体示例（ChatPanel组件）</h1>
-  <ion-button (click)="openInquiry()">进入兴趣学习分析</ion-button>
-  <ion-button (click)="restoreChat('EpfDIz4WeE')">返回上次分析</ion-button>
-  @if(!planMessage?.complete){
-    <h3>思维导图将在您咨询兴趣学习后自动生成，感谢您的支持</h3>
-  }
-  @if(planMessage?.complete){
-    <comp-markmap [markdown]="markmapResult"></comp-markmap>
-  }
+<ion-content [fullscreen]="true" class="ion-padding">
+  <div class="content-container">
+    <!-- 欢迎部分 -->
+    <div class="welcome-section">
+      <h1>个性化学习分析</h1>
+      <p class="subtitle">让AI助手帮你分析兴趣，定制专属学习计划</p>
+    </div>
+
+    <!-- 操作按钮区 -->
+    <div class="action-buttons">
+      <ion-button expand="block" class="main-button" (click)="openInquiry()">
+        <ion-icon name="chatbubbles-outline" slot="start"></ion-icon>
+        开始兴趣分析
+      </ion-button>
+      <ion-button expand="block" fill="outline" class="secondary-button" (click)="restoreChat('EpfDIz4WeE')">
+        <ion-icon name="refresh-outline" slot="start"></ion-icon>
+        恢复上次分析
+      </ion-button>
+    </div>
+
+    <!-- 思维导图展示区 -->
+    <div class="markmap-container">
+      @if(!planMessage?.complete){
+      <div class="empty-state">
+        <ion-icon name="bulb-outline"></ion-icon>
+        <h3>等待分析结果</h3>
+        <p>开始兴趣分析后，AI将为你生成个性化的学习计划思维导图</p>
+      </div>
+      }
+      @if(planMessage?.complete){
+      <div class="result-section">
+        <h2>你的个性化学习计划</h2>
+        <div class="markmap-wrapper">
+          <comp-markmap [markdown]="markmapResult"></comp-markmap>
+        </div>
+      </div>
+      }
+    </div>
+  </div>
 </ion-content>

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

@@ -0,0 +1,147 @@
+// 自定义变量
+:host {
+    --page-padding: 20px;
+    --primary-gradient: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-primary-shade));
+}
+
+// 头部样式
+.header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--page-padding);
+
+    .page-title {
+        font-weight: 600;
+        font-size: 1.2rem;
+    }
+
+    .help-icon {
+        font-size: 24px;
+        color: var(--ion-color-medium);
+    }
+}
+
+// 内容区域
+.content-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px 0;
+}
+
+// 欢迎部分
+.welcome-section {
+    text-align: center;
+    margin-bottom: 32px;
+
+    h1 {
+        font-size: 28px;
+        font-weight: 700;
+        color: var(--ion-color-dark);
+        margin: 0 0 8px;
+    }
+
+    .subtitle {
+        font-size: 16px;
+        color: var(--ion-color-medium);
+        margin: 0;
+    }
+}
+
+// 操作按钮
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 32px;
+    padding: 0 var(--page-padding);
+
+    .main-button {
+        --background: var(--primary-gradient);
+        --border-radius: 12px;
+        --padding-top: 16px;
+        --padding-bottom: 16px;
+
+        font-weight: 600;
+        font-size: 16px;
+
+        ion-icon {
+            font-size: 20px;
+            margin-right: 8px;
+        }
+    }
+
+    .secondary-button {
+        --border-radius: 12px;
+        --padding-top: 16px;
+        --padding-bottom: 16px;
+
+        font-weight: 500;
+        font-size: 16px;
+
+        ion-icon {
+            font-size: 20px;
+            margin-right: 8px;
+        }
+    }
+}
+
+// 思维导图容器
+.markmap-container {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+    margin: 0 var(--page-padding);
+
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 48px 24px;
+        text-align: center;
+
+        ion-icon {
+            font-size: 48px;
+            color: var(--ion-color-primary);
+            margin-bottom: 16px;
+        }
+
+        h3 {
+            font-size: 20px;
+            font-weight: 600;
+            color: var(--ion-color-dark);
+            margin: 0 0 8px;
+        }
+
+        p {
+            font-size: 14px;
+            color: var(--ion-color-medium);
+            margin: 0;
+            max-width: 300px;
+        }
+    }
+
+    .result-section {
+        h2 {
+            font-size: 20px;
+            font-weight: 600;
+            color: var(--ion-color-dark);
+            margin: 0;
+            padding: 20px;
+            border-bottom: 1px solid var(--ion-color-light);
+        }
+
+        .markmap-wrapper {
+            padding: 20px;
+            height: 60vh;
+
+            comp-markmap {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+    }
+}

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

@@ -1,18 +1,28 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton } from '@ionic/angular/standalone';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonRippleEffect, IonBackButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { Router } from '@angular/router';
 import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
 import { CompMarkmapComponent } from '../comp-markmap/comp-markmap.component';
 import { CloudObject } from 'src/lib/ncloud';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { InterestSearchComponent } from '../interest-search/interest-search.component';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-tab4',
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonButton, FmChatModalInput,
-    CompMarkmapComponent
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
+    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton,
+    IonRippleEffect, IonBackButton, NgSwitch, NgSwitchCase, NgSwitchDefault,
+    InterestSearchComponent, FormsModule, CompMarkmapComponent
   ],
 })
 export class tab4Page {
@@ -24,12 +34,18 @@ export class tab4Page {
   ) {
 
   }
+
+  selectedSegment = 'home';
+  segmentChanged(ev: any) {
+    console.log('Segment changed:', ev.detail.value);
+    this.selectedSegment = ev.detail.value;
+  }
   title: string = "123"
 
   /** 展示计划结果Markdown文件 */
-  isComplete:boolean = false;
-  planMessage:any
-  markmapResult:string = "";
+  isComplete: boolean = false;
+  planMessage: any
+  markmapResult: string = "";
   /** 示例：兴趣规划聊天ChatPanel面板 */
   openInquiry() {
     localStorage.setItem("company", "E4KpGvTEto")
@@ -44,32 +60,30 @@ export class tab4Page {
         chat.role.set("tags", ["兴趣学习规划", "个性化方案"]);
         chat.role.set("avatar", "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
         chat.role.set("prompt", `
-# 角色设定
-您是一位经验丰富且极具热情的兴趣学习规划师，明明，年龄 32 岁，需要为学生制定个性化的兴趣学习规划。
+        您是一位经验丰富且极具热情的兴趣学习规划师，明明，年龄 32 岁，需要为学生制定个性化的兴趣学习规划。
 
-# 对话环节
-0. 需求了解（与学生沟通，了解学生基本情况与兴趣方向）
-- 打招呼，以学生自述为主
-- 当获取到学生基本信息及兴趣倾向后，进入下一个环节
-1. 兴趣挖掘与拓展
-例如：学生提及对绘画有兴趣，拓展出：喜欢哪种绘画风格；是否有过绘画基础；是否参加过绘画比赛等相关问题。
-- 当兴趣挖掘与拓展完成后进入下一个环节
-2. 学习规划制定
-根据学生情况制定包括学习目标、学习资源、学习进度安排等在内的兴趣学习规划。
-- 等待学生反馈意见，进入下一阶段
-3. 规划调整与完善
-根据反馈对学习规划进行调整优化，并给出最终的详细规划方案。
-- 完成规划方案时，请直接用markmap格式编写方案，具体格式严格按照
-\`\`\` markdown
-# XXX计划
-## 二级
-- 三级
-- 三级
-\`\`\`
-请直接返回markdown内生成的方案内容，不用有其他的赘述。并且返回的内容结尾要有[完成]
+        # 对话环节
+        0. 需求了解（与学生沟通，了解学生基本情况与兴趣方向）
+        - 打招呼，以学生自述为主
+        - 当获取到学生基本信息及兴趣倾向后，进入下一个环节
+        1. 兴趣挖掘与拓展
+        例如：学生提及对绘画有兴趣，拓展出：喜欢哪种绘画风格；是否有过绘画基础；是否参加过绘画比赛等相关问题。
+        - 当兴趣挖掘与拓展完成后进入下一个环节
+        2. 学习规划制定
+        根据学生情况制定包括学习目标、学习资源、学习进度安排等在内的兴趣学习规划。
+        - 等待学生反馈意见，进入下一阶段
+        3. 规划调整与完善
+        根据反馈对学习规划进行调整优化，并给出最终的详细规划方案。
+        - 完成规划方案时，请直接用markmap格式编写方案，具体格式严格按照
+        \`\`\` markdown
+        # XXX计划
+        ## 二级
+        - 三级
+        - 三级
+        \`\`\`
+        请直接返回markdown内生成的方案内容，不用有其他的赘述。并且返回的内容结尾要有[完成]
 
-# 开始话语
-当您准备好了，可以以一个兴趣学习规划师的身份，向来访的学生打招呼。`);
+        当您准备好了，可以以一个兴趣学习规划师的身份，向来访的学生打招呼。`);
       },
       onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
         console.log("onMessage", message)
@@ -82,8 +96,8 @@ export class tab4Page {
             let plan = new CloudObject("GoPlan");
             let now = new Date();
             plan.set({
-              title:"计划"+now.getFullYear()+"-"+now.getMonth()+1+"-"+now.getDate()+"-"+now.getTime(),
-              markmap:markMapContent
+              title: "计划" + now.getFullYear() + "-" + now.getMonth() + 1 + "-" + now.getDate() + "-" + now.getTime(),
+              markmap: markMapContent
             })
             plan.save();
             this.planMessage = message
@@ -110,7 +124,7 @@ export class tab4Page {
     openChatPanelModal(this.modalCtrl, options)
   }
 
- 
+
 
 
   // audioModalHeightPoint:number = 0.35;

AIart-app/src/app/tab5/tab5.page.html

@@ -1,172 +1,165 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <div style="display: flex;align-items: center;justify-content: center;gap: 10px;">
-      <ion-searchbar placeholder="输入搜索内容" style="width: 70%;margin-top: 10px;"></ion-searchbar>
-      <ion-icon name="gift-outline" style="height: 25px;width: 25px;"></ion-icon>
-      <ion-icon name="scan-outline" style="height: 25px;width: 25px;"></ion-icon>
-      <ion-icon name="settings-outline" style="height: 25px;width: 25px;"></ion-icon>
+    <div class="header-container">
+      <ion-searchbar mode="ios" placeholder="搜索" class="custom-searchbar"></ion-searchbar>
+      <div class="header-actions">
+        <ion-button fill="clear" class="action-button">
+          <ion-icon name="gift-outline"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" class="action-button">
+          <ion-icon name="scan-outline"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" class="action-button">
+          <ion-icon name="settings-outline"></ion-icon>
+        </ion-button>
+      </div>
     </div>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <!-- 个人信息开始 -->
-  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;">
-    <div style="display: flex;justify-content: space-between;">
-      <div style="display: flex;">
-        <div class="img-style">
-          <img src="../../assets/img/logo.png" alt="兴趣学习" class="logo-img">
-        </div>
-        <div style="margin-left: 25px">
-          <div>
-            <p style="font-weight: bold;font-size: 22px;margin-bottom: 0;">游客用户</p>
-          </div>
-          <div>
-            <p style="margin-top: 5px;font-size: 15px;">15 关注&nbsp;&nbsp;&nbsp;&nbsp;3 关注我</p>
-          </div>
+<ion-content [fullscreen]="true" class="ion-padding">
+  <!-- 个人信息卡片 -->
+  <div class="profile-card">
+    <div class="profile-header">
+      <div class="profile-info">
+        <div class="avatar-container">
+          <img src="../../assets/img/logo.png" alt="头像" class="avatar">
+        </div>
+        <div class="user-info">
+          <h2>游客用户</h2>
+          <p>15 关注 · 3 关注</p>
         </div>
       </div>
-      <div style="display: flex;align-items: center;margin-right: 20px;">
-        <ion-icon name="chevron-forward-outline" class="rounded-rectangle" (click)="goUserLogin()"
-          style="width: 25px;height: 25px;"></ion-icon>
-      </div>
+      <ion-button fill="clear" class="profile-action" (click)="goUserLogin()">
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </ion-button>
     </div>
-    <div style="display: flex;align-items: center;justify-content: center;gap: 40px;
-      text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
-      <div style="padding: 0;align-items: center;justify-content: center;">
-        <div>
-          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">300</p>
-        </div>
-        <div>
-          <p style="margin-top: 5px;">学分</p>
-        </div>
+
+    <div class="stats-container">
+      <div class="stat-item">
+        <h3>300</h3>
+        <p>学分</p>
       </div>
-      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
-        <div style="display: flex;align-items: center;justify-content: center;">
-          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">15</p><span
-            style="font-size: 15px;">分钟</span>
-        </div>
-        <div>
-          <p style="margin-top: 5px;">今日学习</p>
-        </div>
+      <div class="stat-item">
+        <h3>15<span>分钟</span></h3>
+        <p>今日学习</p>
       </div>
-      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
-        <div>
-          <p style="font-weight: bold;font-size: 23px;margin-top: 0;margin-bottom: 0;">2</p>
-        </div>
-        <div>
-          <p style="margin-top: 5px;">勋章</p>
-        </div>
+      <div class="stat-item">
+        <h3>2</h3>
+        <p>勋章</p>
       </div>
-      <div style="padding: 0;align-items: center;justify-content: center;text-align: center;">
-        <div>
-          <p style="font-weight: bold;font-size: 20px;margin-top: 0;margin-bottom: 0;">0</p>
-        </div>
-        <div>
-          <p style="margin-top: 5px;">证书</p>
-        </div>
+      <div class="stat-item">
+        <h3>0</h3>
+        <p>证书</p>
       </div>
     </div>
-    <div class="center" style="background-color:#f2efde;border-radius: 0px 0px 8px 8px;font-size: 15px;">
-      <ion-icon name="heart-circle-outline" style="height: 23px;width: 23px;margin-right: 5px;"></ion-icon>
-      <p style="font-weight: 900;">邀请好友</p>
-      <ion-icon name="chevron-forward-outline" style="margin-left: 5px;"></ion-icon>
+
+    <div class="invite-banner">
+      <ion-icon name="heart-circle-outline"></ion-icon>
+      <span>邀请好友</span>
+      <ion-icon name="chevron-forward-outline"></ion-icon>
     </div>
   </div>
-  <!-- 个人信息结束 -->
-  <!-- 我的账户开始 -->
-  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;padding-bottom: 10px;">
-    <div style="margin-bottom: 20px;">
-      <span style="position: relative;margin-left: 20px;font-size: 20px;font-weight: bold;top: 10px;">我的账户</span>
-      <span style="position: relative;top: 9px;margin-left: 165px;">查看全部</span>
-      <ion-icon name="chevron-forward-outline" style="position: relative;top: 12px;"></ion-icon>
+
+  <!-- 我的账户卡片 -->
+  <div class="feature-card">
+    <div class="card-header">
+      <h2>我的账户</h2>
+      <div class="view-all">
+        <span>查看全部</span>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
     </div>
 
-    <div style="margin-bottom: 20px;">
-      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
-        text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
-        <div class="s-style">
-          <ion-icon name="wallet-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">账户</p>
-          <p style="margin: 0;">0.00元</p>
+    <div class="feature-grid">
+      <div class="feature-item">
+        <ion-icon name="wallet-outline"></ion-icon>
+        <div class="text-container">
+          <p>账户</p>
+          <span class="amount">0.00元</span>
         </div>
-        <div class="s-style" style="width: 70px;">
-          <ion-icon name="folder-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">卡券</p>
-          <p style="margin: 0;color: rgb(236, 56, 16);">3张优惠券</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="folder-outline"></ion-icon>
+        <div class="text-container">
+          <p>卡券</p>
+          <span class="highlight">3张优惠券</span>
         </div>
-        <div class="s-style">
-          <ion-icon name="reader-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">订单</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="reader-outline"></ion-icon>
+        <div class="text-container">
+          <p>订单</p>
         </div>
-        <div class="s-style">
-          <ion-icon name="cart-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">购物车</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="cart-outline"></ion-icon>
+        <div class="text-container">
+          <p>购物车</p>
         </div>
       </div>
     </div>
 
-    <div style="margin-bottom: 15px;">
-      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
-        text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
-        <div class="s-style">
-          <ion-icon name="medal-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">会员</p>
+    <div class="feature-grid">
+      <div class="feature-item">
+        <ion-icon name="medal-outline"></ion-icon>
+        <div class="text-container">
+          <p>会员</p>
         </div>
-        <div class="s-style">
-          <!-- <ion-icon name="card-outline" style="height: 25px;width: 25px;"></ion-icon> -->
-          <ion-icon name="thumbs-up-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">打赏</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="thumbs-up-outline"></ion-icon>
+        <div class="text-container">
+          <p>打赏</p>
         </div>
-        <div class="s-style" style="width: 70px;">
-          <ion-icon name="ticket-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">活动门票</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="ticket-outline"></ion-icon>
+        <div class="text-container">
+          <p>活动门票</p>
         </div>
-        <div class="s-style">
-          <ion-icon name="sparkles-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">积分</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="bag-check-outline"></ion-icon>
+        <div class="text-container">
+          <p>订阅通知</p>
         </div>
       </div>
     </div>
   </div>
-  <!-- 我的账户结束 -->
-  <!-- 我的内容开始 -->
-  <div style="background-color: #fcfafafa;margin: 10px;border-radius: 8px;padding-bottom: 10px;">
-    <div style="margin-bottom: 20px;">
-      <span style="position: relative;margin-left: 20px;font-size: 20px;font-weight: bold;top: 10px;">我的内容</span>
-      <ion-icon name="chevron-forward-outline" style="position: relative;top: 12px;"></ion-icon>
+
+  <!-- 我的内容卡片 -->
+  <div class="feature-card">
+    <div class="card-header">
+      <h2>我的内容</h2>
+      <ion-icon name="chevron-forward-outline"></ion-icon>
     </div>
-    <div style="margin-bottom: 20px;">
-      <div style="display: flex;align-items: center;justify-content: center;gap: 25px;
-          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
-        <div class="s-style">
-          <ion-icon name="document-text-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">笔记</p>
-        </div>
-        <div class="s-style" style="width: 70px;">
-          <ion-icon name="time-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">最近学习</p>
+
+    <div class="feature-grid single-row">
+      <div class="feature-item">
+        <ion-icon name="document-text-outline"></ion-icon>
+        <div class="text-container">
+          <p>笔记</p>
         </div>
-        <div class="s-style">
-          <ion-icon name="cloud-download-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">下载</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="time-outline"></ion-icon>
+        <div class="text-container">
+          <p>最近学习</p>
         </div>
-        <div class="s-style">
-          <ion-icon name="heart-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">收藏</p>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="cloud-download-outline"></ion-icon>
+        <div class="text-container">
+          <p>下载</p>
         </div>
       </div>
-    </div>
-
-    <div style="margin-bottom: 15px;">
-      <div style="display: flex;gap: 25px;
-          text-align: center;margin-top: 5px;margin-bottom: 5px;font-size: 15px;">
-        <div class="s-style" style="width: auto;margin-left: 25px;">
-          <ion-icon name="bag-check-outline" style="height: 25px;width: 25px;"></ion-icon>
-          <p style="margin: 0;">订阅通知</p>
+      <div class="feature-item">
+        <ion-icon name="heart-outline"></ion-icon>
+        <div class="text-container">
+          <p>收藏</p>
         </div>
       </div>
     </div>
   </div>
-  <!-- 我的账户结束 -->
 </ion-content>

AIart-app/src/app/tab5/tab5.page.scss

@@ -1,23 +1,326 @@
-.img-style {
-    height: 75px;
-    width: 75px;
-    position: relative;
-    border-radius: 100%;
+:host {
+    --page-padding: 16px;
+    --card-border-radius: 16px;
+    --card-background: #ffffff;
+    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+    --primary-warm: #f5f5f5;
+    --secondary-warm: #e0e0e0;
+    --accent-warm: #eeeeee;
 }
 
-.logo-img {
-    border-radius: 100%;
-    color: #fcfafafa;
-    margin-left: 13px;
-    margin-top: 13px;
+ion-content {
+    --background: linear-gradient(135deg, var(--primary-warm) 0%, var(--secondary-warm) 100%);
 }
 
-.center {
+// 头部样式
+.header-container {
     display: flex;
     align-items: center;
-    justify-content: center;
+    padding: 8px var(--page-padding);
+    gap: 12px;
+
+    .custom-searchbar {
+        flex: 1;
+        --background: rgba(255, 255, 255, 0.9);
+        --border-radius: 12px;
+        --placeholder-color: #666;
+        --icon-color: #666;
+        padding: 0;
+        margin: 0;
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 8px;
+
+        .action-button {
+            --padding-start: 8px;
+            --padding-end: 8px;
+            height: 40px;
+
+            ion-icon {
+                font-size: 20px;
+                color: #5d4037;
+            }
+        }
+    }
+}
+
+// 个人信息卡片
+.profile-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    margin-bottom: 16px;
+    backdrop-filter: blur(10px);
+
+    .profile-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+
+        .profile-info {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+
+            .avatar-container {
+                width: 64px;
+                height: 64px;
+                border-radius: 50%;
+                overflow: hidden;
+                background: #f4f5f8;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+
+            .user-info {
+                h2 {
+                    margin: 0;
+                    font-size: 20px;
+                    font-weight: 600;
+                    color: var(--ion-color-dark);
+                }
+
+                p {
+                    margin: 4px 0 0;
+                    font-size: 14px;
+                    color: var(--ion-color-medium);
+                }
+            }
+        }
+
+        .profile-action {
+            --padding-start: 8px;
+            --padding-end: 8px;
+            height: 36px;
+
+            ion-icon {
+                font-size: 20px;
+                color: var(--ion-color-medium);
+            }
+        }
+    }
+
+    .stats-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        padding: 16px 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        background: linear-gradient(to right, rgba(230, 185, 128, 0.1), rgba(234, 205, 163, 0.1));
+
+        .stat-item {
+            text-align: center;
+
+            h3 {
+                margin: 0;
+                font-size: 20px;
+                font-weight: 600;
+                color: #5d4037;
+
+                span {
+                    font-size: 12px;
+                    margin-left: 2px;
+                }
+            }
+
+            p {
+                margin: 4px 0 0;
+                font-size: 12px;
+                color: #8d6e63;
+            }
+        }
+    }
+
+    .invite-banner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 12px;
+        background: linear-gradient(to right, var(--accent-warm), var(--secondary-warm));
+        color: #5d4037;
+        font-size: 14px;
+        font-weight: 500;
+
+        ion-icon {
+            font-size: 18px;
+            color: #5d4037;
+        }
+    }
+}
+
+// 功能卡片
+.feature-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 20px;
+    margin-bottom: 16px;
+    backdrop-filter: blur(10px);
+
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        h2 {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: #5d4037;
+        }
+
+        .view-all {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: #8d6e63;
+            font-size: 14px;
+        }
+    }
+
+    .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        margin-bottom: 20px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        .feature-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            padding: 16px 8px;
+            border-radius: 12px;
+            transition: all 0.3s;
+            text-align: center;
+            min-height: 100px;
+            background: rgba(255, 255, 255, 0.5);
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.8);
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            }
+
+            ion-icon {
+                font-size: 28px;
+                color: #666;
+                margin-bottom: 4px;
+            }
+
+            .text-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                width: 100%;
+            }
+
+            p {
+                margin: 0;
+                font-size: 14px;
+                color: #333;
+                width: 100%;
+            }
+
+            .amount,
+            .highlight {
+                font-size: 12px;
+                margin-top: 2px;
+            }
+
+            .amount {
+                color: #666;
+            }
+
+            .highlight {
+                color: #ff5722;
+            }
+        }
+
+        .feature-item.wide {
+            grid-column: span 2;
+            display: flex;
+            flex-direction: column;
+            padding: 16px;
+            min-height: 100px;
+
+            .text-container {
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+            }
+
+            p {
+                text-align: center;
+            }
+
+            .amount,
+            .highlight {
+                margin-top: 0;
+                margin-left: 8px;
+            }
+        }
+    }
+
+    // 我的内容卡片特殊样式
+    &:last-child {
+        .card-header {
+            margin-bottom: 12px; // 减小头部和内容的间距
+        }
+
+        .feature-grid {
+            margin-bottom: 12px; // 减小网格的下边距
+
+            &.single-row {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 16px; // 减小项目间距
+                margin-bottom: 0; // 移除最后一个网格的下边距
+            }
+
+            .feature-item {
+                min-height: 80px; // 减小每个项目的高度
+                padding: 12px 8px; // 减小内边距
+
+                ion-icon {
+                    font-size: 24px; // 稍微减小图标大小
+                    margin-bottom: 2px; // 减小图标和文字的间距
+                }
+
+                .text-container {
+                    gap: 2px; // 减小文字内部的间距
+                }
+
+                p {
+                    font-size: 13px; // 稍微调整文字大小
+                }
+            }
+        }
+    }
 }
 
-.s-style {
-    width: 50px;
+// 添加头部毛玻璃效果
+ion-header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+
+    ion-toolbar {
+        --background: transparent;
+    }
 }

AIart-app/src/app/tab5/tab5.page.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonButton } from '@ionic/angular/standalone';
 import { Router } from '@angular/router';
 
 @Component({
@@ -8,11 +7,19 @@ import { Router } from '@angular/router';
   templateUrl: 'tab5.page.html',
   styleUrls: ['tab5.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonSearchbar, IonIcon],
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonSearchbar,
+    IonIcon,
+    IonButton
+  ],
 })
 export class tab5Page {
   constructor(private router: Router) { }
+
   goUserLogin() {
     this.router.navigate(['/tabs/user-login'])
   }

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

@@ -1,27 +1,27 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon name="compass-outline"></ion-icon>
-      <ion-label>发现</ion-label>
+      <ion-icon aria-hidden="true" name="home-outline"></ion-icon>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon name="document-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="book-outline"></ion-icon>
       <ion-label>学习计划</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon name="add-outline"
-        style="color: white;background-color: red;border-radius: 10px;width: 45px;height: 35px;"></ion-icon>
+    <ion-tab-button tab="tab4" href="/tabs/tab4" class="main-tab">
+      <ion-icon aria-hidden="true" name="bulb-outline"></ion-icon>
+      <ion-label>AI助手</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon name="book-outline"></ion-icon>
-      <ion-label>社区分享</ion-label>
+      <ion-icon aria-hidden="true" name="people-outline"></ion-icon>
+      <ion-label>社区</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab5" href="/tabs/tab5">
-      <ion-icon name="person-outline"></ion-icon>
+      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

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

@@ -1 +1,129 @@
+:host {
+    --tab-bar-background: white;
+    --tab-bar-border-color: #f5f5f5;
+    --tab-bar-height: 56px;
+    --icon-color: #999;
+    --icon-color-selected: #b64d24;
+    --label-color: #666;
+    --label-color-selected: #b64d24;
+}
 
+ion-tab-bar {
+    --border: none;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+    height: var(--tab-bar-height);
+    padding: 0;
+    position: relative;
+
+    &::before {
+        display: none;
+    }
+
+    ion-tab-button {
+        --color: var(--icon-color);
+        --color-selected: var(--icon-color-selected);
+        position: relative;
+        overflow: visible;
+        background: transparent;
+
+        ion-icon {
+            font-size: 22px;
+            margin-bottom: 4px;
+            transition: all 0.2s ease;
+        }
+
+        ion-label {
+            font-size: 12px;
+            font-weight: 500;
+            margin: 0;
+            color: var(--label-color);
+            transition: all 0.2s ease;
+        }
+
+        // 中间的主要tab按钮样式
+        &.main-tab {
+            .tab-circle {
+                width: 44px;
+                height: 44px;
+                background: var(--icon-color-selected);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: -20px auto 2px;
+                box-shadow: 0 4px 12px rgba(182, 77, 36, 0.2);
+                transition: transform 0.2s ease;
+
+                ion-icon {
+                    color: white;
+                    font-size: 24px;
+                    margin: 0;
+                }
+            }
+
+            ion-label {
+                margin-top: 2px;
+            }
+
+            &.tab-selected {
+                .tab-circle {
+                    transform: translateY(-2px);
+                }
+            }
+        }
+
+        &.tab-selected {
+            ion-icon {
+                transform: translateY(-2px);
+                color: var(--icon-color-selected);
+            }
+
+            ion-label {
+                color: var(--label-color-selected);
+                font-weight: 600;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: 6px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 20px;
+                height: 3px;
+                border-radius: 1.5px;
+                background: var(--icon-color-selected);
+            }
+        }
+
+        &::before {
+            display: none;
+        }
+
+        // 添加涟漪效果
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            background: rgba(182, 77, 36, 0.1);
+            border-radius: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            transition: transform 0.3s ease;
+            opacity: 0;
+        }
+
+        &:active::after {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+        }
+    }
+}
+
+// 适配 iPhone 底部安全区域
+:host-context(.ios) ion-tab-bar {
+    padding-bottom: env(safe-area-inset-bottom);
+    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
+}

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

@@ -9,7 +9,15 @@ import {
   scanOutline, settingsOutline, heartCircleOutline, walletOutline, bagRemoveOutline,
   folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline, documentTextOutline,
   timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline, searchOutline, menuOutline,
-  addCircleOutline, addOutline, optionsOutline
+  addCircleOutline, addOutline, optionsOutline, bookmarkOutline, notificationsOutline,
+  chevronBackOutline, chatbubblesOutline, refreshOutline, createOutline,
+  logOutOutline,
+  closeCircleOutline,
+  bulbOutline,
+  homeOutline,
+  peopleOutline,
+  trashOutline,
+  chatbubbleOutline
 } from 'ionicons/icons';
 
 
@@ -32,7 +40,10 @@ export class TabsPage {
       giftOutline, scanOutline, settingsOutline, heartCircleOutline, walletOutline,
       bagRemoveOutline, folderOutline, readerOutline, cartOutline, thumbsUpOutline,
       ticketOutline, documentTextOutline, timeOutline, cloudDownloadOutline, bagCheckOutline,
-      cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline
+      cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline,
+      bookmarkOutline, notificationsOutline, chevronBackOutline, chatbubblesOutline,
+      refreshOutline, createOutline, logOutOutline, closeCircleOutline, bulbOutline,
+      homeOutline, peopleOutline, trashOutline, chatbubbleOutline
     });
   }
 }

AIart-app/src/app/user-login/user-login.component.html

@@ -1,77 +1,88 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar class="custom-toolbar">
     <ion-buttons slot="start">
-      <ion-back-button default-href="/tabs/tab5" style="color:black;"></ion-back-button>
+      <ion-back-button default-href="/tabs/tab5"></ion-back-button>
     </ion-buttons>
-    @if(!currentUser?.id){
     <ion-title class="custom-title">
-      用户登录注册
+      {{ currentUser?.id ? '个人信息' : '用户登录注册' }}
     </ion-title>
-    }
-    @if(currentUser?.id){
-    <ion-title class="custom-title">
-      个人信息
-    </ion-title>
-    }
   </ion-toolbar>
 </ion-header>
-<ion-content [fullscreen]="true" style="padding-top: 3px;">
 
-  <!-- 用户登录状态 -->
-  <ion-card style="height: 90%;width: 90%;">
-    <!-- 未登录 -->
-    @if(!currentUser?.id){
-    <ion-card-header style="display: flex;align-items: center;">
-      <ion-card-title>Register/Login</ion-card-title>
-      <ion-card-subtitle>no user information</ion-card-subtitle>
+<ion-content [fullscreen]="true">
+  <!-- 主卡片 -->
+  <ion-card>
+    @if(!currentUser?.id) {
+    <ion-card-header>
+      <ion-card-title style="margin-left: 10px;">欢迎使用 AI艺速</ion-card-title>
+      <ion-card-subtitle style="margin: 10px;">登录后体验更多功能</ion-card-subtitle>
     </ion-card-header>
+
+    <ion-card-content>
+      <img class="login-image" src="assets/img/background.png" alt="登录注册">
+
+      <ion-button expand="block" (click)="signup()">
+        注册新账号
+      </ion-button>
+      <ion-button expand="block" class="outline-button" (click)="login()">
+        登录已有账号
+      </ion-button>
+
+      <div class="social-login">
+        <div class="divider">其他登录方式</div>
+        <div class="social-icons">
+          <img src="assets/img/login_icon.png" alt="社交登录">
+          <img src="assets/img/login_icon2.png" alt="社交登录">
+        </div>
+        <a href="#" class="forgot-password">忘记密码？</a>
+      </div>
+    </ion-card-content>
     }
-    <!-- 已登录 -->
-    @if(currentUser?.id){
-    <ion-card-header class="card-header">
-      <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
+
+    @if(currentUser?.id) {
+    <div class="card-header">
+      <img [src]="currentUser?.get('avatar') || 'assets/img/doctor7.png'" alt="头像" class="avatar" />
       <div class="user-info">
-        <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
+        <ion-card-title>{{ currentUser?.get("username") }}</ion-card-title>
         <ion-card-subtitle>
-          姓名: {{currentUser?.get("realname") || "-"}}
-          性别: {{currentUser?.get("gender") || "-"}}
-          年龄: {{currentUser?.get("age") || "-"}}
+          姓名: {{ currentUser?.get("realname") || "-" }} ·
+          性别: {{ currentUser?.get("gender") || "-" }} ·
+          年龄: {{ currentUser?.get("age") || "-" }}
         </ion-card-subtitle>
       </div>
-    </ion-card-header>
-    }
+    </div>
+
     <ion-card-content>
-      @if(!currentUser?.id){
-      <img src="../../assets/img/background.png" alt="登录注册">
-      <ion-button expand="block" (click)="signup()">注册</ion-button>
-      <ion-button expand="block" (click)="login()">登录</ion-button>
-      <div style="display: flex;align-items: center;">
-        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon.png" alt="">
-        <img style="height: 40px;width: 40px;border-radius: 10px;" src="../../assets/img/login_icon2.png" alt="">
-        <!-- <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon3.png" alt="">
-        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon4.png" alt=""> -->
-      </div>
-      <span style="margin-left: 70px;">Forgot your password?</span>
-      <!-- <img src="../../assets/img/login_icon.png" alt=""> -->
-      }
-      @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()">登出</ion-button>
-      }
+      <ion-button expand="block" (click)="editUser()">
+        <ion-icon name="create-outline" slot="start"></ion-icon>
+        编辑个人资料
+      </ion-button>
+      <ion-button expand="block" class="outline-button" (click)="logout()">
+        <ion-icon name="log-out-outline" slot="start"></ion-icon>
+        退出登录
+      </ion-button>
     </ion-card-content>
+    }
   </ion-card>
-  @if(currentUser?.id){
+
+  @if(currentUser?.id) {
   <ion-card class="memo-card">
-    <h2 class="memo-title">健康备忘录</h2>
-    <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
+    <h2 class="memo-title">兴趣跟踪表</h2>
+    <p class="memo-description">写下您感兴趣的学习方向或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
+
     <edit-tag (onTagChange)="setTagsValue($event)"></edit-tag>
 
+    @if(editTags.length > 0) {
     <h2 class="memo-title">收藏夹</h2>
     <ul class="tag-list">
-      @for(tag of editTags; track tag;){
-      <li class="tag-item">{{tag}}</li>
+      @for(tag of editTags; track tag) {
+      <li class="tag-item">
+        <span>{{ tag }}</span>
+        <ion-icon name="close-circle-outline"></ion-icon>
+      </li>
       }
     </ul>
+    }
   </ion-card>
   }
 </ion-content>

AIart-app/src/app/user-login/user-login.component.scss

@@ -1,35 +1,205 @@
-.custom-toolbar {
-    --background: rgba(255, 255, 255, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
+:host {
+    --page-padding: 16px;
+    --primary-color: #b64d24;
+    --card-border-radius: 16px;
+    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }
 
-.custom-title {
-    font-size: 17px;
-    color: #000000;
-    text-align: center;
-    margin: 0;
+// 头部工具栏样式
+.custom-toolbar {
+    --background: white;
+    --border-color: transparent;
+    padding: 8px 0;
+
+    ion-back-button {
+        --color: var(--primary-color);
+        --padding-start: 12px;
+    }
 
+    .custom-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+    }
 }
 
-ion-card-content img {
-    border-radius: 100%;
-    width: 150px;
-    height: 150px;
-    margin-left: 75px;
-    margin-bottom: 15px;
+// 主卡片样式
+ion-card {
+    margin: 16px;
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-shadow);
+    background: white;
+    overflow: hidden;
+
+    // 卡片头部样式
+    .card-header {
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+
+        .avatar {
+            width: 64px;
+            height: 64px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .user-info {
+            flex: 1;
+
+            ion-card-title {
+                font-size: 18px;
+                font-weight: 600;
+                color: #333;
+                margin-bottom: 4px;
+            }
+
+            ion-card-subtitle {
+                font-size: 14px;
+                color: #666;
+                line-height: 1.4;
+            }
+        }
+    }
+
+    // 卡片内容样式
+    ion-card-content {
+        padding: 20px;
+
+        .login-image {
+            width: 180px;
+            height: 180px;
+            margin: 20px auto;
+            margin-top: 0;
+            display: block;
+            border-radius: 16px;
+            object-fit: cover;
+        }
+
+        ion-button {
+            --background: var(--primary-color);
+            --background-hover: var(--primary-color);
+            --background-activated: var(--primary-color);
+            --background-focused: var(--primary-color);
+            --color: white;
+            --border-radius: 10px;
+            --box-shadow: 0 4px 12px rgba(182, 77, 36, 0.2);
+
+            margin: 8px 0;
+            height: 44px;
+            font-size: 16px;
+            font-weight: 500;
+            text-transform: none;
+
+            &.outline-button {
+                --background: transparent;
+                --color: var(--primary-color);
+                --border-color: var(--primary-color);
+                --border-style: solid;
+                --border-width: 1px;
+            }
+        }
+
+        .social-login {
+            margin-top: 24px;
+            text-align: center;
+
+            .divider {
+                display: flex;
+                align-items: center;
+                margin: 16px 0;
+                color: #999;
+                font-size: 14px;
+
+                &::before,
+                &::after {
+                    content: "";
+                    flex: 1;
+                    height: 1px;
+                    background: #eee;
+                    margin: 0 16px;
+                }
+            }
+
+            .social-icons {
+                display: flex;
+                justify-content: center;
+                gap: 16px;
+                margin: 16px 0;
+
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    padding: 8px;
+                    background: #f8f9fa;
+                    transition: transform 0.3s;
+
+                    &:hover {
+                        transform: translateY(-2px);
+                    }
+                }
+            }
+        }
+
+        .forgot-password {
+            text-align: center;
+            margin-top: 16px;
+            color: #666;
+            font-size: 14px;
+            text-decoration: none;
+
+            &:hover {
+                color: var(--primary-color);
+            }
+        }
+    }
 }
 
-ion-card-content ion-button {
-    width: 85%;
-    margin-left: 22px;
-    --background: #bfc7ce;
-    --background-hover: #bfc7ce;
-    --background-activated: #bfc7ce;
-    --background-focused: #bfc7ce;
-    --color: black;
-    font-weight: bold;
-    margin-bottom: 15px;
+// 备忘录卡片样式
+.memo-card {
+    padding: 20px;
+    margin: 16px;
+
+    .memo-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin: 0 0 12px;
+    }
+
+    .memo-description {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 20px;
+        line-height: 1.5;
+    }
+
+    .tag-list {
+        list-style: none;
+        padding: 0;
+        margin: 16px 0 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .tag-item {
+            background: #f8f9fa;
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 13px;
+            color: #666;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            &:hover {
+                background: #e9ecef;
+            }
+        }
+    }
 }

AIart-app/src/app/user-login/user-login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonButtons, IonBackButton } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonButtons, IonBackButton, IonIcon } from '@ionic/angular/standalone';
 import { EditTagComponent } from '../edit-tag/edit-tag.component';
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/model-user-login/model-user-login.component';
@@ -12,7 +12,7 @@ import { openUserEditModal } from 'src/lib/user/model-user-edit/model-user-edit.
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent,
     IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,
-    EditTagComponent, IonButtons, IonBackButton,
+    EditTagComponent, IonButtons, IonBackButton, IonIcon
   ],
 })
 export class UserLoginComponent implements OnInit {

AIart-app/src/lib/user/model-user-edit/model-user-edit.component.scss

@@ -0,0 +1,115 @@
+:host {
+    --primary-color: #b64d24;
+    --border-radius: 12px;
+    --input-background: #f8f9fa;
+}
+
+ion-card {
+    margin: 0;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    overflow: hidden;
+
+    ion-card-header {
+        padding: 24px;
+        background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
+        color: white;
+
+        ion-card-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: white;
+        }
+
+        ion-card-subtitle {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 14px;
+        }
+    }
+
+    ion-card-content {
+        padding: 24px;
+
+        ion-item {
+            --background: var(--input-background);
+            --border-radius: 10px;
+            --padding-start: 16px;
+            --padding-end: 16px;
+            --min-height: 56px;
+            margin-bottom: 16px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+
+            &:last-of-type {
+                margin-bottom: 24px;
+            }
+
+            &.item-has-focus {
+                --background: white;
+                box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(182, 77, 36, 0.1);
+                transform: translateY(-1px);
+            }
+
+            ion-input {
+                --padding-start: 8px;
+                --padding-end: 8px;
+                --placeholder-color: #999;
+                --placeholder-opacity: 0.8;
+                font-size: 15px;
+
+                &::part(label) {
+                    color: #666;
+                    font-size: 14px;
+                    margin-bottom: 4px;
+                }
+            }
+        }
+
+        ion-button {
+            margin: 8px 0;
+            height: 48px;
+            --border-radius: 10px;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+
+            &:first-of-type {
+                --background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
+                --background-hover: linear-gradient(135deg, #ff6b4a, var(--primary-color));
+                --box-shadow: 0 4px 16px rgba(182, 77, 36, 0.25);
+            }
+
+            &:last-of-type {
+                --background: transparent;
+                --color: #666;
+                --border-style: solid;
+                --border-color: #ddd;
+                --border-width: 1px;
+                --box-shadow: none;
+
+                &:hover {
+                    --background: #f8f9fa;
+                }
+            }
+        }
+    }
+}
+
+// 添加动画
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+ion-card {
+    animation: slideIn 0.3s ease-out;
+}

AIart-app/src/lib/user/model-user-edit/model-user-edit.component.ts

@@ -49,8 +49,10 @@ export class ModelUserEditComponent implements OnInit {
 export async function openUserEditModal(modalCtrl: ModalController): Promise<CloudUser | null> {
   const modal = await modalCtrl.create({
     component: ModelUserEditComponent,
-    breakpoints: [0.7, 1.0],
-    initialBreakpoint: 0.7
+    breakpoints: [0, 0.6, 0.8],
+    initialBreakpoint: 0.6,
+    backdropBreakpoint: 0.6,
+    cssClass: 'edit-modal'
   });
   modal.present();
 

AIart-app/src/lib/user/model-user-login/model-user-login.component.html

@@ -11,28 +11,45 @@
         </ion-segment-button>
       </ion-segment>
     </ion-card-title>
-    <ion-card-subtitle>请输入账号密码</ion-card-subtitle>
+    <ion-card-subtitle>{{ isSignup ? '创建新账号' : '请输入账号密码' }}</ion-card-subtitle>
   </ion-card-header>
   <ion-card-content>
-    <ion-item>
-      <ion-input [value]="username" (ionChange)="usernameChange($event)" label="账号"
-        placeholder="请您输入账号/手机号"></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-input [value]="password" (ionChange)="passwordChange($event)" label="密码" type="password"
-        value="password"></ion-input>
-    </ion-item>
+    <div class="form-group">
+      <ion-item [class.ion-invalid]="errorMessage && !username">
+        <ion-icon slot="start" name="person-outline"></ion-icon>
+        <ion-label position="stacked">用户名</ion-label>
+        <ion-input type="text" [(ngModel)]="username" placeholder="请输入3-20位字母、数字、下划线或中文" (ionFocus)="errorMessage = ''">
+        </ion-input>
+      </ion-item>
 
-    @if(type=="signup"){
-    <ion-item>
-      <ion-input [value]="password2" (ionChange)="password2Change($event)" label="重复密码" type="password"
-        value="password"></ion-input>
-    </ion-item>
-    }
-    @if(type=="login"){
+      <ion-item [class.ion-invalid]="errorMessage && !password">
+        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+        <ion-label position="stacked">密码</ion-label>
+        <ion-input type="password" [(ngModel)]="password" placeholder="请输入6-20位字母、数字或下划线"
+          (ionFocus)="errorMessage = ''">
+        </ion-input>
+      </ion-item>
+
+      @if(isSignup) {
+      <ion-item [class.ion-invalid]="errorMessage && !password2">
+        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+        <ion-label position="stacked">确认密码</ion-label>
+        <ion-input type="password" [(ngModel)]="password2" placeholder="请再次输入密码" (ionFocus)="errorMessage = ''">
+        </ion-input>
+      </ion-item>
+      }
+
+      @if(errorMessage) {
+      <div class="error-message">
+        {{ errorMessage }}
+      </div>
+      }
+    </div>
+
+    @if(type==="login"){
     <ion-button expand="block" (click)="login()">登录</ion-button>
     }
-    @if(type=="signup"){
+    @if(type==="signup"){
     <ion-button expand="block" (click)="signup()">注册</ion-button>
     }
   </ion-card-content>

AIart-app/src/lib/user/model-user-login/model-user-login.component.scss

@@ -0,0 +1,152 @@
+:host {
+    --primary-color: #b64d24;
+    --border-radius: 12px;
+    --input-background: #f8f9fa;
+}
+
+ion-card {
+    margin: 0;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    overflow: hidden;
+
+    ion-card-header {
+        padding: 24px;
+        text-align: center;
+
+        ion-card-title {
+            margin-bottom: 24px;
+
+            ion-segment {
+                --background: var(--input-background);
+                border-radius: var(--border-radius);
+                padding: 4px;
+
+                ion-segment-button {
+                    --background: transparent;
+                    --background-checked: white;
+                    --color: #666;
+                    --color-checked: var(--primary-color);
+                    --indicator-color: transparent;
+                    min-height: 44px;
+                    font-size: 15px;
+                    font-weight: 500;
+                    letter-spacing: 0.5px;
+                    text-transform: none;
+                    border-radius: 8px;
+                    transition: all 0.3s ease;
+
+                    &::part(indicator) {
+                        display: none;
+                    }
+
+                    &.segment-button-checked {
+                        box-shadow: 0 2px 8px rgba(182, 77, 36, 0.15);
+                    }
+                }
+            }
+        }
+
+        ion-card-subtitle {
+            color: #666;
+            font-size: 14px;
+            margin-bottom: 16px;
+        }
+    }
+
+    ion-card-content {
+        padding: 0 24px 24px;
+
+        ion-item {
+            --background: var(--input-background);
+            --border-radius: 10px;
+            --padding-start: 12px;
+            --padding-end: 12px;
+            --min-height: 48px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+
+            ion-icon {
+                font-size: 18px;
+                color: #666;
+                margin: 0 8px 0 0;
+                min-width: 18px;
+            }
+
+            &.item-has-focus {
+                ion-icon {
+                    color: var(--primary-color);
+                }
+            }
+
+            ion-input {
+                --padding-start: 0;
+                --padding-end: 8px;
+                font-size: 14px;
+            }
+        }
+
+        ion-button {
+            --background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
+            --background-hover: linear-gradient(135deg, #ff6b4a, var(--primary-color));
+            --border-radius: 10px;
+            --box-shadow: 0 4px 16px rgba(182, 77, 36, 0.25);
+
+            margin: 8px 0 0;
+            height: 48px;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            text-transform: none;
+            transition: transform 0.3s ease;
+
+            &:active {
+                transform: scale(0.98);
+            }
+        }
+    }
+}
+
+// 错误提示样式
+.error-message {
+    color: #ff4d4f;
+    font-size: 13px;
+    margin: 4px 0 16px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    animation: shake 0.6s ease;
+
+    &::before {
+        content: "!";
+        width: 16px;
+        height: 16px;
+        background: #ff4d4f;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-5px);
+    }
+
+    75% {
+        transform: translateX(5px);
+    }
+}

AIart-app/src/lib/user/model-user-login/model-user-login.component.ts

@@ -1,70 +1,184 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { Component, Input, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar, ModalController, ToastController, IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { personOutline, lockClosedOutline } from 'ionicons/icons';
 import { CloudUser } from '../../ncloud';
-import { ModalUserLoginComponent } from 'fmode-ng';
 
 @Component({
   selector: 'model-user-login',
   templateUrl: './model-user-login.component.html',
   styleUrls: ['./model-user-login.component.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent,
-    IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, IonInput, IonItem,
-    IonSegment, IonSegmentButton, IonLabel,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    FormsModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonCard,
+    IonCardContent,
+    IonButton,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonInput,
+    IonItem,
+    IonSegment,
+    IonSegmentButton,
+    IonLabel,
+    IonIcon
   ],
 })
 export class ModelUserLoginComponent implements OnInit {
   @Input()
   type: "login" | "signup" = "login"
+
+  // 添加回 typeChange 方法
   typeChange(ev: any) {
-    this.type = ev?.detail?.value || ev?.value || 'login'
+    this.type = ev?.detail?.value || ev?.value || 'login';
+    // 切换类型时清空错误信息和密码
+    this.errorMessage = '';
+    this.password = '';
+    this.password2 = '';
   }
-  username: string = ""
-  usernameChange(ev: any) {
-    console.log(ev)
-    this.username = ev?.detail?.value
+
+  // 添加 isSignup 计算属性
+  get isSignup(): boolean {
+    return this.type === 'signup';
   }
+
+  username: string = ""
   password: string = ""
-  passwordChange(ev: any) {
-    this.password = ev?.detail?.value
-  }
   password2: string = ""
-  password2Change(ev: any) {
-    this.password2 = ev?.detail?.value
+  errorMessage: string = ""
+
+  constructor(
+    private modalCtrl: ModalController,
+    private toastCtrl: ToastController
+  ) {
+    addIcons({
+      'person-outline': personOutline,
+      'lock-closed-outline': lockClosedOutline
+    });
   }
-  constructor(private modalCtrl: ModalController) { }
 
   ngOnInit() { }
 
+  // 验证用户名
+  validateUsername(): boolean {
+    if (!this.username) {
+      this.showError('用户名不能为空');
+      return false;
+    }
+    if (this.username.length < 3) {
+      this.showError('用户名长度不能少于3个字符');
+      return false;
+    }
+    if (this.username.length > 20) {
+      this.showError('用户名长度不能超过20个字符');
+      return false;
+    }
+    if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(this.username)) {
+      this.showError('用户名只能包含字母、数字、下划线和中文');
+      return false;
+    }
+    return true;
+  }
+
+  // 验证密码
+  validatePassword(): boolean {
+    if (!this.password) {
+      this.showError('密码不能为空');
+      return false;
+    }
+    if (this.password.length < 6) {
+      this.showError('密码长度不能少于6个字符');
+      return false;
+    }
+    if (this.password.length > 20) {
+      this.showError('密码长度不能超过20个字符');
+      return false;
+    }
+    if (!/^[a-zA-Z0-9_]+$/.test(this.password)) {
+      this.showError('密码只能包含字母、数字和下划线');
+      return false;
+    }
+    return true;
+  }
+
+  // 验证确认密码
+  validateConfirmPassword(): boolean {
+    if (this.password !== this.password2) {
+      this.showError('两次输入的密码不一致');
+      return false;
+    }
+    return true;
+  }
+
+  async showError(message: string) {
+    this.errorMessage = message;
+    const toast = await this.toastCtrl.create({
+      message: message,
+      duration: 2000,
+      position: 'top',
+      color: 'danger',
+      cssClass: 'error-toast'
+    });
+    await toast.present();
+  }
+
+  async showSuccess(message: string) {
+    const toast = await this.toastCtrl.create({
+      message: message,
+      duration: 2000,
+      position: 'top',
+      color: 'success',
+      cssClass: 'success-toast'
+    });
+    await toast.present();
+  }
+
   async login() {
-    if (!this.username || !this.password) {
-      console.log("请输入完整")
-      return
+    this.errorMessage = '';
+    if (!this.validateUsername() || !this.validatePassword()) {
+      return;
     }
-    let user: any = new CloudUser();
-    user = await user.login(this.username, this.password);
-    if (user?.id) {
-      this.modalCtrl.dismiss(user, "confirm")
-    } else {
-      console.log("登录失败")
+
+    try {
+      let user: any = new CloudUser();
+      user = await user.login(this.username, this.password);
+      if (user?.id) {
+        await this.showSuccess('登录成功');
+        this.modalCtrl.dismiss(user, "confirm");
+      } else {
+        this.showError('用户名或密码错误');
+      }
+    } catch (error) {
+      this.showError('登录失败，请稍后重试');
     }
   }
 
   async signup() {
-    if (!this.username || !this.password || !this.password2) {
-      console.log("请输入完整")
-      return
-    }
-    if (this.password != this.password2) {
-      console.log("两次密码不符，请修改")
-      return
+    this.errorMessage = '';
+    if (!this.validateUsername() || !this.validatePassword() || !this.validateConfirmPassword()) {
+      return;
     }
 
-    let user: any = new CloudUser();
-    user = await user.signUp(this.username, this.password);
-    if (user) {
-      this.type = "login"
-      console.log("注册成功请登录")
+    try {
+      let user: any = new CloudUser();
+      user = await user.signUp(this.username, this.password);
+      if (user) {
+        await this.showSuccess('注册成功，请登录');
+        this.type = "login";
+        this.password = '';
+        this.password2 = '';
+      } else {
+        this.showError('注册失败，该用户名可能已被使用');
+      }
+    } catch (error) {
+      this.showError('注册失败，请稍后重试');
     }
   }
 
@@ -77,8 +191,10 @@ export async function openUserLoginModal(modalCtrl: ModalController, type: "logi
     componentProps: {
       type: type
     },
-    breakpoints: [0.5, 0.7],
-    initialBreakpoint: 0.5
+    breakpoints: [0, 0.6, 0.8],
+    initialBreakpoint: 0.6,
+    backdropBreakpoint: 0.6,
+    cssClass: 'login-modal'
   });
   modal.present();
 

src/global.scss

@@ -0,0 +1,119 @@
+// 弹出框样式
+.login-modal,
+.edit-modal {
+    --height: auto;
+    --max-height: 90vh;
+
+    &::part(content) {
+        margin: 0 16px;
+    }
+
+    ion-content {
+        --padding-top: 0;
+        --padding-bottom: 0;
+    }
+
+    ion-card {
+        margin: 0 0 16px;
+    }
+
+    ion-card-content {
+        padding-top: 12px !important;
+
+        ion-item {
+            margin-bottom: 10px !important;
+
+            &:last-of-type {
+                margin-bottom: 12px !important;
+            }
+
+            ion-icon {
+                margin-right: 8px !important;
+            }
+        }
+    }
+
+    ion-button {
+        margin: 4px 0 !important;
+    }
+
+    // 调整标题和副标题的间距
+    ion-card-header {
+        padding: 16px 16px 8px !important;
+
+        ion-card-title {
+            margin-bottom: 12px !important;
+        }
+
+        ion-card-subtitle {
+            margin-bottom: 4px !important;
+        }
+    }
+
+    // 调整分段控件的间距
+    ion-segment {
+        margin-bottom: 0 !important;
+    }
+}
+
+// 添加模态框动画
+.modal-wrapper {
+    transform: translateY(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.show-modal {
+        transform: translateY(0);
+    }
+}
+
+// 确保模态框不会被底部内容遮挡
+ion-modal {
+    --min-height: auto;
+    --border-radius: 16px 16px 0 0;
+
+    &.bottom-sheet {
+        align-items: flex-end;
+        --height: auto;
+
+        .ion-page {
+            position: relative;
+            display: block;
+            contain: content;
+        }
+    }
+}
+
+// 在现有样式基础上添加
+.error-toast {
+    --background: var(--ion-color-danger);
+    --color: white;
+    --border-radius: 8px;
+    --button-color: white;
+
+    &::part(message) {
+        font-size: 14px;
+    }
+}
+
+.success-toast {
+    --background: var(--ion-color-success);
+    --color: white;
+    --border-radius: 8px;
+    --button-color: white;
+
+    &::part(message) {
+        font-size: 14px;
+    }
+}
+
+ion-item.ion-invalid {
+    --highlight-background: var(--ion-color-danger);
+
+    ion-label {
+        color: var(--ion-color-danger) !important;
+    }
+
+    ion-icon {
+        color: var(--ion-color-danger) !important;
+    }
+}

src/lib/user/model-user-edit/model-user-edit.component.html

@@ -0,0 +1,43 @@
+<ion-card>
+    <ion-card-header>
+        <ion-card-title>编辑个人资料</ion-card-title>
+        <ion-card-subtitle>完善你的个人信息</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content>
+        <ion-item>
+            <ion-icon slot="start" name="person-outline"></ion-icon>
+            <ion-label position="stacked">用户名</ion-label>
+            <ion-input type="text" [value]="userData.username" disabled></ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-icon slot="start" name="person-circle-outline"></ion-icon>
+            <ion-label position="stacked">真实姓名</ion-label>
+            <ion-input type="text" [value]="userData.realname" (ionChange)="userDataChange('realname',$event)"
+                placeholder="请输入真实姓名">
+            </ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-icon slot="start" name="transgender-outline"></ion-icon>
+            <ion-label position="stacked">性别</ion-label>
+            <ion-input type="text" [value]="userData.gender" (ionChange)="userDataChange('gender',$event)"
+                placeholder="请输入性别">
+            </ion-input>
+        </ion-item>
+
+        <ion-item>
+            <ion-icon slot="start" name="calendar-outline"></ion-icon>
+            <ion-label position="stacked">年龄</ion-label>
+            <ion-input type="number" [value]="userData.age" (ionChange)="userDataChange('age',$event)"
+                placeholder="请输入年龄">
+            </ion-input>
+        </ion-item>
+
+        <div class="button-group">
+            <ion-button expand="block" (click)="save()">保存</ion-button>
+            <ion-button expand="block" fill="outline" (click)="cancel()">取消</ion-button>
+        </div>
+    </ion-card-content>
+</ion-card>

src/lib/user/model-user-edit/model-user-edit.component.scss

@@ -0,0 +1,44 @@
+ion-card {
+    // ... 其他样式保持不变 ...
+
+    ion-card-content {
+        padding: 20px 24px 16px;
+
+        ion-item {
+            --background: var(--input-background);
+            --border-radius: 10px;
+            --padding-start: 12px;
+            --padding-end: 12px;
+            --min-height: 48px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+
+            ion-icon {
+                font-size: 18px;
+                color: #666;
+                margin: 0 8px 0 0;
+                min-width: 18px;
+            }
+
+            &.item-has-focus {
+                ion-icon {
+                    color: var(--primary-color);
+                }
+            }
+
+            ion-input {
+                --padding-start: 0;
+                --padding-end: 8px;
+                --placeholder-color: #999;
+                --placeholder-opacity: 0.8;
+                font-size: 14px;
+
+                &::part(label) {
+                    font-size: 13px;
+                    margin-bottom: 2px;
+                }
+            }
+        }
+    }
+}

src/lib/user/model-user-login/model-user-login.component.html

@@ -0,0 +1,66 @@
+<ion-content class="ion-padding">
+    <div class="modal-content">
+        <ion-icon name="close-outline" class="close-button" (click)="dismiss()"></ion-icon>
+
+        <div class="header">
+            <div class="logo">
+                <img src="assets/img/logo2.png" alt="Logo">
+            </div>
+            <h1>{{ isSignup ? '创建新账号' : '欢迎回来' }}</h1>
+            <p>{{ isSignup ? '加入我们，开启你的学习之旅' : '登录你的账号，继续你的学习计划' }}</p>
+        </div>
+
+        <div class="form-group">
+            <ion-item [class.ion-invalid]="errorMessage && !username">
+                <ion-icon slot="start" name="person-outline"></ion-icon>
+                <ion-label position="stacked">用户名</ion-label>
+                <ion-input type="text" [(ngModel)]="username" placeholder="请输入3-20位字母、数字、下划线或中文"
+                    (ionFocus)="errorMessage = ''">
+                </ion-input>
+            </ion-item>
+
+            <ion-item [class.ion-invalid]="errorMessage && !password">
+                <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+                <ion-label position="stacked">密码</ion-label>
+                <ion-input type="password" [(ngModel)]="password" placeholder="请输入6-20位字母、数字或下划线"
+                    (ionFocus)="errorMessage = ''">
+                </ion-input>
+            </ion-item>
+
+            @if(isSignup) {
+            <ion-item [class.ion-invalid]="errorMessage && !password2">
+                <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+                <ion-label position="stacked">确认密码</ion-label>
+                <ion-input type="password" [(ngModel)]="password2" placeholder="请再次输入密码" (ionFocus)="errorMessage = ''">
+                </ion-input>
+            </ion-item>
+            }
+
+            @if(errorMessage) {
+            <div class="error-message">
+                {{ errorMessage }}
+            </div>
+            }
+        </div>
+        <div class="action-buttons">
+            <ion-button expand="block" class="submit-button" (click)="submit()">
+                {{ isSignup ? '注册' : '登录' }}
+            </ion-button>
+            <ion-button fill="clear" class="switch-button" (click)="toggleMode()">
+                {{ isSignup ? '已有账号？点击登录' : '没有账号？立即注册' }}
+            </ion-button>
+        </div>
+        <div class="divider">其他登录方式</div>
+
+        <div class="social-login">
+            <div class="social-button">
+                <img src="assets/img/login_icon.png" alt="微信登录">
+                <span>微信登录</span>
+            </div>
+            <div class="social-button">
+                <img src="assets/img/login_icon2.png" alt="QQ登录">
+                <span>QQ登录</span>
+            </div>
+        </div>
+    </div>
+</ion-content>

src/lib/user/model-user-login/model-user-login.component.scss

@@ -0,0 +1,169 @@
+:host {
+    --primary-color: #b64d24;
+    --border-radius: 12px;
+    --input-background: #f8f9fa;
+    --modal-background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+}
+
+ion-card {
+    margin: 0;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    background: var(--modal-background);
+    overflow: hidden;
+
+    ion-card-header {
+        padding: 24px 24px 0;
+
+        ion-card-title {
+            margin-bottom: 24px;
+
+            ion-segment {
+                --background: var(--input-background);
+                border-radius: var(--border-radius);
+                padding: 4px;
+
+                ion-segment-button {
+                    --background: transparent;
+                    --background-checked: white;
+                    --color: #666;
+                    --color-checked: var(--primary-color);
+                    --indicator-color: transparent;
+                    min-height: 44px;
+                    font-size: 15px;
+                    font-weight: 500;
+                    letter-spacing: 0.5px;
+                    text-transform: none;
+                    border-radius: 8px;
+                    transition: all 0.3s ease;
+
+                    &::part(indicator) {
+                        display: none;
+                    }
+
+                    &.segment-button-checked {
+                        box-shadow: 0 2px 8px rgba(182, 77, 36, 0.15);
+                    }
+                }
+            }
+        }
+
+        ion-card-subtitle {
+            color: #666;
+            font-size: 14px;
+            margin-bottom: 16px;
+        }
+    }
+
+    ion-card-content {
+        padding: 0 24px 16px;
+
+        ion-item {
+            --background: var(--input-background);
+            --border-radius: 10px;
+            --padding-start: 12px;
+            --padding-end: 12px;
+            --min-height: 48px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+
+            &:last-child {
+                margin-bottom: 24px;
+            }
+
+            &.item-has-focus {
+                --background: white;
+                box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(182, 77, 36, 0.1);
+                transform: translateY(-1px);
+            }
+
+            ion-icon {
+                font-size: 18px;
+                color: #666;
+                margin: 0 8px 0 0;
+                min-width: 18px;
+            }
+
+            &.item-has-focus {
+                ion-icon {
+                    color: var(--primary-color);
+                }
+            }
+
+            ion-input {
+                --padding-start: 0;
+                --padding-end: 8px;
+                --placeholder-color: #999;
+                --placeholder-opacity: 0.8;
+                font-size: 14px;
+
+                &::part(label) {
+                    font-size: 13px;
+                    margin-bottom: 2px;
+                }
+            }
+        }
+
+        ion-button {
+            --background: linear-gradient(135deg, var(--primary-color), #ff6b4a);
+            --background-hover: linear-gradient(135deg, #ff6b4a, var(--primary-color));
+            --border-radius: 10px;
+            --box-shadow: 0 4px 16px rgba(182, 77, 36, 0.25);
+
+            margin: 8px 0 0;
+            height: 48px;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            text-transform: none;
+            transition: transform 0.3s ease;
+
+            &:active {
+                transform: scale(0.98);
+            }
+        }
+    }
+}
+
+// 添加动画
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+ion-card {
+    animation: fadeIn 0.5s ease;
+}
+
+// 错误提示样式
+.error-message {
+    color: #ff4d4f;
+    font-size: 13px;
+    margin: 4px 0 16px;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &::before {
+        content: "!";
+        width: 16px;
+        height: 16px;
+        background: #ff4d4f;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+    }
+}