fix:Minor front-end modifications

AIart-app/src/app/interest-search/interest-search.component.scss

@@ -133,6 +133,7 @@ ion-list {
         }
     }
 
+
     .options-container {
         padding-left: 52px;
 
@@ -151,6 +152,23 @@ ion-list {
                 font-size: 15px;
                 color: #666;
             }
+
+
+            ion-radio.radio-checked::part(container) {
+                background: #ff8c00;
+                border-color: transparent;
+            }
+
+            ion-radio.radio-checked::part(mark) {
+                width: 6px;
+                height: 10px;
+
+                border-width: 0px 2px 2px 0px;
+                border-style: solid;
+                border-color: #fff;
+
+                transform: rotate(45deg);
+            }
         }
     }
 }

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

@@ -1,6 +1,6 @@
 <ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <div class="header-container">
+    <div class="header-container" [class.search-active]="isSearchActive">
       <!-- 菜单按钮，只有在搜索未激活时显示 -->
       <ion-menu-button *ngIf="!isSearchActive" class="menu-icon"></ion-menu-button>
 
@@ -12,16 +12,19 @@
       </div>
 
       <!-- 搜索图标，点击时切换搜索框 -->
-      <div>
+      <div *ngIf="!isSearchActive">
         <ion-icon name="search-outline" class="search-icon" (click)="onSearchIconClick()"></ion-icon>
       </div>
 
       <!-- 搜索框，只有在搜索激活时显示 -->
       <!-- 搜索框 -->
       <div class="search-bar-container" *ngIf="isSearchActive">
-        <ion-searchbar [(ngModel)]="searchQuery" debounce="300" (ionInput)="onSearchInput()" placeholder="搜索描述..."
-          class="custom-searchbar" [showCancelButton]="false" showClearButton="never"></ion-searchbar>
-        <button class="close-btn" (click)="onCloseSearch()">返回</button>
+        <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="onSearchInput()" placeholder="搜索你感兴趣的内容..."
+          class="custom-searchbar" showClearButton="always" inputmode="search" enterkeyhint="search">
+        </ion-searchbar>
+        <button class="close-btn" (click)="onCloseSearch()">
+          取消
+        </button>
       </div>
     </div>
   </ion-toolbar>
@@ -83,10 +86,18 @@
     </div>
   </div>
 
+  <!-- 添加搜索结果为空时的提示 -->
+  @if(isSearchActive && searchQuery && displayedArtworks.length === 0) {
+  <div class="no-results">
+    <ion-icon name="search-outline"></ion-icon>
+    <h3>未找到相关内容</h3>
+    <p>换个关键词试试看</p>
+  </div>
+  }
 
 </ion-content>
 
-<!-- 添加侧边菜单 -->
+<!-- 添加侧边菜��� -->
 <ion-menu contentId="main-content" side="start">
   <ion-content class="menu-content">
     <div class="menu-header">

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

@@ -72,6 +72,7 @@
         border-radius: 50%;
         cursor: pointer;
         transition: all 0.3s;
+        margin-top: 5px;
 
         &:hover {
             color: var(--primary-color);
@@ -81,97 +82,83 @@
 
     /* 搜索框容器样式 */
     .search-bar-container {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 40px;
-        justify-content: center;
-
-    }
-
-    .custom-searchbar {
-        --background: #fff;
-        /* 背景颜色 */
-        --placeholder-color: #999;
-        /* 占位符颜色 */
-        --padding-start: 40px;
-        /* 左侧 padding */
-        --padding-end: 40px;
-        /* 右侧 padding */
-        --color: #000;
-        /* 文本颜色 */
-        --height: 40px;
-        /* 设置搜索框的高度 */
-        --border-radius: 24px;
-        /* 圆角样式 */
-        --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        /* 阴影效果 */
-        --cancel-button-color: var(--primary-color);
-
-        /* 返回按钮颜色 */
-    }
-
-    /* 关闭按钮样式 */
-    .close-btn {
         position: absolute;
-        right: 8%;
-        /* 根据 padding 调整 */
-        top: 50%;
-        transform: translateY(-50%);
-        width: 10%;
-        height: 36px;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 56px;
         display: flex;
-        justify-content: center;
         align-items: center;
-        border-radius: 50px;
-        /* 圆形按钮 */
-        background-color: white;
-        /* 背景颜色与搜索框一致 */
-        color: #666;
-        font-size: 16px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        z-index: 10;
-        /* 提升层级 */
+        padding: 0 16px;
+        animation: slideIn 0.3s ease-out;
+        background: white;
+        z-index: 100;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        .custom-searchbar {
+            margin-top: 5px;
+        }
 
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--primary-color);
+            font-size: 16px;
+            font-weight: 500;
+            padding: 8px 16px;
+            margin-left: 12px;
+            height: 42px;
+            border-radius: 12px;
+            transition: all 0.2s ease;
+            min-width: 64px;
+            margin-bottom: 5px;
+
+            &:active {
+                background: rgba(182, 77, 36, 0.1);
+                transform: scale(0.98);
+            }
+        }
     }
+}
 
-    .close-btn:hover {
-        color: var(--primary-color);
-        /* 鼠标悬停颜色 */
-        background-color: rgba(182, 77, 36, 0.1);
-        /* 背景颜色变化 */
+// 添加搜索框动画
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
     }
 
-    /* 响应式适配 */
-    @media (max-width: 768px) {
-        .header-container {
-            padding: 8px 12px;
-            /* 减小边距适配小屏幕 */
-        }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
 
-        .custom-searchbar {
-            max-width: 100%;
-            /* 小屏幕占满容器 */
-            font-size: 14px;
-            /* 减小字体大小 */
-        }
+// 添加搜索结果为空时的提示样式
+.no-results {
+    text-align: center;
+    padding: 48px 24px;
+    color: #666;
+
+    ion-icon {
+        font-size: 56px;
+        color: #ddd;
+        margin-bottom: 16px;
+        opacity: 0.8;
+    }
 
-        .close-btn {
-            width: 48px;
-            height: 24px;
-            font-size: 14px;
-            /* 调整关闭按钮大小 */
-        }
+    h3 {
+        font-size: 18px;
+        margin: 12px 0;
+        color: #333;
+        font-weight: 500;
+    }
 
-        .close-btn:hover {
-            color: var(--primary-color);
-            /* 鼠标悬停颜色 */
-            background-color: rgba(182, 77, 36, 0.1);
-            /* 背景颜色变化 */
-        }
+    p {
+        font-size: 15px;
+        color: #999;
+        margin: 0;
+        line-height: 1.5;
     }
 }
 
@@ -228,7 +215,7 @@
             transform: translateY(-2px);
         }
 
-        // 确保所有子元素都可以正确传递点击事件
+        // 确保所有子��素都以正确传递点击事件
         * {
             pointer-events: none;
         }
@@ -398,4 +385,14 @@ ion-menu {
     &:hover {
         background-color: rgba(0, 0, 0, 0.05);
     }
+}
+
+// 添加搜索时的遮罩效果
+.search-active {
+
+    .content-grid,
+    .category-nav {
+        opacity: 0.5;
+        transition: opacity 0.3s ease;
+    }
 }

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

@@ -79,30 +79,48 @@ export class Tab3Page implements OnInit {
 
   // 点击搜索图像时触发
   onSearchIconClick() {
-    this.isSearchActive = !this.isSearchActive;  // 显示或隐藏搜索框
+    this.isSearchActive = true;
+    // 添加动画完成后再聚焦
+    setTimeout(() => {
+      const searchbar = document.querySelector('ion-searchbar');
+      searchbar?.setFocus();
+    }, 300);
   }
 
   // 关闭搜索框
   onCloseSearch() {
-    this.isSearchActive = false;
-    this.searchQuery = ''; // 清空搜索内容
-    this.displayedArtworks = [...this.artworks]; // 恢复显示所有帖子
+    // 添加渐隐动画
+    const searchContainer = document.querySelector('.search-bar-container');
+    if (searchContainer) {
+      searchContainer.classList.add('fade-out');
+      setTimeout(() => {
+        this.isSearchActive = false;
+        this.searchQuery = '';
+        this.displayedArtworks = [...this.artworks];
+      }, 200);
+    }
   }
   onSearchInput() {
-    if (this.searchQuery.trim()) {
-      this.filterPosts(this.searchQuery); // 过滤帖子
-    } else {
-      this.displayedArtworks = [...this.artworks]; // 搜索框为空时恢复所有帖子
+    if (!this.searchQuery.trim()) {
+      this.displayedArtworks = [...this.artworks];
+      return;
     }
+
+    this.filterPosts(this.searchQuery.trim());
   }
 
   // 根据搜索关键字过滤帖子
   filterPosts(query: string) {
-    // 筛选符合条件的帖子
-    this.displayedArtworks = this.artworks.filter(artwork =>
-      artwork.title.toLowerCase().includes(query.toLowerCase()) || // 标题包含关键字
-      artwork.description.toLowerCase().includes(query.toLowerCase()) // 描述包含关键字
-    );
+    const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 0);
+
+    this.displayedArtworks = this.artworks.filter(artwork => {
+      const title = artwork.title.toLowerCase();
+      const description = artwork.description.toLowerCase();
+
+      return searchTerms.every(term =>
+        title.includes(term) || description.includes(term)
+      );
+    });
   }
 
   // 根据传入的 Work[] 数组加载帖子数据

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

@@ -140,7 +140,7 @@
       <div class="feature-item">
         <ion-icon name="document-text-outline"></ion-icon>
         <div class="text-container">
-          <p>笔���</p>
+          <p>笔记</p>
         </div>
       </div>
       <div class="feature-item">