下拉菜单改成极简小浮窗(参考家书 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
+8 -16
View File
@@ -88,24 +88,16 @@ function fb_layout_head($title, array $opt = []) {
<a class="btn-mini hide-sm" href="new.php">我要反馈</a>
<?php if (count($swList) > 1): ?>
<?php /* 软件切换收进右上角汉堡菜单:
* 原来平铺一行「选择软件:」+ 若干 chip,占掉一整行,
* 而且软件一多就把列表往下推。收进抽屉后页面更干净,
* 移动端也不用单独适配那排 chip。 */ ?>
<?php /* 右上角三横线:点开就是一个小下拉菜单。
不用整页平铺「选择软件:」,也不必做成侧边栏。 */ ?>
<button type="button" class="sw-toggle" id="swToggle"
aria-label="切换软件" aria-expanded="false" aria-controls="swPanel">
<span></span><span></span><span></span>
</button>
<?php endif; ?>
</div>
<?php if (count($swList) > 1): ?>
<?php /* 遮罩:抽屉打开时盖住正文,点击即关。
用户要求「把下面的内容全部盖住」,加一层浅遮罩最直观。 */ ?>
<div class="sw-mask" id="swMask" hidden></div>
<div class="sw-panel" id="swPanel" hidden>
<div class="wrap">
<div class="sw-panel-hd">选择软件</div>
<?php /* 极简下拉:贴在按钮下方、右对齐,内容多高就多高。
参考家书 FamilyBook 顶栏那个小浮窗的做法。 */ ?>
<div class="sw-panel" id="swPanel" hidden>
<div class="sw-panel-list">
<?php foreach ($swList as $s): ?>
<?php
@@ -114,14 +106,14 @@ function fb_layout_head($title, array $opt = []) {
if ($href === '') { $href = '?sw=' . urlencode((string)$s['slug']); }
?>
<a class="sw-item<?php echo $on ? ' on' : ''; ?>" href="<?php echo e($href); ?>">
<?php echo fb_software_badge($s, 'md'); ?>
<?php echo fb_software_badge($s, 'sm'); ?>
<?php if ($on): ?><span class="sw-item-cur">当前</span><?php endif; ?>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</header>
<main class="wrap">
<?php