mod:画布新增

frontend/src/views/Tpl/Edit/index.vue

@@ -2,11 +2,9 @@
   <headerBar title="编辑模板" />
 
   <marketingEdit
-      :canvasStyle="{
-          width:1020,
-          height:4000,
-      }"
-    @save="save"
+      v-model:data="data"
+      v-model:select="select"
+      @save="save"
   />
 
 
@@ -17,7 +15,21 @@
 import { ref, reactive } from 'vue';
 import headerBar from "@/components/header-bar/index.vue";
 import marketingEdit from '@/views/components/marketingEdit'
-
+const data  = ref([])
+const select = ref(0)
+
+/*
+* [
+*  {
+*     tpl_url:"",
+*     image_path:"",
+*     name:"",
+*     width:"",
+*     height:"",
+*     bg_color:"",
+*  }
+* ]
+* */
 
 
 const save = (data: any) => {

frontend/src/views/components/PictureEditor/mixin/view/index.js

@@ -41,10 +41,6 @@ const viewMixins = {
       type:Boolean,
       default:true,
     },
-    isEmpty:{
-      type:Boolean,
-      default:false,
-    },
     resize:{
       type:Boolean,
       default:true,

frontend/src/views/components/marketingEdit/index.vue

@@ -14,13 +14,15 @@ export default {
   mixins: [ viewMixins,actionsMixins,layerMixins,colorMixins,editMixins],
 
   props: {
-    width: {
-      type: String,
-      default: '1024px'
+    data: {
+      type: Array,
+      default:()=>{
+        return []
+      }
     },
-    height:{
-      type: Boolean,
-      default: '1024px'
+    select:{
+      type: Number,
+      default: 0
     },
 
   },
@@ -34,6 +36,7 @@ export default {
 
 
       canvasForm:{
+        type:'add',
         width: '1024',
         height: '1024',
         color:"#fff",
@@ -44,6 +47,9 @@ export default {
   },
   template: tpl(),
   computed: {
+    isEmpty(){
+      return this.data.length === 0
+    }
   },
   watch: {
 
@@ -58,6 +64,9 @@ export default {
   methods: {
     // 初始化
     async init() {
+      if(this.isEmpty ){
+        this.addCanvas()
+      }
       await this.viewInit()
       await  this.$nextTick()
       this.fcanvas = new fabric.Canvas('marketing-canvas', {
@@ -75,18 +84,19 @@ export default {
       this.layerInit();
       await  this.$nextTick()
       this.$emit('init')
-      const img = await this.addMaps('https://ossimg.valimart.net/uploads/vali_ai/20250610/174954546275619.png',{
-        name: 'subject',
-        left: 0,
-        top: 0,
-        delable:false,
-        erasable:true,
-        scaleX: 0.5,
-        scaleY: 0.5,
-      })
 
     },
+    addCanvas(){
+
+      this.canvasForm.type = 'add'
+      this.canvasForm.name = '画布_'+new Date().getTime()
+      this.canvasForm.width = 1024
+      this.canvasForm.height = 1024
+      this.canvasForm.color = '#fff'
+      this.canvasForm.visible = true;
+    },
     handleAdjustCanvas() {
+      this.canvasForm.type = 'edit'
       this.canvasForm.name = this.canvas.name
       this.canvasForm.width = this.canvas.width
       this.canvasForm.height = this.canvas.height
@@ -96,6 +106,8 @@ export default {
     submitCanvasInfo() {
       // 假设 this.canvasForm 包含最新的 width, height 和 color
 
+      if(this.canvasForm)
+
       this.canvas.name = this.canvasForm.name;
       this.canvas.width = this.canvasForm.width;
       this.canvas.height = this.canvasForm.height;

frontend/src/views/components/marketingEdit/tpl/header.js

@@ -6,22 +6,19 @@ export  default function tpl(){
            
            <div class="flex mar-left-10"> 
                 <div class="title">编辑信息</div>
-                <el-select v-model="canvas.name" class="mar-left-10" style="width: 100px;">
-                    <el-option>画布1</el-option>
-                    <el-option>画布2</el-option>
-                    <el-option>画布3</el-option>
-                    <el-option>画布4</el-option>
-                    <el-option>画布5</el-option>
+                <el-select v-if="!isEmpty" v-model="canvas.name" class="mar-left-10" style="width: 100px;">
+                    <el-option v-for="item,index in data">{{item.name}}</el-option>
                 </el-select>
            </div>
            
            <div class="button" style="margin-right: 10px;">
-            <el-button @click="handleAdjustCanvas">调整画布</el-button>
+            <el-button @click="addCanvas">新增画布</el-button>
+            <el-button class="mar-left-10"  v-if="!isEmpty"  @click="handleAdjustCanvas">调整画布</el-button>
             <el-button type="primary">保存</el-button>
            </div>
            
             <!-- 新增：调整画布尺寸弹窗 -->
-            <el-dialog title="调整画布" v-model="canvasForm.visible" append-to-body width="400px">
+            <el-dialog :title="canvasForm.type === 'add' ? '新增画布' : '编辑画布'" v-model="canvasForm.visible" append-to-body width="400px">
               <el-form :model="canvasForm" label-width="80px">
                 <el-form-item label="画布名称">
                   <el-input v-model.number="canvasForm.name" placeholder="请输入宽度"></el-input>

frontend/src/views/components/marketingEdit/tpl/index.js

@@ -13,24 +13,31 @@ export  default function tpl(){
           <!--新增-->
           ${header()}
           <!--新增-->
-          <!--新增-->
-          ${add()}
-          <!--新增-->
-        <div
-          class="picture-editor-wrap_canvas"
-        >
-          <!--视图-->
-           ${viewTpl()}
-          <!--视图-->
-
-        </div>
+           <template v-if="isEmpty">
+               <div> 数据为空，请点击左上角新增画布按钮。</div>
+          </template>
+          <template v-else>
+          
+                  <!--新增-->
+                  ${add()}
+                  <!--新增-->
+                <div
+                  class="picture-editor-wrap_canvas"
+                >
+                  <!--视图-->
+                   ${viewTpl()}
+                  <!--视图-->
         
-          <!--颜色图-->
-           ${colorTpl()}
-          <!--颜色图-->
-          <!--图层-->
-          ${editTpl()}
-          <!--图层-->
+                </div>
+                
+                  <!--颜色图-->
+                   ${colorTpl()}
+                  <!--颜色图-->
+                  <!--图层-->
+                  ${editTpl()}
+                  <!--图层-->
+          
+           </template>
       </div>
     </transition>
   `