import { ref, inject, onMounted } from "vue";
import { Skeleton } from "ant-design-vue";
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
const loading = ref(true);
const shortcuts = ref([]);
@@ -44,17 +46,17 @@ function convertShortcuts(managerShortcuts) {
// 基本的Action到显示名称的映射
const actionDisplayMap = {
- undo: "撤销",
- redo: "重做",
- delete: "删除选中元素",
+ undo: t('Canvas.Undo'),
+ redo: t('Canvas.Redo'),
+ delete: t('Canvas.DeleteSelectedElement'),
selectAll: "全选",
- copy: "复制",
- paste: "粘贴",
- cut: "剪切",
+ copy: t('Canvas.Copy'),
+ paste: t('Canvas.Pase'),
+ cut: t('Canvas.Cut'),
save: "保存",
selectTool: "选择工具",
- increaseBrushSize: "增加笔触大小",
- decreaseBrushSize: "减小笔触大小",
+ increaseBrushSize: t('Canvas.DecreaseBrush'),
+ decreaseBrushSize: t('Canvas.IncreaseBrush'),
toggleTempTool: "临时切换工具",
// newLayer: "新建图层",
// groupLayers: "组合图层",
@@ -64,15 +66,15 @@ function convertShortcuts(managerShortcuts) {
// 工具ID到显示名称的映射
const toolDisplayMap = {
- select: "选择模式",
- draw: "绘画模式",
- eraser: "橡皮擦模式",
- // eyedropper: "吸色工具",
- pan: "移动画布",
- lasso: "套索工具",
- // area_custom: "自由选区工具",
- // wave: "波浪工具",
- liquify: "液化工具",
+ select: t('Canvas.SelectionMode'),
+ draw: t('Canvas.PaintingMode'),
+ eraser: t('Canvas.EraserMode'),
+ // eyedropper: t('Canvas.Cut'),
+ pan: '移动画布',
+ lasso: t('Canvas.LassoTool'),
+ // area_custom: t('Canvas.Cut'),
+ // wave: t('Canvas.Cut'),
+ liquify: t('Canvas.LiquifyTool'),
};
// 处理每个快捷键
@@ -95,9 +97,9 @@ function convertShortcuts(managerShortcuts) {
// 添加一些组件特定的快捷键
result.push({
- action: "缩放画布",
- windows: "鼠标滚轮",
- mac: "鼠标滚轮 或 触控板缩放手势",
+ action: t('Canvas.ZoomCanvas'),
+ windows: t('Canvas.MouseWheel'),
+ mac: t('Canvas.MacZoomCanvas'),
touch: "双指捏合",
});
@@ -268,11 +270,11 @@ function getShortcutsByCategory(category) {
-
键盘快捷键 & 操作指南
+
{{ $t('Canvas.KeyboardShortcutsOperationGuide') }}
- 检测到的平台:
+ {{$t('Canvas.TheDetectedPlatform')}}:
MacOS
Windows
iPad
@@ -283,12 +285,12 @@ function getShortcutsByCategory(category) {
-
基本操作
+
{{$t('Canvas.BasicOperations')}}
- | 操作 |
- 快捷键/手势 |
+ {{$t('Canvas.BasicOperations')}} |
+ {{$t('Canvas.ShortcutGesture')}} |
@@ -301,12 +303,12 @@ function getShortcutsByCategory(category) {
-
视图操作
+
{{ $t('Canvas.viewOperations') }}
- | 操作 |
- 快捷键/手势 |
+ {{ $t('Canvas.Operation') }} |
+ {{ $t('Canvas.ShortcutGesture') }} |
@@ -319,12 +321,12 @@ function getShortcutsByCategory(category) {
-
工具切换
+
{{ $t('Canvas.toolSwitching') }}
- | 操作 |
- 快捷键/手势 |
+ {{ $t('Canvas.Operation') }} |
+ {{ $t('Canvas.ShortcutGesture') }} |
@@ -337,12 +339,12 @@ function getShortcutsByCategory(category) {
-
笔刷调整
+
{{ $t('Canvas.toolSwitching') }}
- | 操作 |
- 快捷键/手势 |
+ {{ $t('Canvas.Operation') }} |
+ {{ $t('Canvas.ShortcutGesture') }} |
diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
index 6638f601..cf5b04aa 100644
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
@@ -3,7 +3,8 @@ import { ref, nextTick, computed, inject } from "vue";
import { Checkbox } from "ant-design-vue";
import { VueDraggable } from "vue-draggable-plus";
import { isGroupLayer } from "../../utils/layerHelper";
-
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
// 设置组件名称,用于递归渲染
defineOptions({
name: "LayerItem",
@@ -393,7 +394,7 @@ function findParentLayerId() {
v-if="layer.thumbnailUrl"
:src="layer.thumbnailUrl"
class="layer-thumbnail"
- :alt="$t('图层预览')"
+ :alt="$t('Canvas.preview')"
/>
@@ -423,7 +424,7 @@ function findParentLayerId() {
@@ -447,7 +448,7 @@ function findParentLayerId() {
@@ -460,7 +461,7 @@ function findParentLayerId() {
class="group-expand-icon"
@click.stop="toggleGroupExpanded"
@dblclick.stop=""
- :title="isGroupExpanded ? $t('收起组') : $t('展开组')"
+ :title="isGroupExpanded ? $t('Canvas.CollapseUp') : $t('Canvas.CollapseDown')"
>
-->
- {{ $t("图层") }}
+ {{ $t("Canvas.layer") }}
{{ selectedLayerIds.length > 0 ? `(${selectedLayerIds.length})` : "" }}
@@ -1533,7 +1535,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
class="group-btn action-btn"
:class="{ disabled: !canGroupLayers }"
@click="groupSelectedLayers"
- :title="$t('创建组')"
+ :title="$t('Canvas.createGroup')"
>
@@ -1542,7 +1544,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
class="ungroup-btn action-btn"
:class="{ disabled: !canUngroupLayers }"
@click="ungroupSelectedLayer"
- :title="$t('解组')"
+ :title="$t('Canvas.slutionGroup')"
>
@@ -1550,7 +1552,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
@@ -1558,7 +1560,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
@@ -1570,7 +1572,7 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
v-if="isChildLayerActive"
class="add-layer-btn action-btn"
@click="addTopLayer"
- :title="$t('添加顶级图层')"
+ :title="$t('Canvas.AddPinnedLayer')"
>
@@ -1587,8 +1589,8 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
- 已选择 {{ selectedLayerIds.length }} 个图层
- 提示:按住 Ctrl/Cmd 多选,Shift 范围选择,长按进入多选模式
+ {{ $t('Canvas.Hint') }}{{ selectedLayerIds.length }}
+ {{ $t('Canvas.Hint') }}
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 383e1941..b7d5bc5f 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -36,6 +36,8 @@ import { ToolManager } from "./managers/toolManager.js";
// import { fabric } from "fabric-with-all";
import { uploadImageAndCreateLayer, loadImageUrlToLayer, loadImage } from "./utils/imageHelper.js";
// import MinimapPanel from "./components/MinimapPanel.vue";
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
const KeyboardShortcutHelp = defineAsyncComponent(
() => import("./components/KeyboardShortcutHelp.vue")
);
@@ -514,7 +516,7 @@ function updateCanvasColor() {
}
async function addLayer() {
- await layerManager.createLayer("空图层");
+ await layerManager.createLayer(t('Canvas.EmptyLayer'));
}
async function addTopLayer() {
await layerManager.createLayer("空图层", LayerType.EMPTY, {
@@ -980,9 +982,9 @@ defineExpose({
/>
- 缩放: {{ currentZoom }}%
-
-
diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
index 750f75b9..b938ff9b 100644
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -62,7 +62,8 @@ import { fabric } from "fabric-with-all";
import { getOriginObjectInfo } from "../utils/layerUtils";
import { restoreFabricObject } from "../utils/objectHelper";
import { UpdateGroupMaskPositionCommand } from "../commands/UpdateGroupMaskPositionCommand";
-
+import { useI18n } from 'vue-i18n'
+const {t} = useI18n()
/**
* 图层管理器 - 负责管理画布上的所有图层
* 包含图层的创建、删除、修改、排序等操作
@@ -579,7 +580,7 @@ export class LayerManager {
this.createFixedLayer();
// 创建一个空白图层(默认位于背景图层和固定图层之上)
- await this.createLayer("图层 1");
+ await this.createLayer(t('Canvas.Layer1'));
} else {
// 检查是否已有背景层
const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
@@ -601,7 +602,7 @@ export class LayerManager {
);
if (!hasNormalLayer) {
- await this.createLayer("图层 1");
+ await this.createLayer(t('Canvas.Layer1'));
}
}
diff --git a/src/component/home/design/editDesignType/index.vue b/src/component/home/design/editDesignType/index.vue
index 566544c4..54628aa9 100644
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -546,7 +546,7 @@ setup(props:any,{emit}) {
productimg.selectGenerate.listType = listType
productimg.selectGenerate.isIndex = index
- if(!list[index]?.id &&( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType == 'PoseTransfer' && !list[index].url))){
+ if(( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType !== 'PoseTransfer' && !list[index].url))){
productimg.productimgIsProductimg = true
productimg.productimgRemProductimg = true
setPrductimg([list[index].taskId])
@@ -626,14 +626,15 @@ setup(props:any,{emit}) {
// productimg.likeDesignCollectionList[index].childList[childIndex] = productimg.generateCourse
// }
}
- let emitData = {
+
+ }
+ let emitData = {
status:productimg.openType,
generateCourse:[{
...productimg.generateCourse,
}]
}
emit('upDataDesignLikeList',emitData)
- }
productimg.openType = ''
scaleImage.value = false
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index 2e273875..77e4438f 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -1069,6 +1069,7 @@ export default defineComponent({
}
const generateLoad = async (data:any)=>{
// return
+ console.log(data)
clearInterval(prductimgTime.ToProductImage)
clearInterval(prductimgTime.PoseTransfer)
clearInterval(prductimgTime.Relight)
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 81571c72..17a1faad 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -69,6 +69,7 @@ export default defineComponent({
dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
}
const canvasInit = (value)=>{
+ if(!props.imgUrl)return
canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
}
const getCanvasData = ()=>{
@@ -89,10 +90,40 @@ export default defineComponent({
}
const exportElement = ()=>{
- canvasEditor.value.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
+ dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
downloadBase64Image(rv,'canvas')
})
}
+ function downloadBase64Image(base64Data, filename) {
+ // 1. 提取MIME类型(自动处理各种Base64前缀)
+ const mimeMatch = base64Data.match(/^data:(.+?);base64,/);
+ if (!mimeMatch) {
+ console.error('Invalid Base64 data');
+ return;
+ }
+ // 2. 获取扩展名
+ const mimeType = mimeMatch[1];
+ const extension = mimeType.split('/')[1] || 'png';
+
+ // 3. 转换Base64为Blob
+ const byteString = atob(base64Data.split(',')[1]);
+ const ab = new ArrayBuffer(byteString.length);
+ const ia = new Uint8Array(ab);
+ for (let i = 0; i < byteString.length; i++) {
+ ia[i] = byteString.charCodeAt(i);
+ }
+ const blob = new Blob([ab], { type: mimeType });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${filename}.${extension}`;
+ document.body.appendChild(a);
+ a.click();
+ setTimeout(() => {
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }, 100);
+ }
const changeCanvas = ()=>{
emit('canvasChangeGetJSON',{canvasJSON:dataDom.editCanvas.getJSON(),submitDate:5000})
}
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index a24aa50b..8d45e6b8 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -977,4 +977,53 @@ export default {
System:'系统',
Library:'库',
},
+ Canvas:{
+ layer:'图层',
+ createGroup:'创建组',
+ slutionGroup:'解组',
+ deleteLayer:'删除图层',
+ clearSelection:'清除选择',
+ AddPinnedLayer:'添加置顶图层',
+ selectedLayers:'选中的图层数量:',
+ Hint:'提示:按住 Ctrl/Cmd 多选,Shift 范围选择,长按进入多选模式',
+ CollapseUp:'收起组',
+ CollapseDown:'展开组',
+ showGroup:'显示图层',
+ hideGroup:'隐藏图层',
+ showHiddenLayer:'显示/隐藏图层',
+ preview:'预览',
+ EmptyLayer:'空图层',
+ Scale:'缩放',
+ ResetLayer:'重置视图',
+ Help:'查看快捷键和触控操作',
+ width:'宽度',
+ height:'高度',
+ color:'颜色',
+ KeyboardShortcutsOperationGuide:'键盘快捷键 & 操作指南',
+ TheDetectedPlatform:'检测到的平台',
+ BasicOperations:'基础操作',
+ Operation:'操作',
+ ShortcutGesture:'快捷键/手势',
+ viewOperations:'视图操作',
+ toolSwitching:'工具切换',
+ BrushAdjustmentOperation:'笔刷调整',
+ undo:'撤销',
+ Redo:'重做',
+ Copy:'复制',
+ Paste:'粘贴',
+ Cut:'剪切',
+ DeleteSelectedElement:'删除选中元素',
+ MoveCanvas:'移动画布',
+ ZoomCanvas:'缩放画布',
+ MouseWheel:'鼠标滚轮',
+ MacZoomCanvas:'鼠标滚轮 或 触控板缩放手势',
+ SelectionMode:'选择模式',
+ PaintingMode:'绘画模式',
+ EraserMode:'橡皮擦模式',
+ LassoTool:'套索工具',
+ LiquifyTool:'液化工具',
+ DecreaseBrush:'增加笔触大小',
+ IncreaseBrush:'减小笔触大小',
+ Layer1:'图层 1',
+ }
}
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 41e01a5f..01fe4420 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -977,4 +977,53 @@ export default {
System:'System',
Library:'Library',
},
+ Canvas:{
+ layer:'Layer',
+ createGroup:'Create Group',
+ slutionGroup:'Slution Group',
+ deleteLayer:'Delete Layer',
+ clearSelection:'Clear Selection',
+ AddPinnedLayer:'Add a pinned layer',
+ selectedLayers:'The number of selected layers:',
+ Hint:'Hint: Hold down Ctrl/Cmd for multiple selections, Shift for range selection, and long press to enter the multiple selection mode',
+ CollapseUp:'Collapse Up',
+ CollapseDown:'Collapse Down',
+ showGroup:'Show Layer',
+ hideGroup:'Hidden Layer',
+ showHiddenLayer:'Show/Hidden Layer',
+ preview:'Preview',
+ EmptyLayer:'Empty layer',
+ Scale:'Scale',
+ ResetLayer:'Reset Layer',
+ Help:'View the shortcut keys and touch operations',
+ width:'Width',
+ height:'Height',
+ color:'Color',
+ KeyboardShortcutsOperationGuide:'Keyboard shortcuts & Operation guide',
+ TheDetectedPlatform:'Guide Detected Platform',
+ BasicOperations:'Basic Operations',
+ Operation:'Operation',
+ ShortcutGesture:'Shortcut/Gesture',
+ viewOperations:'View Operations',
+ toolSwitching:'Tool Switching',
+ BrushAdjustmentOperation:'Brush Adjustment Operation',
+ Undo:'Undo',
+ Redo:'Redo',
+ Copy:'Copy',
+ Paste:'Paste',
+ Cut:'Cut',
+ DeleteSelectedElement:'Delete Selected Element',
+ MoveCanvas:'Move Canvas',
+ ZoomCanvas:'Zoom Canvas',
+ MouseWheel:'Mouse Wheel',
+ MacZoomCanvas:'Mouse scroll wheel or touchpad zoom gesture',
+ SelectionMode:'Selection Mode',
+ PaintingMode:'Painting Mode',
+ EraserMode:'Eraser Mode',
+ LassoTool:'Lasso Tool',
+ LiquifyTool:'Liquify Tool',
+ DecreaseBrush:'Decrease Brush',
+ IncreaseBrush:'Increase Brush',
+ Layer1:'Layer 1',
+ }
}
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index d60b9951..85bbdafc 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -1115,10 +1115,14 @@ export default defineComponent({
border-radius: .8rem;
display: flex;
align-items: center;
- // flex-wrap: wrap;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
+ // flex-wrap: nowrap;
-
+ &.history{
+ > .text{
+ flex-basis: 100%;
+ }
+ }
> .time{
font-size: 1.2rem;
opacity: .5;