laoyang/FeedLite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
用户第三次指出这个按钮不对，原话：
  「你不用做那么复杂，就是参考一下 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:
laoyang
2026-11-03 09:25:41 +08:00
parent 28d28ad51c
commit 2f28b1e3a9
4 changed files with 64 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+45 -44
View File
@@ -33,7 +33,7 @@ p{margin:8px 0}
border-bottom:1px solid var(--line);
/* 软件抽屉是 absolute + top:100%，需要它来做定位参照，否则会跑到页面最上面 */
}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:66px}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:66px; position:relative}
.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)}
/* 顶栏里的软件标识：17px 字 + 32px 图标 ——
@@ -47,64 +47,65 @@ p{margin:8px 0}
.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;
flex:none; width:38px; height:38px; padding:0; margin-left:2px;
display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
background:transparent; border:0; border-radius:9px;
cursor:pointer;
}
.sw-toggle span{
display:block; width:17px; height:2px; border-radius:2px;
background:var(--fg); transition:transform .18s ease, opacity .18s ease;
display:block; width:18px; height:2px; border-radius:2px;
background:var(--fg);
}
.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-toggle:hover{background:var(--brand-soft)}
.sw-toggle[aria-expanded="true"]{background:var(--brand-soft)}
/* ---------- 软件抽屉：一律竖排浮层，覆盖在正文之上 ----------
* 用户 2026-11-03：「都保持统一，点了之后下拉出来一个条一个条竖着排列，
* 把下面的内容全部盖住」。
* 早期实现是宽屏横排、窄屏竖排两套，结果手机上会跟正文撞在一起；
* 现在只有一种形态：绝对定位的浮卡，overlay 盖住页面内容。 */
/* ---------- 软件下拉菜单（右上角三横线） ----------
* 参考家书 FamilyBook 顶栏那个 popup 的做法：**内容多高就多高的小浮窗**，
* 紧贴按钮下方、宽度由内容撑开，不是铺满整屏的面板，也不加遮罩。
* 用户 2026-11-03：「不用做那么复杂，就是点了之后拉下来一个很窄的框，
* 把所有的内容都铺在上面就可以了」。
*
* ⚠️ 用过两版都不对：
* ① 宽屏横排 / 窄屏竖排两套 —— 手机上和正文撞在一起
* ② 整幅 absolute 面板 + 遮罩 —— 太重了，像侧边栏而不是下拉菜单
* 现在只有这一种形态：小浮窗，贴按钮右侧对齐。 */
.sw-panel{
position:absolute; left:0; right:0; top:100%;
position:absolute; top:calc(100% - 4px); right:12px;
z-index:60;
min-width:172px; max-width:min(280px, calc(100vw - 24px));
padding:6px;
background:var(--card);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
box-shadow:0 18px 40px -12px rgba(20,30,50,.28);
max-height:calc(100vh - 66px);
border:1px solid var(--line);
border-radius:12px;
box-shadow:0 10px 28px -8px rgba(20,30,50,.28), 0 2px 6px rgba(20,30,50,.08);
max-height:calc(100vh - 90px);
overflow:auto;
}
.sw-panel .wrap{padding-top:14px; padding-bottom:14px}
.sw-panel-hd{
font-size:13px; font-weight:600; color:var(--muted);
margin-bottom:8px; letter-spacing:.2px;
}
/* 永远竖排：一条一行，不再有宽屏横排分支 */
.sw-panel-list{display:flex; flex-direction:column; gap:2px}
/* 菜单里不再需要「选择软件」这个标题 —— 按钮本身已经说明用途 */
.sw-panel-hd{display:none}
.sw-panel .wrap{padding:0; max-width:none}
/* 一条一行，竖排 */
.sw-panel-list{display:flex; flex-direction:column; gap:1px}
.sw-item{
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:10px; color:var(--fg);
border:1px solid transparent;
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:8px; color:var(--fg);
font-size:14px; white-space:nowrap;
border:0;
}
.sw-item:hover{background:var(--bg, #f6f8fb); text-decoration:none; color:var(--fg)}
.sw-item.on{background:var(--brand-soft); border-color:var(--brand-soft)}
.sw-item:hover{background:var(--brand-soft); text-decoration:none; color:var(--fg)}
.sw-item.on{background:var(--brand-soft)}
.sw-item.on .sw-badge-nm{font-weight:700}
.sw-item .sw-badge{gap:7px}
.sw-item .sw-badge-nm{font-size:14px; font-weight:500}
.sw-item .sw-badge-img{width:18px !important; height:18px !important}
/* 「当前」标记缩成一个小圆点，别在窄框里占地方 */
.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;
}
/* 抽屉打开时给正文加一层遮罩，点它也能关 —— 视觉上更明确「盖住了」 */
.sw-mask{
position:fixed; inset:0; z-index:55;
background:rgba(15,23,35,.18);
margin-left:auto;
width:6px; height:6px; flex:none; border-radius:50%;
background:var(--brand);
font-size:0; line-height:0; overflow:hidden; text-indent:-999px;
}
.topbar .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .logo-mark{