我准备设计一个程序,用于项目管理。负责记录项目执行事件并可视化监视我的项目执行时间分布。
这个程序可以增,删,查,改项目,并记录某个项目的每一段开始,结束时间,存储在markdown文件构成的数据日志上。
每个项目存储为一个markdown .md
文件。项目具有“In Planing”,"In Process", “Done”等属性,并可以输入“#”形式的标签并支持后续编辑。具有若干条“执行”,每条执行包括了“开始日期-时间”,“结束日期-时间”,“用时(结束-开始时间)”以及对上述所有条目的“日统计”,“周统计”,“月统计”,“年统计”。
当打开程序时,程序自动读取文件目录下所有项目的markdown文件。
整体为视图页面,展示“当日”的统计数据,并可以切换为:“本周”“本月”“本年度”视图。当日的统计数据按照“总时间”降序排行榜地形式显示{项目名称}:{HH/MM/SS},其中{HH/MM/SS}表示当日总用时,为属于当日所有事件持续时间的总和,按照HH/MM/SS
的时间格式显示。
点击排行榜中的项目名称,开始计时,作为新的“执行”的“开始时间”记录到.md文件中,并在再次点击时
视图页面最下方为一个“+”号按钮,用于新建项目,输入项目名称并选择“In Planing”,"In Process", “Done”之一的属性后会在对应的属性文件夹下新建{项目名}.md
文件,当修改其属性时,就会从原来属性所在的文件夹移动到目标属性的文件夹。
给出需要用到的技术栈,markdown数据存储的文件树,程序项目的文件树和每个代码文件的功能职责,以及关于数据展示的细节解释。
Technical Stack
Frontend: React or Vue for building the UI components
Backend: Node.js + Express for the server and API
Database: Markdown files stored locally to persist project data
File Structure
├── server/
│ ├── api/
│ │ └── projects.js // CRUD APIs for projects
│ └── index.js // Express app
├── client/
│ ├── src/
│ │ ├── components/ // React/Vue components
│ │ ├── App.jsx
│ │ └── index.js
│ └── public/
│ └── index.html
├── data/
│ ├── inPlanning/ // Markdown files for 'In Planning' projects
│ ├── inProgress/ // Markdown files for 'In Progress' projects
│ └── done/ // Markdown files for completed projects
组件职责
App - 父组件,管理状态和子组件
ProjectList - 显示按今日总时间排序的项目排行榜
ProjectDetail - 显示项目的详细信息和历史记录
ProjectForm - 用于创建/编辑项目的表单
项目数据展示
主页的 ProjectList 根据今日总时间对项目排行
点击项目会显示 ProjectDetail 组件,展示历史记录和元数据
通过 ProjectForm 组件创建新项目
从 /data 文件夹中的 Markdown 文件加载数据
当改变项目状态时,调用 API 将项目文件移动
如果使用Python GNU或者基于Python的web Demo,应该如何设计?全部重新设计。
技术栈
前端:Vue + Element UI
后端:Python + 统一架构/大二下项目/Python/Flask
数据库:SQLite
project_manager
├─ app.py # Flask应用入口
├─ requirements.txt # 依赖包列表
├─ manage.py # Flask项目命令脚本
├─ config.py # 配置文件
├─ app/
| ├─ __init__.py
| ├─ views.py # 视图函数
| ├─ models.py # 数据模型
| ├─ util.py # 工具函数
├─ migrations/ # 数据库迁移脚本
├─ static/
| ├─ css/
| ├─ js/
| └─ images/
├─ templates/ # HTML模板
| ├─ index.html
| ├─ project.html
| └─ base.html
└─ vue-app/ # Vue前端
├─ ...
组件设计
App.vue - 根组件,包含导航栏和路由
ProjectList.vue - 项目列表排行组件
ProjectDetail.vue - 项目详情组件
ProjectEdit.vue - 项目编辑组件
接口设计
GET /api/projects - 获取所有项目
GET /api/projects/:id - 获取单个项目
POST /api/projects - 新建项目
PUT /api/projects/:id - 更新项目
DELETE /api/projects/:id - 删除项目
使用Python GNU或者基于Python的web Demo,后端最好也使用Python或者C++,数据库采用纯本地文件夹+MarkDown体系,基于这个技术栈,提供软件开发的工程部署和分工。
前端:Vue
后端:Python + C++ flask
数据库:本地文件夹 + Markdown文件 yaml
前后端代码在一个仓库,采用分支开发
master分支 - 生产环境代码
dev分支 - 开发环境代码
feature分支 - 开发新功能时创建的分支
目录结构
project_manager
├─ frontend/ # 前端代码
│ ├─ src
│ ├─ public
│ ├─ package.json
│ └─ ...
├─ backend/
│ ├─ app.py # Python后端主入口
│ ├─ cpp_modules/ # C++模块
│ ├─ api/
│ ├─ model/
│ ├─ utils.py
│ └─ ...
└─ docs/ # 项目文档
├─ README.md
└─ ...
1名前端工程师:负责Vue应用的开发
1名后端工程师:负责Python后端和C++模块开发 @时子延
1名全栈工程师:负责系统设计,接口设计,工程部署等
1名产品经理:负责需求管理,跟进调度等 @时子延
产品提出需求,分配任务
开发人员在feature分支上开发功能
开发完成后,发起pull request
review代码,通过测试后merge到dev分支
dev环境测试通过后,merge到master发布新版本
2023-08-08 17:55