[FEAT] 優化部署流程:加入 RoleSeeder 與 AdminUserSeeder,並實作權限系統基礎架構與多租戶隔離機制
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 48s
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 48s
This commit is contained in:
@@ -68,7 +68,10 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
|
||||
- [ ] 是否使用了正確的 `rounded-2xl` (或更圓) 的導角?
|
||||
- [ ] 所有的圖示是否一致使用 `lucide-react` 風格?
|
||||
- [ ] 卡片是否有適當的間距 (通常為 `p-6`)?
|
||||
- [ ] 文字色階是否符合:標題 (slate-900/white)、副標 (slate-500/slate-400)?
|
||||
- [ ] 文字色階是否符合:
|
||||
- **標題**: `text-slate-900` / `dark:text-white`
|
||||
- **副標/標籤**: 最小應為 `text-slate-500` / `dark:text-slate-400`(避免使用 `slate-400` 以下等級,以確保對比度足以閱讀)。
|
||||
- [ ] **字體大小**: 確保所有文字至少為 `text-xs`,重要的標籤建議為 `text-sm`。
|
||||
|
||||
## 5. 開發注意事項 (Important Notes)
|
||||
|
||||
@@ -80,6 +83,102 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
|
||||
- **格式**: `#機台編號 動作內容` (例如 `#V-001 執行出貨`)。
|
||||
- **脈絡**: 必須呈現相對時間與機台位置。
|
||||
|
||||
## 6. 頁面佈局規範 (Page Layout)
|
||||
|
||||
### 標準寬版佈局 (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-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest`
|
||||
- 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。
|
||||
- **主標題 (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.15em]`
|
||||
- 範例: 機台序號 (SN)、公司代碼。
|
||||
- **狀態標籤 (Status Badge)**:
|
||||
- 類別: `text-[11px] font-black tracking-widest`
|
||||
- 樣式: 在線 (`emerald`)、離線 (`rose`)。
|
||||
- **時間訊號 (Signals/Time)**:
|
||||
- 類別: `text-[13px] font-bold font-display tracking-widest`
|
||||
- 作用: 解決數字黏滯感,提升判讀舒適度。
|
||||
|
||||
- **內距 (Padding)**: 單元格統一使用 `px-6 py-6` 以維持呼吸感。
|
||||
- **懸停 (Hover)**: 表格行需具備 `hover:bg-slate-50/80` (深色: `dark: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`)。
|
||||
```
|
||||
|
||||
---
|
||||
> [!IMPORTANT]
|
||||
> **開發新功能前,必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
|
||||
|
||||
Reference in New Issue
Block a user