64 lines
2.0 KiB
Markdown
64 lines
2.0 KiB
Markdown
## 自动部署Web系统实现计划
|
||
|
||
### 技术栈
|
||
- **后端**: Node.js + Express
|
||
- **前端**: Vue.js 3 + Vite + Tailwind CSS
|
||
- **认证**: JWT Token
|
||
- **设计风格**: 简约现代，无衬线字体，流畅动画
|
||
|
||
### 目录结构
|
||
```
|
||
auto-deploy-demo/
|
||
├── server/ # 后端代码
|
||
│ ├── index.js # 主入口
|
||
│ ├── routes/ # API路由
|
||
│ ├── middleware/ # JWT认证中间件
|
||
│ └── services/ # 业务逻辑
|
||
├── client/ # Vue.js前端
|
||
│ ├── src/
|
||
│ │ ├── views/ # 页面组件
|
||
│ │ ├── components/ # 通用组件
|
||
│ │ ├── api/ # API封装
|
||
│ │ ├── stores/ # Pinia状态管理
|
||
│ │ └── router/ # 路由配置
|
||
│ └── tailwind.config.js
|
||
├── projects/ # 部署项目存储
|
||
├── data/ # 数据存储
|
||
└── package.json
|
||
```
|
||
|
||
### 设计规范
|
||
- **配色**: 白色/浅灰背景 + 蓝色主色调 + 绿色成功状态
|
||
- **字体**: Inter / SF Pro (现代无衬线)
|
||
- **动画**: 平滑过渡 (transition-all duration-200)
|
||
- **布局**: 简洁卡片式，充足留白
|
||
|
||
### 实现步骤
|
||
|
||
**第一阶段: 后端核心 (步骤1-6)**
|
||
1. 初始化项目，创建package.json
|
||
2. Express服务器主入口
|
||
3. JWT认证中间件
|
||
4. 用户认证API
|
||
5. 项目管理API (CRUD)
|
||
6. 文件上传模块
|
||
|
||
**第二阶段: 部署功能 (步骤7-10)**
|
||
7. 端口自动分配 (3100-3200)
|
||
8. 项目启动/停止
|
||
9. 访问链接生成
|
||
10. 日志记录
|
||
|
||
**第三阶段: Vue前端 (步骤11-18)**
|
||
11. 初始化Vue 3 + Vite + Tailwind
|
||
12. 路由和状态管理配置
|
||
13. 登录页面 (简约现代风格)
|
||
14. 项目列表页面
|
||
15. 文件上传组件 (拖拽支持)
|
||
16. 部署进度显示
|
||
17. 响应式布局优化
|
||
18. 动画和交互优化
|
||
|
||
**第四阶段: 文档 (步骤19-20)**
|
||
19. 部署文档
|
||
20. 使用说明 |