仪表盘设计器

概述

仪表盘设计器是一个可视化拖拽式工具，用于设计数据看板页面。支持 28 种 Widget 组件、Grid 布局、多种数据源、实时预览。

组件结构

components/dashboard-design/
├── DashboardDesigner.vue        # 主设计器
├── MaterialPanel.vue            # 左侧物料面板（Widget 列表）
├── DesignCanvas.vue             # 中间设计画布（Grid Layout）
├── AttributePanel.vue           # 右侧属性面板
├── DashboardRenderer.vue        # 渲染器（运行时）
├── WidgetRenderer.vue           # Widget 渲染器
├── widgets/                     # 28 种 Widget 组件
│   ├── StatCard.vue
│   ├── ChartLine.vue
│   ├── ChartBar.vue
│   ├── ChartPie.vue
│   ├── DataTable.vue
│   ├── RankingList.vue
│   └── ...
└── config/
    ├── widget-config.ts         # Widget 默认配置
    └── data-source-config.ts    # 数据源配置

设计流程

1. 从物料面板拖拽 Widget 到画布
2. Grid Layout 自动布局（12列网格）
3. 调整 Widget 位置和大小
4. 在属性面板配置：标题、样式、数据源、字段映射
5. 实时预览效果
6. 保存 page_config（JSONB）

Widget 组件

图表类（12种）

Widget	组件	说明
chart-line	ChartLine	折线图
chart-bar	ChartBar	柱状图
chart-pie	ChartPie	饼图
chart-gauge	ChartGauge	仪表盘
chart-area	ChartArea	面积图
chart-radar	ChartRadar	雷达图
chart-funnel	ChartFunnel	漏斗图
chart-scatter	ChartScatter	散点图
chart-ring	ChartRing	环形图
chart-heatmap	ChartHeatmap	热力图
chart-kline	ChartKline	K线图
chart-sankey	ChartSankey	桑基图

所有图表基于 ECharts 实现，支持自适应尺寸和主题切换。

数据展示类（7种）

Widget	说明
stat-card	统计卡片（数值 + 趋势 + 图标）
progress-card	进度卡片（进度条 + 百分比）
data-table	数据表格
ranking-list	排行榜
todo-list	待办列表
notice-list	通知列表
announcement-list	公告列表

功能类（9种）

Widget	说明
quick-links	快捷链接
welcome-card	欢迎卡片
calendar	日历
countdown	倒计时
clock	时钟
weather	天气
image-carousel	图片轮播
form-render	嵌入表单渲染
iframe	内嵌网页

Grid Layout

基于 12 列网格系统：

interface WidgetLayout {
  id: string;
  type: string;
  x: number;          // 列位置（0-11）
  y: number;          // 行位置
  w: number;          // 宽度（1-12列）
  h: number;          // 高度（行数）
  title: string;
  props: WidgetProps;
  style: WidgetStyle;
  dataSource: DataSourceConfig;
}

画布配置：

属性	说明	默认值
columns	列数	12
rowHeight	行高（px）	50
margin	间距 [x, y]	[12, 12]
backgroundColor	背景色	#f5f7fa

数据源配置

每个 Widget 可配置独立的数据源：

静态数据

{
  "type": "static",
  "data": [
    { "name": "一月", "value": 1200 },
    { "name": "二月", "value": 1500 }
  ]
}

API 数据源

{
  "type": "api",
  "apiUrl": "/api/core/stats/orders",
  "apiMethod": "GET",
  "apiParams": { "period": "month" },
  "dataPath": "data.items",
  "refreshInterval": 60,
  "refreshEnabled": true
}

系统数据源

{
  "type": "dataSource",
  "dataSourceId": "ds_001",
  "params": { "startDate": "2024-01-01" }
}

字段映射

{
  "fieldMappings": [
    { "source": "order_date", "target": "xAxis" },
    { "source": "total_amount", "target": "value" },
    { "source": "category", "target": "series" }
  ]
}

Widget 样式

属性面板可配置的样式：

分类	属性
背景	backgroundColor, backgroundImage
边框	borderWidth, borderColor, borderStyle, borderRadius
阴影	shadowEnabled, shadowColor, shadowBlur, shadowOffset
内边距	padding
标题	titleShow, titleFontSize, titleColor, titleAlign, titleFontWeight

渲染器

DashboardRenderer

运行时渲染组件，加载 page_config 并渲染所有 Widget：

<DashboardRenderer :config="pageConfig" :editable="false" />

WidgetRenderer

单个 Widget 渲染器，根据 type 动态加载对应组件：

<WidgetRenderer :widget="widgetConfig" />

数据加载流程：

1. 根据 dataSource.type 获取数据
2. 应用 fieldMappings 转换数据格式
3. 传递给具体 Widget 组件渲染
4. 如配置 refreshInterval，定时刷新

页面管理

page-manager/index.vue

卡片列表页面（与表单管理一致的交互模式）：

• 搜索 + 分页 + 响应式网格
• 卡片显示：名称、编码、分类、状态
• 操作：编辑 / 发布 / 取消发布 / 复制 / 删除

page-render/index.vue

从路由获取 pageCode，加载 page_config 并用 DashboardRenderer 渲染。

发布时创建菜单：Menu(path=/page-render/{code}, component=_core/page-render/index, type=online_page)