aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

画布语言适配

Browse Source
This commit is contained in:
lzp
2026-04-14 14:26:41 +08:00
parent 1aa9119f43
commit 85a9e79329
22 changed files with 290 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Canvas/FlowCanvas/components/header-tools.vue
View File

@@ -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>

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

@@ -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>

22
src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
View File

@@ -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) => {

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

@@ -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: 'Normal', label: 'Normal' }
{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
{ value: 'Normal', label: t('FlowCanvas.normalMode') }
])
const getApiData = ()=>{
return {

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

@@ -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>

22
src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
View File

@@ -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
}

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

@@ -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: 'Minimalist', value: 'Minimalist' },
{ label: 'Modernist', value: 'Modernist' },
{ label: 'Bauhaus', value: 'Bauhaus' },
{ label: 'Mintage', value: 'Mintage' },
{ label: 'Industrial', value: 'Industrial' },
{ label: 'Futuristic', value: 'Futuristic' },
{ label: 'Elegant', value: 'Elegant' },
{ label: 'Organic', value: 'Organic' },
{ label: 'Calm', value: 'Calm' },
{ label: 'Abstract', value: 'Abstract' },
{ label: 'Kitsch-core', value: 'Kitsch-core' },
{ label: 'Sophisticated', value: 'Sophisticated' },
{ label: 'Maximalism', value: 'Maximalism' },
{ label: 'Clean', value: 'Clean' },
{ label: 'Bright Colors', value: 'Bright Colors' },
{ label: 'Luxurious', value: 'Luxurious' },
{ label: 'Bold Colors', value: 'Bold Colors' },
{ label: 'Brutalism', value: 'Brutalism' }
{ label: t('FlowCanvas.colorful'), value: 'Colorful' },
{ label: t('FlowCanvas.minimalist'), value: 'Minimalist' },
{ label: t('FlowCanvas.modernist'), value: 'Modernist' },
{ label: t('FlowCanvas.bauhaus'), value: 'Bauhaus' },
{ label: t('FlowCanvas.mintage'), value: 'Mintage' },
{ label: t('FlowCanvas.industrial'), value: 'Industrial' },
{ label: t('FlowCanvas.futuristic'), value: 'Futuristic' },
{ label: t('FlowCanvas.elegant'), value: 'Elegant' },
{ label: t('FlowCanvas.organic'), value: 'Organic' },
{ label: t('FlowCanvas.calm'), value: 'Calm' },
{ label: t('FlowCanvas.abstract'), value: 'Abstract' },
{ label: t('FlowCanvas.kitschCore'), value: 'Kitsch-core' },
{ label: t('FlowCanvas.sophisticated'), value: 'Sophisticated' },
{ label: t('FlowCanvas.maximalism'), value: 'Maximalism' },
{ label: t('FlowCanvas.clean'), value: 'Clean' },
{ label: t('FlowCanvas.brightColors'), value: 'Bright Colors' },
{ label: t('FlowCanvas.luxurious'), value: 'Luxurious' },
{ label: t('FlowCanvas.boldColors'), value: 'Bold Colors' },
{ label: t('FlowCanvas.brutalism'), value: 'Brutalism' }
])
const data = reactive({
prompt: '',
@@ -53,8 +55,8 @@
mode: 'Advanced',
})
const modeList = ref([
{ value: 'Advanced', label: 'Advanced' },
{ value: 'Normal', label: 'Normal' }
{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
{ value: 'Normal', label: t('FlowCanvas.normalMode') },
])
const onClickStyle = (value: string) => {
if (data.styles.includes(value)) {

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

@@ -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: 'Normal', label: 'Normal' }
{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
{ value: 'Normal', label: t('FlowCanvas.normalMode') }
])
const getApiData = ()=>{
return {

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

@@ -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: 'Normal', label: 'Normal' }
{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
{ value: 'Normal', label: t('FlowCanvas.normalMode') }
])
const getApiData = ()=>{
return {

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

@@ -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>

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

@@ -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>

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

@@ -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([
{
label: 'Change the...',
value: 'Change the style to a realistic design. '
},
{
label: 'Bright Colors...',
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.'
}
])
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const shortcutList = ref([])
for (let i = 0; i < 5; i++) {
shortcutList.value.push({
label: t(`FlowCanvas.toRealStyleShortcut${i + 1}Label`),
value: t(`FlowCanvas.toRealStyleShortcut${i + 1}Value`)
})
}
const modeList = ref([
{ value: 'Advanced', label: 'Advanced' },
{ value: 'Normal', label: 'Normal' }
{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
{ 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
}
}

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

@@ -1,8 +1,8 @@
<template>
<!-- 转换为真实图 -->
<div class="to-real-style">
<p class="label">Prompt</p>
<my-textarea v-model="data.prompt" :placeholder="$t('flowCanvas.toRealVariantsPlaceholder')" />
<p class="label">{{ t('FlowCanvas.prompt') }}</p>
<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'),
value: t('flowCanvas.toRealVariantsShortcut1Value')
label: t('FlowCanvas.toRealVariantsShortcut1Label'),
value: t('FlowCanvas.toRealVariantsShortcut1Value')
},
{
label: t('flowCanvas.toRealVariantsShortcut2Label'),
value: t('flowCanvas.toRealVariantsShortcut2Value')
label: t('FlowCanvas.toRealVariantsShortcut2Label'),
value: t('FlowCanvas.toRealVariantsShortcut2Value')
},
{
label: t('flowCanvas.toRealVariantsShortcut3Label'),
value: t('flowCanvas.toRealVariantsShortcut3Value')
label: t('FlowCanvas.toRealVariantsShortcut3Label'),
value: t('FlowCanvas.toRealVariantsShortcut3Value')
},
{
label: t('flowCanvas.toRealVariantsShortcut4Label'),
value: t('flowCanvas.toRealVariantsShortcut4Value')
label: t('FlowCanvas.toRealVariantsShortcut4Label'),
value: t('FlowCanvas.toRealVariantsShortcut4Value')
},
{
label: t('flowCanvas.toRealVariantsShortcut5Label'),
value: t('flowCanvas.toRealVariantsShortcut5Value')
label: t('FlowCanvas.toRealVariantsShortcut5Label'),
value: t('FlowCanvas.toRealVariantsShortcut5Value')
}
])
const stateManager = inject('stateManager') as any

29
src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
View File

@@ -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) => {

4
src/components/Canvas/FlowCanvas/components/nodes/text.vue
View File

@@ -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',

2
src/components/Canvas/FlowCanvas/components/tools/my-textTools.vue
View File

@@ -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' },

7
src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue
View File

@@ -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) => {

6
src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
View File

@@ -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="btn" @click="onSelectFile">Select File</div>
<div class="txt">{{ tip || $t('FlowCanvas.uploadFiles') }}</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

24
src/components/Canvas/FlowCanvas/manager/StateManager.ts
View File

@@ -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'),
cancelButtonText: t('flowCanvas.cancel'),
confirmButtonText: t('FlowCanvas.confirm'),
cancelButtonText: t('FlowCanvas.cancel'),
}
).then(() => {resolve(true)
}).catch(() => {

71
src/lang/en.ts
View File

@@ -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'

71
src/lang/zh-cn.ts
View File

@@ -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: '请输入'

6
src/views/home/test.vue
View File

@@ -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', {