ds-yamada-fcbi-admin/src/components/PublicRange.vue

<template>
  <div class="public-range-container">
    <!-- 统一使用带标题容器的结构，确保标题对齐 -->
    <!-- FC区域 - 支持可插拔控制 -->
    <div class="form-section" v-if="showFc">
      <div class="section-title fc-title">FC</div>
      <div class="section-content fc-content">
        <el-checkbox-group v-model="modelValue.brandCode">
          <el-checkbox
              v-for="dict in yamadaFcBrand"
              :key="dict.value"
              :label="dict.value"
              style="margin-right: 60px;"
          >
            {{ dict.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 業種区域 - 原有可插拔控制 -->
    <div class="form-section" v-if="showBusinessType">
      <div class="section-title">業種</div>
      <div class="section-content">
        <el-checkbox-group v-model="modelValue.businessTypeCode">
          <el-checkbox
              v-for="dict in yamadaBusinessType"
              :key="dict.value"
              :label="dict.value"
              style="margin-right: 32px;"
          >
            {{ dict.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- エリア区域 - 支持可插拔控制 -->
    <div class="form-section" v-if="showArea">
      <div class="section-title">エリア</div>
      <div class="area-header-row">
        <RegionTree
            class="region-tree-container"
            :treeData="regionTree"
            @check-change="handleCheckChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, watch } from 'vue';
import RegionTree from './RegionTree.vue';

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      brandCode: [],
      businessTypeCode: [],
      regions: []
    })
  },
  regionTree: {
    type: Array,
    required: true,
    default: () => []
  },
  yamadaFcBrand: {
    type: Array,
    required: true,
    default: () => []
  },
  yamadaBusinessType: {
    type: Array,
    required: true,
    default: () => []
  },
  // 業種显示控制
  showBusinessType: {
    type: Boolean,
    default: false
  },
  // FC显示控制
  showFc: {
    type: Boolean,
    default: false
  },
  // エリア显示控制
  showArea: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits([
  'update:modelValue',
  'check-change'
]);

const handleCheckChange = (regionId, isChecked) => {
  emits('check-change', regionId, isChecked);
};

watch(
  () => props.modelValue,
  (newValue) => {
    emits('update:modelValue', newValue);
  },
  { deep: true }
);
</script>

<style scoped>
.public-range-container {
  margin-top: 10px;
  padding-left: 60px; /* 统一左侧内边距，确保整体左对齐 */
}

/* 统一的区块样式，标题和内容横向排列 */
.form-section {
  display: flex;
  align-items: flex-start; /* 标题和内容顶部对齐 */
  margin-top: 15px;
}

/* 标题容器 - 固定宽度确保垂直对齐 */
.section-title {
  width: 60px; /* 固定宽度，确保三个标题垂直对齐 */
  margin-right: 20px; /* 标题与内容的间距 */
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  text-align: left; /* 首字母对齐关键：左对齐 */
  padding-top: 4px; /* 与复选框组件基线对齐 */
}

/* FC区域特殊样式 - 加宽标题与内容间距 */
.fc-title {
  margin-right: 30px; /* 比默认增加10px间距 */
}

/* 内容区域 - 占剩余宽度 */
.section-content {
  flex: 1; /* 内容区域自适应剩余宽度 */
  align-items: flex-start;
}

/* 确保复选框与单选框垂直对齐 */
::v-deep .el-checkbox {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px; /* 增加垂直方向间距 */
}

::v-deep .el-checkbox__input {
  margin-top: -2px; /* 微调复选框位置，与单选框对齐 */
}

.area-header-row {
  display: flex;
  align-items: flex-start;
}

/* 区域树特殊样式调整 */
.region-tree-container {
  margin-top: -4px; /* 微调与标题的垂直对齐 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .public-range-container {
    padding-left: 13%; /* 移动端左侧百分比对齐 */
  }
  
  .section-title {
    width: 50px; /* 移动端标题宽度微调 */
    margin-right: 15px;
  }
  
  .fc-title {
    margin-right: 15px; /* 移动端恢复默认间距 */
  }
}
</style>