赵府 Vue 前端
Vue 3 + Vite + Bootstrap 5。Python 服务提供 API 和本地静态资源;生产主机无需安装 Node。
构建
在仓库根目录运行:
pnpm --dir frontend install --frozen-lockfile
pnpm --dir frontend build
提交 frontend/ 源码、锁文件及 web/ui/ 构建产物后发布。根路径 / 返回 web/ui/index.html,资源名含内容哈希。Bootstrap、Vue 和字体均无需外部 CDN。域控制器版本随 compat/load.js 发布号更新。
模块边界
App.vue、AppSidebar、AppHeader:应用外壳与导航。HomeExplorer:账号独立的卡片布局、分页、排序及场所总拓扑。DeviceCollection、NetworkMap:同一设备目录的卡片和拓扑视图。NetworkStatus:授权设备的实时网络检查与后台入口,清理定时器并丢弃过期响应。Workspace、RuntimeOverlays:现有业务页面与表单模板。composables/bridge.js、web/vue-bridge.js:Vue 与现有业务控制器的状态边界。compat/scripts.json:旧业务控制器依赖顺序,按顺序加载。视频播放器、家谱、记事等复杂交互暂时保留原控制器;尚未全部迁为 Vue 状态管理。
Vue 管理家庭卡片、设备列表、网络拓扑的 DOM;旧控制器只发布数据,不再覆盖这些容器。表单及播放器的兼容容器由原控制器管理,Vue 不重建其内部节点,避免轮询时重建视频。web/index.html 已移除,模板以 Vue 组件为准。
网络状态
GET /api/devices/network?source=device|camera|recorder&id=... 只允许当前家庭管理员与超级管理员检查本归属下的已登记设备。端口探测与 Tailscale 节点状态分别显示,30 秒缓存、并发限制;用户输入不能指定任意检查目标。只连接 TCP 端口,不修改设备、不发送登录密码。
“服务可达”表示从服务器能连接常用端口,并不证明设备品牌或互联网出口正常。管理后台优先使用探测到的 HTTP/HTTPS 端口,未检测到时提供标有“待连通”的默认 HTTP 入口,方便在设备同一局域网的浏览器打开。Tailscale 路由状态来自本服务器看到的路由,不等于完整物理布线发现。