@dt-frames/ui 1.0.1 → 1.0.4

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

@@ -0,0 +1,146 @@
+/** ======================================================
+ *  菜单分割管理
+ *  ======================================================*/
+
+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)) {
+            menusRef.value = DtCache.getLocal(CacheKey.MENUS)
+            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;
+}

package/src/theme/sider/hooks/useDragLine.ts

@@ -0,0 +1,86 @@
+import { Ref, onMounted, nextTick, unref } from "vue"
+import { useMenu } from '@dt-frames/core'
+import { useDebounceFn } from '@vueuse/core'
+
+// 菜单宽度拖拽
+export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
+    const { getMiniWidthNumber, getCollapsed, setThemeStore } = useMenu()
+
+    onMounted(() => {
+        nextTick(() => {
+            const exec = useDebounceFn(changeWrapWidth, 80)
+            exec()
+        })
+    })
+
+    function getEl(elRef: Ref<any>) {
+        const el = unref(elRef)
+        if (!el) return null
+
+        if (Reflect.has(el, '$el')) {
+            return unref(elRef)?.$el
+        }
+
+        return unref(elRef)
+    }
+
+    function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
+        document.onmousemove = function (innerE: any) {
+            innerE = innerE || window.event
+            let iT = (ele as any).left + (innerE.clientX - clientX)
+
+            const maxT = 800
+            const minT = unref(getMiniWidthNumber)
+
+            iT < 0 && (iT = 0)
+            iT > maxT && (iT = maxT)
+            iT < minT && (iT = minT)
+
+            ele.style.left = wrap.style.width = iT + 'px'
+            return false
+        }
+    }
+
+    function removeMouseup(ele: any) {
+        const wrap = getEl(siderRef)
+
+        document.onmouseup = function () {
+            document.onmousemove = null
+            document.onmouseup = null
+
+            wrap.style.transition = 'width 0.2s'
+            const width = parseInt(wrap.style.width)
+
+            setThemeStore({
+                menuOptions: {
+                    menuWidth: width
+                }
+            })
+
+            ele.releaseCapture?.()
+        }
+    }
+
+    function changeWrapWidth() {
+        const ele = getEl(dragBarRef)
+        if (!ele) return
+
+        const wrap = getEl(siderRef)
+        if (!wrap) return
+
+        ele.onmousedown = (e: any) => {
+            wrap.style.transition = 'unset'
+            const clientX = e?.clientX
+
+            ele.left = ele.offsetLeft
+
+            handleMouseMove(ele, wrap, clientX)
+            removeMouseup(ele)
+
+            ele.setCapture?.()
+
+            return false
+        }
+
+    }
+}

package/src/theme/sider/hooks/useOpenKeys.ts

@@ -0,0 +1,57 @@
+import { Menus, MenuType, useTimeoutFn } from "@dt-frames/core"
+import { getBreadCrumb } from '../../header/helper/menu-tree'
+import { computed } from "vue"
+
+export type MenuState = {
+    // 默认选中的列表
+    defaultSelectedKeys: string[]
+    // 展开数组
+    openKeys: string[]
+    // 当前选中的菜单项 key 数组
+    selectedKeys: string[]
+    // 收缩状态下展开的数组
+    collapsedOpenKeys: string[]
+}
+
+
+export function useOpenKeys(
+    menuState: MenuState,
+    menus: Menus[],
+    type: string
+) {
+    async function setOpenKeys(path: string) {
+        if( type === MenuType.TOP_MENU ) return
+
+        useTimeoutFn(
+            () => {
+                if (menus?.length === 0) {
+                    menuState.openKeys = [];
+                    return;
+                }
+
+                const parentNodes = getBreadCrumb(path, menus)
+                menuState.openKeys = parentNodes.map( it => it.id )
+            },
+            20,
+            true
+        )
+    }
+
+    const getOpenKeys = computed(() => menuState.openKeys)
+
+    function resetKeys() {
+        menuState.selectedKeys = []
+        menuState.openKeys = []
+    }
+
+    function handleOpenChange(openKeys: string[]) {
+        menuState.openKeys = openKeys
+    }
+
+    return {
+        getOpenKeys,
+        setOpenKeys,
+        resetKeys,
+        handleOpenChange
+    }
+}

package/src/theme/sider/index.less

@@ -0,0 +1,203 @@
+@content-bg: #f4f7f9;
+@header-height: 48px;
+@logo-width: 32px;
+@border-color-base: #d9d9d9;
+@side-drag-z-index: 2000;
+@menu-bg-color: #001529;
+@menu-sub-bg-color: #00061a;
+@menu-mix-bg-color: #fff;
+@menu-mix-sub-bg-color: #fff;
+@menu-mix-select-bg-color: #269ac112;
+
+
+.dt-theme-main {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: @content-bg;
+    flex-direction: column;
+
+    > .ant-layout {
+        min-height: 100%;
+    }
+
+    &-main {
+        width: 100%;
+    }
+    
+}
+
+.dt-logo{
+    height: @header-height;
+    min-width: 240px;
+    padding: 0 10px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+
+    img {
+        width: @logo-width;
+        height: @logo-width;
+        margin-right: 10px;
+    }
+
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+
+    &.light {
+        border-bottom: 1px solid @border-color-base;
+    }
+
+    &.light &__title {
+        color: @primary-color;
+    }
+
+    &.dark &__title {
+        color: @white;
+    }
+
+    &__title {
+        font-size: 16px;
+        font-weight: 700;
+        transition: all 0.5s;
+        line-height: normal;
+        padding-left: 12px;
+    }
+}
+
+.dt-sideBar{
+    z-index: 2;
+    overflow: hidden;
+    background: @menu-bg-color;
+
+    .ant-menu{
+        background: @menu-bg-color;
+
+        .ant-menu-sub{
+            background: @menu-sub-bg-color;
+        }
+    }
+
+    &--side{
+        &>div{
+            display: flex;
+            flex-direction: column;
+            .scrollbar{
+                flex: 1;
+            }
+        }
+    }
+}
+
+.dt-sideBar.dt-sideBar--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+.dt-sideBar.dt-sideBar--mix {
+    height: calc(100% - 48px);
+    top: @header-height;
+    background: @menu-mix-bg-color;
+    border-right: 1px solid #f0f0f0;
+
+    .ant-menu{
+        background: @menu-mix-bg-color;
+        border-right: none;
+        .ant-menu-sub{
+            background: @menu-mix-sub-bg-color;
+        }
+        .ant-menu-item-selected{
+            background: @menu-mix-select-bg-color;
+        }
+    }
+
+    .ant-layout-sider-trigger{
+        background: @menu-mix-bg-color;
+        border-right: 1px solid #f0f0f0;
+        border-top: 1px solid #f0f0f0;
+    }
+}
+
+.ant-layout-sider-dark, .ant-menu-dark {
+    .menu-icon{
+        color: rgba(255,255,255,0.65) !important;
+        padding: 12px 0;
+        margin-right: 12px;
+        height: 40px !important;
+        width: 28px;
+        text-align: center;
+    }
+
+    .dt-icon{
+        color: rgba(255,255,255,0.65) !important;
+        line-height: 16px;
+        height: 16px;
+    }
+ 
+    .ant-menu-item-selected > span > span > span, .ant-menu-submenu-selected > div > span > span > span {
+        &>.dt-icon {
+            color: #fff !important;
+        }
+    }
+    .ant-menu-item-active > span > span > span, .ant-menu-submenu-active > div > span > span > span{
+        &>.dt-icon {
+            color: #fff !important;
+        }
+    }
+
+    .ant-menu-item {
+        height: 48px !important;
+        line-height: 48px !important;
+        margin: 0 !important;
+
+        .menu-icon{
+            height: 48px !important;
+            padding: 16px 0;
+            text-align: center;
+        }
+
+    }
+
+    .ant-menu-submenu-selected{
+        &>div .svg-icon use{
+            fill: #fff !important;
+        }
+    }
+}
+
+.ant-menu-inline-collapsed{
+    .dt-menu-item{
+        overflow: hidden;
+    }
+}
+
+.dt-basic-menu-item-content-flex {
+    display: flex;
+}
+
+.dt-darg-bar{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: @side-drag-z-index;
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    border-top: none;
+    border-bottom: none;
+
+    &--hide {
+        display: none;
+    }
+  
+    &:hover {
+        background-color: @primary-color;
+        box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+    }
+}

package/src/theme/sider/index.vue

@@ -0,0 +1,88 @@
+<template>
+    <!-- 创建一个空的div在左侧占位 -->
+    <div
+        v-if="getMenuFixed"
+        :style="hiddenDomStyle"
+        v-show="showClassSideBarRef"
+    ></div>
+
+    <LayoutSider
+        v-show="showClassSideBarRef"
+        ref="sideRef"
+        collapsible
+        breakpoint="lg"
+        :class="getSiderClass"
+        :width="getMenuWidth"
+        :collapsed="getCollapsed"
+        :collapsedWidth="getCollapsedWidth"
+        @breakpoint="onBreakPointChange"
+        :theme="getMenuTheme"
+        :trigger="renderTrigger"
+        v-bind="getTriggerAttr"
+    >
+        <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType"></LayoutMenu>
+        <DragBar ref="dragBarRef" />
+    </LayoutSider>
+</template>
+
+<script lang="ts" setup>
+    import { computed, unref, ref, h } from "vue"
+    import { useMenu, MenuSplitTye, MenuMode, useHeader, Theme } from '@dt-frames/core'
+
+    import { LayoutSider } from 'ant-design-vue'
+    import { useMenuSwitch, useTrigger } from "./helper/sider"
+    import LayoutMenu from './components/layout-menu.vue'
+    import LayoutTrigger from './components/sider-trigger.vue'
+    import DragBar from './components/drag-bar.vue'
+    import { useDragLine } from "./hooks/useDragLine"
+
+
+    const { getMenuFixed, getSplit, getMenuHidden, getMenuWidth, getCollapsed, getMenuTheme,getIsSidebarType, getIsTopMenu, getRealWidth, getIsMixMode } = useMenu()
+    const { getHeaderTheme } = useHeader()
+    const { getCollapsedWidth, onBreakPointChange } = useMenuSwitch()
+    const { getTriggerAttr, getShowTrigger } = useTrigger();
+    const dragBarRef = ref(null)
+    const sideRef = ref(null)
+
+    const hiddenDomStyle = computed(() => {
+        const width = `${ unref(getRealWidth) }px`;
+        return {
+            width: width,
+            overflow: 'hidden',
+            flex: `0 0 ${ width }`,
+            maxWidth: width,
+            minWidth: width,
+            transition: 'all 0.2s'
+        }
+    });
+
+    const showClassSideBarRef = computed( () => {
+        return unref(getSplit) ? !unref( getMenuHidden ) : true;
+    } );
+
+    useDragLine(sideRef, dragBarRef)
+
+    const getSiderClass = computed( () => {
+        return [
+            'dt-sideBar',
+            {
+                'dt-sideBar--side': unref(getIsSidebarType),
+                'dt-sideBar--top': unref(getIsTopMenu),
+                'dt-sideBar--fixed': unref(getMenuFixed),
+                'dt-sideBar--mix': unref(getIsMixMode),
+            },
+        ]
+    } );
+
+    const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTye.LEFT : MenuSplitTye.NONE;
+    });
+
+    const getMode = computed(() => {
+        return unref(getSplit) ? MenuMode.INLINE : null;
+    });
+
+    const renderTrigger = h(LayoutTrigger)
+
+</script>
+

package/src/theme/tabs/components/TabContent.vue

@@ -0,0 +1,36 @@
+<template>
+    
+    <Dropdown
+        placement="bottomRight"
+        :trigger="['click']"
+        overlayClassName="reuse-tabs__dropdown"
+    >
+        <span @click="handleContext" class="reuse-tab-quick">
+            <span v-icon="'ic:baseline-keyboard-arrow-down'" :fontSize="16"></span>
+        </span>
+
+        <template #overlay>
+            <Menu>
+                <template v-for="(item, index) in getDropMenuList" :key="index">
+                    <MenuItem
+                        @click="handleMenuEvent(item)"
+                        :disabled="item.disabled"
+                    >
+                        <span v-icon="item.icon" :fontSize="16"></span>
+                        <span>{{ item.text }}</span>
+                    </MenuItem>
+
+                    <MenuDivider v-if="item.divider" :key="`d-${index}`"></MenuDivider>
+                </template>
+            </Menu>
+        </template>
+    </Dropdown>
+</template>
+
+<script lang="ts" setup>
+    import { Dropdown, Menu, MenuDivider, MenuItem } from 'ant-design-vue'
+    import { useTabDropdown } from '../hooks/useTabDropdown';
+
+    const { getDropMenuList, handleContext, handleMenuEvent } = useTabDropdown()
+    
+</script>

package/src/theme/tabs/components/TabRedo.vue

@@ -0,0 +1,18 @@
+<template>
+    <span class="dt-tab-redo" @click="handleRedo">
+        <DtIcon :icon-class="'ic:baseline-autorenew'" :size="16" ></DtIcon>
+    </span>
+</template>
+
+<script lang="ts" setup>
+    import { RouteReuseStore } from '@dt-frames/core'
+    import { useRouter } from 'vue-router';
+    import { DtIcon } from '../../../components/icons'
+
+    const tabStore = RouteReuseStore()
+    const router: any = useRouter();
+
+    function handleRedo() {
+        tabStore.refreshPage(router)
+    }
+</script>