Skip to content

P
pro-layout
Unverified Commit 3225c2ff authored by Sendya's avatar Sendya
Browse files
Options

fix: side mix mode sidemenu err

parent aea2034e
Show whitespace changes
Inline Side-by-side
Showing with 183 additions and 146 deletions
examples/layouts/BasicLayout.vue
View file @ 3225c2ff
...@@ -7,6 +7,12 @@ ...@@ -7,6 +7,12 @@
:loading="loading" :loading="loading"
:breadcrumb="{ routes: breadcrumb }" :breadcrumb="{ routes: breadcrumb }"
> >
<template #menuHeaderRender>
<a>
<img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" />
<h1>Pro Layout</h1>
</a>
</template>
<!-- only work layout `Side` --> <!-- only work layout `Side` -->
<template #headerContentRender> <template #headerContentRender>
<a :style="{ margin: '0 8px', fontSize: '20px' }" @click="handleCollapsed"> <a :style="{ margin: '0 8px', fontSize: '20px' }" @click="handleCollapsed">
...@@ -111,9 +117,9 @@ export default defineComponent({ ...@@ -111,9 +117,9 @@ export default defineComponent({
const state = reactive({ const state = reactive({
menuData, menuData,
splitMenus: true, splitMenus: false,
title: 'ProLayout', // title: 'ProLayout',
logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg', // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
navTheme: 'dark', navTheme: 'dark',
layout: 'mix', layout: 'mix',
}); });
...@@ -132,7 +138,6 @@ export default defineComponent({ ...@@ -132,7 +138,6 @@ export default defineComponent({
watchEffect(() => { watchEffect(() => {
if (router.currentRoute) { if (router.currentRoute) {
const matched = router.currentRoute.value.matched.concat(); const matched = router.currentRoute.value.matched.concat();
console.log('matched', matched);
baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path); baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
baseState.openKeys = matched baseState.openKeys = matched
.filter(r => r.path !== router.currentRoute.value.path) .filter(r => r.path !== router.currentRoute.value.path)
......
examples/router.ts
View file @ 3225c2ff
...@@ -14,14 +14,14 @@ const routes: RouteRecordRaw[] = [ ...@@ -14,14 +14,14 @@ const routes: RouteRecordRaw[] = [
{ {
path: '/dashboard', path: '/dashboard',
name: 'dashboard', name: 'dashboard',
meta: { title: 'Dashboard' }, meta: { title: 'Dashboard', icon: 'SettingOutlined' },
redirect: '/dashboard/monitor', redirect: '/dashboard/monitor',
component: RouteView, component: RouteView,
children: [ children: [
{ {
path: 'workspace', path: 'workspace',
name: 'workspace', name: 'workspace',
meta: { title: 'Dashboard', icon: 'SettingOutlined' }, meta: { title: 'Workspace' },
component: () => import('./views/page1.vue'), component: () => import('./views/page1.vue'),
}, },
{ {
...@@ -35,18 +35,24 @@ const routes: RouteRecordRaw[] = [ ...@@ -35,18 +35,24 @@ const routes: RouteRecordRaw[] = [
{ {
path: '/form', path: '/form',
name: 'form', name: 'form',
meta: { title: 'Form' }, meta: { title: 'Form', icon: 'SettingOutlined' },
redirect: '/form/basic-form', redirect: '/form/basic-form',
component: RouteView, component: RouteView,
children: [ children: [
{ {
path: 'basic-form', path: 'basic-form',
name: 'basic-form', name: 'basic-form',
meta: { title: 'Basic Form', icon: 'SettingOutlined' }, meta: { title: 'Basic Form' },
component: () => import('./views/page1.vue'), component: () => import('./views/page1.vue'),
}, },
], ],
}, },
{
path: '/single',
name: 'single',
meta: { title: 'Single', icon: 'SettingOutlined' },
component: () => import('./views/page1.vue'),
},
], ],
}, },
]; ];
......
package.json
View file @ 3225c2ff
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
"dependencies": { "dependencies": {
"ant-design-vue": "^2.2.2", "ant-design-vue": "^2.2.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"omit.js": "^2.0.2",
"vue": "^3.1.0", "vue": "^3.1.0",
"vue-router": "^4.0.10" "vue-router": "^4.0.10"
}, },
......
scripts/vite/less.ts
View file @ 3225c2ff
...@@ -25,7 +25,6 @@ export default (): Plugin => { ...@@ -25,7 +25,6 @@ export default (): Plugin => {
} }
const filePath = id.replace(src, output); const filePath = id.replace(src, output);
maps.set(filePath, code); maps.set(filePath, code);
console.log('filepath', filePath);
return code; return code;
}, },
async closeBundle() { async closeBundle() {
......
src/BasicLayout.tsx
View file @ 3225c2ff
...@@ -8,14 +8,13 @@ import { withInstall } from 'ant-design-vue/es/_util/type'; ...@@ -8,14 +8,13 @@ import { withInstall } from 'ant-design-vue/es/_util/type';
import useMediaQuery from './hooks/useMediaQuery'; import useMediaQuery from './hooks/useMediaQuery';
import { defaultSettingProps } from './defaultSettings'; import { defaultSettingProps } from './defaultSettings';
import { getPrefixCls, defaultRouteContext } from './RouteContext'; import { provideRouteContext, defaultRouteContext, RouteContextProps } from './RouteContext';
import type { BreadcrumbProps } from './RouteContext'; import SiderMenuWrapper, { siderMenuProps } from './SiderMenu';
import { default as SiderMenuWrapper, siderMenuProps } from './SiderMenu';
import { WrapContent } from './WrapContent'; import { WrapContent } from './WrapContent';
import globalHeaderProps from './GlobalHeader/headerProps'; import globalHeaderProps from './GlobalHeader/headerProps';
import { HeaderView as Header, headerViewProps } from './Header'; import { HeaderView as Header, headerViewProps } from './Header';
import { getPropsSlot, getPropsSlotfn, PropTypes } from './utils'; import { getPropsSlot, getPropsSlotfn, PropTypes } from './utils';
import type { BreadcrumbProps } from './RouteContext';
import type { CustomRender, FormatMessage, WithFalse } from './typings'; import type { CustomRender, FormatMessage, WithFalse } from './typings';
import './BasicLayout.less'; import './BasicLayout.less';
...@@ -49,7 +48,7 @@ export const basicLayoutProps = { ...@@ -49,7 +48,7 @@ export const basicLayoutProps = {
default: () => null, default: () => null,
}, },
collapsedButtonRender: { collapsedButtonRender: {
type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>, type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => any>>,
default: () => undefined, default: () => undefined,
}, },
breadcrumbRender: { breadcrumbRender: {
...@@ -57,19 +56,15 @@ export const basicLayoutProps = { ...@@ -57,19 +56,15 @@ export const basicLayoutProps = {
default: () => {}, default: () => {},
}, },
headerContentRender: { headerContentRender: {
type: [Function, Object, Boolean] as PropType<WithFalse<() => CustomRender>>, type: [Function, Object, Boolean] as PropType<WithFalse<() => any>>,
default: () => undefined, default: () => undefined,
}, },
headerRender: { headerRender: {
type: [Object, Function, Boolean] as PropType< type: [Object, Function, Boolean] as PropType<WithFalse<(props: any /* HeaderProps */) => any>>,
WithFalse<(props: any /* HeaderProps */) => CustomRender>
>,
default: () => undefined, default: () => undefined,
}, },
footerRender: { footerRender: {
type: [Object, Function, Boolean] as PropType< type: [Object, Function, Boolean] as PropType<WithFalse<(props: any /* FooterProps */) => any>>,
WithFalse<(props: any /* FooterProps */) => CustomRender>
>,
default: () => undefined, default: () => undefined,
}, },
colSize: PropTypes.string, colSize: PropTypes.string,
...@@ -93,12 +88,12 @@ const ProLayout = defineComponent({ ...@@ -93,12 +88,12 @@ const ProLayout = defineComponent({
'menuClick', 'menuClick',
], ],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const refProps = toRefs(props); // const refProps = toRefs(props);
const isTop = computed(() => props.layout === 'top'); const isTop = computed(() => props.layout === 'top');
// const isSide = computed(() => layout === 'side'); // const isSide = computed(() => layout === 'side');
// const isMix = computed(() => layout === 'mix'); // const isMix = computed(() => layout === 'mix');
const pure = computed(() => props.pure);
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth)); const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
// if on event and @event // if on event and @event
const onCollapse = (collapsed: boolean) => { const onCollapse = (collapsed: boolean) => {
emit('update:collapsed', collapsed); emit('update:collapsed', collapsed);
...@@ -163,6 +158,51 @@ const ProLayout = defineComponent({ ...@@ -163,6 +158,51 @@ const ProLayout = defineComponent({
} }
return <Header {...p} matchMenuKeys={matchMenuKeys || []} />; return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
}; };
// const restProps = computed(() =>
// omit(props, []),
// );
// provide('route-context', routeContext);
// const routeContext = reactive({
// getPrefixCls,
// // ...props,
// locale: refProps.locale.value || defaultRouteContext.locale,
// breadcrumb: computed(() => {
// return {
// ...props.breadcrumb,
// itemRender: breadcrumbRender,
// };
// }),
// contentWidth: refProps.contentWidth, // 'Fluid',
// layout: refProps.layout,
// navTheme: refProps.navTheme,
// splitMenus: refProps.splitMenus,
// fixedHeader: refProps.fixSiderbar,
// fixSiderbar: refProps.fixSiderbar,
// sideWidth: siderWidth,
// headerHeight: refProps.headerHeight,
// hasFooterToolbar: false,
// menuData: refProps.menuData,
// selectedKeys: refProps.selectedKeys,
// openKeys: refProps.openKeys,
// });
const routeContext = reactive<RouteContextProps>({
...defaultRouteContext,
...(omit(toRefs(props), ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick']) as any),
});
provideRouteContext(routeContext);
return () => {
// const { onCollapse, onOpenKeys, onSelect, onMenuClick, menuHeaderRender, ...restProps } = props;
const {
pure,
onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect,
onMenuClick: propsOnMenuClick,
...restProps
} = props;
const collapsedButtonRender = const collapsedButtonRender =
props.collapsedButtonRender === false props.collapsedButtonRender === false
? false ? false
...@@ -197,51 +237,24 @@ const ProLayout = defineComponent({ ...@@ -197,51 +237,24 @@ const ProLayout = defineComponent({
headerTitleRender: menuHeaderRender, headerTitleRender: menuHeaderRender,
headerContentRender, headerContentRender,
headerRender: customHeaderRender, headerRender: customHeaderRender,
theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light', theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark')
? 'dark'
: 'light',
}, },
props.matchMenuKeys, props.matchMenuKeys,
), ),
); );
const routeContext = reactive({ return (
getPrefixCls,
// ...props,
locale: refProps.locale.value || defaultRouteContext.locale,
breadcrumb: computed(() => {
return {
...props.breadcrumb,
itemRender: breadcrumbRender,
};
}),
contentWidth: refProps.contentWidth, // 'Fluid',
layout: refProps.layout,
navTheme: refProps.navTheme,
splitMenus: refProps.splitMenus,
fixedHeader: refProps.fixSiderbar,
fixSiderbar: refProps.fixSiderbar,
sideWidth: siderWidth,
headerHeight: refProps.headerHeight,
hasFooterToolbar: false,
menuData: refProps.menuData,
selectedKeys: refProps.selectedKeys,
openKeys: refProps.openKeys,
});
const restProps = computed(() =>
omit(props, ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick', 'menuHeaderRender']),
);
provide('route-context', routeContext);
return () => (
<> <>
{pure.value ? ( {pure ? (
slots.default?.() slots.default?.()
) : ( ) : (
<div class={className.value}> <div class={className.value}>
<Layout class={baseClassName.value}> <Layout class={baseClassName.value}>
{!isTop.value && ( {!isTop.value && (
<SiderMenuWrapper <SiderMenuWrapper
{...restProps.value} {...restProps}
{...menuRenders} {...menuRenders}
isMobile={isMobile.value} isMobile={isMobile.value}
menuHeaderRender={menuHeaderRender} menuHeaderRender={menuHeaderRender}
...@@ -267,6 +280,7 @@ const ProLayout = defineComponent({ ...@@ -267,6 +280,7 @@ const ProLayout = defineComponent({
)} )}
</> </>
); );
};
}, },
}); });
......
src/RouteContext.tsx
View file @ 3225c2ff
import { InjectionKey, reactive } from 'vue'; import { InjectionKey, provide, reactive, Ref } from 'vue';
import { createContext, useContext } from './hooks/context'; import { createContext, useContext } from './hooks/context';
import { MenuDataItem, FormatMessage, WithFalse, CustomRender } from './typings'; import { MenuDataItem, FormatMessage, WithFalse, CustomRender } from './typings';
import { PureSettings } from './defaultSettings'; import { PureSettings } from './defaultSettings';
export interface Route { export interface Route {
path: string; path: string;
breadcrumbName: string; breadcrumbName: string;
...@@ -66,7 +67,6 @@ export const defaultRouteContext = reactive({ ...@@ -66,7 +67,6 @@ export const defaultRouteContext = reactive({
locale: (t: string) => t, locale: (t: string) => t,
contentWidth: 'Fluid', contentWidth: 'Fluid',
hasFooterToolbar: false, hasFooterToolbar: false,
setHasFooterToolbar: (bool: boolean) => (defaultRouteContext.hasFooterToolbar = bool),
}); });
const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context'); const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
...@@ -74,11 +74,12 @@ const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-con ...@@ -74,11 +74,12 @@ const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-con
export const createRouteContext = () => export const createRouteContext = () =>
createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider'); createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider');
export const provideRouteContext = (value: RouteContextProps | Ref<RouteContextProps>) => {
provide(routeContextInjectKey, value);
};
export const useRouteContext = () => export const useRouteContext = () =>
useContext<Required<RouteContextProps>>( useContext<Required<RouteContextProps>>(routeContextInjectKey, defaultRouteContext);
'route-context' /* routeContextInjectKey */,
defaultRouteContext,
);
const Provider = createRouteContext(); const Provider = createRouteContext();
......
src/SiderMenu/SiderMenu.tsx
View file @ 3225c2ff
...@@ -11,6 +11,7 @@ import Layout from 'ant-design-vue/es/layout'; ...@@ -11,6 +11,7 @@ import Layout from 'ant-design-vue/es/layout';
import 'ant-design-vue/es/menu/style'; import 'ant-design-vue/es/menu/style';
import Menu from 'ant-design-vue/es/menu'; import Menu from 'ant-design-vue/es/menu';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { warn } from '@/utils/base';
import BaseMenu, { baseMenuProps } from './BaseMenu'; import BaseMenu, { baseMenuProps } from './BaseMenu';
import { WithFalse, CustomRender } from '../typings'; import { WithFalse, CustomRender } from '../typings';
import { SiderProps } from './typings'; import { SiderProps } from './typings';
...@@ -121,6 +122,9 @@ export const defaultRenderLogoAndTitle = ( ...@@ -121,6 +122,9 @@ export const defaultRenderLogoAndTitle = (
} }
const logoDom = defaultRenderLogo(logo, logoStyle); const logoDom = defaultRenderLogo(logo, logoStyle);
const titleDom = <h1>{title}</h1>; const titleDom = <h1>{title}</h1>;
if (layout === 'mix' && renderKey === 'menuHeaderRender') {
return null;
}
// call menuHeaderRender // call menuHeaderRender
if (typeof renderFunction === 'function') { if (typeof renderFunction === 'function') {
// when collapsed, no render title // when collapsed, no render title
...@@ -129,9 +133,7 @@ export const defaultRenderLogoAndTitle = ( ...@@ -129,9 +133,7 @@ export const defaultRenderLogoAndTitle = (
if (Array.isArray(renderFunction)) { if (Array.isArray(renderFunction)) {
return <>{renderFunction}</>; return <>{renderFunction}</>;
} }
if (layout === 'mix' && renderKey === 'menuHeaderRender') {
return null;
}
return ( return (
<a> <a>
{logoDom} {logoDom}
...@@ -176,7 +178,11 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => { ...@@ -176,7 +178,11 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
}; };
}); });
const flatMenuData = computed( const flatMenuData = computed(
() => (hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0])) || [], () =>
(hasSide.value &&
hasSplitMenu.value &&
getMenuFirstChildren(context.menuData, context.selectedKeys[0])) ||
[],
); );
const handleSelect = ($event: string[]) => { const handleSelect = ($event: string[]) => {
if (props.onSelect) { if (props.onSelect) {
...@@ -190,7 +196,8 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => { ...@@ -190,7 +196,8 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
// call menuHeaderRender // call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props); const headerDom = defaultRenderLogoAndTitle(props);
const extraDom = menuExtraRender && menuExtraRender(props); const extraDom = menuExtraRender && menuExtraRender(props);
if (hasSide.value && flatMenuData.value.length === 0) {
if (hasSplitMenu.value && flatMenuData.value.length === 0) {
return null; return null;
} }
const defaultMenuDom = ( const defaultMenuDom = (
......
src/TopNavHeader/index.less
View file @ 3225c2ff
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
display: inline-block; display: inline-block;
margin: 0 0 0 12px; margin: 0 0 0 12px;
color: @btn-primary-color; color: @btn-primary-color;
font-weight: 400; font-weight: 600;
font-size: 16px; font-size: 16px;
vertical-align: top; vertical-align: top;
} }
......
src/utils/base.ts 0 → 100644
View file @ 3225c2ff
export function warn(valid: boolean, message: string) {
// Support uglify
if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
console.error(`Warning: ${message}`);
}
}
export function warning(valid: boolean, message: string) {
warn(valid, `[@ant-design-vue/pro-layout] ${message}`);
}
src/utils/index.ts
View file @ 3225c2ff
...@@ -8,17 +8,6 @@ export { default as isImg } from './isImg'; ...@@ -8,17 +8,6 @@ export { default as isImg } from './isImg';
export { default as isNil } from './isNil'; export { default as isNil } from './isNil';
export { PropTypes }; export { PropTypes };
export function warn(valid: boolean, message: string) {
// Support uglify
if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
console.error(`Warning: ${message}`);
}
}
export function warning(valid: boolean, message: string) {
warn(valid, `[@ant-design-vue/pro-layout] ${message}`);
}
export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] { export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
return menusData return menusData
.map((item: RouteRecord | RouteRecordRaw) => { .map((item: RouteRecord | RouteRecordRaw) => {
......
yarn.lock
View file @ 3225c2ff
...@@ -2524,6 +2524,11 @@ omit.js@^2.0.0: ...@@ -2524,6 +2524,11 @@ omit.js@^2.0.0:
resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f" resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg== integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
omit.js@^2.0.2:
version "2.0.2"
resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
integrity sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8=
once@^1.3.0: once@^1.3.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment