@allbluecn/web-app 0.9.5 → 0.10.2

package/src/plugins/core/tags/tag-manager.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useLiveQuery } from '@tanstack/react-db'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -30,11 +29,11 @@ import { getQueryClient } from '@/lib/query-client-seam'
 import { TagBadge } from "./tag-badge"
 import { TagColorPicker } from "./tag-color-picker"
 import { toast } from '@/components/ui/sonner'
+import { m } from "@/paraglide/messages.js";
 
 type Tag = { id: string; name: string; color: number; sortOrder: number }
 
 function TagManagerContent() {
-  const { t } = useTranslation('tags')
   const { data: tags, status } = useLiveQuery(
     (q) => q.from({ tag: getTagsCollection() })
   )
@@ -59,7 +58,7 @@ function TagManagerContent() {
       }
       await reorderTagsFn({ data: { orderedIds: newTags.map((tag) => tag.id) } })
     } catch {
-      toast.error(t('sortFailed'))
+      toast.error(m.tags_sortFailed())
     }
   }
 
@@ -68,10 +67,10 @@ function TagManagerContent() {
     try {
       getTagsCollection().delete(deleting.id)
       await deleteTagFn({ data: { id: deleting.id } })
-      toast.success(t('deleted'))
+      toast.success(m.tags_deleted())
       setDeleting(null)
     } catch (e) {
-      toast.error(e instanceof Error ? e.message : t('deleteFailed'))
+      toast.error(e instanceof Error ? e.message : m.tags_deleteFailed())
     }
   }
 
@@ -79,12 +78,12 @@ function TagManagerContent() {
     return (
       <Empty className="border rounded-lg py-12">
         <EmptyHeader>
-          <EmptyTitle>{t('emptyTitle')}</EmptyTitle>
-          <EmptyDescription>{t('emptyDesc')}</EmptyDescription>
+          <EmptyTitle>{m.tags_emptyTitle()}</EmptyTitle>
+          <EmptyDescription>{m.tags_emptyDesc()}</EmptyDescription>
         </EmptyHeader>
         <EmptyContent>
           <Button onClick={() => setCreating(true)}>
-            <Plus className="size-4" /> {t('createTag')}
+            <Plus className="size-4" /> {m.tags_createTag()}
           </Button>
         </EmptyContent>
       </Empty>
@@ -95,7 +94,7 @@ function TagManagerContent() {
     <div className="space-y-4">
       <div className="flex justify-end">
         <Button onClick={() => setCreating(true)}>
-          <Plus className="size-4" /> {t('createTag')}
+          <Plus className="size-4" /> {m.tags_createTag()}
         </Button>
       </div>
 
@@ -113,10 +112,10 @@ function TagManagerContent() {
             <GripVertical className="size-4 text-muted-foreground/40" />
             <TagBadge tag={tag} />
             <span className="flex-1" />
-            <Button variant="ghost" size="icon" onClick={() => setEditing(tag)} aria-label={t('editTag')}>
+            <Button variant="ghost" size="icon" onClick={() => setEditing(tag)} aria-label={m.tags_editTag()}>
               <Edit className="size-4" />
             </Button>
-            <Button variant="ghost" size="icon" onClick={() => setDeleting(tag)} aria-label={t('delete')}>
+            <Button variant="ghost" size="icon" onClick={() => setDeleting(tag)} aria-label={m.tags_delete()}>
               <Trash2 className="size-4" />
             </Button>
           </div>
@@ -134,12 +133,12 @@ function TagManagerContent() {
       <AlertDialog open={!!deleting} onOpenChange={(o) => !o && setDeleting(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('confirmDeleteTitle', { name: deleting?.name })}</AlertDialogTitle>
-            <AlertDialogDescription>{t('confirmDeleteDesc')}</AlertDialogDescription>
+            <AlertDialogTitle>{m.tags_confirmDeleteTitle({ name: deleting?.name ?? "" })}</AlertDialogTitle>
+            <AlertDialogDescription>{m.tags_confirmDeleteDesc()}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete}>{t('delete')}</AlertDialogAction>
+            <AlertDialogCancel>{m.tags_cancel()}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>{m.tags_delete()}</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -158,14 +157,13 @@ export function TagManager() {
 }
 
 function TagEditDialog({ tag, onClose, onSuccess }: { tag: Tag | null; onClose: () => void; onSuccess: () => void }) {
-  const { t } = useTranslation('tags')
   const [name, setName] = useState(tag?.name ?? '')
   const [color, setColor] = useState(tag?.color ?? 0)
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
 
   async function handleSave() {
-    if (!name.trim()) { setError(t('nameRequired')); return }
+    if (!name.trim()) { setError(m.tags_nameRequired()); return }
     setSaving(true)
     setError('')
     try {
@@ -175,11 +173,11 @@ function TagEditDialog({ tag, onClose, onSuccess }: { tag: Tag | null; onClose:
         await createTagFn({ data: { name: name.trim() } })
       }
       await getQueryClient().invalidateQueries({ queryKey: ['tags'] })
-      toast.success(tag ? t('updated') : t('created'))
+      toast.success(tag ? m.tags_updated() : m.tags_created())
       onSuccess()
     } catch (e) {
-      const msg = e instanceof Error ? e.message : t('saveFailed')
-      setError(msg === 'TAG_NAME_CONFLICT' ? t('nameConflict') : msg)
+      const msg = e instanceof Error ? e.message : m.tags_saveFailed()
+      setError(msg === 'TAG_NAME_CONFLICT' ? m.tags_nameConflict() : msg)
     } finally {
       setSaving(false)
     }
@@ -189,22 +187,22 @@ function TagEditDialog({ tag, onClose, onSuccess }: { tag: Tag | null; onClose:
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="sm:max-w-100">
         <DialogHeader>
-          <DialogTitle>{tag ? t('editTag') : t('createTag')}</DialogTitle>
+          <DialogTitle>{tag ? m.tags_editTag() : m.tags_createTag()}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
           <div>
-            <label className="text-sm font-medium">{t('nameLabel')}</label>
+            <label className="text-sm font-medium">{m.tags_nameLabel()}</label>
             <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} maxLength={30} />
           </div>
           <div>
-            <label className="text-sm font-medium">{t('colorLabel')}</label>
+            <label className="text-sm font-medium">{m.tags_colorLabel()}</label>
             <div className="mt-2"><TagColorPicker value={color} onChange={setColor} /></div>
           </div>
           {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={onClose}>{t('cancel')}</Button>
-          <Button onClick={handleSave} disabled={saving}>{saving ? t('saving') : t('save')}</Button>
+          <Button variant="outline" onClick={onClose}>{m.tags_cancel()}</Button>
+          <Button onClick={handleSave} disabled={saving}>{saving ? m.tags_saving() : m.tags_save()}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/plugins/core/tags/tag-selector.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useLiveQuery } from '@tanstack/react-db'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Input } from '@/components/ui/input'
@@ -25,6 +24,7 @@ import { createTagFn } from "./serverFns"
 import { getTagsCollection } from "./tags-collection"
 import { TagBadge } from "./tag-badge"
 import { cn } from '@/lib/utils'
+import { m } from "@/paraglide/messages.js";
 
 type Tag = { id: string; name: string; color: number }
 type TagSelectorProps = {
@@ -40,8 +40,7 @@ function TagSelectorInner({
   placeholder,
   className,
 }: TagSelectorProps) {
-  const { t } = useTranslation('tags')
-  const resolvedPlaceholder = placeholder ?? t('selector.placeholder')
+  const resolvedPlaceholder = placeholder ?? m.tags_selector_placeholder()
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [creating, setCreating] = useState(false)
@@ -97,7 +96,7 @@ function TagSelectorInner({
       <PopoverContent className="w-72 p-2" align="start">
         <Input
           autoFocus
-          placeholder={t('selector.searchPlaceholder')}
+          placeholder={m.tags_selector_searchPlaceholder()}
           className='text-xs md:text-xs'
           value={search}
           onChange={(e) => setSearch(e.target.value)}
@@ -117,7 +116,7 @@ function TagSelectorInner({
               className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-muted"
             >
               <Plus className="size-3.5" />
-              {t('selector.createTag', { name: search.trim() })}
+              {m.tags_selector_createTag({ name: search.trim() })}
             </button>
           )}
           {filtered.map((t) => {

package/src/plugins/modules.gen.ts

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import type { ProFeature } from '@allbluecn/kernel'
+
+export const profileId = 'oss' as const
+export const activePluginIds = ['@allbluecn/tags', '@allbluecn/inspiration', '@allbluecn/prd'] as const
+export type ActivePluginId = (typeof activePluginIds)[number]
+
+export const implementedModules: Record<ProFeature, boolean> = {
+  billing: false,
+  hostedAi: false,
+  sso: false,
+  audit: false,
+  permissions: false,
+  license: false,
+  versionHistory: false,
+  automation: false,
+  templates: false,
+  analytics: false,
+  globalSearch: false,
+  compliance: false,
+}

package/src/plugins/plugins.gen.ts

@@ -0,0 +1,20 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+// profile: oss (validated: 3 plugins)
+// 拓扑序：@allbluecn/tags -> @allbluecn/inspiration -> @allbluecn/prd
+import tags from '@/plugins/core/tags'
+import inspiration from '@/plugins/core/inspiration'
+import prd from '@/plugins/core/prd'
+import { defineProfile, type ProfileDefinition } from '@allbluecn/kernel'
+
+export const profile: ProfileDefinition = defineProfile({
+  id: 'oss',
+  plugins: [tags, inspiration, prd],
+})
+
+export const pluginIds: string[] = ['@allbluecn/tags', '@allbluecn/inspiration', '@allbluecn/prd']
+
+export const pluginMiddleware: unknown[] = [
+  ...tags.contributes.serverMiddleware ?? [],
+  ...inspiration.contributes.serverMiddleware ?? [],
+  ...prd.contributes.serverMiddleware ?? [],
+]

package/src/plugins/ui.gen.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { NavTag } from '@/plugins/core/tags/ui'
+import { type ComponentType } from 'react'
+import type { SettingsTabContribution } from '@allbluecn/kernel'
+
+export const navItems: ComponentType[] = [NavTag]
+export const settingsTabs: SettingsTabContribution[] = []
+export const dashboardWidgets: ComponentType[] = []

package/src/providers/index.tsx

@@ -15,26 +15,22 @@
 // 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 { ThemeProvider } from "next-themes";
 import { useEffect, type ReactNode } from "react";
-import { getClientI18n } from "@/i18n/client";
 import { LazyMotion, domAnimation } from "motion/react";
-import { I18nextProvider } from "react-i18next";
 import { useRouteContext } from "@tanstack/react-router";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { TimezoneProvider } from "@/providers/timezone-provider";
 import type { Session } from "@/lib/auth/auth-client";
 import { exchangeRemoteTokenFn } from "@/server/serverFns/auth/session";
 import { toast } from "sonner";
-import { createServerI18n } from "@/i18n/server";
 import { registerIconPicker } from "@/plugins/core/prd/icon-picker-bridge";
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
+import { m } from "@/paraglide/messages.js";
 
 // 宿主注入图标选择器实现，供 plugins-core 的 PRD 弹窗等使用（模块级单例）
 registerIconPicker(LucideIconPicker);
 
-
 function DesktopDeepLinkListener() {
   useEffect(() => {
     if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__ && !(window as any).__TAURI__) return
@@ -45,10 +41,10 @@ function DesktopDeepLinkListener() {
         if (!token) return
         try {
           await exchangeRemoteTokenFn({ data: { token } })
-          toast.success(getClientI18n().t('auth.loginSuccess'))
+          toast.success(m.common_auth_loginSuccess())
           window.location.reload()
         } catch (e) {
-          toast.error(getClientI18n().t('auth.loginFailed', { message: e instanceof Error ? e.message : getClientI18n().t('auth.unknownError') }))
+          toast.error(m.common_auth_loginFailed({ message: e instanceof Error ? e.message : m.common_auth_unknownError() }))
         }
       }).then((fn) => {
         unlisten = fn
@@ -70,13 +66,7 @@ export function Providers({
   children: ReactNode;
   session: Session | null;
 }) {
-  const locale = useRouteContext({ from: '__root__', select: (c) => c.locale })
-
-  const isServer = typeof window === 'undefined'
-  const i18n = isServer ? createServerI18n(locale) : getClientI18n()
-
   return (
-    <I18nextProvider i18n={i18n}>
       <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
         <LazyMotion features={domAnimation} strict>
           <TooltipProvider>
@@ -87,6 +77,5 @@ export function Providers({
           </TooltipProvider>
         </LazyMotion>
       </ThemeProvider>
-    </I18nextProvider>
   );
 }

package/src/routeTree.gen.ts

@@ -100,6 +100,7 @@ import { Route as NavKnowledgeKbIdIndexRouteImport } from './routes/_nav/knowled
 import { Route as NavProjectsProjectIdStoryIdRouteRouteImport } from './routes/_nav/projects/$projectId/$storyId/route'
 import { Route as NavProjectsProjectIdSettingsRouteRouteImport } from './routes/_nav/projects/$projectId/settings/route'
 import { Route as NavSettingsAiProviderIdRouteRouteImport } from './routes/_nav/settings/ai/$providerId/route'
+import { Route as NavWorkspacesWorkspaceIdActivitiesRouteRouteImport } from './routes/_nav/workspaces/$workspaceId/activities/route'
 import { Route as NavWorkspacesWorkspaceIdSettingsRouteRouteImport } from './routes/_nav/workspaces/$workspaceId/settings/route'
 import { Route as ApiAttachmentsIdContentRouteImport } from './routes/api/attachments/$id/content'
 import { Route as DesignFilesProjectIdArtboardIdFilenameRouteImport } from './routes/design-files/$projectId/$artboardId/$filename'
@@ -789,6 +790,16 @@ const NavSettingsAiProviderIdRouteRoute =
       (d) => d.Route,
     ),
   )
+const NavWorkspacesWorkspaceIdActivitiesRouteRoute =
+  NavWorkspacesWorkspaceIdActivitiesRouteRouteImport.update({
+    id: '/activities',
+    path: '/activities',
+    getParentRoute: () => NavWorkspacesWorkspaceIdRouteRoute,
+  } as any).lazy(() =>
+    import('./routes/_nav/workspaces/$workspaceId/activities/route.lazy').then(
+      (d) => d.Route,
+    ),
+  )
 const NavWorkspacesWorkspaceIdSettingsRouteRoute =
   NavWorkspacesWorkspaceIdSettingsRouteRouteImport.update({
     id: '/settings',
@@ -950,6 +961,7 @@ export interface FileRoutesByFullPath {
   '/projects/$projectId/$storyId': typeof NavProjectsProjectIdStoryIdRouteRoute
   '/projects/$projectId/settings': typeof NavProjectsProjectIdSettingsRouteRoute
   '/settings/ai/$providerId': typeof NavSettingsAiProviderIdRouteRoute
+  '/workspaces/$workspaceId/activities': typeof NavWorkspacesWorkspaceIdActivitiesRouteRoute
   '/workspaces/$workspaceId/settings': typeof NavWorkspacesWorkspaceIdSettingsRouteRoute
   '/api/attachments/$id/content': typeof ApiAttachmentsIdContentRoute
   '/design-files/$projectId/$artboardId/$filename': typeof DesignFilesProjectIdArtboardIdFilenameRoute
@@ -1044,6 +1056,7 @@ export interface FileRoutesByTo {
   '/projects/$projectId/$storyId': typeof NavProjectsProjectIdStoryIdRouteRoute
   '/projects/$projectId/settings': typeof NavProjectsProjectIdSettingsRouteRoute
   '/settings/ai/$providerId': typeof NavSettingsAiProviderIdRouteRoute
+  '/workspaces/$workspaceId/activities': typeof NavWorkspacesWorkspaceIdActivitiesRouteRoute
   '/workspaces/$workspaceId/settings': typeof NavWorkspacesWorkspaceIdSettingsRouteRoute
   '/api/attachments/$id/content': typeof ApiAttachmentsIdContentRoute
   '/design-files/$projectId/$artboardId/$filename': typeof DesignFilesProjectIdArtboardIdFilenameRoute
@@ -1156,6 +1169,7 @@ export interface FileRoutesById {
   '/_nav/projects/$projectId/$storyId': typeof NavProjectsProjectIdStoryIdRouteRoute
   '/_nav/projects/$projectId/settings': typeof NavProjectsProjectIdSettingsRouteRoute
   '/_nav/settings/ai/$providerId': typeof NavSettingsAiProviderIdRouteRoute
+  '/_nav/workspaces/$workspaceId/activities': typeof NavWorkspacesWorkspaceIdActivitiesRouteRoute
   '/_nav/workspaces/$workspaceId/settings': typeof NavWorkspacesWorkspaceIdSettingsRouteRoute
   '/api/attachments/$id/content': typeof ApiAttachmentsIdContentRoute
   '/design-files/$projectId/$artboardId/$filename': typeof DesignFilesProjectIdArtboardIdFilenameRoute
@@ -1266,6 +1280,7 @@ export interface FileRouteTypes {
     | '/projects/$projectId/$storyId'
     | '/projects/$projectId/settings'
     | '/settings/ai/$providerId'
+    | '/workspaces/$workspaceId/activities'
     | '/workspaces/$workspaceId/settings'
     | '/api/attachments/$id/content'
     | '/design-files/$projectId/$artboardId/$filename'
@@ -1360,6 +1375,7 @@ export interface FileRouteTypes {
     | '/projects/$projectId/$storyId'
     | '/projects/$projectId/settings'
     | '/settings/ai/$providerId'
+    | '/workspaces/$workspaceId/activities'
     | '/workspaces/$workspaceId/settings'
     | '/api/attachments/$id/content'
     | '/design-files/$projectId/$artboardId/$filename'
@@ -1471,6 +1487,7 @@ export interface FileRouteTypes {
     | '/_nav/projects/$projectId/$storyId'
     | '/_nav/projects/$projectId/settings'
     | '/_nav/settings/ai/$providerId'
+    | '/_nav/workspaces/$workspaceId/activities'
     | '/_nav/workspaces/$workspaceId/settings'
     | '/api/attachments/$id/content'
     | '/design-files/$projectId/$artboardId/$filename'
@@ -2224,6 +2241,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NavSettingsAiProviderIdRouteRouteImport
       parentRoute: typeof NavSettingsAiRouteRoute
     }
+    '/_nav/workspaces/$workspaceId/activities': {
+      id: '/_nav/workspaces/$workspaceId/activities'
+      path: '/activities'
+      fullPath: '/workspaces/$workspaceId/activities'
+      preLoaderRoute: typeof NavWorkspacesWorkspaceIdActivitiesRouteRouteImport
+      parentRoute: typeof NavWorkspacesWorkspaceIdRouteRoute
+    }
     '/_nav/workspaces/$workspaceId/settings': {
       id: '/_nav/workspaces/$workspaceId/settings'
       path: '/settings'
@@ -2619,11 +2643,14 @@ const NavTagsRouteRouteWithChildren = NavTagsRouteRoute._addFileChildren(
 )
 
 interface NavWorkspacesWorkspaceIdRouteRouteChildren {
+  NavWorkspacesWorkspaceIdActivitiesRouteRoute: typeof NavWorkspacesWorkspaceIdActivitiesRouteRoute
   NavWorkspacesWorkspaceIdSettingsRouteRoute: typeof NavWorkspacesWorkspaceIdSettingsRouteRoute
 }
 
 const NavWorkspacesWorkspaceIdRouteRouteChildren: NavWorkspacesWorkspaceIdRouteRouteChildren =
   {
+    NavWorkspacesWorkspaceIdActivitiesRouteRoute:
+      NavWorkspacesWorkspaceIdActivitiesRouteRoute,
     NavWorkspacesWorkspaceIdSettingsRouteRoute:
       NavWorkspacesWorkspaceIdSettingsRouteRoute,
   }

package/src/router.tsx

@@ -17,30 +17,39 @@
 
 import { createRouter as createTanstackRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
-import { QueryClient } from '@tanstack/react-query'
+import { MutationCache, QueryClient } from '@tanstack/react-query'
+import { navigateToLoginOnUnauthorized } from '@/lib/auth/anonymous-safe'
 import { setQueryClient } from '@/lib/query-client-seam'
 import { Loader2 } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
 import { routeTree } from './routeTree.gen'
-import type { AppLocale } from '@/i18n/config'
+import { GlobalErrorBoundary } from '@/components/error/global-error-boundary'
+import type { Locale } from '@/paraglide/runtime'
+import { m } from "@/paraglide/messages.js";
 
 function DefaultPendingComponent() {
-  const { t } = useTranslation('common')
   return (
     <div className="flex h-screen w-full items-center justify-center">
       <div className="flex items-center gap-3 text-muted-foreground">
         <Loader2 className="h-5 w-5 animate-spin" />
-        <span className="text-sm">{t('loading')}</span>
+        <span className="text-sm">{m.common_loading()}</span>
       </div>
     </div>
   )
 }
 
 export function getRouter() {
+  // MutationCache 必须在 QueryClient 构造期注入（该版本 MutationCache 实例无 onError 方法）；
+  // onError 闭包引用下方才声明的 router——onError 只在 mutation 报错时触发，
+  // 必然晚于 getRouter 返回，运行时不会读到未初始化的 router
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false },
     },
+    mutationCache: new MutationCache({
+      onError: (error) => {
+        navigateToLoginOnUnauthorized(error, router)
+      },
+    }),
   })
   setQueryClient(queryClient)
 
@@ -48,12 +57,13 @@ export function getRouter() {
     routeTree,
     context: {
       queryClient,
-      locale: 'zh' as AppLocale,
+      locale: 'zh' as Locale,
       session: null,
     },
     defaultPreload: 'intent',
     defaultPendingMs: 200,
     defaultPendingComponent: DefaultPendingComponent,
+    defaultErrorComponent: GlobalErrorBoundary,
     scrollRestoration: true,
   })
 

package/src/routes/__desktop/onboarding/route.lazy.tsx

@@ -1,5 +1,4 @@
 import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
@@ -16,6 +15,7 @@ import { Cloud, Server, HardDrive, Loader2 } from 'lucide-react'
 import { useConnection } from '@desktop/connection-manager'
 import { connectionTest } from '@desktop/connection-manager/connection-test'
 import { toast } from 'sonner'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/__desktop/onboarding')({
   component: OnboardingPage,
@@ -24,7 +24,6 @@ export const Route = createLazyFileRoute('/__desktop/onboarding')({
 function OnboardingPage() {
   const { switchMode } = useConnection()
   const navigate = useNavigate()
-  const { t } = useTranslation('desktop')
   const [selfHostedDialogOpen, setSelfHostedDialogOpen] = useState(false)
   const [selfHostedUrl, setSelfHostedUrl] = useState('')
   const [selfHostedLabel, setSelfHostedLabel] = useState('')
@@ -34,7 +33,7 @@ function OnboardingPage() {
     try {
       await switchMode({ mode: 'saas', url: 'https://allblue.litsex.cn' })
     } catch (e) {
-      toast.error(t('onboarding.errors.switchFailed', { message: e instanceof Error ? e.message : t('onboarding.errors.unknownError') }))
+      toast.error(m.desktop_onboarding_errors_switchFailed({ message: e instanceof Error ? e.message : m.desktop_onboarding_errors_unknownError() }))
     }
   }
 
@@ -43,7 +42,7 @@ function OnboardingPage() {
       await switchMode({ mode: 'local' })
       navigate({ to: '/workspace' })
     } catch (e) {
-      toast.error(t('onboarding.errors.localFailed', { message: e instanceof Error ? e.message : t('onboarding.errors.unknownError') }))
+      toast.error(m.desktop_onboarding_errors_localFailed({ message: e instanceof Error ? e.message : m.desktop_onboarding_errors_unknownError() }))
     }
   }
 
@@ -52,13 +51,13 @@ function OnboardingPage() {
     const result = await connectionTest(selfHostedUrl)
     setTesting(false)
     if (!result.ok) {
-      toast.error(t('onboarding.errors.connectFailed', { message: result.error ?? t('onboarding.errors.timeout') }))
+      toast.error(m.desktop_onboarding_errors_connectFailed({ message: result.error ?? m.desktop_onboarding_errors_timeout() }))
       return
     }
     try {
       await switchMode({ mode: 'self-hosted', url: selfHostedUrl, label: selfHostedLabel })
     } catch (e) {
-      toast.error(t('onboarding.errors.switchFailed', { message: e instanceof Error ? e.message : t('onboarding.errors.unknownError') }))
+      toast.error(m.desktop_onboarding_errors_switchFailed({ message: e instanceof Error ? e.message : m.desktop_onboarding_errors_unknownError() }))
     }
   }
 
@@ -66,41 +65,41 @@ function OnboardingPage() {
     <div className="flex min-h-screen items-center justify-center bg-background p-8">
       <div className="w-full max-w-4xl space-y-6">
         <div className="text-center space-y-2">
-          <h1 className="text-3xl font-bold">{t('onboarding.title')}</h1>
-          <p className="text-muted-foreground">{t('onboarding.subtitle')}</p>
+          <h1 className="text-3xl font-bold">{m.desktop_onboarding_title()}</h1>
+          <p className="text-muted-foreground">{m.desktop_onboarding_subtitle()}</p>
         </div>
 
         <div className="grid gap-4 md:grid-cols-3">
           <Card className="cursor-pointer hover:border-primary transition-colors" onClick={handleSelectSaas}>
             <CardHeader>
               <Cloud className="size-10 text-primary mb-2" />
-              <CardTitle>{t('onboarding.saas.title')}</CardTitle>
-              <CardDescription>{t('onboarding.saas.desc')}</CardDescription>
+              <CardTitle>{m.desktop_onboarding_saas_title()}</CardTitle>
+              <CardDescription>{m.desktop_onboarding_saas_desc()}</CardDescription>
             </CardHeader>
             <CardContent>
-              <Button className="w-full" variant="default">{t('onboarding.saas.button')}</Button>
+              <Button className="w-full" variant="default">{m.desktop_onboarding_saas_button()}</Button>
             </CardContent>
           </Card>
 
           <Card className="cursor-pointer hover:border-primary transition-colors" onClick={() => setSelfHostedDialogOpen(true)} >
             <CardHeader>
               <Server className="size-10 text-primary mb-2" />
-              <CardTitle>{t('onboarding.selfHosted.title')}</CardTitle>
-              <CardDescription>{t('onboarding.selfHosted.desc')}</CardDescription>
+              <CardTitle>{m.desktop_onboarding_selfHosted_title()}</CardTitle>
+              <CardDescription>{m.desktop_onboarding_selfHosted_desc()}</CardDescription>
             </CardHeader>
             <CardContent>
-              <Button className="w-full" variant="outline">{t('onboarding.selfHosted.button')}</Button>
+              <Button className="w-full" variant="outline">{m.desktop_onboarding_selfHosted_button()}</Button>
             </CardContent>
           </Card>
 
           <Card className="cursor-pointer hover:border-primary transition-colors" onClick={handleSelectLocal}>
             <CardHeader>
               <HardDrive className="size-10 text-primary mb-2" />
-              <CardTitle>{t('onboarding.local.title')}</CardTitle>
-              <CardDescription>{t('onboarding.local.desc')}</CardDescription>
+              <CardTitle>{m.desktop_onboarding_local_title()}</CardTitle>
+              <CardDescription>{m.desktop_onboarding_local_desc()}</CardDescription>
             </CardHeader>
             <CardContent>
-              <Button className="w-full" variant="outline">{t('onboarding.local.button')}</Button>
+              <Button className="w-full" variant="outline">{m.desktop_onboarding_local_button()}</Button>
             </CardContent>
           </Card>
         </div>
@@ -109,11 +108,11 @@ function OnboardingPage() {
       <Dialog open={selfHostedDialogOpen} onOpenChange={setSelfHostedDialogOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{t('onboarding.selfHosted.dialogTitle')}</DialogTitle>
+            <DialogTitle>{m.desktop_onboarding_selfHosted_dialogTitle()}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="url">{t('onboarding.selfHosted.urlLabel')}</Label>
+              <Label htmlFor="url">{m.desktop_onboarding_selfHosted_urlLabel()}</Label>
               <Input
                 id="url"
                 placeholder="https://prd.mycompany.com"
@@ -122,20 +121,20 @@ function OnboardingPage() {
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="label">{t('onboarding.selfHosted.labelField')}</Label>
+              <Label htmlFor="label">{m.desktop_onboarding_selfHosted_labelField()}</Label>
               <Input
                 id="label"
-                placeholder={t('onboarding.selfHosted.labelPlaceholder')}
+                placeholder={m.desktop_onboarding_selfHosted_labelPlaceholder()}
                 value={selfHostedLabel}
                 onChange={(e) => setSelfHostedLabel(e.target.value)}
               />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setSelfHostedDialogOpen(false)}>{t('onboarding.selfHosted.cancel')}</Button>
+            <Button variant="outline" onClick={() => setSelfHostedDialogOpen(false)}>{m.desktop_onboarding_selfHosted_cancel()}</Button>
             <Button onClick={handleConfirmSelfHosted} disabled={testing || !selfHostedUrl.trim()}>
               {testing ? <Loader2 className="size-4 animate-spin mr-2" /> : null}
-              {testing ? t('onboarding.selfHosted.connecting') : t('onboarding.selfHosted.connect')}
+              {testing ? m.desktop_onboarding_selfHosted_connecting() : m.desktop_onboarding_selfHosted_connect()}
             </Button>
           </DialogFooter>
         </DialogContent>