fix: ssr only el-popover

components/HomeContent.vue

@@ -25,9 +25,7 @@ const withLink = (href: string) => {
   <div class="home-content">
     <HomeSection title="您好，需要提供什么帮助？">
       <HomeSectionContent>
-        <ClientOnly>
-          <Search />
-        </ClientOnly>
+        <Search />
       </HomeSectionContent>
     </HomeSection>
 

components/Search/index.vue

@@ -150,63 +150,65 @@ const searchRecommend = (e) => {
 </script>
 <template>
   <div class="search-container">
-    <el-popover
-      :visible="suggestionVisible"
-      :show-arrow="false"
-      :offset="0"
-      :teleported="false"
-      width="100%"
-    >
-      <template #reference>
-        <div class="search-trigger" :class="{ 'has-content': suggestionVisible }">
-          <el-input
-            :ref="(el) => (input$ = el)"
-            v-model="filterText"
-            clearable
-            :prefix-icon="Search"
-            :placeholder="t('请输入关键词，如：课程、协同、AI')"
-          ></el-input>
-        </div>
-      </template>
-      <div class="search-content">
-        <template v-if="loading">
-          <el-skeleton animated />
+    <ClientOnly>
+      <el-popover
+        :visible="suggestionVisible"
+        :show-arrow="false"
+        :offset="0"
+        :teleported="false"
+        width="100%"
+      >
+        <template #reference>
+          <div class="search-trigger" :class="{ 'has-content': suggestionVisible }">
+            <el-input
+              :ref="(el) => (input$ = el)"
+              v-model="filterText"
+              clearable
+              :prefix-icon="Search"
+              :placeholder="t('请输入关键词，如：课程、协同、AI')"
+            ></el-input>
+          </div>
         </template>
-        <template v-else-if="results.length">
-          <ul ref="resultsEl" class="results">
-            <li v-for="(p, index) in results" :key="index">
-              <a
-                :href="p.id"
-                class="result"
-                :aria-label="[...p.titles, p.title].join(' > ')"
-              >
-                <div>
-                  <div class="titles">
-                    <span class="title-icon">#</span>
-                    <span v-for="(t, index) in p.titles" :key="index" class="title">
-                      <span class="text" v-html="t" />
-                      <span class="vpi-chevron-right local-search-icon" />
-                    </span>
-                    <span class="title main">
-                      <span class="text" v-html="p.title" />
-                    </span>
+        <div class="search-content">
+          <template v-if="loading">
+            <el-skeleton animated />
+          </template>
+          <template v-else-if="results.length">
+            <ul ref="resultsEl" class="results">
+              <li v-for="(p, index) in results" :key="index">
+                <a
+                  :href="p.id"
+                  class="result"
+                  :aria-label="[...p.titles, p.title].join(' > ')"
+                >
+                  <div>
+                    <div class="titles">
+                      <span class="title-icon">#</span>
+                      <span v-for="(t, index) in p.titles" :key="index" class="title">
+                        <span class="text" v-html="t" />
+                        <span class="vpi-chevron-right local-search-icon" />
+                      </span>
+                      <span class="title main">
+                        <span class="text" v-html="p.title" />
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </template>
-        <template v-else-if="filterText">
-          <el-empty :image-size="80">
-            <template #description>
-              <span
-                >无法找到相关结果 <strong>"{{ filterText }}"</strong>
-              </span>
-            </template>
-          </el-empty>
-        </template>
-      </div>
-    </el-popover>
+                </a>
+              </li>
+            </ul>
+          </template>
+          <template v-else-if="filterText">
+            <el-empty :image-size="80">
+              <template #description>
+                <span
+                  >无法找到相关结果 <strong>"{{ filterText }}"</strong>
+                </span>
+              </template>
+            </el-empty>
+          </template>
+        </div>
+      </el-popover>
+    </ClientOnly>
     <div class="search-recommend">
       <span> 搜索推荐: </span>
       <span class="recommend" @click="searchRecommend">课程</span>