@dt-frames/ui 1.0.0

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, 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

@@ -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,66 @@
+@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

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

@@ -0,0 +1,99 @@
+/** 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);
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "./es",
+    "removeComments": true,
+    "esModuleInterop": true, // 同时打包出cjs 和 esm, 暂时先打包成esm就够用了
+    "strict": false,
+    "strictNullChecks": false,
+    "noImplicitOverride": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false
+  },
+  "include": [
+    "src/**/*.ts", 
+    "src/**/*.vue", 
+    "src/**/*.tsx", 
+    "src/index.ts",
+    "vite.config.js"
+  ]
+}