给孩子手搓的课表

好看、好玩、好排

没有框架负担、没有云服务器、没有登录注册 —— 一个本地就能跑的孩子课表工具，拖拽排课、双击改课、五套主题随心情切换。

拖拽排课5×8 网格五套主题三档语言纯本地存储兼容 iPhone SE

手搓全过程

从一个想法，到一套能被孩子真正用起来的工具

STEP 01 · 起点

做它的初衷

孩子的课表每周都在变，家长靠手抄、贴墙、念到喉咙哑。想要一个不用教、孩子自己就能拖来拖去排课的小工具 —— 于是决定自己写。

目标：孩子自己也能上手

STEP 02 · 搭架子

技术选型：轻、快、稳

选了 Vite + React 19 + TypeScript + Tailwind CSS 3，配 lucide 线性图标。不引花哨依赖，保持体积可控、启动飞快。

Vite 8 / React 19 / TS 6

STEP 03 · 重构取舍

从单文件到标准分层

第一版逻辑揉在一个文件里，拖拽、状态、渲染全挤在一起，改一处崩三处。推倒重来，拆成 UI 层 / 逻辑层 / 数据层 的标准结构，组件加 Ns 前缀，业务全部下沉。

STEP 04 · 抠细节

为了孩子的体验死磕

拖拽用 rAF 节流避免掉帧、点按删课做二次确认防误触、双击改课、色相条实时选色、悬停快捷编辑 —— 每个动作都让孩子少一步思考。

功能可以小，手感必须顺

STEP 05 · 收尾上线

规范扫描 + 三端实测

写了一个 check:spec 扫描脚本，自动检查字号、图标、emoji 是否合规；在 320 / 375 / 768px 三档视口下逐一实测，保证最低兼容 iPhone SE 一代。

交付前：build + lint + spec 全绿

每个亮点都是冲着「孩子愿意用、用起来开心」去的

拖拽排课，孩子秒会

按住课程拖到 5×8 网格，格子间随意挪动，拖到底部删除区松手即删。rAF 节流保证不掉帧，触屏也顺滑。

指针事件 + 命中检测

双击改课，20+ 图标

双击格子即可编辑课程，名字最多 6 字，内置 20+ 个 lucide 线性图标，实时预览，删除带二次确认防误删。

20+ 图标 / 色相选色

五套主题 × 明暗三档

糖果 / 海洋 / 森林 / 星空 / 落日，每套都含亮暗两版配色。默认档跟随系统明暗，切来切去不刺眼。

10 套完整色板

中 / 英 / 默认三档语言

默认档跟着浏览器语言走，切换中文 / English 全部文案实时变化，连主题名、课程名都本地化。

自研轻量 t() 查表

数据纯本地，离线可用

全部数据存 localStorage，不用云、不用账号、不怕丢。关闭页面再打开，课表还在原位。

零后端 / 零登录

小屏到宽屏全覆盖

移动优先，最低兼容 320px（iPhone SE 一代）无横向滚动；视口够宽时自动切为网格居左、面板居右的双栏布局。

320 / 375 / 768px 实测

技术细节在这里

不炫技，但每一行都有它的理由

技术栈

Vite 8 \ React 19 \ TypeScript \ Tailwind CSS 3 \ lucide-react \ oxlint

分层架构

• UI 层 components（Ns 前缀原子件）只渲染、不碰业务状态

• 逻辑层 hooks + services 承载全部状态与副作用

• 数据层 localStorage 仓储统一封装，键名兼容旧用户数据

• i18n 自研查表函数，预留插值占位，不引入额外依赖

规范自检（自动扫描）

• 图标统一 lucide 线性、描边分级，size 传参均为偶数

• 零 emoji，纯图形语言，跨端渲染一致

• 脚本一键扫描，build + lint + spec 三绿方可发布

5×8课表网格 5套主题色板 20+课程图标

欢迎来体验

https://kids-schedule.v.yinkaka.com/