## 自动部署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. 使用说明