卡哇伊手账风视觉规范 V2 · 逻辑：粘贴链接 → 自动识别 → 干净交还 ✧
叮咚！你的小本本整理好啦 📖
Kaiti SC → STKaiti → KaiTi → 楷体 → Yuanti SC（fallback）
· 全站统一楷体族，标题加 letter-spacing 与微旋转模拟手写错落；
· 禁用黑体/宋体等标准印刷字；数字可混入手写感英文（如 Patrick Hand 需子集化）；
· 小程序端用 wx.loadFontFace 动态加载楷体子集，包内只留 fallback。
交互细节：点击后按钮像"按橡皮章"下沉 → 变抹茶绿完成态，右上角弹出腮红粉"✓"小角标，同时 toast 手写体提示「全文已抄进剪贴板啦 ✍️」；连续点击防抖。排版：图标 20px 手绘线稿，文字 14px 楷体，胶带永远压在左上角微微歪 6°。
交互细节：点击后一枚圆形"藏"字印章以 scale(1.6→1) + 轻微旋转盖在书签上（模拟手账盖章），并伴随两颗 ✦ 星光迸出；未登录时先弹可爱确认条「先给手账起个名字吧 🧸」。排版：与"复制小本本"成对出现，胶带方向左右镜像，保持画面平衡。
交互细节：每 6s 信封轻轻左右摇摆 ±4°（CSS animation）吸引点击；点击唤起微信分享面板，回调成功后信封"飞走"→按钮变完成态并盖"飞"字章，随后弹出手账风海报浮层（含邀请得额度文案「你们都能多领 3 次免费额度 🎁」）。合规：非强制解锁，不阻断原结果查看，避免诱导分享拒审。
勾选框：18px 手绘圆角方贴纸，选中变抹茶绿 + 白色手写 ✓，同时图片外圈出现 2.5px 绿色蜡笔描边；
计数徽章：腮红粉"已选 N"实时跟手，0 张时按钮置灰为「全选还没选哦」，点击则一键全选待处理图；
进度：批量处理中每张图盖"洗澡中🛁"半透明章，完成逐张翻绿，全部完成播放一次星光扫过动画。
排版：三列拍立得小卡，每张随机 ±3° 旋转，像撒在桌上的照片。
交互细节：保存过程按钮内出现"胶片底片"从左到右填充（每存一张推一格，文案「存图中 2/3…」）；授权拒绝时弹手账风引导卡「相册害羞地锁上门啦，去设置里轻轻敲开它 🔑」并直达设置页；完成后星光 toast + 轻震动（wx.vibrateShort）。排版：与"批量去水印"并排同排，同为奶油黄系，形成图集页主操作区。
WXSS · 手账按钮通用样式
.kbtn { position: relative; display: inline-flex; align-items: center; gap: 12rpx; padding: 18rpx 34rpx; font-size: 28rpx; font-family: "Kaiti SC","STKaiti","KaiTi","楷体"; color: #5C4A38; background: #FDF9F1; /* 手绘不规则圆角，拒绝标准胶囊 */ border: 4rpx solid #5C4A38; border-radius: 32rpx 120rpx 36rpx 120rpx / 120rpx 36rpx 120rpx 32rpx; box-shadow: 5rpx 6rpx 0 rgba(92,74,56,.55); transition: transform .12s, box-shadow .12s; } .kbtn--press { transform: translate(4rpx,6rpx); box-shadow: none; } .kbtn--primary { background: #9DB8CC; color: #31485A; } .kbtn--sun { background: #EFC868; } .kbtn--done { background: #EDF3E9; border-color: #5F7A55; } .kbtn__tape { /* 和纸胶带 */ position: absolute; top: -16rpx; left: 20rpx; width: 68rpx; height: 26rpx; background: rgba(239,200,104,.6); transform: rotate(-6deg); }
JS · 按压反馈与完成态（五按钮共用）
// components/kawaii-btn/index.js Component({ properties: { label: String, icon: String, variant: { type: String, value: 'plain' }, // plain|primary|sun doneText: { type: String, value: '' } }, data: { pressed: false, done: false }, methods: { onTap() { if (this.data.done) return; this.setData({ pressed: true }); wx.vibrateShort({ type: 'light' }); setTimeout(() => this.setData({ pressed: false }), 120); this.triggerEvent('act', { finish: () => { this.setData({ done: true }); // 变完成态+盖章 setTimeout(() => this.setData({ done: false }), 2000); } }); } } });
| 模块 | 触发事件 | 核心实现要点 |
|---|---|---|
| 复制小本本 | wx.setClipboardData | 成功后 wx.showToast 手写文案；注意 iOS 剪贴板提示由系统接管，勿重复弹窗。 |
| 收进手账 | POST /api/journal/save | 落库 users.journal_items；印章动画用 CSS keyframes scale(1.6→1)+rotate(-12deg→-6deg)。 |
| 寄给好朋友 | button open-type="share" | onShareAppMessage 带 inviteCode；摆动动画 transform-origin 底部中心，尊重 prefers-reduced-motion。 |
| 批量去水印 | POST /api/task/batch | 选中集合存页面 state；提交后逐张轮询/订阅消息更新，"洗澡中"章盖在图卡上。 |
| 保存相册 | wx.saveImageToPhotosAlbum | 先 authorize scope.writePhotosAlbum；拒绝→ showModal 引导 openSetting；逐张保存更新胶片进度。 |
| 模块 | 默认文案 | 进行 / 完成反馈 | 异常兜底 |
|---|---|---|---|
| 复制小本本 | 复制小本本 | 已抄好啦 ✓ · toast「全文已抄进剪贴板啦 ✍️」 | 内容为空 →「小本本还没写满，先等等哦」 |
| 收进手账 | 收进手账 | 已收好 📖 · 盖"藏"字章 + 星光 | 未登录 →「先给手账起个名字吧 🧸」 |
| 寄给好朋友 | 寄给好朋友 | 寄出去啦 ✈️ · 海报浮层「多领 3 次额度 🎁」 | 取消分享 → 静默，不打扰 |
| 批量去水印 | 批量去水印 · 已选 N | 每张盖"洗澡中🛁"章 → 逐张翻绿 | 未选 → 置灰「全选还没选哦」点击=全选 |
| 保存相册 | 保存相册 | 存图中 2/3…（胶片填充）→「咔嚓！存好啦 📸」 | 拒授权 →「相册害羞锁门啦，去设置敲敲门 🔑」 |
全站底部统一 tabBar，三个入口：首页（能力选择）、我的手账（收藏/任务）、我的主页（账号与设置）。 选中态用雾蓝高亮 + 浅蓝底，未选深棕灰；图标为手绘线稿，与卡片控件同源。
// app.json { "tabBar": { "color": "#8A7360", "selectedColor": "#6F8FA8", "backgroundColor": "#FDF9F1", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/home.png", "selectedIconPath": "icons/home-on.png" }, { "pagePath": "pages/journal/journal","text": "我的手账", "iconPath": "icons/book.png", "selectedIconPath": "icons/book-on.png" }, { "pagePath": "pages/profile/profile","text": "我的主页", "iconPath": "icons/user.png", "selectedIconPath": "icons/user-on.png" } ] } }
注意：tabBar 页无法用 wx.navigateTo 跳转（用 wx.switchTab）；结果页/处理中等非 tab 页仍走 navigateTo。当前 4 页中「首页、我的手账、我的主页」为 tab 页，「处理中 / 结果页」为二级页，从首页进入后压栈。