xia.silei/DanDing1Todo_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9d78991c3aa52cae48edf0800d99e9a7e72c1beb
DanDing1Todo_Web/README.zh-CN.md
Mr.Xia 9d78991c3a
Some checks failed
CI / lint (push) Has been cancelled
Details
CI / build (push) Has been cancelled
Details
修改端口2333
2026-02-26 21:44:09 +08:00

10 KiB
Raw Blame History

<E2><9C>?STARK Todo List

Next.js React TypeScript Tailwind CSS License

基于 Next.js 构建的极简、现代、高度精致的待办事项应用

English | 简体中文

STARK Todo List 预览

🎯 功能特<E883BD><E789B9>?

  • 🎨 现代<E78EB0><E4BBA3>?UI/UX 设计

    • 精美的动<E7><94>?Logo，流畅过渡效<E6B8A1><E69588>? - 毛玻璃卡片与背景模糊特效
    • Framer Motion 驱动的丝滑动<E6BB91><E58AA8>? - 色彩编码的任务统计（蓝色、橙色、绿色）

  • 🌓 主题支持

    • 浅色模式，鲜艳渐<E5><8F>? - 深色模式，专业美<E4B89A><E7BE8E>? - 系统主题自动检<E58AA8><E6A380>? - 无缝主题切换

  • *📱 响应式设<E5BC8F><E8AEBE>?

    • 桌面端优化的顶部导航标签
    • 移动端友好的底部导航<E6><A0>? - 触摸优化的交互元<E4BA92><E58583>? - 所有屏幕尺寸的自适应布局

  • ⚙️ 个性化定制

    • 多语言支持（中文和英文<EF><BC>? - 可自定义 Logo 文字
    • 时区选择
    • 主题模式偏好设置

  • 📊 任务管理

    • 创建、完成和删除任务
    • 任务创建和完成时间戳
    • 软删除（逻辑删除，保留数据）
    • 按状态筛选任务（全部、进行中、已完成<EF><BC>?

  • 📊 交互式数据分析仪表盘

    • 每日动态趋势图（创<E5><BB>?vs 完成<E5AE8C><E68890>? - 任务完成时间轴（甘特图视觉效果）
    • 实时 KPI 指标统计（总数、完成数、成功率<E58A9F><E78E87>? - 灵活的时间范围选择<E98089><E68BA9>?天、一个月、所有时间）

  • 🔐 访问控制

    • 密码保护的任务操作（添加、编辑、删除）
    • 客户端认证状态持久化
    • 可通过环境变量配置密码

  • *💾 数据持久<E68C81><E4B985>?

    • 本地 JSON 存储（无需数据库）
    • 数据在应用重启后保留
    • 完全可追溯的任务历史

🚀 快速开<E9809F><E5BC80>?

环境要求

  • Node.js 18+ (本地开<E59CB0><E5BC80>?
  • Docker (可选，用于容器化部<E58C96><E983A8>?

方案一：本地开发（推荐<EF><BC>?

  1. 克隆仓库

    git clone https://github.com/yourusername/stark-todo-list.git
cd stark-todo-list

  2. 安装依赖

    npm install
# <20><>?   pnpm install

  3. 启动开发服务器

    npm run dev
# <20><>?   pnpm dev

  4. *打开浏览<E5><99>?

    http://localhost:2333

方案二：使用管理脚本

提供了便捷的 Shell 脚本用于轻松管理<E7AEA1><E79086>?

# 启动应用
./run.sh start

# 停止应用
./run.sh stop

# 重启并清理缓<E79086><E7BC93>?./run.sh restart

# 查看日志
./run.sh logs

# 检查状<E69FA5><E78AB6>?./run.sh status

方案三：Docker 部署

  1. 使用 Docker 启动脚本（推荐）

    ./docker-start.sh

    脚本会自动：

    • 构建并启<E5><8A>?Docker 容器
    • 自动显示后端日志
    • 使用 Docker 卷进行数据持久化

  2. 快速更新（重新构建并重启）

    ./docker-update.sh

    此脚本会<EF><BC>? - 停止当前容器

    • 拉取最新代码（如果<E6><98>?Git 仓库<E4BB93><E5BA93>? - 重新构建 Docker 镜像（无缓存<E7BC93><E5AD98>? - 启动新容<E696B0><E5AEB9>? - 自动显示日志

  3. 配置访问密码（可选）

    # 通过环境变量设置自定义密<E4B989><E5AF86>?   export AUTH_PASSWORD=your_custom_password

# 或创<E68896><E5889B>?.env 文件
echo "AUTH_PASSWORD=your_custom_password" > .env

    如未配置，默认密码为 stark123<E3><80>?

  4. 或手动使<E7><94>?Docker Compose

    # 使用 Docker Compose 启动
docker compose up -d --build

# 查看日志
docker compose logs -f

  5. 访问应用

    http://localhost:4000

  6. 管理命令

    # 停止容器
docker compose down

# 重启容器
docker compose restart

# 查看日志
docker compose logs -f

# 快速更新（重新构建所有内容）
./docker-update.sh

  7. 数据持久化与安全更新

    • 数据存储在名<E4><B8>?todos-data <20><>?Docker 卷中，持久化存储 todos.json <20><>?stats.json<E3><80>? - 重要提示：在更新容器时，请务必使<E7><94>?./docker-update.sh。不要手动运<E8><A1>?docker compose down -v，因<E4><B8>?-v 参数会永久删除您的所有数据卷<E68DAE><E58DB7>? - 备份数据<E695B0><E68DAE>? ```bash docker run --rm -v stark-todo-list_todos-data:/data -v $(pwd):/backup alpine tar czf /backup/todos-backup.tar.gz -C /data .
    • 恢复数据<EF><BC>? ```bash docker run --rm -v stark-todo-list_todos-data:/data -v $(pwd):/backup alpine tar xzf /backup/todos-backup.tar.gz -C /data

  8. *清理（会删除数据<EF><BC>?

    docker compose down -v

📂 项目结构

stark-todo-list/
├── src/
<0A><>?  ├── app/                    # Next.js App Router
<0A><>?  <20><>?  ├── api/               # API 路由
<0A><>?  <20><>?  <20><>?  └── todos/         # Todo CRUD 端点
<0A><>?  <20><>?  ├── analytics/         # 数据分析与图表页<E8A1A8><E9A1B5>?<3F><>?  <20><>?  ├── settings/          # 设置页面
<0A><>?  <20><>?  ├── page.tsx           # 主页<E4B8BB><E9A1B5>?<3F><>?  <20><>?  ├── layout.tsx         # 根布局
<0A><>?  <20><>?  └── globals.css        # 全局样式
<0A><>?  ├── components/            # React 组件
<0A><>?  <20><>?  ├── StarkLogo.tsx      # 动画 Logo
<0A><>?  <20><>?  └── AnalyticsDashboard.tsx # 数据可视化组<E58C96><E7BB84>?<3F><>?  ├── contexts/              # React 上下<E4B88A><E4B88B>?<3F><>?  <20><>?  └── SettingsContext.tsx
<0A><>?  ├── lib/                   # 工具函数
<0A><>?  <20><>?  ├── storage.ts         # JSON 文件操作
<0A><>?  <20><>?  ├── translations.ts    # 国际化翻<E58C96><E7BFBB>?<3F><>?  <20><>?  └── timezones.ts       # 时区数据
<0A><>?  └── ...
├── public/                    # 静态资<E68081><E8B584>?├── scripts/
<0A><>?  ├── generate-icons.js      # 图标生成脚本
<0A><>?  └── generate-mock-data.js  # 演示数据生成脚本
├── docker-compose.yml         # Docker Compose 配置
├── Dockerfile                 # Docker 镜像配置
├── run.sh                     # 管理脚本
├── docker-start.sh            # Docker 启动脚本
├── todos.json                 # 数据存储文件
└── package.json               # 项目依赖

🛠<EF><B8>?技术栈

  • 框架: Next.js 15 (App Router)
  • 语言: TypeScript 5
  • 样式: Tailwind CSS 3.4
  • 动画: Framer Motion
  • 图表: Recharts
  • 图标: Lucide React
  • **容器<E5AEB9><E599A8>?*: Docker & Docker Compose

📝 数据格式

任务存储<E5><9C>?todos.json 中，格式如下<E5A682><E4B88B>?

[
  {
    "id": "uuid",
    "text": "任务描述",
    "completed": false,
    "createdAt": 1705392000000,
    "completedAt": null,
    "deleted": false,
    "deletedAt": null,
    "groupId": "default",
    "priority": "P2"
  }
]

🔌 API 接口文档

应用提供 RESTful API 用于程序化访问。在浏览器中访问 /api-docs 可查看交互式 API 文档<E69687><E6A1A3>?

认证方式

受保护的端点需要在请求头中提供 API 密钥<E5AF86><E992A5>?

# 方式一：X-API-Key 请求<E8AFB7><E6B182>?-H "X-API-Key: your_password"

# 方式二：Authorization Bearer 请求<E8AFB7><E6B182>?-H "Authorization: Bearer your_password"

默认密码<E4><B8>?stark123。可通过 AUTH_PASSWORD 环境变量配置<E9858D><E7BDAE>?

接口列表

任务接口 (/api/todos)

方法 认证 描述
GET <E2><9D>? 获取所有活跃任<E5><8A>?
POST <E2><9C>? 创建新任<E5><8A>?
PUT <E2><9C>? 更新现有任务
DELETE <E2><9C>? 软删除任<E5><8A>?

GET /api/todos

curl https://your-domain/api/todos

POST /api/todos

curl -X POST https://your-domain/api/todos \
  -H "Content-Type: application/json" \
  -H "X-API-Key: stark123" \
  -d '{"text": "新任<E696B0><E4BBBB>?, "groupId": "default", "priority": "P1"}'

PUT /api/todos

curl -X PUT https://your-domain/api/todos \
  -H "Content-Type: application/json" \
  -H "X-API-Key: stark123" \
  -d '{"id": "uuid", "completed": true, "text": "更新后的文本"}'

DELETE /api/todos

curl -X DELETE "https://your-domain/api/todos?id=uuid" \
  -H "X-API-Key: stark123"

分组接口 (/api/groups)

方法 认证 描述
GET <E2><9D>? 获取所有分<E7><BB>?
POST <E2><9C>? 创建新分<E7><BB>?
DELETE <E2><9C>? 删除分组

GET /api/groups

curl https://your-domain/api/groups

POST /api/groups

curl -X POST https://your-domain/api/groups \
  -H "Content-Type: application/json" \
  -H "X-API-Key: stark123" \
  -d '{"name": "工作"}'

DELETE /api/groups

curl -X DELETE "https://your-domain/api/groups?id=uuid" \
  -H "X-API-Key: stark123"

统计接口 (/api/stats)

方法 认证 描述
GET <E2><9D>? 获取 PV/UV 统计
POST <E2><9D>? 更新访问统计

GET /api/stats

curl https://your-domain/api/stats

认证接口 (/api/auth)

方法 认证 描述
POST <E2><9D>? 验证密码

POST /api/auth

curl -X POST https://your-domain/api/auth \
  -H "Content-Type: application/json" \
  -d '{"password": "stark123"}'

🤝 贡献

欢迎贡献！请随时提交 Pull Request<73><74>?

  1. Fork 本仓<E69CAC><E4BB93>?2. 创建您的特性分<E680A7><E58886>?(git checkout -b feature/AmazingFeature)
  2. 提交您的更改 (git commit -m 'Add some AmazingFeature')
  3. 推送到分支 (git push origin feature/AmazingFeature)
  4. 打开一<E4><B8>?Pull Request

更多详情请查<E7><9C>?贡献指南<E3><80>?

📄 许可<E8AEB8><E58FAF>?

本项目采<E7><94>?MIT 许可<E8AEB8><E58FAF>?- 详见 LICENSE 文件<E69687><E4BBB6>?

🙏 致谢

  • 基于 Next.js 构建
  • UI 设计灵感来自现代极简主义
  • <E7><94>?STARK <20><>?❤️ 打<><E68993>?

<E2><AC>?返回顶部

<E7><94>?STARK <20><>?❤️ 制作 | 基于 Next.js