add:Two detail pages have been added

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;
     }
@@ -99,19 +90,39 @@ ion-header {
                 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;
+                }
+            }
         }
     }
 }

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,569 @@
+:host {
+    --primary-color: var(--ion-color-primary);
+    --background-color: #f5f5f5;
+    --page-margin: 16px;
+    --card-border-radius: 12px;
+    --page-padding: 16px;
+    --primary-gradient: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-primary-shade));
+}
+
+.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);
+
+        .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;
+
+            &:hover {
+                transform: translateY(-4px);
+            }
+
+            .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;
+    }
+}

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

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

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

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

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)