帮助中心

Appearance

framework-main ​

提供子应用开发时必要的主框架，菜单栏和导航栏。

安装 ​

bash
pnpm add @magustek/framework-main

MainLayout ​

使用方式 ​

  • 在 main.ts 导入 css

如果出现样式错误的问题，调整 main.ts 中 css/scss 文件引入顺序

ts
// import './styles/index.scss'
import '@magustek/framework-main/lib/style.css'
// import '@magustek/framework-ui/dist/style.css'
// import '@magustek/framework-biz-ui/dist/style.css'
  • 在根路由组件内使用
vue
<!-- src/layout/index.vue --> 
<template>
  <MainLayout :init-menu-data="initMenuData" @menu-item-click="onMenuItemClick">
    <template #navbar>
      <LogoutItem :base="options.history.base"></LogoutItem>
    </template>
  </MainLayout>
</template>

<script lang="ts">
import { onBeforeMount } from 'vue'
import { MainLayout, LogoutItem, useBaseInfo, useMenuData, useTheme } from '@magustek/framework-main'
import { useRouter } from 'vue-router'
</script>

<script lang="ts" setup>
const { push, options } = useRouter()
const { initMenuData } = useMenuData()
const { initBaseInfo } = useBaseInfo()
const { changeThemeColor, themeName } = useTheme()

const onMenuItemClick = (node: Any) => {
  push(node.extend.page || node.extend.link)
}

onBeforeMount(() => {
  initBaseInfo()
  changeThemeColor(themeName.value)
})
</script>

可用插槽 ​

插槽名说明
default默认插槽，类似 RouterView, 子应用开发时不需要传递此插槽
tags-view标签栏
logo左上角 Logo
navbar导航栏右侧按钮
menu-title菜单标题
copyright底部版权信息

LogoutItem ​

导航栏退出组件

vue
<template>
  <MainLayout :init-menu-data="initMenuData" @menu-item-click="onMenuItemClick">
    <template #navbar>
      <LogoutItem :base="options.history.base"></LogoutItem>
    </template>
  </MainLayout>
</template>

useMainLogin ​

使用 useMainLogin 集成登录功能

ts
// main.ts
import { createApp } from 'vue'
import { createRouter } from '@magustek/framework-core'
import { useMainLogin } from '@magustek/framework-main'
import { createMainRouter } from '@magustek/framework-wujie'

const router = createRouter({base: '', routes: []})
const mainRouter = createMainRouter(router)

const app = createApp(App)

useMainLogin(router)
  .login({
    // 授权模式，可选 password | authorization
    grantType: 'password',
    // 回调地址，非必填，回调地址(路由)，默认为 '/callback'，需要与后端保持一致
    // 本地开发时，注意启动的ip和端口在后端是否有对应的配置，否则会白屏
    appCallBackPath: '/callback',
    // 应用的 clientId，非必填，默认为 magus-user-center，根据后端配置情况修改
    appClientId: 'magus-user-center',
    // 应用的秘钥，非必填，默认为 123456，根据后端配置情况修改
    appClientSecret: '123456',
    // 授权中心地址，非必填，grantType为 authorization时，填写后端授权中心地址
    appAuthCenterUrl: 'http://220.248.70.147:19101', 
    // 首页路由，非必填，默认为 '/'，登录之后默认跳转的页面, 可以是一个 route 对象
    homeRoute: '/',
  })
  .then(() => {
    app.use(router).use(mainRouter)
    app.mount('#app')
  })

useMenuData ​

初始化菜单数据

vue
<template>
  <MainLayout :init-menu-data="initMenuData" @menu-item-click="onMenuItemClick">
    <template #navbar>
      <LogoutItem :base="options.history.base"></LogoutItem>
    </template>
  </MainLayout>
</template>

<script lang="ts" setup>
import { onBeforeMount } from 'vue'
import { MainLayout, LogoutItem, useBaseInfo, useMenuData, useTheme } from '@magustek/framework-main'
import { useRouter } from 'vue-router'

const { push, options } = useRouter()
const { initMenuData } = useMenuData()
const { initBaseInfo } = useBaseInfo()
const { changeThemeColor, themeName } = useTheme()

const onMenuItemClick = (node: Any) => {
  push(node.extend.page || node.extend.link)
}

onBeforeMount(() => {
  initBaseInfo()
  changeThemeColor(themeName.value)
})
</script>

useLayout ​

使用 useLayout 操作布局

ts
import { useLayout } from '@magustek/framework-main'

const {
  menus,                   // 菜单数据
  flatMenus,               // 菜单数据平铺结构
  settingVisible,          // 显示设置
  hidenTags,               // 隐藏标签栏
  hidenCopyright,          // 隐藏底部版权
  hiddenNavbar,            // 隐藏导航栏
  hiddenSidebar,           // 隐藏侧边栏
  defaultActiveMenu,       // 默认激活的菜单
  layout,                  // 布局  'vertical' | 'horizontal' | 'mix'
  collapseIconPos,         // 收缩菜单按钮位置 'top' | 'bottom'
  isCollapseSideBar,       // 侧边栏是否收缩
  isContentFullScreen,     // 内容区域是否全屏
  toggleSetting,           // 打开、关闭设置
  toggleSideBar,           // 收缩、展开侧边栏
  toggleContentFullScreen, // 内容区域全屏、退出内容区域全屏
} = useLayout()

useTheme ​

使用 useTheme 操作系统主题

ts
import { useTheme } from '@magustek/framework-main'

const {
  isDark,           // 暗黑模式
  isGray,           // 灰色模式
  toggleIsDark,     // 切换暗黑模式
  toggleIsGrey,     // 切换灰色模式
  themeColors,      // 配色方案
  themeName,        // 当前配置方案名称
  changeThemeColor  // 切换配色
} = useTheme()

useBaseInfo ​

初始化基本用户数据、字典数据

vue
<template>
  <MainLayout :init-menu-data="initMenuData" @menu-item-click="onMenuItemClick">
    <template #navbar>
      <LogoutItem :base="options.history.base"></LogoutItem>
    </template>
  </MainLayout>
</template>

<script lang="ts">
import { onBeforeMount } from 'vue'
import { MainLayout, LogoutItem, useBaseInfo, useMenuData, useTheme } from '@magustek/framework-main'
import { useRouter } from 'vue-router'
</script>

<script lang="ts" setup>
const { push, options } = useRouter()
const { initMenuData } = useMenuData()
const { initBaseInfo } = useBaseInfo()
const { changeThemeColor, themeName } = useTheme()

const onMenuItemClick = (node: Any) => {
  push(node.extend.page || node.extend.link)
}

onBeforeMount(() => {
  initBaseInfo()
  changeThemeColor(themeName.value)
})