@dt-frames/ui 1.0.0

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;
+            }
+        }
+    }
+
+    &--fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+
+    &--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,37 @@
+<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 { DtIcon } from '../../../components/icons';
+    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>

package/src/theme/tabs/hooks/useMultifyTabs.ts

@@ -0,0 +1,96 @@
+import { ref, toRaw, nextTick, unref, Ref } from 'vue'
+import { isNullAndUnDef, RouteReuseStore, useMultipleTab } from '@dt-frames/core'
+import { RouteLocationNormalized, useRouter } from 'vue-router'
+import type { Options } from 'sortablejs'
+
+
+// 获取固定的tabs
+export function initAffixTabs() {
+    const affixList = ref([])
+
+    const tabStore = RouteReuseStore()
+    const router = useRouter()
+
+    // 过滤固定的路由
+    const filterAffixTabs = ( routes: RouteLocationNormalized[] = [] ) => {
+        return routes && routes.reduce((tabs, route) => {
+            if (route.meta && route.meta.affix) {
+                tabs.push(toRaw(route))
+            }
+
+            return tabs
+        }, [])
+    }
+
+    // 重新设置tabs信息
+    const addAffixTabs = () => {
+        const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[])
+        affixList.value = affixTabs
+
+        for (const tab of affixTabs) {
+            tabStore.addTab({
+                meta: tab.meta,
+                name: tab.name,
+                path: tab.path,
+            } as unknown as RouteLocationNormalized);
+        }
+    }
+
+    let isAddAffix = false
+
+    if (!isAddAffix) {
+        addAffixTabs();
+        isAddAffix = true;
+    }
+
+    return affixList.value.map((item) => item.meta?.title).filter(Boolean) as string[]
+}
+
+
+// 排序函数
+export function useSortable(el: HTMLElement | Ref<HTMLElement>, options?: Options) {
+    function initSortable() {
+        nextTick(async () => {
+            if (!el) return
+
+            const Sortable = (await import('sortablejs')).default;
+            Sortable.create(unref(el), {
+                animation: 500,
+                delay: 400,
+                delayOnTouchOnly: true,
+                ...options,
+            })
+        })
+    }
+
+    return { initSortable }
+}
+
+
+// 设置tabs拖拽
+export function useTabsDrag(affixList: string[]) {
+    const tabStore = RouteReuseStore()
+    const { getCanDrag } = useMultipleTab()
+
+    nextTick(() => {
+        if (!unref(getCanDrag)) return;
+
+        const el = document.querySelectorAll(`.dt-reuse-tabs .ant-tabs-nav-list`)?.[0] as HTMLElement
+
+        const { initSortable } = useSortable(el, {
+            filter: (e) => {
+                const text = e?.target?.innerText;
+                if (!text) return false;
+                return affixList.includes(text)
+            },
+            onEnd: (evt) => {
+                const { oldIndex, newIndex } = evt
+        
+                if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) return
+        
+                tabStore.sortTabs(oldIndex, newIndex)
+            },
+          });
+          initSortable()
+    })
+}

package/src/theme/tabs/hooks/useTabDropdown.ts

@@ -0,0 +1,89 @@
+import { RouteLocationNormalized, useRouter, Router } from "vue-router"
+import { computed, unref, reactive } from 'vue'
+import { Nullable, RouteReuseStore } from "@dt-frames/core"
+import { DropMenu } from "../types/tabs.type"
+
+export function useTabDropdown() {
+    const router: any = useRouter()
+    const { currentRoute } = router
+    const tabStore = RouteReuseStore()
+
+    const state = reactive({
+        current: null as Nullable<RouteLocationNormalized>,
+        currentIndex: 0,
+    });
+
+    const getDropMenuList = computed(() => {
+        const { path, meta } = unref(currentRoute)
+        const curItem = state.current
+        const isCurItem = curItem ? curItem.path === path : false
+
+        const index = state.currentIndex
+
+        // 是否可以关闭左侧按钮
+        const closeLeftDisabled = index === 0 || !isCurItem
+
+        // 是否禁用
+        const disabled = tabStore.getTabList.length === 1
+
+        // 是否可以关闭右侧按钮
+        const closeRightDisabled = !isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0)
+        
+        const dropMenuList: DropMenu[] = [
+            {
+                icon: 'ic:baseline-close',
+                text: '关闭当前标签页',
+                onClick: () => tabStore.closeTab(path, router),
+                disabled: !!meta?.affix || disabled,
+                divider: true,
+            },
+            {
+                icon: 'mdi:arrow-collapse-left',
+                text: '关闭左侧标签页',
+                onClick: () => tabStore.closeLeftTabs(path),
+                disabled: closeLeftDisabled,
+                divider: false,
+            },
+            {
+                icon: 'mdi:arrow-collapse-right',
+                text: '关闭右侧标签页',
+                onClick: () => tabStore.closeRightTabs(path),
+                disabled: closeRightDisabled,
+                divider: true,
+            },
+            {
+                icon: 'ic:baseline-sync-alt',
+                text: '关闭其他标签页',
+                onClick: () => tabStore.closeOtherTabs(path),
+                disabled: disabled || !isCurItem,
+            },
+            {
+                icon: 'ic:baseline-horizontal-rule',
+                text: '关闭全部标签页',
+                onClick: () => tabStore.closeAllTab(currentRoute, router),
+                disabled: disabled,
+            }
+        ]
+
+        return dropMenuList
+    })
+
+    function handleContext(e) {
+        e?.preventDefault()
+
+        const { path } = unref(currentRoute)
+        const index = tabStore.getTabList.findIndex((tab) => tab.path === path)
+        state.current = unref(currentRoute)
+        state.currentIndex = index
+    }
+
+    function handleMenuEvent(item: DropMenu) {
+        item.onClick?.()
+    }
+
+    return {
+        getDropMenuList,
+        handleContext,
+        handleMenuEvent
+    }
+}