@jet-w/astro-blog 0.1.6 → 0.2.1

package/src/components/layout/Sidebar.astro

@@ -1,7 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
 import Icon from '../ui/Icon.astro';
-import { sidebarConfig } from '@jet-w/astro-blog/config';
 import {
   processSidebarConfig,
   getRecentPosts,
@@ -9,36 +8,52 @@ import {
   getArchives,
   filterGroupsByPath,
 } from '@jet-w/astro-blog/utils/sidebar';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, formatDate, filterPostsByLocale } from '../../utils/i18n';
 
 interface Props {
   currentPath?: string;
+  i18nConfig?: I18nConfig;
 }
 
-const { currentPath = Astro.url.pathname } = Astro.props;
+const { currentPath = Astro.url.pathname, i18nConfig = defaultI18nConfig } = Astro.props;
+
+// Get current locale and translations
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
+
+// Get locale-specific sidebar config (already merged with defaults in getLocaleConfig)
+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)
   : [];
 ---
 
@@ -185,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}
                                                 >
@@ -226,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}
                                       >
@@ -277,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}
                             >
@@ -328,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}
                   >
@@ -362,17 +377,17 @@ const archives = sidebarConfig.showArchives
     )
   ))}
 
-  {/* 最新文章 */}
+  {/* Recent Posts */}
   {sidebarConfig.showRecentPosts && recentPosts.length > 0 && (
     <section>
       <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">
-        最新文章
+        {ui.recentPosts}
       </h3>
       <div class="space-y-3">
         {recentPosts.map((post) => (
           <article class="group">
             <a
-              href={`/posts/${post.id.toLowerCase()}`}
+              href={`${localePrefix}/posts/${post.id.toLowerCase()}`}
               class="block p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
               <h4 class="text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 line-clamp-2 mb-1">
@@ -380,7 +395,7 @@ const archives = sidebarConfig.showArchives
               </h4>
               {post.data.pubDate && (
                 <time class="text-xs text-slate-500 dark:text-slate-400">
-                  {new Date(post.data.pubDate).toLocaleDateString('zh-CN')}
+                  {formatDate(post.data.pubDate, localeConfig.locale.dateLocale)}
                 </time>
               )}
             </a>
@@ -390,16 +405,16 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 热门标签 */}
+  {/* Popular Tags */}
   {sidebarConfig.showPopularTags && popularTags.length > 0 && (
     <section>
       <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">
-        热门标签
+        {ui.popularTags}
       </h3>
       <div class="flex flex-wrap gap-2">
         {popularTags.map((tag) => (
           <a
-            href={`/tags/${tag.slug}`}
+            href={`${localePrefix}/tags/${tag.slug}`}
             class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
             style={`font-size: ${Math.min(14, 10 + tag.count * 0.5)}px`}
           >
@@ -411,20 +426,20 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 归档 */}
+  {/* Archives */}
   {sidebarConfig.showArchives && archives.length > 0 && (
     <section>
       <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">
-        文章归档
+        {ui.archives}
       </h3>
       <div class="space-y-2">
         {archives.map((archive) => (
           <a
-            href={`/archives/${archive.year}/${String(archive.month).padStart(2, '0')}`}
+            href={`${localePrefix}/archives/${archive.year}/${String(archive.month).padStart(2, '0')}`}
             class="flex items-center justify-between p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors group"
           >
             <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-primary-500">
-              {archive.year}年{archive.month}月
+              {new Date(archive.year, archive.month - 1).toLocaleDateString(localeConfig.locale.dateLocale, { year: 'numeric', month: 'long' })}
             </span>
             <span class="text-xs text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded-full">
               {archive.count}
@@ -435,11 +450,11 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 友情链接 */}
+  {/* Friend Links */}
   {sidebarConfig.showFriendLinks && sidebarConfig.friendLinks && sidebarConfig.friendLinks.length > 0 && (
     <section>
       <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">
-        友情链接
+        {ui.friendLinks}
       </h3>
       <div class="space-y-2">
         {sidebarConfig.friendLinks.map((link) => (

package/src/components/ui/LanguageSwitcher.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="relative" ref="dropdownRef">
+    <button
+      @click="toggleDropdown"
+      class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      :aria-label="ariaLabel"
+    >
+      <svg
+        class="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"
+        />
+      </svg>
+      <span>{{ currentLocaleName }}</span>
+      <svg
+        class="w-3 h-3 transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 9l-7 7-7-7"
+        />
+      </svg>
+    </button>
+
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute right-0 mt-2 w-40 origin-top-right rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-700 focus:outline-none z-50"
+        role="listbox"
+        :aria-label="listLabel"
+      >
+        <div class="py-1">
+          <a
+            v-for="locale in locales"
+            :key="locale.code"
+            :href="getLocalizedUrl(locale.code)"
+            class="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
+            :class="[
+              locale.code === currentLocale
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+            ]"
+            role="option"
+            :aria-selected="locale.code === currentLocale"
+            @click="closeDropdown"
+          >
+            <span
+              v-if="locale.code === currentLocale"
+              class="w-4 h-4 flex items-center justify-center"
+            >
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span v-else class="w-4 h-4" />
+            <span>{{ locale.name }}</span>
+          </a>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+interface LocaleInfo {
+  code: string;
+  name: string;
+}
+
+interface Props {
+  /** Available locales */
+  locales: LocaleInfo[];
+  /** Current locale code */
+  currentLocale: string;
+  /** Current page path (without locale prefix) */
+  currentPath: string;
+  /** Default locale code */
+  defaultLocale: string;
+  /** Whether to prefix the default locale in URLs */
+  prefixDefaultLocale?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefixDefaultLocale: false,
+});
+
+const isOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const currentLocaleName = computed(() => {
+  const locale = props.locales.find((l) => l.code === props.currentLocale);
+  return locale?.name || props.currentLocale;
+});
+
+const ariaLabel = computed(() => {
+  return `Select language, current: ${currentLocaleName.value}`;
+});
+
+const listLabel = computed(() => {
+  return 'Available languages';
+});
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value;
+}
+
+function closeDropdown() {
+  isOpen.value = false;
+}
+
+function getLocalizedUrl(targetLocale: string): string {
+  // Normalize the path
+  let basePath = props.currentPath;
+  if (!basePath.startsWith('/')) {
+    basePath = '/' + basePath;
+  }
+
+  // If target is default locale and prefix is not required
+  if (targetLocale === props.defaultLocale && !props.prefixDefaultLocale) {
+    return basePath === '/' ? '/' : basePath;
+  }
+
+  // Add locale prefix
+  if (basePath === '/') {
+    return `/${targetLocale}`;
+  }
+
+  return `/${targetLocale}${basePath}`;
+}
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown();
+  }
+}
+
+// Close dropdown on escape key
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeDropdown();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleKeyDown);
+});
+</script>

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()
       }
     }
   })

package/src/components/ui/SearchInterface.vue

@@ -7,7 +7,7 @@
           v-model="searchQuery"
           @input="handleSearch"
           type="text"
-          placeholder="搜索文章标题、内容、标签..."
+          :placeholder="props.placeholder || '搜索文章标题、内容、标签...'"
           class="w-full pl-12 pr-4 py-4 text-lg bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors shadow-sm"
           autofocus
         />
@@ -33,41 +33,41 @@
     <div class="flex flex-wrap gap-4">
       <!-- 标签筛选 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">标签:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.tags || '标签' }}:</label>
         <select
           v-model="selectedTag"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="">全部</option>
+          <option value="">{{ props.all || '全部' }}</option>
           <option v-for="tag in allTags" :key="tag" :value="tag">{{ tag }}</option>
         </select>
       </div>
 
       <!-- 分类筛选 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">分类:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.categories || '分类' }}:</label>
         <select
           v-model="selectedCategory"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="">全部</option>
+          <option value="">{{ props.all || '全部' }}</option>
           <option v-for="category in allCategories" :key="category" :value="category">{{ category }}</option>
         </select>
       </div>
 
       <!-- 排序 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">排序:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.sortLabel || '排序' }}:</label>
         <select
           v-model="sortBy"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="relevance">相关性</option>
-          <option value="date">发布时间</option>
-          <option value="title">标题</option>
+          <option value="relevance">{{ props.relevance || '相关性' }}</option>
+          <option value="date">{{ props.publishTime || '发布时间' }}</option>
+          <option value="title">{{ props.titleLabel || '标题' }}</option>
         </select>
       </div>
     </div>
@@ -75,15 +75,14 @@
     <!-- 搜索状态 -->
     <div class="flex items-center justify-between text-sm text-slate-600 dark:text-slate-400">
       <div>
-        <span v-if="isSearching">正在搜索...</span>
+        <span v-if="isSearching">{{ props.searching || '正在搜索...' }}</span>
         <span v-else-if="searchQuery">
-          找到 {{ searchResults.length }} 个结果
-          <span v-if="searchQuery">包含 "{{ searchQuery }}"</span>
+          {{ props.foundResults || '找到' }} {{ searchResults.length }} {{ props.containing || '个结果包含' }} "{{ searchQuery }}"
         </span>
-        <span v-else>输入关键词开始搜索</span>
+        <span v-else>{{ props.enterKeywordToSearch || '输入关键词开始搜索' }}</span>
       </div>
-      <div v-if="searchTime">
-        搜索用时: {{ searchTime }}ms
+      <div v-if="searchTimeValue">
+        {{ props.searchTime || '搜索用时' }}: {{ searchTimeValue }}ms
       </div>
     </div>
 
@@ -104,7 +103,7 @@
 
               <div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
                 <time :datetime="result.date">{{ formatDate(result.date) }}</time>
-                <span v-if="result.readingTime">{{ result.readingTime }}分钟阅读</span>
+                <span v-if="result.readingTime">{{ result.readingTime }} {{ props.readMinutes || '分钟阅读' }}</span>
                 <div class="flex flex-wrap gap-1">
                   <span
                     v-for="tag in result.tags.slice(0, 3)"
@@ -119,7 +118,7 @@
 
             <!-- 相关度评分 -->
             <div class="lg:w-20 text-center">
-              <div class="text-xs text-slate-500 dark:text-slate-400 mb-1">相关度</div>
+              <div class="text-xs text-slate-500 dark:text-slate-400 mb-1">{{ props.relevanceLabel || '相关度' }}</div>
               <div class="flex items-center justify-center">
                 <div class="w-12 h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
                   <div
@@ -138,16 +137,16 @@
     <div v-else-if="searchQuery && !isSearching" class="text-center py-16">
       <div class="text-6xl mb-4">🔍</div>
       <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
-        没有找到相关结果
+        {{ props.noResultsTitle || '没有找到相关结果' }}
       </h3>
       <p class="text-slate-600 dark:text-slate-400 mb-6">
-        尝试使用不同的关键词或调整筛选条件
+        {{ props.noResultsDesc || '尝试使用不同的关键词或调整筛选条件' }}
       </p>
       <button
         @click="clearSearch"
         class="btn-secondary"
       >
-        清除搜索
+        {{ props.clearSearch || '清除搜索' }}
       </button>
     </div>
 
@@ -162,7 +161,7 @@
             ? 'bg-slate-100 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700'
             : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'"
         >
-          上一页
+          {{ props.previousPage || '上一页' }}
         </button>
 
         <div class="flex items-center space-x-1">
@@ -187,7 +186,7 @@
             ? 'bg-slate-100 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700'
             : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'"
         >
-          下一页
+          {{ props.nextPage || '下一页' }}
         </button>
       </nav>
     </div>
@@ -198,13 +197,38 @@
 import { ref, computed, onMounted } from 'vue'
 import type { SearchResult } from '@jet-w/astro-blog/types'
 
+const props = defineProps<{
+  placeholder?: string;
+  noResults?: string;
+  tags?: string;
+  categories?: string;
+  sortLabel?: string;
+  relevance?: string;
+  publishTime?: string;
+  titleLabel?: string;
+  all?: string;
+  searching?: string;
+  foundResults?: string;
+  containing?: string;
+  enterKeywordToSearch?: string;
+  searchTime?: string;
+  readMinutes?: string;
+  relevanceLabel?: string;
+  noResultsTitle?: string;
+  noResultsDesc?: string;
+  clearSearch?: string;
+  previousPage?: string;
+  nextPage?: string;
+  dateLocale?: string;
+}>();
+
 const searchQuery = ref('')
 const selectedTag = ref('')
 const selectedCategory = ref('')
 const sortBy = ref('relevance')
 const searchResults = ref<(SearchResult & { score: number; date: string; readingTime?: number })[]>([])
 const isSearching = ref(false)
-const searchTime = ref(0)
+const searchTimeValue = ref(0)
 const currentPage = ref(1)
 const resultsPerPage = 10
 
@@ -339,7 +363,7 @@ const performSearch = () => {
 
     searchResults.value = results
     isSearching.value = false
-    searchTime.value = Math.round(performance.now() - startTime)
+    searchTimeValue.value = Math.round(performance.now() - startTime)
     currentPage.value = 1
   }, 200)
 }
@@ -364,7 +388,7 @@ const highlightText = (text: string) => {
 }
 
 const formatDate = (date: string) => {
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(props.dateLocale || 'zh-CN', {
     year: 'numeric',
     month: 'long',
     day: 'numeric'