Version static asset URLs to prevent stale proxy browser resources

ICON.md

@@ -0,0 +1,9 @@
+# 标识
+
+资产：`web/zhao-icon.png`。使用内置 imagegen 生成，作为网页品牌和 favicon；无需外部图片服务。
+
+“赵”字的甲骨文风格设计。香港中文大学[汉语多功能字库的「趙」条目](https://humanum.arts.cuhk.edu.hk/Lexis/lexi-mf/search.php?word=%E8%B6%99)收录金文、小篆等字例，其甲骨栏目未列出字例。这里的标识是现代风格化创作，不宣称为已考证甲骨文字形。
+
+生成提示词：
+
+Use case: logo-brand. Create one polished app icon for 赵府智家, a private Chinese family home monitoring and genealogy application. Square app icon, dark deep teal #10191d rounded-square ground with generous mint #74d5bb single-color linework. The only subject is a single ancient-Chinese-style character emblem for the surname 趙 (modern simplified 赵), inspired by oracle bone carved strokes and the ancient components 走 and 肖. It is a contemporary oracle-bone-style design, NOT a claimed archaeological facsimile. Keep the ancient walking-person/foot component on the left and 肖-derived component on the right recognizable as one cohesive character. Thick clean slightly tapering carved strokes, balanced quiet confident composition, very legible as a small favicon, no photographic texture, no gradients, no glow, no shadows, no extra symbols, no English or captions, no surrounding words, no multiple options or mockup. Character occupies 72 percent of square, centered. Flat professional icon asset ready for website navigation and browser tab.

README.md

@@ -49,9 +49,9 @@ python3 app.py
 mediamtx ./data/mediamtx.yml
 ```
 
-回归测试：`python3 -m unittest -v test_app` 和 `node --test test_live_player.js test_kinship.js`。测试使用临时数据库和模拟播放器，不连接真实设备。
+回归测试：`python3 -m unittest -v test_app test_ptz` 和 `node --test test_live_player.js test_kinship.js test_calendar.js test_family_graph.js`。测试使用临时数据库和模拟播放器，不连接真实设备。
 
-访问 `http://127.0.0.1:8790/`。后端配置变量：`VISION_BIND`、`VISION_PORT`、`VISION_DATA`、`VISION_RECORDINGS`；高清转码可用 `VISION_VAAPI_DEVICE` 指定渲染设备（默认 `/dev/dri/renderD128`）。HTTPS 反向代理场景可设 `VISION_SECURE_COOKIE=1`。当前管理 API 是单管理员模型。
+访问 `http://127.0.0.1:8790/`。后端配置变量：`VISION_BIND`、`VISION_PORT`、`VISION_DATA`、`VISION_RECORDINGS`；高清转码可用 `VISION_VAAPI_DEVICE` 指定渲染设备（默认 `/dev/dri/renderD128`）。HTTPS 反向代理场景可设 `VISION_SECURE_COOKIE=1`。当前管理 API 使用管理员与个人账号分权。
 
 ## 数据与恢复
 
@@ -76,11 +76,48 @@ mediamtx ./data/mediamtx.yml
 - 每个账号具有独立用户名和密码，密码使用 scrypt 散列存储；更新密码、角色、空间范围、家谱权限或停用状态会撤销该账号会话。亲属关系不自动授予权限。
 - 管理员在“账号与关系”中设置显示名称、相对于哪个账号的称呼，以及关联的家谱人物。支持常用称呼与自定义称呼。默认新个人账号没有空间或家谱权限。
 - 家谱是本部署内的一份家庭档案，具有独立的不可访问、查看、编辑权限。一个编辑账号可录入任意数量的祖先、亲属与后辈，无需为每位人物开户。未实现跨家庭租户隔离。
-- 人物记录姓名/称呼、别名、性别、生卒日期、在世情况、籍贯、生平和信息来源。公历日期不确定时留空，将农历或口述信息写入备注。
+- 人物记录姓名/称呼、别名、性别、生卒日期、在世情况、籍贯、生平和信息来源。日期可按公历或农历录入，并自动换算；不确定日期可留空，在备注中保留原记载。
 - 亲子关系按“父母一方 → 子女”逐条连接，支持亲生、收养、继亲和未注明；配偶关系为双向。禁止自我关系、重复关系、祖先循环、直系祖先与配偶冲突。关系可以停用后恢复，人物可归档后恢复。
-- 支持关系参照人物、搜索、祖先树、后裔树、配偶列表和 JSON 导出。孙辈、曾孙辈、玄孙辈等直系辈分由路径推算；旁系复杂称谓显示明确路径，缺少出生日期时不猜测兄弟姐妹的长幼。称谓用于辅助阅读，以录入关系为准。
+- 支持关系参照人物、搜索、全家关系图、人物名册和 JSON 导出。孙辈、曾孙辈、玄孙辈等直系辈分由路径推算；旁系复杂称谓显示明确路径，缺少出生日期时不猜测兄弟姐妹的长幼。称谓用于辅助阅读，以录入关系为准。
 - 并发编辑使用家谱修订号，旧表单提交会被拒绝，避免覆盖他人的更新。导出包含人物和关系，不含密码和设备凭据。当前导出用于保存副本，尚未提供 JSON 导入界面。
 
 ### 从 v0.1.10 升级
 
 部署前用 SQLite backup API 保存 `/var/lib/zhaovision/vision.db`。首次启动 v0.1.11 会将原有单密码账户迁移为 `admin`，保留原密码散列，并把既有会话关联到管理员；没有固定出厂密码。新增 `users`、`people`、`family_links` 表和 `sessions.user_id` 列。以后可以直接升级；若回退到 v0.1.10，必须同时恢复升级前数据库副本，因为旧版本使用旧账户模型。人物和实际账号数据仅在受限数据目录中，不包含在公开源码内。
+
+## 监控墙、云台与日期（v0.1.13）
+
+- 监控墙支持自适应（每页最多六路）、1/2/4/6/9/16 分屏、翻页、拖动和前移/后移排列。布局和顺序按账号保存在当前浏览器；不跨设备同步。排列和分屏只改 CSS 与可见性，不重建播放器。全屏使用浏览器 Fullscreen API，Esc 退出。属于网页全屏模式，尚非可离线运行的安装包。
+- 当前监控页的通道保持连接，翻页隐藏的通道也继续播放，以便切回时不重复连接；大规模通道应评估转码和网络开销。浏览器处于前台并保持系统唤醒时可持续监看。
+- 云台读取 ONVIF PTZ 能力，仅对有匹配媒体配置、标准连续方向速度空间和一秒超时支持的直连摄像头提供四方向短距离微调。每次移动明确设置 PT1S，随后发 Stop；同一物理节点串行控制，独立停止按钮不排队。设备未声明的变焦、回到原点等功能不显示。协议参考：[ONVIF PTZ](https://www.onvif.org/ver20/ptz/wsdl/)。ONVIF 服务端口默认为 80。
+- 管理员具有云台权限；个人账号需同时具备空间访问和独立的云台控制权限。新账号默认不允许转动。两个镜头如果指向同一 PTZ 节点，控制的是同一物理云台，不能据镜头数量推断独立电机。
+- 人物默认在世；只在“不在世”时显示去世日期，旧人物的“待确认”状态保持原样。出生/去世各使用一个日期输入，选择历法，农历可勾选闰月；数据库统一保存公历日期，避免两份日期不一致。使用浏览器 ICU Chinese calendar，不联网。公历转农历范围 1901–2100，农历录入范围 1901–2099。更早祖先生卒日期可填公历并保留原始记载；不对古代历法作精确推断。
+- 站点与标签页图标为“赵”字的甲骨文风格原创设计，并非考古字形摹本。参考字库及生成说明见 [ICON.md](ICON.md)。
+
+
+## 完整关系图与家族记事（v0.1.16）
+
+### 看全家
+
+进入“家谱”默认打开完整关系图，包含有效的亲子和配偶关系；归档人物默认隐藏，可勾选显示。每位人物只出现一次，不按代数截断。父母在上、子女在下，配偶在不违反亲子方向时并列；跨层配偶和复杂多重关系保留连线及提示。尚未建立关系的人单独展示，不推测亲属身份。
+
+暖金色和“本人”标识只用于当前账号关联的家谱人物，由管理员在“账号与关系 → 关联家谱人物”设置。关系参照和当前选中人物可另外切换，不改变本人身份。管理员未关联人物时会提示，不把其他人误标为本人。支持点击档案、名册、人物搜索、放大缩小、拖动空白处、滚动条、查看全谱、定位本人、全屏和 Esc 退出。浏览器拒绝原生全屏时使用网页内铺满显示。
+
+### 记事的完整流程
+
+1. 在“家族时间线 → 写一则记事”，或人物档案“记一件事”开始记录。
+2. 填写标题、发生日期、摘要、正文，并可关联多位人物、附报道来源和 HTTP/HTTPS 链接。发生日期支持公历或农历输入，沿用日期换算范围，统一存储公历。
+3. 可保存草稿，编辑完成后发布。发布范围是拥有家谱权限的账号，不是互联网匿名访问。家谱编辑者及管理员可查看和维护草稿、已发布内容、归档记录；只读成员仅能查看未归档的已发布记事。
+4. 时间线默认从近到远，按发生年份分组，支持年份、人物、关键词、顺序和发布状态筛选。人物筛选可额外包括其直接父母、配偶和子女；每条记事按关联人物追溯，全家记事在“全家”范围显示。
+5. 点击记事阅读详情或跳转原始报道；点击关联人物返回图谱和档案。人物档案可以再进入该人物的时间线，形成双向浏览。关系图默认不展开记事内容。
+6. 归档保留数据；在“已归档”打开记录并编辑，取消归档后保存即可恢复。记事与人物、关系共用修订号，并发旧表单拒绝覆盖新版本。正文是纯文本，不执行 HTML 或嵌入第三方页面。
+
+JSON 导出升级为格式 version 2，包含人物、关系和当前账号有权看到的记事。导出用于保存副本，尚无导入界面。外部报道只保存链接和用户填写的内容，不自动抓取网页；链接失效时，已填写的正文仍保存在本机。
+
+### 升级及数据
+
+启动时幂等创建 `family_events` 表，无需修改既有人物、账号、摄像头或录像记录。部署前使用 SQLite backup API 备份数据库。还原备份会回退备份后的数据，旧版本看不到记事表；应保留升级后的数据库备份，不以旧版本界面作为记事恢复工具。源码中不含真实家族记事和人物信息。
+
+### 代理缓存兼容（v0.1.17）
+
+入口 HTML 禁止缓存；页面引用的脚本和样式自动带上发布版本号，避免 NPM 等反向代理为旧资源设置长缓存后，新页面混用旧脚本。升级时普通重新载入即可获取与页面一致的资源。

VERSION

@@ -1 +1 @@
-0.1.12
+0.1.17

app.py

@@ -29,6 +29,7 @@ import onvif
 import playback
 import identity
 import genealogy
+import ptz
 
 ROOT = Path(__file__).resolve().parent
 os.umask(0o077)
@@ -559,16 +560,26 @@ class Handler(BaseHTTPRequestHandler):
                 self.login(data, path == '/api/setup')
                 return
             self.require_auth()
-            if path not in ('/api/logout', '/api/family/person', '/api/family/link'):
+            if path not in ('/api/logout', '/api/family/person', '/api/family/link', '/api/family/event', '/api/ptz'):
                 self.require_admin()
             if path == '/api/logout':
                 with LOCK:
                     DB.execute('DELETE FROM sessions WHERE hash=?', (hashlib.sha256(self.token().encode()).hexdigest(),))
                     DB.commit()
                 self.answer({'ok': True}, cookie='vision=; Path=/; Max-Age=0; HttpOnly; SameSite=Strict')
+            elif path == '/api/ptz':
+                c = ACCOUNTS.control(self.user, get_object('cameras', data.get('camera')))
+                try:
+                    result = ptz.CONTROLLER.command(c, data.get('action'))
+                except ValueError as e:
+                    raise Problem(str(e), 400)
+                except Exception:
+                    raise Problem('云台通信未成功，请检查设备连接；设备端的一秒超时保护会停止本次转动', 502)
+                audit('云台 ' + data['action'], c['name'])
+                self.answer(result)
             elif path == '/api/users':
                 self.answer(ACCOUNTS.save(data, self.user))
-            elif path in ('/api/family/person', '/api/family/link'):
+            elif path in ('/api/family/person', '/api/family/link', '/api/family/event'):
                 self.answer(FAMILY.save(path.rsplit('/', 1)[-1], data, self.user))
             elif path == '/api/sites':
                 self.answer(save_site(data))
@@ -715,6 +726,15 @@ class Handler(BaseHTTPRequestHandler):
                 elif path == '/api/users':
                     self.require_admin()
                     self.answer({'users': [ACCOUNTS.public(u) for u in objects('users')]})
+                elif path == '/api/ptz':
+                    c = ACCOUNTS.control(self.user, get_object('cameras', query.get('camera')))
+                    try:
+                        result = ptz.CONTROLLER.capabilities(c)
+                    except ValueError as e:
+                        raise Problem(str(e), 400)
+                    except Exception:
+                        raise Problem('未能读取云台能力，请确认摄像头的 ONVIF 服务和连接', 502)
+                    self.answer(result)
                 elif path == '/api/family':
                     self.answer(FAMILY.snapshot(self.user))
                 elif path == '/api/audit':
@@ -764,11 +784,18 @@ class Handler(BaseHTTPRequestHandler):
             else:
                 files = {'/': 'index.html', '/app.js': 'app.js', '/live-player.js': 'live-player.js', '/style.css': 'style.css',
                          '/family.js': 'family.js', '/kinship.js': 'kinship.js',
+                         '/family-graph.js': 'family-graph.js', '/family-map.js': 'family-map.js',
+                         '/family-map.css': 'family-map.css',
+                         '/family-events.js': 'family-events.js',
+                         '/monitor.js': 'monitor.js', '/calendar.js': 'calendar.js', '/date-fields.js': 'date-fields.js',
+                         '/zhao-icon.png': 'zhao-icon.png',
                          '/vendor/hls.min.js': 'vendor/hls.min.js'}
                 if path not in files:
                     raise Problem('页面不存在', 404)
                 file = ROOT / 'web' / files[path]
                 raw = file.read_bytes()
+                if path == '/':
+                    raw = raw.replace(b'__ASSET_VERSION__', (ROOT / 'VERSION').read_bytes().strip())
                 self.send_response(200)
                 self.send_header('Content-Type', (mimetypes.guess_type(file.name)[0] or 'application/octet-stream') + '; charset=utf-8')
                 self.send_header('Content-Length', str(len(raw)))
@@ -776,7 +803,7 @@ class Handler(BaseHTTPRequestHandler):
                 self.send_header('X-Frame-Options', 'DENY')
                 self.send_header('Referrer-Policy', 'same-origin')
                 self.send_header('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; media-src 'self' blob:; worker-src 'self' blob:; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'")
-                self.send_header('Cache-Control', 'no-cache')
+                self.send_header('Cache-Control', 'no-store' if path == '/' else 'no-cache')
                 self.end_headers()
                 self.wfile.write(raw)
         except Problem as e:

genealogy.py

@@ -2,6 +2,7 @@
 import datetime as dt
 import json
 import secrets
+from urllib.parse import urlsplit
 
 
 class Family:
@@ -13,6 +14,7 @@ class Family:
             self.a.DB.executescript('''
             CREATE TABLE IF NOT EXISTS people (id TEXT PRIMARY KEY, body TEXT NOT NULL);
             CREATE TABLE IF NOT EXISTS family_links (id TEXT PRIMARY KEY, body TEXT NOT NULL);
+            CREATE TABLE IF NOT EXISTS family_events (id TEXT PRIMARY KEY, body TEXT NOT NULL);
             ''')
             self.a.DB.commit()
 
@@ -23,9 +25,12 @@ class Family:
     def snapshot(self, user):
         self.authorize(user)
         with self.a.LOCK:
+            can_edit = user['role'] == 'admin' or user.get('familyAccess') == 'edit'
             return {'revision': self.a.setting('familyRevision', 0), 'people': self.a.objects('people'),
                     'links': self.a.objects('family_links'),
-                    'canEdit': user['role'] == 'admin' or user.get('familyAccess') == 'edit',
+                    'events': [e for e in self.a.objects('family_events')
+                               if can_edit or (e.get('status') == 'published' and not e.get('archived'))],
+                    'canEdit': can_edit,
                     'selfId': user.get('personId', '')}
 
     def save(self, kind, data, user):
@@ -35,19 +40,63 @@ class Family:
             revision = a.setting('familyRevision', 0)
             if type(data.get('revision')) is not int or data['revision'] != revision:
                 raise a.Problem('家谱已被更新，请重新载入后再编辑', 409)
-            table = 'people' if kind == 'person' else 'family_links'
+            if kind not in ('person', 'link', 'event'):
+                raise a.Problem('家谱记录类型不存在', 404)
+            table = {'person': 'people', 'link': 'family_links', 'event': 'family_events'}[kind]
             old = a.get_object(table, data.get('id'))
             if data.get('id') and not old:
                 raise a.Problem('家谱记录不存在', 404)
-            item = self.person(data, old) if kind == 'person' else self.link(data, old)
+            item = {'person': self.person, 'link': self.link, 'event': self.event}[kind](data, old)
             item.update(updatedAt=dt.datetime.now(dt.timezone.utc).isoformat(), updatedBy=user['username'])
+            if kind == 'event':
+                item.update(createdAt=old.get('createdAt', item['updatedAt']) if old else item['updatedAt'],
+                            createdBy=old.get('createdBy', user['username']) if old else user['username'])
+                if item['status'] == 'published':
+                    item['publishedAt'] = old.get('publishedAt', item['updatedAt']) if old else item['updatedAt']
             # Revision and record are committed together, so concurrent forms cannot overwrite silently.
             a.DB.execute('INSERT OR REPLACE INTO ' + table + ' VALUES (?,?)', (item['id'], json.dumps(item)))
             a.DB.execute('INSERT OR REPLACE INTO settings VALUES (?,?)', ('familyRevision', json.dumps(revision + 1)))
             a.DB.commit()
-            a.audit('更新家谱人物' if kind == 'person' else '更新家谱关系', user['username'])
+            a.audit({'person': '更新家谱人物', 'link': '更新家谱关系', 'event': '更新家族记事'}[kind], user['username'])
             return {'item': item, 'revision': revision + 1}
 
+    def event(self, data, old):
+        a = self.a
+        item = {'id': old['id'] if old else secrets.token_hex(8)}
+        for key, maximum, required in [('title', 160, True), ('eventDate', 10, True),
+                                       ('summary', 400, False), ('sourceName', 160, False),
+                                       ('sourceUrl', 2000, False)]:
+            item[key] = a.clean_text(data.get(key, ''), maximum, required)
+        try:
+            if dt.date.fromisoformat(item['eventDate']).isoformat() != item['eventDate']:
+                raise ValueError()
+        except ValueError:
+            raise a.Problem('记事日期请填写有效日期，格式为 YYYY-MM-DD')
+        body = data.get('body', '')
+        if not isinstance(body, str) or len(body) > 12000 or any(ord(c) < 32 and c not in '\r\n\t' for c in body):
+            raise a.Problem('记事正文格式不正确，最多 12000 字')
+        item['body'] = body.strip()
+        item['personIds'] = data.get('personIds', [])
+        if (not isinstance(item['personIds'], list) or len(item['personIds']) > 200
+                or any(not isinstance(p, str) or not a.get_object('people', p) for p in item['personIds'])):
+            raise a.Problem('请选择有效的关联人物，最多 200 位')
+        item['personIds'] = list(dict.fromkeys(item['personIds']))
+        item['status'] = data.get('status', 'draft')
+        item['archived'] = data.get('archived', old.get('archived', False) if old else False)
+        if item['status'] not in ('draft', 'published') or not isinstance(item['archived'], bool):
+            raise a.Problem('记事状态不正确')
+        if item['sourceUrl']:
+            try:
+                parsed = urlsplit(item['sourceUrl'])
+                if parsed.scheme not in ('https', 'http') or not parsed.hostname or parsed.username or parsed.password:
+                    raise ValueError()
+                parsed.port
+            except ValueError:
+                raise a.Problem('报道链接请填写完整的 http 或 https 地址，不可包含账号密码')
+        if item['status'] == 'published' and not (item['body'] or item['summary'] or item['sourceUrl']):
+            raise a.Problem('发布前请填写记事正文、摘要或报道链接')
+        return item
+
     def person(self, data, old):
         a = self.a
         item = {'id': old['id'] if old else secrets.token_hex(8)}
@@ -70,7 +119,7 @@ class Family:
         if item['birthDate'] and item['deathDate'] and item['birthDate'] > item['deathDate']:
             raise a.Problem('逝世日期不能早于出生日期')
         item['gender'] = data.get('gender', 'unknown')
-        item['lifeStatus'] = data.get('lifeStatus', 'unknown')
+        item['lifeStatus'] = data.get('lifeStatus', 'alive')
         if item['gender'] not in ('male', 'female', 'unknown') or item['lifeStatus'] not in ('alive', 'deceased', 'unknown'):
             raise a.Problem('人物属性不正确')
         if item['deathDate'] and item['lifeStatus'] != 'deceased':

identity.py

@@ -64,6 +64,9 @@ class Accounts:
             sites = data.get('siteIds', [])
             if not isinstance(sites, list) or any(not isinstance(s, str) or not a.get_object('sites', s) for s in sites):
                 raise a.Problem('请选择有效空间')
+            ptz_control = data.get('ptzControl', old.get('ptzControl', False) if old else False)
+            if not isinstance(ptz_control, bool):
+                raise a.Problem('云台权限格式不正确')
             disabled = data.get('disabled', False)
             if not isinstance(disabled, bool):
                 raise a.Problem('账号状态不正确')
@@ -86,11 +89,11 @@ class Accounts:
                 raise a.Problem('密码格式不正确')
             credentials = self.password(password) if password or not old else {k: old[k] for k in ('salt', 'hash')}
             user = dict(id=uid, username=username, name=a.clean_text(data.get('name', username), 80, True),
-                        role=role, disabled=disabled, siteIds=sorted(set(sites)), familyAccess=access,
+                        role=role, disabled=disabled, siteIds=sorted(set(sites)), familyAccess=access, ptzControl=ptz_control,
                         personId=person, relatedToId=related,
                         relationship=a.clean_text(data.get('relationship', ''), 40), **credentials)
             # Revoke sessions when credentials or authorization change, not for label edits.
-            if old and any(old.get(k) != user.get(k) for k in ('hash', 'role', 'siteIds', 'familyAccess', 'disabled', 'username')):
+            if old and any(old.get(k) != user.get(k) for k in ('hash', 'role', 'siteIds', 'familyAccess', 'disabled', 'username', 'ptzControl')):
                 a.DB.execute('DELETE FROM sessions WHERE user_id=?', (uid,))
             a.save_object('users', user)
             a.audit('更新账号' if old else '建立账号', username)
@@ -103,6 +106,14 @@ class Accounts:
             raise self.a.Problem('没有这个空间的访问权限', 403)
         return camera
 
+    def control(self, user, camera):
+        self.camera(user, camera)
+        if user['role'] != 'admin' and not user.get('ptzControl', False):
+            raise self.a.Problem('没有云台控制权限，请联系管理员授权', 403)
+        if not camera.get('enabled'):
+            raise self.a.Problem('摄像头已停用', 409)
+        return camera
+
     def state(self, user, state):
         state['user'] = self.public(user)
         if user['role'] == 'admin':

ptz.py

@@ -0,0 +1,121 @@
+"""Capability-driven ONVIF pan/tilt: bounded nudges, never latched movement."""
+import hashlib
+import threading
+import time
+import urllib.parse as url
+from xml.sax.saxutils import escape
+import onvif
+
+PTZ = 'http://www.onvif.org/ver20/ptz/wsdl'
+SPACE = 'http://www.onvif.org/ver10/tptz/PanTiltSpaces/VelocityGenericSpace'
+T = '{' + onvif.SCHEMA + '}'
+DIRECTIONS = {'left': (-0.25, 0), 'right': (0.25, 0), 'up': (0, 0.25), 'down': (0, -0.25)}
+
+
+class Controller:
+    def __init__(self):
+        self.guard = threading.RLock()
+        self.cache = {}
+        self.locks = {}
+
+    def call(self, c, endpoint, namespace, operation, body=''):
+        port, path = endpoint
+        return onvif.request(c['host'], port, path, namespace, operation, body, c['username'], c['password'])
+
+    @staticmethod
+    def endpoint(c, text):
+        parsed = url.urlsplit(text)
+        if parsed.scheme != 'http' or parsed.hostname != c['host'] or parsed.username or parsed.password:
+            raise ValueError('设备返回了不匹配的云台服务地址')
+        return parsed.port or 80, parsed.path + ('?' + parsed.query if parsed.query else '')
+
+    def discover(self, c):
+        if c.get('sourceKind', 'direct') != 'direct':
+            raise ValueError('请使用摄像头直连通道控制云台')
+        key = (c['host'], c.get('onvifPort', 80), c['username'], hashlib.sha256(c['password'].encode()).hexdigest(), c['mainPath'])
+        with self.guard:
+            old = self.cache.get(key)
+            if old and old[0] > time.monotonic():
+                return old[1]
+        caps = self.call(c, (c.get('onvifPort', 80), '/onvif/device_service'), onvif.DEVICE, 'GetCapabilities', '<m:Category>All</m:Category>')
+        def service(name):
+            value = caps.find('.//' + T + name + '/' + T + 'XAddr')
+            if value is None or not value.text:
+                raise ValueError('设备没有提供云台服务')
+            return self.endpoint(c, value.text)
+        endpoint, media = service('PTZ'), service('Media')
+        profiles = self.call(c, media, onvif.MEDIA, 'GetProfiles')
+        available = [p for p in profiles.findall('.//{' + onvif.MEDIA + '}Profiles') if p.find(T + 'PTZConfiguration') is not None]
+        wanted = url.parse_qs(url.urlsplit(c['mainPath']).query).get('profile', [''])[0]
+        selected = next((p for p in available if p.get('token') == wanted), None)
+        if selected is None:
+            for p in available[:32]:
+                body = '<m:StreamSetup><tt:Stream>RTP-Unicast</tt:Stream><tt:Transport><tt:Protocol>RTSP</tt:Protocol></tt:Transport></m:StreamSetup><m:ProfileToken>' + escape(p.get('token', '')) + '</m:ProfileToken>'
+                root = self.call(c, media, onvif.MEDIA, 'GetStreamUri', body)
+                uri = root.find('.//' + T + 'Uri')
+                if uri is not None and url.urlsplit(uri.text).path == url.urlsplit(c['mainPath']).path:
+                    selected = p
+                    break
+        if selected is None:
+            raise ValueError('这个镜头没有匹配的云台配置')
+        conf = selected.find(T + 'PTZConfiguration')
+        options = self.call(c, endpoint, PTZ, 'GetConfigurationOptions', '<m:ConfigurationToken>' + escape(conf.get('token')) + '</m:ConfigurationToken>')
+        spaces = options.findall('.//' + T + 'ContinuousPanTiltVelocitySpace')
+        space = next((s for s in spaces if s.findtext(T + 'URI') == SPACE), None)
+        if space is None:
+            raise ValueError('设备不支持通用方向微调')
+        for axis in ('XRange', 'YRange'):
+            if float(space.findtext(T + axis + '/' + T + 'Min')) > -0.25 or float(space.findtext(T + axis + '/' + T + 'Max')) < 0.25:
+                raise ValueError('设备云台速度范围不兼容')
+        # Do not issue movement unless the device advertises a one-second watchdog.
+        minimum = options.findtext('.//' + T + 'PTZTimeout/' + T + 'Min')
+        maximum = options.findtext('.//' + T + 'PTZTimeout/' + T + 'Max')
+        def seconds(value):
+            import re
+            m = re.fullmatch(r'PT(?:(\d+(?:\.\d+)?)H)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)S)?', value or '')
+            return sum(float(v or 0) * scale for v, scale in zip(m.groups(), (3600, 60, 1))) if m else -1
+        if not 0 <= seconds(minimum) <= 1 <= seconds(maximum):
+            raise ValueError('设备不支持一秒自动停止保护')
+        result = {'endpoint': endpoint, 'profile': selected.get('token'), 'node': conf.findtext(T + 'NodeToken'), 'supported': True}
+        with self.guard:
+            if len(self.cache) > 128:
+                self.cache.clear()
+            self.cache[key] = (time.monotonic() + 300, result)
+        return result
+
+    def capabilities(self, c):
+        self.discover(c)
+        return {'supported': True, 'directions': list(DIRECTIONS), 'mode': 'nudge',
+                'note': '点击一次短距离转动并自动停止。同一摄像头的镜头可能共用云台。'}
+
+    def command(self, c, action):
+        if action not in (*DIRECTIONS, 'stop'):
+            raise ValueError('请选择上、下、左、右或停止')
+        info = self.discover(c)
+        body = '<m:ProfileToken>' + escape(info['profile']) + '</m:ProfileToken>'
+        def stop():
+            self.call(c, info['endpoint'], PTZ, 'Stop', body + '<m:PanTilt>true</m:PanTilt>')
+        if action == 'stop':
+            stop()
+            return {'ok': True, 'stopped': True}
+        # Lock by physical host/node, including commands sent through another lens/account.
+        key = (c['host'], info['endpoint'][0], info['node'])
+        with self.guard:
+            lock = self.locks.setdefault(key, threading.Lock())
+        if not lock.acquire(blocking=False):
+            raise ValueError('云台正在执行操作，请稍后再点')
+        try:
+            x, y = DIRECTIONS[action]
+            try:
+                self.call(c, info['endpoint'], PTZ, 'ContinuousMove', body +
+                          f'<m:Velocity><tt:PanTilt x="{x}" y="{y}" space="{SPACE}"/></m:Velocity><m:Timeout>PT1S</m:Timeout>')
+                time.sleep(0.3)
+            finally:
+                # Also stop after an ambiguous network failure. Device timeout is a second guard.
+                stop()
+            return {'ok': True, 'stopped': True}
+        finally:
+            lock.release()
+
+
+CONTROLLER = Controller()

test_app.py

@@ -72,6 +72,18 @@ class WebTests(unittest.TestCase):
         self.assertEqual(re.findall(r'<option value="(.*?)">(.*?)</option>', select),
                          [('hd', '主码流'), ('compat', '子码流')])
 
+    def test_asset_urls_follow_release_version(self):
+        code, headers, body = self.request('/', False)
+        self.assertEqual(code, 200)
+        self.assertEqual(headers['Cache-Control'], 'no-store')
+        self.assertNotIn(b'__ASSET_VERSION__', body)
+        assets = re.findall(r'(?:src|href)="(/[^"?]+\.(?:js|css)\?v=[^"]+)"', body.decode())
+        self.assertEqual(len(assets), 13)
+        version = (app.ROOT / 'VERSION').read_text().strip()
+        for asset in assets:
+            self.assertTrue(asset.endswith('?v=' + version))
+            self.assertEqual(self.request(asset, False)[0], 200)
+
     def test_origin_rejected(self):
         self.assertEqual(self.request('/api/storage', data={}, origin='https://example.org')[0], 403)
 
@@ -216,6 +228,60 @@ class WebTests(unittest.TestCase):
         self.assertIn('h264_vaapi', command)
         self.assertIn('pipe:1', command)
 
+    def test_ptz_requires_both_space_and_control_permission(self):
+        camera = dict(id='e'*16, name='Test', siteId='permitted', enabled=True)
+        viewer = dict(role='member', siteIds=['permitted'], ptzControl=False)
+        with self.assertRaises(app.Problem):app.ACCOUNTS.control(viewer, camera)
+        viewer['ptzControl'] = True
+        self.assertEqual(app.ACCOUNTS.control(viewer, camera), camera)
+        viewer['siteIds'] = []
+        with self.assertRaises(app.Problem):app.ACCOUNTS.control(viewer, camera)
+        self.assertEqual(self.request('/api/ptz?camera='+'e'*16,False)[0],401)
+
+    def test_family_defaults_alive_and_rejects_death_for_alive(self):
+        p=app.FAMILY.person({'name':'Example'},None)
+        self.assertEqual(p['lifeStatus'],'alive')
+        with self.assertRaises(app.Problem):app.FAMILY.person({'name':'Example','deathDate':'2020-01-01'},None)
+        self.assertEqual(app.FAMILY.person({'name':'Example','lifeStatus':'deceased','deathDate':'2020-01-01'},None)['deathDate'],'2020-01-01')
+
+    def test_family_event_draft_publish_archive_and_restore(self):
+        def save(data):
+            return app.FAMILY.save('event',dict(data,revision=app.setting('familyRevision',0)),self.admin)['item']
+        p=app.FAMILY.save('person',{'name':'Event person','revision':app.setting('familyRevision',0)},self.admin)['item']
+        reader={'role':'member','familyAccess':'read','personId':p['id']}
+        e=save({'title':'First event','eventDate':'2024-02-10','summary':'Summary','body':'Line one\nLine two','personIds':[p['id'],p['id']]})
+        self.assertEqual(e['status'],'draft');self.assertEqual(e['personIds'],[p['id']])
+        self.assertNotIn(e['id'],[r['id'] for r in app.FAMILY.snapshot(reader)['events']])
+        e=save(dict(e,status='published'))
+        self.assertIn('publishedAt',e)
+        self.assertIn(e['id'],[r['id'] for r in app.FAMILY.snapshot(reader)['events']])
+        e=save(dict(e,archived=True))
+        self.assertNotIn(e['id'],[r['id'] for r in app.FAMILY.snapshot(reader)['events']])
+        self.assertIn(e['id'],[r['id'] for r in app.FAMILY.snapshot(self.admin)['events']])
+        e=save(dict(e,archived=False))
+        self.assertIn(e['id'],[r['id'] for r in app.FAMILY.snapshot(reader)['events']])
+        with self.assertRaises(app.Problem):app.FAMILY.save('event',dict(e,revision=0),self.admin)
+        with self.assertRaises(app.Problem):app.FAMILY.save('event',dict(e,revision=app.setting('familyRevision',0)),reader)
+        with self.assertRaises(app.Problem):app.FAMILY.snapshot({'role':'member','familyAccess':'none'})
+
+    def test_family_event_validation(self):
+        good={'title':'Event','eventDate':'2020-02-29','body':'Text','status':'published'}
+        for changes in [{'eventDate':'2023-02-29'},{'title':''},{'sourceUrl':'javascript:alert(1)'},
+                        {'sourceUrl':'https://user:secret@example.com'},{'personIds':['missing']},
+                        {'body':'x'*12001},{'status':'public'},{'archived':'false'},{'personIds':'wrong'},
+                        {'body':'','summary':'','sourceUrl':''}]:
+            with self.subTest(changes=list(changes)):
+                with self.assertRaises(app.Problem):app.FAMILY.event(dict(good,**changes),None)
+        event=app.FAMILY.event(dict(good,sourceUrl='https://example.org/report'),None)
+        self.assertEqual(event['sourceUrl'],'https://example.org/report')
+
+    def test_event_endpoint_and_static_modules(self):
+        self.assertEqual(self.request('/api/family/event',False,{'title':'Denied'})[0],401)
+        payload={'title':'API event','eventDate':'2026-01-01','body':'Test only','status':'published','revision':app.setting('familyRevision',0)}
+        self.assertEqual(self.request('/api/family/event',data=payload)[0],200)
+        for path in ['/family-graph.js','/family-map.js','/family-map.css','/family-events.js']:
+            self.assertEqual(self.request(path,False)[0],200)
+
     def test_empty_recording_day_is_not_service_failure(self):
         error = app.urllib.error.HTTPError('http://localhost/list', 404, 'Not Found', {},
                                            io.BytesIO(b'{"error":"no recording segments found"}'))

test_calendar.js

@@ -0,0 +1,17 @@
+'use strict';
+const test=require('node:test'),assert=require('node:assert/strict'),cal=require('./web/calendar.js');
+test('Spring Festival and leap month are bidirectional',()=>{
+  assert.deepEqual(cal.lunar('2024-02-10'),{year:2024,month:1,day:1,leap:false});
+  assert.equal(cal.solar('2024-01-01'),'2024-02-10');
+  assert.deepEqual(cal.lunar('2023-03-22'),{year:2023,month:2,day:1,leap:true});
+  assert.equal(cal.solar('2023-02-01',true),'2023-03-22');
+  assert.equal(cal.solar('2023-02-01',false),'2023-02-20');
+});
+test('all days across a leap year round trip',()=>{
+  for(let n=0;n<366;n++){const s=new Date(Date.UTC(2024,0,1+n,12)).toISOString().slice(0,10),l=cal.lunar(s);assert.equal(cal.solar(cal.iso(l),l.leap),s);}
+});
+test('invalid dates, nonexistent leap months and range are explicit',()=>{
+  for(const s of ['2026-02-30','2026-13-01','bad'])assert.throws(()=>cal.solarDate(s));
+  assert.throws(()=>cal.solar('2024-02-01',true));assert.throws(()=>cal.solar('2024-12-31'));assert.throws(()=>cal.lunar('1800-01-01'));
+  assert.equal(cal.describe('1800-01-01'),'1800-01-01（公历）');
+});

test_family_graph.js

@@ -0,0 +1,12 @@
+const test=require('node:test'),assert=require('node:assert/strict'),G=require('./web/family-graph.js');
+const person=(id,extra={})=>({id,name:id,birthDate:'',...extra});
+const edge=(fromId,toId,kind='parent',extra={})=>({id:fromId+toId,fromId,toId,kind,active:true,...extra});
+function valid(g,count){assert.equal(g.nodes.length,count);assert.equal(new Set(g.nodes.map(n=>n.id)).size,count);for(const n of g.nodes){assert.ok(Number.isFinite(n.x)&&Number.isFinite(n.y));assert.ok(n.x>=0&&n.y>=0&&n.x+n.width<=g.width&&n.y+n.height<=g.height);}for(let i=0;i<g.nodes.length;i++)for(let j=i+1;j<g.nodes.length;j++){const a=g.nodes[i],b=g.nodes[j];assert.ok(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y,'nodes overlap');}}
+test('both parents, spouses, siblings, children appear once in one complete graph',()=>{const p=['grandfather','grandmother','father','mother','self','sister','partner','son'].map(x=>person(x));const e=[edge('grandfather','grandmother','spouse'),edge('grandfather','father'),edge('grandmother','father'),edge('father','mother','spouse'),edge('father','self'),edge('mother','self'),edge('father','sister'),edge('mother','sister'),edge('self','partner','spouse'),edge('self','son'),edge('partner','son')];const g=G.layout(p,e,{selfId:'self'});valid(g,8);assert.equal(g.paths.length,e.length);const m=new Map(g.nodes.map(n=>[n.id,n]));assert.equal(m.get('father').y,m.get('mother').y);assert.equal(m.get('self').y,m.get('sister').y);assert.ok(m.get('father').y<m.get('self').y);assert.ok(m.get('son').y>m.get('self').y);});
+test('archives, inactive edges, missing endpoints are explicit filters',()=>{const p=[person('a'),person('b',{archived:true}),person('c')],e=[edge('a','b'),edge('a','c','parent',{active:false}),edge('missing','a')];const g=G.layout(p,e);valid(g,2);assert.equal(g.paths.length,0);valid(G.layout(p,e,{showArchived:true}),3);});
+test('disconnected family branches and isolated people are retained',()=>{const p=['a','b','c','d','e'].map(x=>person(x)),g=G.layout(p,[edge('a','b'),edge('c','d')],{selfId:'c'});valid(g,5);assert.equal(g.components,3);assert.equal(g.nodes[0].id,'c');});
+test('cross-generation spouse constraints fall back without changing parent order',()=>{const p=['a','b','c','d'].map(x=>person(x));const g=G.layout(p,[edge('a','b','spouse'),edge('c','d','spouse'),edge('a','c'),edge('d','b')]);valid(g,4);assert.ok(g.warnings.length);const m=new Map(g.nodes.map(n=>[n.id,n]));assert.ok(m.get('c').y>m.get('a').y);assert.ok(m.get('b').y>m.get('d').y);});
+test('ancestry cycles from malformed data terminate with warning',()=>{const g=G.layout([person('a'),person('b')],[edge('a','b'),edge('b','a')]);valid(g,2);assert.ok(g.warnings.length);});
+test('deep ancestry has no recursive limit and no silent truncation',()=>{const p=Array.from({length:1000},(_,i)=>person(String(i)));const e=p.slice(1).map((p,i)=>edge(String(i),p.id));const g=G.layout(p,e);assert.equal(g.nodes.length,1000);assert.equal(g.paths.length,999);assert.ok(g.nodes[999].y>g.nodes[0].y);});
+test('empty and one-person family have valid bounds',()=>{valid(G.layout([],[]),0);valid(G.layout([person('self')],[],{selfId:'self'}),1);});
+test('layout never mutates stored people or relationships',()=>{const p=[person('a'),person('b')],e=[edge('a','b')],before=JSON.stringify([p,e]);G.layout(p,e);assert.equal(JSON.stringify([p,e]),before);});

test_ptz.py

@@ -0,0 +1,55 @@
+import threading
+import unittest
+from unittest.mock import patch
+from xml.etree.ElementTree import fromstring
+import ptz
+
+
+class PtzTests(unittest.TestCase):
+    def setUp(self):
+        self.controller = ptz.Controller()
+        self.camera = dict(host='192.168.0.2', username='admin', password='example', mainPath='/stream1')
+        self.info = dict(endpoint=(80, '/onvif/PTZ'), profile='profile1', node='shared')
+
+    def test_nudge_has_device_deadline_and_explicit_stop(self):
+        with patch.object(self.controller, 'discover', return_value=self.info), patch.object(self.controller, 'call') as call, patch('ptz.time.sleep'):
+            self.assertTrue(self.controller.command(self.camera, 'left')['stopped'])
+            self.assertEqual([c.args[3] for c in call.call_args_list], ['ContinuousMove', 'Stop'])
+            self.assertIn('<m:Timeout>PT1S</m:Timeout>', call.call_args_list[0].args[4])
+            self.assertIn('x="-0.25"', call.call_args_list[0].args[4])
+
+    def test_failed_move_still_stops(self):
+        with patch.object(self.controller, 'discover', return_value=self.info), patch.object(self.controller, 'call', side_effect=[OSError(), None]) as call:
+            with self.assertRaises(OSError):
+                self.controller.command(self.camera, 'up')
+            self.assertEqual(call.call_args_list[-1].args[3], 'Stop')
+            self.assertFalse(self.controller.locks[('192.168.0.2', 80, 'shared')].locked())
+
+    def test_shared_node_rejects_overlapping_moves_but_allows_stop(self):
+        lock=threading.Lock();lock.acquire();self.controller.locks[('192.168.0.2',80,'shared')]=lock
+        with patch.object(self.controller, 'discover', return_value=self.info), patch.object(self.controller, 'call') as call:
+            with self.assertRaises(ValueError):self.controller.command(self.camera,'right')
+            self.controller.command(self.camera,'stop')
+            self.assertEqual(call.call_args.args[3],'Stop')
+        lock.release()
+
+    def test_arbitrary_commands_and_foreign_services_rejected(self):
+        for action in ['zoom','home','SetPreset',None]:
+            with self.assertRaises(ValueError):self.controller.command(self.camera,action)
+        for endpoint in ['http://example.org/onvif/PTZ','http://admin:secret@192.168.0.2/onvif/PTZ','https://192.168.0.2/onvif/PTZ']:
+            with self.assertRaises(ValueError):self.controller.endpoint(self.camera,endpoint)
+
+    def test_discovery_and_short_timeout_requirement(self):
+        def xml(text):return fromstring('<root xmlns:tt="'+ptz.onvif.SCHEMA+'" xmlns:m="'+ptz.onvif.MEDIA+'">'+text+'</root>')
+        caps=xml('<tt:PTZ><tt:XAddr>http://192.168.0.2/onvif/PTZ</tt:XAddr></tt:PTZ><tt:Media><tt:XAddr>http://192.168.0.2/onvif/Media</tt:XAddr></tt:Media>')
+        profiles=xml('<m:Profiles token="profile1"><tt:PTZConfiguration token="config"><tt:NodeToken>shared</tt:NodeToken></tt:PTZConfiguration></m:Profiles>')
+        template='<tt:ContinuousPanTiltVelocitySpace><tt:URI>'+ptz.SPACE+'</tt:URI><tt:XRange><tt:Min>-1</tt:Min><tt:Max>1</tt:Max></tt:XRange><tt:YRange><tt:Min>-1</tt:Min><tt:Max>1</tt:Max></tt:YRange></tt:ContinuousPanTiltVelocitySpace><tt:PTZTimeout><tt:Min>{minimum}</tt:Min><tt:Max>PT600S</tt:Max></tt:PTZTimeout>'
+        self.camera['mainPath']='/stream1?profile=profile1'
+        with patch.object(self.controller,'call',side_effect=[caps,profiles,xml(template.format(minimum='PT1S'))]):
+            self.assertTrue(self.controller.capabilities(self.camera)['supported'])
+        self.controller.cache.clear()
+        with patch.object(self.controller,'call',side_effect=[caps,profiles,xml(template.format(minimum='PT5S'))]):
+            with self.assertRaises(ValueError):self.controller.discover(self.camera)
+
+
+if __name__=='__main__':unittest.main()

web/app.js

@@ -14,6 +14,7 @@ function applyPermissions(){
   $('#current-user').textContent=currentUser ? currentUser.name+' · '+(admin?'管理员':'个人账号') : '';
 }
 function clearPrivateView(){
+  if(typeof closePtz==='function')closePtz();if(document.fullscreenElement)document.exitFullscreen().catch(()=>{});
   currentUser=null;stopPlayers();resetPlayback();
   state={cameras:[],assets:[],recorders:[],sites:[],storage:{},scan:{}};
   for(const id of ['live-grid','asset-list','camera-list','recorder-list','site-list','audit-list','family-people','family-detail','family-tree','user-list'])$('#'+id).replaceChildren();
@@ -37,7 +38,8 @@ function setOptions(select, html) { const old = select.value; select.innerHTML =
 function stopPlayers() { players.forEach(p => p.destroy()); players = []; $$('#live-grid video').forEach(v => {v.pause();v.removeAttribute('src');v.load();}); liveKey = ''; }
 function showPage(page) {
   if(!isAdmin()&&!['live','playback','family'].includes(page))return;
-  if (activePage !== page) stopPlayers();
+  if (activePage !== page) {stopPlayers();if(typeof closePtz==='function')closePtz();}
+  if(page!=='family'&&typeof closeFamilyFullscreen==='function')closeFamilyFullscreen();
   activePage = page;
   $('.metrics').hidden=['family','users'].includes(page);
   $('.filter-row').hidden=['family','users'].includes(page);
@@ -47,7 +49,7 @@ function showPage(page) {
   if (page !== 'playback') resetPlayback();
   render();
   if (page === 'storage') loadAudit();
-  if (page === 'family') loadFamily();
+  if (page === 'family') loadFamily(true);
   if (page === 'users') loadUsers();
 }
 function render() {
@@ -72,6 +74,7 @@ function render() {
   }
   if (activePage === 'storage') renderStorage();
   applyPermissions();
+  if(activePage==='live'&&typeof wallSync==='function')wallSync();
 }
 function empty(title, description, button) { return `<div class="empty"><h3>${esc(title)}</h3><p>${esc(description)}</p>${button || ''}</div>`; }
 function renderLive() {
@@ -79,7 +82,7 @@ function renderLive() {
   const key = ZhaoLivePlayer.key(cameras, quality);
   if (key === liveKey) { updateLiveStatus(cameras); return; }
   stopPlayers(); liveKey = key;
-  $('#live-grid').innerHTML = cameras.length ? cameras.map(c=>`<article class="camera-card"><div class="video-panel"><video data-camera="${c.id}" muted playsinline controls></video><div class="video-empty"><span class="lens">◎</span><span>${c.enabled ? '正在等待画面' : '设备连接已停用'}</span></div><div class="video-error" hidden></div></div><div class="camera-meta"><div><strong>${esc(c.name)}</strong><p>${esc(siteName(c.siteId)+' · '+(c.point || '安装位置待填写'))}</p></div><span class="badge ${c.ready?'':'off'}">${c.recordingActive ? '● 正在录像' : c.ready ? '码流已接通' : c.enabled ? '等待接通' : '已停用'}</span></div><div class="camera-actions"><button class="quiet" data-edit-camera="${c.id}">设备配置</button><button class="quiet" data-play-camera="${c.id}">查看录像</button></div></article>`).join('') : (isAdmin()?empty('先接入一台摄像头','建立空间档案，再把设备添加到对应位置。','<button data-action="new-camera">＋ 添加摄像头</button>'):empty('当前范围没有可查看的摄像头','请选择已授权空间，或联系管理员配置观看权限。'));
+  $('#live-grid').innerHTML = cameras.length ? cameras.map(c=>`<article class="camera-card"><div class="wall-reorder"><span draggable="false" data-wall-drag="${c.id}" title="拖动排列">⠿ 拖动</span><button class="quiet" data-wall-before="${c.id}" aria-label="${esc(c.name)}前移">前移</button><button class="quiet" data-wall-after="${c.id}" aria-label="${esc(c.name)}后移">后移</button></div><div class="video-panel"><video data-camera="${c.id}" muted playsinline controls></video><div class="video-empty"><span class="lens">◎</span><span>${c.enabled ? '正在等待画面' : '设备连接已停用'}</span></div><div class="video-error" hidden></div></div><div class="camera-meta"><div><strong>${esc(c.name)}</strong><p>${esc(siteName(c.siteId)+' · '+(c.point || '安装位置待填写'))}</p></div><span class="badge ${c.ready?'':'off'}">${c.recordingActive ? '● 正在录像' : c.ready ? '码流已接通' : c.enabled ? '等待接通' : '已停用'}</span></div><div class="camera-actions"><button class="quiet" data-edit-camera="${c.id}">设备配置</button><button class="quiet" data-play-camera="${c.id}">查看录像</button><button class="quiet" data-ptz-camera="${c.id}" hidden>云台控制</button></div></article>`).join('') : (isAdmin()?empty('先接入一台摄像头','建立空间档案，再把设备添加到对应位置。','<button data-action="new-camera">＋ 添加摄像头</button>'):empty('当前范围没有可查看的摄像头','请选择已授权空间，或联系管理员配置观看权限。'));
   for (const c of cameras.filter(c=>c.enabled)) {
     const video = $(`video[data-camera="${c.id}"]`);
     players.push(new ZhaoLivePlayer(video, video.parentElement, `/media/live/cam_${c.id}_${quality}/index.m3u8`));

web/calendar.js

@@ -0,0 +1,38 @@
+/* Chinese calendar conversion supplied by the browser's ICU calendar, offline. */
+(function(root){
+  'use strict';
+  const fmt=new Intl.DateTimeFormat('en-u-ca-chinese',{year:'numeric',month:'numeric',day:'numeric',timeZone:'Asia/Shanghai'});
+  const cache=new Map();
+  function solarDate(value){
+    if(!/^\d{4}-\d{2}-\d{2}$/.test(value))throw Error('日期请填写 YYYY-MM-DD');
+    const d=new Date(value+'T12:00:00Z');
+    if(!Number.isFinite(+d)||d.toISOString().slice(0,10)!==value)throw Error('日期不存在');
+    return d;
+  }
+  function lunar(value){
+    const d=solarDate(value),year=d.getUTCFullYear();
+    if(year<1901||year>2100)throw Error('自动换算支持 1901—2100 年；更早日期可填写公历并在备注保留原记载');
+    if(fmt.resolvedOptions().calendar!=='chinese')throw Error('当前浏览器不支持农历换算');
+    const parts=Object.fromEntries(fmt.formatToParts(d).map(p=>[p.type,p.value]));
+    return {year:Number(parts.relatedYear),month:parseInt(parts.month,10),day:Number(parts.day),leap:parts.month.includes('bis')};
+  }
+  function solar(value,leap=false){
+    if(!/^\d{4}-\d{2}-\d{2}$/.test(value))throw Error('农历请填写 YYYY-MM-DD，例如 2023-02-01');
+    const [year,month,day]=value.split('-').map(Number);
+    if(year<1901||year>2099)throw Error('农历输入支持 1901—2099 年');
+    if(month<1||month>12||day<1||day>30)throw Error('农历日期不存在');
+    if(!cache.has(year)){
+      const days=new Map(),start=Date.UTC(year,0,1,12),end=Date.UTC(year+1,2,1,12);
+      for(let t=start;t<end;t+=86400000){const iso=new Date(t).toISOString().slice(0,10),l=lunar(iso);if(l.year===year)days.set(`${l.month}-${l.day}-${l.leap}`,iso);}
+      if(cache.size>8)cache.clear();cache.set(year,days);
+    }
+    const result=cache.get(year).get(`${month}-${day}-${!!leap}`);
+    if(!result)throw Error('该农历日期或闰月不存在');
+    return result;
+  }
+  const pad=n=>String(n).padStart(2,'0');
+  function iso(l){return `${l.year}-${pad(l.month)}-${pad(l.day)}`;}
+  function describe(value){if(!value)return '';try{const l=lunar(value);return `${value} · 农历 ${l.year}年${l.leap?'闰':''}${l.month}月${l.day}日`;}catch{return value+'（公历）';}}
+  root.ZhaoCalendar={solarDate,lunar,solar,iso,describe};
+  if(typeof module!=='undefined')module.exports=root.ZhaoCalendar;
+})(typeof window==='undefined'?globalThis:window);

web/date-fields.js

@@ -0,0 +1,38 @@
+'use strict';
+function dateHint(field,strict=false){
+  const input=field.querySelector('[data-date-value]'),hint=field.querySelector('[data-date-hint]'),hidden=field.querySelector('input[type=hidden]');
+  const mode=field.querySelector('[data-calendar]').value,value=input.value.trim(),leap=field.querySelector('[data-date-leap]').checked;
+  field.querySelector('[data-leap-label]').hidden=mode!=='lunar';input.setCustomValidity('');
+  if(!value){hidden.value='';hint.textContent=input.required?'请选择事情发生的日期':'日期不详可留空';return;}
+  try{
+    const solar=mode==='solar'?(ZhaoCalendar.solarDate(value),value):ZhaoCalendar.solar(value,leap);
+    hidden.value=solar;
+    if(mode==='lunar')hint.textContent='公历 '+solar;
+    else{try{const l=ZhaoCalendar.lunar(solar);hint.textContent=`农历 ${l.year}年${l.leap?'闰':''}${l.month}月${l.day}日`;}catch(e){hint.textContent=e.message;}}
+  }catch(e){hidden.value='';input.setCustomValidity(e.message);hint.textContent=e.message;if(strict)throw e;}
+}
+function syncLifeStatus(){
+  const deceased=$('#person-form').elements.lifeStatus.value==='deceased',field=$('[data-date-field="deathDate"]');field.hidden=!deceased;
+  field.querySelectorAll('input,select').forEach(e=>e.disabled=!deceased);
+  if(!deceased)field.querySelector('[data-date-value]').setCustomValidity('');
+}
+function initDateFields(scope=$('#person-form')){
+  for(const field of scope.querySelectorAll('[data-date-field]')){
+    field.querySelector('[data-calendar]').value='solar';field.querySelector('[data-date-leap]').checked=false;
+    field.querySelector('[data-date-value]').value=field.querySelector('input[type=hidden]').value;dateHint(field);
+  }syncLifeStatus();
+}
+function syncDateFields(strict=false,scope=$('#person-form')){
+  syncLifeStatus();for(const field of scope.querySelectorAll('[data-date-field]'))if(!field.hidden)dateHint(field,strict);
+  if($('[data-date-field="deathDate"]').hidden)$('#person-form').elements.deathDate.value='';
+}
+for(const field of $$('[data-date-field]')){
+  field.querySelector('[data-date-value]').addEventListener('input',()=>dateHint(field));
+  field.querySelector('[data-date-leap]').addEventListener('change',()=>dateHint(field));
+  field.querySelector('[data-calendar]').addEventListener('change',()=>{
+    const hidden=field.querySelector('input[type=hidden]'),input=field.querySelector('[data-date-value]'),mode=field.querySelector('[data-calendar]');
+    if(hidden.value){try{if(mode.value==='solar')input.value=hidden.value;else{const l=ZhaoCalendar.lunar(hidden.value);input.value=ZhaoCalendar.iso(l);field.querySelector('[data-date-leap]').checked=l.leap;}}catch(e){mode.value='solar';toast(e.message);}}
+    dateHint(field);
+  });
+}
+$('#person-form').elements.lifeStatus.addEventListener('change',syncLifeStatus);

web/family-events.js

@@ -0,0 +1,71 @@
+'use strict';
+function resetFamilyEvents(purge=false){
+  for(const id of ['family-event-person','family-event-year','family-event-search','event-person-search'])$('#'+id).value='';
+  if(purge){$('#family-event-person').replaceChildren();$('#family-event-year').replaceChildren();}
+  $('#family-event-relatives').checked=false;$('#family-event-state').value='published';$('#family-event-order').value='desc';
+  for(const id of ['family-timeline','event-detail-content','event-person-choices','family-event-count'])$('#'+id).replaceChildren();
+}
+function eventStatus(e){return e.archived?'已归档':e.status==='draft'?'草稿':'已发布';}
+function eventPeople(e){return e.personIds.map(id=>personName(id)).join('、')||'全家记事';}
+function filteredFamilyEvents(){
+  const person=$('#family-event-person').value,year=$('#family-event-year').value,term=$('#family-event-search').value.trim().toLowerCase();
+  const status=family.canEdit?$('#family-event-state').value:'published',ids=new Set(person?[person]:[]);
+  if(person&&$('#family-event-relatives').checked)for(const e of family.links.filter(e=>e.active)){if(e.fromId===person)ids.add(e.toId);if(e.toId===person)ids.add(e.fromId);}
+  return (family.events||[]).filter(e=>(status==='all'||(status==='archived'?e.archived:!e.archived&&e.status===status))&&(!year||e.eventDate.startsWith(year+'-'))&&(!person||e.personIds.some(id=>ids.has(id)))&&[e.title,e.summary,e.body,e.sourceName].join(' ').toLowerCase().includes(term)).sort((a,b)=>($('#family-event-order').value==='asc'?1:-1)*a.eventDate.localeCompare(b.eventDate)||a.id.localeCompare(b.id));
+}
+function renderFamilyEvents(){
+  setOptions($('#family-event-person'),'<option value="">全家</option>'+peopleOptions(false));
+  const years=[...new Set((family.events||[]).map(e=>e.eventDate.slice(0,4)))].sort().reverse();
+  setOptions($('#family-event-year'),'<option value="">所有年份</option>'+years.map(y=>`<option value="${esc(y)}">${esc(y)} 年</option>`).join(''));
+  $('#family-new-event').hidden=!family.canEdit;$('#family-event-state-label').hidden=!family.canEdit;
+  $('#family-event-relatives').disabled=!$('#family-event-person').value;
+  const events=filteredFamilyEvents();$('#family-event-count').textContent=`${events.length} 条记事`+($('#family-event-person').value?' · '+personName($('#family-event-person').value)+($('#family-event-relatives').checked?'及相关亲人':''):' · 全家');
+  let year='';
+  $('#family-timeline').innerHTML=events.map(e=>{
+    const next=e.eventDate.slice(0,4),heading=next!==year?`<h3 class="timeline-year">${esc(next)}<span>年</span></h3>`:'';year=next;
+    return `${heading}<button class="timeline-event ${e.status==='draft'?'draft':''}" data-view-event="${e.id}"><time datetime="${esc(e.eventDate)}">${esc(e.eventDate.slice(5).replace('-','月'))}日</time><span class="timeline-event-body"><span class="timeline-event-status">${esc(eventStatus(e))}</span><strong>${esc(e.title)}</strong><span class="timeline-summary">${esc(e.summary||e.body.slice(0,130)||'查看原始报道')}</span><small>${esc(eventPeople(e))}</small><span class="timeline-read">查看详情${e.sourceUrl?' · 附报道':''} →</span></span></button>`;
+  }).join('')||empty('这里还没有记事','可调整筛选条件，或写下第一件值得记住的事。');
+}
+function showPersonEvents(id){familyView='timeline';renderFamily();$('#family-event-person').value=id;$('#family-event-year').value='';$('#family-event-search').value='';$('#family-event-relatives').checked=false;$('#family-event-state').value='published';renderFamilyEvents();$('#family-events').scrollIntoView({behavior:'smooth',block:'start'});}
+function personEventSummary(id){
+  const events=(family.events||[]).filter(e=>e.personIds.includes(id)&&!e.archived&&e.status==='published').sort((a,b)=>b.eventDate.localeCompare(a.eventDate));
+  return `<section class="person-events"><div class="section-head"><h3>相关重大记事 <small>${events.length}</small></h3>${family.canEdit?`<button class="quiet" data-new-person-event="${id}">＋ 记一件事</button>`:''}</div>${(familyView==='timeline'?events.slice(0,3):[]).map(e=>`<button class="person-event-link" data-view-event="${e.id}"><time>${esc(e.eventDate)}</time><span>${esc(e.title)}</span></button>`).join('')||(familyView==='timeline'?'<p class="description">尚无已发布的相关记事。</p>':'')}<button class="quiet" data-person-events="${id}">在时间线追溯 →</button></section>`;
+}
+function openFamilyEvent(id){
+  const e=(family.events||[]).find(e=>e.id===id);if(!e)return;
+  // All content is plain text. External reports are links, never embedded HTML.
+  const safeSource=/^https?:\/\//i.test(e.sourceUrl||'')?e.sourceUrl:'';
+  $('#event-detail-content').innerHTML=`<div class="event-detail-meta"><time>${esc(ZhaoCalendar.describe(e.eventDate))}</time><span class="badge">${esc(eventStatus(e))}</span></div><h2 id="event-detail-title">${esc(e.title)}</h2>${e.summary?`<p class="event-lead">${esc(e.summary)}</p>`:''}<div class="event-associated"><span class="description">关联人物</span>${e.personIds.length?e.personIds.map(id=>`<button class="quiet" data-event-person="${esc(id)}">${esc(personName(id))} ↗</button>`).join(''):'<span>全家记事</span>'}</div><div class="family-prose event-article">${esc(e.body||'此条记事暂未填写详细正文。')}</div>${safeSource?`<a class="button secondary event-source" href="${esc(safeSource)}" target="_blank" rel="noopener noreferrer">阅读原始报道${e.sourceName?' · '+esc(e.sourceName):''} ↗</a>`:e.sourceName?`<p class="description">资料来源：${esc(e.sourceName)}</p>`:''}<p class="description event-updated">最近整理：${esc(new Date(e.updatedAt).toLocaleString())}</p>${family.canEdit?`<button data-edit-event="${e.id}">编辑这条记事</button>`:''}`;
+  $('#event-detail-dialog').showModal();
+}
+function editFamilyEvent(id,personId=''){
+  if(!family.canEdit)return;
+  const e=(family.events||[]).find(e=>e.id===id),f=$('#event-form');
+  fillForm(f,{...(e||{}),revision:family.revision});
+  $('#event-editor-title').textContent=e?'编辑家族记事':'写一则家族记事';
+  const selected=new Set(e?.personIds||(personId?[personId]:[]));
+  $('#event-person-choices').innerHTML=family.people.map(p=>`<label class="check"><input type="checkbox" name="personIds" value="${esc(p.id)}" ${selected.has(p.id)?'checked':''}>${esc(p.name)}${p.archived?'（已归档）':''}</label>`).join('')||'<p class="description">家谱尚无人名，此条记事将记为全家记事。</p>';
+  $('#event-person-search').value='';f.querySelector('[value=published]').textContent=e?.status==='published'?'保存已发布内容':'发布记事';
+  initDateFields(f);if($('#event-detail-dialog').open)$('#event-detail-dialog').close();$('#event-dialog').showModal();
+}
+$('#event-form').addEventListener('submit',async e=>{
+  e.preventDefault();const f=e.currentTarget,buttons=[...f.querySelectorAll('[type=submit]')];buttons.forEach(b=>b.disabled=true);
+  try{syncDateFields(true,f);const data=formValues(f);data.revision=Number(data.revision);data.personIds=[...f.querySelectorAll('[name=personIds]:checked')].map(el=>el.value);data.archived=f.elements.archived.checked;data.status=e.submitter?.value||'draft';
+    const result=await api('/api/family/event',data);$('#event-dialog').close();await loadFamily();familyView='timeline';renderFamily();
+    $('#family-event-person').value='';$('#family-event-year').value='';$('#family-event-search').value='';$('#family-event-state').value=data.archived?'archived':data.status;renderFamilyEvents();openFamilyEvent(result.item.id);toast(data.archived?'记事已归档，可在“已归档”中恢复':data.status==='published'?'记事已发布到家族时间线':'草稿已保存');
+  }catch(err){f.querySelector('.form-error').textContent=err.message;}finally{buttons.forEach(b=>b.disabled=false);}
+});
+$('#family-view-timeline').onclick=()=>{familyView='timeline';renderFamily();};
+$('#family-new-event').onclick=()=>editFamilyEvent();
+for(const id of ['family-event-person','family-event-year','family-event-order','family-event-relatives','family-event-state'])$('#'+id).onchange=renderFamilyEvents;
+$('#family-event-search').oninput=renderFamilyEvents;
+$('#event-person-search').oninput=()=>{const term=$('#event-person-search').value.trim().toLowerCase();$('#event-person-choices').querySelectorAll('label').forEach(l=>l.hidden=!l.textContent.toLowerCase().includes(term));};
+$('#family-event-clear').onclick=()=>{resetFamilyEvents();renderFamilyEvents();};
+document.addEventListener('click',e=>{
+  const b=e.target.closest('button');if(!b)return;
+  if(b.dataset.viewEvent)openFamilyEvent(b.dataset.viewEvent);
+  if(b.dataset.editEvent)editFamilyEvent(b.dataset.editEvent);
+  if(b.dataset.newPersonEvent)editFamilyEvent('',b.dataset.newPersonEvent);
+  if(b.dataset.personEvents)showPersonEvents(b.dataset.personEvents);
+  if(b.dataset.eventPerson){$('#event-detail-dialog').close();selectFamilyPerson(b.dataset.eventPerson,true);}
+});

web/family-graph.js

@@ -0,0 +1,97 @@
+'use strict';
+(function(root) {
+  const W=184,H=104,GAP=34,ROW=166,PAD=36;
+  // People appear once. Spouse groups share a row when this preserves the parent DAG.
+  function layout(inputPeople,inputLinks,{selfId='',showArchived=false}={}) {
+    const people=inputPeople.filter(p=>showArchived||!p.archived),byId=new Map(people.map(p=>[p.id,p]));
+    const links=inputLinks.filter(e=>e.active&&byId.has(e.fromId)&&byId.has(e.toId)&&e.fromId!==e.toId);
+    const adjacency=new Map(people.map(p=>[p.id,[]]));
+    links.forEach(e=>{adjacency.get(e.fromId).push(e.toId);adjacency.get(e.toId).push(e.fromId);});
+    const seen=new Set(),components=[];
+    for(const p of people) {
+      if(seen.has(p.id))continue;
+      const ids=[p.id];seen.add(p.id);
+      for(let i=0;i<ids.length;i++)for(const next of adjacency.get(ids[i]))if(!seen.has(next)){seen.add(next);ids.push(next);}
+      components.push(ids);
+    }
+    const order=(a,b)=>{
+      const x=byId.get(a),y=byId.get(b);
+      return (x.birthDate||'9999').localeCompare(y.birthDate||'9999')||x.name.localeCompare(y.name,'zh-CN')||a.localeCompare(b);
+    };
+    components.sort((a,b)=>Number(b.includes(selfId))-Number(a.includes(selfId))||b.length-a.length||order(a[0],b[0]));
+    const nodes=[],sections=[],warnings=[];let offset=PAD,maxWidth=400;
+    const connected=components.filter(c=>c.length>1),isolated=components.filter(c=>c.length===1).map(c=>c[0]);
+    for(const [componentIndex,ids] of connected.entries()) {
+      const idSet=new Set(ids),edges=links.filter(e=>idSet.has(e.fromId));
+      function ranked(alignSpouses) {
+        const roots=new Map(ids.map(id=>[id,id]));
+        function find(id){let r=id;while(roots.get(r)!==r)r=roots.get(r);while(roots.get(id)!==id){const next=roots.get(id);roots.set(id,r);id=next;}return r;}
+        if(alignSpouses)for(const e of edges.filter(e=>e.kind==='spouse'))roots.set(find(e.toId),find(e.fromId));
+        const units=new Map();for(const id of ids){const key=find(id);if(!units.has(key))units.set(key,{id:key,ids:[],rank:0,out:new Set(),incoming:new Set()});units.get(key).ids.push(id);}
+        for(const e of edges.filter(e=>e.kind==='parent')) {
+          const a=units.get(find(e.fromId)),b=units.get(find(e.toId));if(a===b)return null;
+          a.out.add(b.id);b.incoming.add(a.id);
+        }
+        const degree=new Map([...units.values()].map(u=>[u.id,u.incoming.size]));
+        const queue=[...units.values()].filter(u=>!degree.get(u.id));
+        for(let i=0;i<queue.length;i++)for(const id of queue[i].out){const u=units.get(id);u.rank=Math.max(u.rank,queue[i].rank+1);degree.set(id,degree.get(id)-1);if(!degree.get(id))queue.push(u);}
+        return queue.length===units.size?units:null;
+      }
+      let units=ranked(true);
+      if(!units){units=ranked(false);warnings.push('部分配偶跨层排列，请以亲子连线确认关系。');}
+      if(!units) {
+        // The API rejects ancestry cycles; imported/malformed input must still terminate.
+        units=new Map(ids.map(id=>[id,{id,ids:[id],rank:0,out:new Set(),incoming:new Set()}]));
+        warnings.push('检测到循环关系，请核对人物关系。');
+      }
+      const rows=[];
+      for(const u of units.values()){u.ids.sort(order);u.width=u.ids.length*W+(u.ids.length-1)*GAP;(rows[u.rank]??=[]).push(u);}
+      rows.forEach(row=>row.sort((a,b)=>order(a.ids[0],b.ids[0])));
+      // Barycentric passes keep sibling branches together without changing generations.
+      const positions=new Map();
+      function measure(){for(const row of rows){let x=0;for(const u of row){positions.set(u.id,x+u.width/2);x+=u.width+GAP*2;}}}
+      for(let pass=0;pass<4;pass++) {
+        measure();const indices=rows.map((_,i)=>i);if(pass%2)indices.reverse();
+        for(const i of indices)rows[i].sort((a,b)=>{
+          const center=u=>{const ns=[...(pass%2?u.out:u.incoming)];return ns.length?ns.reduce((n,id)=>n+positions.get(id),0)/ns.length:positions.get(u.id);};
+          return center(a)-center(b)||order(a.ids[0],b.ids[0]);
+        });
+      }
+      const widths=rows.map(row=>row.reduce((n,u)=>n+u.width,0)+Math.max(0,row.length-1)*GAP*2);
+      const width=Math.max(...widths)+PAD*2+70,height=rows.length*ROW+20;
+      sections.push({x:PAD,y:offset,width:width-PAD*2,height,label:`家族分支 ${componentIndex+1} · ${ids.length} 位人物`});
+      rows.forEach((row,rank)=>{
+        let x=PAD+(width-PAD*2-70-widths[rank])/2;
+        for(const u of row){for(const id of u.ids){nodes.push({id,x,y:offset+42+rank*ROW,width:W,height:H,rank,component:componentIndex});x+=W+GAP;}x+=GAP;}
+      });
+      for(const node of nodes.filter(n=>n.component===componentIndex))node.corridor=width-PAD-46;
+      offset+=height+48;maxWidth=Math.max(maxWidth,width);
+    }
+    if(isolated.length) {
+      isolated.sort((a,b)=>Number(b===selfId)-Number(a===selfId)||order(a,b));
+      const beside=connected.length===1&&isolated.length<=4;
+      const columns=beside?1:Math.min(5,isolated.length),width=columns*(W+GAP)-GAP+PAD*2;
+      const x=beside?maxWidth:PAD,y=beside?PAD:offset,height=Math.ceil(isolated.length/columns)*150+42;
+      sections.push({x,y,width:width-PAD*2,height,label:people.length===1?'从自己开始，连接每一代亲人':'待连接的人物'});
+      isolated.forEach((id,i)=>nodes.push({id,x:x+i%columns*(W+GAP),y:y+42+Math.floor(i/columns)*150,width:W,height:H,rank:0,component:-1}));
+      offset=Math.max(offset,y+height);maxWidth=beside?maxWidth+width:Math.max(maxWidth,width);
+    }
+    const located=new Map(nodes.map(n=>[n.id,n]));
+    const paths=links.map((e,i)=>{
+      const a=located.get(e.fromId),b=located.get(e.toId);let d;
+      if(e.kind==='parent') {
+        const sx=a.x+W/2,sy=a.y+H,tx=b.x+W/2,ty=b.y;
+        if(b.rank===a.rank+1){const mid=(sy+ty)/2+(i%3-1)*9;d=`M${sx},${sy} V${mid} H${tx} V${ty}`;}
+        else {const x=(a.corridor||maxWidth-PAD)+(i%5)*8;d=`M${sx},${sy} V${sy+18} H${x} V${ty-18} H${tx} V${ty}`;}
+      }else{
+        const [left,right]=a.x<=b.x?[a,b]:[b,a];
+        if(a.y===b.y&&right.x-left.x<=W+GAP+1)d=`M${left.x+W},${left.y+H/2} H${right.x}`;
+        else if(a.y===b.y){const top=a.y-16-(i%3)*8;d=`M${a.x+W/2},${a.y} V${top} H${b.x+W/2} V${b.y}`;}
+        else {const x=(a.corridor||maxWidth-PAD)+(i%5)*8;d=`M${a.x+W},${a.y+H/2} H${x} V${b.y+H/2} H${b.x+W}`;}
+      }
+      return {...e,d};
+    });
+    return {nodes,paths,sections,width:maxWidth,height:Math.max(220,offset+PAD),warnings:[...new Set(warnings)],components:components.length};
+  }
+  const api={layout};if(typeof module!=='undefined'&&module.exports)module.exports=api;else root.ZhaoFamilyGraph=api;
+})(typeof window!=='undefined'?window:globalThis);

web/family-map.js

@@ -0,0 +1,73 @@
+'use strict';
+class FamilyMap {
+  constructor(viewport,onSelect) {
+    this.viewport=viewport;this.onSelect=onSelect;this.scale=1;this.autoFit=true;this.key='';this.data=null;
+    viewport.addEventListener('click',e=>{const b=e.target.closest('[data-map-person]');if(b)this.onSelect(b.dataset.mapPerson);});
+    viewport.addEventListener('pointerdown',e=>{
+      if(e.pointerType!=='mouse'||e.button!==0||e.target.closest('button'))return;
+      this.drag={x:e.clientX,y:e.clientY,left:viewport.scrollLeft,top:viewport.scrollTop};viewport.setPointerCapture(e.pointerId);viewport.classList.add('panning');e.preventDefault();
+    });
+    viewport.addEventListener('pointermove',e=>{if(!this.drag)return;viewport.scrollLeft=this.drag.left+this.drag.x-e.clientX;viewport.scrollTop=this.drag.top+this.drag.y-e.clientY;});
+    const release=()=>{this.drag=null;viewport.classList.remove('panning');};
+    viewport.addEventListener('pointerup',release);viewport.addEventListener('pointercancel',release);viewport.addEventListener('lostpointercapture',release);
+    this.resize=new ResizeObserver(()=>{if(this.autoFit)this.fit();else this.applyScale();});this.resize.observe(viewport);
+  }
+  reset(){this.key='';this.data=null;this.viewport.replaceChildren();this.autoFit=true;this.drag=null;$('#family-zoom-value').textContent='100%';}
+  render(data) {
+    this.data=data;
+    const key=JSON.stringify([data.people,data.links,data.showArchived]);
+    if(key!==this.key) {
+      this.key=key;this.graph=ZhaoFamilyGraph.layout(data.people,data.links,data);
+      const g=this.graph;
+      this.viewport.innerHTML=g.nodes.length?`<div class="family-map-space"><div class="family-map-surface"><svg class="family-map-lines" width="${g.width}" height="${g.height}" aria-hidden="true"><defs><marker id="family-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0 0 L8 4 L0 8 Z" fill="#679d93"/></marker></defs>${g.paths.map(e=>`<path class="family-edge ${e.kind==='spouse'?'spouse':e.lineage==='adoptive'||e.lineage==='step'?'nonbiological':'parent'}" data-from="${esc(e.fromId)}" data-to="${esc(e.toId)}" d="${e.d}" ${e.kind==='parent'?'marker-end="url(#family-arrow)"':''}><title>${esc(data.people.find(p=>p.id===e.fromId)?.name)}${e.kind==='parent'?' → 子女：':' ↔ 配偶：'}${esc(data.people.find(p=>p.id===e.toId)?.name)}${e.lineage==='adoptive'?'（收养）':e.lineage==='step'?'（继亲）':''}</title></path>`).join('')}</svg>${g.sections.map(s=>`<div class="family-branch-label">${esc(s.label)}</div>`).join('')}${g.nodes.map(n=>`<button type="button" class="family-node" data-map-person="${esc(n.id)}"></button>`).join('')}</div></div>`:empty('家谱从一个人开始','先录入本人，再连接父母、配偶与子女。');
+      const surface=this.viewport.querySelector('.family-map-surface');
+      if(surface){surface.style.width=g.width+'px';surface.style.height=g.height+'px';
+        surface.querySelectorAll('.family-branch-label').forEach((b,i)=>{b.style.left=g.sections[i].x+'px';b.style.top=g.sections[i].y+'px';});
+        surface.querySelectorAll('[data-map-person]').forEach((b,i)=>{const n=g.nodes[i];Object.assign(b.style,{left:n.x+'px',top:n.y+'px',width:n.width+'px',height:n.height+'px'});});}
+      this.autoFit=true;requestAnimationFrame(()=>this.fit());
+    }
+    const byId=new Map(data.people.map(p=>[p.id,p]));
+    this.viewport.querySelectorAll('[data-map-person]').forEach(b=>{
+      const p=byId.get(b.dataset.mapPerson),self=p.id===data.selfId,selected=p.id===data.focusId;
+      const matched=data.term&&[p.name,p.alias,p.birthplace].join(' ').toLowerCase().includes(data.term);
+      const relation=ZhaoKinship.describe(data.people,data.links,data.reference,p.id);
+      b.classList.toggle('self',self);b.classList.toggle('selected',selected);b.classList.toggle('search-hit',!!matched);b.classList.toggle('archived',!!p.archived);
+      b.setAttribute('aria-pressed',String(selected));b.setAttribute('aria-label',p.name+(self?'，本人':'')+'，'+relation+'，查看人物档案');
+      b.title=p.name+' · '+relation+(p.archived?' · 已归档':'');
+      b.innerHTML=`<span class="family-node-top"><span class="family-node-avatar" aria-hidden="true">${esc(Array.from(p.name)[0]||'人')}</span><span class="family-node-flags">${self?'<span class="self-badge">本人</span>':''}${p.archived?'<small>归档</small>':''}${p.lifeStatus==='deceased'?'<small>已故</small>':''}</span></span><strong>${esc(p.name)}</strong><span class="family-node-relation">${esc(relation)}</span><small>${esc(p.birthDate?p.birthDate.slice(0,4)+' 年生':'生年待考')}</small>`;
+    });
+    this.viewport.querySelectorAll('.family-edge').forEach(e=>e.classList.toggle('focused',e.dataset.from===data.focusId||e.dataset.to===data.focusId));
+    const messages=[...this.graph.warnings];
+    if(!data.selfId)messages.unshift('当前账号尚未关联家谱人物，可在“账号与关系”中设置。');
+    else if(!this.graph.nodes.some(n=>n.id===data.selfId))messages.unshift('本人已归档，勾选“显示归档人物”后可以定位。');
+    if(data.people.filter(p=>!p.archived).length===1)messages.push('目前仅录入一位人物，连接亲属后会自动展开家谱。');
+    $('#family-map-note').textContent=messages.join(' ');
+    $('#family-locate-self').disabled=!this.graph.nodes.some(n=>n.id===data.selfId);
+  }
+  applyScale() {
+    const v=this.viewport,g=this.graph,space=v.querySelector('.family-map-space'),surface=v.querySelector('.family-map-surface');
+    if(!g||!space||!v.clientWidth)return;
+    const w=Math.max(v.clientWidth,g.width*this.scale+32),h=Math.max(v.clientHeight,g.height*this.scale+32);
+    space.style.width=w+'px';space.style.height=h+'px';
+    this.left=(w-g.width*this.scale)/2;this.top=(h-g.height*this.scale)/2;
+    surface.style.transform=`translate(${this.left}px,${this.top}px) scale(${this.scale})`;
+    $('#family-zoom-value').textContent=Math.round(this.scale*100)+'%';
+  }
+  fit() {
+    const v=this.viewport,g=this.graph;if(!g||!v.clientWidth||!v.clientHeight)return;
+    this.autoFit=true;this.scale=Math.max(.001,Math.min(1,(v.clientWidth-40)/g.width,(v.clientHeight-40)/g.height));
+    this.applyScale();v.scrollTo(0,0);
+  }
+  zoom(factor) {
+    if(!this.graph)return;
+    const v=this.viewport,x=(v.scrollLeft+v.clientWidth/2-(this.left||0))/this.scale,y=(v.scrollTop+v.clientHeight/2-(this.top||0))/this.scale;
+    this.autoFit=false;this.scale=Math.max(.001,Math.min(2,this.scale*factor));this.applyScale();
+    v.scrollTo(x*this.scale+this.left-v.clientWidth/2,y*this.scale+this.top-v.clientHeight/2);
+  }
+  locate(id) {
+    const n=this.graph?.nodes.find(n=>n.id===id);if(!n)return;
+    this.autoFit=false;this.scale=Math.max(this.scale,.9);this.applyScale();
+    this.viewport.scrollTo((n.x+n.width/2)*this.scale+this.left-this.viewport.clientWidth/2,(n.y+n.height/2)*this.scale+this.top-this.viewport.clientHeight/2);
+    const b=[...this.viewport.querySelectorAll('[data-map-person]')].find(b=>b.dataset.mapPerson===id);b?.focus({preventScroll:true});
+  }
+}

web/family.js

@@ -1,56 +1,56 @@
 'use strict';
 pageInfo.family=['家谱','记下亲人的故事，让世代之间有迹可循。'];
 pageInfo.users=['账号与关系','每个人有自己的账号，权限与亲属关系分别设置。'];
-let family={people:[],links:[],revision:0,canEdit:false}, users=[], focusPerson='',familyGeneration=0;
+let family={people:[],links:[],events:[],revision:0,canEdit:false}, users=[], focusPerson='',familyGeneration=0,familyView='tree';
+const familyMap=new FamilyMap($('#family-tree'),id=>selectFamilyPerson(id));
 const relationships=['本人','配偶','哥哥','弟弟','姐姐','妹妹','爸爸','妈妈','爷爷','奶奶','姥爷','姥姥','伯伯','叔叔','姑姑','舅舅','姨妈','儿子','女儿','孙子','孙女','外孙','外孙女','曾孙','曾孙女','玄孙','玄孙女','祖先','后裔','亲友','同事'];
 $('#relationship-choices').innerHTML=relationships.map(r=>`<option value="${esc(r)}"></option>`).join('');
-function clearFamilyState(){familyGeneration++;family={people:[],links:[],revision:0,canEdit:false};users=[];focusPerson='';$('#family-reference').replaceChildren();delete $('#family-reference').dataset.initialized;$('#family-search').value='';$('#family-archived').checked=false;}
+function clearFamilyState(){closeFamilyFullscreen();familyGeneration++;family={people:[],links:[],events:[],revision:0,canEdit:false};users=[];focusPerson='';familyMap.reset();if(typeof resetFamilyEvents==='function')resetFamilyEvents(true);$('#family-map-note').textContent='';$('#family-count').textContent='';$('#family-reference').replaceChildren();delete $('#family-reference').dataset.initialized;$('#family-search').value='';$('#family-archived').checked=false;$('#family-find').hidden=true;}
 function personName(id){return family.people.find(p=>p.id===id)?.name||'未关联';}
 function peopleOptions(blank=true){return (blank?'<option value="">尚未关联</option>':'')+family.people.map(p=>`<option value="${p.id}">${esc(p.name+(p.archived?'（已归档）':''))}</option>`).join('');}
 function fillForm(form,data){form.reset();form.querySelector('.form-error').textContent='';for(const [k,v]of Object.entries(data)){const e=form.elements[k];if(!e)continue;if(e.type==='checkbox')e.checked=!!v;else e.value=v??'';}}
-async function loadFamily(){
+async function loadFamily(resetView=false){
   const generation=++familyGeneration;
   try{const result=await api('/api/family');if(!loggedIn||generation!==familyGeneration)return;family=result;
-    if(!family.people.some(p=>p.id===focusPerson))focusPerson=family.selfId||family.people.find(p=>!p.archived)?.id||'';
+    if(resetView===true||!family.people.some(p=>p.id===focusPerson))focusPerson=family.selfId||family.people.find(p=>!p.archived)?.id||'';
     setOptions($('#family-reference'),peopleOptions(false));if(!$('#family-reference').value&&family.selfId)$('#family-reference').value=family.selfId;
     if(!$('#family-reference').dataset.initialized&&family.selfId){$('#family-reference').value=family.selfId;$('#family-reference').dataset.initialized='true';}
-    $('#family-error').textContent='';renderFamily();
+    $('#family-error').textContent='';if(resetView===true){familyView='tree';$('#family-search').value='';}renderFamily();if(resetView===true)familyMap.fit();
   }catch(e){$('#family-error').textContent=e.message;}
 }
 function relationText(e){return personName(e.fromId)+(e.kind==='parent'?' → 子女：':' ↔ 配偶：')+personName(e.toId)+(e.active?'':'（已停用）');}
 function renderFamily(){
   const reference=$('#family-reference').value,term=$('#family-search').value.trim().toLowerCase();
   const people=family.people.filter(p=>($('#family-archived').checked||!p.archived)&&[p.name,p.alias,p.birthplace].join(' ').toLowerCase().includes(term));
-  $('#family-count').textContent=family.people.filter(p=>!p.archived).length+' 位人物 · '+family.links.filter(e=>e.active).length+' 条关系';
+  $('#family-count').textContent=family.people.filter(p=>!p.archived).length+' 位人物 · '+family.links.filter(e=>e.active).length+' 条关系'+(term?' · 找到 '+people.length+' 位':'');
+  $('#family-find').hidden=!term;$('#family-find').disabled=!people.length;
   $('#new-person').hidden=!family.canEdit;
-  $('#family-people').innerHTML=people.map(p=>`<button class="person-card ${p.id===focusPerson?'selected':''}" data-person="${p.id}"><strong>${esc(p.name)}</strong><span>${esc(ZhaoKinship.describe(family.people,family.links,reference,p.id))}</span><small>${esc(p.birthDate||'出生待考')}${p.archived?' · 已归档':''}</small></button>`).join('')||empty('从一个人物开始','可先录入自己，再逐步补齐父母、祖先和后辈。');
+  $('#family-people').innerHTML=people.map(p=>`<button class="person-card ${p.id===focusPerson?'selected':''} ${p.id===family.selfId?'self':''}" data-person="${p.id}" aria-pressed="${p.id===focusPerson}"><strong>${esc(p.name)} ${p.id===family.selfId?'<span class="self-badge">本人</span>':''}</strong><span>${esc(ZhaoKinship.describe(family.people,family.links,reference,p.id))}</span><small>${esc(p.birthDate||'出生待考')}${p.archived?' · 已归档':''}</small></button>`).join('')||empty(term?'没有找到这个人物':'从一个人物开始',term?'可换用姓名、别名或籍贯查找。':'可先录入自己，再逐步补齐父母、祖先和后辈。');
-  const p=family.people.find(p=>p.id===focusPerson);
-  if(!p){$('#family-detail').innerHTML='<h3>人物档案</h3><p class="description">选择或录入一位人物，查看关系与家谱。</p>';$('#family-tree').replaceChildren();return;}
-  const edges=family.links.filter(e=>e.fromId===p.id||e.toId===p.id);
-  $('#family-detail').innerHTML=`<div class="section-head"><div><span class="eyebrow">人物档案</span><h2>${esc(p.name)}</h2></div>${family.canEdit?`<button data-edit-person="${p.id}" class="quiet">编辑人物</button>`:''}</div><p class="description">相对于 ${esc(personName(reference))}：${esc(ZhaoKinship.describe(family.people,family.links,reference,p.id))}</p><dl>${[['别名',p.alias],['性别',{male:'男',female:'女',unknown:'待确认'}[p.gender]],['在世情况',{alive:'在世',deceased:'已故',unknown:'待确认'}[p.lifeStatus]],['出生日期',p.birthDate],['逝世日期',p.deathDate],['籍贯 / 出生地',p.birthplace]].map(([k,v])=>`<div><dt>${k}</dt><dd>${esc(v||'待补充')}</dd></div>`).join('')}</dl><h3>生平与记载</h3><p class="family-prose">${esc(p.biography||'尚未记录生平')}</p><p class="description family-prose">${esc(p.note||'')}</p><div class="section-head"><h3>亲属关系</h3>${family.canEdit?'<button id="add-relation" class="quiet">＋ 连接亲属</button>':''}</div>${edges.map(e=>`<div class="family-link"><span>${esc(relationText(e))}<small>${esc(({biological:'亲生',adoptive:'收养',step:'继亲',unspecified:''}[e.lineage]||'')+' '+(e.note||''))}</small></span>${family.canEdit?`<button class="quiet" data-edit-relation="${e.id}">编辑</button>`:''}</div>`).join('')||'<p class="description">尚未连接亲属。</p>'}`;
   renderFamilyTree();
+  const p=family.people.find(p=>p.id===focusPerson);
+  $('#family-detail').classList.toggle('is-self',p?.id===family.selfId&&!!p);
+  if(!p){$('#family-detail').innerHTML='<h3>人物档案</h3><p class="description">点击图中的人物查看生平，或录入第一位人物。</p>';return;}
+  const edges=family.links.filter(e=>e.fromId===p.id||e.toId===p.id);
+  $('#family-detail').innerHTML=`<div class="section-head"><div><span class="eyebrow">人物档案</span><h2>${esc(p.name)}</h2></div>${family.canEdit?`<button data-edit-person="${p.id}" class="quiet">编辑人物</button>`:''}</div><p class="description">相对于 ${esc(personName(reference))}：${esc(ZhaoKinship.describe(family.people,family.links,reference,p.id))}</p><dl>${[['别名',p.alias],['性别',{male:'男',female:'女',unknown:'待确认'}[p.gender]],['在世情况',{alive:'在世',deceased:'已故',unknown:'待确认'}[p.lifeStatus]],['出生日期',ZhaoCalendar.describe(p.birthDate)],...(p.lifeStatus==='deceased'?[['去世日期',ZhaoCalendar.describe(p.deathDate)]]:[]),['籍贯 / 出生地',p.birthplace]].map(([k,v])=>`<div><dt>${k}</dt><dd>${esc(v||'待补充')}</dd></div>`).join('')}</dl><h3>生平与记载</h3><p class="family-prose">${esc(p.biography||'尚未记录生平')}</p><p class="description family-prose">${esc(p.note||'')}</p><div class="section-head"><h3>亲属关系</h3>${family.canEdit?'<button id="add-relation" class="quiet">＋ 连接亲属</button>':''}</div>${edges.map(e=>`<div class="family-link"><span>${esc(relationText(e))}<small>${esc(({biological:'亲生',adoptive:'收养',step:'继亲',unspecified:''}[e.lineage]||'')+' '+(e.note||''))}</small></span>${family.canEdit?`<button class="quiet" data-edit-relation="${e.id}">编辑</button>`:''}</div>`).join('')||'<p class="description">尚未连接亲属。</p>'}`;
+  if(typeof personEventSummary==='function')$('#family-detail').insertAdjacentHTML('beforeend',personEventSummary(p.id));
+  $('#family-detail').insertAdjacentHTML('afterbegin',`${p.id===family.selfId?'<div class="family-self-heading">◎ 本人 · 当前账号关联人物</div>':''}<button type="button" id="family-show-person" class="quiet family-back-to-map">在图中定位</button>`);
 }
 function renderFamilyTree(){
-  const root=family.people.find(p=>p.id===focusPerson);if(!root)return;
+  $('#family-events').hidden=familyView!=='timeline';$('#family-map-footer').hidden=familyView==='timeline';$('.family-toolbar').hidden=familyView==='timeline';
-  const depth=Number($('#family-depth').value),edges=family.links.filter(e=>e.active),people=new Map(family.people.map(p=>[p.id,p]));let count=0;
+  $('#family-view-title').textContent=({tree:'全家关系图',list:'人物名册',timeline:'家族时间线'})[familyView];
-  function branch(id,d,direction,path){
+  $('#family-view-timeline').setAttribute('aria-pressed',String(familyView==='timeline'));
-    if(++count>300)return '<li>更多分支请切换人物查看</li>';
+  if(typeof renderFamilyEvents==='function')renderFamilyEvents();
-    const p=people.get(id);if(!p)return '';
+  $('#family-tree').hidden=familyView!=='tree';$('#family-people').hidden=familyView!=='list';$('#family-map-controls').hidden=familyView!=='tree';
-    const node=`<button class="quiet" data-person="${id}">${esc(p.name)}${p.archived?' · 已归档':''}</button>`;
+  $('#family-view-tree').setAttribute('aria-pressed',String(familyView==='tree'));$('#family-view-list').setAttribute('aria-pressed',String(familyView==='list'));
-    if(path.has(id))return `<li>${node}（重复分支）</li>`;
+  familyMap.render({...family,focusId:focusPerson,reference:$('#family-reference').value,term:$('#family-search').value.trim().toLowerCase(),showArchived:$('#family-archived').checked});
-    const seen=new Set([...path,id]);
-    const next=edges.filter(e=>e.kind==='parent'&&(direction==='up'?e.toId:e.fromId)===id).map(e=>direction==='up'?e.fromId:e.toId);
-    return `<li>${node}${d>0&&next.length?'<ul>'+next.map(child=>branch(child,d-1,direction,seen)).join('')+'</ul>':next.length?' <small>还有 '+next.length+' 位，点击此人物继续</small>':''}</li>`;
-  }
-  const spouseIds=edges.filter(e=>e.kind==='spouse'&&(e.fromId===root.id||e.toId===root.id)).map(e=>e.fromId===root.id?e.toId:e.fromId);
-  $('#family-tree').innerHTML=`<div><h3>上溯祖先</h3><ul>${branch(root.id,depth,'up',new Set())}</ul></div><div><h3>下续后裔</h3><ul>${branch(root.id,depth,'down',new Set())}</ul></div><div class="family-spouses"><h3>配偶</h3>${spouseIds.map(id=>`<button class="quiet" data-person="${id}">${esc(personName(id))}</button>`).join(' ')||'<p class="description">尚未记录</p>'}</div>`;
 }
-function openPerson(id){if(!family.canEdit)return;const p=family.people.find(p=>p.id===id)||{};fillForm($('#person-form'),{...p,revision:family.revision});$('#person-dialog').showModal();}
+function selectFamilyPerson(id,locate=false){focusPerson=id;if(locate)familyView='tree';renderFamily();if(locate)familyMap.locate(id);if(window.innerWidth<=1000&&!document.fullscreenElement)$('#family-detail').scrollIntoView({behavior:'smooth',block:'start'});}
+function openPerson(id){if(!family.canEdit)return;const p=family.people.find(p=>p.id===id)||{};fillForm($('#person-form'),{...p,revision:family.revision});initDateFields();$('#person-dialog').showModal();}
 function openRelation(id){if(!family.canEdit)return;if(family.people.length<2){toast('请先录入另一位亲属，再连接关系');return;}const f=$('#relation-form');f.elements.fromId.innerHTML=peopleOptions(false);f.elements.toId.innerHTML=peopleOptions(false);const edge=family.links.find(e=>e.id===id);fillForm(f,{...(edge||{fromId:focusPerson,active:true}),revision:family.revision});if(!edge)f.elements.toId.value=family.people.find(p=>p.id!==focusPerson)?.id||'';$('#relation-dialog').showModal();}
 for(const [name,path]of [['person','person'],['relation','link']]){
   $('#'+name+'-form').addEventListener('submit',async e=>{
     e.preventDefault();const f=e.currentTarget,b=f.querySelector('[type=submit]');b.disabled=true;
-    try{const d=formValues(f);d.revision=Number(d.revision);if(name==='person')d.archived=f.elements.archived.checked;else d.active=f.elements.active.checked;
+    try{const d=formValues(f);d.revision=Number(d.revision);if(name==='person'){syncDateFields(true);Object.assign(d,formValues(f));d.revision=Number(d.revision);d.archived=f.elements.archived.checked;}else d.active=f.elements.active.checked;
       const result=await api('/api/family/'+path,d);if(name==='person')focusPerson=result.item.id;f.closest('dialog').close();await loadFamily();toast('家谱已保存');
     }catch(err){f.querySelector('.form-error').textContent=err.message;}finally{b.disabled=false;}
   });
@@ -67,8 +67,29 @@ function openUser(id){
   fillForm(f,u);f.elements.password.required=!u.id;
   $('#user-sites').innerHTML=state.sites.map(s=>`<label class="check"><input type="checkbox" name="siteIds" value="${s.id}" ${(u.siteIds||[]).includes(s.id)?'checked':''}>${esc(s.name)}</label>`).join('');$('#user-dialog').showModal();
 }
-$('#user-form').addEventListener('submit',async e=>{e.preventDefault();const f=e.currentTarget,b=f.querySelector('[type=submit]');b.disabled=true;try{const d=formValues(f);d.siteIds=[...f.querySelectorAll('[name=siteIds]:checked')].map(el=>el.value);d.disabled=f.elements.disabled.checked;await api('/api/users',d);f.closest('dialog').close();await auth();if(loggedIn)await loadUsers();toast('账号已保存');}catch(err){f.querySelector('.form-error').textContent=err.message;}finally{b.disabled=false;}});
+$('#user-form').addEventListener('submit',async e=>{e.preventDefault();const f=e.currentTarget,b=f.querySelector('[type=submit]');b.disabled=true;try{const d=formValues(f);d.siteIds=[...f.querySelectorAll('[name=siteIds]:checked')].map(el=>el.value);d.disabled=f.elements.disabled.checked;d.ptzControl=f.elements.ptzControl.checked;await api('/api/users',d);f.closest('dialog').close();await auth();if(loggedIn)await loadUsers();toast('账号已保存');}catch(err){f.querySelector('.form-error').textContent=err.message;}finally{b.disabled=false;}});
 $('#new-person').onclick=()=>openPerson();$('#new-user').onclick=()=>openUser();$('#family-reload').onclick=loadFamily;
-$('#family-reference').onchange=renderFamily;$('#family-search').oninput=renderFamily;$('#family-archived').onchange=renderFamily;$('#family-depth').onchange=renderFamilyTree;
+$('#family-reference').onchange=renderFamily;$('#family-search').oninput=renderFamily;$('#family-archived').onchange=renderFamily;
-$('#family-export').onclick=async()=>{try{const data=await api('/api/family');const blob=new Blob([JSON.stringify({format:'zhaofu-family',version:1,exportedAt:new Date().toISOString(),people:data.people,links:data.links},null,2)],{type:'application/json'});const link=document.createElement('a'),href=URL.createObjectURL(blob);link.href=href;link.download='zhaofu-family-'+new Date().toISOString().slice(0,10)+'.json';link.click();setTimeout(()=>URL.revokeObjectURL(href),60000);}catch(e){toast(e.message);}};
+$('#family-view-tree').onclick=()=>{familyView='tree';renderFamily();familyMap.fit();};$('#family-view-list').onclick=()=>{familyView='list';renderFamily();};
-document.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.person){focusPerson=b.dataset.person;renderFamily();}if(b.dataset.editPerson)openPerson(b.dataset.editPerson);if(b.id==='add-relation')openRelation();if(b.dataset.editRelation)openRelation(b.dataset.editRelation);if(b.dataset.editUser)openUser(b.dataset.editUser);});
+$('#family-zoom-in').onclick=()=>familyMap.zoom(1.25);$('#family-zoom-out').onclick=()=>familyMap.zoom(.8);$('#family-fit').onclick=()=>familyMap.fit();
+$('#family-locate-self').onclick=()=>selectFamilyPerson(family.selfId,true);
+$('#family-find').onclick=()=>{const term=$('#family-search').value.trim().toLowerCase(),matches=family.people.filter(p=>($('#family-archived').checked||!p.archived)&&[p.name,p.alias,p.birthplace].join(' ').toLowerCase().includes(term));if(!matches.length)return;const index=matches.findIndex(p=>p.id===focusPerson);selectFamilyPerson(matches[(index+1)%matches.length].id,true);};
+let familyBodyOverflow='';
+function syncFamilyFullscreen(){
+  const expanded=document.fullscreenElement===$('#family-workspace')||$('#family-workspace').classList.contains('family-expanded');
+  $('#family-fullscreen').textContent=expanded?'退出全屏 · Esc':'全屏家谱';familyMap.fit();
+}
+function closeFamilyFullscreen(){
+  if($('#family-workspace').classList.contains('family-expanded')){$('#family-workspace').classList.remove('family-expanded');document.body.style.overflow=familyBodyOverflow;}
+  if(document.fullscreenElement===$('#family-workspace'))document.exitFullscreen().catch(()=>{});
+  syncFamilyFullscreen();
+}
+$('#family-fullscreen').onclick=async()=>{
+  if(document.fullscreenElement===$('#family-workspace')||$('#family-workspace').classList.contains('family-expanded')){closeFamilyFullscreen();return;}
+  try{await $('#family-workspace').requestFullscreen();}catch{familyBodyOverflow=document.body.style.overflow;document.body.style.overflow='hidden';$('#family-workspace').classList.add('family-expanded');}
+  syncFamilyFullscreen();
+};
+document.addEventListener('fullscreenchange',syncFamilyFullscreen);
+document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!document.querySelector('dialog[open]'))closeFamilyFullscreen();});
+$('#family-export').onclick=async()=>{try{const data=await api('/api/family');const blob=new Blob([JSON.stringify({format:'zhaofu-family',version:2,exportedAt:new Date().toISOString(),people:data.people,links:data.links,events:data.events||[]},null,2)],{type:'application/json'});const link=document.createElement('a'),href=URL.createObjectURL(blob);link.href=href;link.download='zhaofu-family-'+new Date().toISOString().slice(0,10)+'.json';link.click();setTimeout(()=>URL.revokeObjectURL(href),60000);}catch(e){toast(e.message);}};
+document.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.person)selectFamilyPerson(b.dataset.person);if(b.id==='family-show-person')selectFamilyPerson(focusPerson,true);if(b.dataset.editPerson)openPerson(b.dataset.editPerson);if(b.id==='add-relation')openRelation();if(b.dataset.editRelation)openRelation(b.dataset.editRelation);if(b.dataset.editUser)openUser(b.dataset.editUser);});

web/index.html

@@ -2,12 +2,12 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>赵府智家 · 家庭空间</title><link rel="stylesheet" href="/style.css">
+  <title>赵府智家 · 家庭空间</title><link rel="icon" type="image/png" href="/zhao-icon.png"><link rel="apple-touch-icon" href="/zhao-icon.png"><meta name="theme-color" content="#10191d"><link rel="stylesheet" href="/style.css?v=__ASSET_VERSION__"><link rel="stylesheet" href="/family-map.css?v=__ASSET_VERSION__">
-  <script defer src="/vendor/hls.min.js"></script><script defer src="/live-player.js"></script><script defer src="/kinship.js"></script><script defer src="/app.js"></script><script defer src="/family.js"></script>
+  <script defer src="/vendor/hls.min.js?v=__ASSET_VERSION__"></script><script defer src="/live-player.js?v=__ASSET_VERSION__"></script><script defer src="/kinship.js?v=__ASSET_VERSION__"></script><script defer src="/family-graph.js?v=__ASSET_VERSION__"></script><script defer src="/calendar.js?v=__ASSET_VERSION__"></script><script defer src="/app.js?v=__ASSET_VERSION__"></script><script defer src="/monitor.js?v=__ASSET_VERSION__"></script><script defer src="/date-fields.js?v=__ASSET_VERSION__"></script><script defer src="/family-map.js?v=__ASSET_VERSION__"></script><script defer src="/family.js?v=__ASSET_VERSION__"></script><script defer src="/family-events.js?v=__ASSET_VERSION__"></script>
 </head>
 <body>
   <aside class="sidebar">
-    <a class="brand" href="/"><span class="brand-icon">◉</span><span>赵府智家<small>HOME / 本地家庭空间</small></span></a>
+    <a class="brand" href="/"><img class="brand-icon" src="/zhao-icon.png" alt="赵字古文字风格标识"><span>赵府智家<small>HOME / 本地家庭空间</small></span></a>
     <div class="nav-label">工作空间</div>
     <nav aria-label="主导航">
       <button data-page="live" class="active">◫ <span>实时画面</span></button>
@@ -26,7 +26,7 @@
     <div id="banner" class="banner" hidden></div>
     <section class="metrics"><div><span>摄像头</span><strong id="metric-all">—</strong></div><div><span>已接通码流</span><strong id="metric-ready">—</strong></div><div><span>录像占用</span><strong id="metric-used">—</strong></div><div><span>空间档案</span><strong id="metric-sites">—</strong></div></section>
     <div class="filter-row"><label>空间范围 <select id="site-filter"><option value="">全部空间</option></select></label><span id="filter-caption">家庭与公司，分别管理</span><button id="refresh" class="quiet">↻ 刷新状态</button></div>
-    <section id="page-live" class="page"><div class="section-head"><h2>现场画面 <small>LIVE VIEW</small></h2><div><label>清晰度 <select id="quality"><option value="hd">主码流</option><option value="compat">子码流</option></select></label><button data-action="new-camera">＋ 添加镜头通道</button></div></div><p class="description" id="quality-note">主码流画面更清晰，最高 1920×1080；子码流更流畅，最高 768×432，适合网络较慢时使用。</p><div id="live-grid" class="live-grid"></div></section>
+    <section id="page-live" class="page"><div class="section-head"><h2>现场画面 <small>LIVE VIEW</small></h2><div><label>清晰度 <select id="quality"><option value="hd">主码流</option><option value="compat">子码流</option></select></label><button data-action="new-camera">＋ 添加镜头通道</button></div></div><p class="description" id="quality-note">主码流画面更清晰，最高 1920×1080；子码流更流畅，最高 768×432，适合网络较慢时使用。</p><div class="wall-toolbar"><label>分屏 <select id="wall-layout"><option value="auto">自适应</option><option value="1">1 画面</option><option value="2">2 画面</option><option value="4">4 画面</option><option value="6">6 画面</option><option value="9">9 画面</option><option value="16">16 画面</option></select></label><label class="check"><input id="wall-arrange" type="checkbox">调整顺序</label><div class="wall-paging"><button id="wall-prev" class="quiet" aria-label="上一组画面">‹</button><span id="wall-page"></span><button id="wall-next" class="quiet" aria-label="下一组画面">›</button></div><span id="wall-clock"></span><button id="wall-fullscreen">全屏监控</button></div><div id="live-grid" class="live-grid"></div><section id="ptz-panel" class="ptz-panel" hidden><div><strong id="ptz-title">云台</strong><p id="ptz-status" role="status"></p></div><div class="ptz-pad"><button data-ptz-action="up" aria-label="云台向上">↑</button><button data-ptz-action="left" aria-label="云台向左">←</button><button data-ptz-action="stop">停止</button><button data-ptz-action="right" aria-label="云台向右">→</button><button data-ptz-action="down" aria-label="云台向下">↓</button></div><button id="ptz-close" class="quiet">收起云台</button></section></section>
     <section id="page-playback" class="page" hidden>
       <div class="section-head"><h2>回到那一刻 <small>PLAYBACK</small></h2></div>
       <div class="panel playback-controls"><label>摄像头<select id="play-camera"></select></label><label>录像来源<select id="archive-source"><option value="recorder">录像机原有录像</option><option value="local">小电脑本机录像</option></select></label><label>日期<input id="play-date" type="date"></label><button id="query-recordings">查找录像</button><span id="play-info">选择日期，查看实际录像时段</span></div>
@@ -41,11 +41,24 @@
     <section id="page-storage" class="page" hidden><div class="section-head"><h2>录像与存储 <small>STORAGE</small></h2></div><div class="storage-grid"><form id="storage-form" class="panel"><h3>录像保留策略</h3><label>保留天数<input name="retentionDays" type="number" min="1" max="365" required></label><label>录像容量上限（GB）<input name="maxGB" type="number" min="5" max="100000" required></label><label>磁盘预留空间（GB）<input name="reserveGB" type="number" min="2" max="1000" required></label><p class="description">超过保留天数的录像会自动删除。达到容量上限或预留空间不足时暂停录像；调整策略后自动恢复。容量每 20 秒检查一次，可能有少量超出。</p><button type="submit">保存策略</button><span class="form-error"></span></form><div class="panel"><h3>运行状态</h3><dl id="storage-status"></dl><p class="description">开启摄像头的“持续录像”后，服务会保存主码流。预览默认使用主码流高清画面（最高 1920×1080、15 帧/秒），也可切换子码流流畅画面（最高 768×432、10 帧/秒）。本机录像保留设备原始编码。</p><h3>最近操作</h3><div id="audit-list"></div></div></div></section>
     <section id="page-family" class="page" hidden>
       <div class="section-head"><h2>家族的来处与延续 <small>FAMILY REGISTER</small></h2><div><button id="family-reload" class="quiet">重新载入</button><button id="family-export" class="quiet">导出家谱</button><button id="new-person">＋ 录入人物</button></div></div>
-      <p class="description">一个账号可以录入全家人物。先录人物，再连接父母、子女与配偶；祖先不需要登录账号。日期使用公历，不确定的信息可以留空。</p>
+      <p class="description">从祖辈到后辈，一张图看全家。点击人物查看档案，暖金色卡片是当前账号关联的本人。</p>
-      <div class="panel family-toolbar"><label>关系参照人物<select id="family-reference"></select></label><label>查找人物<input id="family-search" type="search" placeholder="姓名、别名或籍贯"></label><label class="check"><input id="family-archived" type="checkbox">显示归档人物</label><span id="family-count"></span></div>
+      <div class="panel family-toolbar"><label>关系参照人物<select id="family-reference"></select></label><label>查找人物<input id="family-search" type="search" placeholder="姓名、别名或籍贯"></label><button id="family-find" class="quiet" hidden>定位搜索结果</button><label class="check"><input id="family-archived" type="checkbox">显示归档人物</label><span id="family-count"></span></div>
       <div id="family-error" class="form-error" role="status"></div>
-      <div class="family-layout"><div id="family-people" class="family-people"></div><div id="family-detail" class="panel"></div></div>
+      <div id="family-workspace" class="family-workspace">
-      <div class="panel"><div class="section-head"><h3>以选中人物为中心的家谱</h3><label>展开代数<select id="family-depth"><option value="2">2 代</option><option value="4" selected>4 代</option><option value="8">8 代</option></select></label></div><p class="description">点击树中的姓名查看人物。配偶单独列出；同一个祖先可出现在不同分支。复杂旁系关系以关系路径表示，长幼按已填写的出生日期判断。</p><div id="family-tree" class="family-tree"></div></div>
+        <section id="family-canvas-panel" class="family-canvas-panel" aria-label="全家关系图">
+          <div class="family-map-heading"><div><span class="eyebrow">FAMILY CONNECTIONS</span><h2 id="family-view-title">全家关系图</h2></div><div class="family-view-tabs" role="group" aria-label="家谱显示方式"><button id="family-view-tree" class="quiet" aria-pressed="true">关系图</button><button id="family-view-list" class="quiet" aria-pressed="false">人物名册</button><button id="family-view-timeline" class="quiet" aria-pressed="false">家族时间线</button></div></div>
+          <div id="family-map-controls" class="family-map-controls"><div class="family-zoom-controls"><button id="family-zoom-out" class="quiet" aria-label="缩小家谱">−</button><output id="family-zoom-value" aria-live="polite">100%</output><button id="family-zoom-in" class="quiet" aria-label="放大家谱">＋</button><button id="family-fit" class="quiet">查看全谱</button></div><button id="family-locate-self" class="quiet">◎ 定位本人</button><button id="family-fullscreen" class="quiet">全屏家谱</button></div>
+          <div id="family-tree" class="family-map-viewport" tabindex="0" role="region" aria-label="家谱关系图，可拖动空白处或使用滚动条浏览"></div>
+          <div id="family-people" class="family-people family-register" hidden></div>
+          <section id="family-events" hidden aria-label="家族重大记事">
+            <div class="family-event-intro"><div><h3>把值得记住的事，留给后来的人</h3><p class="description">按事情发生的日期排列，可关联多位亲人，并附上详细记载或报道链接。</p></div><button id="family-new-event">＋ 写一则记事</button></div>
+            <div class="family-event-filters"><label>关联人物<select id="family-event-person"><option value="">全家</option></select></label><label>年份<select id="family-event-year"><option value="">所有年份</option></select></label><label>排列<select id="family-event-order"><option value="desc">从近到远</option><option value="asc">从远到近</option></select></label><label>搜索记事<input id="family-event-search" type="search" placeholder="标题、摘要或正文"></label><label class="check"><input id="family-event-relatives" type="checkbox">包括此人的父母、配偶和子女</label><label id="family-event-state-label">状态<select id="family-event-state"><option value="published">已发布</option><option value="draft">草稿箱</option><option value="archived">已归档</option><option value="all">全部</option></select></label><button id="family-event-clear" class="quiet">清除筛选</button></div>
+            <p id="family-event-count" class="description" role="status"></p><div id="family-timeline" class="family-timeline"></div>
+          </section>
+          <div id="family-map-footer" class="family-map-footer"><div class="family-map-legend"><span><i class="legend-self"></i>本人</span><span><i class="legend-selected"></i>正在查看</span><span><i class="legend-parent"></i>父母 → 子女</span><span><i class="legend-spouse"></i>配偶</span><span><i class="legend-adoptive"></i>收养 / 继亲</span></div><p id="family-map-note" class="description" role="status"></p><span class="description">拖动空白处移动 · 点击人物查看档案 · 关系称谓按参照人物计算</span></div>
+        </section>
+        <aside id="family-detail" class="panel family-inspector" aria-label="人物档案"></aside>
+      </div>
     </section>
     <section id="page-users" class="page" hidden><div class="section-head"><h2>账号与人物关系 <small>ACCOUNTS</small></h2><button id="new-user">＋ 新建账号</button></div><p class="description">亲属称呼用于描述人物关系。摄像头空间权限、家谱权限和管理员身份分别设置。无需为每一位家谱人物创建账号。</p><div id="user-list"></div></section>
     <footer><span>赵府智家 · 家庭空间</span><span id="version">独立部署 / 数据自有</span></footer>
@@ -55,10 +68,12 @@
   <dialog id="camera-dialog"><form id="camera-form"><div class="dialog-heading"><h2>镜头通道配置</h2><button type="button" class="quiet" data-close="camera-dialog">关闭</button></div><input name="id" type="hidden"><div class="form-grid"><label class="full">所属摄像头对象 *<select name="assetId" required></select></label><label>接入方式<select name="sourceKind"><option value="recorder">通过录像机</option><option value="direct">直接连接摄像头</option></select></label><label>关联录像机<select name="recorderId"><option value="">请选择</option></select></label><label>录像机通道编号<input name="channelNumber" maxlength="30" placeholder="按录像机实际通道填写"></label><label>录像存储设备<select name="archiveRecorderId"><option value="">尚未绑定</option></select></label><label>历史录像主要保存于<select name="archiveSource"><option value="recorder">录像机</option><option value="local">本机</option></select></label><label>镜头 / 通道名称 *<input name="name" required maxlength="120" placeholder="例如：大门口"></label><label>所属空间 *<select name="siteId" required></select></label><label>安装位置<input name="point" maxlength="120" placeholder="例如：院门外侧"></label><label>品牌 / 型号<input name="model" maxlength="120"></label><label>设备 IP *<input name="host" required placeholder="局域网 IPv4 地址"></label><label>RTSP 端口<input name="port" type="number" value="554" min="1" max="65535" required></label><label>设备用户名<input name="username" maxlength="120" autocomplete="off"></label><label>设备密码<input name="password" type="password" maxlength="256" autocomplete="new-password" placeholder="编辑时留空，保留原密码"></label><div class="full"><button id="onvif-read" type="button" class="secondary">读取 ONVIF 镜头配置</button><p class="description">直接接入摄像头时，可读取设备实际提供的媒体配置。默认 ONVIF HTTP 端口为 80。</p><div id="onvif-result"></div></div><label class="full">常见码流路径<select id="path-preset"><option value="custom">手动填写</option><option value="tplink">TP-Link 单镜头</option><option value="hikvision">海康威视 / 兼容路径 · 通道 1</option><option value="dahua">大华 / 兼容路径 · 通道 1</option></select></label><label class="full">主码流路径 *<input name="mainPath" required maxlength="500" value="/stream1"></label><label class="full">子码流路径 *<input name="subPath" required maxlength="500" value="/stream2"></label><label class="check"><input name="enabled" type="checkbox" checked>启用连接</label><label class="check"><input name="record" type="checkbox">在小电脑额外保存录像（可选）</label></div><p class="description">账号和密码只保存在本机受限数据目录。RTSP 服务响应代表设备可达，实际码流接通后才显示在线。路径预设需要与设备型号、通道一致。</p><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存设备</button></div></form></dialog>
   <dialog id="asset-dialog"><form id="asset-form"><div class="dialog-heading"><h2>摄像头对象</h2><button type="button" class="quiet" data-close="asset-dialog">关闭</button></div><input name="id" type="hidden"><div class="form-grid"><label>对象名称 *<input name="name" required maxlength="120" placeholder="例如：院门双镜头摄像头"></label><label>所属空间 *<select name="siteId" required></select></label><label>品牌<input name="brand" maxlength="120"></label><label>型号<input name="model" maxlength="120"></label><label>序列号<input name="serial" maxlength="120"></label><label>物理镜头数<input name="lensCount" type="number" value="2" min="1" max="16" required></label><label>安装位置<input name="point" maxlength="120"></label><label>备注<input name="note" maxlength="120"></label></div><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存对象</button></div></form></dialog>
   <dialog id="recorder-dialog"><form id="recorder-form"><div class="dialog-heading"><h2>录像机配置</h2><button type="button" class="quiet" data-close="recorder-dialog">关闭</button></div><input name="id" type="hidden"><div class="form-grid"><label>录像机名称 *<input name="name" required maxlength="120"></label><label>所属空间 *<select name="siteId" required></select></label><label>品牌<input name="brand" maxlength="120"></label><label>型号<input name="model" maxlength="120"></label><label>录像机 IP *<input name="host" required></label><label>RTSP 端口<input name="port" type="number" value="554" min="1" max="65535" required></label><label>登录用户名<input name="username" maxlength="120" autocomplete="off"></label><label>设备密码<input name="password" type="password" maxlength="256" placeholder="留空保留原密码" autocomplete="new-password"></label><label class="full">接入驱动<select name="driver"><option value="generic-rtsp">通用 RTSP / 手动通道路径</option><option value="hikvision-rtsp">海康 / 兼容型号 RTSP 路径</option><option value="tplink-rtsp">TP-Link RTSP 路径</option><option value="dahua-rtsp">大华 / 兼容型号 RTSP 路径</option></select></label></div><p class="description">驱动在当前版本提供路径模板。录像机历史录像检索、回放及通道自动导入，需要型号确认后接入，当前尚未实现。</p><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存录像机</button></div></form></dialog>
-  <dialog id="user-dialog"><form id="user-form"><div class="dialog-heading"><h2>账号档案</h2><button type="button" class="quiet" data-close="user-dialog">关闭</button></div><input name="id" type="hidden"><div class="form-grid"><label>用户名 *<input name="username" required minlength="3" maxlength="32" autocomplete="off"></label><label>显示名称 *<input name="name" required maxlength="80"></label><label>密码<input name="password" type="password" minlength="8" maxlength="128" autocomplete="new-password" placeholder="编辑时留空保留"></label><label>系统角色<select name="role"><option value="member">个人账号</option><option value="admin">管理员</option></select></label><label>家谱权限<select name="familyAccess"><option value="none">不可访问</option><option value="read">查看家谱</option><option value="edit">录入和维护家谱</option></select></label><label>关联家谱人物<select name="personId"></select></label><label>这个账号是<select name="relatedToId"></select></label><label>的什么关系<input name="relationship" list="relationship-choices" maxlength="40" placeholder="可选择或自行填写"></label><fieldset class="full"><legend>允许查看摄像头的空间</legend><div id="user-sites"></div><p class="description">个人账号仅能观看已选空间的实时画面和回放；管理员可以管理全部空间。</p></fieldset><label class="check"><input name="disabled" type="checkbox">停用账号</label></div><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存账号</button></div></form></dialog>
+  <dialog id="user-dialog"><form id="user-form"><div class="dialog-heading"><h2>账号档案</h2><button type="button" class="quiet" data-close="user-dialog">关闭</button></div><input name="id" type="hidden"><div class="form-grid"><label>用户名 *<input name="username" required minlength="3" maxlength="32" autocomplete="off"></label><label>显示名称 *<input name="name" required maxlength="80"></label><label>密码<input name="password" type="password" minlength="8" maxlength="128" autocomplete="new-password" placeholder="编辑时留空保留"></label><label>系统角色<select name="role"><option value="member">个人账号</option><option value="admin">管理员</option></select></label><label>家谱权限<select name="familyAccess"><option value="none">不可访问</option><option value="read">查看家谱</option><option value="edit">录入和维护家谱</option></select></label><label>关联家谱人物<select name="personId"></select></label><label>这个账号是<select name="relatedToId"></select></label><label>的什么关系<input name="relationship" list="relationship-choices" maxlength="40" placeholder="可选择或自行填写"></label><fieldset class="full"><legend>允许查看摄像头的空间</legend><div id="user-sites"></div><p class="description">个人账号仅能观看已选空间的实时画面和回放；管理员可以管理全部空间。</p></fieldset><label class="check"><input name="ptzControl" type="checkbox">允许控制已授权空间的摄像头云台</label><label class="check"><input name="disabled" type="checkbox">停用账号</label></div><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存账号</button></div></form></dialog>
   <datalist id="relationship-choices"></datalist>
-  <dialog id="person-dialog"><form id="person-form"><div class="dialog-heading"><h2>家谱人物</h2><button type="button" class="quiet" data-close="person-dialog">关闭</button></div><input name="id" type="hidden"><input name="revision" type="hidden"><div class="form-grid"><label>姓名 / 称呼 *<input name="name" required maxlength="80" placeholder="姓名暂不知时可先填称呼"></label><label>别名 / 字 / 号<input name="alias" maxlength="120"></label><label>性别<select name="gender"><option value="unknown">待确认</option><option value="male">男</option><option value="female">女</option></select></label><label>在世情况<select name="lifeStatus"><option value="unknown">待确认</option><option value="alive">在世</option><option value="deceased">已故</option></select></label><label>出生日期（公历）<input name="birthDate" type="date"></label><label>逝世日期（公历）<input name="deathDate" type="date"></label><label class="full">籍贯 / 出生地<input name="birthplace" maxlength="160"></label><label class="full">生平简介<textarea name="biography" rows="4" maxlength="2000"></textarea></label><label class="full">备注 / 信息来源<textarea name="note" rows="3" maxlength="500" placeholder="例如：农历日期、长辈口述、族谱记载、待考证信息"></textarea></label><label class="check"><input name="archived" type="checkbox">归档人物（保留关系，可恢复）</label></div><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存人物</button></div></form></dialog>
+  <dialog id="person-dialog"><form id="person-form"><div class="dialog-heading"><h2>家谱人物</h2><button type="button" class="quiet" data-close="person-dialog">关闭</button></div><input name="id" type="hidden"><input name="revision" type="hidden"><div class="form-grid"><label>姓名 / 称呼 *<input name="name" required maxlength="80" placeholder="姓名暂不知时可先填称呼"></label><label>别名 / 字 / 号<input name="alias" maxlength="120"></label><label>性别<select name="gender"><option value="unknown">待确认</option><option value="male">男</option><option value="female">女</option></select></label><label>在世情况<select name="lifeStatus"><option value="alive">在世</option><option value="deceased">不在世</option><option value="unknown">待确认</option></select></label><fieldset class="family-date" data-date-field="birthDate"><legend>出生日期</legend><input name="birthDate" type="hidden"><label>历法<select data-calendar aria-label="出生日期历法"><option value="solar">公历</option><option value="lunar">农历</option></select></label><label>日期<input data-date-value aria-label="出生日期" type="text" inputmode="numeric" placeholder="YYYY-MM-DD" maxlength="10"></label><label data-leap-label class="check" hidden><input data-date-leap type="checkbox">闰月</label><output data-date-hint aria-live="polite">日期不详可留空</output></fieldset><fieldset class="family-date" data-date-field="deathDate" hidden><legend>去世日期</legend><input name="deathDate" type="hidden"><label>历法<select data-calendar aria-label="去世日期历法"><option value="solar">公历</option><option value="lunar">农历</option></select></label><label>日期<input data-date-value aria-label="去世日期" type="text" inputmode="numeric" placeholder="YYYY-MM-DD" maxlength="10"></label><label data-leap-label class="check" hidden><input data-date-leap type="checkbox">闰月</label><output data-date-hint aria-live="polite">日期不详可留空</output></fieldset><label class="full">籍贯 / 出生地<input name="birthplace" maxlength="160"></label><label class="full">生平简介<textarea name="biography" rows="4" maxlength="2000"></textarea></label><label class="full">备注 / 信息来源<textarea name="note" rows="3" maxlength="500" placeholder="例如：长辈口述、族谱记载、待考证信息"></textarea></label><label class="check"><input name="archived" type="checkbox">归档人物（保留关系，可恢复）</label></div><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存人物</button></div></form></dialog>
   <dialog id="relation-dialog"><form id="relation-form"><div class="dialog-heading"><h2>连接人物关系</h2><button type="button" class="quiet" data-close="relation-dialog">关闭</button></div><input name="id" type="hidden"><input name="revision" type="hidden"><div class="form-grid"><label>关系类型<select name="kind"><option value="parent">父母 → 子女</option><option value="spouse">配偶 ↔ 配偶</option></select></label><label>亲子属性<select name="lineage"><option value="unspecified">未注明</option><option value="biological">亲生</option><option value="adoptive">收养</option><option value="step">继亲</option></select></label><label>父母一方 / 配偶一方<select name="fromId" required></select></label><label>子女 / 另一位配偶<select name="toId" required></select></label><label class="full">关系备注<input name="note" maxlength="300"></label><label class="check"><input name="active" type="checkbox" checked>关系有效（取消后保留记录，可恢复）</label></div><p class="description">每条亲子关系连接一位父母与一位子女。录入另一位父母时，再建立一条关系。</p><p class="form-error"></p><div class="dialog-footer"><button type="submit">保存关系</button></div></form></dialog>
+  <dialog id="event-dialog" aria-labelledby="event-editor-title"><form id="event-form"><div class="dialog-heading"><h2 id="event-editor-title">写一则家族记事</h2><button type="button" class="quiet" data-close="event-dialog">关闭</button></div><input name="id" type="hidden"><input name="revision" type="hidden"><div class="form-grid"><label class="full">记事标题 *<input name="title" required maxlength="160" placeholder="用一句话概括这件事"></label><fieldset class="family-date full" data-date-field="eventDate"><legend>事情发生的日期 *</legend><input name="eventDate" type="hidden"><label>历法<select data-calendar aria-label="记事日期历法"><option value="solar">公历</option><option value="lunar">农历</option></select></label><label>日期<input data-date-value aria-label="记事日期" required type="text" inputmode="numeric" placeholder="YYYY-MM-DD" maxlength="10"></label><label data-leap-label class="check" hidden><input data-date-leap type="checkbox">闰月</label><output data-date-hint aria-live="polite"></output></fieldset><fieldset class="full"><legend>关联人物（可多选）</legend><input id="event-person-search" type="search" placeholder="查找要关联的亲人" aria-label="查找关联人物"><div id="event-person-choices"></div><p class="description">未选择人物时记为全家记事。每位关联人物的档案都可以追溯到这条记事。</p></fieldset><label class="full">摘要<textarea name="summary" maxlength="400" rows="2" placeholder="简要说明这件事"></textarea></label><label class="full">详细记载<textarea name="body" maxlength="12000" rows="7" placeholder="记录经过、意义、长辈口述或资料出处。可分段书写。"></textarea></label><label>报道 / 资料来源<input name="sourceName" maxlength="160" placeholder="例如：报刊名称、个人博客"></label><label>原始报道链接<input name="sourceUrl" type="url" maxlength="2000" placeholder="https://…"></label><label class="check full"><input name="archived" type="checkbox">归档记事（保留内容，可恢复）</label></div><p class="description">正式发布后，有家谱查看权限的账号即可在时间线看到；草稿只对有编辑权限的人可见。</p><p class="form-error" role="status"></p><div class="dialog-footer event-editor-actions"><button type="submit" value="draft" class="secondary">保存草稿</button><button type="submit" value="published">发布记事</button></div></form></dialog>
+  <dialog id="event-detail-dialog" aria-labelledby="event-detail-title"><div class="dialog-heading"><span class="eyebrow">FAMILY CHRONICLE</span><button type="button" class="quiet" data-close="event-detail-dialog">关闭</button></div><article id="event-detail-content"></article></dialog>
   <div id="toast" role="status" hidden></div>
 </body>
 </html>

web/monitor.js

@@ -0,0 +1,92 @@
+'use strict';
+let wallOwner='',wallOrder=[],wallPage=0,wallDragging='',ptzCamera='',ptzGeneration=0;
+const WALL_LAYOUTS={auto:[0,0],1:[1,1],2:[2,1],4:[2,2],6:[3,2],9:[3,3],16:[4,4]};
+function wallStorageKey(){return 'zhaofu-monitor-'+(currentUser?.id||'guest');}
+function wallSave(){try{localStorage.setItem(wallStorageKey(),JSON.stringify({order:wallOrder,layout:$('#wall-layout').value}));}catch{}}
+function wallSync(){
+  if(wallOwner!==(currentUser?.id||'')){
+    wallOwner=currentUser?.id||'';wallPage=0;let saved={};try{saved=JSON.parse(localStorage.getItem(wallStorageKey()))||{};}catch{}
+    wallOrder=Array.isArray(saved.order)?saved.order.filter(x=>/^[a-f0-9]{16}$/.test(x)):[];
+    $('#wall-layout').value=Object.hasOwn(WALL_LAYOUTS,saved.layout)?saved.layout:'auto';
+  }
+  const cameras=filtered(),ids=cameras.map(c=>c.id);
+  const allIds=new Set(state.cameras.map(c=>c.id));wallOrder=wallOrder.filter(id=>allIds.has(id));
+  for(const id of ids)if(!wallOrder.includes(id))wallOrder.push(id);
+  const ordered=wallOrder.filter(id=>ids.includes(id)),layout=$('#wall-layout').value;
+  const capacity=Number(layout)||6,pages=Math.max(1,Math.ceil(ordered.length/capacity));
+  wallPage=Math.min(wallPage,pages-1);const visible=new Set(ordered.slice(wallPage*capacity,(wallPage+1)*capacity));
+  $('#live-grid').dataset.layout=layout;
+  for(const card of $$('#live-grid .camera-card')){
+    const id=card.querySelector('video').dataset.camera;
+    card.style.order=ordered.indexOf(id);card.hidden=!visible.has(id);
+    card.querySelector('[data-wall-before]').disabled=ordered.indexOf(id)===0;
+    card.querySelector('[data-wall-after]').disabled=ordered.indexOf(id)===ordered.length-1;
+  }
+  $('#wall-page').textContent=`${wallPage+1} / ${pages} 页 · ${ordered.length} 个画面`;
+  $('#wall-prev').disabled=wallPage===0;$('#wall-next').disabled=wallPage===pages-1;
+  $('#live-grid').classList.toggle('arranging',$('#wall-arrange').checked);
+  $$('[data-ptz-camera]').forEach(b=>b.hidden=!(isAdmin()||currentUser?.ptzControl));
+}
+function wallMove(id,target){
+  const from=wallOrder.indexOf(id),to=wallOrder.indexOf(target);if(from<0||to<0||from===to)return;
+  wallOrder.splice(from,1);wallOrder.splice(to,0,id);wallSave();wallSync();
+}
+$('#wall-layout').onchange=()=>{wallPage=0;wallSave();wallSync();};
+$('#wall-arrange').onchange=wallSync;
+$('#wall-prev').onclick=()=>{wallPage--;wallSync();};$('#wall-next').onclick=()=>{wallPage++;wallSync();};
+$('#wall-fullscreen').onclick=async()=>{
+  try{if(document.fullscreenElement)await document.exitFullscreen();else await $('#page-live').requestFullscreen();}
+  catch{toast('浏览器未允许全屏，可按 F11 进入浏览器全屏');}
+};
+document.addEventListener('fullscreenchange',()=>{
+  $('#wall-fullscreen').textContent=document.fullscreenElement?'退出全屏 · Esc':'全屏监控';
+  document.body.classList.toggle('wall-fullscreen',document.fullscreenElement===$('#page-live'));
+});
+document.addEventListener('keydown',e=>{
+  if(e.key==='Escape'&&document.fullscreenElement===$('#page-live'))document.exitFullscreen().catch(()=>{});
+});
+setInterval(()=>{$('#wall-clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
+let wallPointer=null;
+function wallDragEnd(){wallPointer=null;wallDragging='';$$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));}
+$('#live-grid').addEventListener('pointerdown',e=>{
+  const handle=e.target.closest('[data-wall-drag]');if(!handle||e.button!==0||!$('#wall-arrange').checked)return;
+  e.preventDefault();handle.setPointerCapture(e.pointerId);wallDragging=handle.dataset.wallDrag;
+  wallPointer={x:e.clientX,y:e.clientY,id:e.pointerId,moved:false};
+});
+$('#live-grid').addEventListener('pointermove',e=>{
+  if(!wallPointer||wallPointer.id!==e.pointerId)return;
+  wallPointer.moved ||= Math.hypot(e.clientX-wallPointer.x,e.clientY-wallPointer.y)>8;
+  $$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));
+  if(wallPointer.moved)document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.classList.add('wall-drop-target');
+});
+$('#live-grid').addEventListener('pointerup',e=>{
+  if(!wallPointer||wallPointer.id!==e.pointerId)return;
+  const target=document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.querySelector('video')?.dataset.camera;
+  if(wallPointer.moved&&target)wallMove(wallDragging,target);wallDragEnd();
+});
+$('#live-grid').addEventListener('pointercancel',wallDragEnd);
+document.addEventListener('click',e=>{
+  const b=e.target.closest('button');if(!b)return;
+  if(b.dataset.wallBefore||b.dataset.wallAfter){const ids=wallOrder.filter(id=>filtered().some(c=>c.id===id)),id=b.dataset.wallBefore||b.dataset.wallAfter;wallMove(id,ids[ids.indexOf(id)+(b.dataset.wallBefore?-1:1)]);}
+  if(b.dataset.ptzCamera)openPtz(b.dataset.ptzCamera);
+});
+async function openPtz(id){
+  const generation=++ptzGeneration;ptzCamera=id;$('#ptz-panel').hidden=false;
+  $('#ptz-title').textContent=(state.cameras.find(c=>c.id===id)?.name||'摄像头')+' · 云台';
+  $('#ptz-status').textContent='正在读取云台能力…';$$('[data-ptz-action]').forEach(b=>b.disabled=true);
+  try{const caps=await api('/api/ptz?camera='+id);if(generation!==ptzGeneration)return;$('#ptz-status').textContent=caps.note;$$('[data-ptz-action]').forEach(b=>b.disabled=false);}
+  catch(e){if(generation===ptzGeneration)$('#ptz-status').textContent=e.message;}
+}
+async function ptzCommand(action){
+  if(!ptzCamera)return;const id=ptzCamera,generation=ptzGeneration;
+  $$('[data-ptz-action]:not([data-ptz-action="stop"])').forEach(b=>b.disabled=true);
+  $('#ptz-status').textContent=action==='stop'?'正在停止…':'正在微调…';
+  try{await api('/api/ptz',{camera:id,action});if(generation===ptzGeneration)$('#ptz-status').textContent='停止指令已确认，可继续微调';}
+  catch(e){if(generation===ptzGeneration)$('#ptz-status').textContent=e.message;}
+  finally{if(generation===ptzGeneration)$$('[data-ptz-action]').forEach(b=>b.disabled=false);}
+}
+function closePtz(){ptzGeneration++;ptzCamera='';$('#ptz-panel').hidden=true;}
+$('#ptz-close').onclick=closePtz;
+$$('[data-ptz-action]').forEach(b=>b.onclick=()=>ptzCommand(b.dataset.ptzAction));
+document.addEventListener('visibilitychange',()=>{if(document.hidden&&ptzCamera)ptzCommand('stop');});
+window.addEventListener('pagehide',()=>{if(ptzCamera)fetch('/api/ptz',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({camera:ptzCamera,action:'stop'})}).catch(()=>{});});

web/style.css

@@ -8,3 +8,6 @@ textarea{font:inherit;color:#e3f0ef;background:#111e24;border:1px solid #3a4e55;
 @media(max-width:760px){.sidebar #logout{display:block;align-self:flex-end}.sidebar #current-user{position:absolute;right:130px;top:15px;font-size:10px}.form-grid{grid-template-columns:1fr}.family-tree ul{padding-left:12px}}
 
 #family-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:20px 0 26px}#family-detail dl>div{display:grid;grid-template-columns:105px 1fr;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}#family-detail dt{font-size:12px;color:var(--muted)}#family-detail dd{margin:0;font-size:13px;overflow-wrap:anywhere}@media(max-width:1000px){#family-detail dl{grid-template-columns:1fr}}
+.brand-icon{width:44px;height:44px;object-fit:cover;border-radius:12px;flex-shrink:0}.wall-toolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:16px 0}.wall-toolbar select{padding:8px}.wall-paging{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}#wall-clock{margin-left:auto;color:var(--muted);font-size:12px}.live-grid[data-layout="1"]{grid-template-columns:1fr}.live-grid[data-layout="2"],.live-grid[data-layout="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.live-grid[data-layout="6"],.live-grid[data-layout="9"]{grid-template-columns:repeat(3,minmax(0,1fr))}.live-grid[data-layout="16"]{grid-template-columns:repeat(4,minmax(0,1fr))}.wall-reorder{display:none;padding:8px 12px;align-items:center;gap:8px}.arranging .wall-reorder{display:flex}.wall-reorder span{cursor:grab;margin-right:auto;font-size:12px;color:var(--muted)}.wall-reorder button{padding:4px 9px;font-size:11px}#page-live:fullscreen{background:#070f12;padding:12px;width:100vw;height:100dvh;display:flex;flex-direction:column;overflow:hidden}#page-live:fullscreen>.section-head,#page-live:fullscreen>#quality-note{display:none}#page-live:fullscreen .wall-toolbar{margin:0 0 10px;flex-shrink:0}#page-live:fullscreen .live-grid{flex:1;min-height:0;gap:8px;grid-template-rows:repeat(2,minmax(0,1fr))}#page-live:fullscreen .live-grid[data-layout="1"],#page-live:fullscreen .live-grid[data-layout="2"]{grid-template-rows:1fr}#page-live:fullscreen .live-grid[data-layout="9"]{grid-template-rows:repeat(3,minmax(0,1fr))}#page-live:fullscreen .live-grid[data-layout="16"]{grid-template-rows:repeat(4,minmax(0,1fr))}#page-live:fullscreen .camera-card{display:flex;flex-direction:column;min-height:0;position:relative}#page-live:fullscreen .video-panel{flex:1;min-height:0;aspect-ratio:auto}#page-live:fullscreen .camera-meta{padding:7px 10px;align-items:center}#page-live:fullscreen .camera-meta p,#page-live:fullscreen .camera-meta .badge{display:none}#page-live:fullscreen .camera-meta strong{font-size:12px}#page-live:fullscreen .camera-actions{position:absolute;bottom:34px;right:6px;padding:4px;background:#10191ddd;border-radius:6px;opacity:0}#page-live:fullscreen .camera-card:hover .camera-actions,#page-live:fullscreen .camera-card:focus-within .camera-actions{opacity:1}#page-live:fullscreen .camera-actions [data-edit-camera],#page-live:fullscreen .camera-actions [data-play-camera]{display:none}.ptz-panel{background:#1a3038;border:1px solid #41656c;border-radius:12px;padding:16px;display:flex;align-items:center;gap:22px;position:fixed;bottom:22px;right:22px;z-index:4;max-width:calc(100vw - 32px);box-shadow:0 12px 50px #0008}.ptz-panel p{font-size:12px;color:var(--muted);max-width:320px;margin:8px 0 0}.ptz-pad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,40px);gap:4px}.ptz-pad button{padding:5px;font-size:17px}.ptz-pad [data-ptz-action="up"]{grid-column:2}.ptz-pad [data-ptz-action="left"]{grid-column:1;grid-row:2}.ptz-pad [data-ptz-action="stop"]{grid-column:2;grid-row:2;background:#f0bda6;font-size:12px}.ptz-pad [data-ptz-action="right"]{grid-column:3;grid-row:2}.ptz-pad [data-ptz-action="down"]{grid-column:2;grid-row:3}.family-date{border:1px solid var(--line);border-radius:8px;padding:14px;margin:0;min-width:0}.family-date legend{font-size:13px;color:#a5bec1}.family-date label{margin-bottom:10px}.family-date output{display:block;font-size:12px;line-height:1.7;color:var(--accent)}@media(max-width:760px){.wall-toolbar{gap:9px}#wall-clock{display:none}.camera-meta strong{font-size:12px}.camera-actions{flex-wrap:wrap;padding:0 8px 8px}.camera-meta{padding:9px}.ptz-panel{flex-wrap:wrap;gap:12px}.ptz-panel>div:first-child{flex:1;min-width:160px}.family-date{grid-column:1/-1}#page-live:fullscreen .camera-actions{opacity:1}.live-grid[data-layout="16"] .camera-meta strong{font-size:9px}}
+#page-live:fullscreen .live-grid[data-layout="auto"]{grid-template-columns:repeat(3,minmax(0,1fr))}
+.wall-reorder [data-wall-drag]{touch-action:none;user-select:none;padding:5px 0}.camera-card.wall-drop-target{outline:2px solid var(--accent);outline-offset:-3px}