TodoList 跨平台待办事项管理应用

一个基于 MAUI + WebView 架构开发的跨平台待办事项管理应用，支持 Windows、macOS、Android、iOS 和 Linux（预览）平台。通过 HTTP API 实现前后端通信，提供轻量、高效的任务管理体验。

🚀 功能特点

核心功能

• 跨平台支持：基于 MAUI + WebView 架构，支持 Windows、macOS、Android、iOS 和 Linux（预览）
• 任务管理：支持创建、编辑、删除、完成状态切换
• 优先级管理：支持高、中、低三种优先级设置，通过颜色直观区分
• 任务状态跟踪：清晰标记任务完成状态，支持过滤查看（全部/进行中/已完成）
• 本地数据持久化：使用 SQLite 数据库保存数据，支持完全离线使用
• HTTP API 通信：前后端通过 RESTful API 进行数据交互

技术特性

• 现代化架构：MAUI + WebView + C# 后端 + Vue.js 前端
• 分层设计：Core（核心层）+ API（后端）+ Web（前端）
• 响应式界面：Vue.js 3 实现的现代化用户界面
• 统一 API 设计：RESTful API 风格，支持跨域请求

🛠️ 技术栈

后端技术栈

• 开发语言：C# 10
• 框架：.NET 10
• UI 框架：MAUI (Multi-platform App UI)
• Web 服务器：Kestrel (ASP.NET Core 内置)
• API 框架：ASP.NET Core Web API
• 数据访问：Entity Framework Core
• 数据库：SQLite (本地存储)
• 依赖注入：Microsoft.Extensions.DependencyInjection

前端技术栈

• 开发语言：TypeScript
• 框架：Vue.js 3
• 构建工具：Vite
• HTTP 客户端：Axios
• 状态管理：Pinia
• UI 组件库：Element Plus / Vant (移动端)
• CSS 预处理器：SCSS

📦 安装与使用

环境要求

• 后端：
  • .NET 10 SDK
  • Visual Studio 2022 或更高版本
• 前端：
  • Node.js 18+
  • npm 或 yarn

快速开始

1. 克隆或下载项目

git clone <仓库地址>
cd TodoList

2. 启动后端 API

cd src/TodoList.Api
dotnet restore
dotnet ef database update
dotnet run

API 将在 http://localhost:5173 启动

3. 启动前端 Web

cd src/TodoList.Web
npm install
npm run dev

前端将在 http://localhost:5173 启动

使用说明

• 添加任务：在前端界面中输入任务内容，设置优先级，点击添加按钮
• 管理任务：查看任务列表，支持按状态过滤（全部/进行中/已完成）
• 完成任务：点击任务前的复选框切换完成状态
• 删除任务：点击删除按钮移除任务

🔧 开发指南

项目结构

TodoList/
├── docs/                          # 文档目录
│   ├── 产品需求文档.md
│   ├── 产品需求文档-1.1.0.md
│   ├── 技术设计文档.md
│   └── 代码规范文档.md
├── src/                           # 源代码目录
│   ├── TodoList.Core/              # 核心业务逻辑层
│   │   ├── Entities/               # 实体类
│   │   │   ├── Task.cs
│   │   │   └── TaskPriority.cs
│   │   └── Interfaces/             # 接口定义
│   │       ├── ITaskRepository.cs
│   │       └── ITaskService.cs
│   ├── TodoList.Api/               # 后端 API 项目
│   │   ├── Controllers/            # API 控制器
│   │   │   └── TasksController.cs
│   │   ├── Services/               # 业务服务
│   │   │   └── TaskService.cs
│   │   ├── Repositories/          # 数据访问层
│   │   │   └── TaskRepository.cs
│   │   ├── Data/                 # 数据库上下文
│   │   │   ├── TodoDbContext.cs
│   │   │   └── Migrations/        # 数据库迁移
│   │   ├── Models/                # 数据模型
│   │   │   └── TaskModels.cs
│   │   ├── Program.cs             # API 入口
│   │   └── TodoList.Api.csproj   # API 项目文件
│   ├── TodoList.Web/               # 前端 Web 项目 (Vue.js)
│   │   ├── public/                # 静态资源
│   │   ├── src/
│   │   │   ├── api/            # API 调用
│   │   │   │   ├── client.ts
│   │   │   │   └── tasks.ts
│   │   │   ├── components/     # Vue 组件
│   │   │   │   ├── TaskList.vue
│   │   │   │   └── TaskItem.vue
│   │   │   ├── types/          # TypeScript 类型定义
│   │   │   │   └── task.ts
│   │   │   ├── App.vue         # 根组件
│   │   │   └── main.ts         # 应用入口
│   │   ├── package.json           # 依赖配置
│   │   ├── vite.config.ts         # Vite 配置
│   │   └── tsconfig.json          # TypeScript 配置
│   └── TodoList.slnx           # 解决方案文件
├── .gitignore                     # Git 忽略文件
└── README.md                      # 项目说明文档

API 端点

• GET /api/tasks - 获取任务列表
• GET /api/tasks/{id} - 获取单个任务
• POST /api/tasks - 创建任务
• PUT /api/tasks/{id} - 更新任务
• PATCH /api/tasks/{id}/complete - 切换完成状态
• DELETE /api/tasks/{id} - 删除任务

🎯 核心模块说明

TodoList.Core

核心业务逻辑层，定义领域模型和业务规则，提供核心业务接口。

TodoList.Api

后端 API 项目，提供 RESTful API 接口，处理业务逻辑，管理数据访问和持久化。

TodoList.Web

前端 Web 项目，基于 Vue.js 3 + TypeScript，提供用户界面，通过 HTTP API 与后端通信。

🔄 版本更新

版本策略

• 采用语义化版本号：MAJOR.MINOR.PATCH
• v1.0.0：初始 WPF 版本
• v1.1.0：MAUI + WebView 跨平台版本

v1.1.0 更新内容

• 重构为 MAUI + WebView 架构
• 实现跨平台支持
• 使用 HTTP API 进行前后端通信
• 采用 Vue.js 3 作为前端框架
• 使用 SQLite 作为本地数据库

🤝 贡献指南

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

📞 联系方式

• 项目作者：ShaoHua
• 项目地址：https://git.we965.cn/Tools/TodoList

---

TodoList - 跨平台任务管理，让效率无处不在！