diff --git a/assets/app.js b/assets/app.js index 9ceb42a..8fca85d 100644 --- a/assets/app.js +++ b/assets/app.js @@ -801,6 +801,44 @@ } } + /* ---------- 顶栏软件抽屉（右上角汉堡按钮） ---------- + * 原来「选择软件」平铺在列表上方占一整行，软件一多就把内容往下推。 + * 现在收进抽屉：点击展开 / 再次点击收起 / 点外部关闭 / Esc 关闭。 + * 用 hidden 属性而非纯 class，保证无 JS 时抽屉默认不显示（不会闪一下）。 */ + function bindSoftwarePanel() { + var btn = document.getElementById('swToggle'); + var panel = document.getElementById('swPanel'); + if (!btn || !panel) { return; } + + function open() { + panel.hidden = false; + btn.setAttribute('aria-expanded', 'true'); + } + function close() { + panel.hidden = true; + btn.setAttribute('aria-expanded', 'false'); + } + function toggle() { + if (panel.hidden) { open(); } else { close(); } + } + + btn.addEventListener('click', function (e) { + e.stopPropagation(); + toggle(); + }); + + // 点面板内部不算「点外部」 + panel.addEventListener('click', function (e) { e.stopPropagation(); }); + + document.addEventListener('click', function () { + if (!panel.hidden) { close(); } + }); + + document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && !panel.hidden) { close(); btn.focus(); } + }); + } + /* ---------- 邮件测试发送（后台设置页） ---------- */ function bindMailTest() { var btn = document.getElementById('mailTestBtn'); @@ -853,6 +891,7 @@ bindWontfixPanel(); bindColorPicker(); bindIconPicker(); + bindSoftwarePanel(); bindMailTest(); bindInlineValidate(); // ★ 必须在 bindNoDoubleSubmit 之前 bindNoDoubleSubmit(); diff --git a/assets/style.css b/assets/style.css index 5c717e4..efe3a77 100644 --- a/assets/style.css +++ b/assets/style.css @@ -32,16 +32,66 @@ p{margin:8px 0} -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); } -.topbar .wrap{display:flex; align-items:center; gap:14px; height:72px} +.topbar .wrap{display:flex; align-items:center; gap:14px; height:66px} .topbar .brand-mini{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0} .topbar .brand-mini:hover{text-decoration:none; color:var(--fg)} -/* 顶栏里的软件标识：图标与「XX 反馈系统」一起放大，成为页面主标题 */ -.topbar .brand-mini .sw-badge{gap:11px} -.topbar .brand-mini .sw-badge-nm{font-size:22px; font-weight:700} +/* 顶栏里的软件标识：17px 字 + 32px 图标 —— + * 比「选择软件」标签(13.5px)大两号，又不至于压过内容区标题。 */ +.topbar .brand-mini .sw-badge{gap:9px} +.topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px} @media (max-width:560px){ - .topbar .wrap{height:62px} - .topbar .brand-mini .sw-badge-nm{font-size:17px} - .topbar .brand-mini .sw-badge-img{width:32px !important; height:32px !important} + .topbar .wrap{height:60px} + .topbar .brand-mini .sw-badge-nm{font-size:15.5px} + .topbar .brand-mini .sw-badge-img{width:26px !important; height:26px !important} + .topbar .brand-mini .sw-badge{gap:7px} +} + +/* ---------- 右上角汉堡按钮 + 软件抽屉 ---------- */ +.sw-toggle{ + flex:none; width:40px; height:40px; padding:0; margin-left:2px; + display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; + background:transparent; border:1px solid var(--line); border-radius:10px; + cursor:pointer; +} +.sw-toggle span{ + display:block; width:17px; height:2px; border-radius:2px; + background:var(--fg); transition:transform .18s ease, opacity .18s ease; +} +.sw-toggle:hover{border-color:var(--brand); background:var(--brand-soft)} +.sw-toggle[aria-expanded="true"]{border-color:var(--brand); background:var(--brand-soft)} +/* 展开时变成 × */ +.sw-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} +.sw-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} +.sw-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} + +.sw-panel{ + border-top:1px solid var(--line); + background:var(--card); + box-shadow:0 8px 20px -12px rgba(20,30,50,.18); +} +.sw-panel .wrap{padding-top:14px; padding-bottom:16px} +.sw-panel-hd{ + font-size:13.5px; font-weight:600; color:var(--muted); + margin-bottom:10px; letter-spacing:.2px; +} +.sw-panel-list{display:flex; flex-direction:column; gap:2px} +.sw-item{ + display:flex; align-items:center; gap:10px; + padding:9px 10px; border-radius:10px; color:var(--fg); +} +.sw-item:hover{background:var(--bg, #f6f8fb); text-decoration:none; color:var(--fg)} +.sw-item.on{background:var(--brand-soft)} +.sw-item.on .sw-badge-nm{color:var(--brand); font-weight:700} +.sw-item-cur{ + margin-left:auto; font-size:11.5px; font-weight:600; color:var(--brand); + background:var(--card); border:1px solid var(--brand); + padding:1px 8px; border-radius:99px; +} +@media (min-width:561px){ + .sw-panel-list{flex-direction:row; flex-wrap:wrap; gap:8px} + .sw-item{padding:7px 12px; border:1px solid var(--line)} + .sw-item.on{border-color:var(--brand)} + .sw-item-cur{margin-left:4px} } .topbar .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .topbar .logo-mark{ @@ -139,14 +189,11 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh} overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sw-badge-sm .sw-badge-nm{font-size:14px} -.sw-badge-md .sw-badge-nm{font-size:17px} -.sw-badge-lg .sw-badge-nm{font-size:28px; font-weight:700} -/* 顶栏主标题：图标 + 「XX 反馈系统」，要明显大于正文 */ -.sw-badge-brand .sw-badge-nm{font-size:22px; font-weight:700; letter-spacing:.2px} -@media (max-width:560px){ - /* 窄屏收一点，避免把「全部问题 / 管理后台」挤掉 */ - .sw-badge-brand .sw-badge-nm{font-size:18px} -} +.sw-badge-md .sw-badge-nm{font-size:19px} +.sw-badge-lg .sw-badge-nm{font-size:22px; font-weight:700} +/* 顶栏主标题：比「选择软件」标签(13.5px)大两号 = 17px。 + * 之前给到 26px 反而比内容区标题还小，主次颠倒；这里保持克制。 */ +.sw-badge-brand .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px} /* 页头副行：图标 + 软件名 */ .page-sw-id{margin:0; display:flex; align-items:center} /* 提交页顶部的软件上下文条：同样无背景色，只留一行轻分隔 */ diff --git a/index.php b/index.php index 9fa7792..21e3c20 100644 --- a/index.php +++ b/index.php @@ -103,16 +103,6 @@ fb_layout_head($sw ? fb_software_site_title($sw) : $headTitle, ['software' => $s 我要反馈 -
- 选择软件： -
- - - -
-
-
全部 diff --git a/lib/layout.php b/lib/layout.php index 567e6c1..68fe6f6 100644 --- a/lib/layout.php +++ b/lib/layout.php @@ -55,8 +55,13 @@ function fb_layout_head($title, array $opt = []) { /* 顶栏品牌位：当前在哪个软件下，就显示「图标 + XX 反馈系统」。 * 这是页面唯一的主标题 —— 多软件共用一套反馈系统， * 用户要一眼看清「我现在是在给哪个软件的反馈系统提问题」。 - * 内容区不再重复一遍同样的文字，只保留「图标 + 软件名」。 */ + * 内容区不再重复一遍同样的文字，只保留「图标 + 软件名」。 + * + * 字号刻意比「选择软件」那个标签大一号左右（17px）， + * 不再压过内容区标题 —— 之前给到 26px 反而比下面的字还小， + * 视觉上主次颠倒。 */ $curSw = isset($opt['software']) && is_array($opt['software']) ? $opt['software'] : null; + $swList = fb_softwares(true); ?> @@ -70,9 +75,41 @@ function fb_layout_head($title, array $opt = []) {
全部问题 - 管理后台 - 我要反馈 + 管理后台 + 我要反馈 + + 1): ?> + + +
+ + 1): ?> + +
18, 'md' => 26, 'lg' => 38, 'brand' => 46]; - $fs = ['sm' => 14, 'md' => 19, 'lg' => 28, 'brand' => 32]; + /* 尺寸档位（以「选择软件」标签的 13.5px 为基准，逐档放大）： + * sm 18px 图标 / 14px 字 软件选择器里的小标签 + * md 26px 图标 / 19px 字 「选择软件」抽屉里的条目 + * lg 40px 图标 / 22px 字 内容区「图标 + 软件名」 + * brand 32px 图标 / 17px 字 顶栏主标题 + * + * 🔴 用户明确指出：顶栏标题的字号「比下面还小」是错的，但给到 26px 又太大。 + * 折中标准 = 比「选择软件」那个 13.5px 标签大两号 ≈ 17px。 + * 图标同比缩到 32px，别让图标压过文字。 */ + $px = ['sm' => 18, 'md' => 26, 'lg' => 40, 'brand' => 32]; + $fs = ['sm' => 14, 'md' => 19, 'lg' => 22, 'brand' => 17]; $box = isset($px[$size]) ? $px[$size] : 26; $fnt = isset($fs[$size]) ? $fs[$size] : 19; diff --git a/new.php b/new.php index 8b4c2b5..992acc6 100644 --- a/new.php +++ b/new.php @@ -161,17 +161,8 @@ fb_layout_head('我要反馈', ['robots' => 'noindex,follow', 'software' => $sw] -
- 所属软件 *换软件会刷新下面的分类 -
- - - -
-
- - +