[FEAT] 完善全站多語系支援、角色權限篩選優化及 UI 元件重構

- [DOCS] 補齊 en, ja, zh_TW 語系檔翻譯並完善驗證錯誤訊息 (validation.php) - [FEAT] 角色權限頁面新增「所屬單位」篩選功能 (僅限系統管理員) - [STYLE] 優化角色列表顯示，將「類型」變更為具體「所屬單位」名稱 - [STYLE] 修正角色頁面工具列佈局，搜尋框置前並修正下拉箭頭顯示 - [REFACTOR] 統一全站刪除確認視窗，導入新版 <x-delete-confirm-modal /> 組件 - [REFACTOR] 優化 PermissionController 查詢效能 (Eager Loading) - [FIX] 修正 RoleSeeder 角色命名與資料庫同步邏輯
2026-03-20 13:41:51 +08:00
parent 6588dcd7f7
commit d2cefe3f39
31 changed files with 2431 additions and 1775 deletions
--- a/.agents/rules/rbac-rules.md
+++ b/.agents/rules/rbac-rules.md
@@ -24,6 +24,11 @@ trigger: always_on
 - 建立新資源時，必須在背景強制綁定 `company_id`，禁止由前端傳參決定。
 - 範例：`$model->company_id = Auth::user()->company_id;`

+### 1.4 角色清單隔離 (Role List Isolation)
+- 租戶管理員 (Tenant Admin) 只能管理隸屬於其公司下的角色。
+- **嚴禁使用**包含 `NULL` 的 `forCompany` 廣義作用域來展示管理清單。
+- 查詢時必須嚴格使用 `where('company_id', auth()->user()->company_id)` 隔離系統 Super Admin 或 角色範本。
+
 ---

 ## 2. 權限開發規範 (spatie/laravel-permission)
@@ -36,6 +41,12 @@ trigger: always_on
 - 權限名稱應遵循 `[module].[action]` 格式（例如 `machine.view`, `machine.edit`）。
 - 所有租戶共用相同的權限定義。

+### 2.3 權限遞迴約束 (Privilege Delegation Constraint)
+為防止權限提升 (Privilege Escalation)：
+- **權限子集驗證**：管理員僅能指派其**自身持有**之權限給其他角色或帳號。
+- **Controller 實作**：在 `store` 或 `update` 時，必須比對傳入的權限集合是否為操作者 `getPermissionNames()` 的子集。
+- **UI 過濾**：權限分配介面應基於當前使用者權限清單進行動態過濾展示。
+
 ---

 ## 3. 介面安全 (UI/Blade)
--- a/.agents/skills/ui-minimal-luxury/SKILL.md
+++ b/.agents/skills/ui-minimal-luxury/SKILL.md
@@ -67,8 +67,9 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範

 ## 4. 實作檢查清單 (Checklist)

- [ ] **列表佈局**: 是否採用「整合式卡片」結構且內距設為 `p-8`？
+- [x] **列表佈局**: 是否採用「整合式卡片」結構且內距設為 `p-8`？
 - [ ] **分頁與總數**: 列表底部是否正確召喚 `vendor.pagination.luxury`？
+- [ ] **刪除動作**: 是否已全面使用 `<x-delete-confirm-modal />` 封裝執行路徑？
 - [ ] **文字色階**: 符合標題 `slate-900/white` 與標籤 `slate-500` 的對比度。
 - [ ] **可讀性檢查**: 二級資訊是否達到 `text-xs` (12px) 且權重不超過 `font-bold`？

@@ -136,7 +137,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
                </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 font-extrabold text-slate-800 dark:text-slate-100">Example Name</td>
                        <td class="px-6 py-6 text-right"> </td>
                    </tr>
                </tbody>
@@ -152,8 +153,9 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ```

 ### 佈局核心原則:
-1. **移除重複內距**: 根容器 `div` 應**禁止**使用 `p-6` 或 `p-10`，因為佈局基底已提供基礎間距。僅使用 `space-y-6` (或 `space-y-8`) 控制區塊間隙。
-2. **主容器樣式**: 強制對齊為 `luxury-card rounded-3xl p-8`。
+1. **移除重複內距**: 根容器 `div` 應**禁止**使用 `p-6` 或 `p-10`，因為佈局基底已提供基礎間距。
+2. **區塊間隙**: 建議使用 `space-y-6` 或 `space-y-8` 以獲得最佳空氣感。但在「高密度資料管理」或使用者有特殊緊湊需求的情境下，容許縮減至 **`space-y-2`**。
+3. **主容器樣式**: 強制對齊為 `luxury-card rounded-3xl p-8`。
 3. **標題排版**: 
   - 主標題需應用 `font-display` (Outfit)。
   - 描述文字需應用 `uppercase tracking-widest font-bold` 以呈現高級設計感。
@@ -212,61 +214,24 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範

 ### 空間與反應 (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`。
+- **懸停反應**: 必須在 `tr` 套用 `group` 且子<EFBFBD>### 9.4 標竿刪除確認模式 (Luxury Delete Modal Pattern)
+當執行刪除或具備破壞性的操作時，**禁止**使用瀏覽器原生 `confirm()` 或簡易的 `x-modal`。全站統一使用 **`<x-delete-confirm-modal />`** Blade 組件進行二次確認。

-### 分頁與列表控制項 (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`)。
+1. **參數配置**: 
+   - `title`: (選填) 預設為「確認刪除」。
+   - `message`: (選填) 定義具體的刪除警告訊息（例如「您確定要永久刪除此帳號嗎？」）。
+2. **視覺特徵**:
+   - **背景**: `bg-slate-900/60 backdrop-blur-sm`。
+   - **容器**: `rounded-3xl shadow-2xl animate-luxury-in`。
+   - **圖示**: 警告圖示使用 `bg-amber-100/10 text-amber-600`。
+   - **按鈕**: 刪除按鈕使用 `bg-rose-500` 搭配 `shadow-rose-200` 投影，取消按鈕使用 `bg-slate-100`。
+3. **交互規範**:
+   - **禁止斜體 (No Italics)**: 彈窗標題與按鈕文字嚴禁使用 `italic`，保持直挺專業感。

-### 底部清單控制項 (Bottom List Controls)
-為了確保長列表的操作便利，清單底部應保持乾淨，統一由分頁與總數組件接管操作。
-
-### 標準操作按鈕 (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/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>
-    ```
-
- **查看詳情 (View/Detail)**:
-    - 懸停特效: `hover:text-indigo-500 hover:bg-indigo-500/10 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/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>
-    ```
+```html
+<!-- 使用範例 -->
+<x-delete-confirm-modal :message="__('Are you sure you want to delete this account?')" />
+```

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

@@ -296,6 +261,47 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 - **權重載入 (Font Weights)**: 確保 HTML Header 載入了 `800` 與 `900` 權重，避免瀏覽器模擬出的假粗體。
 - **清單資訊密度**: 對於高密度清單中的時間資訊，應優先使用 `font-black` 與 `tracking-widest` 來建立明確的「標籤感」，而非僅僅是「微縮文字」。

+---
+## 12. 提示與告警規範 (Alerts & Notifications)
+
+為了確保全站操作回饋的一致性與專業感，所有系統內部的提示（成功、錯誤、警告）必須遵循以下規範。
+
+### 1. 懸浮式自動消失提示 (Auto-hiding Toasts)
+- **視覺樣式**: 
+  - 位置: 固定於畫面上方中央 (`fixed top-8 left-1/2 -translate-x-1/2`)。
+  - 特效: 毛玻璃背景 (`backdrop-blur-xl`)、圓角 (`rounded-2xl`)、軟陰影。
+  - 動畫: 滑入 (`translate-y-0`) / 滑出 (`-translate-y-4`)，配合 `opacity` 變化。
+- **型態定義**:
+  - **Success (成功)**: 使用 `emerald` 色系。
+  - **Error (錯誤)**: 使用 `rose` 色系。
+- **時長規範**:
+  - 成功提示: 3 秒後消失。
+  - 錯誤提示: 5 秒後消失（提供使用者更多閱讀錯誤原因的時間）。
+- **組件實作**: 統一調用 `<x-toast />`。
+
+### 2. 視窗內操作警告 (Inline Action Warnings)
+- **適用場景**: 在 Modal 或編輯頁面中，提示可能導致風險的操作（如編輯自身角色）。
+- **視覺樣式**: 
+  - 背景: `bg-amber-500/10` (琥珀色)。
+  - 邊框: `border-amber-500/20`。
+  - 進場動畫: `animate-luxury-in`。
+- **實作範例**:
+```html
+<div class="p-5 bg-amber-500/10 border border-amber-500/20 text-amber-600 rounded-2xl flex items-start gap-4 animate-luxury-in font-bold">
+    <!-- Icon & Text -->
+</div>
+```
+
+### 3. 通用豪華確認與告警視窗 (General Luxury Modals)
+**統一準則**: 所有的系統確認 (Confirm) 或重要告警 (Alert/Warning) **必須** 捨棄 `x-modal` 組件，改用 Section 9.4 定義的自定義 Div 結構。
+
+- **警告模式 (Warning/Alert)**: 
+  - 僅提供「關閉/確定」一個按鈕。
+  - 樣式同 9.4，但隱藏刪除 Form 與相關色彩。
+- **確認模式 (Confirm)**: 
+  - 提供「取消」與「執行」兩個按鈕。
+  - 執行按鈕顏色視操作性質而定 (Delete: `rose`, Save/Action: `cyan`)。
+
 ---
 > [!IMPORTANT]
 > **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**