AIart-app/src/app/art-detail/art-detail.component.html

@@ -1,7 +1,7 @@
 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+      <ion-back-button (click)="goBack()" defaultHref="/tabs/tab3" text=""></ion-back-button>
     </ion-buttons>
     <ion-title>作品详情</ion-title>
     <ion-buttons slot="end">
@@ -13,44 +13,87 @@
 </ion-header>
 
 <ion-content>
-  <div class="art-detail-container" *ngIf="artwork">
-    <div class="image-container">
-      <img [src]="artwork.image" [alt]="artwork.title">
+  @if (artwork) {
+  <div class="artwork-container">
+    <!-- 作品图片 -->
+    <div class="image-section">
+      <img [src]="artwork.image" [alt]="artwork.title" class="main-image">
     </div>
 
-    <div class="info-container">
-      <h2>{{artwork.title}}</h2>
-      <p class="description">{{artwork.description}}</p>
+    <!-- 作品信息 -->
+    <div class="info-section">
+      <div class="artwork-header">
+        <h1>{{artwork.title}}</h1>
+        <div class="category-tag">{{artwork.category}}</div>
+      </div>
 
       <div class="user-info">
-        <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
-        <div class="user-details">
-          <span class="username">{{artwork.userName}}</span>
-          <span class="date">{{artwork.date}}</span>
+        <div class="user">
+          <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
+          <div class="user-details">
+            <span class="username">{{artwork.userName}}</span>
+            <span class="date">{{artwork.date}}</span>
+          </div>
         </div>
       </div>
 
-      <div class="interaction-bar">
-        <div class="likes" (click)="toggleLike()">
-          <ion-icon [name]="artwork.isLiked ? 'heart' : 'heart-outline'"
-            [color]="artwork.isLiked ? 'danger' : 'medium'">
-          </ion-icon>
+      <p class="description">{{artwork.description}}</p>
+
+      <!-- 交互按钮 -->
+      <div class="action-buttons">
+        <ion-button fill="clear" (click)="toggleLike()">
+          <ion-icon [name]="isLiked ? 'heart' : 'heart-outline'" [color]="isLiked ? 'danger' : 'medium'"></ion-icon>
           <span>{{artwork.likes}}</span>
-        </div>
-        <div class="share">
-          <ion-icon name="share-social-outline"></ion-icon>
-          <span>分享</span>
-        </div>
+        </ion-button>
+        <ion-button fill="clear" (click)="toggleSave()">
+          <ion-icon [name]="isSaved ? 'bookmark' : 'bookmark-outline'"></ion-icon>
+          <span>收藏</span>
+        </ion-button>
       </div>
     </div>
 
-    <!-- 添加评论区域 -->
+    <!-- 评论区域 -->
     <div class="comments-section">
-      <h3>评论</h3>
+      <h2>评论 ({{artwork.comments?.length || 0}})</h2>
+
+      <!-- 评论输入框 -->
       <div class="comment-input">
-        <ion-input placeholder="写下你的评论..."></ion-input>
-        <ion-button expand="block">发送</ion-button>
+        <ion-textarea [(ngModel)]="commentText" placeholder="写下你的评论..." rows="3"></ion-textarea>
+        <ion-button expand="block" (click)="submitComment()">发表评论</ion-button>
+      </div>
+
+      <!-- 评论列表 -->
+      <div class="comments-list">
+        @for(comment of artwork.comments; track comment.id) {
+        <div class="comment-item">
+          <div class="comment-header">
+            <img [src]="comment.avatarUrl" [alt]="comment.userName" class="comment-avatar">
+            <div class="comment-info">
+              <span class="comment-username">{{comment.userName}}</span>
+              <span class="comment-date">{{comment.date}}</span>
+            </div>
+          </div>
+          <p class="comment-content">{{comment.content}}</p>
+          <div class="comment-actions">
+            <ion-button fill="clear" size="small">
+              <ion-icon name="heart-outline"></ion-icon>
+              <span>{{comment.likes}}</span>
+            </ion-button>
+            <ion-button fill="clear" size="small">
+              <ion-icon name="chatbubble-outline"></ion-icon>
+              <span>回复</span>
+            </ion-button>
+          </div>
+        </div>
+        }
       </div>
     </div>
   </div>
+  } @else {
+  <div class="error-message">
+    <ion-icon name="alert-circle-outline"></ion-icon>
+    <p>作品信息加载失败</p>
+    <ion-button (click)="goBack()">返回</ion-button>
+  </div>
+  }
 </ion-content>

AIart-app/src/app/art-detail/art-detail.component.scss

@@ -1,211 +1,136 @@
-.art-detail {
-    .main-image {
+:host {
+    --page-padding: 16px;
+    --primary-color: #ff8c00;
+}
+
+.artwork-container {
+    .image-section {
         width: 100%;
         height: 300px;
-        object-fit: cover;
-    }
-
-    .content-section {
-        padding: 20px;
+        overflow: hidden;
+        position: relative;
 
-        h1 {
-            font-size: 24px;
-            font-weight: 600;
-            margin: 0 0 12px;
-            color: #333;
+        .main-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
+    }
 
-        .description {
-            font-size: 16px;
-            line-height: 1.6;
-            color: #666;
-            margin-bottom: 20px;
-        }
+    .info-section {
+        padding: 20px var(--page-padding);
+        background: white;
 
-        .interaction-bar {
+        .artwork-header {
             display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 8px 0;
-            border-bottom: 1px solid #eee;
-        }
-    }
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 16px;
 
-    .comments-section {
-        padding: 20px;
+            h1 {
+                font-size: 24px;
+                font-weight: 600;
+                color: #333;
+                margin: 0;
+                flex: 1;
+            }
 
-        h2 {
-            font-size: 18px;
-            font-weight: 600;
-            margin: 0 0 16px;
-            color: #333;
+            .category-tag {
+                padding: 4px 12px;
+                background: var(--primary-color);
+                color: white;
+                border-radius: 20px;
+                font-size: 14px;
+            }
         }
 
-        .comment-input {
-            margin-bottom: 24px;
+        .user-info {
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
 
-            ion-button {
-                margin-top: 12px;
-            }
-        }
+            .user {
+                display: flex;
+                align-items: center;
+                gap: 12px;
 
-        .comments-list {
-            .comment-item {
-                margin-bottom: 20px;
-                padding-bottom: 20px;
-                border-bottom: 1px solid #eee;
+                .avatar {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 50%;
+                    object-fit: cover;
+                }
 
-                .comment-header {
+                .user-details {
                     display: flex;
-                    align-items: center;
-                    gap: 8px;
-                    margin-bottom: 8px;
-
-                    img {
-                        width: 32px;
-                        height: 32px;
-                        border-radius: 50%;
-                    }
+                    flex-direction: column;
 
                     .username {
+                        font-size: 16px;
                         font-weight: 500;
                         color: #333;
                     }
 
-                    .time {
-                        font-size: 12px;
-                        color: #999;
+                    .date {
+                        font-size: 14px;
+                        color: #666;
                     }
                 }
-
-                .comment-content {
-                    font-size: 14px;
-                    line-height: 1.5;
-                    color: #666;
-                    margin: 0;
-                }
-            }
-        }
-    }
-}
-
-.art-detail-container {
-    .image-container {
-        width: 100%;
-        height: 300px;
-        overflow: hidden;
-        position: relative;
-
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.3s ease;
-
-            &:hover {
-                transform: scale(1.05);
             }
         }
-    }
-
-    .info-container {
-        padding: 20px;
-        background: white;
-        border-radius: 20px;
-        margin-top: -20px;
-        position: relative;
-        z-index: 1;
-        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
-
-        h2 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 12px;
-        }
 
         .description {
-            font-size: 16px;
+            font-size: 15px;
+            line-height: 1.6;
             color: #666;
-            line-height: 1.5;
             margin-bottom: 20px;
         }
 
-        .user-info {
+        .action-buttons {
             display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-
-            .avatar {
-                width: 48px;
-                height: 48px;
-                border-radius: 50%;
-                margin-right: 12px;
-                border: 2px solid white;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            }
-
-            .user-details {
-                display: flex;
-                flex-direction: column;
-
-                .username {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: #333;
-                }
-
-                .date {
-                    font-size: 14px;
-                    color: #999;
-                }
-            }
-        }
-
-        .interaction-bar {
-            display: flex;
-            gap: 20px;
-            padding: 15px 0;
+            gap: 16px;
             border-top: 1px solid #eee;
+            padding-top: 16px;
 
-            .likes,
-            .share {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                color: #666;
-                cursor: pointer;
-                transition: all 0.3s ease;
+            ion-button {
+                flex: 1;
+                height: 44px;
+                --color: #666;
 
-                &:hover {
-                    color: var(--ion-color-primary);
+                ion-icon {
+                    font-size: 20px;
+                    margin-right: 8px;
                 }
 
-                ion-icon {
-                    font-size: 24px;
+                span {
+                    font-size: 14px;
                 }
             }
         }
     }
 
     .comments-section {
-        padding: 20px;
+        padding: 20px var(--page-padding);
         background: white;
-        margin-top: 12px;
+        margin-top: 8px;
 
-        h3 {
+        h2 {
             font-size: 18px;
             font-weight: 600;
             color: #333;
-            margin-bottom: 16px;
+            margin: 0 0 16px;
         }
 
         .comment-input {
-            ion-input {
+            margin-bottom: 24px;
+
+            ion-textarea {
                 --background: #f5f5f5;
                 --padding-start: 16px;
                 --padding-end: 16px;
-                --border-radius: 8px;
+                --padding-top: 12px;
+                --padding-bottom: 12px;
+                border-radius: 8px;
                 margin-bottom: 12px;
             }
 
@@ -213,5 +138,87 @@
                 --border-radius: 8px;
             }
         }
+
+        .comments-list {
+            .comment-item {
+                padding: 16px 0;
+                border-bottom: 1px solid #eee;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .comment-header {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 12px;
+
+                    .comment-avatar {
+                        width: 36px;
+                        height: 36px;
+                        border-radius: 50%;
+                        margin-right: 12px;
+                    }
+
+                    .comment-info {
+                        display: flex;
+                        flex-direction: column;
+
+                        .comment-username {
+                            font-size: 15px;
+                            font-weight: 500;
+                            color: #333;
+                        }
+
+                        .comment-date {
+                            font-size: 12px;
+                            color: #999;
+                        }
+                    }
+                }
+
+                .comment-content {
+                    font-size: 14px;
+                    line-height: 1.6;
+                    color: #666;
+                    margin: 0 0 12px;
+                }
+
+                .comment-actions {
+                    display: flex;
+                    gap: 16px;
+
+                    ion-button {
+                        --color: #666;
+                        font-size: 12px;
+
+                        ion-icon {
+                            margin-right: 4px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.error-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 32px;
+    text-align: center;
+
+    ion-icon {
+        font-size: 48px;
+        color: #999;
+        margin-bottom: 16px;
+    }
+
+    p {
+        color: #666;
+        margin-bottom: 24px;
     }
 }

AIart-app/src/app/art-detail/art-detail.component.ts

@@ -1,63 +1,132 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+interface Artwork {
+  id: string;
+  image: string;
+  title: string;
+  description: string;
+  avatarUrl: string;
+  userName: string;
+  date: string;
+  likes: number;
+  category: string;
+  comments?: Comment[];
+}
+
+interface Comment {
+  id: string;
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  content: string;
+  date: string;
+  likes: number;
+}
 
 @Component({
   selector: 'app-art-detail',
   templateUrl: './art-detail.component.html',
   styleUrls: ['./art-detail.component.scss'],
   standalone: true,
-  imports: [IonicModule, CommonModule]
+  imports: [IonicModule, CommonModule, FormsModule]
 })
 export class ArtDetailComponent implements OnInit {
-  artId: string = '';
-  artwork: any = null;
+  artwork?: Artwork;
+  isLiked = false;
+  isSaved = false;
+  commentText = '';
 
   constructor(
     private route: ActivatedRoute,
     private router: Router
   ) {
-    // 获取路由传递的数据
     const navigation = this.router.getCurrentNavigation();
     if (navigation?.extras.state) {
-      this.artwork = navigation.extras.state['artwork'];
+      this.artwork = navigation.extras.state['artwork'] as Artwork;
+      // 添加示例评论
+      this.artwork.comments = [
+        {
+          id: '1',
+          userId: 'user1',
+          userName: '艺术评论家',
+          avatarUrl: 'assets/img/lunbo2.png',
+          content: '这幅作品的构图和用色都非常出色，展现了艺术家深厚的功底。',
+          date: '2024-01-15',
+          likes: 23
+        },
+        {
+          id: '2',
+          userId: 'user2',
+          userName: '美术爱好者',
+          avatarUrl: 'assets/img/lunbo3.png',
+          content: '光影处理很到位，整体氛围感很强。',
+          date: '2024-01-14',
+          likes: 15
+        }
+      ];
     }
   }
 
   ngOnInit() {
-    this.artId = this.route.snapshot.paramMap.get('id') || '';
     if (!this.artwork) {
-      this.loadArtwork();
+      const artId = this.route.snapshot.paramMap.get('id');
+      console.log('Art ID:', artId);
     }
   }
 
-  loadArtwork() {
-    // 如果没有通过路由获取到数据，则加载默认数据
-    this.artwork = {
-      id: this.artId,
-      image: '../../assets/img/xingkong.png',
-      title: '梵高-星空高清画作',
-      description: '致敬梵高 #艺术品 #星空',
-      avatarUrl: '../../assets/img/book1.png',
-      userName: '星空艺术家',
-      date: '12-01',
-      likes: 1687,
-      category: 'art'
-    };
-  }
-
-  // 添加点赞功能
   toggleLike() {
+    this.isLiked = !this.isLiked;
     if (this.artwork) {
-      this.artwork.isLiked = !this.artwork.isLiked;
-      this.artwork.likes += this.artwork.isLiked ? 1 : -1;
+      this.artwork.likes += this.isLiked ? 1 : -1;
+    }
+  }
+
+  toggleSave() {
+    this.isSaved = !this.isSaved;
+    this.showToast(this.isSaved ? '已收藏' : '已取消收藏');
+  }
+
+  async shareArtwork() {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: this.artwork?.title,
+          text: this.artwork?.description,
+          url: window.location.href
+        });
+      } catch (error) {
+        this.showToast('分享失败，请重试');
+      }
+    } else {
+      await navigator.clipboard.writeText(window.location.href);
+      this.showToast('链接已复制到剪贴板');
     }
   }
 
-  // 添加分享功能
-  shareArtwork() {
-    // 实现分享逻辑
-    console.log('Sharing artwork:', this.artwork.title);
+  async submitComment() {
+    if (!this.commentText.trim()) {
+      this.showToast('请输入评论内容');
+      return;
+    }
+    // 这里添加提交评论的逻辑
+    this.showToast('评论已提交');
+    this.commentText = '';
+  }
+
+  private async showToast(message: string) {
+    const toast = document.createElement('ion-toast');
+    toast.message = message;
+    toast.duration = 2000;
+    toast.position = 'top';
+    document.body.appendChild(toast);
+    await toast.present();
+  }
+
+  goBack() {
+    this.router.navigate(['/tabs/tab3']);
   }
 }

AIart-app/src/app/drawing/drawing.component.html

@@ -1,3 +1,55 @@
-<p>
-  drawing works!
-</p>
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1" text=""></ion-back-button>
+    </ion-buttons>
+    <ion-title>绘画创作</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="undo()" [disabled]="!canUndo">
+        <ion-icon name="arrow-undo-outline"></ion-icon>
+      </ion-button>
+      <ion-button (click)="redo()" [disabled]="!canRedo">
+        <ion-icon name="arrow-redo-outline"></ion-icon>
+      </ion-button>
+      <ion-button (click)="saveDrawing()">
+        <ion-icon name="save-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="drawing-container">
+    <canvas #canvas (mousedown)="startDrawing($event)" (mousemove)="draw($event)" (mouseup)="stopDrawing()"
+      (mouseleave)="stopDrawing()" (touchstart)="startDrawing($event)" (touchmove)="draw($event)"
+      (touchend)="stopDrawing()"></canvas>
+
+    <div class="tools-panel">
+      <div class="tools-section">
+        @for(tool of tools; track tool.id) {
+        <ion-button fill="clear" [class.selected]="selectedTool === tool.id" (click)="selectTool(tool.id)">
+          <ion-icon [name]="tool.icon"></ion-icon>
+          <span>{{tool.name}}</span>
+        </ion-button>
+        }
+      </div>
+
+      <div class="color-section">
+        @for(color of colors; track color) {
+        <div class="color-item" [style.background-color]="color" [class.selected]="currentColor === color"
+          (click)="selectColor(color)">
+        </div>
+        }
+        <div class="color-picker">
+          <input type="color" [(ngModel)]="customColor" (change)="selectColor(customColor)">
+        </div>
+      </div>
+
+      <div class="brush-settings">
+        <ion-range [(ngModel)]="currentWidth" min="1" max="50" step="1">
+          <ion-label slot="start">线条粗细</ion-label>
+        </ion-range>
+      </div>
+    </div>
+  </div>
+</ion-content>

AIart-app/src/app/drawing/drawing.component.scss

@@ -3,25 +3,16 @@
     --background-color: #f5f5f5;
 }
 
-ion-header {
-    ion-toolbar {
-        --background: transparent;
-
-        ion-title {
-            font-size: 18px;
-            font-weight: 600;
-        }
-    }
-}
-
 .drawing-container {
     position: relative;
     width: 100%;
-    height: calc(100% - 180px);
+    height: calc(100vh - 56px);
     background: white;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     canvas {
+        flex: 1;
         touch-action: none;
         background: white;
     }
@@ -36,6 +27,7 @@ ion-header {
     padding: 16px;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
     z-index: 1000;
+    border-top: 2px solid #ff8c00;
 
     .tools-section {
         display: flex;
@@ -49,7 +41,7 @@ ion-header {
             flex-direction: column;
 
             &.selected {
-                --color: var(--primary-color);
+                --color: #ff8c00;
                 position: relative;
 
                 &::after {
@@ -59,7 +51,7 @@ ion-header {
                     left: 25%;
                     width: 50%;
                     height: 2px;
-                    background: var(--primary-color);
+                    background: #ff8c00;
                     border-radius: 1px;
                 }
             }
@@ -92,26 +84,46 @@ ion-header {
 
             &.selected {
                 transform: scale(1.2);
-                border-color: var(--primary-color);
+                border-color: #ff8c00;
             }
 
             &:hover {
                 transform: scale(1.1);
             }
         }
+
+        .color-picker {
+            input[type="color"] {
+                width: 30px;
+                height: 30px;
+                border: none;
+                border-radius: 50%;
+                overflow: hidden;
+                cursor: pointer;
+            }
+        }
     }
 
-    .width-section {
+    .brush-settings {
         padding: 0 16px;
 
-        ion-range {
-            --bar-height: 4px;
-            --bar-background: #eee;
-            --bar-background-active: var(--primary-color);
-            --height: 40px;
-            --knob-size: 20px;
-            --knob-background: white;
-            --knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        .width-section {
+            margin-bottom: 16px;
+        }
+
+        .brush-options {
+            display: flex;
+            justify-content: space-around;
+
+            ion-button {
+                --padding-start: 12px;
+                --padding-end: 12px;
+                height: 40px;
+
+                ion-icon {
+                    margin-right: 4px;
+                }
+            }
         }
     }
 }
@@ -129,4 +141,9 @@ ion-header {
 
 .tools-panel {
     animation: slideUp 0.3s ease-out;
+}
+
+ion-range {
+    --bar-background-active: #ff8c00;
+    --knob-background: #ff8c00;
 }

AIart-app/src/app/drawing/drawing.component.ts

@@ -17,40 +17,30 @@ export class DrawingComponent implements OnInit, AfterViewInit {
   private lastX = 0;
   private lastY = 0;
 
-  currentColor = '#000000';
-  currentWidth = 5;
-
-  customColor = '#000000';
-  showGrid = false;
-  opacity = 1;
-  smoothing = true;
-  showLayers = false;
-  currentLayer = 'layer1';
-
-  layers = [
-    { id: 'layer1', name: '图层 1', visible: true },
-    { id: 'layer2', name: '图层 2', visible: true }
-  ];
-
-  history: ImageData[] = [];
-  historyIndex = -1;
-
+  // 简化工具列表
   tools = [
     { id: 'brush', icon: 'brush', name: '画笔' },
     { id: 'eraser', icon: 'trash', name: '橡皮擦' },
-    { id: 'line', icon: 'remove', name: '直线' },
-    { id: 'rect', icon: 'square-outline', name: '矩形' },
-    { id: 'circle', icon: 'ellipse-outline', name: '圆形' },
     { id: 'clear', icon: 'refresh', name: '清空' }
   ];
 
+  // 常用颜色
   colors = [
     '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
-    '#ffff00', '#00ffff', '#ff00ff', '#808080', '#800000'
+    '#ffff00', '#00ffff', '#ff00ff'
   ];
 
+  currentColor = '#000000';
+  currentWidth = 5;
+  customColor = '#000000';
   selectedTool = 'brush';
 
+  // 撤销/重做功能
+  history: ImageData[] = [];
+  historyIndex = -1;
+  canUndo = false;
+  canRedo = false;
+
   constructor() { }
 
   ngOnInit() { }
@@ -60,6 +50,7 @@ export class DrawingComponent implements OnInit, AfterViewInit {
     this.ctx = canvas.getContext('2d')!;
     this.resizeCanvas();
     this.initializeCanvas();
+    this.saveToHistory(); // 保存初始状态
 
     window.addEventListener('resize', () => {
       this.resizeCanvas();
@@ -69,12 +60,16 @@ export class DrawingComponent implements OnInit, AfterViewInit {
   private resizeCanvas() {
     const canvas = this.canvasRef.nativeElement;
     canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight - 200; // 减去顶部工具栏的高度
+    canvas.height = window.innerHeight - 200;
+    this.ctx.fillStyle = '#ffffff';
+    this.ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
 
   private initializeCanvas() {
     this.ctx.fillStyle = '#ffffff';
     this.ctx.fillRect(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
+    this.ctx.lineCap = 'round';
+    this.ctx.lineJoin = 'round';
   }
 
   startDrawing(event: TouchEvent | MouseEvent) {
@@ -89,93 +84,17 @@ export class DrawingComponent implements OnInit, AfterViewInit {
     event.preventDefault();
 
     const pos = this.getPosition(event);
-
-    switch (this.selectedTool) {
-      case 'brush':
-      case 'eraser':
-        this.drawFreehand(pos);
-        break;
-      case 'line':
-        this.drawLine(pos);
-        break;
-      case 'rect':
-        this.drawRect(pos);
-        break;
-      case 'circle':
-        this.drawCircle(pos);
-        break;
-    }
-  }
-
-  private drawFreehand(pos: { x: number, y: number }) {
     this.ctx.beginPath();
     this.ctx.moveTo(this.lastX, this.lastY);
     this.ctx.lineTo(pos.x, pos.y);
     this.ctx.strokeStyle = this.selectedTool === 'eraser' ? '#ffffff' : this.currentColor;
     this.ctx.lineWidth = this.currentWidth;
-    this.ctx.lineCap = 'round';
     this.ctx.stroke();
 
     this.lastX = pos.x;
     this.lastY = pos.y;
   }
 
-  private drawLine(pos: { x: number, y: number }) {
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = this.canvasRef.nativeElement.width;
-    tempCanvas.height = this.canvasRef.nativeElement.height;
-    const tempCtx = tempCanvas.getContext('2d')!;
-
-    tempCtx.drawImage(this.canvasRef.nativeElement, 0, 0);
-    tempCtx.beginPath();
-    tempCtx.moveTo(this.lastX, this.lastY);
-    tempCtx.lineTo(pos.x, pos.y);
-    tempCtx.strokeStyle = this.currentColor;
-    tempCtx.lineWidth = this.currentWidth;
-    tempCtx.stroke();
-
-    this.ctx.clearRect(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
-    this.ctx.drawImage(tempCanvas, 0, 0);
-  }
-
-  private drawRect(pos: { x: number, y: number }) {
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = this.canvasRef.nativeElement.width;
-    tempCanvas.height = this.canvasRef.nativeElement.height;
-    const tempCtx = tempCanvas.getContext('2d')!;
-
-    tempCtx.drawImage(this.canvasRef.nativeElement, 0, 0);
-    tempCtx.beginPath();
-    tempCtx.rect(this.lastX, this.lastY, pos.x - this.lastX, pos.y - this.lastY);
-    tempCtx.strokeStyle = this.currentColor;
-    tempCtx.lineWidth = this.currentWidth;
-    tempCtx.stroke();
-
-    this.ctx.clearRect(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
-    this.ctx.drawImage(tempCanvas, 0, 0);
-  }
-
-  private drawCircle(pos: { x: number, y: number }) {
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = this.canvasRef.nativeElement.width;
-    tempCanvas.height = this.canvasRef.nativeElement.height;
-    const tempCtx = tempCanvas.getContext('2d')!;
-
-    const radius = Math.sqrt(
-      Math.pow(pos.x - this.lastX, 2) + Math.pow(pos.y - this.lastY, 2)
-    );
-
-    tempCtx.drawImage(this.canvasRef.nativeElement, 0, 0);
-    tempCtx.beginPath();
-    tempCtx.arc(this.lastX, this.lastY, radius, 0, Math.PI * 2);
-    tempCtx.strokeStyle = this.currentColor;
-    tempCtx.lineWidth = this.currentWidth;
-    tempCtx.stroke();
-
-    this.ctx.clearRect(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
-    this.ctx.drawImage(tempCanvas, 0, 0);
-  }
-
   stopDrawing() {
     if (this.isDrawing) {
       this.isDrawing = false;
@@ -214,11 +133,12 @@ export class DrawingComponent implements OnInit, AfterViewInit {
   clearCanvas() {
     this.ctx.fillStyle = '#ffffff';
     this.ctx.fillRect(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
+    this.saveToHistory();
   }
 
   async saveDrawing() {
-    const canvas = this.canvasRef.nativeElement;
     try {
+      const canvas = this.canvasRef.nativeElement;
       const dataUrl = canvas.toDataURL('image/png');
       const response = await fetch(dataUrl);
       const blob = await response.blob();
@@ -236,71 +156,42 @@ export class DrawingComponent implements OnInit, AfterViewInit {
     }
   }
 
-  private async showToast(message: string) {
-    const toast = document.createElement('ion-toast');
-    toast.message = message;
-    toast.duration = 2000;
-    toast.position = 'top';
-    document.body.appendChild(toast);
-    await toast.present();
+  private saveToHistory() {
+    this.historyIndex++;
+    this.history = this.history.slice(0, this.historyIndex);
+    this.history.push(this.ctx.getImageData(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height));
+    this.updateUndoRedoState();
+  }
+
+  private updateUndoRedoState() {
+    this.canUndo = this.historyIndex > 0;
+    this.canRedo = this.historyIndex < this.history.length - 1;
   }
 
   undo() {
-    if (this.historyIndex > 0) {
+    if (this.canUndo) {
       this.historyIndex--;
       const imageData = this.history[this.historyIndex];
       this.ctx.putImageData(imageData, 0, 0);
+      this.updateUndoRedoState();
     }
   }
 
   redo() {
-    if (this.historyIndex < this.history.length - 1) {
+    if (this.canRedo) {
       this.historyIndex++;
       const imageData = this.history[this.historyIndex];
       this.ctx.putImageData(imageData, 0, 0);
+      this.updateUndoRedoState();
     }
   }
 
-  saveToHistory() {
-    this.historyIndex++;
-    this.history = this.history.slice(0, this.historyIndex);
-    this.history.push(this.ctx.getImageData(0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height));
-  }
-
-  toggleGrid() {
-    this.showGrid = !this.showGrid;
-  }
-
-  toggleOpacity() {
-    this.opacity = this.opacity === 1 ? 0.5 : 1;
-    this.ctx.globalAlpha = this.opacity;
-  }
-
-  toggleSmooth() {
-    this.smoothing = !this.smoothing;
-    this.ctx.imageSmoothingEnabled = this.smoothing;
-  }
-
-  toggleLayers() {
-    this.showLayers = !this.showLayers;
-  }
-
-  addLayer() {
-    const newId = `layer${this.layers.length + 1}`;
-    this.layers.push({
-      id: newId,
-      name: `图层 ${this.layers.length + 1}`,
-      visible: true
-    });
-    this.currentLayer = newId;
-  }
-
-  deleteLayer(layerId: string) {
-    if (this.layers.length > 1) {
-      this.layers = this.layers.filter(layer => layer.id !== layerId);
-      if (this.currentLayer === layerId) {
-        this.currentLayer = this.layers[0].id;
-      }
-    }
+  private async showToast(message: string) {
+    const toast = document.createElement('ion-toast');
+    toast.message = message;
+    toast.duration = 2000;
+    toast.position = 'top';
+    document.body.appendChild(toast);
+    await toast.present();
   }
 }

AIart-app/src/app/music/music.component.html

@@ -0,0 +1,75 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1" text=""></ion-back-button>
+    </ion-buttons>
+    <ion-title>音乐资讯</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+<ion-content>
+  <!-- 搜索栏 -->
+  <div class="search-container">
+    <ion-searchbar placeholder="搜索音乐资讯" mode="ios" animated="true"></ion-searchbar>
+  </div>
+
+  <!-- 精选文章 -->
+  <div class="featured-section">
+    <h2 class="section-title">精选文章</h2>
+    <div class="featured-card" *ngFor="let article of featuredArticles" (click)="openArticle(article)">
+      <div class="featured-image">
+        <img [src]="article.image" [alt]="article.title">
+        <div class="featured-overlay">
+          <div class="category-badge">{{article.category}}</div>
+          <div class="featured-content">
+            <h3>{{article.title}}</h3>
+            <p>{{article.summary}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 最新资讯 -->
+  <div class="latest-section">
+    <div class="section-header">
+      <h2 class="section-title">最新资讯</h2>
+      <ion-button fill="clear" size="small">
+        查看全部
+        <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+      </ion-button>
+    </div>
+
+    <div class="articles-grid">
+      @for(article of articles; track article.id) {
+      <div class="article-card" (click)="openArticle(article)">
+        <div class="article-image">
+          <img [src]="article.image" [alt]="article.title">
+          <div class="category-tag">{{article.category}}</div>
+        </div>
+        <div class="article-content">
+          <h3>{{article.title}}</h3>
+          <p class="summary">{{article.summary}}</p>
+          <div class="article-meta">
+            <span class="date">
+              <ion-icon name="calendar-outline"></ion-icon>
+              {{article.date}}
+            </span>
+            <span class="views">
+              <ion-icon name="eye-outline"></ion-icon>
+              {{article.views}}
+            </span>
+          </div>
+        </div>
+      </div>
+      }
+    </div>
+
+    <!-- 加载更多 -->
+    <ion-infinite-scroll (ionInfinite)="loadMoreArticles($event)">
+      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多文章...">
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </div>
+</ion-content>

AIart-app/src/app/music/music.component.scss

@@ -0,0 +1,589 @@
+:host {
+    --primary-color: #ff8c00;
+    --background-color: #fff5e6;
+    --page-margin: 16px;
+    --card-border-radius: 16px;
+    --page-padding: 16px;
+    --primary-gradient: linear-gradient(135deg, #ff8c00, #ff6b00);
+}
+
+.music-container {
+    padding: 16px;
+}
+
+.player-section {
+    background: white;
+    border-radius: 20px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    .album-art {
+        position: relative;
+        width: 100%;
+        padding-bottom: 100%;
+        border-radius: 12px;
+        overflow: hidden;
+        margin-bottom: 20px;
+
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .play-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            ion-icon {
+                font-size: 48px;
+                color: white;
+            }
+        }
+    }
+
+    .track-info {
+        text-align: center;
+        margin-bottom: 20px;
+
+        h2 {
+            font-size: 24px;
+            font-weight: 600;
+            margin: 0 0 8px;
+            color: #333;
+        }
+
+        p {
+            font-size: 16px;
+            color: #666;
+            margin: 0;
+        }
+    }
+
+    .progress-bar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 20px;
+
+        ion-range {
+            flex: 1;
+            --bar-height: 4px;
+            --bar-background: #eee;
+            --bar-background-active: var(--primary-color);
+            --knob-size: 12px;
+        }
+
+        span {
+            font-size: 12px;
+            color: #666;
+        }
+    }
+
+    .controls {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+
+        ion-button {
+            --padding-start: 12px;
+            --padding-end: 12px;
+
+            ion-icon {
+                font-size: 24px;
+            }
+
+            &.play-btn ion-icon {
+                font-size: 48px;
+            }
+        }
+    }
+}
+
+.playlist-section {
+    background: white;
+    border-radius: 20px;
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        h3 {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: #333;
+        }
+    }
+
+    ion-list {
+        background: transparent;
+
+        ion-item {
+            --padding-start: 0;
+            --inner-padding-end: 0;
+            --background: transparent;
+            margin-bottom: 8px;
+
+            &.active {
+                --background: var(--ion-color-primary-light);
+                border-radius: 8px;
+            }
+
+            ion-thumbnail {
+                width: 48px;
+                height: 48px;
+                margin: 8px;
+                border-radius: 4px;
+            }
+
+            ion-note {
+                font-size: 12px;
+                color: #999;
+            }
+        }
+    }
+}
+
+.recommendations-section {
+    h3 {
+        margin: 0 0 16px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .recommendations-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 16px;
+
+        .recommendation-card {
+            background: white;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            transition: transform 0.3s ease;
+
+            &:hover {
+                transform: translateY(-4px);
+            }
+
+            img {
+                width: 100%;
+                aspect-ratio: 1;
+                object-fit: cover;
+            }
+
+            .track-info {
+                padding: 12px;
+
+                h4 {
+                    margin: 0 0 4px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #333;
+                }
+
+                p {
+                    margin: 0;
+                    font-size: 12px;
+                    color: #666;
+                }
+            }
+        }
+    }
+}
+
+.category-tabs {
+    padding: 8px var(--page-margin);
+    background: white;
+
+    ion-segment {
+        --background: #f5f5f5;
+        border-radius: 8px;
+
+        ion-segment-button {
+            --padding-top: 8px;
+            --padding-bottom: 8px;
+            --color: #666;
+            --color-checked: var(--ion-color-primary);
+            --indicator-color: var(--ion-color-primary);
+
+            ion-label {
+                font-size: 14px;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.featured-slides {
+    height: 200px;
+    margin-bottom: 20px;
+
+    .slide-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .slide-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 20px;
+            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+            color: white;
+
+            h2 {
+                margin: 0 0 8px;
+                font-size: 18px;
+                font-weight: 600;
+            }
+
+            p {
+                margin: 0;
+                font-size: 14px;
+                opacity: 0.9;
+            }
+        }
+    }
+}
+
+.articles-container {
+    padding: 0 var(--page-margin);
+
+    .article-card {
+        background: white;
+        border-radius: var(--card-border-radius);
+        overflow: hidden;
+        margin-bottom: 16px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+        .article-image {
+            position: relative;
+            height: 200px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .category-tag {
+                position: absolute;
+                top: 12px;
+                left: 12px;
+                padding: 4px 8px;
+                background: var(--ion-color-primary);
+                color: white;
+                border-radius: 4px;
+                font-size: 12px;
+            }
+        }
+
+        .article-content {
+            padding: 16px;
+
+            h3 {
+                margin: 0 0 8px;
+                font-size: 16px;
+                font-weight: 600;
+                color: #333;
+            }
+
+            .summary {
+                margin: 0 0 12px;
+                font-size: 14px;
+                color: #666;
+                line-height: 1.4;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+
+            .article-meta {
+                display: flex;
+                gap: 16px;
+                color: #999;
+                font-size: 12px;
+
+                span {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+
+                    ion-icon {
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 头部样式
+ion-header {
+    ion-toolbar {
+        --background: transparent;
+
+        ion-title {
+            font-size: 20px;
+            font-weight: 600;
+        }
+    }
+}
+
+// 搜索栏
+.search-container {
+    padding: 0 var(--page-padding) 16px;
+
+    ion-searchbar {
+        --box-shadow: none;
+        --background: var(--ion-color-light);
+        --border-radius: 12px;
+        --placeholder-color: var(--ion-color-medium);
+        --icon-color: var(--ion-color-medium);
+        padding: 0;
+    }
+}
+
+// 精选文章
+.featured-section {
+    padding: 0 var(--page-padding);
+    margin-bottom: 24px;
+
+    .section-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--ion-color-dark);
+        margin: 0 0 16px;
+    }
+
+    .featured-card {
+        position: relative;
+        border-radius: var(--card-border-radius);
+        overflow: hidden;
+        margin-bottom: 16px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        border: 2px solid rgba(255, 140, 0, 0.1);
+
+        .featured-image {
+            position: relative;
+            height: 200px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .featured-overlay {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 20px;
+                background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+
+                .category-badge {
+                    display: inline-block;
+                    padding: 4px 8px;
+                    background: var(--primary-gradient);
+                    color: white;
+                    border-radius: 4px;
+                    font-size: 12px;
+                    margin-bottom: 8px;
+                }
+
+                h3 {
+                    color: white;
+                    font-size: 18px;
+                    font-weight: 600;
+                    margin: 0 0 8px;
+                }
+
+                p {
+                    color: rgba(255, 255, 255, 0.9);
+                    font-size: 14px;
+                    margin: 0;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+}
+
+// 最新资讯
+.latest-section {
+    padding: 0 var(--page-padding);
+
+    .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .section-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: var(--ion-color-dark);
+            margin: 0;
+        }
+
+        ion-button {
+            --color: var(--ion-color-primary);
+            font-size: 14px;
+            font-weight: 500;
+
+            ion-icon {
+                margin-left: 4px;
+            }
+        }
+    }
+
+    .articles-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 16px;
+
+        .article-card {
+            background: white;
+            border-radius: var(--card-border-radius);
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            transition: transform 0.3s ease;
+            border: 1px solid #ff8c00;
+
+            &:hover {
+                transform: translateY(-4px);
+                border-color: #ff8c00;
+                box-shadow: 0 4px 12px rgba(255, 140, 0, 0.15);
+            }
+
+            .article-image {
+                position: relative;
+                height: 160px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+
+                .category-tag {
+                    position: absolute;
+                    top: 12px;
+                    left: 12px;
+                    padding: 4px 8px;
+                    background: var(--primary-gradient);
+                    color: white;
+                    border-radius: 4px;
+                    font-size: 12px;
+                }
+            }
+
+            .article-content {
+                padding: 16px;
+
+                h3 {
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: var(--ion-color-dark);
+                    margin: 0 0 8px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                }
+
+                .summary {
+                    font-size: 14px;
+                    color: var(--ion-color-medium);
+                    margin: 0 0 12px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                }
+
+                .article-meta {
+                    display: flex;
+                    gap: 16px;
+                    color: var(--ion-color-medium);
+                    font-size: 12px;
+
+                    span {
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+
+                        ion-icon {
+                            font-size: 16px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 加载更多
+ion-infinite-scroll-content {
+    margin-top: 16px;
+
+    ::ng-deep .infinite-loading {
+        margin: 0;
+        padding: 16px 0;
+        color: var(--ion-color-medium);
+        font-size: 14px;
+    }
+}
+
+// 修改按钮颜色
+ion-button {
+    --color: #ff8c00;
+
+    &.selected {
+        --background: #fff5e6;
+        --color: #ff8c00;
+    }
+}
+
+// 修改搜索栏
+ion-searchbar {
+    --icon-color: #ff8c00;
+    --placeholder-color: #ffb366;
+}

AIart-app/src/app/music/music.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MusicComponent } from './music.component';
+
+describe('MusicComponent', () => {
+  let component: MusicComponent;
+  let fixture: ComponentFixture<MusicComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MusicComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MusicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AIart-app/src/app/music/music.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+interface Article {
+  id: string;
+  title: string;
+  summary: string;
+  content: string;
+  image: string;
+  category: string;
+  date: string;
+  views: number;
+}
+
+@Component({
+  selector: 'app-music',
+  templateUrl: './music.component.html',
+  styleUrls: ['./music.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class MusicComponent implements OnInit {
+  selectedCategory = 'all';
+
+  slideOpts = {
+    initialSlide: 0,
+    speed: 400,
+    autoplay: {
+      delay: 3000,
+    },
+    loop: true,
+    pagination: true
+  };
+
+  featuredArticles: Article[] = [
+    {
+      id: '1',
+      title: '2024年音乐产业发展趋势分析',
+      summary: '探讨AI技术对音乐创作的影响及未来发展方向',
+      content: '',
+      image: 'assets/img/music_information1.png',
+      category: '新闻',
+      date: '2024-01-15',
+      views: 1234
+    },
+    // 添加更多精选文章
+  ];
+
+  articles: Article[] = [
+    {
+      id: '2',
+      title: '新一代音乐人如何在数字时代突围',
+      summary: '探讨年轻音乐人在当今市场的机遇与挑战',
+      content: '',
+      image: 'assets/img/music_information.png',
+      category: '评测',
+      date: '2024-01-14',
+      views: 856
+    },
+    // 添加更多文章
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.loadArticles();
+  }
+
+  loadArticles() {
+    // 从服务器加载文章列表
+  }
+
+  openArticle(article: Article) {
+    // 打开文章详情页
+    console.log('Opening article:', article.id);
+  }
+
+  async loadMoreArticles(event: any) {
+    // 实现加载更多逻辑
+    setTimeout(() => {
+      // 模拟加载更多文章
+      event.target.complete();
+
+      // 如果没有更多文章，禁用无限滚动
+      // event.target.disabled = true;
+    }, 1000);
+  }
+}

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

@@ -76,7 +76,7 @@
         <ion-icon name="brush-outline"></ion-icon>
         <span>绘画</span>
       </div>
-      <div class="feature-item">
+      <div class="feature-item" (click)="goTomusic()">
         <ion-icon name="musical-notes-outline"></ion-icon>
         <span>音乐</span>
       </div>

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

@@ -215,7 +215,9 @@ export class Tab1Page implements OnInit, OnDestroy {
   goTodrawing() {
     this.router.navigate(['/tabs/drawing'])
   }
-
+  goTomusic() {
+    this.router.navigate(['/tabs/music'])
+  }
   // 添加打开分类弹窗的方法
   async openCategoryModal() {
     const modal = await this.modalCtrl.create({

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

@@ -12,7 +12,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" [scrollY]="true">
+<ion-content [fullscreen]="true">
   <!-- 分类导航 -->
   <div class="category-nav">
     <ion-toolbar>
@@ -45,7 +45,7 @@
   <!-- 内容网格 -->
   <div class="content-grid">
     @for(artwork of artworks; track artwork.id) {
-    <div class="content-card" (click)="goToDetail(artwork.id)">
+    <div class="content-card" (click)="goToDetail(artwork.id)" style="cursor: pointer;">
       <img [src]="artwork.image" [alt]="artwork.title" class="card-image">
       <div class="card-content">
         <div class="title">{{artwork.title}}</div>

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

@@ -5,6 +5,10 @@
     --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
+#main-content {
+    pointer-events: none !important;
+}
+
 // 头部导航样式
 .header-container {
     padding: 8px var(--page-padding);
@@ -116,6 +120,19 @@
     padding: 12px;
 
     .content-card {
+        position: relative;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+
+        &:hover {
+            transform: translateY(-2px);
+        }
+
+        // 确保所有子元素都可以正确传递点击事件
+        * {
+            pointer-events: none;
+        }
+
         background: white;
         border-radius: var(--card-border-radius);
         box-shadow: var(--card-shadow);
@@ -133,7 +150,18 @@
             .title {
                 font-size: 14px;
                 color: #333;
-                margin-bottom: 12px;
+                margin-bottom: 5px;
+                line-height: 1.4;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+
+            .description {
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 5px;
                 line-height: 1.4;
                 display: -webkit-box;
                 -webkit-line-clamp: 2;

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonMenu, IonList, IonItem, IonMenuButton } from '@ionic/angular/standalone';
 import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab3',
@@ -8,6 +9,7 @@ import { Router } from '@angular/router';
   styleUrls: ['tab3.page.scss'],
   standalone: true,
   imports: [
+    CommonModule,
     IonHeader, IonToolbar, IonTitle, IonContent,
     IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
     IonMenu, IonList, IonItem, IonMenuButton
@@ -30,7 +32,7 @@ export class Tab3Page {
       id: '2',
       image: 'assets/img/xiangrikui.png',
       title: '梵高《向日葵》',
-      description: '经典中的经典，笔触很牛！#花',
+      description: '经典中的经典，笔触很牛！',
       avatarUrl: 'assets/img/book2.png',
       userName: '艺术鉴赏家',
       date: '11-30',
@@ -52,7 +54,7 @@ export class Tab3Page {
       id: '4',
       image: 'assets/img/cunzhuang.png',
       title: '阿尔小镇',
-      description: '走吧，梵高，去你最爱的阿尔看看，阿尔小镇',
+      description: '吧，梵高，去你最爱的阿尔看看，阿尔小镇',
       avatarUrl: 'assets/img/book4.png',
       userName: '风景画师',
       date: '11-28',
@@ -73,20 +75,26 @@ export class Tab3Page {
     });
     const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
     if (target) {
-      // target.style.textDecoration = 'underline';
-      // target.style.textDecorationColor = 'red';
       target.setAttribute('underline', 'true');
     }
   }
 
   goToDetail(artId: string) {
-    console.log('Navigating to artwork:', artId);
-    this.router.navigate(['/tabs/art-detail', artId], {
-      state: { artwork: this.artworks.find(art => art.id === artId) }
-    });
-  }
+    console.log('Art ID:', artId);
+    const artwork = this.artworks.find(art => art.id === artId);
 
-  goToCategory(category: string) {
-    this.router.navigate(['/tabs/category', category]);
+    if (artwork) {
+      this.router.navigate(['/tabs/art-detail', artId], {
+        state: { artwork }
+      }).then(() => {
+        console.log('Navigation successful');
+      }).catch(err => {
+        console.error('Navigation failed:', err);
+      });
+    } else {
+      console.warn('Artwork not found for id:', artId);
+    }
   }
+
+
 }

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

@@ -31,6 +31,17 @@ import {
   saveOutline,
   sendOutline,
   playCircleOutline,
+  arrowUndoOutline,
+  arrowRedoOutline,
+  shareSocialOutline,
+  shareOutline,
+  grid,
+  gridOutline,
+  waterOutline,
+  brush,
+  ear,
+  ellipseOutline,
+  receiptOutline,
 } from 'ionicons/icons';
 
 
@@ -60,7 +71,8 @@ export class TabsPage {
       pricetagOutline, closeCircle, brushOutline, musicalNotesOutline, bodyOutline,
       cameraOutline, codeOutline, restaurantOutline, fitnessOutline, languageOutline,
       helpCircleOutline, leafOutline, flame, checkmarkCircle, handRight, medal, saveOutline,
-      sendOutline, playCircleOutline,
+      sendOutline, playCircleOutline, arrowUndoOutline, arrowRedoOutline, shareSocialOutline,
+      shareOutline, gridOutline, grid, waterOutline,
 
     });
   }

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

@@ -71,6 +71,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../drawing/drawing.component').then((m) => m.DrawingComponent),
       },
+      {
+        path: 'music',
+        loadComponent: () =>
+          import('../music/music.component').then((m) => m.MusicComponent),
+      },
       {
         path: 'art-detail/:id',
         loadComponent: () => import('../art-detail/art-detail.component').then((m) => m.ArtDetailComponent)

AIart-app/src/theme/variables.scss

@@ -1,2 +1,20 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+:root {
+    /** primary **/
+    --ion-color-primary: #ff8c00;
+    --ion-color-primary-rgb: 255, 140, 0;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #e07b00;
+    --ion-color-primary-tint: #ff981a;
+
+    /** secondary **/
+    --ion-color-secondary: #ffb366;
+    --ion-color-secondary-rgb: 255, 179, 102;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #e09e5a;
+    --ion-color-secondary-tint: #ffbb75;
+}