Dashboard Viewer - 仪表盘查看器

一个简单易用的仪表盘 JSON 配置文件查看器，可以直接导入 JSON 文件并完整展示仪表盘布局。

✨ 特性

• 📂 JSON 文件导入 - 支持拖拽或点击上传 JSON 配置文件
• 👀 即时预览 - 导入后立即展示仪表盘布局
• 📐 网格布局 - 完整支持多图层、网格布局系统
• 🎨 三种模式 - 支持 Pro、Show、App 三种显示模式
• 📱 响应式 - 大屏模式自动缩放适配
• 🎯 纯查看 - 只查看不编辑，专注于展示

🚀 快速开始

1. 安装依赖

cd dashboard-viewer
npm install

2. 运行项目

npm run dev

浏览器会自动打开 http://localhost:3000

3. 导入配置

• 点击「导入 JSON 配置」按钮选择文件
• 或者直接拖拽 JSON 文件到上传区域
• 也可以点击「加载示例配置」查看效果

📋 JSON 配置格式

基本结构

{
  "name": "我的仪表盘",
  "id": "dashboard-1",
  "type": "show",
  "version": "2.0.0",
  "sheets": [
    {
      "name": "首页",
      "col": 20,
      "screenWidth": 1920,
      "screenHeight": 1080,
      "background": "defaultBg1",
      "layers": [
        {
          "id": "layer-1",
          "name": "图层 1",
          "visible": true,
          "opacity": 100,
          "order": 0,
          "locked": false,
          "components": [
            {
              "i": "item-1",
              "x": 0,
              "y": 0,
              "w": 10,
              "h": 5,
              "type": "bar",
              "id": "chart-1",
              "options": {},
              "data": []
            }
          ]
        }
      ]
    }
  ]
}

字段说明

Dashboard 配置

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | name | string | 否 | 仪表盘名称 | | id | string | 否 | 仪表盘唯一标识 | | type | string | 是 | 显示模式：pro/show/app | | version | string | 否 | 版本号 | | sheets | array | 是 | Sheet 列表 |

Sheet 配置

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | name | string | 是 | Sheet 名称 | | col | number | 是 | 网格列数（通常为 20） | | screenWidth | number | 是 | 屏幕宽度（px） | | screenHeight | number | 是 | 屏幕高度（px） | | background | string | 否 | 背景图 URL 或关键字 | | layers | array | 是 | 图层列表 |

Layer 配置

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | id | string | 是 | 图层唯一标识 | | name | string | 是 | 图层名称 | | visible | boolean | 是 | 是否可见 | | opacity | number | 是 | 透明度（0-100） | | order | number | 是 | 层级顺序 | | locked | boolean | 是 | 是否锁定 | | components | array | 是 | 组件列表 |

Component 配置

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | i | string | 是 | 组件唯一标识（grid-layout 使用） | | x | number | 是 | X 坐标（网格单位） | | y | number | 是 | Y 坐标（网格单位） | | w | number | 是 | 宽度（网格单位） | | h | number | 是 | 高度（网格单位） | | type | string | 是 | 组件类型 | | id | string | 是 | 组件 ID | | options | object | 否 | 组件选项配置 | | data | array | 否 | 组件数据 |

🎯 显示模式

Pro 模式

{ "type": "pro" }

专业模式，固定布局，适合专业仪表盘。

Show 模式

{ "type": "show" }

大屏展示模式，自动缩放适配屏幕，适合大屏展示。

App 模式

{ "type": "app" }

应用模式，响应式布局，适合移动端应用。

📦 导出 JSON

从原项目导出配置：

1. 在编辑页面，点击「导出」或「保存」
2. 选择导出为 JSON 文件
3. 将导出的 JSON 文件导入到本查看器

🔧 开发

项目结构

dashboard-viewer/
├── src/
│   ├── components/
│   │   └── DashboardPreview.vue  # 预览组件
│   ├── types/
│   │   └── index.ts              # 类型定义
│   ├── App.vue                   # 主应用
│   ├── main.ts                   # 入口文件
│   └── style.css                 # 全局样式
├── index.html
├── package.json
├── vite.config.ts
└── README.md

构建生产版本

npm run build

构建产物在 dist/ 目录。

预览生产版本

npm run preview

⚠️ 注意事项

1. 兼容性：支持原项目导出的 JSON 配置（包括旧版本格式）
2. 组件渲染：当前版本使用占位符显示组件位置和类型
3. 文件大小：建议 JSON 文件小于 10MB
4. 浏览器：推荐使用 Chrome、Firefox、Edge 等现代浏览器

🔌 扩展功能

如需实际渲染具体组件（如图表、表格等）：

1. 在 src/components/ 中创建对应的组件
2. 在 DashboardPreview.vue 中注册组件
3. 替换占位符为实际组件

示例：

<!-- 替换占位符 -->
<component 
  :is="componentMap[item.type]" 
  v-if="componentMap[item.type]"
  :conf="item" 
/>

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

提示：这是一个纯查看工具，不包含编辑功能。如需编辑，请使用原项目的编辑器。