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.

openspec/changes/archive/2026-02-12-simplify-calendar-holiday-highlight/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-11

openspec/changes/archive/2026-02-12-simplify-calendar-holiday-highlight/design.md

@@ -0,0 +1,97 @@
+## Context
+
+当前 `Calendar.vue` 组件使用复杂的 CSS 样式来高亮显示节假日：
+- 休息日使用绿色渐变背景 (`linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%)`)
+- 调休工作日使用橙色渐变背景 (`linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%)`)
+- 右上角显示红色徽章（"休"或"班"）
+
+这些装饰性元素增加了视觉复杂度，与 design tokens 系统的简洁性原则不符。用户反馈在多状态叠加（选中、有数据、节假日）时视觉混乱。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 简化节假日视觉样式，使用纯色背景替代渐变
+- 移除节假日徽章，减少视觉噪音
+- 确保所有节假日功能（识别、长按查看）保持不变
+- 提升多状态叠加时的视觉一致性
+
+**Non-Goals:**
+- 不修改节假日数据获取逻辑（API、数据结构）
+- 不影响长按浮层的交互逻辑
+- 不改变日历的其他视觉状态（选中、有数据、超预算）
+
+## Decisions
+
+### 决策 1: 纯色背景替代渐变
+**选择**: 使用 CSS 变量定义的单一背景色（如 `--bg-success-subtle` 和 `--bg-warning-subtle`）
+
+**理由**:
+- 渐变背景在小尺寸 (32px×32px) 的日期单元格中效果不明显，反而增加渲染成本
+- 纯色更符合 Material Design 和现代 UI 设计趋势
+- 与现有 design tokens 系统一致，易于主题切换（深色模式）
+
+**替代方案及弃用原因**:
+- **保留渐变但简化**: 仍需维护额外的颜色定义，不能复用 design tokens
+- **使用边框样式**: 边框在视觉上不够突出，易被忽略
+
+### 决策 2: 移除节假日徽章
+**选择**: 完全移除右上角的"休"/"班"徽章，仅依赖背景颜色和长按浮层
+
+**理由**:
+- 徽章在 9px 字号下可读性差，尤其对老年用户不友好
+- 背景颜色已足够区分休息日（绿色）和工作日（橙色）
+- 长按浮层提供详细信息，徽章信息冗余
+- 减少绝对定位元素，简化布局
+
+**替代方案及弃用原因**:
+- **使用图标替代文字**: 图标需要额外的视觉学习成本
+- **移至日期数字下方**: 占用交易金额显示区域，产生新的冲突
+
+### 决策 3: 状态优先级规则
+**选择**: 选中状态 > 数据状态 > 节假日状态
+
+**理由**:
+- 选中状态是用户当前关注焦点，应具有最高优先级
+- 交易数据是核心业务信息，优先于装饰性节假日样式
+- 节假日信息可通过长按浮层补充查看
+
+## Risks / Trade-offs
+
+### 风险 1: 颜色区分度下降
+**描述**: 移除徽章后，仅依赖背景颜色区分休息日和工作日，色盲用户可能无法区分绿色和橙色
+
+**缓解措施**: 
+- 在 ARIA 标签中补充文本信息（如 `aria-label="2026-01-01 春节 休息日"`）
+- 未来可考虑引入无障碍模式，使用图案纹理辅助颜色
+
+### 风险 2: 现有用户习惯改变
+**描述**: 已习惯徽章样式的用户可能一时不适应纯色背景
+
+**缓解措施**:
+- 本次为视觉优化，不涉及功能变更，用户可快速适应
+- 长按查看详情功能保持不变，信息获取路径未阻断
+
+### Trade-off: 简洁性 vs 信息丰富度
+**选择**: 优先简洁性，通过交互（长按）补充详细信息
+
+**理由**: 日历首屏展示的核心是日期和交易数据，节假日信息为辅助，适合按需查看
+
+## Migration Plan
+
+本次为纯前端样式优化，无需数据库迁移或 API 变更。
+
+**部署步骤**:
+1. 修改 `Calendar.vue` 的 SCSS 样式
+2. 移除 `.holiday-badge` 相关模板代码
+3. 调整 `.day-holiday` 和 `.day-workday` 类的样式为纯色背景
+4. 测试多种状态组合（选中+节假日、有数据+节假日）
+5. 验证长按浮层功能正常
+6. 构建并部署
+
+**回滚策略**:
+- 前端样式修改，可快速通过 Git revert 回滚
+- 无数据依赖，回滚无风险
+
+## Open Questions
+
+无待定问题。设计方案已明确。

openspec/changes/archive/2026-02-12-simplify-calendar-holiday-highlight/proposal.md

@@ -0,0 +1,26 @@
+## Why
+
+当前日历节假日的视觉呈现过于复杂，多种状态叠加（节假日、工作日、选中、有数据等）导致视觉混乱。渐变背景和红色徽章增加了视觉噪音，影响用户快速浏览日历的体验。需要简化节假日高亮样式，提升界面清晰度和可维护性。
+
+## What Changes
+
+- **移除复杂的渐变背景**：将节假日的绿色/橙色渐变背景改为简洁的纯色背景或边框样式
+- **简化或移除节假日徽章**：移除右上角的红色"休"/"班"徽章，改用更温和的视觉提示
+- **优化状态叠加逻辑**：减少多种视觉状态的冲突，确保在不同状态下节假日信息仍清晰可识别
+- **保留核心功能**：节假日识别和长按查看详情功能保持不变，仅调整视觉呈现方式
+
+## Capabilities
+
+### New Capabilities
+<!-- 无新能力 -->
+
+### Modified Capabilities
+<!-- 节假日显示规范调整 -->
+- `calendar-holiday-display`: 简化节假日视觉呈现规范，从复杂渐变+徽章样式改为简洁样式
+
+## Impact
+
+- **影响代码**: `Web/src/views/calendarV2/modules/Calendar.vue` 的样式部分（SCSS）
+- **不影响API**: 节假日数据获取逻辑保持不变
+- **不影响功能**: 节假日识别、长按提示等功能完整保留
+- **用户体验**: 提升日历界面清晰度，减少视觉干扰

openspec/changes/archive/2026-02-12-simplify-calendar-holiday-highlight/specs/calendar-holiday-display/spec.md

@@ -0,0 +1,37 @@
+## MODIFIED Requirements
+
+### Requirement: 节假日视觉样式
+日历日期单元格在显示节假日（包括休息日和调休工作日）时，SHALL 使用简洁的视觉样式，避免过度的装饰性元素。视觉呈现 SHALL 保持清晰、统一，且不干扰日期本身的可读性。
+
+#### Scenario: 休息日显示
+- **WHEN** 日期为节假日休息日（如春节、国庆）或普通周末
+- **THEN** 日期单元格使用浅绿色纯色背景（而非渐变），文字颜色为深绿色，不显示徽章
+
+#### Scenario: 调休工作日显示
+- **WHEN** 日期为调休工作日（需要补班）
+- **THEN** 日期单元格使用浅橙色纯色背景（而非渐变），文字颜色为深橙色，不显示徽章
+
+#### Scenario: 节假日与选中状态叠加
+- **WHEN** 节假日日期被用户选中
+- **THEN** 选中状态的高亮样式优先级高于节假日样式，节假日信息通过长按浮层查看
+
+#### Scenario: 节假日与交易数据叠加
+- **WHEN** 节假日日期有交易数据记录
+- **THEN** 节假日背景样式与交易金额显示不冲突，金额数字保持清晰可读
+
+### Requirement: 节假日信息查看
+用户 SHALL 能够通过长按日历日期单元格查看详细的节假日信息。此功能 SHALL 保持与简化前完全一致。
+
+#### Scenario: 长按查看节假日详情
+- **WHEN** 用户长按节假日日期超过 500ms
+- **THEN** 显示浮层，展示节假日名称和类型（休息日/调休工作日）
+
+#### Scenario: 关闭节假日详情
+- **WHEN** 用户点击浮层外部区域或浮层本身
+- **THEN** 浮层关闭，返回日历视图
+
+## REMOVED Requirements
+
+### Requirement: 节假日徽章显示
+**Reason**: 徽章占用空间且增加视觉噪音，与简洁化目标不符  
+**Migration**: 节假日信息通过背景颜色和长按浮层传达，无需徽章

openspec/changes/archive/2026-02-12-simplify-calendar-holiday-highlight/tasks.md

@@ -0,0 +1,40 @@
+## 1. 模板结构调整
+
+- [x] 1.1 在 Calendar.vue 模板中移除节假日徽章 `<span class="holiday-badge">` 元素
+- [x] 1.2 确认 `.day-number` 元素保留 `day-holiday` 和 `day-workday` 类名（用于样式）
+
+## 2. 样式重构 - 节假日背景
+
+- [x] 2.1 将 `.day-holiday` 的渐变背景改为纯色（浅绿色），使用 CSS 变量或固定色值
+- [x] 2.2 将 `.day-workday` 的渐变背景改为纯色（浅橙色），使用 CSS 变量或固定色值
+- [x] 2.3 调整节假日文字颜色为深色系，确保可读性（绿色/橙色）
+
+## 3. 样式清理
+
+- [x] 3.1 删除 `.holiday-badge` 及其相关样式（position, background, border-radius 等）
+- [x] 3.2 移除 `.day-number` 的 `position: relative`（如果仅用于徽章定位）
+- [x] 3.3 清理不再使用的 CSS 变量或注释
+
+## 4. 状态优先级验证
+
+- [x] 4.1 测试节假日 + 选中状态：确认选中状态优先显示
+- [x] 4.2 测试节假日 + 有数据状态：确认交易金额显示不被遮挡
+- [x] 4.3 测试节假日 + 其他月份：确认非当月日期的透明度正常
+
+## 5. 功能回归测试
+
+- [x] 5.1 验证长按节假日日期 500ms 后显示浮层
+- [x] 5.2 验证浮层内容正确（节假日名称、类型）
+- [x] 5.3 验证点击浮层外部可关闭
+- [x] 5.4 确认普通周末（无 API 数据）仍正确显示为休息日
+
+## 6. 无障碍性增强（可选）
+
+- [x] 6.1 为节假日日期添加 `aria-label`（如 "2026-01-01 春节 休息日"）
+- [x] 6.2 确认屏幕阅读器能正确读取节假日信息
+
+## 7. 视觉验证与调整
+
+- [x] 7.1 在浅色主题下检查节假日颜色对比度
+- [x] 7.2 在深色主题下检查节假日颜色对比度（如果支持）
+- [x] 7.3 对比简化前后截图，确认视觉简洁性提升