一個專為台灣公司設計的現代化報價單生成與管理工具，支援拖拽排序、多格式匯出與本地持久化儲存。
A modern quotation generator and management tool designed for Taiwanese companies. Create, manage, and export professional quotations with drag-and-drop item ordering, multiple export formats (Excel, PDF, Image), and local data persistence.
- ✨ 功能特色
- 📸 Demo / Screenshots
- 🚀 快速開始
- 🚢 部署指南
- 📖 使用指南
- 🛠️ 技術棧
- 📁 專案結構
- 📤 匯出功能說明
- 🤝 貢獻指南
- 📄 License
- ❓ 常見問題
- 📞 聯絡與回饋
- 📋 報價單管理：建立與編輯報價單，管理客戶與服務提供方資訊，支援多個報價項目，自動計算總金額與稅額（內含/外加/不計算）
- 🔄 拖拽排序：使用
@dnd-kit實現流暢的拖拽排序功能 - 📤 多格式匯出：支援 Excel、PDF、圖片（JPG）格式匯出
- 💾 本地持久化：自動儲存到 localStorage，支援歷史記錄管理（最多 5 筆）
- 🌙 暗色模式：支援 Tailwind CSS 暗色模式
- Node.js 18+
- pnpm / npm / yarn
使用 pnpm（推薦）：
# 安裝依賴
pnpm install
# 啟動開發伺服器
pnpm dev
# 建置生產版本
pnpm build
# 預覽生產版本
pnpm preview使用 npm：
# 安裝依賴
npm install
# 啟動開發伺服器
npm run dev
# 建置生產版本
npm run build
# 預覽生產版本
npm run preview開發伺服器預設會在 http://localhost:5173 啟動。
# 建置生產版本
pnpm build # 或 npm run build
# 預覽生產版本
pnpm preview # 或 npm run preview建置完成後，將 dist/ 目錄部署到 Vercel、Netlify、GitHub Pages 等靜態網站託管服務。
使用 Docker Compose（推薦）：
docker-compose up -d使用 Docker 命令：
docker build -t quote-generator:latest .
docker run -d --name quote-generator -p 3000:80 quote-generator:latest應用程式將在 http://localhost:3000 啟動。
- 建立報價單：填寫基本資訊、客戶資訊、服務提供方資訊
- 新增報價項目：填寫品項名稱、描述、數量、單價（系統自動計算小計）
- 拖拽排序：按住項目左側拖拽圖示調整順序
- 匯出報價單：點擊頂部匯出按鈕（JPG / PDF / Excel）
- 管理歷史記錄：點擊右上角歷史記錄圖示查看、載入或刪除
| 技術 | 版本 | 用途 |
|---|---|---|
| React | 19.2.0 | UI 框架 |
| TypeScript | 5.9.3 | 類型系統 |
| Vite | 7.2.4 | 建置工具與開發伺服器 |
| 技術 | 版本 | 用途 |
|---|---|---|
| Zustand | 5.0.9 | 輕量級狀態管理 |
| Zustand Persist | - | 本地持久化中間件 |
| 技術 | 版本 | 用途 |
|---|---|---|
| shadcn/ui | - | UI 組件系統（基於 Radix UI） |
| @radix-ui/react-dialog | ^1.1.15 | 對話框組件 |
| @radix-ui/react-label | ^2.1.8 | 標籤組件 |
| @radix-ui/react-popover | ^1.1.15 | 彈出層組件 |
| @radix-ui/react-select | ^2.2.6 | 選擇器組件 |
| @radix-ui/react-slot | ^1.2.4 | Slot 組件 |
| Vaul | 1.1.2 | 抽屜組件 |
| 技術 | 版本 | 用途 |
|---|---|---|
| Tailwind CSS | 3.4.19 | 原子化 CSS 框架 |
| PostCSS | 8.5.6 | CSS 後處理器 |
| Autoprefixer | 10.4.23 | CSS 前綴自動補全 |
| class-variance-authority | ^0.7.1 | 組件變體管理 |
| clsx | ^2.1.1 | 條件類名工具 |
| tailwind-merge | ^3.4.0 | Tailwind 類名合併 |
| 技術 | 版本 | 用途 |
|---|---|---|
| @dnd-kit/core | ^6.3.1 | 拖拽核心功能 |
| @dnd-kit/sortable | ^10.0.0 | 拖拽排序功能 |
| @dnd-kit/utilities | ^3.2.2 | 拖拽工具函數 |
| date-fns | 4.1.0 | 日期處理 |
| react-day-picker | 9.13.0 | 日期選擇器 |
| lucide-react | 0.562.0 | 圖標庫 |
| exceljs | 4.4.0 | Excel 檔案生成 |
| html2canvas | 1.4.1 | HTML 轉圖片 |
| jspdf | 3.0.4 | PDF 檔案生成 |
| 技術 | 版本 | 用途 |
|---|---|---|
| ESLint | 9.39.1 | 程式碼檢查 |
| TypeScript ESLint | 8.46.4 | TypeScript 專用 ESLint 規則 |
| eslint-plugin-react-hooks | ^7.0.1 | React Hooks 規則 |
| eslint-plugin-react-refresh | ^0.4.24 | React Fast Refresh 規則 |
quote-generator/
├── public/ # 靜態資源
├── src/
│ ├── assets/ # 圖片、字體等資源
│ ├── components/ # React 組件
│ │ ├── ui/ # shadcn/ui 基礎組件
│ │ ├── ExportButtons.tsx
│ │ ├── HeaderSection.tsx
│ │ ├── HistoryDrawer.tsx
│ │ ├── InfoSection.tsx
│ │ ├── ItemsTable.tsx
│ │ ├── QuotationDisplay.tsx
│ │ └── SummarySection.tsx
│ ├── lib/ # 工具函數庫
│ │ └── utils.ts # 通用工具函數
│ ├── stores/ # 狀態管理
│ │ └── quotationStore.ts # Zustand store
│ ├── types/ # TypeScript 類型定義
│ │ └── quotation.ts
│ ├── utils/ # 業務邏輯工具
│ │ ├── calculations.ts # 計算相關
│ │ ├── exportHandler.ts # 匯出處理
│ │ └── imageUtils.ts # 圖片處理
│ ├── App.tsx # 主應用組件
│ ├── App.css # 應用樣式
│ ├── index.css # 全域樣式
│ └── main.tsx # 應用入口
├── dist/ # 建置輸出目錄
├── index.html # HTML 模板
├── package.json # 專案配置與依賴
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置
├── tailwind.config.js # Tailwind CSS 配置
└── README.md # 專案說明文件
專案使用 @/ 作為 src/ 目錄的別名，例如：
import { useQuotationStore } from '@/stores/quotationStore';
import { Button } from '@/components/ui/button';- Excel 匯出：生成
.xlsx檔案，相容 Excel 2007+ 格式 - PDF 匯出：使用 jsPDF + html2canvas 生成 PDF 文件
- 圖片匯出：使用 html2canvas 轉換為 JPG 圖片
瀏覽器相容性：Chrome 90+、Firefox 88+、Safari 14+、Edge 90+（不支援 IE 11）
- Fork 專案
- 建立分支：
git checkout -b feature/your-feature-name - 提交變更：
git commit -m "feat: 新增某項功能" - 推送並建立 Pull Request
Commit Message 慣例：使用 Conventional Commits 風格（feat:、fix:、docs: 等）
本專案採用 MIT License。若您需要使用不同的授權方式，請自行更換 LICENSE 檔案。
Q: 匯出的 PDF 排版與畫面顯示不一致？
A: html2canvas 可能無法完美還原某些 CSS 樣式（如 backdrop-filter），建議調整 scale 參數或確認內容已完全載入。
Q: 拖拽功能在行動裝置上無法使用？
A: @dnd-kit 預設支援觸控操作，請確認瀏覽器版本是否過舊。
Q: 清除瀏覽器資料後，報價單歷史記錄消失了？
A: 本專案使用 localStorage 儲存資料，清除瀏覽器資料會導致資料遺失。建議定期匯出重要報價單作為備份。
Q: 如何自訂報價單樣式？
A: 修改 src/components/QuotationDisplay.tsx 中的 Tailwind CSS 類別，或調整 tailwind.config.js 主題設定。
Q: 可以匯入現有的報價單嗎？
A: 目前僅支援從歷史記錄載入，Excel 匯入功能需要額外實作。
如有問題、建議或發現 Bug，歡迎建立 GitHub Issue 或提交 Pull Request。