ElasticView 前端插件 SDK

简介

这是 ElasticView 前端工程的插件 SDK，提供了一套完整的插件开发工具和API，支持快速开发 ElasticView 平台的前端插件。

安装

pnpm install @elasticview/plugin-sdk

快速开始

1. 插件初始化

在 main.ts 中初始化 EV 前端插件：

import {setupEvPlugin} from '@elasticview/plugin-sdk'
import pluginJson from '../../plugin.json'

import App from "./App.vue";
import router from "./router/index.js"

import enLocale from "./lang/en";
import zhCnLocale from "./lang/zh-cn";

// 引入第三方组件库（可选）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import JsonViewer from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

// 插件启动时安装第三方插件的初始化钩子
const init = (app) => {
  // 注册 Element Plus 图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  
  // 使用 Element Plus
  app.use(ElementPlus)
  
  // 注册其他组件
  app.use(JsonViewer)
  
  return app
}

// 初始化插件
// 参数依次为：plugin.json配置文件，App.vue实例，路由，英文语言包，中文语言包，初始化钩子
setupEvPlugin(pluginJson, App, router, enLocale, zhCnLocale, init)

2. 项目结构示例

src/
├── api/                  # API 接口定义
│   ├── es.ts
│   ├── es-index.ts
│   └── ...
├── components/           # 组件
├── views/               # 页面视图
├── router/              # 路由配置
├── lang/                # 国际化语言包
│   ├── en.ts
│   └── zh-cn.ts
├── utils/               # 工具函数
├── App.vue              # 根组件
└── main.ts              # 入口文件

API 文档

HTTP 请求

基础用法

import {request} from '@elasticview/plugin-sdk'

// 基础 POST 请求
export function DbInsert(data: any) {
    return request({
        url: `/api/DbInsert`,
        method: 'post',
        data
    })
}


// 使用示例
const result = await DbInsert({key: value})

SDK 工具方法

导入 SDK

import {sdk} from '@elasticview/plugin-sdk'

布局和主题

// 获取当前布局尺寸
const layoutSize = computed(() => {
    return sdk.getLayoutSize()
})

// 检查是否为移动设备
const isMobile = computed(() => {
    return sdk.IsMobile()
})

// 检查是否为暗色主题
const isDark = computed(() => {
    return sdk.isDarkTheme()
})

// 获取当前语言
const currentLanguage = computed(() => {
    return sdk.getLanguage()
})

路由操作

// 获取路由实例
const router = sdk.getRouter()

// 编程式导航
const navigateToPage = () => {
    router.push('/some-path')
}

事件总线

// 获取事件总线实例
const eventBus = sdk.getEventBus()

// 获取事件枚举
const BusEnum = sdk.getBusEnum()

// 监听系统设置变更
onMounted(() => {
    eventBus.on(BusEnum.changeEvSettings, (newSettings) => {
        console.log('系统设置已更改:', newSettings)
        // 处理设置变更逻辑
    })
    
    eventBus.on(BusEnum.changeEvAppConfig, (newConfig) => {
        console.log('应用配置已更改:', newConfig)
        // 处理配置变更逻辑
    })
})

尺寸枚举

// 获取尺寸枚举
const SizeEnum = sdk.getSizeEnum()

// 尺寸值：
// SizeEnum.DEFAULT = "default"
// SizeEnum.LARGE = "large" 
// SizeEnum.SMALL = "small"

// 根据尺寸设置样式
const getComponentSize = () => {
    const size = sdk.getLayoutSize()
    switch(size) {
        case SizeEnum.LARGE:
            return 'large'
        case SizeEnum.SMALL:
            return 'small'
        default:
            return 'default'
    }
}

数据源操作

// 获取当前选中的 数据源 连接 ID
const currentConnId = computed(() => {
    return sdk.GetSelectEsConnID()
})

// 获取当前用户所拥有的数据源列表
const handleLinkOperation = async () => {
    try {
        const result = await sdk.LinkOptAction()
        console.log('您拥有的数据源:', result)
    } catch (error) {
        console.error('获取失败:', error)
    }
}

插件间通信

// 调用其他插件的 API
const callAnotherPluginApi = async (data) => {
    const response = await sdk.CallAnotherPluginApi('other-plugin-alias', {
        url: `/api/DbInsert`,
        method: 'post',
        data
    })
    return response
}

插件长连接通信

import {onUnmounted} from 'vue'

// 订阅频道消息
onMounted(() => {
    sdk.SubToChannel('my-channel', (message) => {
        console.log('收到频道消息:', message)
    })
})

// 发送频道消息
const sendChannelMessage = () => {
    sdk.CallToChannel('my-channel', {
        type: 'notification',
        content: 'Hello from plugin!'
    })
}

// 取消订阅（组件卸载时）
onUnmounted(() => {
    sdk.UnSubscribeToChannel('my-channel')
})

用户信息

// 获取当前用户 ID
const currentUserId = computed(() => {
    return sdk.GetUserId()
})

最佳实践

1. 请求封装: 将 API 请求封装在独立的服务文件中 2响应式设计: 使用 sdk.IsMobile() 适配移动端 3主题适配: 使用 sdk.isDarkTheme() 支持深色主题 4国际化: 合理使用语言包，支持多语言

注意事项

• 确保在 setupEvPlugin 初始化后再使用 SDK 方法
• 事件监听器需要在适当时机清理，避免内存泄漏
• 请求 URL 路径需要与后端插件接口路径一致

支持与反馈

如有问题或建议，请联系开发团队或提交 Issue。