我的工作台 · 个人全场景管理仪表盘产品系统Vibe Coding

立项原因：个人同时处理在校学业、嵌入式方向实习求职、保险销售业务与个人投资理财四类事务，信息分散在备忘录、表格、聊天记录与多个 App 中，导致关键节点容易遗漏，例如客户跟进、基金定投扣款、面试安排等。市面上的效率工具要么功能单一，要么数据存放在第三方云端无法自主掌控，且大多为团队协作场景设计，个人使用过重。因此立项做一款数据自主可控、完全围绕个人业务流程定制的轻量工作台，重点解决"信息分散、节点易漏、数据不归自己"三个问题。

行业场景与业务背景：属于个人数据管理与效率工具赛道，面向个人及小微从业者。典型使用者是需要同时管理多条业务线的人群，如独立销售、自由职业者、在校同时兼职的复合身份用户。这类用户数据敏感度高，包含客户名单、收入流水、保单信息等，但付费能力有限，更倾向"一次性搭建、零持续成本、数据自己掌握"的方案，而不是按月订阅的 SaaS 工具。产品以浏览器为唯一载体，无需安装、跨设备可用，契合该人群随时打开、随手记录的使用习惯。

项目包含八大功能模块，覆盖"任务—时间—资金—知识—信息"五类个人数据。

1. 总览：聚合展示当日待办、资金概况、学习进度与关键提醒，一屏掌握全局。
2. 工作待办：支持任务增删改、分类标签与提醒时间设置。可为每条待办自由设定提醒时刻，到点通过页面横幅与浏览器系统通知双重提示。
3. 资金记录：收入支出流水登记，支持按日期、类型、分类多维筛选，分类可多选并一键重置为全部；筛选后自动汇总金额并置顶展示。首页仅显示最近五条记录，点击卡片任意位置可展开全量明细。
4. 时间管理：番茄钟计时与专注时长统计。
5. 学习计划：学习目标与进度跟踪，支持计划项增删改。
6. 资讯模块：抓取并展示行业资讯，形成个人信息流。
7. 账号系统：支持注册、登录、登出、登录态自动续期，以及通过"账号+手机号"直接重置密码，无需验证码。
8. 个人设置：绑定手机号、明暗主题切换、数据同步状态查看。

全线采用响应式布局，桌面端与手机端均可流畅使用；数据采用本地缓存加云端同步的双重保障，更换设备后自动拉取最新数据。

我负责产品的全流程落地：需求梳理、信息架构设计、UI 视觉规范制定、前端编码实现、云端数据层搭建、线上部署与测试验收，累计经历 v3.9 至 v4.6 六个版本的迭代。

技术栈与架构：前端采用原生 HTML5 + CSS3 + JavaScript（ES6+），单文件架构，以设计令牌（CSS 变量）统一管理圆角、字号与配色规范；数据层基于 Supabase（PostgreSQL）实现账号认证与云端同步，本地以 localStorage 做缓存与离线兜底。开发过程由 AI 编码工具辅助完成，属于 Vibe Coding 实践项目。

实现亮点与难点：
1. 零后端服务器实现密码重置。在不暴露管理员密钥的前提下，通过 PostgreSQL 自定义函数配合 pgcrypto 加密扩展完成哈希改密，并用行级安全策略锁定数据访问边界。
2. 登录态健壮性。自行解析 JWT 过期时间，实现令牌自动续期、并发刷新去重、请求超时中断与失败降级，解决"显示已登录实际掉线""登录按钮卡死"等典型问题。
3. 移动端提醒方案。在纯静态页面无法后台驻留的限制下，设计页面内横幅加系统通知的双层兜底，保证提醒不丢失。
4. 性能体验。首屏坚持先渲染本地缓存、后后台同步，任何网络等待都不阻塞界面呈现。
5. 质量保障。搭建基于 Chrome DevTools Protocol 的无头浏览器自动化校验流程，逐项验证交互可点性与元素可见性，而不是只检查代码是否改动。