@deppon/deppon-template 2.5.3 → 2.5.4

package/es/pro-layout/ProLayout.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(135deg, var(--pro-layout-accent-soft, #eef2ff) 0%, var(--pro-layout-accent-muted, #e0e7ff) 100%) !important;
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 0 var(--pro-layout-accent, #6366f1) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;
@@ -1186,6 +1223,97 @@ body .el-overlay-dialog,
   color: var(--pro-layout-text);
   font-family: 'DM Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
 }
+.pro-layout--mode-defaults .pro-layout__body {
+  height: 100vh;
+  margin-top: 0 !important;
+}
+.pro-layout--mode-defaults .pro-layout__content-wrapper--with-inner-header {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  gap: 0;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main {
+  flex-shrink: 0;
+  width: 100% !important;
+  margin: 0 0 12px 0 !important;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--pro-layout-shell-radius) !important;
+  border: 1px solid var(--pro-layout-shell-border) !important;
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main.pro-layout__header--fixed {
+  position: sticky;
+  top: 0;
+  left: auto;
+  right: auto;
+  width: 100% !important;
+  z-index: 100;
+  /* 覆盖全站 .pro-layout__header--fixed 的 border-radius: 0 */
+  border-radius: var(--pro-layout-shell-radius) !important;
+  border: 1px solid var(--pro-layout-shell-border) !important;
+  border-left: 1px solid var(--pro-layout-shell-border) !important;
+  border-right: 1px solid var(--pro-layout-shell-border) !important;
+  border-top: 1px solid var(--pro-layout-shell-border) !important;
+  border-bottom: 1px solid var(--pro-layout-shell-border) !important;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__header-content {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__top-menu {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  margin: 0 4px;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__top-menu-glass,
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__top-menu-el {
+  max-width: 100%;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__header-right {
+  flex-shrink: 0;
+}
+.pro-layout--mode-defaults .pro-layout__header--in-main .pro-layout__header-search {
+  width: 140px;
+  max-width: 28vw;
+}
+.pro-layout--mode-defaults .pro-layout__main-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  background: rgba(255, 255, 255, 0.92) !important;
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.pro-layout--mode-defaults .pro-layout__tags-view {
+  flex-shrink: 0;
+  min-height: 40px;
+  display: flex !important;
+  visibility: visible;
+  z-index: 1;
+}
+.pro-layout--mode-columns .pro-layout__body {
+  gap: 8px;
+}
+.pro-layout--mode-transverse .pro-layout__top-menu {
+  flex: 1;
+}
 .pro-layout__sider {
   display: flex;
   position: relative;
@@ -1195,7 +1323,7 @@ body .el-overlay-dialog,
   overflow: hidden !important;
   border-radius: var(--pro-layout-shell-radius);
   border: 1px solid var(--pro-layout-shell-border);
-  background: rgba(255, 255, 255, 0.92) !important;
+  background: var(--pro-layout-sider-bg, rgba(255, 255, 255, 0.92)) !important;
   box-shadow: var(--pro-layout-shell-shadow);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -1306,6 +1434,77 @@ body .el-overlay-dialog,
 }
 .pro-layout__sider--collapsed {
   width: 64px !important;
+  overflow-x: hidden !important;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-scrollbar {
+  overflow-x: hidden !important;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-scrollbar .el-scrollbar__view {
+  overflow-x: hidden !important;
+  max-width: 100%;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-scrollbar .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+  height: 0 !important;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-group {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+.pro-layout__sider--collapsed .pro-layout__menu-search,
+.pro-layout__sider--collapsed .pro-layout__common-menus {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+.pro-layout__sider--collapsed .el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item,
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu__title {
+  margin: 2px 4px !important;
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item.is-active,
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(135deg, var(--pro-layout-accent-soft, #eef2ff) 0%, var(--pro-layout-accent-muted, #e0e7ff) 100%) !important;
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 0 var(--pro-layout-accent, #6366f1) !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item.is-active .pro-layout__menu-item-char,
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title .pro-layout__menu-item-char {
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item.is-active .el-icon,
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title .el-icon {
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item [class^='el-icon'],
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu__title [class^='el-icon'],
+.pro-layout__sider--collapsed .el-menu--collapse .el-icon {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.pro-layout__sider--collapsed .el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char,
+.pro-layout__sider--collapsed .el-menu--collapse .el-menu-tooltip__trigger .pro-layout__menu-item-char {
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+  margin: 0 !important;
 }
 .pro-layout__sider-collapse-btn {
   position: absolute !important;
@@ -1406,6 +1605,61 @@ body .el-overlay-dialog,
   border-bottom: 1px solid rgba(241, 245, 249, 0.95);
   background: linear-gradient(to right, #ffffff, rgba(248, 250, 252, 0.85));
 }
+.pro-layout__sider-logo {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 10px 10px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95);
+  background: linear-gradient(to right, #ffffff, rgba(248, 250, 252, 0.85));
+  min-height: 48px;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.pro-layout__sider-logo .pro-layout__sider-logo-img,
+.pro-layout__sider-logo .pro-layout__header-logo-img {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 72px;
+  width: auto;
+  height: 20px;
+  object-fit: contain;
+  object-position: left center;
+}
+.pro-layout__sider-logo .pro-layout__header-logo-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--pro-layout-text, #0f172a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pro-layout__sider-logo .pro-layout__header-logo-divider {
+  flex-shrink: 0;
+}
+.pro-layout__sider-logo--collapsed {
+  justify-content: center;
+  padding: 10px 6px;
+  min-height: 44px;
+}
+.pro-layout__sider-logo--collapsed .pro-layout__header-logo-divider,
+.pro-layout__sider-logo--collapsed .pro-layout__header-logo-text {
+  display: none;
+}
+.pro-layout__sider-logo--collapsed .pro-layout__sider-logo-img,
+.pro-layout__sider-logo--collapsed .pro-layout__header-logo-img {
+  flex: 0 0 auto;
+  max-width: 100%;
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  object-position: center center;
+}
 .pro-layout__menu-search {
   padding: 10px 12px;
   display: flex;
@@ -1585,8 +1839,39 @@ body .el-overlay-dialog,
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: none !important;
+  /* defaults 内顶栏：勿用全站顶栏的 calc(100% - 32px) + 外边距，否则会撑出容器 */
+}
+.pro-layout__header--in-main {
+  width: 100% !important;
+  margin: 0 !important;
+  box-sizing: border-box;
+  overflow: hidden;
+  /* 内顶栏固定时用 sticky，避免页签栏被 position:fixed 顶栏盖住 */
+}
+.pro-layout__header--in-main .pro-layout__header-content {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.pro-layout__header--in-main .pro-layout__top-menu {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.pro-layout__header--in-main .pro-layout__header-right {
+  flex-shrink: 0;
 }
-.pro-layout__header--fixed {
+.pro-layout__header--in-main.pro-layout__header--fixed {
+  position: sticky;
+  top: 0;
+  left: auto;
+  right: auto;
+  width: 100% !important;
+  z-index: 100;
+  border-radius: var(--pro-layout-shell-radius) !important;
+  border: 1px solid var(--pro-layout-shell-border) !important;
+}
+.pro-layout__header--fixed:not(.pro-layout__header--in-main) {
   position: fixed;
   top: 0;
   left: 0;
@@ -2090,6 +2375,13 @@ body .el-overlay-dialog,
   margin-left: 2px;
   transition: transform 0.3s;
 }
+.pro-layout__main-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
 .pro-layout__content-wrapper {
   display: flex !important;
   flex-direction: column !important;