ShaoHua
189 lines
6.5 KiB
Markdown
189 lines
6.5 KiB
Markdown
# 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. 克隆或下载项目
|
||
```bash
|
||
git clone <仓库地址>
|
||
cd TodoList
|
||
```
|
||
|
||
#### 2. 启动后端 API
|
||
```bash
|
||
cd src/TodoList.Api
|
||
dotnet restore
|
||
dotnet ef database update
|
||
dotnet run
|
||
```
|
||
API 将在 `http://localhost:5173` 启动
|
||
|
||
#### 3. 启动前端 Web
|
||
```bash
|
||
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](LICENSE) 文件了解详情
|
||
|
||
## 📞 联系方式
|
||
|
||
- 项目作者：ShaoHua
|
||
- 项目地址：https://git.we965.cn/Tools/TodoList
|
||
|
||
---
|
||
|
||
**TodoList** - 跨平台任务管理，让效率无处不在！
|