FamilyBook

Files

T

laoyang 69c47c3c43 网页端下拉框改成自绘浮层（照 FeedLite 的做法）(#85 )

用户 2026-11-05：「网页版的下拉框也太丑了。你参考一下那个反馈系统里面的
下拉框到底是怎么做的？按它的做法做，它也有主题颜色，我们这个也有主题颜色，
就按照一样的做法去做。」

看了 FeedLite（~/code/FeedLite）的实现，关键结论：
  **原生 <select> 收起时能改样式，但展开的选项列表由浏览器绘制，CSS 完全改不动**
  （只能改 option 底色，各平台还不统一）⇒ 想好看只有自绘这条路。

照它的做法移植：

① CSS（assets/css/app.css）
   .sel-native  原生 select 视觉隐藏（**不能 display:none**，那样不参与提交）
   .sel         外层 inline-flex
   .sel-btn     触发按钮 —— 外观与普通输入框完全一致（40 高、同圆角同边框）
   .sel-caret   自绘箭头（CSS mask + 内联 SVG），**打开时转 180° 并变主题色**
   .sel-panel   浮层，position:fixed 挂 body
   .sel-item    列表项：34 高、圆角 7
   .sel-item.on 选中项：深一档主题底色 + 主题色文字 + 右侧对勾

② 主题色三档浅色（照 FeedLite 的比例）
   helpers.php 新增 fb_color_tint()（把 hex 往白色混）。
   layout.php 在 <body> 的 style 里输出：
     --brand-tint-1（混 91% 白）→ hover
     --brand-tint-2（混 80% 白）→ 选中项
     --brand-tint-3（混 72% 白）→ 选中项 hover
   ⚠️ 在 PHP 里算好，**不用 CSS 的 color-mix()** —— FeedLite 实测过：
      `color-mix(in srgb, var(--brand) 9%, #fff)` 在 Chrome 里解析成透明。

③ JS（assets/js/app.js 新增 fbBindSelects()）
   遍历所有 select，在旁边生成按钮 + 浮层，原生 select 保留参与提交。
   · 派发原生 change → 兼容 onchange="this.form.submit()" 的内联写法
   · 浮层 fixed 定位（面板/浮层里大量 overflow:hidden，放旁边会被裁）
   · 下方空间不足且上方更宽裕时**向上翻**
   · 键盘：↑↓ / Home / End / Enter / Esc
   · 浮层 minWidth 跟随触发按钮 → "和输入框一样宽"
   · data-sel-enhanced 幂等标记

④ AJAX 路径也要增强
   task_panel.paint() 与 entry_popup.loadPanel() 里，紧跟 fbBootAntd() 之后
   调一次 window.fbBindSelects(document) —— 否则动态插入的 select 是裸的。

⚠️ app.js 整个是 IIFE 包裹的（结尾 `})();`），新函数必须插在闭包内部；
   直接追加到结尾会跑到全局作用域。

实测（Playwright + 站点真实 app.js/css）：
  增强：data-sel-enhanced=1、原生 select 已隐藏、按钮文字「工作相关」✅
  尺寸：按钮 648 x 40，行宽 648 → 占满整行 ✅
  浮层：宽 648（与按钮同宽）✅ 6 项、选中项有对勾 ✅
  打开态：底色 rgb(250,242,238)=tint-1、文字 rgb(168,74,40)=brand、
          箭头 rotate 180° ✅
  选「个人事务」→ select.value=3、按钮文字同步、浮层关闭 ✅

2026-11-05 20:23:16 +08:00

add_modal.js

v81：首页卡片「新增电影」「新建纪念日」弹框（不离开首页就把事办了）

2026-10-22 22:05:17 +08:00

addr_suggest.js

行程：#47~#51 打包 —— 双轨状态、动态类型、动作按钮、去提示 (#51 )

2026-11-05 12:40:57 +08:00

app.js

网页端下拉框改成自绘浮层（照 FeedLite 的做法）(#85 )

2026-11-05 20:23:16 +08:00

cal_sync.js

日程新建/修改不再刷新页面：服务端片段 + 就地重绘 (#37 )