@composy/dashboard-vue

@composy/dashboard-vue

@composy/dashboard-core 的 Vue 适配包，提供 <Dashboard /> 组件、useDashboard() 组合式函数和插件注册能力。

安装

pnpm add @composy/dashboard-core @composy/dashboard-vue

应用侧应先加载 LDesign 全局 token CSS：

import '@composy/styles/color.css'
import '@composy/styles/size.css'

组件用法

<script setup lang="ts">
import type { LayoutItem } from '@composy/dashboard-vue'
import { Dashboard } from '@composy/dashboard-vue'
import { ref } from 'vue'

const editable = ref(true)
const layout = ref<LayoutItem[]>([
  { id: 'kpi', type: 'stat', x: 0, y: 0, w: 3, h: 2, props: { title: '活跃用户', value: 9527 } },
])

function handleWidgetClick(widget: LayoutItem) {
  console.info(widget.id)
}
</script>

<template>
  <Dashboard
    v-model="layout"
    :editable="editable"
    theme="auto"
    :style-vars="{ accentColor: 'var(--ld-primary-500)' }"
    @widget-click="handleWidgetClick"
  />
</template>

组件 props：

• modelValue
• columns
• rowHeight
• gap
• padding
• editable
• disabled
• history
• theme
• className
• ariaLabel
• styleVars

组件事件：

• update:modelValue
• layout-change
• widget-click
• widget-add
• widget-remove
• editable-change
• disabled-change

useDashboard

import { useDashboard } from '@composy/dashboard-vue'
import { onMounted, ref } from 'vue'

const host = ref<HTMLElement | null>(null)
const { create, addWidget, setStyleVars, getSnapshot, undo, redo } = useDashboard()

onMounted(() => {
  if (!host.value) return
  create(host.value, { editable: true, theme: 'light' })
  addWidget({
    type: 'progress',
    x: 0,
    y: 0,
    w: 4,
    h: 2,
    props: { items: [{ label: '完成率', value: 72 }] },
  })
  setStyleVars({ widgetBodyPadding: 'var(--ld-spacing-md)' })
  const snapshot = getSnapshot()
  undo()
  redo()
  if (snapshot) console.info(snapshot.version)
})

插件

import { createDashboardPlugin } from '@composy/dashboard-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(
  createDashboardPlugin({
    name: 'LDesignDashboard',
    defaults: {
      theme: 'auto',
      editable: false,
    },
  })
)

样式约定

核心 DOM class 统一使用 ldesign-dashboard 前缀，Vue 包外层容器使用 ldesign-dashboard-vue。组件变量统一为 --ldesign-dashboard-*，默认值引用 --ld-* / --ld-color-* 颜色 token 和 packages/size 的 --ld-* 尺寸 token。

构建输出

pnpm build 会生成：

• dist/index.js 和 dist/index.min.js
• es/index.js
• esm/index.js
• lib/index.cjs
• 对应 .d.ts 类型声明

useDashboard() 和 <Dashboard> expose 支持 getSnapshot()、restoreSnapshot()、undo()、redo()、getHistoryState()，并通过 history ref 暴露当前撤销/重做能力。

开发命令

pnpm type-check
pnpm build

Builder 与 ESM/CJS TypeScript 配置位于 .ldesign/；根工作区的 type-check 命令会依次检查两种模块类型。

License

MIT