@deppon/deppon-template 2.4.24 → 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;
@@ -1166,16 +1203,116 @@ body .el-overlay-dialog,
   width: 100%;
   height: 100%;
   overflow: hidden;
-  --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);
+  /* 对齐 app-shell-navigation 原型：slate + indigo 壳层 */
+  --pro-layout-shell-bg: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 45%, rgba(238, 242, 255, 0.55) 100%);
+  --pro-layout-shell-radius: 16px;
+  --pro-layout-shell-border: rgba(255, 255, 255, 0.65);
+  --pro-layout-shell-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 40px -8px rgba(15, 23, 42, 0.12);
+  /* accent 系列由 :root（App.vue）注入，组件内仅用 var(--pro-layout-accent, 回退) 消费 */
+  --pro-layout-header-bg: rgba(255, 255, 255, 0.88);
+  --pro-layout-tags-bar-bg: rgba(248, 250, 252, 0.92);
+  --pro-layout-main-bg: #f8fafc;
+  --pro-layout-text: #0f172a;
+  --pro-layout-text-muted: #64748b;
   /* 顶栏横向菜单：圆体（可通过 --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-font-family: 'DM Sans', '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;
+  background: var(--pro-layout-shell-bg) !important;
+  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;
@@ -1183,15 +1320,16 @@ body .el-overlay-dialog,
   z-index: 1;
   flex-direction: column;
   height: 100%;
-  overflow-x: hidden !important;
-  background: var(--el-bg-color, #ffffff) !important;
-  box-shadow: 2px 0 8px var(--pro-shadow-color-sider, rgba(0, 0, 0, 0.12));
+  overflow: hidden !important;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  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);
   transition: width 0.3s ease, transform 0.3s ease;
   flex-shrink: 0;
 }
-.pro-layout__sider .el-scrollbar__view {
-  overflow: visible;
-}
 .pro-layout__sider .el-scrollbar__wrap {
   overflow-x: hidden;
   overflow-y: auto;
@@ -1264,52 +1402,157 @@ body .el-overlay-dialog,
 .pro-layout__sider .pro-layout__menu-group .el-menu.el-menu--vertical .el-sub-menu__title::after {
   display: none !important;
 }
+.pro-layout__sider .el-menu-item,
+.pro-layout__sider .el-sub-menu__title {
+  height: 44px !important;
+  line-height: 44px !important;
+  margin: 2px calc(8px + var(--pro-el-scrollbar-width, 9px)) 2px 8px !important;
+  border-radius: 12px !important;
+  color: var(--pro-layout-text-muted) !important;
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+.pro-layout__sider .el-menu-item.is-active {
+  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);
+}
+.pro-layout__sider .el-menu-item:not(.is-active):hover,
+.pro-layout__sider .el-sub-menu__title:hover {
+  background-color: #f8fafc !important;
+  color: var(--pro-layout-text) !important;
+}
+.pro-layout__sider .el-menu--inline .el-menu-item {
+  min-height: 40px !important;
+  height: 40px !important;
+  line-height: 40px !important;
+  margin: 2px 8px 2px 12px !important;
+  border-radius: 8px !important;
+}
+.pro-layout__sider .el-sub-menu.is-active > .el-sub-menu__title {
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+}
 .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;
   top: 50% !important;
-  right: -12px !important;
+  right: -14px !important;
   transform: translateY(-50%) !important;
   z-index: 10 !important;
-  background-color: var(--el-color-primary, #409eff) !important;
-  border: none !important;
-  box-shadow: 0 2px 8px var(--pro-shadow-color-btn, rgba(0, 0, 0, 0.15)) !important;
-  transition: all 0.3s ease !important;
-  width: 11px !important;
-  height: 38px !important;
+  background-color: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.92) !important;
+  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06) !important;
+  transition: all 0.2s ease !important;
+  width: 36px !important;
+  height: 36px !important;
   padding: 0 !important;
-  border-radius: 0 12px 12px 0 !important;
-  color: var(--el-bg-color, #ffffff) !important;
-  min-width: 11px !important;
-  min-height: 38px !important;
+  border-radius: 50% !important;
+  color: #64748b !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
 }
 .pro-layout__sider-collapse-btn:hover {
-  background-color: var(--el-color-primary-dark-2, #337ecc) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout .el-button.pro-layout__sider-collapse-btn,
 .pro-layout .pro-layout__sider-collapse-btn.el-button {
   position: absolute !important;
   top: 50% !important;
-  right: -12px !important;
+  right: -14px !important;
   transform: translateY(-50%) !important;
   z-index: 10 !important;
-  background-color: var(--el-color-primary, #409eff) !important;
-  border: none !important;
-  box-shadow: 0 2px 8px var(--pro-shadow-color-btn, rgba(0, 0, 0, 0.15)) !important;
-  transition: all 0.3s ease !important;
-  width: 11px !important;
-  height: 38px !important;
+  background-color: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.92) !important;
+  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06) !important;
+  transition: all 0.2s ease !important;
+  width: 36px !important;
+  height: 36px !important;
   padding: 0 !important;
-  border-radius: 0 12px 12px 0 !important;
-  color: var(--el-bg-color, #ffffff) !important;
-  min-width: 11px !important;
-  min-height: 38px !important;
+  border-radius: 50% !important;
+  color: #64748b !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
 }
 .pro-layout .el-button.pro-layout__sider-collapse-btn:hover,
 .pro-layout .pro-layout__sider-collapse-btn.el-button:hover {
-  background-color: var(--el-color-primary-dark-2, #337ecc) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__logo {
   display: flex;
@@ -1325,7 +1568,7 @@ body .el-overlay-dialog,
   transition: all 0.3s ease;
 }
 .pro-layout__logo:hover .pro-layout__logo-text {
-  color: var(--el-color-primary-light-2, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__logo-full {
   display: flex;
@@ -1355,10 +1598,70 @@ body .el-overlay-dialog,
   font-family: var(--pro-font-family-logo, 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', SimSun, sans-serif);
 }
 .pro-layout__sider-header {
-  padding: 0 16px;
+  padding: 0 12px;
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  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 16px;
+  padding: 10px 12px;
   display: flex;
   align-items: center;
 }
@@ -1366,8 +1669,9 @@ body .el-overlay-dialog,
   width: 100%;
 }
 .pro-layout__menu-search-input .el-input__wrapper {
-  border-radius: 20px;
-  background-color: var(--el-fill-color, #f0f2f5) !important;
+  border-radius: 12px;
+  border: 1px solid rgba(226, 232, 240, 0.85);
+  background-color: rgba(248, 250, 252, 0.9) !important;
   box-shadow: none;
 }
 .pro-layout__menu-search-input .el-input__inner {
@@ -1394,17 +1698,18 @@ body .el-overlay-dialog,
   margin-bottom: 0;
 }
 .pro-layout__menu-group-header {
-  padding: 12px 16px 8px;
+  padding: 10px calc(12px + var(--pro-el-scrollbar-width, 9px)) 6px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
-  z-index: 1;
-  background-color: var(--el-bg-color, #ffffff) !important;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
-  margin-bottom: 8px;
-  margin-top: -1px;
+  z-index: 3;
+  background-color: #ffffff !important;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
+  margin-bottom: 4px;
+  margin-top: 0;
+  box-shadow: 0 1px 0 #ffffff;
 }
 .pro-layout__menu-group-header-left {
   display: flex;
@@ -1428,7 +1733,7 @@ body .el-overlay-dialog,
   flex-shrink: 0;
 }
 .pro-layout__menu-group-toggle:hover {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__menu-group-actions {
   display: flex;
@@ -1436,18 +1741,20 @@ body .el-overlay-dialog,
   gap: 8px;
 }
 .pro-layout__common-menus {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
+  padding: 12px 12px;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
   display: flex;
   align-items: center;
 }
 .pro-layout__common-menus-title {
-  font-size: 14px;
-  color: var(--el-text-color-secondary, #909399) !important;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--pro-layout-text-muted) !important;
   margin-bottom: 8px;
 }
 .pro-layout__common-menus-count {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
   margin-left: 4px;
 }
 .pro-layout__common-menus-btn {
@@ -1460,6 +1767,13 @@ body .el-overlay-dialog,
 .pro-layout__menu-scrollbar {
   flex: 1;
   overflow: hidden;
+  /* 不可设 overflow:hidden，否则分组头 position:sticky 失效 */
+}
+.pro-layout__menu-scrollbar .el-scrollbar__view {
+  overflow: visible;
+}
+.pro-layout__menu-scrollbar .el-scrollbar__bar.is-vertical {
+  z-index: 5;
 }
 .pro-layout__menu {
   border-right: none;
@@ -1505,21 +1819,71 @@ body .el-overlay-dialog,
   width: 100%;
   overflow: hidden;
   position: relative;
+  padding: 16px;
+  padding-top: 12px;
+  gap: 16px;
+  box-sizing: border-box;
+  background: transparent;
+  min-height: 0;
 }
 .pro-layout__header {
   padding: 0 !important;
   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;
+  width: calc(68%) !important;
+  margin: 16px 16px 0;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: none !important;
+  /* defaults 内顶栏：勿用全站顶栏的 calc(100% - 32px) + 外边距，否则会撑出容器 */
 }
-.pro-layout__header--fixed {
+.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--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;
   right: 0;
   z-index: 1000;
+  width: 100vw !important;
+  margin: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
 }
 .pro-layout__header-content {
   display: flex;
@@ -1570,36 +1934,61 @@ body .el-overlay-dialog,
 .pro-layout__header-search {
   width: 180px;
   flex-shrink: 0;
+  height: 28px;
+  line-height: 28px;
+}
+.pro-layout__header-search .el-input {
+  height: 28px;
+  --el-input-height: 28px;
 }
 .pro-layout__header-search .el-input__wrapper {
-  padding: 4px 8px;
-  height: 22px;
+  padding: 0 10px;
+  min-height: 28px !important;
+  height: 28px !important;
   border-radius: 8px;
-  border-width: 0.5px;
-  border-color: var(--el-border-color-extra-light, #f0f2f5) !important;
+  border: 1px solid rgba(226, 232, 240, 0.85) !important;
+  background: rgba(248, 250, 252, 0.85) !important;
+  box-shadow: none;
+  box-sizing: border-box;
 }
 .pro-layout__header-search .el-input__inner {
-  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 12px;
   padding: 0;
 }
 .pro-layout__header-search .el-input__inner::placeholder {
+  font-size: 12px;
   color: var(--el-text-color-placeholder, #c0c4cc) !important;
 }
+.pro-layout__header-search .el-input__suffix {
+  height: 26px;
+  display: flex;
+  align-items: center;
+}
 .pro-layout__header-search-icon {
+  font-size: 14px;
   color: var(--el-text-color-placeholder, #c0c4cc) !important;
 }
 .pro-layout__header-action-btn {
-  color: var(--el-text-color-primary, #000000) !important;
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 12px !important;
+  border: 1px solid rgba(226, 232, 240, 0.85) !important;
+  background: #ffffff !important;
+  color: var(--pro-layout-text-muted) !important;
   font-size: 18px;
 }
 .pro-layout__header-action-btn .el-icon {
-  color: var(--el-text-color-primary, #000000) !important;
+  color: var(--pro-layout-text-muted) !important;
 }
 .pro-layout__header-action-btn:hover {
-  color: var(--el-text-color-primary, #000000) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__header-action-btn:hover .el-icon {
-  color: var(--el-text-color-primary, #000000) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__header-action-btn + .pro-layout__header-action-btn {
   margin-left: 0 !important;
@@ -1614,12 +2003,14 @@ body .el-overlay-dialog,
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
+  padding: 6px 10px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 .pro-layout__header-user-info:hover {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
 }
 .pro-layout__header-user-avatar {
   font-size: 20px;
@@ -1642,7 +2033,12 @@ body .el-overlay-dialog,
 .pro-layout .pro-layout__header-right .pro-layout__header-search {
   flex-shrink: 1;
   min-width: 0;
-  max-width: 220px;
+  max-width: 200px;
+  height: 28px;
+}
+.pro-layout .pro-layout__header-right .pro-layout__header-search .el-input__wrapper {
+  min-height: 28px !important;
+  height: 28px !important;
 }
 .pro-layout .pro-layout__header-right .pro-layout__header-user-name {
   flex-shrink: 0;
@@ -1811,8 +2207,8 @@ body .el-overlay-dialog,
   color: rgba(0, 0, 0, 0.92) !important;
 }
 .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active {
-  background: var(--el-color-primary-light-9, #ecf5ff) !important;
-  color: var(--el-color-primary, #409eff) !important;
+  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 !important;
   box-shadow: none !important;
 }
@@ -1878,8 +2274,8 @@ body .el-overlay-dialog,
   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);
+  background: var(--pro-layout-accent, #6366f1);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--pro-layout-accent, #6366f1) 35%, transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -1902,8 +2298,8 @@ body .el-overlay-dialog,
   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);
+  background: var(--pro-layout-accent, #6366f1);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--pro-layout-accent, #6366f1) 35%, transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -1979,12 +2375,26 @@ 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;
   flex: 1 !important;
   width: 0 !important;
   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;
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  min-height: 0;
 }
 .pro-layout__tags-view {
   flex-shrink: 0;
@@ -1993,24 +2403,24 @@ body .el-overlay-dialog,
   margin: 0 !important;
   display: flex;
   flex-direction: column;
-  background: var(--pro-layout-header-bg) !important;
-  border-bottom: none !important;
+  background: var(--pro-layout-tags-bar-bg) !important;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
-  --el-menu-bg-color: var(--pro-layout-header-bg) !important;
+  --el-menu-bg-color: var(--pro-layout-tags-bar-bg) !important;
   display: flex !important;
   flex: 1 1 auto;
   align-self: stretch;
-  align-items: flex-end;
+  align-items: center;
   flex-wrap: nowrap !important;
   overflow-x: auto !important;
   overflow-y: visible !important;
-  padding: 0 !important;
+  padding: 12px 16px !important;
   margin: 0 !important;
   border: none !important;
   outline: none;
-  background: var(--pro-layout-header-bg) !important;
+  background: var(--pro-layout-tags-bar-bg) !important;
   min-height: 100%;
   width: 100%;
   height: auto !important;
@@ -2022,68 +2432,50 @@ body .el-overlay-dialog,
 }
 .pro-layout__tags-menu .el-menu-item {
   flex: 0 0 auto;
-  height: 36px !important;
-  line-height: 36px !important;
-  margin-right: 4px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  margin-right: 6px !important;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 12px !important;
-  border-radius: 10px 10px 0 0 !important;
-  border: none !important;
-  border-bottom: none !important;
+  border-radius: 9999px !important;
+  border: 1px solid transparent !important;
   background: transparent !important;
-  transition: color 0.2s ease;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .pro-layout__tags-menu .el-menu-item:not(.is-active):hover {
-  background: transparent !important;
+  background: rgba(241, 245, 249, 0.9) !important;
+  border-color: rgba(226, 232, 240, 0.7) !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
   z-index: 2;
-  border: none !important;
-  background: var(--pro-layout-main-bg) !important;
-  box-shadow: none !important;
-  border-bottom: none !important;
+  border: 1px solid rgba(226, 232, 240, 0.9) !important;
+  background: #ffffff !important;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !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::before,
 .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);
+  display: none !important;
 }
 .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;
+  border-radius: 9999px !important;
 }
-.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before {
-  display: none;
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before,
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::after {
+  display: none !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-label {
-  color: #46556f;
+  color: var(--pro-layout-text-muted);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-label--affix-icon {
@@ -2098,17 +2490,17 @@ body .el-overlay-dialog,
   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);
+  color: var(--pro-layout-accent, #6366f1);
 }
 .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;
+  color: var(--pro-layout-accent-dark, #4338ca) !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;
+  color: var(--pro-layout-text) !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;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
   color: #8a98b2;
@@ -2126,16 +2518,16 @@ body .el-overlay-dialog,
 }
 .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;
+  color: var(--pro-layout-accent, #6366f1) !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);
+  border-radius: 12px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
+  box-shadow: -10px 0 14px -12px rgba(15, 23, 42, 0.08);
 }
 .pro-layout__tag-item {
   display: flex;