{"id":18146516,"url":"https://github.com/happyloa/nuxt-fakestoreapi","last_synced_at":"2026-04-13T01:02:55.146Z","repository":{"id":259038363,"uuid":"871838989","full_name":"happyloa/nuxt-fakestoreapi","owner":"happyloa","description":"Fake Store API 商品資料串接練習","archived":false,"fork":false,"pushed_at":"2025-06-08T14:14:31.000Z","size":930,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-08T15:19:04.066Z","etag":null,"topics":["fakestoreapi","json","nuxt3","nuxtjs","typescript","usefetch","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://nuxt-fakestoreapi.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/happyloa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-13T04:46:12.000Z","updated_at":"2024-11-01T00:50:01.000Z","dependencies_parsed_at":"2024-10-27T08:29:36.933Z","dependency_job_id":"216cac18-f92e-4a88-ab5f-c25368273671","html_url":"https://github.com/happyloa/nuxt-fakestoreapi","commit_stats":null,"previous_names":["happyloa/nuxt-fakestoreapi"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/happyloa/nuxt-fakestoreapi","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyloa%2Fnuxt-fakestoreapi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyloa%2Fnuxt-fakestoreapi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyloa%2Fnuxt-fakestoreapi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyloa%2Fnuxt-fakestoreapi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/happyloa","download_url":"https://codeload.github.com/happyloa/nuxt-fakestoreapi/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyloa%2Fnuxt-fakestoreapi/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263176921,"owners_count":23425849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fakestoreapi","json","nuxt3","nuxtjs","typescript","usefetch","vue3","vuejs"],"created_at":"2024-11-01T21:08:01.524Z","updated_at":"2026-04-13T01:02:55.130Z","avatar_url":"https://github.com/happyloa.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fake Store API | 假商店資料串接練習\n\n一個基於 Nuxt 4 與 Tailwind CSS v4 的示範專案，串接 [Fake Store API](https://fakestoreapi.com/)，完整展現電子商務流程：商品目錄、商品建立、購物車同步、帳號管理與使用者通訊錄，同時提供可重複使用的 Vue 元件與多語系支援。\n\n![縮圖](https://github.com/happyloa/nuxt-fakestoreapi/blob/main/public/thumb.webp?raw=true)\n\n## ✨ 特色亮點\n\n### 商品體驗\n\n- **豐富的目錄介面**：具備 Hero Section 版面、統計卡片（`BaseStatCard`）與響應式網格，全部以 Tailwind CSS 呈現。\n- **強大的篩選功能**：結合關鍵字搜尋、分類篩選與排序，並以 URL 參數同步狀態（`useProductFilters` composable）。\n- **商品建立流程**：透過 Fake Store API 的即時 POST 請求建立商品。\n- **詳細頁面**：專屬商品頁提供評價、價格與快速加入購物車的操作。\n\n### 購物車\n\n- **API 同步的購物車**：使用示範帳號登入即可載入並保存來自 Fake Store API 的購物車資料。\n- **數量管理**：支援增加、減少與刪除品項，立即更新總計。\n- **訂單摘要**：響應式側邊欄整理品項與金額。\n- **登出自動清空**：登出時自動清除購物車資料，避免殘留。\n\n### 帳號管理\n\n- **個人帳號頁**：登入後可查看個人資料（使用者名稱、姓名、Email、電話）、送貨地址與最近訂單紀錄。\n- **頭像縮寫**：自動從使用者姓名取首字母作為頭像顯示。\n- **最近訂單**：顯示購物車品項縮圖、名稱、數量與小計，最多顯示 3 筆。\n\n### 使用者管理\n\n- **使用者通訊錄**：瀏覽 Fake Store API 使用者，並附上聯絡資訊與地址。\n- **搜尋功能**：可依姓名、使用者名稱或電子郵件進行過濾。\n\n### 國際化與 UI 系統\n\n- **雙語支援**：透過 `@nuxtjs/i18n` 提供繁體中文與英文介面。\n- **可組合的 UI 元件庫**：提供按鈕、卡片、輸入框、下拉選單、文字區塊、徽章、警示、統計卡片、載入器與標題等基礎元件。\n- **深色模式**：支援淺色、深色與系統偏好三種主題切換，搭配浮動切換按鈕與平滑過渡動畫。\n- **響應式版面**：黏性標頭搭配毛玻璃背景、漸層 Logo、滑入式行動選單（斷點 1024px），以及遍佈全站的 Tailwind 設計語彙。\n\n### 動畫與體驗優化\n\n- **AOS 滾動動畫**：全站整合 Animate On Scroll，透過 `aos.client.ts` 插件統一設定，所有頁面與元件均具備進場動畫。\n- **回到頂端按鈕**：偵測捲動位置，自動顯示的 `BackToTop` 浮動按鈕，搭配淡入縮放過渡動畫。\n- **頁面過渡**：Nuxt 路由切換時具備滑入淡出的 page transition 效果。\n- **互動微動畫**：按鈕 hover 發光、卡片 hover 上浮、圖片 hover 放大、Logo 漸層色彩、浮動裝飾圓形動畫等。\n- **防閃爍機制**：透過 `transition-ready` class 延遲套用過渡效果，避免主題或語言切換時的 FOUC 問題。\n- **自訂錯誤頁面**：`error.vue` 提供友善的 404／通用錯誤畫面並支援返回首頁。\n\n### API 操作區\n\n- **互動式 API 操作區**：涵蓋商品、購物車與使用者等 Fake Store API 端點，搭配表單輔助與即時 JSON 回應。\n- **通知提示**：針對購物車、登入與管理操作提供成功／資訊提示（Toast 通知由 `useNotificationsStore` 管理）。\n- **載入骨架與空狀態**：以骨架畫面（`ProductGridSkeleton`）與友善的空狀態（`ProductEmptyState`）改善感知效能。\n\n### 架構整理亮點\n\n- **語意化 HTML**：全面採用 `article`、`section`、`figure`、`hgroup`、`address`、`dl`/`dt`/`dd` 等語意標籤，搭配 ARIA 屬性提升無障礙體驗。\n- **`services/fakestore/` 服務層**：以獨立的 `client.ts` 作為基底 HTTP 客戶端，`products.ts`、`carts.ts`、`users.ts`、`auth.ts` 分模組封裝 API 呼叫，日後可在單一入口加入攔截器或快取策略。\n- **`composables/` 可組合函式**：例如 `useProductFilters` 將查詢參數與過濾邏輯封裝，維持頁面程式碼純淨。\n- **安全性標頭**：透過 Nitro `routeRules` 全站套用 `Content-Security-Policy`、`Strict-Transport-Security`、`X-Frame-Options` 等完整 HTTP 安全性標頭。\n- **繁中註解與說明**：核心頁面、Store 與元件皆附上繁體中文註解，方便檢視與展示。\n\n## 🧱 使用技術\n\n- [Nuxt 4.4.2](https://nuxt.com/) 與最新的 Nitro 執行環境。\n- [Tailwind CSS v4](https://tailwindcss.com/)，採用 CSS-first 配置方式，透過 `@tailwindcss/vite` 整合。\n- 以 [Pinia](https://pinia.vuejs.org/) 建立的商品、購物車、認證、使用者、通知與主題狀態管理（共 6 個 Store）。\n- 使用 [@nuxtjs/i18n](https://i18n.nuxtjs.org/) 進行在地化，根路徑預設中文介面（無 `/zh`），英文頁面才以 `/en` 呈現，且非中文瀏覽器自動顯示英文。\n- 使用 [@nuxt/image](https://image.nuxt.com/) 進行圖片最佳化，支援外部圖片網域。\n- 使用 [@nuxtjs/google-fonts](https://google-fonts.nuxtjs.org/) 載入 `Noto Sans TC` 字型（100～900 字重）。\n- [AOS](https://michalsnik.github.io/aos/) 提供滾動觸發的進場動畫。\n- 元件、狀態與可組合函式全面採用 TypeScript。\n\n## 🚀 快速開始\n\n```bash\n# 安裝相依套件\nnpm install\n\n# 啟動開發伺服器\nnpm run dev\n\n# 建置正式版本\nnpm run build\n\n# 預覽正式版本\nnpm run preview\n```\n\nFake Store API 提供公開的示範帳號，登入表單已預填官方範例：\n\n```\nusername: mor_2314\npassword: 83r5^_\n```\n\n## 📁 專案結構\n\n```\n.\n├─ app/                        # Nuxt 4 app router 根目錄\n│  ├─ app.vue                  # 應用程式外殼，包含 SEO、Loading Indicator 與 Layout\n│  ├─ error.vue                # 自訂錯誤頁面（404 / 通用錯誤）\n│  ├─ assets/css/tailwind.css  # Tailwind v4 CSS-first 配置與自訂主題\n│  ├─ components/              # UI 模組\n│  │  ├─ api/                  # API 操作區元件（ApiOperationCard、ApiResultViewer、ProductsSection、CartsSection、UsersSection）\n│  │  ├─ auth/                 # 認證元件（LoginForm）\n│  │  ├─ cart/                 # 購物車元件（CartItemsList、CartSummary）\n│  │  ├─ layout/               # 版面元件（SiteHeader、SiteFooter、ThemeToggle、LanguageSwitcher）\n│  │  ├─ products/             # 商品元件（ProductCard、ProductGrid、ProductHero、ProductDetail、ProductFilterPanel、ProductForm、ProductGridSkeleton、ProductEmptyState、ProductStats）\n│  │  ├─ ui/                   # 基礎 UI 元件（BaseButton、BaseCard、BaseInput、BaseSelect、BaseTextarea、BaseBadge、BaseAlert、BaseStatCard、BaseLoader、BaseSectionHeading、BackToTop、ToastContainer）\n│  │  └─ users/                # 使用者元件（UserCard、UserList）\n│  ├─ composables/             # 可重複使用的業務邏輯（useProductFilters）\n│  ├─ layouts/                 # Nuxt 版型（預設版型含頁面過渡動畫）\n│  ├─ pages/                   # 頁面路由\n│  │  ├─ index.vue             # 首頁（商品目錄、篩選、統計）\n│  │  ├─ product/[id].vue      # 商品詳情頁\n│  │  ├─ products/new.vue      # 新增商品\n│  │  ├─ cart.vue              # 購物車\n│  │  ├─ login.vue             # 登入\n│  │  ├─ account.vue           # 帳號（個人資料、地址、最近訂單）\n│  │  ├─ users.vue             # 使用者通訊錄\n│  │  └─ api.vue               # API 互動操作區\n│  ├─ plugins/                 # 客戶端插件（theme.client、i18n-locale.client、aos.client）\n│  ├─ services/fakestore/      # Fake Store API 呼叫封裝\n│  │  ├─ client.ts             # 基底 HTTP 客戶端\n│  │  ├─ products.ts           # 商品端點\n│  │  ├─ carts.ts              # 購物車端點\n│  │  ├─ users.ts              # 使用者端點\n│  │  └─ auth.ts               # 認證端點\n│  ├─ stores/                  # Pinia 狀態（auth、cart、products、users、notifications、theme）\n│  ├─ types/                   # TypeScript 型別定義（fakestore.ts、aos.d.ts）\n│  └─ i18n/locales/            # zh.json 與 en.json 翻譯檔\n├─ public/                     # 靜態資源（og-image.webp、thumb.webp、favicon.ico、hero-products.svg 等）\n├─ nuxt.config.ts              # Nuxt 設定（模組、i18n、Vite + Tailwind v4、Nitro 安全性標頭）\n└─ tsconfig.json               # TypeScript 設定\n```\n\n## 🔌 Fake Store API 覆蓋範圍\n\n- `GET /products`、`GET /products/:id`、`GET /products?limit=`：商品目錄、詳情與篩選查詢。\n- `GET /products/categories`、`GET /products/category/:category`：動態篩選與分類頁面。\n- `POST /products`、`PUT /products/:id`、`DELETE /products/:id`：新增、更新與刪除商品。\n- `POST /auth/login`：使用者驗證與 JWT 取得。\n- `GET /carts`、`GET /carts/:id`、`GET /carts/user/:id`：瀏覽購物車歷史與詳情。\n- `POST /carts`、`PUT /carts/:id`、`DELETE /carts/:id`：建立、更新與刪除購物車資料。\n- `GET /users`、`GET /users/:id`：使用者列表與個別檔案。\n- `POST /users`、`PUT /users/:id`、`DELETE /users/:id`：在操作區內完整管理使用者。\n\n## 🛡️ 安全性\n\n透過 Nitro `routeRules` 對全站路由套用以下 HTTP 安全性標頭：\n\n| 標頭 | 說明 |\n|------|------|\n| `Content-Security-Policy` | 防止 XSS，嚴格限制腳本、樣式、圖片與連線來源 |\n| `Strict-Transport-Security` | 強制 HTTPS，有效期 2 年並含子網域 |\n| `X-Frame-Options` | 禁止 iframe 嵌入（DENY） |\n| `X-Content-Type-Options` | 防止 MIME 類型嗅探 |\n| `Referrer-Policy` | 嚴格的來源政策 |\n| `Permissions-Policy` | 關閉相機、麥克風、地理位置等瀏覽器功能 |\n| `Cross-Origin-Opener-Policy` | 防止跨來源視窗存取 |\n\n## 🛠️ 開發備註\n\n- UI 元件皆模組化，方便維護與擴充。元件路徑前綴已移除，可直接以元件名稱使用（例如 `\u003cProductCard /\u003e`）。\n- Tailwind CSS v4 採用 CSS-first 配置方式，自訂主題定義於 `app/assets/css/tailwind.css` 的 `@theme` 區塊中。\n- Pinia store 提供載入與錯誤狀態，讓頁面邏輯保持宣告式。\n- 國際化字串位於 `app/i18n/locales/`，以語意化命名空間組織（`zh.json` / `en.json`）。\n- Toast 通知由 `useNotificationsStore` 管理，並透過全域 `\u003cToastContainer /\u003e` 元件渲染。\n- 全站使用語意化 HTML 標籤與 ARIA 屬性，符合無障礙網頁標準。\n- 部署網域須設定於 `NUXT_PUBLIC_SITE_URL` 環境變數，供 i18n SEO 標籤使用。\n\n歡迎依需求調整版面、擴充 API 覆蓋範圍，或在自己的專案中沿用這些 UI 元件！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappyloa%2Fnuxt-fakestoreapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhappyloa%2Fnuxt-fakestoreapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappyloa%2Fnuxt-fakestoreapi/lists"}