[FEAT] 補全機台與金流設定多語系，並調整帳號管理表格佈局

2026-03-18 13:52:54 +08:00
parent cd34724c76
commit 3f41896532
19 changed files with 990 additions and 398 deletions
--- a/.agents/skills/ui-minimal-luxury/SKILL.md
+++ b/.agents/skills/ui-minimal-luxury/SKILL.md
@@ -25,8 +25,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ### 豪華卡片 (Luxury Card)
 ```html
 <div class="luxury-card p-6 rounded-2xl animate-luxury-in">
-    <!-- 鍏у<E98D8F> -->
-</div>
+    </div>
 ```
 - **特效**: 懸停時帶有 Y 軸平移與深度投影。

@@ -45,20 +44,18 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 - **Ghost**: `.btn-luxury-ghost` (無背景，適用於取消、查看更多)

 ```html
-<!-- Primary -->
 <button class="btn-luxury-primary">
-    <i class="lucide-plus size-4"></i>
+    <i class="lucide-plus w-4 h-4"></i>
    <span>建立新機台</span>
 </button>

-<!-- Ghost -->
 <button class="btn-luxury-ghost">取消</button>
 ```

 ## 3. 動畫與互動

 ### 進場動畫
- **`.animate-luxury-in`**: 鎵€鏈夌殑涓诲収瀹瑰崁鍩熸垨鍗＄墖鍦ㄩ爜闈㈣級鍏ユ檪锛屾噳鍏峰倷鐢变笅鑰岃綁鐨勬贰鍏ユ晥鏋溿€<EFBFBD>
+- **`.animate-luxury-in`**: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。

 ### 互動過渡 (Transitions)
 - **標準時間**: 所有的懸停、色彩變換等過渡效果，統一建議使用 **`duration-300`** (300ms)。
@@ -68,6 +65,8 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 - **互動原則**: 點擊觸發下拉選單時，必須使用 `x-transition` 且帶有 `scale` 偏移。
 - **樣式要求**: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。

+## 4. 實作檢查清單 (Checklist)
+
 - [ ] **列表佈局**: 是否採用「整合式卡片」結構且內距設為 `p-8`？
 - [ ] **分頁與總數**: 列表底部是否正確召喚 `vendor.pagination.luxury`？
 - [ ] **文字色階**: 符合標題 `slate-900/white` 與標籤 `slate-500` 的對比度。
@@ -76,7 +75,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ## 5. 開發注意事項 (Important Notes)

 ### 技術限制備忘
- **CSS 绶ㄨ<EFBFBD>**: 瑜囬洔鐨<EFBFBD> `box-shadow` 鎴栨几灞ゆ噳鐩存帴瀵<EFBFBD>師鐢<EFBFBD> CSS 灞<>€э紝閬垮厤鍦<E58EA4> `@apply` 涓<>娇鐢ㄥ付绌烘牸鐨勬暩鍊煎皫鑷寸法璀<E6B395>け鏁楋紙瑭宠<E791AD> KI: `tailwind-luxury-ui-patterns`锛夈€<EFBFBD>
+- **CSS 編譯**: 複雜的 `box-shadow` 或漸層應直接寫原生 CSS 屬性，避免在 `@apply` 中使用帶空格的數值導致編譯失敗。
 - **深色模式**: 互動式按鈕在深色模式下必須強化文字亮度（`dark:text-white`），並輔以青色發光效果。

 ### 即時動態呈現規範
@@ -107,24 +106,46 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ```html
@section('content')
 <div class="space-y-6">
-    <!-- Header: 妯欓<E5A6AF>鑸囨搷浣滄寜閳<E5AF9C> -->
    <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>
+            <button class="btn-luxury-primary">
+                <i class="lucide-plus w-4 h-4"></i>
+                <span>新增</span>
+            </button>
        </div>
    </div>

-    <!-- Main Container: 鍗＄墖鑸囪〃鏍<E38083> -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
+        <div class="flex items-center justify-between mb-10">
+            <form class="relative group">
+                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
+            </form>
+        </div>
+
        <div class="overflow-x-auto">
-            <table class="w-full text-left border-collapse">
-                <!-- Table Content -->
+            <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"> </td>
+                    </tr>
+                </tbody>
            </table>
        </div>
+
+        <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>
@endsection
@@ -170,9 +191,8 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
    - 樣式: `bg-indigo-500/10 text-indigo-500`
 - **危險/移除動作**: **玫瑰紅 (`Rose`)**。代表破壞性操作。
    - 樣式: `bg-rose-500/10 text-rose-500`
-```

-## 8. 璩囨枡琛ㄦ牸瑕忕瘎 (Data Tables)
+## 9. 資料表格規範 (Data Tables)

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

@@ -214,7 +234,9 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
  - 數字顏色對齊 `text-slate-600` (深色: `text-slate-300`)。

 ### 底部清單控制項 (Bottom List Controls)
-鐐轰簡纰轰繚闀峰垪琛ㄧ殑鎿嶄綔渚垮埄锛屾竻鍠<EFBFBD>簳閮### 妯欐簴鎿嶄綔鎸夐垥 (Standard Action Icons)
+為了確保長列表的操作便利，清單底部應保持乾淨，統一由分頁與總數組件接管操作。
+
+### 標準操作按鈕 (Standard Action Icons)
 表格內的操作欄位（如「編輯」、「刪除」、「詳情」）必須使用以下定義之 **「黃金標準 (Gold Standard)」**：

 - **共同樣式**: 
@@ -226,92 +248,19 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
    - 尺寸: `w-4 h-4`

 - **編輯按鈕 (Edit)**:
-    - 鎳稿仠鐗规晥: `hover:text-cyan-500 hover:bg-cyan-500/5 hover:border-cyan-500/20`
+    - 懸停特效: `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/5 hover:border-indigo-500/20`
+    - 懸停特效: `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/5 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>
-    ```
-y 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="relative group">
-                <!-- 鍍呬繚鐣欐悳灏嬫<E7818F>鎴栧繀瑕佺殑閬庢烤鍣<E783A4>紝绂佹<E7BB82>閲嶈<E996B2>绛嗘暩鍒囨彌 -->
-                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
-            </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)
- **鍥哄畾娆勪綅**: 绗<>竴娆勯€氬父鐐恒€岄棞閸垫<E996B8>璀樸€嶏紙濡<E7B499> ID 鎴栨檪闁擄級锛屾噳鍏峰倷鐗规畩瀛楅珨妯ｅ紡銆<E7B4A1>
- **鎿嶄綔娆勪綅**: 绲变竴浣嶆柤琛ㄦ牸鏈€鍙崇<E98D99>锛屼甫鍛藉悕鐐<E68295> `Action` (鎴<> `鎿嶄綔`)锛屾<E9949B>椤岃垏鍏у<E98D8F>鐨嗘噳 `text-right`銆<EFBFBD>
-## 9. 绯荤当鍏煎<E98D8F>鎬ц垏妯欐簴鍖<E7B0B4> (Compatibility & Standardization)
-
-鐐轰簡纰轰繚鍦ㄤ笉鍚岀増鏈<EFBFBD>殑闁嬬櫦鐠板<EFBFBD>涓<EFBFBD>紙濡傜洰鍓嶅皥妗堜娇鐢ㄧ殑 Tailwind CSS v3.1锛塙I 閮借兘姝ｇ⒑鍛堢従锛屼甫缍<E794AB>寔鍏ㄧ珯鎿嶄綔鎰熶竴鑷达紝蹇呴爤閬靛畧浠ヤ笅椤嶅<E6A4A4>瑕忕瘎銆<E7988E>
-
-### Tailwind CSS 鐗堟湰鍏煎<E98D8F>鎬<EFBFBD> (v3.1)
- **绂佹<E7BB82>浣跨敤 `size-` 灞<>€<EFBFBD>**: 鑸婄増涓嶆敮鎻<E695AE> `size-4` 绛夎獮娉曪紝璜嬩竴寰嬪垎鎷嗗<E98EB7>浣<EFBFBD> `w-4 h-4`銆<EFBFBD>
- **閬垮厤闈炴<E99788>婧栭枔璺<E69E94>**: 閬垮厤浣跨敤 `4.5` (`18px`) 绛変换鎰忓€硷紝鍎<E7B49D>厛浣跨敤妯欐簴绛夌礆濡<E7A486> `4` (`16px`) 鎴<> `5` (`20px`)銆<>
-
-### 妯欐簴鎿嶄綔鎸夐垥 (Standard Action Icons)
-琛ㄦ牸鍏х殑鎿嶄綔娆勪綅锛堝<EFBFBD>銆岀法杓<EFBFBD>€嶃€併€屽埅闄ゃ€嶏級蹇呴爤浣跨敤浠ヤ笅瀹氱京涔嬫<EFBFBD>婧栵細
-
- **鍏卞悓妯ｅ紡**: 
-    - 瀹瑰櫒: `p-2 rounded-lg bg-slate-50 dark:bg-slate-800`
-    - 涓昏壊: `text-slate-400`
-    - 鍦栫ず绮楃窗: `stroke-width="2.5"`
-    - 灏哄<E7818F>: `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 路徑:
@@ -319,25 +268,34 @@ y items-center gap-2">...</button>
    <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>
    ```

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

-## 10. 瀛楅珨鑸囨妧琛撹硣瑷婅<E791B7>绡<EFBFBD> (Typography & Technical Data)
+為了確保在不同版本的開發環境中（如目前專案使用的 Tailwind CSS v3.1）UI 都能正確呈現，並維持全站操作感一致，必須遵守以下額外規範。
+
+### Tailwind CSS 版本兼容性 (v3.1)
+- **禁止使用 `size-` 屬性**: 舊版不支援 `size-4` 等語法，請一律分拆寫作 `w-4 h-4`。
+- **避免非標準間距**: 避免使用 `4.5` (`18px`) 等任意值，優先使用標準等級如 `4` (`16px`) 或 `5` (`20px`)。
+
+## 11. 字體與技術資訊規範 (Typography & Technical Data)

 為了確保全站「次要資訊」具備極一致的高級感，必須遵守以下「機台標竿」規範：

 ### 核心樣式級別 (Core Typography Scale)
-| 璩囪▕椤炲瀷 | 瀹㈡埗/閰嶇疆鍚嶇ū (妯欓<E5A6AF>) | 鎶€琛撲唬纰<E594AC> (ID, SN, Code) | 鍒嗛殧绗﹁櫉 (鈥<>) |
-| :--- | :--- | :--- | :--- |
-| **瀛楅珨鏃<EFBFBD>** | `font-sans` (Plus Jakarta Sans) | `font-mono` (寰<EFBFBD>府鍨嬪柈闆欐牸) | `font-sans` |
-| **灏哄<EFBFBD>** | `text-base` | `text-xs` (涓嶅彲浣跨敤 10px) | `text-xs` |
-| **瀛楅噸** | `font-extrabold` (800) | `font-bold` (700) | `font-bold` |
-| **瀛楄窛** | `tracking-tight` (-0.02em) | `tracking-widest` (鏈€瀵<EFBFBD>) | `tracking-normal` |
-| **鏍煎紡** | 淇濇寔鍘熷<EFBFBD>鍚嶇ū | `uppercase` (寮峰埗澶у<EFBFBD>) | N/A |
-| **鑹插僵** | `slate-900` / `slate-100` | `slate-500` / `slate-400` | `slate-300` / `slate-700` |
+| 資訊類型 | 客戶/配置名稱 (標題) | 技術代碼 (ID, SN, Code) | 清單時間 (Timestamps) | 分隔符號 (•) |
+| :--- | :--- | :--- | :--- | :--- |
+| **字體族** | `font-sans` (Plus Jakarta Sans) | `font-mono` (微縮型單雙格) | `font-mono` (或 `sans` 視場景) | `font-sans` |
+| **尺寸** | `text-base` | `text-xs` (不可使用 10px) | `text-xs` | `text-xs` |
+| **字重** | `font-extrabold` (800) | `font-bold` (700) | `font-black` (900) | `font-bold` |
+| **字距** | `tracking-tight` (-0.02em) | `tracking-widest` (最寬) | `tracking-widest` | `tracking-normal` |
+| **格式** | 保持原始名稱 | `uppercase` (強制大寫) | `uppercase` | N/A |
+| **色彩** | `slate-900` / `slate-100` | `slate-500` / `slate-400` | `slate-400` / `slate-400/80` | `slate-300` / `slate-700` |

 ### 實作禁忌與準則
 - **禁止斜體 (No Italics)**: 名稱欄位嚴禁附帶 `italic`（特別是標題或配置名稱），保持直挺專業感。
 - **作用範圍 (Mono Scoping)**: `font-mono` 僅限作用於「純英文/數字」的代碼。Email 或分隔點必須回歸 `font-sans` 以確保圓潤。
 - **權重載入 (Font Weights)**: 確保 HTML Header 載入了 `800` 與 `900` 權重，避免瀏覽器模擬出的假粗體。
+- **清單資訊密度**: 對於高密度清單中的時間資訊，應優先使用 `font-black` 與 `tracking-widest` 來建立明確的「標籤感」，而非僅僅是「微縮文字」。
+
 ---
 > [!IMPORTANT]
 > **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
@@ -345,4 +303,4 @@ y items-center gap-2">...</button>

 ---
 > [!TIP]
-> 鐣堕亣鍒版湭瀹氱京鐨<EFBFBD> UI 鍗€濉婃檪锛屽劒鍏堝弮鑰<E5BCAE> `admin.dashboard.blade.php` 鐨勫崱鐗囪垏鍗虫檪鍕曟厠瀵︿綔鏂瑰紡閫茶<EFBFBD>琛嶇敓銆<EFBFBD>
+> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。