跳到主要內容CASE STUDY · BUSINESS WEB / CMS
股東紀念品服務與
內容管理平台
把公開服務網站、商品與公告內容管理、管理員認證、PostgreSQL 資料庫與圖片儲存整合成一套可維護的商業網站流程。
作品集只描述程式碼中可驗證的功能；未採用 README 中未附測試證據的效能提升百分比，也不在此複製商家聯絡資訊。
- 角色
- 前端與 CMS 整合
- 範圍
- 公開網站 · CMS · Auth / RLS · Storage
- 狀態
- Live service site
- 技術
- Vue 3 · TypeScript · Supabase
- 年份
- 2026
00 / Project framing
專案脈絡與工程判斷
Problem商業服務網站的商品與公告若每次都靠修改程式發布，內容維護成本會快速增加。Decision用 Vue 3 / TypeScript 建公開站與 CMS，Supabase 提供 Email Auth、PostgreSQL、Storage 與 RLS 資料存取控制。Evidence目前可核對商品 / 公告 2 條主要 CMS 流程、Auth / Database / Storage 3 種 Supabase 能力、9 種 Schema.org type 與 GitHub Actions CI/CD。Next下一步可強化後台操作稽核、內容版本紀錄與更完整的管理端流程；目前 Portfolio 不宣稱這些已存在。 01 / Product scope
不只做首頁，也做可自行維護內容的後台。
2主要內容管理流程：公告與商品
3Supabase 能力：Auth、Database、Storage
9README 記載的 Schema.org 結構化資料類型
CI/CD以 GitHub Actions 管理部署流程
02 / Architecture
公開網站與管理後台共用雲端資料層。
Vue 3 UI服務、方案、商品、公告與聯絡流程
Admin CMS登入後新增、編輯、刪除與上下架內容
SupabaseEmail Auth、PostgreSQL 與 Row Level Security
Storage商品圖片與內容資產的雲端儲存
Portfolio 優先擷取 sharegift.tw 的公開首頁作為作品預覽；若公開站暫時無法擷取，才回退至已審核的架構圖。建置流程不會存取需要登入的管理後台。03 / Public website
Responsive Service Site以 Vue 3、TypeScript、Vite 與 Tailwind 建立手機、平板與桌機皆可使用的服務網站。Service & Product Content前台呈現服務方案、產品圖庫、公告、聯絡與招募等內容。SEO Foundation包含 meta、sitemap、robots.txt 與 JSON-LD 結構化資料。Media DeliveryREADME 記載支援響應式圖片及 AVIF / WebP / JPEG 回退策略。 04 / Admin operations
把日常內容更新從改程式碼變成後台操作。
- 管理員以 Supabase Email / Password Authentication 登入。
- 公告可新增、編輯、刪除並設定類型與標籤。
- 商品可新增、編輯、設定價格與分類，並切換上架／下架。
- 圖片可上傳到 Supabase Storage，內容資料保存至 PostgreSQL。
- 資料層使用 Row Level Security 作為權限邊界的一部分。
05 / Engineering choices
Typed FrontendVue Composition API 搭配 TypeScript，將頁面、composables 與資料型別分離。Managed Backend用 Supabase 同時處理 Auth、PostgreSQL 與 Storage，減少自行維運基礎設施。Operational CMS讓非開發者可以更新公告與商品，產品價值不只停在一次性交付頁面。Deployment Workflow透過 GitHub 版本控制與 Actions 建立可重複的部署流程。 06 / Takeaway
商業網站的重點，是交付後仍能被營運。
這個專案把前台展示、內容管理、身份驗證、資料庫、圖片儲存與 SEO 串在一起。相較只做靜態形象頁，核心差異是管理者可以持續更新內容，不需要每次都修改程式碼。