sky121113
682a9e7ac3
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 58s
91 lines
3.5 KiB
Markdown
91 lines
3.5 KiB
Markdown
---
|
||
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` 的卡片與即時動態實作方式進行衍生。
|