@allbluecn/web-app 0.9.4 → 0.10.0

package/src/plugins/core/prd/components/page-version-tree.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React, { useState, useMemo, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -83,7 +82,6 @@ interface PageVersionTreeProps {
 }
 
 export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
-  const { t } = useTranslation("prd");
   const [expandedVersionId, setExpandedVersionId] = useState<string | null>(null);
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
   const timezone = useTimezone();
@@ -149,7 +147,7 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
           <span className="flex-1 truncate">
             {node.name}
             {isPlaceholder && (
-              <span className="text-[10px] text-muted-foreground/40 ml-1">{t("version.unpublished")}</span>
+              <span className="text-[10px] text-muted-foreground/40 ml-1">{m.version_unpublished()}</span>
             )}
           </span>
 
@@ -170,7 +168,7 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>{t("version.restoreToCurrent")}</p>
+                  <p>{m.version_restoreToCurrent()}</p>
                 </TooltipContent>
               </Tooltip>
             </>
@@ -255,11 +253,11 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
               )}
               <span className="font-medium">{v.versionLabel}</span>
               {v.id === latestUpdatedVersionId && (
-                <Badge variant="secondary" className="text-[10px] h-4 px-1.5 leading-none font-normal">{t("version.recentlyUpdated")}</Badge>
+                <Badge variant="secondary" className="text-[10px] h-4 px-1.5 leading-none font-normal">{m.version_recentlyUpdated()}</Badge>
               )}
               <span className="text-muted-foreground ml-auto text-[10px] flex items-center gap-1">
                 {v.updatedAt ? (
-                  <span>{t("version.updatedAt")} {formatDate(new Date(v.updatedAt), timezone, 'yyyy-MM-dd')}</span>
+                  <span>{m.version_updatedAt()} {formatDate(new Date(v.updatedAt), timezone, 'yyyy-MM-dd')}</span>
                 ) : (
                   formatDate(new Date(v.createdAt), timezone, 'yyyy-MM-dd')
                 )}
@@ -293,7 +291,7 @@ export function PageVersionTree({ versions, onRestore }: PageVersionTreeProps) {
                           </Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                          <p>{t("version.restoreToCurrent")}</p>
+                          <p>{m.version_restoreToCurrent()}</p>
                         </TooltipContent>
                       </Tooltip>
                     </div>

package/src/plugins/core/prd/components/prd-agent-panel.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,11 +17,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useRef, useEffect, useCallback } from "react"
-import { useTranslation } from "react-i18next"
 import { Bot, Loader2, User, Plus, Trash2, ChevronDown, MessageSquare } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { toast } from '@/components/ui/sonner'
 import type { CanvasElement } from "@allbluecn/kernel"
+import type { PrototypeComponentConfig } from "@/components/prototype"
 import { getAllComponents } from "@/lib/prototype-registry"
 import { generatePrototypeFn, type GeneratedComponent } from "@/plugins/core/prd/serverFns/ai/generate-prototype"
 import { computeStackPositions } from "@/lib/prd/stack-layout"
@@ -67,13 +68,13 @@ interface PRDAgentPanelProps {
 }
 
 /** 将会话按 updatedAt 分组（今天/昨天/本周/更早） */
-function groupConversations(conversations: ConversationItem[], t: (key: string) => string): Array<{ label: string; items: ConversationItem[] }> {
+function groupConversations(conversations: ConversationItem[]): Array<{ label: string; items: ConversationItem[] }> {
   const now = new Date()
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
   const yesterday = new Date(today.getTime() - 86400000)
   const weekAgo = new Date(today.getTime() - 7 * 86400000)
 
-  const groupKeys = ["agent.today", "agent.yesterday", "agent.thisWeek", "agent.earlier"]
+  const groupKeys = ["today", "yesterday", "thisWeek", "earlier"]
   const groups: Record<string, ConversationItem[]> = {
     [groupKeys[0]]: [],
     [groupKeys[1]]: [],
@@ -87,7 +88,13 @@ function groupConversations(conversations: ConversationItem[], t: (key: string)
     else if (d >= weekAgo) groups[groupKeys[2]].push(conv)
     else groups[groupKeys[3]].push(conv)
   }
-  return groupKeys.map((key) => ({ label: t(key), items: groups[key] }))
+  const LABELS: Record<string, () => string> = {
+    today: m.chat_groups_today,
+    yesterday: m.chat_groups_yesterday,
+    thisWeek: m.chat_groups_thisWeek,
+    earlier: m.chat_groups_earlier,
+  }
+  return groupKeys.map((key) => ({ label: LABELS[key]?.() ?? key, items: groups[key] }))
 }
 
 /** 将 AI 生成的组件规格转换为 CanvasElement[] */
@@ -99,7 +106,7 @@ function generatedToElements(
 
   // 先确定每个组件最终采用的尺寸，再按实际高度纵向堆叠
   const resolved = components.map((comp) => {
-    const config = allComponents.find((c) => c.type === comp.type)
+    const config = allComponents.find((c: PrototypeComponentConfig) => c.type === comp.type)
     const width = comp.width ?? config?.defaultWidth ?? 160
     // 未注册的自定义组件（如表格）通常内容较多，给更大的默认高度避免被压缩到不可见
     const height = comp.height ?? config?.defaultHeight ?? (config ? 48 : 120)
@@ -137,7 +144,6 @@ function generatedToElements(
 }
 
 export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel, onModelChange }: PRDAgentPanelProps) {
-  const { t } = useTranslation("prd")
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [input, setInput] = useState("")
   const [loading, setLoading] = useState(false)
@@ -176,7 +182,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
       return
     }
     getAgentMessagesFn({ data: { conversationId } })
-      .then((msgs) => {
+      .then((msgs: unknown[]) => {
         setMessages(
           (msgs as Array<{ id: string; role: string; content: string; isError: boolean }>).map((m) => ({
             id: m.id,
@@ -197,7 +203,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
 
   useEffect(() => {
     listEnabledModelsFn()
-      .then((data) => {
+      .then((data: ModelOption[]) => {
         const typed = data as ModelOption[]
         setModels(typed)
         if (typed.length > 0 && !selectedModel) onModelChange(typed[0].model)
@@ -220,8 +226,8 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
         setConversationId(convId)
         refreshConversations()
       } catch (err) {
-        const errMsg = err instanceof Error ? err.message : t("agent.createFailed")
-        toast.error(t("agent.createFailed"), { description: errMsg })
+        const errMsg = err instanceof Error ? err.message : m.agent_createFailed()
+        toast.error(m.agent_createFailed(), { description: errMsg })
         return
       }
     }
@@ -240,7 +246,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
         data: { conversationId: convId, role: "user", content: trimmed },
       })
 
-      const catalog = getAllComponents().map((c) => ({
+      const catalog = getAllComponents().map((c: PrototypeComponentConfig) => ({
         type: c.type,
         name: c.name,
         category: c.category,
@@ -255,7 +261,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
         onElementsChange([...elements, ...newElements])
       }
 
-      const assistantContent = `${result.message}${t("agent.addedToCanvas", { count: newElements.length })}`
+      const assistantContent = `${result.message}${m.agent_addedToCanvas({ count: newElements.length })}`
       const assistantMsg: ChatMessage = {
         id: `a_${Date.now()}`,
         role: "assistant",
@@ -273,8 +279,8 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
       })
       refreshConversations()
     } catch (err) {
-      const errMsg = err instanceof Error ? err.message : t("agent.generateFailed")
-      const errorContent = `${t("agent.generateFailed")}：${errMsg}`
+      const errMsg = err instanceof Error ? err.message : m.agent_generateFailed()
+      const errorContent = `${m.agent_generateFailed()}：${errMsg}`
       const errorMsg: ChatMessage = {
         id: `e_${Date.now()}`,
         role: "assistant",
@@ -285,7 +291,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
       await saveAgentMessageFn({
         data: { conversationId: convId, role: "assistant", content: errorContent, isError: true },
       }).catch(() => {})
-      toast.error(t("agent.prototypeFailed"), { description: errMsg })
+      toast.error(m.agent_prototypeFailed(), { description: errMsg })
     } finally {
       setLoading(false)
     }
@@ -301,14 +307,14 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
               <MessageSquare className="size-3 shrink-0" />
               <span className="truncate">
                 {conversationId
-                  ? conversations.find((c) => c.id === conversationId)?.title ?? t("agent.unknownConv")
-                  : t("agent.newConv")}
+                  ? conversations.find((c) => c.id === conversationId)?.title ?? m.agent_unknownConv()
+                  : m.agent_newConv()}
               </span>
               <ChevronDown className="size-3 shrink-0" />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="min-w-56 max-h-80 overflow-y-auto rounded-lg p-1">
-            {groupConversations(conversations, t).map(({ label, items }) => (
+            {groupConversations(conversations).map(({ label, items }) => (
               items.length > 0 && (
                 <DropdownMenuGroup key={label}>
                   <DropdownMenuLabel className="text-[10px] text-muted-foreground/60">{label}</DropdownMenuLabel>
@@ -338,7 +344,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
               )
             ))}
             {conversations.length === 0 && (
-              <div className="px-2 py-3 text-center text-xs text-muted-foreground">{t("agent.noConversations")}</div>
+              <div className="px-2 py-3 text-center text-xs text-muted-foreground">{m.agent_noConversations()}</div>
             )}
             <DropdownMenuSeparator />
             <DropdownMenuItem
@@ -348,7 +354,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
                 setMessages([])
               }}
             >
-              <Plus className="size-3" /> {t("agent.newConversation")}
+              <Plus className="size-3" /> {m.agent_newConversation()}
             </DropdownMenuItem>
             {conversations.length > 0 && (
               <DropdownMenuItem
@@ -361,7 +367,7 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
                   })
                 }}
               >
-                <Trash2 className="size-3" /> {t("agent.clearAll")}
+                <Trash2 className="size-3" /> {m.agent_clearAll()}
               </DropdownMenuItem>
             )}
           </DropdownMenuContent>
@@ -372,8 +378,8 @@ export function PRDAgentPanel({ prdId, elements, onElementsChange, selectedModel
         {messages.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-center gap-2 text-muted-foreground">
             <Bot className="size-8 opacity-40" />
-            <p className="text-xs">{t("agent.emptyHint")}</p>
-            <p className="text-[10px] opacity-60">{t("agent.emptyExample")}</p>
+            <p className="text-xs">{m.agent_emptyHint()}</p>
+            <p className="text-[10px] opacity-60">{m.agent_emptyExample()}</p>
           </div>
         ) : (
           messages.map((msg) => (

package/src/plugins/core/prd/components/prd-comment-review-panel.tsx

@@ -15,9 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -29,10 +27,11 @@ import { maskEmail, formatTime, formatEditedTime } from "@/lib/comment-utils";
 import { UserAvatar } from "@/components/shared-kit";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 import { listCommentsFn, ignoreCommentFn } from "@/plugins/core/prd/serverFns/comments";
+import { m } from "@/paraglide/messages.js";
 
 const SUBTABS = [
-  { key: "comment", label: "comment.subtabComment", icon: <MessageSquare className="size-3.5" /> },
-  { key: "review", label: "comment.subtabReview", icon: <ClipboardCheck className="size-3.5" /> },
+  { key: "comment", label: m.comment_subtabComment, icon: <MessageSquare className="size-3.5" /> },
+  { key: "review", label: m.comment_subtabReview, icon: <ClipboardCheck className="size-3.5" /> },
 ] as const;
 
 interface CommentUser {
@@ -57,7 +56,6 @@ interface PRDCommentReviewPanelProps {
 }
 
 export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
-  const { t } = useTranslation("prd");
   const { data: session } = useSession();
   const [activeSubTab, setActiveSubTab] = useState("comment");
   const [comments, setComments] = useState<Comment[]>([]);
@@ -67,15 +65,15 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
   useEffect(() => {
     if (!session?.user?.id) {
       listCommentsFn({ data: { prdId } })
-        .then((all) => setComments(all.map((c) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }))))
+        .then((all: Awaited<ReturnType<typeof listCommentsFn>>) => setComments(all.map((c: any) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }))))
         .catch(() => {});
       return;
     }
     listCommentsFn({ data: { prdId, includeResolved: true } })
-      .then((all) => {
-        const mapped = all.map((c) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }));
-        setComments(mapped.filter((c) => !c.resolved));
-        setIgnoredIds(new Set(mapped.filter((c) => c.resolved).map((c) => c.id)));
+      .then((all: Awaited<ReturnType<typeof listCommentsFn>>) => {
+        const mapped = all.map((c: any) => ({ ...c, createdAt: c.createdAt.toISOString(), updatedAt: c.updatedAt?.toISOString() ?? '', user: { ...c.user, avatarConfig: c.user.avatarConfig as AvatarConfig | null, bgShape: c.user.bgShape as ShapeType | null, bgColor: c.user.bgColor } }));
+        setComments(mapped.filter((c: any) => !c.resolved));
+        setIgnoredIds(new Set(mapped.filter((c: any) => c.resolved).map((c: any) => c.id)));
       })
       .catch(() => {});
   }, [prdId, session?.user?.id]);
@@ -130,12 +128,12 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            {tab.icon} {t(tab.label)}{tab.key === "comment" && commentCount > 0 && (
+            {tab.icon} {tab.label()}{tab.key === "comment" && commentCount > 0 && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span className="text-[10px] text-muted-foreground ml-0.5">({commentCount})</span>
                 </TooltipTrigger>
-                <TooltipContent side="top" className="text-xs">{t("comment.countTooltip")}</TooltipContent>
+                <TooltipContent side="top" className="text-xs">{m.comment_countTooltip({ count: commentCount })}</TooltipContent>
               </Tooltip>
             )}
           </button>
@@ -146,7 +144,7 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
           {/* <span className="text-xs font-medium text-muted-foreground">评论</span> */}
           {comments.length === 0 ? (
-            <p className="text-xs text-muted-foreground text-center py-4">{t("comment.noComments")}</p>
+            <p className="text-xs text-muted-foreground text-center py-4">{m.comment_noComments()}</p>
           ) : (
             <div className="space-y-3">
               {comments.map((c) => {
@@ -167,7 +165,7 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
                       <button onClick={() => toggleExpand(c.id)} className="flex-1 min-w-0 flex items-center gap-1.5 text-left cursor-pointer hover:bg-muted/30 rounded px-1 -mx-1 py-0.5 transition-colors">
                         <span className="text-sm font-medium">{c.user.username}</span>
                         <span className="text-[10px] text-muted-foreground">{maskEmail(c.user.email)}</span>
-                        <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{t("comment.ignored")}</Badge>
+                        <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{m.prd_comment_ignored()}</Badge>
                         <span className="text-[10px] text-muted-foreground ml-auto">
                           {isEdited ? formatEditedTime(c.updatedAt) : formatTime(c.createdAt)}
                         </span>
@@ -177,10 +175,10 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
                         <div className="flex items-center gap-1.5 flex-wrap">
                           <span className="text-sm font-medium">{c.user.username}</span>
                           {isEdited && (
-                            <Badge variant="secondary" className="text-[9px] h-3.5 px-1 leading-none font-normal">{t("comment.modified")}</Badge>
+                            <Badge variant="secondary" className="text-[9px] h-3.5 px-1 leading-none font-normal">{m.comment_modified()}</Badge>
                           )}
                           {isIgnored && (
-                            <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{t("comment.ignored")}</Badge>
+                            <Badge variant="outline" className="text-[9px] h-3.5 px-1 leading-none font-normal text-muted-foreground">{m.prd_comment_ignored()}</Badge>
                           )}
                           <span className="text-[10px] text-muted-foreground ml-auto">
                             {isEdited ? formatEditedTime(c.updatedAt) : formatTime(c.createdAt)}
@@ -189,22 +187,22 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
                         <span className="text-[10px] text-muted-foreground block">{maskEmail(c.user.email)}</span>
                         <p className=" break-words">{c.content}</p>
                         <div className="flex items-center gap-1 pt-0.5">
-                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-green-600 disabled:opacity-40" disabled={isIgnored} onClick={() => toast.success(t("comment.accepted"))}>
+                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-green-600 disabled:opacity-40" disabled={isIgnored} onClick={() => toast.success(m.comment_accepted())}>
                             <Check className="size-2.5" />
-                            {t("comment.accept")}
+                            {m.comment_accept()}
                           </Button>
-                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-foreground disabled:opacity-40" disabled={isIgnored} onClick={() => toast.info(t("comment.replyComingSoon"))}>
+                          <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-foreground disabled:opacity-40" disabled={isIgnored} onClick={() => toast.info(m.comment_replyComingSoon())}>
                             <Reply className="size-2.5" />
-                            {t("comment.reply")}
+                            {m.story_comment_reply()}
                           </Button>
                           <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-red-600" onClick={() => toggleIgnore(c.id)}>
                             <X className="size-2.5" />
-                            {isIgnored ? t("comment.unignore") : t("comment.ignore")}
+                            {isIgnored ? m.comment_unignore() : m.comment_ignore()}
                           </Button>
                           {isIgnored && (
                             <Button variant="ghost" size="sm" className="h-5 text-[10px] px-1.5 gap-0.5 text-muted-foreground hover:text-foreground" onClick={() => toggleExpand(c.id)}>
                               <ChevronUp className="size-2.5" />
-                              {t("comment.collapse")}
+                              {m.comment_collapse()}
                             </Button>
                           )}
                         </div>
@@ -219,7 +217,7 @@ export function PRDCommentReviewPanel({ prdId }: PRDCommentReviewPanelProps) {
       ) : (
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
           {/* <span className="text-xs font-medium text-muted-foreground">评审</span> */}
-          <p className="text-xs text-muted-foreground text-center py-4">{t("comment.reviewComingSoon")}</p>
+          <p className="text-xs text-muted-foreground text-center py-4">{m.comment_reviewComingSoon()}</p>
         </div>
       )}
     </div>

package/src/plugins/core/prd/components/prd-component-editor-content.tsx

@@ -15,8 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useTranslation } from "react-i18next";
 import { Trash2, Package } from "lucide-react";
+import { m } from '@/paraglide/messages.js'
 import type { CanvasElement } from "@allbluecn/kernel";
 import { getComponent } from "@/lib/prototype-registry";
 import { Button } from "@/components/ui/button";
@@ -37,7 +37,6 @@ export function PRDComponentEditorContent({
   onElementChange,
   onDeleteElement,
 }: PRDComponentEditorContentProps) {
-  const { t } = useTranslation("prd");
   if (!element) {
     return (
       <div className="flex-1 flex flex-col justify-center px-4 overflow-auto mt-160">
@@ -46,8 +45,8 @@ export function PRDComponentEditorContent({
           <Skeleton className="h-5 w-[65%] mx-auto rounded-md opacity-40" />
           <Skeleton className="h-5 w-[80%] mx-auto rounded-md opacity-40" />
           <div className="pt-5 text-center">
-            <p className="text-sm text-muted-foreground">{t("editor.noSelection")}</p>
-            <p className="text-xs text-muted-foreground/50 mt-1">{t("editor.noSelectionHint")}</p>
+            <p className="text-sm text-muted-foreground">{m.editor_noSelection()}</p>
+            <p className="text-xs text-muted-foreground/50 mt-1">{m.editor_noSelectionHint()}</p>
           </div>
         </div>
       </div>
@@ -71,18 +70,18 @@ export function PRDComponentEditorContent({
       </div>
 
       {editableProps && editableProps.length > 0 && (
-        <CollapsibleSection title={t("editor.tabContent")} defaultOpen>
+        <CollapsibleSection title={m.editor_tabContent()} defaultOpen>
           <ContentSection fields={editableProps} element={element} onElementChange={onElementChange} />
         </CollapsibleSection>
       )}
 
-      <CollapsibleSection title={t("editor.tabStyle")} defaultOpen>
+      <CollapsibleSection title={m.editor_tabStyle()} defaultOpen>
         {STYLE_FIELDS.map((field) => (
           <StyleFieldRow key={field.key} field={field} element={element} onElementChange={onElementChange} />
         ))}
       </CollapsibleSection>
 
-      <CollapsibleSection title={t("editor.tabPosition")} defaultOpen={false}>
+      <CollapsibleSection title={m.editor_tabPosition()} defaultOpen={false}>
         <PositionSection element={element} />
       </CollapsibleSection>
     </div>

package/src/plugins/core/prd/components/prd-dashboard.tsx

@@ -17,7 +17,7 @@
 
 import { cn } from "@/lib/utils"
 import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { Link } from "@tanstack/react-router";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -63,22 +63,27 @@ interface StatCard {
   accent: string;
 }
 
-function formatRelative(dateStr: string, timezone: string, t: (key: string, opts?: Record<string, number>) => string): string {
+function formatRelative(dateStr: string, timezone: string): string {
   const date = new Date(dateStr);
   const now = new Date();
   const diffMs = now.getTime() - date.getTime();
   const minutes = Math.floor(diffMs / 60000);
   const hours = Math.floor(minutes / 60);
   const days = Math.floor(hours / 24);
-  if (minutes < 1) return t("dashboard:dashboard.justNow");
-  if (minutes < 60) return t("dashboard:dashboard.minutesAgo", { count: minutes });
-  if (hours < 24) return t("dashboard:dashboard.hoursAgo", { count: hours });
-  if (days < 7) return t("dashboard:dashboard.daysAgo", { count: days });
+  if (minutes < 1) return m.dashboard_dashboard_justNow();
+  if (minutes < 60) return m.dashboard_dashboard_minutesAgo({ count: minutes });
+  if (hours < 24) return m.dashboard_dashboard_hoursAgo({ count: hours });
+  if (days < 7) return m.dashboard_dashboard_daysAgo({ count: days });
   return formatDate(date, timezone, 'yyyy-MM-dd');
 }
 
+const STAT_LABELS: Record<string, () => string> = {
+  "dashboard:dashboard.totalCount": m.dashboard_dashboard_totalCount,
+  "dashboard:dashboard.weekNew": m.dashboard_dashboard_weekNew,
+  "dashboard:dashboard.updated24h": m.dashboard_dashboard_updated24h,
+};
+
 export function PRDDashboard() {
-  const { t } = useTranslation(["prd", "common", "dashboard"]);
   const [prds, setPrds] = useState<PRDItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [search, setSearch] = useState("");
@@ -183,29 +188,29 @@ export function PRDDashboard() {
           <LayoutPanelTopIcon size={56} className="mb-4 text-primary" />
           <h1 className="text-2xl font-semibold">PRD</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {t("dashboard:dashboard.subtitle")}
+            {m.dashboard_dashboard_subtitle()}
           </p>
           <div className="mx-auto mt-6 flex w-full max-w-2xl flex-col items-center gap-3">
             <div className="relative w-full">
               <Search className="absolute left-6 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder={t("common:button.search")}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+                placeholder={m.common_button_search()}
                 className="h-14 rounded-3xl bg-background/60 pl-12 dark:border-primary/40"
               />
             </div>
           </div>
           <Button onClick={() => setCreateOpen(true)} className="mt-6">
             <Plus className="size-4" />
-            {t("dashboard:dashboard.newPrd")}
+            {m.dashboard_dashboard_newPrd()}
           </Button>
         </div>
 
         <div className="grid gap-4 sm:grid-cols-3">
           {stats.map((stat) => (
             <Card key={stat.title} className="p-5">
-              <p className="text-sm font-medium text-muted-foreground">{t(stat.title)}</p>
+              <p className="text-sm font-medium text-muted-foreground">{STAT_LABELS[stat.title]?.() ?? stat.title}</p>
               <div className={`mt-2 text-3xl font-bold ${stat.accent}`}>{stat.value}</div>
             </Card>
           ))}
@@ -214,14 +219,14 @@ export function PRDDashboard() {
         {loading ? (
           <Card className="mt-6 flex flex-col items-center gap-2 p-16 text-muted-foreground">
             <LoaderPinwheel className="size-6 animate-spin" />
-            <span>{t("common:status.loading")}</span>
+            <span>{m.common_status_loading()}</span>
           </Card>
         ) : filtered.length === 0 ? (
           <Card className="mt-6 flex flex-col items-center justify-center gap-4 p-16 text-center">
             <div>
-              <h2 className="text-lg font-medium">{t("dashboard:dashboard.noPrd")}</h2>
+              <h2 className="text-lg font-medium">{m.dashboard_dashboard_noPrd()}</h2>
               <p className="mt-1 text-sm text-muted-foreground">
-                {search.trim() ? t("dashboard:dashboard.noMatch") : t("dashboard:dashboard.noPrdHint")}
+                {search.trim() ? m.dashboard_dashboard_noMatch() : m.dashboard_dashboard_noPrdHint()}
               </p>
             </div>
           </Card>
@@ -240,7 +245,7 @@ export function PRDDashboard() {
                       variant="ghost"
                       size="icon"
                       className="relative z-10 size-7 opacity-0 group-hover:opacity-100"
-                      aria-label={t("dashboard:dashboard.deletePrd")}
+                      aria-label={m.dashboard_dashboard_deletePrd()}
                       onClick={() => setPendingDeleteId(prd.id)}
                     >
                       <Trash2 className="size-4 text-muted-foreground" />
@@ -255,12 +260,12 @@ export function PRDDashboard() {
                     </div>
                   )}
                   <p className="mt-1 line-clamp-2 min-h-10 text-sm text-muted-foreground">
-                    {prd.description?.trim() || t("dashboard:dashboard.noDescription")}
+                    {prd.description?.trim() || m.dashboard_dashboard_noDescription()}
                   </p>
                   <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
                     <span className="flex items-center gap-1">
                       <Clock className="size-3.5" />
-                      {t("dashboard:dashboard.updatedAt")} {formatRelative(prd.updatedAt, timezone, t)}
+                      {m.dashboard_dashboard_updatedAt()} {formatRelative(prd.updatedAt, timezone)}
                     </span>
                   </div>
                 </Card>
@@ -278,21 +283,21 @@ export function PRDDashboard() {
 
       <AlertDialog
         open={!!pendingDeleteId}
-        onOpenChange={(open) => {
+        onOpenChange={(open: boolean) => {
           if (!open) setPendingDeleteId(null);
         }}
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("dashboard:dashboard.confirmDeleteTitle")}</AlertDialogTitle>
+            <AlertDialogTitle>{m.dashboard_dashboard_confirmDeleteTitle()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t("dashboard:dashboard.confirmDeleteDesc")}
+              {m.dashboard_dashboard_confirmDeleteDesc()}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleting}>{t("common:button.cancel")}</AlertDialogCancel>
+            <AlertDialogCancel disabled={deleting}>{m.common_button_cancel()}</AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmDelete} disabled={deleting}>
-              {deleting ? t("common:status.deleting") : t("dashboard:dashboard.confirmDeleteTitle")}
+              {deleting ? m.common_status_deleting() : m.dashboard_dashboard_confirmDeleteTitle()}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/src/plugins/core/prd/components/prd-doc-panel.tsx

@@ -15,17 +15,15 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React from "react";
+import { m } from '@/paraglide/messages.js'
 import { lazy } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Maximize2, Minimize2,  } from "lucide-react";
 
 const NotionDocEditor = lazy(() => import("@/components/tiptap/notion-like").then(m => ({ default: m.NotionDocEditor })));
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
-
 interface PRDDocPanelProps {
   className?: string;
   content?: { html: string; markdown: string } | { text: string } | string;
@@ -39,14 +37,13 @@ interface PRDDocPanelProps {
 }
 
 export function PRDDocPanel({ className, content, onContentChange, autoSaveTime, saving, widthMode, onWidthModeChange, readOnly, onEditorReady }: PRDDocPanelProps) {
-  const { t } = useTranslation("prd");
   return (
     <div className={cn("flex flex-col h-full", className)}>
       <div className="shrink-0 flex items-center justify-between gap-1 px-4 h-10 border-b bg-muted/5">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">{t("docPanel.title")}</span>
+          <span className="text-xs font-medium text-muted-foreground">{m.docPanel_title()}</span>
           {saving ? (
-            <span className="text-[10px] text-muted-foreground/40">{t("docPanel.saving")}</span>
+            <span className="text-[10px] text-muted-foreground/40">{m.docPanel_saving()}</span>
           ) : autoSaveTime ? (
             <span className="text-[10px] text-muted-foreground/40">{autoSaveTime}</span>
           ) : null}
@@ -68,7 +65,7 @@ export function PRDDocPanel({ className, content, onContentChange, autoSaveTime,
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("docPanel.wider")}</p>
+              <p>{m.docPanel_wider()}</p>
             </TooltipContent>
           </Tooltip>
 
@@ -87,7 +84,7 @@ export function PRDDocPanel({ className, content, onContentChange, autoSaveTime,
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("docPanel.defaultWidth")}</p>
+              <p>{m.docPanel_defaultWidth()}</p>
             </TooltipContent>
           </Tooltip>
         </div>
@@ -105,7 +102,7 @@ export function PRDDocPanel({ className, content, onContentChange, autoSaveTime,
         <NotionDocEditor
           content={content}
           onChange={onContentChange}
-          placeholder={t("docPanel.placeholder")}
+          placeholder={m.docPanel_placeholder()}
           readOnly={readOnly}
           onEditorReady={onEditorReady}
           showHeader={false}