@deppon/deppon-template 2.4.4 → 2.4.7

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

@@ -1166,9 +1166,16 @@ 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 插槽内容挤压操作按钮 */
+  --pro-layout-header-bg: var(--el-bg-color, #ffffff);
+  --pro-layout-tags-bar-bg: var(--pro-layout-header-bg);
+  --pro-layout-main-bg: var(--el-bg-color-page, #f2f3f5);
+  /* 顶栏横向菜单：圆体（可通过 --pro-layout-top-menu-font-family 覆盖） */
+  --pro-layout-top-menu-font-family: 'Yuanti SC', 'Yuanti TC', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
+  --pro-layout-top-menu-active-bar-width: 28px;
+  --pro-layout-top-menu-active-bar-height: 3px;
+  /* 选中态：下划线距菜单项底边的距离（绝对定位，不占文字布局） */
+  --pro-layout-top-menu-active-bar-offset: 4px;
+  background: #fff !important;
 }
 .pro-layout__sider {
   display: flex;
@@ -1181,9 +1188,6 @@ body .el-overlay-dialog,
   box-shadow: 2px 0 8px var(--pro-shadow-color-sider, rgba(0, 0, 0, 0.12));
   transition: width 0.3s ease, transform 0.3s ease;
   flex-shrink: 0;
-  /* 去除菜单组右侧的竖线 */
-  /* 直接针对 Element Plus 的 .el-menu 类设置样式 */
-  /* 确保 .pro-layout__menu 类也能正确匹配 */
 }
 .pro-layout__sider .el-scrollbar__view {
   overflow: visible;
@@ -1203,8 +1207,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__sider .pro-layout__menu-group {
   border-right: none !important;
-  /* 确保菜单项也没有右侧边框 */
-  /* 直接针对菜单组内的 Element Plus 菜单设置样式 */
 }
 .pro-layout__sider .pro-layout__menu-group::after,
 .pro-layout__sider .pro-layout__menu-group::before {
@@ -1403,8 +1405,6 @@ body .el-overlay-dialog,
   border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
   margin-bottom: 8px;
   margin-top: -1px;
-  /* 确保边框重叠时不会出现双边框 */
-  /* 收缩时居中显示首字符 */
 }
 .pro-layout__menu-group-header-left {
   display: flex;
@@ -1466,7 +1466,6 @@ body .el-overlay-dialog,
   background-color: transparent;
   font-weight: 400;
   font-family: var(--pro-font-family, 'PingFangSC-Regular') !important;
-  /* 常用菜单项样式 */
 }
 .pro-layout__menu--common .el-menu-item .el-menu-item__title {
   display: flex;
@@ -1509,14 +1508,11 @@ body .el-overlay-dialog,
 }
 .pro-layout__header {
   padding: 0 !important;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)) !important;
-  backdrop-filter: blur(10px);
+  background: var(--pro-layout-header-bg) !important;
   position: relative;
   z-index: 100;
   width: 100vw;
   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 {
   position: fixed;
@@ -1524,8 +1520,6 @@ body .el-overlay-dialog,
   left: 0;
   right: 0;
   z-index: 1000;
-  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;
@@ -1657,31 +1651,285 @@ body .el-overlay-dialog,
 .pro-layout__top-menu {
   flex: 1;
   min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 6px;
   padding: 0 6px;
+  /* 覆盖 Element Plus：.el-menu-item [class^=el-icon] 的 margin-right，间距改由 label 的 gap 控制 */
+  /* 首项（工作台）：浅灰底、紧凑内边距，字与图标近黑、同一水平线 */
+  /* 其余项选中：加粗、近黑字；下划线挂在菜单项上，绝对定位不占布局、不挡选中背景 */
+}
+.pro-layout__top-menu-glass {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.pro-layout__top-menu-divider-line {
+  display: block;
+  width: 1px;
+  height: 18px;
+  margin: 0 auto;
+  border-radius: 1px;
+  background: rgba(0, 0, 0, 0.08);
 }
 .pro-layout__top-menu .pro-layout__top-menu-el {
+  --el-menu-bg-color: transparent !important;
+  --el-menu-horizontal-height: 40px;
   background: transparent !important;
   border-bottom: none !important;
+  height: auto !important;
+  min-height: 0 !important;
+  flex: 1;
+  min-width: 0;
+  font-family: var(--pro-layout-top-menu-font-family) !important;
 }
-.pro-layout__top-menu .el-menu-item {
-  height: 38px !important;
-  margin: 8px 6px !important;
+.pro-layout__top-menu .pro-layout__top-menu-el.el-menu--horizontal {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: center !important;
+}
+.pro-layout__top-menu .el-menu-item,
+.pro-layout__top-menu .el-sub-menu__title {
+  min-height: 30px !important;
+  height: 30px !important;
+  line-height: 1.2 !important;
+  margin: 0 4px !important;
+  padding: 0 14px !important;
   border-radius: 10px !important;
   border-bottom: none !important;
-  color: #4a5b76 !important;
-  transition: all 0.2s ease !important;
+  font-family: inherit !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.03em !important;
+  color: rgba(0, 0, 0, 0.52) !important;
+  background: transparent !important;
+  user-select: none;
+  transition: background 0.2s ease, color 0.2s ease !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !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.pro-layout__top-menu-divider {
+  height: 40px !important;
+  min-height: 40px !important;
+  line-height: 1 !important;
+  width: 14px !important;
+  min-width: 14px !important;
+  max-width: 14px !important;
+  padding: 0 !important;
+  margin: 0 6px !important;
+  cursor: default !important;
+  opacity: 1 !important;
+  pointer-events: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !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.pro-layout__top-menu-divider:hover,
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-divider:focus {
+  background: transparent !important;
 }
-.pro-layout__top-menu .el-menu-item.is-active .pro-layout__top-menu-item-label {
-  color: #1651d7 !important;
-  font-weight: 700;
+.pro-layout__top-menu .pro-layout__top-menu-item-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding-bottom: 0;
+  line-height: 1.2;
+  vertical-align: middle;
+}
+.pro-layout__top-menu .pro-layout__top-menu-item-text {
+  display: inline-block;
+  line-height: 1.2;
+}
+.pro-layout__top-menu .pro-layout__top-menu-item-icon {
+  font-size: 17px;
+  color: rgba(0, 0, 0, 0.45) !important;
+}
+.pro-layout__top-menu .pro-layout__top-menu-el .el-menu-item [class^='el-icon'],
+.pro-layout__top-menu .pro-layout__top-menu-el .el-menu-item .el-icon,
+.pro-layout__top-menu .pro-layout__top-menu-el .el-sub-menu__title [class^='el-icon'],
+.pro-layout__top-menu .pro-layout__top-menu-el .el-sub-menu__title .el-icon {
+  margin-right: 0 !important;
+}
+.pro-layout__top-menu .pro-layout__top-menu-item-badge {
+  margin-left: 2px;
+  vertical-align: middle;
+  line-height: 1;
+}
+.pro-layout__top-menu .pro-layout__top-menu-item-badge .el-badge__content {
+  height: 18px;
+  line-height: 18px;
+  padding: 0 6px;
+  border-radius: 6px !important;
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  border: none !important;
+  background: linear-gradient(180deg, #ffb347 0%, #ff8c42 100%) !important;
+  color: #fff !important;
+}
+.pro-layout__top-menu .el-menu-item:not(.is-disabled:not(.pro-layout__top-menu-divider):focus-visible),
+.pro-layout__top-menu .el-sub-menu:not(.is-disabled .el-sub-menu__title:focus-visible) {
+  outline: 2px solid color-mix(in srgb, var(--el-color-primary, #409eff) 38%, transparent);
+  outline-offset: 2px;
+  border-radius: 10px;
+}
+.pro-layout__top-menu .el-menu-item:hover:not(.is-disabled:not(.is-active):not(.pro-layout__top-menu-divider):not(
+                        .pro-layout__top-menu-item--lead
+                    )),
+.pro-layout__top-menu .el-sub-menu:not(.is-disabled:not(.is-active):not(.pro-layout__top-menu-item--lead):hover > .el-sub-menu__title) {
+  color: rgba(0, 0, 0, 0.72) !important;
+  background: transparent !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.pro-layout__top-menu-divider) {
+  padding: 0 8px !important;
+  margin: 0 2px !important;
+  border-radius: 8px !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: rgba(0, 0, 0, 0.92) !important;
+  font-weight: 500 !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.pro-layout__top-menu-divider
+                    .pro-layout__top-menu-item-label
+            ) {
+  gap: 5px !important;
+  align-items: center !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.is-active:hover:not(.pro-layout__top-menu-divider)) {
+  background: rgba(0, 0, 0, 0.078) !important;
+  color: #000 !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active {
+  background: rgba(0, 0, 0, 0.085) !important;
+  color: #000 !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon {
+  font-size: 16px !important;
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon svg {
+  fill: currentColor !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active .pro-layout__top-menu-item-icon {
+  color: #000 !important;
+}
+.pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-text {
+  color: inherit !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead > .el-sub-menu__title {
+  padding: 0 8px !important;
+  margin: 0 2px !important;
+  border-radius: 8px !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: rgba(0, 0, 0, 0.92) !important;
+  font-weight: 500 !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead:not(.is-active:hover > .el-sub-menu__title) {
+  background: rgba(0, 0, 0, 0.078) !important;
+  color: #000 !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead.is-active > .el-sub-menu__title {
+  background: rgba(0, 0, 0, 0.085) !important;
+  color: #000 !important;
+  font-weight: 600 !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-label {
+  gap: 5px !important;
+  align-items: center !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon {
+  font-size: 16px !important;
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon svg {
+  fill: currentColor !important;
+}
+.pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead.is-active .pro-layout__top-menu-item-icon {
+  color: #000 !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead)) {
+  position: relative !important;
+  color: rgba(0, 0, 0, 0.88) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  font-weight: 700 !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead)::after) {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -2px;
+  width: var(--pro-layout-top-menu-active-bar-width);
+  height: var(--pro-layout-top-menu-active-bar-height);
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: var(--el-color-primary, #409eff);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead):hover) {
+  background: transparent !important;
+}
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title) {
+  position: relative !important;
+  color: rgba(0, 0, 0, 0.88) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  font-weight: 700 !important;
+}
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title::after) {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -2px;
+  width: var(--pro-layout-top-menu-active-bar-width);
+  height: var(--pro-layout-top-menu-active-bar-height);
+  transform: translateX(-50%);
+  border-radius: 999px;
+  background: var(--el-color-primary, #409eff);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title:hover) {
+  background: transparent !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-label),
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-label) {
+  color: rgba(0, 0, 0, 0.88) !important;
+  font-weight: 700 !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-text),
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-text) {
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-icon),
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon) {
+  color: rgba(0, 0, 0, 0.62) !important;
+}
+.pro-layout__top-menu .el-sub-menu__icon-arrow {
+  margin-left: 2px !important;
+  transition: color 0.2s ease !important;
+  color: rgba(0, 0, 0, 0.35) !important;
+}
+.pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .el-sub-menu__icon-arrow) {
+  color: rgba(0, 0, 0, 0.5) !important;
 }
 .pro-layout__breadcrumb {
   display: flex;
@@ -1741,25 +1989,30 @@ body .el-overlay-dialog,
 .pro-layout__tags-view {
   flex-shrink: 0;
   height: auto !important;
-  min-height: 48px !important;
-  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  background: var(--pro-layout-header-bg) !important;
   border-bottom: none !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
+  --el-menu-bg-color: var(--pro-layout-header-bg) !important;
   display: flex !important;
-  align-items: center;
+  flex: 1 1 auto;
+  align-self: stretch;
+  align-items: flex-end;
   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;
+  overflow-y: visible !important;
+  padding: 0 !important;
+  margin: 0 !important;
   border: none !important;
   outline: none;
-  background: transparent !important;
-  box-shadow: none;
+  background: var(--pro-layout-header-bg) !important;
+  min-height: 100%;
+  width: 100%;
   height: auto !important;
 }
 .pro-layout__tags-menu.el-menu.el-menu--horizontal {
@@ -1769,45 +2022,94 @@ body .el-overlay-dialog,
 }
 .pro-layout__tags-menu .el-menu-item {
   flex: 0 0 auto;
-  height: 34px !important;
-  line-height: 34px !important;
-  margin-right: 8px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  margin-right: 4px !important;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 12px !important;
-  border-radius: 8px !important;
+  border-radius: 10px 10px 0 0 !important;
   border: none !important;
   border-bottom: none !important;
   background: transparent !important;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
-.pro-layout__tags-menu .el-menu-item:not(:last-child):not(.is-active)::after {
-  display: none;
-}
-.pro-layout__tags-menu .el-menu-item:hover {
-  background: rgba(78, 138, 255, 0.1) !important;
+.pro-layout__tags-menu .el-menu-item:not(.is-active):hover {
+  background: transparent !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
+  z-index: 2;
   border: none !important;
-  background: linear-gradient(135deg, #ffffff, #f3f8ff) !important;
-  box-shadow: 0 4px 12px rgba(59, 98, 186, 0.16);
+  background: var(--pro-layout-main-bg) !important;
+  box-shadow: none !important;
   border-bottom: none !important;
   overflow: visible;
 }
+.pro-layout__tags-menu .el-menu-item.is-active::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+  background: var(--pro-layout-tags-bar-bg);
+  border-bottom-right-radius: 8px;
+  box-shadow: 2px 2px 0 0 var(--pro-layout-main-bg);
+}
+.pro-layout__tags-menu .el-menu-item.is-active::after {
+  content: '';
+  position: absolute;
+  right: -8px;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+  background: var(--pro-layout-tags-bar-bg);
+  border-bottom-left-radius: 8px;
+  box-shadow: -2px 2px 0 0 var(--pro-layout-main-bg);
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix {
+  padding: 0 10px !important;
+  min-width: 40px;
+  justify-content: center;
+  border-radius: 10px 10px 0 0 !important;
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before {
+  display: none;
+}
 .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: #2259d2 !important;
+.pro-layout__tags-menu .pro-layout__tag-label--affix-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none !important;
+  overflow: visible;
+}
+.pro-layout__tags-menu .pro-layout__tag-label--affix-icon .el-icon {
+  font-size: 16px;
+  color: #5c6c84;
+}
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active .pro-layout__tag-label--affix-icon .el-icon {
+  color: var(--el-color-primary, #409eff);
+}
+.pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon) {
+  color: var(--el-color-primary, #409eff) !important;
   font-weight: 600;
 }
+.pro-layout__tags-menu .el-menu-item:not(.is-active:hover .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon)) {
+  color: var(--el-color-primary, #409eff) !important;
+}
+.pro-layout__tags-menu .el-menu-item:not(.is-active:hover .pro-layout__tag-label--affix-icon .el-icon) {
+  color: var(--el-color-primary, #409eff) !important;
+}
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
   color: #8a98b2;
   font-size: 12px;
@@ -1816,7 +2118,7 @@ body .el-overlay-dialog,
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  margin-left: 2px;
+  margin-left: 4px;
 }
 .pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-icon {
   margin-left: 0 !important;
@@ -1826,28 +2128,6 @@ body .el-overlay-dialog,
 .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;
@@ -1879,7 +2159,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover {
   color: var(--el-text-color-regular, #606266) !important;
-  background-color: var(--el-fill-color-dark, #e4e7ed) !important;
 }
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover .el-icon,
 .pro-layout__tag-item.is-active .pro-layout__tag-icon:hover svg {
@@ -1916,7 +2195,6 @@ body .el-overlay-dialog,
   justify-content: center;
   width: 16px;
   height: 16px;
-  /* 穿透 el-icon 组件样式 */
 }
 .pro-layout__tag-icon .el-icon,
 .pro-layout__tag-icon svg {
@@ -1925,7 +2203,6 @@ body .el-overlay-dialog,
 }
 .pro-layout__tag-icon:hover {
   color: var(--el-text-color-regular, #606266) !important;
-  background-color: var(--el-fill-color-dark, #e4e7ed) !important;
 }
 .pro-layout__tag-icon:hover .el-icon,
 .pro-layout__tag-icon:hover svg {
@@ -1936,7 +2213,7 @@ body .el-overlay-dialog,
   width: 100%;
   padding: 0 !important;
   margin: 0 !important;
-  background: radial-gradient(circle at top left, #eef4ff 0%, #f7f9ff 45%, #fbfcff 100%) !important;
+  background: var(--pro-layout-main-bg) !important;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;