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。