Ver código fonte

feat(layer): 添加图层重命名确认机制

- 在图层编辑时临时记录原始名称与确认状态
- 实现点击图层项时先提交正在编辑的重命名再选中目标图层
- 添加确认重命名功能,支持按钮点击和Enter键确认
- 实现focus时保存原始名称,blur时未确认则恢复原始名称
- 添加确认按钮标记机制,防止blur先触发导致名称还原
- 添加图层名称内联确认按钮样式和交互逻辑
- 重构图层模板,将输入框和确认按钮包装在容器中
- 临时注释掉显示/隐藏操作按钮以优化界面布局
panqiuyao 12 horas atrás
pai
commit
efccc54af1

+ 56 - 0
frontend/src/views/components/PictureEditor/mixin/layer/index.js

@@ -24,6 +24,9 @@ export default  {
       //修改数据
       editUrl:null,
       editObject:null,
+      // 临时记录编辑时的原始名称与确认状态
+      editOriginalNames: {},
+      editConfirmed: {},
 
       //改颜色
       changeColorShow:false,
@@ -163,6 +166,12 @@ export default  {
      this.undoAfterSelectLayers();
      this.fcanvas.requestRenderAll();
     },
+    // 点击图层项时:先提交正在编辑的重命名(如果有),再选中目标图层
+    onLayerClick(item){
+      // 只切换选中图层,**不**自动提交正在编辑的名称;
+      // 名称的提交仅由确认按钮或 Enter 键触发
+      this.select(item)
+    },
     //指定置地图层
     move(item,type){
       let sort = 0
@@ -221,6 +230,53 @@ export default  {
       item.set({ name: name || '' })
       this.getLayers(false)
     },
+    // 确认重命名(由 UI 确认按钮触发)
+    confirmRename(item){
+      if(!item) return
+      try{
+        const refName = this.$refs && this.$refs['layerName-' + item.id]
+        let inputEl = refName
+        if(Array.isArray(refName)) inputEl = refName[0]
+        const val = inputEl ? (inputEl.value || '') : ''
+        this.renameLayer(item, val)
+        // 标记为已确认,避免 blur 恢复
+        this.editConfirmed[item.id] = true
+        if(inputEl && inputEl.blur) inputEl.blur()
+      }catch(e){
+        console.warn('[marketingEdit] confirmRename failed', e)
+      }
+    },
+    // focus 时保存原始名称
+    onLayerNameFocus(item, e){
+      if(!item) return
+      this.editOriginalNames[item.id] = this.layerDisplayName(item) || ''
+      this.editConfirmed[item.id] = false
+    },
+    // blur 时如果没有确认则恢复原始名称到输入框
+    onLayerNameBlur(item, e){
+      if(!item) return
+      const confirmed = this.editConfirmed[item.id]
+      if(!confirmed){
+        try{
+          const refName = this.$refs && this.$refs['layerName-' + item.id]
+          let inputEl = refName
+          if(Array.isArray(refName)) inputEl = refName[0]
+          if(inputEl){
+            inputEl.value = this.editOriginalNames[item.id] || ''
+          }
+        }catch(err){
+          console.warn('[marketingEdit] onLayerNameBlur revert failed', err)
+        }
+      }
+      // 清理临时状态
+      delete this.editOriginalNames[item.id]
+      delete this.editConfirmed[item.id]
+    },
+    // 在确认按钮按下(mousedown)时先标记为确认,防止 blur 先触发导致还原
+    markConfirm(item){
+      if(!item) return
+      this.editConfirmed[item.id] = true
+    },
     // 图层显示名称
     layerDisplayName(item){
       if(!item) return ''

+ 36 - 0
frontend/src/views/components/marketingEdit/index.vue

@@ -1038,6 +1038,42 @@ export default {
   margin-bottom: 6px;
 }
 
+/* layer name inline confirm button */
+.layer-item__name-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.layer-item__name {
+  flex: 1;
+  padding: 4px 8px;
+  height: 28px;
+  line-height: 20px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+.layer-item__confirm {
+  padding: 2px 8px;
+  height: 28px;
+  line-height: 20px;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.layer-item__confirm:hover {
+  background: #f5f7fa;
+}
+
+/* 默认隐藏确认按钮,输入框聚焦时显示 */
+.layer-item__confirm {
+  display: none;
+}
+.layer-item__name-wrap:focus-within .layer-item__confirm {
+  display: inline-block;
+}
+
 .goods-mode-samples .sample-row {
   display: flex;
   gap: 12px;

+ 14 - 8
frontend/src/views/components/marketingEdit/tpl/layer.js

@@ -12,20 +12,26 @@ export default function() {
             :key="item.id"
             :id="item.id"
             :class="{active:selectedIds.includes(item.id)}"
-            @click.stop="select(item)"
+            @click.stop="onLayerClick(item)"
           >
             <div class="layer-item__preview">
               <img :src="getLayerCover(item)" alt="" />
             </div>
             <div class="layer-item__meta">
-              <input
-                class="layer-item__name"
-                :value="layerDisplayName(item)"
-                @click.stop
-                @change="renameLayer(item, $event.target.value)"
-              />
+              <div class="layer-item__name-wrap">
+                <input
+                  class="layer-item__name"
+                  :value="layerDisplayName(item)"
+                  :ref="'layerName-' + item.id"
+                  @click.stop
+                  @focus="onLayerNameFocus(item, $event)"
+                  @blur="onLayerNameBlur(item, $event)"
+                  @keydown.enter.stop="confirmRename(item)"
+                />
+                <button type="button" class="layer-item__confirm" @mousedown.stop="markConfirm(item)" @click.stop="confirmRename(item)">确 定</button>
+              </div>
               <div class="layer-item__ops">
-                <span class="op-text" @click.stop="toggleVisibility(item)">{{ item.visible === false ? '显示' : '隐藏' }}</span>
+               <!-- <span class="op-text" @click.stop="toggleVisibility(item)">{{ item.visible === false ? '显示' : '隐藏' }}</span>-->
                 <button class="op-btn more" title="更多" @click.stop="toggleLayerMenu(item)">···</button>
                 <div
                   v-if="openLayerMenuId === item.id"