From 682a9e7ac30f9612762dfddd5fb3fa331a9ea48b Mon Sep 17 00:00:00 2001 From: sky121113 Date: Mon, 9 Mar 2026 11:30:06 +0800 Subject: [PATCH] =?UTF-8?q?[FEAT]=20=E5=84=80=E8=A1=A8=E6=9D=BF=20UI=20?= =?UTF-8?q?=E5=A4=A7=E6=94=B9=E9=80=A0=E3=80=81=E4=B8=AD=E6=96=87=E5=8C=96?= =?UTF-8?q?=E8=88=87=E9=A0=85=E7=9B=AE=E9=96=8B=E7=99=BC=E8=A6=8F=E7=AF=84?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=20(=E5=90=AB=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E5=BE=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .agents/rules/framework.md | 12 ++- .agents/rules/skill-trigger.md | 7 +- .agents/skills/ui-minimal-luxury/SKILL.md | 90 +++++++++++++++++++ resources/css/app.css | 38 +++++++- resources/views/admin/dashboard.blade.php | 4 +- .../admin/gift-definitions/index.blade.php | 6 +- .../views/admin/machines/create.blade.php | 2 +- resources/views/admin/machines/edit.blade.php | 2 +- .../admin/membership-tiers/index.blade.php | 6 +- .../views/admin/point-rules/index.blade.php | 6 +- resources/views/layouts/admin.blade.php | 21 +++-- 11 files changed, 168 insertions(+), 26 deletions(-) create mode 100644 .agents/skills/ui-minimal-luxury/SKILL.md diff --git a/.agents/rules/framework.md b/.agents/rules/framework.md index f11ffe0..6d54f56 100644 --- a/.agents/rules/framework.md +++ b/.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`，以避免連線至錯誤的服務環境。 \ No newline at end of file diff --git a/.agents/rules/skill-trigger.md b/.agents/rules/skill-trigger.md index c86d425..879d103 100644 --- a/.agents/rules/skill-trigger.md +++ b/.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** — 決定是否使用異步隊列流程 diff --git a/.agents/skills/ui-minimal-luxury/SKILL.md b/.agents/skills/ui-minimal-luxury/SKILL.md new file mode 100644 index 0000000..16983d2 --- /dev/null +++ b/.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 +
+ +
+``` +- **特效**: 懸停時帶有 Y 軸平移與深度投影。 + +### 側邊導覽項 (Luxury Nav Item) +```html + + + 節點名稱 + +``` +- **啟用狀態**: 左側帶有圓角直條指示器，並輔以青色發光陰影。 + +### 按鈕組件 (Buttons) +- **Primary**: `.btn-luxury-primary` (青色漸層，適用於建立、儲存) +- **Secondary**: `.btn-luxury-secondary` (白色/深色背景，帶邊框，適用於編輯、篩選) +- **Ghost**: `.btn-luxury-ghost` (無背景，適用於取消、查看更多) + +```html + + + + + +``` + +## 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` 的卡片與即時動態實作方式進行衍生。 diff --git a/resources/css/app.css b/resources/css/app.css index 8ca85a6..f606475 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -112,8 +112,8 @@ .luxury-nav-item.active::before { content: ""; - @apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full shadow-[0_0_8px_rgba(6,182,212,0.5)]; - left: 0; + @apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full; + box-shadow: 0 0 8px rgba(6, 182, 212, 0.5); } /* Submenu styling */ @@ -121,4 +121,38 @@ @apply mt-2 space-y-1 ps-4 border-l border-slate-200 ms-4; @apply dark:border-white/10; } + + /* Luxury Buttons */ + .btn-luxury-primary { + @apply inline-flex items-center justify-center gap-x-2 px-4 py-2.5 text-sm font-semibold rounded-xl text-white transition-all duration-200; + background: linear-gradient(135deg, #06b6d4, #3b82f6); + box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3); + } + + .btn-luxury-primary:hover { + @apply -translate-y-0.5; + box-shadow: 0 8px 20px -4px rgba(6, 182, 212, 0.4); + filter: brightness(1.1); + } + + .btn-luxury-primary:active { + @apply translate-y-0 scale-[0.98]; + } + + .btn-luxury-secondary { + @apply inline-flex items-center justify-center gap-x-2 px-3 py-2 text-sm font-semibold rounded-xl transition-all duration-200; + @apply bg-white text-slate-700 border border-slate-200 shadow-sm; + @apply dark:bg-slate-800 dark:text-white dark:border-slate-700; + } + + .btn-luxury-secondary:hover { + @apply bg-slate-50 border-slate-300 -translate-y-0.5 shadow-md; + @apply dark:bg-slate-700/50 dark:border-slate-600; + } + + .btn-luxury-ghost { + @apply inline-flex items-center justify-center gap-x-2 px-4 py-2 text-sm font-bold rounded-xl transition-all duration-200; + @apply text-slate-500 hover:bg-slate-100 hover:text-slate-900; + @apply dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-cyan-400; + } } \ No newline at end of file diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php index 279d7f1..d9f1878 100644 --- a/resources/views/admin/dashboard.blade.php +++ b/resources/views/admin/dashboard.blade.php @@ -62,7 +62,7 @@
- @@ -113,7 +113,7 @@
@endforelse - + diff --git a/resources/views/admin/gift-definitions/index.blade.php b/resources/views/admin/gift-definitions/index.blade.php index 062c629..7421ac2 100644 --- a/resources/views/admin/gift-definitions/index.blade.php +++ b/resources/views/admin/gift-definitions/index.blade.php @@ -42,7 +42,7 @@

禮品設定

-
@@ -148,8 +148,8 @@
- - + +
diff --git a/resources/views/admin/machines/create.blade.php b/resources/views/admin/machines/create.blade.php index d66872f..e1d6b03 100644 --- a/resources/views/admin/machines/create.blade.php +++ b/resources/views/admin/machines/create.blade.php @@ -44,7 +44,7 @@
取消 - +
diff --git a/resources/views/admin/machines/edit.blade.php b/resources/views/admin/machines/edit.blade.php index 462de9b..e625e8d 100644 --- a/resources/views/admin/machines/edit.blade.php +++ b/resources/views/admin/machines/edit.blade.php @@ -45,7 +45,7 @@
取消 - +
diff --git a/resources/views/admin/membership-tiers/index.blade.php b/resources/views/admin/membership-tiers/index.blade.php index cc3dab4..526fd46 100644 --- a/resources/views/admin/membership-tiers/index.blade.php +++ b/resources/views/admin/membership-tiers/index.blade.php @@ -27,7 +27,7 @@

會員等級設定

-
@@ -110,8 +110,8 @@
- - + +
diff --git a/resources/views/admin/point-rules/index.blade.php b/resources/views/admin/point-rules/index.blade.php index 7131620..654b52c 100644 --- a/resources/views/admin/point-rules/index.blade.php +++ b/resources/views/admin/point-rules/index.blade.php @@ -35,7 +35,7 @@

點數規則設定

-
@@ -128,8 +128,8 @@
- - + +
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php index 39770c2..0754491 100644 --- a/resources/views/layouts/admin.blade.php +++ b/resources/views/layouts/admin.blade.php @@ -41,8 +41,10 @@