我用 HarmonyOS NEXT 做了一款排班倒班 App，把 3D Soft UI 写进了日历
一款叫《班妥了》的鸿蒙原生 + 微信小程序双端排班应用，聊聊我为什么做、怎么做、踩了哪些坑。
0. 前言
我是一名 AI 平台工程师。去年开始给自己写一个排班工具，原因是市面上实在找不到一个「小而美、本地优先、能看清自己一年到底有多拼」的 App。于是从 0 开始用 HarmonyOS NEXT 撸了一版，又顺手做了个微信小程序版给同事用。
先放个成品图。左边手机端个人版月历，右边平板端团队排班：
1. 为什么做
排班这个场景其实很割裂：
-
Excel：自由但丑，且多端没法同步
-
钉钉/企业微信排班：重 B 端，个人用起来被淹没在团队功能里
-
国外 App（Shiftly、Shyft 等）：云端 + 付费 + 国内访问偶尔抽风
-
极简个人向：好看，但没有月历 / 没有统计 / 没有团队视图
我想做一个「会陪着我值夜班」的工具：
-
打开就知道今天是什么班
-
看一眼月历知道这个月节奏
-
看一眼年度知道今年真的辛苦过
-
团队里能让我快速看谁连班了、谁该轮休
2. 技术栈
| 端 | 技术 |
| --- | --- |
| 鸿蒙原生 | ArkTS + HarmonyOS NEXT（Stage 模型） |
| 微信小程序 | 原生 WXML/WXSS + 微信云开发 |
| 团队数据同步 | HarmonyOS 端用分布式数据 + 云函数兜底 |
为什么不上 Flutter / RN？ 鸿蒙 NEXT 已经不兼容 AOSP 套件，纯血鸿蒙的体验和性能 ArkTS 是唯一正解。微信小程序则是因为团队里有同事没装鸿蒙原生 App，得让 Ta 们扫个码就能用。
3. 关键模块拆解
3.1 数据模型
班次是循环 + 临时双轨：
// 班次循环（持续到被打断）
interface ScheduleCycle {
id: string;
userId: string;
startDate: string; // 从哪天开始循环
pattern: ShiftType[]; // [白班, 晚班, 夜班, 休] 这种顺序
// ...
}
// 临时调整（覆盖某一天）
interface ScheduleOverride {
date: string; // 哪一天
shift: ShiftType; // 这一天的班次
note?: string;
cycleId: string; // 属于哪个循环
}
月历渲染时先取循环再覆盖临时，这样既不破坏循环，又留了"今天和白班兄弟换一下"的口子。
3.2 月历的 3D 软 UI 怎么实现
这里我踩了第一个坑——毛玻璃在 ArkTS 里的写法跟 iOS 完全不同。
-
❌ iOS 的
backdrop-filter: blur()不能直接拿过来 -
✅ HarmonyOS 的方案是用
Stack叠两层 + 前景色用Color.BlendMode.OVERLAY -
✅ 圆角和阴影用
borderRadius+shadow复合，3D 感来自阴影的颜色（不是纯黑，而是品牌色的低饱和版）
@Builder
function GlassCard() {
Stack() {
// 底层：背景模糊模拟
Column().width('100%').height('100%')
.backgroundColor('#F3E5F5')
.blur(20)
// 顶层：玻璃质感
Column() {
// 内容
}
.width('100%').height('100%')
.backgroundColor('rgba(255,255,255,0.6)')
.borderRadius(20)
.shadow({ radius: 24, color: '#E8F5E9', offsetY: 8 })
}
}
阴影颜色取自品牌色板（#E8F5E9 薄荷绿 / #F3E5F5 樱花粉 / #37474F 深石板），比纯黑阴影更柔和也更克制。
3.3 统计图表
没有用三方库，全部用 Canvas 自绘——鸿蒙的 Canvas 性能足够，个人版月统计这种轻量图表没必要引 ECharts。
// 月度班次分布
@Builder
function ShiftDistribution(shifts: ShiftCount[]) {
Canvas(this.context)
.onReady(() => {
// 画 5 条横条：早班 / 白班 / 晚班 / 夜班 / 休息
shifts.forEach((s, i) => {
const ratio = s.count / max;
// 进度条用 渐变 + 圆头
});
})
}
4. 团队版的取舍
团队版没做云端账号体系，而是：
-
主管在自己的鸿蒙 App 里排好班
-
一键"发布"生成一个团队码
-
成员扫这个码进入微信小程序，只读 + 申请调班
-
主管再在 App 里批量调整并发布
这个设计绕开了企业级账号 / 权限 / 审计的复杂度，对小团队（≤20 人）刚刚好。
5. 一些彩蛋
-
今日片刻：每天轮换一句鼓励 / 短句，从"不用预支整天的疲惫"到"公平比看起来平均更重要"，不鸡汤、有点暖（设计师朋友说这是灵魂 😄）
-
多主题：浅蓝 / 浅绿 / 樱花粉 / 深色模式
-
年度回顾：把这一年的工时、连班、夜班做成一张自己的日历热力图
6. 反思与不足
-
团队版还没做权限分级——所有成员都能申请调班，没有"只能看自己"模式
-
iOS 暂未支持——纯血鸿蒙的优先级更高，鸿蒙版体验最完整
-
没有云端账本——数据本地优先，换手机需要走备份恢复（这是设计选择，但确实劝退了一些人）
7. 体验一下
-
鸿蒙原生版：HarmonyOS 应用市场搜「班妥了」
-
微信小程序版：扫下面这个码
如果你也是倒班人，欢迎反馈你最在意的功能；如果你是开发者，欢迎来喷我的代码 ☕️。
