Welcome to Tauri + React
- - -
- 
- Click on the Tauri, Vite, and React logos to learn more.
- - -{greetMsg}
-
+ {toasts.map(t => (
+
+ );
+}
+
+/* ============ Preview Modal ============ */
+function PreviewModal({ item, onClose, onAddToPlaylist, onDelete }) {
+ const [closing, setClosing] = useState(false);
+ const videoRef = useRef(null);
+
+ const handleClose = useCallback(() => {
+ setClosing(true);
+ if (videoRef.current) {
+ videoRef.current.pause();
+ videoRef.current.removeAttribute('src');
+ }
+ setTimeout(() => {
+ onClose();
+ setClosing(false);
+ }, 200);
+ }, [onClose]);
+
+ useEffect(() => {
+ const onKey = (e) => { if (e.key === 'Escape') handleClose(); };
+ document.addEventListener('keydown', onKey);
+ return () => document.removeEventListener('keydown', onKey);
+ }, [handleClose]);
+
+ if (!item) return null;
+
+ const previewUrl = item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
+ const overlayClass = `modal-overlay${closing ? ' closing' : ''}`;
+
+ return (
+ {t.msg}
+ ))}
+ { if (e.target.className.includes('modal-overlay')) handleClose(); }}>
+
+ );
+}
+
+/* ============ Media Card ============ */
+function MediaCard({ item, onPreview, onAddToPlaylist, onDelete, showRemove, onRemove }) {
+ const thumbUrl = item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
+
+ return (
+ e.stopPropagation()}>
+
+
+ {item.name}
+
+
+
+ {item.type === 'image' ? (
+ 
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {item.type === 'image' ? (
+ 
onPreview(item)} />
+ ) : (
+
+ );
+}
+
+/* =========================================================
+ Admin Page
+ ========================================================= */
+export default function Admin() {
+ // Auth state
+ const [isLoggedIn, setIsLoggedIn] = useState(() => localStorage.getItem('token') === 'admin_logged');
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+
+ // Data state
+ const [files, setFiles] = useState([]);
+ const [playlistItems, setPlaylistItems] = useState([]);
+ const [playMode, setPlayMode] = useState('sequential');
+ const [imageDuration, setImageDuration] = useState(5);
+ const [volume, setVolume] = useState(80);
+
+ // UI state
+ const [statusText, setStatusText] = useState('等待大屏连接...');
+ const [playState, setPlayState] = useState({ status: 'idle' });
+ const [previewItem, setPreviewItem] = useState(null);
+ const [toasts, setToasts] = useState([]);
+ const toastIdRef = useRef(0);
+
+ // ============ Toast ============
+ const addToast = useCallback((msg, type = 'success') => {
+ const id = ++toastIdRef.current;
+ setToasts(prev => [...prev, { id, msg, type }]);
+ setTimeout(() => {
+ setToasts(prev => prev.filter(t => t.id !== id));
+ }, 2800);
+ }, []);
+
+ // ============ Auth ============
+ const handleLogin = async () => {
+ const data = await api.login(username, password);
+ if (data.success) {
+ localStorage.setItem('token', 'admin_logged');
+ setIsLoggedIn(true);
+ } else {
+ addToast('登录失败，请检查账号密码', 'error');
+ }
+ };
+
+ const handleKeyDown = (e) => { if (e.key === 'Enter') handleLogin(); };
+
+ const handleLogout = () => {
+ localStorage.removeItem('token');
+ setIsLoggedIn(false);
+ };
+
+ // ============ Data Loading ============
+ const loadSettings = useCallback(async () => {
+ try {
+ const d = await api.getSettings();
+ setVolume(d.volume ?? 80);
+ setPlayMode(d.play_mode || 'sequential');
+ setImageDuration(d.image_duration || 5);
+ } catch { /* ignore */ }
+ }, []);
+
+ const loadFiles = useCallback(async () => {
+ try {
+ const data = await api.getMediaFiles();
+ setFiles(data.files || []);
+ } catch { /* ignore */ }
+ }, []);
+
+ const loadPlaylist = useCallback(async () => {
+ try {
+ const data = await api.getPlaylist();
+ setPlaylistItems(data.files || []);
+ setPlayMode(data.play_mode || 'sequential');
+ setImageDuration(data.image_duration ?? 5);
+ setVolume(data.volume ?? 80);
+ } catch { /* ignore */ }
+ }, []);
+
+ const loadAll = useCallback(() => {
+ loadSettings();
+ loadFiles();
+ loadPlaylist();
+ }, [loadSettings, loadFiles, loadPlaylist]);
+
+ useEffect(() => {
+ if (isLoggedIn) loadAll();
+ }, [isLoggedIn, loadAll]);
+
+ // ============ SSE ============
+ useEffect(() => {
+ if (!isLoggedIn) return;
+ const es = new EventSource('/api/events');
+ es.onmessage = (e) => {
+ try {
+ const msg = JSON.parse(e.data);
+ if (msg.action === 'state_update' && msg.state) {
+ setPlayState(msg.state);
+ const s = msg.state;
+ if (s.status === 'idle' || !s.name) {
+ setStatusText('等待大屏连接...');
+ } else if (s.status === 'playing') {
+ setStatusText(`正在播放 — ${s.name}`);
+ } else if (s.status === 'paused') {
+ setStatusText(`已暂停 — ${s.name}`);
+ }
+ }
+ if (msg.action === 'playlist_changed') {
+ loadPlaylist();
+ }
+ if (msg.action === 'settings_changed') {
+ if (msg.volume !== undefined) setVolume(msg.volume);
+ if (msg.play_mode !== undefined) setPlayMode(msg.play_mode);
+ if (msg.image_duration !== undefined) setImageDuration(msg.image_duration);
+ }
+ } catch { /* ignore */ }
+ };
+ return () => es.close();
+ }, [isLoggedIn, loadPlaylist]);
+
+ // ============ Handlers ============
+ const handleUpload = async () => {
+ 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();
+ };
+
+ const handleAddUrl = async () => {
+ const inp = document.getElementById('urlInput');
+ const url = inp.value.trim();
+ if (!url) { addToast('请输入 URL', 'error'); return; }
+ const data = await api.addUrlMedia(url);
+ inp.value = '';
+ addToast(data.duplicate ? 'URL 已存在于媒体库' : '已添加到媒体库');
+ loadAll();
+ };
+
+ const handleSaveSettings = async () => {
+ await api.updateSettings({ play_mode: playMode, image_duration: imageDuration, volume });
+ };
+
+ const handleAddToPlaylist = async (path) => {
+ await api.addToPlaylist(path);
+ addToast('已加入播放列表');
+ loadAll();
+ };
+
+ const handleRemoveFromPlaylist = async (path) => {
+ await api.removeFromPlaylist(path);
+ addToast('已移出播放列表');
+ loadAll();
+ };
+
+ const handleDeleteFile = async (path) => {
+ if (!window.confirm('确定删除该文件？')) return;
+ await api.deleteMedia(path);
+ addToast('已删除');
+ loadAll();
+ };
+
+ const handleSendControl = async (action) => {
+ await api.sendControl(action);
+ };
+
+ // ============ Render ============
+ if (!isLoggedIn) {
+ return (
+
+
+ );
+ }
+
+ const isPlaying = playState.status === 'playing';
+ const isPaused = playState.status === 'paused';
+ const hasFiles = files.length > 0;
+ const hasPlaylist = playlistItems.length > 0;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 昆明市大学生创业园
+大屏幕轮播控制系统
+
+
+ setUsername(e.target.value)} placeholder="请输入账号" autoComplete="username" onKeyDown={handleKeyDown} />
+
+
+
+ setPassword(e.target.value)} placeholder="请输入密码" autoComplete="current-password" onKeyDown={handleKeyDown} />
+
+
+
+ setPreviewItem(null)}
+ onAddToPlaylist={handleAddToPlaylist}
+ onDelete={handleDeleteFile}
+ />
+
+ {/* Toast */}
+
+ );
+}
diff --git a/src/pages/Screen.jsx b/src/pages/Screen.jsx
new file mode 100644
index 0000000..01c82ba
--- /dev/null
+++ b/src/pages/Screen.jsx
@@ -0,0 +1,402 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import * as api from '../utils/api';
+import '../styles/screen.css';
+
+/* ============ Loader ============ */
+function Loader({ hidden, text }) {
+ return (
+
+ {/* Topbar */}
+
+
+ {/* Preview Modal */}
+
+
+
+ {/* Main Content */}
+
+
+
+ 昆明市大学生创业园
+
+ {statusText}
+
+
+
+
+
+
+
+
+
+
+ {/* Settings Card */}
+
+
+
+
+ {/* Upload Card */}
+
+
+ {'\u2699'}
+ 播放设置
+
+
+
+
+
+
+
+
+ { setImageDuration(Number(e.target.value)); setTimeout(handleSaveSettings, 0); }} />
+
+
+
+ { setVolume(Number(e.target.value)); setTimeout(handleSaveSettings, 0); }} />
+
+ {volume}%
+
+
+
+ {/* Media Library */}
+
+
+ {'\uD83D\uDCE4'}
+ 添加媒体
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Playlist */}
+
+
+ {'\uD83D\uDCC1'}
+ 媒体库
+
+ {!hasFiles ? (
+
+
+
请上传或通过 URL 添加 +
+ ) : (
+ files.map((item, i) => (
+ {'\uD83D\uDCF7'}
+ 暂无媒体文件请上传或通过 URL 添加 +
+
+
+
+ {'\u25B6'}
+ 播放列表
+
+ {!hasPlaylist ? (
+
+
+
从上方媒体库添加内容 +
+ ) : (
+ playlistItems.map((item, i) => (
+ {'\u25B6'}
+ 播放列表为空从上方媒体库添加内容 +
+
+ );
+}
+
+/* =========================================================
+ Screen Page
+ ========================================================= */
+export default function Screen() {
+ const [list, setList] = useState([]);
+ const [index, setIndex] = useState(0);
+ const [volume, setVolume] = useState(0.8);
+ const [playMode, setPlayMode] = useState('sequential');
+ const [imageDuration, setImageDuration] = useState(5);
+ const [paused, setPaused] = useState(false);
+ const [soundBlocked, setSoundBlocked] = useState(false);
+ const [loaded, setLoaded] = useState(false);
+ const [loaderText, setLoaderText] = useState('加载播放列表中...');
+ const [showVideo, setShowVideo] = useState(true);
+ const [currentSrc, setCurrentSrc] = useState('');
+
+ const videoRef = useRef(null);
+ const imgRef = useRef(null);
+ const timerRef = useRef(null);
+
+ const getUrl = useCallback((item) => {
+ return item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
+ }, []);
+
+ const reportState = useCallback((status) => {
+ const item = list[index] || null;
+ api.updateState({
+ status,
+ index,
+ name: item ? item.name : '',
+ type: item ? item.type : '',
+ }).catch(() => {});
+ }, [list, index]);
+
+ const updateStatusUI = useCallback(() => { }, []); // CSS handles visual feedback
+
+ const play = useCallback(() => {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ if (paused) return;
+ const item = list[index];
+ if (!item) return;
+ const url = getUrl(item);
+
+ if (item.type === 'video') {
+ setShowVideo(true);
+ setCurrentSrc(url);
+ const video = videoRef.current;
+ if (video) {
+ video.style.display = 'block';
+ video.src = url;
+ video.load();
+ video.muted = soundBlocked;
+ const p = video.play();
+ if (p !== undefined) {
+ p.then(() => {
+ reportState('playing');
+ }).catch(() => {
+ setSoundBlocked(true);
+ video.muted = true;
+ video.play().catch(() => {});
+ reportState('playing');
+ });
+ }
+ }
+ } else {
+ // Image
+ setShowVideo(false);
+ setCurrentSrc(url);
+ reportState('playing');
+ timerRef.current = setTimeout(next, imageDuration * 1000);
+ }
+ }, [list, index, paused, getUrl, soundBlocked, imageDuration, reportState]);
+
+ const skip = useCallback((delta) => {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ setIndex(prev => {
+ if (playMode === 'random') {
+ return Math.floor(Math.random() * list.length);
+ }
+ return (prev + delta + list.length) % list.length;
+ });
+ }, [playMode, list.length]);
+
+ const next = useCallback(() => {
+ if (paused) return;
+ if (timerRef.current) clearTimeout(timerRef.current);
+ setIndex(prev => {
+ if (playMode === 'random') {
+ return Math.floor(Math.random() * list.length);
+ }
+ return (prev + 1) % list.length;
+ });
+ }, [paused, playMode, list.length]);
+
+ // Play when index changes
+ useEffect(() => {
+ if (loaded && list.length > 0) {
+ const item = list[index];
+ if (item) {
+ if (item.type === 'video') {
+ setShowVideo(true);
+ setCurrentSrc(getUrl(item));
+ } else {
+ const url = getUrl(item);
+ setShowVideo(false);
+ setCurrentSrc(url);
+ }
+ }
+ }
+ }, [index, loaded]);
+
+ // Separate effect for playback triggered by src changes
+ useEffect(() => {
+ if (!loaded || list.length === 0 || !currentSrc) return;
+ const item = list[index];
+ if (!item) return;
+
+ if (item.type === 'video') {
+ const video = videoRef.current;
+ if (video) {
+ video.style.display = 'block';
+ video.src = currentSrc;
+ video.load();
+ video.muted = soundBlocked;
+ const p = video.play();
+ if (p !== undefined) {
+ p.then(() => reportState('playing'))
+ .catch(() => {
+ setSoundBlocked(true);
+ video.muted = true;
+ video.play().catch(() => {});
+ reportState('playing');
+ });
+ }
+ }
+ } else {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ reportState('playing');
+ timerRef.current = setTimeout(next, imageDuration * 1000);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [index]);
+
+ // Load playlist on mount
+ useEffect(() => {
+ const load = async () => {
+ try {
+ const data = await api.getPlaylist();
+ const files = data.files || [];
+ const vol = (data.volume || 80) / 100;
+ setList(files);
+ setVolume(vol);
+ setPlayMode(data.play_mode || 'sequential');
+ setImageDuration(data.image_duration || 5);
+ if (videoRef.current) videoRef.current.volume = vol;
+
+ if (files.length === 0) {
+ setLoaderText('播放列表为空，前往管理后台添加');
+ return;
+ }
+ setLoaded(true);
+
+ // Try play with sound
+ const video = videoRef.current;
+ if (video) {
+ video.muted = false;
+ const testPlay = video.play();
+ if (testPlay !== undefined) {
+ testPlay.then(() => {
+ setSoundBlocked(false);
+ video.pause();
+ reportState('idle');
+ }).catch(() => {
+ setSoundBlocked(true);
+ video.muted = true;
+ reportState('idle');
+ });
+ }
+ }
+ } catch {/* ignore */}
+ };
+ load();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ // Connect SSE
+ useEffect(() => {
+ const es = new EventSource('/api/events');
+ es.onmessage = (e) => {
+ try {
+ const msg = JSON.parse(e.data);
+ switch (msg.action) {
+ case 'pause':
+ setPaused(true);
+ if (timerRef.current) clearTimeout(timerRef.current);
+ if (videoRef.current) videoRef.current.pause();
+ reportState('paused');
+ break;
+ case 'play':
+ setPaused(false);
+ play();
+ reportState('playing');
+ break;
+ case 'next':
+ setPaused(false);
+ skip(1);
+ break;
+ case 'prev':
+ setPaused(false);
+ skip(-1);
+ break;
+ case 'playlist_changed':
+ reloadPlaylist();
+ break;
+ case 'settings_changed':
+ applySettings(msg);
+ break;
+ }
+ } catch {/* ignore */}
+ };
+ return () => es.close();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [play, skip, reportState]);
+
+ const reloadPlaylist = useCallback(async () => {
+ try {
+ const data = await api.getPlaylist();
+ const newList = data.files || [];
+ const currentItem = list[index] || null;
+
+ if (newList.length === 0) {
+ setList([]);
+ setLoaded(false);
+ setLoaderText('播放列表已清空，前往管理后台添加');
+ const video = videoRef.current;
+ if (video) video.pause();
+ return;
+ }
+
+ setLoaded(true);
+
+ let newIndex = -1;
+ if (currentItem) {
+ newIndex = newList.findIndex(item => item.relative_path === currentItem.relative_path);
+ }
+ if (newIndex >= 0) {
+ setList(newList);
+ setIndex(newIndex);
+ } else {
+ setList(newList);
+ setIndex(prev => Math.min(prev, newList.length - 1));
+ }
+ } catch {/* ignore */}
+ }, [list, index]);
+
+ const applySettings = useCallback((msg) => {
+ if (msg.volume !== undefined) {
+ const vol = msg.volume / 100;
+ setVolume(vol);
+ const video = videoRef.current;
+ if (video) {
+ video.volume = vol;
+ if (soundBlocked) {
+ video.muted = false;
+ video.play().then(() => {
+ setSoundBlocked(false);
+ const hint = document.getElementById('soundHint');
+ if (hint) hint.style.display = 'none';
+ }).catch(() => {
+ video.muted = true;
+ video.play().catch(() => {});
+ });
+ }
+ }
+ }
+ if (msg.play_mode !== undefined) setPlayMode(msg.play_mode);
+ if (msg.image_duration !== undefined) setImageDuration(msg.image_duration);
+ }, [soundBlocked]);
+
+ const enableSound = useCallback(() => {
+ const video = videoRef.current;
+ if (!video) return;
+ video.muted = false;
+ video.play().then(() => {
+ setSoundBlocked(false);
+ const hint = document.getElementById('soundHint');
+ if (hint) hint.style.display = 'none';
+ }).catch(() => {
+ video.muted = true;
+ video.play().catch(() => {});
+ });
+ }, []);
+
+ // Video ended handler
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) return;
+ const handler = () => next();
+ video.addEventListener('ended', handler);
+ return () => video.removeEventListener('ended', handler);
+ }, [next]);
+
+ // Global click for sound unblock
+ useEffect(() => {
+ const handler = () => {
+ if (soundBlocked) enableSound();
+ };
+ document.addEventListener('click', handler);
+ return () => document.removeEventListener('click', handler);
+ }, [soundBlocked, enableSound]);
+
+ // Cleanup timer on unmount
+ useEffect(() => {
+ return () => {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ };
+ }, []);
+
+ const currentItem = list[index] || null;
+
+ return (
+
+
+
+
+
+
+ PineSound
+
+
+
+
+
+
+
+ {/* Perspective Grid */}
+
+ {/* Ambient Orbs */}
+
+
+
+
+ {/* Loader */}
+ 0} text={loaderText} />
+
+ {/* Media Players */}
+
+ 
+
+ {/* Corner Info — Now Playing */}
+
+ );
+}
diff --git a/src/styles/admin.css b/src/styles/admin.css
new file mode 100644
index 0000000..d84afbd
--- /dev/null
+++ b/src/styles/admin.css
@@ -0,0 +1,949 @@
+/* =========================================================
+ Admin Page Theme — 昆明市大学生创业园大屏媒体轮播
+ 基于 admin.html CSS 移植
+ ========================================================= */
+.admin-page {
+ --primary: #00BD7D;
+ --primary-hover: #00a36b;
+ --primary-glow: rgba(0, 189, 125, 0.25);
+ --primary-subtle: rgba(0, 189, 125, 0.07);
+ --primary-surface: rgba(0, 189, 125, 0.04);
+ --success: #16A34A;
+ --success-subtle: rgba(22, 163, 74, 0.08);
+ --warning: #D97706;
+ --warning-subtle: rgba(217, 119, 6, 0.08);
+ --danger: #DC2626;
+ --danger-hover: #ef4444;
+ --danger-subtle: rgba(220, 38, 38, 0.08);
+ --surface: #FFFFFF;
+ --text: #111827;
+ --text-secondary: #4b5563;
+ --text-dim: #9ca3af;
+ --text-inverse: #FFFFFF;
+ --border-subtle: rgba(0,0,0,0.06);
+ --border-default: rgba(0,0,0,0.1);
+ --border-strong: rgba(0,0,0,0.16);
+
+ --space-4: 4px;
+ --space-8: 8px;
+ --space-12: 12px;
+ --space-16: 16px;
+ --space-24: 24px;
+ --space-32: 32px;
+
+ --radius-sm: 4px;
+ --radius-md: 8px;
+
+ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+
+ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+ --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
+ --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
+ --shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.08);
+ --shadow-xl: 0 12px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.1);
+
+ font-family: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+ background: #f3f4f6;
+ color: var(--text);
+ min-height: 100vh;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+ position: relative;
+}
+
+/* ============ Spatial Background ============ */
+.admin-page::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(ellipse 55% 40% at 80% 10%, rgba(0, 189, 125, 0.05) 0%, transparent 55%),
+ radial-gradient(ellipse 50% 38% at 18% 6%, rgba(217, 119, 6, 0.04) 0%, transparent 55%),
+ radial-gradient(ellipse 45% 28% at 50% 96%, rgba(0,0,0,0.02) 0%, transparent 50%);
+}
+
+.admin-page::after {
+ content: '';
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 0;
+ opacity: 0.02;
+ background-image:
+ linear-gradient(30deg, rgba(0,0,0,0.15) 1px, transparent 1px),
+ linear-gradient(-30deg, rgba(0,0,0,0.15) 1px, transparent 1px);
+ background-size: 32px 32px;
+}
+
+/* ============ Login ============ */
+.login-wrapper {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ place-items: center;
+ min-height: 100vh;
+ padding: var(--space-24);
+}
+
+.login-wrapper::before {
+ content: '';
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 700px;
+ height: 700px;
+ background:
+ radial-gradient(circle at 50% 50%, rgba(0, 189, 125, 0.07) 0%, transparent 35%),
+ radial-gradient(circle at 50% 50%, rgba(217, 119, 6, 0.03) 0%, transparent 55%);
+ pointer-events: none;
+ animation: loginAmbient 8s ease-in-out infinite;
+}
+@keyframes loginAmbient {
+ 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
+ 50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
+}
+
+.login-wrapper::after {
+ content: '';
+ position: fixed;
+ top: 10%;
+ right: 6%;
+ width: 240px;
+ height: 240px;
+ pointer-events: none;
+ opacity: 0.05;
+ background:
+ linear-gradient(60deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%),
+ linear-gradient(-60deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%),
+ linear-gradient(180deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%);
+ background-size: 48px 48px;
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.login-card {
+ position: relative;
+ background: var(--surface);
+ border-radius: var(--radius-md);
+ padding: var(--space-32);
+ width: 100%;
+ max-width: 420px;
+ text-align: center;
+ box-shadow:
+ 0 20px 60px rgba(0,0,0,0.08),
+ 0 0 0 1px rgba(0,0,0,0.04),
+ 0 1px 0 rgba(255,255,255,0.6) inset;
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ transform: perspective(800px) rotateX(1deg);
+ transition: transform var(--transition-slow);
+}
+.login-card:hover { transform: perspective(800px) rotateX(0deg) translateY(-2px); }
+
+.login-card::before {
+ content: '';
+ position: absolute;
+ inset: -1px;
+ border-radius: var(--radius-md);
+ padding: 1px;
+ background: linear-gradient(135deg,
+ rgba(0,0,0,0.04) 0%,
+ rgba(0, 189, 125, 0.2) 30%,
+ transparent 55%,
+ rgba(217, 119, 6, 0.12) 80%,
+ rgba(0,0,0,0.04) 100%);
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
+}
+
+.login-brand { margin-bottom: var(--space-32); }
+.login-brand .icon {
+ width: 56px;
+ height: 56px;
+ margin: 0 auto var(--space-16);
+ position: relative;
+}
+.login-brand .icon .iso-top {
+ position: absolute;
+ top: 2px;
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+ width: 30px;
+ height: 30px;
+ background: rgba(0, 189, 125, 0.12);
+ border: 1px solid rgba(0, 189, 125, 0.25);
+ border-radius: 4px;
+}
+.login-brand .icon .iso-left {
+ position: absolute;
+ bottom: 2px;
+ left: 2px;
+ width: 26px;
+ height: 24px;
+ background: rgba(0,0,0,0.03);
+ border: 1px solid rgba(0,0,0,0.08);
+ border-radius: 4px;
+ transform: skewY(25deg);
+}
+.login-brand .icon .iso-right {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 26px;
+ height: 24px;
+ background: rgba(0, 189, 125, 0.15);
+ border: 1px solid rgba(0, 189, 125, 0.22);
+ border-radius: 4px;
+ transform: skewY(-25deg);
+}
+.login-brand .icon .iso-dot {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 7px;
+ height: 7px;
+ background: var(--primary);
+ border-radius: 50%;
+ box-shadow: 0 0 12px rgba(0, 189, 125, 0.35);
+ z-index: 2;
+}
+.login-brand h2 {
+ font-family: "Oswald", "PingFang SC", "Hiragino Sans GB", sans-serif;
+ font-size: 24px;
+ font-weight: 600;
+ color: var(--text);
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+.login-brand p {
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 13px;
+ font-weight: 400;
+ color: var(--text-dim);
+ margin-top: var(--space-4);
+}
+
+.login-card .field { margin-bottom: var(--space-16); text-align: left; }
+.login-card .field label {
+ display: block;
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-8);
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+.login-card .field input {
+ width: 100%;
+ padding: var(--space-12) var(--space-16);
+ background: #f9fafb;
+ border: 1px solid var(--border-default);
+ border-radius: var(--radius-sm);
+ font-size: 15px;
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-weight: 400;
+ color: var(--text);
+ transition: all var(--transition);
+ outline: none;
+}
+.login-card .field input:focus {
+ border-color: rgba(0, 189, 125, 0.5);
+ box-shadow: 0 0 0 3px rgba(0, 189, 125, 0.08);
+}
+.login-card .field input::placeholder { color: var(--text-dim); }
+.login-card .btn-login {
+ width: 100%;
+ margin-top: var(--space-8);
+ padding: 13px;
+ background: var(--primary);
+ color: var(--text-inverse);
+ border: none;
+ border-radius: var(--radius-sm);
+ font-family: "Oswald", "PingFang SC", sans-serif;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all var(--transition);
+ box-shadow: 0 4px 16px rgba(0, 189, 125, 0.15);
+}
+.login-card .btn-login:hover {
+ background: var(--primary-hover);
+ box-shadow: 0 6px 24px rgba(0, 189, 125, 0.25);
+ transform: translateY(-2px);
+}
+.login-card .btn-login:active { transform: translateY(0); }
+
+/* ============ Dashboard Layout ============ */
+.dashboard { display: none; position: relative; z-index: 1; }
+.dashboard.active { display: block; }
+
+/* ============ Topbar ============ */
+.topbar {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ background: rgba(255,255,255,0.84);
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
+ border-bottom: 1px solid var(--border-subtle);
+ padding: 0 var(--space-32);
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-16);
+ box-shadow:
+ 0 1px 0 rgba(255,255,255,0.5) inset,
+ 0 2px 16px rgba(0,0,0,0.03);
+}
+.topbar-left {
+ display: flex;
+ align-items: center;
+ gap: var(--space-12);
+ min-width: 0;
+}
+.topbar-left .brand-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--primary);
+ box-shadow: 0 0 10px rgba(0, 189, 125, 0.35);
+ flex-shrink: 0;
+ animation: brandDotPulse 3s ease-in-out infinite;
+}
+@keyframes brandDotPulse {
+ 0%, 100% { box-shadow: 0 0 8px rgba(0, 189, 125, 0.3); }
+ 50% { box-shadow: 0 0 18px rgba(0, 189, 125, 0.5); }
+}
+.topbar-left h1 {
+ font-family: "Oswald", "PingFang SC", sans-serif;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--text);
+ white-space: nowrap;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+}
+.topbar-center { flex: 1; text-align: center; min-width: 0; }
+.status-bar-text {
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-dim);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
+ max-width: 400px;
+ margin: 0 auto;
+}
+.topbar-right {
+ display: flex;
+ align-items: center;
+ gap: var(--space-4);
+ flex-shrink: 0;
+}
+
+/* Control buttons */
+.btn-control {
+ width: 40px;
+ height: 40px;
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-subtle);
+ background: #f9fafb;
+ color: var(--text-secondary);
+ cursor: pointer;
+ font-size: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all var(--transition);
+ flex-shrink: 0;
+ box-shadow: var(--shadow-xs);
+}
+.btn-control:hover {
+ background: var(--surface);
+ border-color: var(--border-strong);
+ color: var(--text);
+ box-shadow: var(--shadow-sm);
+ transform: translateY(-1px);
+}
+.btn-control:active { transform: translateY(1px); box-shadow: none; }
+.btn-control.active {
+ background: var(--primary);
+ border-color: var(--primary);
+ color: var(--text-inverse);
+ box-shadow: 0 0 16px rgba(0, 189, 125, 0.3);
+}
+.btn-control.play-btn {
+ width: 48px;
+ height: 48px;
+ font-size: 18px;
+ background: var(--surface);
+ border-color: var(--border-default);
+ box-shadow: var(--shadow-card);
+}
+.btn-control.play-btn:hover {
+ background: var(--surface);
+ border-color: var(--border-strong);
+ box-shadow: var(--shadow-card-hover);
+}
+.btn-control.play-btn.active {
+ background: var(--primary);
+ border-color: var(--primary);
+ color: var(--text-inverse);
+ box-shadow: 0 0 20px rgba(0, 189, 125, 0.35);
+}
+.topbar-divider {
+ width: 1px;
+ height: 24px;
+ background: var(--border-subtle);
+ margin: 0 var(--space-4);
+}
+.btn-logout {
+ padding: var(--space-8) var(--space-16);
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 13px;
+ font-weight: 500;
+ background: transparent;
+ border: 1px solid var(--border-default);
+ color: var(--text-secondary);
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ transition: all var(--transition);
+ white-space: nowrap;
+}
+.btn-logout:hover {
+ background: var(--danger-subtle);
+ border-color: rgba(220, 38, 38, 0.3);
+ color: var(--danger);
+ transform: translateY(-1px);
+}
+
+/* ============ Main Grid ============ */
+.main-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--space-24);
+ padding: var(--space-32);
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+/* ============ Cards ============ */
+.card {
+ background: var(--surface);
+ border-radius: var(--radius-md);
+ padding: var(--space-24);
+ border: 1px solid var(--border-subtle);
+ box-shadow: var(--shadow-card);
+ transition: all var(--transition-slow);
+ transform: perspective(1000px) translateZ(0);
+ position: relative;
+ overflow: hidden;
+}
+.card::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: var(--radius-md);
+ background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%, rgba(0,0,0,0.01) 100%);
+ pointer-events: none;
+}
+.card:hover {
+ border-color: var(--border-default);
+ box-shadow: var(--shadow-card-hover);
+ transform: perspective(1000px) translateZ(4px);
+}
+.card.full { grid-column: 1 / -1; }
+.card-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-12);
+ margin-bottom: var(--space-24);
+ position: relative;
+ z-index: 1;
+}
+.card-header .card-icon {
+ font-size: 18px;
+ width: 36px;
+ height: 36px;
+ border-radius: var(--radius-md);
+ background: var(--primary-subtle);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border: 1px solid rgba(0, 189, 125, 0.12);
+}
+.card-header h3 {
+ font-family: "Oswald", "PingFang SC", sans-serif;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text);
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
+/* ============ Form Elements ============ */
+input[type="text"],
+input[type="number"],
+input[type="password"],
+select {
+ width: 100%;
+ padding: var(--space-12) var(--space-16);
+ background: #f9fafb;
+ border: 1px solid var(--border-default);
+ border-radius: var(--radius-sm);
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ color: var(--text);
+ transition: all var(--transition);
+ outline: none;
+}
+input:focus, select:focus {
+ border-color: rgba(0, 189, 125, 0.5);
+ box-shadow: 0 0 0 3px rgba(0, 189, 125, 0.07);
+}
+input::placeholder { color: var(--text-dim); }
+select {
+ appearance: none;
+ -webkit-appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right var(--space-12) center;
+ padding-right: 36px;
+}
+input[type="file"] {
+ font-size: 14px;
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-weight: 400;
+ color: var(--text-secondary);
+}
+input[type="file"]::file-selector-button {
+ background: #f3f4f6;
+ border: 1px solid var(--border-default);
+ border-radius: var(--radius-sm);
+ padding: var(--space-8) var(--space-16);
+ margin-right: var(--space-12);
+ cursor: pointer;
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text);
+ transition: all var(--transition);
+}
+input[type="file"]::file-selector-button:hover {
+ background: var(--surface);
+ border-color: var(--border-strong);
+}
+input[type="range"] {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 4px;
+ background: rgba(0,0,0,0.1);
+ border-radius: 2px;
+ padding: 0;
+ border: none;
+}
+input[type="range"]:focus { box-shadow: none; }
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 20px;
+ height: 20px;
+ background: var(--primary);
+ border-radius: 50%;
+ cursor: pointer;
+ border: 2px solid #fff;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 0 8px rgba(0, 189, 125, 0.25);
+ transition: all var(--transition);
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+ transform: scale(1.15);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 18px rgba(0, 189, 125, 0.35);
+}
+
+.form-group { margin-bottom: var(--space-16); position: relative; z-index: 1; }
+.form-group:last-child { margin-bottom: 0; }
+.form-group label {
+ display: block;
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-8);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+.form-row {
+ display: flex;
+ gap: var(--space-8);
+ align-items: end;
+}
+.form-row > :first-child { flex: 1; }
+.form-row > button { flex: 0 0 auto; }
+.form-inline {
+ display: flex;
+ gap: var(--space-24);
+ align-items: end;
+ position: relative;
+ z-index: 1;
+}
+.form-inline .form-group { flex: 1; margin-bottom: 0; }
+
+/* ============ Buttons ============ */
+button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; transition: all var(--transition); }
+.btn-primary {
+ padding: var(--space-12) var(--space-24);
+ border-radius: var(--radius-sm);
+ border: none;
+ font-size: 13px;
+ font-weight: 600;
+ background: var(--text);
+ color: var(--text-inverse);
+ white-space: nowrap;
+ letter-spacing: 0.01em;
+ box-shadow: var(--shadow-sm);
+}
+.btn-primary:hover {
+ background: #1f2937;
+ box-shadow: var(--shadow-card);
+ transform: translateY(-1px);
+}
+.btn-primary:active { transform: translateY(1px); }
+.btn-accent {
+ padding: var(--space-12) var(--space-24);
+ border-radius: var(--radius-sm);
+ border: none;
+ font-size: 13px;
+ font-weight: 600;
+ background: var(--primary);
+ color: var(--text-inverse);
+ white-space: nowrap;
+ letter-spacing: 0.01em;
+ box-shadow: 0 2px 8px rgba(0, 189, 125, 0.2);
+}
+.btn-accent:hover {
+ background: var(--primary-hover);
+ box-shadow: 0 4px 16px rgba(0, 189, 125, 0.3);
+ transform: translateY(-1px);
+}
+.btn-accent:active { transform: translateY(1px); }
+.btn-danger {
+ padding: var(--space-12) var(--space-24);
+ border-radius: var(--radius-sm);
+ border: none;
+ font-size: 13px;
+ font-weight: 600;
+ background: var(--danger);
+ color: var(--text-inverse);
+ white-space: nowrap;
+ letter-spacing: 0.01em;
+ box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
+}
+.btn-danger:hover {
+ background: var(--danger-hover);
+ box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
+ transform: translateY(-1px);
+}
+.btn-sm {
+ padding: var(--space-8) var(--space-12);
+ font-size: 12px;
+ font-weight: 500;
+ border-radius: var(--radius-sm);
+}
+
+/* ============ Media Grid ============ */
+.media-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: var(--space-16);
+}
+.media-card {
+ background: #f9fafb;
+ border: 1px solid var(--border-subtle);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ transition: all var(--transition-slow);
+ position: relative;
+ box-shadow: var(--shadow-xs);
+ transform: perspective(800px) translateZ(0);
+}
+.media-card:hover {
+ background: var(--surface);
+ border-color: var(--border-strong);
+ box-shadow: var(--shadow-card-hover);
+ transform: perspective(800px) translateZ(8px) translateY(-3px);
+}
+.media-card .thumb {
+ width: 100%;
+ height: 108px;
+ object-fit: cover;
+ background: #e5e7eb;
+ display: block;
+ cursor: pointer;
+}
+.media-card .thumb-placeholder {
+ width: 100%;
+ height: 108px;
+ background: #f3f4f6;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-dim);
+ font-family: "JetBrains Mono", "SF Mono", monospace;
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+.media-card .body { padding: var(--space-12); }
+.media-card .body .name {
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+.media-card .body .meta-row {
+ display: flex;
+ gap: var(--space-4);
+ margin-top: var(--space-8);
+ flex-wrap: wrap;
+}
+.media-card .body .actions {
+ display: flex;
+ gap: var(--space-4);
+ margin-top: var(--space-12);
+}
+.media-card .body .actions button { flex: 1; }
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 10px;
+ font-weight: 600;
+ padding: 2px 8px;
+ border-radius: var(--radius-sm);
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+.badge-video { background: rgba(0, 189, 125, 0.1); color: #00BD7D; }
+.badge-image { background: rgba(217, 119, 6, 0.1); color: #b45309; }
+.badge-url { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
+.badge-local { background: rgba(22, 163, 74, 0.1); color: #16A34A; }
+
+.empty-state {
+ text-align: center;
+ padding: var(--space-32) var(--space-24);
+ color: var(--text-dim);
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ grid-column: 1 / -1;
+}
+.empty-state .empty-icon { font-size: 40px; margin-bottom: var(--space-12); opacity: 0.35; }
+
+/* ============ Toast ============ */
+.toast-container {
+ position: fixed;
+ top: var(--space-24);
+ right: var(--space-24);
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-8);
+ pointer-events: none;
+}
+.toast {
+ padding: var(--space-12) var(--space-24);
+ border-radius: var(--radius-md);
+ font-family: "Poppins", "PingFang SC", sans-serif;
+ font-size: 13px;
+ font-weight: 500;
+ pointer-events: auto;
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
+ animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+ max-width: 360px;
+ border: 1px solid;
+ box-shadow: var(--shadow-lg);
+}
+.toast.success { background: rgba(22, 163, 74, 0.1); color: #166534; border-color: rgba(22, 163, 74, 0.2); }
+.toast.error { background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.18); }
+@keyframes toastIn {
+ from { opacity: 0; transform: translateX(40px) scale(0.92); }
+ to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+/* ============ Preview Modal ============ */
+.modal-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ background: rgba(0,0,0,0.45);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-32);
+ animation: overlayIn 0.25s ease;
+}
+@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
+.modal-overlay.closing { animation: overlayOut 0.2s ease forwards; }
+@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
+.modal-panel {
+ position: relative;
+ max-width: 90vw;
+ max-height: 85vh;
+ width: auto;
+ background: var(--surface);
+ border: 1px solid var(--border-subtle);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ box-shadow: var(--shadow-xl);
+ animation: panelIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+ transform: perspective(1000px) rotateX(0.5deg);
+}
+@keyframes panelIn { from { opacity: 0; transform: perspective(1000px) rotateX(2deg) translateY(20px) scale(0.94); } to { opacity: 1; transform: perspective(1000px) rotateX(0.5deg) translateY(0) scale(1); } }
+.modal-overlay.closing .modal-panel { animation: panelOut 0.2s ease forwards; }
+@keyframes panelOut { from { opacity: 1; transform: perspective(1000px) rotateX(0.5deg) translateY(0) scale(1); } to { opacity: 0; transform: perspective(1000px) rotateX(2deg) translateY(20px) scale(0.94); } }
+.modal-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-16) var(--space-24);
+ border-bottom: 1px solid var(--border-subtle);
+ background: #f9fafb;
+}
+.modal-header .modal-title {
+ font-family: "Oswald", "PingFang SC", sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: var(--space-12);
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+.modal-close {
+ width: 32px;
+ height: 32px;
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-subtle);
+ background: transparent;
+ color: var(--text-secondary);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ font-size: 16px;
+ transition: all var(--transition);
+}
+.modal-close:hover {
+ background: var(--danger-subtle);
+ border-color: rgba(220, 38, 38, 0.3);
+ color: var(--danger);
+}
+.modal-body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-24);
+ background: #f3f4f6;
+ min-height: 200px;
+ max-height: 65vh;
+ overflow: auto;
+}
+.modal-body img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); }
+.modal-body video { max-width: 100%; max-height: 60vh; border-radius: var(--radius-sm); outline: none; }
+.modal-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-12) var(--space-24);
+ border-top: 1px solid var(--border-subtle);
+ background: #f9fafb;
+}
+.modal-info {
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-dim);
+ display: flex;
+ gap: var(--space-4);
+ align-items: center;
+}
+.modal-actions { display: flex; gap: var(--space-8); }
+
+/* ============ Utilities ============ */
+.hidden { display: none !important; }
+.volume-label {
+ font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-dim);
+ text-align: right;
+ margin-top: var(--space-4);
+ font-variant-numeric: tabular-nums;
+}
+
+/* ============ Responsive ============ */
+@media (max-width: 768px) {
+ .login-card { padding: var(--space-24) var(--space-16) var(--space-32); margin: var(--space-12); max-width: none; }
+ .login-brand h2 { font-size: 20px; }
+ .topbar { padding: 0 var(--space-16); height: 56px; gap: var(--space-8); }
+ .topbar-left h1 { font-size: 15px; }
+ .topbar-center { display: none; }
+ .btn-control { width: 36px; height: 36px; font-size: 14px; }
+ .btn-control.play-btn { width: 42px; height: 42px; font-size: 16px; }
+ .btn-logout { padding: var(--space-4) var(--space-12); font-size: 12px; }
+ .topbar-divider { display: none; }
+ .main-grid { grid-template-columns: 1fr; gap: var(--space-16); padding: var(--space-16); }
+ .card { padding: var(--space-16); }
+ .card.full { grid-column: 1; }
+ .form-inline { flex-direction: column; gap: var(--space-16); }
+ .media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
+ .media-card .thumb { height: 88px; }
+ .media-card .body { padding: var(--space-8); }
+ .media-card .body .name { font-size: 12px; }
+ .media-card .body .actions button { font-size: 11px; padding: var(--space-4) var(--space-8); }
+ .toast-container { top: var(--space-12); right: var(--space-12); left: var(--space-12); }
+ .toast { max-width: none; font-size: 12px; }
+ .btn-primary, .btn-accent, .btn-danger { padding: var(--space-12) var(--space-16); font-size: 12px; }
+ .modal-overlay { padding: var(--space-16); }
+ .modal-panel { max-width: 100%; max-height: 90vh; }
+ .modal-body { padding: var(--space-12); max-height: 55vh; }
+ .modal-body img, .modal-body video { max-height: 50vh; }
+ .modal-header { padding: var(--space-12) var(--space-16); }
+ .modal-footer { padding: var(--space-8) var(--space-16); }
+}
+
+@media (max-width: 400px) {
+ .topbar-left h1 { font-size: 13px; }
+ .topbar-right { gap: 2px; }
+ .btn-control { width: 32px; height: 32px; font-size: 12px; }
+ .btn-control.play-btn { width: 38px; height: 38px; font-size: 14px; }
+ .media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
+}
diff --git a/src/styles/screen.css b/src/styles/screen.css
new file mode 100644
index 0000000..a484898
--- /dev/null
+++ b/src/styles/screen.css
@@ -0,0 +1,431 @@
+/* =========================================================
+ Screen Page Theme — 大屏媒体轮播
+ 基于 screen.html CSS 移植
+ ========================================================= */
+.screen-page {
+ --space-deep: #060d1a;
+ --space-mid: #0b1530;
+ --surface-glass: rgba(255,255,255,0.04);
+ --surface-glass-warm: rgba(255,248,240,0.05);
+ --text-dim: rgba(255,255,255,0.38);
+ --text-soft: rgba(255,255,255,0.55);
+ --text-bright: rgba(255,255,255,0.88);
+ --accent-cyan: #06b6d4;
+ --accent-warm: #f59e0b;
+ --accent-rose: #f472b6;
+ --glow-cyan: rgba(6, 182, 212, 0.25);
+ --glow-warm: rgba(245, 158, 11, 0.2);
+ --glow-rose: rgba(244, 114, 182, 0.15);
+
+ background: var(--space-deep);
+ color: #fff;
+ font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+ overflow: hidden;
+ -webkit-font-smoothing: antialiased;
+ user-select: none;
+ -webkit-user-select: none;
+ min-height: 100vh;
+ position: relative;
+}
+
+/* ============ Spatial Depth Layers ============ */
+
+/* Layer 0 — Deep space background */
+.screen-page::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ z-index: 0;
+ background:
+ radial-gradient(ellipse 60% 50% at 75% 25%, rgba(245, 158, 11, 0.07) 0%, transparent 60%),
+ radial-gradient(ellipse 50% 45% at 20% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
+ radial-gradient(ellipse 40% 35% at 15% 85%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
+ radial-gradient(ellipse 80% 80% at 50% 50%, rgba(6, 13, 26, 0) 0%, var(--space-deep) 100%);
+}
+
+/* Layer 1 — Perspective grid */
+.perspective-grid {
+ position: fixed;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
+ opacity: 0.06;
+ background-image:
+ repeating-linear-gradient(
+ to bottom,
+ transparent,
+ transparent calc(2px + 0.5vh),
+ rgba(255,255,255,0.3) calc(2px + 0.5vh),
+ rgba(255,255,255,0.3) calc(2.5px + 0.5vh)
+ ),
+ repeating-linear-gradient(
+ to right,
+ transparent,
+ transparent calc(2px + 0.5vw),
+ rgba(255,255,255,0.3) calc(2px + 0.5vw),
+ rgba(255,255,255,0.3) calc(2.5px + 0.5vw)
+ );
+ mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
+ -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
+}
+
+/* Layer 2 — Ambient orbs */
+.ambient-orb {
+ position: fixed;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: 2;
+ filter: blur(80px);
+ animation: orbDrift 12s ease-in-out infinite;
+}
+.ambient-orb.orb-1 {
+ width: 400px; height: 400px;
+ top: -100px; right: -80px;
+ background: rgba(6, 182, 212, 0.06);
+ animation-delay: 0s;
+}
+.ambient-orb.orb-2 {
+ width: 350px; height: 350px;
+ bottom: -120px; left: -60px;
+ background: rgba(245, 158, 11, 0.05);
+ animation-delay: -4s;
+}
+.ambient-orb.orb-3 {
+ width: 250px; height: 250px;
+ top: 50%; left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(244, 114, 182, 0.03);
+ animation-delay: -8s;
+}
+@keyframes orbDrift {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 25% { transform: translate(30px, -20px) scale(1.08); }
+ 50% { transform: translate(-15px, 25px) scale(0.94); }
+ 75% { transform: translate(-25px, -10px) scale(1.04); }
+}
+
+/* Layer 3 — Vignette */
+.screen-page::after {
+ content: '';
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 50;
+ background:
+ radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6, 13, 26, 0.55) 90%, rgba(4, 8, 16, 0.8) 100%);
+}
+
+/* ============ Media Players ============ */
+#player {
+ position: fixed;
+ inset: 0;
+ width: 100vw;
+ height: 100vh;
+ object-fit: contain;
+ background: transparent;
+ z-index: 3;
+}
+#imgPlayer {
+ position: fixed;
+ inset: 0;
+ width: 100vw;
+ height: 100vh;
+ object-fit: contain;
+ background: transparent;
+ z-index: 3;
+ display: none;
+}
+
+/* ============ Loader ============ */
+.loader {
+ position: fixed;
+ inset: 0;
+ z-index: 100;
+ background: var(--space-deep);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 48px;
+ transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
+
+.loader-brand {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+.loader-brand .mark {
+ width: 56px;
+ height: 56px;
+ position: relative;
+}
+.loader-brand .mark::before {
+ content: '';
+ position: absolute;
+ top: 6px;
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+ width: 28px;
+ height: 28px;
+ background: rgba(255,255,255,0.06);
+ border: 1px solid rgba(255,255,255,0.12);
+ border-radius: 4px;
+}
+.loader-brand .mark::after {
+ content: '';
+ position: absolute;
+ top: 18px;
+ left: 4px;
+ width: 24px;
+ height: 28px;
+ background: rgba(255,255,255,0.03);
+ border: 1px solid rgba(255,255,255,0.08);
+ border-radius: 3px;
+ transform: skewY(25deg);
+}
+.loader-brand .mark .iso-right {
+ position: absolute;
+ top: 18px;
+ right: 4px;
+ width: 24px;
+ height: 28px;
+ background: rgba(6, 182, 212, 0.08);
+ border: 1px solid rgba(6, 182, 212, 0.15);
+ border-radius: 3px;
+ transform: skewY(-25deg);
+}
+.loader-brand .mark .iso-dot {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 8px;
+ height: 8px;
+ background: var(--accent-cyan);
+ border-radius: 50%;
+ box-shadow: 0 0 16px var(--glow-cyan), 0 0 32px rgba(6, 182, 212, 0.15);
+ animation: isoPulse 2.4s ease-in-out infinite;
+ z-index: 2;
+}
+@keyframes isoPulse {
+ 0%, 100% { opacity: 0.5; box-shadow: 0 0 12px var(--glow-cyan); }
+ 50% { opacity: 1; box-shadow: 0 0 24px var(--glow-cyan), 0 0 48px rgba(6, 182, 212, 0.2); }
+}
+.loader-brand .label {
+ font-size: 13px;
+ font-weight: 500;
+ letter-spacing: 0.4em;
+ color: rgba(255,255,255,0.35);
+ text-transform: uppercase;
+}
+
+.loader-ring {
+ position: relative;
+ width: 72px;
+ height: 72px;
+ perspective: 200px;
+}
+.loader-ring .ring {
+ position: absolute;
+ border-radius: 50%;
+ border: 1.5px solid transparent;
+}
+.loader-ring .ring:nth-child(1) {
+ inset: 0;
+ border-top-color: rgba(6, 182, 212, 0.5);
+ border-right-color: rgba(6, 182, 212, 0.2);
+ animation: spin3d 1.4s linear infinite;
+ box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
+}
+.loader-ring .ring:nth-child(2) {
+ inset: 8px;
+ border-bottom-color: rgba(245, 158, 11, 0.35);
+ border-left-color: rgba(245, 158, 11, 0.12);
+ animation: spin3d 2s linear infinite reverse;
+ transform: rotateX(30deg);
+}
+.loader-ring .ring:nth-child(3) {
+ inset: 16px;
+ border-top-color: rgba(244, 114, 182, 0.25);
+ border-right-color: rgba(244, 114, 182, 0.08);
+ animation: spin3d 2.6s linear infinite;
+ transform: rotateX(-25deg);
+}
+@keyframes spin3d { to { transform: rotate(360deg); } }
+
+.loader-hint {
+ font-size: 13px;
+ color: var(--text-dim);
+ letter-spacing: 0.15em;
+}
+.loader-hint a {
+ color: rgba(255,255,255,0.6);
+ text-decoration: none;
+ border-bottom: 1px solid rgba(255,255,255,0.15);
+ padding-bottom: 2px;
+ transition: color 0.3s, border-color 0.3s;
+}
+.loader-hint a:hover {
+ color: rgba(255,255,255,0.9);
+ border-color: rgba(255,255,255,0.4);
+}
+
+/* ============ Sound Hint ============ */
+#soundHint {
+ position: fixed;
+ bottom: 48px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 100;
+ background: rgba(255,255,255,0.05);
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(24px) saturate(180%);
+ border: 1px solid rgba(255,255,255,0.1);
+ border-bottom: 1px solid rgba(255,255,255,0.04);
+ color: rgba(255,255,255,0.8);
+ padding: 14px 32px;
+ border-radius: 40px;
+ font-size: 14px;
+ font-weight: 450;
+ letter-spacing: 0.05em;
+ cursor: pointer;
+ display: none;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow:
+ 0 4px 24px rgba(0,0,0,0.3),
+ 0 0 0 1px rgba(255,255,255,0.03) inset,
+ 0 1px 0 rgba(255,255,255,0.04) inset;
+ animation: hintFloat 4s ease-in-out infinite;
+}
+#soundHint:hover {
+ background: rgba(255,255,255,0.08);
+ border-color: rgba(255,255,255,0.18);
+ box-shadow:
+ 0 8px 32px rgba(0,0,0,0.4),
+ 0 0 0 1px rgba(255,255,255,0.05) inset,
+ 0 1px 0 rgba(255,255,255,0.06) inset,
+ 0 0 40px rgba(6, 182, 212, 0.08);
+ transform: translateX(-50%) translateY(-2px);
+}
+@keyframes hintFloat {
+ 0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(6, 182, 212, 0); }
+ 50% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 32px 2px rgba(6, 182, 212, 0.06); }
+}
+
+/* ============ Status Elements ============ */
+.corner-info {
+ position: fixed;
+ top: 28px;
+ left: 28px;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ background: rgba(255,255,255,0.03);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid rgba(255,255,255,0.06);
+ border-radius: 12px;
+ padding: 8px 16px;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+ box-shadow:
+ 0 2px 12px rgba(0,0,0,0.2),
+ 0 0 0 1px rgba(255,255,255,0.02) inset;
+ pointer-events: none;
+}
+.corner-info.visible { opacity: 1; }
+.corner-info .ci-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: var(--accent-cyan);
+ box-shadow: 0 0 10px var(--glow-cyan);
+ flex-shrink: 0;
+}
+.corner-info .ci-text {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-soft);
+ letter-spacing: 0.04em;
+ white-space: nowrap;
+ max-width: 300px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.conn-indicator {
+ position: fixed;
+ top: 28px;
+ right: 28px;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+ pointer-events: none;
+}
+.conn-indicator.visible { opacity: 1; }
+.conn-rings { position: relative; width: 8px; height: 8px; }
+.conn-rings .cr-inner {
+ position: absolute;
+ inset: 1px;
+ border-radius: 50%;
+ background: rgba(52, 211, 153, 0.6);
+ box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
+ transition: all 0.6s ease;
+}
+.conn-rings .cr-outer {
+ position: absolute;
+ inset: -3px;
+ border-radius: 50%;
+ border: 1px solid rgba(52, 211, 153, 0.2);
+ animation: connPulse 2.5s ease-in-out infinite;
+}
+@keyframes connPulse {
+ 0%, 100% { transform: scale(1); opacity: 0.3; }
+ 50% { transform: scale(1.6); opacity: 0; }
+}
+.conn-label { font-size: 10px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
+
+.status-bar {
+ position: fixed;
+ bottom: 28px;
+ right: 28px;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ background: rgba(255,255,255,0.03);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid rgba(255,255,255,0.05);
+ border-radius: 10px;
+ padding: 6px 14px;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+ pointer-events: none;
+}
+.status-bar.visible { opacity: 1; }
+.status-bar .sb-dot {
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: var(--accent-warm);
+ box-shadow: 0 0 8px var(--glow-warm);
+ flex-shrink: 0;
+}
+.status-bar .sb-dot.idle { background: rgba(255,255,255,0.25); box-shadow: none; }
+.status-bar .sb-text {
+ font-size: 10px;
+ font-weight: 500;
+ color: var(--text-dim);
+ letter-spacing: 0.04em;
+ font-variant-numeric: tabular-nums;
+ font-family: "SF Mono", "JetBrains Mono", "Consolas", monospace;
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..d62a8e0
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,8 @@
+/* ============ Base Reset ============ */
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Admin and Screen pages define their own :root variables */
diff --git a/src/templates/admin.html b/src/templates/admin.html
deleted file mode 100644
index 7856974..0000000
--- a/src/templates/admin.html
+++ /dev/null
@@ -1,1659 +0,0 @@
-
-
-
-
-
+
+ {currentItem ? currentItem.name : '就绪'}
+
+
+ {/* Connection Indicator */}
+
+
+
+ {/* Bottom Status */}
+
+
+
+
+ Live
+
+
+ {currentItem ? `${index + 1} / ${list.length}` : '0 / 0'}
+
+
+ {/* Sound Hint */}
+
+ 点击启用声音
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- 昆明市大学生创业园
-大屏幕轮播控制系统
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/templates/screen.html b/src/templates/screen.html
deleted file mode 100644
index 360199f..0000000
--- a/src/templates/screen.html
+++ /dev/null
@@ -1,830 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 播放设置
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 80%
-
-
-
-
-
-
-
- 添加媒体
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 媒体库
-
-
-
-
-
-
- 播放列表
-
-
-
-
-
-
-
-
-
-
-
- PineSound
-
-
-
-
-
- 加载播放列表中...
-
-
- 就绪
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Live
- 点击启用声音
-
-
-
-
diff --git a/src/utils/api.js b/src/utils/api.js
new file mode 100644
index 0000000..b714a6a
--- /dev/null
+++ b/src/utils/api.js
@@ -0,0 +1,109 @@
+// API 基地址：Tauri 生产环境使用绝对路径，浏览器环境使用相对路径
+const BASE = window.location.protocol === 'http:' || window.location.protocol === 'https:'
+ ? '' // 浏览器环境 — 同源请求
+ : 'http://localhost:8000'; // Tauri 生产环境 (tauri://)
+
+async function request(url, options = {}) {
+ const res = await fetch(`${BASE}${url}`, {
+ headers: { 'Content-Type': 'application/json' },
+ ...options,
+ });
+ return res.json();
+}
+
+function formEncode(data) {
+ return Object.entries(data)
+ .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+ .join('&');
+}
+
+// ============ Auth ============
+export async function login(username, password) {
+ const res = await fetch(`${BASE}/api/login`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: formEncode({ username, password }),
+ });
+ return res.json();
+}
+
+// ============ Settings ============
+export async function getSettings() {
+ const res = await fetch(`${BASE}/api/settings`);
+ return res.json();
+}
+
+export async function updateSettings(data) {
+ return request('/api/settings', {
+ method: 'POST',
+ body: JSON.stringify(data),
+ });
+}
+
+// ============ Media Files ============
+export async function getMediaFiles() {
+ const res = await fetch(`${BASE}/media`);
+ return res.json();
+}
+
+export async function uploadFiles(files) {
+ for (const file of files) {
+ const fd = new FormData();
+ fd.append('file', file);
+ await fetch(`${BASE}/upload`, { method: 'POST', body: fd });
+ }
+}
+
+export async function addUrlMedia(url) {
+ return request('/api/media/add-url', {
+ method: 'POST',
+ body: JSON.stringify({ url }),
+ });
+}
+
+export async function deleteMedia(path) {
+ return request('/api/delete', {
+ method: 'POST',
+ body: JSON.stringify({ path }),
+ });
+}
+
+// ============ Playlist ============
+export async function getPlaylist() {
+ const res = await fetch(`${BASE}/api/playlist`);
+ return res.json();
+}
+
+export async function addToPlaylist(path) {
+ return request('/api/playlist/add', {
+ method: 'POST',
+ body: JSON.stringify({ path }),
+ });
+}
+
+export async function removeFromPlaylist(path) {
+ return request('/api/playlist/remove', {
+ method: 'POST',
+ body: JSON.stringify({ path }),
+ });
+}
+
+// ============ Playback Control ============
+export async function sendControl(action) {
+ return request('/api/control', {
+ method: 'POST',
+ body: JSON.stringify({ action }),
+ });
+}
+
+export async function getState() {
+ const res = await fetch(`${BASE}/api/state`);
+ return res.json();
+}
+
+export async function updateState(state) {
+ return request('/api/state', {
+ method: 'POST',
+ body: JSON.stringify({ state }),
+ });
+}
diff --git a/vite.config.js b/vite.config.js
index 1cb124a..088cf6e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,25 +7,23 @@ const host = process.env.TAURI_DEV_HOST;
export default defineConfig(async () => ({
plugins: [react()],
- // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
- //
- // 1. prevent Vite from obscuring rust errors
clearScreen: false,
- // 2. tauri expects a fixed port, fail if that port is not available
server: {
port: 1420,
strictPort: true,
host: host || "127.0.0.1",
hmr: host
- ? {
- protocol: "ws",
- host,
- port: 1421,
- }
+ ? { protocol: "ws", host, port: 1421 }
: undefined,
watch: {
- // 3. tell Vite to ignore watching `src-tauri`
ignored: ["**/src-tauri/**"],
},
+ // 开发时代理 API 请求到 Python/Rust 后端
+ proxy: {
+ '/api': 'http://localhost:8000',
+ '/file': 'http://localhost:8000',
+ '/media': 'http://localhost:8000',
+ '/upload': 'http://localhost:8000',
+ },
},
}));
diff --git a/yarn.lock b/yarn.lock
index c034b94..1426dc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -614,6 +614,11 @@ convert-source-map@^2.0.0:
resolved "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+cookie@^1.0.1:
+ version "1.1.1"
+ resolved "https://registry.npmmirror.com/cookie/-/cookie-1.1.1.tgz#3bb9bdfc82369db9c2f69c93c9c3ceb310c88b3c"
+ integrity sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==
+
debug@^4.1.0, debug@^4.3.1:
version "4.4.3"
resolved "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
@@ -746,6 +751,21 @@ react-refresh@^0.17.0:
resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.17.0.tgz#b7e579c3657f23d04eccbe4ad2e58a8ed51e7e53"
integrity sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==
+react-router-dom@^7.15.0:
+ version "7.15.0"
+ resolved "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-7.15.0.tgz#a4b95c4402d896c2ad437014aff9076b94673063"
+ integrity sha512-VcrVg64Fo8nwBvDscajG8gRTLIuTC6N50nb22l2HOOV4PTOHgoGp8mUjy9wLiHYoYTSYI36tUnXZgasSRFZorQ==
+ dependencies:
+ react-router "7.15.0"
+
+react-router@7.15.0:
+ version "7.15.0"
+ resolved "https://registry.npmmirror.com/react-router/-/react-router-7.15.0.tgz#cb438ff254ab5a1e356ef5a23d7821d8f6fbe652"
+ integrity sha512-HW9vYwuM8f4yx66Izy8xfrzCM+SBJluoZcCbww9A1TySax11S5Vgw6fi3ZjMONw9J4gQwngL7PzkyIpJJpJ7RQ==
+ dependencies:
+ cookie "^1.0.1"
+ set-cookie-parser "^2.6.0"
+
react@^19.1.0:
version "19.2.6"
resolved "https://registry.npmmirror.com/react/-/react-19.2.6.tgz#3dadb8e12b2a7934c1d5317973e5dce1301f9a4d"
@@ -795,6 +815,11 @@ semver@^6.3.1:
resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+set-cookie-parser@^2.6.0:
+ version "2.7.2"
+ resolved "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz#ccd08673a9ae5d2e44ea2a2de25089e67c7edf68"
+ integrity sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==
+
source-map-js@^1.2.1:
version "1.2.1"
resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"