# 網頁樣式建置與版面盤點
## 靜態 CSS
一般啟動使用 `npm start`，排版開發使用 `npm run dev`；模式差異見 [啟動說明](STARTUP.md)。
主服務的 Tailwind 頁面（含 `/traffic`）改用 `/assets/app.css`。以 Tailwind 4.3.3（`@tailwindcss/cli`）編譯既有 class，
瀏覽器不再載入 Tailwind Play CDN。keyword 原本即為獨立 CSS，保持原本的樣式方式。
Chart.js、播放器與圖示仍有外部依賴。
```sh
npm install
npm run build:css
# 編輯頁面時持續建置
npm run watch:css
```
來源為 `styles/app.css`；v4 以 `@import "tailwindcss" source(none)` 關閉自動掃描，
再由 `@source "../*.html"` 指定根目錄 HTML（原本由 `tailwind.config.cjs` 指定，該檔已移除），
包含 HTML 內 JavaScript 的完整 class 字串。新增 class 後需重新建置，
不要使用 `bg-${color}-500` 這類拼接名稱；改用完整 class 對照表。
建置輸出的 `assets/app.css` 與 `assets/app.css.build.json` 應與頁面一同交付；
啟動時指紋一致就不需現場編譯，不一致才重建，詳見 [啟動說明](STARTUP.md)。
指紋涵蓋會影響 CSS 產出的來源：根目錄 HTML、`assets/*.js`、`styles/`、建置腳本與建置版本。
其中 `assets/*.js` 因 `styles/app.css` 有 `@source "../assets/*.js"`，其完整 class 字串會參與編譯，因此改前端 JS 的 class 也要重建。
頁面專用的 `assets/*.css` 不是 Tailwind 產物，不列入指紋。
本專案只用 npm：`yarn.lock` 已移除並列入 `.gitignore`，`package-lock.json` 是唯一鎖檔。
各頁面專用的樣式放在 `assets/<page>.css`（`app.css`、`keyword.css`、`autoclip.css`、`pushdiag.css`、`sponsor.css`、`traffic.css`），由 `WebAssets.cjs` 白名單提供，HTML 只留結構、不再內嵌 `<style>`；這些獨立樣式表不是 Tailwind 產物，**不列入建置指紋**。
`WebAssets.cjs` 只公開明確列出的 CSS，支援 GET／HEAD，回傳正確 MIME，
使用 `no-cache` 避免更新後繼續使用舊樣式。升級後需重啟 Server.js，讓新資源路由生效。
## 本次版面檢查與處理
| 頁面 | 已處理／保留 | 後續較值得改造的項目 |
| --- | --- | --- |
| 主控台 `/` | 日誌面板重設計：每列顯示時間＋類型＋內容，提供類型篩選、文字搜尋、自動捲動、清除與連線狀態；資料來自結構化端點 `/status/stream/logs` | 將啟動控制與即時日誌分成清楚區塊 |
| `/runtime` | 狀態卡、指標格線、聊天來源卡、啟動選項卡；來源 badge 顯示原生／程式瀏覽器／手動；右下角 toast；停止改為留在原頁更新 | 來源變更與執行中子程序的即時套用尚未支援 |
| `/autoclip` | 保留平台卡片、圖表分頁、時間範圍、群組與右側證據；遷移本機樣式 | 密集資料下的操作回饋，避免再增加常駐資訊 |
| `/clips` | 補 viewport；標題導覽換行；每筆操作按鈕可換行 | 搜尋、篩選與大量紀錄分頁 |
| `/sponsor` | 標題導覽換行；卡片與設定列在手機可堆疊／換行 | 將建立、審核與播放狀態分區 |
| `/config` | 深色分區卡片；桌面側邊導覽／手機分區膠囊；長表單分組；進階剪輯設定收合；sticky 儲存列與未儲存提示；安全彈窗可捲動 | 主題切換（目前沒有） |
| `/login` | 深色登入卡、表單語意、Enter 送出、鍵盤焦點與錯誤提示 | 保持單一登入目的，無需大型改造 |
| 更新完成頁 | 深色結果卡、清楚的主要／次要下一步 | 保持簡短結果與下一步入口 |
| `/logViewer` | 工具列換行；內容高度使用動態視窗單位，日誌區內捲動 | 檔案篩選、搜尋與更新狀態 |
| `/pushdiag` | 原有響應式分區保留；共用焦點與操作尺寸；本機樣式 | 將進階細節收合，保留診斷摘要 |
| `/keyword` | 原有手機版、分頁與表格內捲動保留；內嵌樣式與腳本抽成 `assets/keyword.css`、`assets/keyword.js`，新增「規則產生器與測試」（正則測試＋歷史預覽＋快速測試＋目前生效規則） | 平台篩選與最近紀錄的密度控制 |
| `/traffic` | 分頁觀測區段卡片＋固定雙圖；單一區間平移／縮放／還原與指定起訖時間；場次開場比較（依開播對齊 0–120 分、最多 6 場、跨場中位數）；每小時觀看時段（不需開播時間、跨日期中位數）；載入與錯誤隔離；分鐘加權、覆蓋率與中英文本地化，詳見 [TRAFFIC.md](TRAFFIC.md) | 場次比較目前固定 5 分鐘桶與最近 6 場，尚無自訂桶寬 |
後續項目為盤點建議，尚未實作。`OtherTool` 的獨立顯示頁與第三方套件範例不屬於主服務操作頁，
不套用管理介面的通用版面，避免影響直播顯示用途。
主控台 `/` 的日誌面板由 `assets/console.js` 驅動，訂閱 `/status/stream/logs`（每筆為 `{ t, level, text }` 的 SSE），
依時間與類型分欄顯示並可篩選。`Server.js` 的 `pushLog` 會為每行日誌標上時間與類型：
`[ERR]`→錯誤、`[OUT]`→輸出、`[SYSTEM]`／`[RUNTIME]`→系統、`[METRICS]`→指標，其餘為一般。
原本的 `/status/stream` 純文字串流與 `/status` 保持不變，外部工具不受影響。
## 共用規則與驗證
- 大螢幕保留可讀內容寬度；手機允許自然捲動，不用固定高度裁掉內容。
- 表格與日誌可在自身區域捲動；工具列、導覽與操作按鈕依寬度換行。
- 全站採深色優先：監控、人流、剪輯、常客與設定／登入頁一致使用深色。
- 目前沒有淺／深主題切換；`config`／`login` 使用頁面內的區域 CSS 變數，若未來要做切換，需改成全站 token 與 `data-theme`，不能只在 Tailwind class 上加按鈕。
- 執行 `node --test Test/web_assets.test.cjs Test/autoclip_chart.test.mjs` 驗證資源路由與圖表邏輯。
- 設定／登入頁使用 `node Test/config_login_ui.cjs` 做 UI 冒煙檢查（需 Chrome／Edge，不在 `test:ci`）；會產生
`output/playwright/config-desktop.png`、`config-mobile.png`、`login-desktop.png`，供展示與版面比較。
- 版面使用獨立測試資料預覽，勿為了測試啟動聊天或送出真實剪輯、通知。
流程依據：[Tailwind CLI 靜態建置](https://tailwindcss.com/docs/installation/tailwind-cli)、
[偵測來源檔案與完整 class 名稱限制](https://tailwindcss.com/docs/detecting-classes-in-source-files)。