@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/story/detail/story-detail-toolbar/dependency-panel.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { Plus, ChevronDown, ChartNoAxesGantt } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -39,6 +38,18 @@ import { StoryRefRow } from "../../relations/story-ref-row";
 import type { DisplayOptions, GroupNode } from "../../display/types";
 import type { StoryPatch } from "../../display/group-fields";
 import type { RelationsData, UserBrief, DependencyRow } from "../../types";
+import { m } from "@/paraglide/messages.js";
+
+const DEPENDENCY_ERROR_LABELS: Record<string, () => string> = {
+  CYCLE: m.story_dependency_errors_CYCLE,
+  DUPLICATED: m.story_dependency_errors_DUPLICATED,
+  SELF: m.story_dependency_errors_SELF,
+}
+
+const SECTION_TITLE_LABELS: Record<string, () => string> = {
+  "dependency.dependsOnTitle": m.story_dependency_dependsOnTitle,
+  "dependency.dependentsTitle": m.story_dependency_dependentsTitle,
+}
 
 type DependencySection = "dependsOn" | "dependents";
 
@@ -78,7 +89,6 @@ export function StoryDetailDependencyPanel({
   onAppendActivities,
   onNavigateInPanel,
 }: StoryDetailDependencyPanelProps) {
-  const { t } = useTranslation("story");
   const removeDependency = useServerFn(removeDependencyFn);
   const updateDependency = useServerFn(updateDependencyFn);
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
@@ -169,7 +179,7 @@ export function StoryDetailDependencyPanel({
         .filter((a) => a.storyId === storyId)
         .map(({ storyId: _sid, ...rest }) => rest);
       if (mine.length > 0) onAppendActivities?.(mine);
-      toast.success(t("dependency.removed"));
+      toast.success(m.story_dependency_removed());
       applyRowsUpdate((rows) => rows.filter((r) => r.id !== rowId), group);
       setSelectedIds((prev) => {
         const next = new Set(prev);
@@ -177,7 +187,7 @@ export function StoryDetailDependencyPanel({
         return next;
       });
     } catch (e) {
-      toast.error(isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.removeFailed"));
+      toast.error(isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_removeFailed());
     }
   };
 
@@ -192,14 +202,14 @@ export function StoryDetailDependencyPanel({
     try {
       const res = await updateDependency({ data: { depId: row.depId, ...edge } });
       if (!res.ok) {
-        toast.warning(t(`dependency.errors.${res.reason}`));
+        toast.warning(DEPENDENCY_ERROR_LABELS[res.reason]?.() ?? res.reason);
         return;
       }
       const mine = (res.activities ?? [])
         .filter((a) => a.storyId === storyId)
         .map(({ storyId: _sid, ...rest }) => rest);
       if (mine.length > 0) onAppendActivities?.(mine);
-      toast.success(t("dependency.updated"));
+      toast.success(m.story_dependency_updated());
       // 行的 group 跟随 option 方向：同 group 原地更新，跨 group 移动到另一 section
       const oldGroup: DependencySection = data.dependsOn.some((r) => r.id === otherStoryId)
         ? "dependsOn"
@@ -216,7 +226,7 @@ export function StoryDetailDependencyPanel({
       }
     } catch (e) {
       toast.error(
-        isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.updateFailed"),
+        isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_updateFailed(),
       );
     }
   };
@@ -235,11 +245,11 @@ export function StoryDetailDependencyPanel({
           if (mine.length > 0) onAppendActivities?.(mine);
         }
       }
-      toast.success(t("dependency.removed"));
+      toast.success(m.story_dependency_removed());
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error(isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.removeFailed"));
+      toast.error(isNetworkError(e) ? m.story_dependency_networkFailed() : (e as Error)?.message || m.story_dependency_removeFailed());
     } finally {
       setBusy(false);
     }
@@ -253,13 +263,13 @@ export function StoryDetailDependencyPanel({
       const res = await bulkArchiveStoriesFn({ data: { storyIds: ids } });
       toast.success(
         res.skipped > 0
-          ? t("children.bulkArchivedSkipped", { archived: res.archived, skipped: res.skipped })
-          : t("children.bulkArchived", { count: res.archived }),
+          ? m.story_children_bulkArchivedSkipped({ archived: res.archived, skipped: res.skipped })
+          : m.story_children_bulkArchived({ count: res.archived }),
       );
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.archiveFailed"));
+      toast.error((e as Error)?.message || m.story_children_archiveFailed());
     } finally {
       setBusy(false);
     }
@@ -271,11 +281,11 @@ export function StoryDetailDependencyPanel({
     setBusy(true);
     try {
       const res = await bulkDeleteStoriesFn({ data: { storyIds: ids } });
-      toast.success(t("children.bulkDeleted", { count: res.deleted }));
+      toast.success(m.story_children_bulkDeleted({ count: res.deleted }));
       setSelectedIds(new Set());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.deleteFailed"));
+      toast.error((e as Error)?.message || m.story_children_deleteFailed());
     } finally {
       setBusy(false);
     }
@@ -287,10 +297,10 @@ export function StoryDetailDependencyPanel({
     try {
       await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
       setSelectedIds(new Set());
-      toast.success(t("dependency.bulkUpdated"));
+      toast.success(m.story_dependency_bulkUpdated());
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.bulkUpdateFailed"));
+      toast.error((e as Error)?.message || m.story_children_bulkUpdateFailed());
     } finally {
       setBusy(false);
     }
@@ -365,7 +375,7 @@ export function StoryDetailDependencyPanel({
       onToggle={toggleStory}
       onOpenStory={handleOpenStory}
       onRemove={handleRemoveRow}
-      removeMenuLabel={t("dependency.remove")}
+      removeMenuLabel={m.story_dependency_remove()}
       dependencyMeta={{ depType: row.depType, group }}
       onDependencyTypeChange={handleDependencyTypeChange}
       currentIdentifier={storyIdentifier}
@@ -426,7 +436,7 @@ export function StoryDetailDependencyPanel({
         <CollapsibleTrigger asChild>
           <div className="flex h-9 cursor-pointer select-none items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
             <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
-            <span>{t(titleKey)}</span>
+            <span>{SECTION_TITLE_LABELS[titleKey]?.() ?? titleKey}</span>
             <span className="ml-1 text-xs text-muted-foreground">{rows.length}</span>
           </div>
         </CollapsibleTrigger>
@@ -434,7 +444,7 @@ export function StoryDetailDependencyPanel({
           {rows.length === 0 ? (
             <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
               <span className="w-4 shrink-0" aria-hidden />
-              {t("relation.none")}
+              {m.story_relation_none()}
             </p>
           ) : filters.groupBy === "none" ? (
             rows.map((row) => renderRow(row, sectionKey))
@@ -463,7 +473,7 @@ export function StoryDetailDependencyPanel({
           }}
         >
           <div className="flex items-center gap-1.5">
-            <span>{t("relations.dependency")}</span>
+            <span>{m.story_relations_dependency()}</span>
             <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {totalCount}
             </span>

package/src/components/story/detail/story-detail-toolbar.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { useServerFn } from "@tanstack/react-start";
 import { toast } from "sonner";
 import { LinkIcon, Paperclip, BookOpenText } from "lucide-react";
@@ -38,6 +37,13 @@ import { CreateStoryDialog } from "../create-story-dialog";
 import { addDependenciesFn, getDependenciesFn, listChildStoriesFn } from "@/server/serverFns/story";
 import { DEPENDENCY_TYPE_OPTIONS, toDependencyEdge, type DependencyTypeOption } from "../constants";
 import type { RelationsData, UserBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
+
+const DEPENDENCY_ERROR_LABELS: Record<string, () => string> = {
+  CYCLE: m.story_dependency_errors_CYCLE,
+  DUPLICATED: m.story_dependency_errors_DUPLICATED,
+  SELF: m.story_dependency_errors_SELF,
+}
 
 interface StoryDetailToolbarProps {
   storyId: string;
@@ -55,7 +61,6 @@ interface StoryDetailToolbarProps {
 }
 
 export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data, onRefresh, onAppendActivities, users, projects, labels, onNavigateInPanel }: StoryDetailToolbarProps) {
-  const { t } = useTranslation("story");
   const [actionOpen, setActionOpen] = React.useState<"create" | "select" | null>(null);
   const [dependencyDialogOpen, setDependencyDialogOpen] = React.useState(false);
   const [assocDialogOpen, setAssocDialogOpen] = React.useState<AssociatedDialogKind | null>(null);
@@ -90,21 +95,21 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
     try {
       const res = await addDependencies({ data: { items } });
       if (res.created.length > 0) {
-        toast.success(t("dependency.added", { count: res.created.length }));
+        toast.success(m.story_dependency_added({ count: res.created.length }));
         const mine = res.activities
           .filter((a) => a.storyId === storyId)
           .map(({ storyId: _sid, ...rest }) => rest);
         if (mine.length > 0) onAppendActivities?.(mine);
       }
       if (res.failed.length > 0) {
-        const reasons = [...new Set(res.failed.map((f) => t(`dependency.errors.${f.reason}`)))].join("、");
-        toast.warning(t("dependency.addPartialFailed", { failed: res.failed.length, reasons }));
+        const reasons = [...new Set(res.failed.map((f) => DEPENDENCY_ERROR_LABELS[f.reason]?.() ?? f.reason))].join("、");
+        toast.warning(m.story_dependency_addPartialFailed({ failed: res.failed.length, reasons }));
       } else {
         setDependencyDialogOpen(false);
       }
       refreshDependencies();
     } catch (e) {
-      toast.error((e as Error)?.message || t("dependency.addFailed"));
+      toast.error((e as Error)?.message || m.story_dependency_addFailed());
     }
   };
 
@@ -194,7 +199,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
           onClick={() => handleOpenAssocDialog("link")}
         >
           <LinkIcon className="size-3.5 text-muted-foreground" />
-          {t("linkDialog.button")}
+          {m.story_linkDialog_button()}
           {data.links.length > 0 && (
             <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {data.links.length}
@@ -208,7 +213,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
           onClick={() => handleOpenAssocDialog("attachment")}
         >
           <Paperclip className="size-3.5 text-muted-foreground" />
-          {t("attachmentDialog.button")}
+          {m.story_attachmentDialog_button()}
           {data.attachments.length > 0 && (
             <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {data.attachments.length}
@@ -222,7 +227,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
           onClick={() => handleOpenAssocDialog("knowledge")}
         >
           <BookOpenText className="size-3.5 text-muted-foreground" />
-          {t("knowledgeDialog.button")}
+          {m.story_knowledgeDialog_button()}
           {data.knowledge.docs.length > 0 && (
             <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {data.knowledge.docs.length}
@@ -280,7 +285,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         projects={projects ?? []}
         initialProjectId={projectId ?? undefined}
         mode="child"
-        title={t("children.selectChild")}
+        title={m.story_children_selectChild()}
         defaultSelectedParentIds={data.hierarchy.children.map((c) => c.id)}
         onSelected={() => {
           setActionOpen(null);
@@ -298,7 +303,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         initialProjectId={projectId ?? undefined}
         mode="dependency"
         skipTransfer
-        title={t("dependency.add")}
+        title={m.story_dependency_add()}
         excludeIds={dependencyExcludeIds}
         dependencyType={dependencyType}
         onDependencyTypeChange={setDependencyType}

package/src/components/story/detail/story-properties.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { GitPullRequestArrow, Tag, CalendarRange } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { ChevronDown } from "lucide-react";
 import type { StoryState } from "../constants";
@@ -25,6 +24,7 @@ import { ParentStoryEditor } from "../inline-editors/parent-story-editor";
 import { LabelsEditor } from "../inline-editors/labels-editor";
 import { IterationEditor } from "@/components/iteration/iteration-editor";
 import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import { m } from "@/paraglide/messages.js";
 
 interface PropertyItemProps {
   icon: React.ReactNode;
@@ -74,19 +74,18 @@ export function StoryProperties({
   onIterationChange,
   onActivities,
 }: StoryPropertiesProps) {
-  const { t } = useTranslation("story");
   return (
     <Collapsible defaultOpen>
-      <div className="px-6 py-4 text-sm font-semibold">{t("properties.title")}</div>
+      <div className="px-6 py-4 text-sm font-semibold">{m.story_properties_title()}</div>
       <CollapsibleContent className="px-6 pb-2 space-y-2">
         <Collapsible defaultOpen>
           <CollapsibleTrigger className="flex select-none items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
-            {t("properties.basic")}
+            {m.story_properties_basic()}
             <ChevronDown className="size-3" />
           </CollapsibleTrigger>
           <CollapsibleContent className="space-y-2 pb-2">
             {projects && (
-              <PropertyItem icon={<GitPullRequestArrow className="size-3.5" />} label={t("properties.parent")}>
+              <PropertyItem icon={<GitPullRequestArrow className="size-3.5" />} label={m.story_properties_parent()}>
                 <ParentStoryEditor
                   parentId={story.parentId}
                   parent={story.parent}
@@ -101,7 +100,7 @@ export function StoryProperties({
               </PropertyItem>
             )}
             {labels && (
-              <PropertyItem icon={<Tag className="size-3.5" />} label={t("properties.labels")}>
+              <PropertyItem icon={<Tag className="size-3.5" />} label={m.story_properties_labels()}>
                 <LabelsEditor
                   labelIds={story.labels.map((l) => l.id)}
                   labels={labels}
@@ -115,11 +114,11 @@ export function StoryProperties({
         </Collapsible>
         <Collapsible>
           <CollapsibleTrigger className="flex select-none items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
-            {t("properties.iteration")}
+            {m.story_properties_iteration()}
             <ChevronDown className="size-3" />
           </CollapsibleTrigger>
           <CollapsibleContent className="pb-2">
-            <PropertyItem icon={<CalendarRange className="size-3.5" />} label={t("properties.iteration")}>
+            <PropertyItem icon={<CalendarRange className="size-3.5" />} label={m.story_properties_iteration()}>
               <IterationEditor
                 storyId={story.id}
                 current={story.iteration ?? null}

package/src/components/story/display/__tests__/display-dropdown.test.tsx

@@ -17,8 +17,6 @@
 
 import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
 import { render, screen, fireEvent, within } from "@testing-library/react";
-import { I18nextProvider } from "react-i18next";
-import { createServerI18n } from "@/i18n/server";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DisplayDropdown } from "../display-dropdown";
 import { DEFAULT_DISPLAY_OPTIONS } from "../types";
@@ -29,6 +27,8 @@ vi.mock("@/components/billing/use-feature", () => ({
   useFeature: vi.fn(),
 }));
 
+;
+
 import { useFeature } from "@/components/billing/use-feature";
 
 const mockUseFeature = useFeature as ReturnType<typeof vi.fn>;
@@ -44,10 +44,8 @@ beforeAll(() => {
   Element.prototype.scrollIntoView = () => {};
 });
 
-const i18n = createServerI18n("zh");
-
 const renderWithTooltip = (ui: React.ReactElement) =>
-  render(<I18nextProvider i18n={i18n}><TooltipProvider>{ui}</TooltipProvider></I18nextProvider>);
+  render(<TooltipProvider>{ui}</TooltipProvider>);
 
 const makeFilters = (over: Partial<DisplayOptions> = {}): DisplayOptions => ({
   ...DEFAULT_DISPLAY_OPTIONS,

package/src/components/story/display/__tests__/use-paged-story-groups.test.ts

@@ -29,6 +29,8 @@ const h = vi.hoisted(() => ({
 
 vi.mock("@/server/serverFns/story", () => h);
 
+;
+
 import { usePagedStoryGroups } from "../use-paged-story-groups";
 
 const makeStory = (over: Partial<StoryListItem> & { id: string }): StoryListItem => ({

package/src/components/story/display/constants.ts

@@ -17,39 +17,40 @@
 
 import { CircleDotDashed, ArrowUpDown, User, Tag, UserPlus, Trees, X, CircleFadingArrowUp, ArrowDownUp, Plus, RefreshCw, CalendarPlus2, CalendarCheck, Hash, GitBranch, Paperclip, LayoutList, FolderKanban, type LucideIcon } from "lucide-react";
 import type { StoryView } from "../views/view-switcher";
+import { m } from '@/paraglide/messages.js';
 import type { GroupKey, OrderKey, DisplayProperty } from "./types";
 import { ALL_DISPLAY_PROPERTIES } from "./types";
 
-export const GROUP_LABELS: Record<GroupKey, string> = {
-  state: "group.state",
-  priority: "group.priority",
-  assignee: "group.assignee",
-  labels: "group.labels",
-  createdBy: "group.createdBy",
-  project: "group.project",
-  none: "group.none",
+export const GROUP_LABELS: Record<GroupKey, () => string> = {
+  state: m.story_display_group_state,
+  priority: m.story_display_group_priority,
+  assignee: m.story_display_group_assignee,
+  labels: m.story_display_group_labels,
+  createdBy: m.story_display_group_createdBy,
+  project: m.story_display_group_project,
+  none: m.story_display_group_none,
 };
 
-export const ORDER_LABELS: Record<OrderKey, string> = {
-  manual: "order.manual",
-  created: "order.created",
-  updated: "order.updated",
-  startDate: "order.startDate",
-  dueDate: "order.dueDate",
-  priority: "order.priority",
+export const ORDER_LABELS: Record<OrderKey, () => string> = {
+  manual: m.story_display_order_manual,
+  created: m.story_display_order_created,
+  updated: m.story_display_order_updated,
+  startDate: m.story_display_order_startDate,
+  dueDate: m.story_display_order_dueDate,
+  priority: m.story_display_order_priority,
 };
 
-export const PROPERTY_LABELS: Record<DisplayProperty, string> = {
-  id: "property.id",
-  project: "property.project",
-  assignee: "property.assignee",
-  startDate: "property.startDate",
-  dueDate: "property.dueDate",
-  labels: "property.labels",
-  priority: "property.priority",
-  state: "property.state",
-  subCount: "property.subCount",
-  attachmentCount: "property.attachmentCount",
+export const PROPERTY_LABELS: Record<DisplayProperty, () => string> = {
+  id: m.story_display_property_id,
+  project: m.story_display_property_project,
+  assignee: m.story_display_property_assignee,
+  startDate: m.story_display_property_startDate,
+  dueDate: m.story_display_property_dueDate,
+  labels: m.story_display_property_labels,
+  priority: m.story_display_property_priority,
+  state: m.story_display_property_state,
+  subCount: m.story_display_property_subCount,
+  attachmentCount: m.story_display_property_attachmentCount,
 };
 
 export const GROUP_ICONS: Record<GroupKey, LucideIcon> = {

package/src/components/story/display/display-dropdown.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useMemo, useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { ArrowDownNarrowWide, ArrowUpWideNarrow, ChartNoAxesGantt, Check, ChevronRight, ChevronDown, Lock, type LucideIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
@@ -34,6 +33,7 @@ import type { StoryView } from "../views/view-switcher";
 import { DEFAULT_DISPLAY_OPTIONS, GROUP_KEYS, ORDER_KEYS, PAGE_SIZE_OPTIONS, type DisplayOptions, type DisplayProperty, type GroupKey, type OrderDirection, type OrderKey, type PageSize } from "./types";
 import { GROUP_LABELS, ORDER_LABELS, PROPERTY_LABELS, LAYOUT_SUPPORT, LAYOUT_PROPERTIES, GROUP_ICONS, ORDER_ICONS } from "./constants";
 import { implementedModules } from "@/plugins/modules.gen";
+import { m } from "@/paraglide/messages.js";
 
 /** 分组选项：布局不支持分组时返回空数组；选中特定项目时隐藏"项目"分组 */
 export function getGroupOptions(layout: StoryView, projectId?: string): GroupKey[] {
@@ -102,7 +102,6 @@ export interface DisplayDropdownProps {
 }
 
 export function DisplayDropdown({ filters, onChange, layout, projectId, projects, views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView, pageSize, onPageSizeChange }: DisplayDropdownProps) {
-  const { t } = useTranslation("display");
   const support = LAYOUT_SUPPORT[layout];
   const changed = useMemo(() => hasDisplayChanges(filters, layout), [filters, layout]);
 
@@ -114,7 +113,7 @@ export function DisplayDropdown({ filters, onChange, layout, projectId, projects
             <Button
               variant="outline"
               size="sm"
-              aria-label={t("displayOptions")}
+              aria-label={m.display_displayOptions()}
               className={cn(
                 "relative h-8 gap-1.5 px-2.5 text-sm font-normal",
                 changed && "border-primary/50 bg-primary/5 text-primary",
@@ -130,7 +129,7 @@ export function DisplayDropdown({ filters, onChange, layout, projectId, projects
             </Button>
           </TooltipTrigger>
         </PopoverTrigger>
-        <TooltipContent side="bottom">{t("viewGrouping")}</TooltipContent>
+        <TooltipContent side="bottom">{m.display_viewGrouping()}</TooltipContent>
       </Tooltip>
       <PopoverContent className="w-75 p-0" align="start">
         <div className="max-h-[70vh] overflow-y-auto">
@@ -171,7 +170,6 @@ export interface DisplayOptionsBodyProps {
 }
 
 export function DisplayOptionsBody({ filters, onChange, layout, projectId, pageSize, onPageSizeChange, showSubItems, beforeOptions }: DisplayOptionsBodyProps) {
-  const { t } = useTranslation("display");
   const support = LAYOUT_SUPPORT[layout];
   const showEmptyGroups = support.options && support.groupBy;
   const showSubItemsEnabled = showSubItems ?? layout === "list";
@@ -183,28 +181,27 @@ export function DisplayOptionsBody({ filters, onChange, layout, projectId, pageS
           selected={filters.properties}
           onChange={(props) => onChange({ properties: props })}
           layout={layout}
-          t={t}
         />
       )}
       {support.groupBy && (
         <InlineRadioSection
           dataSection="groupBy"
-          label={t("group")}
+          label={m.display_group()}
           value={filters.groupBy}
           optionKeys={getGroupOptions(layout, projectId)}
           iconMap={GROUP_ICONS as Record<string, LucideIcon>}
-          labelMap={GROUP_LABELS as Record<string, string>}
+          labelMap={GROUP_LABELS}
           onSelect={(v) => onChange({ groupBy: v as GroupKey })}
         />
       )}
       {support.subGroupBy && (
         <InlineRadioSection
           dataSection="subGroupBy"
-          label={t("subGroup")}
+          label={m.display_subGroup()}
           value={filters.subGroupBy}
           optionKeys={getSubGroupOptions(layout, filters.groupBy, projectId)}
           iconMap={GROUP_ICONS as Record<string, LucideIcon>}
-          labelMap={GROUP_LABELS as Record<string, string>}
+          labelMap={GROUP_LABELS}
           disabled={filters.groupBy === "none"}
           onSelect={(v) => onChange({ subGroupBy: v as GroupKey })}
         />
@@ -212,11 +209,11 @@ export function DisplayOptionsBody({ filters, onChange, layout, projectId, pageS
       {support.orderBy && (
         <InlineRadioSection
           dataSection="orderBy"
-          label={t("order")}
+          label={m.display_order()}
           value={filters.orderBy}
           optionKeys={getOrderOptions(layout)}
           iconMap={ORDER_ICONS as Record<string, LucideIcon>}
-          labelMap={ORDER_LABELS as Record<string, string>}
+          labelMap={ORDER_LABELS}
           onSelect={(v) => onChange({ orderBy: v as OrderKey })}
           orderDir={filters.orderDir}
           onOrderDirChange={(dir) => onChange({ orderDir: dir })}
@@ -244,7 +241,7 @@ interface InlineRadioSectionProps {
   value: string;
   optionKeys: string[];
   iconMap: Record<string, LucideIcon>;
-  labelMap: Record<string, string>;
+  labelMap: Record<string, () => string>;
   disabled?: boolean;
   onSelect: (value: string) => void;
   orderDir?: OrderDirection;
@@ -263,11 +260,10 @@ function InlineRadioSection({
   orderDir,
   onOrderDirChange,
 }: InlineRadioSectionProps) {
-  const { t } = useTranslation("display");
   const [collapsed, setCollapsed] = useState(false);
   const options = optionKeys.map((k) => ({
     value: k,
-    label: t(labelMap[k] ?? k),
+    label: labelMap[k]?.() ?? k,
     icon: iconMap[k],
   }));
 
@@ -291,7 +287,7 @@ function InlineRadioSection({
                 variant="ghost"
                 size="sm"
                 data-testid="order-dir-asc"
-                aria-label={t("asc")}
+                aria-label={m.display_asc()}
                 className={cn(
                   "size-6  rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
                   orderDir === "asc" && "bg-muted text-foreground",
@@ -306,7 +302,7 @@ function InlineRadioSection({
                 variant="ghost"
                 size="sm"
                 data-testid="order-dir-desc"
-                aria-label={t("desc")}
+                aria-label={m.display_desc()}
                 className={cn(
                   "size-6  rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
                   orderDir === "desc" && "bg-muted text-foreground",
@@ -360,10 +356,9 @@ interface PropertiesSectionProps {
   selected: DisplayProperty[];
   onChange: (props: DisplayProperty[]) => void;
   layout: StoryView;
-  t: (key: string) => string;
 }
 
-function PropertiesSection({ selected, onChange, layout, t }: PropertiesSectionProps) {
+function PropertiesSection({ selected, onChange, layout }: PropertiesSectionProps) {
   const [collapsed, setCollapsed] = useState(false);
   const available = LAYOUT_PROPERTIES[layout];
   const toggle = (prop: DisplayProperty) => {
@@ -384,7 +379,7 @@ function PropertiesSection({ selected, onChange, layout, t }: PropertiesSectionP
         className="mb-1.5 flex w-full items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
       >
         {collapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
-        {t("showProperties")}
+        {m.display_showProperties()}
       </button>
       {!collapsed && (
         <div className="flex flex-wrap gap-1.5">
@@ -402,7 +397,7 @@ function PropertiesSection({ selected, onChange, layout, t }: PropertiesSectionP
                     : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
                 )}
               >
-                {t(PROPERTY_LABELS[prop])}
+                {PROPERTY_LABELS[prop]?.() ?? prop}
               </button>
             );
           })}
@@ -431,7 +426,6 @@ function OptionsSection({
   pageSize,
   onPageSizeChange,
 }: OptionsSectionProps) {
-  const { t } = useTranslation("display");
   // OSS 环境（billing 模块未实现）只显示 100/200；Pro 环境显示全部
   const sizeOptions = implementedModules.billing
     ? (PAGE_SIZE_OPTIONS as readonly PageSize[])
@@ -445,21 +439,21 @@ function OptionsSection({
   return (
     <div data-section="options" className="border-t px-3 py-2">
       <div className="flex items-center justify-between gap-2 py-0.5">
-        <span className="text-xs font-medium text-foreground">{t("extraOptions")}</span>
+        <span className="text-xs font-medium text-foreground">{m.display_extraOptions()}</span>
       </div>
       <div className="mt-1 flex flex-col gap-1">
         <label className="flex cursor-pointer items-center justify-between py-1">
-          <span className="text-xs text-muted-foreground">{t("showEmptyGroups")}</span>
+          <span className="text-xs text-muted-foreground">{m.display_showEmptyGroups()}</span>
           <Switch checked={showEmptyGroups} onCheckedChange={onShowEmptyChange} size="sm" />
         </label>
         {showSubItemsSupported && (
           <label className="flex cursor-pointer items-center justify-between py-1">
-            <span className="text-xs text-muted-foreground">{t("showSubItems")}</span>
+            <span className="text-xs text-muted-foreground">{m.display_showSubItems()}</span>
             <Switch checked={showSubItems} onCheckedChange={onShowSubChange} size="sm" />
           </label>
         )}
         <div className="flex items-center justify-between py-1">
-          <span className="text-xs text-muted-foreground">{t("pageSize")}</span>
+          <span className="text-xs text-muted-foreground">{m.display_pageSize()}</span>
           <div className="flex items-center gap-0.5 rounded border border-border p-0.5">
             {sizeOptions.map((v) => {
               const locked = isPageSizeLocked(v);