web/apps/work-bench

work-bench

管理应用-工作台 工作桌面

变更日志

v1.0

P130需求版本功能实现

本地联调子应用

/src/register-app.js 注册子应用

目录结构

src
├── App.vue
├── main.js
├── pre-hook.js     // work-bench-frame 注入
├── register-app.js // qiankun 子应用配置
├── api
│   ├── index.js
│   ├── mock
│   │   └── index.js
│   └── modules
│       ├── index.js
│       ├── menu.js         // menu 菜单模块数据获取
│       ├── navbar.js       // navbar 未读条数数据获取
│       └── user.js         // navbar 用户信息数据获取
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── router
│   ├── index.js
│   ├── module.js
│   ├── modules
│   │   └── work-bench.js // work-bench-frame route 注入
│   ├── router-interceptor.js
│   └── router.js
├── store
│   ├── index.js
│   ├── module.js
│   └── modules
│       └── work-bench.js  // work-bench-frame store 注入
└── views
    ├── 404.vue
    ├── AboutView.vue
    └── HomeView.vue

基座内置函数

打开内部组件渲染 页面/应用

import { openLink } from '@jy/work-bench-frame'

// 使用内部 iframe 打开链接
openLink({
    link: 'https://xxxx',
    options: {
        type: 'iframe'
    }
})

// 使用内部 qiankun 打开链接 (需注册子应用)
openLink({
    link: '/web-pc',
    options: {
        type: 'qiankun'
    }
})

Event Bus

import { frameEventBus } from '@jy/work-bench-frame'

// 覆盖默认打开菜单前置校验钩子
frameEventBus.on('onBeforeSelect', (menu) => menu)

// 覆盖默认打开菜单事件
frameEventBus.on('onOpenMenu', (menu, spareFn) => {
    console.log(menu, '覆盖基座默认事件')
    spareFn(menu)
})

// 覆盖默认弹窗事件
store.dispatch('work-bench/dialog/registerCustomDialog')
frameEventBus.on('openDialog', (config) => config)

// 覆盖默认弹窗配置
store.dispatch('work-bench/dialog/changeDialogOptions', config)

配置

通过一些必要的配置，完善应用

注册 qiankun 子应用

// src/register-app.js

const apps = [
    {
        name: 'web-pc',
        entry: 'http://localhost:8081',
        rule: '/web-pc'
    },
    ...
]

注册 work-bench 子路由

// src/router/modules/work-bench.js

import { routerModules, addRouter } from '@jy/work-bench-frame'
import Home from '@/views/HomeView'

addRouter([
    {
        path: '',
        component: Home
    },
    {
        path: 'home',
        name: 'home',
        component: Home
    }
])

export default routerModules

待补充

更新 @jy/work-bench-frame

waiting

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.