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

<!-- 売上集計条件指定 -->
<template>
  <div class="app-container">
    <div class="form-container">
      <div class="section-container">
        <div class="form-section">
          対象
        </div>
        <el-form-item class="content-group">
          <div class="radio-group-vertical">
            <!-- 月指定行 -->
            <div class="monthly-section">
                <div class="date-groups-wrapper">
                  <div class="date-group">
                    <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
                      月指定
                    </el-radio>
                    <el-select class="date-select" 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>
                    <span class="date-label">年</span>
                  </div>
                  <div class="date-group">
                    <el-select class="date-select-small" 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>
                    <span class="date-label">月</span>
                  </div>
                </div>
            </div>
            <!-- 年度指定行 -->
            <div class="radio-item annual-group">
              <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                年度指定
              </el-radio>
              <div class="annual-row">
                <div class="date-group">
                  <el-select class="date-select" 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>
                  <span class="date-label">年度</span>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
      <!-- 集計種別区域：使用相同的section-container结构 -->
      <div class="section-container">
        <!-- 与“対象”区域保持一致：使用form-section作为标题容器 -->
        <div class="form-section">集計種別</div>
        <el-form-item class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
          <el-radio-group v-model="queryParams.aggregationType" class="radio-group-horizontal">
            <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.FC">FC別集計</el-radio>
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="divider"></div>
      <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 class="btn-section">
        <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
        <el-button class="btn-reset" @click="resetForm" icon="Refresh">リセット</el-button>
      </div>
    </div>
  </div>
</template>

<script name="purchaseSaleSettings" setup>
import { getRegionTree } from "@/api/fcbi/survey.js";
import { reactive, ref, onMounted, getCurrentInstance, watch, toRefs } from 'vue';
import PublicRange from '../../../components/PublicRange.vue';
import { useSurveyStore, useSalesStore } from '@/store/yamadaStore';
import { useRouter } from 'vue-router';
import { AGGREGATION_TYPE, TARGET_PERIOD_TYPE } from '@/constants';

const currentYear = new Date().getFullYear();
const years = Array.from({ length: 11 }, (_, i) => currentYear + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const error = ref('');
const { proxy } = getCurrentInstance();
const surveyStore = useSurveyStore();
const salesStore = useSalesStore();
const router = useRouter();

// テンプレートで定数を使用可能にするため、エクスポートします
defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });

/**
 * データ辞書からブランドと業務タイプのデータを取得します
 */
const { yamada_fc_brand: yamadaFcBrand } = proxy.useDict('yamada_fc_brand');
const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_business_type');

/**
 * 地域ツリーデータと選択された地域コードの配列を保持します
 */
const regionTree = ref([]);
const selectedRegions = ref([]);

/**
 * フォームの入力データを保持するオブジェクトです
 */
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);

/**
 * 地域ツリーのデータが更新されたときに、選択された地域を更新します
 */
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 }
);

/**
 * コンポーネントのマウント後に地域ツリーデータを初期化します
 */
onMounted(async () => {
  try {
    const response = await getRegionTree();
    if (response?.success) {
      const regions = response.data.regions || [];
      regionTree.value = regions;
      surveyStore.setRegionTree(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);
  }
});

/**
 * 地域のチェック状態が変更されたときのハンドラー関数です
 */
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];
};

/**
 * 指定されたIDを持つ地域ノードをツリーから再帰的に検索します
 */
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;
};

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

/**
 * 選択されたすべてのサブエリアオブジェクトを再帰的に収集します（親ノードをスキップ）
 */
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);
    }
  });
};

/**
 * 検索条件を検証する関数です
 */
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;
};

/**
 * 集計ボタンをクリックしたときの処理関数です
 */
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);
  }
};
/**
 * 地域ツリーのチェック状態をリセットします
 */
const resetRegionTreeCheck = (nodes) => {
  nodes.forEach(node => {
    node.checked = false;
    if (node.children?.length) {
      resetRegionTreeCheck(node.children);
    }
  });
};
</script>

<style scoped>
/* 表单容器样式 - 整体布局控制 */
.form-container {
  margin-top: 0;  /* 顶部外边距 */
  padding: 0 !important; /* 清除原有左右内边距，避免干扰基准线 */
}

/* 1. 统一标题与内容的布局容器 */
.section-container {
  display: flex;
  align-items: flex-start; /* 顶部对齐，确保基准一致 */
  margin-bottom: 12px;
  gap: 10px; /* 标题与内容的固定间距 */
}

/* 2. 统一标题样式（确保“対”和“集”字对齐） */
/* 统一标题文字的垂直对齐基准（核心修正） */
.form-section {
  /* 保留原有所有属性 */
  width: 80px !important; /* 固定宽度，确保文字左侧起点一致 */
  font-size: 14px !important; /* 统一字体大小 */
  line-height: 1.4 !important; /* 统一行高，确保文字基线一致 */
  padding-left: 0 !important; /* 清除额外左内边距 */
  margin: 0 !important; /* 清除默认外边距 */
  margin-top: 5px !important; /* 保持与单选框的垂直居中对齐 */
  text-align: left !important; /* 强制左对齐 */
  letter-spacing: normal !important; /* 清除可能的字间距差异 */
  display: inline-block !important; /* 确保宽度和高度计算准确 */

  /* 修正对齐的核心属性 - 与分割线严格一致 */
  margin-left: 27px !important; /* 精确匹配分割线左侧偏移 */
  box-sizing: border-box !important; /* 确保宽度计算不包含padding */
  position: relative !important; /* 建立稳定的定位基准 */
  left: 0 !important; /* 清除可能的定位偏移 */
  top: 0 !important;
}


/* 确保标题文字的左侧起点完全一致 */
.form-section::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默认margin */
  padding-left: 0 !important; /* 统一内容区左侧缩进，修复对齐问题 */
}

/* 4. 垂直排列的单选组（月指定/年度指定） */
.radio-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 月指定与年度指定的垂直间距 */
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. 水平排列的单选组（集計種別） */
.radio-group-horizontal {
  display: flex;
  gap: 20px; /* 集計種別选项之间的水平间距 */
  align-items: center;
  flex-wrap: wrap; /* 确保小屏幕下不溢出 */
  margin: 0 !important; /* 清除可能的默认margin */
  padding: 0 !important;
}

/* 6. 所有单选框统一样式（核心：确保左侧对齐） */
.common-radio {
  width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
  flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
  margin: 0 !important; /* 清除默认margin */
  padding: 0 0 0 20px !important; /* 为单选框圆圈预留空间 */
  text-align: left !important; /* 文字左对齐，确保起始点一致 */
  position: relative !important; /* 建立定位基准 */
}

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

/* 单选框文字与圆圈的间距控制 */
:deep(.common-radio .el-radio__label) {
  padding-left: 5px !important; /* 文字与圆圈的固定间距 */
  margin: 0 !important;
}

/* 只调整月指定区域的年份下拉框，适配年度指定的样式 */
.monthly-section .date-select {
  /* 复制年度指定下拉框的宽度 */
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

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

/* 确保月指定的日期组与年度指定的布局对齐 */
.monthly-section .date-group {
  /* 消除可能的额外边距，与年度指定保持一致 */
  margin: 0 !important;
  padding: 0 !important;
}

.date-groups-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* 年和月下拉列表之间的间隔 */
  flex-wrap: wrap; /* 允许在小屏幕上折行 */
}

/* 7. 单选按钮与下拉框的组合容器 - 确保不折行 */
.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap; /* 强制不换行 */
}

/* 日期项容器 - 每个整体作为独立项 */
.date-group {
  display: flex;  /* 内部元素（下拉框+标签）不折行 */
  align-items: center;
  gap: 0; /* 下拉框与标签的间距 */
  white-space: nowrap; /* 防止内部元素折行 */
}

/* 日期选择器样式 - 年下拉框（强制适配宽度） */
.date-select {
  width: 100px !important;
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 0 8px !important; /* 减少内边距 */
}

/* 日期选择器样式 - 月下拉框 */
.date-select-small {
  width: 80px !important;
  min-width: 60px !important;
  max-width: 90px !important;
  padding: 0 8px !important; /* 减少内边距 */
}

/* 日期标签样式 - "年"和"月"文字 */
.date-label {
  font-size: 14px;   /* 字体大小 */
  color: #666;       /* 文字颜色 */
  white-space: nowrap; /* 禁止文字折行 */
}

/* 分隔线样式 - 区域分隔 */
.divider {
  height: 1px;                  /* 高度 */
  background-color: #FF0066;    /* 蓝色背景 */
  margin: 10px 27px;            /* 上下外边距 */
  width: calc(100% - 27px) !important; /* 宽度自适应，保持右侧对齐 */
  box-sizing: border-box !important;
}

/* 按钮区域样式 - 集計按钮容器 */
.btn-section {
  padding-left: calc(27px + 80px + 10px); /* 动态计算与标题对齐，27px偏移+80px标题宽度+10px间距 */
  margin-top: 25px;     /* 顶部外边距 */
  display: flex;        /* 添加Flex布局 */
  gap: 10px;            /* 按钮间距 */
  align-items: center;  /* 垂直居中对齐 */
  justify-content: start; /* 子元素左对齐 */
  flex-wrap: wrap; /* 允许在极小屏幕下按钮换行 */
}

/* 操作按钮样式 - 集計 */
.btn-aggregation {
  background-color: #FF0066;  /* 蓝色背景 */
  color: white;                 /* 白色文字 */
  padding: 6px 10px;            /* 内边距 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
  margin-left: 0;               /* 左侧外边距 */
  white-space: nowrap;          /* 禁止文字折行 */
  width: 120px; /* 固定基础宽度 */
  height: 32px; /* 统一高度 */
}

/* 操作按钮样式 - リセット */
.btn-reset{
  background-color: #FF0066;    /* 蓝色背景 */
  color: white;                 /* 白色文字 */
  padding: 6px 10px;            /* 内边距 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
  margin-left: 10px;            /* 左侧外边距 */
  white-space: nowrap;          /* 禁止文字折行 */
  width: 120px; /* 固定基础宽度 */
  height: 32px; /* 统一高度 */
}

/* 年度指定整体容器样式 - 核心不折行控制 */
.annual-group {
  display: 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 .annual-row {
  flex: 1; /* 占据剩余空间 */
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* 日期组合容器样式 */
.annual-group .date-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
.annual-row {
  flex: 1; /* 占据剩余宽度 */
  min-width: 0; /* 允许收缩 */
  margin: 0; /* 清除默认边距 */
  padding: 2px 0; /* 减少内边距，节省空间 */
}

/* 响应式样式 - 大屏幕 (>1023px) */
@media (min-width: 1024px) {
  .section-container {
    gap: 15px; /* 增大间距提升可读性 */
  }

  .radio-group-horizontal {
    gap: 30px; /* 增大选项间距 */
  }
}

/* 响应式样式 - 平板端 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .btn-section {
    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算 */
  }

  /* 保持与移动端相同的宽度 */
  .btn-aggregation, .btn-reset {
    width: 120px; /* 统一宽度 */
  }

  .date-group {
    gap: 4px;
  }

  .form-section {
    margin-left: 15px !important; /* 左对齐标题，节省空间 */
    width: 70px !important; /* 缩短标题宽度，为内容区让空间 */
    font-size: 14px !important; /* 标题文字微调 */
  }

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

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

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

/* 响应式样式 - 移动端 (<768px) */
@media (max-width: 767px) {
  .btn-section {
    padding-left: 20px; /* 调整左侧内边距 */
    justify-content: flex-start; /* 左对齐避免溢出 */
  }

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

  /* 仅修改年度指定行的对齐样式 */
  .annual-row {
    margin-left: 0 !important; /* 移除20px左偏移，与月指定的date-groups-wrapper对齐 */
    width: auto !important; /* 取消强制宽度计算，跟随父容器 */
  }

  .form-section {
    width: 80px !important; /* 保持宽度为80px */
    white-space: nowrap !important; /* 保留并加强优先级，防止禁止换行 */
    margin-left: 0 !important; /* 清除左侧外边距干扰 */
    padding-left: 20px !important; /* 固定左侧内边距 */
    min-width: 80px !important; /* 新增：强制最小宽度为80px */
    max-width: 80px !important; /* 新增：强制最大宽度为80px */
    flex-shrink: 0 !important; /* 新增：禁止宽度被压缩 */
    box-sizing: content-box !important; /* 新增：确保宽度计算不包含内边距 */
  }

  .date-group {
    align-items: center;
    gap: 0; /* 缩小间距 */
  }

  /* 年度下拉框区域固定宽度，防止被挤压 */
  .date-group > .date-select: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: 13px; /* 日期标签字体微调 */
  }

  .radio-group-horizontal {
    gap: 10px; /* 缩小水平间距 */
  }

  /* 在小屏幕上，让日期组垂直排列 */
  .date-groups-wrapper {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-left: 0 !important;
  }

  /* 垂直单选组样式调整 */
  .radio-group-vertical {
    padding-left: 0 !important;
  }

  /* 年度指定整体容器样式 - 增强不折行控制 */
  .annual-group {
    display: flex;
    align-items: center;
    gap: 0 !important; /* 仅减少年度指定单选框与下拉列表的间隔从8px减少到4px */
    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 {
    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; /* 移除右侧内边距 */
  }

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

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

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

</style>