Skip to content

Commit ee31a23

Browse files
sleepy-zonesleepy-zone
committed
wip(i18n): translation header ui
1 parent 7d6d3c1 commit ee31a23

File tree

6 files changed

+81
-48
lines changed

6 files changed

+81
-48
lines changed

‎public/locales/en-US/translation.json

+22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
11
{
2+
"header": {
3+
"fabritor_desc": "My drawing by fabritor",
4+
"export": {
5+
"jpg": "Export as JPG",
6+
"png": "Export as PNG",
7+
"svg": "Export as SVG",
8+
"json": "Export as JSON",
9+
"clipboard": "Copy to Clipboard",
10+
"load": "Load",
11+
"export": "Export",
12+
"copy_success": "Copied successfully",
13+
"copy_failed": "Copy failed, please choose to export to local"
14+
},
15+
"toolbar": {
16+
"undo": "Undo",
17+
"redo": "Redo",
18+
"select": "Select",
19+
"pan": "Pan",
20+
"clear": "Clear",
21+
"clear_confirm": "Confirm to clear the canvas and clear the historical operation records?"
22+
}
23+
},
224
"panel": {
325
"design": "Design"
426
},

‎public/locales/zh-CN/translation.json

+22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
11
{
2+
"header": {
3+
"fabritor_desc": "我的画板 by fabritor",
4+
"export": {
5+
"jpg": "导出为 JPG",
6+
"png": "导出为 PNG",
7+
"svg": "导出为 SVG",
8+
"json": "导出为 JSON",
9+
"clipboard": "复制到剪贴板",
10+
"load": "加载模板",
11+
"export": "导出",
12+
"copy_success": "复制成功",
13+
"copy_failed": "复制失败，请选择导出到本地"
14+
},
15+
"toolbar": {
16+
"undo": "撤销",
17+
"redo": "重做",
18+
"select": "选择元素",
19+
"pan": "拖拽画布",
20+
"clear": "清空画布",
21+
"clear_confirm": "确认清空画布，同时清空历史操作记录？"
22+
}
23+
},
224
"panel": {
325
"design": "图层"
426
},

‎src/editor/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import AutoSave from './extensions/autosave';
1313
import { createGroup } from './objects/group';
1414
import createCustomClass from './custom-objects';
1515
import { HOVER_OBJECT_CORNER, HOVER_OBJECT_CONTROL, CAPTURE_SUBTARGET_WHEN_DBLCLICK, LOAD_JSON_IGNORE_LOAD_FONT } from '@/config';
16-
16+
import { translate } from '@/i18n/utils';
1717
export default class Editor {
1818
public canvas: fabric.Canvas;
1919
private _options;
@@ -80,7 +80,7 @@ export default class Editor {
8080
}
8181

8282
private _initSketch () {
83-
// 默认小红书尺寸
83+
// default size: xiaohongshu
8484
const { width = 1242, height = 1660 } = this._template || {};
8585
const sketch = new fabric.Rect({
8686
fill: '#ffffff',
@@ -94,7 +94,7 @@ export default class Editor {
9494
// @ts-ignore custom id
9595
id: SKETCH_ID,
9696
// @ts-ignore custom desc
97-
fabritor_desc: '我的画板 by fabritor',
97+
fabritor_desc: translate('header.fabritor_desc'),
9898
});
9999
this.canvas.add(sketch);
100100
this.canvas.requestRenderAll();

‎src/fabritor/UI/header/Export/index.tsx

+14-32
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,24 @@
1-
import { Dropdown, Button, Divider, message } from 'antd';
2-
import { ExportOutlined } from '@ant-design/icons';
1+
import { Dropdown, Button, message } from 'antd';
2+
import { ExportOutlined, FileOutlined } from '@ant-design/icons';
33
import type { MenuProps } from 'antd';
44
import { downloadFile, base64ToBlob } from '@/utils';
55
import { useContext, useRef } from 'react';
66
import { GloablStateContext } from '@/context';
77
import LocalFileSelector from '@/fabritor/components/LocalFileSelector';
88
import { CenterV } from '@/fabritor/components/Center';
99
import { SETTER_WIDTH } from '@/config';
10+
import { Trans, useTranslation } from '@/i18n/utils';
1011

11-
const items: MenuProps['items'] = [
12-
{
13-
key: 'jpg',
14-
label: '导出为 JPG'
15-
},
16-
{
17-
key: 'png',
18-
label: '导出为 PNG'
19-
},
20-
{
21-
key: 'svg',
22-
label: '导出为 SVG'
23-
},
24-
{
25-
key: 'json',
26-
label: '导出为 模板'
27-
},
28-
{
29-
type: 'divider'
30-
},
31-
{
32-
key: 'clipboard',
33-
label: '复制到剪贴板'
34-
}
35-
]
12+
const i18nKeySuffix = 'header.export';
13+
14+
const items: MenuProps['items'] = ['jpg', 'png', 'svg', 'json', 'divider', 'clipboard'].map(
15+
item => item === 'divider' ? ({ type: 'divider' }) : ({ key: item, label: <Trans i18nKey={`${i18nKeySuffix}.${item}`} /> })
16+
)
3617

3718
export default function Export () {
3819
const { editor, setReady, setActiveObject } = useContext(GloablStateContext);
3920
const localFileSelectorRef = useRef<any>();
21+
const { t } = useTranslation();
4022

4123
const selectJsonFile = () => {
4224
localFileSelectorRef.current?.start?.();
@@ -67,9 +49,9 @@ export default function Export () {
6749
'image/png': blob
6850
})
6951
]);
70-
message.success('复制成功');
52+
message.success(translate(`${i18nKeySuffix}.copy_success`));
7153
} catch(e) {
72-
message.error('复制失败，请选择导出到本地');
54+
message.error(translate(`${i18nKeySuffix}.copy_fail`));
7355
}
7456
}
7557

@@ -112,15 +94,15 @@ export default function Export () {
11294
paddingRight: 16
11395
}}
11496
>
115-
<Button onClick={selectJsonFile}>
116-
加载模板
97+
<Button onClick={selectJsonFile} icon={<FileOutlined />}>
98+
{t(`${i18nKeySuffix}.load`)}
11799
</Button>
118100
<Dropdown
119101
menu={{ items, onClick: handleClick }}
120102
arrow={{ pointAtCenter: true }}
121103
placement="bottom"
122104
>
123-
<Button type="primary" icon={<ExportOutlined />}>导出</Button>
105+
<Button type="primary" icon={<ExportOutlined />}>{t(`${i18nKeySuffix}.export`)}</Button>
124106
</Dropdown>
125107
<LocalFileSelector accept="application/json" ref={localFileSelectorRef} onChange={handleFileChange} />
126108
</CenterV>

‎src/fabritor/UI/header/Toolbar/index.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import { ClearOutlined, DragOutlined, ExclamationCircleFilled, UndoOutlined, Red
66
import { CenterV } from '@/fabritor/components/Center';
77
import ToolbarItem from './ToolbarItem';
88
import ToolbarDivider from '@/fabritor/components/ToolbarDivider';
9+
import { Trans } from '@/i18n/utils';
910

1011
import './index.scss';
1112

13+
const i18nKeySuffix = 'header.toolbar';
14+
1215
export default function Toolbar () {
1316
const { setActiveObject, editor } = useContext(GloablStateContext);
1417
const [panEnable, setPanEnable] = useState(false);
@@ -17,15 +20,13 @@ export default function Toolbar () {
1720

1821
const clearCanvas = () => {
1922
Modal.confirm({
20-
title: '确认清空画布，同时清空历史操作记录？',
23+
title: <Trans i18nKey={`${i18nKeySuffix}.clear_confirm`} />,
2124
icon: <ExclamationCircleFilled />,
2225
async onOk () {
2326
await editor.clearCanvas();
2427
setActiveObject(editor.sketch);
2528
editor.fireCustomModifiedEvent();
26-
},
27-
okText: '确认',
28-
cancelText: '取消'
29+
}
2930
});
3031
}
3132

@@ -43,21 +44,32 @@ export default function Toolbar () {
4344

4445
return (
4546
<CenterV gap={4} style={{ borderRight: '1px solid #e8e8e8', paddingRight: 12 }}>
46-
<ToolbarItem disabled={!canUndo} title="撤销" onClick={() => { editor.fhistory.undo() }}>
47+
<ToolbarItem
48+
disabled={!canUndo}
49+
title={<Trans i18nKey={`${i18nKeySuffix}.undo`} />}
50+
onClick={() => { editor.fhistory.undo() }}
51+
>
4752
<UndoOutlined style={{ fontSize: 20 }} />
4853
</ToolbarItem>
49-
<ToolbarItem disabled={!canRedo} title="重做" onClick={() => { editor.fhistory.redo() }}>
54+
<ToolbarItem
55+
disabled={!canRedo}
56+
title={<Trans i18nKey={`${i18nKeySuffix}.redo`} />}
57+
onClick={() => { editor.fhistory.redo() }}
58+
>
5059
<RedoOutlined style={{ fontSize: 20 }} />
5160
</ToolbarItem>
5261
<ToolbarDivider />
53-
<ToolbarItem onClick={enablePan} title={panEnable ? '选择元素' : '拖拽画布'}>
62+
<ToolbarItem
63+
onClick={enablePan}
64+
title={panEnable ? <Trans i18nKey={`${i18nKeySuffix}.select`} /> : <Trans i18nKey={`${i18nKeySuffix}.pan`} />}
65+
>
5466
{
5567
panEnable?
5668
<DragOutlined style={{ fontSize: 22, color: panEnable ? '#000' : '#ccc' }} /> :
5769
<img src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(DRAG_ICON)}`} style={{ width: 22, height: 22 }} />
5870
}
5971
</ToolbarItem>
60-
<ToolbarItem onClick={clearCanvas} title="清空画布">
72+
<ToolbarItem onClick={clearCanvas} title={<Trans i18nKey={`${i18nKeySuffix}.clear`} />}>
6173
<ClearOutlined style={{ fontSize: 20 }} />
6274
</ToolbarItem>
6375
</CenterV>

‎src/utils/index.ts

-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { fabric } from 'fabric';
22
import * as FontFaceObserver from 'fontfaceobserver';
33
import { v4 as uuidv4 } from 'uuid';
44
import { FONT_PRESET_FAMILY_LIST, LOG_PREFIX } from './constants';
5-
import i18n from '@/i18n';
65

76
export const loadFont = async (f: string) => {
87
if (!f) return Promise.resolve();
@@ -150,8 +149,4 @@ export const base64ToBlob = async (base64Data) => {
150149
return fetch(base64Data).then((res) => {
151150
return res.blob();
152151
});
153-
}
154-
155-
export const translate = (key) => {
156-
return i18n.t(key);
157152
}

0 commit comments

Comments
 (0)