C9 Platform — UI/UX 設計規格書
目標讀者：UI 設計師、UX 設計師、前端切版工程師 最後更新：2026-03-01 版本：v1.0
目錄
- 第 1 章：設計系統總覽
- 第 2 章：色彩系統
- 第 3 章：字體規範
- 第 4 章：響應式斷點
- 第 5 章：前台元件庫
- 第 6 章：後台元件庫
- 第 7 章：頁面佈局規範
- 第 8 章：表單規範
- 第 9 章：表格規範
- 第 10 章：圖標規範
- 第 11 章：動畫與過渡
- 第 12 章：多語系 UI 適配
平台簡介
C9 Entertainment City 是一個白牌線上娛樂城平台，包含三個子專案：
| 專案 | 用途 | 框架 | 設計風格 |
|---|---|---|---|
| c9-ec (前台) | 面向用戶的遊戲平台 | Nuxt 4.2 (Vue 3.5) | 暗色主題、行動優先 |
| c9-ims (後台) | 內部管理系統 | Next.js 16 (React 19) | 明暗雙主題、桌面優先 |
| c9-be (後端) | API 伺服器 | NestJS v11 | -- |
本文件聚焦於前台 (c9-ec) 與後台 (c9-ims) 的 UI/UX 設計規範。
第 1 章：設計系統總覽
1.1 雙設計系統架構
C9 平台採用兩套獨立但風格一致的設計系統，分別服務前台用戶端與後台管理端。
前台設計系統 (c9-ec)
| 項目 | 規格 |
|---|---|
| UI 框架 | Nuxt UI v4 (基於 Reka UI + Tailwind CSS v4) |
| 主題策略 | 暗色優先 (Dark-First)，不提供明亮模式 |
| 響應式策略 | 行動優先 (Mobile-First)，由小螢幕往大螢幕擴展 |
| 主題切換 | 支援 6 組主題色預設，用戶可即時切換 |
| 佈局系統 | 模板化佈局 (目前使用 a1，預留 a2 等未來擴充) |
| 元件總數 | 77 個 Vue 元件 |
| 圖標系統 | Lucide Icons (i-lucide-*) + Noto Emoji Icons |
設計理念：
前台面向終端用戶（玩家），整體視覺強調沉浸式遊戲體驗。全站固定暗色背景，搭配主題色 作為視覺引導，營造高級感與科技感。所有互動元素皆以觸控友好為前提設計，確保在手機上 的操作流暢度。
前台設計金字塔：
/\
/ \ 沉浸體驗
/ \ ──────────
/ 主題色 \ 動態主題切換 (6 色)
/──────────\
/ 暗色背景 \ 固定暗色 (#0a0a0a ~ #1a1a1a)
/──────────────\
/ 行動優先 / 觸控友好 \ 手指操作區 >= 44px
/──────────────────────\後台設計系統 (c9-ims)
| 項目 | 規格 |
|---|---|
| UI 框架 | shadcn/ui (Radix UI, new-york style) + Tailwind CSS v4 |
| 主題策略 | 支援 明亮 (Light) 與 暗色 (Dark) 雙模式 |
| 響應式策略 | 桌面優先 (Desktop-First)，主要在大螢幕操作 |
| 主題注入 | 站點配置驅動，OKLCH 色彩空間，30+ CSS 變數 |
| 佈局系統 | Next.js Route Group ((admin) + (auth)) |
| 元件總數 | 41 個 React 元件 (10 佈局 + 11 共用 + 16 UI + 4 DataTable) |
| 圖標系統 | Lucide React |
設計理念：
後台面向管理人員，強調資訊密度與操作效率。以表格和表單為核心互動模式，搭配側邊欄 導航和多站點 Tab 切換，讓管理員能快速在不同站點和功能模組間切換操作。
後台設計金字塔：
/\
/ \ 操作效率
/ \ ──────────
/ RBAC \ 權限控制 (16 模組 x 2 操作)
/──────────\
/ 多站點 Tab \ SiteTabs + SiteSelector
/──────────────\
/ 表格 + 表單 + 篩選 \ SimpleTable + FilterBar
/──────────────────────\1.2 設計原則
一致性 (Consistency)
- 前台所有頁面共用同一組暗色背景、文字階層、間距規則
- 後台所有列表頁面遵循統一模式：SiteTabs -> FilterBar -> SimpleTable -> Pagination
- 兩端各自維持內部一致，但不強制跨端統一（用途不同）
可及性 (Accessibility)
- 所有互動元素的最小觸控區域：44 x 44 px（前台行動版）
- 色彩對比度遵循 WCAG 2.1 AA 標準（前景與背景對比 >= 4.5:1）
- 所有表單欄位必須有對應的
<label>元素 - 後台使用 Radix UI 原語，內建鍵盤導航與 ARIA 屬性
多語系支援 (i18n)
- 支援 5 種語系：繁體中文 (zh-TW)、英文 (en-US)、簡體中文 (zh-CN)、泰文 (th-TH)、越南文 (vi-VN)
- 所有文字內容皆通過翻譯 key 引用，不硬編碼
- UI 佈局需考慮不同語系的文字長度差異（英文可能比中文長 1.5~2 倍）
- 泰文需要較高的行高 (line-height) 以容納上下標記
白牌可客製化 (White-Label)
- 前台主題色完全可替換（6 組預設 + 後端自定義）
- 後台主題色由站點配置驅動，每個站點可獨立設定
- Logo、Favicon、客服管道等素材均從後端動態載入
- 佈局結構模板化，支援未來新增佈局模板
1.3 設計 Token 總覽
前台 Token 分類
| Token 分類 | CSS 變數前綴 | 說明 |
|---|---|---|
| 主題色 | --c9-primary-{shade} | 50~950 共 11 階色票 |
| 發光色 | --c9-glow | RGB 值，用於 box-shadow 發光效果 |
| 背景色 | 直接使用 Tailwind class | bg-[#0a1120], bg-slate-900 等 |
| 文字色 | 直接使用 Tailwind class | text-white/{opacity} 階層 |
| 表面色 | 直接使用 Tailwind class | bg-white/5, bg-white/10 半透明 |
後台 Token 分類
| Token 分類 | CSS 變數 | 說明 |
|---|---|---|
| 品牌色 | --primary, --primary-foreground | 主要品牌色 + 前景文字 |
| 強調色 | --accent, --accent-foreground | 次要強調色 |
| 表面色 | --card, --popover, --sidebar | 卡片/彈窗/側邊欄背景 |
| 文字色 | --foreground, --muted-foreground | 主文字 + 次要文字 |
| 邊框色 | --border, --input, --ring | 分隔線/輸入框/焦點環 |
| 圖表色 | --chart-1 ~ --chart-5 | 5 組圖表配色 |
| 側邊欄 | --sidebar-* | 8 個側邊欄專用變數 |
| 破壞性 | --destructive | 刪除/危險操作色 |
1.4 設計工具與資源
| 工具 | 用途 | 說明 |
|---|---|---|
| Tailwind CSS v4 | 樣式基礎 | 前後台共用 |
| Nuxt UI v4 | 前台元件庫 | 基於 Reka UI，暗色主題 |
| shadcn/ui (new-york) | 後台元件庫 | 基於 Radix UI，可自定義 |
| Lucide Icons | 圖標系統 | 前後台共用圖標庫 |
| OKLCH 色彩空間 | 後台色彩 | 感知均勻色彩模型 |
| Figma (建議) | 設計稿 | 與 Tailwind token 對齊 |
第 2 章：色彩系統
2.1 前台色彩系統
2.1.1 設計哲學：暗色優先
前台全站採用暗色主題，不提供明亮模式切換。這是基於以下考量：
- 沉浸式體驗：暗色背景讓遊戲畫面和彩色元素更突出
- 視覺舒適度：長時間使用（尤其夜間）減少眼部疲勞
- 高級感：暗色調搭配主題色點綴，營造精品感
- 節能：OLED 螢幕上暗色像素不發光，節省電力
2.1.2 背景色階層
前台使用多層深色背景，從最深的頁面底色到較淺的卡片表面色：
背景色階層（由深到淺）：
┌────────────────────────────────────────────┐
│ Level 0 — 頁面底色 │
│ #0a0a0a ~ #0a1120 │
│ 用途：body 背景、頁面最底層 │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Level 1 — 主要表面 │ │
│ │ #131f30 ~ #1a1a1a │ │
│ │ 用途：卡片、面板、側邊欄 │ │
│ │ │ │
│ │ ┌──────────────────────────────┐ │ │
│ │ │ Level 2 — 次要表面 │ │ │
│ │ │ bg-white/5 (rgba 255,5%) │ │ │
│ │ │ 用途：懸浮卡片、下拉選單 │ │ │
│ │ │ │ │ │
│ │ │ ┌──────────────────────┐ │ │ │
│ │ │ │ Level 3 — 互動表面 │ │ │ │
│ │ │ │ bg-white/10 │ │ │ │
│ │ │ │ 用途：hover、active │ │ │ │
│ │ │ └──────────────────────┘ │ │ │
│ │ └──────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└────────────────────────────────────────────┘| 階層 | 色值 | Tailwind Class | 用途 |
|---|---|---|---|
| Level 0 (底色) | #0a0a0a ~ #0a1120 | bg-[#0a1120] | body 背景 |
| Level 1 (主表面) | #131f30 ~ #1a1a1a | bg-[#131f30], bg-slate-900 | 卡片、面板 |
| Level 2 (次表面) | rgba(255,255,255,0.05) | bg-white/5 | 浮動面板 |
| Level 3 (互動表面) | rgba(255,255,255,0.10) | bg-white/10 | hover 狀態 |
| 邊框 | rgba(255,255,255,0.10) | ring-white/10, border-white/10 | 分隔線 |
2.1.3 文字色階層
文字色階層（由亮到暗）：
████████████ text-white 不透明度 100% — 標題、重要數字
████████████ text-white/80 不透明度 80% — 正文、描述
████████████ text-white/60 不透明度 60% — 次要資訊、標籤
████████████ text-white/40 不透明度 40% — 提示文字、placeholder
████████████ text-white/20 不透明度 20% — 裝飾文字、已停用| 用途 | Tailwind Class | 不透明度 | 場景 |
|---|---|---|---|
| 主標題 | text-white | 100% | 頁面標題、餘額數字、VIP 等級 |
| 正文 | text-white/80 | 80% | 內文描述、選單項目 |
| 次要資訊 | text-white/60 | 60% | 標籤文字、表格表頭 |
| 提示文字 | text-white/40 | 40% | placeholder、時間戳 |
| 裝飾/停用 | text-white/20 | 20% | 裝飾元素、已停用選項 |
2.1.4 六組主題色預設
前台內建 6 組主題色預設，用戶可在設定中即時切換。每組主題色提供 11 階色票 （50 到 950），涵蓋從最淺到最深的完整漸層。
所有主題色預設定義在 c9-ec/app/utils/themePresets.ts：
Emerald（翡翠綠）— 預設主題
色票預覽：
50 ████ #ecfdf5 最淺（背景高亮）
100 ████ #d1fae5
200 ████ #a7f3d0
300 ████ #6ee7b7
400 ████ #34d399 ◀ 預覽色 (preview)
500 ████ #10b981 ◀ 主色調
600 ████ #059669 ◀ 按鈕/連結
700 ████ #047857
800 ████ #065f46
900 ████ #064e3b
950 ████ #022c22 最深
Glow RGB: 16, 185, 129
圖標: i-lucide-leaf (葉子)| 屬性 | 值 |
|---|---|
| themeId | emerald |
| 預覽色 | #34d399 |
| 主色調 (500) | #10b981 |
| 按鈕色 (600) | #059669 |
| 發光色 (glow) | rgb(16, 185, 129) |
| 適用風格 | 自然、清新、信任 |
Amber（琥珀金）
色票預覽：
50 ████ #fffbeb
100 ████ #fef3c7
200 ████ #fde68a
300 ████ #fcd34d
400 ████ #fbbf24 ◀ 預覽色
500 ████ #f59e0b ◀ 主色調
600 ████ #d97706 ◀ 按鈕/連結
700 ████ #b45309
800 ████ #92400e
900 ████ #78350f
950 ████ #451a03
Glow RGB: 245, 158, 11
圖標: i-lucide-flame (火焰)| 屬性 | 值 |
|---|---|
| themeId | amber |
| 預覽色 | #fbbf24 |
| 主色調 (500) | #f59e0b |
| 按鈕色 (600) | #d97706 |
| 發光色 (glow) | rgb(245, 158, 11) |
| 適用風格 | 奢華、溫暖、財富 |
Sky（天空藍）
色票預覽：
50 ████ #f0f9ff
100 ████ #e0f2fe
200 ████ #bae6fd
300 ████ #7dd3fc
400 ████ #38bdf8 ◀ 預覽色
500 ████ #0ea5e9 ◀ 主色調
600 ████ #0284c7 ◀ 按鈕/連結
700 ████ #0369a1
800 ████ #075985
900 ████ #0c4a6e
950 ████ #082f49
Glow RGB: 14, 165, 233
圖標: i-lucide-cloud (雲朵)| 屬性 | 值 |
|---|---|
| themeId | sky |
| 預覽色 | #38bdf8 |
| 主色調 (500) | #0ea5e9 |
| 按鈕色 (600) | #0284c7 |
| 發光色 (glow) | rgb(14, 165, 233) |
| 適用風格 | 科技、專業、可靠 |
Violet（紫羅蘭）
色票預覽：
50 ████ #f5f3ff
100 ████ #ede9fe
200 ████ #ddd6fe
300 ████ #c4b5fd
400 ████ #a78bfa ◀ 預覽色
500 ████ #8b5cf6 ◀ 主色調
600 ████ #7c3aed ◀ 按鈕/連結
700 ████ #6d28d9
800 ████ #5b21b6
900 ████ #4c1d95
950 ████ #2e1065
Glow RGB: 139, 92, 246
圖標: i-lucide-sparkles (閃耀)| 屬性 | 值 |
|---|---|
| themeId | violet |
| 預覽色 | #a78bfa |
| 主色調 (500) | #8b5cf6 |
| 按鈕色 (600) | #7c3aed |
| 發光色 (glow) | rgb(139, 92, 246) |
| 適用風格 | 神秘、高貴、創意 |
Rose（玫瑰紅）
色票預覽：
50 ████ #fff1f2
100 ████ #ffe4e6
200 ████ #fecdd3
300 ████ #fda4af
400 ████ #fb7185 ◀ 預覽色
500 ████ #f43f5e ◀ 主色調
600 ████ #e11d48 ◀ 按鈕/連結
700 ████ #be123c
800 ████ #9f1239
900 ████ #881337
950 ████ #4c0519
Glow RGB: 244, 63, 94
圖標: i-lucide-heart (愛心)| 屬性 | 值 |
|---|---|
| themeId | rose |
| 預覽色 | #fb7185 |
| 主色調 (500) | #f43f5e |
| 按鈕色 (600) | #e11d48 |
| 發光色 (glow) | rgb(244, 63, 94) |
| 適用風格 | 熱情、活力、浪漫 |
Cyan（青色）
色票預覽：
50 ████ #ecfeff
100 ████ #cffafe
200 ████ #a5f3fc
300 ████ #67e8f9
400 ████ #22d3ee ◀ 預覽色
500 ████ #06b6d4 ◀ 主色調
600 ████ #0891b2 ◀ 按鈕/連結
700 ████ #0e7490
800 ████ #155e75
900 ████ #164e63
950 ████ #083344
Glow RGB: 6, 182, 212
圖標: i-lucide-droplets (水滴)| 屬性 | 值 |
|---|---|
| themeId | cyan |
| 預覽色 | #22d3ee |
| 主色調 (500) | #06b6d4 |
| 按鈕色 (600) | #0891b2 |
| 發光色 (glow) | rgb(6, 182, 212) |
| 適用風格 | 清涼、現代、海洋 |
2.1.5 主題色 CSS 變數橋接機制
前台使用 CSS 變數橋接（Theme Color Bridge）將主題色動態注入 Tailwind 的 emerald 色階。 這個設計讓所有使用 emerald-* 的 Tailwind class 自動跟隨主題色變化。
原理：
css
/* c9-ec/app/assets/css/main.css */
@theme {
--color-emerald-50: var(--c9-primary-50, #ecfdf5);
--color-emerald-100: var(--c9-primary-100, #d1fae5);
--color-emerald-200: var(--c9-primary-200, #a7f3d0);
--color-emerald-300: var(--c9-primary-300, #6ee7b7);
--color-emerald-400: var(--c9-primary-400, #34d399);
--color-emerald-500: var(--c9-primary-500, #10b981);
--color-emerald-600: var(--c9-primary-600, #059669);
--color-emerald-700: var(--c9-primary-700, #047857);
--color-emerald-800: var(--c9-primary-800, #065f46);
--color-emerald-900: var(--c9-primary-900, #064e3b);
--color-emerald-950: var(--c9-primary-950, #022c22);
}運作流程：
1. SSR 渲染
└─ CSS 變數 fallback 為 emerald 預設色值 (SSR 安全)
2. Client-side hydration
└─ useTheme.applyTheme() 執行
└─ 根據用戶選擇的主題，設定 :root 上的 --c9-primary-* 變數
└─ Tailwind 的 emerald-* class 自動採用新色值
3. 用戶切換主題
└─ Theme Modal 選擇新主題
└─ applyTheme(newPreset) 更新 :root CSS 變數
└─ 全站即時反映新主題色2.1.6 發光效果 (Glow)
前台大量使用發光效果來強調互動元素和重要區塊。發光色由 --c9-glow CSS 變數控制：
css
:root {
--c9-glow: var(--c9-primary-glow, 16, 185, 129); /* RGB 值 */
}發光效果使用方式：
標準發光：
shadow-[0_0_16px_-2px_rgba(var(--c9-glow),0.4)]
懸停強化發光：
hover:shadow-[0_0_22px_rgba(var(--c9-glow),0.55)]
脈衝發光動畫（BottomBar 中央按鈕）：
animate-ping-slow + bg-amber-500/25| 場景 | 發光強度 | 使用位置 |
|---|---|---|
| 卡片懸停 | 0.4 alpha | 遊戲卡片、VIP 卡片 |
| 按鈕懸停 | 0.55 alpha | CTA 按鈕、存款按鈕 |
| 脈衝動畫 | 0.25 alpha | BottomBar 中央按鈕 |
| 邊框發光 | 0.2 alpha | 活動卡片邊框 |
2.1.7 Glass 與 Ring 卡片樣式
前台廣泛使用半透明玻璃質感（Glass）和環形邊框（Ring）：
Glass 卡片：
bg-white/5 ring-1 ring-white/10 rounded-xl
┌─────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ <-- 半透明白色背景 (5%)
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ <-- 白色環形邊框 (10%)
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────┘
Glass 卡片 + 發光懸停：
bg-white/5 ring-1 ring-white/10 rounded-xl
hover:shadow-[0_0_16px_-2px_rgba(var(--c9-glow),0.4)]2.2 後台色彩系統
2.2.1 OKLCH 色彩空間
後台採用 OKLCH 色彩空間，這是一個感知均勻 (perceptually uniform) 的色彩模型。 相較於 HSL/RGB，OKLCH 能確保不同色相在相同明度值下看起來亮度一致。
OKLCH 格式：oklch(L C H) 或 oklch(L C H / alpha)
- L (Lightness)：0 ~ 1，亮度
- C (Chroma)：0 ~ 0.4+，飽和度
- H (Hue)：0 ~ 360，色相角度
2.2.2 明亮模式 (Light Mode) 色票
以下是後台 :root（明亮模式）的完整 CSS 變數定義：
css
:root {
--radius: 0.625rem;
/* ── 基礎色 ── */
--background: oklch(1 0 0); /* 純白 */
--foreground: oklch(0.145 0 0); /* 近黑 */
/* ── 卡片 ── */
--card: oklch(1 0 0); /* 純白 */
--card-foreground: oklch(0.145 0 0); /* 近黑 */
/* ── 彈窗 ── */
--popover: oklch(1 0 0); /* 純白 */
--popover-foreground: oklch(0.145 0 0); /* 近黑 */
/* ── 品牌色 ── */
--primary: oklch(0.205 0 0); /* 深黑 */
--primary-foreground: oklch(0.985 0 0); /* 近白 */
/* ── 次要色 ── */
--secondary: oklch(0.97 0 0); /* 極淺灰 */
--secondary-foreground: oklch(0.205 0 0); /* 深黑 */
/* ── 靜音色 ── */
--muted: oklch(0.97 0 0); /* 極淺灰 */
--muted-foreground: oklch(0.556 0 0); /* 中灰 */
/* ── 強調色 ── */
--accent: oklch(0.97 0 0); /* 極淺灰 */
--accent-foreground: oklch(0.205 0 0); /* 深黑 */
/* ── 破壞性 ── */
--destructive: oklch(0.577 0.245 27.325); /* 紅色 */
/* ── 邊框/輸入/焦點環 ── */
--border: oklch(0.922 0 0); /* 淺灰 */
--input: oklch(0.922 0 0); /* 淺灰 */
--ring: oklch(0.708 0 0); /* 中灰 */
/* ── 圖表色 (5 色) ── */
--chart-1: oklch(0.646 0.222 41.116); /* 橘色系 */
--chart-2: oklch(0.6 0.118 184.704); /* 青色系 */
--chart-3: oklch(0.398 0.07 227.392); /* 深藍系 */
--chart-4: oklch(0.828 0.189 84.429); /* 黃色系 */
--chart-5: oklch(0.769 0.188 70.08); /* 橙黃系 */
/* ── 側邊欄 ── */
--sidebar: oklch(0.985 0 0); /* 近白 */
--sidebar-foreground: oklch(0.145 0 0); /* 近黑 */
--sidebar-primary: oklch(0.205 0 0); /* 深黑 */
--sidebar-primary-foreground: oklch(0.985 0 0); /* 近白 */
--sidebar-accent: oklch(0.97 0 0); /* 極淺灰 */
--sidebar-accent-foreground: oklch(0.205 0 0); /* 深黑 */
--sidebar-border: oklch(0.922 0 0); /* 淺灰 */
--sidebar-ring: oklch(0.708 0 0); /* 中灰 */
}2.2.3 暗色模式 (Dark Mode) 色票
css
.dark {
/* ── 基礎色 ── */
--background: oklch(0.145 0 0); /* 深灰 */
--foreground: oklch(0.985 0 0); /* 近白 */
/* ── 卡片 ── */
--card: oklch(0.205 0 0); /* 較深灰 */
--card-foreground: oklch(0.985 0 0); /* 近白 */
/* ── 彈窗 ── */
--popover: oklch(0.205 0 0); /* 較深灰 */
--popover-foreground: oklch(0.985 0 0); /* 近白 */
/* ── 品牌色 (反轉) ── */
--primary: oklch(0.922 0 0); /* 淺灰 */
--primary-foreground: oklch(0.205 0 0); /* 深灰 */
/* ── 次要色 ── */
--secondary: oklch(0.269 0 0); /* 暗灰 */
--secondary-foreground: oklch(0.985 0 0); /* 近白 */
/* ── 靜音色 ── */
--muted: oklch(0.269 0 0); /* 暗灰 */
--muted-foreground: oklch(0.708 0 0); /* 中灰 */
/* ── 強調色 ── */
--accent: oklch(0.269 0 0); /* 暗灰 */
--accent-foreground: oklch(0.985 0 0); /* 近白 */
/* ── 破壞性 ── */
--destructive: oklch(0.704 0.191 22.216); /* 亮紅色 */
/* ── 邊框/輸入/焦點環 ── */
--border: oklch(1 0 0 / 10%); /* 白色 10% */
--input: oklch(1 0 0 / 15%); /* 白色 15% */
--ring: oklch(0.556 0 0); /* 暗灰 */
/* ── 圖表色 (5 色) ── */
--chart-1: oklch(0.488 0.243 264.376); /* 紫藍色 */
--chart-2: oklch(0.696 0.17 162.48); /* 綠色 */
--chart-3: oklch(0.769 0.188 70.08); /* 橙黃 */
--chart-4: oklch(0.627 0.265 303.9); /* 紫色 */
--chart-5: oklch(0.645 0.246 16.439); /* 紅色 */
/* ── 側邊欄 ── */
--sidebar: oklch(0.205 0 0); /* 深灰 */
--sidebar-foreground: oklch(0.985 0 0); /* 近白 */
--sidebar-primary: oklch(0.488 0.243 264.376); /* 紫藍 */
--sidebar-primary-foreground: oklch(0.985 0 0); /* 近白 */
--sidebar-accent: oklch(0.269 0 0); /* 暗灰 */
--sidebar-accent-foreground: oklch(0.985 0 0); /* 近白 */
--sidebar-border: oklch(1 0 0 / 10%); /* 白色 10% */
--sidebar-ring: oklch(0.556 0 0); /* 暗灰 */
}2.2.4 後台 CSS 變數完整映射表
以下表格列出所有 30+ CSS 變數及其用途：
| CSS 變數 | Tailwind Token | 用途 | Light 值 | Dark 值 |
|---|---|---|---|---|
--background | bg-background | 頁面底色 | 純白 | 深灰 |
--foreground | text-foreground | 主文字色 | 近黑 | 近白 |
--card | bg-card | 卡片背景 | 純白 | 較深灰 |
--card-foreground | text-card-foreground | 卡片文字 | 近黑 | 近白 |
--popover | bg-popover | 彈窗背景 | 純白 | 較深灰 |
--popover-foreground | text-popover-foreground | 彈窗文字 | 近黑 | 近白 |
--primary | bg-primary | 品牌主色 | 深黑 | 淺灰 |
--primary-foreground | text-primary-foreground | 品牌主色文字 | 近白 | 深灰 |
--secondary | bg-secondary | 次要色 | 極淺灰 | 暗灰 |
--secondary-foreground | text-secondary-foreground | 次要色文字 | 深黑 | 近白 |
--muted | bg-muted | 靜音背景 | 極淺灰 | 暗灰 |
--muted-foreground | text-muted-foreground | 靜音文字 | 中灰 | 中灰 |
--accent | bg-accent | 強調背景 | 極淺灰 | 暗灰 |
--accent-foreground | text-accent-foreground | 強調文字 | 深黑 | 近白 |
--destructive | bg-destructive | 破壞性/危險 | 紅 | 亮紅 |
--border | border-border | 邊框色 | 淺灰 | 白 10% |
--input | border-input | 輸入框邊框 | 淺灰 | 白 15% |
--ring | ring-ring | 焦點環 | 中灰 | 暗灰 |
--chart-1 ~ --chart-5 | text-chart-1 | 圖表色 | 暖色調 | 冷色調 |
--sidebar | bg-sidebar | 側邊欄背景 | 近白 | 深灰 |
--sidebar-foreground | text-sidebar-foreground | 側邊欄文字 | 近黑 | 近白 |
--sidebar-primary | -- | 側邊欄品牌色 | 深黑 | 紫藍 |
--sidebar-accent | -- | 側邊欄強調 | 極淺灰 | 暗灰 |
--sidebar-border | -- | 側邊欄邊框 | 淺灰 | 白 10% |
2.2.5 站點主題注入機制
後台每個站點可以有獨立的主題色配置，存儲在資料庫 site-theme 表中。 SiteThemeInjector 元件負責將站點主題轉換為 CSS 變數並注入。
注入流程：
站點配置載入
→ loadSiteConfig(siteId) 讀取 sites/{id}/theme.ts
→ SiteThemeInjector 元件掛載
→ themeColorsToCSS(config.theme.light) 轉換為 CSS 變數物件
→ <div style={cssVars}> 包裹子元件
→ shadcn/ui 元件自動讀取 CSS 變數themeColorsToCSS 映射（共 28 個變數）：
typescript
function themeColorsToCSS(colors: ThemeColors): Record<string, string> {
return {
"--background": colors.background,
"--foreground": colors.foreground,
"--card": colors.card,
"--card-foreground": colors.cardForeground,
"--popover": colors.popover,
"--popover-foreground": colors.popoverForeground,
"--primary": colors.primary,
"--primary-foreground": colors.primaryForeground,
"--secondary": colors.secondary,
"--secondary-foreground": colors.secondaryForeground,
"--muted": colors.muted,
"--muted-foreground": colors.mutedForeground,
"--accent": colors.accent,
"--accent-foreground": colors.accentForeground,
"--destructive": colors.destructive,
"--border": colors.border,
"--input": colors.input,
"--ring": colors.ring,
"--chart-1": colors.chart1,
"--chart-2": colors.chart2,
"--chart-3": colors.chart3,
"--chart-4": colors.chart4,
"--chart-5": colors.chart5,
"--sidebar": colors.sidebar,
"--sidebar-foreground": colors.sidebarForeground,
"--sidebar-primary": colors.sidebarPrimary,
"--sidebar-primary-foreground": colors.sidebarPrimaryForeground,
"--sidebar-accent": colors.sidebarAccent,
"--sidebar-accent-foreground": colors.sidebarAccentForeground,
"--sidebar-border": colors.sidebarBorder,
"--sidebar-ring": colors.sidebarRing,
};
}2.3 語意色彩
語意色彩用於表達系統狀態，在前台與後台中保持一致的語意：
2.3.1 四種語意色
語意色彩一覽：
████ Success (成功) — #22c55e / emerald
████ Warning (警告) — #eab308 / amber
████ Error (錯誤) — #ef4444 / rose
████ Info (資訊) — #3b82f6 / sky| 語意 | 前台 Tailwind | 後台 Tailwind | 使用場景 |
|---|---|---|---|
| Success | text-emerald-500, bg-emerald-500 | text-emerald-700, dark:text-emerald-400 | 操作成功、啟用狀態 |
| Warning | text-amber-500, bg-amber-500 | text-amber-700, dark:text-amber-400 | 待處理、警告提示 |
| Error | text-rose-500, bg-rose-500 | text-rose-700, dark:text-rose-400 | 操作失敗、停用狀態 |
| Info | text-sky-500, bg-sky-500 | text-sky-700, dark:text-sky-400 | 一般提示、新項目 |
2.3.2 Toast 通知色彩
前台使用 useToast() (Nuxt UI 內建)，後台使用 useNotify() (Sonner 封裝)：
| 通知類型 | 前台 | 後台 |
|---|---|---|
| 成功 | 綠色圖標 + 暗色背景 | notify.success() — Sonner richColors 綠色 |
| 錯誤 | 紅色圖標 + 暗色背景 | notify.error() — Sonner richColors 紅色 |
| 警告 | 黃色圖標 + 暗色背景 | notify.warning() — Sonner richColors 黃色 |
| 資訊 | 藍色圖標 + 暗色背景 | notify.info() — Sonner richColors 藍色 |
2.4 StatusBadge 色彩映射
後台的 StatusBadge 元件使用 5 種色彩來表達不同狀態：
2.4.1 五色系統
StatusBadge 色彩系統：
┌──────────┬──────────┬───────────────────────────────┐
│ 色彩 │ Tailwind │ 語意映射 │
├──────────┼──────────┼───────────────────────────────┤
│ emerald │ 綠色系 │ active, approved, completed │
│ amber │ 琥珀系 │ pending, warning, processing │
│ rose │ 玫瑰系 │ rejected, error, blocked │
│ sky │ 天藍系 │ info, new, approved │
│ violet │ 紫羅蘭系 │ special, VIP │
└──────────┴──────────┴───────────────────────────────┘2.4.2 CSS Class 映射
每種色彩在明暗模式下有獨立的樣式：
| 色彩 | Light Mode | Dark Mode |
|---|---|---|
| amber | border-amber-200 bg-amber-50 text-amber-700 | dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-400 |
| emerald | border-emerald-200 bg-emerald-50 text-emerald-700 | dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400 |
| rose | border-rose-200 bg-rose-50 text-rose-700 | dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-400 |
| sky | border-sky-200 bg-sky-50 text-sky-700 | dark:border-sky-800 dark:bg-sky-950/40 dark:text-sky-400 |
| violet | border-violet-200 bg-violet-50 text-violet-700 | dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-400 |
2.4.3 預設狀態色彩映射
typescript
const DEFAULT_STATUS_COLORS = {
// 數字狀態
0: "amber", // 待處理
1: "emerald", // 啟用/通過
2: "rose", // 拒絕/停用
// 文字狀態
"pending": "amber", // 待處理
"approved": "sky", // 已核准
"rejected": "rose", // 已拒絕
"completed": "emerald", // 已完成
"active": "emerald", // 啟用中
"inactive": "rose", // 已停用
};2.4.4 業務場景映射表
| 業務場景 | 狀態值 | 色彩 | 顯示文字 |
|---|---|---|---|
| 管理員狀態 | 1 (啟用) | emerald | 啟用 |
| 管理員狀態 | 0 (停用) | rose | 停用 |
| 存款訂單 | pending | amber | 待審核 |
| 存款訂單 | approved | emerald | 已通過 |
| 存款訂單 | rejected | rose | 已拒絕 |
| 提領訂單 | pending | amber | 待處理 |
| 提領訂單 | approved | sky | 已核准 |
| 提領訂單 | completed | emerald | 已完成 |
| 提領訂單 | rejected | rose | 已拒絕 |
| 銀行卡 | pending | amber | 待審核 |
| 銀行卡 | approved | emerald | 已通過 |
| 銀行卡 | rejected | rose | 已拒絕 |
| 玩家在線狀態 | online | emerald | 在線 |
| 玩家在線狀態 | offline | rose | 離線 |
| VIP 等級 | special | violet | 特殊 |
| 代理結算 | pending | amber | 待結算 |
| 代理結算 | approved | emerald | 已結算 |
| 代理結算 | rejected | rose | 已拒絕 |
第 3 章：字體規範
3.1 前台字體
3.1.1 字體堆疊
前台使用自定義字體檔案，位於 c9-ec/app/assets/fonts/，搭配系統字體作為備援：
字體優先順序：
1. 自定義字體 (assets/fonts/)
2. -apple-system (macOS/iOS)
3. BlinkMacSystemFont (Chrome macOS)
4. "Segoe UI" (Windows)
5. Roboto (Android)
6. "Helvetica Neue" (macOS 舊版)
7. sans-serif (最終備援)3.1.2 字體大小規範
使用 Tailwind CSS 預設字體大小系統：
| Tailwind Class | 大小 | 行高 | 前台用途 |
|---|---|---|---|
text-xs | 12px / 0.75rem | 16px / 1rem | 小標籤、時間戳、Badge 文字 |
text-sm | 14px / 0.875rem | 20px / 1.25rem | 次要文字、表格內容、按鈕 |
text-base | 16px / 1rem | 24px / 1.5rem | 正文、選單項目 |
text-lg | 18px / 1.125rem | 28px / 1.75rem | 小標題、卡片標題 |
text-xl | 20px / 1.25rem | 28px / 1.75rem | 頁面副標題 |
text-2xl | 24px / 1.5rem | 32px / 2rem | 頁面標題、餘額顯示 |
text-3xl | 30px / 1.875rem | 36px / 2.25rem | 大標題 |
text-4xl | 36px / 2.25rem | 40px / 2.5rem | 超大標題、VIP 等級 |
3.1.3 自定義字體大小
前台部分元件使用精確像素值：
| 元素 | 手機 | 桌面 | 使用位置 |
|---|---|---|---|
| TitleBar 圖標 | 18px | 24px | text-[18px] sm:text-[24px] |
| TitleBar 文字 | 15px | 20px | text-[15px] sm:text-[20px] |
| BottomBar 圖標 | 20px | -- | size-5 (行動版專用) |
| BottomBar 中央圖標 | 26px | -- | size-7 (中央凸出按鈕) |
| BottomBar 標籤 | 11px | -- | text-[11px] |
3.2 後台字體
3.2.1 字體堆疊
後台使用 Geist 字體家族（Next.js 內建），搭配系統字體作為備援：
css
:root {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}Sans-serif 字體優先順序：
1. Geist Sans (Next.js 內建)
2. Inter (Web font)
3. -apple-system
4. BlinkMacSystemFont
5. "Segoe UI"
6. sans-serif
Monospace 字體優先順序：
1. Geist Mono (Next.js 內建)
2. "Fira Code"
3. monospace3.2.2 字體大小規範
| Tailwind Class | 大小 | 後台用途 |
|---|---|---|
text-[10px] | 10px | Badge 內文字（如 SiteTabs 預設標記） |
text-xs | 12px | FilterBar 標籤、次要提示 |
text-sm | 14px | 表格內容、按鈕文字、大多數 UI 文字 |
text-base | 16px | 正文、表單標籤 |
text-lg | 18px | 卡片標題、區塊標題 |
text-xl | 20px | 頁面副標題 |
text-2xl | 24px | 頁面主標題 |
text-3xl | 30px | 儀表板大數字 |
3.3 字重規範
| 字重 | Tailwind Class | 用途 |
|---|---|---|
| 400 (Regular) | font-normal | 正文、說明文字 |
| 500 (Medium) | font-medium | 表格表頭、按鈕文字、分頁數字 |
| 600 (Semibold) | font-semibold | 小標題、導航項目 |
| 700 (Bold) | font-bold | 頁面標題、重要數字 |
| 900 (Black) | font-black | 前台 TitleBar 文字（極粗） |
3.4 行高規範
| 場景 | Tailwind Class | 行高 | 說明 |
|---|---|---|---|
| 緊湊文字 | leading-4 | 16px / 1rem | Badge、小標籤 |
| 預設行高 | leading-normal | 1.5 (相對) | 正文、大多數文字 |
| 寬鬆文字 | leading-relaxed | 1.625 (相對) | 長段落、說明文字 |
| 泰文適配 | leading-7 | 28px / 1.75rem | 泰文需要較高行高 |
第 4 章：響應式斷點
4.1 Tailwind CSS v4 斷點定義
| 斷點 | 最小寬度 | 說明 | 裝置類型 |
|---|---|---|---|
| (base) | 0px | 預設 — 最小螢幕 | 手機直向 |
sm | 640px | 小螢幕 | 手機橫向 |
md | 768px | 中螢幕 | 平板直向 |
lg | 1024px | 大螢幕 | 平板橫向/小桌面 |
xl | 1280px | 超大螢幕 | 桌面 |
2xl | 1536px | 巨大螢幕 | 大桌面 |
斷點視覺化：
0 640 768 1024 1280 1536
|─ base ──|── sm ───|── md ───|── lg ───|── xl ───|── 2xl ──→
| 手機直向 | 手機橫向 | 平板 | 小桌面 | 桌面 | 大桌面
| | | | | |4.2 前台響應式策略（行動優先）
前台採用 Mobile-First 策略：基礎樣式 = 手機版，透過斷點前綴逐步擴展。
前台響應式擴展：
base (手機) sm (640px+) lg (1024px+)
┌──────────┐ ┌──────────┐ ┌────┬──────────┐
│ TitleBar │ │ TitleBar │ │ │ TitleBar │
├──────────┤ ├──────────┤ │ S ├──────────┤
│ │ │ │ │ i │ │
│ Content │ │ Content │ │ d │ Content │
│ │ │ │ │ e │ │
│ │ │ │ │ b │ │
├──────────┤ ├──────────┤ │ a │ │
│ Footer │ │ Footer │ │ r ├──────────┤
├──────────┤ ├──────────┤ │ │ Footer │
│ BottomBar│ │ BottomBar│ └────┴──────────┘
└──────────┘ └──────────┘ BottomBar 隱藏
Sidebar 隱藏 Sidebar 可收合 Sidebar 固定顯示各斷點行為
手機 (< 640px, base)
| 元素 | 行為 |
|---|---|
| Sidebar | 隱藏，透過漢堡選單觸發 overlay 滑出 |
| BottomBar | 固定在螢幕底部，顯示 5 個 Tab |
| TitleBar | 簡化版（Logo + 餘額 + 通知） |
| Footer | 完整顯示 |
| 內容區 | 單欄佈局，100% 寬度 |
| 遊戲卡片 | 2 欄 grid |
| 表單 | 全寬，垂直排列 |
平板 (640px - 1023px, sm/md)
| 元素 | 行為 |
|---|---|
| Sidebar | 可收合（collapsed），僅顯示圖標 |
| BottomBar | 仍然顯示 |
| TitleBar | 完整版（Logo + 餘額 + 存款按鈕 + 用戶選單 + 通知） |
| 內容區 | 適應性寬度 |
| 遊戲卡片 | 3~4 欄 grid |
| 表單 | 部分欄位並排 |
桌面 (1024px+, lg/xl/2xl)
| 元素 | 行為 |
|---|---|
| Sidebar | 固定顯示在左側 |
| BottomBar | 隱藏（lg:hidden） |
| TitleBar | 完整版 |
| 內容區 | 最大寬度限制，置中 |
| 遊戲卡片 | 4~6 欄 grid |
| 表單 | 多欄佈局 |
4.3 後台響應式策略（桌面優先）
後台主要在桌面使用，但也支援平板和手機的基本操作：
後台響應式收縮：
xl+ (桌面) md (平板) base (手機)
┌────────┬─────────────┐ ┌────┬─────────────┐ ┌──────────────┐
│ │ Header │ │ │ Header │ │ Header │
│ Side │─────────────│ │ S │─────────────│ │──────────────│
│ bar │ SiteTabs │ │ b │ SiteTabs │ │ SiteTabs │
│ │─────────────│ │ │─────────────│ │──────────────│
│ 14群組 │ FilterBar │ │ │ FilterBar │ │ FilterBar │
│ 50+項目 │─────────────│ │ │─────────────│ │──────────────│
│ │ Table │ │ │ Table │ │ Table (橫捲) │
│ │ + Pagination│ │ │ + Pagination│ │ + Pagination │
└────────┴─────────────┘ └────┴─────────────┘ └──────────────┘
Sidebar 完整展開 Sidebar 收合 (icon) Sidebar 隱藏後台關鍵響應式規則
| 元素 | 桌面 (1024px+) | 平板 (768-1023px) | 手機 (<768px) |
|---|---|---|---|
| Sidebar | 完整展開 (寬度 ~256px) | 收合為圖標模式 | 隱藏 (overlay) |
| Header | 完整（SiteSelector + Locale + Profile） | 完整 | 簡化 |
| SiteTabs | 水平排列 | 自動換行 | 自動換行 |
| FilterBar | 水平排列 | 自動換行 | 垂直排列 |
| SimpleTable | 完整顯示 | 完整顯示 | 水平捲動 |
| 表單 | 2~3 欄 grid | 2 欄 grid | 1 欄 |
4.4 Safe Area 處理
iOS Safe Area（前台）
前台 BottomBar 需要處理 iPhone 的 Home Indicator 安全區域：
css
/* BottomBar 底部 padding */
padding-bottom: max(0.375rem, env(safe-area-inset-bottom));iPhone 安全區域示意：
┌───────────────────────┐
│ Status Bar │ ← safe-area-inset-top
├───────────────────────┤
│ │
│ Content Area │
│ │
├───────────────────────┤
│ BottomBar │
│ ┌─────────────────┐ │
│ │ Home Indicator │ │ ← safe-area-inset-bottom
│ └─────────────────┘ │
└───────────────────────┘安全區域 CSS 變數
| 變數 | 用途 | 使用位置 |
|---|---|---|
env(safe-area-inset-top) | 頂部安全區（瀏海） | TitleBar |
env(safe-area-inset-bottom) | 底部安全區（Home Indicator） | BottomBar |
env(safe-area-inset-left) | 左側安全區（橫向） | -- |
env(safe-area-inset-right) | 右側安全區（橫向） | -- |
4.5 觸控區域規範
最小觸控區域
根據 Apple Human Interface Guidelines 和 Material Design 規範：
| 元素類型 | 最小尺寸 | 前台實作 |
|---|---|---|
| 按鈕 | 44 x 44 px | h-11 (2.75rem = 44px) |
| 圖標按鈕 | 44 x 44 px | size-11 (2.75rem) |
| 列表項目 | 高度 >= 48px | min-h-12 |
| Tab 項目 | 高度 >= 44px | BottomBar item |
| 輸入欄位 | 高度 >= 44px | Input component |
BottomBar 觸控區域
BottomBar 觸控區域示意：
┌───────────────────────────────────────┐
│ │
│ [Tab1] [Tab2] [Center] [Tab3] [Tab4]
│ 44px 44px 56px 44px 44px
│ ↑
│ 中央凸出按鈕
│ (44px 按鈕 + 環形邊框)
│ │
└───────────────────────────────────────┘第 5 章：前台元件庫
前台 (c9-ec) 共有 77 個 Vue 元件，分組在
app/components/目錄下。 所有元件使用<script setup lang="ts">語法，Nuxt 自動匯入無需手動 import。
5.1 通用元件 Common/ (2 個)
位置：c9-ec/app/components/Common/
ConfirmDialog.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/Common/ConfirmDialog.vue |
| 用途 | 通用確認對話框，用於刪除、提交等需要二次確認的操作 |
| 觸發方式 | 透過 composable 或事件驅動開啟 |
UI 結構：
┌─────────────────────────────┐
│ [標題] │
│ │
│ 確認訊息描述文字... │
│ │
│ [取消] [確認] │
└─────────────────────────────┘設計規格：
- 背景遮罩：半透明黑色 overlay
- 對話框：暗色背景 + ring 邊框，圓角
rounded-xl - 取消按鈕：ghost 樣式
- 確認按鈕：主題色填充（破壞性操作使用紅色）
- 動畫：fade-in + scale-in
SplashScreen.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/Common/SplashScreen.vue |
| 用途 | 應用程式啟動時的載入畫面，在 App 初始化完成後淡出 |
| 觸發方式 | 監聽 store.getIsReady，值為 true 時執行淡出動畫 |
UI 結構：
┌─────────────────────────────────────┐
│ │
│ │
│ [Loading Animation] │
│ Site Logo │
│ │
│ │
└─────────────────────────────────────┘
全螢幕遮蓋，z-index 最高設計規格：
- 全螢幕覆蓋：
fixed inset-0 z-50 - 背景色：與頁面底色一致 (
#0a0a0a~#0a1120) - 載入動畫：CSS spinner 或 Logo 動畫
- 退出動畫：opacity 從 1 → 0，持續 500ms，ease-out
- 退出後：元素從 DOM 移除
5.2 佈局元件 A1/Layout/ (5 個)
位置：c9-ec/app/components/A1/Layout/
TitleBar.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Layout/TitleBar.vue |
| 用途 | 頂部導航列，顯示 Logo、餘額、功能按鈕 |
| 響應式 | 手機版簡化，桌面版完整 |
UI 結構：
手機版 (< sm):
┌──────────────────────────────────────┐
│ [Icon] [Title] [Balance] [$] │
└──────────────────────────────────────┘
桌面版 (>= sm):
┌──────────────────────────────────────────────────┐
│ [Icon] [Title] [Balance] [Deposit] [User] [Bell] │
└──────────────────────────────────────────────────┘設計規格：
- 高度：手機 44px，桌面 56px
- 背景：暗色 (
bg-slate-900/95) +backdrop-blur-xl - 左側圖標：18px (手機) / 24px (桌面)
- 左側文字：15px (手機) / 20px (桌面)，
font-black - 右側按鈕群：使用
gap-2間距 - 存款按鈕：主題色填充，圓角
- 通知鈴鐺：含未讀 Badge (紅色圓點)
Props：
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
| leftIcon | string | material-symbols:settings-backup-restore | 左側圖標名稱 |
| leftText | string | '' | 左側標題文字 |
| rightIcon | string | material-symbols:arrow-circle-left | 右側圖標 |
| rightText | string | '' | 右側文字 |
| ui | Record | { right: '' } | 自定義樣式類 |
Sidebar.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Layout/Sidebar.vue |
| 用途 | 側邊導航欄，包含所有頁面的導航連結 |
| 響應式 | 手機 overlay、平板收合、桌面固定 |
UI 結構：
桌面 (lg+):
┌─────────────┐
│ [Logo] │
├─────────────┤
│ 首頁 │ ← active 高亮
│ 遊戲 │
│ VIP │
│ 代理 │
│ 活動 │
│ ... │
├─────────────┤
│ 設定 │
│ 登出 │
└─────────────┘
手機 (< lg):
[Overlay 滑出]
┌─────────────┐────────────────┐
│ Sidebar │ 暗色遮罩 │
│ (完整導航) │ 點擊關閉 │
└─────────────┘────────────────┘設計規格：
- 寬度：桌面固定 256px，收合 64px
- 背景：
bg-[#0a1120]或bg-slate-900 - 活動項目：主題色背景 + 白色文字
- 非活動項目：
text-white/60，hover 變為text-white/80 - 捲軸：隱藏但可捲動 (
scrollbar-hide) - 手機版遮罩：
bg-black/50，點擊關閉 - 手機版進場：從左側滑入 (300ms ease)
- 鍵盤快捷鍵：支援
defineShortcuts()快速導航
Footer.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Layout/Footer.vue |
| 用途 | 頁尾區塊，顯示動態連結、版權資訊 |
| 資料來源 | 後端 site-config.footerConfig 動態載入 |
UI 結構：
┌────────────────────────────────────────────┐
│ │
│ [Section 1] [Section 2] [Section 3] │
│ Link 1 Link 1 Link 1 │
│ Link 2 Link 2 Link 2 │
│ Link 3 Link 3 Link 3 │
│ │
│ ──────────────────────────────────────── │
│ (c) 2024 Site Name. All rights reserved. │
│ │
└────────────────────────────────────────────┘設計規格：
- 背景：深色 (
bg-[#0a0a0a]) - 區塊標題：
text-white font-semibold - 連結文字：
text-white/60，hover 變為text-white/80 - 版權文字：
text-white/40，text-xs - 分隔線：
border-white/10 - 響應式：手機 1 欄，平板 2 欄，桌面 3~4 欄
BottomBar.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Layout/BottomBar.vue |
| 用途 | 行動版底部 Tab 導航（僅 < lg 顯示） |
| 資料來源 | 後端 site-config.bottomBarConfig 動態載入 |
UI 結構：
┌─────┐
│ 中央 │ ← 凸出按鈕（漂浮在導航列上方）
──────────────────┤ ├──────────────────
│ [Tab1] [Tab2] └─────┘ [Tab3] [Tab4] │
│ 入金 遊戲 Casino VIP 我的 │
└──────────────────────────────────────────┘設計規格：
- 可見性：
lg:hidden（僅手機和平板顯示） - 位置：
fixed bottom-0 inset-x-0 z-30 - 背景：
bg-slate-900/95 backdrop-blur-xl - 頂部邊框：
border-t border-white/8 - Tab 項目：垂直排列（圖標 + 文字），動態 grid 欄數
- 中央按鈕：
- 凸出設計：
absolute -top-5漂浮 - 漸層背景：
bg-linear-to-br from-amber-400 to-amber-600 - 環形邊框：
ring-[3px] ring-slate-900 - 發光效果：
shadow-[0_0_16px_rgba(245,158,11,0.4)] - 脈衝動畫：
animate-ping-slow(外層)
- 凸出設計：
- 安全區域：
padding-bottom: max(0.375rem, env(safe-area-inset-bottom)) - 圖標支援：Lucide icon 名稱 / R2 圖片 URL / emoji 名稱
LiveChat.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Layout/LiveChat.vue |
| 用途 | LiveChat 客服小工具嵌入 |
| 條件 | 站點配置啟用 LiveChat 時才載入 |
設計規格：
- 嵌入方式：
<script>標籤注入 - 位置：右下角浮動（LiveChat 預設位置）
- 與 BottomBar 共存：需設定適當的 bottom offset
- 開關控制：後端
site-config的liveChatEnabled欄位
5.3 首頁元件 A1/Home/ (4 個)
位置：c9-ec/app/components/A1/Home/
index.vue (Home)
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Home/index.vue |
| 用途 | 首頁組合元件，排列 Banner、LiveSports、Promo 等區塊 |
UI 結構：
┌────────────────────────────────────┐
│ [Banner Carousel] │ ← 自動輪播
├────────────────────────────────────┤
│ [LiveSports] │ ← 即時賽事
├────────────────────────────────────┤
│ [Promo] │ ← 推薦活動
├────────────────────────────────────┤
│ [Learn More / FAQ] │ ← 了解更多
└────────────────────────────────────┘Banner.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Home/Banner.vue |
| 用途 | 首頁輪播 Banner，展示活動和促銷資訊 |
設計規格：
- 自動輪播：間隔 5 秒
- 手勢：支援左右滑動切換
- 指示器：底部圓點，活動頁為主題色
- 圖片比例：手機 16:9，桌面 21:9
- 圖片格式：WebP（
@nuxt/image處理） - 過渡：slide transition (300ms ease)
- 圓角：
rounded-xl
LiveSports.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Home/LiveSports.vue |
| 用途 | 顯示即時體育賽事資訊 |
| 資料來源 | API-Football 賽事數據（每 30 分鐘更新） |
設計規格：
- 卡片佈局：水平捲動列表
- 每張卡片：兩隊名稱 + 即時比分 + 比賽狀態
- 即時標記：紅色脈衝圓點 (LIVE)
- 背景：Glass 卡片 (
bg-white/5 ring-1 ring-white/10)
Promo.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Home/Promo.vue |
| 用途 | 首頁推薦活動水平捲動列表 |
設計規格：
- 佈局：水平捲動 (
overflow-x-auto scrollbar-hide) - 卡片：
PromoLinkCard元件 - 卡片間距：
gap-3 - 卡片寬度：手機 280px，桌面 320px
5.4 遊戲元件 A1/Game/ (10 個)
位置：c9-ec/app/components/A1/Game/
index.vue (Game Module)
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/index.vue |
| 用途 | 遊戲模組包裝元件 |
Lobby.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/Lobby.vue |
| 用途 | 遊戲大廳，包含分類 Tab、供應商 Grid、搜尋 |
UI 結構：
┌──────────────────────────────────────────────┐
│ [搜尋欄] │
├──────────────────────────────────────────────┤
│ [最近遊玩] (登入且有紀錄時顯示) │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ G1 │ │ G2 │ │ G3 │ │ G4 │ ← 水平捲動 │
│ └────┘ └────┘ └────┘ └────┘ │
├──────────────────────────────────────────────┤
│ [分類 Tab] │
│ 全部 | 體育 | 老虎機 | 真人 | 彩票 | 棋牌 | ...│
├──────────────────────────────────────────────┤
│ [遊戲供應商 Grid] │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ P1 │ │ P2 │ │ P3 │ │ P4 │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ P5 │ │ P6 │ │ P7 │ │ P8 │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
│ [載入更多] │
└──────────────────────────────────────────────┘設計規格：
- 分類 Tab：水平捲動，活動項目主題色底線
- Grid 佈局：手機 2 欄，平板 3 欄，桌面 4~6 欄
- 供應商卡片：
Provider.vue元件，顯示 Logo + 名稱 + 遊戲數 - 代表遊戲模式：子遊戲類型每個供應商只顯示一款代表遊戲
- 最近遊玩：
ListBar.vue水平捲動，最多 10 款 - 載入更多：
LoadMore.vue按鈕
Play.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/Play.vue |
| 用途 | 遊戲啟動 iframe 容器 |
設計規格：
- 全螢幕 iframe：
width: 100%; height: 100vh - 未登入保護：自動導回首頁
- 離開確認：彈出 Modal 確認
- 載入狀態：居中 spinner
Search.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/Search.vue |
| 用途 | 遊戲搜尋列，即時過濾 |
設計規格：
- 輸入框：暗色背景，搜尋圖標前綴
- 即時篩選：輸入時 debounce 搜尋
- 結果展示：覆蓋在遊戲列表上方
Provider.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/Provider.vue |
| 用途 | 遊戲供應商卡片元件 |
設計規格：
- 卡片樣式：Glass 卡片 (
bg-white/5 ring-1 ring-white/10) - 內容：Logo 圖片 + 供應商名稱 + 遊戲數量
- Hover 效果：發光效果 + 輕微上移
- 圖片：WebP 格式，來自 R2 存儲
RankList.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/RankList.vue |
| 用途 | 排行榜展示元件 |
設計規格：
- 前三名：金/銀/銅色高亮
- 排名數字：圓形背景
- 玩家名稱：遮罩中間字元（隱私保護）
- 金額：右對齊，
$前綴
ListBar.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/ListBar.vue |
| 用途 | 水平捲動列表容器 |
設計規格：
- 捲動方向：水平 (
overflow-x-auto) - 捲軸：隱藏 (
scrollbar-hide) - 子元素間距：
gap-3 - 邊距漸層：左右兩端漸層遮罩（可選）
LoadMore.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/LoadMore.vue |
| 用途 | 載入更多按鈕/分頁 |
設計規格：
- 樣式：寬按鈕，主題色邊框
- 載入中：spinner 圖示取代文字
- 無更多資料：文字提示 + 隱藏按鈕
Empty.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Game/Empty.vue |
| 用途 | 空狀態提示（無搜尋結果、無遊戲等） |
設計規格：
- 佈局：垂直居中
- 圖示：大尺寸空狀態插圖
- 文字：
text-white/60 - 可選操作按鈕
5.5 用戶元件 A1/User/ (40 個)
位置：c9-ec/app/components/A1/User/
5.5.1 個人設定 Setting.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/User/Setting.vue |
| 用途 | 個人資料設定頁（頭像、姓名、信箱、手機、密碼、2FA、語言） |
UI 結構：
┌──────────────────────────────────┐
│ [頭像] │ ← 可點擊更換
│ 用戶名稱 │
├──────────────────────────────────┤
│ Email user@example.com │ ← 可編輯
│ 手機號碼 +886-9xx-xxx-xxx │ ← 可編輯
│ 密碼 ******** │ ← 點擊修改
│ Google 2FA 已啟用 / 未啟用 │ ← 開關
│ 語言 繁體中文 │ ← 選擇
├──────────────────────────────────┤
│ Google 帳號 已綁定 / 未綁定 │
│ Telegram 已綁定 / 未綁定 │
├──────────────────────────────────┤
│ [登出] │
└──────────────────────────────────┘5.5.2 存款元件 Deposit/ (4 個)
index.vue (Deposit Container)
UI 結構：
┌──────────────────────────────────┐
│ [法幣] [信用卡] [加密貨幣] │ ← Tab 切換
├──────────────────────────────────┤
│ │
│ (根據 Tab 顯示對應表單) │
│ │
└──────────────────────────────────┘Fiat.vue (法幣存款)
UI 結構：
┌──────────────────────────────────┐
│ 選擇金流通道 │
│ ┌────────┐ ┌────────┐ │
│ │ 萬通ATM │ │ 銀行轉帳│ │
│ └────────┘ └────────┘ │
├──────────────────────────────────┤
│ 金額 (TWD) ┌──────────────┐ │
│ │ 1,000 │ │
│ └──────────────┘ │
│ 快速選擇： │
│ [1000] [3000] [5000] [10000] │
├──────────────────────────────────┤
│ 匯率：1 USD = 32.5 TWD │
│ 預計入帳：$30.77 USD │
├──────────────────────────────────┤
│ [確認存款] │ ← 主題色按鈕
└──────────────────────────────────┘Credit.vue (信用卡存款)
設計規格：
- 信用卡號輸入：4 位分隔 (
XXXX XXXX XXXX XXXX) - 有效期限：MM/YY 格式
- CVV：3 位數字，隱藏輸入
- 金額選擇：同法幣存款
Crypto.vue (加密貨幣存款)
UI 結構：
┌──────────────────────────────────┐
│ 選擇網路 │
│ [TRC20] [ERC20] [BEP20] │
├──────────────────────────────────┤
│ USDT 充值地址 │
│ ┌────────────────────────────┐ │
│ │ TX9a8f...3b2c1d │ │
│ │ [複製] │ │
│ └────────────────────────────┘ │
│ │
│ ┌──────────┐ │
│ │ QR Code │ │
│ │ │ │
│ └──────────┘ │
│ │
│ 最低充值：10 USDT │
│ 到帳時間：網路確認後約 5~30 分鐘 │
└──────────────────────────────────┘5.5.3 提領元件 Withdrawal/ (1 個)
index.vue (Withdrawal)
UI 結構：
┌──────────────────────────────────┐
│ 可用餘額：$1,234.56 USD │
├──────────────────────────────────┤
│ 選擇提領錢包 │
│ ┌────────────────────────────┐ │
│ │ [銀行卡] 中國信託 *4567 │ │
│ └────────────────────────────┘ │
├──────────────────────────────────┤
│ 提領金額 │
│ ┌──────────────┐ │
│ │ 100.00 │ USD │
│ └──────────────┘ │
├──────────────────────────────────┤
│ 手續費：$0.00 │
│ 實際到帳：$100.00 │
├──────────────────────────────────┤
│ [確認提領] │
└──────────────────────────────────┘5.5.4 錢包元件 Wallet/ (4 個)
index.vue (Wallet Container)
Tab 切換：銀行卡 / 信用卡 / 加密錢包
Fiat.vue (銀行卡列表)
UI 結構：
┌──────────────────────────────────┐
│ 我的銀行卡 [+新增] │
├──────────────────────────────────┤
│ ┌────────────────────────────┐ │
│ │ 中國信託商業銀行 │ │
│ │ **** **** **** 4567 │ │
│ │ 王小明 │ │
│ │ [approved] [刪除] │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────────────────────────┐ │
│ │ 國泰世華銀行 │ │
│ │ **** **** **** 8901 │ │
│ │ 王小明 │ │
│ │ [pending] [刪除] │ │
│ └────────────────────────────┘ │
└──────────────────────────────────┘設計規格：
- 卡片樣式：Glass 卡片，圓角
- 狀態 Badge：approved (綠) / pending (黃) / rejected (紅)
- 帳號顯示：遮罩前 12 位，僅顯示後 4 位
- 新增按鈕：右上角
+圖標按鈕
Credit.vue / Crypto.vue
同銀行卡列表模式，分別顯示信用卡和加密錢包地址清單。
5.5.5 交易紀錄元件 Transaction/ (5 個)
index.vue (Transaction Container)
Tab 切換：存款 / 提領 / 紅利 / 活動
Deposit.vue / Withdrawal.vue / Dividend.vue / Promo.vue
每個 Tab 頁面顯示對應的交易紀錄表格：
通用 UI 結構：
┌──────────────────────────────────────────┐
│ 日期 金額 狀態 方式 │
├──────────────────────────────────────────┤
│ 2024/01/15 $100.00 approved ATM │
│ 2024/01/14 $200.00 pending USDT │
│ 2024/01/13 $50.00 rejected 信用卡 │
├──────────────────────────────────────────┤
│ [載入更多] │
└──────────────────────────────────────────┘設計規格：
- 表格樣式：暗色行交替背景
- 金額格式：
$xxx.xxxxxx(USD 6 位小數) - 日期格式：依語系格式化
- 狀態 Badge：語意色彩
- 分頁：載入更多模式
5.5.6 VIP 元件 Vip/ (6 個)
index.vue (VIP Hub)
UI 結構：
┌──────────────────────────────────────┐
│ [StatusCard] │ ← 當前等級卡片
├──────────────────────────────────────┤
│ [LevelList] │ ← 所有等級列表
├──────────────────────────────────────┤
│ [Benefits] │ ← 等級福利說明
├──────────────────────────────────────┤
│ [MyRebates] │ ← 個人返水摘要
├──────────────────────────────────────┤
│ [RebateTable] │ ← 返水率表格
└──────────────────────────────────────┘StatusCard.vue
UI 結構：
┌──────────────────────────────────────┐
│ VIP Level 5 │
│ ████████████████████████░░░░░░░░░ │ ← 進度條
│ 投注累積：$12,500 / $20,000 │
│ 下一等級：VIP Level 6 │
└──────────────────────────────────────┘設計規格：
- 進度條：漸層色（主題色），圓角
rounded-full - 等級名稱：大字體
text-2xl font-bold - VIP 圖標：Noto emoji (
noto:crown,noto:gem-stone)
LevelList.vue
所有 VIP 等級一覽（動態取得，不限制等級數量）：
| 列 | 內容 |
|---|---|
| 等級 | VIP 0 ~ VIP N |
| 名稱 | 等級名稱 |
| 最低投注 | 升級門檻 |
| 福利 | 摘要說明 |
Benefits.vue / MyRebates.vue / RebateTable.vue
- Benefits：VIP 福利說明卡片
- MyRebates：個人返水總計金額
- RebateTable：8 種遊戲類型 x N 個等級的返水率表格
5.5.7 代理元件 Affiliate/ (7 個)
index.vue (Affiliate Center)
入口頁面，導航至各子功能。
Dashboard.vue
UI 結構：
┌──────────────────────────────────────┐
│ 代理儀表板 │
├──────────┬──────────┬────────────────┤
│ 總下線 │ 本月佣金 │ 可提領餘額 │
│ 156 │ $1,234 │ $5,678 │
├──────────┴──────────┴────────────────┤
│ 推薦連結：https://xxx.com/ref/ABC │
│ [複製] │
├──────────────────────────────────────┤
│ 推薦碼：ABC123 [複製] │
└──────────────────────────────────────┘Downline.vue
下線網絡樹狀圖，顯示三層代理結構。
Commission.vue / Settlement.vue / Withdrawal.vue / Alliance.vue
- Commission：佣金歷史紀錄列表
- Settlement：結算紀錄列表
- Withdrawal：代理提領表單 + 歷史
- Alliance：聯盟計劃資訊展示
5.5.8 站內信元件 Inbox/ (1 個)
index.vue
UI 結構：
┌──────────────────────────────────────┐
│ 站內信 [全部已讀] │
├──────────────────────────────────────┤
│ ● [未讀] 歡迎加入 C9 娛樂城 │
│ 2024/01/15 10:30 │
├──────────────────────────────────────┤
│ [已讀] VIP 升級通知 │
│ 2024/01/14 15:20 │
├──────────────────────────────────────┤
│ [已讀] 存款成功通知 │
│ 2024/01/13 09:15 │
└──────────────────────────────────────┘設計規格：
- 未讀標記：左側主題色圓點
- 已讀項目：降低不透明度
- 點擊展開：顯示完整內容
- 全部已讀：右上角批次操作按鈕
5.5.9 KYC 元件 Kyc/ (6 個)
index.vue (KYC Flow Container)
UI 結構（步驟指示器）：
┌──────────────────────────────────────┐
│ 身分驗證 │
│ │
│ Step 1 Step 2 Step 3 Step 4
│ ●─────────○─────────○─────────○ │
│ 基本資料 文件上傳 活體驗證 審核 │
│ │
├──────────────────────────────────────┤
│ │
│ (當前步驟的表單/內容) │
│ │
└──────────────────────────────────────┘StatusCard.vue
顯示當前 KYC 驗證狀態（未提交/審核中/已通過/已拒絕）。
StepBasicInfo.vue
個人基本資料表單（姓名、出生日期、國籍、地址）。
StepDocUpload.vue
文件上傳（身分證正面/背面、自拍照）：
- 上傳區域：虛線邊框拖放區
- 預覽：圖片縮略圖
- 格式限制：JPG/PNG，最大 5MB
StepLiveness.vue
活體驗證（臉部辨識）。
StepReview.vue
提交前確認頁面，顯示所有已填寫資訊供檢查。
5.5.10 投注紀錄 BetRecord/ (1 個)
index.vue
投注紀錄列表，含篩選和分頁。
5.6 彈窗元件 A1/Modal/ (16 個)
位置：c9-ec/app/components/A1/Modal/
所有 Modal 使用
useLayout()composable 控制開關狀態， 透過useState()跨元件共享，無需 prop drilling。
Login.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Modal/Login.vue |
| 用途 | 登入表單 Modal |
UI 結構：
┌──────────────────────────────────┐
│ 登入 │
│ │
│ 帳號 ┌──────────────────────┐ │
│ │ username │ │
│ └──────────────────────┘ │
│ 密碼 ┌──────────────────────┐ │
│ │ ******** [Eye] │ │
│ └──────────────────────┘ │
│ │
│ [登入] │ ← 主題色填充按鈕
│ │
│ ─── 或 ─── │
│ │
│ [G] Google 登入 │ ← OAuth 按鈕
│ [T] Telegram 登入 │
│ │
│ 還沒有帳號？ [立即註冊] │
└──────────────────────────────────┘設計規格：
- 背景遮罩：
bg-black/60 - Modal 容器：暗色背景 + 圓角
rounded-2xl - 輸入框：暗色背景 (
bg-white/5)，淺色邊框 - 密碼顯示切換：Eye / EyeOff 圖標
- OAuth 按鈕：品牌色邊框 + 品牌 Logo
- 錯誤提示：紅色文字在欄位下方
- 驗證：Zod schema 即時驗證
Register.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Modal/Register.vue |
| 用途 | 註冊表單 Modal |
UI 結構：
┌──────────────────────────────────┐
│ 註冊 │
│ │
│ 帳號 [________________] │
│ 密碼 [________________] [Eye] │
│ 確認密碼[________________] [Eye] │
│ Email [________________] │
│ 推薦碼 [________________] │ ← 可選
│ │
│ [註冊] │
│ │
│ 已有帳號？ [立即登入] │
└──────────────────────────────────┘EditPassword.vue / SetPassword.vue
- EditPassword：修改密碼（當前密碼 + 新密碼 + 確認新密碼）
- SetPassword：設定密碼（OAuth 用戶首次設定，僅新密碼 + 確認）
Theme.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Modal/Theme.vue |
| 用途 | 主題切換 Modal，展示 6 組主題色預覽 |
UI 結構：
┌──────────────────────────────────┐
│ 主題選擇 │
│ │
│ ┌───────┐ ┌───────┐ ┌───────┐│
│ │Emerald│ │ Amber │ │ Sky ││
│ │ ████ │ │ ████ │ │ ████ ││
│ │ [v] │ │ │ │ ││ ← 當前選中打勾
│ └───────┘ └───────┘ └───────┘│
│ ┌───────┐ ┌───────┐ ┌───────┐│
│ │Violet │ │ Rose │ │ Cyan ││
│ │ ████ │ │ ████ │ │ ████ ││
│ │ │ │ │ │ ││
│ └───────┘ └───────┘ └───────┘│
└──────────────────────────────────┘設計規格：
- 6 個主題預覽方塊，排列為 3x2 grid
- 每個方塊：圓形色塊 (preview 色) + 主題名稱 + 圖標
- 當前選中：打勾標記 + 主題色邊框
- 點擊即時切換：
applyTheme()即時更新 CSS 變數
Locale.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/Modal/Locale.vue |
| 用途 | 語言切換 Modal，5 種語系選項 |
UI 結構：
┌──────────────────────────────────┐
│ 語言選擇 │
│ │
│ ● 繁體中文 (zh-TW) │ ← 當前選中
│ ○ English (en-US) │
│ ○ 简体中文 (zh-CN) │
│ ○ ภาษาไทย (th-TH) │
│ ○ Tiếng Việt (vi-VN) │
└──────────────────────────────────┘VerifyUserInfo.vue
用戶資訊驗證 Modal（Email 驗證碼 / 2FA 驗證碼輸入）。
ContactSupport.vue
客服聯繫 Modal，顯示各客服管道（Line / Telegram / WeChat / Facebook 等）， 每個管道有圖標 + 名稱 + 連結。
BuyCrypto.vue
加密貨幣購買引導 Modal，說明如何購買 USDT。
BindGoogleAuth.vue
Google Authenticator 2FA 綁定 Modal：
UI 流程（3 步驟）：
Step 1: 顯示 QR Code + Secret Key
Step 2: 用戶掃描 QR Code
Step 3: 輸入 6 位驗證碼確認AddBankCard.vue / AddCreditCard.vue / AddCryptoAddress.vue
新增錢包表單 Modal：
- 銀行卡：銀行名稱 / 帳號 / 持卡人姓名
- 信用卡：卡號 / 有效期限 / CVV
- 加密錢包：網路 (TRC20/ERC20/BEP20) / 地址 / 標籤
BankCardDetail.vue
銀行卡詳情檢視 Modal，完整顯示卡片資訊。
AgentTour.vue
代理推廣新手導覽 Modal，步驟式引導用戶了解代理系統。
ChallengesModal.vue
挑戰任務展示 Modal。
5.7 其他 A1/ 元件 (6 個)
PromoLinkCard.vue
| 屬性 | 說明 |
|---|---|
| 路徑 | app/components/A1/PromoLinkCard.vue |
| 用途 | 活動卡片元件（圖片 + 標題 + 描述 + CTA 按鈕） |
設計規格：
- 卡片寬度：固定寬度（用於水平捲動列表）
- 圖片：頂部，圓角
- 標題：
font-semibold，最多 2 行 (line-clamp-2) - 描述：
text-white/60，最多 3 行 - CTA 按鈕：主題色文字連結
Alliance/index.vue
聯盟計劃頁面，展示聯盟推廣資訊。
Promo/Center.vue / Promo/Detail.vue
- Center：活動中心列表頁（支援標籤篩選）
- Detail：活動詳情頁（富文本內容展示）
Mission/index.vue
任務列表頁面（每日/週/月任務，含進度條）。
Help/Center.vue
幫助中心頁面。
第 6 章：後台元件庫
後台 (c9-ims) 共有 41 個 React 元件，分為 4 類： Layout (10) + Shared (11) + UI (16) + DataTable (4)。 所有互動元件標記
"use client"，UI 元件基於 shadcn/ui (new-york style)。
6.1 Layout 元件 (10 個)
位置：c9-ims/src/components/layout/
sidebar.tsx (615 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/sidebar.tsx |
| 用途 | 側邊欄導航，14 個群組、50+ 導航項目 |
| 雙重檢查 | Feature Flag + RBAC 權限，兩者皆通過才顯示 |
UI 結構：
┌──────────────────┐
│ [Site Logo] │
│ Site Name │
├──────────────────┤
│ │
│ ▼ 儀表板 │ ← 群組 (可展開/收合)
│ Dashboard │ ← 項目
│ │
│ ▼ 系統管理 │
│ 管理員管理 │
│ 群組管理 │
│ 操作紀錄 │
│ 雲端儲存 │
│ 雲端儲存日誌 │
│ │
│ ▼ 站點設定 │
│ 域名設置 │
│ 三方登入 │
│ 遊戲商配置 │
│ 服務商配置 │
│ 客服配置 │
│ │
│ ▼ 佈局控制 │
│ 底部導航列 │
│ 頁尾配置 │
│ 了解更多 │
│ │
│ ▼ 玩家管理 │
│ ▼ 活動管理 │
│ ▼ 站內信 │
│ ▼ 財務管理 │
│ ▼ 代理中心 │
│ ▼ VIP 管理 │
│ ▼ 遊戲管理 │
│ ▼ 風控管理 │
│ ▼ 報表資訊 │
│ ▼ 用戶管理 │
│ ▼ 角色管理 │
│ │
└──────────────────┘設計規格：
- 寬度：展開 256px，收合 64px (僅圖標)
- 背景：
bg-sidebarCSS 變數 - 文字色：
text-sidebar-foreground - 活動項目：
bg-sidebar-accent，text-sidebar-accent-foreground - 群組標題：
text-xs font-semibold text-muted-foreground+ ChevronDown 圖標 - 群組展開/收合：toggle 動畫 (高度過渡)
- 捲軸：隱藏但可捲動
14 個導航群組：
| # | 群組 | Feature Flag | RBAC | 子項目數 |
|---|---|---|---|---|
| 1 | 儀表板 | -- | -- | 1 |
| 2 | 系統管理 | enableSystemManagement | admin/admin-group/admin-log | 5 |
| 3 | 站點設定 | enableSystemManagement | site-config | 5 |
| 4 | 佈局控制 | enableSystemManagement | site-config | 3 |
| 5 | 玩家管理 | enablePlayerManagement | user | 4 |
| 6 | 活動管理 | enableSystemManagement | promo/promo-tag | 2 |
| 7 | 站內信 | -- (永遠顯示) | -- | 2 |
| 8 | 財務管理 | enableFinanceManagement | finance/vendor/withdrawal | 7 |
| 9 | 代理中心 | enableAffiliateManagement | affiliate | 8 |
| 10 | VIP 管理 | enableVipManagement | vip | 4 |
| 11 | 遊戲管理 | enableGameManagement | game | 2 |
| 12 | 風控管理 | enableRiskControl | risk | 3 |
| 13 | 報表資訊 | enableReports | report | 7 |
| 14 | 用戶管理 | enableUserManagement | -- | 1 |
Sidebar 圖標對照：
| 群組 | 圖標 (Lucide) |
|---|---|
| 儀表板 | LayoutDashboard |
| 系統管理 | Settings |
| 站點設定 | Settings2 |
| 佈局控制 | Settings2 |
| 玩家管理 | UsersRound |
| 活動管理 | Gift |
| 站內信 | FileText |
| 財務管理 | CreditCard |
| 代理中心 | Users2 |
| VIP 管理 | Trophy / Star |
| 遊戲管理 | Gamepad2 |
| 風控管理 | ShieldAlert |
| 報表資訊 | BarChart3 |
| 用戶管理 | Users |
header.tsx (123 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/header.tsx |
| 用途 | 頂部導航列（SiteSelector + 語系切換 + 個人資料） |
UI 結構：
┌──────────────────────────────────────────────────┐
│ [Hamburger] [SiteSelector ▼] [Locale] [User ▼] │
└──────────────────────────────────────────────────┘
SiteSelector 隱藏條件：
- /system/admins
- /system/groups
- /system/logs設計規格：
- 高度：48px (
h-12) - 背景：
bg-background+border-b border-border - 漢堡選單：手機版顯示，控制 Sidebar 開關
- SiteSelector：下拉選單元件
- 語系切換：下拉選單（5 語系）
- 用戶選單：頭像 + 下拉（Profile / Logout）
providers.tsx (72 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/providers.tsx |
| 用途 | Context Provider 堆疊 |
Provider 堆疊順序：
<SessionProvider>
<QueryClientProvider>
<SessionSync />
<SiteConfigProvider>
<SiteThemeInjector>
<LocaleGuard />
<EnumInitializer />
<SiteFilterInitializer />
{children}
<Toaster />
<ConfirmDialog />
</SiteThemeInjector>
</SiteConfigProvider>
</QueryClientProvider>
</SessionProvider>AdminContentWrapper.tsx (12 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/AdminContentWrapper.tsx |
| 用途 | 包裹管理頁面，站點切換時強制 remount |
核心機制：
tsx
// key 變化時 React 強制 remount 所有子元件
<div key={selectedSiteCode ?? "__all__"}>
{children}
</div>SiteFilterInitializer.tsx (31 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/SiteFilterInitializer.tsx |
| 用途 | 啟動時拉取站點列表，填入 siteFilterStore |
流程：mount 時 -> GET /site-config/admin/list -> siteFilterStore.setSites()
SiteSelector.tsx (79 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/SiteSelector.tsx |
| 用途 | Header 站點切換下拉選單 |
UI 結構：
┌───────────────────────┐
│ 全部站點 ▼ │ ← 預設選項
├───────────────────────┤
│ ● 全部站點 │ ← null (顯示所有站 Tab)
│ C9 娛樂城 │ ← "C9"
│ D1 娛樂城 │ ← "D1"
│ E2 娛樂城 │ ← "E2"
└───────────────────────┘設計規格：
- 下拉使用 shadcn/ui
Select元件 - 切換時動作：
- 更新
siteFilterStore.selectedSiteCode queryClient.removeQueries()清除快取AdminContentWrapper因 key 變化而 remount
- 更新
google-auth-dialog.tsx (208 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/layout/google-auth-dialog.tsx |
| 用途 | Google Authenticator 2FA 設定對話框 |
UI 流程（3 狀態）：
State: idle
┌──────────────────────────┐
│ Google Authenticator │
│ [啟用 2FA] │
└──────────────────────────┘
State: qr
┌──────────────────────────┐
│ 掃描 QR Code │
│ ┌──────────┐ │
│ │ QR Code │ │
│ └──────────┘ │
│ Secret: XXXX XXXX XXXX │
│ [下一步] │
└──────────────────────────┘
State: verify
┌──────────────────────────┐
│ 輸入驗證碼 │
│ ┌──────────────────┐ │
│ │ 6 位數驗證碼 │ │
│ └──────────────────┘ │
│ [確認] │
└──────────────────────────┘localeGuard.tsx (25 LOC)
檢查當前語系是否在站點 supportedLocales 內，不支援則自動導向預設語系。
scrollToTop.tsx (52 LOC)
路由變更時自動捲至頂部。使用 MutationObserver 監聽 DOM 變化 + history.pushState 攔截。
themeInjector.tsx (55 LOC)
讀取站點主題配置，轉換為 CSS 變數並注入到 wrapper <div> 的 inline style。 shadcn/ui 元件自動讀取這些 CSS 變數實現換皮。
6.2 Shared 元件 (11 個)
位置：c9-ims/src/components/shared/
simpleTable.tsx (108 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/simpleTable.tsx |
| 用途 | 輕量資料表格，所有真實 API 頁面的標準表格元件 |
| 分頁模式 | 伺服器端分頁（資料由 API 提供，非客戶端排序） |
UI 結構：
┌────────────────────────────────────────────────┐
│ Header 1 Header 2 Header 3 Actions │ ← TableHead
├────────────────────────────────────────────────┤
│ Cell 1-1 Cell 1-2 Cell 1-3 [...] │ ← TableRow
│ Cell 2-1 Cell 2-2 Cell 2-3 [...] │
│ Cell 3-1 Cell 3-2 Cell 3-3 [...] │
│ Cell 4-1 Cell 4-2 Cell 4-3 [...] │
├────────────────────────────────────────────────┤
│ 100 total < 1 / 5 > │ ← Pagination
└────────────────────────────────────────────────┘
Loading 狀態：
┌────────────────────────────────────────────────┐
│ │
│ [Loader2 Spinning] │
│ │
└────────────────────────────────────────────────┘
Empty 狀態：
┌────────────────────────────────────────────────┐
│ │
│ 沒有資料 │
│ │
└────────────────────────────────────────────────┘Props 介面：
typescript
interface SimpleColumn<T> {
key: string; // 欄位識別 key
header: string | React.ReactNode; // 表頭文字或元件
cell: (item: T, index: number) => React.ReactNode; // 儲存格渲染函式
className?: string; // 儲存格 CSS class
headerClassName?: string; // 表頭 CSS class
}
interface SimpleTableProps<T> {
data: T[]; // 資料陣列
columns: SimpleColumn<T>[]; // 欄位定義
loading?: boolean; // 載入中狀態
emptyText?: string; // 空狀態文字
pagination?: { // 分頁配置
page: number;
totalPages: number;
total?: number;
onPageChange: (page: number) => void;
};
rowKey?: (item: T) => string | number; // 行 key 函式
onRowClick?: (item: T) => void; // 行點擊事件
rowClassName?: (item: T) => string; // 動態行 class
}設計規格：
- 容器：
rounded-lg border(shadcn/ui 預設邊框) - 表頭：
bg-muted/50，text-muted-foreground，text-xs font-medium - 表格行：hover 高亮
hover:bg-muted/50 - 可點擊行：
cursor-pointer - Loading：居中
Loader2spinner，py-20 - Empty：居中文字，
text-muted-foreground py-20 - 間距：表格與分頁之間
space-y-4
SiteTabs.tsx (83 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/SiteTabs.tsx |
| 用途 | 多站點 Tab 切換，核心共用元件 |
UI 結構：
全部站點模式（多 Tab）：
┌────────────────────────────────────────────────────────┐
│ [C9 娛樂城 (C9/c9) 預設] [D1 娛樂城 (D1/d1)] ... │ [同預設站點]
└────────────────────────────────────────────────────────┘
獨立站點模式（單 Tab）：
┌────────────────────────────────────────────────────────┐
│ [C9 娛樂城 (C9/c9) 預設] │
└────────────────────────────────────────────────────────┘Props 介面：
typescript
interface SiteTabsConfig {
id: number; // 站點 ID
siteCode: string; // 站點代碼 (如 "C9")
prefix: string; // 站點前綴 (如 "c9")
siteName: Record<string, string>; // 多語系名稱
}
interface SiteTabsProps {
configs: SiteTabsConfig[]; // 可見站點列表
activeSiteId: number | null; // 當前活動 Tab
onSiteChange: (siteId: number) => void; // Tab 切換回呼
defaultLabel?: string; // 「預設」Badge 文字
copyLabel?: string; // 「同預設站點」按鈕文字
onCopyFromDefault?: (targetSiteId: number) => void; // 複製回呼
}設計規格：
- 基於 shadcn/ui
Tabs+TabsList+TabsTrigger - TabsList：
w-full justify-start flex-wrap h-auto gap-1 p-1 - Tab 內容：站點名稱 +
(siteCode / prefix)+ 預設 Badge - 預設 Badge：
text-[10px] px-1.5 py-0，variant="secondary" - 複製按鈕：
variant="outline" size="sm"，在非預設 Tab 啟用時顯示 - 複製按鈕圖標：
Copy(Lucide)
filterBar.tsx (162 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/filterBar.tsx |
| 用途 | 通用篩選列，支援 text / date / select 三種欄位類型 |
UI 結構：
┌────────────────────────────────────────────────────────────┐
│ 關鍵字 狀態 開始日期 結束日期 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ keyword │ │ All ▼ │ │ 日期選擇 │ │ 日期選擇 │ [搜尋] [重置] │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
└────────────────────────────────────────────────────────────┘欄位類型介面：
typescript
interface TextFilterField {
type: "text"; // 文字輸入
key: string;
label: string;
placeholder?: string;
}
interface DateFilterField {
type: "date"; // 日期選擇
key: string;
label: string;
}
interface SelectFilterField {
type: "select"; // 下拉選單
key: string;
label: string;
options: { label: string; value: string }[];
}Props 介面：
typescript
interface FilterBarProps {
fields: FilterField[]; // 篩選欄位定義
values: Record<string, string>; // 當前值
onChange: (values: Record<string, string>) => void; // 值變更回呼
onSearch?: () => void; // 搜尋按鈕回呼
onReset?: () => void; // 重置回呼
searchText?: string; // 搜尋按鈕文字
resetText?: string; // 重置按鈕文字
}設計規格：
- 佈局：
flex flex-wrap items-start gap-3 - 標籤：
text-xs text-muted-foreground，高度固定h-4 - 輸入框：
h-8（緊湊高度） - 搜尋按鈕：
variant="secondary" size="sm"，搜尋圖標 - 重置按鈕：
variant="ghost" size="sm"，旋轉圖標 - Enter 鍵：在文字/日期輸入中按 Enter 觸發搜尋
- Select 預設：
"__all__"對應空字串（全部）
statusBadge.tsx (43 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/statusBadge.tsx |
| 用途 | 色彩映射 Badge，用於顯示各種業務狀態 |
Props 介面：
typescript
interface StatusBadgeProps {
status: string | number; // 狀態值
label: string; // 顯示文字
colorMap?: Record<string | number, string>; // 自定義色彩映射
className?: string; // 額外 CSS class
}使用範例：
tsx
// 管理員狀態
<StatusBadge status={1} label="啟用" colorMap={{ 1: "emerald", 0: "rose" }} />
// 訂單狀態
<StatusBadge status="pending" label="待審核" /> // 使用預設映射confirmDialog.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/confirmDialog.tsx |
| 用途 | 命令式確認對話框，透過 useConfirm() hook 觸發 |
使用方式：
typescript
const confirm = useConfirm();
const ok = await confirm({
title: "確認刪除？",
description: "此操作無法復原",
variant: "destructive" // "default" | "destructive"
});
if (!ok) return;設計規格：
- 基於 shadcn/ui
AlertDialog - 確認按鈕：
variant為 default 或 destructive - Zustand store 驅動，全域單例
- 回傳
Promise<boolean>
pagination.tsx (47 LOC)
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/pagination.tsx |
| 用途 | 頁碼導航元件 |
UI 結構：
┌────────────────────────────────────────────┐
│ 100 total < Previous 1/5 Next >│
└────────────────────────────────────────────┘Props 介面：
typescript
interface PaginationProps {
page: number; // 當前頁
totalPages: number; // 總頁數
total?: number; // 總筆數（可選，顯示 "N total"）
onPageChange: (page: number) => void;
}設計規格：
- 隱藏條件：
totalPages <= 1時不渲染 - 上/下頁按鈕：
variant="outline" size="sm" - 頁碼顯示：
{page} / {totalPages}，text-sm font-medium - 按鈕圖標：
ChevronLeft/ChevronRight
htmlEditor.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/htmlEditor.tsx |
| 用途 | Tiptap v3 富文本編輯器 |
工具列：
- 粗體 (Bold)
- 斜體 (Italic)
- 底線 (Underline)
- 標題 (H1, H2, H3)
- 無序列表 (Bullet List)
- 有序列表 (Ordered List)
- 連結 (Link)
- 圖片 (Image)
exportButton.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/exportButton.tsx |
| 用途 | CSV 匯出按鈕 |
設計規格：
- 按鈕樣式：
variant="outline" size="sm" - 載入中：spinner 取代圖標
- 圖標：
Download(Lucide)
loadingSpinner.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/loadingSpinner.tsx |
| 用途 | 置中載入中 spinner |
設計規格：
- 居中：
flex items-center justify-center - 圖標：
Loader2，animate-spin - 顏色：
text-muted-foreground
accessDenied.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/accessDenied.tsx |
| 用途 | 無權限狀態頁面 |
設計規格：
- 居中圖標 + 文字
- 圖標：
ShieldX(Lucide)，大尺寸 - 文字：「您沒有權限訪問此頁面」
templatePreviewDialog.tsx
| 屬性 | 說明 |
|---|---|
| 路徑 | src/components/shared/templatePreviewDialog.tsx |
| 用途 | 模板預覽對話框，用於遊戲/VIP 帶入模板 |
UI 流程：
1. 點擊「帶入模板」按鈕
2. 彈出 Dialog 顯示預設模板資料
3. 用戶可在預覽中編輯數值
4. 確認後寫入資料庫6.3 UI 基礎元件 shadcn/ui (16 個)
位置：c9-ims/src/components/ui/
基於 shadcn/ui new-york 風格，使用 Radix UI 原語。 所有元件支援
classNameprop 自定義樣式。
button.tsx
| 變體 (variant) | 說明 | 樣式 |
|---|---|---|
default | 主要按鈕 | bg-primary text-primary-foreground |
destructive | 危險/刪除 | bg-destructive text-white |
outline | 描邊按鈕 | border bg-background |
secondary | 次要按鈕 | bg-secondary text-secondary-foreground |
ghost | 幽靈按鈕 | 透明背景，hover 變色 |
link | 連結樣式 | 底線文字 |
| 大小 (size) | 高度 | 說明 |
|---|---|---|
xs | 24px (h-6) | 極小 |
sm | 32px (h-8) | 小 |
default | 36px (h-9) | 標準 |
lg | 40px (h-10) | 大 |
icon | 36px (size-9) | 正方形圖標按鈕 |
icon-xs | 24px (size-6) | 極小圖標按鈕 |
icon-sm | 32px (size-8) | 小圖標按鈕 |
icon-lg | 40px (size-10) | 大圖標按鈕 |
其他 UI 元件一覽
| 元件 | 檔案 | 說明 | 基於 |
|---|---|---|---|
| AlertDialog | alert-dialog.tsx | 確認對話框 | Radix AlertDialog |
| Badge | badge.tsx | 狀態標籤 | -- |
| Card | card.tsx | 卡片容器 (Header/Content/Footer) | -- |
| Checkbox | checkbox.tsx | 勾選框 | Radix Checkbox |
| Dialog | dialog.tsx | 模態對話框 | Radix Dialog |
| DropdownMenu | dropdown-menu.tsx | 下拉選單 | Radix DropdownMenu |
| Input | input.tsx | 文字輸入欄位 | -- |
| Label | label.tsx | 表單標籤 | Radix Label |
| Select | select.tsx | 下拉選擇器 | Radix Select |
| Sonner | sonner.tsx | Toast 通知 | Sonner 第三方 |
| Switch | switch.tsx | 開關切換 | Radix Switch |
| Table | table.tsx | HTML 表格樣式化 | -- |
| Tabs | tabs.tsx | Tab 容器 | Radix Tabs |
| Textarea | textarea.tsx | 多行文字輸入 | -- |
| Tooltip | tooltip.tsx | 懸停提示 | Radix Tooltip |
6.4 DataTable 元件 (4 個，Demo 頁用)
位置：c9-ims/src/components/dataTable/
DataTable 元件用於 Demo 頁面（使用模擬資料），真實 API 頁面使用 SimpleTable。
dataTable.tsx
TanStack React Table v8 完整封裝，支援：
- 客戶端排序 (sorting)
- 客戶端篩選 (filtering)
- 客戶端分頁 (pagination)
- 欄位可見性 (column visibility)
dataTableColumnHeader.tsx
表頭元件，包含排序指示器（升序/降序箭頭）。
dataTablePagination.tsx
客戶端分頁控制：
- 每頁筆數選擇 (10/20/30/40/50)
- 頁碼跳轉
- 上/下頁按鈕
- 顯示 "第 X 頁，共 Y 頁" 文字
dataTableToolbar.tsx
搜尋和篩選工具列（用於 Demo 頁面）。
第 7 章：頁面佈局規範
7.1 前台佈局 (a1 layout)
7.1.1 整體結構
前台使用 a1 佈局模板（定義在 c9-ec/app/layouts/a1.vue），基於 Nuxt UI 的 UDashboardGroup 結構。
桌面版 (lg+) 完整佈局：
┌─────────────────────────────────────────────────────────────┐
│ TitleBar (Top Nav) │
│ [Menu] [Logo] [Title] [$Balance] [Deposit] [Bell]│
├──────────┬──────────────────────────────────────────────────┤
│ │ │
│ │ │
│ Side │ Content Area │
│ bar │ <NuxtPage /> │
│ │ │
│ - 首頁 │ (路由對應的頁面元件) │
│ - 遊戲 │ │
│ - VIP │ │
│ - 代理 │ │
│ - 活動 │ │
│ - 設定 │ │
│ │ │
│ │ │
├──────────┴──────────────────────────────────────────────────┤
│ Footer │
│ [Section 1] [Section 2] [Section 3] [Section 4] │
│ Link 1 Link 1 Link 1 Link 1 │
│ Link 2 Link 2 Link 2 Link 2 │
│ ────────────────────────────────────────────────────────── │
│ (c) 2024 Site Name. All rights reserved. │
└─────────────────────────────────────────────────────────────┘
BottomBar 隱藏 (lg:hidden)手機版 (< lg) 佈局：
┌──────────────────────────┐
│ TitleBar │
│ [Menu] [Logo] [$] [Bell]│
├──────────────────────────┤
│ │
│ Content Area │
│ <NuxtPage /> │
│ │
│ (全寬，單欄佈局) │
│ │
│ │
│ │
├──────────────────────────┤
│ Footer │
├──────────────────────────┤
│ BottomBar │
│ [入金] [遊戲] [中央] [VIP] [我的] │
└──────────────────────────┘
Sidebar 隱藏 (overlay 模式)7.1.2 佈局元件組合
a1.vue (Layout)
├── TitleBar.vue 固定頂部
├── UDashboardGroup 佈局容器
│ ├── Sidebar.vue 側邊導航 (lg+ 固定, < lg overlay)
│ └── UDashboardPanel 內容面板
│ └── <NuxtPage /> 路由頁面
├── Footer.vue 頁尾
├── BottomBar.vue 底部導航 (< lg 固定)
└── LiveChat.vue 客服浮動元件 (條件顯示)7.1.3 內容區域規範
| 屬性 | 值 | 說明 |
|---|---|---|
| 最大寬度 | 無硬性限制 | 由 sidebar 和 padding 控制 |
| 內邊距 (手機) | px-3 py-4 | 左右 12px，上下 16px |
| 內邊距 (桌面) | px-6 py-6 | 左右 24px，上下 24px |
| 背景色 | #0a1120 ~ #0a0a0a | 深色底色 |
| 捲軸 | 頁面主體捲動 | Sidebar 和 BottomBar 固定 |
7.1.4 Sidebar 與 BottomBar 互斥
if (screen >= lg) {
顯示 Sidebar (固定左側)
隱藏 BottomBar
} else {
隱藏 Sidebar (overlay 模式，漢堡選單觸發)
顯示 BottomBar (固定底部)
}7.2 後台佈局 (admin group)
7.2.1 Admin 佈局結構
後台使用 Next.js Route Group (admin) 佈局（定義在 c9-ims/src/app/[locale]/(admin)/layout.tsx）。
桌面版完整佈局：
┌────────────────────────────────────────────────────────────┐
│ Header │
│ [Hamburger] [SiteSelector ▼] [Locale] [User]│
├─────────────┬──────────────────────────────────────────────┤
│ │ │
│ Sidebar │ AdminContentWrapper │
│ (Fixed) │ key={selectedSiteCode} │
│ │ │
│ ▼ 儀表板 │ ┌──────────────────────────────────────┐ │
│ ▼ 系統管理 │ │ Page Title │ │
│ ▼ 站點設定 │ ├──────────────────────────────────────┤ │
│ ▼ 佈局控制 │ │ SiteTabs │ │
│ ▼ 玩家管理 │ │ [C9 預設] [D1] [E2] │ │
│ ▼ 活動管理 │ ├──────────────────────────────────────┤ │
│ ▼ 站內信 │ │ FilterBar │ │
│ ▼ 財務管理 │ │ [Keyword] [Status ▼] [Date] [搜尋] │ │
│ ▼ 代理中心 │ ├──────────────────────────────────────┤ │
│ ▼ VIP 管理 │ │ [+ 新增] [匯出] │ │
│ ▼ 遊戲管理 │ ├──────────────────────────────────────┤ │
│ ▼ 風控管理 │ │ SimpleTable │ │
│ ▼ 報表資訊 │ │ ┌───────────────────────────────┐ │ │
│ │ │ │ Header Row │ │ │
│ │ │ ├───────────────────────────────┤ │ │
│ │ │ │ Data Row 1 │ │ │
│ │ │ │ Data Row 2 │ │ │
│ │ │ │ Data Row 3 │ │ │
│ │ │ └───────────────────────────────┘ │ │
│ │ ├──────────────────────────────────────┤ │
│ │ │ 100 total < 1/5 > │ │
│ │ └──────────────────────────────────────┘ │
│ │ │
└─────────────┴──────────────────────────────────────────────┘7.2.2 Auth 佈局結構
登入頁使用 (auth) Route Group 佈局，簡潔的置中卡片設計：
┌──────────────────────────────────────────┐
│ │
│ │
│ ┌──────────────────┐ │
│ │ [Site Logo] │ │
│ │ │ │
│ │ Email │ │
│ │ [____________] │ │
│ │ │ │
│ │ Password │ │
│ │ [____________] │ │
│ │ │ │
│ │ [Login] │ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ │
└──────────────────────────────────────────┘
背景：bg-background
卡片：bg-card，shadow-lg，rounded-xl7.2.3 Admin Layout 元件組合
[locale]/layout.tsx (Root)
├── Providers (Context Stack)
│ ├── SessionProvider
│ ├── QueryClientProvider
│ ├── SiteConfigProvider
│ ├── SiteThemeInjector
│ ├── EnumInitializer
│ ├── SiteFilterInitializer
│ ├── Toaster
│ └── ConfirmDialog
(admin)/layout.tsx
├── Header
│ ├── Hamburger (mobile)
│ ├── SiteSelector
│ ├── LocaleSwitcher
│ └── UserMenu
├── Sidebar
│ └── 14 Navigation Groups
└── AdminContentWrapper (key=siteCode)
└── {children} (Page Content)7.3 列表頁標準佈局
所有後台列表頁面遵循統一的佈局模式：
7.3.1 完整列表頁結構
┌──────────────────────────────────────────────────┐
│ │
│ Page Title │
│ 頁面標題 (text-2xl font-bold) │
│ │
├──────────────────────────────────────────────────┤
│ │
│ SiteTabs (多站點切換) │
│ [C9 娛樂城 (C9/c9) 預設] [D1 娛樂城] [E2] │
│ │
├──────────────────────────────────────────────────┤
│ │
│ FilterBar (篩選列) │
│ 關鍵字 狀態 開始日期 結束日期 │
│ [________] [All ▼] [________] [________] │
│ [搜尋] [重置] │
│ │
├──────────────────────────────────────────────────┤
│ │
│ Action Buttons (操作按鈕列) │
│ [+ 新增] [匯出 CSV] │
│ │
├──────────────────────────────────────────────────┤
│ │
│ SimpleTable (資料表格) │
│ ┌────┬──────────┬────────┬──────┬─────────────┐ │
│ │ # │ 名稱 │ 狀態 │ 日期 │ 操作 │ │
│ ├────┼──────────┼────────┼──────┼─────────────┤ │
│ │ 1 │ Item 1 │[active]│ 1/15 │ [Edit][Del] │ │
│ │ 2 │ Item 2 │[pending│ 1/14 │ [Edit][Del] │ │
│ │ 3 │ Item 3 │[reject]│ 1/13 │ [Edit][Del] │ │
│ └────┴──────────┴────────┴──────┴─────────────┘ │
│ │
├──────────────────────────────────────────────────┤
│ │
│ Pagination (分頁) │
│ 100 total < Previous 1/5 Next>│
│ │
└──────────────────────────────────────────────────┘7.3.2 間距規範
| 區塊之間 | 間距 | Tailwind Class |
|---|---|---|
| 標題 → SiteTabs | 16px | space-y-4 |
| SiteTabs → FilterBar | 16px | space-y-4 |
| FilterBar → Action Buttons | 16px | space-y-4 |
| Action Buttons → Table | 16px | space-y-4 |
| Table → Pagination | 16px | space-y-4 (SimpleTable 內建) |
| 頁面 Padding | 24px | p-6 |
7.4 表單頁佈局
7.4.1 CRUD 表單頁結構
┌──────────────────────────────────────────────────┐
│ │
│ Page Title │
│ 新增管理員 / 編輯管理員 │
│ │
├──────────────────────────────────────────────────┤
│ │
│ Card │
│ ┌──────────────────────────────────────────────┐│
│ │ ││
│ │ ┌──────────────┐ ┌──────────────┐ ││
│ │ │ Email │ │ Name │ ││
│ │ │ [__________] │ │ [__________] │ ││
│ │ └──────────────┘ └──────────────┘ ││
│ │ ││
│ │ ┌──────────────┐ ┌──────────────┐ ││
│ │ │ Password │ │ Group │ ││
│ │ │ [__________] │ │ [Select ▼] │ ││
│ │ └──────────────┘ └──────────────┘ ││
│ │ ││
│ │ ┌───────────────────────────────┐ ││
│ │ │ Description │ ││
│ │ │ [Textarea │ ││
│ │ │ │ ││
│ │ │ │ ││
│ │ └───────────────────────────────┘ ││
│ │ ││
│ │ [Cancel] [Save] ││
│ │ ││
│ └──────────────────────────────────────────────┘│
│ │
└──────────────────────────────────────────────────┘7.4.2 表單 Grid 佈局規則
| 螢幕寬度 | 欄數 | Tailwind Class |
|---|---|---|
| 手機 (< md) | 1 欄 | grid grid-cols-1 |
| 平板 (md+) | 2 欄 | md:grid-cols-2 |
| 桌面 (lg+) | 2~3 欄 | lg:grid-cols-3 (視欄位數量) |
7.4.3 設定頁面佈局 (模式 B)
站點設定頁面使用不同的佈局模式：
┌──────────────────────────────────────────────────┐
│ │
│ SiteTabs (多站點切換) │
│ [C9 預設] [D1] [E2] [同預設站點] │
│ │
├──────────────────────────────────────────────────┤
│ │
│ 設定表單 (根據 activeSiteId 載入對應站點設定) │
│ │
│ ┌──────────────────────────────────────────────┐│
│ │ Field 1: [________________] ││
│ │ Field 2: [________________] ││
│ │ Field 3: [Switch ●○] ││
│ │ ... ││
│ │ ││
│ │ [Save] ││
│ └──────────────────────────────────────────────┘│
│ │
└──────────────────────────────────────────────────┘7.5 儀表板佈局
┌──────────────────────────────────────────────────┐
│ │
│ Dashboard │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────┐│
│ │ 總用戶 │ │ 今日新增 │ │ 總營收 │ │ 在線 ││
│ │ 12,345 │ │ 56 │ │ $1.2M │ │ 89 ││
│ │ +12% │ │ +5% │ │ +8% │ │ -3% ││
│ └──────────┘ └──────────┘ └──────────┘ └──────┘│
│ │
│ ┌──────────────────────┐ ┌──────────────────┐ │
│ │ 營收趨勢 (折線圖) │ │ 遊戲類型分布 │ │
│ │ ▂▃▅▆█▇▅▃▂ │ │ (圓餅圖) │ │
│ │ │ │ │ │
│ └──────────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐│
│ │ 每日摘要表格 ││
│ │ 日期 | 新用戶 | 存款 | 提領 | 投注 | 淨利 ││
│ │ ... ││
│ └──────────────────────────────────────────────┘│
│ │
└──────────────────────────────────────────────────┘統計卡片設計規格：
- 佈局：4 欄 grid（桌面），2 欄（平板），1 欄（手機）
- 卡片：
bg-card rounded-lg border p-4 - 數字：
text-2xl font-bold - 趨勢：正值綠色箭頭，負值紅色箭頭
- 圖表：Recharts v3 (折線圖 + 柱狀圖 + 圓餅圖)
第 8 章：表單規範
8.1 前台表單
8.1.1 驗證機制
前台使用 Zod v4 進行表單驗證：
typescript
import * as z from 'zod';
const loginSchema = z.object({
account: z.string().min(4).max(20),
password: z.string().min(6).max(30),
});8.1.2 輸入框樣式
前台輸入框設計：
┌──────────────────────────────────┐
│ Label (text-white/60) │
│ ┌────────────────────────────┐ │
│ │ placeholder (text-white/40)│ │ ← 暗色背景 bg-white/5
│ └────────────────────────────┘ │ ← 邊框 ring-white/10
│ Error message (text-red-500) │ ← 錯誤時顯示
└──────────────────────────────────┘| 屬性 | 值 |
|---|---|
| 背景色 | bg-white/5 |
| 邊框 | ring-1 ring-white/10 |
| 焦點邊框 | focus:ring-emerald-500（主題色） |
| 錯誤邊框 | ring-red-500 |
| 圓角 | rounded-lg |
| 高度 | h-10 (40px) ~ h-12 (48px) |
| 文字色 | text-white |
| Placeholder | text-white/40 |
| 標籤色 | text-white/60 |
| 錯誤文字 | text-red-500 text-xs |
8.1.3 按鈕樣式
| 按鈕類型 | 樣式 | 用途 |
|---|---|---|
| 主要 (Primary) | 主題色填充 + 白色文字 | 提交、確認 |
| 次要 (Secondary) | bg-white/10 + 白色文字 | 取消、返回 |
| 幽靈 (Ghost) | 透明背景 | 輔助操作 |
| 危險 (Danger) | 紅色填充 | 刪除、停用 |
| 載入中 (Loading) | 按鈕 + spinner | 等待 API 回應 |
8.1.4 密碼欄位
密碼輸入欄位：
┌──────────────────────────────┐
│ ●●●●●●●● [Eye] │ ← 點擊切換顯示/隱藏
└──────────────────────────────┘
顯示模式：
┌──────────────────────────────┐
│ myPassword123 [EyeOff]│
└──────────────────────────────┘8.1.5 金額輸入
金額輸入欄位（存款頁面）：
金額 (TWD)
┌──────────────────────────────┐
│ 1,000 │
└──────────────────────────────┘
快速選擇：
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ 1000 │ │ 3000 │ │ 5000 │ │10000 │
└──────┘ └──────┘ └──────┘ └──────┘設計規格：
- 快速選擇按鈕：
variant="outline"，點選後填入輸入框 - 數字格式：千分位分隔（顯示用，提交時移除）
- 匯率顯示：即時匯率 + 預計到帳金額
8.2 後台表單
8.2.1 驗證機制
後台使用 React Hook Form + Zod v4 或 useState + safeParse 兩種模式：
模式 1：React Hook Form（登入頁等正式表單）
typescript
import { z } from "zod/v4";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
const schema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
const form = useForm({ resolver: zodResolver(schema) });模式 2：useState + safeParse（大多數 Admin 表單）
typescript
const [form, setForm] = useState({ name: "", email: "" });
const result = schema.safeParse(form);
if (!result.success) { /* 顯示錯誤 */ }8.2.2 輸入框樣式
後台輸入框基於 shadcn/ui Input 元件：
後台輸入框設計：
Light Mode:
┌──────────────────────────────────┐
│ Label │
│ ┌────────────────────────────┐ │
│ │ placeholder │ │ ← bg-background, border-input
│ └────────────────────────────┘ │ ← focus: ring-ring
│ Error message │ ← text-destructive
└──────────────────────────────────┘
Dark Mode:
┌──────────────────────────────────┐
│ Label (text-foreground) │
│ ┌────────────────────────────┐ │
│ │ placeholder │ │ ← bg-input/30, border-input
│ └────────────────────────────┘ │ ← focus: ring-ring
│ Error message │
└──────────────────────────────────┘8.2.3 必填標記
必填欄位：
Email * ← 紅色星號
┌──────────────┐
│ │
└──────────────┘
選填欄位：
Description
┌──────────────┐
│ │
└──────────────┘8.2.4 Select 下拉選單
使用 shadcn/ui Select（基於 Radix Select）：
Status
┌───────────────┐
│ All ▼ │ ← 點擊展開
└───────────────┘
│
▼
┌───────────────┐
│ ● All │ ← 當前選中
│ Active │
│ Inactive │
│ Pending │
└───────────────┘8.3 通用表單規則
8.3.1 欄位驗證回饋
| 狀態 | 視覺回饋 |
|---|---|
| 預設 | 標準邊框色 |
| 焦點 | 品牌色/ring 色邊框 + focus ring |
| 錯誤 | 紅色邊框 + 紅色錯誤文字在欄位下方 |
| 停用 | 降低不透明度 (opacity-50)，禁止互動 |
| 唯讀 | 背景色略深，無法編輯 |
8.3.2 表單按鈕配置
| 場景 | 主要按鈕 | 次要按鈕 | 排列 |
|---|---|---|---|
| 新增 | 儲存 (Save) | 取消 (Cancel) | 右對齊 |
| 編輯 | 更新 (Update) | 取消 (Cancel) | 右對齊 |
| 刪除確認 | 刪除 (Delete, destructive) | 取消 | Dialog 內 |
| 篩選 | 搜尋 (Search, secondary) | 重置 (Reset, ghost) | 左對齊 |
8.3.3 載入狀態
提交中按鈕：
┌──────────────────┐
│ [Spinner] 處理中 │ ← spinner 取代文字，disabled
└──────────────────┘8.3.4 日期選擇器
- 前台：原生
<input type="date">，搭配暗色主題樣式 - 後台：shadcn/ui
<Input type="date">，搭配h-8緊湊高度 - 格式：依語系自動格式化（亞洲 YYYY/MM/DD，英文 MM/DD/YYYY）
8.3.5 數字精度
| 用途 | 小數位 | 格式範例 |
|---|---|---|
| 金額 (USD) | 6 位 | $1,234.567890 |
| 匯率 | 10 位 | 32.5000000000 |
| 百分比 | 2 位 | 15.50% |
| 倍率 | 2 位 | 1.50x |
第 9 章：表格規範
9.1 SimpleTable 使用規範
9.1.1 欄位類型
SimpleTable 透過 cell render function 支援多種欄位類型：
純文字欄位
typescript
{ key: "name", header: t("name"), cell: (item) => item.name }數字欄位（右對齊）
typescript
{
key: "amount",
header: t("amount"),
cell: (item) => `$${Number(item.amount).toFixed(6)}`,
className: "text-right",
headerClassName: "text-right"
}日期欄位
typescript
{
key: "createdAt",
header: t("date"),
cell: (item) => new Date(item.createdAt).toLocaleDateString()
}Badge 欄位
typescript
{
key: "status",
header: t("status"),
cell: (item) => (
<StatusBadge
status={item.status}
label={item.status === 1 ? t("active") : t("inactive")}
colorMap={{ 1: "emerald", 0: "rose" }}
/>
)
}操作欄位
typescript
{
key: "actions",
header: t("actions"),
cell: (item) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon-xs">
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => handleEdit(item)}>
<Pencil /> {t("edit")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(item)}>
<Trash2 /> {t("delete")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}9.1.2 表格設計規格
| 屬性 | 值 |
|---|---|
| 容器 | rounded-lg border |
| 表頭背景 | bg-muted/50 (shadcn/ui Table 預設) |
| 表頭文字 | text-muted-foreground text-xs font-medium |
| 資料行高度 | h-12 ~ h-14 (48px ~ 56px) |
| 行 hover | hover:bg-muted/50 |
| 分隔線 | border-b border-border |
| 空狀態高度 | py-20 |
9.1.3 動態行樣式
使用 rowClassName prop 根據資料動態設定行樣式：
typescript
// VIP 返水頁面：有修改的行用琥珀色高亮
rowClassName={(item) =>
hasChanges(item) ? "bg-amber-50/50 dark:bg-amber-950/20" : ""
}9.2 FilterBar 使用規範
9.2.1 欄位配置範例
typescript
const fields: FilterField[] = [
{ type: "text", key: "keyword", label: t("keyword"), placeholder: t("searchPlaceholder") },
{
type: "select", key: "status", label: t("status"),
options: [
{ label: tc("all"), value: "" },
{ label: t("active"), value: "1" },
{ label: t("inactive"), value: "0" },
]
},
{ type: "date", key: "startDate", label: tc("startDate") },
{ type: "date", key: "endDate", label: tc("endDate") },
];9.2.2 互動行為
| 操作 | 行為 |
|---|---|
| 文字輸入 | 即時更新 values，不自動搜尋 |
| Enter 鍵 | 在文字/日期欄位中按 Enter 觸發搜尋 |
| Select 變更 | 即時更新 values |
| 搜尋按鈕 | 呼叫 onSearch()，通常重置 page=1 |
| 重置按鈕 | 清空所有欄位值 + 呼叫 onReset() |
9.2.3 響應式行為
桌面 (lg+)：水平排列
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ [搜尋] [重置]
│ keyword │ │ status ▼ │ │ startDate│ │ endDate │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
手機 (< md)：自動換行
┌──────────┐ ┌──────────┐
│ keyword │ │ status ▼ │
└──────────┘ └──────────┘
┌──────────┐ ┌──────────┐
│ startDate│ │ endDate │
└──────────┘ └──────────┘
[搜尋] [重置]9.3 Pagination 使用規範
9.3.1 分頁 UI 規格
完整分頁：
┌──────────────────────────────────────────────┐
│ 100 total < Previous 3/10 Next>│
└──────────────────────────────────────────────┘
僅一頁（不顯示分頁）：
（Pagination 元件不渲染）9.3.2 分頁配置
| 屬性 | 預設值 | 說明 |
|---|---|---|
| 每頁筆數 | 20 | 後端 API 預設 |
| 顯示總筆數 | 是 | "N total" 左對齊 |
| 上/下頁按鈕 | variant="outline" size="sm" | 含 Chevron 圖標 |
| 頁碼顯示 | "N / M" 格式 | 居中對齊 |
| 首頁/末頁禁用 | 是 | 第一頁禁用上一頁，最後一頁禁用下一頁 |
9.4 前台表格/列表
前台的列表通常使用卡片式佈局而非傳統表格：
9.4.1 卡片列表（交易紀錄等）
┌──────────────────────────────────────┐
│ 2024/01/15 10:30 │
│ 存款 - ATM 轉帳 │
│ +$100.000000 [approved]│
├──────────────────────────────────────┤
│ 2024/01/14 15:20 │
│ 存款 - 信用卡 │
│ +$200.000000 [pending] │
├──────────────────────────────────────┤
│ 2024/01/13 09:15 │
│ 提領 - 銀行帳戶 │
│ -$50.000000 [completed]│
└──────────────────────────────────────┘9.4.2 Grid 卡片（遊戲、活動等）
手機 (2 欄)：
┌──────┐ ┌──────┐
│ │ │ │
│ Game │ │ Game │
│ 1 │ │ 2 │
└──────┘ └──────┘
┌──────┐ ┌──────┐
│ │ │ │
│ Game │ │ Game │
│ 3 │ │ 4 │
└──────┘ └──────┘
桌面 (4~6 欄)：
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ G 1 │ │ G 2 │ │ G 3 │ │ G 4 │ │ G 5 │ │ G 6 │
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘第 10 章：圖標規範
10.1 圖標庫選擇
| 專案 | 圖標庫 | 使用方式 | 說明 |
|---|---|---|---|
| 前台 (c9-ec) | Lucide Icons | <Icon name="i-lucide-xxx" /> | Nuxt UI 內建圖標系統 |
| 前台 (c9-ec) | Noto Emoji | <Icon name="noto:crown" /> | 用於 VIP 等裝飾性 emoji |
| 前台 (c9-ec) | Material Symbols | <Icon name="material-symbols:xxx" /> | 部分特殊圖標 |
| 後台 (c9-ims) | Lucide React | <Home className="h-4 w-4" /> | React 元件形式 |
10.2 前台圖標使用
10.2.1 Lucide Icons (主要圖標集)
前台透過 Nuxt UI 的 Icon 元件使用 Lucide 圖標：
vue
<Icon name="i-lucide-home" />
<Icon name="i-lucide-search" />
<Icon name="i-lucide-settings" />常用前台圖標：
| 圖標 | 名稱 | 用途 |
|---|---|---|
i-lucide-home | Home | 首頁導航 |
i-lucide-gamepad-2 | Gamepad | 遊戲大廳 |
i-lucide-search | Search | 搜尋 |
i-lucide-bell | Bell | 通知 |
i-lucide-wallet | Wallet | 錢包 |
i-lucide-credit-card | CreditCard | 存款/信用卡 |
i-lucide-arrow-down-to-line | ArrowDownToLine | 提領 |
i-lucide-trophy | Trophy | VIP |
i-lucide-users | Users | 代理/下線 |
i-lucide-gift | Gift | 活動 |
i-lucide-settings | Settings | 設定 |
i-lucide-log-out | LogOut | 登出 |
i-lucide-copy | Copy | 複製 |
i-lucide-eye | Eye | 顯示密碼 |
i-lucide-eye-off | EyeOff | 隱藏密碼 |
i-lucide-check | Check | 確認/選中 |
i-lucide-x | X | 關閉 |
i-lucide-chevron-left | ChevronLeft | 返回 |
i-lucide-chevron-right | ChevronRight | 前進 |
i-lucide-chevron-down | ChevronDown | 展開 |
10.2.2 主題圖標
每組主題色對應一個特定圖標：
| 主題 | 圖標 | Lucide 名稱 |
|---|---|---|
| Emerald | 葉子 | i-lucide-leaf |
| Amber | 火焰 | i-lucide-flame |
| Sky | 雲朵 | i-lucide-cloud |
| Violet | 閃耀 | i-lucide-sparkles |
| Rose | 愛心 | i-lucide-heart |
| Cyan | 水滴 | i-lucide-droplets |
10.2.3 Noto Emoji Icons
用於裝飾性圖標（VIP 等級、獎勵等）：
| 圖標 | 名稱 | 用途 |
|---|---|---|
noto:crown | 皇冠 | VIP 等級 |
noto:gem-stone | 寶石 | VIP 福利 |
noto:fire | 火焰 | 熱門遊戲 |
noto:star | 星星 | 評分/收藏 |
noto:money-bag | 錢袋 | 佣金/獎勵 |
10.2.4 BottomBar 動態圖標
BottomBar 的圖標支援三種格式：
1. Lucide 圖標名稱：
icon: "lucide:home" → <Icon name="i-lucide-home" />
2. R2 圖片 URL：
icon: "https://r2.example.com/icons/home.png" → <img src="..." />
3. Emoji 圖標：
icon: "noto:crown" → <Icon name="noto:crown" />10.3 後台圖標使用
10.3.1 Lucide React
後台使用 Lucide React 元件，直接從 lucide-react 匯入：
tsx
import { Home, Settings, Users, BarChart3 } from "lucide-react";
<Home className="h-4 w-4" />
<Settings className="size-4" />10.3.2 圖標尺寸規範
| 場景 | 尺寸 | Tailwind Class |
|---|---|---|
| 行內圖標 | 14px | h-3.5 w-3.5 |
| 預設圖標 | 16px | h-4 w-4 或 size-4 |
| 按鈕圖標 | 16px | 自動 (Button 內建 [&_svg]:size-4) |
| Sidebar 圖標 | 20px | h-5 w-5 |
| 大圖標 | 24px | h-6 w-6 |
| 空狀態圖標 | 48px+ | h-12 w-12 |
10.3.3 Sidebar 導航圖標完整對照
| 子項目 | 圖標 |
|---|---|
| Dashboard | LayoutDashboard |
| 管理員管理 | UserCog |
| 群組管理 | UsersRound |
| 操作紀錄 | FileText |
| 雲端儲存 | HardDrive |
| 雲端儲存日誌 | ClipboardCheck |
| 域名設置 | Globe |
| 三方登入 | KeyRound |
| 遊戲商配置 | Joystick |
| 服務商配置 | Server |
| 客服配置 | Settings2 |
| 全部玩家 | UsersRound |
| 新註冊玩家 | UserPlus |
| 在線玩家 | Radio |
| 登入失敗紀錄 | ShieldX |
| 活動管理 | Gift |
| 活動標籤 | Tags |
| 站內信 | FileText |
| 調整餘額 | DollarSign |
| 存款設置 | Building2 |
| 存款訂單 | CalendarDays |
| 提款訂單 | ArrowDownToLine |
| 銀行卡 | Wallet |
| 加密地址 | Bitcoin |
| 信用卡 | CreditCard |
| 代理列表 | Users2 |
| 佣金費率 | Percent |
| 結算紀錄 | Link2 |
| VIP 等級 | Trophy |
| VIP 返水 | Star |
| 遊戲供應商 | Dices |
| 遊戲類型 | Gamepad2 |
| IP 規則 | ShieldAlert |
| IP 檢查 | Fingerprint |
| 遊戲黑名單 | Ban |
| 玩家報表 | FileBarChart |
| 投注紀錄 | Archive |
| 總覽 | PieChart |
| 損益報表 | TrendingDown |
| 遊戲報表 | BarChart3 |
10.3.4 操作按鈕圖標
| 操作 | 圖標 | 使用位置 |
|---|---|---|
| 新增 | Plus | 列表頁「新增」按鈕 |
| 編輯 | Pencil | 操作下拉選單 |
| 刪除 | Trash2 | 操作下拉選單 (destructive) |
| 檢視 | Eye | 操作下拉選單 |
| 下載 | Download | 匯出按鈕 |
| 上傳 | Upload | 上傳按鈕 |
| 重新整理 | RefreshCw | 重新載入按鈕 |
| 搜尋 | Search | FilterBar 搜尋按鈕 |
| 重置 | RotateCcw | FilterBar 重置按鈕 |
| 複製 | Copy | SiteTabs 複製按鈕 |
| 更多 | MoreHorizontal | 操作觸發按鈕 |
| 展開 | ChevronDown | Sidebar 群組展開 |
| 上一頁 | ChevronLeft | Pagination |
| 下一頁 | ChevronRight | Pagination |
10.3.5 狀態指示圖標
| 狀態 | 圖標 | 色彩 |
|---|---|---|
| 成功 | CheckCircle | emerald |
| 錯誤 | XCircle | rose |
| 警告 | AlertTriangle | amber |
| 資訊 | Info | sky |
| 載入中 | Loader2 (animate-spin) | muted |
| 無權限 | ShieldX | rose |
第 11 章：動畫與過渡
11.1 動畫原則
- 有目的性：動畫用來傳達狀態變化或引導注意力，不純粹裝飾
- 快速回饋：互動回饋 150ms 內完成
- 不阻擋操作：動畫不應延遲用戶操作
- 可感知但不干擾：微妙的過渡讓體驗流暢但不分散注意力
11.2 前台動畫
11.2.1 SplashScreen 淡出
應用程式載入完成時 SplashScreen 退場：
Time: 0ms ──────── 500ms
不透明: 1.0 ──────── 0.0
timing-function: ease-out
觸發條件: store.getIsReady === true
完成後: 從 DOM 移除11.2.2 Banner 輪播
Banner 自動輪播：
Slide 1 ──[5s]──> Slide 2 ──[5s]──> Slide 3 ──[5s]──> ...
過渡方式: slide (水平滑動)
過渡時間: 300ms
timing-function: ease
手勢: 支援 swipe left/right
指示器: 底部圓點，活動項主題色11.2.3 Sidebar 滑入/滑出（手機版）
開啟：
Position: -256px ──────── 0px
Duration: 300ms
Timing: ease
關閉：
Position: 0px ──────── -256px
Duration: 300ms
Timing: ease
遮罩：
Opacity: 0 ──────── 0.5 (bg-black/50)11.2.4 BottomBar 中央按鈕脈衝
脈衝動畫 (animate-ping-slow)：
外圈: scale(1) ──> scale(1.5) ──> scale(1)
不透明: 0.25 ──────> 0 ──────────> 0.25
Duration: 持續循環
色彩: bg-amber-500/2511.2.5 Hover 狀態過渡
所有 hover 過渡：
Duration: 150ms
Property: opacity, background-color, transform, box-shadow
Timing: ease
範例：
遊戲卡片 hover:
- background: bg-white/5 → bg-white/10
- shadow: none → shadow-[0_0_16px_-2px_rgba(var(--c9-glow),0.4)]
- transform: translateY(0) → translateY(-2px)11.2.6 Modal 進出場
Modal 開啟：
Overlay: opacity 0 → 0.6 (200ms ease)
Content: opacity 0, scale 0.95 → opacity 1, scale 1 (200ms ease)
Modal 關閉：
Overlay: opacity 0.6 → 0 (150ms ease)
Content: opacity 1, scale 1 → opacity 0, scale 0.95 (150ms ease)11.2.7 Toast 通知
前台使用 Nuxt UI 內建 Toast：
Toast 進場：
Position: top-right
Direction: slide-in from right
Duration: 300ms
Toast 自動消失：
延遲: 3000ms ~ 5000ms (依類型)
動畫: fade-out (200ms)11.3 後台動畫
11.3.1 Sonner Toast
Toast 進場（Sonner）：
Position: top-right
Direction: slide-in from top
Duration: 300ms
richColors 模式：
- success: 綠色背景
- error: 紅色背景
- warning: 黃色背景
- info: 藍色背景11.3.2 Radix Dialog 過渡
Dialog 開啟：
Overlay: data-[state=open]:animate-in fade-in-0
Content: data-[state=open]:animate-in fade-in-0 zoom-in-95
Duration: 200ms
Dialog 關閉：
Overlay: data-[state=closed]:animate-out fade-out-0
Content: data-[state=closed]:animate-out fade-out-0 zoom-out-95
Duration: 200ms11.3.3 Loading Spinner
Loader2 旋轉動畫：
Animation: rotate 360deg
Duration: 1s
Timing: linear
Iteration: infinite
Class: animate-spin11.3.4 Skeleton 載入佔位
Shimmer 動畫（如果有 Skeleton 元件）：
Background: linear-gradient 位移
Direction: left → right
Duration: 1.5s
Iteration: infinite11.3.5 Sidebar 群組展開/收合
群組展開：
Height: 0 → auto (max-height transition)
Duration: 200ms
Timing: ease
群組收合：
Height: auto → 0
Duration: 200ms
Timing: ease
ChevronDown 旋轉：
展開: rotate(0deg)
收合: rotate(-90deg)
Duration: 200ms11.4 頁面過渡
前台
前台不使用頁面過渡動畫（instant swap），確保導航速度最快。
後台
後台同樣不使用頁面過渡動畫，但 AdminContentWrapper 的 key 機制會在站點 切換時觸發完整 remount，視覺上類似一次刷新。
ScrollToTop
路由變更後自動捲至頂部：
Route change detected (MutationObserver / pushState intercept)
→ window.scrollTo({ top: 0, behavior: "instant" })11.5 動畫時長參考表
| 動畫類型 | 時長 | 用途 |
|---|---|---|
| Hover 過渡 | 150ms | 背景色、不透明度、陰影 |
| Modal 進場 | 200ms | Dialog、AlertDialog |
| Modal 退場 | 150ms | 快速關閉 |
| Toast 進場 | 300ms | 通知滑入 |
| Sidebar 滑動 | 300ms | 手機版 Sidebar |
| SplashScreen 淡出 | 500ms | 啟動畫面退場 |
| Spinner 旋轉 | 1000ms | 載入指示器 |
| 脈衝動畫 | 持續 | BottomBar 中央按鈕 |
| Banner 切換 | 300ms | 輪播過渡 |
| Banner 間隔 | 5000ms | 自動播放間隔 |
第 12 章：多語系 UI 適配
12.1 支援語系
| 語系代碼 | 語言 | 文字方向 | 特殊需求 |
|---|---|---|---|
| zh-TW | 繁體中文 | LTR | 無 |
| en-US | 英文 | LTR | 文字較長 (約 1.5x 中文) |
| zh-CN | 簡體中文 | LTR | 無 |
| th-TH | 泰文 | LTR | 需要較高行高，文字較長 |
| vi-VN | 越南文 | LTR | 含變音符號，垂直高度稍高 |
12.2 文字長度適配
12.2.1 語系文字長度比較
以按鈕文字為例：
| 功能 | zh-TW | en-US | zh-CN | th-TH | vi-VN |
|---|---|---|---|---|---|
| 儲存 | 儲存 (2) | Save (4) | 保存 (2) | บันทึก (6) | Luu (3) |
| 取消 | 取消 (2) | Cancel (6) | 取消 (2) | ยกเลิก (6) | Huy (3) |
| 搜尋 | 搜尋 (2) | Search (6) | 搜索 (2) | ค้นหา (5) | Tim kiem (8) |
| 刪除 | 刪除 (2) | Delete (6) | 删除 (2) | ลบ (2) | Xoa (3) |
| 確認 | 確認 (2) | Confirm (7) | 确认 (2) | ยืนยัน (6) | Xac nhan (8) |
12.2.2 適配策略
按鈕
策略：設定最小寬度 + 內邊距，不使用固定寬度
✅ 正確做法：
<Button className="min-w-[80px] px-4">
{t("save")}
</Button>
❌ 錯誤做法：
<Button className="w-[60px]">
{t("save")}
</Button>導航項目
策略：使用 flex-wrap 防止溢出，文字過長時 truncate
Sidebar 項目：
- 展開模式：完整顯示文字
- 收合模式：僅顯示圖標 + tooltip 顯示完整文字
BottomBar 項目：
- 文字使用 text-[11px]
- 必要時使用 line-clamp-1 截斷表格表頭
策略：允許 wrap 或使用 whitespace-nowrap + 水平捲動
<TableHead className="whitespace-nowrap">
{t("columnHeader")}
</TableHead>FilterBar 標籤
策略：固定行高，文字 truncate
<Label className="h-4 text-xs leading-4 whitespace-nowrap text-muted-foreground">
{field.label}
</Label>12.2.3 文字截斷
| 場景 | CSS Class | 效果 |
|---|---|---|
| 單行截斷 | truncate | 文字超出時顯示 ... |
| 多行截斷 | line-clamp-2 | 最多 2 行，超出顯示 ... |
| 不換行 | whitespace-nowrap | 防止文字換行 |
| 自動換行 | flex-wrap | 容器內元素自動換行 |
12.3 數字與日期格式
12.3.1 數字格式
| 語系 | 千分位分隔 | 小數點 | 範例 |
|---|---|---|---|
| zh-TW | , (逗號) | . (點) | 1,234,567.89 |
| en-US | , (逗號) | . (點) | 1,234,567.89 |
| zh-CN | , (逗號) | . (點) | 1,234,567.89 |
| th-TH | , (逗號) | . (點) | 1,234,567.89 |
| vi-VN | . (點) | , (逗號) | 1.234.567,89 |
注意：越南文的千分位和小數點符號與其他語系相反。
12.3.2 日期格式
| 語系 | 格式 | 範例 |
|---|---|---|
| zh-TW | YYYY/MM/DD HH:mm | 2024/01/15 10:30 |
| en-US | MM/DD/YYYY HH:mm | 01/15/2024 10:30 |
| zh-CN | YYYY/MM/DD HH:mm | 2024/01/15 10:30 |
| th-TH | DD/MM/YYYY HH:mm | 15/01/2024 10:30 |
| vi-VN | DD/MM/YYYY HH:mm | 15/01/2024 10:30 |
12.3.3 貨幣格式
系統統一使用 USD，格式固定為：
$1,234.567890
^ ^
$ 前綴 6 位小數（金額精度）
$0.000000 ← 零值
-$50.000000 ← 負值（提領等）12.4 泰文特殊處理
12.4.1 行高問題
泰文字符包含上標記 (sara am, mai ek, etc.) 和下標記 (sara u, sara uu)， 需要比其他語系更高的行高：
中文/英文 line-height: 1.5 (24px @ 16px)
泰文建議 line-height: 1.75 (28px @ 16px)12.4.2 字體確認
泰文字體需確認：
- 系統字體 (Tahoma, "Microsoft Sans Serif") 支援泰文
- Geist 字體需確認泰文支援，不支援則 fallback 到 system-ui
- iOS/macOS 預設支援泰文 (Thonburi 字體)
- Android 預設支援泰文 (Noto Sans Thai)
12.4.3 泰文不斷行問題
泰文沒有空格分隔單詞，CSS word-break 需要特殊處理：
css
/* 泰文斷行 */
[lang="th"] {
word-break: break-word;
overflow-wrap: break-word;
}12.5 越南文特殊處理
12.5.1 變音符號
越南文使用大量變音符號 (diacritics)，如 ẻ, ệ, ỉ, ọ, ử 等。 這些符號可能影響：
- 垂直對齊：變音符號在字符上方/下方，需要足夠的行高
- 字體渲染：確認字體完整支援 Unicode 越南文區塊
12.5.2 文字長度
越南文通常比中文長，但比泰文短：
中文: 儲存 (2 字元)
英文: Save (4 字元)
越南文: Luu (3-8 字元，含聲調)
泰文: บันทึก (6+ 字元)12.6 RTL 考量（未來擴展）
目前所有 5 種支援語系皆為 LTR (Left-to-Right) 排列。 如果未來需要支援阿拉伯文 (ar) 或希伯來文 (he)，需要以下調整：
12.6.1 Tailwind RTL 工具
css
/* Tailwind v4 RTL 支援 */
.rtl\:mr-4:where([dir="rtl"] *) {
margin-right: 1rem;
}12.6.2 方向感知間距
使用邏輯屬性取代物理屬性：
| 物理屬性 | 邏輯屬性 | Tailwind |
|---|---|---|
margin-left | margin-inline-start | ms-4 |
margin-right | margin-inline-end | me-4 |
padding-left | padding-inline-start | ps-4 |
padding-right | padding-inline-end | pe-4 |
text-align: left | text-align: start | text-start |
text-align: right | text-align: end | text-end |
12.6.3 現有注意事項
即使目前不支援 RTL，建議在新代碼中：
- 優先使用
gap而非margin-left/right - 使用
flex和justify-between而非固定方向的 margin - 圖標方向（箭頭等）不硬編碼
12.7 前台語系切換 UI 流程
12.7.1 語系切換流程
用戶操作流程：
1. 點擊 Sidebar 或 Setting 中的「語言」選項
→ 開啟 Locale.vue Modal
2. Modal 顯示 5 個語系選項
→ 當前語系預選（radio 高亮）
3. 用戶選擇新語系
→ 寫入 i18n_redirected cookie
→ 頁面 reload（Nuxt i18n 讀取新 cookie）
→ 全站文字切換為新語系
4. 後續 API 請求
→ useHttp 從 cookie 讀取 locale
→ 注入 locales header
→ 後端返回對應語系的錯誤訊息12.7.2 後台語系切換流程
用戶操作流程：
1. 點擊 Header 語系切換按鈕
→ Dropdown 展開
2. 選擇新語系
→ router.replace(pathname, { locale: nextLocale })
→ next-intl 更新 NEXT_LOCALE cookie
→ 頁面重新渲染
3. Locale Guard 檢查
→ 若站點不支援該語系
→ 自動導向站點預設語系12.7.3 登入後語系不一致處理
流程：
1. 用戶登入成功
→ 取得 userDetail.locale (用戶偏好語系)
2. Layout 元件檢測
→ 比對 cookie locale vs userDetail.locale
3. 若不一致
→ 彈出 Modal 提示「是否切換至您偏好的語系？」
→ 確認：切換語系
→ 取消：維持當前語系12.8 多語系翻譯 Key 規範
12.8.1 前台 (c9-ec) i18n
- 格式：flat key-value JSON（
"game.gameLobby": "遊戲大廳"） - 使用：
$t('key')(template) 或t('key')(script) - 5 個語系檔同步更新：
i18n/locales/{zh-TW,en-US,zh-CN,th-TH,vi-VN}.json
12.8.2 後台 (c9-ims) i18n
- 格式：flat dot-notation JSON（
"system.admins.title": "管理員管理"） - 使用：
const t = useTranslations("system.admins"); t("title") - 通用 key：
const tc = useTranslations("common"); tc("save") - 5 個語系檔同步更新：
src/messages/{zh-TW,en-US,zh-CN,th-TH,vi-VN}.json
12.8.3 ICU 格式注意事項
後台使用 next-intl（ICU 格式），大括號有特殊意義：
json
// 錯誤 — 大括號被解析為 ICU 變數
"hint": "格式為 {變數名}" // → IntlError: FORMATTING_ERROR
// 正確 — 使用單引號轉義
"hint": "格式為 '{'變數名'}'" // → 顯示: 格式為 {變數名}12.8.4 常用通用翻譯 Key
| Key | zh-TW | en-US |
|---|---|---|
common.save | 儲存 | Save |
common.cancel | 取消 | Cancel |
common.search | 搜尋 | Search |
common.reset | 重置 | Reset |
common.all | 全部 | All |
common.noData | 沒有資料 | No Data |
common.actions | 操作 | Actions |
common.startDate | 開始日期 | Start Date |
common.endDate | 結束日期 | End Date |
common.index | 序號 | Index |
common.allSites | 全部站點 | All Sites |
system.siteConfig.defaultSite | 預設 | Default |
system.siteConfig.copyFromDefault | 同預設站點 | Copy from Default |
附錄
附錄 A：頁面級 UI 規格明細
A.1 前台頁面 UI 規格 (20 頁)
A.1.1 首頁 (index.vue)
┌──────────────────────────────────────────────────────┐
│ [Banner Carousel — 自動輪播 5s，支援手勢滑動] │
│ ┌──────────────────────────────────────────────────┐│
│ │ ││
│ │ Banner Image (16:9 mobile / 21:9 desktop)││
│ │ ││
│ │ ● ○ ○ ○ ○ ││
│ └──────────────────────────────────────────────────┘│
├──────────────────────────────────────────────────────┤
│ 即時賽事 │
│ ┌────────┐ ┌────────┐ ┌────────┐ ← 水平捲動 │
│ │ Team A │ │ Team C │ │ Team E │ │
│ │ 2 : 1 │ │ 0 : 0 │ │ 3 : 2 │ │
│ │ Team B │ │ Team D │ │ Team F │ │
│ │ LIVE │ │ HT │ │ FT │ │
│ └────────┘ └────────┘ └────────┘ │
├──────────────────────────────────────────────────────┤
│ 推薦活動 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ← 水平捲動 │
│ │ [Image] │ │ [Image] │ │ [Image] │ │
│ │ Title 1 │ │ Title 2 │ │ Title 3 │ │
│ │ Desc... │ │ Desc... │ │ Desc... │ │
│ └──────────┘ └──────────┘ └──────────┘ │
├──────────────────────────────────────────────────────┤
│ 了解更多 (FAQ) │
│ ┌──────────────────────────────────────────────┐ │
│ │ ▶ 如何開始遊戲？ │ │
│ ├──────────────────────────────────────────────┤ │
│ │ ▶ 如何存款？ │ │
│ ├──────────────────────────────────────────────┤ │
│ │ ▶ 如何提領？ │ │
│ └──────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────┘A.1.2 遊戲大廳 (game/index.vue)
┌──────────────────────────────────────────────────────┐
│ [搜尋欄] 🔍 搜尋遊戲... │
├──────────────────────────────────────────────────────┤
│ 最近遊玩 (登入且有紀錄時) │
│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ← 水平捲動 (最多10) │
│ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘ │
├──────────────────────────────────────────────────────┤
│ [全部] [體育] [老虎機] [真人] [彩票] [棋牌] [電競] ←Tab │
├──────────────────────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │[Img] │ │[Img] │ │[Img] │ │[Img] │ │
│ │Name 1│ │Name 2│ │Name 3│ │Name 4│ │
│ │23遊戲 │ │45遊戲 │ │12遊戲 │ │67遊戲 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │[Img] │ │[Img] │ │[Img] │ │[Img] │ │
│ │Name 5│ │Name 6│ │Name 7│ │Name 8│ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ │
│ [載入更多] │
└──────────────────────────────────────────────────────┘
Grid 欄數：
手機: 2 欄 (grid-cols-2)
平板: 3 欄 (sm:grid-cols-3)
桌面: 4 欄 (lg:grid-cols-4)
大桌面: 6 欄 (xl:grid-cols-6)A.1.3 遊戲啟動 (game/play.vue)
┌──────────────────────────────────────────────────────┐
│ │
│ │
│ [Game iframe] │
│ width: 100% │
│ height: 100vh │
│ │
│ │
│ │
│ │
└──────────────────────────────────────────────────────┘
保護機制：
- 未登入 → 自動導回首頁
- 離開遊戲 → 彈出確認 Modal
- 載入中 → 居中 spinnerA.1.4 VIP 中心 (user/vip.vue)
┌──────────────────────────────────────────────────────┐
│ VIP 中心 │
├──────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────┐ │
│ │ [Crown] VIP Level 5 │ │
│ │ │ │
│ │ ████████████████████████░░░░░░░░░░ 62% │ │
│ │ 投注累積：$12,500 / $20,000 │ │
│ │ 下一等級：VIP Level 6 │ │
│ └──────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────┤
│ VIP 等級一覽 │
│ ┌──────┬──────────┬──────────┬──────────────────┐ │
│ │ 等級 │ 名稱 │ 最低投注 │ 福利 │ │
│ ├──────┼──────────┼──────────┼──────────────────┤ │
│ │ VIP0 │ Bronze │ $0 │ 基礎反水 │ │
│ │ VIP1 │ Silver │ $100 │ +提領優先 │ │
│ │ VIP2 │ Gold │ $500 │ +專屬客服 │ │
│ │ ... │ ... │ ... │ ... │ │
│ └──────┴──────────┴──────────┴──────────────────┘ │
├──────────────────────────────────────────────────────┤
│ 我的反水 │
│ 本月已領取：$12.34 │
│ 總計已領取：$456.78 │
├──────────────────────────────────────────────────────┤
│ 反水率表格 │
│ ┌──────┬──────┬──────┬──────┬──────┬──────┬─────┐ │
│ │ │VIP 0 │VIP 1 │VIP 2 │VIP 3 │VIP 4 │... │ │
│ ├──────┼──────┼──────┼──────┼──────┼──────┼─────┤ │
│ │ 體育 │0.10% │0.15% │0.20% │0.25% │0.30% │... │ │
│ │ 老虎機│0.20% │0.30% │0.40% │0.50% │0.60% │... │ │
│ │ 真人 │0.15% │0.20% │0.25% │0.30% │0.35% │... │ │
│ │ ... │ ... │ ... │ ... │ ... │ ... │... │ │
│ └──────┴──────┴──────┴──────┴──────┴──────┴─────┘ │
└──────────────────────────────────────────────────────┘A.1.5 代理推廣 (user/affiliate.vue)
┌──────────────────────────────────────────────────────┐
│ 代理中心 │
├──────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│ │ 總下線 │ │ 本月佣金 │ │ 可提領餘額 │ │
│ │ 156 │ │ $1,234 │ │ $5,678 │ │
│ └──────────┘ └──────────┘ └──────────────┘ │
├──────────────────────────────────────────────────────┤
│ 推薦連結 │
│ ┌──────────────────────────────────────┐ [複製] │
│ │ https://c9.com/ref/ABC123 │ │
│ └──────────────────────────────────────┘ │
│ 推薦碼：ABC123 [複製] │
├──────────────────────────────────────────────────────┤
│ [儀表板] [下線] [佣金] [結算] [提領] [聯盟] ← Tab │
├──────────────────────────────────────────────────────┤
│ │
│ (根據 Tab 顯示對應內容) │
│ │
└──────────────────────────────────────────────────────┘A.2 後台關鍵頁面 UI 規格
A.2.1 儀表板 (dashboard)
┌──────────────────────────────────────────────────────┐
│ Dashboard │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ 總用戶 │ │ 今日新增 │ │ 總營收 │ │ 在線人數 ││
│ │ 12,345 │ │ 56 │ │$1,234,567│ │ 89 ││
│ │ ▲ +12% │ │ ▲ +5% │ │ ▲ +8% │ │ ▼ -3% ││
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘│
│ │
│ ┌───────────────────────────┐ ┌────────────────────┐│
│ │ 營收趨勢 │ │ 遊戲類型分布 ││
│ │ │ │ ││
│ │ 1200─┐ │ │ ┌──┐ ││
│ │ 1000─┤ ╱\ │ │ / \ ││
│ │ 800─┤ ╱ \ ╱\ │ │ │ 45% │ ││
│ │ 600─┤╱ \╱ \ │ │ \ / ││
│ │ 400─┤ \ │ │ └──┘ ││
│ │ └────────────────── │ │ Slot Live Sports ││
│ │ Jan Feb Mar Apr May │ │ ││
│ └───────────────────────────┘ └────────────────────┘│
│ │
│ 每日摘要 │
│ ┌──────┬──────┬──────┬──────┬──────┬───────────────┐│
│ │ 日期 │新用戶 │ 存款 │ 提領 │ 投注 │ 淨利 ││
│ ├──────┼──────┼──────┼──────┼──────┼───────────────┤│
│ │03/01 │ 12 │$5.2K │$1.3K │$45K │ $3,900 ││
│ │02/28 │ 15 │$6.1K │$2.0K │$52K │ $4,100 ││
│ │02/27 │ 8 │$3.8K │$0.9K │$38K │ $2,900 ││
│ └──────┴──────┴──────┴──────┴──────┴───────────────┘│
└──────────────────────────────────────────────────────┘A.2.2 管理員管理 — 列表 (system/admins)
┌──────────────────────────────────────────────────────┐
│ 管理員管理 [+ 新增管理員] │
├──────────────────────────────────────────────────────┤
│ 關鍵字 群組 │
│ [___________] [All ▼] [搜尋] [重置] │
├──────────────────────────────────────────────────────┤
│ ┌──┬──────────┬──────────┬────────┬──────┬────────┐│
│ │# │ Email │ 群組 │ 狀態 │ 建立 │ 操作 ││
│ ├──┼──────────┼──────────┼────────┼──────┼────────┤│
│ │1 │admin@... │ Root │[active]│01/15│ [...] ││
│ │2 │user@... │ General │[active]│01/14│ [...] ││
│ │3 │test@... │ Custom │[inactive│01/13│ [...] ││
│ └──┴──────────┴──────────┴────────┴──────┴────────┘│
│ │
│ 3 total < Previous 1/1 Next>│
└──────────────────────────────────────────────────────┘
操作下拉選單 ([...])：
┌──────────┐
│ ✏ 編輯 │
│ 🗑 刪除 │
└──────────┘A.2.3 VIP 返水設定 (vip/rebates)
┌──────────────────────────────────────────────────────┐
│ VIP 返水設定 │
├──────────────────────────────────────────────────────┤
│ SiteTabs │
│ [C9 娛樂城 預設] [D1] [E2] [同預設站點] │
├──────────────────────────────────────────────────────┤
│ [體育] [老虎機] [真人] [彩票] [棋牌] [電競] [加密] [捕魚]│
│ ● 表示有未儲存修改 │
├──────────────────────────────────────────────────────┤
│ 體育 (Sports) — Tab 內容 │
│ ┌──────┬──────────┬──────────────────┐ │
│ │ 等級 │ 等級名稱 │ 返水率 (%) │ │
│ ├──────┼──────────┼──────────────────┤ │
│ │ VIP0 │ Bronze │ [0.10 ] │ ← inline edit│
│ │ VIP1 │ Silver │ [0.15 ] │ ← 修改後琥珀色 │
│ │ VIP2 │ Gold │ [0.20 ] │ │
│ │ VIP3 │ Platinum │ [0.25 ] │ │
│ │ ... │ ... │ ... │ │
│ └──────┴──────────┴──────────────────┘ │
│ │
│ [全部儲存] │
└──────────────────────────────────────────────────────┘
修改追蹤：
- 有修改的行：bg-amber-50/50 (light) / bg-amber-950/20 (dark)
- 有修改的 Tab：Tab 名稱旁顯示 amber 圓點指示器
- 全部儲存：POST /vip/rebates/bulk (一次批量提交)A.2.4 風控管理 — IP 黑白名單 (risk-control/ip-rules)
┌──────────────────────────────────────────────────────┐
│ IP 黑白名單 [+ 新增規則] │
├──────────────────────────────────────────────────────┤
│ SiteTabs │
│ [C9 預設] [D1] [E2] │
├──────────────────────────────────────────────────────┤
│ 類型 IP 關鍵字 開始日期 結束日期 │
│ [All ▼] [________] [________] [________] │
│ [搜尋] [重置] │
├──────────────────────────────────────────────────────┤
│ ┌──┬────────────┬────────┬──────────┬──────┬──────┐│
│ │# │ IP 地址 │ 類型 │ 原因 │ 建立 │ 操作 ││
│ ├──┼────────────┼────────┼──────────┼──────┼──────┤│
│ │1 │192.168.1.* │[黑名單] │ 異常登入 │01/15│ [...] ││
│ │2 │10.0.0.100 │[白名單] │ 辦公室 IP │01/14│ [...] ││
│ └──┴────────────┴────────┴──────────┴──────┴──────┘│
│ │
│ 2 total < Previous 1/1 Next>│
└──────────────────────────────────────────────────────┘A.2.5 站點客服配置 (system/site-customer-service)
┌──────────────────────────────────────────────────────┐
│ 客服配置 │
├──────────────────────────────────────────────────────┤
│ SiteTabs (模式 B — 設定頁) │
│ [C9 預設] [D1] [E2] [同預設站點] │
├──────────────────────────────────────────────────────┤
│ │
│ 客服管道設定 │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ [Switch ●] Line │ │
│ │ 連結：https://line.me/ti/p/xxx │ │
│ │ 標籤：{ zh-TW: "Line客服", en-US: "Line" } │ │
│ │ 排序：1 │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ [Switch ●] Telegram │ │
│ │ 連結：https://t.me/xxx │ │
│ │ 標籤：{ zh-TW: "Telegram客服", ... } │ │
│ │ 排序：2 │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ [Switch ○] WeChat (停用) │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ... (共 8 種管道) │
│ │
│ LiveChat 嵌入 │
│ [Switch ●] 啟用 LiveChat │
│ 嵌入腳本：[Textarea] │
│ │
│ [儲存] │
└──────────────────────────────────────────────────────┘A.2.6 報表總覽 (reports/overview)
┌──────────────────────────────────────────────────────┐
│ 報表總覽 │
├──────────────────────────────────────────────────────┤
│ SiteTabs │
│ [C9 預設] [D1] [E2] │
├──────────────────────────────────────────────────────┤
│ 開始日期 結束日期 │
│ [2024-01-01] [2024-01-31] [搜尋] [重置] │
├──────────────────────────────────────────────────────┤
│ │
│ 統計卡片 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ 總存款 │ │ 總提領 │ │ 總投注 │ │ 淨利潤 ││
│ │$123,456 │ │ $45,678 │ │$567,890 │ │ $77,778 ││
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘│
│ │
│ 每日摘要 [匯出CSV] │
│ ┌──────┬──────┬──────┬──────┬──────┬──────┬──────┐ │
│ │ 日期 │新用戶 │ 存款 │ 提領 │ 投注 │ 派彩 │ 淨利 │ │
│ ├──────┼──────┼──────┼──────┼──────┼──────┼──────┤ │
│ │01/31 │ 12 │$5.2K │$1.3K │$45K │$41K │$3.9K │ │
│ │01/30 │ 15 │$6.1K │$2.0K │$52K │$47K │$4.1K │ │
│ │ ... │ ... │ ... │ ... │ ... │ ... │ ... │ │
│ └──────┴──────┴──────┴──────┴──────┴──────┴──────┘ │
│ │
│ 30 total < Previous 2/2 Next>│
└──────────────────────────────────────────────────────┘附錄 B：前台元件檔案路徑總表
app/components/
├── Common/
│ ├── ConfirmDialog.vue
│ └── SplashScreen.vue
└── A1/
├── Home/
│ ├── index.vue
│ ├── Banner.vue
│ ├── LiveSports.vue
│ └── Promo.vue
├── Layout/
│ ├── TitleBar.vue
│ ├── Sidebar.vue
│ ├── Footer.vue
│ ├── BottomBar.vue
│ └── LiveChat.vue
├── Game/
│ ├── index.vue
│ ├── Lobby.vue
│ ├── Play.vue
│ ├── Search.vue
│ ├── Provider.vue
│ ├── RankList.vue
│ ├── ListBar.vue
│ ├── LoadMore.vue
│ └── Empty.vue
├── User/
│ ├── Setting.vue
│ ├── BetRecord/index.vue
│ ├── Deposit/
│ │ ├── index.vue
│ │ ├── Fiat.vue
│ │ ├── Credit.vue
│ │ └── Crypto.vue
│ ├── Withdrawal/index.vue
│ ├── Wallet/
│ │ ├── index.vue
│ │ ├── Fiat.vue
│ │ ├── Credit.vue
│ │ └── Crypto.vue
│ ├── Transaction/
│ │ ├── index.vue
│ │ ├── Deposit.vue
│ │ ├── Withdrawal.vue
│ │ ├── Dividend.vue
│ │ └── Promo.vue
│ ├── Vip/
│ │ ├── index.vue
│ │ ├── StatusCard.vue
│ │ ├── LevelList.vue
│ │ ├── Benefits.vue
│ │ ├── MyRebates.vue
│ │ └── RebateTable.vue
│ ├── Affiliate/
│ │ ├── index.vue
│ │ ├── Dashboard.vue
│ │ ├── Downline.vue
│ │ ├── Commission.vue
│ │ ├── Settlement.vue
│ │ ├── Withdrawal.vue
│ │ └── Alliance.vue
│ ├── Inbox/index.vue
│ └── Kyc/
│ ├── index.vue
│ ├── StatusCard.vue
│ ├── StepBasicInfo.vue
│ ├── StepDocUpload.vue
│ ├── StepLiveness.vue
│ └── StepReview.vue
├── Modal/
│ ├── Login.vue
│ ├── Register.vue
│ ├── EditPassword.vue
│ ├── SetPassword.vue
│ ├── Theme.vue
│ ├── Locale.vue
│ ├── VerifyUserInfo.vue
│ ├── ContactSupport.vue
│ ├── BuyCrypto.vue
│ ├── BindGoogleAuth.vue
│ ├── AddBankCard.vue
│ ├── AddCreditCard.vue
│ ├── AddCryptoAddress.vue
│ ├── BankCardDetail.vue
│ ├── AgentTour.vue
│ └── ChallengesModal.vue
├── Promo/
│ ├── Center.vue
│ └── Detail.vue
├── Alliance/index.vue
├── Mission/index.vue
├── Help/Center.vue
└── PromoLinkCard.vue附錄 B：後台元件檔案路徑總表
src/components/
├── layout/
│ ├── sidebar.tsx
│ ├── header.tsx
│ ├── providers.tsx
│ ├── AdminContentWrapper.tsx
│ ├── SiteFilterInitializer.tsx
│ ├── SiteSelector.tsx
│ ├── google-auth-dialog.tsx
│ ├── localeGuard.tsx
│ ├── scrollToTop.tsx
│ └── themeInjector.tsx
├── shared/
│ ├── simpleTable.tsx
│ ├── SiteTabs.tsx
│ ├── filterBar.tsx
│ ├── statusBadge.tsx
│ ├── confirmDialog.tsx
│ ├── pagination.tsx
│ ├── htmlEditor.tsx
│ ├── exportButton.tsx
│ ├── loadingSpinner.tsx
│ ├── accessDenied.tsx
│ └── templatePreviewDialog.tsx
├── ui/
│ ├── alert-dialog.tsx
│ ├── badge.tsx
│ ├── button.tsx
│ ├── card.tsx
│ ├── checkbox.tsx
│ ├── dialog.tsx
│ ├── dropdown-menu.tsx
│ ├── input.tsx
│ ├── label.tsx
│ ├── select.tsx
│ ├── sonner.tsx
│ ├── switch.tsx
│ ├── table.tsx
│ ├── tabs.tsx
│ ├── textarea.tsx
│ └── tooltip.tsx
└── dataTable/
├── dataTable.tsx
├── dataTableColumnHeader.tsx
├── dataTablePagination.tsx
└── dataTableToolbar.tsx附錄 C：CSS 變數速查表
前台 CSS 變數
| 變數 | 預設值 | 說明 |
|---|---|---|
--c9-primary-50 | #ecfdf5 | 主題色 最淺 |
--c9-primary-100 | #d1fae5 | 主題色 100 |
--c9-primary-200 | #a7f3d0 | 主題色 200 |
--c9-primary-300 | #6ee7b7 | 主題色 300 |
--c9-primary-400 | #34d399 | 主題色 400 |
--c9-primary-500 | #10b981 | 主題色 500 (主色調) |
--c9-primary-600 | #059669 | 主題色 600 (按鈕) |
--c9-primary-700 | #047857 | 主題色 700 |
--c9-primary-800 | #065f46 | 主題色 800 |
--c9-primary-900 | #064e3b | 主題色 900 |
--c9-primary-950 | #022c22 | 主題色 最深 |
--c9-glow | 16, 185, 129 | 發光效果 RGB |
後台 CSS 變數（參見第 2.2 章完整列表）
附錄 D：Tailwind 工具類速查
間距常用值
| Class | 值 | 像素 |
|---|---|---|
gap-1 | 0.25rem | 4px |
gap-1.5 | 0.375rem | 6px |
gap-2 | 0.5rem | 8px |
gap-3 | 0.75rem | 12px |
gap-4 | 1rem | 16px |
gap-6 | 1.5rem | 24px |
gap-8 | 2rem | 32px |
圓角常用值
| Class | 值 |
|---|---|
rounded | 0.25rem (4px) |
rounded-md | calc(var(--radius) - 2px) |
rounded-lg | var(--radius) (10px) |
rounded-xl | calc(var(--radius) + 4px) (14px) |
rounded-2xl | calc(var(--radius) + 8px) (18px) |
rounded-full | 9999px |
陰影常用值
| Class | 用途 |
|---|---|
shadow-xs | Button outline variant |
shadow-sm | 輕微陰影 |
shadow | 預設陰影 |
shadow-lg | Auth 卡片 |
shadow-[custom] | 發光效果 |
附錄 E：後台 68 頁路由與 UI 模式對照
| # | 路由 | 頁面名稱 | UI 模式 | 多站點 | 元件組合 |
|---|---|---|---|---|---|
| 1 | /dashboard | 儀表板 | 統計卡片 + 圖表 | 待實作 | StatCard + Recharts |
| 2 | /system/admins | 管理員列表 | 列表頁 | 全站共用 | FilterBar + SimpleTable |
| 3 | /system/admins/new | 新增管理員 | 表單頁 | -- | Card + Form |
| 4 | /system/admins/[id] | 編輯管理員 | 表單頁 | -- | Card + Form |
| 5 | /system/groups | 群組列表 | 列表頁 | 全站共用 | FilterBar + SimpleTable |
| 6 | /system/groups/new | 新增群組 | 表單頁 | -- | Card + Form + Checkbox Grid |
| 7 | /system/groups/[id] | 編輯群組 | 表單頁 | -- | Card + Form + Checkbox Grid |
| 8 | /system/logs | 操作紀錄 | 列表頁 | 全站共用 | FilterBar + SimpleTable |
| 9 | /system/site-config | 站點設定 | 設定頁 | -- | Card + Form |
| 10 | /system/site-customer-service | 客服設定 | 設定頁 (B) | SiteTabs | Card + Form + Switch |
| 11 | /system/site-domains | 域名管理 | 設定頁 (B) | SiteTabs | Card + Form |
| 12 | /system/site-game-providers | 遊戲商配置 | 設定頁 (B) | SiteTabs | Card + Form + Switch |
| 13 | /system/site-oauth | OAuth 設定 | 設定頁 (B) | SiteTabs | Card + Form |
| 14 | /system/site-service-providers | 服務商配置 | 設定頁 (B) | SiteTabs | Card + Form + Switch |
| 15 | /system/cloud-storage | 雲端儲存 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 16 | /system/cloud-storage-logs | 儲存日誌 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable + Dialog |
| 17 | /system/layout-bottom-bar | 底部導航列 | 設定頁 (B) | SiteTabs | Card + Sortable List |
| 18 | /system/layout-footer | 頁尾配置 | 設定頁 (B) | SiteTabs | Card + Nested Form |
| 19 | /system/layout-learn-more | 了解更多 | 設定頁 (B) | SiteTabs | Card + HtmlEditor |
| 20 | /players/all | 全部玩家 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 21 | /players/all/[id] | 玩家詳情 | 詳情頁 | -- | Card + Tabs + Table |
| 22 | /players/new-registrations | 新註冊 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 23 | /players/online | 線上玩家 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 24 | /players/login-failures | 登入失敗 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 25 | /players/tags | 玩家標籤 | 列表頁 | 待實作 | SimpleTable |
| 26 | /players/game-reregistration | 遊戲重註冊 | 列表頁 | 待實作 | SimpleTable |
| 27 | /activity/promos | 活動列表 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 28 | /activity/promos/new | 新增活動 | 表單頁 | -- | Card + HtmlEditor + Form |
| 29 | /activity/promos/[id] | 編輯活動 | 表單頁 | -- | Card + HtmlEditor + Form |
| 30 | /activity/tags | 活動標籤 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 31 | /mail/inbox | 站內信 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 32 | /mail/settings | 郵件設定 | 設定頁 (B) | SiteTabs | Card + Form |
| 33 | /finance/adjust-balance | 調整餘額 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable + Dialog |
| 34 | /finance/deposit-settings | 存款設置 | 設定頁 (A) | SiteTabs | Card + Form + Table |
| 35 | /finance/deposit-review | 存款審核 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 36 | /finance/withdrawals | 提領管理 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 37 | /finance/bank-cards | 銀行卡 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 38 | /finance/credit-cards | 信用卡 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 39 | /finance/crypto-addresses | 加密地址 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 40 | /game/providers | 遊戲供應商 | 列表頁 (A) | SiteTabs + 模板 | FilterBar + SimpleTable + Template |
| 41 | /game/type-configs | 遊戲類型 | 列表頁 (A) | SiteTabs + 模板 | FilterBar + SimpleTable + Template |
| 42 | /vip/levels | VIP 等級 | 列表頁 (A) | SiteTabs + 模板 | SimpleTable |
| 43 | /vip/rebates | VIP 返水 | 列表頁 (A) | SiteTabs + 模板 | Tabs + Inline Edit + Bulk Save |
| 44 | /vip/players | VIP 玩家 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 45 | /vip/milestones | VIP 里程碑 | 列表頁 (A) | SiteTabs | SimpleTable |
| 46 | /reports/overview | 報表總覽 | 報表頁 | SiteTabs | StatCard + SimpleTable + Export |
| 47 | /reports/players | 玩家報表 | 報表頁 | SiteTabs | FilterBar + SimpleTable + Export |
| 48 | /reports/player-summary | 玩家摘要 | 報表頁 | SiteTabs | FilterBar + SimpleTable + Export |
| 49 | /reports/games | 遊戲報表 | 報表頁 | SiteTabs | FilterBar + SimpleTable + Export |
| 50 | /reports/bet-records | 投注紀錄 | 報表頁 | SiteTabs | FilterBar + SimpleTable + Export |
| 51 | /reports/profit-loss | 損益報表 | 報表頁 | SiteTabs | FilterBar + SimpleTable + Export |
| 52 | /reports/promos | 活動報表 | 報表頁 | 待實作 | SimpleTable |
| 53 | /risk-control/ip-rules | IP 規則 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 54 | /risk-control/ip-check | IP 檢查 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 55 | /risk-control/game-blacklist | 遊戲黑名單 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 56 | /affiliate/agents | 代理列表 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 57 | /affiliate/commission-rates | 佣金費率 | 列表頁 (A) | SiteTabs | SimpleTable |
| 58 | /affiliate/settlements | 結算紀錄 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 59 | /affiliate/aff-withdrawals | 代理提領 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 60 | /affiliate/bind-logs | 綁定紀錄 | 列表頁 (A) | SiteTabs | FilterBar + SimpleTable |
| 61 | /affiliate/agent-tiers | 代理等級 | 列表頁 (A) | SiteTabs | SimpleTable |
| 62 | /affiliate/vip-milestones | VIP 里程碑 | 列表頁 (A) | SiteTabs | SimpleTable |
| 63 | /affiliate/agent-tour | 代理導覽 | 設定頁 (B) | SiteTabs | Card + Form |
| 64 | /roles | 角色管理 | 重導向 | -- | redirect → groups |
| 65 | /users | 用戶列表 | 列表頁 | -- | SimpleTable |
| 66 | /users/new | 新增用戶 | 表單頁 | -- | Card + Form |
| 67 | /users/[id] | 編輯用戶 | 表單頁 | -- | Card + Form |
| 68 | /login | 登入頁 | Auth 佈局 | -- | Card + Form (RHF + Zod) |
附錄 F：設計交接檢查清單
F.1 新頁面開發檢查清單
- [ ] 確認頁面屬於哪種佈局模式（列表頁 / 表單頁 / 設定頁 / 詳情頁）
- [ ] 確認是否需要多站點 SiteTabs
- [ ] 確認是否需要 FilterBar 篩選功能
- [ ] 確認所需的 RBAC 權限模組 (
canRead/canWrite) - [ ] 確認 Feature Flag 開關
- [ ] 新增所有 5 個語系的翻譯 key
- [ ] 確認表格欄位定義（key, header, cell render）
- [ ] 確認操作按鈕（新增 / 編輯 / 刪除 / 匯出）
- [ ] 確認 StatusBadge 色彩映射
- [ ] 確認分頁配置（每頁筆數、伺服器端分頁）
- [ ] 響應式測試（手機 / 平板 / 桌面）
F.2 新元件開發檢查清單
- [ ] 確認元件命名符合規範（PascalCase React / PascalCase Vue）
- [ ] 確認檔案命名符合規範（camelCase.tsx / PascalCase.vue）
- [ ] 確認使用正確的圖標庫（Lucide）
- [ ] 確認所有文字使用 i18n key，不硬編碼
- [ ] 確認色彩使用 CSS 變數或 Tailwind token，不硬編碼色值
- [ ] 確認觸控區域符合最小 44px 要求（前台行動版）
- [ ] 確認暗色模式支援（後台）
- [ ] 確認無障礙性（ARIA labels, keyboard navigation）
F.3 主題色更換檢查清單
- [ ] 確認所有主題色使用 CSS 變數而非固定色值
- [ ] 確認發光效果使用
--c9-glow變數 - [ ] 確認 StatusBadge 色彩不受主題色影響（使用語意色）
- [ ] 測試 6 組主題色預設在所有頁面的顯示效果
- [ ] 確認後台 SiteThemeInjector 正確注入所有 30+ 變數
文件結束。最後更新：2026-03-01 v1.0