/* ============================================================ * 顶部导航栏（app-topbar） * 设计重构：梁浩然 * 命名空间：.app-topbar / .app-topbar__* / .nav-app-panel * 兼容钩子：data-top-nav、data-nav-app-* 保留，navbar.js 仍能找到 * ============================================================ */ html, body { margin: 0; padding: 0; /* 统一字体基线：Element Plus 的下拉/弹窗/提示层（el-dropdown-menu、el-dialog、el-tooltip）默认 teleport 挂载到下，脱离各业务页自身的字体作用域，且 Element Plus 官方样式并未给这些组件显式设置 font-family（只设了 font-size），会退回浏览器默认字体，与页面其它文字不一致。这里给 body 兜底设置与顶栏 .app-topbar 一致的字体栈，各业务页容器若已自行声明 font-family 不受影响，只补齐未声明字体的元素（含 EP 弹层）。 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } html { overflow-x: hidden; overflow-y: auto; } body { min-width: 0; overflow-x: hidden; } /* 顶栏高度与主内容区上间距 */ :root { --app-topbar-height: 56px; --app-content-gap: 16px; --app-sidebar-width: 200px; --app-sidebar-collapsed-width: 64px; --ease-move: cubic-bezier(0.25, 1, 0.5, 1); --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --nav-ep-primary: var(--el-color-primary, #409eff); --nav-ep-primary-light9: var(--el-color-primary-light-9, #ecf5ff); --nav-ep-danger: var(--el-color-danger, #f56c6c); --nav-ep-bg: var(--el-bg-color-overlay, #ffffff); --nav-ep-fill-light: var(--el-fill-color-light, #f5f7fa); --nav-ep-fill-blank: var(--el-fill-color-blank, #ffffff); --nav-ep-text-primary: var(--el-text-color-primary, #303133); --nav-ep-text-regular: var(--el-text-color-regular, #606266); --nav-ep-text-secondary: var(--el-text-color-secondary, #909399); --nav-ep-border: var(--el-border-color, #dcdfe6); --nav-ep-border-light: var(--el-border-color-light, #e4e7ed); --nav-ep-border-lighter: var(--el-border-color-lighter, #ebeef5); --nav-ep-radius: var(--el-border-radius-base, 4px); --nav-ep-shadow-light: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12)); --nav-ep-shadow: var(--el-box-shadow, 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08)); --nav-ep-overlay: var(--el-overlay-color-lighter, rgba(0, 0, 0, 0.5)); } /* ---------- 顶部导航加载进度条（页面切换平滑动效） ---------- */ #xs-nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; /* 高于顶栏 9999，避免被遮挡 */ background: linear-gradient(90deg, var(--app-topbar-primary, #409eff) 0%, #66b1ff 100%); box-shadow: 0 0 8px rgba(64, 158, 255, 0.55), 0 0 4px rgba(64, 158, 255, 0.5); border-radius: 0 2px 2px 0; opacity: 0; pointer-events: none; transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease; } #xs-nav-progress.is-active, #xs-nav-progress.is-finishing { opacity: 1; } #xs-nav-progress.is-finishing { transition: width 180ms ease, opacity 320ms ease 120ms; } @media (prefers-reduced-motion: reduce) { #xs-nav-progress { transition: opacity 200ms ease; } } #xs-nav-loading { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms ease; background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); } #xs-nav-loading.is-active { opacity: 1; visibility: visible; pointer-events: all; } .xs-nav-loading__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transform: translateY(-8px); opacity: 0; transition: opacity 320ms ease 60ms, transform 420ms var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)) 60ms; } #xs-nav-loading.is-active .xs-nav-loading__content { opacity: 1; transform: translateY(0); } .xs-nav-loading__spinner { position: relative; width: 52px; height: 52px; } .xs-nav-loading__arc { box-sizing: border-box; width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(64, 158, 255, 0.14); border-top-color: var(--app-topbar-primary, #409eff); border-right-color: var(--app-topbar-primary, #409eff); animation: xs-nav-loading-spin 0.88s linear infinite; } .xs-nav-loading__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--nav-ep-text-secondary, #909399); letter-spacing: 0.04em; } @keyframes xs-nav-loading-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #xs-nav-loading, .xs-nav-loading__content { transition: opacity 200ms ease; } .xs-nav-loading__arc { animation: none; border-top-color: var(--app-topbar-primary, #409eff); border-right-color: rgba(64, 158, 255, 0.35); } } /* ---------- 顶栏滚动悬浮态 ---------- */ .app-topbar { will-change: background-color, box-shadow, transform; } /* 结构态：常驻置顶（由 JS 在初始化时加 .is-pinned，修复 sticky 被祖先 overflow 破坏而滚走） */ .app-topbar.is-pinned { position: fixed; top: 0; left: 0; right: 0; width: 100%; border-radius: 0; } /* 占位元素：顶栏固定后补回其文档流高度，避免内容上跳（高度由 JS 写入） */ .app-topbar__spacer { width: 100%; } /* 侧栏布局没有顶栏；隐藏 nav-float.js 为顶栏模式创建的 48px 文档流占位。 */ html.nav-layout-sidebar .app-topbar__spacer { display: none !important; height: 0 !important; } .app-topbar__glass { position: absolute; inset: 0; z-index: -1; /* 位于顶栏内容之下、页面内容之上：透出模糊背景 */ opacity: 0; pointer-events: none; border-radius: inherit; background: rgba(0, 0, 0, 0.22); } /* 无 GSAP / 降级路径：JS 检测后给顶栏加 .nav-float-css，用纯 CSS 过渡兜底 */ .app-topbar.nav-float-css { transition: background-color 400ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 400ms cubic-bezier(0.32, 0.72, 0, 1), border-bottom-color 400ms cubic-bezier(0.32, 0.72, 0, 1); } .app-topbar.nav-float-css .app-topbar__glass { transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1); } .app-topbar.nav-float-css.is-floating { background-color: rgba(28, 28, 30, 0.72); border-bottom-color: rgba(255, 255, 255, 0.16); border-radius: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 24px rgba(0, 0, 0, 0.18); } .app-topbar.nav-float-css.is-floating .app-topbar__glass { opacity: 0; } @media (prefers-reduced-motion: reduce) { .app-topbar.nav-float-css, .app-topbar.nav-float-css .app-topbar__glass { transition: none; } } /* ---------- 顶栏容器 ---------- */ .app-topbar { /* 调色板：深色半透明材料（ADR 0239），高度仍 56px */ --app-topbar-height: 56px; --app-topbar-z-index: 9999; --app-topbar-fg: #f5f5f7; --app-topbar-fg-muted: rgba(255, 255, 255, 0.82); --app-topbar-fg-subtle: rgba(255, 255, 255, 0.56); --app-topbar-border: rgba(255, 255, 255, 0.12); --app-topbar-primary: #ffffff; --app-topbar-primary-soft: rgba(255, 255, 255, 0.22); --app-topbar-surface: rgba(255, 255, 255, 0.16); --app-topbar-danger: #ff6961; --app-topbar-danger-strong: #ff453a; --app-topbar-divider: rgba(255, 255, 255, 0.12); --app-topbar-ease: cubic-bezier(0.32, 0.72, 0, 1); position: sticky; top: 0; left: 0; z-index: var(--app-topbar-z-index); isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; height: var(--app-topbar-height); min-height: var(--app-topbar-height); box-sizing: border-box; padding: 0; color: var(--app-topbar-fg); background: rgba(28, 28, 30, 0.55); border-bottom: 1px solid var(--app-topbar-border); border-radius: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); font-optical-sizing: auto; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---------- 左侧区域 ---------- */ .app-topbar__left { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; height: var(--app-topbar-height); } /* ---------- 应用启动器 ---------- */ .app-topbar__launcher { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 12px; padding: 0; border: none; border-radius: 12px; background: var(--app-topbar-surface); color: var(--app-topbar-fg-muted); cursor: pointer; transition: background-color 160ms var(--app-topbar-ease, ease), color 160ms var(--app-topbar-ease, ease), transform 100ms ease-out; } .app-topbar__launcher:hover { background: var(--app-topbar-primary-soft); color: var(--app-topbar-primary); } .app-topbar__launcher:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } .app-topbar__launcher:active { transform: scale(0.97); } .app-topbar__launcher img { width: 18px; height: 18px; opacity: 0.88; filter: brightness(0) invert(1); transition: opacity 160ms ease; } .app-topbar__launcher:hover img { opacity: 1; } /* ---------- 品牌区 ---------- */ .app-topbar__brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: var(--app-topbar-height); min-width: 0; box-sizing: border-box; padding: 6px 0 6px 8px; border-right: none; } .app-topbar__brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 5px; color: #ffffff; background: var(--app-topbar-primary); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; box-shadow: none; } /* 品牌 logo（替代原 XS 方块），高度对齐 24px 文字行高，等比缩放 */ .app-topbar__brand-logo { flex: 0 0 auto; height: 26px; width: auto; display: block; object-fit: contain; } .app-topbar__brand-name { color: var(--app-topbar-fg-muted); font-size: 13px; font-weight: 590; letter-spacing: 0.01em; line-height: 20px; white-space: nowrap; } .app-topbar--workspace .app-topbar__brand-name { display: none; } .app-topbar__nav-rule { flex: 0 0 auto; align-self: center; width: 1px; height: 16px; margin: 0 10px; background: rgba(255, 255, 255, 0.4); border-radius: 1px; } .app-topbar__current-page { display: none; min-width: 0; overflow: hidden; color: var(--app-topbar-fg); font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 横向菜单（能放下的项 + 更多） ---------- */ .app-topbar__nav-wrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; height: var(--app-topbar-height); overflow: visible; } .app-topbar__nav-wrap[data-fade="both"] .app-topbar__nav { -webkit-mask-image: linear-gradient( to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100% ); } .app-topbar__nav-wrap[data-fade="left"] .app-topbar__nav { -webkit-mask-image: linear-gradient( to right, transparent 0, #000 24px, #000 100% ); mask-image: linear-gradient( to right, transparent 0, #000 24px, #000 100% ); } .app-topbar__nav-wrap[data-fade="right"] .app-topbar__nav { -webkit-mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 24px), transparent 100% ); mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 24px), transparent 100% ); } .app-topbar__nav { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0 8px 0 0; height: var(--app-topbar-height); flex: 1 1 auto; width: auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; /* 隐藏滚动条（仿 macOS） */ scrollbar-width: none; -ms-overflow-style: none; } .app-topbar__nav::-webkit-scrollbar { display: none; } .app-topbar__nav li { position: relative; flex: 0 0 auto; padding: 0 8px; } .app-topbar__nav > li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: rgba(255, 255, 255, 0.4); pointer-events: none; opacity: 1; transition: opacity 160ms var(--app-topbar-ease, ease); } .app-topbar__nav > li:hover::before, .app-topbar__nav > li:focus-within::before, .app-topbar__nav > li:has(> a.active)::before, .app-topbar__nav > li:hover + li::before, .app-topbar__nav > li:focus-within + li::before, .app-topbar__nav > li:has(> a.active) + li::before { opacity: 0; } .app-topbar__nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 28px; min-width: auto; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--app-topbar-fg-muted); font-size: 13px; font-weight: 510; letter-spacing: 0.01em; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: color 160ms var(--app-topbar-ease, ease), background-color 160ms var(--app-topbar-ease, ease), transform 100ms ease-out; } .app-topbar__nav a:hover { color: var(--app-topbar-fg); background: var(--app-topbar-surface); } .app-topbar__nav a:active { transform: scale(0.97); } .app-topbar__nav a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } .app-topbar__nav a.active { color: var(--app-topbar-fg); background: var(--app-topbar-primary-soft); font-weight: 590; } .app-topbar__nav a.active:hover { color: var(--app-topbar-fg); background: rgba(255, 255, 255, 0.28); } .app-topbar__nav-wrap.has-overflow .app-topbar__nav { flex: 0 1 auto; overflow: hidden; } /* 财务等带功能侧栏的工作区: 顶栏负责跨工作区切换, 当前工作区始终靠前. */ .app-topbar--compact-workspace .app-topbar__nav-wrap { flex: 0 1 640px; } .app-topbar--compact-workspace .app-topbar__nav > li { padding-inline: 3px; } .app-topbar--compact-workspace .app-topbar__nav > li + li::before { display: none; } .app-topbar--compact-workspace .app-topbar__nav a { height: 32px; border-radius: 6px; } .app-topbar__nav-more { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; height: var(--app-topbar-height); } .app-topbar__nav-more[hidden] { display: none; } .app-topbar__nav-more:not([hidden]) { padding-left: 8px; } .app-topbar__nav-more:not([hidden])::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: rgba(255, 255, 255, 0.4); pointer-events: none; opacity: 1; transition: opacity 160ms var(--app-topbar-ease, ease); } .app-topbar__nav-wrap:has(.app-topbar__nav > li:last-child:hover) .app-topbar__nav-more::before, .app-topbar__nav-wrap:has(.app-topbar__nav > li:last-child:focus-within) .app-topbar__nav-more::before, .app-topbar__nav-wrap:has(.app-topbar__nav > li:last-child:has(> a.active)) .app-topbar__nav-more::before, .app-topbar__nav-more:hover::before, .app-topbar__nav-more.is-open::before { opacity: 0; } .app-topbar__nav-more-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--app-topbar-fg-muted); font: inherit; font-size: 13px; font-weight: 510; letter-spacing: 0.01em; line-height: 20px; cursor: pointer; transition: color 160ms var(--app-topbar-ease, ease), background-color 160ms var(--app-topbar-ease, ease), transform 100ms ease-out; } .app-topbar__nav-more-toggle:hover { color: var(--app-topbar-fg); background: var(--app-topbar-surface); } .app-topbar__nav-more-toggle:active { transform: scale(0.97); } .app-topbar__nav-more-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } .app-topbar__nav-more.is-open .app-topbar__nav-more-toggle { color: var(--app-topbar-fg); background: var(--app-topbar-primary-soft); } .app-topbar__nav-more-caret { width: 14px; height: 14px; color: var(--app-topbar-fg-subtle); transform-origin: 50% 50%; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); } .app-topbar__nav-more.is-open .app-topbar__nav-more-caret { transform: rotate(180deg); } .app-topbar__nav-more-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--app-topbar-z-index); min-width: 196px; max-height: min(70vh, 420px); overflow: auto; margin: 0; padding: 8px; list-style: none; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 18px 48px rgba(0, 0, 0, 0.18); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); transform-origin: top left; opacity: 0; transform: translateY(-6px) scale(0.96); filter: blur(6px); visibility: hidden; pointer-events: none; transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1), transform 180ms cubic-bezier(0.32, 0.72, 0, 1), filter 180ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 180ms; } .app-topbar__nav-more.is-open .app-topbar__nav-more-menu { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); visibility: visible; pointer-events: auto; transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1), transform 320ms cubic-bezier(0.32, 0.72, 0, 1), filter 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; } .app-topbar__nav-more-menu [data-nav-item] { display: block; } .app-topbar__nav-more-menu a { display: flex; align-items: center; width: 100%; min-height: 44px; height: auto; padding: 0 12px; border: none; border-radius: 10px; background: transparent; color: #1d1d1f; font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; } .app-topbar__nav-more-menu a:hover, .app-topbar__nav-more-menu a.active { background: rgba(120, 120, 128, 0.12); color: #002fa7; } .app-topbar__nav-more-menu a:active { transform: scale(0.97); } .app-topbar__nav-more-menu a:focus-visible { outline: 2px solid #002fa7; outline-offset: 2px; } /* ---------- 右侧区域 ---------- */ .app-topbar__right { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; height: var(--app-topbar-height); padding: 6px 16px 6px 0; } .app-topbar__search-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 12px; background: var(--app-topbar-surface); color: var(--app-topbar-fg-muted); cursor: pointer; transition: background-color 160ms var(--app-topbar-ease, ease), color 160ms var(--app-topbar-ease, ease), transform 100ms ease-out; } .app-topbar__search-action:hover { background: var(--app-topbar-primary-soft); color: var(--app-topbar-primary); } .app-topbar__search-action:active { transform: scale(0.97); } .app-topbar__search-action:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } .app-topbar__search-action svg { width: 20px; height: 20px; } /* ---------- 用户信息 / 头像下拉 ---------- */ .app-topbar__user-wrap { position: relative; display: inline-flex; align-items: center; } .app-topbar__user { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; box-sizing: border-box; padding: 0 10px 0 4px; border: 1px solid transparent; border-radius: 999px; background: var(--app-topbar-surface); color: inherit; cursor: pointer; transition: background-color 160ms var(--app-topbar-ease, ease), border-color 160ms var(--app-topbar-ease, ease), transform 100ms ease-out; } .app-topbar__user:hover { background: var(--app-topbar-primary-soft); } .app-topbar__user:active { transform: scale(0.97); transition: transform 100ms ease-out; } .app-topbar__user:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } .app-topbar__user-wrap.is-open .app-topbar__user { background: var(--app-topbar-surface); border-color: var(--app-topbar-border); } /* 下拉箭头：展开时旋转 180° */ .app-topbar__user-caret { flex: 0 0 14px; width: 14px; height: 14px; color: var(--app-topbar-fg-subtle); transform-origin: 50% 50%; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); } .app-topbar__user-wrap.is-open .app-topbar__user-caret { transform: rotate(180deg); color: var(--app-topbar-fg-muted); } .app-topbar__user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; color: #ffffff; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 590; line-height: 1; } .app-topbar__user-meta { display: inline-flex; align-items: center; min-width: 0; } .app-topbar__user-name { max-width: 96px; overflow: hidden; color: var(--app-topbar-fg); font-size: 13px; font-weight: 510; letter-spacing: 0.01em; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 头像下拉菜单 ---------- */ .app-topbar__user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--app-topbar-z-index); min-width: 196px; padding: 8px; --app-topbar-fg: #1d1d1f; --app-topbar-fg-muted: #3a3a3c; --app-topbar-fg-subtle: #6e6e73; --app-topbar-border: rgba(255, 255, 255, 0.55); --app-topbar-primary: #002fa7; --app-topbar-surface: rgba(120, 120, 128, 0.12); background: rgba(255, 255, 255, 0.78); border: 1px solid var(--app-topbar-border); border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 18px 48px rgba(0, 0, 0, 0.18); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); /* 从触发点（右上）浮现：进出同一路径 */ transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(0.96); filter: blur(6px); visibility: hidden; pointer-events: none; transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1), transform 180ms cubic-bezier(0.32, 0.72, 0, 1), filter 180ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 180ms; } .app-topbar__user-wrap.is-open .app-topbar__user-menu { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); visibility: visible; pointer-events: auto; transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1), transform 320ms cubic-bezier(0.32, 0.72, 0, 1), filter 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; } .app-topbar__user-menu-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--app-topbar-fg); font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease, transform 100ms ease-out; } .app-topbar__user-menu-item svg { flex: 0 0 16px; width: 16px; height: 16px; opacity: 0.85; } .app-topbar__user-menu-item:hover { background: var(--app-topbar-surface); color: var(--app-topbar-primary); } .app-topbar__user-menu-item:active { transform: scale(0.97); } .app-topbar__user-menu-item:focus-visible { outline: 2px solid #002fa7; outline-offset: 2px; } .app-topbar__user-menu-item--danger { margin-top: 4px; color: #d70015; box-shadow: 0 -1px 0 rgba(60, 60, 67, 0.12); } .app-topbar__user-menu-item--danger:hover { background: rgba(215, 0, 21, 0.08); color: #d70015; } /* 外链图标：提示"权限管理"在新标签页打开 */ .app-topbar__user-menu-external { flex: 0 0 13px; width: 13px; height: 13px; margin-left: auto; color: var(--app-topbar-fg-subtle); opacity: 0; transform: translateX(-2px); transition: opacity 160ms ease, transform 160ms ease; } .app-topbar__user-menu-item:hover .app-topbar__user-menu-external, .app-topbar__user-menu-item:focus-visible .app-topbar__user-menu-external { opacity: 0.9; transform: translateX(0); } .app-topbar__user-menu-empty { padding: 10px 12px; color: var(--app-topbar-fg-subtle); font-size: 13px; line-height: 18px; text-align: center; } /* 个人中心待办红点（顶栏 / 侧栏共用视觉） */ .app-topbar__user-menu-badge, .app-sidebar__user-menu-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3b30; color: #ffffff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-sizing: border-box; } /* 独立退出图标视觉隐藏：退出只在用户菜单。节点必须保留，nav-ep.js 读 href。 */ .app-topbar__logout { display: none; } /* ============================================================ * 应用面板（全部模块）—— 适配白底主题 * ============================================================ */ .nav-app-panel { position: fixed; inset: 0; display: flex; box-sizing: border-box; justify-content: center; align-items: flex-start; padding: calc(var(--app-topbar-height) + 32px) 24px 32px; pointer-events: none; opacity: 0; transition: opacity 200ms ease; z-index: 10000; } .nav-app-panel.is-open { opacity: 1; pointer-events: auto; } .nav-app-panel__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; } .nav-app-panel__body { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; gap: 20px; box-sizing: border-box; width: min(1040px, calc(100vw - 48px)); max-height: min(704px, calc(100dvh - var(--app-topbar-height) - 64px)); background: #ffffff; border-radius: 16px; padding: 28px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2); overflow: hidden; z-index: 10001; opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .nav-app-panel.is-open .nav-app-panel__body { opacity: 1; transform: translateY(0) scale(1); } .nav-app-panel__header { display: flex; align-items: center; gap: 12px; min-height: 44px; } .nav-app-panel__identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .nav-app-panel__title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav-app-panel__title { margin: 0; color: #303133; font-size: 20px; font-weight: 700; line-height: 28px; } .nav-app-panel__subtitle { margin: 0; overflow: hidden; color: #909399; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } .nav-app-panel__brand { display: flex; align-items: center; justify-content: center; } .nav-app-panel__brand-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--app-topbar-primary-soft, #ecf5ff); display: inline-flex; align-items: center; justify-content: center; } .nav-app-panel__brand-icon img { width: 22px; height: 22px; } .nav-app-panel__search { position: relative; display: flex; align-items: center; flex: 0 0 auto; } .nav-app-panel__search input { width: 100%; height: 44px; box-sizing: border-box; border-radius: 10px; border: 1px solid #dcdfe6; padding: 0 44px 0 42px; font-size: 14px; color: #303133; background: #ffffff; transition: border-color 160ms ease, box-shadow 160ms ease; } .nav-app-panel__search input:focus { outline: none; border-color: #409eff; box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.18); } .nav-app-panel__search-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: #606266; pointer-events: none; } .nav-app-panel__search-clear { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 8px; background: transparent; color: #909399; cursor: pointer; } .nav-app-panel__search-clear:hover, .nav-app-panel__search-clear:focus-visible { background: #ecf5ff; color: #409eff; outline: none; } .nav-app-panel__close { flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; border-radius: 8px; border: none; background: #f5f7fa; color: #606266; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .nav-app-panel__close:hover { background: #ecf5ff; color: #409eff; } .nav-app-panel__close svg { width: 20px; height: 20px; } .nav-app-panel__content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .nav-app-panel__group + .nav-app-panel__group { margin-top: 24px; } .nav-app-panel__group[hidden] { display: none; } .nav-app-panel__group-title { margin: 0 0 12px; color: #606266; font-size: 14px; font-weight: 500; line-height: 22px; } .nav-app-panel__grid, .nav-app-panel__group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .nav-app-panel__item { display: flex; flex-direction: column; gap: 4px; min-height: 88px; box-sizing: border-box; padding: 14px 16px; border-radius: 10px; text-decoration: none; color: #303133; background: #fafbfc; border: 1px solid transparent; transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .nav-app-panel__item:focus-visible { outline: 2px solid #409eff; outline-offset: -2px; border-color: #9fceff; background: #ffffff; } .nav-app-panel__item:hover { transform: translateY(-1px); border-color: #c6e2ff; background: #ffffff; box-shadow: 0 4px 12px rgba(64, 158, 255, 0.08); } .nav-app-panel__item-title { font-size: 14px; font-weight: 500; color: #303133; } .nav-app-panel__item-hint { font-size: 12px; color: #909399; } .nav-app-panel__item.is-current .nav-app-panel__item-title { color: #409eff; } .nav-app-panel__item.is-current { border-color: #c6e2ff; background: #ecf5ff; } .nav-app-panel__empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; padding: 24px; color: #606266; text-align: center; } .nav-app-panel__empty[hidden] { display: none; } .nav-app-panel__empty-title { margin: 0 0 8px; color: #303133; font-size: 16px; font-weight: 600; } .nav-app-panel__empty-description { margin: 0 0 16px; color: #909399; font-size: 13px; line-height: 20px; } .nav-app-panel__empty-action { min-width: 88px; min-height: 44px; padding: 0 16px; border: 1px solid #c6e2ff; border-radius: 8px; background: #ecf5ff; color: #409eff; font: inherit; cursor: pointer; } @media (max-width: 1199px) { .app-topbar__brand-name, .app-topbar__user-meta, .app-topbar__user-caret { display: none; } .app-topbar__brand { padding-right: 0; } .app-topbar__nav-rule { margin: 0 8px; } .app-topbar__nav a { padding: 0 10px; } .nav-app-panel { padding-top: calc(var(--app-topbar-height) + 16px); padding-bottom: 8px; } .nav-app-panel__body { width: calc(100vw - 48px); max-height: calc(100dvh - var(--app-topbar-height) - 24px); padding: 24px; } .nav-app-panel__grid, .nav-app-panel__group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 799px) { .app-topbar { gap: 4px; } .app-topbar__launcher { margin-left: 8px; } .app-topbar__brand { padding-left: 8px; } .app-topbar__nav li:not(.is-active) { display: none; } .app-topbar__nav-more { display: none; } .app-topbar__nav { padding: 0 4px 0 0; overflow: hidden; } .app-topbar__right { gap: 4px; padding-right: 8px; } .nav-app-panel { padding: calc(var(--app-topbar-height) + 16px) 16px 16px; } .nav-app-panel__body { width: calc(100vw - 32px); max-height: calc(100dvh - var(--app-topbar-height) - 32px); padding: 20px; } .nav-app-panel__grid, .nav-app-panel__group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .app-topbar__brand, .app-topbar__nav-rule, .app-topbar__nav-wrap { display: none; } .app-topbar__current-page { display: block; margin-left: 8px; } .app-topbar__right { flex-shrink: 0; } .nav-app-panel { justify-content: flex-start; padding: var(--app-topbar-height) 0 0; } .nav-app-panel__body { gap: 16px; width: 100vw; height: calc(100dvh - var(--app-topbar-height)); max-height: none; padding: 16px; border-radius: 0; box-shadow: none; } .nav-app-panel__subtitle { display: none; } .nav-app-panel__content { scrollbar-gutter: auto; } .nav-app-panel__group + .nav-app-panel__group { margin-top: 20px; } .nav-app-panel__grid, .nav-app-panel__group-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .nav-app-panel__item { min-height: 68px; padding: 12px 14px; } } body.nav-app-open { overflow: hidden; } .sp-audit-prompt-slot { padding: var(--sp-space-3, 12px) 24px 0; margin: 0; } .sp-audit-prompt-slot[hidden] { display: none !important; padding: 0; margin: 0; } .app-topbar ~ .container, .app-topbar ~ .scrolling-container, .app-topbar ~ .filter-container { padding-top: var(--app-content-gap); } #remark-calc-new-app { position: relative; margin-top: calc(-1 * var(--app-topbar-height, 55px)); min-height: 100vh; } /* 需求6：侧栏模式没有顶栏。该页各模块用 top:calc(var(--app-topbar-height,48px)+gap) 为顶栏预留了 48px，但侧栏模式顶栏已隐藏 → 顶部多出约 48px 留白。方案：在该页作用域内把 --app-topbar-height 归零（模块 top 收为仅 gap=16px），并用负 margin 抵消 body 的 padding-top(16px)，让内容紧贴侧栏顶部合理位置。注：--app-topbar-height 仅对 #remark-calc-new-app 的后代生效，不影响 body min-height 计算与顶部菜单模式。 */ html.nav-layout-sidebar #remark-calc-new-app { --app-topbar-height: 0px; margin-top: calc(-1 * var(--app-content-gap, 16px)); } /* 需求5（v6 修正缩放目标）：该页内容真实宽≈1900px(主区 + 兄弟级 .rcn-side-panel + .rcn-note-panel)，侧栏模式下 body{padding-left} 使整块右移、右侧"客服备注工具"被挤出。用户不接受横向滚动，故由 nav-preference.js 对【#remark-calc-new-app 整体】做 transform:scale 等比缩放（旧版只缩 .remark-calc-new 会漏掉其兄弟面板，故失效）。此处仅声明缩放原点，scale 值与 body 撑高由 JS 按侧栏宽度/窗口实时计算。仅侧栏模式生效，顶部模式不缩放。 */ html.nav-layout-sidebar #remark-calc-new-app { transform-origin: top left; } body.sp-grid-fullscreen-lock .app-topbar { visibility: hidden; pointer-events: none; } /* AG Grid 全屏锁定：侧栏模式下同样隐藏侧栏并取消内容区让位，避免被侧栏挤占 */ html.nav-layout-sidebar body.sp-grid-fullscreen-lock .app-sidebar { visibility: hidden; pointer-events: none; } html.nav-layout-sidebar body.sp-grid-fullscreen-lock { padding-left: 0 !important; } .top-nav-offset { height: 0; } /* ============================================================ * 侧栏导航布局（三段式：Logo 区 / 菜单区 / 用户区） * 仅在 html.nav-layout-sidebar 作用域生效，顶部模式保持原状。 * 调色板沿用 Element Plus / yudao 深色侧栏。 * ============================================================ */ /* 需求1：侧栏模式下整条顶栏隐藏，内容全部迁入侧栏 */ html.nav-layout-sidebar .app-topbar { display: none; } .app-sidebar { --app-sidebar-bg: #001529; --app-sidebar-fg: #bfcbd9; --app-sidebar-fg-strong: #ffffff; --app-sidebar-primary: #409eff; --app-sidebar-hover: rgba(255, 255, 255, 0.06); --app-sidebar-border: rgba(255, 255, 255, 0.06); position: fixed; top: 0; left: 0; z-index: calc(var(--app-topbar-z-index, 9999) - 1); display: flex; flex-direction: column; width: var(--app-sidebar-width); height: 100vh; overflow: hidden; background: var(--app-sidebar-bg); border-right: 1px solid var(--app-sidebar-border); /* 只过渡 width（既定布局模式，move 曲线 250ms） */ transition: width 0.25s var(--ease-move); } .app-sidebar[hidden] { display: none !important; } /* ---------- 顶部 Logo 区 ---------- */ .app-sidebar__header { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: var(--app-topbar-height); padding: 0 12px 0 16px; border-bottom: 1px solid var(--app-sidebar-border); } .app-sidebar__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .app-sidebar__brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 6px; color: #fff; background: var(--app-sidebar-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } /* 侧栏品牌 logo（替代原 XS 方块） */ .app-sidebar__brand-logo { flex: 0 0 auto; height: 26px; width: auto; max-width: 150px; display: block; object-fit: contain; } .app-sidebar__brand-name { min-width: 0; color: var(--app-sidebar-fg-strong); font-size: 15px; font-weight: 500; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 折叠时淡出（只动 opacity） */ opacity: 1; transition: opacity 0.18s var(--ease-move); } .app-sidebar__collapse { flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--app-sidebar-fg); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.25s var(--ease-move); } .app-sidebar__collapse:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-fg-strong); } .app-sidebar__collapse:focus-visible { outline: 2px solid var(--app-sidebar-primary); outline-offset: 2px; } .app-sidebar__collapse svg { width: 18px; height: 18px; } html.nav-layout-sidebar .app-sidebar__collapse[hidden] { display: inline-flex !important; } /* ---------- 中部菜单区（可滚动） ---------- */ .app-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .app-sidebar__nav::-webkit-scrollbar { width: 6px; } .app-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .app-sidebar__list { list-style: none; margin: 0; padding: 8px; } .app-sidebar__list > li { margin: 2px 0; } .app-sidebar__link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--app-sidebar-fg); text-decoration: none; font-size: 14px; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; } .app-sidebar__icon { flex: 0 0 20px; width: 20px; height: 20px; opacity: 0.92; } .app-sidebar__link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: opacity 0.18s var(--ease-move); } .app-sidebar__link:hover { color: var(--app-sidebar-fg-strong); background: var(--app-sidebar-hover); } .app-sidebar__link:focus-visible { outline: 2px solid var(--app-sidebar-primary); outline-offset: -2px; } .app-sidebar__link.is-active { color: var(--app-sidebar-fg-strong); background: var(--app-sidebar-primary); } .app-sidebar__link.is-active .app-sidebar__icon { opacity: 1; } /* ---------- 折叠态 tooltip（JS 驱动的 fixed 浮层，挂在 body 上） ---------- 旧实现把 tooltip 作为 .app-sidebar__link 的绝对定位子元素，会被侧栏的 overflow:hidden / 菜单区 overflow-y:auto 裁掉（Bug 2 根因）。改为 position:fixed 并由 JS 按图标位置定位，彻底脱离侧栏裁剪上下文。 */ .app-sidebar__floating-tip { /* 对齐 Element Plus 暗色 el-tooltip：深底白字、4px 圆角、12px 字号 */ position: fixed; z-index: 10002; padding: 6px 11px; border-radius: var(--nav-ep-radius, 4px); background: var(--el-text-color-primary, #303133); color: var(--el-color-white, #fff); font-size: 12px; line-height: 1.4; white-space: nowrap; box-shadow: var(--nav-ep-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12)); pointer-events: none; /* top/left 由 JS 设置；translateY(-50%) 让其相对触发点垂直居中 */ opacity: 0; transform: translateY(-50%) translateX(-4px) scale(0.96); transform-origin: left center; /* exit 更快（~100ms） */ transition: opacity 0.1s ease, transform 0.1s ease; } .app-sidebar__floating-tip.is-visible { /* enter 从触发点向右滑出（125~150ms enter 曲线） */ opacity: 1; transform: translateY(-50%) translateX(0) scale(1); transition: opacity 0.14s var(--ease-enter), transform 0.14s var(--ease-enter); } @media (prefers-reduced-motion: reduce) { .app-sidebar__floating-tip { transition-duration: 1ms; } } /* ---------- 底部用户区 ---------- */ .app-sidebar__footer { position: relative; flex: 0 0 auto; padding: 8px; border-top: 1px solid var(--app-sidebar-border); } .app-sidebar__user { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: none; border-radius: 8px; background: transparent; color: var(--app-sidebar-fg); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .app-sidebar__user:hover, .app-sidebar__footer.is-open .app-sidebar__user { background: var(--app-sidebar-hover); } .app-sidebar__user:focus-visible { outline: 2px solid var(--app-sidebar-primary); outline-offset: -2px; } .app-sidebar__user-avatar { flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: #fff; background: var(--app-sidebar-primary); font-size: 13px; font-weight: 600; line-height: 1; } .app-sidebar__user-name { flex: 1 1 auto; min-width: 0; color: var(--app-sidebar-fg-strong); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; transition: opacity 0.18s var(--ease-move); } /* ---------- 底部用户区：向上弹出菜单 ---------- 旧实现用 position:absolute 挂在 footer 内，会被侧栏 overflow:hidden 裁掉（折叠态 64px 时尤其明显，Bug 3 根因）。改为 position:fixed，left/bottom 由 JS 按头像位置计算，脱离侧栏裁剪并置于内容之上（低于导航样式弹窗 10001）。 */ .app-sidebar__user-menu { position: fixed; left: 8px; bottom: 60px; z-index: 10000; min-width: 200px; /* 对齐 Element Plus el-dropdown-menu：白底、--el-border-color-light 描边、 4px 圆角、--el-box-shadow-light 阴影、6px 内边距 */ padding: 5px 0; background: var(--nav-ep-bg, #ffffff); border: 1px solid var(--nav-ep-border-light, #e4e7ed); border-radius: var(--nav-ep-radius, 4px); box-shadow: var(--nav-ep-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12)); /* 从头像位置向上滑出：贴近底部触发点 */ transform-origin: bottom center; opacity: 0; transform: translateY(6px) scale(0.92); visibility: hidden; pointer-events: none; transition: opacity 0.12s var(--ease-enter), transform 0.12s var(--ease-enter), visibility 0s linear 0.12s; } .app-sidebar__footer.is-open .app-sidebar__user-menu { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity 0.18s var(--ease-enter), transform 0.18s var(--ease-enter), visibility 0s; } .app-sidebar__user-menu-item { /* el-dropdown-menu__item：整宽、5px 16px、hover 浅填充 + 主色文字 */ display: flex; align-items: center; gap: 10px; padding: 8px 16px; border: none; border-radius: 0; background: transparent; width: 100%; color: var(--nav-ep-text-regular, #606266); font: inherit; font-size: 14px; line-height: 20px; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .app-sidebar__user-menu-item svg { flex: 0 0 16px; width: 16px; height: 16px; opacity: 0.85; } .app-sidebar__user-menu-item:hover { background: var(--nav-ep-primary-light9, #ecf5ff); color: var(--nav-ep-primary, #409eff); } .app-sidebar__user-menu-item:focus-visible { outline: 2px solid var(--nav-ep-primary, #409eff); outline-offset: -2px; } .app-sidebar__user-menu-item--danger:hover { background: rgba(245, 108, 108, 0.1); color: var(--nav-ep-danger, #f56c6c); } /* ---------- 业务内容区让位 ---------- */ html.nav-layout-sidebar body { padding-left: var(--app-sidebar-width); padding-top: var(--app-content-gap); transition: padding-left 0.25s var(--ease-move); } /* ---------- 折叠态 ---------- */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar { width: var(--app-sidebar-collapsed-width); } html.nav-layout-sidebar.nav-sidebar-collapsed body { padding-left: var(--app-sidebar-collapsed-width); } /* 折叠：Logo 区改为竖排——XS 居中 + 折叠按钮（用于重新展开）保留在下方居中。关键修复（Bug 1）：折叠态不再隐藏折叠按钮，否则收起后无处可点、无法展开。 */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__header { flex-direction: column; justify-content: center; height: auto; padding: 8px 0; gap: 8px; } html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__brand { justify-content: center; flex: 0 0 auto; } html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__brand-name { display: none; } /* 折叠态：宽版 logo 等比缩小以适配 64px 窄栏 */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__brand-logo { height: auto; width: 100%; max-width: 40px; } /* 折叠态：折叠按钮居中并翻转箭头（指向右 = 展开） */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__collapse svg { transform: rotate(180deg); } /* 折叠：菜单项仅居中显示图标，隐藏文字 */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__link { justify-content: center; gap: 0; padding: 0; } html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__link-text { display: none; } /* 折叠：用户区仅头像居中 */ html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__user { justify-content: center; padding: 0; } html.nav-layout-sidebar.nav-sidebar-collapsed .app-sidebar__user-name { display: none; } /* ============================================================ * 需求1：页面进入动画（JS 触发，顶部 / 侧栏模式都生效） * 业务页是 Vue 应用，内容在加载后异步渲染；纯 @starting-style 作用在「还空着的 * 挂载点」上看不到。改由 nav-preference.js 监听主挂载容器：检测到 Vue 首次渲染出 * 内容后给容器加 .nav-content-enter-active 触发一次 fade + 上滑(10px) 进入 * （280ms，enter 曲线，只动 transform/opacity），播放完毕由 JS 清除 will-change。 * prefers-reduced-motion: reduce 时 JS 不加 class、且此处动画也不生效。 * ============================================================ */ @media (prefers-reduced-motion: no-preference) { .nav-content-enter-active { animation: nav-content-enter 0.28s var(--ease-enter) both; will-change: transform, opacity; } } @keyframes nav-content-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 用户菜单：导航样式入口 ---------- */ .app-topbar__user-menu-item--button { width: 100%; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; } /* ---------- 导航样式弹窗 ---------- */ .nav-style-dialog { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease-enter), visibility 0.2s var(--ease-enter); } .nav-style-dialog.is-open { pointer-events: auto; opacity: 1; visibility: visible; } .nav-style-dialog__backdrop { /* 对齐 el-overlay 遮罩 */ position: absolute; inset: 0; background: var(--nav-ep-overlay, rgba(0, 0, 0, 0.5)); } .nav-style-dialog__panel { /* 对齐 el-dialog：白底、--el-box-shadow、圆角 8px */ position: relative; width: min(420px, 100%); max-height: min(80vh, 560px); overflow: auto; background: var(--nav-ep-bg, #fff); border-radius: 8px; box-shadow: var(--nav-ep-shadow, 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08)); transform: scale(0.92); transition: transform 0.25s var(--ease-enter); } .nav-style-dialog.is-open .nav-style-dialog__panel { transform: scale(1); } .nav-style-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; border-bottom: 1px solid var(--nav-ep-border-lighter, #ebeef5); } .nav-style-dialog__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--nav-ep-text-primary, #303133); } .nav-style-dialog__close { border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--nav-ep-text-secondary, #909399); cursor: pointer; transition: color 0.15s ease; } .nav-style-dialog__close:hover { color: var(--nav-ep-primary, #409eff); } .nav-style-dialog__body { padding: 12px 18px 18px; } .nav-style-dialog__hint { margin: 0 0 12px; font-size: 12px; color: var(--nav-ep-text-secondary, #909399); line-height: 1.5; } .nav-style-dialog__legend { font-size: 13px; font-weight: 600; color: var(--nav-ep-text-regular, #606266); } .nav-style-dialog__layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; padding: 0; border: none; } .nav-style-dialog__layout-opt { cursor: pointer; } .nav-style-dialog__layout-opt input { position: absolute; opacity: 0; pointer-events: none; } .nav-style-dialog__layout-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 2px solid var(--nav-ep-border-light, #e4e7ed); border-radius: var(--nav-ep-radius, 4px); font-size: 13px; color: var(--nav-ep-text-regular, #606266); transition: border-color 0.2s var(--ease-enter), box-shadow 0.2s var(--ease-enter); } .nav-style-dialog__layout-opt input:checked + .nav-style-dialog__layout-card { border-color: var(--nav-ep-primary, #409eff); box-shadow: 0 0 0 2px var(--nav-ep-primary-light9, rgba(64, 158, 255, 0.2)); color: var(--nav-ep-primary, #409eff); } .nav-style-dialog__layout-preview { display: block; width: 56px; height: 44px; border-radius: 4px; background: #e5e7eb; position: relative; } .nav-style-dialog__layout-card--top .nav-style-dialog__layout-preview::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 33%; background: #273352; border-radius: 4px 4px 0 0; } .nav-style-dialog__layout-card--sidebar .nav-style-dialog__layout-preview::before { content: ''; position: absolute; top: 0; left: 0; width: 33%; height: 100%; background: #273352; border-radius: 4px 0 0 4px; } .nav-style-dialog__order-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .nav-style-dialog__reset { border: none; background: transparent; color: var(--nav-ep-primary, #409eff); font-size: 12px; cursor: pointer; transition: opacity 0.15s ease; } .nav-style-dialog__reset:hover { opacity: 0.75; } .nav-style-dialog__order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .nav-style-dialog__order-item { /* 对齐 el-card/el-tag：浅填充底、--el-border-color-lighter 描边、4px 圆角 */ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nav-ep-border-lighter, #ebeef5); border-radius: var(--nav-ep-radius, 4px); background: var(--nav-ep-fill-light, #f5f7fa); cursor: grab; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .nav-style-dialog__order-item:hover { border-color: var(--nav-ep-primary, #409eff); } /* 拖动中：半透明 + 抓取手势 + 轻微抬升阴影（FLIP 期间其余项 transform 过渡） */ .nav-style-dialog__order-item.is-dragging { opacity: 0.5; cursor: grabbing; border-color: var(--nav-ep-primary, #409eff); box-shadow: var(--nav-ep-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12)); } .nav-style-dialog__order-drag { color: var(--nav-ep-text-secondary, #909399); font-size: 14px; cursor: grab; user-select: none; } .nav-style-dialog__order-label { flex: 1; font-size: 14px; color: var(--nav-ep-text-primary, #303133); } /* ============================================================ * 需求2：真 Element Plus 视图层（仅已加载 EP 的页面，html.nav-ep） * nav-ep.js 把导航交互件换成真 EP 组件并清空原生容器；这里隐藏被取代的原生件、 * 给 EP 触发器/排序项补少量定位与观感（颜色一律走 --nav-ep-* / --el-* 令牌）。 * ============================================================ */ html.nav-ep .nav-style-dialog, html.nav-ep .app-sidebar__floating-tip { display: none !important; } /* EP 下拉触发按钮沿用原生用户按钮外观 */ .nav-ep-userbtn { border: none; background: transparent; font: inherit; cursor: pointer; } .nav-ep-userbtn:focus { outline: none; } /* EP 下拉与原生 .app-topbar__user-menu 同一材料：去箭头、磨砂、44px 行 */ .el-popper.nav-ep-dropdown, .el-dropdown__popper.nav-ep-dropdown { --el-bg-color-overlay: transparent; --el-dropdown-menu-box-shadow: none; --el-dropdown-menuItem-hover-fill: rgba(120, 120, 128, 0.12); --el-dropdown-menuItem-hover-color: #1d1d1f; --el-border-color-light: transparent; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .el-popper.nav-ep-dropdown .el-popper__arrow, .el-popper.nav-ep-dropdown .el-popper__arrow::before { display: none !important; } .nav-ep-dropdown .el-dropdown-menu { min-width: 220px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 18px 48px rgba(0, 0, 0, 0.18); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } .nav-ep-dropdown .el-dropdown-menu__item { display: flex; align-items: center; gap: 10px; min-height: 44px; height: auto; margin: 1px 0; padding: 0 12px; border-radius: 10px; line-height: 20px; font-size: 15px; font-weight: 500; color: #1d1d1f; } .nav-ep-dropdown .el-dropdown-menu__item:not(.is-disabled):hover, .nav-ep-dropdown .el-dropdown-menu__item:not(.is-disabled):focus { background: rgba(120, 120, 128, 0.12); color: #1d1d1f; } .nav-ep-dropdown .el-dropdown-menu__item:active { transform: scale(0.97); } .nav-ep-dropdown .el-dropdown-menu__item--divided { margin-top: 6px; border-top-color: transparent; } .nav-ep-dropdown .el-dropdown-menu__item--divided::before { background: rgba(60, 60, 67, 0.12); left: 8px; right: 8px; height: 1px; } .nav-ep-dropdown .el-dropdown-menu__item:last-child { color: #d70015; } .nav-ep-dropdown .el-dropdown-menu__item:last-child:not(.is-disabled):hover, .nav-ep-dropdown .el-dropdown-menu__item:last-child:not(.is-disabled):focus { background: rgba(215, 0, 21, 0.08); color: #d70015; } .nav-ep-userbtn:active { transform: scale(0.97); } .nav-ep-userbtn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } /* 下拉项图标 */ .nav-ep-dropdown .nav-ep-mi { margin-right: 0; width: 16px; height: 16px; font-size: 16px; color: inherit; opacity: 0.85; } .nav-ep-dropdown .nav-ep-mi svg { width: 16px; height: 16px; } /* 侧栏 EP 列表项 */ .app-sidebar__item-ep { list-style: none; } .app-sidebar__icon-wrap { display: inline-flex; align-items: center; } .app-sidebar__icon-wrap svg { width: 18px; height: 18px; } /* 导航样式弹窗（el-dialog 内部）字段 */ .nav-ep-dialog .nav-ep-hint { margin: 0 0 12px; font-size: 12px; color: var(--nav-ep-text-secondary, #909399); line-height: 1.5; } .nav-ep-dialog .nav-ep-field { margin-bottom: 16px; } .nav-ep-dialog .nav-ep-flabel { font-size: 13px; font-weight: 600; color: var(--nav-ep-text-regular, #606266); margin-bottom: 8px; } .nav-ep-dialog .nav-ep-order-head { display: flex; align-items: center; justify-content: space-between; } /* 排序列表：对齐 el-card/el-tag 观感 + FLIP 拖拽 */ .nav-ep-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .nav-ep-order-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nav-ep-border-lighter, #ebeef5); border-radius: var(--nav-ep-radius, 4px); background: var(--nav-ep-fill-light, #f5f7fa); cursor: grab; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .nav-ep-order-item:hover { border-color: var(--nav-ep-primary, #409eff); } .nav-ep-order-item.is-dragging { opacity: 0.5; cursor: grabbing; border-color: var(--nav-ep-primary, #409eff); box-shadow: var(--nav-ep-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12)); } .nav-ep-order-item .nav-ep-drag { color: var(--nav-ep-text-secondary, #909399); font-size: 16px; cursor: grab; } .nav-ep-order-label { flex: 1; font-size: 14px; color: var(--nav-ep-text-primary, #303133); } @media (prefers-reduced-motion: reduce) { .app-topbar__nav-more-toggle, .app-topbar__nav-more-caret, .app-topbar__nav-more-menu, .app-topbar__launcher, .app-topbar__search-action, .app-topbar__nav a, .app-topbar__logout, .app-topbar__user, .app-topbar__user-caret, .app-topbar__user-menu, .app-topbar__user-menu-item, .app-topbar__user-menu-external, .nav-app-panel, .nav-app-panel__body, .nav-app-panel__item, .app-sidebar, .app-sidebar__brand-name, .app-sidebar__collapse, .app-sidebar__link, .app-sidebar__link-text, .app-sidebar__user, .app-sidebar__user-name, .app-sidebar__user-menu, .app-sidebar__user-menu-item, .nav-style-dialog, .nav-style-dialog__panel, html.nav-layout-sidebar body { transition-duration: 1ms; } .app-topbar__nav { scroll-behavior: auto; } .app-topbar__user-menu { filter: none; transform: none; } } @media (prefers-reduced-transparency: reduce) { .app-topbar { background: #1c1c1e; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-topbar.nav-float-css.is-floating { background-color: #1c1c1e; box-shadow: none; border-radius: 0; } .app-topbar__glass { display: none; } .app-topbar__user-menu, .app-topbar__nav-more-menu, .nav-ep-dropdown .el-dropdown-menu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .app-topbar { background: #000; border-bottom: 2px solid #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-topbar__nav-rule, .app-topbar__nav > li + li::before, .app-topbar__nav-more:not([hidden])::before { background: #fff; } .app-topbar__user-menu, .app-topbar__nav-more-menu, .nav-ep-dropdown .el-dropdown-menu { background: #fff; border: 2px solid #1d1d1f; backdrop-filter: none; -webkit-backdrop-filter: none; } }