@allbluecn/admin-app 0.2.0 → 0.2.1

package/src/components/auth/admin-login-form.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { LogOut, User, Mail, Users, BarChart3, Shield, Settings, ArrowRight, ArrowLeft, Target } from "lucide-react";
+import { m } from '@/paraglide/messages.js'
 import { useState } from "react";
-import { useTranslation } from 'react-i18next'
 import { signIn, signOut } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -61,7 +61,6 @@ function maskEmail(email: string): string {
 }
 
 export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
-  const { t } = useTranslation('common')
   const [password, setPassword] = useState("");
   const [email, setEmail] = useState("");
   const [stayLoggedIn, setStayLoggedIn] = useState(false);
@@ -71,15 +70,15 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
     e.preventDefault();
 
     if (!isAdmin && !email) {
-      toast.error(t('login.error.enterEmail'));
+      toast.error(m.common_login_error_enterEmail());
       return;
     }
     if (!isAdmin && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)) {
-      toast.error(t('login.error.validEmail'));
+      toast.error(m.common_login_error_validEmail());
       return;
     }
     if (!password) {
-      toast.error(t('login.error.enterPassword'));
+      toast.error(m.common_login_error_enterPassword());
       return;
     }
 
@@ -99,7 +98,7 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
       // form.submit() 已触发导航，以下代码在页面卸载前执行
       // 若 csrf fetch 失败会抛错进入 catch
     } catch {
-      toast.error(t('login.error.invalidCredentials'));
+      toast.error(m.common_login_error_invalidCredentials());
       setLoading(false);
     }
   }
@@ -122,7 +121,7 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
             <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-lg bg-primary">
               <Target className="h-10 w-10 text-primary-foreground" />
             </div>
-            <h1 className="text-3xl font-semibold">{t('login.adminPanel')}</h1>
+            <h1 className="text-3xl font-semibold">{m.common_login_adminPanel()}</h1>
             <Card className="h-16 w-full bg-muted/50 border">
               <CardContent className="flex h-full items-center gap-3 px-3 py-3">
                 <UserAvatar
@@ -133,30 +132,30 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
                   size="lg"
                 />
                 <div className="min-w-0 text-left">
-                  <p className="truncate text-base font-medium">{user?.name || user?.email || t('login.admin')}</p>
+                  <p className="truncate text-base font-medium">{user?.name || user?.email || m.common_login_admin()}</p>
                   <p className="truncate text-xm text-muted-foreground">{maskEmail(user?.email || "")}</p>
                 </div>
               </CardContent>
             </Card>
           </div>
           <form onSubmit={handleLogin} className="space-y-6">
-            <PasswordInput label={t('login.password.label')} placeholder={t('login.password.placeholder')} value={password} onChange={(e) => setPassword(e.target.value)} />
+            <PasswordInput label={m.common_login_password_label()} placeholder={m.common_login_password_placeholder()} value={password} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} />
             <Field orientation="horizontal" className="gap-2">
               <FieldLabel>
-                <Checkbox checked={stayLoggedIn} onCheckedChange={(v) => setStayLoggedIn(v === true)} />
-                <span className="text-sm">{t('login.rememberMe')}</span>
+                <Checkbox checked={stayLoggedIn} onCheckedChange={(v: boolean) => setStayLoggedIn(v === true)} />
+                <span className="text-sm">{m.common_login_rememberMe()}</span>
               </FieldLabel>
             </Field>
             <RainbowButton type="submit" className="w-full" disabled={loading}>
-              {loading ? t('login.loading') : t('login.loginAdmin')}
+              {loading ? m.common_login_loading() : m.common_login_loginAdmin()}
               <ArrowRight className="ml-2 h-4 w-4" />
             </RainbowButton>
             <div className="flex gap-2">
               <Button type="button" variant="outline" className="flex-1" onClick={handleSwitchAccount}>
-                <Users className="w-4 h-4 mr-2" />{t('login.switchAccount')}
+                <Users className="w-4 h-4 mr-2" />{m.common_login_switchAccount()}
               </Button>
               <Button type="button" variant="outline" className="flex-1" onClick={handleLogout}>
-                <LogOut className="w-4 h-4 mr-2" />{t('login.logout')}
+                <LogOut className="w-4 h-4 mr-2" />{m.common_login_logout()}
               </Button>
             </div>
           </form>
@@ -171,16 +170,16 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
       <AuthLayout>
         <AuthLayoutLeft>
           <div className="space-y-4 text-center">
-            <AuthHeader title={t('login.noPermission')} titleClassName="text-destructive" />
+            <AuthHeader title={m.common_login_noPermission()} titleClassName="text-destructive" />
             <p className="text-muted-foreground">
-              {t('login.notAdmin', { name: user.name || user.email })}
+              {m.common_login_notAdmin({ name: user.name || user.email || '' })}
             </p>
             <Button className="w-full" onClick={() => window.open(`${import.meta.env.VITE_WEB_URL ?? '/'}dashboard`, "_self")}>
               <ArrowLeft className="h-4 w-4" />
-              {t('login.backToWorkspace')}
+              {m.common_login_backToWorkspace()}
             </Button>
             <Button variant="outline" className="w-full" onClick={handleSwitchAccount}>
-              {t('login.switchAndLogin')}
+              {m.common_login_switchAndLogin()}
             </Button>
           </div>
         </AuthLayoutLeft>
@@ -192,18 +191,18 @@ export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
   return (
     <AuthLayout>
       <AuthLayoutLeft>
-        <AuthHeader title={t('login.adminPanel')} subtitle={t('login.subtitle')} />
+        <AuthHeader title={m.common_login_adminPanel()} subtitle={m.common_login_subtitle()} />
         <form onSubmit={handleLogin} className="space-y-6">
-          <IconInput icon={Mail} label={t('login.email.label')} placeholder={t('login.email.placeholder')} value={email} onChange={(e) => setEmail(e.target.value)} />
-          <PasswordInput label={t('login.password.label')} placeholder={t('login.password.placeholder')} value={password} onChange={(e) => setPassword(e.target.value)} />
+          <IconInput icon={Mail} label={m.common_login_email_label()} placeholder={m.common_login_email_placeholder()} value={email} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} />
+          <PasswordInput label={m.common_login_password_label()} placeholder={m.common_login_password_placeholder()} value={password} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} />
           <Field orientation="horizontal" className="gap-2">
             <FieldLabel>
-              <Checkbox checked={stayLoggedIn} onCheckedChange={(v) => setStayLoggedIn(v === true)} />
-              <span className="text-sm">{t('login.rememberMe')}</span>
+              <Checkbox checked={stayLoggedIn} onCheckedChange={(v: boolean) => setStayLoggedIn(v === true)} />
+              <span className="text-sm">{m.common_login_rememberMe()}</span>
             </FieldLabel>
           </Field>
           <RainbowButton type="submit" className="w-full" disabled={loading}>
-            {loading ? t('login.loggingIn') : t('login.loginAdmin')}
+            {loading ? m.common_login_loggingIn() : m.common_login_loginAdmin()}
             <ArrowRight className="ml-2 h-4 w-4" />
           </RainbowButton>
         </form>

package/src/components/auth/oauth-section.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
@@ -15,8 +16,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 { useTranslation } from 'react-i18next'
-
 interface OAuthSectionProps {
   providers: { name: string; icon: React.ReactNode }[]
   separatorText?: string
@@ -24,8 +23,7 @@ interface OAuthSectionProps {
 }
 
 export function OAuthSection({ providers, separatorText, actionText = '登录' }: OAuthSectionProps) {
-  const { t } = useTranslation('common')
-  const resolvedActionText = actionText === '登录' ? t('login.action') : actionText
+  const resolvedActionText = actionText === '登录' ? m.common_login_action() : actionText
   return (
     <div className="space-y-3">
       {providers.map((provider, index) => (
@@ -35,7 +33,7 @@ export function OAuthSection({ providers, separatorText, actionText = '登录' }
             className="w-full inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
           >
             {provider.icon}
-            {t('login.oauthWith', { provider: provider.name, action: resolvedActionText })}
+            {m.common_login_oauthWith({ provider: provider.name, action: resolvedActionText })}
           </button>
           {index < providers.length - 1 && separatorText && (
             <div className="relative flex items-center justify-center my-3">

package/src/components/auth/password-input.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Lock } from 'lucide-react'
@@ -26,7 +26,6 @@ interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
 }
 
 export function PasswordInput({ label, id, className, ...props }: PasswordInputProps) {
-  const { t } = useTranslation('common')
   const inputId = id || label.toLowerCase()
   const [isVisible, setIsVisible] = useState(false)
 
@@ -47,7 +46,7 @@ export function PasswordInput({ label, id, className, ...props }: PasswordInputP
           type="button"
           onClick={() => setIsVisible(!isVisible)}
           className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground outline-none transition-colors hover:text-foreground focus:z-10 focus:ring-[3px] focus:ring-ring/50"
-          aria-label={isVisible ? t('login.hidePassword') : t('login.showPassword')}
+          aria-label={isVisible ? m.common_login_hidePassword() : m.common_login_showPassword()}
         >
           {isVisible ? (
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/components/common/placeholder-page.tsx

@@ -16,8 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { LucideIcon } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-
+import { m } from '@/paraglide/messages.js'
 type PlaceholderPageProps = {
   title: string
   description?: string
@@ -25,7 +24,6 @@ type PlaceholderPageProps = {
 }
 
 export function PlaceholderPage({ title, description, icon: Icon }: PlaceholderPageProps) {
-  const { t } = useTranslation('common')
   return (
     <div className="flex h-full min-h-[60vh] items-center justify-center">
       <div className="flex flex-col items-center gap-4 rounded-xl border bg-card p-12 text-center shadow-sm">
@@ -34,7 +32,7 @@ export function PlaceholderPage({ title, description, icon: Icon }: PlaceholderP
         </div>
         <h1 className="text-xl font-semibold">{title}</h1>
         <p className="text-sm text-muted-foreground">
-          {description ?? t('common.comingSoon')}
+          {description ?? m.common_common_comingSoon()}
         </p>
       </div>
     </div>

package/src/components/component/component-form-dialog.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -51,7 +51,6 @@ interface ComponentFormDialogProps {
 }
 
 export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }: ComponentFormDialogProps) {
-  const { t } = useTranslation('common')
   const isEdit = !!component
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
@@ -85,7 +84,7 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
 
   async function handleSave() {
     if (!name.trim()) {
-      toast.error(t('component.form.nameRequired'))
+      toast.error(m.common_component_form_nameRequired())
       return
     }
     setSaving(true)
@@ -109,7 +108,7 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
             defaultProps: propsState,
           },
         })
-        toast.success(t('component.form.updated'))
+        toast.success(m.common_component_form_updated())
       } else {
         await createComponentFn({
           data: {
@@ -119,12 +118,12 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
             description: description.trim() || undefined,
           },
         })
-        toast.success(t('component.form.created'))
+        toast.success(m.common_component_form_created())
       }
       onSuccess()
       onOpenChange(false)
     } catch (e) {
-      toast.error(e instanceof Error ? e.message : t('component.form.saveFailed'))
+      toast.error(e instanceof Error ? e.message : m.common_component_form_saveFailed())
     } finally {
       setSaving(false)
     }
@@ -132,18 +131,18 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
 
   function categoryToDisplay(k: string): string {
     const map: Record<string, string> = {
-      base: t('component.categories.base'),
-      block: t('component.categories.block'),
-      template: t('component.categories.template'),
+      base: m.common_component_categories_base(),
+      block: m.common_component_categories_block(),
+      template: m.common_component_categories_template(),
     }
     return map[k] ?? k
   }
 
   function categoryFromKey(label: string | null | undefined): string | undefined {
     if (!label) return undefined
-    const zhBase = t('component.categories.base')
-    const zhBlock = t('component.categories.block')
-    const zhTemplate = t('component.categories.template')
+    const zhBase = m.common_component_categories_base()
+    const zhBlock = m.common_component_categories_block()
+    const zhTemplate = m.common_component_categories_template()
     if (label === zhBase) return 'base'
     if (label === zhBlock) return 'block'
     if (label === zhTemplate) return 'template'
@@ -152,7 +151,7 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
 
   function renderPreview() {
     if (!component) {
-      return <span className="text-xs text-muted-foreground">{t('component.form.previewUnavailable')}</span>
+      return <span className="text-xs text-muted-foreground">{m.common_component_form_previewUnavailable()}</span>
     }
     const config = getComponent(component.prototypeKey ?? '')
     const Comp = config?.component
@@ -180,7 +179,7 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
     if (schema.length === 0) return null
     return (
       <div className="col-span-2 mt-2 space-y-2 border-t pt-3">
-        <Label className="text-muted-foreground">{t('component.form.defaultProps')}</Label>
+        <Label className="text-muted-foreground">{m.common_component_form_defaultProps()}</Label>
         <div className="grid grid-cols-2 gap-3">
           {schema.map((prop) => {
             const val = propsState[prop.key] ?? prop.default
@@ -191,11 +190,11 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
                 {prop.type === 'boolean' ? (
                   <Switch checked={!!val} onCheckedChange={setVal} />
                 ) : prop.type === 'number' ? (
-                  <Input type="number" value={Number(val)} onChange={(e) => setVal(Number(e.target.value))} />
+                  <Input type="number" value={Number(val)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVal(Number(e.target.value))} />
                 ) : prop.type === 'color' ? (
                   <div className="flex gap-2">
-                    <input type="color" value={String(val)} onChange={(e) => setVal(e.target.value)} className="size-8 shrink-0 rounded border" />
-                    <Input value={String(val)} onChange={(e) => setVal(e.target.value)} className="font-mono text-xs" />
+                    <input type="color" value={String(val)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVal(e.target.value)} className="size-8 shrink-0 rounded border" />
+                    <Input value={String(val)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVal(e.target.value)} className="font-mono text-xs" />
                   </div>
                 ) : prop.type === 'select' && prop.options ? (
                   <Select value={String(val)} onValueChange={setVal}>
@@ -207,7 +206,7 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
                     </SelectContent>
                   </Select>
                 ) : (
-                  <Input value={String(val ?? '')} onChange={(e) => setVal(e.target.value)} />
+                  <Input value={String(val ?? '')} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVal(e.target.value)} />
                 )}
               </div>
             )
@@ -221,13 +220,13 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-4xl">
         <DialogHeader>
-          <DialogTitle>{isEdit ? t('component.form.edit') : t('component.form.create')}</DialogTitle>
+          <DialogTitle>{isEdit ? m.common_component_form_edit() : m.common_component_form_create()}</DialogTitle>
         </DialogHeader>
 
         <div className="flex min-h-[300px] gap-4">
           {/* 左侧预览区 */}
           <div className="flex w-60 shrink-0 flex-col gap-1.5">
-            <Label className="text-muted-foreground">{t('component.form.preview')}</Label>
+            <Label className="text-muted-foreground">{m.common_component_form_preview()}</Label>
             <div className="flex flex-1 items-center justify-center overflow-hidden rounded-lg border bg-muted/30">
               {renderPreview()}
             </div>
@@ -242,94 +241,94 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
           {/* 右侧表单 */}
           <div className="grid flex-1 grid-cols-2 gap-x-4 gap-y-3">
             <div className="col-span-2 space-y-1.5">
-              <Label>{t('component.form.name')}</Label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('component.form.namePlaceholder')} />
+              <Label>{m.common_component_form_name()}</Label>
+              <Input value={name} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)} placeholder={m.common_component_form_namePlaceholder()} />
             </div>
 
             <div className="col-span-2 space-y-1.5">
-              <Label>{t('component.form.description')}</Label>
+              <Label>{m.common_component_form_description()}</Label>
               <Textarea
                 value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                placeholder={t('component.form.descriptionPlaceholder')}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
+                placeholder={m.common_component_form_descriptionPlaceholder()}
                 rows={2}
               />
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.category')}</Label>
+              <Label>{m.common_component_form_category()}</Label>
               <Select value={category} onValueChange={setCategory}>
                 <SelectTrigger className="w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem key="base" value="base">{t('component.categories.base')}</SelectItem>
-                  <SelectItem key="block" value="block">{t('component.categories.block')}</SelectItem>
-                  <SelectItem key="template" value="template">{t('component.categories.template')}</SelectItem>
+                  <SelectItem key="base" value="base">{m.common_component_categories_base()}</SelectItem>
+                  <SelectItem key="block" value="block">{m.common_component_categories_block()}</SelectItem>
+                  <SelectItem key="template" value="template">{m.common_component_categories_template()}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.type')}</Label>
+              <Label>{m.common_component_form_type()}</Label>
               <Select value={type} onValueChange={setType}>
                 <SelectTrigger className="w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem key="component" value="component">{t('component.types.base')}</SelectItem>
-                  <SelectItem key="block" value="block">{t('component.types.block')}</SelectItem>
-                  <SelectItem key="template" value="template">{t('component.types.template')}</SelectItem>
+                  <SelectItem key="component" value="component">{m.common_component_types_base()}</SelectItem>
+                  <SelectItem key="block" value="block">{m.common_component_types_block()}</SelectItem>
+                  <SelectItem key="template" value="template">{m.common_component_types_template()}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.subCategory')}</Label>
-              <Input value={subCategory} onChange={(e) => setSubCategory(e.target.value)} placeholder={t('component.form.subCategoryPlaceholder')} />
+              <Label>{m.common_component_form_subCategory()}</Label>
+              <Input value={subCategory} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSubCategory(e.target.value)} placeholder={m.common_component_form_subCategoryPlaceholder()} />
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.tags')}</Label>
-              <Input value={tags} onChange={(e) => setTags(e.target.value)} placeholder={t('component.form.tagsPlaceholder')} />
+              <Label>{m.common_component_form_tags()}</Label>
+              <Input value={tags} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTags(e.target.value)} placeholder={m.common_component_form_tagsPlaceholder()} />
             </div>
 
             <div className="col-span-2 space-y-1.5">
-              <Label>{t('component.form.path')}</Label>
-              <Input value={path} onChange={(e) => setPath(e.target.value)} placeholder={t('component.form.pathPlaceholder')} className="font-mono text-xs" />
-              <p className="text-[10px] text-muted-foreground">{t('component.form.pathHint')}</p>
+              <Label>{m.common_component_form_path()}</Label>
+              <Input value={path} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPath(e.target.value)} placeholder={m.common_component_form_pathPlaceholder()} className="font-mono text-xs" />
+              <p className="text-[10px] text-muted-foreground">{m.common_component_form_pathHint()}</p>
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.defaultWidth')}</Label>
+              <Label>{m.common_component_form_defaultWidth()}</Label>
               <Input
                 type="number"
                 value={defaultWidth}
-                onChange={(e) => setDefaultWidth(Number(e.target.value))}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultWidth(Number(e.target.value))}
               />
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.defaultHeight')}</Label>
+              <Label>{m.common_component_form_defaultHeight()}</Label>
               <Input
                 type="number"
                 value={defaultHeight}
-                onChange={(e) => setDefaultHeight(Number(e.target.value))}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultHeight(Number(e.target.value))}
               />
             </div>
 
             <div className="space-y-1.5">
-              <Label>{t('component.form.sortOrder')}</Label>
+              <Label>{m.common_component_form_sortOrder()}</Label>
               <Input
                 type="number"
                 value={sortOrder}
-                onChange={(e) => setSortOrder(Number(e.target.value))}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSortOrder(Number(e.target.value))}
               />
             </div>
 
             <div className="flex items-center gap-2 pt-6">
               <Switch checked={isHidden} onCheckedChange={setIsHidden} />
-              <Label className="cursor-pointer" onClick={() => setIsHidden(!isHidden)}>{t('component.form.hidden')}</Label>
+              <Label className="cursor-pointer" onClick={() => setIsHidden(!isHidden)}>{m.common_component_form_hidden()}</Label>
             </div>
 
             {renderPropsEditor()}
@@ -337,9 +336,9 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{m.common_common_cancel()}</Button>
           <Button onClick={handleSave} disabled={saving}>
-            {saving ? t('status.saving') : t('common.save')}
+            {saving ? m.common_status_saving() : m.common_button_save()}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/component/component-import-dialog.tsx

@@ -144,7 +144,7 @@ export function ComponentImportDialog({ open, onOpenChange, onSuccess }: Compone
               <div className="flex gap-2">
                 <Input
                   value={packageName}
-                  onChange={(e) => setPackageName(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPackageName(e.target.value)}
                   placeholder="如：lucide-react"
                   className="font-mono text-xs"
                 />
@@ -160,7 +160,7 @@ export function ComponentImportDialog({ open, onOpenChange, onSuccess }: Compone
               <div className="flex gap-2">
                 <Input
                   value={importPath}
-                  onChange={(e) => setImportPath(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setImportPath(e.target.value)}
                   placeholder="@magicui/safari 或 @/components/magicui/safari"
                   className="font-mono text-xs"
                 />
@@ -180,7 +180,7 @@ export function ComponentImportDialog({ open, onOpenChange, onSuccess }: Compone
               <Label>导出名</Label>
               <Input
                 value={exportName}
-                onChange={(e) => setExportName(e.target.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setExportName(e.target.value)}
                 placeholder="default 或具名"
                 className="font-mono text-xs"
               />
@@ -189,7 +189,7 @@ export function ComponentImportDialog({ open, onOpenChange, onSuccess }: Compone
               <Label>组件标识 *</Label>
               <Input
                 value={componentKey}
-                onChange={(e) => setComponentKey(e.target.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setComponentKey(e.target.value)}
                 placeholder="如：my-button"
                 className="font-mono text-xs"
               />
@@ -201,7 +201,7 @@ export function ComponentImportDialog({ open, onOpenChange, onSuccess }: Compone
               <Label>显示名称 *</Label>
               <Input
                 value={displayName}
-                onChange={(e) => setDisplayName(e.target.value)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDisplayName(e.target.value)}
                 placeholder="如：我的按钮"
               />
             </div>

package/src/components/component/component-table.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Edit, Trash2 } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
@@ -62,16 +62,15 @@ export function ComponentTable({
   onEdit: (item: ComponentItem) => void
   onDelete: (item: ComponentItem) => void
 }) {
-  const { t } = useTranslation('common')
   const categoryLabel = (k: string) => {
-    const map: Record<string, string> = { base: t('component.categories.base'), block: t('component.categories.block'), template: t('component.categories.template') }
+    const map: Record<string, string> = { base: m.common_component_categories_base(), block: m.common_component_categories_block(), template: m.common_component_categories_template() }
     return map[k] ?? k
   }
 
   if (items.length === 0) {
     return (
       <div className="flex h-40 items-center justify-center rounded-lg border border-dashed">
-        <p className="text-sm text-muted-foreground">{t('component.table.empty')}</p>
+        <p className="text-sm text-muted-foreground">{m.common_component_table_empty()}</p>
       </div>
     )
   }
@@ -81,13 +80,13 @@ export function ComponentTable({
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[28%]">{t('component.table.columns.component')}</TableHead>
-            <TableHead>{t('component.table.columns.category')}</TableHead>
-            <TableHead>{t('component.table.columns.type')}</TableHead>
-            <TableHead>{t('component.table.columns.tags')}</TableHead>
-            <TableHead>{t('component.table.columns.source')}</TableHead>
-            <TableHead>{t('component.table.columns.status')}</TableHead>
-            <TableHead className="text-right">{t('component.table.columns.actions')}</TableHead>
+            <TableHead className="w-[28%]">{m.common_component_table_columns_component()}</TableHead>
+            <TableHead>{m.common_component_table_columns_category()}</TableHead>
+            <TableHead>{m.common_component_table_columns_type()}</TableHead>
+            <TableHead>{m.common_component_table_columns_tags()}</TableHead>
+            <TableHead>{m.common_component_table_columns_source()}</TableHead>
+            <TableHead>{m.common_component_table_columns_status()}</TableHead>
+            <TableHead className="text-right">{m.common_component_table_columns_actions()}</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -124,12 +123,12 @@ export function ComponentTable({
                 </TableCell>
                 <TableCell>
                   <span className={cn('text-xs', item.isHidden ? 'text-muted-foreground' : 'text-foreground')}>
-                    {item.isHidden ? t('component.table.status.hidden') : t('component.table.status.visible')}
+                    {item.isHidden ? m.common_component_table_status_hidden() : m.common_component_table_status_visible()}
                   </span>
                 </TableCell>
                 <TableCell className="text-right">
                   <div className="flex items-center justify-end gap-1">
-                    <Button variant="ghost" size="icon-sm" onClick={() => onEdit(item)} aria-label={t('common.edit')}>
+                    <Button variant="ghost" size="icon-sm" onClick={() => onEdit(item)} aria-label={m.common_common_edit()}>
                       <Edit className="size-4" />
                     </Button>
                     <Button
@@ -137,7 +136,7 @@ export function ComponentTable({
                       size="icon-sm"
                       onClick={() => onDelete(item)}
                       className="text-destructive hover:bg-destructive/10"
-                      aria-label={t('common.delete')}
+                      aria-label={m.common_common_delete()}
                     >
                       <Trash2 className="size-4" />
                     </Button>