<!--
 * @Author: yushuangji
 * @Date: 2024-11-17 21:20:56
 * @Description: 
-->
# ysj_plugins_dps
该库中包含一个插件SwitchAppsButton。实现切换子应用。鼠标移到图标处会弹出子应用的界面。


## 安装
```sh
npm i ysj_plugins_dps
```



## 使用组件
### 1. 在src/main.js全局注册组件
```js
import ysj_plugins_dps from "ysj_plugins_dps"
import "ysj_plugins_dps/style.css"

app.use(ysj_plugins_dps)
```

### 2. 在vue文件中使用
```html
<!-- 切换子应用的按钮 SwitchAppsButton -->
<SwitchAppsButton propSubAppFlag="DEVOPS_WORKBENCH"/>

<!-- header头部 ，包括logo和用户中心 DpsHeaderBar -->
 <DpsHeaderBar/>
```
### 3. typescript环境下 需要在shims-vue.d.ts文件中增加以下代码（vue@3.4以上可不配置该文件）
```js
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，用于各子平台之间的跳转地址

```




