@yqg/max-layout-plugin

title: Vue PC Layout order: 7

Vue PC Layout是 Vue PC 端的布局插件， 插件基于 max-design的 Layout 组件进行封装；

安装

pnpm i @yqg/max-layout-plugin

配置

在 maxrc.ts 中进行配置：

export default defineConfig({
  layout: {
    useChidori: true
    // 配置
  },
  ...
  plugins: ['@yqg/max-layout-plugin']
});

配置项

基础配置

参数	类型	默认值	说明
prefixCls	string	-	自定义类名前缀，用于修改 ant-design 类名前缀
useChidori	boolean	false	是否使用 Chidori 相关功能
useCrane	boolean	false	是否使用 Crane 权限系统，开启 useCrane 时必须开启 useChidori
useCustomRouterView	boolean	false	是否使用自定义路由视图，搭配 app 里的 CustomRouterView 一起使用
useHeaderOther	boolean	false	是否使用自定义头部组件，搭配 app 里的 HeaderOtherComp 一起使用
watermark	object	-	水印配置
suggestion	object	-	建议反馈平台配置
pathName	string	-	选中的侧边栏菜单
token	object	-	ant-design 的 ConfigProvider 中 theme 配置的 token
isSplit	boolean	false	是否切割，第一层在 header 上
defaultOpenAll	boolean	false	是否全部 menu 打开
title	string	-	项目名称
logo	string	-	项目 logo src 地址
showBreadcrumb	boolean	true	是否展示面包屑
theme	string	'light'	主题
contentStyle	()=>({})	-	内容区域样式
type	'mix' | 'side'	'mix'	布局类型
collapsed	boolean	false	左侧 layout 是否收起

水印配置 (watermark)

详细配置见 watermark-js-plus 包

建议反馈配置 (suggestion)

参数	类型	默认值	说明
systemId	string	-	系统 ID
version	string	'stable'	反馈 SDK 版本

布局配置 (LayoutConfig)

在项目 app.ts 中配置一个 getLayoutConfig 函数

export type ILayoutConfigProps = () => {
  component?: {
    // 配合useCustomRouterView使用，自定义header,例如LayoutHeaderOther: () => import('@/components/HeaderOtherComp.vue')
    LayoutHeaderOther?: () => Promise<any>;
    // 配合useHeaderOther使用，自定义routerView,例如LayoutHeaderOther: () => import('@/components/RouterViewComp.vue')
    CustomRouterView?: () => Promise<any>;
  };
  iconMap?: {
    /*
    左侧菜单用到的图标，例如import {AppstoreOutlined} from '@ant-design/icons-vue';
    AppstoreOutlined
  */
    [key: string]: any;
  };
  hook?: {
    // http的interceptor hook，例如import { useInterceptor } from '@/hooks/use-interceptor';
    useInterceptor: () => void;
  };
  resource?: {
    // user和chidori的接口配置，例如import User from '@/resources/user';
    User: any;
    ChidoriWeb: any;
  };
  // 用户的一些信息
  userInfo?: {
    menu?: { key: string; label: string }[];
    onClickUserInfoMenu?: (
      menuInfo: { key: string; label: string },
      user: any,
    ) => void;
  };
  fn?: {
    //用户所有权限筛选
    authoritiesFilter?: (authorities: string[]) => string[];
    //菜单筛选
    menusFilter?: (
      menus: any[],
      params: { localStorage: any; route: any },
    ) => any[];
    //crane自定义PermissionKeys
    customPermissionKeys?: (params: {
      localStorage: any;
      route: any;
    }) => string[];
    //fetch之前自定义函数
    customFnB4Fetch?: (params: {
      localStorage: any;
      route: any;
    }) => Promise<any>;
    //是否展示申请权限的按钮
    isShowCraneFn?: (params: { localStorage: any; route: any }) => boolean;
  };
};

使用示例

可以参照https://gitlab.yangqianguan.com/web/adhoc。