chore: checkpoint ai search comments and i18n foundation

frontend/src/components/Comments.astro

@@ -1,5 +1,6 @@
 ---
 import { API_BASE_URL, apiClient } from '../lib/api/client';
+import { getI18n } from '../lib/i18n';
 import type { Comment } from '../lib/api/client';
 
 interface Props {
@@ -8,14 +9,15 @@ interface Props {
 }
 
 const { postSlug, class: className = '' } = Astro.props;
+const { locale, t } = getI18n(Astro);
 
 let comments: Comment[] = [];
 let error: string | null = null;
 
 try {
-  comments = await apiClient.getComments(postSlug, { approved: true });
+  comments = await apiClient.getComments(postSlug, { approved: true, scope: 'article' });
 } catch (e) {
-  error = e instanceof Error ? e.message : '加载评论失败';
+  error = e instanceof Error ? e.message : t('comments.loadFailed');
   console.error('Failed to fetch comments:', e);
 }
 
@@ -25,11 +27,11 @@ function formatCommentDate(dateStr: string): string {
   const diff = now.getTime() - date.getTime();
   const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 
-  if (days === 0) return '今天';
-  if (days === 1) return '昨天';
-  if (days < 7) return `${days} 天前`;
-  if (days < 30) return `${Math.floor(days / 7)} 周前`;
-  return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+  if (days === 0) return t('comments.today');
+  if (days === 1) return t('comments.yesterday');
+  if (days < 7) return t('comments.daysAgo', { count: days });
+  if (days < 30) return t('comments.weeksAgo', { count: Math.floor(days / 7) });
+  return date.toLocaleDateString(locale, { month: 'short', day: 'numeric' });
 }
 ---
 
@@ -45,9 +47,9 @@ function formatCommentDate(dateStr: string): string {
           <i class="fas fa-comments"></i>
         </span>
         <div>
-          <h3 class="text-xl font-semibold text-[var(--title-color)]">评论终端</h3>
+          <h3 class="text-xl font-semibold text-[var(--title-color)]">{t('comments.title')}</h3>
           <p class="text-sm text-[var(--text-secondary)]">
-            当前缓冲区共有 {comments.length} 条已展示评论，新的留言提交后会进入审核队列。
+            {t('comments.description', { count: comments.length })}
           </p>
         </div>
       </div>
@@ -55,7 +57,7 @@ function formatCommentDate(dateStr: string): string {
 
     <button type="button" id="toggle-comment-form" class="terminal-action-button terminal-action-button-primary">
       <i class="fas fa-pen"></i>
-      <span>write comment</span>
+      <span>{t('comments.writeComment')}</span>
     </button>
   </div>
 
@@ -64,7 +66,7 @@ function formatCommentDate(dateStr: string): string {
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
           <label class="terminal-form-label">
-            nickname <span class="text-[var(--primary)]">*</span>
+            {t('comments.nickname')} <span class="text-[var(--primary)]">*</span>
           </label>
           <input
             type="text"
@@ -76,7 +78,7 @@ function formatCommentDate(dateStr: string): string {
         </div>
         <div>
           <label class="terminal-form-label">
-            email <span class="text-[var(--text-tertiary)] normal-case tracking-normal">(optional)</span>
+            {t('comments.email')} <span class="text-[var(--text-tertiary)] normal-case tracking-normal">({t('common.optional')})</span>
           </label>
           <input
             type="email"
@@ -89,37 +91,37 @@ function formatCommentDate(dateStr: string): string {
 
       <div>
         <label class="terminal-form-label">
-          message <span class="text-[var(--primary)]">*</span>
+          {t('comments.message')} <span class="text-[var(--primary)]">*</span>
         </label>
         <textarea
           name="content"
           required
           rows="6"
           maxlength="500"
-          placeholder="$ echo 'Leave your thoughts here...'"
+          placeholder={t('comments.messagePlaceholder')}
           class="terminal-form-textarea resize-y"
         ></textarea>
-        <p class="mt-2 text-right text-xs text-[var(--text-tertiary)]">max 500 chars</p>
+        <p class="mt-2 text-right text-xs text-[var(--text-tertiary)]">{t('comments.maxChars')}</p>
       </div>
 
       <div id="replying-to" class="terminal-panel-muted hidden items-center justify-between gap-3 py-3">
         <span class="text-sm text-[var(--text-secondary)]">
-          reply -> <span id="reply-target" class="font-medium text-[var(--primary)]"></span>
+          {t('common.reply')} -> <span id="reply-target" class="font-medium text-[var(--primary)]"></span>
         </span>
         <button type="button" id="cancel-reply" class="terminal-action-button">
           <i class="fas fa-xmark"></i>
-          <span>cancel reply</span>
+          <span>{t('comments.cancelReply')}</span>
         </button>
       </div>
 
       <div class="flex flex-wrap gap-3">
         <button type="submit" class="terminal-action-button terminal-action-button-primary">
           <i class="fas fa-paper-plane"></i>
-          <span>submit</span>
+          <span>{t('common.submit')}</span>
         </button>
         <button type="button" id="cancel-comment" class="terminal-action-button">
           <i class="fas fa-ban"></i>
-          <span>close</span>
+          <span>{t('common.close')}</span>
         </button>
       </div>
 
@@ -138,9 +140,9 @@ function formatCommentDate(dateStr: string): string {
           <span class="terminal-section-icon">
             <i class="fas fa-comment-slash"></i>
           </span>
-          <h4 class="text-lg font-semibold text-[var(--title-color)]">暂无评论</h4>
+          <h4 class="text-lg font-semibold text-[var(--title-color)]">{t('comments.emptyTitle')}</h4>
           <p class="text-sm leading-7 text-[var(--text-secondary)]">
-            当前还没有留言。可以打开上面的输入面板，作为第一个在这个终端缓冲区里发言的人。
+            {t('comments.emptyDescription')}
           </p>
         </div>
       </div>
@@ -160,7 +162,7 @@ function formatCommentDate(dateStr: string): string {
 
             <div class="min-w-0 flex-1 space-y-3">
               <div class="flex flex-wrap items-center gap-2">
-                <span class="font-semibold text-[var(--title-color)]">{comment.author || '匿名'}</span>
+                <span class="font-semibold text-[var(--title-color)]">{comment.author || t('comments.anonymous')}</span>
                 <span class="terminal-chip px-2.5 py-1 text-xs">
                   <i class="far fa-clock text-[var(--primary)]"></i>
                   {formatCommentDate(comment.created_at)}
@@ -177,14 +179,14 @@ function formatCommentDate(dateStr: string): string {
                   data-id={comment.id}
                 >
                   <i class="fas fa-reply"></i>
-                  <span>reply</span>
+                  <span>{t('common.reply')}</span>
                 </button>
                 <button
                   type="button"
                   class="like-btn terminal-action-button px-3 py-2 text-xs"
                 >
                   <i class="far fa-thumbs-up"></i>
-                  <span>like</span>
+                  <span>{t('common.like')}</span>
                 </button>
               </div>
             </div>
@@ -196,6 +198,7 @@ function formatCommentDate(dateStr: string): string {
 </div>
 
 <script>
+  const t = window.__termiTranslate;
   const wrapper = document.querySelector('.terminal-comments');
   const toggleBtn = document.getElementById('toggle-comment-form');
   const formContainer = document.getElementById('comment-form-container');
@@ -268,7 +271,7 @@ function formatCommentDate(dateStr: string): string {
       if (replyingTo && replyTarget) {
         replyingTo.classList.remove('hidden');
         replyingTo.classList.add('flex');
-        replyTarget.textContent = author || '匿名';
+        replyTarget.textContent = author || t('comments.anonymous');
         replyingTo.setAttribute('data-reply-to', commentId || '');
       }
 
@@ -289,7 +292,7 @@ function formatCommentDate(dateStr: string): string {
     const replyToId = replyingTo?.getAttribute('data-reply-to');
 
     try {
-      showMessage('正在提交评论...', 'info');
+      showMessage(t('comments.submitting'), 'info');
 
       const response = await fetch(`${apiBase}/comments`, {
         method: 'POST',
@@ -301,7 +304,8 @@ function formatCommentDate(dateStr: string): string {
           nickname: formData.get('nickname'),
           email: formData.get('email'),
           content: formData.get('content'),
-          replyTo: replyToId || null,
+          scope: 'article',
+          replyToCommentId: replyToId ? Number(replyToId) : null,
         }),
       });
 
@@ -313,9 +317,9 @@ function formatCommentDate(dateStr: string): string {
       replyingTo?.classList.remove('flex');
       resetReply();
       formContainer?.classList.add('hidden');
-      showMessage('评论已提交，审核通过后会显示在这里。', 'success');
+      showMessage(t('comments.submitSuccess'), 'success');
     } catch (error) {
-      showMessage(`提交失败：${error instanceof Error ? error.message : 'unknown error'}`, 'error');
+      showMessage(t('comments.submitFailed', { message: error instanceof Error ? error.message : 'unknown error' }), 'error');
     }
   });