mixdashboards

MixIoT 显示板组件库 — 支持显示屏（Show）、大屏（Pro）、移动端（App）三种展示模式

当前版本：1.0.91

在 Monorepo 中的定位

本包位于 mixdesign monorepo 的 packages/ 目录，与 apps/mixdesign-yunuis（设计器应用）同属一个仓库：

mixdesign/
├── packages/          ← 本包（mixdashboards）：展示组件、元素库、预览运行时
├── apps/              ← mixdesign-yunuis：可视化设计器
├── pnpm-workspace.yaml
└── package.json

仓库地址

git clone [email protected]:mixiot/v9/frontend/mixdesign.git

| 包名 | 目录 | 说明 | |------|------|------| | mixdashboards | packages/ | 显示板展示组件库，可独立发布 npm | | mixdesign-yunuis | apps/ | 设计器前端，开发时通过 Vite alias 直接引用 packages/src 源码 |

特性

• 三种显示模式：DesignShow（显示屏）、DesignPro（大屏）、DesignApp（移动端）
• 丰富元素库：图表、地图、3D、视频、表格等 40+ 可视化组件（src/elements/）
• 完整运行时 API：页签、图层、弹窗、主题、WebSocket 数据订阅
• LinkHub 通讯：跨组件频道发布/订阅
• 主题切换：亮色 / 暗色，支持运行时切换
• TypeScript：源码为 TS + Vue 3 SFC

目录结构

packages/
├── src/
│   ├── DesignShow.vue      # 显示屏入口
│   ├── DesignPro.vue       # 大屏入口
│   ├── DesignApp.vue       # 移动端入口
│   ├── index.ts            # 包导出入口
│   ├── elements/           # 可视化元素组件（bar、pie、map、3D…）
│   ├── preview/            # 预览运行时（弹窗、菜单、页签栏等）
│   ├── hooks/              # 公共 hooks
│   ├── service/            # API / WebSocket / 鉴权代理
│   ├── utils/              # 工具函数
│   ├── pinia/              # 状态管理
│   ├── i18n/               # 国际化
│   ├── components/         # 公共 UI 组件
│   └── lib/                # 内嵌库（grid-layout-plus、mixment 等）
├── dist/                   # 构建产物（npm 发布）
├── vite.config.ts
└── package.json

使用方式

方式一：Monorepo 内联开发（推荐）

apps/mixdesign-yunuis 在开发/构建时通过 Vite alias 直接引用 packages/src，改 packages 源码后无需重新 link 即可在 design 应用中验证：

# 在 monorepo 根目录
pnpm install

# 仅启动 packages 本地预览（端口 4000）
pnpm dev:dashboards

# 启动设计器应用（端口见 apps/vite.config.ts）
pnpm dev

# 构建 packages + apps
pnpm build

方式二：外部项目 npm 安装

独立项目可通过 npm 安装已发布的包：

pnpm add mixdashboards
# 或
npm install mixdashboards

全局注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import MixDashboards from 'mixdashboards'
import 'element-plus/dist/index.css'
import 'mixdashboards/style'

const app = createApp(App)

app.use(createPinia())
app.use(ElementPlus)
app.use(MixDashboards)
app.mount('#app')

按需引入

import { DesignShow, DesignPro, DesignApp } from 'mixdashboards'
import 'mixdashboards/style'

组件示例

<template>
  <DesignShow
    :script="dashboardData"
    :uid="dashboardId"
    :enable-web-socket="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import { DesignShow } from 'mixdashboards'

const dashboardId = ref('dashboard-001')
const dashboardData = ref({
  type: 'show',
  sheets: [
    {
      name: '页面1',
      layers: [
        {
          id: 'layer-1',
          name: '图层1',
          visible: true,
          opacity: 100,
          components: []
        }
      ]
    }
  ]
})
</script>

运行时 API

组件挂载后，可通过全局对象 window.MixDashboard 控制显示板：

const dashboard = window.MixDashboard

dashboard.on('onReady', () => {
  console.log('Dashboard 已就绪')
})

dashboard.switchSheet(1)

dashboard.showModal({ layerId: 'layer-detail', width: 80, height: 60 })

dashboard.updateComponent('comp-123', {
  data: [{ value: 100, label: '数据' }]
})

dashboard.toggleTheme()

// LinkHub 跨组件通讯
dashboard.publish('sensor-data', { temperature: 25.5 })
dashboard.subscribe('sensor-data', (data) => console.log(data))

组件 Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | script | Object | — | Dashboard 配置数据（必填） | | uid | String | — | Dashboard 唯一标识 | | enableWebSocket | Boolean | true | 是否启用 WebSocket 实时数据 |

鉴权配置

import { configureAuth, getAuthToken, getWsUrl } from 'mixdashboards'

configureAuth({
  // 按项目接入方式配置，详见 service/authProxy.ts
})

完整 API 列表见：

• API_DOCUMENTATION.md — 详细说明
• API_QUICK_REFERENCE.md — 快速查阅
• 使用文档.md — 完整使用手册

本地开发

在 monorepo 根目录执行（不要只在 packages/ 内单独 npm install）：

# 安装全部 workspace 依赖
pnpm install

# packages 独立开发预览 → http://localhost:4000
pnpm dev:dashboards

# 类型检查
pnpm -F mixdashboards type-check

# 仅构建 packages
pnpm build:packages

# 构建并生成类型声明
pnpm -F mixdashboards build:with-types

发布到 npm

# 根目录执行，会先触发 prepublishOnly 构建
pnpm publish

发布前请更新 packages/package.json 中的 version 字段。

依赖要求

Peer Dependencies

| 包 | 版本 | |----|------| | vue | ^3.4.0 | | pinia | ^2.0.0 || ^3.0.0 | | element-plus | ^2.0.0 | | @univerjs/presets | ^0.17.0（可选，表格组件） | | @univerjs/preset-sheets-core | ^0.17.0（可选） |

主要内置依赖

ECharts、Three.js、Leaflet、AG Grid、hls.js、flv.js 等已打包进组件库，外部项目无需重复安装。

浏览器支持

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

相关链接

• Monorepo 仓库
• Issue 反馈
• 设计器应用 — apps/mixdesign-yunuis

许可证

MIT © Mixlinker Technical Team

Copyright © 2014–2026 Mixlinker Networks Inc. All rights reserved.