@xdmp-open/ui-shared

@xdmp-open/ui-shared

XDMP 平台共享 Vue 3 组件库：业务通用组件、指令、样式主题与工具函数，自应用壳 xdmp-frontend/src 原样下沉（行为与样式零变化，仅做包化改造）。

vue、element-plus、@element-plus/icons-vue、echarts、@xdmp-open/sdk-admin 为 peerDependencies（宿主应用提供）；vue-router 为可选 peer（仅 BackPage/PageDecs/PageDataInfo/PageMoreDataInfo 运行时使用宿主注入的 $router/$route）。

安装

pnpm add @xdmp-open/ui-shared

快速开始

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import UiShared, {
  setupPermissionDirective,
  registerSvgIcons,
  setupBinaryApi
} from '@xdmp-open/ui-shared'
import 'element-plus/dist/index.css'
import '@xdmp-open/ui-shared/style.css' // 组件 scoped 样式
import '@xdmp-open/ui-shared/styles'   // 全局主题（Element Plus CSS vars，主色 #0070FF）+ 过渡/按钮样式

const app = createApp(App)
app.use(ElementPlus)
app.use(UiShared) // 全局注册全部组件 + v-emoji / v-highlight 指令

// v-permission 指令需注入权限判定（包不再依赖宿主 store）
setupPermissionDirective(app, (roles) =>
  roles.some((role) => store.getters.roles.includes(role))
)

// IconSelect 的 SVG 图标列表由宿主注入（原为包内 import.meta.glob 应用图标目录）
const svgFiles = import.meta.glob('@/icons/svg/*.svg', { eager: true })
registerSvgIcons(
  Object.keys(svgFiles).map((k) => k.split('/').pop()!.replace(/\.svg$/, ''))
)

// AvatarUpload / FileUpload 依赖的二进制文件 API（xdmp-admin BinaryResource）：
// 注入 sdk-core 请求引擎（评审结论：upload 组件只依赖 sdk-admin 的 binary api）
import { sdkClient } from '@/sdk'
setupBinaryApi(sdkClient)

也可按需单组件引入：

import { Pagination, XdmpDrawer } from '@xdmp-open/ui-shared'

注意：组件不再依赖宿主全局注册 element-plus 组件；但 PageDecs 等模板中的 xdmp-icon-*/el-icon-xdmp-* 图标字体 class、SvgIcon 的 SVG sprite（#icon-*） 仍由宿主应用提供（与原实现一致）。

组件清单

指令

工具函数

• $on / $off / $once / $emit —— Vue 2→3 事件桥（gogocodeTransfer）
• scrollTo、debounce、isExternal
• Encrypt —— 原 this.$Encrypt globalProperties 的显式 import 替代（encode/decode/randomEncode/randomDecode）
• registerSvgIcons / useIcons —— IconSelect 图标数据源
• setupBinaryApi(client) / binaryUpload / binaryDownloadBlob —— 二进制文件 API（注入式，基于 @xdmp-open/sdk-admin 的 BinaryResource）
• chartResizeMixin —— echarts resize mixin（原 components/Charts/mixins/resize）

样式

• @xdmp-open/ui-shared/style.css —— 全部组件 scoped 样式（构建时抽取）
• @xdmp-open/ui-shared/styles —— 全局样式（element-variables 主题 CSS vars、transition、btn 等）
• SCSS 源文件同步发布于 dist/styles/*.scss（子路径 ./styles/*.scss），供需要 @use 变量/mixin 的宿主使用

开发

pnpm build      # vite lib mode + d.ts（vite-plugin-dts）+ sass 编译全局样式
pnpm test       # vitest + @vue/test-utils + jsdom
pnpm typecheck  # vue-tsc --noEmit