diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx index f1cb9dda2..a3831bc00 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx @@ -3,6 +3,7 @@ import { ChevronDown, ChevronUp, Crosshair, + Info, LockKeyhole, Maximize2, Move, @@ -36,16 +37,16 @@ type AnchorPreset = { const AXIS_LABELS = ['X', 'Y'] as const; const AXIS_MODE_LABELS: Record = { - left: 'Left', - center: 'Center', - right: 'Right', - stretch: 'Stretch', + left: '左侧', + center: '居中', + right: '右侧', + stretch: '拉伸', }; const ROW_MODE_LABELS: Record = { - left: 'Top', - center: 'Middle', - right: 'Bottom', - stretch: 'Stretch', + left: '顶部', + center: '居中', + right: '底部', + stretch: '拉伸', }; const COLUMN_MODES: AnchorMode[] = ['left', 'center', 'right', 'stretch']; const ROW_MODES: AnchorMode[] = ['left', 'center', 'right', 'stretch']; @@ -61,11 +62,20 @@ const PRESETS: AnchorPreset[] = ROW_MODES.flatMap((y) => const CUSTOM_PRESET: AnchorPreset = { id: 'custom', - label: 'Custom', + label: '自定义', x: 'left', y: 'left', }; +const FIELD_HINTS = { + anchor_min: + '锚点最小值:用父容器的比例位置(0 到 1)定义元素的左上边界。0 表示左侧或顶部,1 表示右侧或底部。', + anchor_max: + '锚点最大值:用父容器的比例位置(0 到 1)定义元素的右下边界。与最小值不同可让元素随父容器拉伸。', + offset_min: '偏移最小值:相对于最小锚点的像素偏移,控制元素左侧和顶部的位置。', + offset_max: '偏移最大值:相对于最大锚点的像素偏移,控制元素右侧和底部的位置。', +} as const; + function cloneTransform(transform: Transform): Transform { return { anchor_min: [...transform.anchor_min], @@ -176,22 +186,22 @@ function formatValue(value: number): string { function VectorInputRow({ label, + hint, values, step, readOnly, onCommit, }: { label: string; + hint: string; values: readonly [number, number]; step: number; readOnly: boolean; onCommit: (axis: Axis, value: number) => void; }) { return ( -
- - {label} - +
+ {AXIS_LABELS.map((axisLabel, axis) => ( + {label} + + + {hint} + + + ); +} + function ScalarInput({ ariaLabel, value, @@ -276,7 +311,7 @@ function ScalarInput({
{readOnly ? ( ) : ( )} @@ -386,6 +424,7 @@ export function TransformEditor({ type="button" aria-expanded={presetOpen} aria-haspopup="dialog" + title="锚点预设:选择元素相对于父容器的锚点位置;拉伸模式会让元素边界随父容器变化。" disabled={readOnly} className="flex h-11 w-full items-center justify-between rounded-xl border border-(--platform-subpanel-border) bg-white/65 px-3 text-left transition hover:border-orange-300 hover:bg-white disabled:cursor-default disabled:opacity-65" onClick={() => setPresetOpen((open) => !open)} @@ -396,7 +435,7 @@ export function TransformEditor({ - Anchor preset + 锚点预设 {selectedPreset.label} @@ -414,11 +453,11 @@ export function TransformEditor({
- Anchor + 锚点 4 × 4 @@ -485,7 +524,7 @@ export function TransformEditor({ setPresetOpen(false); }} > - Custom Anchor + 自定义锚点
) : null} @@ -495,10 +534,11 @@ export function TransformEditor({
) : null}
updateVector('offset_min', axis, value)} />