ysj_plugins_dps

该库中包含一个插件SwitchAppsButton。实现切换子应用。鼠标移到图标处会弹出子应用的界面。

安装

npm i ysj_plugins_dps

使用组件

1. 在src/main.js全局注册组件

import ysj_plugins_dps from "ysj_plugins_dps"
import "ysj_plugins_dps/style.css"

app.use(ysj_plugins_dps)

2. 在vue文件中使用

<!-- 切换子应用的按钮 SwitchAppsButton -->
<SwitchAppsButton propSubAppFlag="DEVOPS_WORKBENCH"/>

<!-- header头部 ，包括logo和用户中心 DpsHeaderBar -->
 <DpsHeaderBar/>

3. typescript环境下 需要在shims-vue.d.ts文件中增加以下代码（[email protected]以上可不配置该文件）

declare module 'ysj_plugins_dps'

SwitchAppsButton参数

| 参数 |类型| 说明
| ------------------- |-----|----------------- |propSubAppFlag|String|各子应用的唯一标识，对应着统一认证平台的子应用标识，具体参数参考统一认证平台设置的值 |propAuthServerURL|String|oAuth2 的认证服务地址。如http://10.64.16.93:8086 |propOAuth2Token|String|统一认证的oAuth2的token |propIconType|String|切换子应用的图标类型 选项值: grid ,moreLines，默认grid |propSwitchTextColor|String|切换应用的标题颜色，如#ffffff，默认#ffffff |propSwitchTextSize|String|切换应用的标题字体大小,如24px |propSwitchIconColor|String|切换应用的图标颜色，如#ffffff，默认#ffffff |propSwitchIconSize|String|切换应用的图标大小,如24px |propTargetType|String|打开子应用的方式，选项值: _blank ， _self ，默认_blank |propSwitchIconBold|Boolean|切换应用的图标是否加粗，默认false， |propSwitchTextBold|Boolean|切换应用的标题是否加粗，默认false，

DpsHeaderBar参数

| 参数 |类型| 说明
| ---- |-----|----- |propLogoLayout|String|logo区域的布局方式。normal:通过布局（一般用于单体项目使用），main:主版本布局，gansu:甘肃版本布局。默认normal |propTitle|String|logo的主标题。默认空 |propUserCnName|String|个人中心：用户的中文名称。默认空 |propShowProfileButton|Boolean|个人中心：是否显示个人信息按钮。默认true |propShowPasswordButton|Boolean|个人中心：是否显示更换密码按钮。默认true

DpsHeaderBar事件

| 参数 | 说明 | ---- |---- |emitClickLogo|点击logo的事件 |emitShowProfile|显示个人信息事件 |emitChangePassword|更换密码事件 |emitQuit|退出事件

DpsHeaderBar插槽

| 插槽名 | 说明 | ---- |---- |logoExtension|logo的扩展信息，显示在标题后面区域。目前主要用于放置SwitchAppsButton

工作台体系概况

1. 工作台是主入口。从统一认证登录之后会进入工作台，其他子平台可以通过工作台切换进入。
2. 各平台系统标识参照下表

|序号| 平台名称 | OAuth2系统标识 | context path | 跳转地址 | |----| -------- | -------- | ------------ | -------- | |1| 工作台 | DEVOPS_WORKBENCH | / | http://10.64.15.159/ | |2| 需求池 | DEVOPS_DEMAND | devops_demand | http://10.64.15.159/devops_demand/wait | |3| 产品管理 | DEVOPS_PRODUCT | devops_product | http://10.64.15.159/devops_product/wait | |4| 投产发布 | DEVOPS_PUBLISH | devops_publish | http://10.64.15.159/devops_publish/wait | |5| 数据管理 | DEVOPS_DATA | devops_data | http://10.64.15.159/devops_data/wait | |6| 流水线2.0 | DEVOPS_PIPE2 | devops_pipe2 | http://10.64.15.159/devops_pipe2/wait | |7| 项目协同 | DEVOPS_PROJECT | devops_project | http://10.64.15.159/devops_project/wait | |8| 代码管理 | DEVOPS_CODE | devops_code | http://10.64.15.159/devops_code/wait | |9| 部署管理 | DEVOPS_DEPLOY | devops_deploy | http://10.64.15.159/devops_deploy/wait | |10| 流水线3.0 | CICDCBB | devops_pipe | http://10.64.15.159/devops_pipe/wait?from=devops_mn | |11| 效能洞察 | EFFICIENCY | devops_ef | http://10.64.15.159/devops_ef/wait?from=devops_mn | |12| 质量与安全 | QUALITY | devops_qt | http://10.64.15.159/devops_qt/wait?from=devops_mn | |13| 制品管理 | PRODUCT | devops_af | http://10.64.15.159/devops_af/wait?from=devops_mn | |13| 运维监控 | OPERATE | devops_operate | http://10.64.15.159/devops_operate/wait?from=devops_mn |

oAuth2系统标识：为当前子系统在统一认证注册的唯一标识
context path：为当前子系统的访问路径，nginx配置的location的路径
跳转地址：为当前子系统的访问URL，用于各子平台之间的跳转地址