star-cloud/.agents/rules/framework.md

trigger

trigger
always_on

開發框架規範說明書：Cloud 後台管理系統 (star-cloud)

1. 專案概述

• 目標：打造一個強大且穩定的智能販賣機後台管理系統（Cloud 平台），負責管理機台、商品、銷售數據以及提供給端點機台串接的 API。
• 核心架構：採用 傳統單體式架構 (Monolithic Architecture) 配 Laravel Blade 模板引擎進行伺服器端渲染 (SSR)。
• 工作流程：後端處理業務邏輯與資料庫存取，並透過 Blade 引擎渲染包含 Tailwind CSS 類別的 HTML。前端互動行為由輕量級 Alpine.js 負責，UI 元件以 Preline UI 為主體。

2. 技術棧 (Tech Stack)

• 後端框架：PHP 8.5 / Laravel 12
• 核心組件：Redis (用於高併發 IoT 隊列與快取，為系統穩定之必要條件)
• 前端視圖 (View)：Laravel Blade
• 前端互動 (JS)：Alpine.js (專注於行為，不負責渲染)
• 介面與樣式 (CSS)：Tailwind CSS + Preline UI (直接寫作於 Blade 模板中)。
  • 重要規範：Preline UI 僅作為「原子組件」與「JS 互動邏輯」的參考庫。整體的「佈局」與「美學」必須嚴格遵守「極簡奢華風 UI 實作規範 (SKILL.md)」。
• 前端建置工具：Vite
• 資料庫：MySQL 8.0
• 開發環境：Laravel Sail (Docker / WSL2)

3. 目錄結構與慣例

3.1 後端 (Laravel)

與標準 Laravel 結構保持一致，無過度拆分的模組化（與 ERP 的 Modular Monolith 區別）：

• Controllers：app/Http/Controllers/，負責接收請求並回傳 view() 或 JSON。
• Models：app/Models/{Domain}/，按領域分群 (例如 Machine, Member, System)。
• Routes：routes/web.php 用於後台管理介面；routes/api.php 提供外部或機台調用介面 (需 V1 版本化)。
• Services (建議)：app/Services/{Domain}/，將商業邏輯與資料異動封裝於 Service 中。
• Traits：app/Traits/ApiResponse.php 用於統一 API JSON 回傳格式。
• Jobs：app/Jobs/{Domain}/，高併發 IoT 場景之必要實作。所有日誌、心跳上報必須進入 Redis Queue 進行背景異步處理，嚴禁在 API 直連 DB 寫入日誌。

3.2 前端 (Blade / Tailwind / Alpine)

• Views (頁面)：位於 resources/views/。通常依功能建立資料夾（如 resources/views/admin/machines/index.blade.php）。
• Layouts (版面)：位於 resources/views/layouts/。定義全站的共用版面結構（如 header, sidebar, footer）。
• Components (組件)：位於 resources/views/components/。封裝可重用的 Blade 元件（如 Button, Modal, Table），支援透過 <x-button> 語法呼叫。

4. 開發標準 (Coding Standards)

• 命名規範：
  • Controllers: PascalCaseController.php (例如 MachineController.php)
  • Models: PascalCase.php (例如 Machine.php)
  • Blade Views: kebab-case.blade.php 或按資源名稱 (例如 index.blade.php, create.blade.php)
  • Routes uri: kebab-case (例如 /machine-logs)
• 回傳格式：
  • Web 路由：回傳 view()，表單驗證失敗時直接使用 Laravel 內建的 redirect with errors。
  • API 路由：回傳標準 JSON 格式的 JsonResponse。

5. UI 與前端開發指南

• 樣式撰寫：全面使用 Tailwind CSS utility classes，避免撰寫自訂 CSS（除非少數特定動畫或覆寫）。
• UI 元件庫：遵循 Preline UI 的類別與 HTML 結構進行開發。
• 前端腳本：
  • 優先使用 Alpine.js (x-data, x-show, @click 等) 在 HTML 標籤內完成簡單的 DOM 狀態切換與互動邏輯。
  • 避免在 Blade 內撰寫冗長的 <script> Vanilla JS；若邏輯過於複雜，可將 Alpine state 獨立成 js 檔案再於 Vite 引入，但原則上保持輕量。

6. 多語系 I18n 規範 (Multi-language Standards)

• 視圖開發：所有使用者可見的文字、按鈕、提示訊息，必須使用 Laravel 的 @lang('key') 或 __('key') 函式包裹。
• 語系 Key 命名：語系 Key 必須採用 英文原始詞彙 (English phrases) 作為 Key 名稱為原則，以提高代碼可讀性並作為預設回退（除非該字串過長，才建議使用點號分隔的 key）。
  • 範例：使用 __('Account Settings')。
• 翻譯檔維護：
  • 主語系檔案位於 lang/ 目錄。
  • 開發新功能時，必須同步更新以下三個 JSON 翻譯檔：zh_TW.json (主要)、en.json (預設)、ja.json (日文)。

7. AI 協作規則 (給 Antigravity AI)

• 角色設定：你是一位專業的全端開發工程師助手。
• 代碼生成指令：
  • 所有的解釋說明請使用 繁體中文。
  • 【警告：Preline 冗餘】 Preline UI 的官方範例常包含多餘的控制項（如頂部筆數切換）。嚴禁照抄其佈局，必須確保頂部工具列（Header/Toolbar）維持極簡，重複功能一律收納至底部。
  • 【警告】 此專案前端禁用 React / Vue / Inertia.js。所有的前端頁面生成必須使用 Blade 模板 結合 Tailwind CSS 與 Alpine.js。
  • 【多語系強制要求】 任何新增的 Blade UI 區塊，禁止硬編碼 (Hard-coded) 中文或英文。必須使用 __('...') 並同步在 lang/*.json 補上翻譯。
  • 生成 UI 區塊時，必須優先參考與產生 Preline UI 風格與結構的標記語法。
  • 開發新功能時，請建立標準的 Controller 搭配對應的 resources/views/.../ 目錄。

8. 運行機制 (Docker / Sail)

由於專案運行在 Docker 容器環境中，請勿直接在宿主機 (Host) 執行 php 或 composer 指令。請使用專案內建的 sail 指令：

• 啟動環境：./vendor/bin/sail up -d
• 執行 PHP 指令：./vendor/bin/sail php -v
• 執行 Artisan 指令：./vendor/bin/sail artisan route:list
• 執行 Composer：./vendor/bin/sail composer install
• 執行 Node/NPM：./vendor/bin/sail npm run dev

8. 部署與查修環境 (CI/CD)

• 自動化部署：專案具備基於 Gitea Actions 的 CI/CD 自動化部署流程 (.gitea/workflows/)。
• Demo 環境 (對應 demo 分支)：
  • 透過 deploy-demo.yaml，合併或推送到 demo 分支會自動部署至 demo-cloud.taiwan-star.com.tw。
  • 登入伺服器查修：ssh gitea_work，路徑為 /var/www/star-cloud-demo。

9. 瀏覽器測試規範 (Browser Testing)

當需要進行瀏覽器自動化測試或手動驗證時，必須遵守以下連線資訊：

• 本地測試網址：http://localhost:8090/ (注意：非 8000 或 8080)
• 預設管理員帳號：admin
• 預設管理員密碼：Star82779061

Important

在執行 open_browser_url 或進行 E2E 測試時，請務必優先確認 Port 是否為 8090，以避免連線至錯誤的服務環境。