@yqg/max-layout-plugin NPM

@yqg/max-layout-plugin

@yqg/max-layout-plugin 是一个基于@yqg/max、@yqg/max-design 用户通过配置即可快速生成 layout 的插件。

usage

安装@yqg/max-layout-plugin 最新版本:

pnpm i @yqg/max-layout-plugin

在您的基于@yqg/max 构建的项目中的.maxrc.ts 文件中加入 plugin:

import { defineConfig } from '@yqg/max';

export default defineConfig({
    plugins: [require.resolve('@yqg/max-layout-plugin')]
})

在当前.maxrc.ts 文件中继续加入 layout 配置，此处配置即为@yqg/max-desigin 中 layout 组件的配置项

import { defineConfig } from '@yqg/max';

export default defineConfig({
    layout: {
        useHeaderOther: true, // 是否开启header用户信息左侧区域
        useChidori: true, // 是否开启chidori登陆鉴权
        ... // layout组件的配置项
    }
})

配置完上边这些即可配置路由

import { defineConfig } from '@yqg/max';

export default defineConfig({
    {
        path: '/welcome',
        name: 'welcome',
        component: '@/welcome.vue',
        meta: {
            icon: 'TabletFilled', //支持@ant-design/icons-vue里所有icon,在app.ts中引入即可，需要安装这个包
            hideLayout: true,//是否隐藏layout，true为隐藏
            hidden: true,//是否在menu里隐藏，true为隐藏
            yqgPrivileges: ['CHIDORI.PERMISSION.MANAGE']//权限点控制，没有该权限在menu里隐藏
            ... // layout router字段的配置项
        },
    },
})

最后如果需要在 app.ts 里配置一些文件地址等

import { IOnAppCreated, ILayoutConfigProps } from '@yqg/max';
import User from '@/resources/user';
import ChidoriWeb from '@/resources/chidori-web';
import {useInterceptor} from '@/hooks/use-interceptor';
import {TabletFilled} from '@ant-design/icons-vue';

export const onAppCreated: IOnAppCreated = ({ app }) => {};

export const getLayoutConfig: ILayoutConfigProps = () => {
    return {
        component: {
          LayoutHeaderOther: () => import('@/components/HeaderOtherComp.vue')
        },

        iconMap: {
            TabletFilled
        },

        hook: {
          useInterceptor
        },

        resource: {
          User,
          ChidoriWeb
        }
    }
};