@dt-frames/ui 1.0.0 → 1.0.1

package/src/theme/tabs/index.less

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

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

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

package/src/theme/theme.less

@@ -1,66 +0,0 @@
-@import './header/index.less';
-@import './sider/index.less';
-@import './tabs/index.less';
-@import './footer/index.less';
-@import './transition.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

@@ -1,89 +0,0 @@
-<template>
-    <div class="dt-theme">
-        <ConfigProvider :locale="zhCN">
-            <!-- 不需要权限登录 -->
-            <template v-if="currentRoute.meta?.requiresAuth === false">
-                <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 { 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 { 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>

package/src/theme/transition.less

@@ -1,99 +0,0 @@
-/** zoom-fade */
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.2s, opacity 0.3s ease-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.92);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.06);
-}
-
-
-/** zoom-out */
-.zoom-out-enter-active,
-.zoom-out-leave-active {
-  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
-}
-
-.zoom-out-enter-from,
-.zoom-out-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-// fade
-.fade-transition {
-    &-enter-active,
-    &-leave-active {
-      transition: opacity 0.2s ease-in-out;
-    }
-  
-    &-enter-from,
-    &-leave-to {
-      opacity: 0;
-    }
-}
-  
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease-in-out;
-}
-  
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-/* fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-    transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-    opacity: 0;
-    transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-}
-
-/** fade-bottom */
-.fade-bottom-enter-active,
-.fade-bottom-leave-active {
-  transition: opacity 0.25s, transform 0.3s;
-}
-
-.fade-bottom-enter-from {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-.fade-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-// fade-scale
-.fade-scale-leave-active,
-.fade-scale-enter-active {
-  transition: all 0.28s;
-}
-
-.fade-scale-enter-from {
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}