[FEATURE] - [UI] Upload certificate - Certificate 上傳進度的懸浮窗口

[TzuHanLiang]

Summary

懸浮在 Certificate List 的右下角

Tasks

• 懸浮窗口

• 進度條： [FEATURE] - [UI] Certificate List - Certificate 上傳進度的進度條 #2391

跟設計師確認

在 Certificate List 的縮略圖顯示的畫面也會有懸浮於下方的上傳進度嗎？（跟Jodie確認）

Dependencies

No response

Other Dependencies

No response

Additional Notes

No response

[TzuHanLiang]

以下是 Certificate 上傳進度的懸浮窗口 的具體功能列表：

懸浮窗口功能：

1. 上傳進度條顯示（Upload Progress Bar）

   • 描述：每個正在上傳的檔案都會顯示上傳進度條，反映當前檔案的上傳百分比進度。
   • 功能：
     • 每個檔案的進度條實時更新，顯示上傳過程中的進度（例如 0% 到 100%）。
     • 檔案名稱和大小會顯示在進度條旁邊，讓使用者清楚了解每個檔案的上傳情況。

2. 檔案名稱和大小顯示（File Name and Size）

   • 描述：顯示正在上傳的檔案名稱和檔案大小。
   • 功能：
     • 每個檔案的名稱和大小會與進度條一起顯示，確保使用者能夠辨認每個上傳的檔案。
     • 檔案的類型（如 .xls、.pdf）也應直觀顯示。

3. 取消上傳功能（Cancel Upload）

   • 描述：提供一個「取消」按鈕，讓使用者在上傳過程中取消某個正在上傳的檔案。
   • 功能：
     • 點擊取消按鈕後，該檔案的上傳過程會立即停止。
     • 如果檔案上傳被取消，檔案應從列表中移除。

4. 最小化窗口（Minimize Popup）

   • 描述：懸浮窗口右上角提供一個「最小化」按鈕，讓使用者最小化該窗口，方便查看其他內容。
   • 功能：
     • 點擊最小化按鈕後，懸浮窗口會縮小成一個圖標或簡化顯示的區塊，使用者可以點擊再次展開查看。
     • 窗口最小化後，應該持續顯示當前的總進度。

5. 上傳檔案列表（File List in Popup）

   • 描述：展示所有正在上傳或已經上傳完成的檔案列表。
   • 功能：
     • 上傳的檔案以列表形式顯示，並且每個檔案的進度條和狀態都會更新。
     • 當檔案上傳完成後，進度條應顯示 100% 並標註「完成」狀態。

6. 上傳總數和進度總覽（Total Uploads and Summary）

   • 描述：在懸浮窗口的頂部顯示當前正在上傳的檔案總數和進度總覽。
   • 功能：
     • 提供一個總覽，顯示目前正在上傳的檔案數量（如「Uploading (3/5)」）。
     • 可以動態更新上傳完成的檔案數量，讓使用者了解整個上傳過程的進度。

7. 關閉窗口功能（Close Popup）

   • 描述：提供關閉按鈕，讓使用者關閉上傳進度懸浮窗口。
   • 功能：
     • 點擊「關閉」按鈕後，懸浮窗口將被完全關閉，但上傳過程不會中斷。
     • 使用者可以通過再次打開視窗來檢查上傳進度。

其他擴展功能：

• 多檔案上傳支持：允許同時上傳多個檔案，並為每個檔案顯示單獨的進度條。
• 錯誤處理：如果上傳過程中發生錯誤（例如網路中斷），應該顯示錯誤訊息並允許使用者重新嘗試上傳。

[TzuHanLiang]

took 2hrs
done