/* framework.css — 「响应式综合框架」布局 ------------------------------------------------------------------ 只在 下生效，因此不会影响经典布局。 ⚠️ 配色铁律：本文件**只允许**使用 CSS 自定义属性（--bg-surface / --accent / …）， 不得出现任何硬编码颜色字面量。 原因：38 套主题皮肤只覆盖这些变量，只要遵守这条，换主题即换配色， 新布局不需要为任何主题单独适配。 布局骨架（自外向内）： .fw-shell 纵向：顶栏 + 主体 .fw-body 横向：左栏(.fw-rail) + 主区(.fw-main) .fw-main 内的 .page 仍然是各视图自己的容器（可继承 max-width 放宽） 响应式断点（与 mobile.css 的 820px 对齐，避免两套阈值互相打架）： >1440px 左栏常驻；主区内楼层用 3 列 ≤1440px 主区楼层 2 列 ≤1180px 左栏收窄 ≤1024px 左栏变为可横向滚动的分类条（不再占竖向空间） ≤820px 移动端：抽屉导航（复用 mobile.css 的 data-mobile 规则） ------------------------------------------------------------------ */ html[data-layout="framework"] { --fw-topbar-h: 60px; --fw-rail-w: 236px; --fw-gap: 20px; --fw-maxw: 1560px; } /* ============================================================ 外壳 ============================================================ */ /* ⚠️ 不要在这里写 `display: block`： 经典布局用 `#app-view { display: none }` 把外壳藏起来，登录成功后才由 enterApp() 显式打开。本文件的选择器特异性更高（html[data-layout] + id）， 一旦在此写 display，就会把外壳**在登录页也强制显示**， 导致「登录界面与新布局重叠」（这是实测踩过的 bug）。 因此这里只约束「已显示时」的尺寸与溢出，display 交给 JS 与经典规则决定。 */ html[data-layout="framework"] #app-view { height: 100vh; height: 100dvh; overflow: hidden; } html[data-layout="framework"] .fw-shell { display: flex; flex-direction: column; height: 100%; background: var(--bg-page); transition: background .3s ease; } html[data-layout="framework"] .fw-body { flex: 1; min-height: 0; display: flex; gap: 0; } /* ============================================================ 顶栏（门户式） ============================================================ */ html[data-layout="framework"] .fw-topbar { height: var(--fw-topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border-1); transition: background .3s ease, border-color .3s ease; position: relative; z-index: 60; /* 高于左栏与内容，保证下拉不被盖住 */ } html[data-layout="framework"] .fw-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); flex-shrink: 0; cursor: pointer; } html[data-layout="framework"] .fw-brand .mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border-2); } html[data-layout="framework"] .fw-brand .mark img { width: 19px; height: 19px; } html[data-layout="framework"] .fw-brand .name { font-size: 15px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } /* 顶栏主导航：横向排布。 ⚠️ 这里刻意【不用】overflow:hidden —— 那会让超出宽度的导航项被裁切后 仍然参与布局与命中测试，出现「看不见但压住了别的按钮」的假交互问题。 ⚠️ 也不能让 .fw-nav 收缩到内容宽度以下：实测容器 766px、内容 812px 时， 最后一项「服务器消息」会溢出到「更多」按钮与搜索框下面，导致点不动。 所以按断点显式隐藏多余项，保证「容器宽度 ≥ 可见项总宽」。 */ html[data-layout="framework"] .fw-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; flex-wrap: nowrap; } html[data-layout="framework"] .fw-navlink { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border-radius: var(--radius-s); font-size: 13.5px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; cursor: pointer; flex: 0 0 auto; transition: background .15s ease, color .15s ease; position: relative; } html[data-layout="framework"] .fw-navlink .mc-ico { opacity: .85; } html[data-layout="framework"] .fw-navlink:hover { background: var(--bg-hover); color: var(--text-primary); } html[data-layout="framework"] .fw-navlink.active { background: var(--bg-active); color: var(--text-primary); font-weight: 600; } /* 当前项底部强调条（门户常见做法，用主题强调色） */ html[data-layout="framework"] .fw-navlink.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); } /* 「更多」下拉 */ html[data-layout="framework"] .fw-more { position: relative; flex-shrink: 0; } html[data-layout="framework"] .fw-more-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: none; background: transparent; color: var(--text-secondary); font-size: 13.5px; font-family: inherit; border-radius: var(--radius-s); cursor: pointer; } html[data-layout="framework"] .fw-more-btn:hover { background: var(--bg-hover); color: var(--text-primary); } html[data-layout="framework"] .caret { font-size: 10px; opacity: .7; transition: transform .2s ease; } html[data-layout="framework"] .fw-more-btn[aria-expanded="true"] .caret, html[data-layout="framework"] .fw-user-btn[aria-expanded="true"] .caret { transform: rotate(180deg); } html[data-layout="framework"] .fw-more-menu, html[data-layout="framework"] .fw-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 216px; max-height: min(72vh, 620px); overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--radius-m); box-shadow: var(--shadow-3); padding: 8px; display: none; z-index: 80; } html[data-layout="framework"] .fw-more-menu { right: auto; left: 0; } html[data-layout="framework"] .fw-more-menu.open, html[data-layout="framework"] .fw-user-menu.open { display: block; } html[data-layout="framework"] .fw-user-menu { min-width: 268px; } html[data-layout="framework"] .fw-menu-sec { padding: 4px 0; } html[data-layout="framework"] .fw-menu-sec + .fw-menu-sec { border-top: 1px solid var(--border-1); } html[data-layout="framework"] .fw-menu-title { font-size: 11px; color: var(--text-caption); letter-spacing: .6px; padding: 6px 10px 4px; } html[data-layout="framework"] .fw-menu-sec .fw-navlink { display: flex; width: 100%; height: 34px; box-sizing: border-box; } html[data-layout="framework"] .fw-menu-sec .fw-navlink.active::after { display: none; } html[data-layout="framework"] .fw-menu-foot { border-top: 1px solid var(--border-1); margin-top: 4px; padding-top: 6px; } html[data-layout="framework"] .fw-menu-foot .logout-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; box-sizing: border-box; border: none; background: transparent; cursor: pointer; color: var(--text-secondary); font-size: 13.5px; font-family: inherit; border-radius: var(--radius-s); text-align: left; } html[data-layout="framework"] .fw-menu-foot .logout-btn:hover { background: var(--bg-hover); color: var(--text-primary); } /* 搜索框：顶栏右侧留白处。 实测顶栏宽度预算（1600px 屏，左右 padding 各 20）： 品牌 ~130 + 主导航 ~812 + 「更多」59 + 搜索 + 图表区 343 + 各处 gap ≈ 1560 已用 ⇒ 搜索最多只能拿 ~200px，否则总宽超标，flex 会把导航压到内容宽度以下， 末项「服务器消息」溢出到「更多」/图标下面 → 点不动。 因此 basis 设为 220px 并允许收缩到 150px；超大屏再靠 flex-grow 自然变宽。 */ html[data-layout="framework"] .fw-search { flex: 1 1 220px; min-width: 150px; max-width: 420px; position: relative; margin-left: 8px; } html[data-layout="framework"] .fw-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-caption); pointer-events: none; } html[data-layout="framework"] .fw-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; box-sizing: border-box; font-size: 13px; color: var(--text-primary); border: 1px solid var(--border-2); border-radius: 999px; background: var(--bg-page); outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } html[data-layout="framework"] .fw-search input::placeholder { color: var(--text-caption); } html[data-layout="framework"] .fw-search input:focus { border-color: var(--text-tertiary); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--bg-surface); } /* 右侧图标按钮 + 用户区 */ html[data-layout="framework"] .fw-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } html[data-layout="framework"] .fw-iconbtn { position: relative; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; cursor: pointer; } html[data-layout="framework"] .fw-iconbtn:hover { background: var(--bg-hover); border-color: var(--border-2); } html[data-layout="framework"] .fw-iconbtn .count { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; display: none; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; color: var(--accent-fg); background: var(--accent); border-radius: 999px; } html[data-layout="framework"] .fw-iconbtn .count.show, html[data-layout="framework"] .fw-iconbtn .count:not(:empty) { display: inline-flex; } html[data-layout="framework"] .fw-user { position: relative; flex-shrink: 0; } html[data-layout="framework"] .fw-user-btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 6px; box-sizing: border-box; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; font-family: inherit; } html[data-layout="framework"] .fw-user-btn:hover { background: var(--bg-hover); border-color: var(--border-2); } html[data-layout="framework"] .fw-user-btn .avatar { width: 30px; height: 30px; font-size: 12px; } html[data-layout="framework"] .fw-user-btn .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 132px; } html[data-layout="framework"] .fw-user-btn .n { font-size: 13px; font-weight: 600; color: var(--text-primary); max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-layout="framework"] .fw-user-btn .r { font-size: 11px; color: var(--text-caption); } /* 汉堡按钮：只在窄屏出现（顶栏导航放不下时） */ html[data-layout="framework"] .fw-burger { display: none; flex-shrink: 0; } /* ============================================================ 左栏（分类导航） ============================================================ */ html[data-layout="framework"] .fw-rail { width: var(--fw-rail-w); flex-shrink: 0; background: var(--bg-surface); border-right: 1px solid var(--border-1); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; transition: width .26s cubic-bezier(.22,.61,.36,1), background .3s ease, border-color .3s ease; } html[data-layout="framework"] .fw-rail::-webkit-scrollbar { width: 6px; } html[data-layout="framework"] .fw-rail::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 6px; } /* 横滑分类条只在窄屏（≤1024px）出现；桌面端侧边栏本身就是完整列表，不需要它 */ html[data-layout="framework"] .fw-rail-bar { display: none; } html[data-layout="framework"] .fw-rail-inner { padding: 14px 12px 28px; } html[data-layout="framework"] .fw-rail-title { font-size: 11px; color: var(--text-caption); letter-spacing: .6px; padding: 12px 10px 6px; } html[data-layout="framework"] .fw-rail-group:first-child .fw-rail-title { padding-top: 2px; } html[data-layout="framework"] .fw-rail-link { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-s); color: var(--text-secondary); font-size: 13.5px; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-layout="framework"] .fw-rail-link .mc-ico { opacity: .9; flex-shrink: 0; } html[data-layout="framework"] .fw-rail-link > span:not(.count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-layout="framework"] .fw-rail-link:hover { background: var(--bg-hover); color: var(--text-primary); } html[data-layout="framework"] .fw-rail-link.active { background: var(--bg-active); color: var(--text-primary); font-weight: 600; } html[data-layout="framework"] .fw-rail-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } html[data-layout="framework"] .fw-rail-link .count { margin-left: auto; font-size: 11px; color: var(--text-caption); background: var(--bg-subtle); padding: 1px 7px; border-radius: 999px; } /* ============================================================ 主区 ============================================================ */ html[data-layout="framework"] .fw-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 60px; scroll-behavior: smooth; } /* 框架布局下内容更宽：门户式页面本来就该利用横向空间 */ html[data-layout="framework"] .fw-main > .page { max-width: var(--fw-maxw); margin: 0 auto; padding: 22px 28px 0; box-sizing: border-box; } /* 楼层之间统一的呼吸感 */ html[data-layout="framework"] .fw-main > .page > .stat-section, html[data-layout="framework"] .fw-main > .page > .fw-floor { margin-top: var(--fw-gap); } /* ============================================================ 内容楼层（framework 布局的首页由 views/dashboard.js 产出） ============================================================ */ html[data-layout="framework"] .fw-hero { border-radius: var(--radius-l); border: 1px solid var(--border-1); background: var(--bg-surface); padding: 26px 28px; position: relative; overflow: hidden; } html[data-layout="framework"] .fw-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 120% at 88% 0%, var(--focus-ring), transparent 62%); } html[data-layout="framework"] .fw-hero h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); } html[data-layout="framework"] .fw-hero p { font-size: 13.5px; color: var(--text-tertiary); margin: 0 0 18px; } html[data-layout="framework"] .fw-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } html[data-layout="framework"] .fw-kpi { background: var(--bg-subtle); border: 1px solid var(--border-2); border-radius: var(--radius-m); padding: 12px 14px; } html[data-layout="framework"] .fw-kpi .k { font-size: 11.5px; color: var(--text-caption); margin-bottom: 5px; } html[data-layout="framework"] .fw-kpi .v { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; } html[data-layout="framework"] .fw-kpi .v small { font-size: 12px; font-weight: 500; color: var(--text-caption); } html[data-layout="framework"] .fw-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } html[data-layout="framework"] .fw-quick a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--border-2); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } html[data-layout="framework"] .fw-quick a:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-3); } /* 左右非对称分栏：窄侧栏 + 宽主区 这是本布局与经典布局在「信息密度」上的关键差异 —— 窄栏放排行/筛选这类短列表，宽栏放卡片网格。 断点：≤1180px 变单列（窄栏落到上方），保证手机上不会挤成两列窄条。 */ html[data-layout="framework"] .fw-split { display: grid; gap: var(--fw-gap); grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; } html[data-layout="framework"] .fw-split-side, html[data-layout="framework"] .fw-split-main { min-width: 0; } @media (max-width: 1180px) { html[data-layout="framework"] .fw-split { grid-template-columns: minmax(0, 1fr); } } html[data-layout="framework"] .fw-floor-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } html[data-layout="framework"] .fw-floor-title { font-size: 16px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } html[data-layout="framework"] .fw-floor-title::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); } html[data-layout="framework"] .fw-floor-more { margin-left: auto; font-size: 12.5px; color: var(--text-caption); text-decoration: none; cursor: pointer; } html[data-layout="framework"] .fw-floor-more:hover { color: var(--text-primary); } /* 楼层内的卡片网格：随断点变列数（非对称感来自「主区 + 侧栏」而不是网格本身） */ html[data-layout="framework"] .fw-grid { display: grid; gap: var(--fw-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-layout="framework"] .fw-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-m); padding: 14px 16px; min-width: 0; transition: border-color .15s ease, background .15s ease, transform .15s ease; } html[data-layout="framework"] .fw-card:hover { border-color: var(--border-3); } html[data-layout="framework"] a.fw-card { text-decoration: none; color: inherit; cursor: pointer; display: block; } html[data-layout="framework"] .fw-card .t { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-layout="framework"] .fw-card .d { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-layout="framework"] .fw-card .m { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--text-caption); } /* 列表型楼层（公告 / 消息） */ html[data-layout="framework"] .fw-list { display: flex; flex-direction: column; } html[data-layout="framework"] .fw-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-1); font-size: 13.5px; color: var(--text-secondary); text-decoration: none; cursor: pointer; } html[data-layout="framework"] .fw-list-row:last-child { border-bottom: none; } html[data-layout="framework"] .fw-list-row:hover { color: var(--text-primary); } html[data-layout="framework"] .fw-list-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-layout="framework"] .fw-list-row .meta { font-size: 11.5px; color: var(--text-caption); flex-shrink: 0; } html[data-layout="framework"] .fw-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text-caption); } html[data-layout="framework"] .fw-skel { border-radius: var(--radius-s); background: var(--bg-subtle); height: 14px; margin: 6px 0; overflow: hidden; position: relative; } html[data-layout="framework"] .fw-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--focus-ring), transparent); animation: fwShimmer 1.4s infinite; } @keyframes fwShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ============================================================ 响应式 ============================================================ */ @media (max-width: 1440px) { html[data-layout="framework"] .fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 1440 以下顶栏变紧：主导航保留前 7 项，其余进「更多」。 必须按断点真的隐藏，光靠 flex 收缩会让末项溢出压住「更多」与搜索框。 */ html[data-layout="framework"] .fw-nav .fw-navlink:nth-child(n+8) { display: none; } } @media (max-width: 1180px) { html[data-layout="framework"] { --fw-rail-w: 196px; --fw-gap: 16px; } html[data-layout="framework"] .fw-nav .fw-navlink:nth-child(n+6) { display: none; } html[data-layout="framework"] .fw-user-btn .who { display: none; } } @media (max-width: 1024px) { /* 左栏改为「横向分类条」，不再占竖向空间。 滚动容器与内容层的宽度契约（这是手机上「滑不动」的根因）： · .fw-rail 是滚动容器（overflow-x:auto） · .fw-rail-inner 必须保持**内容固有宽度**——用 width:max-content 而不是默认的 100%。若 inner 被压成容器宽，子项会被换行/挤压， scrollWidth == clientWidth，自然「滑不动」。 · touch-action: pan-x 允许浏览器把横向手势交给这个容器处理。 */ html[data-layout="framework"] .fw-body { flex-direction: column; } /* 平板：与手机一致 —— 常驻横滑分类条 + 汉堡抽屉（完整列表）。 rail 变 fixed 抽屉后不再占据文档流，主区自动占满宽度。 */ html[data-layout="framework"] .fw-rail { position: fixed; top: var(--fw-topbar-h); left: 0; bottom: 0; z-index: 200; width: 268px; max-width: 84vw; border-right: 1px solid var(--border-1); border-bottom: none; background: var(--bg-surface); box-shadow: var(--shadow-3); transform: translateX(0); transition: transform .28s cubic-bezier(.22,.61,.36,1); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } html[data-layout="framework"] .fw-shell.drawer-closed .fw-rail { transform: translateX(-105%); } html[data-layout="framework"] .fw-rail-bar { display: block; flex-shrink: 0; position: static; height: 40px; width: 100%; background: var(--bg-surface); border-bottom: 1px solid var(--border-1); overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } html[data-layout="framework"] .fw-rail-bar-inner { display: flex; align-items: center; gap: 6px; width: max-content; min-width: 100%; box-sizing: border-box; padding: 4px 10px; } html[data-layout="framework"] .fw-rail-bar .fw-rail-link { height: 30px; padding: 0 10px; white-space: nowrap; border: 1px solid var(--border-2); border-radius: 999px; } html[data-layout="framework"] .fw-rail-bar .fw-rail-link.active::before { display: none; } html[data-layout="framework"] .fw-rail-inner { display: block; padding: 10px 12px 28px; } html[data-layout="framework"] .fw-rail-title { display: block; } html[data-layout="framework"] .fw-rail-group { display: block; } html[data-layout="framework"] .fw-rail-group + .fw-rail-group::before { display: none; } html[data-layout="framework"] .fw-rail-inner .fw-rail-link { height: 38px; border: none; border-radius: var(--radius-s); white-space: normal; } html[data-layout="framework"] .fw-rail-inner .fw-rail-link.active::before { display: block; } html[data-layout="framework"] .fw-rail-title { display: none; } html[data-layout="framework"] .fw-rail-group { display: flex; align-items: center; gap: 6px; } html[data-layout="framework"] .fw-rail-group + .fw-rail-group::before { content: ""; width: 1px; height: 18px; background: var(--border-2); margin: 0 4px; } html[data-layout="framework"] .fw-rail-link { height: 32px; padding: 0 10px; white-space: nowrap; border: 1px solid var(--border-2); border-radius: 999px; } html[data-layout="framework"] .fw-rail-link.active::before { display: none; } html[data-layout="framework"] .fw-rail-link .count { margin-left: 4px; } html[data-layout="framework"] .fw-nav { display: none; } html[data-layout="framework"] .fw-more { display: none; } html[data-layout="framework"] .fw-burger { display: flex; } } @media (max-width: 820px) { html[data-layout="framework"] { --fw-gap: 14px; } html[data-layout="framework"] .fw-grid { grid-template-columns: minmax(0, 1fr); } html[data-layout="framework"] .fw-topbar { padding: 0 10px; gap: 6px; } html[data-layout="framework"] .fw-brand .name { display: none; } html[data-layout="framework"] .fw-main > .page { padding: 16px 12px 0; } html[data-layout="framework"] .fw-hero { padding: 18px 16px; border-radius: var(--radius-m); } html[data-layout="framework"] .fw-hero h1 { font-size: 19px; } html[data-layout="framework"] .fw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 手机端顶栏：放「汉堡 + 品牌 + 搜索 + 用户 + **布局切换**」。 - 搜索框弹性占满剩余空间（flex:1 + min-width:0），不会被压成一条缝； - 消息/邮箱/主题三个图标收进用户菜单（否则搜索框只剩 14px）； - **布局切换必须留在顶栏**：用户明确要求在顶端提供布局开关， 而且它也是手机上唯一始终可见的「切回经典布局」入口。 */ html[data-layout="framework"] .fw-search { flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 0; } html[data-layout="framework"] .fw-actions { gap: 2px; } html[data-layout="framework"] #fw-msg-btn, html[data-layout="framework"] #fw-mail-btn, html[data-layout="framework"] #theme-toggle { display: none; } /* 顶栏布局切换按钮：手机端保持可见可点（36×36 触摸目标） */ html[data-layout="framework"] #fw-switch-layout { display: flex; width: 36px; height: 36px; } html[data-layout="framework"] .fw-user-btn { padding: 0 4px; height: 38px; } html[data-layout="framework"] .fw-user-btn .caret { display: none; } /* 顶栏收起的入口，在手机端的用户菜单里补回来（纯 CSS 控制显隐）。 ⚠️ 特异性必须高于文件末尾的桌面隐藏规则（html[data-layout] .fw-menu-mobile{display:none}）—— 两者同为 (0,2,1) 时按源顺序后出现的赢，桌面规则在文件尾会覆盖这里。 所以给手机规则再加一层 .fw-user-menu 祖先（.fw-menu-mobile 只在用户菜单里出现）， 特异性 (0,3,1) 恒胜。实测踩过：不加时手机端这组入口高度为 0，日夜切换点不到。 */ html[data-layout="framework"] .fw-user-menu .fw-menu-mobile { display: block; } /* ── 手机端导航：横滑分类条（常驻）+ 抽屉（汉堡展开完整分组列表）── 用户的两个诉求分别是： · 「顶端栏应可以滑动」→ 常驻横滑分类条（高 40px，touch-action: pan-x） · 「打不开侧边栏」 → 汉堡必须能展开**完整分组列表**的抽屉 两个都要：横条解决"快速跳转"，抽屉解决"看全目录"。 横条是 .fw-shell 的直接子元素（在 .fw-body 之外），不随抽屉移动 —— 抽屉滑入滑出都不影响它；上一轮把横条放进抽屉里，闭合时被一起带走， 常驻就成了空话，汉堡也成了死按钮（实测踩过）。 */ html[data-layout="framework"] .fw-rail-bar { display: block; flex-shrink: 0; position: static; height: 40px; width: 100%; background: var(--bg-surface); border-bottom: 1px solid var(--border-1); overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } html[data-layout="framework"] .fw-rail-bar-inner { display: flex; align-items: center; gap: 6px; width: max-content; min-width: 100%; box-sizing: border-box; padding: 4px 10px; } html[data-layout="framework"] .fw-rail-bar .fw-rail-link { height: 30px; padding: 0 10px; white-space: nowrap; border: 1px solid var(--border-2); border-radius: 999px; } html[data-layout="framework"] .fw-rail-bar .fw-rail-link.active::before { display: none; } /* 抽屉：fixed 浮层从左滑入，带遮罩，点遮罩/内容区收起 */ html[data-layout="framework"] .fw-rail { position: fixed; top: var(--fw-topbar-h); left: 0; bottom: 0; z-index: 200; width: 268px; max-width: 84vw; border-right: 1px solid var(--border-1); border-bottom: none; background: var(--bg-surface); box-shadow: var(--shadow-3); transform: translateX(0); transition: transform .28s cubic-bezier(.22,.61,.36,1); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } html[data-layout="framework"] .fw-shell.drawer-closed .fw-rail { transform: translateX(-105%); } /* 完整分组列表（抽屉主体）：纵向滚动 */ html[data-layout="framework"] .fw-rail-inner { display: block; padding: 10px 12px 28px; } html[data-layout="framework"] .fw-rail-title { display: block; } html[data-layout="framework"] .fw-rail-group { display: block; } html[data-layout="framework"] .fw-rail-group + .fw-rail-group::before { display: none; } html[data-layout="framework"] .fw-rail-inner .fw-rail-link { height: 38px; border: none; border-radius: var(--radius-s); white-space: normal; } html[data-layout="framework"] .fw-rail-inner .fw-rail-link.active::before { display: block; } /* 抽屉遮罩：必须是**真实元素**而不是 ::before 伪元素 —— 伪元素无法接收点击事件，所以「点其他区域收起侧边栏」永远不生效 （这是实测确认的 bug 3）。这里改用 .fw-rail-mask 真元素，由 JS 绑点击关闭。 ⚠️ 基础规则（display:none）在文件末尾且特异性相同，所以这里用 `.fw-shell:not(.drawer-closed)` 提高针对性，保证「只有抽屉开着才显示遮罩」。 */ html[data-layout="framework"] .fw-shell:not(.drawer-closed) .fw-rail-mask { display: block; } } /* 桌面端隐藏「手机端补充入口」那一组（仅窄屏显示） */ html[data-layout="framework"] .fw-menu-mobile { display: none; } /* 抽屉遮罩（真实元素，可接收点击）；桌面端不显示 */ html[data-layout="framework"] .fw-rail-mask { display: none; position: fixed; inset: var(--fw-topbar-h) 0 0 0; z-index: 190; background: rgba(0, 0, 0, .42); cursor: pointer; }