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

name	description
極簡奢華風 UI 實作規範 (Minimal Luxury UI)	定義 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)

<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
    <!-- 內容 -->
</div>

• 特效: 懸停時帶有 Y 軸平移與深度投影。

側邊導覽項 (Luxury Nav Item)

<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 (無背景，適用於取消、查看更多)

<!-- 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: 所有的主內容區域或卡片在頁面載入時，應具備由下而轉的淡入效果。

互動過渡 (Transitions)

• 標準時間: 所有的懸停、色彩變換等過渡效果，統一建議使用 duration-300 (300ms)。
• 例外: 極其細微的透明度變化可縮短至 150ms，但涉及背景色與位移的互動一律以 300ms 為準。

Alpine.js 互動模式 (以時間選擇器為例)

• 互動原則: 點擊觸發下拉選單時，必須使用 x-transition 且帶有 scale 偏移。

• 樣式要求: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。

• 列表佈局: 是否採用「整合式卡片」結構且內距設為 p-8？

• 分頁與總數: 列表底部是否正確召喚 vendor.pagination.luxury？

• 文字色階: 符合標題 slate-900/white 與標籤 slate-500 的對比度。

• 可讀性檢查: 二級資訊是否達到 text-xs (12px) 且權重不超過 font-bold？

5. 開發注意事項 (Important Notes)

技術限制備忘

• CSS 編譯: 複雜的 box-shadow 或漸層應直接寫原生 CSS 屬性，避免在 @apply 中使用帶空格的數值導致編譯失敗（詳見 KI: tailwind-luxury-ui-patterns）。
• 深色模式: 互動式按鈕在深色模式下必須強化文字亮度（dark:text-white），並輔以青色發光效果。

即時動態呈現規範

• 格式: #機台編號 動作內容 (例如 #V-001 執行出貨)。
• 脈絡: 必須呈現相對時間與機台位置。

6. 頁面佈局規範 (Page Layout)

佈局決策規則 (Layout Decision Rules)

根據篩選條件的複雜程度，選擇適當的清單頁面佈局：

1. 整合式佈局 (Integrated Layout) - 【預設推薦】

• 適用場景: 絕大多數 CRUD 列表。
• 實作方式: 篩選器、工具列與資料表格全部封裝在同一個 luxury-card 中。
• 內距規範: 強制使用 p-8 以獲得最佳空氣感。
• 元件間距: 篩選區與表格之間固定使用 mb-10。
• 範例: 帳號管理、角色設定、機台日誌。

2. 分離式佈局 (Split Layout)

• 適用場景: 複雜查詢 (Filtered Fields >= 3 或多行篩選)。
• 實作方式: 篩選區獨立為一個 luxury-card，下方間隔 mb-6 後再放置資料清單卡片。
• 樣式規範: 篩選卡片通常使用 p-6（緊湊式），清單卡片使用 p-8（寬鬆式）。
• 範例: 交易紀錄、機台日誌。

標準寬版佈局 (Wide Layout)

@section('content')
<div class="space-y-6">
    <!-- Header: 標題與操作按鈕 -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Title') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Subtitle') }}</p>
        </div>
        <div class="flex items-center gap-3">
            <button class="btn-luxury-primary">...</button>
        </div>
    </div>

    <!-- Main Container: 卡片與表格 -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <!-- Table Content -->
            </table>
        </div>
    </div>
</div>
@endsection

佈局核心原則:

1. 移除重複內距: 根容器 div 應禁止使用 p-6 或 p-10，因為佈局基底已提供基礎間距。僅使用 space-y-6 (或 space-y-8) 控制區塊間隙。
2. 主容器樣式: 強制對齊為 luxury-card rounded-3xl p-8。
3. 標題排版:
   • 主標題需應用 font-display (Outfit)。
   • 描述文字需應用 uppercase tracking-widest font-bold 以呈現高級設計感。

7. 表單元件規範 (Form Elements)

針對輸入框與下拉選單，強制使用以下類別以確保深色模式質感。

輸入框與選單

• 類別: .luxury-input, .luxury-select
• 特性:
  • 深色模式下具備半透明背景與背景模糊效果。
  • 統一的 rounded-xl 圓角與 font-bold 字體。
  • 聚焦時帶有青色 (Cyan) 發光邊框。

<input type="text" class="luxury-input" placeholder="請輸入內容">

<select class="luxury-select">
    <option value="1">啟用</option>
    <option value="0">禁用</option>
</select>

8. 編輯與詳情頁規範 (Detail & Edit Views)

為了讓分層資訊更具視覺引導，各個區塊 (Section) 的圖示應採用不同的顏色意象。

區塊圖示色彩意象 (Section Icon Palette)

• 基本資訊 (Basic Info): 翠綠色 (Emerald)。代表核心、穩定與起點。
  • 樣式: bg-emerald-500/10 text-emerald-500
• 硬體/插槽設定: 琥珀色 (Amber/Orange)。代表動作、物理連接與硬體警告。
  • 樣式: bg-amber-500/10 text-amber-500
• 系統/進階設定: 靛藍色 (Indigo)。代表邏輯、權限與深層配置。
  • 樣式: bg-indigo-500/10 text-indigo-500
• 危險/移除動作: 玫瑰紅 (Rose)。代表破壞性操作。
  • 樣式: bg-rose-500/10 text-rose-500

## 8. 資料表格規範 (Data Tables)

為了確保管理後台資料的可讀性與精密感，表格內的所有文字級別必須對齊以下規範：

### 文字大小與權重 (Typography Hierarchy)
- **表頭 (Table Header)**: 
  - 類別: `text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em]`
  - 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。具備足夠對比度。
- **主標題 (Primary Item)**: 
  - 類別: `text-base font-extrabold text-slate-800 dark:text-slate-100`
  - 範例: 公司名稱、機體名稱。
- **次要資訊 (Secondary Info)**: 
  - 類別: `text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wide`
  - 範例: 使用者帳號、備註、權限名稱。
- **狀態標籤 (Status Badge)**: 
  - 範例: 啟用 (`emerald`)、禁用 (`rose`) / 角色名稱 (`sky`/`indigo`)。
  - 特性: `px-2.5 py-1 rounded-lg text-xs font-bold border tracking-wider`

### 空間與反應 (Spacing & Interaction)
- **單元格內距**: 統一使用 `px-6 py-6`。
- **懸停反應**: 必須在 `tr` 套用 `group` 且子元素套用 `group-hover:bg-slate-50/80` (深色: `dark:group-hover:bg-slate-800/40`) 以提供高級的互動感知。
- **圖示容器懸停 (Icon Hover Palette)**:
    - 列表左側的主圖示容器在 `group-hover` 時，應由淡色背景轉為 **實體主題色**。
    - 類別: `group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300`。
- **文字同步變色**:
    - 主標題文字在 `group-hover` 時應同步變色，以強化點擊引導。
    - 類別: `group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors`。

### 分頁與列表控制項 (Pagination & Controls)
為了維持操作一致性，所有列表的分頁與切換組件必須遵循以下「Luxury Jump」模式：
- **統一高度**: 所有控制項（按鈕、下拉選單）固定為 `h-9` (36px)。
- **筆數切換 (Limit Selector)**: 
  - 規範: **禁止**在表格上方（Header/Toolbar）重複放置筆數切換選單。統一收納於底部分頁欄位。
- **分頁導航 (Luxury Jump)**:
  - 模式: 捨棄傳統頁碼按鈕，全端統一使用「跳轉選單」。
  - 寬度: 下拉選單內部 Padding 為 `pl-4 pr-10`。
  - 字體: 使用 `text-xs font-black tracking-widest`。
- **指示文字**:
  - 行動端隱藏多餘詞彙，僅保留「1 - 10 / 50」格式。
  - 數字顏色對齊 `text-slate-600` (深色: `text-slate-300`)。

### 底部清單控制項 (Bottom List Controls)
為了確保長列表的操作便利，清單底<E596AE><E5BA95>### 標準操作按鈕 (Standard Action Icons)
表格內的操作欄位（如「編輯」、「刪除」、「詳情」）必須使用以下定義之 **「黃金標準 (Gold Standard)」**：

- **共同樣式**: 
    - 容器: `p-2 rounded-lg bg-slate-50 dark:bg-slate-800`
    - 主色: `text-slate-400`
    - 邊框: `border border-transparent` (防閃爍處理)
    - 過渡: `transition-all` (使用預設速度以確保俐落感)
    - 圖示粗細: `stroke-width="2.5"`
    - 尺寸: `w-4 h-4`

- **編輯按鈕 (Edit)**:
    - 懸停特效: `hover:text-cyan-500 hover:bg-cyan-500/5 hover:border-cyan-500/20`
    - SVG 路徑: 
    ```html
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
    ```

- **查看詳情 (View/Detail)**:
    - 懸停特效: `hover:text-indigo-500 hover:bg-indigo-500/5 hover:border-indigo-500/20`
    - SVG 路徑:
    ```html
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
    ```

- **刪除按鈕 (Delete)**:
    - 懸停特效: `hover:text-rose-500 hover:bg-rose-500/5 hover:border-rose-500/20`
    - SVG 路徑:
    ```html
    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
    ```
y items-center gap-2">...</button>
        </div>
    </div>

    <!-- 2. Main Integrated Card -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <!-- Toolbar & Filters (mb-10) -->
        <div class="flex items-center justify-between mb-10">
            <form class="relative group">
                <!-- 僅保留搜尋框或必要的過濾器，禁止重複筆數切換 -->
                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
            </form>
        </div>

        <!-- Scrollable Table Area -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-separate border-spacing-y-0">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Name') }}</th>
                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
                        <td class="px-6 py-6 font-extrabold text-slate-800 dark:text-slate-100 italic">Example Name</td>
                        <td class="px-6 py-6 text-right"> <!-- Action row --> </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 3. Standard Pagination Footer (mt-8) -->
        <div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
            {{ $items->links('vendor.pagination.luxury') }}
        </div>
    </div>
</div>

清單欄位規範 (Column Visibility & Standards)

• 固定欄位: 第一欄通常為「關鍵標識」（如 ID 或時間），應具備特殊字體樣式。
• 操作欄位: 統一位於表格最右端，並命名為 Action (或 操作)，標題與內容皆應 text-right。

9. 系統兼容性與標準化 (Compatibility & Standardization)

為了確保在不同版本的開發環境中（如目前專案使用的 Tailwind CSS v3.1）UI 都能正確呈現，並維持全站操作感一致，必須遵守以下額外規範。

Tailwind CSS 版本兼容性 (v3.1)

• 禁止使用 size- 屬性: 舊版不支援 size-4 等語法，請一律分拆寫作 w-4 h-4。
• 避免非標準間距: 避免使用 4.5 (18px) 等任意值，優先使用標準等級如 4 (16px) 或 5 (20px)。

標準操作按鈕 (Standard Action Icons)

表格內的操作欄位（如「編輯」、「刪除」）必須使用以下定義之標準：

• 共同樣式:

  • 容器: p-2 rounded-lg bg-slate-50 dark:bg-slate-800
  • 主色: text-slate-400
  • 圖示粗細: stroke-width="2.5"
  • 尺寸: w-4 h-4

• 編輯按鈕 (Edit):

  • 懸停特效: hover:text-cyan-500 hover:bg-cyan-500/10 hover:border-cyan-500/20
  • SVG 路徑:

  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
  

• 刪除按鈕 (Delete):

  • 懸停特效: hover:text-rose-500 hover:bg-rose-500/10 hover:border-rose-500/20
  • SVG 路徑:

  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
  

---

Important

開發新功能前，必須確認 app.css 中的 .btn-luxury-* 系列組件是否滿足需求。 嚴禁在 Blade 中寫入大量重複的 bg-indigo-600 等舊式類別。

---

Tip

當遇到未定義的 UI 區塊時，優先參考 admin.dashboard.blade.php 的卡片與即時動態實作方式進行衍生。