压缩管理页顶部区域并扩大路径列表首屏空间 #5

New Issue

2026-08-28T14:16:32+08:00

ila commented

2026-08-28 14:16:32 +08:00

原始需求

来源与时间：用户会话，2026-08-28
关键原话：列表上面的标题和统计等占了很多显示区域，希望缩小到当前约 50%，把空间让给列表。
方案确认：用户已确认采用“压缩垂直占用而非机械缩小全部控件”的建议，并授权建工单实施。

目标

压缩桌面端页头、统计卡和路径列表标题栏的垂直占用，使路径列表成为首屏主体。
顶部区域目标由当前约 240–260px 压缩至约 120–150px；实际以视觉验证和可用性为准。
常见桌面视口下，列表首屏相比当前增加约 2–3 行可见数据。

非目标

不改变 Control API、认证、登录、路径 CRUD、筛选、预览或响应数据。
不缩小表格行高、表单输入和操作按钮的可点击区域。
不重做信息架构、色彩主题或移动端交互方式。
不修改本地摄像头配置、账号密码或其他敏感配置。

已确认方案

页头减少上下留白和元素间距，标题层级保持清晰。
四张统计卡继续保持一行，但降低卡片高度、内边距、标签间距及数字字号。
统计区与路径面板之间的间距缩小。
路径面板标题栏减少上下内边距，标题、说明与筛选仍保持可读。
按钮和输入框继续保持至少 44px 高；焦点、键盘操作和状态反馈不变。
窄屏不强制缩小 50%，采用适度紧凑布局并优先保证触控与无横向溢出。
仅使用现有原生 HTML/CSS/JS，不引入依赖。

影响范围

主要修改 internal/api/admin/app.css。
仅在语义或布局确有需要时调整 internal/api/admin/index.html；不改前端业务逻辑。
相关前端静态资源测试与管理页 Go 测试。

风险与回退

风险：过度压缩造成标题拥挤、窄屏换行异常或触控目标变小。
控制：桌面与 375px 视口检查；按钮/输入框最小高度保持 44px；不压缩列表操作区。
回退：回退本工单的独立提交即可恢复原布局，无数据迁移。

验收标准

桌面端页头、统计区和面板标题栏的垂直空间显著减少，接近原来的 50%。
常见桌面首屏的路径列表增加约 2–3 行可见空间。
统计数字、标签、标题和说明仍清晰可读，不出现遮挡或重叠。
按钮和输入框高度保持至少 44px，键盘焦点和操作行为不变。
375px 窄屏无横向溢出，统计区与筛选区域可正常阅读和操作。
登录、列表、筛选和路径操作逻辑未发生变化。
受影响测试、语法检查、Harness 检查和 git diff --check 通过。
不提交用户已有无关改动或敏感配置。
实施提交推送并回写验证证据，工单保持待用户验收。

验证方法

对比桌面视口修改前后的顶部区域高度与首屏列表可见行数。
在 375px 宽度检查换行、溢出、控件高度和焦点可见性。
运行管理页相关测试、go test ./internal/api -run '^TestAdmin' -count=1、python dev_scripts/harness.py check --strict、python dev_scripts/harness.py sync --check 和 git diff --check。

设计证据

本工单是已确认页面的信息密度调整，不改变页面结构、主要流程、权限或错误处理。遵循 4/8px 间距节奏，桌面优先提高内容密度，移动端保留至少 44px 触控目标，因此无需重新制作完整交互原型。

文档影响

预计无长期产品事实变化，无需修改 Wiki；实施完成后在工单中确认。

## 原始需求 - 来源与时间：用户会话，2026-08-28 - 关键原话：列表上面的标题和统计等占了很多显示区域，希望缩小到当前约 50%，把空间让给列表。 - 方案确认：用户已确认采用“压缩垂直占用而非机械缩小全部控件”的建议，并授权建工单实施。 ## 目标 - 压缩桌面端页头、统计卡和路径列表标题栏的垂直占用，使路径列表成为首屏主体。 - 顶部区域目标由当前约 240–260px 压缩至约 120–150px；实际以视觉验证和可用性为准。 - 常见桌面视口下，列表首屏相比当前增加约 2–3 行可见数据。 ## 非目标 - 不改变 Control API、认证、登录、路径 CRUD、筛选、预览或响应数据。 - 不缩小表格行高、表单输入和操作按钮的可点击区域。 - 不重做信息架构、色彩主题或移动端交互方式。 - 不修改本地摄像头配置、账号密码或其他敏感配置。 ## 已确认方案 1. 页头减少上下留白和元素间距，标题层级保持清晰。 2. 四张统计卡继续保持一行，但降低卡片高度、内边距、标签间距及数字字号。 3. 统计区与路径面板之间的间距缩小。 4. 路径面板标题栏减少上下内边距，标题、说明与筛选仍保持可读。 5. 按钮和输入框继续保持至少 44px 高；焦点、键盘操作和状态反馈不变。 6. 窄屏不强制缩小 50%，采用适度紧凑布局并优先保证触控与无横向溢出。 7. 仅使用现有原生 HTML/CSS/JS，不引入依赖。 ## 影响范围 - 主要修改 `internal/api/admin/app.css`。 - 仅在语义或布局确有需要时调整 `internal/api/admin/index.html`；不改前端业务逻辑。 - 相关前端静态资源测试与管理页 Go 测试。 ## 风险与回退 - 风险：过度压缩造成标题拥挤、窄屏换行异常或触控目标变小。 - 控制：桌面与 375px 视口检查；按钮/输入框最小高度保持 44px；不压缩列表操作区。 - 回退：回退本工单的独立提交即可恢复原布局，无数据迁移。 ## 验收标准 - [ ] 桌面端页头、统计区和面板标题栏的垂直空间显著减少，接近原来的 50%。 - [ ] 常见桌面首屏的路径列表增加约 2–3 行可见空间。 - [ ] 统计数字、标签、标题和说明仍清晰可读，不出现遮挡或重叠。 - [ ] 按钮和输入框高度保持至少 44px，键盘焦点和操作行为不变。 - [ ] 375px 窄屏无横向溢出，统计区与筛选区域可正常阅读和操作。 - [ ] 登录、列表、筛选和路径操作逻辑未发生变化。 - [ ] 受影响测试、语法检查、Harness 检查和 `git diff --check` 通过。 - [ ] 不提交用户已有无关改动或敏感配置。 - [ ] 实施提交推送并回写验证证据，工单保持待用户验收。 ## 验证方法 - 对比桌面视口修改前后的顶部区域高度与首屏列表可见行数。 - 在 375px 宽度检查换行、溢出、控件高度和焦点可见性。 - 运行管理页相关测试、`go test ./internal/api -run '^TestAdmin' -count=1`、`python dev_scripts/harness.py check --strict`、`python dev_scripts/harness.py sync --check` 和 `git diff --check`。 ## 设计证据本工单是已确认页面的信息密度调整，不改变页面结构、主要流程、权限或错误处理。遵循 4/8px 间距节奏，桌面优先提高内容密度，移动端保留至少 44px 触控目标，因此无需重新制作完整交互原型。 ## 文档影响预计无长期产品事实变化，无需修改 Wiki；实施完成后在工单中确认。

ila referenced this issue from a commit

2026-08-28 14:25:08 +08:00

style(admin): compact dashboard header (#5)

ila commented

2026-08-28 14:25:39 +08:00

实施完成，待用户验收

最终差异

桌面页头改为紧凑单行标题区，隐藏重复的 MediaMTX eyebrow，保留主标题与用途说明。
页头垂直 padding 从 28px 0 20px 压缩为 12px 0 10px。
统计卡从 98px 降为 58px，标签与数字改为横向排列，统计区间距同步压缩。
路径面板标题栏 padding 从 20px 22px 降为 10px 14px，桌面筛选标签与控件并排。
375px 下统计卡保持 2×2；搜索与状态筛选改为同排；三个顶部按钮保持单行文字。
所有操作按钮、搜索框和状态选择框继续保持至少 44px 高。
未修改 HTML 结构、JavaScript、API、认证、登录或路径业务逻辑。

提交

4326bc5a78bd4aae93f0a8e5d12449e253762e34
已推送至 origin/main

验证结果

node --check internal/api/admin/app.js：通过。
go test ./internal/api -run '^TestAdmin' -count=1：通过。
go build ./...：通过。
python dev_scripts/harness.py check --strict：通过。
python dev_scripts/harness.py sync --check：通过，维护者文档镜像一致。
git diff --check：通过。
浏览器 1440×900：
- 统计区结束于 y=130，路径面板从 y=141 开始，表头从 y=215 开始；
- 6 条测试路径全部进入首屏；
- 页面横向溢出 0；
- 顶部按钮、搜索框和选择框均为 44px；
- 控制台 warning/error 为 0。
浏览器 375×812：
- 首张路径卡从第一轮的 y=606 优化至 y=502，增加约 104px 列表空间；
- 页面横向溢出 0；
- 顶部按钮、搜索框和选择框均为 44px；
- 标题、统计、筛选和路径卡无重叠或遮挡。

工作区与安全

提交仅包含 internal/api/admin/app.css。
未提交本地 mediamtx.yml、摄像头配置、账号密码、二进制、启动脚本或用户已有的 .github 删除项。
隔离视觉测试使用的虚构配置和临时二进制已清理。

文档影响

本次仅改变现有页面视觉密度，不改变长期产品事实、架构、配置或操作流程，因此无需更新 Wiki。

状态

实现、测试和推送完成；工单保持开启，等待用户验收。

## 实施完成，待用户验收 ### 最终差异 - 桌面页头改为紧凑单行标题区，隐藏重复的 `MediaMTX` eyebrow，保留主标题与用途说明。 - 页头垂直 padding 从 `28px 0 20px` 压缩为 `12px 0 10px`。 - 统计卡从 `98px` 降为 `58px`，标签与数字改为横向排列，统计区间距同步压缩。 - 路径面板标题栏 padding 从 `20px 22px` 降为 `10px 14px`，桌面筛选标签与控件并排。 - 375px 下统计卡保持 2×2；搜索与状态筛选改为同排；三个顶部按钮保持单行文字。 - 所有操作按钮、搜索框和状态选择框继续保持至少 44px 高。 - 未修改 HTML 结构、JavaScript、API、认证、登录或路径业务逻辑。 ### 提交 - `4326bc5a78bd4aae93f0a8e5d12449e253762e34` - 已推送至 `origin/main` ### 验证结果 - `node --check internal/api/admin/app.js`：通过。 - `go test ./internal/api -run '^TestAdmin' -count=1`：通过。 - `go build ./...`：通过。 - `python dev_scripts/harness.py check --strict`：通过。 - `python dev_scripts/harness.py sync --check`：通过，维护者文档镜像一致。 - `git diff --check`：通过。 - 浏览器 1440×900： - 统计区结束于 y=130，路径面板从 y=141 开始，表头从 y=215 开始； - 6 条测试路径全部进入首屏； - 页面横向溢出 0； - 顶部按钮、搜索框和选择框均为 44px； - 控制台 warning/error 为 0。 - 浏览器 375×812： - 首张路径卡从第一轮的 y=606 优化至 y=502，增加约 104px 列表空间； - 页面横向溢出 0； - 顶部按钮、搜索框和选择框均为 44px； - 标题、统计、筛选和路径卡无重叠或遮挡。 ### 工作区与安全 - 提交仅包含 `internal/api/admin/app.css`。 - 未提交本地 `mediamtx.yml`、摄像头配置、账号密码、二进制、启动脚本或用户已有的 `.github` 删除项。 - 隔离视觉测试使用的虚构配置和临时二进制已清理。 ### 文档影响本次仅改变现有页面视觉密度，不改变长期产品事实、架构、配置或操作流程，因此无需更新 Wiki。 ## 状态实现、测试和推送完成；工单保持开启，等待用户验收。

ila referenced this issue from a commit

2026-08-28 15:22:15 +08:00

style(admin): refine compact device list (#5)

ila commented

2026-08-28 15:22:36 +08:00

验收反馈追加修改完成

根据用户对第一版紧凑布局的验收反馈，已完成第二轮调整并重新提交。

追加差异

页头由三行 MediaMTX / Stream Console / 局域网 RTSP 路径管理与快速预览 精简为单一标题：MediaMTX 设备列表。
统计卡保持“文字 + 数字”同行，高度由第一版 58px 进一步降至实测 24px，约为 41%。
删除“RTSP 路径”标题和静态源说明；区域改用 aria-label="RTSP 设备列表" 保留无障碍名称。
搜索标签、搜索框、状态标签和选择框在桌面同一行。
筛选栏由第一版实测 74px 降至 45px，约为 61%；输入与选择控件仍为 44px。
表格表头字号精确增加 2px，由约 12.48px 增至 14.48px。
375px 下保留两列统计和两列筛选，避免横向溢出。

提交

追加提交：c578e0c55491e8612792fdc44b7bc7ea5fcb9dec
已推送：origin/main
工单 #5 当前完整提交序列：4326bc5a、c578e0c5

最终验证

node --check internal/api/admin/app.js：通过。
go test ./internal/api -run '^TestAdmin' -count=1：通过。
go build ./...：通过。
python dev_scripts/harness.py check --strict：通过。
python dev_scripts/harness.py sync --check：通过。
git diff --check：通过。
浏览器 1440×900：
- 统计卡 24px；
- 筛选栏 45px；
- 输入与选择框 44px；
- 表头字号 14.48px；
- 页面横向溢出 0。
浏览器 375×812：
- 页头 143px，统计区 56px，筛选区 86px；
- 第一张设备卡从第一版约 y=502 提前至 y=310；
- 统计卡 24px、输入控件 44px；
- 横向溢出 0，浏览器 warning/error 0。

工作区和文档

提交仅包含 internal/api/admin/index.html 与 internal/api/admin/app.css。
本地配置、摄像头信息、二进制、启动脚本及用户已有 .github 改动未提交。
临时视觉测试配置和二进制已清理。
未改变长期产品事实，无需更新 Wiki。

状态

追加修改、测试和推送完成；工单继续保持开启，等待用户再次验收。

## 验收反馈追加修改完成根据用户对第一版紧凑布局的验收反馈，已完成第二轮调整并重新提交。 ### 追加差异 - 页头由三行 `MediaMTX / Stream Console / 局域网 RTSP 路径管理与快速预览` 精简为单一标题：`MediaMTX 设备列表`。 - 统计卡保持“文字 + 数字”同行，高度由第一版 58px 进一步降至实测 24px，约为 41%。 - 删除“RTSP 路径”标题和静态源说明；区域改用 `aria-label="RTSP 设备列表"` 保留无障碍名称。 - 搜索标签、搜索框、状态标签和选择框在桌面同一行。 - 筛选栏由第一版实测 74px 降至 45px，约为 61%；输入与选择控件仍为 44px。 - 表格表头字号精确增加 2px，由约 12.48px 增至 14.48px。 - 375px 下保留两列统计和两列筛选，避免横向溢出。 ### 提交 - 追加提交：`c578e0c55491e8612792fdc44b7bc7ea5fcb9dec` - 已推送：`origin/main` - 工单 #5 当前完整提交序列：`4326bc5a`、`c578e0c5` ### 最终验证 - `node --check internal/api/admin/app.js`：通过。 - `go test ./internal/api -run '^TestAdmin' -count=1`：通过。 - `go build ./...`：通过。 - `python dev_scripts/harness.py check --strict`：通过。 - `python dev_scripts/harness.py sync --check`：通过。 - `git diff --check`：通过。 - 浏览器 1440×900： - 统计卡 24px； - 筛选栏 45px； - 输入与选择框 44px； - 表头字号 14.48px； - 页面横向溢出 0。 - 浏览器 375×812： - 页头 143px，统计区 56px，筛选区 86px； - 第一张设备卡从第一版约 y=502 提前至 y=310； - 统计卡 24px、输入控件 44px； - 横向溢出 0，浏览器 warning/error 0。 ### 工作区和文档 - 提交仅包含 `internal/api/admin/index.html` 与 `internal/api/admin/app.css`。 - 本地配置、摄像头信息、二进制、启动脚本及用户已有 `.github` 改动未提交。 - 临时视觉测试配置和二进制已清理。 - 未改变长期产品事实，无需更新 Wiki。 ## 状态追加修改、测试和推送完成；工单继续保持开启，等待用户再次验收。

ila commented

2026-08-28 15:26:56 +08:00

本地运行验证补充

用户反馈运行 start_mediamtx.bat 仍显示旧页面。已确认并修复：

原因：脚本运行仓库根目录的本地未跟踪 mediamtx.exe；该文件生成于 12:06，而追加页面源码修改于 15:16–15:19。管理静态资源通过 Go embed 编入 EXE，源码提交不会自动更新已有本地二进制。
已停止旧 EXE（原 PID 46216），执行 go build -o mediamtx.exe .，并按现有 start_mediamtx.ps1 和本地配置重新启动。
新 EXE 生成时间：2026-08-28 15:25:05。
Go 构建元数据包含提交：c578e0c55491。
当前进程：D:\github\mediamtx\mediamtx.exe，API 继续监听 19997，摄像头路径成功上线。
实际读取 http://127.0.0.1:19997/admin/ 与 app.css 验证：
- <h1>MediaMTX 设备列表</h1>：存在；
- 旧仪表盘 <h1>Stream Console</h1>：不存在；
- 原路径标题 paths-heading：不存在；
- 24px 统计栏与表头 +2px 样式：存在。
首次 curl 校验受本机 http_proxy=127.0.0.1:1080 干扰，使用 --noproxy '*' 后直连验证通过；这与 MediaMTX 服务无关。

源码无需新增修改；本次仅刷新本地未跟踪运行二进制。浏览器若仍保留旧资源，使用 Ctrl+F5 强制刷新。

## 本地运行验证补充用户反馈运行 `start_mediamtx.bat` 仍显示旧页面。已确认并修复： - 原因：脚本运行仓库根目录的本地未跟踪 `mediamtx.exe`；该文件生成于 12:06，而追加页面源码修改于 15:16–15:19。管理静态资源通过 Go `embed` 编入 EXE，源码提交不会自动更新已有本地二进制。 - 已停止旧 EXE（原 PID 46216），执行 `go build -o mediamtx.exe .`，并按现有 `start_mediamtx.ps1` 和本地配置重新启动。 - 新 EXE 生成时间：2026-08-28 15:25:05。 - Go 构建元数据包含提交：`c578e0c55491`。 - 当前进程：`D:\github\mediamtx\mediamtx.exe`，API 继续监听 19997，摄像头路径成功上线。 - 实际读取 `http://127.0.0.1:19997/admin/` 与 `app.css` 验证： - `<h1>MediaMTX 设备列表</h1>`：存在； - 旧仪表盘 `<h1>Stream Console</h1>`：不存在； - 原路径标题 `paths-heading`：不存在； - 24px 统计栏与表头 +2px 样式：存在。 - 首次 curl 校验受本机 `http_proxy=127.0.0.1:1080` 干扰，使用 `--noproxy '*'` 后直连验证通过；这与 MediaMTX 服务无关。源码无需新增修改；本次仅刷新本地未跟踪运行二进制。浏览器若仍保留旧资源，使用 Ctrl+F5 强制刷新。

ila commented

2026-08-28 16:18:45 +08:00

用户验收通过

用户于 2026-08-28 明确确认“#5 通过验收”。

验收基线：

提交 4326bc5a78bd4aae93f0a8e5d12449e253762e34
追加提交 c578e0c55491e8612792fdc44b7bc7ea5fcb9dec
本地重新构建后的 mediamtx.exe 已验证加载新内嵌页面
自动测试、构建、桌面与 375px 浏览器检查、Harness 检查均已记录通过
无长期文档变化
无敏感配置或用户无关改动进入提交

按 DevHarness 规则关闭工单。

## 用户验收通过用户于 2026-08-28 明确确认“#5 通过验收”。验收基线： - 提交 `4326bc5a78bd4aae93f0a8e5d12449e253762e34` - 追加提交 `c578e0c55491e8612792fdc44b7bc7ea5fcb9dec` - 本地重新构建后的 `mediamtx.exe` 已验证加载新内嵌页面 - 自动测试、构建、桌面与 375px 浏览器检查、Harness 检查均已记录通过 - 无长期文档变化 - 无敏感配置或用户无关改动进入提交按 DevHarness 规则关闭工单。

ila closed this issue

2026-08-28 16:18:45 +08:00

ila referenced this issue

2026-08-28 16:19:54 +08:00

管理页面设备分页与完整统计 #6

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: OPC/mediamtx#5