grid-workspace-core

一个基于 grid-layout-plus 和 element-plus 的可复用 Vue 3 Grid 工作台组件。

包含内容

• Grid 布局编辑器
• Grid 布局预览器
• 组件注册辅助方法
• Grid 布局工具函数
• 可复用的工具栏、画布面板、组件卡片、属性面板

不包含内容

• 业务路由
• 菜单适配逻辑
• 布局存储适配逻辑
• 你当前项目中的真实页面组件映射

安装

npm install grid-workspace-core

宿主项目需要自行提供以下 peerDependencies：

• vue
• element-plus
• grid-layout-plus

引入方式

先在应用入口文件中引入组件样式：

import 'grid-workspace-core/style.css'

然后按需引入组件和工具方法：

import {
  GridWorkspaceEditor,
  GridWorkspacePreview,
  buildGridWidgetLibrary,
  type GridCanvasWidget,
  type GridWidgetDefinition,
  type GridWidgetSource,
  type GridWidgetSize
} from 'grid-workspace-core'

组装 widgetLibrary

编辑器和预览器都依赖同一份 widgetLibrary。

import {
  buildGridWidgetLibrary,
  type GridWidgetSource,
  type GridWidgetSize
} from 'grid-workspace-core'
import FooView from './FooView.vue'
import BarView from './BarView.vue'

const widgetSources: GridWidgetSource[] = [
  {
    key: 'foo-view',
    title: 'Foo View',
    desc: '示例组件',
    path: '/foo'
  },
  {
    key: 'bar-view',
    title: 'Bar View',
    desc: '另一个组件',
    path: '/bar'
  }
]

const componentMap = {
  'foo-view': FooView,
  'bar-view': BarView
}

function resolveSize(path: string): GridWidgetSize {
  switch (path) {
    case '/foo':
      return { w: 8, h: 6 }
    default:
      return { w: 6, h: 5 }
  }
}

export const widgetLibrary = buildGridWidgetLibrary({
  sources: widgetSources,
  componentMap,
  resolveSize
})

使用编辑器

<script setup lang="ts">
import { ref } from 'vue'
import {
  GridWorkspaceEditor,
  type GridCanvasWidget
} from 'grid-workspace-core'
import { widgetLibrary } from './widgetLibrary'

const layout = ref<GridCanvasWidget[]>([])

function handleSave() {
  console.log(layout.value)
}
</script>

<template>
  <GridWorkspaceEditor
    v-model="layout"
    :widget-library="widgetLibrary"
    :col-num="12"
    :max-rows="12"
    @save="handleSave"
  />
</template>

常用属性：

• modelValue / v-model：当前画布布局数据
• widget-library：左侧组件库的数据源
• col-num：网格列数
• max-rows：画布最大行数

常用事件：

• save
• reset
• add
• remove
• warning
• preview

这个包不会帮你持久化布局数据。你需要自行把 layout 存到 localStorage、Pinia、后端接口或其他适配层中。

使用预览器

<script setup lang="ts">
import {
  GridWorkspacePreview,
  type GridCanvasWidget
} from 'grid-workspace-core'
import { widgetLibrary } from './widgetLibrary'

const layout: GridCanvasWidget[] = [
  {
    key: 'foo-view',
    title: 'Foo View',
    path: '/foo',
    x: 0,
    y: 0,
    w: 8,
    h: 6
  }
]
</script>

<template>
  <GridWorkspacePreview
    :model-value="layout"
    :widget-library="widgetLibrary"
    :col-num="12"
    :max-rows="12"
  />
</template>

预览器会使用同一份布局数据和同一份组件库定义，并直接渲染映射后的真实组件。

推荐集成方式

建议保持这个包的通用性，把项目相关逻辑放在包外：

• 路由或菜单到组件源数据的转换
• 业务页面组件映射
• 默认组件尺寸策略
• 布局持久化逻辑

这样可以保证 grid-workspace-core 能在不同项目中复用，同时让每个宿主项目独立维护自己的业务适配层。