@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnColumnConfig/component/setRelationOption/LevelHeader.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="level-header">
+    <!-- 标题输入框 -->
+    <div class="level-header__input">
+      <el-input
+          v-model="localTitle"
+          placeholder="输入标题"></el-input>
+    </div>
+    
+    <!-- 操作按钮组 -->
+    <div class="level-header__actions">
+      <!-- 增加下一级按钮 -->
+      <el-button v-if="canAddNext" type="text" size="small" @click="$emit('add-level')">
+        增加下一级
+      </el-button>
+      
+      <!-- 删除级别按钮 -->
+      <el-popover v-if="canDelete" v-model="showDeleteConfirm" content="删除联动标题将同时删除该标题层级下的所有选项，谨慎操作" placement="top" width="220" :transition="''">
+        <template #reference>
+          <span class="bnUIcon bnUIcon-delete level-header__delete-icon"  @click="handleDelete"></span>
+        </template>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 级别头部组件
+ * 显示级别标题和操作按钮
+ */
+export default {
+  name: 'LevelHeader',
+  
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    
+    // 当前级别
+    level: {
+      type: Number,
+      required: true
+    },
+    
+    // 是否可以添加下一级
+    canAddNext: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否可以删除
+    canDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  emits: ['update:title', 'add-level', 'delete-level'],
+  
+  data() {
+    return {
+      showDeleteConfirm: false
+    };
+  },
+  
+  computed: {
+    localTitle: {
+      get() {
+        return this.title;
+      },
+      set(value) {
+        this.$emit('update:title', value);
+      }
+    }
+  },
+  
+  methods: {
+    handleDelete() {
+      this.$emit('delete-level');
+      this.showDeleteConfirm = false;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.level-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 10px;
+  border-bottom: 1px solid #ddd;
+  
+  // 标题输入框
+  &__input {
+    :deep(.el-input__wrapper) {
+      box-shadow: none;
+      border-bottom: none;
+      border-radius: 0;
+    }
+  }
+  
+  // 操作按钮组
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    
+    .el-button {
+      font-size: 12px;
+      padding: 0;
+    }
+  }
+  
+  // 删除图标
+  &__delete-icon {
+    font-size: 14px;
+    color: #f56c6c;
+    cursor: pointer;
+    padding: 4px;
+    
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+  
+  // 删除确认提示
+  &__delete-tip {
+    padding: 10px;
+    line-height: 1.5;
+    margin: 0;
+  }
+  
+  // 删除确认按钮组
+  &__delete-actions {
+    text-align: right;
+  }
+}
+</style>
+