From f4239e8a0ecd5e5097ef5cb1f4744d836b243834 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Feb 2026 21:25:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E5=AE=8C=E5=96=84=E6=8E=92?=
 =?UTF-8?q?=E7=8F=AD=E6=97=A5=E5=8E=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=81=87=E6=9C=9F=E8=BF=87=E6=BB=A4=E5=8F=8A=E7=8F=AD?=
 =?UTF-8?q?=E7=BB=84=E6=8E=92=E7=8F=AD=E8=AE=B0=E5=BD=95=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mes/cal/calendar/CalendarDateCell.vue     | 15 +++++---
 src/views/mes/cal/calendar/CalendarLegend.vue | 37 +++++++++++++++++++
 src/views/mes/cal/calendar/TeamView.vue       | 16 +++++---
 src/views/mes/cal/calendar/TypeView.vue       | 20 +++++-----
 src/views/mes/cal/calendar/UserView.vue       |  2 +
 5 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 src/views/mes/cal/calendar/CalendarLegend.vue

diff --git a/src/views/mes/cal/calendar/CalendarDateCell.vue b/src/views/mes/cal/calendar/CalendarDateCell.vue
index c8341ecf3..e3f3ecb11 100644
--- a/src/views/mes/cal/calendar/CalendarDateCell.vue
+++ b/src/views/mes/cal/calendar/CalendarDateCell.vue
@@ -16,13 +16,18 @@
     >
       {{ lunarDisplay }}
     </div>
-    <!-- 班次信息：节假日不显示排班 -->
+    <!-- 班次列表：节假日不显示排班 -->
     <template v-if="!isHoliday">
-      <!-- TODO @AI：最好有个地方，说明下这个逻辑； -->
+      <!--
+        配色规则（sort 对应轮班方式中的班次顺序）：
+          sort=1  白班  → success（绿色）
+          sort=2  中班  → 三班倒用 warning（橙色），两班倒用 info（灰色）
+          sort=3  夜班  → info（灰色）
+      -->
       <div v-for="item in teamShifts" :key="item.sort" class="mt-2px">
         <!-- sort=1 白班：绿色 -->
         <el-button v-if="item.sort === 1" type="success" size="small" class="!w-full !text-12px">
-          {{ item.teamName }}
+          {{ item.shiftName }} · {{ item.teamName }}
         </el-button>
         <!-- sort=2 中班：三班倒时用橙色，两班倒时用灰色 -->
         <el-button
@@ -31,11 +36,11 @@
           size="small"
           class="!w-full !text-12px"
         >
-          {{ item.teamName }}
+          {{ item.shiftName }} · {{ item.teamName }}
         </el-button>
         <!-- sort=3 夜班：灰色 -->
         <el-button v-else-if="item.sort === 3" type="info" size="small" class="!w-full !text-12px">
-          {{ item.teamName }}
+          {{ item.shiftName }} · {{ item.teamName }}
         </el-button>
       </div>
     </template>
diff --git a/src/views/mes/cal/calendar/CalendarLegend.vue b/src/views/mes/cal/calendar/CalendarLegend.vue
new file mode 100644
index 000000000..4dc082144
--- /dev/null
+++ b/src/views/mes/cal/calendar/CalendarLegend.vue
@@ -0,0 +1,37 @@
+<!-- 排班日历 - 配色图例说明 -->
+<template>
+  <div class="flex items-center flex-wrap gap-x-16px gap-y-4px text-12px text-#606266 px-2px py-6px">
+    <span class="text-#909399 shrink-0">配色说明：</span>
+    <span class="flex items-center gap-4px">
+      <span class="legend-dot bg-#95d475" ></span>
+      白班
+    </span>
+    <span class="flex items-center gap-4px">
+      <span class="legend-dot bg-#f0a020" ></span>
+      中班（三班倒）
+    </span>
+    <span class="flex items-center gap-4px">
+      <span class="legend-dot bg-#909399" ></span>
+      中班（两班倒）/ 夜班
+    </span>
+    <span class="flex items-center gap-4px">
+      <span class="legend-dot bg-#f56c6c opacity-60" ></span>
+      <span class="text-#f56c6c">红色日期</span>
+      = 周末
+    </span>
+    <span class="flex items-center gap-4px">
+      <el-tag size="small" effect="dark" type="success" class="!text-11px !h-18px !px-4px">休</el-tag>
+      = 节假日（不显示排班）
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.legend-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/views/mes/cal/calendar/TeamView.vue b/src/views/mes/cal/calendar/TeamView.vue
index 9199f44a4..309656504 100644
--- a/src/views/mes/cal/calendar/TeamView.vue
+++ b/src/views/mes/cal/calendar/TeamView.vue
@@ -2,17 +2,15 @@
 <template>
   <div class="flex">
     <!-- 左侧：班组列表选择 -->
-    <!-- TODO @AI：默认选中首个 -->
     <div
       class="w-150px shrink-0 mr-12px border border-solid border-#dcdfe6 rounded-4px overflow-hidden"
     >
-      <!-- TODO @AI：可以把 @click 在封装下么？更统一一些； -->
       <div
         v-for="team in teamList"
         :key="team.id"
         class="px-16px py-10px cursor-pointer text-14px text-#606266 border-b border-b-solid border-b-#ebeef5 last:border-b-0 hover:bg-#f5f7fa transition-colors"
         :class="selectedTeamId === team.id ? 'bg-#ecf5ff text-#409eff font-500' : ''"
-        @click="selectedTeamId = team.id; onTeamSelected()"
+        @click="onSelectTeam(team.id)"
       >
         {{ team.name }}
       </div>
@@ -20,6 +18,7 @@
 
     <!-- 右侧：日历 -->
     <div class="flex-1">
+      <CalendarLegend />
       <el-calendar v-model="currentDate" v-loading="loading">
         <template #date-cell="{ data }">
           <CalendarDateCell
@@ -40,6 +39,7 @@ import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
 import { formatDate } from '@/utils/formatTime'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
+import CalendarLegend from './CalendarLegend.vue'
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份
@@ -48,9 +48,12 @@ const teamList = ref<CalTeamVO[]>([]) // 所有班组列表
 const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map()) // key: yyyy-MM-dd
 const holidaySet = ref(new Set<string>()) // 节假日日期集合，key: yyyy-MM-dd
 
-/** 获取班组列表 */
+/** 获取班组列表，并默认选中第一个 */
 const getTeamList = async () => {
   teamList.value = await CalTeamApi.getTeamList()
+  if (teamList.value.length > 0) {
+    onSelectTeam(teamList.value[0].id)
+  }
 }
 
 /** 获取节假日列表，构建节假日日期集合 */
@@ -98,8 +101,9 @@ const fetchCalendar = async () => {
   }
 }
 
-/** 选择班组后刷新日历 */
-const onTeamSelected = () => {
+/** 点击左侧班组后切换并刷新日历 */
+const onSelectTeam = (id: number) => {
+  selectedTeamId.value = id
   fetchCalendar()
 }
 
diff --git a/src/views/mes/cal/calendar/TypeView.vue b/src/views/mes/cal/calendar/TypeView.vue
index c12fe99fb..b1a3ee603 100644
--- a/src/views/mes/cal/calendar/TypeView.vue
+++ b/src/views/mes/cal/calendar/TypeView.vue
@@ -2,20 +2,15 @@
 <template>
   <div class="flex">
     <!-- 左侧：班组类型选择 -->
-    <!-- TODO @AI：默认选中首个 -->
     <div
       class="w-150px shrink-0 mr-12px border border-solid border-#dcdfe6 rounded-4px overflow-hidden"
     >
-      <!-- TODO @AI：可以把 @click 在封装下么？更统一一些； -->
       <div
         v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)"
         :key="dict.value"
         class="px-16px py-10px cursor-pointer text-14px text-#606266 border-b border-b-solid border-b-#ebeef5 last:border-b-0 hover:bg-#f5f7fa transition-colors"
         :class="selectedType === dict.value ? 'bg-#ecf5ff text-#409eff font-500' : ''"
-        @click="
-          selectedType = dict.value
-          onTypeSelected()
-        "
+        @click="onSelectType(dict.value)"
       >
         {{ dict.label }}
       </div>
@@ -23,6 +18,7 @@
 
     <!-- 右侧：日历 -->
     <div class="flex-1">
+      <CalendarLegend />
       <el-calendar v-model="currentDate" v-loading="loading">
         <template #date-cell="{ data }">
           <CalendarDateCell
@@ -43,6 +39,7 @@ import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
+import CalendarLegend from './CalendarLegend.vue'
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份
@@ -95,8 +92,9 @@ const fetchCalendar = async () => {
   }
 }
 
-/** 选择分类后刷新日历 */
-const onTypeSelected = () => {
+/** 点击左侧分类后切换并刷新日历 */
+const onSelectType = (value: number) => {
+  selectedType.value = value
   fetchCalendar()
 }
 
@@ -107,8 +105,12 @@ watch(currentDate, () => {
   }
 })
 
-/** 初始化 */
+/** 初始化：加载节假日，并默认选中第一个分类 */
 onMounted(() => {
   getHolidayList()
+  const opts = getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)
+  if (opts.length > 0) {
+    onSelectType(opts[0].value as number)
+  }
 })
 </script>
diff --git a/src/views/mes/cal/calendar/UserView.vue b/src/views/mes/cal/calendar/UserView.vue
index a7978f5cd..a2324d3f2 100644
--- a/src/views/mes/cal/calendar/UserView.vue
+++ b/src/views/mes/cal/calendar/UserView.vue
@@ -27,6 +27,7 @@
     </el-form>
 
     <!-- 日历 -->
+    <CalendarLegend />
     <el-calendar v-model="currentDate" v-loading="loading">
       <template #date-cell="{ data }">
         <CalendarDateCell
@@ -46,6 +47,7 @@ import { getSimpleUserList, UserVO } from '@/api/system/user'
 import { formatDate } from '@/utils/formatTime'
 import { HolidayType } from '@/views/mes/utils/constants'
 import CalendarDateCell from './CalendarDateCell.vue'
+import CalendarLegend from './CalendarLegend.vue'
 
 const loading = ref(false)
 const currentDate = ref(new Date()) // 日历当前显示月份