@allbluecn/web-app 0.9.4 → 0.10.0

package/src/plugins/core/prd/components/prd-share-panel/constants.ts

@@ -15,8 +15,10 @@
 // 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 { m } from "@/paraglide/messages.js";
+
 export const EXPIRY_OPTIONS = [
-  { value: "7", labelKey: "sharePanel.expiry7" },
-  { value: "30", labelKey: "sharePanel.expiry30" },
-  { value: "90", labelKey: "sharePanel.expiry90" },
+  { value: "7", label: m.sharePanel_expiry7 },
+  { value: "30", label: m.sharePanel_expiry30 },
+  { value: "90", label: m.sharePanel_expiry90 },
 ];

package/src/plugins/core/prd/components/prd-share-panel.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, useEffect, useCallback, useMemo } 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 { Input } from "@/components/ui/input";
@@ -48,7 +47,6 @@ import { sortByVersionDesc } from "./prd-share-panel/utils";
 import { SingleVersionShareCard } from "./prd-share-panel/components/single-version-share-card";
 
 export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
-  const { t } = useTranslation("prd");
   const [versions, setVersions] = useState<any[]>([]);
   const [enabled, setEnabled] = useState(false);
   const [selectedVersionIds, setSelectedVersionIds] = useState<Set<string>>(new Set());
@@ -125,21 +123,21 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
       const data = await togglePrdSharePasswordFn({ data: { prdId, enabled: v } });
       setEnablePassword(data.hasPassword);
       if (data.password) setPassword(data.password);
-      toast.success(v ? t("sharePanel.passwordEnabled") : t("sharePanel.passwordDisabled"));
+      toast.success(v ? m.sharePanel_passwordEnabled() : m.sharePanel_passwordDisabled());
     } catch {
-      toast.error(v ? t("sharePanel.enablePasswordFailed") : t("sharePanel.disablePasswordFailed"));
+      toast.error(v ? m.sharePanel_enablePasswordFailed() : m.sharePanel_disablePasswordFailed());
     }
-  }, [prdId, t]);
+  }, [prdId]);
 
   const generateNewPassword = useCallback(async () => {
     try {
       const data = await setPrdSharePasswordFn({ data: { prdId } });
       setPassword(data.password);
-      toast.success(t("sharePanel.passwordUpdated"));
+      toast.success(m.sharePanel_passwordUpdated());
     } catch {
-      toast.error(t("sharePanel.passwordGenerateFailed"));
+      toast.error(m.sharePanel_passwordGenerateFailed());
     }
-  }, [prdId, t]);
+  }, [prdId]);
 
   const latestUpdatedVersionId = useMemo(() => {
     if (!versions.length) return null;
@@ -168,33 +166,33 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
     try {
       await createPrdShareFn({ data: { prdId, enabled: newEnabled } });
       setEnabled(newEnabled);
-      toast.success(newEnabled ? t("sharePanel.shareEnabled") : t("sharePanel.shareDisabled"));
+      toast.success(newEnabled ? m.sharePanel_shareEnabled() : m.sharePanel_shareDisabled());
     } catch {
-      toast.error(newEnabled ? t("sharePanel.enableShareFailed") : t("sharePanel.disableShareFailed"));
+      toast.error(newEnabled ? m.sharePanel_enableShareFailed() : m.sharePanel_disableShareFailed());
     } finally {
       setSaving(false);
     }
-  }, [prdId, t]);
+  }, [prdId]);
 
   const handleCopy = useCallback(async () => {
     const separator = shareLink.includes('?') ? '&' : '?';
     let text = `${shareLink}${separator}from=copylink`;
     if (copyPasswordOnShare && enablePassword && password) {
-      text = `${text}\n${t("sharePanel.passwordLabel")}: ${password}`;
+      text = `${text}\n${m.sharePanel_passwordLabel()}: ${password}`;
     }
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
       if (enablePassword && password) {
-        toast.success(t("sharePanel.copiedWithPassword", { password }), { duration: 5000 });
+        toast.success(m.sharePanel_copiedWithPassword({ password }), { duration: 5000 });
       } else {
-        toast.success(t("sharePanel.copied"));
+        toast.success(m.sharePanel_copied());
       }
     } catch {
-      toast.error(t("sharePanel.copyFailed"));
+      toast.error(m.sharePanel_copyFailed());
     }
-  }, [shareLink, enablePassword, password, copyPasswordOnShare, t]);
+  }, [shareLink, enablePassword, password, copyPasswordOnShare]);
 
   const handleSave = useCallback(async () => {
     if (!enabled) return;
@@ -208,13 +206,13 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
         },
       });
       setSavedVersionIds(new Set(selectedVersionIds));
-      toast.success(t("sharePanel.versionSelectionSaved"));
+      toast.success(m.sharePanel_versionSelectionSaved());
     } catch {
-      toast.error(t("sharePanel.saveSelectionFailed"));
+      toast.error(m.sharePanel_saveSelectionFailed());
     } finally {
       setSaving(false);
     }
-  }, [prdId, enabled, selectedVersionIds, expiryDays, t]);
+  }, [prdId, enabled, selectedVersionIds, expiryDays]);
 
   const allSelected = versions.length > 0 && versions.every((v: any) => selectedVersionIds.has(v.id));
 
@@ -262,13 +260,13 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           }));
       setSingleVersionShareLinks(formattedShares.sort(sortByVersionDesc));
 
-      toast.success(t("sharePanel.singleShareEnabled"));
+      toast.success(m.sharePanel_singleShareEnabled());
     } catch {
-      toast.error(t("sharePanel.singleShareFailed"));
+      toast.error(m.sharePanel_singleShareFailed());
     } finally {
       setSingleVersionSaving(false);
     }
-  }, [prdId, selectedVersionIds, versions, enablePassword, password, expiryDays, t]);
+  }, [prdId, selectedVersionIds, versions, enablePassword, password, expiryDays]);
 
   const handleSingleVersionToggle = useCallback(async (shareId: string, enabled: boolean) => {
     try {
@@ -280,11 +278,11 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           share.id === shareId ? { ...share, enabled } : share
         )
       );
-      toast.success(enabled ? t("sharePanel.shareEnabled") : t("sharePanel.shareDisabled"));
+      toast.success(enabled ? m.sharePanel_shareEnabled() : m.sharePanel_shareDisabled());
     } catch {
-      toast.error(t("sharePanel.operationFailed"));
+      toast.error(m.sharePanel_operationFailed());
     }
-  }, [t]);
+  }, []);
 
   const handleSingleVersionPasswordReset = useCallback(async (shareId: string) => {
     try {
@@ -296,11 +294,11 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           share.id === shareId ? { ...share, password: data.password } : share
         )
       );
-      toast.success(t("sharePanel.passwordReset"));
+      toast.success(m.sharePanel_passwordReset());
     } catch {
-      toast.error(t("sharePanel.resetPasswordFailed"));
+      toast.error(m.sharePanel_resetPasswordFailed());
     }
-  }, [t]);
+  }, []);
 
   const handleSingleVersionExpiryUpdate = useCallback(async (shareId: string, expiryDays: string) => {
     try {
@@ -318,11 +316,11 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           share.id === shareId ? { ...share, expiresAt } : share
         )
       );
-      toast.success(t("sharePanel.expiryUpdated"));
+      toast.success(m.sharePanel_expiryUpdated());
     } catch {
-      toast.error(t("sharePanel.updateExpiryFailed"));
+      toast.error(m.sharePanel_updateExpiryFailed());
     }
-  }, [t]);
+  }, []);
 
   const handleSingleVersionPasswordToggle = useCallback(async (shareId: string, enabled: boolean) => {
     try {
@@ -338,22 +336,22 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           } : share
         )
       );
-      toast.success(enabled ? t("sharePanel.passwordEnabled") : t("sharePanel.passwordDisabled"));
+      toast.success(enabled ? m.sharePanel_passwordEnabled() : m.sharePanel_passwordDisabled());
     } catch {
-      toast.error(t("sharePanel.operationFailed"));
+      toast.error(m.sharePanel_operationFailed());
     }
-  }, [t]);
+  }, []);
 
   const handleCopySingleVersionLink = useCallback(async (link: string) => {
     try {
       const separator = link.includes('?') ? '&' : '?';
       const result = `${link}${separator}from=copylink`;
       await navigator.clipboard.writeText(result);
-      toast.success(t("sharePanel.copied"));
+      toast.success(m.sharePanel_copied());
     } catch {
-      toast.error(t("sharePanel.copyFailed"));
+      toast.error(m.sharePanel_copyFailed());
     }
-  }, [t]);
+  }, []);
 
   const handleDeleteSingleVersion = useCallback(async (shareId: string) => {
     try {
@@ -361,11 +359,11 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
 
       // 移除本地状态
       setSingleVersionShareLinks(prev => prev.filter(share => share.id !== shareId));
-      toast.success(t("sharePanel.singleShareDeleted"));
+      toast.success(m.sharePanel_singleShareDeleted());
     } catch {
-      toast.error(t("sharePanel.deleteFailed"));
+      toast.error(m.sharePanel_deleteFailed());
     }
-  }, [t]);
+  }, []);
 
   // 根据过期时间计算有效期天数
   const getExpiryDaysValue = useCallback((expiresAt: string | Date | null) => {
@@ -382,13 +380,13 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
     <div className="flex gap-4 min-w-0 overflow-x-hidden">
       <div className="w-2/5 flex flex-col min-h-0 min-w-0">
         <div className="flex items-center justify-between mb-2">
-          <Label className="text-sm font-medium">{t("sharePanel.versionSelection")}</Label>
+          <Label className="text-sm font-medium">{m.sharePanel_versionSelection()}</Label>
           <div className="flex items-center gap-1">
             <Button variant="ghost" size="sm" className="h-6 text-xs px-2 text-muted-foreground" onClick={handleSelectAll}>
-              {allSelected ? t("sharePanel.deselectAll") : t("sharePanel.selectAll")}
+              {allSelected ? m.sharePanel_deselectAll() : m.sharePanel_selectAll()}
             </Button>
             <Button variant="ghost" size="sm" className="h-6 text-xs px-2 text-muted-foreground" onClick={handleRestoreSaved}>
-              {t("sharePanel.restoreSaved")}
+              {m.sharePanel_restoreSaved()}
             </Button>
           </div>
         </div>
@@ -398,7 +396,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
         )}>
           <div className="flex-1 overflow-y-auto space-y-1 p-2">
             {versions.length === 0 ? (
-              <p className="text-sm text-muted-foreground text-center py-3">{t("sharePanel.noVersions")}</p>
+              <p className="text-sm text-muted-foreground text-center py-3">{m.sharePanel_noVersions()}</p>
             ) : (
               versions.map((v: any) => (
                 <label
@@ -412,7 +410,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
                   <span className="flex items-center gap-1.5">
                     {v.versionLabel}
                     {v.id === latestUpdatedVersionId && (
-                      <Badge variant="secondary" className="text-[10px] h-4 px-1.5 leading-none font-normal">{t("sharePanel.recentlyUpdated")}</Badge>
+                      <Badge variant="secondary" className="text-[10px] h-4 px-1.5 leading-none font-normal">{m.sharePanel_recentlyUpdated()}</Badge>
                     )}
                   </span>
                 </label>
@@ -425,7 +423,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
               onClick={handleSave}
               disabled={saving || !enabled || selectedVersionIds.size === 0}
             >
-              {saving ? t("sharePanel.saving") : t("sharePanel.saveSelection")}
+              {saving ? m.sharePanel_saving() : m.sharePanel_saveSelection()}
             </Button>
           </div>
         </div>
@@ -433,26 +431,26 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
 
       <div className="flex-1 space-y-4 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden">
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">{t("sharePanel.enableShare")}</span>
+          <span className="text-sm font-medium">{m.sharePanel_enableShare()}</span>
           <Switch checked={enabled} onCheckedChange={handleToggle} />
         </div>
 
         <div className={cn("space-y-4", !enabled && "opacity-50 pointer-events-none")}>
           <div className="space-y-2">
-            <Label className="text-sm text-muted-foreground">{t("sharePanel.shareLink")}</Label>
+            <Label className="text-sm text-muted-foreground">{m.sharePanel_shareLink()}</Label>
             <Input value={shareLink} readOnly className="h-9 text-xs flex-1 font-mono w-full max-w-full" />
           </div>
 
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <Label className="text-sm text-muted-foreground">{t("sharePanel.enablePassword")}
+              <Label className="text-sm text-muted-foreground">{m.sharePanel_enablePassword()}
                 <div className={cn("inline-flex items-center gap-2 ml-2", !enablePassword && "opacity-50 pointer-events-none")}>
                   <Checkbox
                     id="copy-password-on-share"
                     checked={copyPasswordOnShare}
                     onCheckedChange={(v) => setCopyPasswordOnShare(v === true)}
                   />
-                  <Label htmlFor="copy-password-on-share" className="text-sm cursor-pointer">{t("sharePanel.copyPasswordOnShare")}</Label>
+                  <Label htmlFor="copy-password-on-share" className="text-sm cursor-pointer">{m.sharePanel_copyPasswordOnShare()}</Label>
                 </div>
               </Label>
 
@@ -472,12 +470,12 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
                 />
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button variant="outline" className="h-9 w-9 p-0" onClick={() => { navigator.clipboard.writeText(password); toast.success(t("sharePanel.passwordCopied")); }}>
+                    <Button variant="outline" className="h-9 w-9 p-0" onClick={() => { navigator.clipboard.writeText(password); toast.success(m.sharePanel_passwordCopied()); }}>
                       <Copy className="size-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p className="text-xs">{t("sharePanel.copyPassword")}</p>
+                    <p className="text-xs">{m.sharePanel_copyPassword()}</p>
                   </TooltipContent>
                 </Tooltip>
                 <Tooltip>
@@ -487,7 +485,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p className="text-xs">{t("sharePanel.generateRandomPassword")}</p>
+                    <p className="text-xs">{m.sharePanel_generateRandomPassword()}</p>
                   </TooltipContent>
                 </Tooltip>
               </div>
@@ -495,7 +493,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
           </div>
 
           <div className="flex items-center justify-between">
-            <Label className="text-sm text-muted-foreground">{t("sharePanel.expiry")}</Label>
+            <Label className="text-sm text-muted-foreground">{m.sharePanel_expiry()}</Label>
             <Select value={expiryDays} onValueChange={setExpiryDays}>
               <SelectTrigger className="h-9 w-28">
                 <SelectValue />
@@ -503,7 +501,7 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
               <SelectContent>
                 {EXPIRY_OPTIONS.map((opt) => (
                   <SelectItem key={opt.value} value={opt.value}>
-                    {t(opt.labelKey)}
+                    {opt.label()}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -520,26 +518,26 @@ export function PRDSharePanel({ prdId, onClose }: PRDSharePanelProps) {
                     onClick={handleSingleVersionShare}
                     disabled={selectedVersionIds.size !== 1 || singleVersionSaving}
                   >
-                    {singleVersionSaving ? t("sharePanel.creating") : t("sharePanel.singleShare")}
+                    {singleVersionSaving ? m.sharePanel_creating() : m.sharePanel_singleShare()}
                   </Button>
                 </span>
               </TooltipTrigger>
               {selectedVersionIds.size !== 1 && (
                 <TooltipContent>
-                  <p className="text-xs">{t("sharePanel.singleShareHint")}</p>
+                  <p className="text-xs">{m.sharePanel_singleShareHint()}</p>
                 </TooltipContent>
               )}
             </Tooltip>
             <Button className="h-9 gap-1.5" onClick={handleCopy}>
               {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
-              {copied ? t("sharePanel.copied") : t("sharePanel.copyDocLink")}
+              {copied ? m.sharePanel_copied() : m.sharePanel_copyDocLink()}
             </Button>
           </div>
 
           {/* 单独版本分享记录 */}
           {singleVersionShareLinks.length > 0 && (
             <div className="mt-6 border-t pt-4">
-              <Label className="text-sm font-medium mb-3 block">{t("sharePanel.singleShareRecords", { count: singleVersionShareLinks.length })}</Label>
+              <Label className="text-sm font-medium mb-3 block">{m.sharePanel_singleShareRecords({ count: singleVersionShareLinks.length })}</Label>
               <div className={cn(
                 "space-y-3",
                 singleVersionShareLinks.length > 3 && "max-h-90 overflow-y-auto pr-2"

package/src/plugins/core/prd/components/prd-tree-page-tab.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 React, { useState, useCallback, useEffect, useRef, useMemo, useReducer } from "react";
-import { useTranslation } from "react-i18next";
 import { Folder, File, FolderPlus, Plus, Search, ChevronRight } from "lucide-react";
 import {
   editReducer,
@@ -50,6 +48,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buildTree, TreeNode, PRDPage } from "@/lib/prd-tree-utils";
 import { listPrdPagesFn, createPrdPageFn, updatePrdPageFn, deletePrdPageFn } from "../serverFns/pages";
+import { m } from "@/paraglide/messages.js";
 
 interface PRDPageTabProps {
   prdId: string;
@@ -58,7 +57,6 @@ interface PRDPageTabProps {
 }
 
 export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProps) {
-  const { t } = useTranslation(["prd", "common"]);
   const [pages, setPages] = useState<PRDPage[]>([]);
   const [tree, setTree] = useState<TreeNode[]>([]);
   const [editState, editDispatch] = useReducer(editReducer, initialEditState);
@@ -134,7 +132,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
         const pages = data as PRDPage[];
         if (pages.length === 0 && !homeCreated.current) {
           homeCreated.current = true;
-          createPrdPageFn({ data: { prdId, name: t("treePage.homeName"), type: "page" } }).then(() => refreshPages());
+          createPrdPageFn({ data: { prdId, name: m.prd_treePage_homeName(), type: "page" } }).then(() => refreshPages());
           return;
         }
         setPages(pages);
@@ -164,7 +162,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
   }, [refreshPages]);
 
   const duplicateNode = useCallback(async (node: TreeNode) => {
-    await createPrdPageFn({ data: { prdId, name: node.name + t("treePage.duplicateSuffix"), type: node.type, parentId: node.parentId } });
+    await createPrdPageFn({ data: { prdId, name: node.name + m.prd_treePage_duplicateSuffix(), type: node.type, parentId: node.parentId } });
     refreshPages();
   }, [prdId, refreshPages]);
 
@@ -213,7 +211,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
 
   const handleCreateConfirm = useCallback(async () => {
     if (!createState.creatingType) return;
-    const name = createState.creatingName.trim() || (createState.creatingType === "folder" ? t("treePage.unnamedFolder") : t("treePage.unnamed"));
+    const name = createState.creatingName.trim() || (createState.creatingType === "folder" ? m.prd_treePage_unnamedFolder() : m.prd_treePage_unnamed());
     try {
       await createPrdPageFn({ data: { prdId, name, type: createState.creatingType } });
       refreshPages();
@@ -422,27 +420,27 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
                    ref={editingRef}
                    className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
                    value={editState.editValue}
-                   aria-label={t("treePage.pageName")}
+                   aria-label={m.treePage_pageName()}
                    onChange={e => editDispatch({ type: "SET_EDIT_VALUE", value: e.target.value })}
                    onKeyDown={e => {
                      if (e.key === "Enter") confirmEdit(node.id, editState.editValue);
                      if (e.key === "Escape") editDispatch({ type: "CANCEL_EDIT" });
                    }}
                    onBlur={() => confirmEdit(node.id, editState.editValue)}
-                  placeholder={node.type === "folder" ? t("treePage.folderName") : t("treePage.pageName")}
+                  placeholder={node.type === "folder" ? m.treePage_folderName() : m.treePage_pageName()}
                 />
               ) : (
-                <span className="flex-1 truncate text-xs">{node.name || t("treePage.unnamed")}</span>
+                <span className="flex-1 truncate text-xs">{node.name || m.prd_treePage_unnamed()}</span>
               )}
             </div>
           </ContextMenuTrigger>
           <ContextMenuContent className="min-w-36 space-y-1.5">
             <ContextMenuItem onClick={() => editDispatch({ type: "START_EDIT", id: node.id, name: node.name })}>
-              {t("treePage.rename")}
+              {m.treePage_rename()}
               {/* <ContextMenuShortcut className="text-xs">Ctrl+Shift+R</ContextMenuShortcut> */}
             </ContextMenuItem>
             <ContextMenuItem onClick={() => duplicateNode(node)}>
-              {t("treePage.duplicate")}
+              {m.treePage_duplicate()}
             </ContextMenuItem>
             {/* <ContextMenuItem onClick={() => {
               const targetName = window.prompt("输入目标页面/文件夹名称");
@@ -461,7 +459,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
             </ContextMenuItem> */}
             <ContextMenuSeparator />
             <ContextMenuItem onClick={() => setDeleteConfirmId(node.id)} className="text-destructive">
-              {t("treePage.delete")}
+              {m.treePage_delete()}
             </ContextMenuItem>
           </ContextMenuContent>
         </ContextMenu>
@@ -479,14 +477,14 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
       <AlertDialog open={!!deleteConfirmId} onOpenChange={(v) => { if (!v) setDeleteConfirmId(null); }}>
         <AlertDialogContent className="border border-border">
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("treePage.confirmDelete")}</AlertDialogTitle>
+            <AlertDialogTitle>{m.treePage_confirmDelete()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t("treePage.deleteConfirmDesc", { name: deleteTarget?.name || t("treePage.unnamed") })}
+              {m.treePage_deleteConfirmDesc({ name: deleteTarget?.name || m.prd_treePage_unnamed() })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => setDeleteConfirmId(null)}>{t("common:button.cancel")}</AlertDialogCancel>
-            <AlertDialogAction variant="destructive" onClick={() => deleteConfirmId && deleteNode(deleteConfirmId)}>{t("treePage.delete")}</AlertDialogAction>
+            <AlertDialogCancel onClick={() => setDeleteConfirmId(null)}>{m.common_button_cancel()}</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={() => deleteConfirmId && deleteNode(deleteConfirmId)}>{m.treePage_delete()}</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -497,7 +495,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
             <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground/40" />
             <Input
               className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30"
-              placeholder={t("treePage.searchPlaceholder")}
+              placeholder={m.treePage_searchPlaceholder()}
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
             />
@@ -512,7 +510,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("treePage.newFolder")}</p>
+              <p>{m.treePage_newFolder()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
@@ -525,7 +523,7 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("treePage.newPage")}</p>
+              <p>{m.treePage_newPage()}</p>
             </TooltipContent>
           </Tooltip>
         </div>
@@ -549,20 +547,20 @@ export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProp
                 ref={creatingRef}
                 className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
                 value={createState.creatingName}
-                aria-label={t("treePage.pageName")}
+                aria-label={m.treePage_pageName()}
                 onChange={e => createDispatch({ type: "SET_CREATING_NAME", value: e.target.value })}
                 onKeyDown={e => {
                   if (e.key === "Enter") handleCreateConfirm();
                   if (e.key === "Escape") handleCreateCancel();
                 }}
                 onBlur={handleCreateConfirm}
-                placeholder={createState.creatingType === "folder" ? t("treePage.folderName") : t("treePage.pageName")}
+                placeholder={createState.creatingType === "folder" ? m.treePage_folderName() : m.treePage_pageName()}
               />
             </div>
           )}
           {filteredTree.length === 0 && !createState.creatingType && (
             <div className="px-3 py-4 text-xs text-muted-foreground text-center">
-              {searchQuery ? t("treePage.noMatch") : t("treePage.noPages")}
+              {searchQuery ? m.treePage_noMatch() : m.treePage_noPages()}
             </div>
           )}
         </div>

package/src/plugins/core/prd/components/prototype/PrototypeCanvas.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, useCallback, useMemo, useRef, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import {
   DragDropProvider,
   DragOverlay,
@@ -60,7 +59,6 @@ interface SelectBox {
 }
 
 export function PrototypeCanvas({ elements, onElementsChange, device, className, onComponentSelect, onAnnotate }: PrototypeCanvasProps) {
-  const { t } = useTranslation("prd");
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [draggingElement, setDraggingElement] = useState<CanvasElement | null>(null);
   const [selectBox, setSelectBox] = useState<SelectBox | null>(null);
@@ -348,7 +346,7 @@ export function PrototypeCanvas({ elements, onElementsChange, device, className,
                   <Skeleton className="h-5 w-[70%] mx-auto rounded-md opacity-40" />
                   <Skeleton className="h-5 w-[85%] mx-auto rounded-md opacity-40" />
                   <div className="pt-5 text-center">
-                    <p className="text-sm text-muted-foreground">{t("canvas.emptyHint")}</p>
+                    <p className="text-sm text-muted-foreground">{m.canvas_emptyHint()}</p>
                   </div>
                 </div>
               </div>

package/src/plugins/core/prd/components/prototype/PrototypeElement.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, { useCallback, useRef, useState, useLayoutEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { useDraggable } from "@dnd-kit/react";
 import { MessageSquareQuote } from "lucide-react";
 import { CanvasElement, type ResizeDirection } from "@allbluecn/kernel";
@@ -45,7 +44,6 @@ export function PrototypeElement({
   onAnnotate,
   groupDragDelta,
 }: PrototypeElementProps) {
-  const { t } = useTranslation("prd");
   const config = getComponent(element.type);
   // 未注册类型兜底为 GenericPrototype，避免画布上空白不可见
   const Component = config?.component ?? GenericPrototype;
@@ -149,7 +147,7 @@ export function PrototypeElement({
             className="flex items-center gap-1 px-1.5 py-1 min-w-14 rounded text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
           >
             <MessageSquareQuote className="size-3.5" />
-            <span>{t("element.annotate")}</span>
+            <span>{m.element_annotate()}</span>
           </button>
         </div>
       )}
@@ -160,7 +158,7 @@ export function PrototypeElement({
           className="absolute -top-6 left-0 px-1.5 py-0.5 bg-muted text-[10px] text-muted-foreground font-mono rounded max-w-60 truncate z-20 pointer-events-none"
           contentEditable={false}
         >
-          {t("element.componentId", { id: element.id })}
+          {m.element_componentId({ id: element.id })}
         </div>
       )}
     </div>

package/src/plugins/core/prd/components/prototype/ResizeHandles.tsx

@@ -15,7 +15,6 @@
 // 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, { useCallback } from "react";
 import type { ResizeDirection } from "@allbluecn/kernel";