laoyang 4d04490f7f 网页端任务面板按鸿蒙版结构重排 + 输入框占满整行 (#82)
用户 2026-11-05:「网页版编辑在首页编辑任务的时候,那个输入框怎么那么短呢?
所有输入框都应该跟弹出框一样宽。它里面的信息应该和鸿蒙版一样:
1.标题是"编辑任务" 2.下面分成两行:第一行是任务标题,第二行是状态
3.后续内容也和鸿蒙版保持一致,不需要额外信息。
布局顺序也和鸿蒙版一致:1.任务标题 2.状态 3.看板
4.截止日期、负责人、备注、协作人 5.子任务,一直到子任务都和鸿蒙版一致。
颜色也是用主题颜色。」

① 输入框为什么那么短 —— 是我上一轮修"对齐"时引入的
   #80 给每行加了 `max-width: var(--tk-attr-w)`(300px),
   目的是让各个控件右缘对齐。但代价是:面板 680 宽、控件只有 300,
   右边空着 300 多像素,看起来像没做完。
   ⇒ 改成上下两行之后,**每行只有一个控件、天然左缘对齐**,
     不再需要靠限宽来对齐 ⇒ 全面 `width: 100%; max-width: none`。
   实测(Playwright 量 getBoundingClientRect):
     五行控件宽全部 648 / 行宽 648 = **100%** ✅

② 排列改成上下两行
   `.tk-attr-row` 从 `flex-direction: row` 改成 `column`:
     ① 标签独占一行(主题色 + 加粗 + 字距 .6,与鸿蒙 fieldLb 同一口径)
     ② 控件独占一行
   顺带 `.tk-sec-inline`(状态/看板那两段)也改成纵向,
   与字段行同形态 —— 否则这里横着、那里竖着,看着像两套东西。

③ 顺序按鸿蒙版重排
   改前:状态 → 看板 → 更多信息{标题/截止/负责人/协作人/分类/备注}
   改后:任务标题 → 状态 → 看板 → 截止 → 负责人 → 备注 → 协作人 → 子任务 → 附件 → 讨论
   标题从「更多信息」里提出来,单独做第一个小节。

④ 去掉"额外信息":分类、循环
   用户明确说「不需要额外信息」,鸿蒙端面板里也没有这两项。
   ⚠️ 安全性确认:`tasks/panel_save` 用 `array_key_exists` 判"传没传",
      收不到 category_id 就**保留原值**,所以删掉字段不会把分类清空
      (这条在 #76 就是按这个原则写的)。

⑤ 颜色:小节标题 + 字段标签都用主题色
   `.tk-sec-h`(附件/讨论/子任务)从 var(--ink) 改 var(--tk-accent, var(--brand)),
   `.tk-attr-lb` 从 faint 灰改主题色 + 700 粗体。

⑥ 只读态也做成"框"
   新增 `.tk-attr-val`:浅底 + 圆角 + min-height 40,
   与可编辑态同宽同高。原来只读用户看到的是一行裸文字,
   和编辑态差太多(同一位置两种长相)。

实测渲染(family 1 最新任务):
  字段标签顺序:任务标题 → 截止 → 负责人 → 备注 → 协作人 ✅
  横排段顺序:状态 → 看板 ✅
  分类 / 循环:已删 ✅
2026-11-05 20:09:02 +08:00
2026-09-29 15:08:42 +00:00

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 文件导出不是一个量级的东西。

部署

  1. 把代码放到站点根目录;
  2. 复制 config.example.php 为 config.php,填写数据库与 app_key;
  3. 访问站点根,按引导页确认 PHP 版本、扩展、配置、数据库连接四项都通过。

config.php 不入库(已在 .gitignore 中忽略),其中包含数据库口令与加密密钥。

⚠️ app_key 一旦开始记录数据就不能再改(换掉即解不开已有数据), 并且它必须单独备份 —— 密钥丢失等同于数据永久丢失。

隐私

身份证号、手机号属于敏感个人信息,一律加密存储。 (就家庭自用而言,身份证号其实没有多少必须存的场景,启用前请三思。)

图标

见 assets/icons/。概念是「这本书就是家」:屋顶即一本摊开的书, 屋顶下纸做的墙上,三行横线是这个家写下的日子。

开源协议

Apache License 2.0

S
Description
家书,记录家庭的全部生活,一个家庭用岁月写成的书。
Readme Apache-2.0
8.5 MiB
Languages
PHP 81.6%
JavaScript 9.3%
CSS 9.1%