監控與媒體瀏覽(#60)
dashboard1. 儀表板
異常橫幅、四個指標、資源卡(含縮圖快取)、帳號池、進行中任務、最新下載牆。
notification_important2. 異常頁
未解除/已解除分頁;種類、對象、時間線、截圖、已知悉、通知與 Gitea 狀態。
task_alt3. 總任務詳細卡
即時畫面與 X 帳號切換、目前動作、讀取節奏、步驟耗時、檢查點、錯誤與警告、接手歷史、貼文清單與媒體狀態。
key4. X 帳號頁
每個 X 帳號一格即時畫面(閒置佔位)、未訂閱 Premium 狀態、Premium 與關係檢查時間。
group5. 追蹤目標頁
受保護/訂閱限定/私密社群標記、X 帳號關係矩陣、「在媒體瀏覽器中檢視」入口;分級與外部網站(#111)。
photo_library6. 媒體瀏覽器
表格與縮圖牆、篩選列、搜尋、燈箱(桌面)、批次操作、刪除確認框、顯示已排除。
settings7. 設定頁
通知區、異常閾值區、縮圖快取與清除、影片長度補資料進度。
menu8. 導覽與更多頁
主導覽改為儀表板、追蹤目標、任務、媒體;「更多」列出新增、異常(徽章)、X 帳號、設定、備份、日誌。
receipt_long9. 系統日誌頁
來源篩選、DEBUG 等級切換、頁尾保留期規則。
sell10. 標籤管理
標籤清單、來源標示(hashtag/手動/模型)、改名與合併、自動完成輸入元件。
smartphone11. 燈箱手機版
全螢幕滑動切換、上拉中繼資料與貼文內文、影片。
chat12. 通知訊息範本
Synology Chat 的異常開始、異常解除、每日摘要;Gitea issue 標題與內文、觸發留言、08:00 日報。
登入與安全(#98)
管理員密碼登入與 TOTP、Passkey 第二期。登入前的畫面(精靈、登入頁)沒有側欄與頂列;「更多」選單與桌面側欄在「設定」之後多了「安全」。
shield13. 建立管理員精靈
設定代碼 → 設定密碼 → 啟用 TOTP(可略過)→ 備用碼;錯誤與略過時的完成頁。
login14. 登入頁
密碼步、退避中、被登出後導回;驗證碼步、備用碼步、驗證碼暫時無法使用;Passkey 按鈕(第二期)。
shield_lock15. 安全頁
管理員密碼、TOTP、備用碼、已登入的裝置、Passkey(第二期)、連線;變更密碼與再次驗證對話框。
phonelink_lock16. 啟用 TOTP 對話框
掃 QR 或手動金鑰、輸入驗證碼確認、顯示備用碼;重新產生備用碼。
分級、排程優先順序與外部網站(#111)
使用者(追蹤目標)的分級(全露、成人、全齡、專畫、雜訊、未分級)決定每日排程的分組順序;社群改用「每日自動再次解析」開關;詳細頁列出使用者的外部網站。改在既有的追蹤目標頁與媒體瀏覽器樣稿上,#77、#83 的內容不變。
label5. 追蹤目標頁(分級)
清單的分級徽章、直接改、分級篩選與排序、未分級提示、選取模式與批次改分級;詳細頁分級選擇器、外部網站、每日排程順位;社群開關;新增頁結果卡。
photo_library6. 媒體瀏覽器(分級篩選)
篩選列的「分級」下拉,多選;只顯示所選分級的使用者的媒體。
多網站:紳士漫畫與 Hanime1(#122)
把紳士漫畫(wnacg)與 Hanime1 併進羽藏之後的 11 個畫面,集中在一份樣稿(multisite.html),每個畫面一節。X 的既有畫面不變,只多了網站徽章與分段。新元件在 assets/multisite.css。
add_link1. 新增追蹤目標
分頁「X 網址」「Hanime1 網址」;貼影片網址預覽上傳者。新番不用手動加。
group2. 追蹤目標列表
依網站分段、網站徽章、網站篩選;紳士漫畫新番折疊成一段摘要。
auto_stories3. 新番總覽(紳士漫畫)
年份/季度篩選、搜尋、本子數與最後新增、排除、季度清單展開。
menu_book4. 新番詳細頁(紳士漫畫)
別名編輯、分類過濾、季度、作品分組卡與版本列、合併/拆開。
movie5. Hanime1 新番總覽與系列詳細
即將上市/已上架、集數、每集的版本與解析度、排除。
person6. 上傳者詳細頁
Hanime1 使用者(追蹤目標):影片列表、解析度、每月再次解析。
task_alt7. 任務列表
多出網站層級的列:更新掃描、追溯、裏番掃描、升級檢查。
manage_search8. 任務詳細頁
追溯、系列初次解析、更新掃描完成:新子任務的步驟名稱與進度。
settings9. 設定頁
網站卡(存取方式、請求間隔、每月排程日、目標解析度、ffmpeg、追溯)、字典、清除待刪除。
dashboard10. 儀表板
各網站磚塊、待刪除 GB、網站狀態列、最新下載牆的本子封面與影片。
photo_library11. 媒體瀏覽器
網站與新番篩選、以作品為單位、本子封面牆、燈箱翻頁當閱讀器。
怎麼看
- 每份樣稿頂端是畫面目的與對應規格;每個狀態(例如「有異常」「空狀態」)一列,左手機右桌面。只對一種寬度有意義的狀態只畫一種。
- 網址加
?s=2只顯示第 2 個狀態,方便截圖或在 issue 裡指定。 - 樣稿底部的「待確認」是畫圖時自己做的小決定,確認時請特別看一下。
- 外框裡的連結可以在樣稿之間跳轉(例如儀表板的異常橫幅連到異常頁)。
給實作的人
assets/tokens.css、assets/app.css是正式 UI 樣式的副本,不要在這裡改。assets/mockup.css的第二段「新元件」是新畫面用到、app.css還沒有的樣式(例如.alertbar、.latest、.tl、.live、.kvgrid、.selbar、.lightbox、.tag),實作時搬進web/src/styles/app.css,名稱沿用。- 文字用
CONTEXT.md的詞彙:總任務、子任務、任務 A、任務 B、追蹤目標、X 帳號、媒體儲存。 - 樣稿不進入
web/建置,也不是原型;互動與動畫以實作 issue 為準。