@jetlinks-web/components 1.0.5 → 2.0.0

package/src/ProLayout/Basic/BasicLayout.tsx

@@ -0,0 +1,392 @@
+import type {
+    BreadcrumbRender,
+    FormatMessage,
+    HeaderContentRender,
+    WithFalse,
+    HeaderRender,
+    RightContentRender,
+    CollapsedButtonRender,
+    MenuExtraRender,
+    SubMenuItemRender,
+    MenuContentRender,
+    MenuItemRender,
+    MenuHeaderRender,
+} from '../typings';
+import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import {
+    computed,
+    defineComponent,
+    provide,
+    reactive,
+    watchEffect,
+    toRefs,
+} from 'vue';
+import { defaultSettingProps } from '../defaultSettings';
+import { baseHeaderProps } from '../TopHeader';
+import Header, { headerViewProps } from './Header';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+import useConfigInject from 'ant-design-vue/lib/_util/hooks/useConfigInject';
+import type { BreadcrumbProps, RouteContextProps } from '../RouteContext';
+import { pick } from 'lodash-es';
+import { defaultRouteContext, routeContextInjectKey } from '../RouteContext';
+import { getMenuFirstChildren, getSlot } from '../util';
+import { Layout, LayoutContent } from 'ant-design-vue';
+
+export const basicLayoutProps = {
+    ...defaultSettingProps,
+    ...siderMenuProps,
+    ...baseHeaderProps,
+    ...headerViewProps,
+
+    pure: Boolean,
+    loading: Boolean,
+    locale: {
+        type: [Function, Boolean] as PropType<WithFalse<FormatMessage>>,
+        default() {
+            return (s: string) => s;
+        },
+    },
+    /**
+     * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+     */
+    disableMobile: {
+        type: Boolean,
+        required: false,
+    },
+    isChildrenLayout: {
+        type: Boolean,
+        required: false,
+    },
+    /**
+     * 兼用 content 的 margin
+     */
+    disableContentMargin: {
+        type: Boolean,
+        required: false,
+    },
+    colSize: {
+        type: Number,
+        required: false,
+    },
+    contentStyle: {
+        type: [String, Object] as PropType<CSSProperties>,
+        default: () => {
+            return null;
+        },
+    },
+    breadcrumb: {
+        type: [Object, Function] as PropType<BreadcrumbProps>,
+        default: () => null,
+    },
+    collapsedButtonRender: {
+        type: [Function, Object, Boolean] as PropType<
+            WithFalse<(collapsed?: boolean) => VueNode>
+        >,
+        default: () => undefined,
+    },
+    breadcrumbRender: {
+        type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
+        default() {
+            return null;
+        },
+    },
+    headerContentRender: {
+        type: [Function, Object, Boolean] as PropType<HeaderContentRender>,
+        default: () => undefined,
+    },
+    headerRender: {
+        type: [Object, Function, Boolean] as PropType<HeaderRender>,
+        default: () => undefined,
+    },
+};
+
+export type BasicLayoutProps = Partial<
+    ExtractPropTypes<typeof basicLayoutProps>
+>;
+
+export default defineComponent({
+    name: 'JProLayout',
+    inheritAttrs: false,
+    props: basicLayoutProps,
+    emits: [
+        'update:collapsed',
+        'update:open-keys',
+        'update:selected-keys',
+        'collapse',
+        'openKeys',
+        'select',
+        'menuHeaderClick',
+        'menuClick',
+        'backClick',
+    ],
+    setup(props, { emit, attrs, slots }) {
+        const { prefixCls } = useConfigInject('layout', {});
+        const isTop = computed(() => props.layout === 'top');
+        const hasSide = computed(
+            () => props.layout === 'mix' || props.layout === 'side' || false,
+        );
+        const hasSplitMenu = computed(
+            () => props.layout === 'mix' && props.splitMenus,
+        );
+        const hasFlatMenu = computed(() => {
+            return hasSide.value && hasSplitMenu.value;
+        });
+        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 onBack = (args: any) => {
+            emit('backClick', args);
+        };
+
+        const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
+
+        const className = computed(() => {
+            return {
+                [baseClassName.value]: true,
+                [`${baseClassName.value}-top-menu`]: isTop.value,
+                [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
+                [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
+                [`${baseClassName.value}-${props.layout}`]: props.layout,
+            };
+        });
+
+        const genLayoutStyle = reactive<CSSProperties>({
+            position: 'relative',
+        });
+
+        watchEffect(() => {
+            if (
+                props.isChildrenLayout ||
+                (props.contentStyle && props.contentStyle.minHeight)
+            ) {
+                genLayoutStyle.minHeight = 0;
+            }
+        });
+
+        const headerRender = (
+            p: BasicLayoutProps & {
+                hasSiderMenu: boolean;
+                headerRender: HeaderRender;
+                rightContentRender: RightContentRender;
+            },
+            matchMenuKeys?: string[],
+        ): VueNode | null => {
+            if (p.headerRender === false || p.pure) {
+                return null;
+            }
+            return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
+        };
+
+        const breadcrumb = computed<BreadcrumbProps>(() => ({
+            ...props.breadcrumb,
+            itemRender: getSlot<BreadcrumbRender>(
+                slots,
+                props,
+                'breadcrumbRender',
+            ) as BreadcrumbRender,
+        }));
+
+        const flatMenuData = computed(
+            () =>
+                (hasFlatMenu.value &&
+                    props.selectedKeys &&
+                    getMenuFirstChildren(
+                        props.menuData,
+                        props.selectedKeys[0],
+                    )) ||
+                [],
+        );
+
+        const routeContext = reactive<RouteContextProps>({
+            ...defaultRouteContext,
+            ...(pick(toRefs(props), [
+                'pure',
+                'locale',
+                'menuData',
+                'openKeys',
+                'selectedKeys',
+                'contentWidth',
+                'disableMobile',
+                'fixSiderbar',
+                'fixedHeader',
+                'headerHeight',
+            ]) as any),
+            siderWidth,
+            breadcrumb,
+            flatMenuData,
+            hasSide,
+            back: onBack,
+            hasHeader: true,
+            flatMenu: hasFlatMenu,
+        });
+        provide(routeContextInjectKey, routeContext);
+
+        return () => {
+            const {
+                pure,
+                onCollapse: propsOnCollapse,
+                onOpenKeys: propsOnOpenKeys,
+                onSelect: propsOnSelect,
+                onMenuClick: propsOnMenuClick,
+                ...restProps
+            } = props;
+
+            const collapsedButtonRender = getSlot<CollapsedButtonRender>(
+                slots,
+                props,
+                'collapsedButtonRender',
+            );
+            const headerContentRender = getSlot<HeaderContentRender>(
+                slots,
+                props,
+                'headerContentRender',
+            );
+            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,
+                        menuItemRender,
+                        subMenuItemRender,
+                        hasSiderMenu: !isTop.value,
+                        menuData: props.menuData,
+                        onCollapse,
+                        onOpenKeys,
+                        onSelect,
+                        onMenuHeaderClick,
+                        rightContentRender,
+                        collapsedButtonRender,
+                        headerTitleRender: menuHeaderRender,
+                        menuExtraRender,
+                        menuContentRender,
+                        headerContentRender,
+                        headerRender: customHeaderRender,
+                        theme: (props.theme || 'dark')
+                            .toLocaleLowerCase()
+                            .includes('dark')
+                            ? 'dark'
+                            : 'light',
+                    },
+                    props.matchMenuKeys,
+                ),
+            );
+            routeContext.hasHeader = !!headerDom.value;
+
+            const contentClassName = computed(() => {
+                return {
+                    [`${baseClassName.value}-content`]: true,
+                    [`${baseClassName.value}-has-header`]: headerDom,
+                    [`${baseClassName.value}-content-disable-margin`]:
+                        props.disableContentMargin,
+                };
+            });
+
+            return (
+                <>
+                    {pure ? (
+                        slots.default?.()
+                    ) : (
+                        <div class={className.value}>
+                            <Layout
+                                style={{
+                                    minHeight: '100vh',
+                                    ...((attrs.style as CSSProperties) || {}),
+                                }}
+                            >
+                                {headerDom.value}
+                                <Layout
+                                    style={genLayoutStyle}
+                                    class={prefixCls.value}
+                                >
+                                    {!isTop.value && (
+                                        <SiderMenu
+                                            {...restProps}
+                                            menuHeaderRender={menuHeaderRender}
+                                            menuExtraRender={menuExtraRender}
+                                            menuContentRender={
+                                                menuContentRender
+                                            }
+                                            menuItemRender={menuItemRender}
+                                            subMenuItemRender={
+                                                subMenuItemRender
+                                            }
+                                            collapsedButtonRender={
+                                                collapsedButtonRender
+                                            }
+                                            onCollapse={onCollapse}
+                                            onSelect={onSelect}
+                                            onOpenKeys={onOpenKeys}
+                                            onMenuClick={onMenuClick}
+                                        />
+                                    )}
+                                    <Layout>
+                                        <LayoutContent>
+                                            {slots.default?.()}
+                                        </LayoutContent>
+                                    </Layout>
+                                </Layout>
+                            </Layout>
+                        </div>
+                    )}
+                </>
+            );
+        };
+    },
+});

package/src/ProLayout/Basic/Header.less

@@ -0,0 +1,8 @@
+@import '../style/default.less';
+
+@pro-layout-fixed-header-prefix-cls: ~'@{ant-prefix}-pro-fixed-header';
+
+.@{pro-layout-fixed-header-prefix-cls} {
+    z-index: 9;
+    width: 100%;
+}

package/src/ProLayout/Basic/Header.tsx

@@ -0,0 +1,115 @@
+import { baseHeaderProps, TopNavHeader } from '../TopHeader';
+import type { BaseHeaderPropsType } from '../TopHeader';
+import PropTypes from 'ant-design-vue/lib/_util/vue-types';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+import type { ExtractPropTypes, PropType } from 'vue';
+import { defineComponent, computed, toRefs } from 'vue';
+import type { WithFalse } from '../typings';
+import { useRouteContext } from '../RouteContext';
+import { Layout } from 'ant-design-vue';
+
+export const headerViewProps = {
+    ...baseHeaderProps,
+    headerRender: {
+        type: [Object, Function, Boolean] as PropType<
+            WithFalse<(props: any, defaultDom: VueNode) => VueNode>
+        >,
+        default: () => undefined,
+    },
+    headerTitleRender: {
+        type: [Object, Function, Boolean] as PropType<
+            WithFalse<(props: any, defaultDom: VueNode) => VueNode>
+        >,
+        default: () => undefined,
+    },
+    headerContentRender: {
+        type: [Object, Function, Boolean] as PropType<
+            WithFalse<(props: any) => VueNode>
+        >,
+        default: () => undefined,
+    },
+    hasSiderMenu: PropTypes.looseBool,
+    siderWidth: PropTypes.number.def(208),
+};
+
+export type HeaderViewProps = Partial<
+    ExtractPropTypes<typeof headerViewProps> & BaseHeaderPropsType
+>;
+
+export default defineComponent({
+    name: 'HeaderView',
+    inheritAttrs: false,
+    props: headerViewProps,
+    setup(props) {
+        const {
+            prefixCls,
+            fixedHeader,
+            hasSiderMenu,
+            headerHeight,
+            layout,
+            theme,
+            onCollapse,
+        } = toRefs(props);
+        const context = useRouteContext();
+        const needFixedHeader = computed(
+            () => fixedHeader.value || context.fixedHeader,
+        );
+        const isMix = computed(() => layout.value === 'mix');
+        const isTop = computed(() => layout.value === 'top');
+        const needSettingWidth = computed(
+            () => needFixedHeader.value && hasSiderMenu.value && !isTop.value,
+        );
+
+        const className = computed(() => {
+            return {
+                [`${prefixCls.value}-fixed-header`]: needFixedHeader.value,
+                [`${prefixCls.value}-top-menu`]: isTop.value,
+            };
+        });
+
+        const renderContent = () => {
+            const defaultDom = (
+                <TopNavHeader
+                    theme={theme.value}
+                    mode="horizontal"
+                    {...props}
+                    onCollapse={onCollapse.value}
+                    menuData={context.menuData}
+                />
+            );
+            if (props.headerRender) {
+                return props.headerRender(props, defaultDom);
+            }
+            return defaultDom;
+        };
+
+        const right = computed(() => (needFixedHeader.value ? 0 : undefined));
+
+        return () => (
+            <>
+                {needFixedHeader.value && (
+                    <Layout.Header
+                        style={{
+                            height: `${headerHeight.value}px`,
+                            lineHeight: `${headerHeight.value}px`,
+                            background: 'transparent',
+                        }}
+                    />
+                )}
+                <Layout.Header
+                    style={{
+                        padding: 0,
+                        height: `${headerHeight.value}px`,
+                        lineHeight: `${headerHeight.value}px`,
+                        width: '100%',
+                        zIndex: 100,
+                        right: right.value,
+                    }}
+                    class={className.value}
+                >
+                    {renderContent()}
+                </Layout.Header>
+            </>
+        );
+    },
+});

package/src/ProLayout/PageContainer/index.less

@@ -0,0 +1,103 @@
+@import '../style/default.less';
+
+@pro-layout-page-container: ~'@{ant-prefix}-pro-page-container';
+
+.@{pro-layout-page-container}-children-content {
+    margin: 24px 24px 0;
+}
+
+.@{pro-layout-page-container} {
+    &-warp {
+        background-color: @component-background;
+        .@{ant-prefix}-tabs-bar {
+            margin: 0;
+        }
+    }
+    &-ghost {
+        .@{pro-layout-page-container}-warp {
+            background-color: @component-background;
+        }
+    }
+}
+
+.@{pro-layout-page-container}-main {
+    .@{pro-layout-page-container}-detail {
+        display: flex;
+    }
+
+    .@{pro-layout-page-container}-row {
+        display: flex;
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title-content {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-title,
+    .@{pro-layout-page-container}-content {
+        flex: auto;
+    }
+
+    .@{pro-layout-page-container}-extraContent,
+    .@{pro-layout-page-container}-main {
+        flex: 0 1 auto;
+    }
+
+    .@{pro-layout-page-container}-main {
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-logo {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-extraContent {
+        min-width: 242px;
+        margin-left: 88px;
+        text-align: right;
+    }
+}
+
+@media screen and (max-width: @screen-xl) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 44px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-lg) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 20px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-md) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-row {
+            display: block;
+        }
+
+        .@{pro-layout-page-container}-action,
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 0;
+            text-align: left;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm) {
+    .@{pro-layout-page-container}-detail {
+        display: block;
+    }
+    .@{pro-layout-page-container}-extraContent {
+        margin-left: 0;
+    }
+}