From 18890956e60f6e0e798f59982d036945c0f743f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Thu, 9 Oct 2025 19:59:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=85=B3=E9=97=AD=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow/H5MediaViewer.tsx | 17 +++++++++--------
 utils/notifications.tsx                      | 19 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index 4fe6b75..631d107 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/components/pages/work-flow/H5MediaViewer.tsx
@@ -3,7 +3,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Carousel } from 'antd';
 import type { CarouselRef } from 'antd/es/carousel';
-import { Play, Pause, FeatherIcon, MessageCircleMore, Download, ArrowDownWideNarrow, RotateCcw, Navigation } from 'lucide-react';
+import { Play, Pause, FeatherIcon, MessageCircleMore, Download, ArrowDownWideNarrow, RotateCcw, Navigation, X } from 'lucide-react';
 import { TaskObject } from '@/api/DTO/movieEdit';
 import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
 import ScriptLoading from './script-loading';
@@ -93,6 +93,14 @@ function DownloadOptionsModal(props: DownloadOptionsModalProps) {
                 aria-labelledby="download-options-title"
                 onClick={(e) => e.stopPropagation()}
             >
+                <button
+                    data-alt="close-button"
+                    className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
+                    onClick={onClose}
+                    aria-label="Close"
+                >
+                    <X size={14} />
+                </button>
                 <div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
                     <div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-purple-400">
                         <Download />
@@ -140,13 +148,6 @@ function DownloadOptionsModal(props: DownloadOptionsModalProps) {
                         <ArrowDownWideNarrow size={16} />
                         Download All Videos ({totalVideos})
                     </button>
-                    <button
-                        data-alt="cancel-button"
-                        className="w-full text-sm text-purple-400 underline underline-offset-2 decoration-purple-400/60"
-                        onClick={onClose}
-                    >
-                        Cancel
-                    </button>
                 </div>
             </div>
         </div>
diff --git a/utils/notifications.tsx b/utils/notifications.tsx
index a89b27a..3c066ad 100644
--- a/utils/notifications.tsx
+++ b/utils/notifications.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { createRoot, Root } from 'react-dom/client';
-import { BadgeCent } from 'lucide-react';
+import { BadgeCent, X } from 'lucide-react';
 
 interface InsufficientDetail {
   current_balance?: number;
@@ -44,6 +44,14 @@ function InsufficientPointsModal(props: InsufficientModalProps) {
         aria-modal="true"
         aria-labelledby="insufficient-title"
       >
+        <button
+            data-alt="close-button"
+            className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
+            onClick={onClose}
+            aria-label="Close"
+        >
+            <X size={14} />
+        </button>
         <div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
           <div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-[#ab50d0]">
             <BadgeCent />
@@ -83,15 +91,6 @@ function InsufficientPointsModal(props: InsufficientModalProps) {
           >
             Upgrade to continue →
           </button>
-          <button
-            data-alt="cancel-button"
-            className="w-full text-sm text-[#ab50d0] underline underline-offset-2 decoration-[#9144b0]/60"
-            onClick={() => {
-              onClose?.();
-            }}
-          >
-            Cancel
-          </button>
         </div>
       </div>
     </div>