@dt-frames/ui 1.0.0 → 1.0.1

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

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

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

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

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

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

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

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

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