simple-sketch-canvas

輕量的 Vite + React + TypeScript 範本，包含一個可拖曳並繪製簽名/手寫的畫布元件（simple sketch canvas）。此專案已整合 TailwindCSS、PostCSS 與一些常用的工具庫，方便快速開發可嵌入簽名或手寫輸入的 UI 元件。

主要套件

• React + TypeScript
• Vite (開發伺服器與建置)
• TailwindCSS (樣式)
• react-sketch-canvas (畫布繪製)
• @supabase/supabase-js (已加入依賴，若需要可用於上傳/儲存簽名)

特色

• 可繪製／簽名的畫布（可拖曳）
• 簡單的控制面板元件
• 可擴充的 TypeScript 型別與工具函式

目錄結構（重點檔案）

• index.html — 入口 HTML
• src/main.tsx — React 入口
• src/App.tsx — 應用程式組合
• src/components/DraggableCanvas.tsx — 可拖曳的畫布元件（簽名/手寫）
• src/components/ControlPanel.tsx — 控制面板（按鈕/選項）
• src/components/TextSignature.tsx — 顯示文字簽名的元件
• src/utils/canvas.ts — 畫布相關的工具函式
• src/utils/validation.ts — 驗證工具
• src/types/signature.ts — 簽名相關的 TypeScript 型別
• package.json — 腳本與相依套件
• vite.config.ts, tsconfig.json 建置與開發設定

快速開始

先安裝相依套件：

npm install

啟動開發伺服器：

npm run dev

建置生產版本：

npm run build

本地預覽建置結果：

npm run preview

其他實用指令

• npm run lint — 執行 ESLint（專案已安裝 ESLint 與相關套件）
• npm run typecheck — TypeScript 型別檢查（不會輸出檔案）

建議的開發流程

1. 建立 feature 分支
2. 小步驟開發並且常態執行 npm run typecheck 與 npm run lint
3. 開 PR 前本機跑過 npm run build 確認無建置錯誤

常見問題 (FAQ)

• Q: 怎麼改變畫布大小或樣式？
  • A: 編輯 src/components/DraggableCanvas.tsx 與對應的 CSS（或 Tailwind 類別）。畫布尺寸可由該元件的 props 或內部狀態控制。
• Q: 要把簽名儲存到後端怎麼做？
  • A: react-sketch-canvas 可以輸出圖片或向量資料，請參考該套件文件，將輸出結果傳到你的 API（例如 Supabase Storage 或自有後端）。