docs: 第一阶段实施计划（基础设施 + 用户体系）
包含 11 个 Task，从 Docker 环境搭建到 Go 服务骨架、 Auth 模块（Model/DAO/Service/Controller）、uniapp 前端骨架、 登录注册页面、TabBar 框架、Vue3 管理端搭建、用户管理模块。 Made-with: Cursor
This commit is contained in:
bujinyuan
781
docs/plans/2026-02-27-phase1-foundation-and-auth.md
Normal file
781
docs/plans/2026-02-27-phase1-foundation-and-auth.md
Normal file
@@ -0,0 +1,781 @@
|
|||||||
|
# EchoChat 第一阶段：基础设施与用户体系 - 实施计划
|
||||||
|
|
||||||
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||||
|
|
||||||
|
**目标：** 搭建项目完整骨架（Go 后端、uniapp 前端、Vue3 管理端），实现用户注册登录体系，建立 Docker 开发环境，为后续 IM/会议等功能奠定基础。
|
||||||
|
|
||||||
|
**架构：** Go 单体模块化服务 + uniapp 前台 + Vue3 管理端 + PostgreSQL + Redis，Docker Compose 编排。
|
||||||
|
|
||||||
|
**技术栈：** Go 1.22+ (Gin + GORM + Wire + zap) / Vue 3.4+ / uniapp 3.0 / Element Plus / PostgreSQL 16 / Redis 7 / Docker Compose
|
||||||
|
|
||||||
|
**设计文档：** `docs/plans/2026-02-27-echochat-system-design.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 1: Docker Compose 开发环境搭建
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `deploy/docker-compose.dev.yml`
|
||||||
|
- Create: `deploy/docker/postgres/init.sql`
|
||||||
|
- Create: `deploy/docker/redis/redis.conf`
|
||||||
|
- Create: `scripts/dev-setup.sh`
|
||||||
|
|
||||||
|
**Step 1: 创建 Docker Compose 开发环境配置**
|
||||||
|
|
||||||
|
创建 `deploy/docker-compose.dev.yml`，包含 PostgreSQL 16 和 Redis 7 两个服务：
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
postgres:
|
||||||
|
image: postgres:16-alpine
|
||||||
|
container_name: echochat-postgres
|
||||||
|
environment:
|
||||||
|
POSTGRES_DB: echochat
|
||||||
|
POSTGRES_USER: echochat
|
||||||
|
POSTGRES_PASSWORD: echochat_dev_2026
|
||||||
|
ports:
|
||||||
|
- "5432:5432"
|
||||||
|
volumes:
|
||||||
|
- pgdata:/var/lib/postgresql/data
|
||||||
|
- ./docker/postgres/init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "pg_isready -U echochat"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
|
||||||
|
redis:
|
||||||
|
image: redis:7-alpine
|
||||||
|
container_name: echochat-redis
|
||||||
|
ports:
|
||||||
|
- "6379:6379"
|
||||||
|
volumes:
|
||||||
|
- redisdata:/data
|
||||||
|
- ./docker/redis/redis.conf:/usr/local/etc/redis/redis.conf
|
||||||
|
command: redis-server /usr/local/etc/redis/redis.conf
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "redis-cli", "ping"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
pgdata:
|
||||||
|
redisdata:
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2: 创建 PostgreSQL 初始化 SQL**
|
||||||
|
|
||||||
|
创建 `deploy/docker/postgres/init.sql`，包含 auth 模块相关的所有表：
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- auth_users, auth_roles, auth_user_roles 表
|
||||||
|
-- 参考设计文档第四节数据库设计
|
||||||
|
-- 同时插入默认角色: user, admin, super_admin
|
||||||
|
-- 插入默认超级管理员账号
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: 创建 Redis 配置文件**
|
||||||
|
|
||||||
|
创建 `deploy/docker/redis/redis.conf`，基础开发环境配置。
|
||||||
|
|
||||||
|
**Step 4: 创建开发环境搭建脚本**
|
||||||
|
|
||||||
|
创建 `scripts/dev-setup.sh`，一键启动开发环境。
|
||||||
|
|
||||||
|
**Step 5: 启动并验证开发环境**
|
||||||
|
|
||||||
|
Run: `cd deploy && docker compose -f docker-compose.dev.yml up -d`
|
||||||
|
Expected: PostgreSQL 和 Redis 正常启动，可以连接
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add deploy/ scripts/
|
||||||
|
git commit -m "infra: Docker Compose 开发环境（PostgreSQL + Redis）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 2: Go 服务骨架搭建
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/cmd/server/main.go`
|
||||||
|
- Create: `backend/go-service/go.mod`
|
||||||
|
- Create: `backend/go-service/config/config.go`
|
||||||
|
- Create: `backend/go-service/config/config.dev.yaml`
|
||||||
|
- Create: `backend/go-service/pkg/db/postgres.go`
|
||||||
|
- Create: `backend/go-service/pkg/db/redis.go`
|
||||||
|
- Create: `backend/go-service/pkg/logs/logger.go`
|
||||||
|
- Create: `backend/go-service/pkg/utils/response.go`
|
||||||
|
- Create: `backend/go-service/pkg/middleware/cors.go`
|
||||||
|
- Create: `backend/go-service/pkg/middleware/recovery.go`
|
||||||
|
- Create: `backend/go-service/pkg/middleware/logger.go`
|
||||||
|
|
||||||
|
**Step 1: 初始化 Go Module**
|
||||||
|
|
||||||
|
Run: `cd backend/go-service && go mod init github.com/echochat/backend`
|
||||||
|
|
||||||
|
**Step 2: 创建配置管理**
|
||||||
|
|
||||||
|
创建 `config/config.go` 使用 viper 读取 YAML 配置 + 环境变量覆盖。
|
||||||
|
创建 `config/config.dev.yaml` 包含开发环境默认配置（数据库连接、Redis 连接、JWT 密钥、服务端口等）。
|
||||||
|
|
||||||
|
```go
|
||||||
|
// config/config.go
|
||||||
|
type Config struct {
|
||||||
|
Server ServerConfig `mapstructure:"server"`
|
||||||
|
Database DatabaseConfig `mapstructure:"database"`
|
||||||
|
Redis RedisConfig `mapstructure:"redis"`
|
||||||
|
JWT JWTConfig `mapstructure:"jwt"`
|
||||||
|
Log LogConfig `mapstructure:"log"`
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: 创建日志系统**
|
||||||
|
|
||||||
|
创建 `pkg/logs/logger.go` 使用 zap 结构化日志，包含 LogFunctionEntry 和 LogFunctionExit 工具函数。
|
||||||
|
|
||||||
|
**Step 4: 创建数据库连接**
|
||||||
|
|
||||||
|
创建 `pkg/db/postgres.go` — GORM + PostgreSQL 连接池。
|
||||||
|
创建 `pkg/db/redis.go` — go-redis 客户端。
|
||||||
|
|
||||||
|
**Step 5: 创建统一响应工具**
|
||||||
|
|
||||||
|
创建 `pkg/utils/response.go` 包含 ResponseOK、ResponseBadRequest、ResponseUnauthorized、ResponseForbidden、ResponseError 等统一响应函数。
|
||||||
|
|
||||||
|
```go
|
||||||
|
type Response struct {
|
||||||
|
Code int `json:"code"`
|
||||||
|
Message string `json:"message"`
|
||||||
|
Data interface{} `json:"data,omitempty"`
|
||||||
|
Timestamp int64 `json:"timestamp"`
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 6: 创建中间件**
|
||||||
|
|
||||||
|
创建 `pkg/middleware/cors.go` — CORS 跨域中间件。
|
||||||
|
创建 `pkg/middleware/recovery.go` — Panic 恢复中间件。
|
||||||
|
创建 `pkg/middleware/logger.go` — 请求日志中间件。
|
||||||
|
|
||||||
|
**Step 7: 创建 main.go 入口**
|
||||||
|
|
||||||
|
创建 `cmd/server/main.go`：
|
||||||
|
1. 加载配置
|
||||||
|
2. 初始化日志
|
||||||
|
3. 连接数据库和 Redis
|
||||||
|
4. 创建 Gin Engine
|
||||||
|
5. 注册中间件
|
||||||
|
6. 注册路由（暂时只有健康检查 GET /health）
|
||||||
|
7. 启动 HTTP 服务
|
||||||
|
|
||||||
|
**Step 8: 安装依赖**
|
||||||
|
|
||||||
|
Run: `cd backend/go-service && go mod tidy`
|
||||||
|
|
||||||
|
**Step 9: 运行验证**
|
||||||
|
|
||||||
|
Run: `cd backend/go-service && go run cmd/server/main.go`
|
||||||
|
Expected: 服务启动在 :8080，访问 /health 返回 200
|
||||||
|
|
||||||
|
**Step 10: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add backend/go-service/
|
||||||
|
git commit -m "feat(backend): Go 服务骨架（配置、日志、数据库、中间件、路由）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 3: Auth 模块 — 用户模型与数据层
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/app/auth/model/user.go`
|
||||||
|
- Create: `backend/go-service/app/auth/model/role.go`
|
||||||
|
- Create: `backend/go-service/app/auth/dao/user_dao.go`
|
||||||
|
- Create: `backend/go-service/app/auth/dao/role_dao.go`
|
||||||
|
- Create: `backend/go-service/app/constants/user_status.go`
|
||||||
|
- Create: `backend/go-service/app/constants/role_code.go`
|
||||||
|
|
||||||
|
**Step 1: 创建用户状态和角色常量**
|
||||||
|
|
||||||
|
```go
|
||||||
|
// app/constants/user_status.go
|
||||||
|
const (
|
||||||
|
USER_STATUS_ACTIVE = 1 // 正常
|
||||||
|
USER_STATUS_DISABLED = 2 // 禁用
|
||||||
|
USER_STATUS_DELETED = 3 // 注销
|
||||||
|
)
|
||||||
|
|
||||||
|
// app/constants/role_code.go
|
||||||
|
const (
|
||||||
|
ROLE_USER = "user"
|
||||||
|
ROLE_ADMIN = "admin"
|
||||||
|
ROLE_SUPER_ADMIN = "super_admin"
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2: 创建用户模型**
|
||||||
|
|
||||||
|
创建 `app/auth/model/user.go`，定义 User 结构体，JSON tag 使用下划线命名，GORM tag 指定表名 `auth_users`。
|
||||||
|
|
||||||
|
**Step 3: 创建角色模型**
|
||||||
|
|
||||||
|
创建 `app/auth/model/role.go`，定义 Role 和 UserRole 结构体。
|
||||||
|
|
||||||
|
**Step 4: 创建用户 DAO**
|
||||||
|
|
||||||
|
创建 `app/auth/dao/user_dao.go`，包含：
|
||||||
|
- `Create(ctx, user)` — 创建用户
|
||||||
|
- `FindByEmail(ctx, email)` — 按邮箱查询
|
||||||
|
- `FindByUsername(ctx, username)` — 按用户名查询
|
||||||
|
- `FindByID(ctx, id)` — 按 ID 查询
|
||||||
|
- `Update(ctx, user)` — 更新用户
|
||||||
|
- `UpdateLastLogin(ctx, userID, ip)` — 更新最后登录信息
|
||||||
|
|
||||||
|
包含标准的日志入口/出口记录。
|
||||||
|
|
||||||
|
**Step 5: 创建角色 DAO**
|
||||||
|
|
||||||
|
创建 `app/auth/dao/role_dao.go`，包含：
|
||||||
|
- `FindByCode(ctx, code)` — 按角色代码查询
|
||||||
|
- `AssignRole(ctx, userID, roleID)` — 分配角色
|
||||||
|
- `GetUserRoles(ctx, userID)` — 获取用户角色列表
|
||||||
|
- `HasRole(ctx, userID, roleCode)` — 检查用户是否拥有指定角色
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add backend/go-service/app/
|
||||||
|
git commit -m "feat(auth): 用户/角色模型与数据访问层"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 4: Auth 模块 — 认证服务层
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/app/auth/service/auth_service.go`
|
||||||
|
- Create: `backend/go-service/app/dto/auth_dto.go`
|
||||||
|
- Create: `backend/go-service/pkg/utils/jwt.go`
|
||||||
|
- Create: `backend/go-service/pkg/utils/password.go`
|
||||||
|
- Create: `backend/go-service/pkg/middleware/auth.go`
|
||||||
|
|
||||||
|
**Step 1: 创建密码工具**
|
||||||
|
|
||||||
|
创建 `pkg/utils/password.go`：
|
||||||
|
- `HashPassword(password)` — bcrypt 加密
|
||||||
|
- `CheckPassword(password, hash)` — 密码校验
|
||||||
|
|
||||||
|
**Step 2: 创建 JWT 工具**
|
||||||
|
|
||||||
|
创建 `pkg/utils/jwt.go`：
|
||||||
|
- `GenerateToken(userID, username)` — 生成 Access Token
|
||||||
|
- `GenerateRefreshToken(userID)` — 生成 Refresh Token
|
||||||
|
- `ParseToken(tokenStr)` — 解析验证 Token
|
||||||
|
- Claims 结构体包含 UserID, Username, Roles
|
||||||
|
|
||||||
|
**Step 3: 创建认证 DTO**
|
||||||
|
|
||||||
|
创建 `app/dto/auth_dto.go`：
|
||||||
|
|
||||||
|
```go
|
||||||
|
type RegisterRequest struct {
|
||||||
|
Username string `json:"username" binding:"required,min=3,max=50"`
|
||||||
|
Email string `json:"email" binding:"required,email"`
|
||||||
|
Password string `json:"password" binding:"required,min=6,max=50"`
|
||||||
|
Nickname string `json:"nickname" binding:"max=50"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type LoginRequest struct {
|
||||||
|
Account string `json:"account" binding:"required"` // 邮箱或用户名
|
||||||
|
Password string `json:"password" binding:"required"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type LoginResponse struct {
|
||||||
|
Token string `json:"token"`
|
||||||
|
RefreshToken string `json:"refresh_token"`
|
||||||
|
ExpiresIn int64 `json:"expires_in"`
|
||||||
|
User UserInfo `json:"user"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type UserInfo struct {
|
||||||
|
ID int64 `json:"id"`
|
||||||
|
Username string `json:"username"`
|
||||||
|
Email string `json:"email"`
|
||||||
|
Nickname string `json:"nickname"`
|
||||||
|
Avatar string `json:"avatar"`
|
||||||
|
Roles []string `json:"roles"`
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 4: 创建认证服务**
|
||||||
|
|
||||||
|
创建 `app/auth/service/auth_service.go`：
|
||||||
|
- `Register(ctx, req)` — 注册逻辑（检查重复、加密密码、创建用户、分配默认角色、生成 Token）
|
||||||
|
- `Login(ctx, req)` — 登录逻辑（查找用户、校验密码、检查状态、更新登录信息、生成 Token）
|
||||||
|
- `RefreshToken(ctx, refreshToken)` — 刷新 Token
|
||||||
|
- `GetProfile(ctx, userID)` — 获取用户信息
|
||||||
|
- `UpdateProfile(ctx, userID, req)` — 更新用户信息
|
||||||
|
- `ChangePassword(ctx, userID, req)` — 修改密码
|
||||||
|
|
||||||
|
**Step 5: 创建认证中间件**
|
||||||
|
|
||||||
|
创建 `pkg/middleware/auth.go`：
|
||||||
|
- `JWTAuth()` — JWT 验证中间件，从 Authorization Header 提取 Token
|
||||||
|
- `RequireRole(roles ...string)` — 角色检查中间件
|
||||||
|
- 将 UserID 和 Roles 注入 Gin Context
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add backend/go-service/
|
||||||
|
git commit -m "feat(auth): 认证服务层（注册、登录、JWT、密码加密、中间件）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 5: Auth 模块 — Controller 与路由注册
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/app/auth/controller/auth_controller.go`
|
||||||
|
- Create: `backend/go-service/app/auth/controller/admin_auth_controller.go`
|
||||||
|
- Create: `backend/go-service/app/auth/router.go`
|
||||||
|
- Modify: `backend/go-service/cmd/server/main.go` — 注册 auth 路由
|
||||||
|
|
||||||
|
**Step 1: 创建前台认证 Controller**
|
||||||
|
|
||||||
|
创建 `app/auth/controller/auth_controller.go`：
|
||||||
|
- `Register(c *gin.Context)` — POST /api/v1/auth/register
|
||||||
|
- `Login(c *gin.Context)` — POST /api/v1/auth/login
|
||||||
|
- `Logout(c *gin.Context)` — POST /api/v1/auth/logout
|
||||||
|
- `RefreshToken(c *gin.Context)` — POST /api/v1/auth/refresh-token
|
||||||
|
- `GetProfile(c *gin.Context)` — GET /api/v1/auth/profile
|
||||||
|
- `UpdateProfile(c *gin.Context)` — PUT /api/v1/auth/profile
|
||||||
|
- `ChangePassword(c *gin.Context)` — PUT /api/v1/auth/password
|
||||||
|
|
||||||
|
每个方法：参数绑定 → 调用 Service → 统一响应返回。
|
||||||
|
|
||||||
|
**Step 2: 创建后台认证 Controller**
|
||||||
|
|
||||||
|
创建 `app/auth/controller/admin_auth_controller.go`：
|
||||||
|
- `AdminLogin(c *gin.Context)` — POST /api/v1/admin/auth/login
|
||||||
|
- 与普通登录的区别：登录后检查用户是否拥有 admin 或 super_admin 角色
|
||||||
|
|
||||||
|
**Step 3: 创建路由注册函数**
|
||||||
|
|
||||||
|
创建 `app/auth/router.go`：
|
||||||
|
|
||||||
|
```go
|
||||||
|
func RegisterRoutes(r *gin.Engine, ctrl *AuthController, adminCtrl *AdminAuthController, authMiddleware gin.HandlerFunc) {
|
||||||
|
// 前台公开路由
|
||||||
|
public := r.Group("/api/v1/auth")
|
||||||
|
{
|
||||||
|
public.POST("/register", ctrl.Register)
|
||||||
|
public.POST("/login", ctrl.Login)
|
||||||
|
public.POST("/refresh-token", ctrl.RefreshToken)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 前台需认证路由
|
||||||
|
authed := r.Group("/api/v1/auth").Use(authMiddleware)
|
||||||
|
{
|
||||||
|
authed.POST("/logout", ctrl.Logout)
|
||||||
|
authed.GET("/profile", ctrl.GetProfile)
|
||||||
|
authed.PUT("/profile", ctrl.UpdateProfile)
|
||||||
|
authed.PUT("/password", ctrl.ChangePassword)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 后台认证路由
|
||||||
|
admin := r.Group("/api/v1/admin/auth")
|
||||||
|
{
|
||||||
|
admin.POST("/login", adminCtrl.AdminLogin)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 4: 在 main.go 中注册路由**
|
||||||
|
|
||||||
|
修改 `cmd/server/main.go`，初始化 auth 模块的 DAO → Service → Controller 链，调用 RegisterRoutes。
|
||||||
|
|
||||||
|
**Step 5: 运行验证**
|
||||||
|
|
||||||
|
Run: `cd backend/go-service && go run cmd/server/main.go`
|
||||||
|
Expected: 服务启动，可以通过 curl 测试注册和登录接口
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 测试注册
|
||||||
|
curl -X POST http://localhost:8080/api/v1/auth/register \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{"username":"testuser","email":"test@example.com","password":"123456","nickname":"测试用户"}'
|
||||||
|
|
||||||
|
# 测试登录
|
||||||
|
curl -X POST http://localhost:8080/api/v1/auth/login \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{"account":"testuser","password":"123456"}'
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: 注册返回 Token，登录返回 Token + 用户信息
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add backend/go-service/
|
||||||
|
git commit -m "feat(auth): 用户注册/登录 API（Controller + 路由注册）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 6: uniapp 前端骨架完善
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `frontend/src/utils/request.js`
|
||||||
|
- Create: `frontend/src/utils/storage.js`
|
||||||
|
- Create: `frontend/src/api/auth.js`
|
||||||
|
- Create: `frontend/src/store/user.js`
|
||||||
|
- Create: `frontend/src/services/websocket.js`（占位）
|
||||||
|
- Modify: `frontend/src/pages.json`
|
||||||
|
- Modify: `frontend/src/main.js`
|
||||||
|
- Modify: `frontend/package.json`
|
||||||
|
|
||||||
|
**Step 1: 安装前端依赖**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm install pinia @pinia/persist`
|
||||||
|
|
||||||
|
uniapp 内置了请求 API（uni.request），不需要额外安装 axios。
|
||||||
|
|
||||||
|
**Step 2: 创建 HTTP 请求封装**
|
||||||
|
|
||||||
|
创建 `src/utils/request.js`：
|
||||||
|
- 封装 uni.request 为 Promise
|
||||||
|
- 请求拦截器：自动添加 Authorization Header
|
||||||
|
- 响应拦截器：统一处理错误码（401 跳转登录等）
|
||||||
|
- 基础 URL 配置
|
||||||
|
|
||||||
|
**Step 3: 创建存储工具**
|
||||||
|
|
||||||
|
创建 `src/utils/storage.js`：
|
||||||
|
- 封装 uni.setStorageSync / uni.getStorageSync
|
||||||
|
- Token 存取方法
|
||||||
|
|
||||||
|
**Step 4: 创建 Pinia Store**
|
||||||
|
|
||||||
|
修改 `src/main.js` 集成 Pinia。
|
||||||
|
创建 `src/store/user.js`：
|
||||||
|
- state: userInfo, token, isLoggedIn
|
||||||
|
- actions: login, register, logout, getProfile, setToken
|
||||||
|
|
||||||
|
**Step 5: 创建 Auth API**
|
||||||
|
|
||||||
|
创建 `src/api/auth.js`：
|
||||||
|
- register(data)
|
||||||
|
- login(data)
|
||||||
|
- logout()
|
||||||
|
- getProfile()
|
||||||
|
- updateProfile(data)
|
||||||
|
- changePassword(data)
|
||||||
|
|
||||||
|
**Step 6: 更新 pages.json**
|
||||||
|
|
||||||
|
添加 auth 页面路由、TabBar 配置。
|
||||||
|
|
||||||
|
**Step 7: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add frontend/
|
||||||
|
git commit -m "feat(frontend): uniapp 前端骨架（请求封装、状态管理、Auth API）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 7: uniapp 登录/注册页面
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `frontend/src/pages/auth/login.vue`
|
||||||
|
- Create: `frontend/src/pages/auth/register.vue`
|
||||||
|
- Modify: `frontend/src/pages.json`
|
||||||
|
|
||||||
|
> **Note:** 页面构建使用 ui-ux-pro-max skill 生成设计系统后实现。uniapp 使用 `<view>` `<text>` `<input>` 等组件而非 HTML 标签。
|
||||||
|
|
||||||
|
**Step 1: 使用 ui-ux-pro-max 生成设计系统**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 skills/ui-ux-pro-max/scripts/search.py "video conference meeting chat modern professional" --design-system -p "EchoChat" --persist
|
||||||
|
```
|
||||||
|
|
||||||
|
然后获取 Vue stack 的实现指南：
|
||||||
|
```bash
|
||||||
|
python3 skills/ui-ux-pro-max/scripts/search.py "login register form" --stack vue
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2: 创建登录页面**
|
||||||
|
|
||||||
|
创建 `src/pages/auth/login.vue`：
|
||||||
|
- 输入框：账号（邮箱或用户名）+ 密码
|
||||||
|
- 登录按钮
|
||||||
|
- "没有账号？去注册" 链接
|
||||||
|
- 表单验证
|
||||||
|
- 调用 userStore.login()
|
||||||
|
- 登录成功跳转首页
|
||||||
|
|
||||||
|
**Step 3: 创建注册页面**
|
||||||
|
|
||||||
|
创建 `src/pages/auth/register.vue`：
|
||||||
|
- 输入框：用户名 + 邮箱 + 密码 + 确认密码 + 昵称（选填）
|
||||||
|
- 注册按钮
|
||||||
|
- "已有账号？去登录" 链接
|
||||||
|
- 表单验证
|
||||||
|
- 调用 userStore.register()
|
||||||
|
- 注册成功自动登录
|
||||||
|
|
||||||
|
**Step 4: 更新 pages.json 路由配置**
|
||||||
|
|
||||||
|
**Step 5: 运行验证**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm run dev:h5`
|
||||||
|
Expected: H5 浏览器中可以看到登录/注册页面，输入信息后可以成功注册和登录
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add frontend/
|
||||||
|
git commit -m "feat(frontend): 登录/注册页面"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 8: uniapp 首页框架与 TabBar
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `frontend/src/pages/chat/index.vue`（占位）
|
||||||
|
- Create: `frontend/src/pages/contact/index.vue`（占位）
|
||||||
|
- Create: `frontend/src/pages/meeting/index.vue`（占位）
|
||||||
|
- Create: `frontend/src/pages/profile/index.vue`
|
||||||
|
- Modify: `frontend/src/pages/index/index.vue`
|
||||||
|
- Modify: `frontend/src/pages.json`
|
||||||
|
|
||||||
|
**Step 1: 创建 TabBar 页面占位**
|
||||||
|
|
||||||
|
创建消息、联系人、会议三个 Tab 页面的占位版本（显示模块名称和"开发中"提示）。
|
||||||
|
|
||||||
|
**Step 2: 创建个人中心页面**
|
||||||
|
|
||||||
|
创建 `src/pages/profile/index.vue`：
|
||||||
|
- 显示用户头像、昵称、用户名
|
||||||
|
- 编辑资料入口
|
||||||
|
- 修改密码入口
|
||||||
|
- 退出登录按钮
|
||||||
|
- 使用 ui-ux-pro-max 设计系统
|
||||||
|
|
||||||
|
**Step 3: 配置 TabBar**
|
||||||
|
|
||||||
|
修改 `pages.json`，配置底部 TabBar：消息 | 联系人 | 会议 | 我的
|
||||||
|
|
||||||
|
**Step 4: 配置首页重定向**
|
||||||
|
|
||||||
|
修改 `src/pages/index/index.vue`，判断登录状态：
|
||||||
|
- 已登录 → 跳转消息列表页
|
||||||
|
- 未登录 → 跳转登录页
|
||||||
|
|
||||||
|
**Step 5: 运行验证**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm run dev:h5`
|
||||||
|
Expected: 未登录时显示登录页，登录后显示 TabBar 页面，个人中心可以查看信息并退出
|
||||||
|
|
||||||
|
**Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add frontend/
|
||||||
|
git commit -m "feat(frontend): TabBar 框架与个人中心页面"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 9: Vue 3 管理端项目搭建
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `admin/` 整个目录（通过 Vite 脚手架创建）
|
||||||
|
- 项目结构参考设计文档第三节
|
||||||
|
|
||||||
|
**Step 1: 创建 Vue 3 项目**
|
||||||
|
|
||||||
|
Run: `cd /path/to/EchoChat && npm create vite@latest admin -- --template vue`
|
||||||
|
|
||||||
|
**Step 2: 安装核心依赖**
|
||||||
|
|
||||||
|
Run: `cd admin && npm install element-plus vue-router@4 pinia axios @element-plus/icons-vue`
|
||||||
|
|
||||||
|
**Step 3: 创建布局框架**
|
||||||
|
|
||||||
|
创建 `src/views/layout/index.vue`：
|
||||||
|
- 左侧边栏导航
|
||||||
|
- 顶部栏（管理员信息、退出登录）
|
||||||
|
- 主内容区
|
||||||
|
- 使用 Element Plus 的 Container/Aside/Header/Main 布局
|
||||||
|
|
||||||
|
**Step 4: 创建路由配置**
|
||||||
|
|
||||||
|
创建 `src/router/index.js`：
|
||||||
|
- 登录页路由
|
||||||
|
- 后台布局路由（嵌套子路由）
|
||||||
|
- 路由守卫（未登录跳转登录页）
|
||||||
|
|
||||||
|
**Step 5: 创建请求封装**
|
||||||
|
|
||||||
|
创建 `src/api/request.js`：
|
||||||
|
- 基于 axios 的请求封装
|
||||||
|
- 请求/响应拦截器
|
||||||
|
- Token 自动附加
|
||||||
|
|
||||||
|
**Step 6: 创建管理员登录页**
|
||||||
|
|
||||||
|
创建 `src/views/login.vue`：
|
||||||
|
- 管理员账号 + 密码登录表单
|
||||||
|
- 使用 Element Plus 表单组件
|
||||||
|
- 使用 ui-ux-pro-max 设计系统
|
||||||
|
|
||||||
|
**Step 7: 创建仪表盘占位页**
|
||||||
|
|
||||||
|
创建 `src/views/dashboard/index.vue`：
|
||||||
|
- 显示统计卡片占位（总用户数、在线用户、今日会议等）
|
||||||
|
|
||||||
|
**Step 8: 运行验证**
|
||||||
|
|
||||||
|
Run: `cd admin && npm run dev`
|
||||||
|
Expected: 浏览器访问管理端，未登录跳转登录页，登录后进入仪表盘
|
||||||
|
|
||||||
|
**Step 9: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add admin/
|
||||||
|
git commit -m "feat(admin): Vue 3 管理端项目搭建（布局、路由、登录页）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 10: 管理端用户管理模块
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/app/admin/controller/user_manage_controller.go`
|
||||||
|
- Create: `backend/go-service/app/admin/service/user_manage_service.go`
|
||||||
|
- Create: `backend/go-service/app/admin/dao/user_manage_dao.go`
|
||||||
|
- Create: `backend/go-service/app/admin/router.go`
|
||||||
|
- Create: `backend/go-service/app/dto/admin_dto.go`
|
||||||
|
- Create: `admin/src/api/user.js`
|
||||||
|
- Create: `admin/src/views/user/list.vue`
|
||||||
|
- Create: `admin/src/views/user/detail.vue`
|
||||||
|
- Modify: `backend/go-service/cmd/server/main.go`
|
||||||
|
|
||||||
|
**Step 1: 创建管理端 DTO**
|
||||||
|
|
||||||
|
创建 `app/dto/admin_dto.go`：
|
||||||
|
- UserListRequest（分页、搜索、状态筛选）
|
||||||
|
- UserListResponse（用户列表 + 总数）
|
||||||
|
- UserDetailResponse
|
||||||
|
|
||||||
|
**Step 2: 创建管理端用户 DAO**
|
||||||
|
|
||||||
|
创建 `app/admin/dao/user_manage_dao.go`：
|
||||||
|
- `ListUsers(ctx, req)` — 分页查询用户列表（支持搜索、状态筛选）
|
||||||
|
- `CountUsers(ctx)` — 统计用户总数
|
||||||
|
- `UpdateUserStatus(ctx, userID, status)` — 更新用户状态
|
||||||
|
|
||||||
|
**Step 3: 创建管理端用户 Service**
|
||||||
|
|
||||||
|
创建 `app/admin/service/user_manage_service.go`：
|
||||||
|
- `GetUserList(ctx, req)` — 获取用户列表
|
||||||
|
- `GetUserDetail(ctx, userID)` — 获取用户详情（含角色信息）
|
||||||
|
- `UpdateUserStatus(ctx, userID, status)` — 启用/禁用用户
|
||||||
|
- `AssignUserRole(ctx, userID, roleCode)` — 分配角色
|
||||||
|
- `CreateUser(ctx, req)` — 管理员手动创建用户
|
||||||
|
|
||||||
|
**Step 4: 创建管理端 Controller 和路由**
|
||||||
|
|
||||||
|
创建 Controller 和路由注册函数，所有管理端 API 需要 JWT + admin 角色双重中间件。
|
||||||
|
|
||||||
|
**Step 5: 创建管理端用户列表页面**
|
||||||
|
|
||||||
|
创建 `admin/src/views/user/list.vue`：
|
||||||
|
- 搜索框（用户名/邮箱搜索）
|
||||||
|
- 状态筛选下拉
|
||||||
|
- 用户数据表格（Element Plus Table）
|
||||||
|
- 分页组件
|
||||||
|
- 操作按钮（查看详情、启用/禁用）
|
||||||
|
|
||||||
|
**Step 6: 创建管理端用户详情页面**
|
||||||
|
|
||||||
|
创建 `admin/src/views/user/detail.vue`：
|
||||||
|
- 基本信息 Tab
|
||||||
|
- 角色管理
|
||||||
|
- 会议记录 Tab（占位，后续完善）
|
||||||
|
|
||||||
|
**Step 7: 运行验证**
|
||||||
|
|
||||||
|
Expected: 管理端可以查看用户列表、搜索筛选、查看详情、启用/禁用用户
|
||||||
|
|
||||||
|
**Step 8: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add backend/go-service/app/admin/ admin/src/
|
||||||
|
git commit -m "feat(admin): 用户管理模块（列表、详情、状态管理、角色分配）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 11: 端到端集成测试与文档
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `backend/go-service/Dockerfile`
|
||||||
|
- Modify: `deploy/docker-compose.dev.yml` — 添加 go-service
|
||||||
|
- Create: `README.md` — 项目说明文档
|
||||||
|
|
||||||
|
**Step 1: 创建 Go 服务 Dockerfile**
|
||||||
|
|
||||||
|
创建 `backend/go-service/Dockerfile`，多阶段构建：
|
||||||
|
- 第一阶段：Go 编译
|
||||||
|
- 第二阶段：alpine 运行镜像
|
||||||
|
|
||||||
|
**Step 2: 更新 Docker Compose**
|
||||||
|
|
||||||
|
在 `deploy/docker-compose.dev.yml` 中添加 go-service 服务。
|
||||||
|
|
||||||
|
**Step 3: 编写项目 README**
|
||||||
|
|
||||||
|
更新根目录 `README.md`：
|
||||||
|
- 项目简介
|
||||||
|
- 技术栈
|
||||||
|
- 项目结构
|
||||||
|
- 开发环境搭建步骤
|
||||||
|
- API 文档链接
|
||||||
|
|
||||||
|
**Step 4: 完整流程验证**
|
||||||
|
|
||||||
|
1. Docker Compose 启动所有服务
|
||||||
|
2. 访问前台 H5 → 注册 → 登录 → 查看个人中心 → 退出
|
||||||
|
3. 访问管理端 → 管理员登录 → 查看用户列表 → 查看用户详情
|
||||||
|
|
||||||
|
**Step 5: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat: 第一阶段完成（基础设施 + 用户体系 + 管理端用户管理）"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 阶段完成标准
|
||||||
|
|
||||||
|
- [x] Docker Compose 开发环境可一键启动（PostgreSQL + Redis）
|
||||||
|
- [x] Go 后端服务骨架完整（配置、日志、数据库、中间件）
|
||||||
|
- [x] 用户注册/登录 API 正常工作（邮箱+密码、用户名+密码）
|
||||||
|
- [x] JWT Token 认证机制正常（Access Token + Refresh Token）
|
||||||
|
- [x] RBAC 角色权限体系正常（user / admin / super_admin）
|
||||||
|
- [x] uniapp 前端骨架完整（请求封装、状态管理、路由）
|
||||||
|
- [x] 前台登录/注册页面可用
|
||||||
|
- [x] 前台 TabBar 框架和个人中心可用
|
||||||
|
- [x] Vue 3 管理端项目搭建完成（布局、路由、登录）
|
||||||
|
- [x] 管理端用户管理模块可用（列表、详情、状态管理）
|
||||||
|
- [x] 所有代码已提交 Git
|
||||||
Reference in New Issue
Block a user