mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-26 14:23:48 +00:00

Files

T

zhangtao d943d295d0 refactor(module): 重构模块结构，将示例模块和AI模块迁移至应用模块

- 删除原有的示例模块(module_example)和AI模块(module_ai)
- 在应用模块(module_application)下新增AI子模块和示例子模块
- 更新相关路由配置，移除不再使用的模块路由
- 调整定时任务模块从监控模块迁移至应用模块
- 更新前端API路径和组件文件结构
- 修正数据库表名前缀，统一使用'app_'作为应用模块表前缀

2025-10-05 12:24:40 +08:00

3.7 KiB

Raw Blame History

低代码页面生成器

一个基于 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: 样式预处理器

开发说明

添加新组件

在 utils/schema.ts 中添加组件类型
在 COMPONENT_CONFIGS 中配置组件属性
在 COMPONENT_CATEGORIES 中分类组件

自定义属性编辑器

在 PropertyEditor.vue 中添加新的属性类型
实现对应的编辑器组件
更新属性验证逻辑

扩展代码生成

在 serializer.ts 中添加新的生成逻辑
支持自定义模板和样式
添加代码格式化功能

注意事项

组件 ID 必须唯一
属性值需要符合 Element Plus 组件规范
生成的代码需要手动验证和测试
复杂布局建议使用栅格系统

许可证

MIT License

3.7 KiB Raw Blame History