[FEAT] 儀表板 UI 大改造、中文化與項目開發規範同步 (含深色模式修復)

.agents/rules/framework.md

@@ -74,5 +74,13 @@ trigger: always_on
 *   **Demo 環境 (對應 `demo` 分支)**：
     *   透過 `deploy-demo.yaml`，合併或推送到 `demo` 分支會自動部署至 `demo-cloud.taiwan-star.com.tw`。
     *   登入伺服器查修：`ssh gitea_work`，路徑為 `/var/www/star-cloud-demo`。
-*   **Production 環境 (對應 `main` 分支)**：
-    *   透過 `deploy-prod.yaml`，推進到 `main` 會自動部署至正式站。
+
+## 9. 瀏覽器測試規範 (Browser Testing)
+當需要進行瀏覽器自動化測試或手動驗證時，必須遵守以下連線資訊：
+
+*   **本地測試網址**：`http://localhost:8090/` (注意：非 8000 或 8080)
+*   **預設管理員帳號**：`admin`
+*   **預設管理員密碼**：`password`
+
+> [!IMPORTANT]
+> 在執行 `open_browser_url` 或進行 E2E 測試時，請務必優先確認 Port 是否為 `8090`，以避免連線至錯誤的服務環境。

.agents/rules/skill-trigger.md

@@ -6,7 +6,7 @@ trigger: always_on
 
 本文件確保 AI 助手在對話中能**主動辨識**需要參照技能 (Skill) 的時機。
 Skills 位於 `.agents/skills/`，採漸進式揭露以節省 Token。
-**若對話內容命中以下任一觸發條件，必須先使用 `view_file` 讀取對應的 `SKILL.md` 後再進行作業。**
+**若對話內容命中以下任一觸發條件，必須先使用 `view_file` 讀取對應的 `SKILL.md` 後標記為 active 再進行作業。**
 
 ---
 
@@ -15,6 +15,7 @@ Skills 位於 `.agents/skills/`，採漸進式揭露以節省 Token。
 | 觸發詞 / 情境 | 對應 Skill | 路徑 |
 |---|---|---|
 | 機台通訊, IoT, 日誌上報, Log Ingestion, 異步隊列, Queue, Heartbeat, 心跳發報 | **IoT 通訊與高併發處理規範** | `.agents/skills/iot-communication/SKILL.md` |
+| 介面, UI, 佈局, CSS, Tailwind, 奢華, 深色模式, Light Mode, Dark Mode, Blade, 樣式, 間距, 陰影, 動畫 | **極簡奢華風 UI 實作規範** | `.agents/skills/ui-minimal-luxury/SKILL.md` |
 
 ---
 
@@ -22,6 +23,10 @@ Skills 位於 `.agents/skills/`，採漸進式揭露以節省 Token。
 
 以下場景**無論對話中是否出現觸發詞**，都必須主動載入對應 Skill：
 
+### 🔴 新增或修改頁面 (Views/Blade) 時
+必須讀取：
+1. **ui-minimal-luxury** — 確保符合極簡奢華風視覺與互動規範
+
 ### 🔴 新增機台通訊 API 端點時
 必須讀取：
 1. **iot-communication** — 決定是否使用異步隊列流程

.agents/skills/ui-minimal-luxury/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: 極簡奢華風 UI 實作規範 (Minimal Luxury UI)
+description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範，包含 CSS Tokens、常用組件樣式、動畫效果與互動模式，確保全站 15+ 模組的視覺一致性。
+---
+
+# 極簡奢華風 UI 實作規範 (Minimal Luxury UI)
+
+本文件定義了 Star Cloud 專案的核心視覺語言。所有新頁面與組件開發必須嚴格遵守此規範。
+
+## 1. 核心設計令牌 (Design Tokens)
+
+### 色彩系統 (CSS Variables)
+位於 `resources/css/app.css`：
+- `--color-luxury-deep`: `#0f172a` (深色背景)
+- `--color-luxury-card`: `#1e293b` (卡片背景)
+- `--color-accent`: `#06b6d4` (青色點綴，適用於按鈕與標示)
+
+### 字體 (Typography)
+- **內文字體**: `Plus Jakarta Sans`
+- **標題/顯示字體**: `Outfit`
+- **特性**: 標題需帶有 `letter-spacing: -0.02em` 以增強精密感。
+
+## 2. 核心組件樣式
+
+### 豪華卡片 (Luxury Card)
+```html
+<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
+    <!-- 內容 -->
+</div>
+```
+- **特效**: 懸停時帶有 Y 軸平移與深度投影。
+
+### 側邊導覽項 (Luxury Nav Item)
+```html
+<a href="#" class="luxury-nav-item active">
+    <i class="lucide-icon"></i>
+    <span>節點名稱</span>
+</a>
+```
+- **啟用狀態**: 左側帶有圓角直條指示器，並輔以青色發光陰影。
+
+### 按鈕組件 (Buttons)
+- **Primary**: `.btn-luxury-primary` (青色漸層，適用於建立、儲存)
+- **Secondary**: `.btn-luxury-secondary` (白色/深色背景，帶邊框，適用於編輯、篩選)
+- **Ghost**: `.btn-luxury-ghost` (無背景，適用於取消、查看更多)
+
+```html
+<!-- Primary -->
+<button class="btn-luxury-primary">
+    <i class="lucide-plus size-4"></i>
+    <span>建立新機台</span>
+</button>
+
+<!-- Ghost -->
+<button class="btn-luxury-ghost">取消</button>
+```
+
+## 3. 動畫與互動
+
+### 進場動畫
+- **`.animate-luxury-in`**: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。
+
+### Alpine.js 互動模式 (以時間選擇器為例)
+- **互動原則**: 點擊觸發下拉選單時，必須使用 `x-transition` 且帶有 `scale` 偏移。
+- **樣式要求**: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。
+
+## 4. UI 檢查清單 (AI 助手執行前必讀)
+- [ ] 是否使用了正確的 `rounded-2xl` (或更圓) 的導角？
+- [ ] 所有的圖示是否一致使用 `lucide-react` 風格？
+- [ ] 卡片是否有適當的間距 (通常為 `p-6`)？
+- [ ] 文字色階是否符合：標題 (slate-900/white)、副標 (slate-500/slate-400)？
+
+## 5. 開發注意事項 (Important Notes)
+
+### 技術限制備忘
+- **CSS 編譯**: 複雜的 `box-shadow` 或漸層應直接寫原生 CSS 屬性，避免在 `@apply` 中使用帶空格的數值導致編譯失敗（詳見 KI: `tailwind-luxury-ui-patterns`）。
+- **深色模式**: 互動式按鈕在深色模式下必須強化文字亮度（`dark:text-white`），並輔以青色發光效果。
+
+### 即時動態呈現規範
+- **格式**: `#機台編號 動作內容` (例如 `#V-001 執行出貨`)。
+- **脈絡**: 必須呈現相對時間與機台位置。
+
+---
+> [!IMPORTANT]
+> **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
+> 嚴禁在 Blade 中寫入大量重複的 `bg-indigo-600` 等舊式類別。
+
+---
+> [!TIP]
+> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。