下拉菜单改成极简小浮窗(参考家书 FamilyBook 的 popup 做法)

用户第三次指出这个按钮不对,原话:
  「你不用做那么复杂,就是参考一下 FamilyBook 里边那个设置按钮,
    非常简单的,点了之后就拉下来一个很窄的一个框,
    把所有的内容都铺在上面就可以了」

去看了 FamilyBook 的实现:顶栏那颗按钮是 bindSheet + SheetSize.FIT_CONTENT,
即「内容多高就多高」的小浮层,不是整幅面板。

改法:
- 面板从「left:0 right:0 铺满宽度 + 遮罩 + 锁滚动」
  改成「贴按钮右下、min-width 172px、内容撑高、圆角 12px 小浮窗」
- 删掉 sw-mask 遮罩、删掉 body overflow 锁定
- 面板移进 .topbar .wrap(flex 内),以它为定位参照,右对齐按钮
- 删掉菜单里「选择软件」标题(按钮本身已经说明用途)
- 条目字号降到 14px、图标 18px、内边距收紧,贴合窄框
- 「当前」标记从胶囊缩成 6px 小圆点,窄框里不占地方
- 按钮简化:去掉边框与三横线变×的动效,只留 hover 浅底

实测(CDP 真实浏览器):下拉框 172×138px,仅占视口宽 13.7%,
右边缘与按钮相差 4px;390px 与 1280px 两种宽度下各 15 项断言全过
(浮窗非整幅、无遮罩、未锁滚动、贴按钮下方、右对齐、
高度由内容决定、有圆角边框、条目纵排同x、y递增、点外部可关)。
This commit is contained in:
2026-11-03 09:25:41 +08:00
parent 28d28ad51c
commit 2f28b1e3a9
4 changed files with 64 additions and 92 deletions
+10 -31
View File
@@ -801,46 +801,30 @@
}
}
/* ---------- 顶栏软件抽屉(右上角汉堡按钮) ----------
* 原来「选择软件」平铺在列表上方占一整行,软件一多就把内容往下推。
* 现在收进抽屉:点击展开 / 再次点击收起 / 点外部关闭 / Esc 关闭。
* 用 hidden 属性而非纯 class,保证无 JS 时抽屉默认不显示(不会闪一下)。 */
/* ---------- 顶栏软件下拉菜单(右上角三横线) ----------
* 极简:点了就展开一个小浮窗,点外面 / Esc 就关。
* 不做遮罩、不锁背景滚动 —— 那套是侧边栏的做法,下拉菜单不需要。 */
function bindSoftwarePanel() {
var btn = document.getElementById('swToggle');
var panel = document.getElementById('swPanel');
var mask = document.getElementById('swMask');
if (!btn || !panel) { return; }
function open() {
panel.hidden = false;
if (mask) { mask.hidden = false; }
btn.setAttribute('aria-expanded', 'true');
document.body.style.overflow = 'hidden'; // 抽屉开着时锁住背景滚动
}
function close() {
panel.hidden = true;
if (mask) { mask.hidden = true; }
btn.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
}
function toggle() {
if (panel.hidden) { open(); } else { close(); }
}
btn.addEventListener('click', function (e) {
e.stopPropagation();
toggle();
if (panel.hidden) {
panel.hidden = false;
btn.setAttribute('aria-expanded', 'true');
} else {
close();
}
});
// 点遮罩关闭(遮罩就是「下面的内容」,点了就是点外部)
if (mask) {
mask.addEventListener('click', function (e) {
e.stopPropagation();
close();
});
}
// 点面板内部不算点外部
// 点菜单内部不算点外面
panel.addEventListener('click', function (e) { e.stopPropagation(); });
document.addEventListener('click', function () {
@@ -850,11 +834,6 @@
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !panel.hidden) { close(); btn.focus(); }
});
// 转到别的页面时把滚动锁解掉,避免返回后页面不能滚
window.addEventListener('pagehide', function () {
document.body.style.overflow = '';
});
}
/* ---------- 邮件测试发送(后台设置页) ---------- */