@dt-frames/ui 1.0.1 → 1.0.4

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
+    }
+}

package/src/theme/tabs/index.less

@@ -0,0 +1,165 @@
+@multiple-height: 30px;
+@component-background: #fff;
+
+.dt-reuse-tabs{
+    line-height: 32px;
+    height: 33px;
+    border-bottom: 1px solid #e7e7e7;
+
+    .ant-tabs-small {
+        height: calc(@multiple-height + 2px);
+    }
+
+    .ant-tabs-card{
+        .ant-tabs-nav{
+            padding-top: 2px;
+            height: calc(@multiple-height + 2px);
+            margin: 0;
+            background-color: @component-background;
+            border: 0;
+            box-shadow: none;
+
+            &::before{
+                border: none;
+            }
+
+            .ant-tabs-nav-container {
+                height: @multiple-height;
+                padding-top: 2px;
+            }
+        }
+    }
+    
+    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab{
+        height: calc(@multiple-height - 2px);
+        padding-right: 12px;
+        line-height: calc(@multiple-height - 2px);
+        color: @text-color-base;
+        background-color: @component-background;
+        transition: none;
+
+        span{
+            font-size: 12px;
+        }
+
+        &:hover {
+            .ant-tabs-tab-remove {
+                opacity: 1;
+            }
+        }
+
+        .ant-tabs-tab-remove{
+            width: 8px;
+            height: 28px;
+            font-size: 12px;
+            color: inherit;
+            opacity: 0;
+            transition: none;
+            margin-left: 2px;
+            margin-right: -4px;
+
+            &:hover {
+                svg {
+                    width: 0.8em !important;
+                }
+            }
+            
+            svg {
+                fill: @text-color-base;
+            }
+        }
+
+        .ant-tabs-tab:not(.ant-tabs-tab-active) {
+            &:hover {
+                color: @primary-color;
+            }
+        }
+    }
+
+    .ant-tabs-tab-active {
+        position: relative;
+        padding-left: 18px;
+        background: @primary-color !important;
+        border: 0;
+        transition: none;
+
+        span {
+          color: @white !important;
+        }
+
+        .ant-tabs-tab-remove {
+          opacity: 1;
+        }
+
+        svg {
+            width: 0.7em;
+            fill: @white !important;
+        }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+        padding: 0 6px;
+  
+        .ant-tabs-tab {
+          margin-right: 3px !important;
+        }
+    }
+
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        border: 1px solid #d9d9d9 !important;
+        .anticon-close {
+            font-size: 12px;
+        
+            svg {
+                width: 0.6em;
+            }
+        }
+    }
+
+    .ant-dropdown-trigger {
+        display: inline-flex;
+    }
+    
+    &--hide-close {
+        .ant-tabs-tab-remove {
+            opacity: 0 !important;
+        }
+    }
+
+    .reuse-tab-quick, .dt-tab-redo{
+        display: inline-block;
+        width: 36px;
+        height: calc(@multiple-height + 6px);
+        line-height: calc(@multiple-height + 6px);
+        margin-top: -2px;
+        color: rgba(0,0,0,0.73);
+        text-align: center;
+        cursor: pointer;
+        border-left: 1px solid #d9d9d9;
+  
+        &:hover {
+          color: #333;
+        }
+    }
+
+}
+
+.reuse-tabs__dropdown{
+    .ant-dropdown-content {
+        width: 172px;
+        li > span{
+            display: flex;
+        }
+
+        .dt-icon{
+            width: 24px;
+            display: inline-block;
+        }
+
+        .ant-dropdown-menu-item-disabled{
+            .dt-icon{
+                opacity: 0.6;
+            }
+        }
+    }
+}

package/src/theme/tabs/index.vue

@@ -0,0 +1,98 @@
+<template>
+    <div :class="getWrapCls">
+        <Tabs
+            type="editable-card"
+            size="small"
+            :animated="false"
+            :hideAdd="true"
+            :tabBarGutter="3"
+            :activeKey="activeKeyRef"
+            @change="handleChange"
+            @edit="handleEdit"
+        >
+            <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
+                <TabPane :closable="!(item && item.meta && item.meta.affix)">
+                    <template #tab>
+                        <span>{{ menuLabelMap.get(item.path) || '未知路由' }}</span>
+                    </template>
+                </TabPane>
+            </template>
+            
+            <template #rightExtra v-if="getShowRedo || getShowQuick">
+                <TabRedo v-if="getShowRedo" />
+                <TabContent v-if="getShowQuick" />
+            </template>
+        </Tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { Tabs, TabPane } from 'ant-design-vue'
+    import { computed, ref, unref, watch } from 'vue'
+    import { menuList2Map, RouteReuseStore, useGo, useMultipleTab } from '@dt-frames/core'
+    import { useRouter } from 'vue-router'
+    import TabContent from './components/TabContent.vue'
+    import TabRedo from './components/TabRedo.vue'
+    import { initAffixTabs, useTabsDrag } from './hooks/useMultifyTabs'
+
+    const menuLabelMap = menuList2Map()
+    const { getShowQuick, getShowRedo } = useMultipleTab()
+    const activeKeyRef = ref('')
+
+    const tabStore = RouteReuseStore()
+
+    const getTabsState = computed(() => {
+        return tabStore.getTabList.filter((item) => !item.meta?.hideTab)
+    })
+    const unClose = computed(() => unref(getTabsState).length === 1)
+    const getWrapCls = computed(() => {
+        return [
+            'dt-reuse-tabs',
+            {
+                'dt-reuse-tabs--hide-close': unref(unClose)
+            }
+        ]
+    })
+
+    const router: any = useRouter()
+    const { currentRoute } = router
+
+    // 拖拽tabs
+    const affixTextList = initAffixTabs();
+    useTabsDrag(affixTextList)
+
+    watch(
+        () => currentRoute.value.path,
+        v => {
+            if( v === '/' || v === '/login' ) return
+
+            const { meta = {} } = unref(currentRoute)
+            const { hideTab = false } = meta
+
+            if( activeKeyRef.value !== v ) {
+                activeKeyRef.value = v
+            }
+
+            if( !hideTab ) {
+                tabStore.addTab(unref(currentRoute))
+            }
+        },
+        {
+            immediate: true
+        }
+    )
+
+
+    function handleChange(activeKey: any) {
+        activeKeyRef.value = activeKey
+
+        const go = useGo(router)
+        go(activeKey)
+    }
+
+    function handleEdit(targetKey: string) {
+        if( unref(unClose) ) return
+
+        tabStore.closeTab( targetKey, router )
+    }
+</script>

package/src/theme/tabs/types/tabs.type.ts

@@ -0,0 +1,8 @@
+export type DropMenu = {
+    onClick: () => void;
+    icon: string;
+    text: string;
+    disabled?: boolean;
+    divider?: boolean;
+  }
+  

package/src/theme/theme.less

@@ -0,0 +1,67 @@
+@import './header/index.less';
+@import './sider/index.less';
+@import './tabs/index.less';
+@import './footer/index.less';
+@import './transition.less';
+@import '../components/icons/index.less';
+@import '../components/container/index.less';
+
+@page-bg-color: #f0f2f5;
+
+.dt-theme{
+    width: 100%;
+    height: 100%;
+
+    .fixedWrap{
+        .scrollbar__view{
+            height: 100%;
+        }
+    }
+
+    .dt-layout-content{
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-x: hidden;
+
+        // 固定宽度模式
+        &.fixed{
+            width: 100%;
+            padding: 0 calc((100% - 1200px) / 2);
+        }
+
+        .ant-layout-content{
+            height: 100%;
+            .dt-page{
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                padding: 12px;
+                background: @page-bg-color;
+                .basic-form--search{
+                    background: #fff;
+                    padding: 15px 30px 0;
+                    border-radius: 2px;
+                    &>div{
+                        border-bottom: 1px dashed #e7e7e7;
+                    }
+                }
+
+                .dt-table{
+                    padding: 6px 20px;
+                    border-radius: 2px;
+                    background: #fff;
+                }
+                .ant-table-wrapper{
+                    flex: 1;
+                    height: 0;
+
+                    .ant-spin-nested-loading{
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+

package/src/theme/theme.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="dt-theme" v-if="currentRoute.fullPath && getAppConf?.router.unRequireAuthPage.length">
+        <ConfigProvider :locale="zhCN">
+            <!-- 不需要权限登录 -->
+            <template v-if="getAppConf?.router.unRequireAuthPage.includes(currentRoute.fullPath)">
+                <router-view></router-view>
+            </template>
+
+            <!-- 需要权限登录 -->
+            <template v-else>
+                <Layout class="dt-theme">
+                    <DtFeature />
+                    <DtHeader fixed v-if="getShowFullHeaderRef" />
+                    <Layout :class="layoutClass" :style="layoutOption">
+                        <LayoutSideBar v-if="getShowSidebar"/>
+
+                        <ScrollContainer ref="wrapperRef" :class="{'fixedWrap': getFixed}">
+                            <Layout class="dt-theme-main">
+                                <LayoutMultipleHeader />
+                                <LayoutContent :style="getContentStyle"/>
+                                <LayoutFooter v-if="getFooter && getFooter['show']"/>
+                            </Layout>
+                        </ScrollContainer>
+                    </Layout>
+                </Layout>
+            </template>
+        </ConfigProvider>
+        
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, unref, ref } from 'vue'
+    import { useRouter } from 'vue-router'
+    import { Layout, ConfigProvider } from 'ant-design-vue'
+    import { useAppStore, useHeader, useMenu, useTheme } from '@dt-frames/core'
+
+    import DtFeature from './feature/index.vue'
+    import DtHeader from './header/index.vue'
+    import LayoutSideBar from './sider/index.vue'
+    import LayoutMultipleHeader from './header/multiple-header.vue'
+    import LayoutFooter from './footer/index.vue'
+    import LayoutContent from './content/index.vue'
+    import { ScrollContainer } from '../components/container'
+
+    import zhCN from 'ant-design-vue/es/locale/zh_CN'
+
+    import dayjs from 'dayjs'
+    import 'dayjs/locale/zh-cn'
+
+    dayjs.locale('zh-cn')
+    
+    const wrapperRef = ref(null);
+
+    const { currentRoute } = useRouter();
+
+    const { getShowFullHeaderRef, getFixed, getHeaderHeight } = useHeader()
+    const { getSplit, getShowMenu, getShowSidebar } = useMenu()
+    const { getFooter, getShowFooter } = useTheme()
+    const { getAppConf } = useAppStore()
+
+    const { height } = unref(getFooter) as any;
+
+    // 动态添加容器类名
+    const layoutClass = computed(() => {
+        let cls = 'ant-layout';
+        if (unref(getShowMenu)) {
+            cls += ' ant-layout-has-sider';
+        }
+        
+        return cls
+    })
+
+    // 动态设置容器样式
+    const layoutOption = computed( () => {
+        if( unref(getSplit) ) {
+            return { 
+                paddingTop: unref(getHeaderHeight) + 'px',
+            }
+        }
+    } )
+
+    const getContentStyle = computed( () => {
+        return {
+            flex: unref(getSplit) ? `0 0 calc(100% - ${unref(getHeaderHeight)}px)` : `0 0 calc(100% - ${unref(getShowFooter) ? height : 0}px - ${ unref(getHeaderHeight) }px)`,
+            overflowY: 'auto'
+        }
+    } );
+
+</script>