大数据平台-通用插件库

基于 Vue 3 + Vite + Element Plus 构建的可复用业务组件库，面向大数据平台的运营配置、权限管理与主题定制等场景，提供开箱即用的页面级组件与工具函数。

包名： @gyyxds/gyy-web-plugin
技术栈： Vue 3、TypeScript、Element Plus、Axios、Day.js

功能概览

| 组件 / 模块 | 导出名称 | 说明 | | --- | --- | --- | | 接口管理 | InterFaceList | 平台接口列表查询与展示，支持关键字搜索、分页及修改时间展示 | | 资源配置 | ResourceAllocation | 菜单与页面资源管理，支持树形结构拖拽排序、菜单/页面增删改、功能点维护及接口绑定，可配置快捷绑定 API 映射 | | 功能权限 | FunctionalAuthority | 按平台端与角色配置菜单/页面下各功能点的开通与关闭 | | 角色管理 | RoleManagement | 角色的新增、编辑、删除及列表检索 | | 用户管理 | UserManager | 用户的新增、编辑、删除，支持按姓名、账号、手机号、角色筛选，可配置密码严格校验 | | 自定义主题 | CustomTheme | 主题版本列表管理，支持新建、编辑、复制、启用/停用，可视化配置 CSS 变量并预览效果 | | 主题编辑面板 | EditConfigPane | 自定义主题的配置编辑面板，可作为抽屉或独立页面嵌入使用 | | 调试 Demo | Test | 本地开发调试用的示例组件 |

工具函数

| 函数 | 说明 | | --- | --- | | getHtmlFontSize | 获取当前页面 html 根元素的 font-size（px） | | pxToRem | 将 CSS 字符串中的 px 单位批量转换为 rem | | setCssVariableInBody | 将自定义 CSS 变量写入 body 标签的 style 属性 | | isSetCssVariableInBody | 判断 body 上是否已设置自定义主题 CSS 变量 |

通用能力

• 国际化（i18n）： 各组件均支持传入外部 i18n 对象，与宿主应用语言包合并
• 权限控制： 运营类组件支持通过 permissionCodeList 控制按钮与操作的显隐
• 统一请求配置： 通过 httpBaseUrl 与 headers 传入 API 地址及鉴权信息

开发

安装依赖

yarn

本地启动

yarn dev

打包组件库

yarn build:lib

打包产物输出至 dist/lib/ 目录。

发布到 npm

发布前需先打包，并使用有 @gyyxds scope 发布权限的 npm 账号登录。

# 1. 打包
yarn build:lib

# 2. 登录 npm（须为 gyy-xds 或 @gyyxds 组织成员）
npm login --registry=https://registry.npmjs.org/

# 3. 确认当前登录账号
npm whoami --registry=https://registry.npmjs.org/

# 4. 发布（scoped 包须加 --access public）
npm publish --access public

package.json 中已配置 publishConfig，发布时会自动指向 https://registry.npmjs.org/。

常见问题

报错 404 Not Found 或 Couldn't publish package: Not found

npm 在认证失败或无权发布时，有时会返回 404 而非 401，常见原因如下：

| 原因 | 处理方式 | | --- | --- | | 项目 .npmrc 中 _authToken 已过期 | 删除该 token 行，重新执行 npm login | | 当前账号无 @gyyxds 发布权限 | 使用 gyy-xds 登录，或请维护者将你加入 @gyyxds 组织 | | 未登录或 token 无效 | 执行 npm whoami --registry=https://registry.npmjs.org/ 确认账号 |

认证配置注意

• 勿将 _authToken 提交到 git；本地通过 npm login 登录即可，凭证会写入用户目录下的 ~/.npmrc
• 若曾在项目 .npmrc 中配置过 token，过期后需删除，否则会覆盖 npm login 的凭证
• 全局 npm registry 可指向镜像源（如 registry.npmmirror.com），不影响发布；publishConfig.registry 会确保发布走官方源

安装与引入

安装

yarn add @gyyxds/gyy-web-plugin

Peer 依赖（使用前需自行安装）：

yarn add element-plus axios dayjs

全局引入

// main.ts — 引入样式
import '@gyyxds/gyy-web-plugin/dist/lib/index.ts.css'

// 按需引入组件
import {
  InterFaceList,
  ResourceAllocation,
  FunctionalAuthority,
  RoleManagement,
  UserManager,
  CustomTheme,
} from '@gyyxds/gyy-web-plugin'

国际化

需要与宿主应用共用语言包时，直接传入 i18n 对象即可：

<script setup lang="ts">
import { InterFaceList } from '@gyyxds/gyy-web-plugin'
import i18n from '@/i18n'
</script>

<template>
  <InterFaceList :httpBaseUrl="httpBaseUrl" :headers="headers" :i18n="i18n" />
</template>

组件使用说明

公共 Props

多数运营配置类组件共享以下 Props：

| Prop | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | httpBaseUrl | String | 是 | API 请求基础地址，如 http://app-api.dev.zyun.link | | headers | Object | 是 | 请求头，通常包含 Authorization 与 x-zg-system | | i18n | Object | 否 | 外部国际化实例 | | tenantId | String | 否 | 租户 ID |

headers 示例：

const headers = {
  Authorization: 'Bearer <token>',
  'x-zg-system': 'kbvip', // 平台标识
}

接口管理 — InterFaceList

平台接口信息的列表展示与搜索。

<InterFaceList :httpBaseUrl="httpBaseUrl" :headers="headers" />

资源配置 — ResourceAllocation

菜单、页面及功能点的树形配置，支持拖拽排序与接口绑定。

<ResourceAllocation
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :permissionCodeList="permissionCodeList"
  :quickBindApiMap="quickBindApiMap"
/>

permissionCodeList 默认值及含义：

| 编码 | 说明 | | --- | --- | | resources_menu_add | 新增菜单/页面 | | resources_menu_edit | 编辑菜单/页面 | | resources_menu_draggable | 菜单/页面拖拽排序 | | resources_menu_dele | 删除菜单/页面 | | resources_function_add | 新增功能 | | resources_function_edit | 编辑功能 | | resources_function_dele | 删除功能 | | resources_function_bind | 绑定接口 |

功能权限 — FunctionalAuthority

按角色为各菜单/页面下的功能点开通或关闭权限。

<FunctionalAuthority
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :permissionCodeList="permissionCodeList"
  :showQXZD="true"
/>

| Prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | showQXZD | Boolean | true | 是否显示「请选择端」选项，由外部传入控制 |

permissionCodeList 默认值：

| 编码 | 说明 | | --- | --- | | authorityManager_open_close | 功能权限开通/关闭 |

角色管理 — RoleManagement

角色的增删改查。

<RoleManagement
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :permissionCodeList="permissionCodeList"
/>

permissionCodeList 默认值：

| 编码 | 说明 | | --- | --- | | roleManager_add | 新增角色 | | roleManager_edit | 编辑角色 | | roleManager_dele | 删除角色 |

用户管理 — UserManager

用户信息维护，支持多条件检索。

<UserManager
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :permissionCodeList="permissionCodeList"
  :strictValida="false"
/>

| Prop | 类型 | 说明 | | --- | --- | --- | | permissionCodeList | Array | 权限编码，默认 userManager_add / userManager_edit / userManager_dele | | strictValida | Boolean | 编辑用户密码时是否启用严格校验，默认 false |

自定义主题 — CustomTheme

主题版本的全生命周期管理，包括 CSS 变量可视化编辑、预览、启用与停用。

<CustomTheme
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :system="system"
  :configItems="configItems"
  :needWriteStyle="true"
  :permissionCodeList="permissionCodeList"
  @cancel="onCancel"
/>

| Prop | 类型 | 说明 | | --- | --- | --- | | system | String | 平台标识，对应 x-zg-system | | configItems | Array | 可配置的主题变量项列表 | | needWriteStyle | Boolean | 是否将主题变量写入页面样式 | | permissionCodeList | Array | 权限编码，如 customTheme_add / customTheme_edit / customTheme_use / customTheme_copy 等 |

主题编辑面板 — EditConfigPane 可单独引入，以抽屉或内嵌形式使用：

<EditConfigPane
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :configItems="configItems"
  :isDrawer="true"
/>

主题工具函数

配合 CustomTheme 在宿主应用中动态应用主题变量：

import {
  getHtmlFontSize,
  pxToRem,
  setCssVariableInBody,
  isSetCssVariableInBody,
} from '@gyyxds/gyy-web-plugin'

// 将主题变量写入 body
setCssVariableInBody({ '--gyy-tc-g': '#1890ff' })

// 检查是否已应用主题变量
const applied = isSetCssVariableInBody()

FunctionalAuthority 角色查询参数

如果后端根据 Token 自动处理平台和租户，可以显式只传分页参数：

<FunctionalAuthority
  :httpBaseUrl="httpBaseUrl"
  :headers="headers"
  :roleQueryParams="{ page: 1, size: 1000 }"
/>

不传 roleQueryParams 时，组件仍会按原逻辑追加 platform 和 tenantId。