@com-project/dashboard

通用 Dashboard 组件库 - 可复用的仪表盘组件，包含完整的 GridLayout 和 ChartConfig。

📦 安装

npm install @com-project/dashboard
# 或
yarn add @com-project/dashboard
# 或
pnpm add @com-project/dashboard

🚀 核心组件

DashboardPreview - 仪表盘预览组件

用于展示仪表盘，支持全屏、导出等功能。

<template>
  <DashboardPreview
    :dashboard-id="currentId"
    :dashboard-list="dashboardList"
    @change="onDashboardChange"
    @export="onExport"
  />
</template>

<script setup>
import { DashboardPreview } from '@com-project/dashboard'
import '@com-project/dashboard/style.css'
</script>

Props:

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | dashboardId | string | number | - | 仪表盘ID | | dashboardList | Array | [] | 仪表盘列表 | | showToolbar | boolean | true | 是否显示工具栏 | | responsive | boolean | true | 是否响应式 | | exportText | string | '导出' | 导出按钮文本 |

Events:

| 事件 | 参数 | 说明 | |------|------|------| | change | id | 仪表盘切换 | | fullscreen | isFullScreen | 全屏状态变化 | | export | - | 导出触发 |

DashboardEditor - 仪表盘编辑组件

用于编辑仪表盘，支持拖拽布局、添加/删除/配置面板等功能。

<template>
  <DashboardEditor
    :dashboard-id="dashboardId"
    :auth-header="authHeader"
    @back="onBack"
    @save="onSave"
    @edit="onEditPanel"
  />
</template>

<script setup>
import { DashboardEditor } from '@com-project/dashboard'
import '@com-project/dashboard/style.css'
</script>

Props:

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | dashboardId | string | number | - | 仪表盘ID | | authHeader | string | '' | 认证头信息 | | showToolbar | boolean | true | 是否显示工具栏 | | showLayerList | boolean | true | 是否显示图层列表 | | showConfigPanel | boolean | true | 是否显示配置面板 |

Events:

| 事件 | 参数 | 说明 | |------|------|------| | back | - | 返回 | | save | - | 保存 | | delete | - | 删除 | | edit | id, item | 编辑面板 | | add-panel | - | 添加面板 | | remove-panel | id | 删除面板 |

📋 完整导出列表

// 主要组件
export { DashboardPreview } from '@com-project/dashboard'
export { DashboardEditor } from '@com-project/dashboard'

// 基础组件
export { Dashboard } from '@com-project/dashboard'
export { GridLayout, GridItem } from '@com-project/dashboard'
export { ItemBox } from '@com-project/dashboard'
export { WcVueChartConfig } from '@com-project/dashboard'
export { GridStyleSider } from '@com-project/dashboard'

// Hooks
export { useDashboardStore, initDashboard } from '@com-project/dashboard'
export { useStyleConfig } from '@com-project/dashboard'
export { useExport } from '@com-project/dashboard'
export { useEmitter, emitter } from '@com-project/dashboard'

// Types
export * from '@com-project/dashboard'

🔧 Peer Dependencies

确保项目中已安装以下依赖：

{
  "peerDependencies": {
    "vue": "^3.3.0",
    "pinia": "^2.0.0"
  }
}

📝 License

MIT