页面管理与仪表盘设计

概述

页面管理模块允许用户通过可视化仪表盘设计器创建自定义页面，支持 28 种组件、多种数据源、拖拽布局、实时预览。

架构设计

┌────────────────────────────┐
│      页面管理 page_manager   │
│  PageMeta (page_config JSONB)│
│  发布 → 创建 Menu            │
└──────────┬─────────────────┘
           │
           ▼
┌────────────────────────────┐
│    仪表盘设计器（前端）       │
│  MaterialPanel  物料面板     │
│  DesignCanvas   设计画布     │
│  AttributePanel 属性面板     │
└──────────┬─────────────────┘
           │ 渲染
           ▼
┌────────────────────────────┐
│    DashboardRenderer        │
│  GridLayout + WidgetRenderer │
│  28种Widget组件              │
└────────────────────────────┘

数据模型

PageMeta

字段	类型	说明
application_id	String	所属应用
name	String	页面名称
code	String	页面编码（唯一）
category	String	分类
status	String	draft / published
version	Integer	版本号
page_config	JSONB	仪表盘设计配置

page_config 结构

{
  "id": "dashboard_1",
  "name": "运营数据看板",
  "columns": 12,
  "rowHeight": 50,
  "margin": [12, 12],
  "backgroundColor": "#f5f7fa",
  "showOuterMargin": true,
  "widgets": [
    {
      "id": "widget_1",
      "type": "stat-card",
      "x": 0, "y": 0, "w": 3, "h": 3,
      "title": "今日订单",
      "props": { ... },
      "style": { ... },
      "dataSource": { ... }
    }
  ]
}

Widget 组件

28 种组件类型

图表类：

类型	说明
chart-line	折线图
chart-bar	柱状图
chart-pie	饼图
chart-gauge	仪表盘
chart-area	面积图
chart-radar	雷达图
chart-funnel	漏斗图
chart-scatter	散点图
chart-ring	环形图
chart-heatmap	热力图
chart-kline	K线图
chart-sankey	桑基图

数据展示类：

类型	说明
stat-card	统计卡片
progress-card	进度卡片
data-table	数据表格
ranking-list	排行榜
todo-list	待办列表
notice-list	通知列表
announcement-list	公告列表

功能类：

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

数据源配置

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

数据源类型	说明
static	静态数据，直接在配置中定义
api	自定义 API URL
dataSource	系统数据源（通过 data_source 模块）

DataSourceConfig 结构

{
  "type": "api",
  "apiUrl": "/api/core/stats/orders",
  "apiMethod": "GET",
  "apiHeaders": {},
  "apiParams": {},
  "dataPath": "data.items",
  "fieldMappings": [
    {"source": "order_date", "target": "xAxis"},
    {"source": "total_amount", "target": "value"}
  ],
  "refreshInterval": 60,
  "refreshEnabled": true
}

字段映射

通过 fieldMappings 将数据源字段映射到组件需要的字段，实现数据适配。

Widget 样式

每个 Widget 支持丰富的样式配置：

{
  "backgroundColor": "#ffffff",
  "borderWidth": 1,
  "borderColor": "#e4e7ed",
  "borderStyle": "solid",
  "borderRadius": 8,
  "shadowEnabled": true,
  "shadowColor": "rgba(0,0,0,0.1)",
  "shadowBlur": 10,
  "padding": "16px",
  "titleShow": true,
  "titleFontSize": 16,
  "titleColor": "#303133",
  "titleAlign": "left"
}

发布机制

页面发布时创建菜单：

Menu(
    path=f"/page-render/{code}",
    component="_core/page-render/index",
    type="online_page"
)

前端通过 page-render 组件加载 page_config 并用 DashboardRenderer 渲染。

API 列表

方法	路径	说明
GET	/page/list	页面列表
POST	/page/	创建页面
PUT	/page/{id}	更新页面
GET	/page/code/{code}	按编码获取
POST	/page/{id}/publish	发布页面
POST	/page/{id}/unpublish	取消发布
POST	/page/{id}/copy	复制页面
GET	/page/export	导出配置
POST	/page/import	导入配置