NX NX AI Console Beta · Frontend Prototype
Handoff · v1.0 · 2026 / 07

NX AI Console Beta 前台

工程交付版本 UI Prototype。本頁彙整所有已完成的頁面與流程,提供工程師作為正式開發的 UI 與操作流程參考。所有資料採用 Mock Data,尚未串接後端,可直接點入任一頁面預覽完整互動。

13 Pages
3 AI Cores
3 Breakpoints
100% Responsive

帳號流程

01 · Account

Console 核心

02 · Console

資金與交易

03 · Transactions

會員與支援

04 · Member & Help

交付說明

Handoff Notes

資料與串接

  • 所有頁面採用 Mock Data,尚未串接後端,可用於流程展示與 UI 對接。
  • 頂部返回 #backBtn 使用 history.back() 若無 referrer 則回 dashboard.html
  • 會員頭像上傳寫入 localStorage · nx.member.avatar,Topbar 自動同步。
  • Sidebar AI Core 展開狀態記憶於 localStorage · nx.sidebar.aiCoreOpen
  • 客服 LINE 按鈕保留 data-line-id,工程師接手時將提示 alert 換成正式 line.me 深連結。

Responsive 斷點

  • Desktop ≥ 1080px · 完整雙欄 / 三欄佈局。
  • Tablet 761 – 1079px · 側邊欄可收合,主內容縮為單欄卡片。
  • Mobile ≤ 760px · Sidebar 抽屜化,分析區改為單欄流程 + 靜態底部按鈕。

共用元件

  • assets/styles.css · Design tokens / 全域樣式。
  • assets/dashboard.css · Console 主體殼(sidebar + topbar + 卡片)。
  • assets/topbar.js · 返回鍵 / 會員選單 / 登出 / 頭像同步。
  • assets/sidebar.js · AI Core accordion 展開邏輯。
  • assets/drawer.js · Mobile 抽屜開合。
  • assets/watermark.js · Modal 內浮水印。
NX AI · Console Beta · Frontend Prototype v1.0 Handoff · 2026 · 07 · 07