diff --git a/.agents/skills/ui-minimal-luxury/SKILL.md b/.agents/skills/ui-minimal-luxury/SKILL.md index af6c976..cab0720 100644 --- a/.agents/skills/ui-minimal-luxury/SKILL.md +++ b/.agents/skills/ui-minimal-luxury/SKILL.md @@ -386,6 +386,12 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範 :selected="request('company_id')" :placeholder="__('All Companies')" /> + +{{-- 下拉選單遮擋處理範例 --}} +
+ + +
``` --- @@ -435,4 +441,35 @@ async fetchPage(url) { | 基本資訊 | 翠綠 Emerald | `bg-emerald-500/10 text-emerald-500` | | 硬體/插槽 | 琥珀 Amber | `bg-amber-500/10 text-amber-500` | | 系統/進階 | 靛藍 Indigo | `bg-indigo-500/10 text-indigo-500` | -| 危險/刪除 | 玫瑰 Rose | `bg-rose-500/10 text-rose-500` | \ No newline at end of file +| 危險/刪除 | 玫瑰 Rose | `bg-rose-500/10 text-rose-500` | +--- + +## 10. Z-Index 堆疊與遮擋處理 (Z-Index Stacking) + +> [!IMPORTANT] +> 當頁面或 Modal 中存在多個垂直排列的 x-searchable-select 時,為防止選單開展時被下一個欄位遮擋,嚴禁使用固定的 z-index。 + +### 10.1 動態層級提升模式 +必須在欄位容器上使用 focus-within:z-[index],確保正在操作的欄位永遠處於堆疊最前方。 + +| 使用場景 | 推薦 Class | +|---------|------------| +| 一般表單頁面 | relative focus-within:z-[20] | +| 模態框 (Modal) 內 | relative focus-within:z-[60] | + +### 10.2 代碼範例 +```html +
+ +
+ + +
+ + +
+ + +
+
+``` diff --git a/resources/views/admin/basic-settings/machines/edit.blade.php b/resources/views/admin/basic-settings/machines/edit.blade.php index b995832..70cedb1 100644 --- a/resources/views/admin/basic-settings/machines/edit.blade.php +++ b/resources/views/admin/basic-settings/machines/edit.blade.php @@ -131,7 +131,7 @@ -
+
@if(auth()->user()->isSystemAdmin()) -
+
-
+
-
+