Skip to content

📊 今年进度

以进度条形式展示当前年份的进度,直观感受时光流逝

今年进度组件以两种维度展示年度时间流逝:左侧文字数据 + 右侧点阵图可视化

📋 展示内容

展示项说明可配置
已过天数当前日期是本年第几天 / 全年总天数(如 108 / 365显示 / 隐藏
百分比本年度已过去的精确百分比(基于毫秒级时间戳计算)显示 / 隐藏,小数位数可调
当前日期自定义格式显示今天的日期,跟随系统语言显示 / 隐藏,格式可调
点阵图每个方块代表一天,已过的天数高亮显示颜色 / 大小 / 间距 / 圆角可调

🖼️ 效果示意

+-------------------------------------------------+    
|                                                 |    
|  今年进度                                        |   
|                                                 |    
|  +---------------+ +-------------------------+  |    
|  | 108 / 365 天  | | ###...................|  |      
|  | 29.59%        | | ......................|  |      
|  | 2026/04/18    | | # = 已过   . = 剩余   |  |      
|  +---------------+ +-------------------------+  |    
|                                                 |    
+-------------------------------------------------+

点阵图细节:

  • 每个方块(#)代表一天,已过的日期高亮显示
  • 今日方块带有边框标识,鼠标悬停可查看具体日期
  • 点阵按行排列,每行固定列数,自动适配组件宽度

⚙️ 设置项

设置项类型说明
显示百分比开关控制是否展示已过百分比
百分比小数位数数字(0-4)如 0 显示 30%,2 显示 29.59%
显示日期开关控制是否展示当前日期文字
日期格式选择跟随系统语言的日期展示格式
实时刷新开关开启后精确到秒,关闭后按日更新
点阵颜色颜色选择器高亮方块的颜色,支持浅色/深色独立配置
点阵大小滑块单个方块的尺寸
点阵间距滑块方块之间的间距
点阵圆角滑块方块的圆角大小

🎨 自定义

  • 可开关百分比和日期显示
  • 自定义百分比的小数位数(如 0 / 1 / 2 位)
  • 自定义日期格式
  • 可开启实时刷新(精确到秒)或按日更新
  • 自定义点阵的颜色、大小、间距和圆角
  • 支持浅色/深色主题独立配置
  • 边框、阴影等全局样式可调整