@dt-frames/ui 1.0.0

package/src/theme/sider/components/basic-menu/basic-menu.vue

@@ -0,0 +1,122 @@
+<template>
+    <Menu
+        :theme="theme"
+        :selectedKeys="menuState.selectedKeys"
+        :defaultSelectedKeys="menuState.defaultSelectedKeys"
+        :openKeys="menuState.openKeys"
+        :inlineIndent="inlineIndent"
+        :subMenuOpenDelay="0.2"
+        :mode="mode"
+        collapsible
+        @click="handleMenuClick"
+        @open-change="handleOpenChange"
+        :collapsed="getInlineCollapsed"
+    >
+        <template v-for="item in items" :key="item.id">
+            <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
+        </template>
+    </Menu>
+</template>
+
+<script setup lang="ts">
+    import { isFunction, MenuMode, useMenu } from '@dt-frames/core';
+    import { Menu } from 'ant-design-vue';
+    import { computed, ref, unref, VNodeChild, watch, reactive, toRefs } from 'vue';
+    import { useRouter } from 'vue-router';
+    import { getBreadCrumb } from '../../../header/helper/menu-tree';
+    import { BasicMenu } from '../props';
+    import BasicSubMenuItem from './basic-sub-menu-item.vue'
+    import { MenuState, useOpenKeys } from '../../hooks/useOpenKeys'
+
+    type MenuInfo = {
+        key: string;
+        keyPath: string[]
+        item: VNodeChild
+    }
+
+    const {
+        theme,
+        items, 
+        mode,
+        type,
+        isHorizontal,
+        inlineIndent,
+        mixSider,
+        beforeClickFn
+    } = defineProps( BasicMenu );
+
+    const { getSplit } = useMenu()
+
+    const { currentRoute } = useRouter();
+
+    const menuState = reactive<MenuState>({
+        defaultSelectedKeys: [],
+        openKeys: [],
+        selectedKeys: [],
+        collapsedOpenKeys: []
+    })
+    
+    const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(
+        menuState,
+        items,
+        type
+    )
+
+    watch( 
+        () => currentRoute.value.path, 
+        (val) => {
+            if( val === '/' ) return;
+            handleMenuChange(val)
+        },
+        {
+            immediate: true
+        }
+    )
+
+    async function handleMenuChange(path) {
+        // 设置展开的节点
+        setOpenKeys(path)
+
+        // 定义选中的节点
+        if (isHorizontal && unref(getSplit)) {
+            console.log(items, path)
+            const parentPath = await getBreadCrumb(path, items);
+            // console.log(parentPath, '-------------', route)
+            // menuState.selectedKeys = [parentPath];
+        } else {
+            const parentPaths = await getBreadCrumb(path);
+
+            menuState.selectedKeys = parentPaths.reduce( (keys, it) => {
+                it.url && keys.push( it.url )
+                return keys
+            }, [] )
+        }
+
+    }
+    
+    
+    const emits = defineEmits(['menuClick'])
+
+    const { getCollapsed } = useMenu();
+    const getInlineCollapsed = computed( () => {
+        const isInline = unref(mode) === MenuMode.INLINE;
+
+        if (isInline) {
+            return mixSider ? false : unref(getCollapsed);
+        }
+
+        return false;
+
+    } )
+
+    async function handleMenuClick(item: MenuInfo) {
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+            const flag = await beforeClickFn(item.key);
+            if (!flag) return;
+        }
+
+        emits('menuClick', item.key);
+
+        menuState.selectedKeys = [item.key];
+    }
+</script>

package/src/theme/sider/components/basic-menu/basic-sub-menu-item.vue

@@ -0,0 +1,46 @@
+<template>
+    <!-- 没有子节点 -->
+    <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="props"/>
+
+    <!-- 有子节点 -->
+    <SubMenu
+        v-if="menuHasChildren(item) && getShowMenu"
+        :class="[ theme ]"
+        :key="item.id"
+        popupClassName="app-top-menu-popup"
+    >
+        <template #title>
+            <MenuItemContent 
+                v-bind="props"
+                :item="item" />
+        </template>
+
+        <template v-for="childrenItem in item.children" :key="childrenItem.id">
+            <BasicSubMenuItem v-bind="props"  :item="childrenItem" />
+        </template>
+    </SubMenu>
+</template>
+
+<script setup lang="ts">
+    import { SubMenu } from 'ant-design-vue';
+    import { useMenu } from '@dt-frames/core';
+    import BasicMenuItem from './basic-menu-item.vue';
+    import MenuItemContent from './menu-item-content.vue';
+    import { ItemProp } from '../props';
+    
+
+    const { getShowMenu } = useMenu();
+
+    const props = defineProps(ItemProp);
+    const {
+        theme,
+        item,
+        showTitle,
+        isHorizontal
+    } = props;
+
+
+    const menuHasChildren = ( menu: any ) => {
+        return !!menu.children && menu.children.length > 0;
+    }
+</script>

package/src/theme/sider/components/basic-menu/menu-item-content.vue

@@ -0,0 +1,13 @@
+<template>
+    <span class="dt-basic-menu-item-content-flex items-center dt-menu-item">
+        <span class="menu-icon" v-icon="item.icon" :fontSize="16"></span>
+        {{ item.label }}
+    </span>
+</template>
+
+<script setup lang="ts">
+    import { contentProps } from "../props";
+
+    const props = defineProps( contentProps );
+
+</script>

package/src/theme/sider/components/drag-bar.vue

@@ -0,0 +1,26 @@
+<template>
+    <div :class="getClass" :style="getDragBarStyle"></div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, unref } from 'vue'
+    import { useMenu } from '@dt-frames/core';
+
+    const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenu()
+
+    const getDragBarStyle = computed(() => {
+        if( unref(getCollapsed) ) {
+            return { left: `${unref(getMiniWidthNumber)}px` }
+        }
+        return {}
+    })
+
+    const getClass = computed(() => {
+        return [
+            'dt-darg-bar',
+            {
+                'dt-darg-bar--hide': !unref(getCanDrag)
+            }
+        ]
+    })
+</script>

package/src/theme/sider/components/layout-menu.vue

@@ -0,0 +1,132 @@
+
+
+<script lang="tsx">
+    import { computed, defineComponent, toRef, unref } from "vue"
+    import { isUrl, MenuSplitTye, useMenu, useTheme, openWindow, useGo } from "@dt-frames/core"
+    import { useSplitMenu } from "../helper/split-menu"
+    import { DtLogo } from "../../header/components";
+    import BasicMenu from './basic-menu/basic-menu.vue'
+    import { ScrollContainer } from "../../../components/container";
+
+
+    export default defineComponent({
+        name: 'LayoutMenu',
+
+        props: {
+            theme: String,
+            splitType: {
+                type: Number,
+                default: MenuSplitTye.NONE,
+            },
+            isHorizontal: Boolean,
+            menuMode: String
+        },
+
+        setup(props) {
+            const {
+                getMenuType,
+                getMenuMode,
+                getMenuTheme,
+                getCollapsed,
+                getCollapsedShowTitle,
+                getIsHorizontal,
+                getIsSidebarType,
+                getSplit
+            } = useMenu();
+
+            const { getShowLogo } = useTheme();
+
+            const { menusRef } = useSplitMenu( toRef(props, 'splitType') );
+
+            // 菜单的相关属性
+            const getComputedTheme = computed( () => props.theme || unref( getMenuTheme ) );
+            const getComputedMenuMode = computed(() => props.menuMode || unref(getMenuMode) );
+            const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
+
+            const getUseScroll = computed(() => {
+                return (
+                    !unref(getIsHorizontal) &&
+                    (unref(getIsSidebarType) ||
+                        props.splitType === MenuSplitTye.LEFT ||
+                        props.splitType === MenuSplitTye.NONE)
+                );
+            });
+
+            const getLogoClass = computed(() => [ `dt-menu-logo`, unref(getComputedTheme) ]);
+
+            const getMenuProps = computed( () => {
+                const menus = unref( menusRef );
+
+                return {
+                    menus,
+                    beforeClickFn: beforeMenuClickFn,
+                    items: menus,
+                    theme: unref( getComputedTheme ),
+                    collapse: unref( getCollapsed ),
+                    collapsedShowTitle: unref( getCollapsedShowTitle ),
+                    onMenuClick: handleMenuClick,
+                }
+            } );
+
+            // 跳转到指定页面
+            const go = useGo();
+
+            // 跳转之前需要做检测，部分系统需要跳转到第三方系统
+            function beforeMenuClickFn( path: string ) {
+                if (!isUrl(path)) {
+                    return true;
+                }
+
+                openWindow(path);
+                return false;
+            }
+
+            // 按钮点击事件
+            function handleMenuClick( path: string ) {
+                go(path);
+            }
+
+
+            function renderHeader() {
+                if( !unref(getIsShowLogo) ) return null;
+
+                return (
+                    <DtLogo
+                        showTitle={!unref(getCollapsed)}
+                        class={unref(getLogoClass)}
+                        theme={unref(getComputedTheme) as string}
+                    />
+                )
+            }
+
+            function renderMenu( ) {
+                const { menus, ...menuProps } = unref( getMenuProps );
+
+                if (!menus || !menus.length) return null;
+
+                return <BasicMenu
+                    {...(menuProps as any)}
+                    isHorizontal={props.isHorizontal}
+                    type={unref(getMenuType)}
+                    showLogo={unref(getIsShowLogo)}
+                    mode={unref(getComputedMenuMode as any)}
+                    items={menus}
+                ></BasicMenu>
+            }
+
+            return () => {
+                return (
+                    <>
+                    { (renderHeader()) }
+                    {unref(getUseScroll) ? (
+                        <ScrollContainer>{() => renderMenu()}</ScrollContainer>
+                    ) : (
+                        renderMenu()
+                    )}
+                    </>
+                )
+            }
+
+        }
+    })
+</script>

package/src/theme/sider/components/props.ts

@@ -0,0 +1,97 @@
+
+import { MenuTheme } from "ant-design-vue";
+import { PropType } from "vue";
+import { MenuMode, Menus, MenuType, Theme } from "@dt-frames/core";
+
+export const BasicMenu = {
+    // 菜单
+    items: {
+        type: Array as PropType<Menus[]>
+    },
+
+    // 折叠是否显示标题
+    collapsedShowTitle: Boolean,
+
+    inlineIndent: {
+        default: 20
+    },
+
+    // 菜单组件的mode属性
+    mode: {
+        type: String as PropType<MenuMode>,
+        default: MenuMode.INLINE
+    },
+
+    // 菜单类型
+    type: {
+        type: String,
+        default: MenuType.SIDE
+    },
+
+    // 主题
+    theme: {
+        default: Theme.DARK,
+    },
+
+    inlineCollapsed: Boolean,
+
+    isHorizontal: Boolean,
+
+    beforeClickFn: {
+        type: Function
+    },
+
+    mixSider: Boolean
+}
+
+export const ItemProp = {
+    item: {
+        type: Object,
+        default: {}
+    },
+
+    theme: {
+        type: String as PropType<MenuTheme>,
+        default: Theme.DARK
+    },
+
+    isHorizontal: Boolean,
+
+    showTitle: Boolean,
+
+    beforeClickFn: {
+        type: Function
+    }
+}
+
+export const contentProps = {
+    item: {
+        type: Object,
+        default: {},
+    },
+
+    showTitle: Boolean,
+
+    level: Number,
+
+    isHorizontal: Boolean
+};
+
+export const SimpleMenu = {
+    // 菜单
+    items: {
+        type: Array as PropType<MenuType[]>,
+        default: (): any[] => []
+    },
+
+    collapse: Boolean,
+    mixSider: Boolean,
+    theme: {
+        default: Theme.DARK
+    },
+    collapsedShowTitle: Boolean,
+    beforeClickFn: {
+        type: Function
+    },
+    isSplitMenu: Boolean
+}

package/src/theme/sider/components/sider-trigger.vue

@@ -0,0 +1,24 @@
+<template>
+    <div @click.stop="toggleCollapsed">
+        <DtIcon icon-class="ant-design:double-right-outlined" v-if="getCollapsed" />
+        <DtIcon icon-class="ant-design:double-left-outlined" v-else />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { useMenu } from '@dt-frames/core';
+    import { DtIcon } from '../../../components';
+
+
+    const { getCollapsed, toggleCollapsed } = useMenu();
+
+    const props = defineProps({
+        type: {
+            type: String,
+            default: null
+        }
+    })
+
+
+
+</script>

package/src/theme/sider/helper/sider.ts

@@ -0,0 +1,52 @@
+/**
+ * 这是layout-sider相关的业务处理
+ * 函数命名已use开头
+ */
+
+import { MenuTriggerPos, useMenu } from "@dt-frames/core";
+import { computed, h, ref, unref } from "vue";
+import Trigger from '../components/sider-trigger.vue' 
+
+ 
+// 菜单展开折叠切换
+export function useMenuSwitch() {
+    const brokenRef = ref( false );
+
+    const { getMiniWidthNumber } = useMenu();
+    
+    const getCollapsedWidth = computed( () => {
+        return unref( brokenRef ) ? 0 : unref( getMiniWidthNumber );
+    } );
+
+    function onBreakPointChange( broken: boolean ) {
+        brokenRef.value = broken;
+    }
+
+    return { getCollapsedWidth, onBreakPointChange };
+}
+ 
+ 
+// 处理菜单展开折叠按钮
+export function useTrigger() {
+    const { getTrigger, getSplit } = useMenu();
+
+    const getShowTrigger = computed(() => {
+        const trigger = unref(getTrigger) as unknown as String;
+    
+        return trigger && unref( getSplit )
+    });
+    
+    const getTriggerAttr = computed(() => {
+        if( unref(getShowTrigger) ) {
+            return { }
+        }
+
+        return {
+            trigger: null
+        }
+    });
+    
+    return { getTriggerAttr, getShowTrigger };
+}
+ 
+ 

package/src/theme/sider/helper/split-menu.ts

@@ -0,0 +1,147 @@
+/** ======================================================
+ *  菜单分割管理
+ *  ======================================================*/
+
+import { ref, computed, unref, watch, Ref } from "vue";
+import { useRouter } from "vue-router";
+import { useThrottleFn } from '@vueuse/core';
+import { CacheKey, DtCache, Menus, MenuSplitTye, useAuthStore, useMenu } from "@dt-frames/core";
+
+type MenusMap = {
+    parentPath?: string,
+    children?: MenusMap[] | undefined,
+    includesPath?: string[]
+}
+
+export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
+    const menusRef = ref<MenusMap[]>([]);
+    const { currentRoute } = useRouter();
+    
+
+    const { getIsHorizontal, getSplit } = useMenu();
+
+    const throttleHandleSplitLeftMenu = useThrottleFn(handleSplitLeftMenu, 50);
+
+    const splitNotLeft = computed(
+        () => unref(splitType) !== MenuSplitTye.LEFT && !unref(getIsHorizontal),
+    );
+
+    const getSplitLeft = computed( 
+        () => !unref( getSplit ) || unref(splitType) !== MenuSplitTye.LEFT
+    );
+
+    const getSplitTop = computed(
+        () => unref( splitType ) === MenuSplitTye.TOP
+    );
+
+    const normalType = computed(
+        () => !unref( getSplit ) || unref(splitType) === MenuSplitTye.NONE
+    );
+
+    watch(
+        [() => (unref(currentRoute) as any).path, () => unref(splitType)],
+        async ([path]) => {
+            if (unref(splitNotLeft)) return;
+
+            throttleHandleSplitLeftMenu(path);
+        },
+        {
+            immediate: true,
+        },
+    )
+
+    watch(
+        () => getSplit.value,
+        () => {
+            if (unref(splitNotLeft)) return;
+            getMenus();
+        },
+    );
+
+    async function handleSplitLeftMenu(path: string) {
+        if (unref(getSplitLeft)) return;
+        const { menusMap } = await getMenusMap();
+
+        menusRef.value = menusMap.filter( it => it.includesPath.includes(path) )[0]?.children
+    }
+
+    async function getMenus() {
+        if (unref(normalType)) {
+            const { getMenus } = useAuthStore()
+            menusRef.value = getMenus
+            return;
+        }
+
+        if (unref(getSplitTop)) {
+            const shallowMenus = await getShallowMenus();
+      
+            menusRef.value = shallowMenus;
+            return;
+        }
+    }
+
+    getMenus();
+
+    return { menusRef };
+}
+
+
+async function getMenus() { return DtCache.getLocal(CacheKey.MENUS) }
+
+function getFirstMenuPath(item: Menus) {
+    let isFind = false, path = ''
+
+    const getPath = (menu: Menus) => {
+        if( isFind ) return
+
+        if( menu.children && menu.children.length ) {
+            menu.children.forEach( node => getPath( node ) )
+        } else {
+            path = menu.url
+            isFind = true
+        }
+    }
+
+    getPath(item)
+
+    return path
+}
+
+// 获取菜单地图
+async function getMenusMap() {
+    const menus = await getMenus();
+    const menusMap: MenusMap[] = [];
+
+    const getPaths = ( menu: Menus, path: string[] ) => {
+        if( menu.children && menu.children.length ) {
+            menu.children.forEach( node => getPaths( node, path ) )
+        } else {
+            path.push( menu.url )
+        }
+
+        return path;
+    }
+
+    menus.map((item: Menus) => {
+        item.url =  getFirstMenuPath(item);
+
+        menusMap.push({
+            parentPath: item.url,
+            children: item.children || [],
+            includesPath: getPaths( item, [] )
+        })
+    });
+
+    return { menusMap };
+}
+
+
+export async function getShallowMenus() {
+    const menus = await getMenus();
+
+    const shallowMenuList = menus.map((item: Menus) => {
+        item.url =  getFirstMenuPath(item);
+        return { ...item, children: undefined } as any
+    });
+    return shallowMenuList;
+}