mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-26 22:31:21 +00:00
refactor(module): 重构模块结构，将示例模块和AI模块迁移至应用模块
- 删除原有的示例模块(module_example)和AI模块(module_ai) - 在应用模块(module_application)下新增AI子模块和示例子模块 - 更新相关路由配置，移除不再使用的模块路由 - 调整定时任务模块从监控模块迁移至应用模块 - 更新前端API路径和组件文件结构 - 修正数据库表名前缀，统一使用'app_'作为应用模块表前缀
This commit is contained in:
zhangtao
@@ -0,0 +1,153 @@
|
||||
# 低代码页面生成器
|
||||
|
||||
一个基于 Vue3 + TypeScript + Element Plus 的可视化页面生成器，支持拖拽式组件设计和代码生成。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 🎨 **可视化设计**: 拖拽式组件设计，所见即所得
|
||||
- 📦 **丰富组件**: 支持所有 Element Plus 组件
|
||||
- ⚙️ **属性编辑**: 实时编辑组件属性
|
||||
- 💾 **模板管理**: 保存和加载页面模板
|
||||
- 🔧 **代码生成**: 生成完整的 Vue3 + TypeScript 代码
|
||||
- 📱 **响应式**: 支持移动端适配
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/views/gencode/backcode/
|
||||
├── index.vue # 主界面
|
||||
├── components/
|
||||
│ ├── Palette.vue # 左侧组件库
|
||||
│ ├── Canvas.vue # 中间画布
|
||||
│ ├── CanvasComponent.vue # 画布中的组件
|
||||
│ ├── Inspector.vue # 右侧属性面板
|
||||
│ └── PropertyEditor.vue # 属性编辑器
|
||||
└── utils/
|
||||
├── schema.ts # 组件 Schema 定义
|
||||
└── serializer.ts # 代码生成器
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 添加组件
|
||||
- 从左侧组件库拖拽组件到中间画布
|
||||
- 或点击组件快速添加
|
||||
|
||||
### 2. 编辑组件
|
||||
- 点击画布中的组件选中
|
||||
- 在右侧属性面板编辑属性
|
||||
- 支持样式、事件、插槽等设置
|
||||
|
||||
### 3. 生成代码
|
||||
- 点击顶部"生成代码"按钮
|
||||
- 代码会自动复制到剪贴板
|
||||
- 可选择下载为 .vue 文件
|
||||
|
||||
### 4. 保存模板
|
||||
- 点击"保存模板"按钮
|
||||
- 输入模板名称和描述
|
||||
- 模板会保存到本地存储
|
||||
|
||||
## 支持的组件类型
|
||||
|
||||
### 基础组件
|
||||
- 按钮 (el-button)
|
||||
- 链接 (el-link)
|
||||
- 文本 (el-text)
|
||||
- 图标 (el-icon)
|
||||
|
||||
### 布局组件
|
||||
- 行 (el-row)
|
||||
- 列 (el-col)
|
||||
- 容器 (el-container)
|
||||
|
||||
### 表单组件
|
||||
- 输入框 (el-input)
|
||||
- 选择器 (el-select)
|
||||
- 单选框 (el-radio)
|
||||
- 复选框 (el-checkbox)
|
||||
- 开关 (el-switch)
|
||||
- 滑块 (el-slider)
|
||||
- 日期选择器 (el-date-picker)
|
||||
- 时间选择器 (el-time-picker)
|
||||
- 上传 (el-upload)
|
||||
- 评分 (el-rate)
|
||||
- 颜色选择器 (el-color-picker)
|
||||
|
||||
### 数据展示组件
|
||||
- 卡片 (el-card)
|
||||
- 表格 (el-table)
|
||||
- 轮播图 (el-carousel)
|
||||
- 折叠面板 (el-collapse)
|
||||
- 描述列表 (el-descriptions)
|
||||
- 空状态 (el-empty)
|
||||
- 图片 (el-image)
|
||||
- 分页 (el-pagination)
|
||||
- 进度条 (el-progress)
|
||||
- 结果页 (el-result)
|
||||
- 骨架屏 (el-skeleton)
|
||||
- 统计数值 (el-statistic)
|
||||
- 标签 (el-tag)
|
||||
- 时间线 (el-timeline)
|
||||
- 树形控件 (el-tree)
|
||||
|
||||
### 导航组件
|
||||
- 固钉 (el-affix)
|
||||
- 面包屑 (el-breadcrumb)
|
||||
- 下拉菜单 (el-dropdown)
|
||||
- 菜单 (el-menu)
|
||||
- 页面头部 (el-page-header)
|
||||
- 步骤条 (el-steps)
|
||||
- 标签页 (el-tabs)
|
||||
|
||||
### 反馈组件
|
||||
- 警告提示 (el-alert)
|
||||
- 抽屉 (el-drawer)
|
||||
- 加载 (el-loading)
|
||||
- 消息提示 (el-message)
|
||||
- 消息确认框 (el-message-box)
|
||||
- 通知 (el-notification)
|
||||
- 气泡确认框 (el-popconfirm)
|
||||
- 弹出框 (el-popover)
|
||||
- 文字提示 (el-tooltip)
|
||||
|
||||
### 其他组件
|
||||
- 回到顶部 (el-backtop)
|
||||
- 分割线 (el-divider)
|
||||
- 水印 (el-watermark)
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **Vue 3**: 使用 Composition API
|
||||
- **TypeScript**: 完整的类型支持
|
||||
- **Element Plus**: UI 组件库
|
||||
- **Vite**: 构建工具
|
||||
- **SCSS**: 样式预处理器
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 添加新组件
|
||||
1. 在 `utils/schema.ts` 中添加组件类型
|
||||
2. 在 `COMPONENT_CONFIGS` 中配置组件属性
|
||||
3. 在 `COMPONENT_CATEGORIES` 中分类组件
|
||||
|
||||
### 自定义属性编辑器
|
||||
1. 在 `PropertyEditor.vue` 中添加新的属性类型
|
||||
2. 实现对应的编辑器组件
|
||||
3. 更新属性验证逻辑
|
||||
|
||||
### 扩展代码生成
|
||||
1. 在 `serializer.ts` 中添加新的生成逻辑
|
||||
2. 支持自定义模板和样式
|
||||
3. 添加代码格式化功能
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 组件 ID 必须唯一
|
||||
- 属性值需要符合 Element Plus 组件规范
|
||||
- 生成的代码需要手动验证和测试
|
||||
- 复杂布局建议使用栅格系统
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT License
|
||||
Reference in New Issue
Block a user