ds-yamada-fcbi-admin/src/views/fcbi/sales/sumSettings.vue

<!-- 売上集計条件指定 -->
<template>
  <div class="app-container">
    <div class="form-container">
      <!-- 対象区域：使用el-form-item的label属性替代独立标题 -->
      <el-form-item
          label="対象"
          class="section-container"
          label-width="100px"
      >
        <div class="content-group">
          <div class="period-selector-vertical">
            <!-- 月指定行 -->
            <div class="section-monthly">
              <div class="date-groups-wrapper">
                <div class="date-group">
                  <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
                    月指定
                  </el-radio>
                  <el-select class="date-select-year" v-model="queryParams.startYear" placeholder=""
                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
                    <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                  </el-select>
                  <el-text class="date-label">年</el-text>
                </div>
                <div class="date-group">
                  <el-select class="date-select-month" v-model="queryParams.startMonth" placeholder=""
                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
                    <el-option v-for="month in months" :key="month" :label="month" :value="month"></el-option>
                  </el-select>
                  <el-text class="date-label">月</el-text>
                </div>
              </div>
            </div>
            <!-- 年度指定行 -->
            <div class="section-annual annual-group">
              <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                年度指定
              </el-radio>
                <div class="date-group">
                  <el-select class="date-select-year" v-model="queryParams.annual" placeholder=""
                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.ANNUAL">
                    <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                  </el-select>
                  <el-text class="date-label">年度</el-text>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 集計種別区域：同样使用el-form-item的label属性 -->
      <el-form-item
          class="section-container"
          label="集計種別"
          label-width="100px"
      >
        <div class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
          <el-radio-group class="aggregation-radio-horizontal" v-model="queryParams.aggregationType">
            <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
            <el-radio class="common-radio" :value="AGGREGATION_TYPE.FC">FC別集計</el-radio>
            <el-radio class="common-radio" :value="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
            <el-radio class="common-radio" :value="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>

      <el-divider class="custom-divider" type="primary"></el-divider>

      <div class="section-fc-area">
        <PublicRange
            v-model="queryParams"
            :region-tree="regionTree"
            :yamada-fc-brand="yamadaFcBrand"
            :yamada-business-type="yamadaBusinessType"
            @check-change="handleCheckChange"
            :show-fc="true"
            :show-business-type="true"
        />
      </div>

      <div class="section-btn">
        <el-button class="btn-aggregation" type="primary" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
        <el-button class="btn-reset" type="primary" @click="resetForm" icon="Refresh">リセット</el-button>
      </div>
    </div>
  </div>
</template>

<script name="purchaseSaleSettings" setup>
// 1. 基础依赖导入
import { reactive, ref, onMounted, getCurrentInstance, watch, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { getRegionTree } from "@/api/fcbi/survey.js";
import PublicRange from '../../../components/PublicRange.vue';
import useSalesStore from '@/store/modules/sales'
// 定数ファイルから集計タイプ（FC / エリア / 店舗別）と対象期間タイプ（年度 / 月指定）の定数をインポート
import { AGGREGATION_TYPE, TARGET_PERIOD_TYPE } from '@/constants';

// 2. 组件实例与状态管理
const { proxy } = getCurrentInstance();
const salesStore = useSalesStore();
const router = useRouter();

// 3. 基础数据与状态定义
const error = ref('');
const regionTree = ref([]); // 地域ツリーデータ
const selectedRegions = ref([]); // 選択された地域コードの配列

// 年月选择器数据
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 11 }, (_, i) => currentYear + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);

// 4. 数据字典获取
const { yamada_fc_brand: yamadaFcBrand } = proxy.useDict('yamada_fc_brand');
const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_business_type');

// 5. 暴露模板使用的常量
defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });

// フォームの入力データ
const data = reactive({
  queryParams: {
    targetPeriodType: TARGET_PERIOD_TYPE.MONTHLY,
    aggregationType: AGGREGATION_TYPE.FC,
    startYear: null, // 指定年
    startMonth: null, // 指定月
    annual: null, // 指定年度
    brandCode: [],
    businessTypeCode: [],
    regions: []
  }
});

const { queryParams } = toRefs(data);
// 6. 初始化与生命周期
onMounted(async () => {
  try {
    const response = await getRegionTree();
    if (response?.success) {
      const regions = response.data.regions || [];
      regionTree.value = regions;
      if (regions.length) {
        updateSelectedRegions(regions);
      }
    } else {
      error.value = response?.message || '地域データの取得に失敗しました';
      proxy.$message.error(error.value);
      console.error('地域データの取得に失敗しました:', response);
    }
  } catch (err) {
    const errorMsg = '地域データの取得中にエラーが発生しました';
    proxy.$message.error(errorMsg);
    console.error('地域データの取得中にエラーが発生しました:', err);
  }
});

// 7. 监听器
/**
 * 地域ツリーのデータが更新されたときに、選択された地域を更新します
 */
watch(() => regionTree.value, (newVal) => {
  if (newVal?.length) {
    updateSelectedRegions(newVal);
  }
}, { deep: true });

/**
 * 対象期間タイプが変更されたときに、関連する日付フィールドをリセットします
 * - 月指定の場合は年度指定フィールドをクリア
 * - 年度指定の場合は月指定フィールドをクリア
 */
watch(
    () => queryParams.value.targetPeriodType,
    (newVal) => {
      if (newVal === TARGET_PERIOD_TYPE.MONTHLY) {
        queryParams.value.annual = null;
      } else {
        queryParams.value.startYear = null;
        queryParams.value.startMonth = null;
      }
    },
    { immediate: true }
);

// 8. 地域树处理方法（核心工具方法）
/**
 * 指定されたIDを持つ地域ノードをツリーから再帰的に検索します
 * @param {Array} nodes - 検索対象の地域ノード配列
 * @param {string|number} id - 検索する地域のID
 * @returns {Object|null} 見つかった地域ノード（見つからない場合はnull）
 */
const findRegionById = (nodes, id) => {
  if (!nodes?.length) return null;

  for (const node of nodes) {
    if (node.id === id) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findRegionById(node.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

/**
 * 地域ツリーから選択された地域を再帰的に収集し、選択状態を更新します
 * 親ノードは収集対象外とし、サブノードのみを対象とします
 * @param {Array} nodes - 地域ツリーのノード配列
 */
const updateSelectedRegions = (nodes) => {
  if (!nodes?.length) return;
  selectedRegions.value = [];
  // 最上位ノードは親ノードとしてマークされ、再帰的に子ノードを処理します
  collectSelectedRegions(nodes, true);
  queryParams.value.regions = [...selectedRegions.value];
};

/**
 * 選択されたサブエリアオブジェクトを再帰的に収集します（親ノードをスキップ）
 * @param {Array} nodes - 処理対象の地域ノード配列
 * @param {boolean} isParent - 親ノードかどうかを示すフラグ（trueの場合は子ノードのみ処理）
 */
const collectSelectedRegions = (nodes, isParent = false) => {
  nodes.forEach(node => {
    // 親ノード（上位ノード）の場合は、収集をスキップして再帰的に子ノードを処理します
    if (isParent) {
      if (node.children && node.children.length > 0) {
        collectSelectedRegions(node.children, false);
      }
      return;
    }
    if (node.checked) {
      selectedRegions.value.push({
        regionCode: node.regionCode
      });
    }
    if (node.children && node.children.length > 0) {
      collectSelectedRegions(node.children, false);
    }
  });
};

/**
 * 地域ツリーのチェック状態を再帰的にリセットします
 * すべてのノードのcheckedプロパティをfalseに設定します
 * @param {Array} nodes - 地域ツリーのノード配列
 */
const resetRegionTreeCheck = (nodes) => {
  nodes.forEach(node => {
    node.checked = false;
    if (node.children?.length) {
      resetRegionTreeCheck(node.children);
    }
  });
};

// 9. 事件处理方法
/**
 * 地域のチェック状態が変更されたときのハンドラー関数です
 * @param {string|number} regionId - チェック状態が変更された地域のID
 * @param {boolean} isChecked - チェック状態（true:チェックされた、false:チェックが外れた）
 */
const handleCheckChange = (regionId, isChecked) => {
  const region = findRegionById(regionTree.value, regionId);
  if (!region) return;

  if (isChecked) {
    if (!selectedRegions.value.some(r => r.regionCode === region.regionCode)) {
      selectedRegions.value.push({ regionCode: region.regionCode });
    }
  } else {
    selectedRegions.value = selectedRegions.value.filter(r => r.regionCode !== region.regionCode);
  }
  queryParams.value.regions = [...selectedRegions.value];
};

// 10. 表单验证与提交
/**
 * 検索条件を検証する関数です
 * 必須項目の入力状態を確認し、未入力の場合はエラーメッセージを返します
 * @returns {Array} エラーメッセージの配列（検証が通った場合は空配列）
 */
const validateForm = () => {
  const errors = [];

  if (queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.MONTHLY) {
    if (!queryParams.value.startYear) {
      errors.push('「対象 月指定」の年を選択してください');
    }
    if (!queryParams.value.startMonth) {
      errors.push('「対象 月指定」の月を選択してください');
    }
  } else if (queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.ANNUAL) {
    if (!queryParams.value.annual) {
      errors.push('「対象 年度指定」の年度を選択してください');
    }
  }

  return errors;
};

/**
 * 集計ボタンをクリックしたときの処理関数です
 * 1. フォームのバリデーションを実行
 * 2. 集計条件に基づいてsalesFlagを設定
 * 3. 集計データをストアに保存し、結果画面に遷移
 */
const handleAggregate = () => {
  const errors = validateForm();
  if (errors.length) {
    errors.forEach(error => proxy.$message.warning(error));
    return;
  }

  let salesFlag = 0;
  const isMonthly = queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.MONTHLY;
  const { aggregationType } = queryParams.value;

  switch (aggregationType) {
    case AGGREGATION_TYPE.FC:
      const hasArea = queryParams.value.regions?.length > 0;
      salesFlag = isMonthly ? (hasArea ? 1 : 2) : (hasArea ? 3 : 4);
      break;
    case AGGREGATION_TYPE.AREA:
      salesFlag = isMonthly ? 7 : 8;
      break;
    case AGGREGATION_TYPE.STORE:
      salesFlag = isMonthly ? 5 : 6;
      break;
    default:
      proxy.$message.warning('集計種別を選択してください');
      return;
  }

  const transferData = {
    targetPeriodType: queryParams.value.targetPeriodType,
    startYear: isMonthly ? queryParams.value.startYear : null,
    startMonth: isMonthly ? queryParams.value.startMonth : null,
    annual: !isMonthly ? queryParams.value.annual : null,
    brandCodes: queryParams.value.brandCode,
    regionCodes: queryParams.value.regions.map(r => r.regionCode),
    aggregationType: queryParams.value.aggregationType,
    salesFlag: salesFlag
  };
  salesStore.setSalesData(transferData);
  router.push({ name: 'salesSumResult' });
};

/**
 * リセットボタンをクリックしたときの処理関数です
 * フォームのすべての入力値と選択状態を初期状態にリセットします
 */
const resetForm = () => {
  queryParams.value.targetPeriodType = TARGET_PERIOD_TYPE.MONTHLY;
  queryParams.value.aggregationType = AGGREGATION_TYPE.FC;
  queryParams.value.startYear = null;
  queryParams.value.startMonth = null;
  queryParams.value.annual = null;
  queryParams.value.brandCode = [];
  queryParams.value.regions = [];
  selectedRegions.value = [];
  if (regionTree.value.length) {
    resetRegionTreeCheck(regionTree.value);
  }
};
</script>

<style scoped>
/* 基础容器样式 - 最外层布局控制 */
.form-container {
  margin-top: 0;  /* 清除顶部默认外边距，避免与父容器产生额外间距 */
  padding: 0 !important; /* 清除默认内边距，确保布局基准线一致 */
}

/* 布局容器 - 统一标题与内容的排列结构 */
.section-container {
  display: flex; /* 使用Flex布局，使标题与内容横向排列 */
  align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
  margin-bottom: 10px; /* 区域间垂直间距，区分不同设置项 */
  gap: 10px; /* 标题与内容区的固定水平间距 */
  margin-left: 0 !important; /* 清除el-form-item默认左间距 */
}

/* 通过深度选择器控制el-form-item的label样式，替代原.form-section */
:deep(.el-form-item__label) {
  width: 100px !important; /* 固定宽度，确保标题左侧起点一致 */
  font-size: 14px !important; /* 统一字体大小，保持视觉一致性 */
  line-height: 1.4 !important; /* 统一行高，确保文字基线对齐 */
  padding-left: 15px !important; /* 左对齐标题，节省空间并统一缩进 */
  padding-right: 0 !important; /* 清除右侧内边距 */
  margin: 0 !important; /* 清除默认外边距，避免布局偏移 */
  margin-top: 5px !important; /* 与单选框保持垂直居中对齐 */
  text-align: left !important; /* 强制左对齐，统一标题显示方式 */
  letter-spacing: normal !important; /* 清除异常字间距，确保文字排列均匀 */
  display: inline-block !important; /* 确保宽高计算准确，不影响周围元素 */
  box-sizing: border-box !important; /* 宽度计算包含边框和内边距，避免尺寸偏差 */
  position: relative !important; /* 建立稳定定位基准，便于子元素定位 */
  top: 0 !important; /* 清除定位偏移，确保顶部对齐 */
  //color: #606266 !important; /* 标题文字颜色，使用中性色调增强可读性 */
  font-weight: 700 !important; /* 标题文字加粗，突出显示设置项类别 */
}

/* 分隔线样式 - 区域间视觉分隔 */
.custom-divider {
  background-color: var(--color-primary);
  height: 2px; /* 设置分隔线高度，确保视觉效果 */
  margin: 12px 0; /* 上下外边距，与周围内容保持距离 */
}


/* 标题首字符样式 - 确保左侧无额外间距 */
:deep(.el-form-item__label)::first-letter {
  margin-left: 0 !important; /* 清除首字符可能的默认左间距，确保对齐精确 */
}

/* 公共区域标题样式 - 控制子组件标题对齐 */
:deep(.public-range-title) {
  text-align: left !important;  /* 强制左对齐，与其他标题保持一致 */
  padding-left: 20px; /* 左侧内边距，与其他标题保持对齐 */
}

/* 内容区域容器 - 标题右侧的内容部分 */
.content-group {
  flex: 1; /* 占满剩余宽度，自适应不同屏幕尺寸 */
  margin: 0 !important; /* 清除element-ui默认外边距，避免布局偏差 */
  padding-left: 0 !important; /* 统一内容区左侧缩进，确保对齐一致 */
}

/* 单选组布局 - 垂直排列（月指定/年度指定） */
.period-selector-vertical {
  display: flex; /* 使用Flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  gap: 5px; /* 月指定与年度指定选项的垂直间距，区分不同选项 */
  padding: 0 !important; /* 清除默认内边距 */
  margin: 0 !important; /* 清除默认外边距 */
}

/* 单选组布局 - 水平排列（集計種別） */
.aggregation-radio-horizontal {
  display: flex; /* 使用Flex布局 */
  gap: 20px; /* 集計種別选项间的水平间距，区分不同选项 */
  align-items: center; /* 垂直居中对齐选项 */
  flex-wrap: wrap; /* 小屏幕下自动折行避免溢出 */
  margin: 0 !important; /* 清除默认外边距 */
  padding: 0 !important; /* 清除默认内边距 */
}

/* 单选框基础样式 - 统一所有单选框的对齐 */
.common-radio {
  width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
  flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
  margin: 0 !important; /* 清除默认外边距，避免布局偏移 */
  padding: 0 0 0 20px !important; /* 左侧预留空间放置单选框圆圈 */
  text-align: left !important; /* 文字左对齐，统一显示方式 */
  position: relative !important; /* 建立定位基准，便于单选框圆圈定位 */
}

/* 单选框内部圆圈定位 - 核心对齐控制 */
:deep(.common-radio .el-radio__input) {
  position: absolute !important; /* 脱离文档流，基于父元素定位 */
  left: 0 !important; /* 固定在左侧，所有单选框左对齐 */
  top: 50% !important; /* 垂直方向居中定位 */
  transform: translateY(-50%) !important; /* 精确垂直居中对齐 */
  margin: 0 !important; /* 清除默认外边距，避免定位偏差 */
}

/* 单选框文字样式 - 控制与圆圈的间距 */
:deep(.common-radio .el-radio__label) {
  padding-left: 5px !important; /* 文字与圆圈的固定间距，保持一致 */
  margin: 0 !important; /* 清除默认外边距 */
}

/* 月指定单选框样式 - 与年度指定保持一致 */
.section-monthly .common-radio {
  width: 80px !important; /* 调整宽度，与年度指定单选框保持一致 */
}

/* 月指定区域样式 - 整体布局控制 */
.section-monthly .date-select-year {
  width: 100px !important; /* 固定宽度 */
  min-width: 100px !important; /* 最小宽度限制 */
  max-width: 100px !important; /* 最大宽度限制 */
}

/* 月指定日期组样式 - 清除默认边距 */
.section-monthly .date-group {
  margin: 0 !important; /* 清除默认外边距 */
  padding: 0 !important; /* 清除默认内边距 */
}

/* 日期选择组合容器 - 年+月的整体布局 */
.date-groups-wrapper {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 8px; /* 年和月下拉列表之间的间隔 */
  flex-wrap: wrap; /* 小屏幕上自动折行，避免溢出 */
}

/* 日期项容器 - 下拉框+标签的组合 */
.date-group {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 0; /* 下拉框与标签的间距 */
  white-space: nowrap; /* 防止内部元素折行，保持在同一行 */
}

/* 日期选择器样式 - 年下拉框 */
.date-select-year {
  width: 100px !important; /* 固定宽度 */
  min-width: 80px !important; /* 最小宽度限制 */
  max-width: 120px !important; /* 最大宽度限制 */
  padding: 0 8px !important; /* 减少内边距，节省空间 */
}

/* 日期选择器样式 - 月下拉框（略窄） */
.date-select-month {
  width: 80px !important; /* 固定宽度，比年下拉框略窄 */
  min-width: 60px !important; /* 最小宽度限制 */
  max-width: 90px !important; /* 最大宽度限制 */
  padding: 0 8px !important; /* 减少内边距，节省空间 */
}

/* 日期标签样式 - "年"、"月"、"年度"文字 */
.date-label {
  white-space: nowrap; /* 禁止文字折行，保持在同一行 */
  line-height: 1; /* 行高为1，紧凑显示 */
  display: inline-flex; /*  inline-flex布局，便于对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/* 单选按钮与下拉框组合容器 - 确保不折行 */
.section-annual {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 8px; /* 子元素间的水平间距 */
  width: 100%; /* 占满父容器宽度 */
  min-width: 0; /* 允许内容收缩 */
  flex-wrap: nowrap; /* 强制不换行，保持选项与输入框在同一行 */
}

/* 年度指定整体容器样式 - 控制不折行 */
.annual-group {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 0 !important; /* 强制消除单选框与下拉列表间距 */
  width: 100%; /* 占满父容器宽度 */
  flex-wrap: nowrap; /* 强制不折行，保持在同一行 */
  min-width: 300px; /* 确保有足够宽度容纳内容，避免挤压 */
}

/* 年度指定单选框样式 - 统一宽度 */
.annual-group .common-radio {
  width: 80px !important; /* 与其他单选框保持一致 */
  min-width: 80px; /* 最小宽度限制 */
  flex-shrink: 0; /* 禁止压缩，保持宽度稳定 */
}

/* 年度日期组合容器样式 - 控制内部间距 */
.annual-group .date-group {
  flex: 1; /* 继承原annual-row的flex:1属性 */
  min-width: 0; /* 继承原annual-row的收缩特性 */
  margin: 0;
  padding: 2px 0; /* 继承原annual-row的内边距 */
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 0 !important; /* 强制Flex容器内间距为0 */
}

/* 年度下拉框样式 - 清除右侧边距 */
.annual-group .date-select-year {
  width: 100px !important; /* 与月指定的年下拉框宽度一致 */
  margin-right: 0 !important; /* 清除下拉框右侧外边距 */
}

/* 年度标签样式 - 调整左侧间距 */
.annual-group .date-label {
  margin-left: 4px !important; /* 微调间距，与"年"标签对齐 */
}

/* 公共区域容器 - FC/区域选择部分的布局 */
.section-fc-area {
  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
}

/* 按钮区域样式 - 集計和リセット按钮容器 */
.section-btn {
  padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
  margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
  display: flex; /* 使用Flex布局 */
  gap: 10px; /* 按钮间距，区分不同按钮 */
  align-items: center; /* 垂直居中对齐按钮 */
  justify-content: start; /* 子元素左对齐，符合操作习惯 */
  flex-wrap: wrap; /* 小屏幕下按钮换行，避免溢出 */
}

/* 操作按钮样式 - 集計按钮 */
.btn-aggregation {
  padding: 6px 10px; /* 内边距，控制按钮大小 */
  box-sizing: border-box; /* 宽度计算包含内边距和边框 */
  margin-left: 0; /* 左侧外边距为0 */
  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
  width: 120px; /* 固定宽度，与重置按钮保持一致 */
  height: 32px; /* 统一高度，保持视觉一致性 */
}

/* 操作按钮样式 - リセット按钮 */
.btn-reset{
  padding: 6px 10px; /* 内边距，控制按钮大小 */
  box-sizing: border-box; /* 宽度计算包含内边距和边框 */
  margin-left: 10px; /* 左侧外边距，与集計按钮保持距离 */
  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
  width: 120px; /* 固定宽度，与集計按钮保持一致 */
  height: 32px; /* 统一高度，保持视觉一致性 */
}

/* 媒体查询 - 大屏幕（≥1024px） */
@media (min-width: 1024px) {
  .section-container {
    gap: 15px; /* 增大间距提升可读性 */
  }

  .aggregation-radio-horizontal {
    gap: 30px; /* 增大选项间距，提升可读性 */
  }

  /* 统一年度指定区域布局 */
  .annual-group {
    gap: 8px !important; /* 与月指定的date-groups-wrapper保持相同间距（8px） */
    align-items: center !important; /* 确保垂直居中对齐 */
  }

  /* 年度下拉框位置调整 */
  .annual-group .date-select-year {
    vertical-align: middle; /* 垂直居中对齐 */
    position: relative !important; /* 相对定位 */
    transform: translateX(-8px) !important; /* 水平位移调整，与月指定的年下拉框对齐 */
  }

  .annual-group .date-group {
    gap: 0 !important; /* 覆盖大屏下的可能间距 */
  }

  /* 日期标签对齐调整 */
  .date-group .date-label {
    margin-left: 4px !important; /* 统一标签与下拉框的间距 */
  }

  .annual-group .date-group .date-label {
    margin-left: -5px !important; /* 微调年度标签位置，确保与年标签对齐 */
  }
}

/* 媒体查询 - 平板端（768px-1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .date-group {
    gap: 4px; /* 缩小间距，适应中等屏幕 */
  }

  /* 仅调整年度指定行的布局，与月指定对齐 */
  .annual-group {
    gap: 5px !important; /* 与月指定的section-annual保持相同间距 */
  }

  /* 年度下拉框容器与月指定的date-group保持一致的左偏移 */
  .annual-group .date-group {
    margin-left: 0 !important; /* 清除额外左偏移 */
  }

  /* 确保年度下拉框与年下拉框宽度/位置一致 */
  .annual-group .date-select-year {
    width: 100px !important; /* 与月指定的年下拉框宽度完全一致 */
    margin-left: 0 !important; /* 清除默认左外边距 */
  }

  .section-btn {
    padding-left: calc(15px + 100px + 10px); /* 与标题对齐，动态计算左侧内边距 */
  }

  /* 保持按钮宽度一致 */
  .btn-aggregation, .btn-reset {
    width: 120px; /* 统一宽度 */
  }
}

/* 响应式样式 - 移动端（<768px） */
@media (max-width: 767px) {
  /* 标题样式调整 */
  :deep(.el-form-item__label) {
    width: 80px !important; /* 保持宽度为80px */
    white-space: nowrap !important; /* 禁止换行，确保标题完整显示 */
    margin-left: 0 !important; /* 清除左侧外边距干扰 */
    padding-left: 20px !important; /* 固定左侧内边距 */
    min-width: 80px !important; /* 强制最小宽度 */
    max-width: 80px !important; /* 强制最大宽度 */
    flex-shrink: 0 !important; /* 禁止宽度被压缩 */
    box-sizing: content-box !important; /* 宽度计算不包含内边距 */
  }

  .date-group {
    align-items: center; /* 垂直居中对齐 */
    gap: 0; /* 缩小间距 */
  }

  /* 年度下拉框区域固定宽度，防止被挤压 */
  .date-group > .date-select-year:first-child {
    width: 100px !important; /* 固定宽度 */
    min-width: 100px !important; /* 最小宽度限制 */
    max-width: 100px !important; /* 最大宽度限制 */
    flex-shrink: 0; /* 禁止压缩 */
  }

  /* 年标签与年下拉框绑定，不单独折行 */
  .date-group > .date-label:nth-child(2) {
    margin-right: 8px; /* 右侧外边距 */
    flex-shrink: 0; /* 禁止压缩 */
    font-size: 14px; /* 日期标签字体微调 */
  }

  .aggregation-radio-horizontal {
    gap: 10px; /* 缩小水平间距，适应小屏幕 */
  }

  /* 在小屏幕上，让日期组垂直排列 */
  .date-groups-wrapper {
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
    width: 100%; /* 占满宽度 */
    padding-left: 0 !important; /* 清除左内边距 */
  }

  /* 年度指定整体容器样式 - 增强不折行控制 */
  .annual-group {
    display: flex; /* Flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 0 !important; /* 减少年度指定单选框与下拉列表的间隔 */
    width: 100%; /* 占满宽度 */
    flex-wrap: nowrap; /* 强制不折行 */
    min-width: 300px; /* 确保有足够宽度容纳内容 */
    overflow-x: auto; /* 内容过宽时显示横向滚动条 */
    padding-bottom: 5px; /* 为滚动条预留空间 */
    scrollbar-width: thin; /* 优化滚动条样式 */
  }

  /* 年度下拉框与年下拉框保持完全一致的位置 */
  .annual-group .date-group {
    margin-left: 0 !important; /* 与月指定的date-group左对齐 */
    gap: 0 !important; /* 与月指定的date-group内部间距一致 */
  }

  /* 年度下拉框宽度/位置与年下拉框完全匹配 */
  .annual-group .date-select-year {
    width: 100px !important; /* 与月指定的年下拉框宽度相同 */
    margin-left: 0 !important; /* 清除默认左外边距 */
  }

  /* 优化滚动条样式 */
  .annual-group::-webkit-scrollbar {
    height: 4px; /* 滚动条高度 */
  }

  /* 调整单选框宽度，为下拉框留出更多空间 */
  .annual-group .common-radio {
    width: 80px !important; /* 固定宽度 */
    min-width: 80px !important; /* 最小宽度限制 */
    padding-right: 0 !important; /* 移除右侧内边距 */
  }

  /* 关键修正：让月指定的年下拉框容器与年度下拉框对齐 */
  .section-monthly .date-groups-wrapper {
    margin-left: 0 !important; /* 清除可能的默认左偏移 */
    padding-left: 0 !important; /* 清除左内边距 */
  }

  /* 强制月指定的年下拉框与年度下拉框左对齐基准一致 */
  .section-monthly .date-group:first-child {
    margin-left: 0 !important; /* 与年度下拉框的date-group保持相同左偏移 */
    position: relative; /* 相对定位 */
    left: 0 !important; /* 消除任何隐性定位偏移 */
  }

  /* 月下拉列表行与年下拉列表对齐 */
  .section-monthly .date-groups-wrapper .date-group:nth-child(2) {
    margin-left: 80px !important; /* 匹配"月指定"单选框宽度，确保左对齐 */
    margin-top: 8px; /* 添加微小间距，避免拥挤 */
  }

  .section-btn {
    padding-left: 20px; /* 调整左侧内边距，避免溢出 */
    justify-content: flex-start; /* 左对齐避免溢出 */
  }

  /* 保持按钮宽度一致 */
  .btn-aggregation, .btn-reset {
    width: 120px; /* 保持按钮宽度 */
    flex-shrink: 0; /* 禁止按钮宽度被压缩 */
  }

}
</style>