sky121113
3ce88ed342
- 機台日誌：對齊 Luxury UI 規範，實作整合式佈局與分頁組件。 - 多語系：完成機台日誌繁、英、日三語系翻譯與動態處理。 - UI 規範：更新 SKILL.md 定義「標準列表 Bible」。 - 後端：完善 TenantScoped 隔離邏輯，修復儀表板死循環與 User Model 缺失。 - IoT：擴展機台、會員 Model 並建立交易、商品、狀態等核心表結構。 - 基礎設施：設置台北時區與 Docker 環境變數同步。
296 lines
14 KiB
Markdown
296 lines
14 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) 或帶透明度的深色背景。
|
||
|
||
- [ ] **列表佈局**: 是否採用「整合式卡片」結構且內距設為 `p-8`？
|
||
- [ ] **分頁與總數**: 列表底部是否正確召喚 `vendor.pagination.luxury`？
|
||
- [ ] **文字色階**: 符合標題 `slate-900/white` 與標籤 `slate-500` 的對比度。
|
||
|
||
## 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)
|
||
|
||
```html
|
||
@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`) 發光邊框。
|
||
|
||
```html
|
||
<input type="text" class="luxury-input" placeholder="請輸入內容">
|
||
|
||
<select class="luxury-select">
|
||
<option value="1">啟用</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
```
|
||
|
||
## 8. 資料表格規範 (Data Tables)
|
||
|
||
為了確保管理後台資料的可讀性與精密感，表格內的所有文字級別必須對齊以下規範：
|
||
|
||
### 文字大小與權重 (Typography Hierarchy)
|
||
- **表頭 (Table Header)**:
|
||
- 類別: `text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]`
|
||
- 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。
|
||
- **主標題 (Primary Item)**:
|
||
- 類別: `text-base font-extrabold text-slate-800 dark:text-slate-100`
|
||
- 範例: 公司名稱、機體名稱。
|
||
- **次要資訊 (Secondary Info)**:
|
||
- 類別: `text-[11px] font-bold text-slate-400 dark:text-slate-500 tracking-[0.1em]`
|
||
- 範例: 使用者帳號、備註、權限名稱。
|
||
- **狀態標籤 (Status Badge)**:
|
||
- 範例: 啟用 (`emerald`)、禁用 (`rose`) / 角色名稱 (`sky`/`indigo`)。
|
||
- 特性: `px-2.5 py-1 rounded-lg text-[11px] font-black border tracking-wider`
|
||
|
||
### 空間與反應 (Spacing & Interaction)
|
||
- **單元格內距**: 統一使用 `px-6 py-6`。
|
||
- **懸停反應**: 必須在 `tr` 套用 `group` 且子元素套用 `group-hover:bg-slate-50/80` (深色: `dark:group-hover:bg-slate-800/40`) 以提供高級的互動感知。
|
||
|
||
### 分頁與列表控制項 (Pagination & Controls)
|
||
為了維持操作一致性，所有列表的分頁與切換組件必須遵循以下「Luxury Jump」模式：
|
||
- **統一高度**: 所有控制項（按鈕、下拉選單）固定為 `h-9` (36px)。
|
||
- **筆數切換 (Limit Selector)**:
|
||
- 樣式: 使用 `bg-slate-50` (深色: `dark:bg-slate-800`) 配合 `text-[11px] font-black`。
|
||
- 位置: 位於表格右上方。
|
||
- **分頁導航 (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)
|
||
為了確保長列表的操作便利，清單底部必須具備以下元素：
|
||
- **位置**: 卡片底部，內距 `px-8 py-6`，並帶有 `border-t border-slate-100/50 dark:border-slate-800/50`。
|
||
- **左側：每頁筆數 (Per Page Selector)**:
|
||
- 樣式: `luxury-select` (緊湊型)，高度固定為 `h-9`。
|
||
- 規範: 提供 `20, 50, 100` 等選項，並在變更時立即提交。
|
||
- **中央：資料指示 (Info)**:
|
||
- 樣式: `text-[11px] font-bold tracking-widest uppercase text-slate-400`。
|
||
- 內容: `Showing X to Y of Z results`。
|
||
- **右側：分頁導航 (Pagination)**:
|
||
- 模式: 優先使用 `Luxury Jump` (跳轉下拉選單) 以節省空間並提升效率。
|
||
|
||
### 標準清單萬用模板 (Standard List View Bible)
|
||
建立新列表頁面時，**必須**以此結構為基底：
|
||
|
||
```html
|
||
<div class="space-y-10 pb-20">
|
||
<!-- 1. Header Area: 標題與全局按鈕 -->
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Title') }}</h1>
|
||
<p class="text-xs font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Subtitle') }}</p>
|
||
</div>
|
||
<div>
|
||
<button class="btn-luxury-primary 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="flex items-center gap-4">
|
||
<!-- luxury-select & luxury-input -->
|
||
</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 路徑:
|
||
```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>
|
||
```
|
||
|
||
- **刪除按鈕 (Delete)**:
|
||
- 懸停特效: `hover:text-rose-500 hover:bg-rose-500/10 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>
|
||
```
|
||
|
||
---
|
||
> [!IMPORTANT]
|
||
> **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
|
||
> 嚴禁在 Blade 中寫入大量重複的 `bg-indigo-600` 等舊式類別。
|
||
|
||
---
|
||
> [!TIP]
|
||
> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。
|