画布语言适配

src/components/Canvas/FlowCanvas/components/header-tools.vue

@@ -14,7 +14,7 @@
 		<div>
 			<button class="export" @click="emit('export')">
 				<span class="icon"><svg-icon name="export" size="11" /></span>
-				<span class="text">Export</span>
+				<span class="text">{{ $t('FlowCanvas.export') }}</span>
 			</button>
 			<div v-loading="true" class="mask" v-if="downloadData.status == 'loading'"></div>
 		</div>

src/components/Canvas/FlowCanvas/components/nodes/cards/add-print.vue

@@ -1,12 +1,12 @@
 <template>
 	<!-- 添加印花 -->
 	<div class="add-print">
-		<p class="label">Print</p>
+		<p class="label">{{ $t('FlowCanvas.print') }}</p>
 		<upload-file v-model="data.file" />
-		<p class="label">Settings</p>
+		<p class="label">{{ $t('FlowCanvas.settings') }}</p>
 		<div class="settings">
 			<div>
-				<p class="label">Angle</p>
+				<p class="label">{{ $t('FlowCanvas.angle') }}</p>
 				<my-input
 					v-model="data.setting.angle"
 					type="number"
@@ -18,7 +18,7 @@
 				/>
 			</div>
 			<div>
-				<span class="label">Scale</span>
+				<span class="label">{{ $t('FlowCanvas.scale') }}</span>
 				<slider
 					:min="1"
 					:max="1000"
@@ -27,7 +27,7 @@
 				/>
 			</div>
 			<div>
-				<span class="label">Gap X</span>
+				<span class="label">{{ $t('FlowCanvas.gapX') }}</span>
 				<slider
 					:min="0"
 					:max="1000"
@@ -36,7 +36,7 @@
 				/>
 			</div>
 			<div>
-				<span class="label">Gap Y</span>
+				<span class="label">{{ $t('FlowCanvas.gapY') }}</span>
 				<slider
 					:min="0"
 					:max="1000"
@@ -45,14 +45,14 @@
 				/>
 			</div>
 			<div>
-				<span class="label">Offset</span>
+				<span class="label">{{ $t('FlowCanvas.offset') }}</span>
 				<offset-tool v-model="data.setting.offset" :show-dish="false" />
 			</div>
 			<div class="offset">
 				<offset-tool v-model="data.setting.offset" :show-input="false" />
 			</div>
 		</div>
-		<p class="label">Prompt</p>
+		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
 		<my-textarea v-model="data.prompt" />
 	</div>
 </template>

src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue

@@ -22,6 +22,8 @@
 <script setup lang="ts">
 	import { ref, inject, computed } from 'vue'
 	import { NODE_DATATYPE, NODE_DATATIER } from '../../../tools/index.d'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const nodeManager = inject('nodeManager') as any
 	const stateManager = inject('stateManager') as any
 	const props = defineProps({
@@ -35,29 +37,29 @@
 		{
 			tier: NODE_DATATIER.TO_REAL_STYLE,
 			type: NODE_DATATYPE.TO_REAL_STYLE,
-			title: 'To Real Style'
+			title: t('FlowCanvas.toRealStyleTitle')
 		},
 		{
 			tier: NODE_DATATIER.TO_REAL_VARIANTS,
 			type: NODE_DATATYPE.TO_REAL_VARIANTS,
-			title: 'To Real Variants'
+			title: t('FlowCanvas.toRealVariantsTitle')
 		},
 		{
 			tier: NODE_DATATIER.SURFACE_EDIT,
 			type: NODE_DATATYPE.SURFACE_EDIT,
-			title: 'Surface Edit',
+			title: t('FlowCanvas.surfaceEditTitle'),
 			secondaryMenu: {
-				title: 'Surface Edit',
+				title: t('FlowCanvas.surfaceEditTitle'),
 				icon: NODE_DATATYPE.SURFACE_EDIT,
 				selectList: [
 					{
 						tier: NODE_DATATIER.CANVAS_MODE,
 						type: NODE_DATATYPE.CANVAS_MODE,
-						title: 'Surface Edit (Canvas)',
+						title: t('FlowCanvas.surfaceEditCanvasTitle'),
 					},{
 						tier: NODE_DATATIER.Fast_MODE,
 						type: NODE_DATATYPE.Fast_MODE,
-						title: 'Surface Edit',
+						title: t('FlowCanvas.surfaceEditTitle'),
 					},
 				]
 			}
@@ -65,22 +67,22 @@
 		{
 			tier: NODE_DATATIER.SCENE_COMPOSITION,
 			type: NODE_DATATYPE.SCENE_COMPOSITION,
-			title: 'Scene Composition'
+			title: t('FlowCanvas.sceneCompositionTitle')
 		},
 		{
 			tier: NODE_DATATIER.COLOR_PALETTE,
 			type: NODE_DATATYPE.COLOR_PALETTE,
-			title: 'Color Palette'
+			title: t('FlowCanvas.colorPaletteTitle')
 		},
 		{
 			tier: NODE_DATATIER.TO_3D_MODEL,
 			type: NODE_DATATYPE.TO_3D_MODEL,
-			title: 'To 3D Model'
+			title: t('FlowCanvas.to3DModelTitle')
 		},
 		{
 			tier: NODE_DATATIER.TO_3VIEW,
 			type: NODE_DATATYPE.TO_3VIEW,
-			title: 'To 3-View'
+			title: t('FlowCanvas.to3ViewTitle')
 		}
 	])
 	const onClickItem = (v) => {

src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue

@@ -1,9 +1,9 @@
 <template>
 	<!-- 颜色调色板 -->
 	<div class="color-palette">
-		<p class="label">Mode</p>
+		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
-		<p class="label">Choose Color</p>
+		<p class="label">{{ $t('FlowCanvas.chooseColor') }}</p>
 		<div class="color-list">
 			<div
 				class="color-item"
@@ -25,6 +25,8 @@
 
 <script setup lang="ts">
 	import { reactive, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const data = reactive({
 		colors: [],
 		mode: 'Advanced',
@@ -45,8 +47,8 @@
 		data.colors.push(target.value)
 	}
 	const modeList = ref([
-		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
-		{ value: 'Normal', label: 'Normal' }
+		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
 	])
 	const getApiData = ()=>{
 		return {

src/components/Canvas/FlowCanvas/components/nodes/cards/fast-mode.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 画布编辑印花 -->
 	<div class="fast-mode">
-		<p class="label">Output</p>
+		<p class="label">{{ $t('FlowCanvas.output') }}</p>
 		<div class="imgBox">
 			<img :src="data.url" alt="">
 		</div>

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -19,13 +19,13 @@
 		<div class="footer" @mousedown.stop v-if="!currentComponent?.hideFooter">
 			<button @click="onGenerateClick">
 				<svg-icon name="xingxing" size="16" size-unit="px" />
-				<span>Generate</span>
+				<span>{{ $t('FlowCanvas.generate') }}</span>
 			</button>
 		</div>
 		<div class="footer canvasEdit" @mousedown.stop v-if="currentComponent?.showCanvasEdit">
 			<button @click="currentComponent?.on()">
 				<svg-icon name="xingxing" size="16" size-unit="px" />
-				<span>Edit</span>
+				<span>{{ $t('FlowCanvas.edit') }}</span>
 			</button>
 		</div>
 	</div>
@@ -58,7 +58,7 @@
 		{
 			tier: NODE_DATATIER.CARDS_SELECT,
 			type: NODE_DATATYPE.CARDS_SELECT,
-			title: 'Advanced Tools',
+			title: t('FlowCanvas.selectCardsTitle'),
 			component: CardsSelect,
 			hideFooter: true,
 			hideIcon: true,
@@ -66,28 +66,28 @@
 		{
 			tier: NODE_DATATIER.TO_REAL_STYLE,
 			type: NODE_DATATYPE.TO_REAL_STYLE,
-			title: 'To Real Style',
+			title: t('FlowCanvas.toRealStyleTitle'),
 			component: ToRealStyle,
 			api: toRealStyleApi
 		},
 		{
 			tier: NODE_DATATIER.TO_REAL_VARIANTS,
 			type: NODE_DATATYPE.TO_REAL_VARIANTS,
-			title: 'To Real Variants',
+			title: t('FlowCanvas.toRealVariantsTitle'),
 			component: ToRealVariants,
 			api: toRealStyleApi
 		},
 		{
 			tier: NODE_DATATIER.Fast_MODE,
 			type: NODE_DATATYPE.Fast_MODE,
-			title: 'Surface Edit',
+			title: t('FlowCanvas.surfaceEditTitle'),
 			component: SurfaceEdit,
 			api: sketchAddPrintApi
 		},
 		{
 			tier: NODE_DATATIER.CANVAS_MODE,
 			type: NODE_DATATYPE.CANVAS_MODE,
-			title: 'Surface Edit (Canvas)',
+			title: t('FlowCanvas.surfaceEditCanvasTitle'),
 			component: FastMode,
 			hideFooter: true,
 			showCanvasEdit: true,
@@ -98,28 +98,28 @@
 		{
 			tier: NODE_DATATIER.SCENE_COMPOSITION,
 			type: NODE_DATATYPE.SCENE_COMPOSITION,
-			title: 'Scene Composition',
+			title: t('FlowCanvas.sceneCompositionTitle'),
 			component: SceneComposition,
 			api: toSceneCompositionApi
 		},
 		{
 			tier: NODE_DATATIER.COLOR_PALETTE,
 			type: NODE_DATATYPE.COLOR_PALETTE,
-			title: 'Color Palette',
+			title: t('FlowCanvas.colorPaletteTitle'),
 			component: ColorPalette,
 			api: toColorPaletteApi
 		},
 		{
 			tier: NODE_DATATIER.TO_3D_MODEL,
 			type: NODE_DATATYPE.TO_3D_MODEL,
-			title: 'To 3D Model',
+			title: t('FlowCanvas.to3DModelTitle'),
 			component: To3DModel,
 			api:sketchToThreeApi
 		},
 		{
 			tier: NODE_DATATIER.TO_3VIEW,
 			type: NODE_DATATYPE.TO_3VIEW,
-			title: 'To 3-View',
+			title: t('FlowCanvas.to3DViewTitle'),
 			component: To3View,
 			api:threeToThreeViewsApi
 		}

src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue

@@ -1,11 +1,11 @@
 <template>
 	<!-- 场景构图 -->
 	<div class="scene-composition">
-		<p class="label">Prompt</p>
+		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
 		<my-textarea v-model="data.prompt" />
-		<p class="label">Mode</p>
+		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
-		<p class="label">Choose Style</p>
+		<p class="label">{{ $t('FlowCanvas.chooseStyle') }}</p>
 		<div class="style-list">
 			<div
 				class="item"
@@ -26,26 +26,28 @@
 <script setup lang="ts">
 	import { computed, ref, reactive, onMounted } from 'vue'
 	import myTextarea from '../../tools/my-textarea.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const styleList = ref([
-		{ label: 'Colorful', value: 'Colorful' },
+		{ label: t('FlowCanvas.colorful'), value: 'Colorful' },
-		{ label: 'Minimalist', value: 'Minimalist' },
+		{ label: t('FlowCanvas.minimalist'), value: 'Minimalist' },
-		{ label: 'Modernist', value: 'Modernist' },
+		{ label: t('FlowCanvas.modernist'), value: 'Modernist' },
-		{ label: 'Bauhaus', value: 'Bauhaus' },
+		{ label: t('FlowCanvas.bauhaus'), value: 'Bauhaus' },
-		{ label: 'Mintage', value: 'Mintage' },
+		{ label: t('FlowCanvas.mintage'), value: 'Mintage' },
-		{ label: 'Industrial', value: 'Industrial' },
+		{ label: t('FlowCanvas.industrial'), value: 'Industrial' },
-		{ label: 'Futuristic', value: 'Futuristic' },
+		{ label: t('FlowCanvas.futuristic'), value: 'Futuristic' },
-		{ label: 'Elegant', value: 'Elegant' },
+		{ label: t('FlowCanvas.elegant'), value: 'Elegant' },
-		{ label: 'Organic', value: 'Organic' },
+		{ label: t('FlowCanvas.organic'), value: 'Organic' },
-		{ label: 'Calm', value: 'Calm' },
+		{ label: t('FlowCanvas.calm'), value: 'Calm' },
-		{ label: 'Abstract', value: 'Abstract' },
+		{ label: t('FlowCanvas.abstract'), value: 'Abstract' },
-		{ label: 'Kitsch-core', value: 'Kitsch-core' },
+		{ label: t('FlowCanvas.kitschCore'), value: 'Kitsch-core' },
-		{ label: 'Sophisticated', value: 'Sophisticated' },
+		{ label: t('FlowCanvas.sophisticated'), value: 'Sophisticated' },
-		{ label: 'Maximalism', value: 'Maximalism' },
+		{ label: t('FlowCanvas.maximalism'), value: 'Maximalism' },
-		{ label: 'Clean', value: 'Clean' },
+		{ label: t('FlowCanvas.clean'), value: 'Clean' },
-		{ label: 'Bright Colors', value: 'Bright Colors' },
+		{ label: t('FlowCanvas.brightColors'), value: 'Bright Colors' },
-		{ label: 'Luxurious', value: 'Luxurious' },
+		{ label: t('FlowCanvas.luxurious'), value: 'Luxurious' },
-		{ label: 'Bold Colors', value: 'Bold Colors' },
+		{ label: t('FlowCanvas.boldColors'), value: 'Bold Colors' },
-		{ label: 'Brutalism', value: 'Brutalism' }
+		{ label: t('FlowCanvas.brutalism'), value: 'Brutalism' }
 	])
 	const data = reactive({
 		prompt: '',
@@ -53,8 +55,8 @@
 		mode: 'Advanced',
 	})
 	const modeList = ref([
-		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
-		{ value: 'Normal', label: 'Normal' }
+		{ value: 'Normal', label: t('FlowCanvas.normalMode') },
 	])
 	const onClickStyle = (value: string) => {
 		if (data.styles.includes(value)) {

src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue

@@ -1,11 +1,11 @@
 <template>
 	<!-- 编辑素材 -->
 	<div class="surface-edit">
-		<p class="label">Image</p>
+		<p class="label">{{ $t('FlowCanvas.image') }}</p>
 		<upload-file v-model="data.file" />
-		<p class="label">Mode</p>
+		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
-		<p class="label">Prompt</p>
+		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
 		<my-textarea v-model="data.prompt" />
 	</div>
 </template>
@@ -15,14 +15,16 @@
 	import myTextarea from '../../tools/my-textarea.vue'
 	import uploadFile from '../../tools/upload-file.vue'
 	import mySelect from '../../tools/my-select.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const data = reactive({
 		prompt: '',
 		file: null,
 		mode: 'Advanced',
 	})
 	const modeList = ref([
-		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
-		{ value: 'Normal', label: 'Normal' }
+		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
 	])
 	const getApiData = ()=>{
 		return {

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue

@@ -1,11 +1,11 @@
 <template>
 	<!-- 转3D模型 -->
 	<div class="to-3d-model">
-		<p class="label">Image</p>
+		<p class="label">{{ $t('FlowCanvas.image') }}</p>
 		<div class="image">
 			<img :src="data.url" alt="">
 		</div>
-		<p class="label">Mode</p>
+		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
 	</div>
 </template>
@@ -13,6 +13,9 @@
 <script setup lang="ts">
 	import { reactive, inject, useAttrs, computed,ref } from 'vue'
 	import uploadFile from '../../tools/upload-file.vue'
+	import mySelect from '../../tools/my-select.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const attrs = useAttrs()
 	const stateManager = inject('stateManager') as any
 	const data = reactive({
@@ -20,8 +23,8 @@
 		mode: 'Advanced',
 	})
 	const modeList = ref([
-		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
-		{ value: 'Normal', label: 'Normal' }
+		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
 	])
 	const getApiData = ()=>{
 		return {

src/components/Canvas/FlowCanvas/components/nodes/cards/to-3view.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 转3-View -->
 	<div class="to-3view">
-		<p class="label">3D Model</p>
+		<p class="label">{{ $t('FlowCanvas._3DModel') }}</p>
 		<div class="image">
 			<img :src="data.url" alt="">
 		</div>

src/components/Canvas/FlowCanvas/components/nodes/cards/to-cad.vue

@@ -1,9 +1,9 @@
 <template>
 	<!-- 转CAD -->
 	<div class="to-cad">
-		<p class="label">3D Model</p>
+		<p class="label">{{ $t('FlowCanvas._3DModel') }}</p>
 		<upload-file v-model="data.file" />
-		<p class="label">Prompt</p>
+		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
 		<my-textarea v-model="data.prompt" />
 	</div>
 </template>

src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 转换为真实图 -->
 	<div class="to-real-style">
-		<p class="label">Prompt</p>
+		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
 		<my-textarea v-model="data.prompt" />
 		<div class="shortcut-list">
 			<div
@@ -13,9 +13,9 @@
 				{{ v.label }}
 			</div>
 		</div>
-		<p class="label">Mode</p>
+		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
-		<p class="label">Size</p>
+		<p class="label">{{ $t('FlowCanvas.size') }}</p>
 		<pixel-ratio-selection v-model="data.pixelRatio" />
 	</div>
 </template>
@@ -25,43 +25,30 @@
 	import myTextarea from '../../tools/my-textarea.vue'
 	import mySelect from '../../tools/my-select.vue'
 	import pixelRatioSelection from '../../tools/pixel-ratio-selection.vue'
-	const shortcutList = ref([
+	import { useI18n } from 'vue-i18n'
-		{
+	const { t } = useI18n()
-			label: 'Change the...',
+	const shortcutList = ref([])
-			value: 'Change the style to a realistic design. '
+	for (let i = 0; i < 5; i++) {
-		},
+		shortcutList.value.push({
-		{
+			label: t(`FlowCanvas.toRealStyleShortcut${i + 1}Label`),
-			label: 'Bright Colors...',
+			value: t(`FlowCanvas.toRealStyleShortcut${i + 1}Value`)
-			value: 'Bright colors with modern patterns, change the style to a realistic furniture design. '
+		})
-		},
-		{
-			label: 'Make the...',
-			value: 'Make the structure more refined and balanced, change the style to a realistic furniture style. '
-		},
-		{
-			label: 'Imagine...',
-			value: 'Imagine this furniture with detailed fabric textures, change the style to a realistic design. '
-		},
-		{
-			label: 'Wood Materials with...',
-			value: 'Wood materials with natural oak texture and soft fabric, change the style to a realistic furniture design.'
 	}
-	])
 	const modeList = ref([
-		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
-		{ value: 'Normal', label: 'Normal' }
+		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
 	])
 	const data = reactive({
 		prompt: '',
 		pixelRatio: '1:1',
-		mode: 'Advanced',
+		mode: 'Advanced'
 	})
 
-	const getApiData = ()=>{
+	const getApiData = () => {
 		return {
 			mode: data.mode,
 			size: data.pixelRatio,
-			userPrompt: data.prompt,
+			userPrompt: data.prompt
 		}
 	}
 

src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-variants.vue

@@ -1,8 +1,8 @@
 <template>
 	<!-- 转换为真实图 -->
 	<div class="to-real-style">
-		<p class="label">Prompt</p>
+		<p class="label">{{ t('FlowCanvas.prompt') }}</p>
-		<my-textarea v-model="data.prompt" :placeholder="$t('flowCanvas.toRealVariantsPlaceholder')" />
+		<my-textarea v-model="data.prompt" :placeholder="$t('FlowCanvas.toRealVariantsPlaceholder')" />
 		<div class="shortcut-list">
 			<div
 				class="item"
@@ -13,9 +13,9 @@
 				{{ v.label }}
 			</div>
 		</div>
-		<p class="label">Mode</p>
+		<p class="label">{{ t('FlowCanvas.mode') }}</p>
 		<my-select v-model="data.mode" :list="modeList" />
-		<p class="label">Size</p>
+		<p class="label">{{ t('FlowCanvas.size') }}</p>
 		<pixel-ratio-selection v-model="data.pixelRatio" />
 	</div>
 </template>
@@ -29,24 +29,24 @@
 	const { t } = useI18n()
 	const shortcutList = ref([
 		{
-			label: t('flowCanvas.toRealVariantsShortcut1Label'),
+			label: t('FlowCanvas.toRealVariantsShortcut1Label'),
-			value: t('flowCanvas.toRealVariantsShortcut1Value')
+			value: t('FlowCanvas.toRealVariantsShortcut1Value')
 		},
 		{
-			label: t('flowCanvas.toRealVariantsShortcut2Label'),
+			label: t('FlowCanvas.toRealVariantsShortcut2Label'),
-			value: t('flowCanvas.toRealVariantsShortcut2Value')
+			value: t('FlowCanvas.toRealVariantsShortcut2Value')
 		},
 		{
-			label: t('flowCanvas.toRealVariantsShortcut3Label'),
+			label: t('FlowCanvas.toRealVariantsShortcut3Label'),
-			value: t('flowCanvas.toRealVariantsShortcut3Value')
+			value: t('FlowCanvas.toRealVariantsShortcut3Value')
 		},
 		{
-			label: t('flowCanvas.toRealVariantsShortcut4Label'),
+			label: t('FlowCanvas.toRealVariantsShortcut4Label'),
-			value: t('flowCanvas.toRealVariantsShortcut4Value')
+			value: t('FlowCanvas.toRealVariantsShortcut4Value')
 		},
 		{
-			label: t('flowCanvas.toRealVariantsShortcut5Label'),
+			label: t('FlowCanvas.toRealVariantsShortcut5Label'),
-			value: t('flowCanvas.toRealVariantsShortcut5Value')
+			value: t('FlowCanvas.toRealVariantsShortcut5Value')
 		}
 	])
 	const stateManager = inject('stateManager') as any

src/components/Canvas/FlowCanvas/components/nodes/result-image.vue

@@ -19,7 +19,7 @@
 				</span>
 				<button class="edit" @click="onEdit(item)" v-if="node.data.superiorNodeType !== NODE_DATATYPE.TO_3D_MODEL || node.data.tier == 0">
 					<span class="icon"><svg-icon name="edit" size="13" /></span>
-					<span class="text">Edit</span>
+					<span class="text">{{ $t('FlowCanvas.edit') }}</span>
 				</button>
 			</div>
 			<img
@@ -65,8 +65,10 @@
 	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch, computed, onMounted } from 'vue'
 	import HighlightAdmin from '@/components/highlightAdmin.vue'
 	import { NODE_DATATIER, NODE_DATATYPE } from '../../tools/index.d'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
-	const openThreeModelPreview = inject('openThreeModelPreview') as (url: string) => void
+	const openThreeModelPreview = inject('openThreeModelPreview') as (obj: any) => void
 	const props = defineProps({
 		node: {
 			type: Object,
@@ -125,9 +127,9 @@
 		{ immediate: true }
 	)
 	const menus = ref([
-		{ label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node') },
+		{ label: t('FlowCanvas.copy'), tip: 'Ctrl+C', on: () => emit('copy-node') },
 		{
-			label: 'Delete',
+			label: t('FlowCanvas.delete'),
 			tip: 'Del',
 			on: () => {
 				emit('delete-node', props.node.id)
@@ -135,23 +137,8 @@
 			disabled: !!props.config?.disableDelete
 		},
 		{ isDivide: true },
-		// {
-		// 	label: 'Bring to font',
-		// 	tip: '',
-		// 	on: () => {
-		// 		emit('bring-to-font')
-		// 	}
-		// },
-		// {
-		// 	label: 'Send to back',
-		// 	tip: '',
-		// 	on: () => {
-		// 		emit('send-to-back')
-		// 	}
-		// },
-		// { isDivide: true },
 		{
-			label: 'Flip horizontal',
+			label: t('FlowCanvas.flipHorizontal'),
 			tip: '',
 			on: () => {
 				data.imageProcessTasks.forEach((item) => {
@@ -167,7 +154,7 @@
 			}
 		},
 		{
-			label: 'Flip vertical',
+			label: t('FlowCanvas.flipVertical'),
 			tip: '',
 			on: () => {
 				data.imageProcessTasks.forEach((item) => {

src/components/Canvas/FlowCanvas/components/nodes/text.vue

@@ -24,6 +24,8 @@
 <script setup lang="ts">
 	import { reactive, ref, onMounted, nextTick, watch } from 'vue'
 	import myTextTools from '@/components/Canvas/FlowCanvas/components/tools/my-textTools.vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
 	const props = defineProps({
 		active: {
 			type: Boolean,
@@ -36,7 +38,7 @@
 	})
 	const emit = defineEmits(['update-data', 'delete-node'])
 	const data = reactive({
-		text: props.data?.text || '点击编辑文本',
+		text: props.data?.text || t('FlowCanvas.clickEditText'),
 		textStyle:{
 			'--font-size':props.data?.textStyle?.['--font-size'] || '16px',
 			'--font-color':props.data?.textStyle?.['--font-color'] || '#000',

src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue

@@ -38,7 +38,7 @@
 	import { reactive, ref, markRaw, onMounted } from 'vue'
 	import { useI18n } from 'vue-i18n'
 	const emit = defineEmits(['update:textStyle'])
-	const { locale } = useI18n()
+	const { locale, t } = useI18n()
 	const fontFamilyList = ref({
 		ENGLISH: [
 			{ value:'Medium',label:'Medium' },

src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="my-textarea">
 		<textarea
-			:placeholder="placeholder"
+			:placeholder="placeholder || $t('FlowCanvas.promptDefaultPlaceholder')"
 			:value="modelValue"
 			@input="onInput"
 			@change="onChange"
@@ -16,12 +16,15 @@
 
 <script setup lang="ts">
 	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
+	const placeholder = t('FlowCanvas.promptDefaultPlaceholder')
 	const emit = defineEmits(['update:modelValue', 'input', 'change'])
 	const props = defineProps({
 		modelValue: { type: String },
 		placeholder: {
 			type: String,
-			default: 'Enter the scene you want to describe...'
+			default: ''
 		}
 	})
 	const onInput = (e) => {

src/components/Canvas/FlowCanvas/components/tools/upload-file.vue

@@ -8,8 +8,8 @@
 		</div>
 		<div class="control" v-else>
 			<div class="icon"><svg-icon name="upload" size="17" size-unit="px" /></div>
-			<div class="txt">{{ tip }}</div>
+			<div class="txt">{{ tip || $t('FlowCanvas.uploadFiles') }}</div>
-			<div class="btn" @click="onSelectFile">Select File</div>
+			<div class="btn" @click="onSelectFile">{{ $t('FlowCanvas.selectFile') }}</div>
 		</div>
 	</div>
 </template>
@@ -20,7 +20,7 @@
 	const emit = defineEmits(['update:modelValue', 'change'])
 	const props = defineProps({
 		modelValue: { type: [File, Object, String, null] },
-		tip: { type: String, default: 'Upload your files' }
+		tip: { type: String, default: '' }
 	})
 	const data = reactive({
 		file: null

src/components/Canvas/FlowCanvas/manager/StateManager.ts

@@ -10,31 +10,31 @@ const t = i18n.global.t
 //推送到对话框的助手
 const chatAssistant = {
 	[NODE_DATATYPE.TO_REAL_STYLE]:{
-		content: t('flowCanvas.toRealStyleDesignAssistant'),
+		content: t('FlowCanvas.toRealStyleDesignAssistant'),
 		nodeType:NODE_DATATYPE.TO_REAL_STYLE,
 	},
 	[NODE_DATATYPE.CANVAS_MODE]:{
-		content: t('flowCanvas.surfaceEditCanvasDesignAssistant'),
+		content: t('FlowCanvas.surfaceEditCanvasDesignAssistant'),
 		nodeType:NODE_DATATYPE.CANVAS_MODE,
 	},
 	[NODE_DATATYPE.Fast_MODE]:{
-		content: t('flowCanvas.surfaceEditAIDesignAssistant'),
+		content: t('FlowCanvas.surfaceEditAIDesignAssistant'),
 		nodeType:NODE_DATATYPE.Fast_MODE,
 	},
 	[NODE_DATATYPE.COLOR_PALETTE]:{
-		content: t('flowCanvas.colorPaletteDesignAssistant'),
+		content: t('FlowCanvas.colorPaletteDesignAssistant'),
 		nodeType:NODE_DATATYPE.COLOR_PALETTE,
 	},
 	[NODE_DATATYPE.SCENE_COMPOSITION]:{
-		content: t('flowCanvas.threeModelDesignAssistant'),
+		content: t('FlowCanvas.threeModelDesignAssistant'),
 		nodeType:NODE_DATATYPE.SCENE_COMPOSITION,
 	},
 	[NODE_DATATYPE.TO_3D_MODEL]:{
-		content: t('flowCanvas.threeModelDesignAssistant'),
+		content: t('FlowCanvas.threeModelDesignAssistant'),
 		nodeType:NODE_DATATYPE.TO_3D_MODEL,
 	},
 	[NODE_DATATYPE.TO_3VIEW]:{
-		content: t('flowCanvas.threeModelDesignAssistant'),
+		content: t('FlowCanvas.threeModelDesignAssistant'),
 		nodeType:NODE_DATATYPE.TO_3VIEW,
 	},
 }
@@ -167,7 +167,7 @@ export class StateManager {
 	getSuperiorNodeImage(superiorID: string) {
 		const superiorNode = this.getNodeById(superiorID)
 		if(!superiorNode){
-			// ElMessage.error(t('flowCanvas.cannotFindSuperiorImage'))
+			// ElMessage.error(t('FlowCanvas.cannotFindSuperiorImage'))
 			return null
 		}
 		const superiorNodeUrl =  superiorNode.data.data.imageProcessTasks.filter((item)=>{
@@ -179,7 +179,7 @@ export class StateManager {
 	async deleteSubordinateAllNodes(id: string,{ isElMessageBox } = { isElMessageBox: false }) {
 		const node = this.getNodeById(id)
 		if (!node) return console.warn(`没有找到指定id:${id}`)
-		if (node.data.disableDelete) return ElMessage.error(t('flowCanvas.initialNodeProhibited'))
+		if (node.data.disableDelete) return ElMessage.error(t('FlowCanvas.initialNodeProhibited'))
 		
 		const result = [node]
 
@@ -197,11 +197,11 @@ export class StateManager {
 		if (isElMessageBox) {
 			deletePromise = await new Promise<void>((resolve, reject) => {
 				ElMessageBox.confirm(
-					result.length > 1 ? t('flowCanvas.deleteSubordinateCard') : t('flowCanvas.deleteCardConfirm'),
+					result.length > 1 ? t('FlowCanvas.deleteSubordinateCard') : t('FlowCanvas.deleteCardConfirm'),
 					'',
 					{
-						confirmButtonText: t('flowCanvas.confirm'),
+						confirmButtonText: t('FlowCanvas.confirm'),
-						cancelButtonText: t('flowCanvas.cancel'),
+						cancelButtonText: t('FlowCanvas.cancel'),
 					}
 				).then(() => {resolve(true)
 				}).catch(() => {

src/lang/en.ts

@@ -193,7 +193,7 @@ export default {
 		Confirm: 'Confirm',
 		export: 'Export'
 	},
-	flowCanvas: {
+	FlowCanvas: {
 		deleteCardConfirm: 'Are you sure you want to delete this function card?',
 		confirm: 'Confirm',
 		cancel: 'Cancel',
@@ -226,6 +226,75 @@ export default {
 		toRealVariantsShortcut5Label: 'Modified the outer...',
 		toRealVariantsShortcut5Value: 'Modified the outer contour of the chair back.',
 		toRealVariantsPlaceholder: 'Enter the furniture details you modified...',
+		export: 'Export',
+		edit: 'Edit',
+		generate: 'Generate',
+		copy: 'Copy',
+		delete: 'Delete',
+		flipHorizontal: 'Flip horizontal',
+		flipVertical: 'Flip vertical',
+		clickEditText: 'Click to edit text',
+		// 卡片工具标题
+		selectCardsTitle: 'Advanced Tools',
+		toRealStyleTitle: 'To Real Style',
+		toRealVariantsTitle: 'To Real Variants',
+		surfaceEditTitle: 'Surface Edit',
+		surfaceEditCanvasTitle: 'Surface Edit (Canvas)',
+		sceneCompositionTitle: 'Scene Composition',
+		colorPaletteTitle: 'Color Palette',
+		to3DModelTitle: 'To 3D Model',
+		to3DViewTitle: 'To 3D View',
+		// 卡片工具
+		print: 'Print',
+		settings: 'Settings',
+		angle: 'Angle',
+		scale: 'Scale',
+		gapX: 'Gap X',
+		gapY: 'Gap Y',
+		offset: 'Offset',
+		size: 'Size',
+		prompt: 'Prompt',
+		promptDefaultPlaceholder: 'Enter the scene you want to describe...',
+		mode: 'Mode',
+		advancedMode: 'Advanced',
+		normalMode: 'Normal',
+		chooseColor: 'Choose Color',
+		output: 'Output',
+		chooseStyle: 'Choose Style',
+		colorful: 'Colorful',
+		minimalist: 'Minimalist',
+		modernist: 'Modernist',
+		bauhaus: 'Bauhaus',
+		mintage: 'Mintage',
+		industrial: 'Industrial',
+		futuristic: 'Futuristic',
+		elegant: 'Elegant',
+		organic: 'Organic',
+		calm: 'Calm',
+		abstract: 'Abstract',
+		kitschCore: 'Kitsch-core',
+		sophisticated: 'Sophisticated',
+		maximalism: 'Maximalism',
+		clean: 'Clean',
+		brightColors: 'Bright Colors',
+		luxurious: 'Luxurious',
+		boldColors: 'Bold Colors',
+		brutalism: 'Brutalism',
+		image: 'Image',
+		_3DModel: '3D Model',
+		toRealStyleShortcut1Label: 'Change the...',
+		toRealStyleShortcut1Value: 'Change the style to a realistic design. ',
+		toRealStyleShortcut2Label: 'Bright Colors...',
+		toRealStyleShortcut2Value: 'Bright colors with modern patterns, change the style to a realistic furniture design. ',
+		toRealStyleShortcut3Label: 'Make the...',
+		toRealStyleShortcut3Value: "RMake the structure more refined and balanced, change the style to a realistic furniture style. ",
+		toRealStyleShortcut4Label: 'Imagine...',
+		toRealStyleShortcut4Value: 'Imagine this furniture with detailed fabric textures, change the style to a realistic design. ',
+		toRealStyleShortcut5Label: 'Wood Materials with...',
+		toRealStyleShortcut5Value: 'Wood materials with natural oak texture and soft fabric, change the style to a realistic furniture design.',
+		// 上传文件组件
+		selectFile: 'Select File',
+		uploadFiles: 'Upload your files',
 	},
 	assistant: {
 		inputPlaceholder: 'Ask anything'

src/lang/zh-cn.ts

@@ -189,7 +189,7 @@ export default {
 		delete: '删除',
 		edit: '编辑'
 	},
-	flowCanvas: {
+	FlowCanvas: {
 		deleteCardConfirm: '确定要删除该功能卡片吗？',
 		confirm: '确认',
 		cancel: '取消',
@@ -221,6 +221,75 @@ export default {
 		toRealVariantsShortcut5Label: '修改...',
 		toRealVariantsShortcut5Value: '修改了椅背的外轮廓.',
 		toRealVariantsPlaceholder: '请输入修改后的家具详情...',
+		export: '导出',
+		edit: '编辑',
+		generate: '生成',
+		copy: '复制',
+		delete: '删除',
+		flipHorizontal: '水平翻转',
+		flipVertical: '垂直翻转',
+		clickEditText: '点击编辑文本',
+		// 卡片工具标题
+		selectCardsTitle: '高级工具',
+		toRealStyleTitle: '真实风格',
+		toRealVariantsTitle: '真实风格变体',
+		surfaceEditTitle: '表面编辑',
+		surfaceEditCanvasTitle: '表面编辑（Canvas）',
+		sceneCompositionTitle: '场景构图',
+		colorPaletteTitle: '颜色调色板',
+		to3DModelTitle: '3D模型',
+		to3DViewTitle: '3视图',
+		// 卡片工具
+		print: '印花',
+		settings: '设置',
+		angle: '角度',
+		scale: '缩放',
+		gapX: '水平间距',
+		gapY: '垂直间距',
+		offset: '偏移量',
+		size: '大小',
+		prompt: '提示',
+		promptDefaultPlaceholder: '请输入你想要描述的场景…',
+		mode: '模式',
+		advancedMode: '高级',
+		normalMode: '普通',
+		chooseColor: '选择颜色',
+		output: '输出',
+		chooseStyle: '选择风格',
+		colorful: '多彩',
+		minimalist: '极简',
+		modernist: '现代',
+		bauhaus: '包豪斯',
+		mintage: '复古',
+		industrial: '工业',
+		futuristic: '未来',
+		elegant: '优雅',
+		organic: '有机',
+		calm: '平静',
+		abstract: '抽象',
+		kitschCore: '媚俗核心',
+		sophisticated: '精致',
+		maximalism: '极繁',
+		clean: '干净',
+		brightColors: '明亮色彩',
+		luxurious: '豪华',
+		boldColors: '大胆色彩',
+		brutalism: '粗野主义',
+		image: '图片',
+		_3DModel: '3D模型',
+		toRealStyleShortcut1Label: '修改沙发...',
+		toRealStyleShortcut1Value: '修改沙发靠背的形状.',
+		toRealStyleShortcut2Label: '鲜艳的色彩...',
+		toRealStyleShortcut2Value: '鲜艳的色彩搭配现代的图案，将风格转变为实用的家具设计。',
+		toRealStyleShortcut3Label: '风格改为...',
+		toRealStyleShortcut3Value: "使结构更加精致匀称，将风格改为符合实际的家具风格。",
+		toRealStyleShortcut4Label: '精细织物纹理...',
+		toRealStyleShortcut4Value: '想象一下这种带有精细织物纹理的家具，将其风格改为写实风格。',
+		toRealStyleShortcut5Label: '天然橡木纹理...',
+		toRealStyleShortcut5Value: '采用具有天然橡木纹理的木质材料以及柔软的织物，将风格转变为具有真实感的家具设计。',
+		// 上传文件组件
+		selectFile: '选择文件',
+		uploadFiles: '上传文件',
 	},
 	assistant: {
 		inputPlaceholder: '请输入'

src/views/home/test.vue

@@ -13,7 +13,11 @@
 	const url =
 		'https://www.minio-api.aida.com.hk/fida-user/2/d8512e53-f016-4ad6-8245-2f304d89e7b2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260331%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260331T032733Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=25e5ec227a0ca22942e71eff3a4f07a23f8812ff3db5522e1466b3a77288be70'
 	const openCanvas = () => {
-		myEvent.emit('openFlowCanvas', { url })
+		myEvent.emit('openFlowCanvas', {
+			url,
+			imgId: '69bcaae11e0cee430b750050',
+			nodeId: '69cde574a510db41350b404c'
+		})
 	}
 	const openDepthCanvas = () => {
 		myEvent.emit('openDepthCanvas', {