Skip to content

Latest commit

 

History

36 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌸 PinkWorkbench · 少女风粉色工作台

一个纯前端、零依赖的少女风 PWA 工作台,把每天要用的小工具收进同一个粉色界面:每日计划、英语学习、运动打卡、记账、经期记录、小树洞。数据全部存在浏览器本地,不依赖任何后端。

在线体验:https://pink-workbench.pages.dev
仓库地址:https://github.com/vaxicy/PinkWorkbench


✨ 功能特性

模块 说明
📅 每日计划 待办清单 + 日程安排,支持分类(补品类 / 饮食 / 工作 / 学习 / 生活)
📚 英语学习 每日单词 + 每日长句,可分别或统一设置每天推送数量(1–5)
🏃 运动打卡 自定义运动项目、今日打卡、一周打卡统计
💰 记账 日常收支记录,支持按天查看
🌸 经期记录 月经周期日历与身体感受记录
🌳 小树洞 私密心情记录,支持文字 + 图片(自动压缩后本地保存)
🌙 深色模式 顶部标题栏一键切换日间奶油粉 / 夜间黑粉主题
📱 移动端适配 底部导航 + iPhone 安全区适配,手机上也能舒适使用
🐱 个人头像 点击头像可切换 emoji 或用相机/上传自定义头像

所有内容都保存在浏览器 localStorage不会上传到任何服务器


📖 使用教程

1. 打开即用

直接访问 https://pink-workbench.pages.dev 即可,无需注册登录。

2. 安装到手机 / 电脑(PWA)

iPhone / iPad(Safari)

⚠️ iOS 上只有 Safari 才能把网页添加到主屏幕,微信 / Chrome 内打开时请先点「在 Safari 中打开」。

  1. 打开 Safari,访问 https://pink-workbench.pages.dev
  2. 点底部工具栏中间的 分享按钮(⬆️ 方块图标)。
  3. 在弹出的菜单中向上滑,找到并点 「添加到主屏幕 / Add to Home Screen」
  4. 输入想显示在桌面上的名字(默认会同步你在应用里设置的应用名),然后点右上角 添加
  5. 回到桌面,就能看到粉色工作台图标;点击打开即可像原生 App 一样使用,没有浏览器地址栏,离线也能照常使用。

Android(Chrome / Edge)

  1. 用 Chrome 或 Edge 打开 https://pink-workbench.pages.dev
  2. 点右上角菜单(⋮)→ 「添加到主屏幕 / 安装应用」
  3. 按提示确认,桌面即生成图标。

电脑(Chrome / Edge)

地址栏右侧会出现「安装」图标(或菜单 → 投射/保存/安装),点击即可当作桌面应用使用。

💡 首次安装需要联网;安装完成后,应用内容会被 Service Worker 缓存到本地,之后没有网络也能打开和查看历史数据。

3. 切换主题

点击顶部标题栏右侧的 ☀️/🌙 按钮,可在「日间奶油粉」和「夜间黑粉」之间切换,刷新后仍保持你的选择。

4. 每日计划

  • 顶部切换到「每日计划」,在输入框添加待办或日程。
  • 用分类标签筛选不同类别的内容。
  • 勾选左侧圆圈标记完成,完成的条目会置灰划线。

5. 英语学习

  • 切换到「英语学习」,顶部两个标签分别查看 每日单词每日长句
  • 内容按日期固定生成,每天自动换一批。
  • 点标签行最右侧的 ⚙️ 设置数量:
    • 统一设置:一个数量同时控制单词和长句(默认)。
    • 单独设置:单词、长句分别设置不同数量。

6. 运动打卡

  • 添加你的运动项目(如「跳绳 1000 个」)。
  • 完成当天项目后打卡,下方「运动统计」会展示本周打卡情况。

7. 记账

  • 切换到「记账」,记录每天的收入 / 支出。
  • 可按天查看历史记录。

8. 经期记录

  • 在日历上标记周期起止,并记录当天的身体感受。
  • 用于跟踪周期规律与身体状态。

9. 小树洞

  • 写一句心情或日记,可附一张图片。
  • 图片会自动压缩到合适大小后保存在本地,点击可放大查看。
  • 这里是只属于你的私密空间。

10. 更换头像

  • 点击左上角圆形头像,弹出菜单:
    • 选择内置 emoji 头像;
    • 或点相机图标用摄像头拍照 / 从相册上传自定义头像。

🛠 技术栈

  • HTML + CSS + 原生 JavaScript,无框架、无构建步骤。
  • 通过 Service Worker 实现 PWA 离线缓存。
  • 数据持久化使用浏览器 localStorage
  • 部署在 Cloudflare Pages

🚀 本地运行 / 部署

本地预览

直接用浏览器打开 index.html 即可(部分 PWA 功能需通过本地服务器,如 npx serve)。

部署到 Cloudflare Pages

仓库根目录即站点根,执行:

wrangler pages deploy . --project-name pink-workbench --branch main

或修改 deploy.ps1 后运行:

powershell -ExecutionPolicy Bypass -File .\deploy.ps1

修改了被缓存的文件(如 index.html)后,记得在 sw.js 里把 CACHE_NAME 版本号 +1,否则线上用户看到的是旧版本。


🔒 隐私说明

本应用完全在本地运行,所有计划、账目、日记、图片都只存在你自己的浏览器中,不会发送到任何第三方。清除浏览器数据即等同于删除全部内容。


📝 说明

本项目为个人学习 / 自用工具,界面与交互参考了多个公开作品,仅供交流与个人使用。

About

少女风粉色工作台 PWA:每日计划、英语学习、运动打卡、记账、经期记录、小树洞

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages