优化界面布局

public/css/style.css

@@ -302,19 +302,16 @@ header p {
     margin-bottom: 0.75rem;
 }
 
-.section-actions-row {
+.banner-left {
-    display: block;
+    display: flex;
-    margin-bottom: 1.5rem;
+    align-items: center;
-    padding-top: 1rem;
+    gap: 1.5rem;
-    border-top: 1px solid var(--panel-border);
 }
 
-.section-actions {
+.banner-actions {
     display: flex;
-    flex-wrap: nowrap;
     align-items: center;
     gap: 0.5rem;
-    justify-content: flex-start;
 }
 
 .action-btn {

public/index.html

@@ -37,7 +37,14 @@
 
     <div class="container hidden" id="app-container">
         <div id="top-banner" class="top-banner hidden">
+            <div class="banner-left">
                 <div id="top-banner-title" class="banner-title"></div>
+                <div class="banner-actions">
+                    <button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button>
+                    <button id="clear-download-cache-btn" class="action-btn" title="清空下载缓存">清空下载缓存</button>
+                    <button id="clear-transcode-cache-btn" class="action-btn" title="清空转码缓存">清空转码缓存</button>
+                </div>
+            </div>
             <div class="user-controls">
                 <label>页面主题：
                     <select id="theme-selector">
@@ -57,12 +64,6 @@
                 <div class="section-header">
                     <h2>Available Videos</h2>
                 </div>
-                <div class="section-actions-row">
-                    <div class="section-actions">
-                        <button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button>
-                        <button id="clear-download-cache-btn" class="action-btn" title="清空下载缓存">清空下载缓存</button>
-                    </div>
-                </div>
                 <div class="bucket-panel">
                     <label for="bucket-select">Select Bucket</label>
                     <select id="bucket-select">

public/js/main.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const loadingSpinner = document.getElementById('loading-spinner');
     const refreshBtn = document.getElementById('refresh-btn');
     const clearDownloadCacheBtn = document.getElementById('clear-download-cache-btn');
+    const clearTranscodeCacheBtn = document.getElementById('clear-transcode-cache-btn');
     const bucketSelect = document.getElementById('bucket-select');
     const loginScreen = document.getElementById('login-screen');
     const appContainer = document.getElementById('app-container');
@@ -1102,6 +1103,26 @@ document.addEventListener('DOMContentLoaded', () => {
     if (clearDownloadCacheBtn) {
         clearDownloadCacheBtn.addEventListener('click', clearDownloadCache);
     }
+    if (clearTranscodeCacheBtn) {
+        clearTranscodeCacheBtn.addEventListener('click', async () => {
+            clearTranscodeCacheBtn.disabled = true;
+            clearTranscodeCacheBtn.textContent = '清空中...';
+            try {
+                const res = await fetch('/api/clear-transcode-cache', { method: 'POST' });
+                if (!res.ok) {
+                    const data = await res.json().catch(() => ({}));
+                    throw new Error(data.error || '清空转码缓存失败');
+                }
+                alert('转码缓存已清空');
+            } catch (err) {
+                console.error('Clear transcode cache failed:', err);
+                alert(`清空转码缓存失败: ${err.message}`);
+            } finally {
+                clearTranscodeCacheBtn.disabled = false;
+                clearTranscodeCacheBtn.textContent = '清空转码缓存';
+            }
+        });
+    }
     if (stopTranscodeBtn) {
         stopTranscodeBtn.addEventListener('click', stopTranscode);
     }

server.js

@@ -495,16 +495,30 @@ const clearDownloadCache = () => {
         if (!fs.existsSync(tmpDir)) return;
         const files = fs.readdirSync(tmpDir);
         for (const file of files) {
-            if (file.startsWith('s3-input-') && file.endsWith('.tmp')) {
+            if (file.startsWith('s3-input-') && (file.endsWith('.tmp') || file.endsWith('.downloading'))) {
                 const filePath = path.join(tmpDir, file);
                 fs.rmSync(filePath, { force: true });
-            } else if (file.startsWith('hls-')) {
+            }
+        }
+    } catch (err) {
+        console.error('Failed to clear download cache:', err);
+        throw err;
+    }
+};
+
+const clearTranscodeCache = () => {
+    const tmpDir = CACHE_DIR;
+    try {
+        if (!fs.existsSync(tmpDir)) return;
+        const files = fs.readdirSync(tmpDir);
+        for (const file of files) {
+            if (file.startsWith('hls-')) {
                 const filePath = path.join(tmpDir, file);
                 fs.rmSync(filePath, { recursive: true, force: true });
             }
         }
     } catch (err) {
-        console.error('Failed to clear download cache:', err);
+        console.error('Failed to clear transcode cache:', err);
         throw err;
     }
 };
@@ -618,6 +632,16 @@ app.post('/api/clear-download-cache', (req, res) => {
     }
 });
 
+app.post('/api/clear-transcode-cache', (req, res) => {
+    try {
+        clearTranscodeCache();
+        res.json({ message: 'Transcode cache cleared' });
+    } catch (error) {
+        console.error('Error clearing transcode cache:', error);
+        res.status(500).json({ error: 'Failed to clear transcode cache', detail: error.message });
+    }
+});
+
 app.post('/api/stop-transcode', (req, res) => {
     try {
         const { key } = req.body;