app · 253bf39

fix(monitor): 工具面板不再撐滿版面

commit 253bf39a642d8d9fc4f624da58e3620278b1ce3bAuthor: Nuclear0709 <agp05432@gmail.com>Date:   Tue Nov 10 20:30:21 2026 +0800     fix(monitor): 工具面板不再撐滿版面        - 六列 grid 把 1fr 留給訊息列    - MediaCache／Raw Socket details 只佔內容高度    - 補 layout 斷言 diff --git a/Docs/ChangeHistory.md b/Docs/ChangeHistory.mdindex 71ad45d..20b9a37 100644--- a/Docs/ChangeHistory.md+++ b/Docs/ChangeHistory.md@@ -1,5 +1,27 @@ # ChangeHistory +## 2026.11.10 20:30 monitor 工具面板不再撐滿版面++**類型**: 修正 · **檔案**: `assets/monitor.css`、`Test/monitor_audience_ui.cjs`++### 問題++新增 MediaCache／Raw Socket 兩個 `<details>` 後，`.monitor-panel` 仍只有四列 grid；MediaCache 被放進 `minmax(8rem, 1fr)` 的列，折疊時仍吃掉整個剩餘高度，訊息列被推到下方。++### 修改++- grid 改為六列：標題、工具列、測試、MediaCache、Raw Socket、訊息列。+- 只有最後的訊息列使用 `minmax(8rem, 1fr)`。+- `.mon-test-panel` 設為 `align-self:start`，折疊時只佔內容高度。+- monitor UI 測試新增折疊高度與訊息列位置斷言。++### 驗證++- `node Test/monitor_audience_ui.cjs`+- `npm run lint`、`npm run check:css`++---+ ## 2026.11.10 20:24 monitor MediaCache 檢視與 Raw Socket 測試  **類型**: 功能 · **檔案**: `MediaRoutes.cjs`、`ScriptLib/media/cache.cjs`、`SocketTestRoutes.cjs`、`Server.js`、`TikTok.js`、`monitor.html`、`assets/monitor.js`、`assets/monitor.css`、`lang/*.json`、`Test/media_cache.test.cjs`、`Test/socket_test_routes.test.cjs`、`Docs/MEDIA_CACHE.md`、`Docs/TEST_FILES_REFERENCE.md`diff --git a/Test/monitor_audience_ui.cjs b/Test/monitor_audience_ui.cjsindex 2823574..b9a879f 100644--- a/Test/monitor_audience_ui.cjs+++ b/Test/monitor_audience_ui.cjs@@ -145,6 +145,13 @@ async function main() {             chats: document.querySelector('#monSessionChats').textContent         }));         assert.deepEqual(session, { hidden: false, joins: '2', likes: '7', chats: '3' });+        const collapsedLayout = await page.evaluate(() => {+            const box = id => document.querySelector(id).getBoundingClientRect().toJSON();+            return { media: box('#monMediaPanel'), raw: box('#monRawPanel'), scroll: box('#monScroll') };+        });+        assert.ok(collapsedLayout.media.height < 80, '折疊的 MediaCache 不應佔用大塊空白');+        assert.ok(collapsedLayout.scroll.height >= 120, '訊息列應保留可讀高度');+        assert.ok(collapsedLayout.scroll.top >= collapsedLayout.raw.bottom, '訊息列應在工具面板之後');          await page.evaluate(() => { document.querySelector('#monTestPanel').open = true; });         const targetLayout = await page.evaluate(() => {diff --git a/assets/monitor.css b/assets/monitor.cssindex ced5eb0..13dcc7f 100644--- a/assets/monitor.css+++ b/assets/monitor.css@@ -31,7 +31,8 @@ body.app-ui {     position: relative;     flex: 1;     display: grid;-    grid-template-rows: auto auto auto minmax(8rem, 1fr);+    /* 標題、工具列、測試、MediaCache、Raw Socket 都只佔內容高度；訊息列拿剩餘空間。 */+    grid-template-rows: auto auto auto auto auto minmax(8rem, 1fr);     min-height: min-content;     padding: 1rem; }@@ -88,6 +89,7 @@ body.app-ui {  /* 本機測試訊息：只影響畫面，不送 /chat；測試列加左側琥珀色標記。 */ .mon-test-panel {+    align-self: start;     margin-bottom: 0.75rem;     padding: 0.5rem 0.75rem;     border: 1px solid #334155;