@allbluecn/web-app 0.9.4 → 0.10.0

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

@@ -17,13 +17,13 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useState, useMemo, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { TFunction } from 'i18next'
+
 import { HexagonPattern } from '@/components/magicui/hexagon-pattern'
 import { AuroraText } from '@/components/magicui/aurora-text'
 import { chipClass } from '@/components/knowledge-public/chip-utils'
 import { cn } from '@/lib/utils'
 import { CalendarMinus2 } from 'lucide-react'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/knowledge/summary/')({
   component: SummaryPage,
@@ -55,19 +55,19 @@ function getWeeksInMonth(year: number, month: number): number {
   return Math.ceil((daysInMonth + firstWeekday - 1) / 7)
 }
 
-function getWeekDateRange(year: number, month: number, week: number, t: TFunction): { start: string; end: string } {
+function getWeekDateRange(year: number, month: number, week: number): { start: string; end: string } {
   const firstDay = new Date(year, month, 1)
   const firstWeekday = firstDay.getDay() || 7
   const startDate = new Date(year, month, 1 - firstWeekday + 1 + (week - 1) * 7)
   const endDate = new Date(startDate)
   endDate.setDate(startDate.getDate() + 6)
-  const fmt = (d: Date) => t('summary.dateFormat', { month: d.getMonth() + 1, day: d.getDate() })
+  const fmt = (d: Date) => m.knowledge_summary_dateFormat({ month: d.getMonth() + 1, day: d.getDate() })
   return { start: fmt(startDate), end: fmt(endDate) }
 }
 
-function getMonthDateRange(year: number, month: number, t: TFunction): { start: string; end: string } {
+function getMonthDateRange(year: number, month: number): { start: string; end: string } {
   const lastDay = new Date(year, month + 1, 0)
-  return { start: t('summary.monthFirstDay', { month: month + 1 }), end: t('summary.dateFormat', { month: month + 1, day: lastDay.getDate() }) }
+  return { start: m.knowledge_summary_monthFirstDay({ month: month + 1 }), end: m.knowledge_summary_dateFormat({ month: month + 1, day: lastDay.getDate() }) }
 }
 
 interface ReportItem {
@@ -81,33 +81,33 @@ interface ReportItem {
   summary: string
 }
 
-function generateMockData(months: string[], t: TFunction): ReportItem[] {
+function generateMockData(months: string[]): ReportItem[] {
   const items: ReportItem[] = []
   for (let year = START_YEAR; year <= CURRENT_YEAR; year++) {
     for (let m = 0; m < 12; m++) {
       const weeks = getWeeksInMonth(year, m)
       for (let w = 1; w <= weeks; w++) {
-        const range = getWeekDateRange(year, m, w, t)
+        const range = getWeekDateRange(year, m, w)
         items.push({
           id: `w-${year}-${m}-${w}`,
           type: 'weekly',
-          title: t('summary.weeklyTitle', { monthName: months[m], week: w }),
+          title: '周报',
           year,
           month: m,
           week: w,
           dateRange: `${range.start} ~ ${range.end}`,
-          summary: t('summary.weeklyMockSummary'),
+          summary: '周报内容',
         })
       }
-      const mRange = getMonthDateRange(year, m, t)
+      const mRange = getMonthDateRange(year, m)
       items.push({
         id: `m-${year}-${m}`,
         type: 'monthly',
-        title: t('summary.monthlyTitle', { monthName: months[m] }),
+        title: '月报',
         year,
         month: m,
         dateRange: `${mRange.start} ~ ${mRange.end}`,
-        summary: t('summary.monthlyMockSummary'),
+        summary: '月报内容',
       })
     }
   }
@@ -115,8 +115,7 @@ function generateMockData(months: string[], t: TFunction): ReportItem[] {
 }
 
 function SummaryPage() {
-  const { t } = useTranslation('knowledge')
-  const months = t('summary.months', { returnObjects: true }) as string[]
+  const months = JSON.parse(m.summary_months()) as string[]
   const [reportType, setReportType] = useState<ReportType>('all')
   const [year, setYear] = useState(CURRENT_YEAR)
   const [month, setMonth] = useState<number | undefined>()
@@ -128,7 +127,7 @@ function SummaryPage() {
     setHexagons(generateRandomHexagons(15 + Math.floor(Math.random() * 10)))
   }, [])
 
-  const mockData = useMemo(() => generateMockData(months, t), [months, t])
+  const mockData = useMemo(() => generateMockData(months), [months])
 
   const years = useMemo(() => {
     const result: number[] = []
@@ -168,32 +167,32 @@ function SummaryPage() {
       </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('summary.titleWeekly')}
+          {m.knowledge_summary_titleWeekly()}
           <AuroraText colors={["#7E64C2", "#9C83DD", "#B9A6EE", "#D8C9F7"]}>
-            {t('summary.titleMonthly')}
+            {m.knowledge_summary_titleMonthly()}
           </AuroraText>
         </h1>
 
         <div className="mx-auto flex w-full max-w-2xl flex-col items-start gap-3.5 mt-20">
           <div className="flex flex-wrap items-center gap-2.5">
-            <span className="text-sm font-medium text-muted-foreground mr-4">{t('summary.type')}</span>
-            <button type="button" onClick={() => { setReportType('all'); setWeek(undefined) }} className={chipClass(reportType === 'all')}>{t('summary.all')}</button>
-            <button type="button" onClick={() => { setReportType('weekly'); setWeek(undefined) }} className={chipClass(reportType === 'weekly')}>{t('summary.weekly')}</button>
-            <button type="button" onClick={() => { setReportType('monthly'); setWeek(undefined) }} className={chipClass(reportType === 'monthly')}>{t('summary.monthly')}</button>
+            <span className="text-sm font-medium text-muted-foreground mr-4">{m.knowledge_summary_type()}</span>
+            <button type="button" onClick={() => { setReportType('all'); setWeek(undefined) }} className={chipClass(reportType === 'all')}>{m.knowledge_summary_all()}</button>
+            <button type="button" onClick={() => { setReportType('weekly'); setWeek(undefined) }} className={chipClass(reportType === 'weekly')}>{m.knowledge_summary_weekly()}</button>
+            <button type="button" onClick={() => { setReportType('monthly'); setWeek(undefined) }} className={chipClass(reportType === 'monthly')}>{m.knowledge_summary_monthly()}</button>
           </div>
 
           <div className="flex flex-wrap items-center gap-2.5">
-            <span className="text-sm font-medium text-muted-foreground mr-4">{t('summary.year')}</span>
+            <span className="text-sm font-medium text-muted-foreground mr-4">{m.knowledge_summary_year()}</span>
             {years.map((y) => (
               <button key={y} type="button" onClick={() => { setYear(y); setWeek(undefined) }} className={chipClass(year === y)}>
-                {y}{t('summary.yearSuffix')}
+                {y}{m.knowledge_summary_yearSuffix()}
               </button>
             ))}
           </div>
 
           <div className="flex flex-wrap items-center gap-2.5">
-            <span className="text-sm font-medium text-muted-foreground mr-4">{t('summary.month')}</span>
-            <button type="button" onClick={() => { setMonth(undefined); setWeek(undefined) }} className={chipClass(month === undefined)}>{t('summary.all')}</button>
+            <span className="text-sm font-medium text-muted-foreground mr-4">{m.knowledge_summary_month()}</span>
+            <button type="button" onClick={() => { setMonth(undefined); setWeek(undefined) }} className={chipClass(month === undefined)}>{m.knowledge_summary_all()}</button>
             {months.map((m, i) => (
               <button key={i} type="button" onClick={() => { setMonth(i); setWeek(undefined) }} className={chipClass(month === i)}>
                 {m}
@@ -202,11 +201,11 @@ function SummaryPage() {
           </div>
 
           <div className="flex flex-wrap items-center gap-2.5">
-            <span className="text-sm font-medium text-muted-foreground mr-4">{t('summary.week')}</span>
-            <button type="button" onClick={() => setWeek(undefined)} className={chipClass(week === undefined, isMonthly)}>{t('summary.all')}</button>
+            <span className="text-sm font-medium text-muted-foreground mr-4">{m.knowledge_summary_week()}</span>
+            <button type="button" onClick={() => setWeek(undefined)} className={chipClass(week === undefined, isMonthly)}>{m.knowledge_summary_all()}</button>
             {Array.from({ length: maxWeeks }, (_, i) => i + 1).map((w) => (
               <button key={w} type="button" onClick={() => !isMonthly && setWeek(w)} className={chipClass(week === w, isMonthly)} disabled={isMonthly}>
-                {t('summary.weekNum', { week: w })}
+                {m.knowledge_summary_weekNum({ week: w })}
               </button>
             ))}
           </div>
@@ -223,13 +222,13 @@ function SummaryPage() {
                 >
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-xs px-2 py-0.5 rounded-md bg-secondary text-secondary-foreground font-medium">
-                      {item.year}{t('summary.yearSuffix')}
+                      {item.year}{m.knowledge_summary_yearSuffix()}
                     </span>
                     <span className={cn(
                       'text-xs px-2 py-0.5 rounded-md font-medium',
                       item.type === 'weekly' ? 'bg-blue-500/10 text-blue-600' : 'bg-emerald-500/10 text-emerald-600',
                     )}>
-                      {item.type === 'weekly' ? t('summary.weekly') : t('summary.monthly')}
+                      {item.type === 'weekly' ? m.knowledge_summary_weekly() : m.knowledge_summary_monthly()}
                     </span>
                   </div>
                   <h3 className="text-base font-semibold group-hover:text-primary mb-2 leading-snug">{item.title}</h3>
@@ -242,7 +241,7 @@ function SummaryPage() {
               ))}
             </div>
           ) : (
-            <p className="py-12 text-center text-sm text-muted-foreground">{t('summary.empty')}</p>
+            <p className="py-12 text-center text-sm text-muted-foreground">{m.knowledge_summary_empty()}</p>
           )}
         </div>
       </div>

package/src/routes/_nav/notifications/route.lazy.tsx

@@ -1,20 +1,19 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { TeamNotificationsPanel } from '@/components/notifications/team-notifications'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/notifications')({
   component: NotificationsPage,
 })
 
 function NotificationsPage() {
-  const { t } = useTranslation('notifications')
   return (
     <div className="flex h-full flex-col gap-6 overflow-hidden p-6">
       <div className="flex shrink-0 flex-col gap-1">
-        <h1 className="text-xl font-semibold">{t('title')}</h1>
-        <p className="text-sm text-muted-foreground">{t('description')}</p>
+        <h1 className="text-xl font-semibold">{m.notifications_title()}</h1>
+        <p className="text-sm text-muted-foreground">{m.notifications_description()}</p>
       </div>
       <TeamNotificationsPanel />
     </div>

package/src/routes/_nav/notifications/route.tsx

@@ -1,11 +1,13 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { createFileRoute } from '@tanstack/react-router'
+import { requireSessionPage } from '@/lib/auth/page-gate'
 import type { NotificationListResult } from '@allbluecn/kernel'
 import { NOTIFICATION_LIST_KEY, NOTIFICATION_UNREAD_KEY } from '@/hooks/use-notifications'
 import { getUnreadCountFn, listNotificationsFn } from '@/server/serverFns/notifications'
 
 export const Route = createFileRoute('/_nav/notifications')({
+  beforeLoad: requireSessionPage,
   loader: async ({ context }) => {
     const { queryClient } = context
     // SSR 预取未读数 + 列表第一页，保证服务端与客户端 hydrate 首帧渲染一致

package/src/routes/_nav/notion-like/route.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,13 +17,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { PlaceholderPage } from '@/components/shared-kit/pages/placeholder-page'
 import { FileText } from 'lucide-react'
 
 function NotionLikePage() {
-  const { t } = useTranslation('common')
-  return <PlaceholderPage title={t('nav.notionEditor')} icon={FileText} />
+  return <PlaceholderPage title={m.nav_notionEditor()} icon={FileText} />
 }
 
 export const Route = createFileRoute('/_nav/notion-like')({ component: NotionLikePage })

package/src/routes/_nav/prd/$id/route.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_2 } from '@/plugins/core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd/$id')({
+  beforeLoad: ((ctx: PluginRouteContext) => prd_route_2.beforeLoad(ctx)) as any,
+  component: prd_route_2.Component as any,
+})

package/src/routes/_nav/prd/index.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_1 } from '@/plugins/core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd/')({
+  loader: ((ctx: PluginRouteContext) => prd_route_1.loader(ctx)) as any,
+  component: prd_route_1.Component as any,
+})

package/src/routes/_nav/prd/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_0 } from '@/plugins/core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd')({
+  component: prd_route_0.Component as any,
+})

package/src/routes/_nav/pricing-02/route.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,13 +17,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { PlaceholderPage } from '@/components/shared-kit/pages/placeholder-page'
 import { CreditCard } from 'lucide-react'
 
 function PricingPage() {
-  const { t } = useTranslation('common')
-  return <PlaceholderPage title={t('nav.pricing')} icon={CreditCard} />
+  return <PlaceholderPage title={m.nav_pricing()} icon={CreditCard} />
 }
 
 export const Route = createFileRoute('/_nav/pricing-02')({ component: PricingPage })

package/src/routes/_nav/projects/$projectId/$storyId/route.lazy.tsx

@@ -16,13 +16,13 @@
 // 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 { ArrowLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { PROJECT_MODULE_META } from "@/lib/project-module-meta";
 import type { ProjectModuleItem } from "@/types/project";
+import { m } from "@/paraglide/messages.js";
 
 const STATE_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
   done: "secondary",
@@ -40,35 +40,35 @@ const PRIORITY_VARIANT: Record<string, "default" | "secondary" | "outline" | "de
   none: "outline",
 };
 
-const STATE_LABEL_KEYS: Record<string, string> = {
-  backlog: "state.backlog",
-  todo: "state.todo",
-  in_progress: "state.in_progress",
-  done: "state.done",
-  cancelled: "state.cancelled",
+const STATE_LABEL_KEYS: Record<string, () => string> = {
+  backlog: m.story_state_backlog,
+  todo: m.story_state_todo,
+  in_progress: m.story_state_in_progress,
+  done: m.story_state_done,
+  cancelled: m.story_state_cancelled,
 };
 
-const PRIORITY_LABEL_KEYS: Record<string, string> = {
-  urgent: "priority.urgent",
-  high: "priority.high",
-  medium: "priority.medium",
-  low: "priority.low",
-  none: "priority.none",
+const PRIORITY_LABEL_KEYS: Record<string, () => string> = {
+  urgent: m.story_priority_urgent,
+  high: m.story_priority_high,
+  medium: m.story_priority_medium,
+  low: m.story_priority_low,
+  none: m.story_priority_none,
 };
 
-function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string, opts?: Record<string, unknown>) => string }) {
-  const stateLabel = STATE_LABEL_KEYS[item.state] ?? item.state;
+function ModuleRow({ item }: { item: ProjectModuleItem }) {
+  const stateLabel = STATE_LABEL_KEYS[item.state]?.() ?? item.state;
   return (
     <div className="flex items-center gap-4 px-4 py-3 transition-colors hover:bg-accent/40">
       <div className="min-w-0 flex-1">
         <p className="truncate text-sm font-medium">{item.title}</p>
         <p className="text-xs text-muted-foreground">
-          {t('module.assigneeLabel')}{item.assignee ?? t('module.unassigned')}
+          {m.projects_module_assigneeLabel()}{item.assignee ?? m.projects_module_unassigned()}
         </p>
       </div>
-      <Badge variant={STATE_VARIANT[item.state] ?? "outline"}>{t(`story:${stateLabel}`)}</Badge>
+      <Badge variant={STATE_VARIANT[item.state] ?? "outline"}>{stateLabel}</Badge>
       <Badge variant={PRIORITY_VARIANT[item.priority] ?? "outline"} className="hidden sm:inline-flex">
-        {t(`story:${PRIORITY_LABEL_KEYS[item.priority] ?? item.priority}`)}
+        {PRIORITY_LABEL_KEYS[item.priority]?.() ?? item.priority}
       </Badge>
       <span className="hidden text-xs text-muted-foreground md:block">
         {new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(item.updatedAt))}
@@ -79,7 +79,6 @@ function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string, opts
 }
 
 function ProjectModulePage() {
-  const { t } = useTranslation(["projects", "story"]);
   const { project, items, moduleKey } = Route.useLoaderData();
   const meta = PROJECT_MODULE_META[moduleKey];
   const Icon = meta.icon;
@@ -101,7 +100,7 @@ function ProjectModulePage() {
             <Icon className="size-5" />
           </div>
           <div>
-            <h1 className="text-xl font-semibold">{meta.title}{t('module.moduleTitle')}</h1>
+            <h1 className="text-xl font-semibold">{meta.title}{m.projects_module_moduleTitle()}</h1>
             <p className="text-sm text-muted-foreground">{meta.description}</p>
           </div>
           <div className="ml-auto flex items-center gap-2">
@@ -112,23 +111,23 @@ function ProjectModulePage() {
 
         <div className="mb-3 flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            {t('projects:module.totalItems', { count: items.length })}
+            {m.projects_module_totalItems({ count: items.length })}
           </p>
           {moduleKey === "requirement" && (
             <Badge variant="outline" className="text-muted-foreground">
-              {t('projects:module.liveBadge')}
+              {m.projects_module_liveBadge()}
             </Badge>
           )}
         </div>
 
         {items.length === 0 ? (
           <div className="rounded-lg border bg-card px-4 py-10 text-center text-sm text-muted-foreground">
-            {t('projects:module.empty')}
+            {m.projects_module_empty()}
           </div>
         ) : (
           <div className="divide-y rounded-lg border bg-card">
             {items.map((item) => (
-              <ModuleRow key={item.id} item={item} t={t} />
+              <ModuleRow key={item.id} item={item} />
             ))}
           </div>
         )}

package/src/routes/_nav/projects/$projectId/index.lazy.tsx

@@ -16,8 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, Link, useLoaderData } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
-import { Settings, LayoutGrid, Activity as ActivityIcon, CalendarRange } from "lucide-react";
+import { Settings, LayoutGrid, Activity as ActivityIcon, CalendarRange, ArrowLeft } from "lucide-react";
 import { useTheme } from "next-themes";
 import { UserAvatar } from "@/components/shared-kit";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
@@ -28,47 +27,17 @@ import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-pick
 import { ProjectModuleCard } from "@/components/project/project-module-card";
 import { ProjectActivityList } from "@/components/project/project-activity-list";
 import { PROJECT_MODULE_META, PROJECT_MODULE_KEYS } from "@/lib/project-module-meta";
-import { useMemo } from "react";
-import { formatInTimeZone } from "date-fns-tz";
-import { subDays } from "date-fns";
-import { useTimezone } from "@/providers/timezone-provider";
 import { ContributionGraphWithTooltip } from "@/components/shared-kit/data-viz/contribution-graph-tooltip";
-import type { Activity } from "@/components/kibo-ui/contribution-graph";
+import { m } from "@/paraglide/messages.js";
 
-// 将项目活动按日聚合成贡献度数据（最近 12 周，level 按单日最高值相对映射 0-4）
-function buildContributionData(
-  activities: { createdAt: Date }[],
-  timezone: string,
-): Activity[] {
-  if (activities.length === 0) return [];
-  const map = new Map<string, number>();
-  for (const a of activities) {
-    const date = formatInTimeZone(new Date(a.createdAt), timezone, "yyyy-MM-dd");
-    map.set(date, (map.get(date) ?? 0) + 1);
-  }
-  const max = Math.max(1, ...map.values());
-  const days = 12 * 7;
-  const today = new Date();
-  return Array.from({ length: days }, (_, i) => {
-    const date = formatInTimeZone(subDays(today, days - 1 - i), timezone, "yyyy-MM-dd");
-    const count = map.get(date) ?? 0;
-    return {
-      date,
-      count,
-      level:
-        count === 0 ? 0 : Math.min(4, Math.max(1, Math.ceil((count / max) * 4))),
-    };
-  });
-}
+// 贡献度数据由服务端 getProjectActivityDataFn 提供（最近 12 个月，含当前月）
 
 function ProjectDetailPage() {
-  const { t } = useTranslation('projects');
-  const { project, members, activities, moduleOverview } = useLoaderData({
+  const { project, members, activities, moduleOverview, contributionData } = useLoaderData({
     from: "/_nav/projects/$projectId",
   });
   const { resolvedTheme } = useTheme();
   const glyphColor = resolvedTheme === "dark" ? "#6b7280" : "#9ca3af";
-  const timezone = useTimezone();
 
   const modules = PROJECT_MODULE_KEYS.map((key) => ({
     ...PROJECT_MODULE_META[key],
@@ -77,10 +46,6 @@ function ProjectDetailPage() {
       ? new Date(moduleOverview[key]!.lastUpdatedAt!)
       : null,
   }));
-  const contributionData = useMemo(
-    () => buildContributionData(activities, timezone),
-    [activities, timezone],
-  );
   const visibleMembers = members.slice(0, 5);
   const extraCount = Math.max(0, members.length - visibleMembers.length);
 
@@ -89,7 +54,15 @@ function ProjectDetailPage() {
       <div className="pointer-events-none absolute inset-x-0 top-0 h-100 overflow-hidden">
         <GlyphMatrix className="absolute inset-0 h-full w-full" color={glyphColor} fadeBottom={0.9} glyphs={`01·•+*/\\<>=${project.name}`} />
       </div>
-      <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
+      <div className="relative z-10 mx-auto max-w-2xl px-6 py-6">
+        <div className="mb-4">
+          <Button variant="ghost" size="sm" asChild>
+            <Link to="/workspaces/$workspaceId" params={{ workspaceId: project.workspace!.id }}>
+              <ArrowLeft className="size-4" />
+              {m.projects_detail_back({ name: project.workspace!.name })}
+            </Link>
+          </Button>
+        </div>
         <div className="relative mb-10 mt-2 flex flex-col items-center py-10 text-center">
           <div className="absolute right-0 top-0 flex gap-2">
             <Button variant="outline" size="sm" asChild>
@@ -98,7 +71,7 @@ function ProjectDetailPage() {
                 params={{ projectId: project.id }}
               >
                 <CalendarRange className="size-4" />
-                {t('detail.iterations')}
+                {m.projects_detail_iterations()}
               </Link>
             </Button>
             <Button variant="outline" size="sm" asChild>
@@ -107,25 +80,25 @@ function ProjectDetailPage() {
                 params={{ projectId: project.id }}
               >
                 <Settings className="size-4" />
-                {t('detail.settings')}
+                {m.projects_detail_settings()}
               </Link>
             </Button>
           </div>
           <LucideIconByName name={project.icon} size={56} className="mb-4 text-primary" />
           <h1 className="text-3xl font-semibold">{project.name}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {project.description || t('detail.noDescription')}
+            {project.description || m.projects_detail_noDescription()}
           </p>
           <div className="mt-4 flex items-center gap-2">
             {visibleMembers.length > 0 && (
               <AvatarGroup>
-                {visibleMembers.map((m) => (
+                {visibleMembers.map((member) => (
                   <UserAvatar
-                    key={m.id}
-                    name={m.user?.username}
-                    avatarConfig={m.user?.avatarConfig as AvatarConfig | undefined}
-                    bgShape={m.user?.bgShape as ShapeType | undefined}
-                    bgColor={m.user?.bgColor ?? undefined}
+                    key={member.id}
+                    name={member.user?.username}
+                    avatarConfig={member.user?.avatarConfig as AvatarConfig | undefined}
+                    bgShape={member.user?.bgShape as ShapeType | undefined}
+                    bgColor={member.user?.bgColor ?? undefined}
                     size="sm"
                   />
                 ))}
@@ -139,41 +112,48 @@ function ProjectDetailPage() {
           </div>
         </div>
 
-        <div className="mb-6 w-full rounded-lg border bg-card p-4">
+        <div className="mb-6 rounded-lg border bg-card p-4">
           <div className="mb-3 flex items-center gap-2">
-            <ActivityIcon className="size-4 text-muted-foreground" />
-            <h2 className="text-base font-semibold">{t('detail.activity')}</h2>
+            <LayoutGrid className="size-4 text-muted-foreground" />
+            <h2 className="text-base font-semibold">{m.projects_detail_knowledgeBase()}</h2>
           </div>
-          {contributionData.length > 0 ? (
-            <ContributionGraphWithTooltip data={contributionData} className="w-full" />
-          ) : (
-            <p className="py-6 text-center text-sm text-muted-foreground">{t('detail.noContributions')}</p>
-          )}
+          <p className="py-4 text-center text-sm text-muted-foreground">功能开发中</p>
         </div>
 
         <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <div className="mb-4 flex items-center gap-2">
-              <LayoutGrid className="size-4 text-muted-foreground" />
-              <h2 className="text-lg font-semibold">{t('detail.modulesTitle')}</h2>
+          <div className="lg:col-span-2 space-y-6">
+            <div className="rounded-lg border bg-card p-4">
+              <ContributionGraphWithTooltip
+                data={contributionData}
+                className="w-full"
+                title={m.projects_detail_activity()}
+                icon={<ActivityIcon className="size-4 text-muted-foreground" />}
+              />
             </div>
-            <div className="grid gap-4 sm:grid-cols-2">
-              {modules.map((module) => (
-                <ProjectModuleCard
-                  key={module.key}
-                  module={module}
-                  projectId={project.id}
-                />
-              ))}
+
+            <div>
+              <div className="mb-4 flex items-center gap-2">
+                <LayoutGrid className="size-4 text-muted-foreground" />
+                <h2 className="text-base font-semibold">{m.projects_detail_modulesTitle()}</h2>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                {modules.map((module) => (
+                  <ProjectModuleCard
+                    key={module.key}
+                    module={module}
+                    projectId={project.id}
+                  />
+                ))}
+              </div>
             </div>
           </div>
 
           <div className="lg:col-span-1">
-            <div className="mb-4 flex items-center gap-2">
-              <ActivityIcon className="size-4 text-muted-foreground" />
-              <h2 className="text-lg font-semibold">{t('detail.recentActivity')}</h2>
-            </div>
-            <div className="rounded-lg border bg-card p-4">
+            <div className="sticky top-6 rounded-lg border bg-card p-4">
+              <div className="mb-4 flex items-center gap-2">
+                <ActivityIcon className="size-4 text-muted-foreground" />
+                <h2 className="text-base font-semibold">{m.projects_detail_recentActivity()}</h2>
+              </div>
               <ProjectActivityList activities={activities} />
             </div>
           </div>