https://github.com/miponianyou/nte-flowboard
NTE Flowboard - 每日与每周事项追踪看板
https://github.com/miponianyou/nte-flowboard
cloudsync neverness-to-everness nevernesstoeverness nte todolist
Last synced: 4 days ago
JSON representation
NTE Flowboard - 每日与每周事项追踪看板
- Host: GitHub
- URL: https://github.com/miponianyou/nte-flowboard
- Owner: MiPoNianYou
- License: mit
- Created: 2026-05-31T21:42:32.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2026-06-10T10:32:47.000Z (5 days ago)
- Last Synced: 2026-06-10T11:25:38.299Z (5 days ago)
- Topics: cloudsync, neverness-to-everness, nevernesstoeverness, nte, todolist
- Language: TypeScript
- Homepage: https://miponianyou.github.io/NTE-Flowboard/
- Size: 5.19 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NTE Flowboard
**每日与每周事项追踪看板**
*多设备云端同步 · 拖拽排序 · 标签分类*
[**在线使用 →**](https://miponianyou.github.io/NTE-Flowboard/)
---
## 功能特性
| 核心功能 | 说明 |
|:--------:|:-----|
| 📋 **每日/每周清单** | 自动按服务器时区重置（含夏令时） |
| 🎯 **拖拽排序** | 流畅的拖拽体验 |
| 🏷️ **标签分类** | 10 种颜色标签，按序自动分配 |
| 🌙 **Halo 暗色主题** | 深色设计系统，三级表面层深度 |
| 📐 **布局切换** | 单列 / 双列（桌面端） |
| ☁️ **云端同步** | Supabase Realtime 跨设备实时同步 |
| 📜 **虚拟滚动** | 超过 50 项自动启用 |
| 📡 **离线提示** | 断网时显示状态 |
| ♿ **无障碍支持** | WAI-ARIA 标签、焦点陷阱、键盘导航 |
| 🧪 **单元测试** | 535 个测试用例覆盖核心逻辑 |
---
## 技术栈
---
## 快速开始
```bash
# 克隆项目
git clone https://github.com/MiPoNianYou/NTE-Flowboard.git
cd NTE-Flowboard
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
```
---
## 项目结构
```
src/
├── components/ # UI 组件
│ ├── base/ # 基础组件层（11 个）
│ │ ├── Button # 按钮（9 种变体）
│ │ ├── Card # 卡片容器
│ │ ├── Input # 输入框
│ │ ├── Badge # 徽章
│ │ ├── ToggleSwitch # 开关
│ │ ├── SettingRow # 设置行
│ │ ├── CollapsibleSection # 可折叠区块
│ │ ├── NavBar # 导航栏
│ │ ├── IconBox # 图标容器
│ │ ├── StatusMessage # 状态消息
│ │ └── ErrorMessage # 错误消息
│ ├── ChecklistItemRow/ # 清单项行（拖拽 + 编辑）
│ │ ├── index.tsx # 主组件
│ │ ├── EditForm.tsx # 编辑表单
│ │ ├── DesktopActions.tsx # 桌面端操作按钮
│ │ └── MobileActionBar.tsx# 移动端操作栏
│ ├── Header # 顶部栏（含设置面板）
│ ├── ChecklistPanel # 清单面板
│ ├── SettingsContent # 设置内容（侧边栏 + 内容区）
│ ├── CloudSyncSection # 云同步配置
│ ├── ProgressCard # 进度卡片
│ ├── ProgressRing # 环形进度条
│ ├── Counter # 数字动画组件
│ ├── TabSwitch # 标签切换
│ ├── TagPill # 标签胶囊
│ ├── TagInput # 标签输入
│ ├── ConfirmDialog # 确认对话框
│ ├── EmptyState # 空状态插画
│ └── HiddenSection # 隐藏事项区
├── hooks/ # 自定义 Hooks
│ ├── useChecklist # 清单数据管理
│ ├── useSupabaseSync # 云端同步
│ ├── useSettings # 行为设置
│ ├── useLocalStorageBoolean # 通用 localStorage 状态
│ ├── usePendingDelete # 删除确认状态
│ ├── useTabManagement # 标签页管理
│ ├── useLayoutManagement # 布局管理
│ ├── useItemAnimations # 入场 + 退出动画
│ ├── useNextResetLabel # 下次重置时间
│ ├── useSortedItems # 排序逻辑
│ └── useAutoMoveCompleted # 自动移动已完成项
├── utils/ # 工具函数
│ ├── storage.ts # 本地存储 + 数据验证
│ ├── supabase.ts # Supabase 客户端 + RPC
│ ├── constants.ts # 常量定义
│ ├── cn.ts # className 合并工具
│ ├── tagColors.ts # 标签颜色计算
│ ├── colors.ts # 颜色工具 + 渐变
│ └── styles.ts # 卡片样式常量
├── types.ts # 共享类型定义
├── index.css # Halo 设计系统 Token
└── App.tsx # 根组件（编排 8 个 Hook）
```
---
## 开发命令
| 命令 | 说明 |
|:-----|:-----|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 构建生产版本（含 lint + typecheck） |
| `npm run test` | 运行单元测试 |
| `npm run test:watch` | 监听模式运行测试 |
| `npm run typecheck` | TypeScript 类型检查 |
| `npm run lint` | ESLint 代码检查 |
| `npm run lint:fix` | 自动修复 lint 问题 |
| `npm run format` | Prettier 代码格式化 |
---
**License:** MIT