From acc9407ec70f86b8874da640388b59cfedda9576 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 31 Jan 2026 21:22:21 +0800
Subject: [PATCH] fix: improve video upload progress UI with better stage
 indicators

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../settings/admin-settings-client.tsx        | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/(admin)/settings/admin-settings-client.tsx b/app/(admin)/settings/admin-settings-client.tsx
index cf9a84e7c..7a39cf6ef 100644
--- a/app/(admin)/settings/admin-settings-client.tsx
+++ b/app/(admin)/settings/admin-settings-client.tsx
@@ -2810,7 +2810,7 @@ export function AdminSettingsClient() {
                                 }}
                                 disabled={videoUploading}
                               />
-                              <div className="w-full">
+                              <div className="w-full space-y-2">
                                 <Button
                                   type="button"
                                   variant="outline"
@@ -2822,7 +2822,10 @@ export function AdminSettingsClient() {
                                     {videoUploading ? (
                                       <>
                                         <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                        {videoUploadProgress}
+                                        {videoUploadStage === "uploading" && `上传中 ${videoUploadPercent}%`}
+                                        {videoUploadStage === "compressing" && "压缩处理中..."}
+                                        {videoUploadStage === "saving" && "保存中..."}
+                                        {videoUploadStage === "done" && "完成！"}
                                       </>
                                     ) : (
                                       <>
@@ -2832,10 +2835,22 @@ export function AdminSettingsClient() {
                                     )}
                                   </span>
                                 </Button>
-                                {/* 上传进度条 */}
+                                {/* 上传进度条 - 始终在上传过程中显示 */}
                                 {videoUploading && (
-                                  <div className="mt-2 space-y-1">
-                                    <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
+                                  <div className="space-y-1.5 p-3 bg-muted/50 rounded-lg border">
+                                    <div className="flex items-center justify-between text-xs">
+                                      <span className="font-medium">
+                                        {videoUploadStage === "uploading" && "正在上传..."}
+                                        {videoUploadStage === "compressing" && "正在压缩视频..."}
+                                        {videoUploadStage === "saving" && "正在保存..."}
+                                        {videoUploadStage === "done" && "处理完成！"}
+                                      </span>
+                                      <span className="text-muted-foreground">
+                                        {videoUploadStage === "uploading" && `${videoUploadPercent}%`}
+                                        {videoUploadStage === "compressing" && "请耐心等待"}
+                                      </span>
+                                    </div>
+                                    <div className="h-2.5 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
                                       <div 
                                         className={`h-full transition-all duration-300 ${
                                           videoUploadStage === "compressing" 
@@ -2845,14 +2860,17 @@ export function AdminSettingsClient() {
                                             : "bg-blue-500"
                                         }`}
                                         style={{ 
-                                          width: videoUploadStage === "compressing" ? "100%" : `${videoUploadPercent}%` 
+                                          width: videoUploadStage === "compressing" || videoUploadStage === "saving" || videoUploadStage === "done" 
+                                            ? "100%" 
+                                            : `${videoUploadPercent}%` 
                                         }}
                                       />
                                     </div>
-                                    <p className="text-xs text-muted-foreground text-center">
-                                      {videoUploadStage === "uploading" && `已上传 ${videoUploadPercent}%`}
-                                      {videoUploadStage === "compressing" && "服务器正在压缩视频，请耐心等待..."}
-                                      {videoUploadStage === "done" && "处理完成！"}
+                                    <p className="text-xs text-muted-foreground">
+                                      {videoUploadStage === "uploading" && "正在将视频上传到服务器..."}
+                                      {videoUploadStage === "compressing" && "服务器正在压缩视频以优化播放体验，大文件可能需要几分钟..."}
+                                      {videoUploadStage === "saving" && "正在保存到存储..."}
+                                      {videoUploadStage === "done" && "视频已成功处理！"}
                                     </p>
                                   </div>
                                 )}