awaioi/MiragenFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): implement internationalization framework and update UI components for language support

Browse Source
This commit is contained in:
HouYunFei
2026-08-05 14:08:03 +08:00
parent 9bccd0ff1a
commit 0f6809251a
116 changed files with 3269 additions and 1870 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/canvas/canvas-node-split-dialog.tsx
+25 -23
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
import { Button, InputNumber, Modal, Tooltip } from "antd";
import { Grid2x2, ListRestart, PanelTop, Redo2, Rows3, Trash2, Undo2, ZoomIn, ZoomOut } from "lucide-react";
import { useTranslation } from "react-i18next";
import { readImageMeta } from "@/lib/image-utils";
import type { ImageSplitParams } from "@/lib/canvas/canvas-image-data";
@@ -13,6 +14,7 @@ const maxGridSize = 12;
type ActiveLine = { axis: "horizontal" | "vertical"; index: number } | null;
export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { dataUrl: string; open: boolean; onClose: () => void; onConfirm: (params: CanvasImageSplitParams) => void }) {
const { t } = useTranslation();
const [params, setParams] = useState(defaultParams);
const [image, setImage] = useState<{ width: number; height: number } | null>(null);
const [active, setActive] = useState<ActiveLine>(null);
@@ -149,9 +151,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
<Modal title={null} open={open && Boolean(dataUrl)} onCancel={onClose} footer={null} width={780} centered destroyOnHidden transitionName="" maskTransitionName="">
<div className="space-y-5" data-canvas-no-zoom>
<div>
<h2 className="text-xl font-semibold">切分图片</h2>
<p className="mt-1 text-sm opacity-60">生成 {total} 个图片子节点，并按原图网格排列到画布右侧</p>
<p className="mt-2 text-xs leading-5 opacity-55">滚轮缩放 · 中键或空格+左键拖动画面 · Delete 删除选中线 · Ctrl/Cmd+Z 撤回 · Ctrl/Cmd+Shift+Z 重做</p>
<h2 className="text-xl font-semibold">{t("canvas.editors.splitTitle")}</h2>
<p className="mt-1 text-sm opacity-60">{t("canvas.editors.splitDescription", { count: total })}</p>
<p className="mt-2 text-xs leading-5 opacity-55">{t("canvas.editors.splitHint")}</p>
</div>
<div className="grid gap-6 md:grid-cols-[minmax(260px,1fr)_280px]">
<div className="rounded-xl border p-4">
@@ -171,54 +173,54 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
</div>
<div className="mt-3 flex items-center justify-between text-sm">
<div className="flex items-center gap-1">
<Tooltip title="撤回切图调整 (Ctrl/Cmd+Z)">
<Button type="text" icon={<Undo2 className="size-4" />} disabled={!historySize} aria-label="撤回切图调整" onClick={undoSplit} />
<Tooltip title={t("canvas.editors.undoSplitTitle")}>
<Button type="text" icon={<Undo2 className="size-4" />} disabled={!historySize} aria-label={t("canvas.editors.undoSplit")} onClick={undoSplit} />
</Tooltip>
<Tooltip title="重做切图调整 (Ctrl/Cmd+Shift+Z)">
<Button type="text" icon={<Redo2 className="size-4" />} disabled={!redoSize} aria-label="重做切图调整" onClick={redoSplit} />
<Tooltip title={t("canvas.editors.redoSplitTitle")}>
<Button type="text" icon={<Redo2 className="size-4" />} disabled={!redoSize} aria-label={t("canvas.editors.redoSplit")} onClick={redoSplit} />
</Tooltip>
<Tooltip title="缩小">
<Button type="text" icon={<ZoomOut className="size-4" />} disabled={!viewport.canZoomOut} aria-label="缩小" onClick={viewport.zoomOut} />
<Tooltip title={t("canvas.editors.zoomOut")}>
<Button type="text" icon={<ZoomOut className="size-4" />} disabled={!viewport.canZoomOut} aria-label={t("canvas.editors.zoomOut")} onClick={viewport.zoomOut} />
</Tooltip>
<button type="button" className="min-w-14 text-center text-xs font-semibold tabular-nums opacity-70" onClick={viewport.resetZoom}>
{Math.round(viewport.zoom * 100)}%
</button>
<Tooltip title="放大">
<Button type="text" icon={<ZoomIn className="size-4" />} disabled={!viewport.canZoomIn} aria-label="放大" onClick={viewport.zoomIn} />
<Tooltip title={t("canvas.editors.zoomIn")}>
<Button type="text" icon={<ZoomIn className="size-4" />} disabled={!viewport.canZoomIn} aria-label={t("canvas.editors.zoomIn")} onClick={viewport.zoomIn} />
</Tooltip>
</div>
<span className="font-semibold">{image ? `${image.width} x ${image.height} px` : "读取中"}</span>
<span className="font-semibold">{image ? `${image.width} x ${image.height} px` : t("canvas.editors.loading")}</span>
</div>
</div>
<div className="space-y-5 py-2">
<NumberField label="行数" value={rows} onChange={(value) => update("rows", value)} />
<NumberField label="列数" value={columns} onChange={(value) => update("columns", value)} />
<NumberField label={t("canvas.editors.rows")} value={rows} onChange={(value) => update("rows", value)} />
<NumberField label={t("canvas.editors.columns")} value={columns} onChange={(value) => update("columns", value)} />
<div className="grid grid-cols-2 gap-2">
<Button icon={<Rows3 className="size-4" />} onClick={() => addLine("horizontal")}>
横向线
{t("canvas.editors.horizontalLine")}
</Button>
<Button icon={<PanelTop className="size-4 rotate-90" />} onClick={() => addLine("vertical")}>
纵向线
{t("canvas.editors.verticalLine")}
</Button>
<Button icon={<Trash2 className="size-4" />} disabled={!active} onClick={deleteLine}>
删除线
{t("canvas.editors.deleteLine")}
</Button>
<Button icon={<ListRestart className="size-4" />} onClick={resetLines}>
重置线
{t("canvas.editors.resetLines")}
</Button>
</div>
<div className="rounded-xl border px-4 py-3 text-sm">
<div className="flex items-center justify-between">
<span className="opacity-60">切片数量</span>
<span className="font-semibold">{total} 个</span>
<span className="opacity-60">{t("canvas.editors.pieceCount")}</span>
<span className="font-semibold">{t("canvas.editors.pieces", { count: total })}</span>
</div>
<div className="mt-2 flex items-center justify-between">
<span className="opacity-60">平均约</span>
<span className="font-semibold">{pieceSize ? `${pieceSize.width} x ${pieceSize.height}` : "未知"}</span>
<span className="opacity-60">{t("canvas.editors.averageSize")}</span>
<span className="font-semibold">{pieceSize ? `${pieceSize.width} x ${pieceSize.height}` : t("canvas.editors.unknown")}</span>
</div>
</div>
<Button type="primary" size="large" className="w-full" icon={<Grid2x2 className="size-4" />} onClick={() => onConfirm(confirmParams)}>
生成子节点
{t("canvas.editors.generateChildren")}
</Button>
</div>
</div>