feat: redesign search dialog UI with a custom input layout and OS-aware keyboard shortcuts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "2.9.26",
+  "version": "2.9.27",
   "private": true,
   "type": "module",
   "bin": "dist/service.js",

src/components/dialog/SearchBarDialog.vue

@@ -98,6 +98,14 @@ const searchWordInput = ref<HTMLElement | null>(null)
 // 近期搜索词条
 const recentSearches = ref<string[]>([])
 
+// 检测操作系统是否是Mac
+function isMac() {
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+}
+
+// 计算属性：根据操作系统显示不同的按键提示
+const metaKey = computed(() => (isMac() ? '⌘+K' : 'Ctrl+K'))
+
 // 保存近期搜索到本地
 function saveRecentSearches(keyword: string) {
   if (!keyword) return
@@ -379,400 +387,261 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VDialog v-model="dialog" max-width="42rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <VDialog v-model="dialog" max-width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard class="search-dialog">
-      <!-- 搜索输入框 -->
+      <!-- 搜索输入框区域 -->
-      <VCardItem class="pa-4 pa-sm-5 search-box-container">
+      <div class="search-header">
-        <VCombobox
+        <div class="search-input-wrapper">
+          <VIcon icon="mdi-magnify" size="22" class="search-input-icon" />
+          <input
             ref="searchWordInput"
             v-model="searchWord"
-          density="comfortable"
+            type="text"
-          variant="outlined"
+            class="search-native-input"
-          class="search-input"
-          prepend-inner-icon="mdi-magnify"
-          append-inner-icon="mdi-close"
-          @click:append-inner="emit('close')"
             :placeholder="t('dialog.searchBar.searchPlaceholder')"
             @keydown.enter="searchMedia('media')"
-          hide-details
+            @keydown.escape="emit('close')"
-          clearable
           />
-      </VCardItem>
+          <VBtn icon size="small" variant="text" class="search-submit-btn" @click="searchMedia('media')">
+            <VIcon icon="mdi-magnify" size="20" />
+          </VBtn>
+        </div>
+      </div>
 
-      <VDivider />
+      <!-- 主内容区域 -->
-
+      <div class="search-content">
-      <!-- 主搜索结果区域 -->
+        <!-- 有搜索词时显示搜索入口和匹配结果 -->
-      <VCardText class="search-results-container pa-0">
+        <VList lines="two" v-if="searchWord" class="search-list pa-0 py-2">
-        <!-- 有搜索词时显示结果 -->
+          <!-- 媒体搜索入口 -->
-        <VList lines="two" v-if="searchWord" class="search-list py-2">
+          <VListSubheader class="font-weight-medium text-uppercase px-4">
-          <!-- 搜索结果分组标题 -->
-          <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6">
             {{ t('common.media') }}
           </VListSubheader>
 
-          <!-- 媒体搜索选项 -->
+          <VListItem density="comfortable" link @click="searchMedia('media')" class="search-result-item mx-2 my-1">
-          <VHover>
-            <template #default="hover">
-              <VListItem
-                density="comfortable"
-                link
-                rounded="xl"
-                v-bind="hover.props"
-                @click="searchMedia('media')"
-                class="search-option mx-2 mx-sm-4 my-1"
-              >
             <template #prepend>
-                  <div class="option-icon-wrapper d-flex align-center justify-center">
+              <div class="result-icon-wrapper">
-                    <VIcon
+                <VIcon icon="mdi-movie-search" size="small" color="medium-emphasis" />
-                      icon="mdi-movie-search"
-                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
-                      size="small"
-                    />
               </div>
             </template>
-                <VListItemTitle class="font-weight-medium"
+            <VListItemTitle class="font-weight-medium text-body-2">
-                  >{{ t('recommend.categoryMovie') }}、{{ t('recommend.categoryTV') }}</VListItemTitle
+              {{ t('recommend.categoryMovie') }}、{{ t('recommend.categoryTV') }}
-                >
+            </VListItemTitle>
-                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+            <VListItemSubtitle class="text-caption text-medium-emphasis">
               {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
               {{ t('resource.title') }}
             </VListItemSubtitle>
-                <template #append>
-                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                </template>
           </VListItem>
-            </template>
-          </VHover>
 
-          <VHover v-if="showCollectionSearch">
-            <template #default="hover">
           <VListItem
+            v-if="showCollectionSearch"
             density="comfortable"
             link
-                rounded="xl"
-                v-bind="hover.props"
             @click="searchMedia('collection')"
-                class="search-option mx-2 mx-sm-4 my-1"
+            class="search-result-item mx-2 my-1"
           >
             <template #prepend>
-                  <div class="option-icon-wrapper d-flex align-center justify-center">
+              <div class="result-icon-wrapper">
-                    <VIcon
+                <VIcon icon="mdi-movie-filter" size="small" color="medium-emphasis" />
-                      icon="mdi-movie-filter"
-                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
-                      size="small"
-                    />
               </div>
             </template>
-                <VListItemTitle class="font-weight-medium">{{ t('dialog.searchBar.collections') }}</VListItemTitle>
+            <VListItemTitle class="font-weight-medium text-body-2">{{
-                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+              t('dialog.searchBar.collections')
+            }}</VListItemTitle>
+            <VListItemSubtitle class="text-caption text-medium-emphasis">
               {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
               {{ t('dialog.searchBar.collectionSearch') }}
             </VListItemSubtitle>
-                <template #append>
-                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                </template>
           </VListItem>
-            </template>
-          </VHover>
 
-          <VHover>
+          <VListItem density="comfortable" link @click="searchMedia('person')" class="search-result-item mx-2 my-1">
-            <template #default="hover">
-              <VListItem
-                density="comfortable"
-                link
-                rounded="xl"
-                v-bind="hover.props"
-                @click="searchMedia('person')"
-                class="search-option mx-2 mx-sm-4 my-1"
-              >
             <template #prepend>
-                  <div class="option-icon-wrapper d-flex align-center justify-center">
+              <div class="result-icon-wrapper">
-                    <VIcon
+                <VIcon icon="mdi-account-search" size="small" color="medium-emphasis" />
-                      icon="mdi-account-search"
-                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
-                      size="small"
-                    />
               </div>
             </template>
-                <VListItemTitle class="font-weight-medium">{{ t('browse.actor') }}</VListItemTitle>
+            <VListItemTitle class="font-weight-medium text-body-2">{{ t('browse.actor') }}</VListItemTitle>
-                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+            <VListItemSubtitle class="text-caption text-medium-emphasis">
               {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
               {{ t('dialog.searchBar.actorSearch') }}
             </VListItemSubtitle>
-                <template #append>
-                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                </template>
           </VListItem>
-            </template>
-          </VHover>
 
-          <VHover v-if="hasSubscribePermission">
-            <template #default="hover">
           <VListItem
+            v-if="hasSubscribePermission"
             density="comfortable"
             link
-                rounded="xl"
-                v-bind="hover.props"
             @click="searchSubscribeShares"
-                class="search-option mx-2 mx-sm-4 my-1"
+            class="search-result-item mx-2 my-1"
           >
             <template #prepend>
-                  <div class="option-icon-wrapper d-flex align-center justify-center">
+              <div class="result-icon-wrapper">
-                    <VIcon
+                <VIcon icon="mdi-share-variant" size="small" color="medium-emphasis" />
-                      icon="mdi-share-variant"
-                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
-                      size="small"
-                    />
               </div>
             </template>
-                <VListItemTitle class="font-weight-medium">{{ t('subscribe.searchShares') }}</VListItemTitle>
+            <VListItemTitle class="font-weight-medium text-body-2">{{ t('subscribe.searchShares') }}</VListItemTitle>
-                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+            <VListItemSubtitle class="text-caption text-medium-emphasis">
               {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
               {{ t('dialog.searchBar.subscribeShareSearch') }}
             </VListItemSubtitle>
-                <template #append>
-                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                </template>
           </VListItem>
-            </template>
-          </VHover>
 
-          <VHover v-if="hasManagePermission">
-            <template #default="hover">
           <VListItem
+            v-if="hasManagePermission"
             density="comfortable"
             link
-                rounded="xl"
-                v-bind="hover.props"
             @click="searchHistory"
-                class="search-option mx-2 mx-sm-4 my-1"
+            class="search-result-item mx-2 my-1"
           >
             <template #prepend>
-                  <div class="option-icon-wrapper d-flex align-center justify-center">
+              <div class="result-icon-wrapper">
-                    <VIcon icon="mdi-history" :color="hover.isHovering ? 'primary' : 'medium-emphasis'" size="small" />
+                <VIcon icon="mdi-history" size="small" color="medium-emphasis" />
               </div>
             </template>
-                <VListItemTitle class="font-weight-medium">{{ t('navItems.history') }}</VListItemTitle>
+            <VListItemTitle class="font-weight-medium text-body-2">{{ t('navItems.history') }}</VListItemTitle>
-                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+            <VListItemSubtitle class="text-caption text-medium-emphasis">
               {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
               {{ t('dialog.searchBar.historySearch') }}
             </VListItemSubtitle>
-                <template #append>
-                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                </template>
           </VListItem>
-            </template>
-          </VHover>
 
-          <!-- 其他搜索结果 -->
+          <!-- 匹配的订阅 -->
           <template v-if="matchedSubscribeItems.length > 0">
-            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VDivider class="mx-4 my-2 search-divider" />
-            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6">{{
+            <VListSubheader class="font-weight-medium text-uppercase px-4">
-              t('dialog.searchBar.subscriptions')
+              {{ t('dialog.searchBar.subscriptions') }}
-            }}</VListSubheader>
+            </VListSubheader>
-
-            <VHover v-for="subscribe in matchedSubscribeItems" :key="subscribe.id">
-              <template #default="hover">
             <VListItem
+              v-for="subscribe in matchedSubscribeItems"
+              :key="subscribe.id"
               density="comfortable"
               link
-                  rounded="xl"
-                  v-bind="hover.props"
               @click="goSubscribe(subscribe)"
-                  class="search-option mx-2 mx-sm-4 my-1"
+              class="search-result-item mx-2 my-1"
             >
               <template #prepend>
-                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                <div class="result-icon-wrapper">
                   <VIcon
                     :icon="subscribe.type === '电影' ? 'mdi-movie-roll' : 'mdi-television-classic'"
-                        :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
                     size="small"
+                    color="medium-emphasis"
                   />
                 </div>
               </template>
-                  <VListItemTitle class="font-weight-medium">
+              <VListItemTitle class="font-weight-medium text-body-2">
-                    {{ subscribe.name
+                {{ subscribe.name }}
-                    }}<span v-if="subscribe.season" class="text-body-2">
+                <span v-if="subscribe.season" class="text-caption">
                   {{ t('resource.season') }} {{ subscribe.season }}</span
                 >
               </VListItemTitle>
-                  <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+              <VListItemSubtitle class="text-caption text-medium-emphasis">
                 {{ subscribe.type }}
               </VListItemSubtitle>
-                  <template #append>
-                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                  </template>
             </VListItem>
           </template>
-            </VHover>
-          </template>
 
+          <!-- 匹配的菜单/功能 -->
           <template v-if="matchedMenuItems.length > 0">
-            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VDivider class="mx-4 my-2 search-divider" />
-            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6">{{
+            <VListSubheader class="font-weight-medium text-uppercase px-4">
-              t('dialog.searchBar.functions')
+              {{ t('dialog.searchBar.functions') }}
-            }}</VListSubheader>
+            </VListSubheader>
-
-            <VHover v-for="menu in matchedMenuItems" :key="menu.title">
-              <template #default="hover">
             <VListItem
+              v-for="menu in matchedMenuItems"
+              :key="menu.title"
               density="comfortable"
               link
-                  rounded="xl"
-                  v-bind="hover.props"
               @click="goPage(menu.to as string)"
-                  class="search-option mx-2 mx-sm-4 my-1"
+              class="search-result-item mx-2 my-1"
             >
               <template #prepend>
-                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                <div class="result-icon-wrapper">
-                      <VIcon
+                  <VIcon :icon="menu.icon as string" size="small" color="medium-emphasis" />
-                        :icon="menu.icon as string"
-                        :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
-                        size="small"
-                      />
                 </div>
               </template>
-                  <VListItemTitle class="font-weight-medium">
+              <VListItemTitle class="font-weight-medium text-body-2">
                 {{ menu.title }}
               </VListItemTitle>
-                  <VListItemSubtitle v-if="menu.description" class="text-body-2 text-medium-emphasis mt-1">
+              <VListItemSubtitle v-if="menu.description" class="text-caption text-medium-emphasis">
                 {{ menu.description }}
               </VListItemSubtitle>
-                  <template #append>
-                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                  </template>
             </VListItem>
           </template>
-            </VHover>
-          </template>
 
+          <!-- 匹配的插件 -->
           <template v-if="matchedPluginItems.length > 0">
-            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VDivider class="mx-4 my-2 search-divider" />
-            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6">{{
+            <VListSubheader class="font-weight-medium text-uppercase px-4">
-              t('dialog.searchBar.plugins')
+              {{ t('dialog.searchBar.plugins') }}
-            }}</VListSubheader>
+            </VListSubheader>
-
-            <VHover v-for="plugin in matchedPluginItems" :key="plugin.id">
-              <template #default="hover">
             <VListItem
+              v-for="plugin in matchedPluginItems"
+              :key="plugin.id"
               density="comfortable"
               link
-                  rounded="xl"
-                  v-bind="hover.props"
               @click="showPlugin(plugin.id ?? '')"
-                  class="search-option mx-2 mx-sm-4 my-1"
+              class="search-result-item mx-2 my-1"
             >
               <template #prepend>
-                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                <div class="result-icon-wrapper">
-                      <VIcon icon="mdi-apps" :color="hover.isHovering ? 'primary' : 'medium-emphasis'" size="small" />
+                  <VIcon icon="mdi-puzzle" size="small" color="medium-emphasis" />
                 </div>
               </template>
-                  <VListItemTitle class="font-weight-medium">
+              <VListItemTitle class="font-weight-medium text-body-2">
                 {{ plugin.plugin_name }}
               </VListItemTitle>
-                  <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+              <VListItemSubtitle class="text-caption text-medium-emphasis">
                 {{ plugin.plugin_desc }}
               </VListItemSubtitle>
-                  <template #append>
-                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
-                  </template>
             </VListItem>
           </template>
-            </VHover>
-          </template>
 
-          <!-- 将站点资源搜索移到最底部 -->
+          <!-- 站点资源搜索 -->
-          <template v-if="searchWord && hasSearchPermission">
+          <template v-if="hasSearchPermission">
-            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VDivider class="mx-4 my-2 search-divider" />
-            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6">{{
+            <VListSubheader class="font-weight-medium text-uppercase px-4">
-              t('dialog.searchBar.siteResources')
+              {{ t('dialog.searchBar.siteResources') }}
-            }}</VListSubheader>
+            </VListSubheader>
 
-            <VCard class="mx-3 mx-sm-6 mb-4 mt-2 site-search-card">
+            <VListItem density="comfortable" link @click="searchTorrent" class="search-result-item mx-2 my-1">
-              <VCardText class="pa-3 pa-sm-4">
+              <template #prepend>
-                <div class="d-flex flex-column">
+                <div class="result-icon-wrapper">
-                  <div class="d-flex align-center">
+                  <VIcon icon="mdi-file-search" size="small" color="medium-emphasis" />
-                    <div class="search-icon-wrapper mr-3">
-                      <VIcon icon="mdi-file-search" color="primary" size="small" />
                 </div>
-                    <div class="flex-grow-1">
+              </template>
-                      <div class="font-weight-medium text-body-1">{{ t('dialog.searchBar.searchInSites') }}</div>
+              <VListItemTitle class="font-weight-medium text-body-2">{{
-                      <div class="text-caption text-medium-emphasis mt-1">
+                t('dialog.searchBar.searchInSites')
+              }}</VListItemTitle>
+              <VListItemSubtitle class="text-caption text-medium-emphasis">
                 {{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
                 {{ t('dialog.searchBar.relatedResources') }}
-                      </div>
+              </VListItemSubtitle>
-                    </div>
+              <template #append>
                 <VBtn
-                      color="primary"
-                      @click="searchTorrent"
-                      prepend-icon="mdi-magnify"
-                      size="small"
-                      variant="flat"
-                      class="search-btn"
-                    >
-                      {{ t('common.search') }}
-                    </VBtn>
-                  </div>
-
-                  <div
                   v-if="hasManagePermission"
-                    class="d-flex align-center flex-wrap site-chips-container mt-4 py-2 px-2 px-sm-3"
-                  >
-                    <div class="d-flex align-center flex-wrap flex-grow-1">
-                      <VChip
-                        v-if="selectedSites.length > 0"
-                        color="primary"
-                        size="small"
-                        variant="flat"
-                        class="mr-2 mb-1 font-weight-medium"
-                      >
-                        {{ selectedSites.length }}/{{ allSites.length }}
-                      </VChip>
-                      <VChip
-                        v-for="(site, index) in allSites.filter(s => selectedSites.includes(s.id)).slice(0, 5)"
-                        :key="site.id"
                   size="x-small"
-                        variant="outlined"
-                        class="mr-1 mb-1 site-chip"
-                      >
-                        {{ site.name }}
-                      </VChip>
-                      <VChip
-                        v-if="selectedSites.length > 5"
-                        size="x-small"
-                        variant="outlined"
-                        class="mr-1 mb-1 site-chip text-medium-emphasis"
-                      >
-                        +{{ selectedSites.length - 5 }}
-                      </VChip>
-                    </div>
-                    <VBtn
-                      size="small"
                   variant="tonal"
                   color="primary"
-                      @click="openSiteDialog"
-                      class="ml-auto site-select-btn"
                   rounded="pill"
+                  @click.stop="openSiteDialog"
                 >
                   {{ t('dialog.searchBar.selectSites') }}
-                      <VIcon size="small" class="ml-1">mdi-cog-outline</VIcon>
                 </VBtn>
-                  </div>
+              </template>
-                </div>
+            </VListItem>
-              </VCardText>
-            </VCard>
           </template>
         </VList>
 
-        <!-- 无搜索词时显示最近搜索和提示 -->
+        <!-- 无搜索词时显示空状态 -->
-        <div v-else class="recent-searches py-6 px-4 px-sm-6">
+        <div v-else class="search-empty-state">
-          <div v-if="recentSearches.length > 0" class="mb-6">
+          <!-- 有最近搜索 -->
-            <div class="text-h6 font-weight-medium mb-3">{{ t('dialog.searchBar.recentSearches') }}</div>
+          <div v-if="!searchWord && recentSearches.length > 0" class="recent-searches-section">
-            <div class="d-flex flex-wrap">
+            <div class="text-body-2 font-weight-medium text-medium-emphasis mb-3">
+              {{ t('dialog.searchBar.recentSearches') }}
+            </div>
+            <div class="d-flex flex-wrap gap-2">
               <VChip
                 v-for="(word, index) in recentSearches"
                 :key="index"
-                class="me-2 mb-2"
                 variant="flat"
                 color="primary"
                 size="small"
@@ -784,15 +653,24 @@ onMounted(() => {
             </div>
           </div>
 
-          <div v-else class="text-center mt-6 py-6 empty-search-state">
+          <!-- 空状态提示 -->
-            <div class="search-icon-wrapper mx-auto mb-4">
+          <div v-else class="empty-hint">
-              <VIcon icon="mdi-magnify" size="large" color="primary" />
+            <span class="text-body-1 text-medium-emphasis">{{ t('dialog.searchBar.emptySearchHint') }}</span>
           </div>
-            <div class="text-h6 font-weight-medium mb-2">{{ t('dialog.searchBar.searchPlaceholder') }}</div>
+        </div>
-            <div class="text-body-2 text-medium-emphasis">{{ t('dialog.searchBar.searchTip') }}</div>
+      </div>
+
+      <!-- 底部快捷键提示 -->
+      <div class="search-footer">
+        <div class="shortcut-group">
+          <kbd>Esc</kbd>
+          <span class="shortcut-label">{{ t('dialog.searchBar.escClose') }}</span>
+        </div>
+        <div class="shortcut-group">
+          <kbd>{{ metaKey }}</kbd>
+          <span class="shortcut-label">{{ t('dialog.searchBar.openSearch') }}</span>
         </div>
       </div>
-      </VCardText>
     </VCard>
   </VDialog>
 
@@ -811,171 +689,181 @@ onMounted(() => {
 <style scoped>
 .search-dialog {
   overflow: hidden;
-  border-radius: 16px;
+  border-radius: 16px !important;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 8%);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 12%) !important;
 }
 
-.site-dialog {
+/* 搜索头部区域 */
-  overflow: hidden;
+.search-header {
-  border-radius: 16px;
+  padding-block: 16px 12px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 8%);
+  padding-inline: 16px;
+}
+
+/* 搜索输入框容器 */
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.15);
+  border-radius: 28px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.04);
+  block-size: 48px;
+  padding-inline: 14px 6px;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.search-input-wrapper:focus-within {
+  border-color: rgba(var(--v-theme-on-surface), 0.3);
+  box-shadow: 0 0 0 3px rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.search-input-icon {
+  flex-shrink: 0;
+  color: rgba(var(--v-theme-on-surface), 0.45);
+  margin-inline-end: 10px;
+}
+
+.search-native-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  font-size: 15px;
+  line-height: 1.5;
+  min-inline-size: 0;
+  outline: none;
+}
+
+.search-native-input::placeholder {
+  color: rgba(var(--v-theme-on-surface), 0.38);
+}
+
+.search-submit-btn {
+  flex-shrink: 0;
+  border-radius: 50% !important;
+  background-color: rgba(var(--v-theme-on-surface), 0.06) !important;
+  block-size: 36px !important;
+  color: rgba(var(--v-theme-on-surface), 0.6) !important;
+  inline-size: 36px !important;
+  transition: background-color 0.2s ease;
+}
+
+.search-submit-btn:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.12) !important;
+}
+
+/* 主内容区域 */
+.search-content {
+  max-block-size: 600px;
+  min-block-size: 150px;
+  overflow-y: auto;
+}
+
+.search-list {
+  background: transparent !important;
+}
+
+.search-result-item {
+  border-radius: 10px !important;
+  margin-block-end: 2px;
+  transition: background-color 0.15s ease;
+}
+
+.search-result-item:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.result-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.1);
+  block-size: 32px;
+  inline-size: 32px;
+  margin-inline-end: 12px;
 }
 
 .search-divider {
   opacity: 0.08;
 }
 
-.close-btn {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: rgba(var(--v-theme-on-surface), 0.04);
-  block-size: 36px;
-  inline-size: 36px;
-  inset-block-start: 1.4rem;
-  inset-inline-end: 1.2rem;
-  transition: background-color 0.2s ease;
-}
-
-.close-btn:hover {
-  background-color: rgba(var(--v-theme-error), 0.1);
-}
-
-.search-input {
-  border-radius: 12px;
-  font-size: 16px;
-}
-
-.search-icon {
-  color: rgb(var(--v-theme-primary));
-}
-
-.option-icon-wrapper {
-  border-radius: 8px;
-  background-color: rgba(var(--v-theme-surface-variant), 0.12);
-  block-size: 32px;
-  inline-size: 32px;
-  margin-inline-end: 12px;
-}
-
-.search-icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background-color: rgba(var(--v-theme-primary), 0.08);
-  block-size: 36px;
-  inline-size: 36px;
-}
-
-.search-icon-wrapper.warning {
-  background-color: rgba(var(--v-theme-warning), 0.08);
-}
-
 .primary-text {
   color: rgb(var(--v-theme-primary));
 }
 
-.search-option {
+/* 空状态 */
-  border: 1px solid transparent;
+.search-empty-state {
-  margin-block-end: 2px;
+  display: flex;
-  transition: transform 0.2s ease, background-color 0.2s ease;
+  align-items: start;
-}
+  justify-content: center;
-
+  min-block-size: 150px;
-.search-option:hover {
-  background-color: rgba(var(--v-theme-primary), 0.04);
-  transform: translateX(4px);
-}
-
-.recent-searches {
-  min-block-size: 200px;
-}
-
-.site-search-card {
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  border-radius: 14px;
-}
-
-.site-chip {
-  font-weight: normal;
-  transition: all 0.2s ease;
-}
-
-.site-chip:hover {
-  background-color: rgba(var(--v-theme-primary), 0.1);
-  color: rgb(var(--v-theme-primary));
-}
-
-.search-btn {
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  min-inline-size: 70px;
-}
-
-.empty-search-state,
-.empty-site-state {
-  animation: fade-in 0.3s ease-in-out;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.clear-icon {
-  opacity: 0.7;
-}
-
-.clear-icon:hover {
-  opacity: 1;
-}
-
-.site-select-btn {
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  min-block-size: 32px;
   padding-block: 0;
+  padding-inline: 1.5rem;
+}
+
+.recent-searches-section {
+  inline-size: 100%;
+}
+
+.empty-hint {
+  text-align: center;
+}
+
+/* 底部快捷键提示 */
+.search-footer {
+  display: flex;
+  align-items: center;
+  border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  gap: 16px;
+  padding-block: 10px;
+  padding-inline: 16px;
+}
+
+.shortcut-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+kbd {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.15);
+  border-radius: 5px;
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  padding-block: 3px;
+  padding-inline: 6px;
+}
+
+.shortcut-label {
+  color: rgba(var(--v-theme-on-surface), 0.45);
+  font-size: 12px;
+}
+
+/* 响应式 */
+@media (width <= 600px) {
+  .search-header {
+    padding-block: 12px 10px;
     padding-inline: 12px;
   }
 
-.site-chips-container {
+  .search-input-wrapper {
-  border-radius: 10px;
+    block-size: 44px;
-  background-color: rgba(var(--v-theme-surface-variant), 0.06);
+    padding-inline: 12px 4px;
   }
 
-@media (width <= 600px) {
+  .search-native-input {
-  .search-box-container {
-    padding: 16px;
-  }
-
-  .search-input {
     font-size: 14px;
   }
 
-  .close-btn {
+  .search-footer {
-    block-size: 32px;
+    padding-block: 8px;
-    inline-size: 32px;
+    padding-inline: 12px;
-    inset-block-start: 1rem;
-    inset-inline-end: 0.8rem;
-  }
-
-  .site-chips-container {
-    padding-block: 6px;
-    padding-inline: 8px;
-  }
-
-  .site-select-btn {
-    font-size: 11px;
-    min-block-size: 28px;
   }
 }
 </style>

src/locales/en-US.ts

@@ -2008,7 +2008,7 @@ export default {
     },
     searchBar: {
       search: 'Search',
-      searchPlaceholder: 'Search features, subscriptions, settings...',
+      searchPlaceholder: 'Search movies and TV shows...',
       recentSearches: 'Recent Searches',
       noRecentSearches: 'No recent search history',
       functions: 'Functions',
@@ -2028,6 +2028,9 @@ export default {
       searchInSites: 'Search for torrent resources in sites',
       relatedResources: 'Related Resources',
       searchTip: 'You can search for movies, TV shows, actors, resources, etc.',
+      emptySearchHint: 'Enter keywords to search',
+      escClose: 'Close',
+      openSearch: 'Open search',
     },
     searchSite: {
       selectSites: 'Select Sites',

src/locales/zh-CN.ts

@@ -1980,7 +1980,7 @@ export default {
     },
     searchBar: {
       search: '搜索',
-      searchPlaceholder: '搜索功能、订阅、设置...',
+      searchPlaceholder: '搜索电影和剧集...',
       recentSearches: '最近搜索',
       noRecentSearches: '没有最近搜索记录',
       functions: '功能',
@@ -2000,6 +2000,9 @@ export default {
       searchInSites: '在站点中搜索种子资源',
       relatedResources: '相关资源',
       searchTip: '可搜索电影、电视剧、演员、资源等',
+      emptySearchHint: '输入关键字开始搜索',
+      escClose: '关闭',
+      openSearch: '打开搜索',
     },
     searchSite: {
       selectSites: '选择站点',

src/locales/zh-TW.ts

@@ -1981,7 +1981,7 @@ export default {
     },
     searchBar: {
       search: '搜索',
-      searchPlaceholder: '搜索功能、訂閱、設置...',
+      searchPlaceholder: '搜索電影和劇集...',
       recentSearches: '最近搜索',
       noRecentSearches: '沒有最近搜索記錄',
       functions: '功能',
@@ -2001,6 +2001,9 @@ export default {
       searchInSites: '在站點中搜索種子資源',
       relatedResources: '相關資源',
       searchTip: '可搜索電影、電視劇、演員、資源等',
+      emptySearchHint: '輸入關鍵字開始搜索',
+      escClose: '關閉',
+      openSearch: '打開搜索',
     },
     searchSite: {
       selectSites: '選擇站點',