laoyang
69c47c3c43
用户 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、按钮文字同步、浮层关闭 ✅
FamilyBook
家书，记录家庭的全部生活，一本用岁月写成的家谱。
把一个家的「人」「日子」「去过的地方、看过的电影」收进同一本书里。
它是什么
一个自托管的家庭生活系统。它不是又一个待办清单，而是这个家的长期档案 —— 十年之后还能翻出孩子第一次观影的票根、那年暑假走过的路线。
围绕三个圈展开：
- 人：家庭成员、亲友通讯录，以及他们之间的共享关系
- 时间：日历、日程、提醒，以及任务的期限
- 事件：观影、旅行、其他活动 —— 一切都落在同一条时间轴上
它在做什么
| 阶段 | 主题 | 内容 |
|---|---|---|
| 0 | 地基 | 名册、账号、登录、权限模型、安装向导 |
| 1 | 通信 | 通讯录、共享给某个成员、CardDAV 服务端 |
| 2 | 时间 | 日历本、重复日程、提醒、CalDAV 服务端 |
| 3 | 归一 | 观影与旅行迁入统一事件模型 |
| 4 | 任务 | 任务管理，期限自动映射成日历事件 |
| 5 | 回看 | 统计、年度家书、时间轴 |
当前进度：阶段 0 起步，仓库里只有图标与脚手架。
技术选型
- PHP 7.4+（无框架、无 Composer，上传到站点目录即可运行）
- MySQL 5.7+ / 8.0（
utf8mb4） - 前端为原生 HTML / CSS / JavaScript，无构建步骤
⚠️ 注意 CalDAV / CardDAV 是双向协议，和单纯的 .ics 文件导出不是一个量级的东西。
部署
- 把代码放到站点根目录；
- 复制
config.example.php为config.php，填写数据库与app_key； - 访问站点根，按引导页确认 PHP 版本、扩展、配置、数据库连接四项都通过。
config.php 不入库（已在 .gitignore 中忽略），其中包含数据库口令与加密密钥。
⚠️ app_key 一旦开始记录数据就不能再改（换掉即解不开已有数据），
并且它必须单独备份 —— 密钥丢失等同于数据永久丢失。
隐私
身份证号、手机号属于敏感个人信息，一律加密存储。 （就家庭自用而言，身份证号其实没有多少必须存的场景，启用前请三思。）
图标
见 assets/icons/。概念是「这本书就是家」：屋顶即一本摊开的书，
屋顶下纸做的墙上，三行横线是这个家写下的日子。