eaa74bc5937453cf2dd19291b4aebc7c17417425
用户原话:「地址设置,短语那里,输入框怎么那么高啊。」
病根:模板把 input 包在 .field 里,而 .field 本身又是 .inline-form 的 flex 子项。
.field 是 flex-direction: column ⇒ 主轴是垂直方向,
于是 `.inline-form .input { flex: 1 1 200px }` 的 flex-basis
落在了**高度**上,再叠加 flex-grow 继续拉长。
.inline-form 的 align-items:center 又让它垂直居中,
看起来就是"一个很高的输入框 + 旁边孤零零一个按钮"。
线上实测(部署前,Playwright 量真实 rect):
短语输入框 h = 200.00px ← 正好等于 flex-basis
同页正常 input h = 45.80px
差 154.20px
修法:换用专属类 .nav-phrase-form,不动通用规则。
· 外层横向 flex(输入区 + 按钮),只把输入区当 flex 子项;
· 输入区内部仍走 .field 的纵向堆叠,并显式把内部 .input 的 flex 收回去
(这一条是关键:不收的话 flex-basis 又跑回垂直轴);
· 按钮 align-self:flex-end 跟输入框底对齐(tip 在下方,居中会显得按钮浮起来);
· 窄屏 ≤480px 按钮换行靠左。
为什么不去改 .inline-form 那条通用规则:
全站另有 15 处在用 .inline-form,且都是"input 直接当水平子项"的正确用法,
改通用规则会波及那些页面。本处是**孤例**(唯一把 .field 嵌进去的)。
验证(线上真实页面):
· 短语输入框 200.00px → 45.80px,与同页正常 input 差 0.0px
· label/input/tip 仍垂直堆叠;按钮与 input 垂直交叠 7.7px
· 回归:个人设置/任务看板/任务详情/笔记/名册/日程/微信读书/导航,
11 个 .inline-form 内的 input 全部 45.80px,零偏离
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/。概念是「这本书就是家」:屋顶即一本摊开的书,
屋顶下纸做的墙上,三行横线是这个家写下的日子。
开源协议
Languages
PHP
81.6%
JavaScript
9.3%
CSS
9.1%