深度画布多语言

src/components/Canvas/DepthCanvas/components/ai-selectbox-panel.vue

@@ -22,6 +22,8 @@
 	import depthSlider from './tools/depth-slider.vue'
 	import { OperationType } from '../tools/layerHelper'
 	import brushControlPanel from './brush-control-panel.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 
 	const props = defineProps({
 		currentTool: { required: true, type: [String, null] }
@@ -38,22 +40,22 @@
 		{
 			type: OperationType.AISELECT_ADD,
 			name: 'dc-add_sb',
-			label: 'Add'
+			label: t('DepthCanvas.add')
 		},
 		{
 			type: OperationType.AISELECT_REMOVE,
 			name: 'dc-remove_sb',
-			label: 'Remove'
+			label: t('DepthCanvas.remove')
 		},
 		{
 			type: OperationType.AISELECT_DRAW,
 			name: 'dc-brush_sb',
-			label: 'Brush'
+			label: t('DepthCanvas.brush')
 		},
 		{
 			type: OperationType.AISELECT_ERASER,
 			name: 'dc-erase_sb',
-			label: 'Erase'
+			label: t('DepthCanvas.erase')
 		}
 	])
 	const onClickItem = (type: string) => {

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -30,7 +30,7 @@
 		</template>
 		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="12" /></span>
-			<span class="text">Export</span>
+			<span class="text">{{ $t('DepthCanvas.export') }}</span>
 		</button>
 		<!-- <button class="export" @click="emit('export-local')">
 			<span class="text">保存本地</span>
@@ -40,7 +40,7 @@
 		</button> -->
 		<button class="workbench" @click="onWorkbench">
 			<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
-			<span class="text">Workbench</span>
+			<span class="text">{{ $t('DepthCanvas.save') }}</span>
 		</button>
 	</div>
 </template>
@@ -49,6 +49,8 @@
 	import { ref, inject, computed } from 'vue'
 	import { exportCanvasToImage } from '../tools/exportMethod'
 	import { OperationType, BlendMode } from '../tools/layerHelper'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const props = defineProps({
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
@@ -86,37 +88,37 @@
 			child: [
 				{
 					name: OperationType.RECTANGLE,
-					label: 'Rectangle',
+					label: t('DepthCanvas.rectangle'),
 					icon: 'dc-rectangle',
 					iconSize: 13
 				},
 				{
 					name: OperationType.LINE,
-					label: 'Line',
+					label: t('DepthCanvas.line'),
 					icon: 'dc-line',
 					iconSize: 10
 				},
 				{
 					name: OperationType.ARROW,
-					label: 'Arrow',
+					label: t('DepthCanvas.arrow'),
 					icon: 'dc-arrow',
 					iconSize: 11
 				},
 				{
 					name: OperationType.ELLIPSE,
-					label: 'Ellipse',
+					label: t('DepthCanvas.ellipse'),
 					icon: 'dc-ellipse',
 					iconSize: 15
 				},
 				{
 					name: OperationType.TRIANGLE,
-					label: 'Polygon',
+					label: t('DepthCanvas.triangle'),
 					icon: 'dc-triangle',
 					iconSize: 14
 				},
 				{
 					name: OperationType.STAR,
-					label: 'Star',
+					label: t('DepthCanvas.star'),
 					icon: 'dc-star',
 					iconSize: 15
 				}

src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="basic-info h">
 		<div>
-			<div class="title">Position</div>
+			<div class="title">{{ $t('DepthCanvas.position') }}</div>
 			<div class="content">
 				<div>
 					<depth-input
@@ -44,7 +44,7 @@
 			</div>
 		</div>
 		<div>
-			<div class="title">Scale</div>
+			<div class="title">{{ $t('DepthCanvas.scale') }}</div>
 			<div class="content">
 				<div>
 					<depth-input

src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="fill-repeat h">
 		<div>
-			<div class="title">Image</div>
+			<div class="title">{{ $t('DepthCanvas.image') }}</div>
 			<div class="content">
 				<img :src="object.info.fill.source" alt="" />
 			</div>
 		</div>
 		<div>
-			<div class="title">Sttings</div>
+			<div class="title">{{ $t('DepthCanvas.settings') }}</div>
 			<div class="content">
 				<div>
-					<div class="label">Rotation</div>
+					<div class="label">{{ $t('DepthCanvas.rotation') }}</div>
 					<div class="value">
 						<depth-input
 							icon="dc-angle"
@@ -23,7 +23,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Scale</div>
+					<div class="label">{{ $t('DepthCanvas.scale') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="scale"
@@ -36,7 +36,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Opacity</div>
+					<div class="label">{{ $t('DepthCanvas.opacity') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="opacity"
@@ -49,7 +49,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Gap X</div>
+					<div class="label">{{ $t('DepthCanvas.gapX') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="gapX"
@@ -62,7 +62,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Gap Y</div>
+					<div class="label">{{ $t('DepthCanvas.gapY') }}</div>
 					<div class="value">
 						<depth-slider
 							v-model="gapY"
@@ -75,7 +75,7 @@
 					</div>
 				</div>
 				<div>
-					<div class="label">Offset</div>
+					<div class="label">{{ $t('DepthCanvas.offset') }}</div>
 					<div class="value">
 						<depth-offset-tool
 							v-model="offset"

src/components/Canvas/DepthCanvas/components/details-panel/index.vue

@@ -2,7 +2,7 @@
 	<div class="details-panel">
 		<div class="header" @click="show = !show">
 			<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
-			<span class="title">Edit Details</span>
+			<span class="title">{{ $t('DepthCanvas.editDetails') }}</span>
 			<span class="arrow" :class="{ show }">
 				<svg-icon name="dc-down_arrow2" size="10" />
 			</span>

src/components/Canvas/DepthCanvas/components/details-panel/shape-setting.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="shape-setting h">
 		<div>
-			<div class="title">Appearance</div>
+			<div class="title">{{ $t('DepthCanvas.appearance') }}</div>
 			<div class="content">
 				<div>
-					<span class="label">Opacity</span>
+					<span class="label">{{ $t('DepthCanvas.opacity') }}</span>
 					<depth-input
 						type="number"
 						after="%"
@@ -17,7 +17,7 @@
 					/>
 				</div>
 				<div v-if="object.type === 'rect'">
-					<span class="label">Corner Radius</span>
+					<span class="label">{{ $t('DepthCanvas.cornerRadius') }}</span>
 					<depth-input
 						type="number"
 						v-model="data.radius"
@@ -28,7 +28,7 @@
 					/>
 				</div>
 				<div v-else-if="object.type === 'path'">
-					<span class="label">Stroke Width</span>
+					<span class="label">{{ $t('DepthCanvas.strokeWidth') }}</span>
 					<depth-input
 						type="number"
 						v-model="data.strokeWidth"
@@ -42,7 +42,7 @@
 			</div>
 			<div class="content">
 				<div>
-					<span class="label">Color</span>
+					<span class="label">{{ $t('DepthCanvas.color') }}</span>
 					<depth-input
 						v-if="object.type === 'path'"
 						type="color"

src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue

@@ -3,7 +3,7 @@
 		<div class="header">
 			<div class="left">
 				<span class="icon"><svg-icon name="dc-layer" size="16" /></span>
-				<span class="title">Layer</span>
+				<span class="title">{{ $t('DepthCanvas.layer') }}</span>
 			</div>
 			<div class="right">
 				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -4,6 +4,8 @@ import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType, BlendMode } from '../tools/layerHelper'
 import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
+import i18n from '@/lang/index'
+const t = i18n.global.t
 
 export class LayerManager {
 	stateManager: any
@@ -206,7 +208,7 @@ export class LayerManager {
 			fill: 'transparent',
 			info: {
 				id: createId("image"),
-				name: '空图层',
+				name: t('DepthCanvas.emptyLayer'),
 			}
 		})
 		this.setLayerPosition(emptyObject)
@@ -226,7 +228,7 @@ export class LayerManager {
 			evented: false,
 			info: {
 				id: createId("group"),
-				name: '智能选区组',
+				name: t('DepthCanvas.aiGroupLayer'),
 				showChildren: true,
 				...(options?.info || {}),
 			}
@@ -245,7 +247,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("text"),
-				name: '文本图层',
+				name: t('DepthCanvas.textLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -263,7 +265,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("rect"),
-				name: '矩形图层',
+				name: t('DepthCanvas.rectLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -287,7 +289,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("line"),
-				name: '直线图层',
+				name: t('DepthCanvas.lineLayer'),
 				...(options?.info || {}),
 			}
 		});
@@ -304,7 +306,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("ellipse"),
-				name: '椭圆图层',
+				name: t('DepthCanvas.ellipseLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -323,7 +325,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("triangle"),
-				name: '三角形图层',
+				name: t('DepthCanvas.triangleLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -343,7 +345,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("star"),
-				name: '五角星图层',
+				name: t('DepthCanvas.starLayer'),
 				...(options?.info || {}),
 			}
 		})
@@ -367,7 +369,7 @@ export class LayerManager {
 			...(options || {}),
 			info: {
 				id: createId("arrow"),
-				name: '箭头图层',
+				name: t('DepthCanvas.arrowLayer'),
 				...(options?.info || {}),
 			}
 		});
@@ -397,7 +399,7 @@ export class LayerManager {
 					...(options || {}),
 					info: {
 						id: createId("image"),
-						name: "图片图层",
+						name: t('DepthCanvas.imageLayer'),
 						...(options?.info || {}),
 					}
 				})
@@ -421,7 +423,7 @@ export class LayerManager {
 					info: {
 						...(targetLayer?.info || {}),
 						id: createId("image"),
-						name: targetLayer?.info?.name || "合并图层",
+						name: targetLayer?.info?.name || t('DepthCanvas.mergeLayer'),
 					}
 				})
 				resolve(img)

src/lang/en.ts

@@ -200,5 +200,47 @@ export default {
 	threeModel: {
 		loading: 'Loading',
 		download: 'Download'
+	},
+	DepthCanvas: {
+		layer: "Layer",
+		editDetails: "Edit Details",
+		export: "Export",
+		save: "Save",
+		workbench: "Workbench",
+		position: "Position",
+		size: "Size",
+		appearance: "Appearance",
+		opacity: "Opacity",
+		cornerRadius: "Cor Radius",
+		strokeWidth: "Stroke Width",
+		color: "Color",
+		image: "Image",
+		settings: "Settings",
+		rotation: "Rotation",
+		scale: "Scale",
+		gapX: "Gap X",
+		gapY: "Gap Y",
+		offset: "Offset",
+		emptyLayer: "Empty Layer",
+		aiGroupLayer: "AI Group Layer",
+		textLayer: "Text Layer",
+		rectLayer: "Rect Layer",
+		lineLayer: "Line Layer",
+		ellipseLayer: "Ellipse Layer",
+		triangleLayer: "Triangle Layer",
+		starLayer: "Star Layer",
+		arrowLayer: "Arrow Layer",
+		imageLayer: "Image Layer",
+		mergeLayer: "Merge Layer",
+		rectangle: "Rectangle",
+		line: "Line",
+		arrow: "Arrow",
+		ellipse: "Ellipse",
+		triangle: "Triangle",
+		star: "Star",
+		add: "Add",
+		remove: "Remove",
+		brush: "Brush",
+		erase: "Erase",
 	}
 }

src/lang/zh-cn.ts

@@ -153,7 +153,7 @@ export default {
 		quote: '引用',
 		delete: '删除',
 		edit: '编辑',
-		generatingReport:'正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
+		generatingReport: '正在为您生成报告,可能需要几分钟时间,生成期间你可以继续进行其他任务'
 	},
 
 	// Version Tree
@@ -197,5 +197,47 @@ export default {
 	threeModel: {
 		loading: '加载中',
 		download: '下载'
+	},
+	DepthCanvas: {
+		layer: "图层",
+		editDetails: "编辑详情",
+		export: "导出",
+		save: "保存",
+		workbench: "工作台",
+		position: "位置",
+		size: "大小",
+		appearance: "外观",
+		opacity: "透明度",
+		cornerRadius: "圆角半径",
+		strokeWidth: "边框宽度",
+		color: "颜色",
+		image: "图片",
+		settings: "设置",
+		rotation: "旋转角度",
+		scale: "缩放",
+		gapX: "水平间距",
+		gapY: "垂直间距",
+		offset: "偏移量",
+		emptyLayer: "空图层",
+		aiGroupLayer: "智能选区组",
+		textLayer: "文本图层",
+		rectLayer: "矩形图层",
+		lineLayer: "直线图层",
+		ellipseLayer: "椭圆图层",
+		triangleLayer: "三角形图层",
+		starLayer: "五角星图层",
+		arrowLayer: "箭头图层",
+		imageLayer: "图片图层",
+		mergeLayer: "合并图层",
+		rectangle: "矩形",
+		line: "直线",
+		arrow: "箭头",
+		ellipse: "椭圆",
+		triangle: "三角形",
+		star: "五角星",
+		add: "添加",
+		remove: "删除",
+		brush: "画笔",
+		erase: "擦除",
 	}
 }