示例概览
CmdAdmin 提供了丰富的示例代码，涵盖了各种常见的业务场景和第三方组件集成。
表格示例
复杂表格
展示多级表头、合并单元格、行内编辑、树形表格、拖拽排序等高级功能。
包含功能：
- 多级表头与合并单元格
- 行内编辑表格
- 树形表格（懒加载）
- 拖拽排序表格
- 虚拟滚动（大数据量优化）
表单示例
动态表单
使用 form-create 动态渲染表单，支持表单设计器。
包含功能：
- 表单列表管理
- 动态表单渲染
- 表单验证
- 表单数据预览
- 表单设计器拖拽配置
Excel 操作
Excel 导入导出
使用 SheetJS (xlsx) 实现 Excel 文件的导入导出功能。
包含功能：
- Excel 文件导入（解析数据）
- Excel 文件导出（生成文件）
- 大数据量导出优化
- 自定义样式导出
富文本编辑
富文本编辑器
集成 WangEditor 富文本编辑器。
包含功能：
- 基础文本编辑
- 图片上传
- 代码高亮
- Markdown 支持
- 内容预览
代码编辑器
代码编辑器
集成 Monaco Editor（VS Code 同款编辑器）。
包含功能：
- 多语言支持（JavaScript、TypeScript、Java、SQL 等）
- 语法高亮
- 智能提示
- 代码格式化
- 主题切换
在线表格
在线 Excel 表格
集成 LuckySheet 在线电子表格。
包含功能：
- 类 Excel 操作体验
- 单元格编辑
- 公式计算
- 数据导入导出
- 协同编辑支持
图片裁剪
图片裁剪
集成 Vue Cropper 图片裁剪组件。
包含功能：
- 图片裁剪
- 固定比例裁剪
- 圆形裁剪
- 实时预览
- 上传功能
拖拽排序
看板拖拽
使用 SortableJS 实现看板拖拽功能。
包含功能：
- 拖拽排序
- 跨列表拖拽
- 看板布局
- 任务管理
图表展示
ECharts 图表
集成 ECharts 数据可视化库。
包含功能：
- 折线图
- 柱状图
- 饼图
- 散点图
- 雷达图
- 地图
- 实时数据更新
其他示例
| 示例 | 说明 | 技术点 |
|---|---|---|
| 高德地图 | 地图集成示例 | 高德地图 API |
| 打印功能 | 页面打印示例 | 浏览器打印 API |
| 实时数据 | WebSocket 实时推送 | WebSocket |
| 虚拟滚动 | 大数据列表优化 | 虚拟滚动技术 |
| 向导 | 分步引导组件 | 步骤条组件 |
| 仪表盘 | 数据可视化仪表盘 | ECharts + 卡片布局 |
快速开始
所有示例代码都位于 admin-web/src/views/example/ 目录下，你可以直接查看源码或运行项目查看效果。
bash
cd admin-web
npm run dev然后访问 http://localhost:5173 查看示例。
示例结构
views/example/
├── charts/ # ECharts 图表示例
├── dashboard/ # 仪表盘示例
├── designer/ # 表单设计器
├── editor/ # 富文本编辑器
├── excel/ # Excel 导入导出
├── form/ # 表单示例
├── image-cropper/ # 图片裁剪
├── kanban/ # 看板
├── luckysheet/ # 在线 Excel 表格
├── map/ # 高德地图
├── monaco/ # 代码编辑器
├── print/ # 打印功能
├── realtime/ # 实时数据
├── table/ # 表格示例
├── upload/ # 文件上传
├── virtual-scroll/ # 虚拟滚动
└── wizard/ # 向导使用建议
- 复制修改：示例代码可以直接复制到项目中使用，根据业务需求进行修改
- 组件封装：建议将常用功能封装成业务组件，提高复用性
- 性能优化：大数据量场景注意使用虚拟滚动等优化手段
- 类型安全：示例代码使用 TypeScript，建议保持类型定义