fix:Modify the community

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.scss

@@ -27,6 +27,7 @@
     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;
@@ -40,7 +41,7 @@
             flex-direction: column;
 
             &.selected {
-                --color: var(--primary-color);
+                --color: #ff8c00;
                 position: relative;
 
                 &::after {
@@ -50,7 +51,7 @@
                     left: 25%;
                     width: 50%;
                     height: 2px;
-                    background: var(--primary-color);
+                    background: #ff8c00;
                     border-radius: 1px;
                 }
             }
@@ -83,7 +84,7 @@
 
             &.selected {
                 transform: scale(1.2);
-                border-color: var(--primary-color);
+                border-color: #ff8c00;
             }
 
             &:hover {
@@ -140,4 +141,9 @@
 
 .tools-panel {
     animation: slideUp 0.3s ease-out;
+}
+
+ion-range {
+    --bar-background-active: #ff8c00;
+    --knob-background: #ff8c00;
 }

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

@@ -1,10 +1,10 @@
 :host {
-    --primary-color: var(--ion-color-primary);
-    --background-color: #f5f5f5;
+    --primary-color: #ff8c00;
+    --background-color: #fff5e6;
     --page-margin: 16px;
-    --card-border-radius: 12px;
+    --card-border-radius: 16px;
     --page-padding: 16px;
-    --primary-gradient: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-primary-shade));
+    --primary-gradient: linear-gradient(135deg, #ff8c00, #ff6b00);
 }
 
 .music-container {
@@ -395,6 +395,7 @@ ion-header {
         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;
@@ -484,9 +485,12 @@ ion-header {
             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 {
@@ -566,4 +570,20 @@ ion-infinite-scroll-content {
         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/tab1/tab1.page.html

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

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

@@ -218,7 +218,6 @@ export class Tab1Page implements OnInit, OnDestroy {
   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>
@@ -37,11 +37,10 @@
       </ion-tabs>
     </ion-toolbar>
   </div>
-
   <!-- 内容网格 -->
   <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/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;
+}