vue3-dac-ui 集成指南

插件简介

• 提供元数据管理、策略编辑、策略绑定三大功能组件
• 基于 Vue 3 + Element Plus，使用 Pinia 管理状态
• 组件已在插件安装时全局注册，可直接在任何页面使用

安装与依赖

• 安装插件：npm install vue3-dac-ui
• 依赖要求：
  • vue ≥ 3.0
  • element-plus ≥ 2.0（需在应用中注册）
  • pinia（需在应用中注册）

快速开始

• 在项目入口文件注册依赖与插件

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import { createPinia } from 'pinia'
import App from './App.vue'
import Vue3DacUi from 'vue3-dac-ui'
import 'vue3-dac-ui/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(createPinia())

app.use(Vue3DacUi)

app.mount('#app')

组件使用

• 组件已全局注册，也支持按需导入：import { MetadataManager, PolicyEditor, PolicyBinding } from 'vue3-dac-ui'

元数据管理器

• 用于浏览与维护数据库、数据表及字段的元数据

<template>
  <MetadataManager 
    api-endpoint="/api/metadata"
    :tree-config="{ /* 可选：自定义树渲染 */ }"
  />
</template>

• Props
  • api-endpoint：元数据服务根路径，例如 /api/metadata
  • tree-config：可选，树组件配置对象

策略编辑器

• 用于创建、编辑数据访问策略与策略组

<template>
  <PolicyEditor 
    policy-api="/api/policy"
    metadata-api="/api/metadata"
  />
</template>

• Props
  • policy-api：策略服务根路径，例如 /api/policy
  • metadata-api：用于获取表/字段资源的元数据服务根路径

策略绑定

• 用于将策略组绑定到业务实体（部门、角色）

<template>
  <PolicyBinding
    binding-api="/api/binding"
    :entity-config="entityConfig"
  />
</template>

<script setup lang="ts">
const entityConfig = {
  department: {
    api: '/api/departments',
    idField: 'id',
    nameField: 'name'
  },
  role: {
    api: '/api/roles',
    idField: 'id',
    nameField: 'roleName'
  }
}
</script>

• Props
  • binding-api：绑定关系服务根路径，例如 /api/binding
  • entity-config：实体数据配置，需提供获取实体列表的接口与字段映射

后端接口约定

• 元数据
  • GET /metadata/tree：获取数据库→表→字段的树形数据
  • POST /metadata/database：创建数据库
  • PUT /metadata/node/:id：更新表或字段信息
  • POST /metadata/sync/:id：同步数据库结构
• 策略
  • GET /policy/list：获取策略列表
  • POST /policy：创建策略
  • PUT /policy/:id：更新策略
  • DELETE /policy/:id：删除策略
  • GET /policy-group/list：获取策略组列表
  • POST /policy-group：创建策略组
  • PUT /policy-group/:id：更新策略组
  • DELETE /policy-group/:id：删除策略组
• 绑定
  • GET /binding/list：获取绑定关系列表
  • POST /binding：创建绑定关系
  • DELETE /binding/:id：删除绑定关系
• 实体
  • 部门：GET /api/departments（字段由 entityConfig.department 指定）
  • 角色：GET /api/roles（字段由 entityConfig.role 指定）

可选的全局配置

• 插件安装支持传入全局配置（当前组件以 Props 为主）

app.use(Vue3DacUi, {
  api: {
    metadata: '/api/metadata',
    policy: '/api/policy',
    binding: '/api/binding'
  },
  entityConfig: {
    department: { api: '/api/departments', idField: 'id', nameField: 'name' },
    role: { api: '/api/roles', idField: 'id', nameField: 'roleName' }
  }
})

本地开发与构建

• 启动示例：在插件目录执行 npm run dev
• 类型检查：npm run type-check
• 构建库产物：npm run build:lib，输出至 dist/
  • main：dist/vue3-dac-ui.umd.js
  • module：dist/vue3-dac-ui.es.js
  • types：dist/index.d.ts

发布到 npm

• 前提：确保包名 vue3-dac-ui 未被占用，如被占用可改用作用域包名（例如 @your-scope/vue3-dac-ui）
• 步骤：
  • npm login
  • 如需变更版本：npm version patch（或 minor/major）
  • 发布：npm publish --access public
  • 作用域包需使用：npm publish --access public（确保 publishConfig.access 为 public）

常见问题

• 页面报错 “active pinia was not found”
  • 原因：未在应用中注册 Pinia
  • 处理：在入口文件 app.use(createPinia())
• 组件未渲染 el-* 元素
  • 原因：未注册 Element Plus
  • 处理：在入口文件 app.use(ElementPlus)