css

src/views/fcbi/sales/sumSettings.vue

@@ -82,25 +82,22 @@
 </template>
 
 <script name="purchaseSaleSettings" setup>
-import { getRegionTree } from "@/api/fcbi/survey.js";
 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 { 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);
+// テンプレートで定数を使用可能にするため、エクスポートします
+defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });
+
 const error = ref('');
 const { proxy } = getCurrentInstance();
 const surveyStore = useSurveyStore();
 const salesStore = useSalesStore();
 const router = useRouter();
 
-// テンプレートで定数を使用可能にするため、エクスポートします
-defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });
-
 /**
  * データ辞書からブランドと業務タイプのデータを取得します
  */
@@ -113,6 +110,10 @@ const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_busin
 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);
+
 /**
  * フォームの入力データを保持するオブジェクトです
  */
@@ -140,6 +141,11 @@ watch(() => regionTree.value, (newVal) => {
   }
 }, { deep: true });
 
+/**
+ * 対象期間タイプが変更されたときに、関連する日付フィールドをリセットします
+ * - 月指定の場合は年度指定フィールドをクリア
+ * - 年度指定の場合は月指定フィールドをクリア
+ */
 watch(
     () => queryParams.value.targetPeriodType,
     (newVal) => {
@@ -180,6 +186,8 @@ onMounted(async () => {
 
 /**
  * 地域のチェック状態が変更されたときのハンドラー関数です
+ * @param {string|number} regionId - チェック状態が変更された地域のID
+ * @param {boolean} isChecked - チェック状態（true:チェックされた、false:チェックが外れた）
  */
 const handleCheckChange = (regionId, isChecked) => {
   const region = findRegionById(regionTree.value, regionId);
@@ -197,6 +205,9 @@ const handleCheckChange = (regionId, isChecked) => {
 
 /**
  * 指定されたIDを持つ地域ノードをツリーから再帰的に検索します
+ * @param {Array} nodes - 検索対象の地域ノード配列
+ * @param {string|number} id - 検索する地域のID
+ * @returns {Object|null} 見つかった地域ノード（見つからない場合はnull）
  */
 const findRegionById = (nodes, id) => {
   if (!nodes?.length) return null;
@@ -216,7 +227,9 @@ const findRegionById = (nodes, id) => {
 };
 
 /**
- * 選択されたすべての地域を再帰的に更新し、サブノードのみを収集します
+ * 地域ツリーから選択された地域を再帰的に収集し、選択状態を更新します
+ * 親ノードは収集対象外とし、サブノードのみを対象とします
+ * @param {Array} nodes - 地域ツリーのノード配列
  */
 const updateSelectedRegions = (nodes) => {
   if (!nodes?.length) return;
@@ -227,7 +240,9 @@ const updateSelectedRegions = (nodes) => {
 };
 
 /**
- * 選択されたすべてのサブエリアオブジェクトを再帰的に収集します（親ノードをスキップ）
+ * 選択されたサブエリアオブジェクトを再帰的に収集します（親ノードをスキップ）
+ * @param {Array} nodes - 処理対象の地域ノード配列
+ * @param {boolean} isParent - 親ノードかどうかを示すフラグ（trueの場合は子ノードのみ処理）
  */
 const collectSelectedRegions = (nodes, isParent = false) => {
   nodes.forEach(node => {
@@ -251,6 +266,8 @@ const collectSelectedRegions = (nodes, isParent = false) => {
 
 /**
  * 検索条件を検証する関数です
+ * 必須項目の入力状態を確認し、未入力の場合はエラーメッセージを返します
+ * @returns {Array} エラーメッセージの配列（検証が通った場合は空配列）
  */
 const validateForm = () => {
   const errors = [];
@@ -273,6 +290,9 @@ const validateForm = () => {
 
 /**
  * 集計ボタンをクリックしたときの処理関数です
+ * 1. フォームのバリデーションを実行
+ * 2. 集計条件に基づいてsalesFlagを設定
+ * 3. 集計データをストアに保存し、結果画面に遷移
  */
 const handleAggregate = () => {
   const errors = validateForm();
@@ -317,6 +337,7 @@ const handleAggregate = () => {
 
 /**
  * リセットボタンをクリックしたときの処理関数です
+ * フォームのすべての入力値と選択状態を初期状態にリセットします
  */
 const resetForm = () => {
   queryParams.value.targetPeriodType = TARGET_PERIOD_TYPE.MONTHLY;
@@ -331,8 +352,11 @@ const resetForm = () => {
     resetRegionTreeCheck(regionTree.value);
   }
 };
+
 /**
- * 地域ツリーのチェック状態をリセットします
+ * 地域ツリーのチェック状態を再帰的にリセットします
+ * すべてのノードのcheckedプロパティをfalseに設定します
+ * @param {Array} nodes - 地域ツリーのノード配列
  */
 const resetRegionTreeCheck = (nodes) => {
   nodes.forEach(node => {
@@ -345,74 +369,73 @@ const resetRegionTreeCheck = (nodes) => {
 </script>
 
 <style scoped>
-/* 表单容器样式 - 整体布局控制 */
+/* 表单容器样式 - 控制整体布局结构 */
 .form-container {
-  margin-top: 0;  /* 顶部外边距 */
-  padding: 0 !important; /* 清除原有左右内边距，避免干扰基准线 */
+  margin-top: 0;  /* 清除顶部默认外边距 */
+  padding: 0 !important; /* 清除默认内边距，避免影响布局基准线 */
 }
 
 /* 1. 统一标题与内容的布局容器 */
 .section-container {
   display: flex;
-  align-items: flex-start; /* 顶部对齐，确保基准一致 */
-  margin-bottom: 12px;
-  gap: 10px; /* 标题与内容的固定间距 */
+  align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
+  margin-bottom: 12px; /* 区域间垂直间距 */
+  gap: 10px; /* 标题与内容区的固定水平间距 */
 }
 
+/* 公共区域（FC/区域选择）容器样式 */
 .section-fc-area {
-  margin-left: 16px; /* 顶部对齐，确保基准一致 */
+  margin-left: 16px; /* 与其他内容区保持左对齐 */
 }
 
-/* 2. 统一标题样式（确保“対”和“集”字对齐） */
-/* 统一标题文字的垂直对齐基准（核心修正） */
+/* 2. 统一标题样式（确保"対象"和"集計種別"左对齐） */
 .form-section {
-  /* 保留原有所有属性 */
-  width: 80px !important; /* 固定宽度，确保文字左侧起点一致 */
+  width: 80px !important; /* 固定宽度，确保标题左侧起点一致 */
   font-size: 14px !important; /* 统一字体大小 */
-  line-height: 1.4 !important; /* 统一行高，确保文字基线一致 */
+  line-height: 1.4 !important; /* 统一行高，确保文字基线对齐 */
   padding-left: 0 !important; /* 清除额外左内边距 */
   margin: 0 !important; /* 清除默认外边距 */
-  margin-top: 5px !important; /* 保持与单选框的垂直居中对齐 */
+  margin-top: 5px !important; /* 与单选框保持垂直居中对齐 */
   text-align: left !important; /* 强制左对齐 */
-  letter-spacing: normal !important; /* 清除可能的字间距差异 */
-  display: inline-block !important; /* 确保宽度和高度计算准确 */
-
-  /* 修正对齐的核心属性 - 与分割线严格一致 */
-  box-sizing: border-box !important; /* 确保宽度计算不包含padding */
-  position: relative !important; /* 建立稳定的定位基准 */
-  left: 0 !important; /* 清除可能的定位偏移 */
+  letter-spacing: normal !important; /* 清除异常字间距 */
+  display: inline-block !important; /* 确保宽高计算准确 */
+  box-sizing: border-box !important; /* 宽度计算包含边框和内边距 */
+  position: relative !important; /* 建立稳定定位基准 */
+  left: 0 !important; /* 清除定位偏移 */
   top: 0 !important;
-  color: #606266;
-  font-weight: 700;
+  color: #606266; /* 标题文字颜色 */
+  font-weight: 700; /* 标题文字加粗 */
 }
+/* 标题补充样式 - 调整宽度和左对齐细节 */
 .form-section {
   margin-left: 15px !important; /* 左对齐标题，节省空间 */
-  width: 100px !important; /* 缩短标题宽度，为内容区让空间 */
-  font-size: 14px !important; /* 标题文字微调 */
+  width: 100px !important; /* 调整宽度，为内容区预留足够空间 */
+  font-size: 14px !important; /* 微调字体大小保持一致性 */
 }
 
-/* 确保标题文字的左侧起点完全一致 */
+/* 确保标题首字符（"対"、"集"）左侧无额外间距 */
 .form-section::first-letter {
-  margin-left: 0 !important; /* 首个字符（対、集）左侧无额外间距 */
+  margin-left: 0 !important;
 }
 
-/* 公共区域标题样式 - 深层选择器修改子组件样式 */
+/* 公共区域标题样式 - 控制子组件标题对齐 */
 :deep(.public-range-title) {
   text-align: left !important;  /* 强制左对齐 */
-  padding-left: 20px;           /* 左侧内边距 */
+  padding-left: 20px; /* 左侧内边距，与其他标题保持对齐 */
 }
 
+/* 3. 内容区域容器样式 */
 .content-group {
   flex: 1; /* 占满剩余宽度 */
-  margin: 0 !important; /* 清除element-ui默认margin */
-  padding-left: 0 !important; /* 统一内容区左侧缩进，修复对齐问题 */
+  margin: 0 !important; /* 清除element-ui默认外边距 */
+  padding-left: 0 !important; /* 统一内容区左侧缩进 */
 }
 
 /* 4. 垂直排列的单选组（月指定/年度指定） */
 .radio-group-vertical {
   display: flex;
   flex-direction: column;
-  gap: 15px; /* 月指定与年度指定的垂直间距 */
+  gap: 15px; /* 月指定与年度指定选项的垂直间距 */
   padding: 0 !important;
   margin: 0 !important;
 }
@@ -420,30 +443,30 @@ const resetRegionTreeCheck = (nodes) => {
 /* 5. 水平排列的单选组（集計種別） */
 .radio-group-horizontal {
   display: flex;
-  gap: 20px; /* 集計種別选项之间的水平间距 */
+  gap: 20px; /* 集計種別选项间的水平间距 */
   align-items: center;
-  flex-wrap: wrap; /* 确保小屏幕下不溢出 */
-  margin: 0 !important; /* 清除可能的默认margin */
+  flex-wrap: wrap; /* 小屏幕下自动折行避免溢出 */
+  margin: 0 !important; /* 清除默认外边距 */
   padding: 0 !important;
 }
 
-/* 6. 所有单选框统一样式（核心：确保左侧对齐） */
+/* 6. 所有单选框统一样式（确保左侧对齐） */
 .common-radio {
   width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
   flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
-  margin: 0 !important; /* 清除默认margin */
+  margin: 0 !important; /* 清除默认外边距 */
   padding: 0 0 0 20px !important; /* 为单选框圆圈预留空间 */
-  text-align: left !important; /* 文字左对齐，确保起始点一致 */
+  text-align: left !important; /* 文字左对齐 */
   position: relative !important; /* 建立定位基准 */
 }
 
 /* 单选框圆圈（input）定位 - 核心对齐控制 */
 :deep(.common-radio .el-radio__input) {
   position: absolute !important; /* 脱离文档流，基于父元素定位 */
-  left: 0 !important; /* 固定在左侧，所有单选框left=0对齐 */
+  left: 0 !important; /* 固定在左侧，所有单选框左对齐 */
   top: 50% !important; /* 垂直居中 */
   transform: translateY(-50%) !important; /* 精确垂直居中 */
-  margin: 0 !important; /* 清除默认margin */
+  margin: 0 !important; /* 清除默认外边距 */
 }
 
 /* 单选框文字与圆圈的间距控制 */
@@ -452,35 +475,33 @@ const resetRegionTreeCheck = (nodes) => {
   margin: 0 !important;
 }
 
-/* 只调整月指定区域的年份下拉框，适配年度指定的样式 */
+/* 月指定区域的年份下拉框样式（适配年度指定样式） */
 .monthly-section .sales-sum-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; /* 允许在小屏幕上折行 */
+  flex-wrap: wrap; /* 小屏幕上自动折行 */
 }
 
-/* 7. 单选按钮与下拉框的组合容器 - 确保不折行 */
+/* 7. 单选按钮与下拉框的组合容器（不折行） */
 .radio-item {
   display: flex;
   align-items: center;
@@ -490,20 +511,20 @@ const resetRegionTreeCheck = (nodes) => {
   flex-wrap: nowrap; /* 强制不换行 */
 }
 
-/* 日期项容器 - 每个整体作为独立项 */
+/* 日期项容器（下拉框+标签） */
 .date-group {
-  display: flex;  /* 内部元素（下拉框+标签）不折行 */
+  display: flex; /* 内部元素不折行 */
   align-items: center;
   gap: 0; /* 下拉框与标签的间距 */
   white-space: nowrap; /* 防止内部元素折行 */
 }
 
-/* 日期选择器样式 - 年下拉框（强制适配宽度） */
+/* 日期选择器样式 - 年下拉框 */
 .sales-sum-date-select {
   width: 100px !important;
   min-width: 80px !important;
   max-width: 120px !important;
-  padding: 0 8px !important; /* 减少内边距 */
+  padding: 0 8px !important; /* 减少内边距，节省空间 */
 }
 
 /* 日期选择器样式 - 月下拉框 */
@@ -514,10 +535,10 @@ const resetRegionTreeCheck = (nodes) => {
   padding: 0 8px !important; /* 减少内边距 */
 }
 
-/* 日期标签样式 - "年"和"月"文字 */
+/* 日期标签样式（"年"、"月"、"年度"文字） */
 .date-label {
-  font-size: 14px;   /* 字体大小 */
-  color: #606266;       /* 文字颜色 */
+  font-size: 14px; /* 字体大小 */
+  color: #606266; /* 文字颜色 */
   white-space: nowrap; /* 禁止文字折行 */
   line-height: 1;
   display: inline-flex;
@@ -526,56 +547,57 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 分隔线样式 - 区域分隔 */
 .divider {
-  height: 1px;                  /* 高度 */
-  background-color: #FF0066;    /* 蓝色背景 */
-  margin: 10px 27px;            /* 上下外边距 */
+  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;  /* 垂直居中对齐 */
+  /* 与标题对齐：27px偏移+80px标题宽度+10px间距 */
+  padding-left: calc(27px + 80px + 10px);
+  margin-top: 25px; /* 顶部外边距 */
+  display: flex; /* Flex布局 */
+  gap: 10px; /* 按钮间距 */
+  align-items: center; /* 垂直居中对齐 */
   justify-content: start; /* 子元素左对齐 */
-  flex-wrap: wrap; /* 允许在极小屏幕下按钮换行 */
+  flex-wrap: wrap; /* 小屏幕下按钮换行 */
 }
 
 /* 操作按钮样式 - 集計 */
 .btn-aggregation {
-  background-color: #FF0066;  /* 蓝色背景 */
-  color: white;                 /* 白色文字 */
-  padding: 6px 10px;            /* 内边距 */
+  background-color: #FF0066; /* 按钮背景色 */
+  color: white; /* 文字颜色 */
+  padding: 6px 10px; /* 内边距 */
   box-sizing: border-box; /* 确保padding不影响宽度计算 */
-  margin-left: 0;               /* 左侧外边距 */
-  white-space: nowrap;          /* 禁止文字折行 */
-  width: 120px; /* 固定基础宽度 */
+  margin-left: 0; /* 左侧外边距 */
+  white-space: nowrap; /* 禁止文字折行 */
+  width: 120px; /* 固定宽度 */
   height: 32px; /* 统一高度 */
 }
 
 /* 操作按钮样式 - リセット */
 .btn-reset{
-  background-color: #FF0066;    /* 蓝色背景 */
-  color: white;                 /* 白色文字 */
-  padding: 6px 10px;            /* 内边距 */
+  background-color: #FF0066; /* 按钮背景色 */
+  color: white; /* 文字颜色 */
+  padding: 6px 10px; /* 内边距 */
   box-sizing: border-box; /* 确保padding不影响宽度计算 */
-  margin-left: 10px;            /* 左侧外边距 */
-  white-space: nowrap;          /* 禁止文字折行 */
-  width: 120px; /* 固定基础宽度 */
+  margin-left: 10px; /* 左侧外边距 */
+  white-space: nowrap; /* 禁止文字折行 */
+  width: 120px; /* 固定宽度 */
   height: 32px; /* 统一高度 */
 }
 
-/* 年度指定整体容器样式 - 核心不折行控制 */
+/* 年度指定整体容器样式 - 不折行控制 */
 .annual-group {
   display: flex;
   align-items: center;
-  gap: 0 !important; /* 🔴 强制消除单选框与下拉列表间距 */
+  gap: 0 !important; /* 强制消除单选框与下拉列表间距 */
   width: 100%;
-  flex-wrap: nowrap; /* 关键修改：强制不折行 */
-  min-width: 300px; /* 确保有足够宽度容纳内容 */
+  flex-wrap: nowrap; /* 强制不折行 */
+  min-width: 300px; /* 确保足够宽度容纳内容 */
 }
 
 /* 年度指定单选框样式 - 统一宽度 */
@@ -597,7 +619,7 @@ const resetRegionTreeCheck = (nodes) => {
 .annual-group .date-group {
   display: flex;
   align-items: center;
-  gap: 0 !important; /* 强制Flex容器内间距为0*/
+  gap: 0 !important; /* 强制Flex容器内间距为0 */
 }
 
 /* 消除下拉框自身可能的右外边距 */
@@ -620,7 +642,7 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 
- /* 媒体查询 - 适配大屏幕 */
+/* 媒体查询 - 适配大屏幕（≥1024px） */
 @media (min-width: 1024px) {
   .section-container {
     gap: 15px; /* 增大间距提升可读性 */
@@ -646,16 +668,16 @@ const resetRegionTreeCheck = (nodes) => {
   .annual-group .sales-sum-date-select {
     vertical-align: middle;
     position: relative !important;
-    transform: translateX(-8px) !important; /* 用left替代margin-left，避免影响相邻元素间距 */
+    transform: translateX(-8px) !important; /* 调整位置，与月指定的年下拉框对齐 */
   }
 
   .annual-group .date-group {
     gap: 0 !important; /* 覆盖大屏下的可能间距 */
   }
 
-  /* 3. 保证“年度”标签与“年”标签对齐（复用之前的标签对齐逻辑） */
+  /* 3. 保证“年度”标签与“年”标签对齐 */
   .date-group .date-label {
-    margin-left: 4px !important; /* 统一标签与下拉框的间距，不干扰其他样式 */
+    margin-left: 4px !important; /* 统一标签与下拉框的间距 */
   }
 
   .annual-group .date-group .date-label {
@@ -663,13 +685,13 @@ const resetRegionTreeCheck = (nodes) => {
   }
 }
 
-/* 响应式样式 - 平板端 (768px-1023px) */
+/* 响应式样式 - 平板端（768px-1023px） */
 @media (min-width: 768px) and (max-width: 1023px) {
   .btn-section {
     padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算 */
   }
 
-  /* 保持与移动端相同的宽度 */
+  /* 保持按钮宽度一致 */
   .btn-aggregation, .btn-reset {
     width: 120px; /* 统一宽度 */
   }
@@ -701,34 +723,34 @@ const resetRegionTreeCheck = (nodes) => {
   }
 }
 
-/* 响应式样式 - 移动端 (<768px) */
+/* 响应式样式 - 移动端（<768px） */
 @media (max-width: 767px) {
   .btn-section {
-    padding-left: 20px; /* 调整左侧内边距 */
+    padding-left: 20px; /* 调整左侧内边距，避免溢出 */
     justify-content: flex-start; /* 左对齐避免溢出 */
   }
 
   /* 保持按钮宽度一致 */
   .btn-aggregation, .btn-reset {
     width: 120px;
-    flex-shrink: 0;
+    flex-shrink: 0; /* 禁止按钮宽度被压缩 */
   }
 
   /* 仅修改年度指定行的对齐样式 */
   .annual-row {
-    margin-left: 0 !important; /* 移除20px左偏移，与月指定的date-groups-wrapper对齐 */
-    width: auto !important; /* 取消强制宽度计算，跟随父容器 */
+    margin-left: 0 !important; /* 移除左偏移，与月指定对齐 */
+    width: auto !important; /* 取消强制宽度计算 */
   }
 
   .form-section {
     width: 80px !important; /* 保持宽度为80px */
-    white-space: nowrap !important; /* 保留并加强优先级，防止禁止换行 */
+    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; /* 新增：确保宽度计算不包含内边距 */
+    min-width: 80px !important; /* 强制最小宽度 */
+    max-width: 80px !important; /* 强制最大宽度 */
+    flex-shrink: 0 !important; /* 禁止宽度被压缩 */
+    box-sizing: content-box !important; /* 宽度计算不包含内边距 */
   }
 
   .date-group {
@@ -772,14 +794,15 @@ const resetRegionTreeCheck = (nodes) => {
   .annual-group {
     display: flex;
     align-items: center;
-    gap: 0 !important; /* 仅减少年度指定单选框与下拉列表的间隔从8px减少到4px */
+    gap: 0 !important; /* 减少年度指定单选框与下拉列表的间隔 */
     width: 100%;
-    flex-wrap: nowrap; /* 关键修改：强制不折行 */
+    flex-wrap: nowrap; /* 强制不折行 */
     min-width: 300px; /* 确保有足够宽度容纳内容 */
-    overflow-x: auto; /* 当内容过宽时显示横向滚动条 */
+    overflow-x: auto; /* 内容过宽时显示横向滚动条 */
     padding-bottom: 5px; /* 为滚动条预留空间 */
     scrollbar-width: thin; /* 优化滚动条样式 */
   }
+
   /* 年度下拉框与年下拉框保持完全一致的位置 */
   .annual-group .date-group {
     margin-left: 0 !important; /* 与月指定的date-group左对齐 */
@@ -791,7 +814,8 @@ const resetRegionTreeCheck = (nodes) => {
     width: 100px !important; /* 与月指定的年下拉框宽度相同 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }
-  /* 防止滚动时影响其他元素 */
+
+  /* 优化滚动条样式 */
   .annual-group::-webkit-scrollbar {
     height: 4px;
   }
@@ -818,12 +842,10 @@ const resetRegionTreeCheck = (nodes) => {
 
   /* 月下拉列表行与年下拉列表对齐 */
   .monthly-section .date-groups-wrapper .date-group:nth-child(2) {
-    /* 与年下拉列表的单选框宽度+间距保持一致，确保左对齐 */
-    margin-left: 80px !important; /* 匹配"月指定"单选框的宽度（80px），使月下拉列表左对齐基准与年下拉列表一致 */
-    margin-top: 8px; /* 可选：添加微小间距，避免与年下拉列表过于拥挤 */
+    /* 匹配"月指定"单选框的宽度（80px），使月下拉列表左对齐基准与年下拉列表一致 */
+    margin-left: 80px !important;
+    margin-top: 8px; /* 添加微小间距，避免与年下拉列表过于拥挤 */
   }
-
-
 }
-
 </style>
+