內部工具 / Labs
[Labs] Astro + React：可維護的 Dashboard Shell
用 Astro + React 建立可重用的 Dashboard Shell，將常用圖表流程收斂成可維護的前端骨架。
案例預覽
直接在案例頁內嵌示範站，讓訪客不用跳頁也能快速理解版型與互動。
若預覽無法載入，可直接前往原始頁面查看。
挑戰
廠內圖表需求反覆出現，若每次從零拼接頁面，維護與擴充成本會快速上升。
解法
以 Astro 處理頁面骨架與載入效能，搭配 React 封裝圖表區塊與互動元件，建立可重用的儀表板模組。
結果
產出可直接延伸的 Dashboard Shell，後續新增圖表頁可沿用既有版型與元件組合，縮短開發時間。
技術重點
- Astro 負責靜態殼層與內容結構，降低首屏負擔。
- React 元件負責圖表互動，將可變動邏輯集中在元件層。
- 以 Shell 思維切分導覽、版型、內容區，讓新圖表模組可平滑插入。