[FEAT] 實作角色權限分類、租戶角控管理與介面多語系優化

1. [FEAT] 權限劃分為「系統層級」與「客戶層級」，並在後端強制過濾跨權限分配。 2. [FEAT] 整合選單權限至主選單層級 (基本設定、權限設定)，簡化角色管理 UI。 3. [STYLE] 側邊欄優化：補齊多語系翻譯，並為基本設定子選單增加視覺圖示。 4. [REFACTOR] 更新 RoleSeeder，將 tenant-admin 重新分類為客戶層級角色。
2026-03-17 16:53:28 +08:00
parent 3ce88ed342
commit fc79148879
38 changed files with 2398 additions and 303 deletions
--- a/.agents/rules/framework.md
+++ b/.agents/rules/framework.md
@@ -14,7 +14,8 @@ trigger: always_on
 *   **核心組件**：Redis (用於高併發 IoT 隊列與快取，為系統穩定之必要條件)
 *   **前端視圖 (View)**：Laravel Blade
 *   **前端互動 (JS)**：Alpine.js (專注於行為，不負責渲染)
-*   **介面與樣式 (CSS)**：Tailwind CSS + Preline UI (直接寫作於 Blade 模板中)
+*   **介面與樣式 (CSS)**：Tailwind CSS + Preline UI (直接寫作於 Blade 模板中)。
+    *   **重要規範**：Preline UI 僅作為「原子組件」與「JS 互動邏輯」的參考庫。整體的「佈局」與「美學」必須嚴格遵守「極簡奢華風 UI 實作規範 (SKILL.md)」。
 *   **前端建置工具**：Vite
 *   **資料庫**：MySQL 8.0
 *   **開發環境**：Laravel Sail (Docker / WSL2)
@@ -64,6 +65,7 @@ trigger: always_on
 *   **角色設定**：你是一位專業的全端開發工程師助手。
 *   **代碼生成指令**：
    *   所有的解釋說明請使用 **繁體中文**。
+    *   **【警告：Preline 冗餘】** Preline UI 的官方範例常包含多餘的控制項（如頂部筆數切換）。**嚴禁**照抄其佈局，必須確保頂部工具列（Header/Toolbar）維持極簡，重複功能一律收納至底部。
    *   **【警告】** 此專案前端禁用 React / Vue / Inertia.js。所有的前端頁面生成必須使用 **Blade 模板** 結合 **Tailwind CSS** 與 **Alpine.js**。
    *   **【多語系強制要求】** 任何新增的 Blade UI 區塊，禁止硬編碼 (Hard-coded) 中文或英文。必須使用 `__('...')` 並同步在 `lang/*.json` 補上翻譯。
    *   生成 UI 區塊時，必須優先參考與產生 **Preline UI** 風格與結構的標記語法。
--- a/.agents/skills/ui-minimal-luxury/SKILL.md
+++ b/.agents/skills/ui-minimal-luxury/SKILL.md
@@ -58,7 +58,11 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ## 3. 動畫與互動

 ### 進場動畫
- **`.animate-luxury-in`**: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。
+- **`.animate-luxury-in`**: <EFBFBD><EFBFBD><EFBFBD>厩<EFBFBD>銝餃<EFBFBD>摰孵<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>∠<EFBFBD><EFBFBD>券<EFBFBD><EFBFBD>Ｚ<EFBFBD><EFBFBD>交<EFBFBD>嚗峕<EFBFBD><EFBFBD>瑕<EFBFBD><EFBFBD>曹<EFBFBD><EFBFBD>諹<EFBFBD><EFBFBD><EFBFBD>楚<EFBFBD>交<EFBFBD><EFBFBD>栶<EFBFBD><EFBFBD>
+
+### 鈭鍦<E988AD><E98DA6>擧腹 (Transitions)
+- **璅蹱<E79285><E8B9B1><EFBFBD><EFBFBD>**: <20><><EFBFBD>厩<EFBFBD><E58EA9>詨<EFBFBD><E8A9A8><EFBFBD>𠧧敶抵<E695B6><E68AB5>𤤿<EFBFBD><F0A4A4BF>擧腹<E693A7><E885B9><EFBFBD>嚗𣬚絞銝<E7B59E>撱箄降雿輻鍂 **`duration-300`** (300ms)<29><>
+- **靘见<E99D98>**: 璆萄<E79286>蝝啣凝<E595A3><E5879D><EFBFBD>𤩺<EFBFBD>摨西<E691A8><E8A5BF>硋虾蝮桃<E89DAE><E6A183><EFBFBD> `150ms`嚗䔶<EFBFBD>瘨匧<EFBFBD><EFBFBD>峕艶<EFBFBD>脰<EFBFBD>雿滨宏<EFBFBD><EFBFBD><EFBFBD><EFBFBD>蓥<EFBFBD>敺衤誑 `300ms` <20>箸<EFBFBD><E7AEB8><EFBFBD>

 ### Alpine.js 互動模式 (以時間選擇器為例)
 - **互動原則**: 點擊觸發下拉選單時，必須使用 `x-transition` 且帶有 `scale` 偏移。
@@ -67,6 +71,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 - [ ] **列表佈局**: 是否採用「整合式卡片」結構且內距設為 `p-8`？
 - [ ] **分頁與總數**: 列表底部是否正確召喚 `vendor.pagination.luxury`？
 - [ ] **文字色階**: 符合標題 `slate-900/white` 與標籤 `slate-500` 的對比度。
+- [ ] **<EFBFBD>航<EFBFBD><EFBFBD>扳炎<EFBFBD><EFBFBD>**: 鈭𣬚<E988AD>鞈<EFBFBD><E99E88><EFBFBD>臬炏<E887AC>𥪜<EFBFBD> `text-xs` (12px) 銝娍<E98A9D><E5A88D>滢<EFBFBD>頞<EFBFBD><E9A09E> `font-bold`嚗<EFBFBD>

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

@@ -152,34 +157,54 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 </select>
 ```

+## 8. 蝺刻摩<E588BB><E691A9>底<EFBFBD><E5BA95><EFBFBD>閬讐<E996AC> (Detail & Edit Views)
+
+<EFBFBD>箔<EFBFBD>霈枏<EFBFBD>撅方<EFBFBD>閮𦠜凒<EFBFBD>瑁<EFBFBD>閬箏<EFBFBD>撠𠬍<EFBFBD><EFBFBD><EFBFBD><EFBFBD>见<EFBFBD>憛<EFBFBD> (Section) <20><><EFBFBD>蝷箸<E89DB7><E7AEB8>∠鍂銝滚<E98A9D><E6BB9A><EFBFBD><EFBFBD><EFBFBD>脫<EFBFBD>鞊～<E99E8A><EFBD9E>
+
+### <20><>憛𠰴<E6869B>蝷箄𠧧敶拇<E695B6>鞊<EFBFBD> (Section Icon Palette)
+- **<EFBFBD>箸𧋦鞈<EFBFBD><EFBFBD> (Basic Info)**: **蝧删<E89DA7><E588A0><EFBFBD> (`Emerald`)**<EFBFBD><EFBFBD>誨銵冽瓲敹<EFBFBD><EFBFBD><EFBFBD>帘摰朞<EFBFBD>韏琿<EFBFBD><EFBFBD><EFBFBD>
+    - 璅<><E79285>: `bg-emerald-500/10 text-emerald-500`
+- **蝖祇<E89D96>/<2F>埝局閮剖<E996AE>**: **<EFBFBD>亦<EFBFBD><EFBFBD><EFBFBD> (`Amber/Orange`)**<2A><>誨銵典<E98AB5>雿栶<E99BBF><E6A0B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>𦻖<EFBFBD><F0A6BB96>′擃磰郎<E7A3B0>𨳍<EFBFBD><F0A8B38D>
+    - 璅<><E79285>: `bg-amber-500/10 text-amber-500`
+- **蝟餌絞/<2F>脤<EFBFBD>閮剖<E996AE>**: **<EFBFBD>𥡝<EFBFBD><EFBFBD><EFBFBD> (`Indigo`)**<2A><>誨銵券<E98AB5>頛胯<E9A09B><E883AF><EFBFBD><EFBFBD>鞱<EFBFBD>瘛勗惜<E58B97>滨蔭<E6BBA8><E894AD>
+    - 璅<><E79285>: `bg-indigo-500/10 text-indigo-500`
+- **<EFBFBD>梢麬/蝘駁膄<E9A781>蓥<EFBFBD>**: **<EFBFBD>怎麯蝝<EFBFBD> (`Rose`)**<2A><>誨銵函聦憯墧<E686AF>扳<EFBFBD>雿栶<E99BBF><E6A0B6>
+    - 璅<><E79285>: `bg-rose-500/10 text-rose-500`
+```
+
 ## 8. 資料表格規範 (Data Tables)

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

 ### 文字大小與權重 (Typography Hierarchy)
 - **表頭 (Table Header)**: 
-  - 類別: `text-[11px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em]`
-  - 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。
+  - 憿𧼮ê̌: `text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em]`
+  - 雿𦦵鍂: <20>𣂷<EFBFBD>皜<EFBFBD>苊<EFBFBD><E88B8A><EFBFBD>雿滚<E99BBF>蝢抵<E89DA2>䔶<EFBFBD>憟芸<E6869F>鞈<EFBFBD><E99E88>閬𤥁死<F0A4A581>阡<EFBFBD><E998A1><EFBFBD><EFBFBD><EFBFBD>躰雲憭惩<E686AD>瘥𥪜漲<F0A5AA9C><E6BCB2>
 - **主標題 (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]`
+  - 憿𧼮ê̌: `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-[11px] font-black border tracking-wider`
+  - <EFBFBD>寞<EFBFBD><EFBFBD>: `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`) 以提供高級的互動感知。
+- **<EFBFBD>𣇉內摰孵膥<EFBFBD>詨<EFBFBD> (Icon Hover Palette)**:
+    - <20>𡑒”撌血<E6928C><E8A180><EFBFBD>蜓<EFBFBD>𣇉內摰孵膥<E5ADB5><E886A5> `group-hover` <20><><EFBFBD><EFBFBD>厩眏瘛∟𠧧<E2889F>峕艶頧厩<E9A0A7> **撖阡<E69296>銝駁<E98A9D><E9A781><EFBFBD>**<EFBFBD><EFBFBD>
+    - 憿𧼮ê̌: `group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300`<EFBFBD><EFBFBD>
+- **<EFBFBD><EFBFBD><EFBFBD><EFBFBD>峕郊霈𡃏𠧧**:
+    - 銝餅<E98A9D>憿峕<E686BF>摮堒銁 `group-hover` <20><><EFBFBD><EFBFBD>峕郊霈𡃏𠧧嚗䔶誑撘瑕<E69298>暺墧<E69ABA>撘訫<E69298><E8A8AB><EFBFBD>
+    - 憿𧼮ê̌: `group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors`<EFBFBD><EFBFBD>

 ### 分頁與列表控制項 (Pagination & Controls)
 為了維持操作一致性，所有列表的分頁與切換組件必須遵循以下「Luxury Jump」模式：
 - **統一高度**: 所有控制項（按鈕、下拉選單）固定為 `h-9` (36px)。
 - **筆數切換 (Limit Selector)**: 
-  - 樣式: 使用 `bg-slate-50` (深色: `dark:bg-slate-800`) 配合 `text-[11px] font-black`。
-  - 位置: 位於表格右上方。
+  - 閬讐<EFBFBD>: **蝳<>迫**<EFBFBD>刻”<EFBFBD>潔<EFBFBD><EFBFBD>對<EFBFBD>Header/Toolbar嚗厰<E59A97>銴<EFBFBD>𦆮蝵桃<E89DB5><E6A183>詨<EFBFBD><E8A9A8>偦<EFBFBD><E581A6>柴<EFBFBD><E69FB4>絞銝<E7B59E><E98A9D>嗥<EFBFBD><E597A5>澆<EFBFBD><E6BE86>典<EFBFBD><E585B8><EFBFBD><EFBFBD>雿溻<E99BBF><E6BABB>
 - **分頁導航 (Luxury Jump)**:
  - 模式: 捨棄傳統頁碼按鈕，全端統一使用「跳轉選單」。
  - 寬度: 下拉選單內部 Padding 為 `pl-4 pr-10`。
@@ -189,30 +214,38 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
  - 數字顏色對齊 `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` (跳轉下拉選單) 以節省空間並提升效率。
+<EFBFBD>箔<EFBFBD>蝣箔<EFBFBD><EFBFBD>瑕<EFBFBD>銵函<EFBFBD><EFBFBD>滢<EFBFBD>靘踹⏚嚗峕<EFBFBD><EFBFBD>桀<EFBFBD><EFBFBD>### 璅蹱<E79285><E8B9B1>滢<EFBFBD><E6BBA2>厰<EFBFBD> (Standard Action Icons)
+銵冽聢<EFBFBD>抒<EFBFBD><EFBFBD>滢<EFBFBD>甈<EFBFBD><EFBFBD>嚗<EFBFBD><EFBFBD><EFBFBD>𣬚楊頛胯<EFBFBD>溻<EFBFBD><EFBFBD><EFBFBD><EFBFBD>⏛<EFBFBD>扎<EFBFBD>溻<EFBFBD><EFBFBD><EFBFBD>諹底<EFBFBD><EFBFBD><EFBFBD>㵪<EFBFBD>敹<EFBFBD><EFBFBD>雿輻鍂隞乩<EFBFBD>摰𡁶儔銋<EFBFBD> **<EFBFBD>屸<EFBFBD><EFBFBD>烐<EFBFBD>皞<EFBFBD> (Gold Standard)<29><>**嚗<>

-### 標準清單萬用模板 (Standard List View Bible)
-建立新列表頁面時，**必須**以此結構為基底：
+- **<EFBFBD>勗<EFBFBD>璅<EFBFBD><EFBFBD>**: 
+    - 摰孵膥: `p-2 rounded-lg bg-slate-50 dark:bg-slate-800`
+    - 銝餉𠧧: `text-slate-400`
+    - <20>𦠜<EFBFBD>: `border border-transparent` (<28>脤<EFBFBD><E884A4>滩<EFBFBD><E6BBA9><EFBFBD>)
+    - <20>擧腹: `transition-all` (雿輻鍂<E8BCBB>鞱身<E99EB1>笔漲隞亦Ⅱ靽苷<E99DBD><E88BB7>賣<EFBFBD>)
+    - <20>𣇉內蝎㛖敦: `stroke-width="2.5"`
+    - 撠箏站: `w-4 h-4`

-```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>
+- **蝺刻摩<E588BB>厰<EFBFBD> (Edit)**:
+    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-cyan-500 hover:bg-cyan-500/5 hover:border-cyan-500/20`
+    - SVG 頝臬<E9A09D>: 
+    ```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>
+    ```
+
+- **<EFBFBD>亦<EFBFBD>閰單<EFBFBD> (View/Detail)**:
+    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-indigo-500 hover:bg-indigo-500/5 hover:border-indigo-500/20`
+    - SVG 頝臬<E9A09D>:
+    ```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>
+    ```
+
+- **<EFBFBD>芷膄<EFBFBD>厰<EFBFBD> (Delete)**:
+    - <20>詨<EFBFBD><E8A9A8>寞<EFBFBD>: `hover:text-rose-500 hover:bg-rose-500/5 hover:border-rose-500/20`
+    - SVG 頝臬<E9A09D>:
+    ```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>

@@ -220,8 +253,9 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
    <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 class="relative group">
+                <!-- <EFBFBD><EFBFBD><EFBFBD><EFBFBD>蹱<EFBFBD>撠𧢲<EFBFBD><EFBFBD>硋<EFBFBD>閬<EFBFBD><EFBFBD><EFBFBD>擧蕪<EFBFBD>剁<EFBFBD>蝳<EFBFBD>迫<EFBFBD>滩<EFBFBD>蝑<EFBFBD>彍<EFBFBD><EFBFBD><EFBFBD> -->
+                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
            </form>
        </div>