vue3-dac-ui 集成指南

插件简介

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

安装与依赖

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

快速开始

- 在项目入口文件注册依赖与插件
``ts
// 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'

$3

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

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

$3

- 用于创建、编辑数据访问策略与策略组
`vue

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

$3

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


`
- 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 为主）
`ts
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)`