浏览代码

feat(marketingEdit): 添加画布删除功能并优化模板编辑路由

- 在画布选择下拉菜单中添加删除按钮,支持删除指定画布
- 实现 handleDeleteCanvas 方法处理画布删除逻辑,包括索引更新和重新初始化
- 优化 loadTemplate 方法的触发条件判断,改为通过路由名称判断
- 更新模板编辑页的示例图片资源链接
- 新增添加模板路由 '/tpl/add',指向模板编辑页面组件
panqiuyao 1 周之前
父节点
当前提交
57f987ff02

+ 8 - 0
frontend/src/router/model/tpl.ts

@@ -17,6 +17,14 @@ const tpl = [
         meta: {
             title: 'editTpl'
         }
+    },
+    {
+        path: '/tpl/add',
+        name: 'addTpl',
+        component: () => import("@/views/Tpl/Edit/index.vue"),
+        meta: {
+            title: 'editTpl'
+        }
     }
 ]
 export default  tpl;

+ 8 - 4
frontend/src/views/Tpl/Edit/index.vue

@@ -25,19 +25,23 @@
       :goods_images="[
           {
             key: '俯视',
-            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979820315694.png'
+            value: 'https://huilima.oss-cn-hangzhou.aliyuncs.com/frontend/demo/zhihuiyin/A596351/1.png'
           },
           {
             key: '侧视',
-            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979823853439.png'
+            value: 'https://huilima.oss-cn-hangzhou.aliyuncs.com/frontend/demo/zhihuiyin/A596351/2.png'
+          },
+          {
+            key: '后根',
+            value: 'https://huilima.oss-cn-hangzhou.aliyuncs.com/frontend/demo/zhihuiyin/A596351/3.png'
           },
           {
             key: '鞋底',
-            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979826640079.png'
+            value: 'https://huilima.oss-cn-hangzhou.aliyuncs.com/frontend/demo/zhihuiyin/A596351/4.png'
           },
           {
             key: '内里',
-            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979828870818.png'
+            value: 'https://huilima.oss-cn-hangzhou.aliyuncs.com/frontend/demo/zhihuiyin/A596351/5.png'
           }
       ]"
       @save="save"

+ 39 - 2
frontend/src/views/components/marketingEdit/index.vue

@@ -89,7 +89,7 @@ export default {
   },
   mounted() {
     console.log(this.$route?.params?.id);
-    if(this.$route?.params?.id){
+    if(this.$route?.name === 'editTpl'){
       this.loadTemplate()
     }
     this.init()
@@ -101,7 +101,6 @@ export default {
   methods: {
     loadTemplate(){
       if(this.hasLoadedTpl) return
-      if(!this.$route?.params?.id) return
       const tpl  = [
         {
           index: 0,
@@ -325,6 +324,44 @@ export default {
       this.saveCanvasSnapshot()
       this.$emit('update:index', index)
     },
+    handleDeleteCanvas(targetIndex){
+      if(this.data.length <= 1){
+        this.$message.warning('至少需要保留一个画布')
+        return
+      }
+      // 如果删除的是当前激活的画布,需要先保存快照并销毁实例
+      if(targetIndex === this.index){
+        this.saveCanvasSnapshot()
+        this.destroyCanvasInstance()
+      }
+      // 从数组中移除画布
+      this.data.splice(targetIndex, 1)
+      // 计算新的激活索引
+      let newIndex = this.index
+      if(targetIndex < this.index){
+        // 删除的画布在当前画布之前,索引减1
+        newIndex = this.index - 1
+      } else if(targetIndex === this.index){
+        // 删除的是当前画布,切换到前一个(如果存在),否则切换到第一个
+        newIndex = targetIndex > 0 ? targetIndex - 1 : 0
+      }
+      // 确保索引不超出范围
+      if(newIndex >= this.data.length){
+        newIndex = this.data.length - 1
+      }
+      if(newIndex < 0){
+        newIndex = 0
+      }
+      // 更新激活索引
+      this.$emit('update:index', newIndex)
+      // 如果删除的是当前画布,需要重新初始化
+      if(targetIndex === this.index){
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+      this.$message.success('画布已删除')
+    },
     canvasBodyStyle(item){
       const height = Number(item?.height)
       const width = Number(item?.width) || FIXED_CANVAS_WIDTH

+ 20 - 2
frontend/src/views/components/marketingEdit/tpl/header.js

@@ -20,9 +20,27 @@ export  default function tpl(){
                           <el-dropdown-item
                             v-for="(item,idx) in data"
                             :key="(item.id || item.tpl_url || idx) + '-' + idx"
-                            @click.native="handleSelectCanvas(idx)"
+                            @click.native.stop
                           >
-                            <span :class="idx === index ? 'c-primary' : ''">{{item.name || ('画布 ' + (idx + 1))}}</span>
+                            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+                              <span 
+                                :class="idx === index ? 'c-primary' : ''" 
+                                style="flex: 1; cursor: pointer;"
+                                @click="handleSelectCanvas(idx)"
+                              >
+                                {{item.name || ('画布 ' + (idx + 1))}}
+                              </span>
+                              <el-button
+                                type="danger"
+                                text
+                                size="small"
+                                :disabled="data.length === 1"
+                                @click="handleDeleteCanvas(idx)"
+                                style="margin-left: 10px; padding: 0 8px;"
+                              >
+                                删除
+                              </el-button>
+                            </div>
                           </el-dropdown-item>
                         </el-dropdown-menu>
                       </template>