feat(calendar): simplify holiday highlight styles and improve accessibility

- Introduced a new visual style for holiday highlights in the calendar component, replacing complex gradients with solid colors for better clarity.
- Removed the holiday badge to reduce visual noise and enhance user experience.
- Ensured that holiday information remains accessible through long-press interactions.
- Updated specifications to reflect the new design decisions and requirements for both light and dark themes.
- Added tasks for implementation, including style adjustments and accessibility enhancements.

Web/src/assets/theme.css

@@ -79,6 +79,10 @@
   
   /* 边框颜色 */
   --border-color: #E5E7EB;
+
+  /* 分段控制器 (Segmented Control) - From .pans/v2.pen NDWwE */
+  --segmented-bg: #F4F4F5;
+  --segmented-active-bg: #FFFFFF;
 }
 
 /* ============ 深色主题 ============ */
@@ -110,6 +114,10 @@
   /* 图标色 (深色主题) */
   --icon-star: #FF6B6B;
   --icon-coffee: #FCD34D;
+
+  /* 分段控制器 (Segmented Control) - From .pans/v2.pen NDWwE */
+  --segmented-bg: #27272a;
+  --segmented-active-bg: #3f3f46;
 }
 
 /* ============ 通用工具类 ============ */

Web/src/components/TimePeriodTabs.vue

@@ -1,4 +1,10 @@
-<template>
+<!--
+  时间段选择器组件 (Time Period Tabs)
+  用于统计页面的"周/月/年"时间段切换
+  样式已按 pencli 设计规范更新 (.pans/v2.pen 节点 NDWwE)
+  支持亮色和暗色两种主题
+-->
+<template>
   <div class="tabs-wrapper">
     <div class="segmented-control">
       <div
@@ -46,10 +52,10 @@ defineEmits(['change'])
 
   .segmented-control {
     display: flex;
-    background: transparent;
-    border-radius: var(--radius-md);
-    padding: 0;
-    gap: var(--spacing-sm);
+    background: var(--segmented-bg);
+    border-radius: 8px;
+    padding: 4px;
+    gap: 4px;
     height: 40px;
 
     .tab-item {
@@ -57,13 +63,13 @@ defineEmits(['change'])
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--radius-md);
+      border-radius: 6px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      background: rgba(128, 128, 128, 0.15);
+      background: transparent;
 
       &.active {
-        background: rgba(128, 128, 128, 0.3);
+        background: var(--segmented-active-bg);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 
         .tab-text {
@@ -73,7 +79,7 @@ defineEmits(['change'])
       }
 
       &:not(.active):hover {
-        background: rgba(128, 128, 128, 0.2);
+        background: rgba(128, 128, 128, 0.1);
       }
 
       .tab-text {

Web/src/views/calendarV2/modules/Calendar.vue

@@ -31,6 +31,7 @@
               v-for="day in week"
               :key="day.date"
               class="day-cell"
+              :aria-label="getAriaLabel(day)"
               @click="onDayClick(day)"
               @touchstart="onTouchStartHoliday($event, day)"
               @touchend="onTouchEndHoliday"
@@ -48,13 +49,6 @@
                 }"
               >
                 {{ day.dayNumber }}
-                <!-- 节假日标记 -->
-                <span
-                  v-if="day.isHoliday"
-                  class="holiday-badge"
-                >
-                  {{ day.isWorkday ? '班' : '休' }}
-                </span>
               </div>
               <div
                 v-if="day.amount"
@@ -369,6 +363,25 @@ const formatDateKey = (date) => {
   return `${year}-${month}-${day}`
 }
 
+// 生成无障碍标签
+const getAriaLabel = (day) => {
+  const date = new Date(day.date)
+  const dateStr = formatDateKey(date)
+  let label = dateStr
+  
+  if (day.isHoliday) {
+    const type = day.isWorkday ? '调休工作日' : '休息日'
+    label += ` ${day.holidayName} ${type}`
+  }
+  
+  if (day.hasData) {
+    const amountType = day.isProfitable ? '收入' : '支出'
+    label += ` ${amountType} ${day.amount}元`
+  }
+  
+  return label
+}
+
 // 点击日期
 const onDayClick = (day) => {
   emit('dayClick', day)
@@ -500,7 +513,6 @@ const onTouchEnd = () => {
   position: relative;
   width: 100%;
   overflow: hidden; /* 保持 hidden 以支持切换动画 */
-  padding-top: 4px; /* 新增：为第一行的徽章留出空间 */
 }
 
 .calendar-grid {
@@ -508,7 +520,6 @@ const onTouchEnd = () => {
   flex-direction: column;
   gap: var(--spacing-lg);
   width: 100%;
-  padding-top: 4px; /* 新增：为第一行徽章留出空间 */
 }
 
 .calendar-week {
@@ -527,7 +538,6 @@ const onTouchEnd = () => {
 }
 
 .day-number {
-  position: relative; /* 为绝对定位的徽章提供定位上下文 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -545,9 +555,25 @@ const onTouchEnd = () => {
   font-weight: var(--font-semibold);
 }
 
+/* ========== 节假日样式 ========== */
+/* 节假日放假样式（绿色系） */
+.day-number.day-holiday {
+  background-color: #E8F5E9;
+  color: #2E7D32;
+  font-weight: var(--font-bold);
+}
+
+/* 调休工作日样式（橙色/黄色系） */
+.day-number.day-workday {
+  background-color: #FFF3E0;
+  color: #E65100;
+  font-weight: var(--font-bold);
+}
+
+/* 选中状态优先级最高 */
 .day-number.day-selected {
-  background-color: var(--accent-primary);
-  color: #FFFFFF;
+  background-color: var(--accent-primary) !important;
+  color: #FFFFFF !important;
   font-weight: var(--font-bold);
 }
 
@@ -570,37 +596,6 @@ const onTouchEnd = () => {
   color: var(--accent-success);
 }
 
-/* ========== 节假日样式 ========== */
-/* 节假日放假样式（绿色系） */
-.day-number.day-holiday {
-  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
-  color: #2E7D32;
-  font-weight: var(--font-bold);
-}
-
-/* 调休工作日样式（橙色/黄色系） */
-.day-number.day-workday {
-  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
-  color: #E65100;
-  font-weight: var(--font-bold);
-}
-
-/* 节假日标记 */
-.holiday-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  font-size: 9px;
-  background-color: var(--accent-danger);
-  color: white;
-  border-radius: 4px;
-  padding: 1px 3px;
-  line-height: 1.2;
-  font-weight: var(--font-bold);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-}
-
 /* 节假日提示浮层 */
 .holiday-tooltip-wrapper {
   display: flex;