perf: Review所有演示页，修复开发环境下可避免的警告以及保持所有演示页风格大致统一

src/layout/components/navbar.vue

@@ -46,7 +46,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 
     <div v-if="layout === 'vertical'" class="vertical-header-right">
       <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
       <!-- 通知 -->
       <Notice id="header-notice" />
       <!-- 国际化 -->

src/layout/components/search/index.vue

@@ -9,11 +9,13 @@ function handleSearch() {
 </script>
 
 <template>
-  <div
-    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
-    @click="handleSearch"
-  >
-    <IconifyIconOffline icon="search" />
+  <div>
+    <div
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+      @click="handleSearch"
+    >
+      <IconifyIconOffline icon="search" />
+    </div>
+    <SearchModal v-model:value="show" />
   </div>
-  <SearchModal v-model:value="show" />
 </template>

src/layout/components/sidebar/horizontal.vue

@@ -64,7 +64,7 @@ nextTick(() => {
     </el-menu>
     <div class="horizontal-header-right">
       <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
       <!-- 通知 -->
       <Notice id="header-notice" />
       <!-- 国际化 -->

src/layout/components/sidebar/mixNav.vue

@@ -97,7 +97,7 @@ watch(
     </el-menu>
     <div class="horizontal-header-right">
       <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
       <!-- 通知 -->
       <Notice id="header-notice" />
       <!-- 国际化 -->