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 @@
:loading="loading"
: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` -->
<template #headerContentRender>
<a :style="{ margin: '0 8px', fontSize: '20px' }" @click="handleCollapsed">
......@@ -111,9 +117,9 @@ export default defineComponent({
const state = reactive({
menuData,
splitMenus: true,
title: 'ProLayout',
logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
splitMenus: false,
// title: 'ProLayout',
// logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
navTheme: 'dark',
layout: 'mix',
});
......@@ -132,7 +138,6 @@ export default defineComponent({
watchEffect(() => {
if (router.currentRoute) {
const matched = router.currentRoute.value.matched.concat();
console.log('matched', matched);
baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
baseState.openKeys = matched
.filter(r => r.path !== router.currentRoute.value.path)
......
examples/router.ts
View file @ 3225c2ff
......@@ -14,14 +14,14 @@ const routes: RouteRecordRaw[] = [
{
path: '/dashboard',
name: 'dashboard',
meta: { title: 'Dashboard' },
meta: { title: 'Dashboard', icon: 'SettingOutlined' },
redirect: '/dashboard/monitor',
component: RouteView,
children: [
{
path: 'workspace',
name: 'workspace',
meta: { title: 'Dashboard', icon: 'SettingOutlined' },
meta: { title: 'Workspace' },
component: () => import('./views/page1.vue'),
},
{
......@@ -35,18 +35,24 @@ const routes: RouteRecordRaw[] = [
{
path: '/form',
name: 'form',
meta: { title: 'Form' },
meta: { title: 'Form', icon: 'SettingOutlined' },
redirect: '/form/basic-form',
component: RouteView,
children: [
{
path: 'basic-form',
name: 'basic-form',
meta: { title: 'Basic Form', icon: 'SettingOutlined' },
meta: { title: 'Basic Form' },
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 @@
"dependencies": {
"ant-design-vue": "^2.2.2",
"lodash-es": "^4.17.21",
"omit.js": "^2.0.2",
"vue": "^3.1.0",
"vue-router": "^4.0.10"
},
......
scripts/vite/less.ts
View file @ 3225c2ff
......@@ -25,7 +25,6 @@ export default (): Plugin => {
}
const filePath = id.replace(src, output);
maps.set(filePath, code);
console.log('filepath', filePath);
return code;
},
async closeBundle() {
......
src/BasicLayout.tsx
View file @ 3225c2ff
......@@ -8,14 +8,13 @@ import { withInstall } from 'ant-design-vue/es/_util/type';
import useMediaQuery from './hooks/useMediaQuery';
import { defaultSettingProps } from './defaultSettings';
import { getPrefixCls, defaultRouteContext } from './RouteContext';
import type { BreadcrumbProps } from './RouteContext';
import { default as SiderMenuWrapper, siderMenuProps } from './SiderMenu';
import { provideRouteContext, defaultRouteContext, RouteContextProps } from './RouteContext';
import SiderMenuWrapper, { siderMenuProps } from './SiderMenu';
import { WrapContent } from './WrapContent';
import globalHeaderProps from './GlobalHeader/headerProps';
import { HeaderView as Header, headerViewProps } from './Header';
import { getPropsSlot, getPropsSlotfn, PropTypes } from './utils';
import type { BreadcrumbProps } from './RouteContext';
import type { CustomRender, FormatMessage, WithFalse } from './typings';
import './BasicLayout.less';
......@@ -49,7 +48,7 @@ export const basicLayoutProps = {
default: () => null,
},
collapsedButtonRender: {
type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>,
type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => any>>,
default: () => undefined,
},
breadcrumbRender: {
......@@ -57,19 +56,15 @@ export const basicLayoutProps = {
default: () => {},
},
headerContentRender: {
type: [Function, Object, Boolean] as PropType<WithFalse<() => CustomRender>>,
type: [Function, Object, Boolean] as PropType<WithFalse<() => any>>,
default: () => undefined,
},
headerRender: {
type: [Object, Function, Boolean] as PropType<
WithFalse<(props: any /* HeaderProps */) => CustomRender>
>,
type: [Object, Function, Boolean] as PropType<WithFalse<(props: any /* HeaderProps */) => any>>,
default: () => undefined,
},
footerRender: {
type: [Object, Function, Boolean] as PropType<
WithFalse<(props: any /* FooterProps */) => CustomRender>
>,
type: [Object, Function, Boolean] as PropType<WithFalse<(props: any /* FooterProps */) => any>>,
default: () => undefined,
},
colSize: PropTypes.string,
......@@ -93,12 +88,12 @@ const ProLayout = defineComponent({
'menuClick',
],
setup(props, { emit, slots }) {
const refProps = toRefs(props);
// const refProps = toRefs(props);
const isTop = computed(() => props.layout === 'top');
// const isSide = computed(() => layout === 'side');
// const isMix = computed(() => layout === 'mix');
const pure = computed(() => props.pure);
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
// if on event and @event
const onCollapse = (collapsed: boolean) => {
emit('update:collapsed', collapsed);
......@@ -163,6 +158,51 @@ const ProLayout = defineComponent({
}
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 =
props.collapsedButtonRender === false
? false
......@@ -197,51 +237,24 @@ const ProLayout = defineComponent({
headerTitleRender: menuHeaderRender,
headerContentRender,
headerRender: customHeaderRender,
theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark')
? 'dark'
: 'light',
},
props.matchMenuKeys,
),
);
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 restProps = computed(() =>
omit(props, ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick', 'menuHeaderRender']),
);
provide('route-context', routeContext);
return () => (
return (
<>
{pure.value ? (
{pure ? (
slots.default?.()
) : (
<div class={className.value}>
<Layout class={baseClassName.value}>
{!isTop.value && (
<SiderMenuWrapper
{...restProps.value}
{...restProps}
{...menuRenders}
isMobile={isMobile.value}
menuHeaderRender={menuHeaderRender}
......@@ -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 { MenuDataItem, FormatMessage, WithFalse, CustomRender } from './typings';
import { PureSettings } from './defaultSettings';
export interface Route {
path: string;
breadcrumbName: string;
......@@ -66,7 +67,6 @@ export const defaultRouteContext = reactive({
locale: (t: string) => t,
contentWidth: 'Fluid',
hasFooterToolbar: false,
setHasFooterToolbar: (bool: boolean) => (defaultRouteContext.hasFooterToolbar = bool),
});
const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
......@@ -74,11 +74,12 @@ const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-con
export const createRouteContext = () =>
createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider');
export const provideRouteContext = (value: RouteContextProps | Ref<RouteContextProps>) => {
provide(routeContextInjectKey, value);
};
export const useRouteContext = () =>
useContext<Required<RouteContextProps>>(
'route-context' /* routeContextInjectKey */,
defaultRouteContext,
);
useContext<Required<RouteContextProps>>(routeContextInjectKey, defaultRouteContext);
const Provider = createRouteContext();
......
src/SiderMenu/SiderMenu.tsx
View file @ 3225c2ff
......@@ -11,6 +11,7 @@ import Layout from 'ant-design-vue/es/layout';
import 'ant-design-vue/es/menu/style';
import Menu from 'ant-design-vue/es/menu';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { warn } from '@/utils/base';
import BaseMenu, { baseMenuProps } from './BaseMenu';
import { WithFalse, CustomRender } from '../typings';
import { SiderProps } from './typings';
......@@ -121,6 +122,9 @@ export const defaultRenderLogoAndTitle = (
}
const logoDom = defaultRenderLogo(logo, logoStyle);
const titleDom = <h1>{title}</h1>;
if (layout === 'mix' && renderKey === 'menuHeaderRender') {
return null;
}
// call menuHeaderRender
if (typeof renderFunction === 'function') {
// when collapsed, no render title
......@@ -129,9 +133,7 @@ export const defaultRenderLogoAndTitle = (
if (Array.isArray(renderFunction)) {
return <>{renderFunction}</>;
}
if (layout === 'mix' && renderKey === 'menuHeaderRender') {
return null;
}
return (
<a>
{logoDom}
......@@ -176,7 +178,11 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
};
});
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[]) => {
if (props.onSelect) {
......@@ -190,7 +196,8 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
// call menuHeaderRender
const headerDom = defaultRenderLogoAndTitle(props);
const extraDom = menuExtraRender && menuExtraRender(props);
if (hasSide.value && flatMenuData.value.length === 0) {
if (hasSplitMenu.value && flatMenuData.value.length === 0) {
return null;
}
const defaultMenuDom = (
......
src/TopNavHeader/index.less
View file @ 3225c2ff
......@@ -56,7 +56,7 @@
display: inline-block;
margin: 0 0 0 12px;
color: @btn-primary-color;
font-weight: 400;
font-weight: 600;
font-size: 16px;
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';
export { default as isNil } from './isNil';
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[] {
return menusData
.map((item: RouteRecord | RouteRecordRaw) => {
......
yarn.lock
View file @ 3225c2ff
......@@ -2524,6 +2524,11 @@ omit.js@^2.0.0:
resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
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:
version "1.4.0"
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