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-fix-stats-v2-node-style/.openspec.yaml

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

openspec/changes/archive/2026-02-12-fix-stats-v2-node-style/design.md

@@ -0,0 +1,119 @@
+## Context
+
+当前 `TimePeriodTabs` 组件使用了自定义的透明背景和半透明灰色样式,与 pencli 设计文件 (`.pans/v2.pen`, 节点 NDWwE) 中定义的视觉规范不一致。设计稿采用了更清晰的视觉层次:浅灰色背景容器包裹着三个标签,激活态使用白色背景突出显示。此外,当前实现缺乏暗色主题的适配。
+
+**技术栈:**
+- Vue 3 Composition API (`<script setup>`)
+- SCSS 样式 (基于 CSS 变量的主题系统)
+- 主题系统: `Web/src/assets/theme.css`
+
+**设计规范来源:**
+- `.pans/v2.pen` 节点 NDWwE (TabsWrapper)
+  - 容器: padding `[8, 24]`, 垂直布局
+  - SegmentedControl (节点 4iQfn): 
+    - 背景 `#F4F4F5`, 圆角 `8px`, padding `4px`, gap `4px`, height `40px`
+  - 激活态标签 (节点 LN1iU): 
+    - 背景 `#FFFFFF`, 圆角 `6px`, 文字颜色 `#1A1A1A`, 字重 `600`
+  - 非激活态标签 (节点 7LCL4, 7VSH1): 
+    - 背景透明, 圆角 `6px`, 文字颜色 `#6B7280`, 字重 `500`
+
+## Goals / Non-Goals
+
+**Goals:**
+- 完全符合 pencli 设计规范的视觉样式
+- 支持亮色和暗色两种主题,保持良好的对比度和可读性
+- 保持组件 API 不变,不影响现有使用方式
+- 激活态具有明确的视觉反馈
+
+**Non-Goals:**
+- 不修改组件的交互逻辑或事件处理
+- 不改变组件的 props 或 emits 接口
+- 不添加新功能(如动画效果或手势支持)
+
+## Decisions
+
+### 决策 1: 直接使用 CSS 变量而非硬编码颜色
+
+**选择:** 在 `theme.css` 中定义新的语义化 CSS 变量 `--segmented-bg` 和 `--segmented-active-bg`
+
+**理由:**
+- 项目已有成熟的 CSS 变量主题系统 (`Web/src/assets/theme.css`)
+- 使用变量可以自动适配暗色主题,无需在组件中使用 `v-if` 判断
+- 便于后续统一调整分段控制器样式
+- 符合项目现有的样式管理模式
+
+**备选方案 (未采用):**
+- ~~硬编码颜色值~~ - 无法适配暗色主题
+- ~~使用 computed 动态计算颜色~~ - 增加不必要的 JS 逻辑
+
+### 决策 2: 暗色主题映射策略
+
+**选择:** 暗色主题使用以下映射:
+- 容器背景: `#27272a` (对应浅色的 `#F4F4F5`)
+- 激活态背景: `#3f3f46` (对应浅色的 `#FFFFFF`)
+- 激活态文字: `#f4f4f5` (对应浅色的 `#1A1A1A`)
+- 非激活态文字: `#a1a1aa` (对应浅色的 `#6B7280`)
+
+**理由:**
+- 保持与现有深色主题色板 (`--bg-tertiary`, `--border-color`) 的一致性
+- 确保 WCAG AA 级别的对比度标准(激活态文字对比度 > 4.5:1)
+- 视觉层次清晰,激活态明显突出
+
+**备选方案 (未采用):**
+- ~~完全反转亮色主题颜色~~ - 对比度不足,可读性差
+- ~~使用蓝色或其他强调色~~ - 与设计稿的中性灰色调不符
+
+### 决策 3: 保留现有的 hover 和过渡效果
+
+**选择:** 保留 `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` 和 hover 状态
+
+**理由:**
+- 提升交互体验,符合现代 UI 设计规范
+- 设计稿未明确禁止过渡效果
+- 与应用其他组件的交互风格保持一致
+
+## Risks / Trade-offs
+
+### 风险 1: 新增 CSS 变量可能与未来设计稿冲突
+
+**风险:** 如果后续设计稿为分段控制器定义了不同的颜色变量,可能需要重新调整
+
+**缓解措施:**
+- 使用语义化命名 (`--segmented-*`),明确变量用途
+- 在 `theme.css` 中添加注释标注变量来源 (`/* From .pans/v2.pen NDWwE */`)
+
+### 风险 2: 暗色主题对比度可能不够理想
+
+**风险:** 在某些设备或环境光下,暗色主题的激活态可能不够明显
+
+**缓解措施:**
+- 使用 Chrome DevTools 的对比度检查工具验证
+- 添加微妙的阴影效果增强视觉分离 (`box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)`)
+
+### 权衡: 放弃完全像素级还原设计稿字体
+
+**权衡:** 设计稿使用 `DM Sans` 字体,但项目中可能未全局加载该字体
+
+**决策:** 依赖 `--font-primary` 变量,由主题系统统一管理字体回退
+
+**影响:** 在未加载 `DM Sans` 的环境下,会回退到系统字体,视觉效果略有差异,但可接受
+
+## Migration Plan
+
+**部署步骤:**
+1. 更新 `theme.css`,添加新的 CSS 变量
+2. 更新 `TimePeriodTabs.vue` 组件样式
+3. 验证浏览器兼容性 (Chrome, Safari, Firefox)
+4. 在亮色和暗色主题下分别测试视觉效果
+
+**回滚策略:**
+- 如发现严重视觉问题,可通过 Git 回滚单个文件
+- CSS 变量的添加不会破坏现有样式,可以安全回滚
+
+**影响范围:**
+- 仅影响统计 v2 页面的时间段选择器组件
+- 无 API 变更,无需后端配合
+
+## Open Questions
+
+无待解决问题。设计规范已明确,实现路径清晰。

openspec/changes/archive/2026-02-12-fix-stats-v2-node-style/proposal.md

@@ -0,0 +1,37 @@
+## Why
+
+统计 v2 页面中的时间段选择器组件(`TimePeriodTabs`)的视觉样式与 pencli 设计文件(`.pans/v2.pen`)中的节点 NDWwE 不一致。当前实现使用透明背景和半透明灰色,而设计稿要求使用浅灰色背景(`#F4F4F5`)和白色激活态,且需要适配暗色主题。
+
+## What Changes
+
+- 修改 `Web/src/components/TimePeriodTabs.vue` 组件样式,使其完全符合设计稿规格
+- 添加外层容器背景色 `#F4F4F5` (浅色主题) 和对应的暗色主题背景色
+- 调整激活态样式:使用白色背景 (`#FFFFFF`) 替代当前的半透明灰色
+- 调整非激活态样式:使用透明背景替代当前的半透明灰色
+- 增加容器内边距 `4px` 和圆角 `8px`
+- 调整文字颜色:激活态使用 `#1A1A1A` (深色),非激活态使用 `#6B7280` (灰色)
+- 添加暗色主题变体,确保在深色模式下也符合设计规范
+
+## Capabilities
+
+### New Capabilities
+无
+
+### Modified Capabilities
+- `time-period-tabs-ui`: 时间段选择器组件的 UI 样式需求变更,需要完全匹配 pencli 设计稿并支持双主题
+
+## Impact
+
+**受影响的文件:**
+- `Web/src/components/TimePeriodTabs.vue` - 组件样式重写
+
+**受影响的页面:**
+- `Web/src/views/statisticsV2/Index.vue` - 使用该组件的统计 v2 页面
+
+**依赖:**
+- `Web/src/assets/theme.css` - 可能需要添加新的主题变量
+
+**用户体验影响:**
+- 视觉效果更加符合设计规范
+- 亮色/暗色主题下均有更好的对比度和可读性
+- 激活态更加明显,提升交互反馈

openspec/changes/archive/2026-02-12-fix-stats-v2-node-style/specs/time-period-tabs-ui/spec.md

@@ -0,0 +1,104 @@
+## ADDED Requirements
+
+### Requirement: 分段控制器容器样式
+
+时间段选择器组件 SHALL 具有一个浅灰色背景容器,包含固定的内边距、圆角和高度,以匹配 pencli 设计规范 (节点 4iQfn)。
+
+#### Scenario: 亮色主题容器样式
+- **WHEN** 用户在亮色主题下查看统计 v2 页面
+- **THEN** 分段控制器容器背景色为 `#F4F4F5`
+- **AND** 容器内边距为 `4px`
+- **AND** 容器圆角为 `8px`
+- **AND** 容器高度为 `40px`
+- **AND** 容器内标签间隔为 `4px`
+
+#### Scenario: 暗色主题容器样式
+- **WHEN** 用户在暗色主题下查看统计 v2 页面
+- **THEN** 分段控制器容器背景色为 `#27272a`
+- **AND** 容器内边距为 `4px`
+- **AND** 容器圆角为 `8px`
+- **AND** 容器高度为 `40px`
+- **AND** 容器内标签间隔为 `4px`
+
+### Requirement: 激活态标签样式
+
+当某个时间段标签被选中时,该标签 SHALL 显示白色(亮色主题)或深灰色(暗色主题)背景,文字颜色为深色(亮色)或浅色(暗色),字重为粗体,以突出显示当前选择。
+
+#### Scenario: 亮色主题激活态
+- **WHEN** 用户在亮色主题下选择"月"标签
+- **THEN** "月"标签背景色为 `#FFFFFF`
+- **AND** "月"标签文字颜色为 `#1A1A1A`
+- **AND** "月"标签文字字重为 `600`
+- **AND** "月"标签圆角为 `6px`
+- **AND** "月"标签具有微妙的阴影效果
+
+#### Scenario: 暗色主题激活态
+- **WHEN** 用户在暗色主题下选择"月"标签
+- **THEN** "月"标签背景色为 `#3f3f46`
+- **AND** "月"标签文字颜色为 `#f4f4f5`
+- **AND** "月"标签文字字重为 `600`
+- **AND** "月"标签圆角为 `6px`
+- **AND** "月"标签具有微妙的阴影效果
+
+### Requirement: 非激活态标签样式
+
+未被选中的时间段标签 SHALL 显示透明背景,灰色文字,中等字重,与激活态形成明显对比。
+
+#### Scenario: 亮色主题非激活态
+- **WHEN** 用户在亮色主题下查看"周"和"年"标签(未选中)
+- **THEN** "周"和"年"标签背景色为透明
+- **AND** "周"和"年"标签文字颜色为 `#6B7280`
+- **AND** "周"和"年"标签文字字重为 `500`
+- **AND** "周"和"年"标签圆角为 `6px`
+
+#### Scenario: 暗色主题非激活态
+- **WHEN** 用户在暗色主题下查看"周"和"年"标签(未选中)
+- **THEN** "周"和"年"标签背景色为透明
+- **AND** "周"和"年"标签文字颜色为 `#a1a1aa`
+- **AND** "周"和"年"标签文字字重为 `500`
+- **AND** "周"和"年"标签圆角为 `6px`
+
+### Requirement: 交互反馈
+
+标签 SHALL 在用户悬停时提供视觉反馈,并在状态切换时具有平滑的过渡动画。
+
+#### Scenario: 悬停效果
+- **WHEN** 用户将鼠标悬停在非激活态标签上
+- **THEN** 标签背景透明度略微增加
+- **AND** 过渡动画时长为 `0.3s`
+- **AND** 使用 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动函数
+
+#### Scenario: 点击切换动画
+- **WHEN** 用户点击非激活态标签
+- **THEN** 新激活的标签背景和文字颜色平滑过渡到激活态样式
+- **AND** 原激活的标签平滑过渡到非激活态样式
+- **AND** 过渡动画时长为 `0.3s`
+
+### Requirement: 主题自适应
+
+分段控制器组件 SHALL 根据应用的当前主题设置自动切换样式,无需手动干预。
+
+#### Scenario: 主题切换响应
+- **WHEN** 用户从亮色主题切换到暗色主题
+- **THEN** 分段控制器容器背景从 `#F4F4F5` 变为 `#27272a`
+- **AND** 激活态标签背景从 `#FFFFFF` 变为 `#3f3f46`
+- **AND** 激活态标签文字从 `#1A1A1A` 变为 `#f4f4f5`
+- **AND** 非激活态标签文字从 `#6B7280` 变为 `#a1a1aa`
+
+#### Scenario: 主题变量依赖
+- **WHEN** 系统读取分段控制器样式
+- **THEN** 容器背景使用 CSS 变量 `--segmented-bg`
+- **AND** 激活态背景使用 CSS 变量 `--segmented-active-bg`
+- **AND** 文字颜色使用 CSS 变量 `--text-primary` 和 `--text-secondary`
+
+### Requirement: 可访问性对比度
+
+激活态和非激活态的文字与背景对比度 SHALL 满足 WCAG AA 级别标准 (至少 4.5:1)。
+
+#### Scenario: 亮色主题对比度验证
+- **WHEN** 在亮色主题下测量激活态文字 (`#1A1A1A`) 与背景 (`#FFFFFF`) 的对比度
+- **THEN** 对比度比值 >= 4.5:1
+
+#### Scenario: 暗色主题对比度验证
+- **WHEN** 在暗色主题下测量激活态文字 (`#f4f4f5`) 与背景 (`#3f3f46`) 的对比度
+- **THEN** 对比度比值 >= 4.5:1

openspec/changes/archive/2026-02-12-fix-stats-v2-node-style/tasks.md

@@ -0,0 +1,43 @@
+## 1. 主题变量准备
+
+- [x] 1.1 在 `Web/src/assets/theme.css` 的 `:root` 块中添加浅色主题分段控制器变量 `--segmented-bg: #F4F4F5` 和 `--segmented-active-bg: #FFFFFF`
+- [x] 1.2 在 `Web/src/assets/theme.css` 的 `[data-theme="dark"]` 块中添加暗色主题分段控制器变量 `--segmented-bg: #27272a` 和 `--segmented-active-bg: #3f3f46`
+- [x] 1.3 为新变量添加注释,标注其来源于 `.pans/v2.pen` 节点 NDWwE
+
+## 2. 组件样式重构
+
+- [x] 2.1 修改 `.tabs-wrapper` 的 padding 为 `var(--spacing-sm) var(--spacing-xl)` (对应设计稿的 `[8, 24]`)
+- [x] 2.2 修改 `.segmented-control` 的 background 从 `transparent` 改为 `var(--segmented-bg)`
+- [x] 2.3 修改 `.segmented-control` 的 border-radius 从 `var(--radius-md)` 改为 `8px`
+- [x] 2.4 修改 `.segmented-control` 的 padding 从 `0` 改为 `4px`
+- [x] 2.5 修改 `.segmented-control` 的 gap 从 `var(--spacing-sm)` 改为 `4px`
+- [x] 2.6 确认 `.segmented-control` 的 height 保持为 `40px`
+
+## 3. 标签项样式调整
+
+- [x] 3.1 修改 `.tab-item` 的默认 background 从 `rgba(128, 128, 128, 0.15)` 改为 `transparent`
+- [x] 3.2 修改 `.tab-item` 的 border-radius 从 `var(--radius-md)` 改为 `6px`
+- [x] 3.3 修改 `.tab-item.active` 的 background 从 `rgba(128, 128, 128, 0.3)` 改为 `var(--segmented-active-bg)`
+- [x] 3.4 为 `.tab-item.active` 添加阴影效果 `box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)`
+- [x] 3.5 确认 `.tab-item.active .tab-text` 的 color 使用 `var(--text-primary)` 且 font-weight 为 `var(--font-bold)` (600)
+- [x] 3.6 确认 `.tab-item:not(.active) .tab-text` 的 color 使用 `var(--text-secondary)` 且 font-weight 为 `var(--font-medium)` (500)
+
+## 4. 交互效果优化
+
+- [x] 4.1 确认 `.tab-item` 的 transition 保持为 `all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
+- [x] 4.2 移除或调整 `.tab-item:not(.active):hover` 的背景色,使其微妙增加透明度 (如 `background: rgba(128, 128, 128, 0.1)`)
+
+## 5. 验证与测试
+
+- [x] 5.1 在 Chrome 浏览器的亮色主题下检查分段控制器视觉效果,对比 pencli 设计稿截图
+- [x] 5.2 在 Chrome 浏览器的暗色主题下检查分段控制器视觉效果,确保对比度充足
+- [x] 5.3 使用 Chrome DevTools 的对比度检查工具验证激活态和非激活态文字的对比度 >= 4.5:1
+- [x] 5.4 在 Safari 和 Firefox 浏览器中验证样式兼容性
+- [x] 5.5 在移动设备或移动模拟器中测试触摸交互和视觉效果
+- [x] 5.6 切换"周"、"月"、"年"三个标签,确认激活态切换动画流畅
+- [x] 5.7 在统计 v2 页面中实际使用,确认无布局错位或样式冲突
+
+## 6. 文档与清理
+
+- [x] 6.1 如有必要,更新 `Web/src/components/TimePeriodTabs.vue` 文件顶部的注释,说明样式已按 pencli 设计规范更新
+- [x] 6.2 检查是否有未使用的 CSS 类或变量,进行清理