GoViewWorker

GoViewWorker 是基于 GoView 低代码平台封装的前端组件库。它允许开发者将 GoView 的核心功能（设计器、渲染器、配置器）作为一个模块集成到现有的项目中，并支持宿主项目动态注册自定义组件。

安装

pnpm add go-view-worker
# 或
npm install go-view-worker

需要前置安装的依赖

'vue' 'naive-ui' 'pinia' 'vue-router'

快速开始

1. 引入样式与初始化

在项目的入口文件（如 main.ts 或 bootstrap.ts）中进行初始化：

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入样式
import 'go-view-worker/dist/style.css'
// 2. 引入初始化函数
import { initGoViewWorker } from 'go-view-worker/init'

const app = createApp(App)

// 3. 安装插件
initGoViewWorker(app)

app.mount('#app')

2. 在宿主项目中配置 (Before Mount)

在挂载应用或使用组件之前，需要通过 useGlobalConfigStore 进行配置初始化。这一步通常封装在一个 Hook 中（例如 useGoViewInit），用于加载宿主项目的自定义组件、图片资源及配置项。

import { useGlobalConfigStore } from 'go-view-worker'
import { markRaw } from 'vue'

// 假设你有自己的组件库定义
import { MyChartList } from '@/packages/components/Charts/index'

export function useGoViewInit() {
  const globalConfigStore = useGlobalConfigStore()

  // 使用 Vite 的 glob 导入功能自动加载宿主项目的组件文件，告诉go-view-worker去哪里找资源
  //config.vue的相对路径
  const configModules = import.meta.glob('../packages/components/**/config.vue', { eager: true })
  //index.vue的相对路径
  const indexModules = import.meta.glob('../packages/components/**/index.vue', { eager: true })
  //config.ts的相对路径
  const configTsModules = import.meta.glob('../packages/components/**/config.ts', { eager: true })
  //图片的相对路径
  const imagesModules = import.meta.glob('../assets/img/**', { eager: true })

  globalConfigStore.initConfig({
    // 1. 编辑器左侧菜单配置
    menuOptions: [
      {
        key: 'Charts',
        label: '我的图表',
        list: MyChartList
      }
    ],
    // 2. 注入模块 (关键：让 Worker 能找到宿主组件)
    configModules, // 配置面板组件 (.vue)
    indexModules, // 视图展示组件 (.vue)
    configTsModules, // 组件配置文件 (.ts)
    imagesModules, // 图片资源

    // 3. 配置组件列表 (用于注册)
    chartsList: markRaw(MyChartList),

    // 4. 主题配置
    theme: {
      darkMode: false,
      primaryColor: '#1677ff'
    },

    // 5. 文件上传方法 (可选，用于支持编辑器内的图片上传)
    uploadFile: async (file: File) => {
      // 实现你的上传逻辑，返回图片 URL
      const formData = new FormData()
      formData.append('file', file)
      const res = await uploadApi(formData)
      return res.url
    }
  })
}

3. 使用组件

在 Vue 页面中直接使用导出的核心组件：

设计器 (Designer)

用于编辑和构建可视化大屏。

<template>
  <div style="height: 100vh">
    <Configurator>
      <Designer />
    </Configurator>
  </div>
</template>

<script setup lang="ts">
import { Designer, Configurator } from 'go-view-worker'
import { useGoViewInit } from './hooks/useGoViewInit'

// 确保先初始化配置
useGoViewInit()
</script>

渲染器 (Renderer)

用于根据 JSON 配置渲染最终页面。

<template>
  <div style="height: 100vh">
    <Renderer :data="chartData" />
  </div>
</template>

<script setup lang="ts">
import { Renderer } from 'go-view-worker';
// chartData 通常是设计器保存出来的 JSON 对象
const chartData = { ... };
</script>

自定义组件开发规范

如果你需要在宿主项目中开发组件并注册到 GoViewWorker，请遵循以下目录结构：

/packages/components
  /Charts
    /MyBarChart
      /index.vue      (展示组件)
      /config.vue     (右侧属性配置面板组件)
      /config.ts      (组件基础配置类)
      /index.ts       (导出配置元数据)

1. config.ts

组件配置类需继承基础配置类（建议在宿主项目封装一个 PublicConfigClass 或直接仿照标准结构），并定义默认属性。

// config.ts
import { PublicConfigClass } from '@/packages/public/baseConfig' // 宿主封装的基类
import { MyBarChartConfig } from './index'

export default class Config extends PublicConfigClass {
  public key = MyBarChartConfig.key
  public chartConfig = { ...MyBarChartConfig }

  // 自定义配置项
  public option = {
    color: 'red',
    fontSize: 20
  }

  // 必须：重写默认长宽和位置 (Override)
  public override attr = {
    x: 50,
    y: 50,
    w: 400, // 默认宽
    h: 300, // 默认高
    offsetX: 0,
    offsetY: 0,
    zIndex: -1
  }
}

2. index.ts

// index.ts
export const MyBarChartConfig = {
  key: 'MyBarChart', // 唯一标识
  chartKey: 'VMyBarChart', // 对应注册的 Vue 组件名 (View)
  conKey: 'VCMyBarChart', // 对应注册的配置组件名 (Config)
  title: '自定义柱状图',
  category: 'Charts',
  categoryName: '图表',
  package: 'Charts',
  image: 'preview.png'
}

核心 API

useGlobalConfigStore

• initConfig(options): 初始化全局配置。
• getChartsList: 获取注册的组件列表。
• setItem(key, value): 设置全局状态。

组件

• Designer: 画布设计器。
• Renderer: 画布渲染器。
• Configurator: 单独使用的配置面板（较少直接使用）。