@dt-frames/ui 1.0.0 → 1.0.1

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

@@ -1,122 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,132 +0,0 @@
-
-
-<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

@@ -1,97 +0,0 @@
-
-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

@@ -1,24 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-/**
- * 这是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

@@ -1,147 +0,0 @@
-/** ======================================================
- *  菜单分割管理
- *  ======================================================*/
-
-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;
-}