@deppon/deppon-template 2.4.2 → 2.4.4

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

@@ -1166,9 +1166,9 @@ body .el-overlay-dialog,
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: radial-gradient(circle at 8% 10%, rgba(64, 158, 255, 0.08), transparent 44%), radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.08), transparent 38%), linear-gradient(180deg, #f6f9ff 0%, #f4f7fd 100%);
   /* 覆盖 Element Plus 按钮样式，确保优先级 */
   /* 防止 header-right 插槽内容挤压操作按钮 */
-  /* 限制 header-right 插槽内容，防止挤压按钮 */
 }
 .pro-layout__sider {
   display: flex;
@@ -1509,11 +1509,13 @@ body .el-overlay-dialog,
 }
 .pro-layout__header {
   padding: 0 !important;
-  background-color: var(--el-bg-color, #ffffff) !important;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)) !important;
+  backdrop-filter: blur(10px);
   position: relative;
   z-index: 100;
   width: 100vw;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f5f5f5) !important;
+  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
+  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
   /* 覆盖 Element Plus 默认的按钮间距 */
 }
 .pro-layout__header--fixed {
@@ -1522,12 +1524,14 @@ body .el-overlay-dialog,
   left: 0;
   right: 0;
   z-index: 1000;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f5f5f5) !important;
+  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
+  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
 }
 .pro-layout__header-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 8px;
   height: 100%;
   width: 100%;
 }
@@ -1567,6 +1571,7 @@ body .el-overlay-dialog,
   gap: 12px;
   padding: 0 16px;
   flex-shrink: 0;
+  margin-left: auto;
 }
 .pro-layout__header-search {
   width: 180px;
@@ -1634,26 +1639,49 @@ body .el-overlay-dialog,
   font-size: 14px;
   color: var(--el-text-color-secondary, #909399) !important;
 }
-.pro-layout .pro-layout__header-right {
-  /* 确保操作按钮不会被压缩 */
-}
 .pro-layout .pro-layout__header-right .pro-layout__header-action-btn {
   flex-shrink: 0 !important;
   min-width: 32px !important;
   width: 32px !important;
   height: 32px !important;
 }
-.pro-layout .pro-layout__header .pro-layout__header-right {
-  /* 确保 header-right 插槽内容不会占用过多空间 */
-}
-.pro-layout .pro-layout__header .pro-layout__header-right > div:first-child {
+.pro-layout .pro-layout__header-right .pro-layout__header-search {
   flex-shrink: 1;
   min-width: 0;
-  max-width: 150px;
-  /* 限制最大宽度 */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  max-width: 220px;
+}
+.pro-layout .pro-layout__header-right .pro-layout__header-user-name {
+  flex-shrink: 0;
+  max-width: none;
+}
+.pro-layout__top-menu {
+  flex: 1;
+  min-width: 0;
+  padding: 0 6px;
+}
+.pro-layout__top-menu .pro-layout__top-menu-el {
+  background: transparent !important;
+  border-bottom: none !important;
+}
+.pro-layout__top-menu .el-menu-item {
+  height: 38px !important;
+  margin: 8px 6px !important;
+  border-radius: 10px !important;
+  border-bottom: none !important;
+  color: #4a5b76 !important;
+  transition: all 0.2s ease !important;
+}
+.pro-layout__top-menu .el-menu-item:hover {
+  color: #1f6bff !important;
+  background: rgba(64, 158, 255, 0.09) !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active {
+  background: linear-gradient(135deg, rgba(57, 124, 255, 0.18), rgba(108, 74, 255, 0.15)) !important;
+  box-shadow: 0 8px 20px rgba(56, 108, 255, 0.16);
+}
+.pro-layout__top-menu .el-menu-item.is-active .pro-layout__top-menu-item-label {
+  color: #1651d7 !important;
+  font-weight: 700;
 }
 .pro-layout__breadcrumb {
   display: flex;
@@ -1713,64 +1741,121 @@ body .el-overlay-dialog,
 .pro-layout__tags-view {
   flex-shrink: 0;
   height: auto !important;
-  min-height: 40px !important;
-  background-color: var(--el-bg-color, #ffffff) !important;
-  border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
+  min-height: 48px !important;
+  background: transparent !important;
+  border-bottom: none !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
-  height: 100%;
-  border-bottom: none;
-  background-color: transparent;
-  /* 修复 tags-menu 高度问题，不影响宽度 */
+  display: flex !important;
+  align-items: center;
+  flex-wrap: nowrap !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  min-height: 48px;
+  padding: 6px 12px !important;
+  margin: 8px 14px 6px;
+  border-radius: 12px;
+  border: none !important;
+  outline: none;
+  background: transparent !important;
+  box-shadow: none;
+  height: auto !important;
 }
 .pro-layout__tags-menu.el-menu.el-menu--horizontal {
-  height: 40px !important;
-  line-height: 40px !important;
+  height: auto !important;
+  line-height: normal !important;
+  border-bottom: none !important;
 }
 .pro-layout__tags-menu .el-menu-item {
-  height: 100%;
-  line-height: normal !important;
-  padding: 6px 12px;
-  margin: 0;
-  border-bottom: none;
-  background-color: transparent;
-  border-radius: 4px;
+  flex: 0 0 auto;
+  height: 34px !important;
+  line-height: 34px !important;
+  margin-right: 8px !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 12px !important;
+  border-radius: 8px !important;
+  border: none !important;
+  border-bottom: none !important;
+  background: transparent !important;
+  transition: all 0.2s ease;
   position: relative;
-  flex-shrink: 0;
-  transition: all 0.3s;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .pro-layout__tags-menu .el-menu-item:not(:last-child):not(.is-active)::after {
-  content: '';
-  position: absolute;
-  right: -4px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 16px;
-  background-color: var(--el-border-color-lighter, #f0f0f0) !important;
+  display: none;
 }
 .pro-layout__tags-menu .el-menu-item:hover {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
+  background: rgba(78, 138, 255, 0.1) !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
-  color: var(--el-color-primary, #409eff) !important;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
+  border: none !important;
+  background: linear-gradient(135deg, #ffffff, #f3f8ff) !important;
+  box-shadow: 0 4px 12px rgba(59, 98, 186, 0.16);
   border-bottom: none !important;
-  position: relative;
   overflow: visible;
 }
-.pro-layout__tags-menu .el-menu-item.is-active .el-menu-item__title,
+.pro-layout__tags-menu .pro-layout__tag-label {
+  color: #46556f;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none !important;
+}
 .pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label {
-  color: var(--el-color-primary, #409eff) !important;
+  color: #2259d2 !important;
+  font-weight: 600;
 }
-.pro-layout__tags-menu .el-menu-item.is-active:not(:last-child)::after {
-  display: none;
+.pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
+  color: #8a98b2;
+  font-size: 12px;
+}
+.pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 2px;
+}
+.pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-icon {
+  margin-left: 0 !important;
+  padding: 0;
+}
+.pro-layout__tags-menu .pro-layout__tag-item:hover .pro-layout__tag-actions .pro-layout__tag-icon,
+.pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon:hover {
+  color: #2b65f5 !important;
+}
+.pro-layout__tags-menu .fixed-home-tag-item {
+  cursor: pointer;
+  user-select: none;
+  padding: 0 12px !important;
+  background: linear-gradient(135deg, #eff5ff, #e8f1ff) !important;
+  box-shadow: none !important;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #2e5ccf;
+  font-weight: 600;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-icon {
+  font-style: normal;
+  font-size: 14px;
+  line-height: 1;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .pro-layout__tag-actions {
+  display: none !important;
+}
+.pro-layout__tags-menu > .el-sub-menu {
+  margin-left: auto !important;
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  border-radius: 10px;
+  background: linear-gradient(90deg, rgba(249, 252, 255, 0.92), rgba(245, 249, 255, 0.96));
+  box-shadow: -10px 0 14px -12px rgba(27, 56, 106, 0.32);
 }
 .pro-layout__tag-item {
   display: flex;
@@ -1851,7 +1936,7 @@ body .el-overlay-dialog,
   width: 100%;
   padding: 0 !important;
   margin: 0 !important;
-  background-color: var(--el-bg-color-page, #f8f8f8) !important;
+  background: radial-gradient(circle at top left, #eef4ff 0%, #f7f9ff 45%, #fbfcff 100%) !important;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.2",
+    "version": "2.4.4",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.4.2",
-        "@deppon/deppon-request": "2.4.2",
-        "@deppon/deppon-router": "2.4.2",
-        "@deppon/deppon-ui": "2.4.2",
-        "@deppon/deppon-utils": "2.4.2",
+        "@deppon/deppon-assets": "2.4.4",
+        "@deppon/deppon-request": "2.4.4",
+        "@deppon/deppon-router": "2.4.4",
+        "@deppon/deppon-ui": "2.4.4",
+        "@deppon/deppon-utils": "2.4.4",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"