# Glodon Open Header

OPEN 提供控制台头部导航，供 PC 引用，保持统一的设计风格。

### 模块化

- 安装依赖

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

- 引入组件

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

### 用例

```js
<template>
  <gld-open-header :accountData="state.config" consoleName="控制台" />
</template>

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

const state = reactive({
  config:{
    profile: {
        displayName : '用户名称',
        avatarUrl : '用户头像链接'
    },
    component: {
        count: 2
    },
    verification: {
        status: "verified"
    }
  }
})
</script>
```

### 事件

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

### 属性

| 属性             | 描述           | 类型    | 参数范围                 | 必填 | 默认值     |
| ---------------- | -------------- | ------- | ------------------------ | ---- | ---------- |
| env              | 发布环境       | String  | development / production | 否   | production |
| fixed            | 顶部固定       | Boolean | -                        | 否   | false      |
| zIndex           | 组件层级       | Number  | -                        | 否   | 99         |
| consoleName      | 控制台名称     | String  | -                        | 否   | -          |
| consoleEntryText | 控制台入口文本 | String  | -                        | 否   | 控制台     |
| accountData      | 用户数据       | Object  | -                        | 是   | -          |

#### Account Data

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