@allbluecn/web-app 0.9.4 → 0.10.0

package/src/routes/_nav/knowledge/index.lazy.tsx

@@ -16,22 +16,97 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { Plus, Lock, Calendar } from 'lucide-react'
-import { useState } from 'react'
+import { Plus, Lock, Calendar, Pin, PinOff, BookOpenText, Scale, ShieldCheck, BookMarked, Bookmark, BookCopy, MoreVertical, Trash2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { AnimatedGridPattern } from '@/components/magicui/animated-grid-pattern'
 import { BookOpenTextIcon } from '@/components/animated-icons/book-open-text'
 import { LucideIconByName } from '@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name'
 import { KnowledgeFormDialog } from '@/components/knowledge/dialog/knowledge-form-dialog'
+import { useServerFn } from '@tanstack/react-start'
+import { toggleKnowledgePinFn, deleteKnowledgeFn } from '@/server/serverFns/knowledge'
+import { m } from "@/paraglide/messages.js";
+import lawIllustration from '@/assets/illustrations/knowledge/law-card-illustration.svg?url';
 
 type KnowledgeList = ReturnType<typeof import('@/server/serverFns/knowledge')['listKnowledgeFn']> extends Promise<infer T> ? T : never
 
+const GENERAL_KBS: Array<{ id: string; name: () => import("@/paraglide/messages.js").LocalizedString; icon: React.ComponentType<{ className?: string }>; link: string; badge?: boolean }> = [
+  { id: 'law', name: m.common_nav_law, icon: Scale, link: '/knowledge/laws' },
+  { id: 'compliance', name: m.common_nav_compliance, icon: ShieldCheck, link: '/knowledge/compliance' },
+  { id: 'dictionary', name: m.common_nav_dictionary, icon: BookMarked, link: '/knowledge/dictionaries' },
+  { id: 'bookmarks', name: m.common_nav_bookmarks, icon: Bookmark, link: '/knowledge/bookmarks' },
+  { id: 'summary', name: m.common_nav_summary, icon: BookCopy, link: '/knowledge/summary', badge: true },
+]
+
+type GeneralKb = typeof GENERAL_KBS[number]
+
 function KnowledgeListPage() {
   const items = Route.useLoaderData() as KnowledgeList
-  const { t } = useTranslation('knowledge')
   const [createOpen, setCreateOpen] = useState(false)
+  const [pinState, setPinState] = useState<Record<string, boolean>>({})
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [deletingKb, setDeletingKb] = useState<(typeof items)[0] | null>(null)
+  const [deleteConfirm, setDeleteConfirm] = useState('')
+  const [deleting, setDeleting] = useState(false)
+
+  useEffect(() => {
+    const onPinChanged = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.kbId) {
+        setPinState((prev) => ({ ...prev, [detail.kbId]: detail.pinned }));
+      }
+    };
+    const onDeleted = () => {
+      window.location.href = '/knowledge';
+    };
+    window.addEventListener("knowledge-pinned", onPinChanged);
+    window.addEventListener("knowledge-deleted", onDeleted);
+    return () => {
+      window.removeEventListener("knowledge-pinned", onPinChanged);
+      window.removeEventListener("knowledge-deleted", onDeleted);
+    };
+  }, []);
+
+  const handleTogglePin = async (kbId: string, pinned: boolean) => {
+    setPinState((prev) => ({ ...prev, [kbId]: pinned }));
+    try {
+      await toggleKnowledgePinFn({ data: { kbId, pinned } });
+      window.dispatchEvent(new CustomEvent("knowledge-pinned", { detail: { kbId, pinned } }));
+    } catch {
+      setPinState((prev) => ({ ...prev, [kbId]: !pinned }));
+    }
+  };
+
+  const openDeleteDialog = (kb: (typeof items)[0]) => {
+    setDeletingKb(kb);
+    setDeleteConfirm('');
+    setDeleteOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deletingKb || deleteConfirm !== deletingKb.name) return;
+    setDeleting(true);
+    try {
+      await deleteKnowledgeFn({ data: { id: deletingKb.id } });
+      setDeleteOpen(false);
+      window.dispatchEvent(new CustomEvent("knowledge-deleted"));
+    } catch (e) {
+      console.error('Delete failed:', e instanceof Error ? e.message : String(e));
+    }
+    setDeleting(false);
+  };
 
   return (
     <div className="relative h-full overflow-y-auto overflow-x-hidden">
@@ -49,63 +124,196 @@ function KnowledgeListPage() {
       <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
         <div className="relative mb-10 mt-2 flex flex-col items-center py-10 text-center">
           <BookOpenTextIcon size={56} className="mb-4 text-primary" />
-          <h1 className="text-2xl font-semibold">{t('index.title')}</h1>
+          <h1 className="text-2xl font-semibold">{m.knowledge_index_title()}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {t('index.subtitle')}
+            {m.knowledge_index_subtitle()}
           </p>
           <Button onClick={() => setCreateOpen(true)} className="mt-6">
             <Plus className="size-4" />
-            {t('index.createKb')}
+            {m.knowledge_index_createKb()}
           </Button>
         </div>
 
+        {/* 通用知识库 */}
+        <div className="mb-8">
+          <h2 className="mb-4 text-sm font-medium text-muted-foreground">{m.knowledge_index_generalTitle()}</h2>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {GENERAL_KBS.map((kb: GeneralKb) => {
+              const Icon = kb.icon;
+              const name = kb.name();
+              const isLaw = kb.id === 'law';
+              return (
+                <Card key={kb.id} className={`group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg ${isLaw ? 'overflow-hidden' : ''}`}>
+                  <Link
+                    to={kb.link}
+                    className="absolute inset-0"
+                    aria-label={name}
+                  />
+                  {isLaw ? (
+                    <div className="relative flex gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-start justify-between">
+                          <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+                            <Icon className="size-5 text-primary" />
+                          </div>
+                        </div>
+                        <h3 className="mt-4 font-medium text-lg">{name}</h3>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          {m.knowledge_index_generalDesc()}
+                        </p>
+                      </div>
+                      <div className="shrink-0 w-24 h-24 pointer-events-none select-none dark:brightness-0 dark:invert">
+                        <img src={lawIllustration} alt="" aria-hidden="true" className="w-full h-full object-contain" />
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex-1">
+                      <div className="flex items-start justify-between">
+                        <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+                          <Icon className="size-5 text-primary" />
+                        </div>
+                        {kb.badge && (
+                          <Badge className="h-5 px-1.5 text-[10px] bg-blue-50 text-blue-700 border-blue-400 dark:bg-blue-950 dark:text-blue-300">
+                            {m.common_nav_summaryBadge()}
+                          </Badge>
+                        )}
+                      </div>
+                      <h3 className="mt-4 font-medium text-lg">{name}</h3>
+                      <p className="mt-1 text-sm text-muted-foreground">
+                        {m.knowledge_index_generalDesc()}
+                      </p>
+                    </div>
+                  )}
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 我的知识库 */}
         {items.length === 0 ? (
           <Card className="flex flex-col items-center justify-center gap-4 p-16 text-center">
             <div>
-              <h2 className="text-lg font-medium">{t('index.emptyTitle')}</h2>
+              <h2 className="text-lg font-medium">{m.knowledge_index_emptyTitle()}</h2>
               <p className="mt-1 text-sm text-muted-foreground">
-                {t('index.emptyDesc')}
+                {m.knowledge_index_emptyDesc()}
               </p>
             </div>
           </Card>
         ) : (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-20">
-            {items.map((item) => (
-              <Card key={item.id} className="group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg">
-                <Link
-                  to="/knowledge/$kbId"
-                  params={{ kbId: item.id }}
-                  className="absolute inset-0"
-                  aria-label={item.name}
-                />
-                <div className="flex-1">
-                  <div className="flex items-start justify-between">
-                    <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                      <LucideIconByName name={item.icon} size={20} />
+          <>
+            <h2 className="mb-4 text-sm font-medium text-muted-foreground">{m.knowledge_index_myTitle()}</h2>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {items.map((item) => {
+                const isPinned = pinState[item.id] ?? item.pinnedToSidebar;
+                return (
+                <Card key={item.id} className="group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg">
+                  <Link
+                    to="/knowledge/$kbId"
+                    params={{ kbId: item.id }}
+                    className="absolute inset-0"
+                    aria-label={item.name}
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-start justify-between">
+                      <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+                        <LucideIconByName name={item.icon} size={20} />
+                      </div>
+                      <Badge variant="outline" className="text-[10px]">
+                        {item.visibility === 'team' ? m.knowledge_index_team() : item.visibility === 'general' ? '通用' : m.knowledge_index_private()}
+                      </Badge>
                     </div>
+                    <h3 className="mt-4 font-medium text-lg">{item.name}</h3>
+                    <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                      {item.description || m.knowledge_index_noDescription()}
+                    </p>
                   </div>
-                  <h3 className="mt-4 font-medium text-lg">{item.name}</h3>
-                  <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                    {item.description || t('index.noDescription')}
-                  </p>
-                </div>
-                <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
-                  <span className="flex items-center gap-1">
-                    <Lock className="size-3.5" />
-                    {item.visibility === 'team' ? t('index.team') : t('index.private')}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Calendar className="size-3.5" />
-                    {new Intl.DateTimeFormat('zh-CN', { month: 'short', day: 'numeric' }).format(new Date(item.updatedAt))}
-                  </span>
-                </div>
-              </Card>
-            ))}
-          </div>
+                  <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+                    <div className="flex items-center gap-4">
+                      <span className="flex items-center gap-1">
+                        <Lock className="size-3.5" />
+                        {item.visibility === 'team' ? m.knowledge_index_team() : m.knowledge_index_private()}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3.5" />
+                        {new Intl.DateTimeFormat('zh-CN', { month: 'short', day: 'numeric' }).format(new Date(item.updatedAt))}
+                      </span>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger
+                        asChild
+                        className="relative z-10 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                      >
+                        <button aria-label={m.workspace_card_more()}>
+                          <MoreVertical className="size-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="min-w-40" onClick={(e) => e.stopPropagation()}>
+                        <DropdownMenuItem
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleTogglePin(item.id, !isPinned);
+                          }}
+                        >
+                          {isPinned ? (
+                            <PinOff className="mr-2 size-4" />
+                          ) : (
+                            <Pin className="mr-2 size-4" />
+                          )}
+                          {isPinned ? m.workspace_card_unpin() : m.workspace_card_pin()}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          onSelect={(e) => { e.preventDefault(); openDeleteDialog(item); }}
+                        >
+                          <Trash2 className="mr-2 size-4" />
+                          {m.workspace_card_delete()}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </Card>
+                );
+              })}
+            </div>
+          </>
         )}
       </div>
 
       <KnowledgeFormDialog open={createOpen} onOpenChange={setCreateOpen} />
+
+      <Dialog open={deleteOpen} onOpenChange={(open) => { setDeleteOpen(open); if (!open) setDeleteConfirm(''); }}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{m.knowledge_toolbar_deleteKb()}</DialogTitle>
+            <DialogDescription>
+              {deletingKb && m.knowledge_toolbar_deleteKbConfirm({ name: deletingKb.name })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-2">
+            <Input
+              value={deleteConfirm}
+              onChange={(e) => setDeleteConfirm(e.target.value)}
+              placeholder={m.knowledge_toolbar_deleteKbPlaceholder()}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleDelete() }}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setDeleteOpen(false); setDeleteConfirm(''); }}>
+              {m.knowledge_toolbar_cancel()}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleting || deleteConfirm !== deletingKb?.name}
+            >
+              {deleting ? m.knowledge_toolbar_deleting() : m.knowledge_toolbar_confirmDelete()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

package/src/routes/_nav/knowledge/laws/$id.lazy.tsx

@@ -17,7 +17,6 @@
 
 import { useState, Suspense } from 'react'
 import { createLazyFileRoute, Link, useNavigate } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getLegalDetailFn } from '@/server/serverFns/knowledge-public/legal/detail'
 import { shareLegalFn } from '@/server/serverFns/knowledge-public/legal/share'
@@ -35,11 +34,11 @@ import { Share2, ArrowLeft, Pencil, Trash2, Link2, Globe, Star } from 'lucide-re
 import { cn } from '@/lib/utils'
 import { toggleFavoriteFn, getFavoriteIdsFn } from '@/server/serverFns/knowledge-public/favorite'
 import { toast } from '@/components/ui/sonner'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/knowledge/laws/$id')({ component: LawDetailPage })
 
 function LawDetailPage() {
-  const { t } = useTranslation('knowledge')
   const { id } = Route.useParams()
   const navigate = useNavigate()
   const qc = useQueryClient()
@@ -59,11 +58,11 @@ function LawDetailPage() {
   async function handleDelete() {
     try {
       await deleteLegalFn({ data: { id } })
-      toast.success(t('laws.detail.deleted'))
+      toast.success(m.knowledge_laws_detail_deleted())
       qc.invalidateQueries({ queryKey: ['legal'] })
       navigate({ to: '/knowledge/laws' })
     } catch {
-      toast.error(t('laws.detail.deleteFailed'))
+      toast.error(m.knowledge_laws_detail_deleteFailed())
     }
   }
 
@@ -76,7 +75,7 @@ function LawDetailPage() {
 
   const handleToggleFavorite = async () => {
     const r = await toggleFavoriteFn({ data: { entityType: 'legal', entityId: data.id } })
-    toast.success(r.favorited ? t('laws.detail.favorited') : t('laws.detail.unfavorited'))
+    toast.success(r.favorited ? m.knowledge_laws_detail_favorited() : m.knowledge_laws_detail_unfavorited())
     qc.invalidateQueries({ queryKey: ['favorite-ids', 'legal'] })
     qc.invalidateQueries({ queryKey: ['legal'] })
   }
@@ -133,7 +132,7 @@ function LawDetailPage() {
                     <ArrowLeft className="size-8" />
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent>{t('laws.detail.backToList')}</TooltipContent>
+                <TooltipContent>{m.knowledge_laws_detail_backToList()}</TooltipContent>
               </Tooltip>
             }
             actions={
@@ -146,18 +145,18 @@ function LawDetailPage() {
                         <Star className={cn('h-4 w-4', favorited && 'fill-amber-400 text-amber-400')} />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>{favorited ? t('laws.detail.unfavorite') : t('laws.detail.favorite')}</TooltipContent>
+                    <TooltipContent>{favorited ? m.knowledge_laws_detail_unfavorite() : m.knowledge_laws_detail_favorite()}</TooltipContent>
                   </Tooltip>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Button variant="ghost" size="icon" onClick={() => {
                         navigator.clipboard.writeText(`${window.location.origin}/share/laws/${data.id}`)
-                        toast.success(t('laws.detail.linkCopied'))
+                        toast.success(m.knowledge_laws_detail_linkCopied())
                       }}>
                         <Share2 className="h-4 w-4" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>{t('laws.detail.copyShareLink')}</TooltipContent>
+                    <TooltipContent>{m.knowledge_laws_detail_copyShareLink()}</TooltipContent>
                   </Tooltip>
                 </>
               )}
@@ -172,16 +171,16 @@ function LawDetailPage() {
                           </Button>
                         </AlertDialogTrigger>
                       </TooltipTrigger>
-                      <TooltipContent>{t('laws.detail.delete')}</TooltipContent>
+                      <TooltipContent>{m.knowledge_laws_detail_delete()}</TooltipContent>
                     </Tooltip>
                     <AlertDialogContent>
                       <AlertDialogHeader>
-                        <AlertDialogTitle>{t('laws.detail.confirmDeleteTitle')}</AlertDialogTitle>
-                        <AlertDialogDescription>{t('laws.detail.confirmDeleteDesc')}</AlertDialogDescription>
+                        <AlertDialogTitle>{m.knowledge_laws_detail_confirmDeleteTitle()}</AlertDialogTitle>
+                        <AlertDialogDescription>{m.knowledge_laws_detail_confirmDeleteDesc()}</AlertDialogDescription>
                       </AlertDialogHeader>
                       <AlertDialogFooter>
-                        <AlertDialogCancel>{t('laws.detail.cancel')}</AlertDialogCancel>
-                        <AlertDialogAction onClick={handleDelete}>{t('laws.detail.delete')}</AlertDialogAction>
+                        <AlertDialogCancel>{m.knowledge_laws_detail_cancel()}</AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete}>{m.knowledge_laws_detail_delete()}</AlertDialogAction>
                       </AlertDialogFooter>
                     </AlertDialogContent>
                   </AlertDialog>
@@ -191,7 +190,7 @@ function LawDetailPage() {
                         <Pencil className="h-4 w-4" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>{t('laws.detail.edit')}</TooltipContent>
+                    <TooltipContent>{m.knowledge_laws_detail_edit()}</TooltipContent>
                   </Tooltip>
                   <DropdownMenu>
                     <Tooltip>
@@ -202,7 +201,7 @@ function LawDetailPage() {
                           </Button>
                         </DropdownMenuTrigger>
                       </TooltipTrigger>
-                      <TooltipContent>{t('laws.detail.share')}</TooltipContent>
+                      <TooltipContent>{m.knowledge_laws_detail_share()}</TooltipContent>
                     </Tooltip>
                     <DropdownMenuContent align="end" className="w-40">
                       {hasShared ? (
@@ -211,16 +210,16 @@ function LawDetailPage() {
                           setSharing(true)
                           try {
                             await unshareLegalFn({ data: { canonicalId: data.canonicalId } })
-                            toast.success(t('laws.detail.unshared'))
+                            toast.success(m.knowledge_laws_detail_unshared())
                             qc.invalidateQueries({ queryKey: ['legal-detail', id] })
                           } catch (e) {
-                            toast.error(e instanceof Error ? e.message : t('laws.detail.unshareFailed'))
+                            toast.error(e instanceof Error ? e.message : m.knowledge_laws_detail_unshareFailed())
                           } finally {
                             setSharing(false)
                           }
                         }}>
                           <Globe className="mr-2 h-4 w-4" />
-                          {t('laws.detail.unshare')}
+                          {m.knowledge_laws_detail_unshare()}
                         </DropdownMenuItem>
                       ) : (
                         <DropdownMenuItem onClick={async () => {
@@ -230,22 +229,22 @@ function LawDetailPage() {
                             toast.success(r.message)
                             qc.invalidateQueries({ queryKey: ['legal-detail', id] })
                           } catch (e) {
-                            toast.error(e instanceof Error ? e.message : t('laws.detail.shareFailed'))
+                            toast.error(e instanceof Error ? e.message : m.knowledge_laws_detail_shareFailed())
                           } finally {
                             setSharing(false)
                           }
                         }}>
                           <Globe className="mr-2 h-4 w-4" />
-                          {t('laws.detail.sharePublic')}
+                          {m.knowledge_laws_detail_sharePublic()}
                         </DropdownMenuItem>
                       )}
                       <DropdownMenuItem onClick={() => {
                         const shareUrl = `${window.location.origin}/share/laws/${data.id}`
                         navigator.clipboard.writeText(shareUrl)
-                        toast.success(t('laws.detail.linkCopied'))
+                        toast.success(m.knowledge_laws_detail_linkCopied())
                       }}>
                         <Link2 className="mr-2 h-4 w-4" />
-                        {t('laws.detail.copyLink')}
+                        {m.knowledge_laws_detail_copyLink()}
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>

package/src/routes/_nav/knowledge/laws/index.lazy.tsx

@@ -18,7 +18,6 @@
 import { cn } from "@/lib/utils"
 import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useQuery, keepPreviousData } from '@tanstack/react-query'
 import { listLegalFn } from '@/server/serverFns/knowledge-public/legal/list'
 import { createLegalFn } from '@/server/serverFns/knowledge-public/legal/create'
@@ -31,23 +30,23 @@ import { TagFilter } from '@/components/knowledge-public/tag-filter'
 import { chipClass } from '@/components/knowledge-public/chip-utils'
 import { FlickeringGrid } from '@/components/magicui/flickering-grid'
 import { AuroraText } from '@/components/magicui/aurora-text'
+import { m } from "@/paraglide/messages.js";
 
-function buildJurisdictionOptions(t: any) {
+function buildJurisdictionOptions() {
   return [
-    { value: 'CN_NATIONAL', label: t('legalEditor.jurisdiction.CN_NATIONAL') },
-    { value: 'CN_LOCAL', label: t('legalEditor.jurisdiction.CN_LOCAL') },
-    { value: 'OVERSEAS', label: t('legalEditor.jurisdiction.OVERSEAS') },
+    { value: 'CN_NATIONAL', label: m.knowledge_legalEditor_jurisdiction_CN_NATIONAL() },
+    { value: 'CN_LOCAL', label: m.knowledge_legalEditor_jurisdiction_CN_LOCAL() },
+    { value: 'OVERSEAS', label: m.knowledge_legalEditor_jurisdiction_OVERSEAS() },
   ]
 }
 
 export const Route = createLazyFileRoute('/_nav/knowledge/laws/')({ component: LawPage })
 
 function LawPage() {
-  const { t } = useTranslation('knowledge')
   const navigate = useNavigate()
-  const jurisdictionOptions = buildJurisdictionOptions(t)
+  const jurisdictionOptions = buildJurisdictionOptions()
   const jurisdictionGroups = [
-    { key: 'jurisdiction', label: t('laws.index.jurisdiction'), options: jurisdictionOptions },
+    { key: 'jurisdiction', label: m.knowledge_laws_index_jurisdiction(), options: jurisdictionOptions },
   ]
   const [scope, setScope] = useState<'all' | 'private' | 'share' | 'favorite'>('all')
   const [search, setSearch] = useState('')
@@ -71,19 +70,19 @@ function LawPage() {
       </div>
       <div className="relative z-10 flex h-full flex-col gap-4 p-4">
         <h1 className="text-center text-[46px] font-semibold mt-10">
-          {t('laws.index.titleA')}
+          {m.knowledge_laws_index_titleA()}
           <AuroraText colors={["#0F3574", "#165DFF", "#408CFF", "#72A9FF"]}>
-            {t('laws.index.titleB')}
+            {m.knowledge_laws_index_titleB()}
           </AuroraText>
         </h1>
         <KnowledgeSearchBar
           search={search}
           onSearchChange={setSearch}
           onCreate={async () => {
-            const r = await createLegalFn({ data: { title: t('laws.index.untitled'), jurisdiction: '', category: '', tags: [] } })
+            const r = await createLegalFn({ data: { title: m.knowledge_laws_index_untitled(), jurisdiction: '', category: '', tags: [] } })
             navigate({ to: '/knowledge/laws/edit/$id', params: { id: r.id } })
           }}
-          createLabel={t('laws.index.add')}
+          createLabel={m.knowledge_laws_index_add()}
         />
         <KnowledgeFilters
           scope={scope}
@@ -94,9 +93,9 @@ function LawPage() {
         />
         <TagFilter tags={tagList ?? []} activeTag={tag} onChange={setTag} />
         <div className="mx-auto flex w-full max-w-2xl flex-wrap items-center gap-2.5">
-          <span className="text-sm font-medium text-muted-foreground mr-4">{t('laws.index.sort')}</span>
-          <button type="button" onClick={() => setSort('default')} className={chipClass(sort === 'default')}>{t('laws.index.sortDefault')}</button>
-          <button type="button" onClick={() => setSort(sort === 'effectiveDate' ? 'default' : 'effectiveDate')} className={chipClass(sort === 'effectiveDate')}>{t('laws.index.sortEffectiveDate')}</button>
+          <span className="text-sm font-medium text-muted-foreground mr-4">{m.knowledge_laws_index_sort()}</span>
+          <button type="button" onClick={() => setSort('default')} className={chipClass(sort === 'default')}>{m.knowledge_laws_index_sortDefault()}</button>
+          <button type="button" onClick={() => setSort(sort === 'effectiveDate' ? 'default' : 'effectiveDate')} className={chipClass(sort === 'effectiveDate')}>{m.knowledge_laws_index_sortEffectiveDate()}</button>
         </div>
         <div className="mx-auto w-full max-w-2xl flex-1 overflow-auto mt-4">
           {data?.items.length ? (