素材上傳頁 mockup

四個狀態畫面,靜態展示不可點擊。翠翠 review 後定稿 → 寫規格書給電寶。

狀態 1:初始鎖屏(密碼保護)

開啟網址(例 upload.qtracychen.net 或 qtracychen.net/asset-upload/)→ 沒帶密碼直接看到這個。

upload.qtracychen.net

🔒 素材上傳

此頁供快電商內部使用
請輸入上傳密碼進入

狀態 2:進入後的預設畫面(空的)

密碼對 → 進入。頂端顯示目前選中的目標資料夾(可換),中間是拖拉區。

upload.qtracychen.net/#/
目標資料夾: /快電商-C2CBUY/快電商廣告素材 上傳的檔案會直接放到這個資料夾
⬆
拖拉檔案到這裡
支援單檔最大 350 GB,可一次拖多個
或點擊選擇檔案
待上傳:0
狀態 3:上傳中(拖了 5 個檔進來)

拖檔進來後:dropzone 縮到上方保持可繼續加檔,下方顯示佇列,每個檔案有獨立進度條。

upload.qtracychen.net/#/
目標資料夾: /快電商-C2CBUY/快電商廣告素材
⬆ 可繼續拖檔進來  ·  或點擊選檔
共 5 個檔案 · 總 420 MB ✓ 已完成:2 上傳中:1 等待中:2
JPG
2026 新品發表 主視覺.jpg8.2 MB
✓ 完成 · 已在 Dropbox
MP4
田舞陽_喵星機介紹.mp4156 MB
✓ 完成 · 已在 Dropbox
MOV
產品開箱_2026Q3.mov210 MB
上傳中 64% · 剩 8 秒
PDF
代言人合約範本.pdf3.4 MB
等待中
PNG
Logo 透明底.png1.2 MB
等待中
狀態 4:全部處理完(含 1 個失敗)

全部檔案完成後:綠色 toast 顯示總結,失敗的檔案顯示紅色 + 重試按鈕。

upload.qtracychen.net/#/
目標資料夾: /快電商-C2CBUY/快電商廣告素材
⬆ 繼續上傳更多檔案  ·  或點擊選檔
共 5 個檔案 · 總 420 MB ✓ 成功:4 ✗ 失敗:1
✓ 4 個檔案已上傳到 /快電商-C2CBUY/快電商廣告素材
JPG
2026 新品發表 主視覺.jpg8.2 MB
✓ 完成
MP4
田舞陽_喵星機介紹.mp4156 MB
✓ 完成
MOV
產品開箱_2026Q3.mov210 MB
✗ 失敗:網路中斷
PDF
代言人合約範本.pdf3.4 MB
✓ 完成
PNG
Logo 透明底.png1.2 MB
✓ 完成
狀態 5:點「變更資料夾」後彈出的選單

按最上方「變更」→ 彈出 Dropbox 目前資料夾樹(就是素材庫那 12 個分類),選其中一個作為目標。可以選子資料夾。

設計要點(給你 review 用)

1. 風格一致但可辨識:跟素材庫用同一套色系(深藍底 + 黃色 accent),但頂端有「內部」黃色標籤明確區隔。

2. 頁面單頁展開:拖拉區 + 目標資料夾 + 檔案佇列全部在同一頁,不要分頁。

3. 目標資料夾可換:預設可能是上次用的,隨時可以按「變更」切到別的。

4. 上傳中可繼續加檔:dropzone 在上傳過程中會縮小但仍然可用,方便一邊上傳一邊拖新的。

5. 每檔獨立進度條:不是總進度條。方便看到哪個檔案卡住、哪個快好了。

6. 失敗只影響那一檔:一個檔失敗其他繼續,失敗的顯示紅色 + 重試按鈕。

7. 檔案原名照傳:不做自動改名(保留使用者對檔名的控制)。

8. 完成沒特別通知:只有頁面內綠色 toast,不發 Slack、不發 email(如未來要加另議)。

9. 傳完直接進 Dropbox:不進暫存區,外部素材庫立刻能看到(下次 refresh 就出現)。

要 review 的問題

Q1. UI 風格 OK 嗎?(跟素材庫同色系 + 黃色「內部」tag)

Q2. 目標資料夾預設值?(每次進來預設在哪個資料夾:根目錄?上次用的?某個固定的?)

Q3. 上傳中的檔案要不要允許取消?(mockup 有取消按鈕)

Q4. 檔名衝突處理?(Dropbox 有同名檔時:覆蓋?自動加 (2)?彈警告讓使用者選?)

Q5. 手機版要不要相機直傳?(例如手機開頁 → 除了選相簿還能直接開相機拍完就傳)