npm package: @hsdz/base-in-sx
Description: 甲晟公用头部底部
Author: HY
Latest version: 0.3.66

# @hsdz/base-in-sx

## 引入文件

```html
<jsheader
  :seachOption="['选项1' ,'选项2']"
  :spaceTitle="'头部组件'"
  :searchUrl="searchUrl"
  @logout="logout"
  @toNewsDetail="toNewsDetail"
  @conflict="conflict"
>
  <!-- ... -->
  <span slot="spaceTitle">我是插槽</span>
  <span slot="worktableReplace">我是插槽2</span>
  <span slot="endSlot">我是插槽3</span>
</jsheader>
<jsfooter />
<script>
  import base from "@hsdz/base-in-sx";
  import "@hsdz/base-in-sx/dist/dist.css";
  Vue.use(base);
  export default {
    methods: {
      logout(e) {
        // do something
      },
      toNewsDetail(e) {
        e; // { id, messageType, parmes } 消息id 消息类型 消息参数信息
      },
      conflict() {
        // 清除缓存等操作
      },
    },
  };
</script>
```

## 注意事项

### 1. 发布版本时请注意 header、footer 组件的 version 参数

### 2. 点击退出登录，继续登录后跳转地址为 logoutUrl 参数

### 3. 退出参数 clientId 请咨询后台

### 4. 用户被挤掉线时，弹窗关闭会触发 conflict 事件，建议在事件内进行清除缓存等操作

### 5. 本地开发时，如果需要头部正常显示，获取到用户信息，version 传参可改为 local

### 6. 头部默认为同步加载，将先获取头部信息并阻塞 js 进程 ，如不需要传 isAsync = true

## header

### 参数

|        参数         |                                                                                                      说明                                                                                                      |        类型        |                               默认值                                |
| :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------: | :-----------------------------------------------------------------: |
|     spaceTitle      |                                                                                                    头部标题                                                                                                    |  `String \| slot`  |                                                                     |
|  worktableReplace   |                                                                                            新增的插槽，在工作台旁边                                                                                            |       `slot`       |                                                                     |
|    isShowSearch     |                                                                                                 是否显示搜索框                                                                                                 |     `Boolean`      |                               `true`                                |
|    searchOption     |                                                                                                 搜索框下拉列表                                                                                                 |      `Array`       | `[{name: '用户', value: 'person'}, {name: '空间', value: 'space'}]` |
| searchOpenNewWindow |                                                                                              搜索時是否打開新窗口                                                                                              |     `Boolean`      |                               `false`                               |
|      logoutUrl      |                                                                   退出后继续登录跳转地址. 详见寰烁统一认证平台 OAuth 接入文档---2.5 主动退出                                                                   |      `String`      |                       http://pls.hseduyun.net                       |
|      clientId       |                                                                                               退出参数 clientId                                                                                                | `String \| Number` |                                demo                                 |
|     isShowWork      |                                                                                               是否显示工作台入口                                                                                               |     `Boolean`      |                               `true`                                |
|     isShowNews      |                                                                                                是否显示消息铃铛                                                                                                |     `Boolean`      |                               `true`                                |
|    swichRoleUrl     |                                                                                               切换角色后跳转地址                                                                                               |      `String`      |                          默认当前页面地址                           |
|     userAvatar      |                                                                                                    用户头像                                                                                                    |      `String`      |                                                                     |
|       reLogin       |                                                                          是否开启自动校验登录状态功能，异常状态将执行点击退出登录事件                                                                          |     `Boolean`      |                               `false`                               |
|       version       |                                                             环境变量<br>test:测试域名<br>demo:演示域名<br>formal:正式域名<br> local: 本地开发模式                                                              |      `String`      |                                test                                 |
|      LoginBtn       |   校检登录失败时 是否显示登录按钮和点击登录时事件<br> { isShow: true, clickAutoToLogin: true },isShow 为 true 将显示登录按钮,clickAutoToLogin 为 true 点击登录会自动跳转到登录页。点击登录时触发 login 事件    |      `object`      |             `{ isShow: true, clickAutoToLogin: true }`              |
|     conflictUrl     |                                                                                         用户被挤掉线后继续登录跳转地址                                                                                         |      `String`      |                         默认为当前页面地址                          |
|      protocol       |                                                                                            压测时切换 http、http 用                                                                                            |      `String`      |                                https                                |
|    workTableUrl     |                                                                                                 工作台跳转链接                                                                                                 |      `String`      |                     先 passport 验证再回工作台                      |
|       endSlot       |                                                                                               新增插槽，在最后面                                                                                               |       `slot`       |                                                                     |
|      isHideBG       |                                                                                                是否隐藏头部背景                                                                                                |     `Boolean`      |                               `false`                               |
|      opacityBG      |                                                                                               头部白条背景透明度                                                                                               | `String \| Number` |                                 .6                                  |
|       isAsync       |                                                                            头部是否为异步加载 false 将先获取头部信息并阻塞 js 进程                                                                             |     `Boolean`      |                               `false`                               |
|    isPostUserMes    |                                                                                                  是否关闭埋点                                                                                                  |     `Boolean`      |                               `true`                                |
|    isShowSearch     |                                                                                                 是否显示搜索框                                                                                                 |     `Boolean`      |                               `true`                                |
|      urlConfig      | 增加小型化并增加自行配置参数 <br>pls_fr: '个人空间前端域名', pls_bk: '个人空间后端域名', nc_fr: '消息中心前端', ph_fr: '个人主页前端', passport: 'passport', plsClientId: '个人空间前端 clientid', wss: 'wss', |     `Boolean`      |                               `true`                                |

### 事件

|   事件名称   |           说明           |              回调参数               |
| :----------: | :----------------------: | :---------------------------------: |
| toNewsDetail |    点击铃铛内消息触发    | `Function (id, messageType, item )` |
|    logout    |     点击退出账号触发     |             `Function`              |
|    login     |       点击登录触发       |             `Function`              |
|  roleSwitch  |     点击切换角色触发     |             `Function`              |
|   conflict   | 用户被挤掉线关闭弹窗触发 |             `Function`              |

## footer

### 参数

|   参数   |                                                   说明                                                    |   类型   | 默认值 |
| :------: | :-------------------------------------------------------------------------------------------------------: | :------: | :----: |
| tenantId |                                                  租戶 id                                                  | `String` |        |
| version  | 环境变量<br>test:测试域名<br>demo:演示域名<br>formal:正式域名<br> local: 本地开发模式 <br> xx: 小型化部署 | `String` |  test  |

## 版本更新日志

### 版本 v0.3.63

    1. 省平台