- 优化界面全屏、视频上传进度条、视频自动裁切铺满屏幕

This commit is contained in:
Pine
2026-05-13 02:21:29 +08:00
parent aa857a5ff8
commit 1f3bd690f0
6 changed files with 116 additions and 9 deletions
+23 -5
View File
@@ -156,6 +156,7 @@ export default function Admin() {
const [playState, setPlayState] = useState({ status: 'idle' });
const [previewItem, setPreviewItem] = useState(null);
const [toasts, setToasts] = useState([]);
const [uploadProgress, setUploadProgress] = useState(null);
const toastIdRef = useRef(0);
const volTimerRef = useRef(null);
@@ -259,10 +260,17 @@ export default function Admin() {
const inp = document.getElementById('fileInput');
const fileList = Array.from(inp.files);
if (fileList.length === 0) { addToast('请选择文件', 'error'); return; }
await api.uploadFiles(fileList);
inp.value = '';
addToast('上传完成');
loadAll();
try {
setUploadProgress({ percent: 0, fileName: fileList[0].name, current: 1, total: fileList.length });
await api.uploadFilesWithProgress(fileList, setUploadProgress);
setUploadProgress(null);
inp.value = '';
addToast('上传完成');
loadAll();
} catch (err) {
setUploadProgress(null);
addToast(err.message || '上传失败', 'error');
}
};
const handleAddUrl = async () => {
@@ -403,8 +411,18 @@ export default function Admin() {
<label>本地上传</label>
<div className="form-row">
<input type="file" id="fileInput" accept=".mp4,.mkv,.avi,.jpg,.jpeg,.png" multiple />
<button className="btn-accent" onClick={handleUpload}>上传</button>
<button className="btn-accent" onClick={handleUpload} disabled={uploadProgress !== null}>上传</button>
</div>
{uploadProgress && (
<div className="upload-progress">
<div className="progress-bar">
<div className="progress-fill" style={{ width: `${uploadProgress.percent}%` }}></div>
</div>
<span className="progress-text">
{uploadProgress.fileName} ({uploadProgress.current}/{uploadProgress.total}) — {uploadProgress.percent}%
</span>
</div>
)}
</div>
<div className="form-group">
<label>远程 URL</label>
+3
View File
@@ -381,6 +381,9 @@ export default function Screen() {
<span className="sb-text">{currentItem ? `${index + 1} / ${list.length}` : '0 / 0'}</span>
</div>
{/* Watermark */}
<div className="watermark">云南派音人工智能科技提供技术支持</div>
{/* Sound Hint */}
<div id="soundHint" style={{ display: soundBlocked && loaded ? 'block' : 'none' }} onClick={enableSound}>
声音