diff --git a/apps/jingrow/frontend/src/core/features/form_builder/components/Column.vue b/apps/jingrow/frontend/src/core/features/form_builder/components/Column.vue
index e432ee3..2e960ea 100644
--- a/apps/jingrow/frontend/src/core/features/form_builder/components/Column.vue
+++ b/apps/jingrow/frontend/src/core/features/form_builder/components/Column.vue
@@ -2,7 +2,7 @@
   <div
     :class="['column', selected ? 'selected' : hovered ? 'hovered' : '']"
     :title="column.df.fieldname"
-    @click.stop="store.form.selected_field = column.df"
+    @click.stop="handleColumnClick"
     @mouseover.stop="hovered = true"
     @mouseout.stop="hovered = false"
   >
@@ -27,6 +27,7 @@
       :easing="store.getAnimation"
       item-key="id"
       :disabled="store.readOnly"
+      @click="handleContainerClick"
     >
       <template #item="{ element }">
         <Field
@@ -36,7 +37,7 @@
         />
       </template>
     </draggable>
-    <div class="empty-column" :hidden="store.readOnly">
+    <div class="empty-column" :hidden="store.readOnly" @click="handleEmptyColumnClick">
       <AddFieldButton :column="column" />
     </div>
     <div v-if="column.fields.length" class="add-new-field-btn">
@@ -67,6 +68,56 @@ whenever(Backspace, (value) => {
 
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.column.df.name));
+
+function handleColumnClick(event) {
+  console.log('[Column] handleColumnClick triggered');
+  console.log('[Column] event.target:', event.target);
+  
+  // 如果点击的是 AddFieldButton，不选中列
+  const target = event.target;
+  const wrapper = target.closest('.add-field-btn, .add-field-wrapper');
+  console.log('[Column] closest wrapper:', wrapper);
+  
+  if (wrapper) {
+    console.log('[Column] Clicked on AddFieldButton, skipping column selection');
+    return;
+  }
+  
+  console.log('[Column] Selecting column');
+  store.form.selected_field = props.column.df;
+}
+
+function handleEmptyColumnClick(event) {
+  // 如果点击的是按钮，不阻止事件（让按钮处理）
+  const target = event.target;
+  const isButton = target.closest('.add-field-btn, .add-field-wrapper');
+  if (isButton) {
+    // 让事件继续传播到按钮
+    return;
+  }
+  // 否则阻止事件冒泡（避免选中列）
+  event.stopPropagation();
+}
+
+function handleContainerClick(event) {
+  console.log('[Column] handleContainerClick triggered');
+  console.log('[Column] event.target:', event.target);
+  
+  // 如果点击的是按钮，不阻止事件
+  const target = event.target;
+  const isButton = target.closest('.add-field-btn, .add-field-wrapper');
+  console.log('[Column] isButton:', isButton);
+  
+  if (isButton) {
+    console.log('[Column] Clicked on button, not stopping propagation');
+    // 不阻止，让按钮处理
+    return;
+  }
+  
+  // 否则阻止事件冒泡到列容器
+  console.log('[Column] Stopping propagation');
+  event.stopPropagation();
+}
 </script>
 
 <style lang="scss" scoped>
@@ -153,10 +204,12 @@ const selected = computed(() => store.selected(props.column.df.name));
         gap: 5px;
         width: 100%;
         padding: 15px;
+        z-index: 5; // 确保在 column-container 上面
 
         button {
           background-color: #f9fafb;
-          z-index: 2;
+          z-index: 10;
+          position: relative;
 
           &:hover {
             background-color: #e5e7eb;