# 任务管理微信小程序 **Repository Path**: teampanel/wx-task-manager ## Basic Information - **Project Name**: 任务管理微信小程序 - **Description**: 任务管理微信小程序 - **Primary Language**: Unknown - **License**: GPL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2025-08-31 - **Last Updated**: 2025-09-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目任务管理微信小程序 这是一个基于微信小程序的项目任务管理系统，适用于团队协作管理项目和任务。该系统具有蓝色主题设计，界面简约大气，包含项目管理、任务管理、团队管理等功能模块。 ## 项目特点 - **用户认证机制**：提供登录页面，用户需要登录后才能访问系统功能 - **模块化设计**：项目分为多个功能模块，如项目管理、任务管理、团队管理、工作流设置等，结构清晰 - **响应式UI设计**：采用蓝色主题设计，界面简约大气，支持不同屏幕尺寸的设备 - **完善的项目管理**：支持项目创建、编辑、归档，以及项目成员管理、工作流设置等功能 - **灵活的任务管理**：支持任务创建、分配、状态跟踪、优先级设置、子任务管理等功能 - **实时协作功能**：集成项目群聊和任务群聊功能，便于团队成员沟通协作 - **高级数据统计分析**：提供丰富的数据统计和高级可视化图表，帮助管理者深入了解项目进展和团队效率 - **易于扩展**：各功能模块独立，便于根据业务需求进行扩展和修改 ## 目录结构 ``` miniprogram/ ├── app.js # 小程序全局逻辑 ├── app.json # 小程序全局配置 ├── app.wxss # 全局样式文件 ├── assets/ # 资源目录 │ ├── icons/ # 图标资源目录 │ └── images/ # 图片资源目录 ├── components/ # 自定义组件目录 │ ├── memberSelector/ # 成员选择器组件 │ ├── prioritySelector/ # 优先级选择器组件 │ ├── statusSelector/ # 状态选择器组件 │ └── taskItem/ # 任务项组件 ├── pages/ # 页面目录 │ ├── login/ # 登录页面 │ │ ├── login.js # 登录页面逻辑 │ │ ├── login.wxml # 登录页面结构 │ │ └── login.wxss # 登录页面样式 │ ├── index/ # 首页 │ │ ├── index.js # 首页逻辑 │ │ ├── index.wxml # 首页结构 │ │ └── index.wxss # 首页样式 │ ├── projects/ # 项目列表页面 │ │ ├── projects.js # 项目列表页面逻辑 │ │ ├── projects.wxml # 项目列表页面结构 │ │ └── projects.wxss # 项目列表页面样式 │ ├── projectDetail/ # 项目详情页面 │ │ ├── projectDetail.js # 项目详情页面逻辑 │ │ ├── projectDetail.wxml# 项目详情页面结构 │ │ └── projectDetail.wxss# 项目详情页面样式 │ ├── tasks/ # 任务列表页面 │ │ ├── tasks.js # 任务列表页面逻辑 │ │ ├── tasks.wxml # 任务列表页面结构 │ │ └── tasks.wxss # 任务列表页面样式 │ ├── taskDetail/ # 任务详情页面 │ │ ├── taskDetail.js # 任务详情页面逻辑 │ │ ├── taskDetail.wxml # 任务详情页面结构 │ │ └── taskDetail.wxss # 任务详情页面样式 │ ├── workflow/ # 工作流设置页面 │ │ ├── workflow.js # 工作流设置页面逻辑 │ │ ├── workflow.wxml # 工作流设置页面结构 │ │ └── workflow.wxss # 工作流设置页面样式 │ ├── team/ # 团队管理页面 │ │ ├── team.js # 团队管理页面逻辑 │ │ ├── team.wxml # 团队管理页面结构 │ │ └── team.wxss # 团队管理页面样式 │ ├── statistics/ # 数据统计页面 │ │ ├── statistics.js # 数据统计页面逻辑 │ │ ├── statistics.wxml # 数据统计页面结构 │ │ └── statistics.wxss # 数据统计页面样式 │ ├── profile/ # 个人中心页面 │ │ ├── profile.js # 个人中心页面逻辑 │ │ ├── profile.wxml # 个人中心页面结构 │ │ └── profile.wxss # 个人中心页面样式 ├── utils/ # 工具函数目录 │ └── api.js # API接口封装 ├── project.config.json # 项目配置文件 └── sitemap.json # 小程序页面路径列表 ``` ## 快速开始 ### 开发环境准备 1. 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 2. 克隆项目到本地： ```bash git clone https://gitee.com/teampanel/wx-task-manager.git ``` 3. 打开微信开发者工具，导入项目，选择项目目录后点击"确定"。 ### 运行项目 - 在微信开发者工具中点击"编译"按钮，即可在模拟器中查看小程序运行效果。 - 可通过"真机调试"功能在手机端查看实际运行情况。 ## 核心功能说明 ### 1. 用户认证 - **登录页面**：用户需要输入用户名和密码进行登录，支持记住登录信息功能 - **登录验证**：系统会验证用户凭据，验证通过后跳转到首页 - **会话管理**：使用本地存储管理用户登录状态 ### 2. 项目管理 - **创建项目**：在项目列表页面点击"+"按钮，填写项目名称和描述即可创建新项目 - **项目状态**：项目有两种状态： - 进行中：表示项目正在进行中 - 已归档：表示项目已完成并归档 - **项目详情**：点击项目可查看项目详情，包括项目成员、任务列表、工作流设置等 ### 3. 任务管理 - **创建任务**：在项目详情页面点击"添加任务"按钮创建新任务 - **任务状态**：任务支持自定义工作流状态（待处理、处理中、待测试、已完成） - **任务优先级**：任务支持设置优先级（低、中、高、紧急） - **任务详情**：点击任务可查看任务详情，包括任务描述、附件、日志等 ### 4. 团队管理 - **成员管理**：可在项目详情页面添加或移除项目成员 - **角色设置**：为团队成员设置不同角色（项目经理、前端开发、后端开发、UI设计等） ### 5. 工作流设置 - **自定义状态**：可为每个项目设置不同的工作流状态 - **状态管理**：支持添加、编辑、删除工作流状态 ### 6. 高级数据统计分析 - **时间范围筛选**：支持按日期范围筛选统计数据 - **数据概览卡片**：以卡片形式展示项目总数、任务总数、团队成员数、完成率等关键数据 - **关键指标分析**：展示平均项目周期、任务平均完成时间、高优先级任务完成率、团队效率指数等关键指标 - **项目状态分布**：以饼图形式展示项目状态分布情况，并配有图例说明 - **任务优先级分布**：以带圆角效果的进度条形式展示不同优先级任务的分布情况 - **任务完成趋势**：以渐变色柱状图形式展示一周内任务完成趋势，并配有网格线 - **团队效能分析**：展示团队成员效率雷达图和各成员任务完成情况，包括分配数、完成数和完成率 - **项目健康度分析**：以雷达图形式展示项目在进度、质量、资源、风险、沟通等维度的健康度 ## 技术实现细节 ### 1. 自定义组件 项目中使用了多个自定义组件来提高代码复用性： - **statusSelector**：状态选择器组件，用于选择项目或任务状态 - **prioritySelector**：优先级选择器组件，用于选择任务优先级 - **memberSelector**：成员选择器组件，用于选择项目成员 ### 2. 样式设计 - **主题色**：采用蓝色(#007AFF)作为主题色，体现专业和科技感 - **响应式布局**：使用rpx单位实现响应式布局，适配不同屏幕尺寸 - **组件化样式**：各页面和组件使用独立的WXSS文件，便于维护 - **高级视觉效果**：使用渐变色、圆角、阴影等设计元素提升界面质感 - **数据可视化**：使用Canvas API实现多种图表类型，包括饼图、柱状图、雷达图等 ### 3. 数据处理 - **本地模拟数据**：目前使用本地模拟数据进行展示，包含丰富的假数据以展示真实效果 - **数据结构设计**：合理设计数据结构，便于后续接入真实API - **图表绘制**：使用微信小程序Canvas API绘制统计图表 - **数据计算**：实现关键指标的计算逻辑，如完成率、效率指数等 - **用户认证**：实现登录验证和会话管理功能 ### 4. 页面路由 - **登录保护**：首页和其他页面添加了登录状态检查，未登录用户会自动跳转到登录页面 - **页面跳转**：使用wx.redirectTo和wx.switchTab实现页面间跳转 - **导航栏自定义**：登录页面使用自定义导航栏样式 ## 开发注意事项 ### 1. 页面跳转 项目中使用了多种页面跳转方式： - `wx.navigateTo`：保留当前页面，跳转到应用内某个页面 - `wx.redirectTo`：关闭当前页面，跳转到应用内某个页面 - `wx.switchTab`：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 - `wx.navigateBack`：关闭当前页面，返回上一页面 ### 2. 数据绑定 - 使用双向数据绑定实现表单输入 - 使用条件渲染控制页面元素显示 - 使用列表渲染展示数据列表 ### 3. 事件处理 - 合理使用事件委托减少事件绑定 - 注意事件传参的正确使用 - 统一事件命名规范 ### 4. Canvas绘图 - 使用`wx.createCanvasContext`创建绘图上下文 - 注意在页面渲染完成后再绘制图表 - 合理设置图表尺寸和位置 - 实现圆角矩形、渐变色等高级绘制效果 - 使用雷达图等复杂图表类型展示多维数据 ### 5. 用户认证 - 使用本地存储管理用户登录状态 - 实现登录表单验证 - 支持记住登录信息功能 ## 统计页面假数据说明 统计页面使用了丰富的假数据来展示真实的效果，包括： 1. **项目统计数据**： - 项目总数：24个 - 进行中项目：16个 - 已归档项目：8个 2. **任务统计数据**： - 任务总数：128个 - 已完成任务：92个 - 进行中任务：36个 3. **团队成员数据**： - 团队成员总数：18人 4. **关键指标数据**： - 平均项目周期：32天 - 任务平均完成时间：4.7天 - 高优先级任务完成率：82% - 团队效率指数：7.8分 5. **任务优先级分布**： - 紧急：18个（14%） - 高：36个（28%） - 中：52个（41%） - 低：22个（17%） 6. **任务完成趋势**： - 展示最近7天的任务完成情况，数据范围在9-18个之间 7. **团队成员任务完成情况**： - 包含6个团队成员的详细数据，展示分配任务数、完成任务数和完成率 8. **项目健康度**： - 进度：85分 - 质量：78分 - 资源：92分 - 风险：65分 - 沟通：88分 这些假数据使统计页面能够展示完整的功能和效果，为后续接入真实数据提供了良好的基础。 ## 页面效果截图 以下为小程序各页面的效果截图： ### 登录页面
登录页面
### 首页
首页
### 项目管理模块
项目列表 项目详情
### 任务管理模块
任务列表 任务详情
### 团队管理模块
团队管理 工作流设置
### 数据统计模块
数据统计
### 个人中心模块
个人中心
## 项目扩展建议 ### 1. 功能扩展 - 集成真实后端API，实现数据持久化 - 添加任务提醒功能 - 增加文件上传和下载功能 - 实现项目和任务的搜索功能 - 添加更丰富的数据统计和分析功能 - 增加数据导出功能（如导出为Excel或PDF） - 完善用户注册和密码找回功能 ### 2. 性能优化 - 图片资源压缩和懒加载 - 减少不必要的数据请求 - 优化页面渲染性能 - 合理使用本地缓存 - 图表绘制性能优化 ### 3. 用户体验优化 - 增加加载状态提示 - 优化错误处理和用户提示 - 添加手势操作支持 - 完善页面过渡动画 - 增加数据刷新功能 ## 贡献指南 欢迎贡献代码或提出建议。请遵循以下步骤： 1. Fork 项目 2. 创建新分支 (`git checkout -b feature/new-feature`) 3. 提交代码 (`git commit -m 'Add new feature'`) 4. 推送分支 (`git push origin feature/new-feature`) 5. 提交 Pull Request ## 联系方式 如需定制功能，请联系 QQ: 177478191 ## 许可证 本项目使用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。