[FEATURE] - [UI] Certificate List - Upload Area

TzuHanLiang commented 1 month ago

Upload Area 可以直接參考 Alpha 版本，Scanner按下後的要彈出QRCode

「Drop your files here or Browse」、「Use your phone as 」兩邊的功能應該是分開的，是不是可以被分別 hover ？
「Use your phone as Scanner」Scanner 是可以按的嗎？按下後會有彈出的 QRCode 嗎？

Frontend Framework

No response

[mockup](https://www.figma.com/design/qSOAuNX7hxVQaKD51ghONu/iSunFA-Mockup-(Beta)?node-id=5-12192&t=WIW0aNehAYcudQbH-1)

TzuHanLiang commented 1 month ago

TzuHanLiang commented 1 month ago

要實作的 前端畫面相關功能，包括 API 交互部分的具體描述如下：

此上傳區域允許使用者將檔案拖曳上傳或通過手機掃描 QR Code 上傳。該區域包含兩種上傳方式，並且需要與後端 API 進行互動來上傳檔案。

功能描述：允許使用者將文件拖曳到上傳區域，或點擊「Browse」按鈕從檔案系統中選擇檔案進行上傳。
實作細節：
- 拖曳功能：在上傳區域內設置拖曳監聽，當檔案被拖入時顯示相應的 UI 提示。
- 瀏覽文件功能：點擊「Browse」按鈕時觸發文件選擇器，允許使用者手動選擇檔案。
- 檔案大小限制：檢查上傳的檔案大小，確保檔案小於 50MB，否則提示錯誤信息。
API 交互：
- 當使用者選擇或拖曳檔案後，通過 API 發送 POST 請求將檔案上傳到後端。
- API 路徑範例：
```
POST /api/upload/certificates
```
- 請求的資料應包含：
  - 檔案內容（多個檔案的支援）
  - 使用者的識別資訊（例如 userId 或 sessionId）
前端處理：
- 上傳成功後，顯示上傳完成的提示，並刷新證書列表以顯示新上傳的檔案。
- 如果上傳失敗，顯示錯誤提示，並允許使用者重新上傳。

功能描述：提供 QR Code 掃描的方式，允許使用者用手機掃描 QR Code 並上傳文件。
實作細節：
- 當使用者點擊「Use your phone as Scanner」按鈕時，生成並顯示一個可掃描的 QR Code。
- QR Code 內容應包含一個上傳連結，讓使用者可以通過手機上傳文件。
API 交互：
- 當使用者請求生成 QR Code 時，前端會發送 API 請求來獲取一個包含上傳 URL 的 QR Code。
- API 路徑範例：
```
GET /api/generate-upload-qrcode
```
- 請求的資料應包括：
  - 使用者識別資訊（如 userId）
  - 上傳目標資料夾或證書相關信息
前端處理：
- 成功獲取 QR Code 後，將其展示在上傳區域中，使用者可以使用手機掃描並上傳檔案。
- 當上傳完成後，使用者可以從手機上確認上傳成功狀態。

上傳進度顯示：
- 當檔案正在上傳時，應顯示上傳進度條，讓使用者了解上傳進度（例如 0% 到 100%）。
- 當上傳完成後，提示使用者上傳成功並將該檔案添加到列表中。
錯誤提示：
- 當上傳失敗（例如檔案超過大小限制或網路錯誤）時，應顯示詳細錯誤提示，並允許使用者重新上傳。

文件顯示更新：
- 當檔案成功上傳後，應更新顯示在 UI 上的證書列表，讓使用者可以立即查看新上傳的檔案。
- API 例子：
```
GET /api/certificates/list
```
- 使用 GET 請求從後端獲取最新的證書清單，並動態更新前端畫面。

TzuHanLiang commented 1 month ago

可以傳入 withScanner 來決定顯示為：

took 3hrs done

CAFECA-IO / iSunFA