From 5dc0f1823dde96bae97239f92e3054ac3a38b19c Mon Sep 17 00:00:00 2001
From: AdingApkgg <AdingApkgg@outlook.com>
Date: Thu, 25 Dec 2025 22:22:06 +0800
Subject: [PATCH] Refactor SearchHeader and SearchResults components for
 improved layout and styling

- Adjusted the layout of the SearchHeader component to enhance responsiveness and visibility of the enter hint.
- Updated the SearchResults component to refine card styling and ensure consistent rounded corners across different screen sizes.
- Removed unused tag-related code from SearchHeader.vue to streamline the component.
---
 src/components/SearchHeader.vue  | 45 +++++---------------------------
 src/components/SearchResults.vue |  6 ++---
 2 files changed, 10 insertions(+), 41 deletions(-)

diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index f2eb3d7..c0ecd0f 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -105,8 +105,8 @@
                 <!-- 非搜索时显示回车提示 -->
                 <kbd 
                   v-else
-                  class="enter-hint hidden sm:inline-flex items-center gap-1.5 
-                         px-2.5 py-1.5 rounded-lg text-xs font-medium
+                  class="enter-hint inline-flex items-center gap-1 sm:gap-1.5 
+                         px-2 sm:px-2.5 py-1 sm:py-1.5 rounded-lg text-xs font-medium
                          bg-gray-100/80 dark:bg-slate-700/60
                          text-gray-500 dark:text-slate-400
                          border border-gray-200/50 dark:border-slate-600/50
@@ -116,7 +116,7 @@
                          transition-all duration-200"
                 >
                   <CornerDownLeft :size="14" />
-                  <span>Enter</span>
+                  <span class="hidden sm:inline">Enter</span>
                 </kbd>
               </div>
             </div>
@@ -286,11 +286,11 @@
     </div>
 
     <!-- Usage Notice - 独立于居中区域 - 艳粉主题 -->
-    <div class="w-full max-w-5xl mx-auto mt-8 sm:mt-12 px-2 sm:px-0 animate-fade-in animation-delay-1000">
+    <div class="-mx-4 sm:mx-auto sm:max-w-5xl mt-8 sm:mt-12 animate-fade-in animation-delay-1000">
       <div
         class="usage-notice 
                glassmorphism-card
-               rounded-2xl sm:rounded-3xl 
+               rounded-none sm:rounded-3xl 
                shadow-xl shadow-theme-primary/10 dark:shadow-theme-accent/20
                p-4 sm:p-6 lg:p-8"
       >
@@ -318,32 +318,6 @@
             </div>
           </div>
 
-          <!-- 标签说明 -->
-          <div class="p-3 sm:p-4 rounded-xl bg-slate-50/80 dark:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50">
-            <div class="flex items-start gap-3">
-              <div class="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center flex-shrink-0 mt-0.5">
-                <Tag :size="14" class="text-white" />
-              </div>
-              <div class="text-sm text-gray-700 dark:text-slate-300">
-                <p class="mb-2">搜索结果标签含义：</p>
-                <div class="flex flex-wrap gap-2">
-                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 text-xs font-medium">
-                    <CheckCircle :size="12" />直接下载
-                  </span>
-                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 text-xs font-medium">
-                    <User :size="12" />需登录
-                  </span>
-                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 text-xs font-medium">
-                    <Rocket :size="12" />不限速
-                  </span>
-                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300 text-xs font-medium">
-                    <Magnet :size="12" />BT/磁力
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
           <!-- 使用说明列表 -->
           <div class="grid gap-3 text-sm text-gray-600 dark:text-slate-400">
             <div class="flex items-start gap-2.5">
@@ -418,10 +392,10 @@
     <!-- 友情链接 -->
     <div
       v-if="friendLinks.length > 0"
-      class="w-full max-w-5xl mx-auto mt-6 sm:mt-8 px-2 sm:px-0 animate-fade-in animation-delay-1000"
+      class="-mx-4 sm:mx-auto sm:max-w-5xl mt-6 sm:mt-8 animate-fade-in animation-delay-1000"
     >
       <div
-        class="glassmorphism-card rounded-2xl sm:rounded-3xl 
+        class="glassmorphism-card rounded-none sm:rounded-3xl 
                shadow-xl shadow-theme-primary/10 dark:shadow-theme-accent/20
                p-4 sm:p-6"
       >
@@ -491,14 +465,10 @@ import { playSwipe, playToggle, playCelebration, playCaution, playType } from '@
 import { useDebouncedClick } from '@/composables/useDebounce'
 import {
   Search,
-  CheckCircle,
   AlertCircle,
   Gamepad2,
   Wrench,
   Info,
-  User,
-  Rocket,
-  Magnet,
   X,
   RefreshCw,
   Wifi,
@@ -511,7 +481,6 @@ import {
   Link2,
   GitPullRequestArrow,
   AlertTriangle,
-  Tag,
   Heart,
   Lightbulb,
   ShieldAlert,
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index f52669b..90c70eb 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-if="searchStore.hasResults" class="w-full px-2 sm:px-4 md:px-6 py-4 sm:py-6 md:py-8 animate-fade-in">
-    <div id="results" class="max-w-5xl mx-auto space-y-4 sm:space-y-6">
+  <div v-if="searchStore.hasResults" class="w-full sm:px-4 md:px-6 py-4 sm:py-6 md:py-8 animate-fade-in">
+    <div id="results" class="sm:max-w-5xl sm:mx-auto space-y-4 sm:space-y-6">
       <!-- 使用 v-memo 优化平台卡片渲染，仅在关键数据变化时重新渲染 -->
       <div
         v-for="[platformName, platformData] in searchStore.platformResults"
         :key="platformName"
         v-memo="[platformName, platformData.items.length, platformData.displayedCount, platformData.error]"
         :data-platform="platformName"
-        class="result-card glassmorphism-card rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 animate-fade-in-up border-2 content-auto"
+        class="result-card glassmorphism-card rounded-none sm:rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 animate-fade-in-up border-2 content-auto"
         :class="getBorderClass(platformData.color)"
       >
         <div class="p-4 sm:p-5 md:p-6">