Vue3 数据访问控制(DAC)UI 组件
npm install vue3-dac-uivue ≥ 3.0element-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
api-endpoint="/api/metadata"
:tree-config="{ / 可选:自定义树渲染 / }"
/>
`
- Props
- api-endpoint:元数据服务根路径,例如 /api/metadata
- tree-config:可选,树组件配置对象$3
- 用于创建、编辑数据访问策略与策略组
`vue
policy-api="/api/policy"
metadata-api="/api/metadata"
/>
`
- Props
- policy-api:策略服务根路径,例如 /api/policy
- metadata-api:用于获取表/字段资源的元数据服务根路径$3
- 用于将策略组绑定到业务实体(部门、角色)
`vue
binding-api="/api/binding"
:entity-config="entityConfig"
/>
`
- 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)`