Skip to content

Implement complete i18n translation for all UI text #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Implement complete i18n translation for all UI text #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f96aba8
Initial plan
Copilot Sep 17, 2025
901bcab
Implement i18n translation for all UI text
Copilot Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 55 additions & 49 deletions src/components/signs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable no-case-declarations */
import React, { useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
// 在 signs.tsx 顶部添加
import './MetroSignGenerator.css';

Expand Down Expand Up @@ -36,6 +37,7 @@ const getBlockWidth = (style: string): number => {
};

const RailSignGenerator: React.FC = () => {
const { t } = useTranslation();
const [blocks, setBlocks] = useState<BlockData[]>([
{ id: 1, style: 'Exit', cutLine: false, specialStyles: {}, collapsed: false },
]);
Expand All @@ -47,50 +49,50 @@ const RailSignGenerator: React.FC = () => {
Exit: [
{
type: 'radio',
label: '对齐方式',
label: t('blocks.styles.specials.text_align'),
defaultValue: 'C',
options: [
{ value: 'R', label: '靠右对齐' },
{ value: 'L', label: '靠左对齐' },
{ value: 'C', label: '居中对齐' },
{ value: 'R', label: t('blocks.styles.specials.align_right') },
{ value: 'L', label: t('blocks.styles.specials.align_left') },
{ value: 'C', label: t('blocks.styles.specials.align_center') },
],
},
],
Line: [
{ type: 'number', label: '线路编号', defaultValue: '10' },
{ type: 'text', label: '线路颜色', defaultValue: '#00a3c2' },
{ type: 'number', label: t('blocks.styles.specials.line_number'), defaultValue: '10' },
{ type: 'text', label: t('blocks.styles.specials.line_color'), defaultValue: '#00a3c2' },
],
'Line-space': [
{ type: 'number', label: '线路编号', defaultValue: '10' },
{ type: 'text', label: '线路颜色', defaultValue: '#00a3c2' },
{ type: 'number', label: t('blocks.styles.specials.line_number'), defaultValue: '10' },
{ type: 'text', label: t('blocks.styles.specials.line_color'), defaultValue: '#00a3c2' },
],
ExitText: [
{ type: 'text', label: '出口编号', defaultValue: 'A', maxLength: 1 },
{ type: 'text', label: '出口下角标', defaultValue: '', maxLength: 1 },
{ type: 'text', label: '出口中文', defaultValue: '蓝靛厂南路' },
{ type: 'text', label: '出口英文', defaultValue: 'Landianchang South Rd.' },
{ type: 'text', label: t('blocks.styles.specials.exit_letter'), defaultValue: 'A', maxLength: 1 },
{ type: 'text', label: t('blocks.styles.specials.exit_lower'), defaultValue: '', maxLength: 1 },
{ type: 'text', label: t('blocks.styles.specials.exit_zh'), defaultValue: '蓝靛厂南路' },
{ type: 'text', label: t('blocks.styles.specials.exit_en'), defaultValue: 'Landianchang South Rd.' },
],
To: [
{ type: 'text', label: '终点站中文', defaultValue: '宛平城' },
{ type: 'text', label: '终点站英文', defaultValue: 'Wanpingcheng' },
{ type: 'text', label: t('blocks.styles.specials.terminal_zh'), defaultValue: '宛平城' },
{ type: 'text', label: t('blocks.styles.specials.terminal_en'), defaultValue: 'Wanpingcheng' },
{
type: 'radio',
label: '对齐方式',
label: t('blocks.styles.specials.text_align'),
defaultValue: 'R',
options: [
{ value: 'R', label: '靠右对齐' },
{ value: 'L', label: '靠左对齐' },
{ value: 'C', label: '居中对齐' }, // 添加居中对齐选项
{ value: 'R', label: t('blocks.styles.specials.align_right') },
{ value: 'L', label: t('blocks.styles.specials.align_left') },
{ value: 'C', label: t('blocks.styles.specials.align_center') }, // 添加居中对齐选项
],
},
{
type: 'radio',
label: '线路类型',
label: t('blocks.styles.specials.line_type'),
defaultValue: 'NM',
options: [
{ value: 'NM', label: '普通线' },
{ value: 'LOOP', label: '环线' },
{ value: 'T', label: '终点站' },
{ value: 'NM', label: t('blocks.styles.specials.normal_line') },
{ value: 'LOOP', label: t('blocks.styles.specials.loop_line') },
{ value: 'T', label: t('blocks.styles.specials.terminal_station') },
],
},
],
Expand Down Expand Up @@ -210,7 +212,7 @@ const RailSignGenerator: React.FC = () => {
<button onClick={() => toggleCollapse(block.id)} className="collapse-btn">
{block.collapsed ? '▶' : '▼'}
</button>
块 {block.id}
{t('blocks.block')} {block.id}
</h3>
<button onClick={() => removeBlock(block.id)} className="remove-btn">
×
Expand All @@ -220,7 +222,7 @@ const RailSignGenerator: React.FC = () => {
{!block.collapsed && (
<>
<div className="section">
<label>分割线（右）</label>
<label>{t('blocks.cutline')}</label>
<div className="radio-group">
<label>
<input
Expand All @@ -229,7 +231,7 @@ const RailSignGenerator: React.FC = () => {
checked={!block.cutLine}
onChange={() => updateBlockCutLine(block.id, false)}
/>
否
{t('useful.no')}
</label>
<label>
<input
Expand All @@ -238,15 +240,15 @@ const RailSignGenerator: React.FC = () => {
checked={block.cutLine}
onChange={() => updateBlockCutLine(block.id, true)}
/>
是
{t('useful.yes')}
</label>
</div>
</div>

<div className="section">
<label>样式</label>
<label>{t('blocks.styles.style')}</label>
<div className="style-group">
<h4>单格：</h4>
<h4>{t('blocks.styles.single_block')}：</h4>
<div className="radio-grid">
{['Exit', '↗', '↙', '↖', '↘', '→', '←', '↑', '↓', 'toilet', 'blank1'].map(
style => (
Expand All @@ -259,18 +261,18 @@ const RailSignGenerator: React.FC = () => {
onChange={() => updateBlockStyle(block.id, style)}
/>
{style === 'Exit'
? '出口图标'
? t('blocks.styles.exit_logo')
: style === 'toilet'
? '洗手间'
? t('blocks.styles.toilet')
: style === 'blank1'
? '空'
? t('blocks.styles.blank')
: style}
</label>
)
)}
</div>

<h4>两格：</h4>
<h4>{t('blocks.styles.two_block')}：</h4>
<div className="radio-grid">
{['Line', 'Line-space', 'blank2'].map(style => (
<label key={style} className="style-option">
Expand All @@ -282,16 +284,16 @@ const RailSignGenerator: React.FC = () => {
onChange={() => updateBlockStyle(block.id, style)}
/>
{style === 'Line'
? '线路'
? t('blocks.styles.line')
: style === 'Line-space'
? '线路+空格'
? t('blocks.styles.line_space')
: style === 'blank2'
? '空'
: '终点站(开往)'}
? t('blocks.styles.blank')
: t('blocks.styles.terminal_dest')}
</label>
))}
</div>
<h4>三格：</h4>
<h4>{t('blocks.styles.three_blocks')}：</h4>
<div className="radio-grid">
{['To', 'ExitText'].map(style => (
<label key={style} className="style-option">
Expand All @@ -302,7 +304,11 @@ const RailSignGenerator: React.FC = () => {
checked={block.style === style}
onChange={() => updateBlockStyle(block.id, style)}
/>
{style === 'To' ? '终点文字' : style === 'ExitText' ? '出口文字' : style}
{style === 'To'
? t('blocks.styles.terminal_text')
: style === 'ExitText'
? t('blocks.styles.exit_text')
: style}
</label>
))}
</div>
Expand All @@ -311,7 +317,7 @@ const RailSignGenerator: React.FC = () => {

{block.style in specialStyleConfigs && (
<div className="section special-styles">
<label>独特属性</label>
<label>{t('blocks.styles.special')}</label>
{renderSpecialInputs(block)}
</div>
)}
Expand Down Expand Up @@ -615,14 +621,14 @@ const RailSignGenerator: React.FC = () => {

// 确定前缀文本
let prefixChinese = '';
let prefixEnglish = 'To';
let prefixEnglish = t('prefixes.to');
if (lineType === 'LOOP') {
prefixChinese = '下一站';
prefixChinese = t('prefixes.next_station');
} else if (lineType === 'T') {
prefixChinese = '终点站';
prefixEnglish = 'Terminus';
prefixChinese = t('prefixes.terminus');
prefixEnglish = t('prefixes.terminus');
} else {
prefixChinese = '开往';
prefixChinese = t('prefixes.to');
}

// 计算文本位置
Expand Down Expand Up @@ -872,13 +878,13 @@ const RailSignGenerator: React.FC = () => {
<div className="controls">
<div className="actions">
<button onClick={addBlock} className="add-btn">
+ 添加新块
{t('main_area.new_block')}
</button>
<button onClick={downloadPNG} className="download-btn">
下载PNG
{t('main_area.export_as_png')}
</button>
<div className="bg-color">
<label>背景颜色：</label>
<label>{t('main_area.background_color')}：</label>
<input
type="color"
value={backgroundColor}
Expand All @@ -896,11 +902,11 @@ const RailSignGenerator: React.FC = () => {
</div>
<footer>
<h6 style={{ color: 'gray' }}>
部分素材来自
{t('copy').split('https://centralgo.site/vitool/')[0]}
<a style={{ color: 'gray' }} href="https://centralgo.site/vitool/">
https://centralgo.site/vitool/
</a>
，如有侵权请联系删除
{t('copy').split('https://centralgo.site/vitool/')[1]}
</h6>
</footer>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/window-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function WindowHeader() {

return (
<RMWindowHeader>
<Title>{'Rail Sign Generator'}</Title>
<Title>{t('head_bar.project_name')}</Title>
<RMEnvBadge env={environment} ver={appVersion} />

<ActionIcon variant="subtle" color="gray" size="sm" aria-label={t('Help')} title={t('Help')} ml="auto">
Expand Down
21 changes: 16 additions & 5 deletions src/i18n/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
{
"Help": "Help",
"head_bar": {
"project_name": "Subway Signage Generator"
"project_name": "Rail Sign Generator"
},
"main_area": {
"preview": "Sign Preview",
"new_block": "Add New Block",
"export_as_png": "Download as PNG",
"export_as_png": "Download PNG",
"background_color": "Background Color"
},
"blocks": {
Expand All @@ -22,24 +23,34 @@
"line": "Line",
"line_space": "Line + Space",
"terminal_text": "Terminal Text",
"exit_texi": "Exit Text",
"special": "Unique Attributes",
"terminal_dest": "Terminal Station (To)",
"exit_text": "Exit Text",
"special": "Special Attributes",
"specials": {
"line_number": "Line Number",
"line_color": "Line Color",
"terminal_zh": "Terminal Station (Chinese)",
"terminal_en": "Terminal Station (English)",
"text_align": "Text Alignment",
"line_type": "Line Type",
"align_right": "Align Right",
"align_center": "Align Center",
"align_left": "Align Left",
"exit_letter": "Exit Number",
"exit_lower": "Exit Subscript",
"exit_zh": "Exit (Chinese)",
"exit_en": "Exit (English)"
"exit_en": "Exit (English)",
"normal_line": "Normal Line",
"loop_line": "Loop Line",
"terminal_station": "Terminal Station"
}
}
},
"prefixes": {
"to": "To",
"next_station": "Next Station",
"terminus": "Terminus"
},
"useful": {
"yes": "Yes",
"no": "No"
Expand Down
17 changes: 14 additions & 3 deletions src/i18n/translations/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"Help": "ヘルプ",
"head_bar": {
"project_name": "地下鉄案内標識生成器"
},
"main_area": {
"preview": "標識プレビュー",
"new_block": "新しいブロックを追加",
"new_block": "+ 新しいブロックを追加",
"export_as_png": "PNGとしてダウンロード",
"background_color": "背景色"
},
Expand All @@ -22,24 +23,34 @@
"line": "路線",
"line_space": "路線 + スペース",
"terminal_text": "終点テキスト",
"exit_texi": "出口テキスト",
"terminal_dest": "終点駅（行き先）",
"exit_text": "出口テキスト",
"special": "独特な属性",
"specials": {
"line_number": "路線番号",
"line_color": "路線色",
"terminal_zh": "終点駅（中国語）",
"terminal_en": "終点駅（英語）",
"text_align": "テキストの配置",
"line_type": "路線タイプ",
"align_right": "右寄せ",
"align_center": "中央寄せ",
"align_left": "左寄せ",
"exit_letter": "出口番号",
"exit_lower": "出口の下付き文字",
"exit_zh": "出口（中国語）",
"exit_en": "出口（英語）"
"exit_en": "出口（英語）",
"normal_line": "通常路線",
"loop_line": "環状線",
"terminal_station": "終点駅"
}
}
},
"prefixes": {
"to": "行き",
"next_station": "次駅",
"terminus": "終点駅"
},
"useful": {
"yes": "はい",
"no": "いいえ"
Expand Down
Loading