953 lines
36 KiB
Markdown
953 lines
36 KiB
Markdown
# DDD代码生成器可视化界面策划方案
|
||
|
||
## 概述
|
||
|
||
DDD代码生成器可视化界面是一个基于Web的图形化工具，提供直观的拖拽式界面来设计和生成DDD架构代码。通过可视化界面，用户可以更轻松地设计领域模型、配置实体关系、预览生成的代码，大幅降低DDD架构的学习和使用门槛。
|
||
|
||
## 界面架构
|
||
|
||
### 1. 整体布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ DDD代码生成器 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 导航栏: [项目] [领域] [实体] [服务] [API] [配置] [生成] │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 工具栏: [新建] [打开] [保存] [导入] [导出] [预览] [生成] │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 左侧面板 │ 主工作区 │ 右侧面板 │
|
||
│ ├─ 项目树 │ ├─ 可视化设计器 │ ├─ 属性面板 │
|
||
│ ├─ 组件库 │ ├─ 关系图 │ ├─ 代码预览 │
|
||
│ └─ 模板库 │ └─ 配置表单 │ └─ 日志面板 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 核心界面组件
|
||
|
||
#### 2.1 导航栏
|
||
- **项目管理**: 项目列表、新建项目、项目设置
|
||
- **领域设计**: 领域列表、领域配置、领域关系
|
||
- **实体管理**: 实体设计器、字段配置、业务方法
|
||
- **服务配置**: 应用服务、领域服务、仓储配置
|
||
- **API设计**: 接口设计、路由配置、响应格式
|
||
- **代码生成**: 生成配置、预览、导出
|
||
|
||
#### 2.2 左侧面板
|
||
- **项目树**: 显示项目结构和文件组织
|
||
- **组件库**: 拖拽式组件（实体、枚举、服务、API）
|
||
- **模板库**: 预定义模板和自定义模板
|
||
|
||
#### 2.3 主工作区
|
||
- **可视化设计器**: 拖拽式界面设计
|
||
- **关系图**: 实体间关系可视化
|
||
- **配置表单**: 详细的配置选项
|
||
|
||
#### 2.4 右侧面板
|
||
- **属性面板**: 选中元素的属性编辑
|
||
- **代码预览**: 实时预览生成的代码
|
||
- **日志面板**: 操作日志和错误信息
|
||
|
||
## 功能模块
|
||
|
||
### 1. 项目管理系统
|
||
|
||
#### 1.1 项目创建向导
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 新建项目向导 │
|
||
├─────────────────────────────────────────┤
|
||
│ 步骤 1: 项目基本信息 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 项目名称: [tyapi-server ] │ │
|
||
│ │ 模块路径: [tyapi-server/internal] │ │
|
||
│ │ 作者: [开发团队 ] │ │
|
||
│ │ 版本: [1.0.0 ] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 步骤 2: 项目结构选择 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ☑ 标准DDD结构 │ │
|
||
│ │ ☑ 包含认证模块 │ │
|
||
│ │ ☑ 包含日志系统 │ │
|
||
│ │ ☑ 包含测试框架 │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 步骤 3: 模板选择 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ☑ 中文注释模板 │ │
|
||
│ │ ☑ RESTful API模板 │ │
|
||
│ │ ☑ Swagger文档模板 │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [上一步] [下一步] [完成] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 1.2 项目仪表板
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 项目仪表板 │
|
||
├─────────────────────────────────────────┤
|
||
│ 项目概览 │
|
||
│ ┌─────────────┬─────────────┬─────────┐ │
|
||
│ │ 领域数量 │ 实体数量 │ API数量 │ │
|
||
│ │ 3 │ 12 │ 24 │ │
|
||
│ └─────────────┴─────────────┴─────────┘ │
|
||
│ │
|
||
│ 最近活动 │
|
||
│ • 2024-01-15 14:30 创建用户域 │
|
||
│ • 2024-01-15 14:25 添加产品实体 │
|
||
│ • 2024-01-15 14:20 生成订单API │
|
||
│ │
|
||
│ 快速操作 │
|
||
│ [新建领域] [导入配置] [生成代码] [导出] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 领域设计器
|
||
|
||
#### 2.1 领域概览
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 领域设计器 │
|
||
├─────────────────────────────────────────┤
|
||
│ 领域列表 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 📁 用户域 (user) │ │
|
||
│ │ ├─ 👤 用户实体 (3个字段) │ │
|
||
│ │ ├─ 🔐 角色实体 (2个字段) │ │
|
||
│ │ └─ 🛡️ 权限实体 (2个字段) │ │
|
||
│ │ │ │
|
||
│ │ 📁 产品域 (product) │ │
|
||
│ │ ├─ 📦 产品实体 (5个字段) │ │
|
||
│ │ ├─ 🏷️ 分类实体 (3个字段) │ │
|
||
│ │ └─ 📄 文档实体 (4个字段) │ │
|
||
│ │ │ │
|
||
│ │ 📁 订单域 (order) │ │
|
||
│ │ ├─ 🛒 订单实体 (6个字段) │ │
|
||
│ │ └─ 📋 订单项实体 (4个字段) │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [新建领域] [编辑领域] [删除领域] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 2.2 领域关系图
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 领域关系图 │
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────┐ ┌─────────┐ │
|
||
│ │ 用户域 │ │ 产品域 │ │
|
||
│ │ │ │ │ │
|
||
│ │ ┌─────┐ │ │ ┌─────┐ │ │
|
||
│ │ │用户 │ │ │ │产品 │ │ │
|
||
│ │ └─────┘ │ │ └─────┘ │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ ┌─────┐ │ │ ┌─────┐ │ │
|
||
│ │ │角色 │ │ │ │分类 │ │ │
|
||
│ │ └─────┘ │ │ └─────┘ │ │
|
||
│ └─────────┘ └─────────┘ │
|
||
│ │ │ │
|
||
│ └────────────────┘ │
|
||
│ │ │
|
||
│ ┌─────────┐ │
|
||
│ │ 订单域 │ │
|
||
│ │ │ │
|
||
│ │ ┌─────┐ │ │
|
||
│ │ │订单 │ │ │
|
||
│ │ └─────┘ │ │
|
||
│ │ │ │ │
|
||
│ │ ┌─────┐ │ │
|
||
│ │ │订单项│ │ │
|
||
│ │ └─────┘ │ │
|
||
│ └─────────┘ │
|
||
│ │
|
||
│ [添加关系] [编辑关系] [删除关系] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 实体设计器
|
||
|
||
#### 3.1 实体可视化设计
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 实体设计器 │
|
||
├─────────────────────────────────────────┤
|
||
│ 实体: 用户 (User) │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ┌─────────────────────────────────┐ │ │
|
||
│ │ │ 用户实体 │ │ │
|
||
│ │ ├─────────────────────────────────┤ │ │
|
||
│ │ │ ID string (主键) │ │ │
|
||
│ │ │ Username string (唯一) │ │ │
|
||
│ │ │ Email string (唯一) │ │ │
|
||
│ │ │ Password string (密码) │ │ │
|
||
│ │ │ Status UserStatus (状态) │ │ │
|
||
│ │ │ CreatedAt time.Time (创建时间) │ │ │
|
||
│ │ │ UpdatedAt time.Time (更新时间) │ │ │
|
||
│ │ │ DeletedAt gorm.DeletedAt │ │ │
|
||
│ │ └─────────────────────────────────┘ │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 业务方法 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ☑ IsActive() bool │ │
|
||
│ │ ☑ CanLogin() bool │ │
|
||
│ │ ☑ IsDeleted() bool │ │
|
||
│ │ ☑ Enable() │ │
|
||
│ │ ☑ Disable() │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [添加字段] [编辑字段] [删除字段] │
|
||
│ [添加方法] [编辑方法] [删除方法] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.2 字段配置面板
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 字段配置 │
|
||
├─────────────────────────────────────────┤
|
||
│ 字段名称: [Username ] │
|
||
│ 字段类型: [string ▼] │
|
||
│ 字段标签: [gorm:"type:varchar(50);uniqueIndex;not null"] │
|
||
│ 字段注释: [用户名] │
|
||
│ │
|
||
│ 验证规则 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ☑ required (必填) │ │
|
||
│ │ ☑ min=3 (最小长度3) │ │
|
||
│ │ ☑ max=50 (最大长度50) │ │
|
||
│ │ ☑ unique (唯一性) │ │
|
||
│ │ ☑ pattern=^[a-zA-Z0-9_]+$ (正则) │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 数据库配置 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 类型: varchar(50) │ │
|
||
│ │ 索引: ☑ 普通索引 ☑ 唯一索引 │ │
|
||
│ │ 约束: ☑ NOT NULL ☑ 默认值 │ │
|
||
│ │ 默认值: [ ] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [保存] [取消] [预览代码] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 4. 服务配置器
|
||
|
||
#### 4.1 应用服务设计
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 应用服务配置 │
|
||
├─────────────────────────────────────────┤
|
||
│ 服务: 用户应用服务 (UserApplicationService) │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 基础CRUD操作 │ │
|
||
│ │ ☑ CreateUser (创建用户) │ │
|
||
│ │ ☑ UpdateUser (更新用户) │ │
|
||
│ │ ☑ DeleteUser (删除用户) │ │
|
||
│ │ ☑ GetUserByID (获取用户) │ │
|
||
│ │ ☑ ListUsers (用户列表) │ │
|
||
│ │ │ │
|
||
│ │ 业务操作 │ │
|
||
│ │ ☑ EnableUser (启用用户) │ │
|
||
│ │ ☑ DisableUser (禁用用户) │ │
|
||
│ │ ☑ ResetPassword (重置密码) │ │
|
||
│ │ ☑ ChangeStatus (修改状态) │ │
|
||
│ │ │ │
|
||
│ │ 统计功能 │ │
|
||
│ │ ☑ GetUserStats (用户统计) │ │
|
||
│ │ ☑ GetUserCount (用户数量) │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ DTO配置 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 命令DTO: ☑ CreateUserCommand │ │
|
||
│ │ 查询DTO: ☑ GetUserQuery │ │
|
||
│ │ 响应DTO: ☑ UserInfoResponse │ │
|
||
│ │ 列表DTO: ☑ UserListResponse │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [添加方法] [编辑方法] [删除方法] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 5. API设计器
|
||
|
||
#### 5.1 接口设计
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ API接口设计 │
|
||
├─────────────────────────────────────────┤
|
||
│ 接口列表 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ GET /api/v1/users │ │
|
||
│ │ POST /api/v1/users │ │
|
||
│ │ GET /api/v1/users/:id │ │
|
||
│ │ PUT /api/v1/users/:id │ │
|
||
│ │ DELETE /api/v1/users/:id │ │
|
||
│ │ POST /api/v1/users/:id/enable │ │
|
||
│ │ POST /api/v1/users/:id/disable │ │
|
||
│ │ GET /api/v1/users/stats │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 接口详情 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 路径: /api/v1/users │ │
|
||
│ │ 方法: GET │ │
|
||
│ │ 处理器: ListUsers │ │
|
||
│ │ 描述: 获取用户列表 │ │
|
||
│ │ │ │
|
||
│ │ 查询参数: │ │
|
||
│ │ • page (int) - 页码 │ │
|
||
│ │ • page_size (int) - 每页数量 │ │
|
||
│ │ • status (string) - 状态筛选 │ │
|
||
│ │ • sort_by (string) - 排序字段 │ │
|
||
│ │ │ │
|
||
│ │ 响应格式: │ │
|
||
│ │ • 200: UserListResponse │ │
|
||
│ │ • 400: ErrorResponse │ │
|
||
│ │ • 500: ErrorResponse │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [添加接口] [编辑接口] [删除接口] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 6. 代码预览器
|
||
|
||
#### 6.1 实时代码预览
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 代码预览 │
|
||
├─────────────────────────────────────────┤
|
||
│ 文件类型: [实体 ▼] [仓储] [服务] [API] │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ // 用户实体 │ │
|
||
│ │ package entities │ │
|
||
│ │ │ │
|
||
│ │ import ( │ │
|
||
│ │ "time" │ │
|
||
│ │ "gorm.io/gorm" │ │
|
||
│ │ ) │ │
|
||
│ │ │ │
|
||
│ │ // User 用户实体 │ │
|
||
│ │ type User struct { │ │
|
||
│ │ ID string `gorm:"primaryKey;type:varchar(36)" comment:"用户ID"` │
|
||
│ │ Username string `gorm:"type:varchar(50);uniqueIndex;not null" comment:"用户名"` │
|
||
│ │ Email string `gorm:"type:varchar(100);uniqueIndex;not null" comment:"邮箱"` │
|
||
│ │ Password string `gorm:"type:varchar(255);not null" comment:"密码"` │
|
||
│ │ Status UserStatus `gorm:"type:varchar(20);default:'active'" comment:"用户状态"` │
|
||
│ │ CreatedAt time.Time `gorm:"autoCreateTime" comment:"创建时间"` │
|
||
│ │ UpdatedAt time.Time `gorm:"autoUpdateTime" comment:"更新时间"` │
|
||
│ │ DeletedAt gorm.DeletedAt `gorm:"index" comment:"软删除时间"` │
|
||
│ │ } │ │
|
||
│ │ │ │
|
||
│ │ // 业务方法 │ │
|
||
│ │ func (u *User) IsActive() bool { │ │
|
||
│ │ return u.Status == UserStatusActive │
|
||
│ │ } │ │
|
||
│ │ │ │
|
||
│ │ func (u *User) CanLogin() bool { │ │
|
||
│ │ return u.IsActive() && !u.IsDeleted() │
|
||
│ │ } │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [复制代码] [下载文件] [格式化] [语法检查] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 7. 生成配置器
|
||
|
||
#### 7.1 生成选项配置
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 生成配置 │
|
||
├─────────────────────────────────────────┤
|
||
│ 生成选项 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ ☑ 生成实体文件 │ │
|
||
│ │ ☑ 生成仓储接口和实现 │ │
|
||
│ │ ☑ 生成应用服务 │ │
|
||
│ │ ☑ 生成DTO对象 │ │
|
||
│ │ ☑ 生成HTTP处理器 │ │
|
||
│ │ ☑ 生成路由配置 │ │
|
||
│ │ ☑ 生成单元测试 │ │
|
||
│ │ ☑ 生成集成测试 │ │
|
||
│ │ ☑ 生成API文档 │ │
|
||
│ │ ☑ 更新依赖注入配置 │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 输出配置 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 输出目录: [./internal ] │ │
|
||
│ │ 备份文件: ☑ 是 ☐ 否 │ │
|
||
│ │ 格式化代码: ☑ 是 ☐ 否 │ │
|
||
│ │ 运行测试: ☑ 是 ☐ 否 │ │
|
||
│ │ 语法检查: ☑ 是 ☐ 否 │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ 模板配置 │
|
||
│ ┌─────────────────────────────────────┐ │
|
||
│ │ 语言: [中文 ▼] [英文] │ │
|
||
│ │ 风格: [标准 ▼] [简洁] [详细] │ │
|
||
│ │ 注释风格: [中文 ▼] [英文] [混合] │ │
|
||
│ │ 错误处理: [统一 ▼] [详细] [简洁] │ │
|
||
│ └─────────────────────────────────────┘ │
|
||
│ │
|
||
│ [生成代码] [预览生成] [保存配置] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
## 技术实现
|
||
|
||
### 1. 前端技术栈
|
||
|
||
#### 1.1 核心框架
|
||
```javascript
|
||
// 技术栈选择
|
||
- React 18 + TypeScript
|
||
- Vite (构建工具)
|
||
- Tailwind CSS (样式框架)
|
||
- Zustand (状态管理)
|
||
- React Router (路由管理)
|
||
```
|
||
|
||
#### 1.2 UI组件库
|
||
```javascript
|
||
// 组件库
|
||
- Ant Design / Element Plus
|
||
- React Flow (流程图)
|
||
- Monaco Editor (代码编辑器)
|
||
- React DnD (拖拽功能)
|
||
- React Hook Form (表单管理)
|
||
```
|
||
|
||
#### 1.3 可视化库
|
||
```javascript
|
||
// 可视化组件
|
||
- D3.js (数据可视化)
|
||
- React Flow (流程图)
|
||
- Vis.js (关系图)
|
||
- Chart.js (图表)
|
||
```
|
||
|
||
### 2. 后端技术栈
|
||
|
||
#### 2.1 API服务
|
||
```go
|
||
// 后端技术栈
|
||
- Gin (Web框架)
|
||
- GORM (数据库ORM)
|
||
- JWT (认证)
|
||
- Swagger (API文档)
|
||
- WebSocket (实时通信)
|
||
```
|
||
|
||
#### 2.2 代码生成引擎
|
||
```go
|
||
// 生成引擎
|
||
- Go Template (模板引擎)
|
||
- AST (代码分析)
|
||
- File System (文件操作)
|
||
- Git (版本控制)
|
||
```
|
||
|
||
### 3. 数据存储
|
||
|
||
#### 3.1 数据库设计
|
||
```sql
|
||
-- 项目表
|
||
CREATE TABLE projects (
|
||
id VARCHAR(36) PRIMARY KEY,
|
||
name VARCHAR(100) NOT NULL,
|
||
module_path VARCHAR(200) NOT NULL,
|
||
author VARCHAR(100),
|
||
version VARCHAR(20),
|
||
config JSON,
|
||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||
);
|
||
|
||
-- 领域表
|
||
CREATE TABLE domains (
|
||
id VARCHAR(36) PRIMARY KEY,
|
||
project_id VARCHAR(36) NOT NULL,
|
||
name VARCHAR(50) NOT NULL,
|
||
description TEXT,
|
||
config JSON,
|
||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||
FOREIGN KEY (project_id) REFERENCES projects(id)
|
||
);
|
||
|
||
-- 实体表
|
||
CREATE TABLE entities (
|
||
id VARCHAR(36) PRIMARY KEY,
|
||
domain_id VARCHAR(36) NOT NULL,
|
||
name VARCHAR(50) NOT NULL,
|
||
description TEXT,
|
||
fields JSON,
|
||
methods JSON,
|
||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||
FOREIGN KEY (domain_id) REFERENCES domains(id)
|
||
);
|
||
|
||
-- 服务表
|
||
CREATE TABLE services (
|
||
id VARCHAR(36) PRIMARY KEY,
|
||
domain_id VARCHAR(36) NOT NULL,
|
||
name VARCHAR(50) NOT NULL,
|
||
type ENUM('application', 'domain', 'infrastructure'),
|
||
methods JSON,
|
||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||
FOREIGN KEY (domain_id) REFERENCES domains(id)
|
||
);
|
||
|
||
-- API表
|
||
CREATE TABLE apis (
|
||
id VARCHAR(36) PRIMARY KEY,
|
||
domain_id VARCHAR(36) NOT NULL,
|
||
path VARCHAR(200) NOT NULL,
|
||
method VARCHAR(10) NOT NULL,
|
||
handler VARCHAR(100),
|
||
summary TEXT,
|
||
config JSON,
|
||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||
FOREIGN KEY (domain_id) REFERENCES domains(id)
|
||
);
|
||
```
|
||
|
||
## 部署方案
|
||
|
||
### 1. 开发环境
|
||
|
||
#### 1.1 本地开发
|
||
```bash
|
||
# 前端开发
|
||
cd ddd-gen-ui
|
||
npm install
|
||
npm run dev
|
||
|
||
# 后端开发
|
||
cd ddd-gen-server
|
||
go mod tidy
|
||
go run main.go
|
||
|
||
# 数据库
|
||
docker-compose up -d postgres redis
|
||
```
|
||
|
||
#### 1.2 Docker开发
|
||
```yaml
|
||
# docker-compose.dev.yml
|
||
version: '3.8'
|
||
services:
|
||
frontend:
|
||
build: ./ddd-gen-ui
|
||
ports:
|
||
- "3000:3000"
|
||
volumes:
|
||
- ./ddd-gen-ui:/app
|
||
- /app/node_modules
|
||
environment:
|
||
- REACT_APP_API_URL=http://localhost:8080
|
||
|
||
backend:
|
||
build: ./ddd-gen-server
|
||
ports:
|
||
- "8080:8080"
|
||
volumes:
|
||
- ./ddd-gen-server:/app
|
||
environment:
|
||
- DB_HOST=postgres
|
||
- REDIS_HOST=redis
|
||
|
||
postgres:
|
||
image: postgres:15
|
||
environment:
|
||
- POSTGRES_DB=ddd_gen
|
||
- POSTGRES_USER=ddd_gen
|
||
- POSTGRES_PASSWORD=ddd_gen
|
||
ports:
|
||
- "5432:5432"
|
||
volumes:
|
||
- postgres_data:/var/lib/postgresql/data
|
||
|
||
redis:
|
||
image: redis:7-alpine
|
||
ports:
|
||
- "6379:6379"
|
||
|
||
volumes:
|
||
postgres_data:
|
||
```
|
||
|
||
### 2. 生产环境
|
||
|
||
#### 2.1 容器化部署
|
||
```yaml
|
||
# docker-compose.prod.yml
|
||
version: '3.8'
|
||
services:
|
||
nginx:
|
||
image: nginx:alpine
|
||
ports:
|
||
- "80:80"
|
||
- "443:443"
|
||
volumes:
|
||
- ./nginx.conf:/etc/nginx/nginx.conf
|
||
- ./ssl:/etc/nginx/ssl
|
||
depends_on:
|
||
- frontend
|
||
- backend
|
||
|
||
frontend:
|
||
build: ./ddd-gen-ui
|
||
environment:
|
||
- NODE_ENV=production
|
||
- REACT_APP_API_URL=https://api.ddd-gen.com
|
||
|
||
backend:
|
||
build: ./ddd-gen-server
|
||
environment:
|
||
- GIN_MODE=release
|
||
- DB_HOST=postgres
|
||
- REDIS_HOST=redis
|
||
depends_on:
|
||
- postgres
|
||
- redis
|
||
|
||
postgres:
|
||
image: postgres:15
|
||
environment:
|
||
- POSTGRES_DB=ddd_gen
|
||
- POSTGRES_USER=ddd_gen
|
||
- POSTGRES_PASSWORD=${DB_PASSWORD}
|
||
volumes:
|
||
- postgres_data:/var/lib/postgresql/data
|
||
restart: unless-stopped
|
||
|
||
redis:
|
||
image: redis:7-alpine
|
||
volumes:
|
||
- redis_data:/data
|
||
restart: unless-stopped
|
||
|
||
volumes:
|
||
postgres_data:
|
||
redis_data:
|
||
```
|
||
|
||
#### 2.2 Kubernetes部署
|
||
```yaml
|
||
# k8s-deployment.yaml
|
||
apiVersion: apps/v1
|
||
kind: Deployment
|
||
metadata:
|
||
name: ddd-gen-frontend
|
||
spec:
|
||
replicas: 3
|
||
selector:
|
||
matchLabels:
|
||
app: ddd-gen-frontend
|
||
template:
|
||
metadata:
|
||
labels:
|
||
app: ddd-gen-frontend
|
||
spec:
|
||
containers:
|
||
- name: frontend
|
||
image: ddd-gen/frontend:latest
|
||
ports:
|
||
- containerPort: 3000
|
||
resources:
|
||
requests:
|
||
memory: "128Mi"
|
||
cpu: "100m"
|
||
limits:
|
||
memory: "256Mi"
|
||
cpu: "200m"
|
||
|
||
---
|
||
apiVersion: v1
|
||
kind: Service
|
||
metadata:
|
||
name: ddd-gen-frontend-service
|
||
spec:
|
||
selector:
|
||
app: ddd-gen-frontend
|
||
ports:
|
||
- port: 80
|
||
targetPort: 3000
|
||
type: LoadBalancer
|
||
```
|
||
|
||
## 用户体验设计
|
||
|
||
### 1. 交互设计
|
||
|
||
#### 1.1 拖拽操作
|
||
- **实体拖拽**: 从组件库拖拽实体到设计器
|
||
- **字段拖拽**: 拖拽字段到实体中
|
||
- **关系拖拽**: 拖拽连线建立实体关系
|
||
- **方法拖拽**: 拖拽方法到实体或服务中
|
||
|
||
#### 1.2 快捷键支持
|
||
```javascript
|
||
// 快捷键配置
|
||
const shortcuts = {
|
||
'Ctrl+N': '新建项目',
|
||
'Ctrl+O': '打开项目',
|
||
'Ctrl+S': '保存项目',
|
||
'Ctrl+Shift+S': '另存为',
|
||
'Ctrl+Z': '撤销',
|
||
'Ctrl+Y': '重做',
|
||
'Ctrl+D': '复制',
|
||
'Ctrl+X': '剪切',
|
||
'Ctrl+V': '粘贴',
|
||
'Delete': '删除',
|
||
'F5': '刷新',
|
||
'Ctrl+P': '预览',
|
||
'Ctrl+G': '生成代码'
|
||
};
|
||
```
|
||
|
||
#### 1.3 智能提示
|
||
- **字段类型提示**: 根据字段名自动推荐类型
|
||
- **验证规则提示**: 根据字段类型推荐验证规则
|
||
- **方法名提示**: 根据实体名推荐方法名
|
||
- **API路径提示**: 根据RESTful规范推荐路径
|
||
|
||
### 2. 响应式设计
|
||
|
||
#### 2.1 多设备支持
|
||
```css
|
||
/* 响应式断点 */
|
||
@media (max-width: 768px) {
|
||
/* 移动端布局 */
|
||
.sidebar { display: none; }
|
||
.main-content { width: 100%; }
|
||
.toolbar { flex-direction: column; }
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
/* 平板端布局 */
|
||
.sidebar { width: 200px; }
|
||
.main-content { width: calc(100% - 200px); }
|
||
}
|
||
|
||
@media (min-width: 1025px) {
|
||
/* 桌面端布局 */
|
||
.sidebar { width: 250px; }
|
||
.main-content { width: calc(100% - 250px); }
|
||
}
|
||
```
|
||
|
||
#### 2.2 主题支持
|
||
```javascript
|
||
// 主题配置
|
||
const themes = {
|
||
light: {
|
||
primary: '#1890ff',
|
||
background: '#ffffff',
|
||
text: '#000000',
|
||
border: '#d9d9d9'
|
||
},
|
||
dark: {
|
||
primary: '#177ddc',
|
||
background: '#141414',
|
||
text: '#ffffff',
|
||
border: '#434343'
|
||
}
|
||
};
|
||
```
|
||
|
||
## 扩展功能
|
||
|
||
### 1. 插件系统
|
||
|
||
#### 1.1 插件接口
|
||
```typescript
|
||
// 插件接口定义
|
||
interface Plugin {
|
||
name: string;
|
||
version: string;
|
||
description: string;
|
||
author: string;
|
||
icon: string;
|
||
|
||
// 生命周期钩子
|
||
onInstall(): void;
|
||
onUninstall(): void;
|
||
onActivate(): void;
|
||
onDeactivate(): void;
|
||
|
||
// 功能钩子
|
||
onEntityCreate?(entity: Entity): void;
|
||
onEntityUpdate?(entity: Entity): void;
|
||
onCodeGenerate?(config: GenerateConfig): void;
|
||
}
|
||
```
|
||
|
||
#### 1.2 内置插件
|
||
```javascript
|
||
// 内置插件列表
|
||
const builtinPlugins = [
|
||
{
|
||
name: 'linter',
|
||
description: '代码规范检查',
|
||
icon: '🔍'
|
||
},
|
||
{
|
||
name: 'test-generator',
|
||
description: '测试代码生成',
|
||
icon: '🧪'
|
||
},
|
||
{
|
||
name: 'docs-generator',
|
||
description: '文档生成',
|
||
icon: '📚'
|
||
},
|
||
{
|
||
name: 'migration-generator',
|
||
description: '数据库迁移生成',
|
||
icon: '🗄️'
|
||
}
|
||
];
|
||
```
|
||
|
||
### 2. 协作功能
|
||
|
||
#### 2.1 实时协作
|
||
```javascript
|
||
// WebSocket实时通信
|
||
const socket = new WebSocket('ws://localhost:8080/ws');
|
||
|
||
socket.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
|
||
switch (data.type) {
|
||
case 'entity_updated':
|
||
updateEntity(data.entity);
|
||
break;
|
||
case 'user_joined':
|
||
addCollaborator(data.user);
|
||
break;
|
||
case 'user_left':
|
||
removeCollaborator(data.user);
|
||
break;
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 2.2 版本控制
|
||
```javascript
|
||
// Git集成
|
||
class GitManager {
|
||
async init() {
|
||
// 初始化Git仓库
|
||
}
|
||
|
||
async commit(message) {
|
||
// 提交更改
|
||
}
|
||
|
||
async push() {
|
||
// 推送到远程
|
||
}
|
||
|
||
async pull() {
|
||
// 拉取更新
|
||
}
|
||
|
||
async branch(name) {
|
||
// 创建分支
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 导入导出
|
||
|
||
#### 3.1 格式支持
|
||
```javascript
|
||
// 支持的导入格式
|
||
const importFormats = [
|
||
'json', // JSON配置
|
||
'yaml', // YAML配置
|
||
'xml', // XML配置
|
||
'sql', // 数据库结构
|
||
'openapi', // OpenAPI规范
|
||
'swagger', // Swagger文档
|
||
'plantuml', // PlantUML图
|
||
'mermaid' // Mermaid图
|
||
];
|
||
|
||
// 支持的导出格式
|
||
const exportFormats = [
|
||
'json', // JSON配置
|
||
'yaml', // YAML配置
|
||
'zip', // 完整项目
|
||
'tar.gz', // 压缩包
|
||
'docker', // Docker镜像
|
||
'helm', // Helm Chart
|
||
'terraform' // Terraform配置
|
||
];
|
||
```
|
||
|
||
## 开发计划
|
||
|
||
### 第一阶段：基础界面 (4周)
|
||
- [ ] 项目管理系统
|
||
- [ ] 基础UI框架
|
||
- [ ] 实体设计器
|
||
- [ ] 字段配置器
|
||
|
||
### 第二阶段：核心功能 (6周)
|
||
- [ ] 领域设计器
|
||
- [ ] 服务配置器
|
||
- [ ] API设计器
|
||
- [ ] 代码预览器
|
||
|
||
### 第三阶段：高级功能 (4周)
|
||
- [ ] 可视化关系图
|
||
- [ ] 拖拽操作
|
||
- [ ] 实时协作
|
||
- [ ] 插件系统
|
||
|
||
### 第四阶段：优化完善 (2周)
|
||
- [ ] 性能优化
|
||
- [ ] 用户体验
|
||
- [ ] 文档完善
|
||
- [ ] 测试覆盖
|
||
|
||
## 总结
|
||
|
||
这个可视化界面将为DDD代码生成器提供：
|
||
|
||
### 🎯 核心优势
|
||
1. **直观易用**: 图形化界面，降低学习门槛
|
||
2. **可视化设计**: 拖拽式操作，所见即所得
|
||
3. **实时预览**: 代码实时预览，即时反馈
|
||
4. **协作支持**: 多人实时协作，提升团队效率
|
||
5. **扩展性强**: 插件系统，支持功能扩展
|
||
|
||
### 🚀 技术特色
|
||
1. **现代化技术栈**: React + TypeScript + Go
|
||
2. **响应式设计**: 支持多设备访问
|
||
3. **实时通信**: WebSocket实时协作
|
||
4. **版本控制**: Git集成
|
||
5. **容器化部署**: Docker + Kubernetes
|
||
|
||
### 💡 创新点
|
||
1. **可视化DDD设计**: 首次将DDD设计可视化
|
||
2. **智能代码生成**: 基于配置的智能生成
|
||
3. **实时协作**: 支持多人同时编辑
|
||
4. **插件生态**: 可扩展的插件系统
|
||
|
||
这个可视化界面将大大提升DDD代码生成器的易用性和实用性，让DDD架构设计变得更加直观和高效！
|
||
|
||
你觉得这个可视化界面策划方案如何？需要我开始实现吗？ |