npm package: @glodon-gbp/header-vue3
Description: GBP 工单头部导航，供 PC 引用，保持统一的设计风格。
Latest version: 1.0.0-beta

# @glodon-gbp/header-vue3

广联达建筑业务平台（Glodon Business Platform, GBP），“工单服务”头部 SDK UI。

![预览](./preview.png)

### 编译

```bash
npm run dev # 开发调试
npm run build # 编译发布
```

### 模块化

- 安装依赖

```bash
npm i @glodon-gbp/header-vue3 -S
```

- 引入组件

```js
import { GbpHeader } from '@glodon-gbp/header-vue3';
import '@glodon-gbp/header-vue3/lib/index.css';
```

### 用例

```js
<template>
  <gbp-header :accountData="state.config" :options="state.options" fixed />
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  config:{
    profile: {
        displayName : '用户名称',
        avatarUrl : '用户头像链接'
    },
    component: {
        count: 2
    },
    verification: {
        status: "verified"
    }
  },
  options:{
    serviceName:'服务与支持',
    serviceNameURL: '/',
    serviceNameTarget: '_self',
    entries:[
      {
        label: '文档中心',
        url: 'https://developer.glodon.com/docs',
        target:'_blank',
      },
      {
        label: '控制台',
        url: 'https://developer.glodon.com/',
        target:'_blank',
      }
    ]
  }
})
</script>
```

### 事件

| 事件            | 描述           | 必填 | 默认值 |
| --------------- | -------------- | ---- | ------ |
| before-sign-out | 登出前触发事件 | 否   | -      |

### 属性

| 属性        | 描述     | 类型    | 参数范围 | 必填 | 默认值 |
| ----------- | -------- | ------- | -------- | ---- | ------ |
| fixed       | 顶部固定 | Boolean | -        | 否   | false  |
| zIndex      | 组件层级 | Number  | -        | 否   | 99     |
| options     | 配置参数 | Object  | -        | 否   | -      |
| accountData | 用户数据 | Object  | -        | 是   | -      |

### Options

| 属性              | 描述         | 类型   | 参数范围                               | 必填 | 默认值  |
| ----------------- | ------------ | ------ | -------------------------------------- | ---- | ------- |
| serviceName       | 服务名称     | String | -                                      | 否   | -       |
| serviceNameURL    | 服务名称链接 | String | -                                      | 否   | -       |
| serviceNameTarget | 链接打开方式 | String | \_blank 、\_self 、\_parent 、\_top    | 否   | \_self  |
| entries           | 控制台入口   | Array  | -                                      | 否   | -       |
| entries.label     | 入口名称     | String | -                                      | 否   | -       |
| entries.url       | 入口链接     | String | -                                      | 否   | -       |
| entries.target    | 链接打开方式 | String | \_blank 、\_self 、\_parent 、\_top 、 | -    | \_blank |

#### Account Data

| 属性                | 描述             | 类型   | 参数范围 | 必填 | 默认值 |
| ------------------- | ---------------- | ------ | -------- | ---- | ------ |
| verification.status | 开放平台审核状态 | String | verified | 是   | -      |
| component.count     | 用户上架的组件数 | Number | -        | 是   | 0      |
| profile.displayName | 用户名称         | String | -        | 是   | ''     |
| profile.avatarUrl   | 用户头像链接     | String | -        | 是   | ''     |

## 服务配置项

| 属性                  | 描述                 | 必填 |
| --------------------- | -------------------- | ---- |
| VITE_URL_UC_INFO      | 用户中心链接         | 是   |
| VITE_URL_GBP_SDK_HOME | 点击 Logo 时跳转链接 | 是   |
| VITE_URL_GBP_SDK_LOGO | Logo 图标地址        | 是   |