@jet-w/astro-blog 0.2.0 → 0.2.2

package/src/components/blog/RelatedPosts.astro

@@ -6,9 +6,25 @@ export interface Props {
     tags?: string[];
     categories?: string[];
   };
+  ui?: {
+    relatedPosts?: string;
+    readMore?: string;
+    minuteRead?: string;
+    postList?: string;
+  };
+  localePrefix?: string;
 }
 
-const { currentPost } = Astro.props;
+const {
+  currentPost,
+  ui = {
+    relatedPosts: '相关文章',
+    readMore: '阅读更多',
+    minuteRead: '分钟',
+    postList: '查看更多文章',
+  },
+  localePrefix = '',
+} = Astro.props;
 
 // 模拟获取相关文章
 const allPosts = [
@@ -83,14 +99,14 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
 {relatedPosts.length > 0 && (
   <section class="mt-16">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      相关文章
+      {ui.relatedPosts}
     </h2>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {relatedPosts.map((post) => (
         <article class="group">
           <a
-            href={`/posts/${post.slug}`}
+            href={`${localePrefix}/posts/${post.slug}`}
             class="card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 block h-full"
           >
             <div class="flex flex-col h-full">
@@ -100,7 +116,7 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
                   {formattedDate(post.pubDate)}
                 </time>
                 {post.readingTime && (
-                  <span>{post.readingTime}分钟</span>
+                  <span>{post.readingTime} {ui.minuteRead}</span>
                 )}
               </div>
 
@@ -132,7 +148,7 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
 
               <!-- 阅读链接 -->
               <div class="flex items-center text-primary-500 group-hover:text-primary-600 transition-colors text-sm font-medium">
-                <span>阅读更多</span>
+                <span>{ui.readMore}</span>
                 <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                 </svg>
@@ -146,10 +162,10 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
     <!-- 查看更多按钮 -->
     <div class="text-center mt-8">
       <a
-        href="/posts"
+        href={`${localePrefix}/posts`}
         class="btn-secondary inline-flex items-center space-x-2"
       >
-        <span>查看更多文章</span>
+        <span>{ui.postList}</span>
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>

package/src/components/blog/TableOfContents.astro

@@ -5,15 +5,21 @@ export interface Props {
     text: string;
     id: string;
   }>;
+  tocTitle?: string;
+  progressTitle?: string;
 }
 
-const { headings } = Astro.props;
+const {
+  headings,
+  tocTitle = 'Table of Contents',
+  progressTitle = 'Reading Progress',
+} = Astro.props;
 ---
 
 {headings.length > 0 && (
-  <nav class="sticky top-20 p-6" aria-label="目录">
+  <nav class="sticky top-20 p-6" aria-label={tocTitle}>
     <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-      目录
+      {tocTitle}
     </h3>
 
     <ol class="space-y-2 text-sm">
@@ -38,7 +44,7 @@ const { headings } = Astro.props;
 
     <!-- 进度指示器 -->
     <div class="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700">
-      <div class="text-xs text-slate-500 dark:text-slate-400 mb-2">阅读进度</div>
+      <div class="text-xs text-slate-500 dark:text-slate-400 mb-2">{progressTitle}</div>
       <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
         <div class="bg-primary-500 h-2 rounded-full transition-all duration-300" id="reading-progress" style="width: 0%"></div>
       </div>

package/src/components/blog/TagCloud.astro

@@ -7,9 +7,10 @@ export interface Props {
   }>;
   maxSize?: number;
   minSize?: number;
+  localePrefix?: string;
 }
 
-const { tags, maxSize = 2.5, minSize = 0.8 } = Astro.props;
+const { tags, maxSize = 2.5, minSize = 0.8, localePrefix = '' } = Astro.props;
 
 // 计算字体大小
 const maxCount = Math.max(...tags.map(tag => tag.count));
@@ -48,10 +49,10 @@ const shuffledTags = [...tags].sort(() => Math.random() - 0.5);
   <div class="flex flex-wrap items-center justify-center gap-3 leading-relaxed">
     {shuffledTags.map((tag, index) => (
       <a
-        href={`/tags/${tag.slug}`}
+        href={`${localePrefix}/tags/${tag.slug}`}
         class={`inline-block font-medium transition-all duration-300 hover:scale-110 ${getColorClass(index)}`}
         style={`font-size: ${getFontSize(tag.count)}rem`}
-        title={`${tag.name} (${tag.count} 篇文章)`}
+        title={`${tag.name} (${tag.count})`}
       >
         {tag.name}
       </a>

package/src/components/home/FeaturedPostsSection.astro

@@ -4,19 +4,33 @@
  */
 import PostCard from '../../components/blog/PostCard.astro';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
 export interface Props {
   count?: number;
+  i18nConfig?: I18nConfig;
 }
 
-const { count = 3 } = Astro.props;
+const { count = 3, i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale from URL
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts
   .filter(post => !post.data.draft)
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
-const featuredPosts = publishedPosts.slice(0, count).map(post => ({
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const featuredPosts = localePosts.slice(0, count).map(post => ({
   slug: post.id.toLowerCase(),
   title: post.data.title,
   description: post.data.description,
@@ -26,19 +40,21 @@ const featuredPosts = publishedPosts.slice(0, count).map(post => ({
   author: post.data.author,
   readingTime: 5
 }));
+
+const postsUrl = `${localePrefix}/posts`;
 ---
 
 {featuredPosts.length > 0 && (
   <section class="mb-16">
     <div class="flex items-center justify-between mb-8">
       <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-        特色文章
+        {ui.posts}
       </h2>
       <a
-        href="/posts"
+        href={postsUrl}
         class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
       >
-        <span>查看全部</span>
+        <span>{ui.allPosts}</span>
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
@@ -47,7 +63,7 @@ const featuredPosts = publishedPosts.slice(0, count).map(post => ({
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {featuredPosts.map((post) => (
-        <PostCard post={post} featured={true} />
+        <PostCard post={post} featured={true} localePrefix={localePrefix} locale={localeConfig.locale.dateLocale} ui={ui} />
       ))}
     </div>
   </section>

package/src/components/home/QuickNavSection.astro

@@ -4,10 +4,29 @@
  */
 import NavigationTabs from '../../components/blog/NavigationTabs.vue';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
-const allPosts = await getCollection('posts');
-const publishedPosts = allPosts
-  .filter(post => !post.data.draft)
+interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale and translations
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
+
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// Filter posts by locale
+const localePosts = filterPostsByLocale(allPosts, currentLocale, i18nConfig);
+
+const publishedPosts = localePosts
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
 const posts = publishedPosts.map(post => ({
@@ -68,7 +87,7 @@ const timelineData = posts.slice(0, 10).map(post => ({
 <section class="mb-16">
   <div class="flex items-center justify-between mb-8">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-      快速导航
+      {ui.quickNavigation}
     </h2>
   </div>
   <NavigationTabs
@@ -77,5 +96,15 @@ const timelineData = posts.slice(0, 10).map(post => ({
     archives={archivesData}
     categories={categoriesData}
     timeline={timelineData}
+    localePrefix={localePrefix}
+    dateLocale={localeConfig.locale?.dateLocale || currentLocale}
+    ui={{
+      tags: ui.tags,
+      archives: ui.archives,
+      categories: ui.categories,
+      timeline: ui.timeline,
+      viewAllTimeline: ui.viewAllTimeline,
+      postsCount: ui.postsCount,
+    }}
   />
 </section>

package/src/components/home/RecentPostsSection.astro

@@ -4,19 +4,33 @@
  */
 import PostCard from '../../components/blog/PostCard.astro';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
 export interface Props {
   count?: number;
+  i18nConfig?: I18nConfig;
 }
 
-const { count = 6 } = Astro.props;
+const { count = 6, i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale from URL
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts
   .filter(post => !post.data.draft)
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
-const recentPosts = publishedPosts.slice(0, count).map(post => ({
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const recentPosts = localePosts.slice(0, count).map(post => ({
   slug: post.id.toLowerCase(),
   title: post.data.title,
   description: post.data.description,
@@ -26,18 +40,20 @@ const recentPosts = publishedPosts.slice(0, count).map(post => ({
   author: post.data.author,
   readingTime: 5
 }));
+
+const postsUrl = `${localePrefix}/posts`;
 ---
 
 <section class="mb-16">
   <div class="flex items-center justify-between mb-8">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-      最新文章
+      {ui.recentPosts}
     </h2>
     <a
-      href="/posts"
+      href={postsUrl}
       class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
     >
-      <span>查看全部</span>
+      <span>{ui.allPosts}</span>
       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
       </svg>
@@ -46,7 +62,7 @@ const recentPosts = publishedPosts.slice(0, count).map(post => ({
 
   <div class="space-y-6">
     {recentPosts.map((post) => (
-      <PostCard post={post} layout="horizontal" />
+      <PostCard post={post} layout="horizontal" localePrefix={localePrefix} />
     ))}
   </div>
 </section>

package/src/components/home/StatsSection.astro

@@ -3,13 +3,31 @@
  * 首页统计信息组件
  */
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, filterPostsByLocale } from '../../utils/i18n';
+
+export interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale from URL
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts.filter(post => !post.data.draft);
 
-const totalPosts = publishedPosts.length;
-const allTags = new Set(publishedPosts.flatMap(post => post.data.tags || []));
-const allCategories = new Set(publishedPosts.flatMap(post => post.data.categories || []));
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const totalPosts = localePosts.length;
+const allTags = new Set(localePosts.flatMap(post => post.data.tags || []));
+const allCategories = new Set(localePosts.flatMap(post => post.data.categories || []));
 const totalTags = allTags.size;
 const totalCategories = allCategories.size;
 ---
@@ -21,7 +39,7 @@ const totalCategories = allCategories.size;
         {totalPosts}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        文章总数
+        {ui.posts}
       </div>
     </div>
     <div class="card text-center">
@@ -29,7 +47,7 @@ const totalCategories = allCategories.size;
         {totalTags}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        标签数量
+        {ui.tags}
       </div>
     </div>
     <div class="card text-center">
@@ -37,7 +55,7 @@ const totalCategories = allCategories.size;
         {totalCategories}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        分类数量
+        {ui.categories}
       </div>
     </div>
   </div>

package/src/components/layout/Header.astro

@@ -6,6 +6,7 @@ import MobileMenu from '../ui/MobileMenu.vue';
 import LanguageSwitcher from '../ui/LanguageSwitcher.vue';
 import type { I18nConfig } from '../../config/i18n';
 import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
 import {
   getLocaleFromPath,
   getLocaleConfig,
@@ -17,7 +18,7 @@ export interface Props {
   i18nConfig?: I18nConfig;
 }
 
-const { i18nConfig = defaultI18nConfig } = Astro.props;
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
 
 const currentPath = Astro.url.pathname;
 const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
@@ -55,11 +56,13 @@ const localesForSwitcher = i18nConfig.locales.map(l => ({
           )}
           <div class="hidden sm:block">
             <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
-              {localeSiteConfig.title || siteConfig.title}
+              {localeSiteConfig.title ?? siteConfig.title}
             </h1>
-            <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
-              {localeSiteConfig.description || siteConfig.description}
-            </p>
+            {(localeSiteConfig.description ?? siteConfig.description) && (
+              <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
+                {localeSiteConfig.description ?? siteConfig.description}
+              </p>
+            )}
           </div>
         </a>
       </div>
@@ -85,6 +88,7 @@ const localesForSwitcher = i18nConfig.locales.map(l => ({
             client:load
             placeholder={ui.searchPlaceholder}
             searchLabel={ui.search}
+            noResultsText={ui.noResults}
           />
         </div>
 

package/src/components/layout/Sidebar.astro

@@ -10,7 +10,7 @@ import {
 } from '@jet-w/astro-blog/utils/sidebar';
 import type { I18nConfig } from '../../config/i18n';
 import { defaultI18nConfig } from '../../config/i18n';
-import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, formatDate } from '../../utils/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, formatDate, filterPostsByLocale } from '../../utils/i18n';
 
 interface Props {
   currentPath?: string;
@@ -31,26 +31,29 @@ const sidebarConfig = localeConfig.sidebar;
 // 获取所有文章
 const allPosts = await getCollection('posts', ({ data }) => !data.draft);
 
+// Filter posts by current locale for sidebar widgets
+const localePosts = filterPostsByLocale(allPosts, currentLocale, i18nConfig);
+
 // 根据当前路径过滤侧边栏组
 const filteredGroups = filterGroupsByPath(sidebarConfig.groups, currentPath);
 
 // 创建过滤后的配置
 const filteredConfig = { ...sidebarConfig, groups: filteredGroups };
 
-// 处理侧边栏配置
-const processedGroups = await processSidebarConfig(filteredConfig, allPosts);
+// 处理侧边栏配置 - 使用按语言过滤后的文章
+const processedGroups = await processSidebarConfig(filteredConfig, localePosts);
 
-// 获取其他数据
+// 获取其他数据 - 使用按语言过滤后的文章
 const recentPosts = sidebarConfig.showRecentPosts
-  ? getRecentPosts(allPosts, sidebarConfig.recentPostsCount)
+  ? getRecentPosts(localePosts, sidebarConfig.recentPostsCount)
   : [];
 
 const popularTags = sidebarConfig.showPopularTags
-  ? getPopularTags(allPosts, sidebarConfig.popularTagsCount)
+  ? getPopularTags(localePosts, sidebarConfig.popularTagsCount)
   : [];
 
 const archives = sidebarConfig.showArchives
-  ? getArchives(allPosts, sidebarConfig.archivesCount)
+  ? getArchives(localePosts, sidebarConfig.archivesCount)
   : [];
 ---
 
@@ -197,7 +200,7 @@ const archives = sidebarConfig.showArchives
                                                 </a>
                                               ) : (
                                                 <a
-                                                  href={`/posts/${item.slug?.toLowerCase()}`}
+                                                  href={`${localePrefix}/posts/${item.slug?.toLowerCase()}`}
                                                   class="tree-file flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                                                   title={item.title}
                                                 >
@@ -238,7 +241,7 @@ const archives = sidebarConfig.showArchives
                                       </a>
                                     ) : (
                                       <a
-                                        href={`/posts/${grandChild.slug?.toLowerCase()}`}
+                                        href={`${localePrefix}/posts/${grandChild.slug?.toLowerCase()}`}
                                         class="tree-file flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                                         title={grandChild.title}
                                       >
@@ -289,7 +292,7 @@ const archives = sidebarConfig.showArchives
                             </a>
                           ) : (
                             <a
-                              href={`/posts/${child.slug?.toLowerCase()}`}
+                              href={`${localePrefix}/posts/${child.slug?.toLowerCase()}`}
                               class="tree-file flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                               title={child.title}
                             >
@@ -340,7 +343,7 @@ const archives = sidebarConfig.showArchives
                   </a>
                 ) : (
                   <a
-                    href={`/posts/${node.slug?.toLowerCase()}`}
+                    href={`${localePrefix}/posts/${node.slug?.toLowerCase()}`}
                     class="tree-file flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                     title={node.title}
                   >

package/src/components/ui/SearchBox.vue

@@ -2,12 +2,13 @@
   <div class="relative">
     <div class="relative">
       <input
+        ref="searchInputRef"
         v-model="searchQuery"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
         type="text"
-        placeholder="搜索文章..."
+        :placeholder="props.placeholder || '搜索文章...'"
         class="w-64 pl-10 pr-4 py-2 text-sm bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
       />
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -24,7 +25,7 @@
         class="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto"
       >
         <div v-if="searchResults.length === 0 && searchQuery.length > 0" class="p-4 text-center text-slate-500 dark:text-slate-400">
-          没有找到相关文章
+          {{ props.noResultsText || '没有找到相关文章' }}
         </div>
         <div v-else class="py-2">
           <a
@@ -55,6 +56,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 
+const props = defineProps<{
+  placeholder?: string;
+  searchLabel?: string;
+  noResultsText?: string;
+}>();
+
 interface SearchResult {
   title: string
   description: string
@@ -145,14 +152,15 @@ const highlightText = (text: string) => {
 }
 
 // 键盘快捷键支持
+const searchInputRef = ref<HTMLInputElement | null>(null)
+
 onMounted(() => {
   // Ctrl/Cmd + K 打开搜索
   document.addEventListener('keydown', (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
       e.preventDefault()
-      const input = document.querySelector('input[placeholder="搜索文章..."]') as HTMLInputElement
-      if (input) {
-        input.focus()
+      if (searchInputRef.value) {
+        searchInputRef.value.focus()
       }
     }
   })