# 赵府 Vue 前端

Vue 3 + Vite + Bootstrap 5。Python 服务提供 API 和本地静态资源；生产主机无需安装 Node。

## 构建

在仓库根目录运行：

```sh
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 路由状态来自本服务器看到的路由，不等于完整物理布线发现。