@dt-frames/ui 2.0.0 → 2.0.2

package/es/theme/index.less

@@ -0,0 +1,603 @@
+@import '../components/container/index.less';
+
+@primary-color: #269ac1;
+@header-bg-color: #fff;
+@header-bg-dark-color: #3c4252;	// #001529
+@header-light-bottom-border-color: #eee;
+@header-height: 48px;
+@logo-width: 32px;
+@logo-height: 32px;
+
+@text-color-base: #333;
+@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;
+@menu-item-height: 44px;
+
+@border-color-base: #d9d9d9;
+
+@page-bg-color: #f0f2f5;
+@content-bg: #f4f7f9;
+
+@white: #fff;
+
+@side-drag-z-index: 20;
+
+// 路由复用
+@multiple-height: 30px;
+@tabs-background: #fff;
+
+// 滚动条边框
+@border-color-dark: #b6b7b9;
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+    width: 7px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: rgb(0 0 0 / 5%);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgb(144 147 153 / 30%);
+    border-radius: 2px;
+    box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: @border-color-dark;
+}
+
+
+.ant-btn.ant-btn-sm,
+.ant-input-search-small .ant-btn.ant-btn-sm{
+	font-size: 13px;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.dt-theme{
+    .ant-input-sm{
+        height: 30px;
+		font-size: 12px;
+    }
+
+    .dt-theme-main {
+        background-color: @content-bg;
+		.ant-layout-content{
+			width: 100%;
+		}
+    }
+
+    .dt-page{
+        background: @page-bg-color;
+    }
+
+    .dt-header{
+        height: 48px;
+        line-height: 48px;
+        padding: 0;
+
+        &--light {
+            background-color: @header-bg-color !important;
+            border-bottom: 1px solid @header-light-bottom-border-color;
+            color: @text-color-base;
+			.dt_header_icon:hover{
+				background-color: rgba(175, 178, 184, 0.25)
+			}
+        }
+
+		&--dark {
+			background-color: @header-bg-dark-color !important;
+			.ant-menu-dark{
+				background-color: @header-bg-dark-color;
+			}
+			i.i, span{
+				color: @white;
+			}
+		}
+    }
+
+    .dt-sideBar{
+        background: @menu-bg-color;
+
+        .ant-layout-sider-children {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .ant-menu{
+            background: @menu-bg-color;
+
+            .ant-menu-sub{
+                background: @menu-sub-bg-color;
+            }
+
+            .ant-menu-item, .ant-menu-submenu-title{
+                margin: 0;
+                height: @menu-item-height !important;
+            }
+        }
+
+        &--fixed{
+            position: fixed;
+        }
+
+        &--mix{
+            height: calc(100% - @header-height);
+            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;
+        }
+
+        .dt-menu-item{
+            display: flex;
+            align-items: center;
+            height: @menu-item-height;
+            font-size: 13px;
+        }
+
+        &.ant-layout-sider-collapsed{
+            .dt-menu-item > span{
+                opacity: 0;
+            }
+            .menu-icon{
+                font-size: 18px;
+                height: 18px;
+                line-height: 18px;
+            }
+        }
+
+        .dt-darg-bar{
+            position: fixed;
+            top: 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%);
+            }
+        }
+    }
+}
+
+.dt-menu-item{
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    .menu-icon {
+        margin-right: 6px;
+    }
+}
+
+.dt-sideBar .ant-menu-inline .ant-menu-item, .dt-sideBar .ant-menu-inline .ant-menu-submenu-title {
+	width: 100%;
+}
+
+.ant-layout-sider-dark, .ant-menu-dark{
+    .ant-menu-item-active > span > span,
+    .ant-menu-item-selected > span > span,
+    .ant-menu-submenu-active > div > span > span,
+    .ant-menu-submenu-selected > div > span > span,
+    .ant-menu-submenu-selected > span > span{
+        &>.menu-icon {
+            color: #fff !important;
+        }
+    }
+
+	.ant-menu-submenu-selected.ant-menu-submenu-horizontal {
+		background: none;
+		&::after{
+			bottom: 4px;
+			border-bottom: 4px solid @primary-color;
+			border-radius: 1px;
+		}
+	}
+
+    .dt-menu-item {
+        display: flex;
+        span{
+            font-size: 13px;
+        }
+    }
+    .menu-icon{
+        color: rgba(255,255,255,0.65);
+        padding: 0;
+        margin-right: 6px;
+        height: 40px;
+        width: 28px;
+        text-align: center;
+        font-size: 16px;
+        height: 16px;
+        line-height: 18px;
+    }
+}
+
+.dt-split-menu.ant-menu-horizontal .ant-menu-item-selected {
+	background-color: @primary-color;
+}
+
+.dt-header{
+    height: @header-height;
+    line-height: @header-height;
+    color: @white;
+
+    .i{
+        font-size: 1.125rem;
+    }
+}
+
+.dt-logo{
+    height: @header-height;
+    flex: 0 0 @header-height;
+    &.light {
+        border-bottom: 1px solid @border-color-base;
+    }
+
+    &.light &__title {
+        color: @primary-color;
+    }
+
+    &.dark &__title {
+        color: @white;
+    }
+
+    img{
+        width: @logo-width;
+        height: @logo-height;
+    }
+}
+
+.dt-menu-filter{
+	input{
+		border-top-left-radius: 16px;
+		border-bottom-left-radius: 16px;
+		padding-left: 14px;
+		font-size: 13px;
+		width: 150px !important;
+		border-right: none;
+	}
+	.ant-btn{
+		border-left: none;
+		border-top-right-radius: 16px !important;
+		border-bottom-right-radius: 16px !important;
+		padding-right: 10px;
+		padding-left: 5px;
+    	width: 30px;
+	}
+
+	.ant-input:focus,
+	.ant-input:hover,
+	.ant-btn:focus,
+	.ant-btn:hover{
+		border-color: #d9d9d9;
+		box-shadow: none;
+	}
+
+    .ant-empty-image{
+        height: 40px;
+        svg{
+            width: 100%;
+        }
+    }
+
+	.ant-input-group-addon {
+		background-color: inherit;
+	}
+
+	&__popover .ant-popover-inner-content{
+		width: 180px;
+		max-height: 400px;
+        height: 220px;
+        padding: 0;
+        overflow-y: auto;
+	}
+
+	&__popover .ant-empty-description{
+		font-size: 13px;
+	}
+}
+
+.dt-setting-theme{
+	&__tips {
+		border: 1px solid @primary-color;
+		color: @primary-color;
+	}
+}
+
+.dt-lang-picker{
+	&__popover .ant-popover-inner-content{
+		width: 120px;
+		padding: 4px 0;
+
+		.active{
+			color: @primary-color;
+		}
+	}
+}
+
+.dt-notify{
+	&__popover .ant-popover-inner-content {
+		width: 350px;
+		padding: 10px 0 0 0;
+	}
+}
+
+.dt-size {
+	&__popover .ant-popover-inner-content {
+		width: 120px;
+		padding: 4px 0;
+
+		.active{
+			color: @primary-color;
+		}
+	}
+}
+
+.dt-user-info{
+	&__popover .ant-popover-inner-content {
+		width: 120px;
+		padding: 4px 0;
+
+		.active{
+			color: @primary-color;
+		}
+	}
+}
+
+.dt-menu-type {
+	&__list:hover{
+		border: 2px solid @primary-color;
+	}
+
+	&__item {
+		&::before{
+			position: absolute;
+			content: "";
+			top: 0;
+			left: 0;
+			z-index: 1;
+			width: 33%;
+			height: 100%;
+			background-color: #273352;
+		}
+		&::after{
+			position: absolute;
+			content: "";
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 25%;
+			background-color: #fff;
+		}
+	}
+
+	&__item--top-menu &__item {
+		&::before{
+            width: 0;
+        }
+        &::after{
+            background-color: #273352;
+        }
+	}
+
+	&__item--mix &__item {
+		&::before{
+            top: 25%;
+            height: 75%;
+            background-color: #fff;
+        }
+        &::after{
+            background-color: #273352;
+        }
+	}
+
+	&__item--active {
+		border: 2px solid @primary-color;
+	}
+}
+
+
+.dt-reuse-tabs {
+	.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: @tabs-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: @tabs-background;
+        transition: none;
+
+        span{
+            font-size: 12px;
+        }
+
+        &:hover {
+            .ant-tabs-tab-remove {
+                opacity: 1;
+            }
+        }
+
+        .ant-tabs-tab-remove{
+            width: 8px;
+			height: 10px;
+			font-size: 12px;
+			color: inherit;
+			opacity: 1;
+			transition: none;
+			margin-left: 8px;
+			margin-right: -9px;
+			align-items: center;
+
+			span{
+				display: block;
+			}
+
+            &: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;
+            }
+        }
+    }
+
+    &--hide-close {
+        .ant-tabs-tab-remove {
+            opacity: 0 !important;
+        }
+    }
+
+	&__dropdown .ant-dropdown-content li > span{
+		display: flex;
+	}
+}
+
+.ant-message-custom-content{
+	display: flex;
+	align-items: center;
+}
+
+.text-2xl{
+	font-size: 1.5rem;
+}
+
+.text-xl{
+	font-size: 1.25rem;
+}
+
+.text-base{
+	font-size: 1rem;
+}
+
+.text-sm{
+	font-size: 0.875rem;
+}
+
+.ant-modal-confirm-btns {
+    display: flex;
+}
+
+.dt-message-icon{
+	font-size: 24px;
+	&.warning{
+		color: #faad14;
+	}
+	&.success{
+		color: #52c41a;
+	}
+	&.error{
+		color: #ed6f6f;
+	}
+	&.info{
+		color: #1890ff;
+	}
+}
+
+.ant-modal-confirm-body .ant-modal-confirm-content{
+	color: #909399;
+}

package/es/theme/src/components/content/index.d.ts

@@ -0,0 +1,27 @@
+import { RouteRecordRaw } from 'vue-router';
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    getTransitionMode: import("vue").ComputedRef<import("@dt-frames/core").RouterTransition>;
+    getLayoutContentMode: import("vue").ComputedRef<import("../../enums").ContentMode>;
+    getPageLoading: boolean;
+    getOpenPageLoading: import("vue").ComputedRef<boolean>;
+    getCanCache: import("vue").ComputedRef<boolean>;
+    tabStore: import("pinia").Store<"route-reuse", import("../../stores/routeReuse.store").RouteReuseState, {
+        getTabList(): import("vue-router").RouteLocationNormalized[];
+        getCachedTabList(): string[];
+        getLastDragEndIndex(): number;
+    }, {
+        addTab(route: import("vue-router").RouteLocationNormalized): Promise<void>;
+        closeTab(path: string, router: import("vue-router").Router): void;
+        closeAllTab(currentRoute: import("vue").Ref<import("vue-router").RouteLocationNormalizedLoaded>, router: import("vue-router").Router): void;
+        closeLeftTabs(path: string): void;
+        closeRightTabs(path: string): void;
+        closeOtherTabs(path: string): void;
+        bulkCloseTabs(pathList: string[]): void;
+        updateCacheTab(): void;
+        refreshPage(router: import("vue-router").Router): Promise<void>;
+        sortTabs(oldIndex: number, newIndex: number): void;
+    }>;
+    getTransitionName: (route: RouteRecordRaw) => string | undefined;
+    getCaches: import("vue").ComputedRef<string[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/feature/back-top.d.ts

@@ -0,0 +1,5 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    getTarget: () => HTMLElement;
+    getShowBackToTop: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/feature/index.d.ts

@@ -0,0 +1,7 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    DtBackTop: import("vue").DefineComponent<{}, {
+        getTarget: () => HTMLElement;
+        getShowBackToTop: import("vue").ComputedRef<boolean>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/footer/index.d.ts

@@ -0,0 +1,31 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    getFooter: import("vue").ComputedRef<import("../../types/theme.type").FooterOptions>;
+    title: any;
+    subTitle: any;
+    height: any;
+    footerOptions: import("vue").ComputedRef<{
+        lineHeight: string;
+        height: string;
+        padding: string;
+        width: string;
+        color: string;
+    }>;
+    readonly LayoutFooter: import("vue").DefineComponent<{
+        prefixCls: StringConstructor;
+        hasSider: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        tagName: StringConstructor;
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        prefixCls: StringConstructor;
+        hasSider: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        tagName: StringConstructor;
+    }>>, {
+        hasSider: boolean;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/header/components/bread-crumb.d.ts

@@ -0,0 +1,6 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    getIsZH: import("vue").ComputedRef<boolean>;
+    routes: import("vue").Ref<any[]>;
+    currentRoute: import("vue").Ref<import("vue-router").RouteLocationNormalizedLoaded>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/header/components/fullscreen.d.ts

@@ -0,0 +1,5 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    toggle: () => Promise<void>;
+    isFullscreen: import("vue").Ref<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/es/theme/src/components/header/components/index.d.ts

@@ -0,0 +1,11 @@
+import { default as DtFullScreen } from "./fullscreen";
+import { default as DtLogo } from "./logo";
+import { default as DtTrigger } from "./trigger";
+import { default as DtBreadCrumb } from "./bread-crumb";
+import { default as DtMenuFilter } from "./menu-filter";
+import { default as DtLangPicker } from "./lang-picker";
+import { default as DtNotify } from "./notify";
+import { default as DtSize } from "./size";
+import { default as DtUserInfo } from "./user-info";
+import { default as DtSettingTheme } from "./setting-theme";
+export { DtFullScreen, DtLogo, DtTrigger, DtBreadCrumb, DtMenuFilter, DtLangPicker, DtNotify, DtSize, DtUserInfo, DtSettingTheme };