上半年我给自己做了一款桌面万年历起因挺简单我桌面上常年开着一个日历小窗但市面上的桌面日历工具要么界面锁死没法改配色和布局要么功能堆得太满一个窗口里塞满广告、天气、倒计时。我就想着干脆自己写一个“可调整界面输出”的桌面万年历一套日历数据界面布局随便调主题颜色随便换模块能开能关还能把当前视图导出成图片、壁纸或打印纸。这篇文章就把这个项目的完整设计思路、技术选型和实操代码拆开讲清楚适合正在做桌面工具、前端布局、自定义 UI 组件的朋友参考。先说清楚“可调整界面输出”到底是什么意思。大多数人理解的万年历就是一个固定表格但在这个项目里我把“显示层”和“数据层”彻底解耦了。日历数据算好之后怎么展示完全由用户控制今天可以显示成紧凑的极简表格明天可以切成带农历、黄历、月相、节假日的完整面板窗口可以缩放成长条侧边栏也可以最大化成全屏视图配色、字体、模块顺序全部可配。换句话说这个万年历输出的不是一张写死的画布而是一个可以被用户自由调整、重新排布的界面系统。这个项目做完之后我最大的感受是看似只是一个日历真正花时间的不是农历算法而是如何把界面灵活性做好。下面我按项目推进的先后顺序把每个环节的思考、取舍和踩坑都写出来。1. 项目定位与需求拆解1.1 核心场景一个人日常桌面需要什么日历做之前我列了一下自己每天打开日历到底要看什么今天是几号、周几今天的农历日期和节气这个月有什么法定节假日顺带能不能看到本月月相如果坐办公室最好还能显示今天是不是周末。真正高频的就这些剩下的都是低频需求所以产品定位应该是一块“信息密度可调”的面板。使用场景也能拆成三档。第一个场景是挂机状态窗口常驻屏幕角落只需要时间、日期、周几、日历网格字号一定要大扫一眼就行第二个场景是查询状态要查节日、农历、节气这时候把模块展开信息变密第三个场景是输出状态比如把当前日历截图发给同事或者打印出来贴在工位上。这三个场景对界面尺寸、信息密度、输出格式的要求完全不同所以“可调整”不是锦上添花而是核心功能。1.2 需求清单与功能边界我把功能边界画得很清楚不做多用户系统不做云同步不做消息推送。做的是单机、本地、轻量的桌面工具核心需求只有四块日历网格支持年、月、周三种视图切换历法信息公历、农历、节气、法定节假日、月相界面调整布局模式、主题色、字体字号、模块显隐、窗口尺寸记忆输出能力截图导出、整页打印、壁纸生成、窗口置顶。“可调整界面输出”落到具体功能上就是这四块的任意组合。用户选择一个布局模板调整主题和模块开关然后一键输出成图片或打印。数据永远只有一份但展示结果可以千变万化。1.3 为什么不做成网页而要做成桌面程序最开始我确实先用纯 HTML 做了一版原型浏览器里打开效果不错但一放到桌面就不对劲窗口控制不灵活置顶麻烦截图要手动截壁纸生成还要再走一步。所以最终改成桌面应用外壳。这个选择让“桌面万年历”真正像个桌面应用而不是一个浏览器标签页。后面我会详细讲技术选型核心逻辑就是用桌面的壳装网页的心。2. 技术选型与总体架构2.1 方案对比三种技术路线怎么选做桌面日历技术路线基本有三条。第一条是原生桌面开发比如 Windows 上用 C# / WPFmacOS 上用 SwiftUI第二条是 Python 那一套用 Tkinter 或 PySide6 画界面第三条是前端技术栈套桌面壳典型的是 Electron、Tauri。三条路线我都简单评估过。原生的性能和系统贴合度最好但要同时适配 Windows 和 macOS 就得写两套代码我的需求是快速迭代放弃Python 的开发效率高日历库也丰富但做精细的界面动画和主题定制需要写不少 QSS排版灵活性一般作为备选最后选的方案是前端页面负责界面渲染和交互桌面壳负责窗口管理也就是 Electron 方案。这样做的好处非常明显CSS 天生就是做响应式布局和主题换装的打印和截图也有浏览器能力可以直接调简直是为“可调整界面输出”量身定做的。如果你觉得 Electron 包体太大也可以选 TauriRust 后端加 WebView 渲染包体能小很多但环境配置比 Electron 曲折。我的原则是先把功能跑通再考虑优化体积。2.2 整体架构数据层、控制层、展示层分离这个项目的架构我分成三层。数据层负责日历数据计算输入是年月日输出是结构化的日历数据对象包括公历、农历、节日、节气、月相等字段这一层完全不关心界面控制层负责接收用户操作比如切换视图、打开设置面板、导出截图展示层负责所有界面渲染根据一个配置对象生成界面。三层的核心是配置对象它保存着用户所有的界面偏好结构大致是这样{ layoutMode: currentMonth, theme: dracula, fontScale: 1.2, showLunar: true, showSolarTerms: true, showHolidays: true, showMoonPhase: false, customColors: { primary: #ff6347, background: #1e1e2e } }展示层读取这个配置就能渲染出对应界面改配置就相当于调整输出界面。这个设计让后续扩展非常轻松加一款新主题就是加一个配置文件加一个模块就是往配置里加一个布尔字段。2.3 核心依赖与开发环境开发环境就是 Node.js 加上 Electron。日历计算部分我直接用了开源的 lunar-javascript 库这个库处理农历、节气、月相、干支、生肖都很成熟不用自己重写历法逻辑。截图导出用 Electron 内置的 webContents.capturePage打印直接用 window.print()。全套依赖非常少把精力集中在界面设计上。安装依赖的命令很简单npm init -y npm install electron lunar-javascript开发时用npx electron .启动打包用 electron-builder。整体工程结构比较清晰desktop-calendar/ ├── main.js ├── package.json ├── preload.js └── renderer/ ├── index.html ├── style.css ├── calendar.js └── settings.jsmain.js 是桌面主进程负责创建窗口和处理导出renderer 目录是页面渲染部分也就是整个日历界面的核心。3. 界面布局与可调整输出设计3.1 模块化布局把日历拆成可插拔的组件“可调整界面输出”最核心的设计是把整个界面拆成独立模块。我的做法是把页面划分成三个区域每个区域内部又是一组独立组件。顶部区域放头部信息包括当前年月标题、月份切换按钮、周视图/月视图切换按钮。中间是日历网格主体默认一个月六行七列每一格是一个日期单元日期单元内可以显示农历、节气、节假日标记。底部是状态栏放当天日期、周数、本月天数等辅助信息。所有区域都不是写死的而是由配置文件决定渲染哪些模块。具体到代码里每个模块就是一个渲染函数比如渲染头部标题、渲染日期格、渲染底部状态入口函数根据配置决定是否执行。function renderCalendar(config, calendarData) { const container document.getElementById(app); container.innerHTML ; if (config.showHeader) container.appendChild(renderHeader(calendarData)); if (config.showGrid) container.appendChild(renderGrid(calendarData, config)); if (config.showStatusBar) container.appendChild(renderStatusBar(calendarData)); }这样做的收益很明显用户关掉农历日期格就不会渲染农历字段用户切换成极简模式底部状态栏直接整个消失。界面输出随配置变化而且组件之间没有硬依赖不会因为某个模块隐藏导致报错。3.2 三种布局模式极简、标准、完整我预设了三套布局模式分别对应开头说的三个使用场景。极简模式只保留日期数字和周几标题适合常驻挂机标准模式在日期格里增加农历和节气小字适合日常查询完整模式再多显示月相、节假日名称、周末底色适合做桌面壁纸或打印。实现这三个模式本质上就是预设了三套不同的配置组合。切换布局模式时只需要替换配置对象并重新渲染const layoutModes { minimal: { showHeader: true, showGrid: true, showStatusBar: false, showLunar: false, showMoonPhase: false }, standard: { showHeader: true, showGrid: true, showStatusBar: true, showLunar: true, showMoonPhase: false }, full: { showHeader: true, showGrid: true, showStatusBar: true, showLunar: true, showMoonPhase: true } };这样做还有一个额外好处用户可以在预设模式的基础上继续微调比如在标准模式下再打开月相界面输出就变得更加个人化。3.3 主题与字号让同一套数据呈现不同气质主题系统是“可调整界面输出”的另一半。我把主题拆成颜色变量和字体变量颜色用 CSS 自定义属性管理字号用根元素的 font-size 控制。CSS 里定义一组变量所有组件都引用变量而不是写死颜色值:root { --bg-primary: #1e1e2e; --bg-cell: #282a36; --text-primary: #f8f8f2; --text-secondary: #bd93f9; --accent: #ff6347; --today-border: #ffb86c; }切换主题时只需要通过 JavaScript 重写这组变量。这个做法几乎零成本却能带来巨大的视觉效果差异。我目前内置了深色、浅色、护眼绿、复古纸四套主题实际就是四组颜色变量。字号调整采用一个缩放因子全局都基于根字号做相对单位。这样用户调整一个滑块整个界面的日期格、标题、状态栏都会等比例变大变小非常适合不同分辨率的屏幕也方便输出成壁纸时保持整体比例。3.4 输出方式窗口、壁纸、打印、截图这个项目的亮点是“输出”。我支持四种输出方式分别对应按钮导出图片、生成壁纸、打印、还有窗口置顶。导出图片最直接用 Electron 主进程的捕获页面能力实现。点击按钮后渲染进程通知主进程截取当前窗口内容保存成 PNG// preload.js 暴露截图接口 const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(calendarAPI, { capture: () ipcRenderer.invoke(capture-window), print: () ipcRenderer.invoke(print-window) });// main.js 主进程处理截图 const { app, BrowserWindow, ipcMain } require(electron); ipcMain.handle(capture-window, async (event) { const win BrowserWindow.fromWebContents(event.sender); const image await win.webContents.capturePage(); const path calendar-${Date.now()}.png; require(fs).writeFileSync(path, image.toPNG()); return path; });壁纸生成也是导出图片区别只是图片分辨率会按照当前屏幕分辨率设置然后把窗口隐藏边框截出一张适合铺满桌面的图。打印则是直接调用浏览器的打印能力页面上已经写好了打印样式打印时只保留日历区域背景色也做了适配不会出现白底黑字糊成一团的情况。4. 核心功能与数据计算实现4.1 日历数据的组装逻辑数据层是整个项目的底座。我写了一个 calendarData.js职责只有一个输入年月输出这个月完整的日历数据对象。这个对象包含当月的每一天每一天又包含公历日期、农历日期、节气、节日、月相等信息。用 lunar-javascript 可以很快速地组装这些数据。它的核心用法是先创建一个 Lunar 对象然后通过它的方法读取各种历法字段const Lunar require(lunar-javascript).Lunar; function buildMonthData(year, month) { const days []; const firstDay new Date(year, month - 1, 1); const totalDays new Date(year, month, 0).getDate(); const startWeek firstDay.getDay(); // 0 是周日 for (let day 1; day totalDays; day) { const date new Date(year, month - 1, day); const lunar Lunar.fromDate(date); days.push({ date: ${year}-${month}-${day}, week: date.getDay(), lunarDay: lunar.getDayInChinese(), lunarMonth: lunar.getMonthInChinese(), solarTerm: lunar.getJieQi(), festival: lunar.getFestivals().join(、), isWeekend: date.getDay() 0 || date.getDay() 6, moonPhase: lunar.getMoonPhase() }); } return { year, month, startWeek, totalDays, days }; }这里getJieQi()返回的节气只有当天是节气时才有值getFestivals()返回的是农历节日列表比如春节、端午。公历节日可以另外用自己维护的节日表来补充。4.2 日历网格渲染与日期格排版拿到数据之后展示层要做的是把数据填进七列网格。我用了 CSS Grid 布局第一行是星期标题之后按顺序渲染日期格子前面空缺的格子用空 div 占位。function renderGrid(calendarData, config) { const grid document.createElement(div); grid.className calendar-grid; [日, 一, 二, 三, 四, 五, 六].forEach(day { const header document.createElement(div); header.className grid-header; header.textContent day; grid.appendChild(header); }); for (let i 0; i calendarData.startWeek; i) { grid.appendChild(document.createElement(div)); } calendarData.days.forEach(item { const cell document.createElement(div); cell.className day-cell (item.isWeekend ? weekend : ); const dateNum document.createElement(div); dateNum.className day-number; dateNum.textContent item.date.split(-)[2]; cell.appendChild(dateNum); if (config.showLunar) { const lunarText document.createElement(div); lunarText.className lunar-text; lunarText.textContent item.solarTerm || item.festival || item.lunarDay; cell.appendChild(lunarText); } if (config.showMoonPhase item.moonPhase ! ) { const moon document.createElement(div); moon.className moon-phase; moon.textContent item.moonPhase; cell.appendChild(moon); } grid.appendChild(cell); }); return grid; }日期格的排版有两个细节需要注意。第一个是农历文字的长度有的节日四个字有的节气两个字处理不好会换行错位我的做法是统一设置为单行居中超出部分用更小字号缩放第二个是今天的标记我在item.date等于当前日期时给日期数字加一个圆环边框这样不管在哪个主题下都能一眼认出今天。4.3 设置面板与配置持久化设置面板我做成一个右侧抽屉从窗口右侧滑出。面板里的控件和 UI 配置一一对应布局三选一、主题四选一、字号滑块、模块开关组。每次控件变化都会更新配置对象并触发布局重新渲染。配置保存用 localStorage每次启动时先读取配置没有配置就使用默认值。这样用户调好一次下次打开还是自己喜欢的样子。function loadConfig() { const saved localStorage.getItem(calendarConfig); return saved ? JSON.parse(saved) : defaultConfig; } function saveConfig(config) { localStorage.setItem(calendarConfig, JSON.stringify(config)); }对于这个项目来说 localStorage 够用如果想跨设备同步配置后面可以改成文件存储加同步盘但那是后话。4.4 窗口控制置顶、透明、无边框桌面工具有一个独特需求是置顶显示。我在主进程里控制窗口的置顶属性渲染进程通过快捷键切换。无边框窗口配合透明背景可以让日历做成圆角悬浮卡片比普通窗口好看很多。// main.js 创建窗口 const win new BrowserWindow({ width: 420, height: 560, resizable: true, frame: false, // 无边框 transparent: true, // 背景透明 alwaysOnTop: false, webPreferences: { preload: path.join(__dirname, preload.js), contextIsolation: true, nodeIntegration: false } });无边框窗口需要自己实现拖拽移动我在 CSS 头部区域加了-webkit-app-region: drag按钮区域加no-drag。透明背景配合深色主题非常耐看但要注意透明窗口截屏时如果系统合成有问题会出现黑边这个我在问题排查那一节细说。5. 常见问题与排查技巧实录5.1 农历日期显示错位和字符串拼接问题项目早期最容易出现的 bug 是农历显示错位。有的是因为日期格高度不固定农历文字把数字顶到上面有的是因为农历日期的字符串带“农历”前缀拼进标题里特别拥挤。前者的解法是给日期格设置固定高度农历文字控制在 16px 以内后者是单独拿getDayInChinese()和getMonthInChinese()拼接不要直接使用库里带前缀的格式化方法。另外农历月的信息如果用户不关心建议默认隐藏。因为像“二月初二”这种信息对大多数桌面场景没有用留着只会占空间反而影响调整布局的灵活性。5.2 Electron 打包后开关无响应开发环境跑得好好的打包之后点击开关崩掉多半和 preload 脚本有关。我用contextBridge暴露接口时函数如果引用了 Node 模块打包后路径会变务必打成 CommonJS并且在 main.js 里检查 preload 路径是否打包进了 asar。我实际排查时发现问题不是接口没暴露而是 asar 包内文件路径大小写不一致导致 preload 加载失败。解决起来不复杂打包前在打包配置里显式加上资源路径并保持文件名全小写能省很多麻烦。5.3 透明窗口截图黑边透明背景好看但用capturePage()截出来的图经常带黑边或者边缘锯齿严重。我在实际测试中遇到三种情况Windows 上透明窗口在截图时背景被填黑Linux 上部分桌面环境透明失效Retina 屏截图分辨率不匹配。我的处理方案比较务实截图前临时把窗口背景色设成当前主题的背景色截完再改回来。这样导出图片的底色是干净的纯色不会出现黑边。你说透明壁纸更好看是的但导出的图片完全可以带主题背景不影响使用。async function captureWithBackground(win, backgroundColor) { win.setBackgroundColor(backgroundColor); await new Promise(resolve setTimeout(resolve, 100)); const image await win.webContents.capturePage(); win.setBackgroundColor(#00000000); return image; }5.4 打印样式不按预期显示打印功能做好了之后第一次打印出来的样式惨不忍睹背景全白、字体过小、格子宽度错乱。原因是打印时没有专门写media print样式。我在 CSS 末尾补了一段media print { body { background: #ffffff !important; } .calendar-grid { width: 100%; } .day-cell { min-height: 60px; break-inside: avoid; } .settings-panel, .toolbar-actions { display: none !important; } }另外颜色变量里的深色背景在打印时会消耗大量墨水最好在打印样式里强制覆写成浅色。我试过保留深色背景打印打出来黑乎乎一片根本不适合贴在工位看。5.5 高 DPI 屏幕下字体模糊在 2K、4K 屏上Electron 默认可能不启用高 DPI 缩放导致字体发虚。解决方法是主进程里加一行app.commandLine.appendSwitch(high-dpi-support, 1)并且在渲染进程里设置devicePixelRatio适配。这个处理在 Windows 上尤其明显不加的话界面像是被强行拉伸的。5.6 设置面板布局错位的排查思路如果你改了配置后页面出现布局错位我的排查顺序是先看配置对象有没有正确更新再检查对应的模块渲染函数有没有正确读取配置最后看 CSS 的 class 是否切换生效。大部分错位问题不是 CSS 写错了而是配置和渲染不同步导致有的区域还是旧状态有的区域已经切换到新状态。我的经验是做一个统一的render()入口任何配置变化都走同一个渲染流程不要零散地更新局部 UI否则很难调试。6. 扩展方向从万年历到桌面控制台做完这版桌面万年历之后我其实更清楚它最有价值的地方不在于“日历”而在于“可调整界面输出”这套骨架。同样的架构把数据源从日历数据换成待办事项、股票行情、服务器监控指标再配上这套可调布局、主题、输出机制就是一个桌面小组件控制台。换数据层、留展示层、丰富输出方式是这套项目后续最自然的扩展路线。具体点说下一步我可以做三件事第一把配置导出成模板让用户分享给朋友对方导入就能复用同样的界面第二接入系统天气数据让日历底部多一个天气模块完全复用现有的模块开关与主题配色第三做一个远程配置中心局域网内调整配置桌面端自动同步。说到底桌面上需要的不是一个好看的日历而是一个自己完全说了算的信息展示面板。最后再分享一个我个人的体会做这类工具千万不要一上来就想着界面要多酷炫先把“数据怎么组织、配置怎么驱动渲染、输出怎么闭环”这三件事想清楚酷炫只是最后一层皮。这套项目里我第一次认真实践了“数据与界面分离、配置驱动输出”的思路后面再做任何桌面小工具我都沿用了这套架构省下的调试时间远超预期。你自己动手做一个桌面万年历时建议也用这种方式起步把界面灵活性放在第一位功能会慢慢长出来而不是一开始就堆满。