一体化平台公共导航栏集成方案

安装依赖

npm i integration-platform-navbar
# or
pnpm i integration-platform-navbar

使用

引入 element-plus 的样式文件

import 'element-plus/dist/index.css'

集成公共导航栏组件

// 引入组件
import IntegrationPlatformNavbar from 'integration-platform-navbar'

// 是否处于一体化平台中
const isInJiachengIntegratedPlatform = Boolean(localStorage.getItem('isInJiachengIntegratedPlatform'))
<!-- 一体化平台的导航栏 -->
<IntegrationPlatformNavbar v-if="isInJiachengIntegratedPlatform" />
<!-- 各产品自己的导航栏 -->
<Navbar v-else />

判断是否一体化平台环境

一体化平台会写入一个变量到 localStorage，用于表明当前环境是否处于一体化平台中：

localStorage.setItem('isInJiachengIntegratedPlatform', true)

其他产品在集成时需要根据这个变量来判断是否处于一体化平台中：

Boolean(localStorage.getItem('isInJiachengIntegratedPlatform'))

公共导航栏参数格式

公共导航栏的数据是可以配置的，该组件接收一个 options 对象作为参数，它的类型为 NavbarOptions

export interface MenuData {
    path: string // 菜单项跳转路径
    meta: {
        title: string // 菜单项标题
        icon?: string // 菜单项图标
        size?: number // 菜单项图标大小
        showLink?: boolean // 是否展示菜单
    }
    children?: MenuData[] // 子项
}

export interface NavbarOptionsAPI {
    changePasswordAPI?: string // 修改密码接口
    menuDataAPI?: string // 菜单数据接口，返回数据格式必须符合 MenuData 的定义
}

// 导航栏唯一参数
export interface NavbarOptions {
    logo?: string // 导航栏图片
    title?: string // 导航栏标题
    menuData?: MenuData[] // 导航栏菜单数据，它的优化级比 menuDataAPI 高
    api?: NavbarOptionsAPI // 导航栏相关接口
    hideUserInfo?: boolean // 是否隐藏用户信息（头像、退出登录、修改密码）
    hideNavbarPartRight?: boolean // 是否隐藏导航栏右部
}

<IntegrationPlatformNavbar v-if="isInJiachengIntegratedPlatform" :options="options" />

<!-- 使用默认数据 -->
<IntegrationPlatformNavbar v-if="isInJiachengIntegratedPlatform" />

// 通常情况下不需要配置，这里只是一个示例
// 可选的参数格式，不配置 options 将使用默认数据
const options = {
    logo: 'htts://www.example.com/logo',
    title: '一体化平台',
    menuData: [], // 它的优化级比 menuDataAPI 高
    api: {
        changePasswordAPI: '<https://www.example.com/users/password>',
        menuDataAPI: '<https://www.example.com/menus>'
    }
}

只改变菜单数据的示例：

<IntegrationPlatformNavbar v-if="isInJiachengIntegratedPlatform" :options={ menuData: menuData } />

const menuData: MenuData[] = [
    {
        path: '/jclcdp',
        meta: {
            title: '项目管理',
            icon: 'FolderOpened',
        },
    },
    {
        path: '/jc-assembly-web',
        meta: {
            title: '应用装配',
            icon: 'Grid',
        },
    },
    {
        path: '/form-engine-web',
        meta: {
            title: '表单引擎',
            icon: 'DocumentCopy',
        },
    },
    {
        path: '/one-map',
        meta: {
            title: '地图开发',
            icon: 'Picture',
        },
    },
    {
        path: '/jc-smartv',
        meta: {
            title: '数据大屏',
            icon: 'Monitor',
        },
    },
    {
        path: '/jcbpm',
        meta: {
            title: '流程管理',
            icon: 'Operation',
        },
    },
    {
        path: '/jc-resource-web',
        meta: {
            title: '资源中心',
            icon: 'Files',
        },
    },
]

使用插槽

导航栏右侧部分是可以支持自定义的，比如你想自己设计一个用户信息栏。

<IntegrationPlatformNavbar
    v-if="__IS_IN_INTEGRATED_PLATFORM__"
>
    <div class="text-[#fff] w-[300px]">
        这里是自定义用户信息栏
    </div>
</IntegrationPlatformNavbar>

注意：导航栏的参数全是可选的，如果不配置任何参数，它将使用默认数据