Best Link Layout

BestLink 后台管理系统布局组件，基于 Vue3 + Ant Design Vue + Pinia。

安装

npm install best-link-layout

使用

import {
  Layout,
  LayoutLoading,
  IframeIndex,
  useLayoutAppConfigStore,
  useLayoutUserStore,
  useLayoutSpinStore,
  layoutI18nList,
  layoutThemeColors
} from 'best-link-layout'
import 'best-link-layout/style.css'

// 配置首页
const appConfigStore = useLayoutAppConfigStore()
appConfigStore.homePage.name = 'Dashboard'
appConfigStore.homePage.path = '/dashboard'

// 设置用户信息
const userStore = useLayoutUserStore()
userStore.setUserLoginInfo(userData)

// 获取用户信息
userStore.getUserInfo()

全局 Loading 使用

<!-- App.vue -->
<template>
  <LayoutLoading>
    <RouterView />
  </LayoutLoading>
</template>

<script setup>
import { LayoutLoading } from 'best-link-layout'
</script>

// 任意位置控制 loading
import { useLayoutSpinStore } from 'best-link-layout'

useLayoutSpinStore().show()  // 显示
useLayoutSpinStore().hide()  // 隐藏

导出内容

组件

• Layout - 主布局组件（自动根据配置切换布局模式）
• LayoutLoading - 全局 Loading 组件
• IframeIndex - iframe 嵌入页面组件

Store

• useLayoutAppConfigStore - 应用配置 Store
• useLayoutUserStore - 用户信息 Store
• useLayoutSpinStore - Loading 状态 Store

常量

• LAYOUT_ELEMENT_IDS - 布局元素 ID 常量
• MENU_TYPE_ENUM - 菜单类型枚举
• MENU_PERMS_TYPE_ENUM - 菜单权限类型枚举
• MENU_DEFAULT_PARENT_ID - 菜单默认父级 ID

工具

• layoutI18nList - 语言列表
• layoutMessages - 国际化消息
• layoutThemeColors - 主题颜色配置
• getLayoutInitializedLanguage - 获取初始化语言
• getAdminToken - 获取管理员 Token
• ssoLogin - SSO 登录
• getCurrInfo - 获取当前用户信息
• layoutRequest - axios 请求实例

依赖要求

• vue >= 3.0.0
• vue-router >= 4.0.0
• pinia >= 2.0.0
• ant-design-vue >= 4.0.0
• @ant-design/icons-vue >= 7.0.0
• vue-i18n >= 9.0.0
• mitt
• lodash
• dayjs
• js-cookie >= 3.0.0

License

MIT