update: 优化ProLayout使用

This commit is contained in:
xieyonghong 2023-03-01 17:24:57 +08:00
parent a6c5a40a76
commit 730997231e
24 changed files with 10 additions and 1599 deletions

View File

@ -1,221 +0,0 @@
import {
computed,
reactive,
unref,
defineComponent,
toRefs,
provide
} from 'vue'
import type { ExtractPropTypes, PropType, CSSProperties} from 'vue'
import { Layout } from 'ant-design-vue'
import { defaultSettingProps } from './defaultSetting'
import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
import type {
BreadcrumbRender,
CollapsedButtonRender, CustomRender,
HeaderRender,
MenuContentRender,
MenuExtraRender,
MenuHeaderRender,
MenuItemRender,
RightContentRender,
SubMenuItemRender
} from './typings'
import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
import { getSlot } from '@/utils/comm'
import { getMenuFirstChildren } from 'components/Layout/utils'
import { pick } from 'lodash-es'
import { routeContextInjectKey } from './RouteContext'
import { HeaderView, headerViewProps } from './components/Header'
export const basicLayoutProps = {
...defaultSettingProps,
...siderMenuProps,
...headerViewProps,
breadcrumb: {
type: [Object, Function] as PropType<BreadcrumbProps>,
default: () => null
},
breadcrumbRender: {
type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
default() {
return null
}
},
contentStyle: {
type: [String, Object] as PropType<CSSProperties>,
default: () => {
return null
}
},
pure: {
type: Boolean,
default: () => false
}
}
export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>>;
export default defineComponent({
name: 'ProLayout',
inheritAttrs: false,
props: basicLayoutProps,
emits: [
'update:collapsed',
'update:open-keys',
'update:selected-keys',
'collapse',
'openKeys',
'select',
'menuHeaderClick',
'menuClick'
],
setup(props, { emit, attrs, slots }) {
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth))
const onCollapse = (collapsed: boolean) => {
emit('update:collapsed', collapsed)
emit('collapse', collapsed)
}
const onOpenKeys = (openKeys: string[] | false) => {
emit('update:open-keys', openKeys)
emit('openKeys', openKeys)
}
const onSelect = (selectedKeys: string[] | false) => {
emit('update:selected-keys', selectedKeys)
emit('select', selectedKeys)
}
const onMenuHeaderClick = (e: MouseEvent) => {
emit('menuHeaderClick', e)
}
const onMenuClick = (args: any) => {
emit('menuClick', args)
}
const headerRender = (
p: BasicLayoutProps & {
hasSiderMenu: boolean;
headerRender: HeaderRender;
rightContentRender: RightContentRender;
},
matchMenuKeys?: string[]
): CustomRender | null => {
if (p.headerRender === false) {
return null
}
return <HeaderView {...p} />
}
const breadcrumb = computed<BreadcrumbProps>(() => ({
...props.breadcrumb,
itemRender: getSlot<BreadcrumbRender>(slots, props, 'breadcrumbRender') as BreadcrumbRender
}))
const flatMenuData = computed(
() => (props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || [])
const routeContext = reactive<RouteContextProps>({
...(pick(toRefs(props), [
'menuData',
'openKeys',
'selectedKeys',
'contentWidth',
'headerHeight'
]) as any),
siderWidth,
breadcrumb,
flatMenuData
})
provide(routeContextInjectKey, routeContext)
return () => {
const {
pure,
onCollapse: propsOnCollapse,
onOpenKeys: propsOnOpenKeys,
onSelect: propsOnSelect,
onMenuClick: propsOnMenuClick,
...restProps
} = props
const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
// menu
const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender')
const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender')
const headerDom = computed(() =>
headerRender(
{
...props,
hasSiderMenu: true,
menuItemRender,
subMenuItemRender,
menuData: props.menuData,
onCollapse,
onOpenKeys,
onSelect,
onMenuHeaderClick,
rightContentRender,
collapsedButtonRender,
menuExtraRender,
menuContentRender,
headerRender: customHeaderRender,
theme: props.navTheme
},
[]
)
)
return (
<>
{
pure ? (
slots.default?.()
) : (
<Layout
class={'pro-layout'}
style={{
minHeight: '100vh'
}}
>
<SiderMenuWrapper
{...restProps}
theme={props.navTheme}
menuHeaderRender={menuHeaderRender}
menuExtraRender={menuExtraRender}
menuContentRender={menuContentRender}
menuItemRender={menuItemRender}
subMenuItemRender={subMenuItemRender}
collapsedButtonRender={collapsedButtonRender}
onCollapse={onCollapse}
onSelect={onSelect}
onOpenKeys={onOpenKeys}
onMenuClick={onMenuClick}
/>
<Layout>
{headerDom.value}
<Layout>
{slots.default?.()}
</Layout>
</Layout>
</Layout>
)
}
</>
)
}
}
})

View File

@ -1,5 +1,5 @@
<template>
<ProLayout
<j-pro-layout
v-bind='layoutConf'
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
@ -14,14 +14,13 @@
<router-view v-slot='{ Component}'>
<component :is='Component' />
</router-view>
</ProLayout>
</j-pro-layout>
</template>
<script setup lang="ts" name='BasicLayoutPage'>
import { ProLayout } from '@/components/Layout'
import DefaultSetting from '../../../config/config'
import { useMenuStore } from '@/store/menu'
import { clearMenuItem } from 'components/Layout/utils'
import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util'
type StateType = {
collapsed: boolean
@ -36,11 +35,12 @@ const route = useRoute()
const menu = useMenuStore()
const layoutConf = reactive({
navTheme: DefaultSetting.layout.theme,
theme: DefaultSetting.layout.theme,
siderWidth: DefaultSetting.layout.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: clearMenuItem(menu.siderMenus),
splitMenus: true
});
const state = reactive<StateType>({

View File

@ -1,45 +0,0 @@
import type { ComputedRef, VNodeChild, InjectionKey } from 'vue'
import type { PureSettings } from 'components/Layout/defaultSetting'
import type { MenuDataItem } from 'components/Layout/typings'
import { useContext } from 'components/Layout/hooks/context'
export interface Route {
path: string;
breadcrumbName: string;
children?: Omit<Route, 'children'>[];
}
export interface BreadcrumbProps {
prefixCls?: string;
routes?: Route[];
params?: any;
separator?: VNodeChild;
itemRender?: (opts: { route: Route; params: any; routes: Array<Route>; paths: Array<string> }) => VNodeChild;
}
export type BreadcrumbListReturn = Pick<BreadcrumbProps, Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>>;
export interface MenuState {
selectedKeys: string[];
openKeys: string[];
}
export interface RouteContextProps extends Partial<PureSettings>, MenuState {
menuData: MenuDataItem[];
flatMenuData?: MenuDataItem[];
getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
collapsed?: boolean;
hasSideMenu?: boolean;
siderWidth?: number;
headerHeight?: number;
/* 附加属性 */
[key: string]: any;
}
export const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
export const useRouteContext = () =>
useContext<Required<RouteContextProps>>(routeContextInjectKey, {});

View File

@ -1,127 +0,0 @@
import type { ExtractPropTypes, FunctionalComponent } from 'vue'
import { defineComponent, PropType } from 'vue'
import { defaultRenderLogo, siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
import BaseMenu from '../SiderMenu/BaseMenu'
import { useRouteContext } from 'components/Layout/RouteContext'
import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
import { defaultSettingProps } from 'components/Layout/defaultSetting'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
import './index.less'
import { RouteRecordRaw } from 'vue-router'
import { clearMenuItem } from 'components/Layout/utils'
export const headerProps = {
...defaultSettingProps,
collapsed: PropTypes.looseBool,
menuData: {
type: Array as PropType<MenuDataItem[]>,
default: () => [],
},
logo: siderMenuProps.logo,
logoStyle: siderMenuProps.logoStyle,
menuRender: {
type: [Object, Function] as PropType<
WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>
>,
default: () => undefined,
},
menuItemRender: siderMenuProps.menuItemRender,
subMenuItemRender: siderMenuProps.subMenuItemRender,
rightContentRender: {
type: [Object, Function] as PropType<RightContentRender>,
default: () => undefined,
},
siderWidth: PropTypes.number.def(208),
// events
onMenuHeaderClick: PropTypes.func,
onCollapse: siderMenuProps.onCollapse,
onOpenKeys: siderMenuProps.onOpenKeys,
onSelect: siderMenuProps.onSelect,
}
export type HeaderProps = ExtractPropTypes<typeof headerProps>;
export default defineComponent({
name: 'Header',
emits: [
'menuHeaderClick', 'collapse', 'openKeys', 'select'
],
inheritAttrs: false,
props: headerProps,
setup(props, { slots, emit}) {
const {
onSelect,
onMenuHeaderClick,
onOpenKeys,
logo,
logoStyle,
menuData,
navTheme,
contentWidth,
title,
rightContentRender
} = props;
const rightSize = ref<number | string>('auto')
const context = useRouteContext();
const noChildrenMenuData = (menuData || []).map((item) => ({
...item,
children: undefined,
})) as RouteRecordRaw[];
const clearMenuData = clearMenuItem(noChildrenMenuData);
return () => (
<>
<div
class={`header-content ${navTheme}`}
>
<div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
<div class={'header-main-left'} onClick={onMenuHeaderClick}>
<div class={'header-logo'}>
<a>
{defaultRenderLogo(logo, logoStyle)}
<h1 title={title}>{ title }</h1>
</a>
</div>
</div>
<div style={{ flex: 1 }} class={'header-menu'}>
<BaseMenu
theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme}
menuData={clearMenuData}
mode={'horizontal'}
menuItemRender={props.menuItemRender}
subMenuItemRender={props.subMenuItemRender}
openKeys={context.openKeys}
selectedKeys={context.selectedKeys}
{...{
'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
}}
/>
</div>
<div class={'header-right'} style={{ minWidth: rightSize.value }}>
<div>
<ResizeObserver
onResize={({ width }: { width: number}) => {
rightSize.value = width
}}
>
{
rightContentRender && typeof rightContentRender === 'function' ? (
<div>{rightContentRender({...props})}</div>
) : rightContentRender
}
</ResizeObserver>
</div>
</div>
</div>
</div>
</>
)
}
})

View File

@ -1,64 +0,0 @@
.header-content {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
transition: background .3s,width .2s;
&.light {
background-color: #fff;
}
&.dark {
.header-logo {
>a {
> h1 {
color: #fff !important;
}
}
}
}
.header-main {
padding-left: 16px;
display: flex;
height: 100%;
.header-main-left {
display: flex;
min-width: 192px;
.header-logo {
height: 100%;
position: relative;
display: flex;
justify-content: center;
min-width: 165px;
overflow: hidden;
> a {
color: @primary-color;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: color .3s;
> h1 {
vertical-align: top;
display: inline-block;
margin: 0 0 0 12px;
font-size: 16px;
color: rgba(0,0,0,.85);
}
}
img {
display: inline-block;
height: 32px;
vertical-align: middle;
}
}
}
}
}

View File

@ -1,59 +0,0 @@
import type { ExtractPropTypes } from 'vue'
import Header, { headerProps } from './Header'
import { useRouteContext } from 'components/Layout/RouteContext'
import type { RouteRecordRaw } from 'vue-router'
import { clearMenuItem } from 'components/Layout/utils'
import { Layout } from 'ant-design-vue'
export const headerViewProps = {
...headerProps
}
export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps>>;
export const HeaderView = defineComponent({
name: 'HeaderView',
inheritAttrs: false,
props: headerViewProps,
setup(props) {
const { headerHeight, onCollapse } = toRefs(props);
const context = useRouteContext();
const clearMenuData = computed(
() => (context.menuData && clearMenuItem(context.menuData as RouteRecordRaw[])) || []
);
return () => (
<>
<Layout.Header
style={{
padding: 0,
height: `${headerHeight.value}px`,
lineHeight: `${headerHeight.value}px`,
width: `100%`,
background: 'transparent'
}}
/>
<Layout.Header
style={{
padding: 0,
height: `${headerHeight.value}px`,
lineHeight: `${headerHeight.value}px`,
width: `100%`,
zIndex: 19,
position: 'fixed',
top: 0,
right: 0
}}
>
<Header
{...props}
onCollapse={onCollapse.value}
menuData={clearMenuData.value}
/>
</Layout.Header>
</>
)
}
})

View File

@ -1,23 +0,0 @@
.page-container {
min-height: 100%;
display: flex;
flex-direction: column;
.page-container-grid-content {
padding: 24px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
> div, .page-container-children-content, .page-container-full-height {
min-height: 100%;
display: flex;
flex-direction: column;
}
//.children-full-height {
// > :nth-child(1) {
// min-height: 100%;
// }
//}
}
}

View File

@ -1,250 +0,0 @@
import { TabPaneProps } from 'ant-design-vue'
import type { ExtractPropTypes, FunctionalComponent, PropType, VNodeChild } from 'vue'
import { pageHeaderProps } from 'ant-design-vue/es/page-header';
import type { DefaultPropRender, PageHeaderRender } from 'components/Layout/typings'
import type { AffixProps, TabBarExtraContent } from 'components/Layout/components/PageContainer/types'
import { useRouteContext } from 'components/Layout/RouteContext'
import { getSlotVNode } from '@/utils/comm'
import { Affix, Spin, PageHeader, Tabs } from 'ant-design-vue';
import './index.less'
export const pageHeaderTabConfig = {
/**
* @name tabs
*/
tabList: {
type: [Object, Function, Array] as PropType<(Omit<TabPaneProps, 'id'> & { key?: string })[]>,
default: () => undefined,
},
/**
* @name tab key
*/
tabActiveKey: String, //PropTypes.string,
/**
* @name tab
*/
tabBarExtraContent: {
type: [Object, Function] as PropType<TabBarExtraContent>,
default: () => undefined,
},
/**
* @name tabs
*/
tabProps: {
type: Object, //as PropType<TabsProps>,
default: () => undefined,
},
/**
* @name PageHeader
*/
fixedHeader: Boolean, //PropTypes.looseBool,
// events
onTabChange: Function, //PropTypes.func,
};
export type PageHeaderTabConfig = Partial<ExtractPropTypes<typeof pageHeaderTabConfig>>;
export const pageContainerProps = {
...pageHeaderTabConfig,
...pageHeaderProps,
prefixCls: {
type: String,
default: 'ant-pro',
}, //PropTypes.string.def('ant-pro'),
title: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
subTitle: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
content: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
extra: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
extraContent: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
header: {
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
default: () => null,
},
pageHeaderRender: {
type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
default: () => undefined,
},
affixProps: {
type: [Object, Function] as PropType<AffixProps>,
},
ghost: {
type: Boolean,
default: () => false,
}, //PropTypes.looseBool,
loading: {
type: Boolean,
default: () => undefined,
}, //PropTypes.looseBool,
childrenFullHeight: {
type: Boolean,
default: () => true,
}
};
export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
const renderFooter = (
props: Omit< PageContainerProps, 'title' >
): VNodeChild | JSX.Element => {
const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps } = props;
if (tabList && tabList.length) {
return (
<Tabs
class={`page-container-tabs`}
activeKey={tabActiveKey}
onChange={(key: string | number) => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
{...tabProps}
>
{tabList.map((item) => (
<Tabs.TabPane {...item} tab={item.tab} key={item.key} />
))}
</Tabs>
);
}
return null;
}
const ProPageHeader: FunctionalComponent<PageContainerProps> = (props) => {
const {
title,
tabList,
tabActiveKey,
content,
pageHeaderRender,
header,
extraContent,
prefixCls,
fixedHeader: _,
...restProps
} = props;
const value = useRouteContext()
if (pageHeaderRender === false) {
return null;
}
if (pageHeaderRender) {
return pageHeaderRender({ ...props });
}
let pageHeaderTitle = title;
if (!title && title !== false) {
pageHeaderTitle = value.title;
}
const unrefBreadcrumb = unref(value.breadcrumb || {});
const breadcrumb = (props as any).breadcrumb || {
...unrefBreadcrumb,
routes: unrefBreadcrumb.routes,
itemRender: unrefBreadcrumb.itemRender,
};
return (
<div class={`page-container-wrap`}>
<PageHeader
{...restProps}
// {...value}
title={pageHeaderTitle}
breadcrumb={breadcrumb}
footer={renderFooter({
...restProps,
tabList,
tabActiveKey
})}
prefixCls={prefixCls}
>
{/*{header || renderPageHeader(content, extraContent)}*/}
{ header }
</PageHeader>
</div>
);
}
const PageContainer = defineComponent({
name: 'PageContainer',
inheritAttrs: false,
props: pageContainerProps,
setup(props, { slots }) {
const { loading, affixProps, ghost, childrenFullHeight } = toRefs(props);
const value = useRouteContext();
const headerDom = computed(() => {
// const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
const headerContent = getSlotVNode<DefaultPropRender>(slots, props, 'content');
const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
const title = getSlotVNode<DefaultPropRender>(slots, props, 'title');
// @ts-ignore
return (
<ProPageHeader
{...props}
prefixCls={undefined}
ghost={ghost.value}
title={title}
subTitle={subTitle}
content={headerContent}
// tags={tags}
extra={extra}
extraContent={extraContent}
/>
);
})
return () => {
const { fixedHeader } = props;
return (
<div class={'page-container'}>
{fixedHeader && headerDom.value ? (
<Affix {...affixProps.value} offsetTop={value.hasHeader && value.fixedHeader ? value.headerHeight : 0}>
{headerDom.value}
</Affix>
) : (
headerDom.value
)}
<div class={'page-container-grid-content'}>
{loading.value ? (
<Spin />
) : slots.default ? (
<div>
<div class={`page-container-children-content ${childrenFullHeight.value ? 'children-full-height' : ''}`}>{slots.default()}</div>
{value.hasFooterToolbar && (
<div
style={{
height: 48,
marginTop: 24,
}}
/>
)}
</div>
) : null}
</div>
</div>
);
};
}
})
export default PageContainer

View File

@ -1,56 +0,0 @@
import type { VNodeChild, CSSProperties, VNode } from 'vue';
export interface Tab {
key: string;
tab: string | VNode | JSX.Element;
}
export type TabBarType = 'line' | 'card' | 'editable-card';
export type TabSize = 'default' | 'large' | 'small';
export type TabPosition = 'left' | 'right';
export type TabBarExtraPosition = TabPosition;
export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
export interface TabsProps {
prefixCls?: string;
class?: string | string[];
style?: CSSProperties;
id?: string;
activeKey?: string;
hideAdd?: boolean;
// Unchangeable
// size?: TabSize;
tabBarStyle?: CSSProperties;
tabPosition?: TabPosition;
type?: TabBarType;
tabBarGutter?: number;
}
export interface AffixProps {
offsetBottom: number;
offsetTop: number;
target?: () => HTMLElement;
onChange?: (affixed: boolean) => void;
}
export interface TabPaneProps {
tab?: string | VNodeChild | JSX.Element;
class?: string | string[];
style?: CSSProperties;
disabled?: boolean;
forceRender?: boolean;
closable?: boolean;
closeIcon?: VNodeChild | JSX.Element;
prefixCls?: string;
tabKey?: string;
id: string;
animated?: boolean;
active?: boolean;
destroyInactiveTabPane?: boolean;
}

View File

@ -1,217 +0,0 @@
import { isVNode, defineComponent, getCurrentInstance, withCtx } from 'vue'
import type { FunctionalComponent, PropType, VNodeChild, ComponentInternalInstance, ConcreteComponent, ExtractPropTypes, VNode } from 'vue'
import type {
MenuDataItem,
WithFalse,
MenuItemRender,
LayoutType,
MenuTheme,
SubMenuItemRender,
MenuMode
} from '../../typings'
import type {
SelectEventHandler,
MenuClickEventHandler,
SelectInfo,
MenuInfo,
} from 'ant-design-vue/es/menu/src/interface';
import type { Key } from 'ant-design-vue/es/_util/type';
import IconFont from '@/components/AIcon'
import { Menu } from 'ant-design-vue';
import { isUrl } from '@/utils/regular'
export const baseMenuProps = {
mode: {
type: String as PropType<MenuMode>,
default: 'inline',
},
menuData: {
type: Array as PropType<MenuDataItem[]>,
default: () => [],
},
layout: {
type: String as PropType<LayoutType>,
default: 'side',
},
theme: {
type: String as PropType<MenuTheme | 'realDark'>,
default: 'dark',
},
collapsed: {
type: Boolean as PropType<boolean | undefined>,
default: () => false,
},
openKeys: {
type: Array as PropType<WithFalse<string[]>>,
default: () => undefined,
},
selectedKeys: {
type: Array as PropType<WithFalse<string[]>>,
default: () => undefined,
},
menuProps: {
type: Object as PropType<Record<string, any>>,
default: () => null,
},
menuItemRender: {
type: [Object, Function, Boolean] as PropType<MenuItemRender>,
default: () => undefined,
},
subMenuItemRender: {
type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
default: () => undefined,
},
onClick: [Function, Object] as PropType<(...args: any) => void>,
}
export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
const LazyIcon: FunctionalComponent<{ icon: VNodeChild | string;}> = (props) => {
const {icon} = props
if (!icon) return null
if (typeof icon === 'string' && icon !== '') {
return <IconFont type={icon} />;
}
if (isVNode(icon)) {
return icon;
}
}
class MenuUtil {
props: BaseMenuProps;
ctx: ComponentInternalInstance | null;
RouterLink: ConcreteComponent;
constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
this.props = props
this.ctx = ctx
this.RouterLink = resolveComponent('router-link') as ConcreteComponent
}
getNavMenuItems = (menusData: MenuDataItem[] = []) => {
return menusData.map((item) => this.getSubMenuOrItem(item)).filter((item) => item);
};
getSubMenuOrItem = (item: MenuDataItem): VNode => {
if (
Array.isArray(item.children) &&
item.children.length > 0 &&
!item?.meta?.hideInMenu &&
!item?.meta?.hideChildrenInMenu
) {
if (this.props.subMenuItemRender) {
const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
return subMenuItemRender({
item,
children: this.getNavMenuItems(item.children),
}) as VNode;
}
const menuTitle = item.meta?.title
const defaultTitle = item.meta?.icon ? (
<span class={`header-menu-item`}>
<span class={`header-menu-item-title`}>{menuTitle}</span>
</span>
) : (
<span class={`header-menu-item`}>{menuTitle}</span>
);
return (
<Menu.SubMenu
title={defaultTitle}
key={item.path}
icon={<LazyIcon icon={item.meta?.icon} />}
>
{this.getNavMenuItems(item.children)}
</Menu.SubMenu>
)
}
const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
const [title, icon] = this.getMenuItem(item);
return (
(menuItemRender && (menuItemRender({ item, title, icon }) as VNode)) || (
<Menu.Item disabled={item.meta?.disabled} danger={item.meta?.danger} key={item.path}>
{title}
</Menu.Item>
)
)
}
getMenuItem = (item: MenuDataItem) => {
const meta = { ...item.meta };
const target = (meta.target || null) as string | null;
const hasUrl = isUrl(item.path);
const CustomTag: any = (target && 'a') || this.RouterLink;
const props = { to: { path: item.path, ...item.meta } };
const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined;
const menuTitle = item.meta?.title;
const defaultTitle = item.meta?.icon ? (
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
{icon}
<span class={`header-menu-item-title`}>{menuTitle}</span>
</CustomTag>
) : (
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
<span>{menuTitle}</span>
</CustomTag>
);
return [defaultTitle, icon];
}
conversionPath = (path: string) => {
if (path && path.indexOf('http') === 0) {
return path;
}
return `/${path || ''}`.replace(/\/+/g, '/');
}
}
export default defineComponent({
name: 'BaseMenu',
props: baseMenuProps,
emits: ['update:openKeys', 'update:selectedKeys', 'click'],
setup(props, { emit }) {
const ctx = getCurrentInstance()
const menuUtil = new MenuUtil(props, ctx);
const handleOpenChange = (openKeys: Key[]): void => {
emit('update:openKeys', openKeys);
};
const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
// ignore https? link handle selectkeys
if (isUrl(args.key as string)) {
return;
}
emit('update:selectedKeys', args.selectedKeys);
};
const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
emit('click', args);
};
return () => (
<Menu
{...props}
key='Menu'
inlineIndent={16}
theme={props.theme as 'dark' | 'light'}
openKeys={props.openKeys === false ? [] : props.openKeys}
selectedKeys={props.selectedKeys || []}
onOpenChange={handleOpenChange}
onSelect={handleSelect}
onClick={handleClick}
>
{menuUtil.getNavMenuItems(props.menuData)}
</Menu>
)
}
})

View File

@ -1,20 +0,0 @@
.pro-layout-sider {
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
overflow: auto;
overflow-x: hidden;
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
.ant-layout-sider-children {
display: flex;
flex-direction: column;
height: 100%;
}
.ant-menu-inline {
background: transparent;
}
}

View File

@ -1,186 +0,0 @@
import { Layout, Menu } from 'ant-design-vue';
import type { CSSProperties, ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
import type {
LogoRender,
MenuHeaderRender,
MenuExtraRender,
MenuContentRender,
CollapsedButtonRender,
WithFalse,
CustomRender
} from '../../typings'
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { baseMenuProps } from 'components/Layout/components/SiderMenu/BaseMenu'
import AIcon from '@/components/AIcon'
import { useRouteContext } from 'components/Layout/RouteContext'
import BaseMenu from './BaseMenu'
import './SiderMenu.less'
import { computed } from 'vue'
import { omit } from 'lodash-es'
const { Sider } = Layout
export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
if (!logo) {
return null;
}
if (typeof logo === 'string') {
return <img src={logo} alt="logo" style={logoStyle} />;
}
if (typeof logo === 'function') {
// @ts-ignore
return logo();
}
return logo;
};
export const siderMenuProps = {
...baseMenuProps,
logo: {
type: [Object, String, Function] as PropType<LogoRender>,
default: () => '',
},
logoStyle: {
type: Object as PropType<CSSProperties>,
default: () => undefined,
},
siderWidth: PropTypes.number.def(208),
headerHeight: PropTypes.number.def(48),
collapsedWidth: PropTypes.number.def(48),
menuHeaderRender: {
type: [Function, Object, Boolean] as PropType<MenuHeaderRender>,
default: () => undefined,
},
menuContentRender: {
type: [Function, Object, Boolean] as PropType<MenuContentRender>,
default: () => undefined,
},
menuExtraRender: {
type: [Function, Object, Boolean] as PropType<MenuExtraRender>,
default: () => undefined,
},
collapsedButtonRender: {
type: [Function, Object, Boolean] as PropType<CollapsedButtonRender>,
default: () => undefined,
},
onMenuHeaderClick: PropTypes.func,
onMenuClick: PropTypes.func,
onCollapse: {
type: Function as PropType<(collapsed: boolean) => void>,
},
onOpenKeys: {
type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
},
onSelect: {
type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>,
},
}
export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>;
export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender =>
collapsed ? <AIcon type={'MenuUnfoldOutlined'} /> : <AIcon type={'MenuFoldOutlined'} />;
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => {
const {
collapsed,
collapsedWidth = 48,
menuContentRender = false,
collapsedButtonRender = defaultRenderCollapsedButton,
} = props;
const context = useRouteContext();
const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
const handleSelect = ($event: string[]) => {
if (props.onSelect) {
props.onSelect([context.selectedKeys[0], ...$event]);
}
}
const defaultMenuDom = (
<BaseMenu
theme={props.theme as 'dark' | 'light'}
mode="inline"
menuData={context.flatMenuData}
collapsed={props.collapsed}
openKeys={context.openKeys}
selectedKeys={context.selectedKeys}
menuItemRender={props.menuItemRender}
subMenuItemRender={props.subMenuItemRender}
onClick={props.onMenuClick}
style={{
width: '100%',
}}
{...{
'onUpdate:openKeys': ($event: string[]) => props.onOpenKeys && props.onOpenKeys($event),
'onUpdate:selectedKeys': handleSelect,
}}
/>
)
const Style = computed(() => {
return {
overflow: 'hidden',
height: '100vh',
zIndex: 18,
paddingTop: `${props.headerHeight}px`,
flex: `0 0 ${sSideWidth.value}px`,
minWidth: `${sSideWidth.value}px`,
maxWidth: `${sSideWidth.value}px`,
width: `${sSideWidth.value}px`,
transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
}
})
return (
<>
<div
style={Style.value}
></div>
<Sider
collapsible
trigger={null}
collapsed={collapsed}
onCollapse={(collapse: boolean) => {
props.onCollapse?.(collapse);
}}
collapsedWidth={collapsedWidth}
style={omit(Style.value, ['transition'])}
width={sSideWidth.value}
theme={props.theme as 'dark' | 'light'}
class={'pro-layout-sider'}
>
<div style="flex: 1; overflow: hidden auto;">
{(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
</div>
<div class={`header-links`}>
{collapsedButtonRender !== false ? (
<Menu
class={`header-link-menu`}
inlineIndent={16}
theme={props.theme as 'light' | 'dark'}
selectedKeys={[]}
openKeys={[]}
mode="inline"
onClick={() => {
if (props.onCollapse) {
props.onCollapse(!props.collapsed);
}
}}
>
<Menu.Item key={'collapsed-button'} class={`header-collapsed-button`} title={false}>
{collapsedButtonRender && typeof collapsedButtonRender === 'function'
? collapsedButtonRender(collapsed)
: collapsedButtonRender}
</Menu.Item>
</Menu>
) : null}
</div>
</Sider>
</>
)
}
export default SiderMenu

View File

@ -1,68 +0,0 @@
import type { PropType } from 'vue'
import config from '../../../config/config'
export interface PureSettings {
title: string
/**
* theme for nav menu
*/
navTheme: 'dark' | 'light' | 'realDark' | undefined;
/**
* nav menu position: `side` or `top`
*/
headerHeight?: number;
/**
* customize header height
*/
layout: 'side' | 'top' | 'mix';
/**
* layout of content: `Fluid` or `Fixed`, only works when layout is top
*/
contentWidth: 'Fluid' | 'Fixed';
menu: { locale?: boolean; defaultOpenAll?: boolean };
splitMenus?: boolean;
}
export const defaultSettings = {
navTheme: 'dark',
layout: 'side',
contentWidth: 'Fluid',
fixedHeader: false,
fixSiderbar: false,
menu: {},
headerHeight: 48,
iconfontUrl: '',
title: config.title
};
export const defaultSettingProps = {
navTheme: {
type: String as PropType<PureSettings['navTheme']>,
default: defaultSettings.navTheme,
},
title: {
type: String as PropType<PureSettings['title']>,
default: () => defaultSettings.title,
},
layout: {
type: String as PropType<PureSettings['layout']>,
default: defaultSettings.layout,
},
contentWidth: {
type: String as PropType<PureSettings['contentWidth']>,
default: defaultSettings.contentWidth,
},
menu: {
type: Object as PropType<PureSettings['menu']>,
default: () => {
return {
locale: true,
};
},
},
headerHeight: {
type: Number as PropType<PureSettings['headerHeight']>,
default: defaultSettings.headerHeight,
},
}

View File

@ -1,10 +0,0 @@
import { InjectionKey } from 'vue'
export type ContextType<T> = any;
export const useContext = <T>(
contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
defaultValue?: ContextType<T>
): T => {
return inject(contextInjectKey, defaultValue || ({} as T));
};

View File

@ -1,4 +1,2 @@
export { default as ProLayout } from './BasicLayout';
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
export { default as PageContainer } from './components/PageContainer'

View File

@ -1,68 +0,0 @@
import type { VNode, Slots } from 'vue';
import { BreadcrumbProps } from 'components/Layout/RouteContext'
import { VueNode } from 'ant-design-vue/es/_util/type'
export interface MetaRecord {
/**
* @name icon
*/
icon?: string | VNode;
/**
* @name key
*/
title?: string;
/**
* @name
*/
hideChildInMenu?: boolean;
/**
* @name
*/
hideInMenu?: boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any;
}
export interface MenuDataItem {
/**
* @name path
*/
path: string;
name?: string | symbol;
meta?: MetaRecord;
/**
* @name
*/
children?: MenuDataItem[];
}
export type Theme = 'dark' | 'light';
export type MenuTheme = Theme;
export type MenuMode = 'horizontal' | 'vertical' | 'inline';
export type LayoutType = 'side' | 'top' | 'mix';
export type ProProps = Record<never, never>;
export type TargetType = '_blank' | '_self' | unknown;
export type BreadcrumbRender = BreadcrumbProps['itemRender'];
export type CustomRender = VueNode;
export type WithFalse<T> = T | false;
export type LogoRender = WithFalse<CustomRender>;
export type DefaultPropRender = WithFalse<CustomRender>;
export type HeaderContentRender = WithFalse<() => CustomRender>;
export type HeaderRender = WithFalse<(props: ProProps) => CustomRender>;
export type FooterRender = WithFalse<(props: ProProps) => CustomRender>;
export type RightContentRender = WithFalse<(props: ProProps) => CustomRender>;
export type MenuItemRender = WithFalse<
(args: { item: MenuDataItem; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
>;
export type SubMenuItemRender = WithFalse<(args: { item: MenuDataItem; children?: CustomRender[] }) => CustomRender>;
export type MenuHeaderRender = WithFalse<(logo: CustomRender, title: CustomRender, props?: ProProps) => CustomRender>;
export type MenuContentRender = WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>;
export type MenuFooterRender = WithFalse<(props?: ProProps) => CustomRender>;
export type MenuExtraRender = WithFalse<(props?: ProProps) => CustomRender>;
export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => CustomRender>;
export type PageHeaderRender = WithFalse<(props?: ProProps) => CustomRender>;

View File

@ -1,48 +0,0 @@
import type { MenuDataItem } from 'components/Layout/typings'
import type { RouteRecord, RouteRecordRaw } from 'vue-router'
export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
return key === undefined ? [] : (menus[menus.findIndex((menu) => menu.path === key)] || {}).children || [];
}
export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
return menusData
.map((item: RouteRecord | RouteRecordRaw) => {
const finalItem = { ...item };
if (finalItem.meta?.hideInMenu) {
return null;
}
if (finalItem && finalItem?.children) {
if (
!finalItem.meta?.hideChildInMenu &&
finalItem.children.some(
(child: RouteRecord | RouteRecordRaw) => child && !child.meta?.hideInMenu
)
) {
return {
...item,
children: clearMenuItem(finalItem.children),
};
}
delete finalItem.children;
}
return finalItem;
})
.filter((item) => item) as RouteRecordRaw[];
}
export function flatMap(menusData: RouteRecord[]): MenuDataItem[] {
return menusData
.map((item) => {
const finalItem = { ...item } as MenuDataItem;
if (!finalItem.name || finalItem.meta?.hideInMenu) {
return null;
}
if (finalItem.children) {
delete finalItem.children;
}
return finalItem;
})
.filter((item) => item) as MenuDataItem[];
}

View File

@ -9,7 +9,8 @@ import Search from './Search'
import NormalUpload from './NormalUpload/index.vue'
import FileFormat from './FileFormat/index.vue'
import JUpload from './JUpload/index.vue'
import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'
import { BasicLayoutPage, BlankLayoutPage } from './Layout'
import { PageContainer } from 'jetlinks-ui-components/es/components'
import Ellipsis from './Ellipsis/index.vue'
import JEmpty from './Empty/index.vue'
import AMapComponent from './AMapComponent/index.vue'

View File

@ -6,7 +6,6 @@ import router from './router'
import './style.less'
import jComponents from 'jetlinks-ui-components'
import 'jetlinks-ui-components/es/style.js'
import 'jetlinks-ui-components/es/style/variable.less'
const app = createApp(App)

View File

@ -23,10 +23,6 @@ export default [
path: '/form',
component: () => import('@/views/demo/Form.vue')
},
{
path: '/search',
component: () => import('@/views/demo/Search.vue')
},
{
path: '/system/Api',
component: () => import('@/views/system/Platforms/index.vue')

View File

@ -1,120 +0,0 @@
<template>
<BasicLayoutPage
>
<div class='search'>
<Search
:columns='columns'
target='device-instance-search'
@search='search'
/>
<Search
type='simple'
:columns='columns'
target='product'
@search='search'
/>
</div>
</BasicLayoutPage>
</template>
<script setup name='demoSearch'>
import { category } from '../../api/device/product'
import BasicLayoutPage from '@/components/Layout/BasicLayoutPage.vue'
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
search: {
rename: 'deviceId',
type: 'select',
options: [
{
label: '测试1',
value: 'test1'
},
{
label: '测试2',
value: 'test2'
},
{
label: '测试3',
value: 'test3'
},
],
handleValue: (v) => {
return '123'
}
}
},
{
title: '序号',
dataIndex: 'sortIndex',
key: 'sortIndex',
scopedSlots: true,
search: {
type: 'number',
}
},
{
title: 'ID',
dataIndex: 'id',
key: 'id',
search: {
type: 'string',
}
},
{
title: '时间',
dataIndex: 'date',
key: 'date',
search: {
type: 'date',
}
},
{
title: '时间2',
dataIndex: 'date2',
key: 'date2',
search: {
type: 'time',
defaultTermType: 'lt'
}
},
{
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
search: {
first: true,
type: 'treeSelect',
options: async () => {
return new Promise((res) => {
category().then(resp => {
res(resp.result)
})
})
}
}
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true,
}
]
const search = (params) => {
console.log(params)
}
</script>
<style scoped>
.search {
width: calc(100% - 330px);
}
</style>

View File

@ -291,7 +291,6 @@ import { LocalStore } from '@/utils/comm';
import { save_api, getDetails_api } from '@/api/system/basis';
import { usePermissionStore } from '@/store/permission';
import PageContainer from 'components/Layout/components/PageContainer'
const action = ref<string>(`${BASE_API_PATH}/file/static`);
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });

View File

@ -3898,8 +3898,8 @@ jetlinks-store@^0.0.3:
jetlinks-ui-components@^1.0.0:
version "1.0.0"
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.0.tgz#d12144cd57e9547a9fdec1b28fe4c4135fba50ce"
integrity sha512-oqeQpQqidJJMdPa/DzU4V++93r9i9IdHEvqNqDg/+zzw+AhbehtcaRKUVb2bQcMWWCnJWCdv0Md8K5NIdIaoDw==
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.0.tgz#dca7bb82e53f464990b0851635e8f82be6c69db6"
integrity sha512-pgJ0Uiw4Dxc0AU2GqaOaVhNYun1VEmv78OtJcir2sq9rVSIuXCtTl1eHYMPiiPb6z1fG677KKs1gqvrpUwhguQ==
dependencies:
"@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15"