lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve video upload progress UI with better stage indicators
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-01-31 21:22:21 +08:00
parent 344c9bc956
commit acc9407ec7
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/(admin)/settings/admin-settings-client.tsx
View File

@ -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>
)}