diff --git a/package-lock.json b/package-lock.json
index 15b5e05..a881190 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "jszip": "^3.10.1",
         "overlayscrollbars": "^2.13.0",
         "overlayscrollbars-vue": "^0.5.9",
+        "plyr": "^3.8.3",
         "vue": "^3.2.13",
         "vue-chartjs": "^5.3.2",
         "vue-cookies": "^1.8.4",
@@ -5083,6 +5084,12 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
+      "license": "MIT"
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
@@ -7404,6 +7411,12 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==",
+      "license": "MIT"
+    },
     "node_modules/local-pkg": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
@@ -8690,6 +8703,19 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/plyr": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.8.3.tgz",
+      "integrity": "sha512-0+iI5uw0WRvtKBpgPCkmQQv7ucHVQKTEo6UFJjgJ8cy/JZhy0dQqshHQVitHXV6l2O3MzhgnuvQ95VSkWcWeSw==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.45.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.3.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.13"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.38",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
@@ -9564,6 +9590,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==",
+      "license": "MIT"
+    },
     "node_modules/raw-body": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
@@ -11326,6 +11358,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.14.tgz",
+      "integrity": "sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==",
+      "license": "MIT"
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 9d91330..60d68d9 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "jszip": "^3.10.1",
     "overlayscrollbars": "^2.13.0",
     "overlayscrollbars-vue": "^0.5.9",
+    "plyr": "^3.8.3",
     "vue": "^3.2.13",
     "vue-chartjs": "^5.3.2",
     "vue-cookies": "^1.8.4",
@@ -45,4 +46,4 @@
     "not dead",
     "not ie 11"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/TransformMedia.vue b/src/components/TransformMedia.vue
index 7716c66..afbbd80 100644
--- a/src/components/TransformMedia.vue
+++ b/src/components/TransformMedia.vue
@@ -8,6 +8,7 @@
     @pointercancel="onPointerUp"
     @dblclick.prevent="onDblClick"
   >
+    <!-- 图片 -->
     <img
       v-if="isImage"
       class="tm-media"
@@ -16,19 +17,48 @@
       :style="mediaStyle"
       @load="onLoad"
     />
-    <video
-      v-else-if="isVideo"
-      class="tm-media"
-      :src="src"
-      controls
-      autoplay
-      playsinline
-      :style="mediaStyle"
-    />
+    
+    <!-- 视频：使用 Plyr -->
+    <div v-else-if="isVideo && isActive" class="tm-video-wrap" @pointerdown.stop>
+      <video
+        ref="videoEl"
+        class="plyr-video"
+        :src="src"
+        playsinline
+      ></video>
+    </div>
+    <div v-else-if="isVideo" class="video-placeholder">
+      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+    </div>
+    
+    <!-- 音频：使用 Plyr -->
+    <div v-else-if="isAudio && isActive" class="tm-audio-wrap" @pointerdown.stop>
+      <div class="audio-cover">
+        <img v-if="audioCover" :src="audioCover" class="cover-img" />
+        <svg v-else class="audio-icon-large" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+        </svg>
+      </div>
+      <div class="audio-info">
+        <div class="audio-title">{{ audioTitle }}</div>
+        <div class="audio-artist" v-if="audioArtist">{{ audioArtist }}</div>
+      </div>
+      <audio ref="audioEl" class="plyr-audio" :src="src"></audio>
+    </div>
+    <div v-else-if="isAudio" class="audio-placeholder">
+      <svg class="audio-icon-large" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+      </svg>
+      <span class="audio-name">{{ audioTitle }}</span>
+    </div>
   </div>
 </template>
 
 <script>
+import Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+import { getAudioPlayMode, setAudioPlayMode } from '@/utils/mediaManager';
+
 export default {
   name: "TransformMedia",
   props: {
@@ -36,20 +66,20 @@ export default {
     src: { type: String, required: true },
     isImage: { type: Boolean, default: true },
     isVideo: { type: Boolean, default: false },
+    isAudio: { type: Boolean, default: false },
+    isActive: { type: Boolean, default: false },
   },
   data() {
     return {
+      // 手势状态
       pointers: new Map(),
-      // transform state
       scale: 1,
-      rotation: 0,  // 落地的旋转角度：0, 90, 180, 270
-      rotatePreview: 0,  // 旋转预览角度（-90~+90，跟手）
+      rotation: 0,
+      rotatePreview: 0,
       tx: 0,
       ty: 0,
-      // 图片原始尺寸
       naturalWidth: 0,
       naturalHeight: 0,
-      // gesture start snapshots
       startScale: 1,
       startRotation: 0,
       startTx: 0,
@@ -57,33 +87,35 @@ export default {
       startCenter: null,
       startDist: 0,
       startAngle: 0,
-      // drag
       dragging: false,
       dragStart: null,
       viewportRect: null,
-      // bounds
       minScale: 1,
       maxScale: 4,
-      // 手势模式锁定：'pinch' | 'rotate' | null
       gestureMode: null,
-      // 边界翻页相关
-      edgeOverflow: 0,  // 超出边界的累计距离
-      edgeDir: 0,       // 超出方向：-1左 +1右
+      edgeOverflow: 0,
+      edgeDir: 0,
+      // Plyr 实例
+      player: null,
+      // 音频信息
+      audioCover: null,
+      audioTitle: '',
+      audioArtist: '',
+      // 菜单是否已添加
+      menuAdded: false,
     };
   },
   computed: {
     isActiveTransform() {
       return this.scale > 1.001 || this.pointers.size >= 2 || this.dragging;
     },
-    // 实际显示的旋转角度 = 落地角度 + 预览角度
     displayRotation() {
       return this.rotation + this.rotatePreview;
     },
-    // 旋转时缩小系数（中间最小，两端恢复）
     rotateShrink() {
       const p = Math.min(1, Math.abs(this.rotatePreview) / 90);
       const k = Math.sin(Math.PI * p);
-      return 1 - 0.12 * k;  // 最多缩小12%
+      return 1 - 0.12 * k;
     },
     mediaStyle() {
       const finalScale = this.scale * this.rotateShrink;
@@ -99,10 +131,358 @@ export default {
     isActiveTransform(v) {
       this.$emit(v ? "lock" : "unlock");
     },
+    isActive(active) {
+      if (!active) {
+        this.destroyPlayer();
+      } else {
+        this.$nextTick(() => this.initPlayer());
+      }
+    },
+  },
+  mounted() {
+    if (this.isAudio) {
+      this.initAudioInfo();
+    }
+    if (this.isActive) {
+      this.$nextTick(() => this.initPlayer());
+    }
+  },
+  beforeUnmount() {
+    this.destroyPlayer();
+    if (this.audioCover) {
+      URL.revokeObjectURL(this.audioCover);
+      this.audioCover = null;
+    }
   },
   methods: {
+    // ===== Plyr 播放器 =====
+    initPlayer() {
+      if (this.player) return;
+      
+      const el = this.$refs.videoEl || this.$refs.audioEl;
+      if (!el) return;
+      
+      // 音频不需要全屏按钮
+      const controls = this.isAudio
+        ? ['play', 'progress', 'current-time', 'mute', 'volume']
+        : ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'];
+      
+      this.player = new Plyr(el, {
+        controls,
+        autoplay: this.isVideo,
+        resetOnEnd: true,
+      });
+      
+      // 等待 Plyr ready 后添加自定义菜单
+      this.player.on('ready', () => {
+        this.tryAddCustomMenu();
+      });
+      
+      // 备用方案：多次尝试
+      this.scheduleMenuRetry();
+      
+      // 音频播放结束事件
+      if (this.isAudio) {
+        this.player.on('ended', this.onAudioEnded);
+      }
+    },
+    
+    // 多次尝试添加菜单
+    scheduleMenuRetry() {
+      const tryAdd = (attempt) => {
+        if (attempt >= 5 || this.menuAdded) return;
+        setTimeout(() => {
+          if (!this.menuAdded) {
+            this.tryAddCustomMenu();
+            tryAdd(attempt + 1);
+          }
+        }, 200 * (attempt + 1));
+      };
+      tryAdd(0);
+    },
+    
+    // 尝试添加自定义菜单
+    tryAddCustomMenu() {
+      if (this.menuAdded) return;
+      if (!this.player?.elements?.controls) return;
+      
+      const controls = this.player.elements.controls;
+      if (!controls || controls.querySelector('.plyr-custom-menu')) return;
+      
+      this.addCustomMenu(controls);
+      this.menuAdded = true;
+    },
+    
+    // 添加自定义三点菜单
+    addCustomMenu(controls) {
+      const currentMode = getAudioPlayMode();
+      
+      // 播放模式选项（仅音频）
+      const playModeHtml = this.isAudio ? `
+        <div class="plyr-menu-item plyr-menu-playmode">
+          <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+            <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
+          </svg>
+          <span>播放模式</span>
+          <svg class="arrow" viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
+            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+          </svg>
+        </div>
+        <div class="plyr-playmode-submenu">
+          <div class="plyr-menu-item plyr-playmode-option ${currentMode === 'stop' ? 'active' : ''}" data-mode="stop">播完停止</div>
+          <div class="plyr-menu-item plyr-playmode-option ${currentMode === 'sequence' ? 'active' : ''}" data-mode="sequence">顺序播放</div>
+          <div class="plyr-menu-item plyr-playmode-option ${currentMode === 'loop' ? 'active' : ''}" data-mode="loop">单曲循环</div>
+        </div>
+      ` : '';
+      
+      // 创建菜单容器
+      const menuContainer = document.createElement('div');
+      menuContainer.className = 'plyr-custom-menu';
+      menuContainer.innerHTML = `
+        <button type="button" class="plyr__controls__item plyr__control plyr-menu-btn" aria-label="更多">
+          <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+            <circle cx="12" cy="5" r="2"/>
+            <circle cx="12" cy="12" r="2"/>
+            <circle cx="12" cy="19" r="2"/>
+          </svg>
+        </button>
+        <div class="plyr-menu-dropdown">
+          <div class="plyr-menu-item" data-action="download">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+            </svg>
+            <span>下载</span>
+          </div>
+          <div class="plyr-menu-item plyr-menu-speed">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <path d="M10 8v8l6-4-6-4zm1.5 4l2-1.33v2.67l-2-1.34z"/>
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+            </svg>
+            <span>播放速度</span>
+            <svg class="arrow" viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
+              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+            </svg>
+          </div>
+          <div class="plyr-speed-submenu">
+            <div class="plyr-menu-item plyr-speed-option" data-speed="0.5">0.5x</div>
+            <div class="plyr-menu-item plyr-speed-option" data-speed="0.75">0.75x</div>
+            <div class="plyr-menu-item plyr-speed-option active" data-speed="1">正常</div>
+            <div class="plyr-menu-item plyr-speed-option" data-speed="1.25">1.25x</div>
+            <div class="plyr-menu-item plyr-speed-option" data-speed="1.5">1.5x</div>
+            <div class="plyr-menu-item plyr-speed-option" data-speed="2">2x</div>
+          </div>
+          ${playModeHtml}
+        </div>
+      `;
+      
+      controls.appendChild(menuContainer);
+      this.bindMenuEvents(menuContainer);
+    },
+    
+    // 绑定菜单事件
+    bindMenuEvents(menuContainer) {
+      const menuBtn = menuContainer.querySelector('.plyr-menu-btn');
+      const dropdown = menuContainer.querySelector('.plyr-menu-dropdown');
+      const speedItem = menuContainer.querySelector('.plyr-menu-speed');
+      const speedSubmenu = menuContainer.querySelector('.plyr-speed-submenu');
+      const downloadItem = menuContainer.querySelector('[data-action="download"]');
+      const playModeItem = menuContainer.querySelector('.plyr-menu-playmode');
+      const playModeSubmenu = menuContainer.querySelector('.plyr-playmode-submenu');
+      
+      // 点击三点按钮切换菜单
+      menuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        dropdown.classList.toggle('show');
+        speedSubmenu.classList.remove('show');
+        if (playModeSubmenu) playModeSubmenu.classList.remove('show');
+      });
+      
+      // 下载
+      downloadItem.addEventListener('click', () => {
+        this.downloadMedia();
+        dropdown.classList.remove('show');
+      });
+      
+      // 播放速度子菜单
+      speedItem.addEventListener('click', (e) => {
+        e.stopPropagation();
+        speedSubmenu.classList.toggle('show');
+        if (playModeSubmenu) playModeSubmenu.classList.remove('show');
+      });
+      
+      // 选择速度
+      menuContainer.querySelectorAll('.plyr-speed-option').forEach(opt => {
+        opt.addEventListener('click', () => {
+          const speed = parseFloat(opt.dataset.speed);
+          if (this.player?.media) {
+            this.player.media.playbackRate = speed;
+          }
+          menuContainer.querySelectorAll('.plyr-speed-option').forEach(o => o.classList.remove('active'));
+          opt.classList.add('active');
+          dropdown.classList.remove('show');
+          speedSubmenu.classList.remove('show');
+        });
+      });
+      
+      // 播放模式（仅音频）
+      if (playModeItem && playModeSubmenu) {
+        playModeItem.addEventListener('click', (e) => {
+          e.stopPropagation();
+          playModeSubmenu.classList.toggle('show');
+          speedSubmenu.classList.remove('show');
+        });
+        
+        menuContainer.querySelectorAll('.plyr-playmode-option').forEach(opt => {
+          opt.addEventListener('click', () => {
+            const mode = opt.dataset.mode;
+            setAudioPlayMode(mode);
+            menuContainer.querySelectorAll('.plyr-playmode-option').forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            dropdown.classList.remove('show');
+            playModeSubmenu.classList.remove('show');
+          });
+        });
+      }
+      
+      // 点击外部关闭菜单
+      document.addEventListener('click', () => {
+        dropdown.classList.remove('show');
+        speedSubmenu.classList.remove('show');
+        if (playModeSubmenu) playModeSubmenu.classList.remove('show');
+      });
+    },
+    
+    // 下载媒体文件
+    downloadMedia() {
+      const link = document.createElement('a');
+      link.href = this.src;
+      link.download = this.file?.name?.split('/').pop() || 'download';
+      link.click();
+    },
+    
+    // 音频播放结束
+    onAudioEnded() {
+      const mode = getAudioPlayMode();
+      if (mode === 'loop') {
+        // 单曲循环
+        if (this.player?.media) {
+          this.player.media.currentTime = 0;
+          this.player.play();
+        }
+      } else if (mode === 'sequence') {
+        // 顺序播放：通知父组件
+        this.$emit('audio-ended', 'next');
+      }
+      // stop 模式不做任何操作
+    },
+    
+    destroyPlayer() {
+      // 先获取原生媒体元素
+      const mediaEl = this.$refs.videoEl || this.$refs.audioEl;
+      
+      // 销毁 Plyr 实例
+      if (this.player) {
+        try {
+          this.player.pause();
+          this.player.destroy();
+        } catch (e) {}
+        this.player = null;
+      }
+      
+      // 彻底清理原生媒体元素（防止后台继续播放）
+      if (mediaEl) {
+        try {
+          mediaEl.pause();
+          mediaEl.currentTime = 0;
+          mediaEl.src = '';
+          mediaEl.load();
+        } catch (e) {}
+      }
+    },
+    
+    // 供父组件调用的停止方法
+    stopAndCleanMedia() {
+      this.destroyPlayer();
+    },
+
+    // ===== 音频信息 =====
+    initAudioInfo() {
+      const fileName = this.file?.name || this.src;
+      const name = fileName.split('/').pop().replace(/\.[^.]+$/, '');
+      this.audioTitle = name;
+      this.audioArtist = '';
+      this.audioCover = null;
+      if (this.isActive) {
+        this.tryReadMetadata();
+      }
+    },
+
+    async tryReadMetadata() {
+      try {
+        const response = await fetch(this.src);
+        const blob = await response.blob();
+        const arrayBuffer = await blob.slice(0, 128 * 1024).arrayBuffer();
+        const dataView = new DataView(arrayBuffer);
+        if (dataView.getUint8(0) === 0x49 && dataView.getUint8(1) === 0x44 && dataView.getUint8(2) === 0x33) {
+          this.parseID3v2(dataView, arrayBuffer);
+        }
+      } catch (e) {}
+    },
+
+    parseID3v2(dataView, arrayBuffer) {
+      const size = ((dataView.getUint8(6) & 0x7f) << 21) |
+                   ((dataView.getUint8(7) & 0x7f) << 14) |
+                   ((dataView.getUint8(8) & 0x7f) << 7) |
+                   (dataView.getUint8(9) & 0x7f);
+      let offset = 10;
+      while (offset < Math.min(size + 10, arrayBuffer.byteLength - 10)) {
+        const frameId = String.fromCharCode(
+          dataView.getUint8(offset), dataView.getUint8(offset + 1),
+          dataView.getUint8(offset + 2), dataView.getUint8(offset + 3)
+        );
+        if (frameId === '\0\0\0\0') break;
+        const frameSize = (dataView.getUint8(offset + 4) << 24) |
+                         (dataView.getUint8(offset + 5) << 16) |
+                         (dataView.getUint8(offset + 6) << 8) |
+                         dataView.getUint8(offset + 7);
+        if (frameSize <= 0 || frameSize > arrayBuffer.byteLength) break;
+        const frameData = new Uint8Array(arrayBuffer, offset + 10, Math.min(frameSize, arrayBuffer.byteLength - offset - 10));
+        if (frameId === 'TIT2') this.audioTitle = this.decodeText(frameData) || this.audioTitle;
+        else if (frameId === 'TPE1') this.audioArtist = this.decodeText(frameData);
+        else if (frameId === 'APIC') this.extractCover(frameData);
+        offset += 10 + frameSize;
+      }
+    },
+
+    decodeText(data) {
+      if (data.length < 2) return '';
+      const encoding = data[0];
+      const textData = data.slice(1);
+      try {
+        if (encoding === 0) return new TextDecoder('iso-8859-1').decode(textData).replace(/\0/g, '');
+        if (encoding === 1) return new TextDecoder('utf-16').decode(textData).replace(/\0/g, '');
+        if (encoding === 3) return new TextDecoder('utf-8').decode(textData).replace(/\0/g, '');
+      } catch (e) {}
+      return '';
+    },
+
+    extractCover(data) {
+      try {
+        let offset = 1;
+        while (offset < data.length && data[offset] !== 0) offset++;
+        offset += 2;
+        while (offset < data.length && data[offset] !== 0) offset++;
+        offset++;
+        if (offset < data.length) {
+          const imageData = data.slice(offset);
+          const blob = new Blob([imageData], { type: 'image/jpeg' });
+          this.audioCover = URL.createObjectURL(blob);
+        }
+      } catch (e) {}
+    },
+
+    // ===== 图片手势 =====
     onLoad(e) {
-      // 记录图片原始尺寸
       const img = e.target;
       this.naturalWidth = img.naturalWidth;
       this.naturalHeight = img.naturalHeight;
@@ -121,27 +501,23 @@ export default {
       this.$emit("unlock");
     },
 
-    clamp(v, min, max) {
-      return Math.max(min, Math.min(max, v));
-    },
+    clamp(v, min, max) { return Math.max(min, Math.min(max, v)); },
 
-    // iOS 风格橡皮筋阻尼函数
     rubberBand(distance, dimension, constant = 0.55) {
       return (distance * dimension * constant) / (dimension + constant * distance);
     },
 
-    getViewportRect() {
-      return this.$refs.viewport?.getBoundingClientRect();
-    },
+    getViewportRect() { return this.$refs.viewport?.getBoundingClientRect(); },
 
-    // 计算放大后允许的最大平移范围
     getPanBounds() {
       const rect = this.$refs.viewport?.getBoundingClientRect();
       if (!rect) return { maxX: 0, maxY: 0, vw: 0, vh: 0 };
       const vw = rect.width, vh = rect.height;
-      const img = this.$el.querySelector('img, video');
-      const iw = img?.clientWidth || vw;
-      const ih = img?.clientHeight || vh;
+      const img = this.$el.querySelector('img');
+      let iw = img?.clientWidth || vw;
+      let ih = img?.clientHeight || vh;
+      const rot = this.rotation % 360;
+      if (rot === 90 || rot === 270) [iw, ih] = [ih, iw];
       const sw = iw * this.scale;
       const sh = ih * this.scale;
       const maxX = Math.max(0, (sw - vw) / 2);
@@ -149,40 +525,32 @@ export default {
       return { maxX, maxY, vw, vh };
     },
 
-    // 应用边界阻尼
     applyBoundWithRubber(value, max, dimension) {
-      if (value > max) {
-        return max + this.rubberBand(value - max, dimension, 0.55);
-      }
-      if (value < -max) {
-        return -max - this.rubberBand(-max - value, dimension, 0.55);
-      }
+      if (value > max) return max + this.rubberBand(value - max, dimension, 0.55);
+      if (value < -max) return -max - this.rubberBand(-max - value, dimension, 0.55);
       return value;
     },
 
     calcTwoPointer() {
-      const pts = Array.from(this.pointers.values());
-      const p0 = pts[0], p1 = pts[1];
-      const dx = p1.x - p0.x;
-      const dy = p1.y - p0.y;
+      const sorted = Array.from(this.pointers.entries()).sort((a, b) => a[0] - b[0]);
+      const p0 = sorted[0][1], p1 = sorted[1][1];
+      const dx = p1.x - p0.x, dy = p1.y - p0.y;
       const dist = Math.hypot(dx, dy);
       const angle = Math.atan2(dy, dx) * (180 / Math.PI);
       const center = { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 };
       return { dist, angle, center };
     },
 
-    // 角度归一化到 -180~180
     normalizeAngle(deg) {
       deg = ((deg % 360) + 360) % 360;
       return deg > 180 ? deg - 360 : deg;
     },
 
     onPointerDown(e) {
+      if (!this.isImage) return; // 只有图片支持手势
       e.currentTarget.setPointerCapture?.(e.pointerId);
       this.viewportRect = this.getViewportRect();
       this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-
-      // 2指开始：初始化 pinch/rotate 基准
       if (this.pointers.size === 2) {
         const { dist, angle, center } = this.calcTwoPointer();
         this.startDist = dist;
@@ -197,8 +565,6 @@ export default {
         this.rotatePreview = 0;
         return;
       }
-
-      // 1指：如果已放大，则进入拖拽
       if (this.scale > 1.001) {
         this.dragging = true;
         this.dragStart = { x: e.clientX, y: e.clientY };
@@ -208,49 +574,30 @@ export default {
     },
 
     onPointerMove(e) {
+      if (!this.isImage) return;
       if (!this.pointers.has(e.pointerId)) return;
       this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-
-      // 2指：缩放 + 旋转（带死区锁定）
       if (this.pointers.size === 2) {
         e.preventDefault();
         const { dist, angle, center } = this.calcTwoPointer();
-
         const scaleFactor = dist / (this.startDist || dist);
         const scaleChange = Math.abs(scaleFactor - 1);
         const deltaAngle = this.normalizeAngle(angle - this.startAngle);
         const angleChange = Math.abs(deltaAngle);
-
-        // 阈值
-        const rotateStartDeg = 8;   // 8° 开始进入旋转模式
-        const pinchStartScale = 0.08; // 8% 缩放变化开始进入缩放模式
-
-        // 判断手势模式（只在第一次超过死区时锁定）
-        // 优先判断旋转：角度变化超过8°就进入旋转模式（不管缩放）
         if (!this.gestureMode) {
-          if (angleChange >= rotateStartDeg) {
-            this.gestureMode = 'rotate';
-          } else if (scaleChange >= pinchStartScale) {
-            this.gestureMode = 'pinch';
-          } else {
-            return; // 还在死区内
-          }
+          if (angleChange >= 8) this.gestureMode = 'rotate';
+          else if (scaleChange >= 0.08) this.gestureMode = 'pinch';
+          else return;
         }
-
-        // 旋转模式：预览角跟手，限制在 -90~+90
         if (this.gestureMode === 'rotate') {
-          this.scale = this.startScale; // 锁定缩放
+          this.scale = this.startScale;
           this.rotatePreview = this.clamp(deltaAngle, -90, 90);
           return;
         }
-
-        // 缩放模式
         if (this.gestureMode === 'pinch') {
           this.scale = this.clamp(this.startScale * scaleFactor, this.minScale, this.maxScale);
           this.rotatePreview = 0;
         }
-
-        // 跟随双指中心移动
         if (this.startCenter && this.viewportRect) {
           const cx0 = this.startCenter.x - this.viewportRect.left - this.viewportRect.width / 2;
           const cy0 = this.startCenter.y - this.viewportRect.top - this.viewportRect.height / 2;
@@ -261,8 +608,6 @@ export default {
         }
         return;
       }
-
-      // 1指：拖拽（只在 scale>1 时）+ 边界阻尼 + 边界翻页检测
       if (this.dragging && this.scale > 1.001) {
         e.preventDefault();
         const dx = e.clientX - this.dragStart.x;
@@ -270,64 +615,44 @@ export default {
         const rawX = this.startTx + dx;
         const rawY = this.startTy + dy;
         const { maxX, maxY, vw, vh } = this.getPanBounds();
-        
-        // 检测是否超出左右边界
-        let overflow = 0;
-        let dir = 0;
-        if (rawX > maxX) {
-          overflow = rawX - maxX;
-          dir = -1;  // 往右拖 = 上一页
-        } else if (rawX < -maxX) {
-          overflow = -maxX - rawX;
-          dir = +1;  // 往左拖 = 下一页
-        }
-        
-        // 记录超出状态
+        let overflow = 0, dir = 0;
+        if (rawX > maxX) { overflow = rawX - maxX; dir = -1; }
+        else if (rawX < -maxX) { overflow = -maxX - rawX; dir = +1; }
         this.edgeOverflow = overflow;
         this.edgeDir = dir;
-        
         this.tx = this.applyBoundWithRubber(rawX, maxX, vw);
         this.ty = this.applyBoundWithRubber(rawY, maxY, vh);
       }
     },
 
     onPointerUp(e) {
+      if (!this.isImage) return;
       if (this.pointers.has(e.pointerId)) this.pointers.delete(e.pointerId);
-
-      // 两指结束：处理旋转吸附
       if (this.pointers.size < 2 && this.gestureMode === 'rotate') {
         this.finishRotate();
         this.gestureMode = null;
       }
-
       if (this.pointers.size < 2) {
         this.startCenter = null;
         this.startDist = 0;
         this.startAngle = 0;
         this.gestureMode = null;
       }
-
       if (this.pointers.size === 0) {
         this.dragging = false;
-        
-        // 检查是否触发边界翻页（超出60px触发）
         if (this.edgeOverflow > 60 && this.edgeDir !== 0) {
           const dir = this.edgeDir;
-          // 翻页前先重置自身状态，解除 gestureLocked
           this.reset();
           this.$emit('edge-swipe', dir);
           return;
         }
         this.edgeOverflow = 0;
         this.edgeDir = 0;
-        
-        // 缩放回到1附近，自动归位
         if (this.scale <= 1.001) {
           this.scale = 1;
           this.tx = 0;
           this.ty = 0;
         } else {
-          // 放大状态：回弹到合法范围
           const { maxX, maxY } = this.getPanBounds();
           this.tx = Math.max(-maxX, Math.min(maxX, this.tx));
           this.ty = Math.max(-maxY, Math.min(maxY, this.ty));
@@ -335,53 +660,27 @@ export default {
       }
     },
 
-    // 松手后吸附到 0° 或 ±90°
     finishRotate() {
       const d = this.rotatePreview;
-      const commitDeg = 30;  // 超过30°就翻到90°
-      
       let target = 0;
-      if (Math.abs(d) >= commitDeg) {
-        target = d > 0 ? 90 : -90;
-      }
-
-      // 计算新的落地角度
+      if (Math.abs(d) >= 30) target = d > 0 ? 90 : -90;
       const newRot = ((this.rotation + target) % 360 + 360) % 360;
-
-      // 落地并重置预览角（transition 会自动处理动画）
       this.rotation = newRot;
       this.rotatePreview = 0;
-
-      // 计算旋转后的铺满缩放
       this.updateFillScale();
     },
 
-    // 旋转后铺满屏幕：90°/270°时放大到2倍（类似双击效果）
     updateFillScale() {
       const rot = this.rotation % 360;
       const isRotated = (rot === 90 || rot === 270);
-
-      if (isRotated) {
-        // 90°/270° 时放大到2倍铺满
-        this.scale = 2;
-        this.tx = 0;
-        this.ty = 0;
-      } else {
-        // 0° 或 180° 恢复正常
-        this.scale = 1;
-        this.tx = 0;
-        this.ty = 0;
-      }
+      if (isRotated) { this.scale = 2; this.tx = 0; this.ty = 0; }
+      else { this.scale = 1; this.tx = 0; this.ty = 0; }
     },
 
     onDblClick() {
-      if (this.scale > 1.001) {
-        this.scale = 1;
-        this.tx = 0;
-        this.ty = 0;
-      } else {
-        this.scale = 2;
-      }
+      if (!this.isImage) return;
+      if (this.scale > 1.001) { this.scale = 1; this.tx = 0; this.ty = 0; }
+      else { this.scale = 2; }
     },
   },
 };
@@ -404,4 +703,245 @@ export default {
   object-fit: contain;
   -webkit-user-drag: none;
 }
+
+.tm-video-wrap {
+  width: 100%;
+  max-width: 800px;
+  touch-action: auto;
+}
+
+.plyr-video {
+  width: 100%;
+}
+
+.tm-audio-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 24px;
+  width: 100%;
+  max-width: 400px;
+  touch-action: auto;
+}
+
+.plyr-audio {
+  width: 100%;
+}
+
+.audio-cover {
+  width: 200px;
+  height: 200px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.audio-icon-large {
+  width: 80px;
+  height: 80px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.audio-info {
+  text-align: center;
+  width: 100%;
+}
+
+.audio-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.audio-artist {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.video-placeholder,
+.audio-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.video-placeholder svg {
+  width: 80px;
+  height: 80px;
+}
+
+.audio-placeholder .audio-name {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
+<style>
+/* Plyr 深色主题覆盖 */
+.plyr {
+  --plyr-color-main: #3b82f6;
+}
+.plyr--audio .plyr__controls {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+}
+
+/* 自定义三点菜单 */
+.plyr-custom-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.plyr-menu-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.plyr-menu-btn:hover {
+  opacity: 0.8;
+}
+
+.plyr-menu-dropdown {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  min-width: 160px;
+  display: none;
+  z-index: 100;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.plyr-menu-dropdown.show {
+  display: block;
+}
+
+.plyr-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  color: #333;
+  font-size: 14px;
+  transition: background 0.15s;
+}
+
+.plyr-menu-item:hover {
+  background: #f5f5f5;
+}
+
+.plyr-menu-item svg {
+  flex-shrink: 0;
+}
+
+.plyr-menu-item .arrow {
+  margin-left: auto;
+}
+
+.plyr-speed-submenu,
+.plyr-playmode-submenu {
+  display: none;
+  border-top: 1px solid #eee;
+}
+
+.plyr-speed-submenu.show,
+.plyr-playmode-submenu.show {
+  display: block;
+}
+
+.plyr-speed-option,
+.plyr-playmode-option {
+  padding-left: 32px;
+  position: relative;
+}
+
+.plyr-speed-option.active,
+.plyr-playmode-option.active {
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.plyr-speed-option.active::before,
+.plyr-playmode-option.active::before {
+  content: '✓';
+  position: absolute;
+  left: 12px;
+}
+
+/* 手机端音量条向上显示 */
+@media (pointer: coarse), (max-width: 768px) {
+  .plyr--audio .plyr__volume {
+    position: relative;
+  }
+  
+  .plyr--audio .plyr__volume input[type="range"] {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) rotate(-90deg);
+    transform-origin: center center;
+    width: 80px;
+    margin-bottom: 40px;
+    display: none;
+  }
+  
+  .plyr--audio .plyr__volume:hover input[type="range"],
+  .plyr--audio .plyr__volume:focus-within input[type="range"] {
+    display: block;
+  }
+  
+  /* 音量滑块容器背景 */
+  .plyr--audio .plyr__volume::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 8px;
+    display: none;
+    margin-bottom: 8px;
+  }
+  
+  .plyr--audio .plyr__volume:hover::before,
+  .plyr--audio .plyr__volume:focus-within::before {
+    display: block;
+  }
+}
 </style>
diff --git a/src/utils/mediaManager.js b/src/utils/mediaManager.js
new file mode 100644
index 0000000..a08b27a
--- /dev/null
+++ b/src/utils/mediaManager.js
@@ -0,0 +1,103 @@
+// src/utils/mediaManager.js
+// 全局媒体管理器：解决多媒体并发、暂停仍出声、生命周期失控等问题
+
+const registry = new Set(); // Set<HTMLMediaElement>
+let current = null;
+
+// 音频播放模式：'stop' | 'sequence' | 'loop'
+let audioPlayMode = 'stop';
+
+function isMediaEl(el) {
+  return el && (el.tagName === 'AUDIO' || el.tagName === 'VIDEO');
+}
+
+export function registerMedia(el) {
+  if (!isMediaEl(el)) return;
+  registry.add(el);
+}
+
+export function unregisterMedia(el) {
+  if (!isMediaEl(el)) return;
+  registry.delete(el);
+  if (current === el) current = null;
+}
+
+/**
+ * 硬停止：比 pause 更彻底
+ * - pause
+ * - 清 src 并 load，确保 Safari/iOS 不再继续输出音轨
+ */
+export function hardStop(el) {
+  if (!isMediaEl(el)) return;
+  
+  try { el.pause(); } catch (e) {}
+  try { el.currentTime = 0; } catch (e) {}
+  
+  // 关键：Safari/iOS 上，pause 后仍可能"幽灵出声"，必须断开 src
+  try { el.removeAttribute('src'); } catch (e) {}
+  try { el.load?.(); } catch (e) {}
+}
+
+export function hardStopAll(except = null) {
+  for (const el of registry) {
+    if (except && el === except) continue;
+    hardStop(el);
+  }
+  current = except || null;
+}
+
+/**
+ * 绑定一个媒体元素的"播放互斥"行为：
+ * - 它一 play，就硬停其他所有媒体
+ * - 它 pause 后如果仍没停住（极少见但你遇到了），再补一次 pause
+ */
+export function bindExclusivePlayback(el) {
+  if (!isMediaEl(el)) return () => {};
+  
+  const onPlay = () => {
+    current = el;
+    hardStopAll(el);
+  };
+  
+  const onPause = () => {
+    // 你遇到的"按暂停仍出声"，常见原因是：不是当前这个在出声，而是另一个残留的在播
+    // 这里加一个保险：pause 后短延迟检查
+    setTimeout(() => {
+      try {
+        if (!el.paused) el.pause();
+      } catch (e) {}
+    }, 80);
+  };
+  
+  el.addEventListener('play', onPlay, true);
+  el.addEventListener('pause', onPause, true);
+  
+  return () => {
+    el.removeEventListener('play', onPlay, true);
+    el.removeEventListener('pause', onPause, true);
+  };
+}
+
+// 页面切后台/锁屏：全部硬停（非常关键）
+let installed = false;
+export function installGlobalMediaGuards() {
+  if (installed) return;
+  installed = true;
+  
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) hardStopAll(null);
+  });
+  
+  window.addEventListener('pagehide', () => hardStopAll(null));
+}
+
+// 音频播放模式管理
+export function getAudioPlayMode() {
+  return audioPlayMode;
+}
+
+export function setAudioPlayMode(mode) {
+  if (['stop', 'sequence', 'loop'].includes(mode)) {
+    audioPlayMode = mode;
+  }
+}
diff --git a/src/views/PublicBrowse.vue b/src/views/PublicBrowse.vue
index 37d8186..6085a4a 100644
--- a/src/views/PublicBrowse.vue
+++ b/src/views/PublicBrowse.vue
@@ -4,6 +4,7 @@
     <header class="header">
       <div class="header-left">
         <span class="logo">{{ siteName }}</span>
+        <ToggleDark class="theme-toggle-btn" />
       </div>
       <div class="header-center">
         <div class="breadcrumb">
@@ -29,6 +30,19 @@
     <div v-else-if="error" class="error-container">
       <p>{{ error }}</p>
       <button v-if="canRetry" @click="loadFiles" class="retry-btn">重试</button>
+      <div class="error-credit">
+        <p>该图库由林酱贡献代码</p>
+        <div class="error-credit-links">
+          <a href="https://github.com/axibayuit-a11y" target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            GitHub
+          </a>
+          <a href="https://linux.do/u/yuit_axiba/summary" target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+            Linux.do
+          </a>
+        </div>
+      </div>
     </div>
 
     <!-- 瀑布流容器 -->
@@ -79,11 +93,16 @@
                 loop
                 preload="metadata"
                 @loadedmetadata="onVideoLoad($event, file)"
-                @mouseenter="$event.target.play()"
-                @mouseleave="$event.target.pause()"
+                @pointerenter="e => e.pointerType === 'mouse' && e.target.play()"
+                @pointerleave="e => e.pointerType === 'mouse' && e.target.pause()"
               ></video>
+              <div v-else-if="isAudio(file)" class="audio-placeholder">
+                <svg class="audio-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
+                <span class="audio-name">{{ getFileName(file.name) }}</span>
+              </div>
               <div v-else class="file-placeholder">
                 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
+                <span class="file-name">{{ getFileName(file.name) }}</span>
               </div>
               <!-- 悬浮操作层 -->
               <div class="overlay">
@@ -122,28 +141,94 @@
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
       </button>
       
-      <!-- 桌面端：简单单图显示 -->
-      <div class="preview-content desktop-only" @click.stop>
+      <!-- 桌面端：简单单图显示（用 v-if 而非 CSS 隐藏，避免全屏时问题） -->
+      <div v-if="!isMobile" class="preview-content" @click.stop @wheel.prevent="handleWheel">
         <img 
           v-if="currentPreviewFile && isImage(currentPreviewFile)"
+          :key="'img-' + currentPreviewFile.name"
           :src="getFileUrl(currentPreviewFile.name)" 
           class="preview-image"
           :style="desktopImageStyle"
           draggable="false"
+          @mousedown="onImageMouseDown"
+          @mousemove="onImageMouseMove"
+          @mouseup="onImageMouseUp"
+          @mouseleave="onImageMouseUp"
         />
+        <!-- 桌面端视频：加 key 强制切换时重新挂载，避免混播 -->
         <video 
           v-else-if="currentPreviewFile && isVideo(currentPreviewFile)"
+          ref="desktopVideo"
+          :key="'video-' + currentPreviewFile.name"
           :src="getFileUrl(currentPreviewFile.name)"
           controls
-          autoplay
           class="preview-video"
           :style="desktopImageStyle"
+          @play="onDesktopVideoPlay"
         ></video>
+        <!-- 桌面端音频：加 key 强制切换时重新挂载 -->
+        <TransformMedia
+          v-else-if="currentPreviewFile && isAudio(currentPreviewFile)"
+          ref="desktopAudio"
+          :key="'audio-' + currentPreviewFile.name"
+          :file="currentPreviewFile"
+          :src="getFileUrl(currentPreviewFile.name)"
+          :is-image="false"
+          :is-video="false"
+          :is-audio="true"
+          :is-active="true"
+          @audio-ended="onAudioEnded"
+        />
       </div>
       
-      <!-- 手机端：三页轨道轮播 + TransformMedia -->
-      <div class="preview-content mobile-only" @click.stop>
+      <!-- 手机端预览：视频和音频完全独立（用 v-if 确保只渲染一个） -->
+      <div v-if="isMobile" class="preview-content preview-content-mobile" @click.stop>
+        <!-- 视频：纯原生播放，不包裹任何额外UI -->
+        <video
+          v-if="currentPreviewFile && isVideo(currentPreviewFile)"
+          ref="mobileVideo"
+          :key="'m-video-' + currentPreviewFile.name"
+          :src="getFileUrl(currentPreviewFile.name)"
+          controls
+          playsinline
+          webkit-playsinline
+          x5-video-player-type="h5"
+          x5-video-player-fullscreen="true"
+          class="mobile-video-native"
+          @play="onMobileMediaPlay"
+        ></video>
+        
+        <!-- 音频：使用 TransformMedia 组件（带 Plyr 和三点菜单） -->
         <div
+          v-else-if="currentPreviewFile && isAudio(currentPreviewFile)"
+          class="mobile-audio-wrap"
+          @touchstart="onAudioSwipeStart"
+          @touchmove="onAudioSwipeMove"
+          @touchend="onAudioSwipeEnd"
+        >
+          <TransformMedia
+            ref="mobileAudio"
+            :key="'m-audio-' + currentPreviewFile.name"
+            :file="currentPreviewFile"
+            :src="getFileUrl(currentPreviewFile.name)"
+            :is-image="false"
+            :is-video="false"
+            :is-audio="true"
+            :is-active="true"
+            @audio-ended="onAudioEnded"
+          />
+          <div class="swipe-hint">← 滑动切换 →</div>
+        </div>
+        
+        <!-- 其他文件：直接显示 -->
+        <div v-else-if="currentPreviewFile && !isImage(currentPreviewFile)" class="other-file-preview">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
+          <span class="file-name">{{ getFileName(currentPreviewFile.name) }}</span>
+        </div>
+        
+        <!-- 图片：三页轨道轮播 -->
+        <div
+          v-else
           class="swipe-viewport"
           ref="mobileViewport"
           @touchstart="onSwipeStart"
@@ -161,7 +246,9 @@
                 :file="f"
                 :src="getFileUrl(f.name)"
                 :is-image="isImage(f)"
-                :is-video="isVideo(f)"
+                :is-video="false"
+                :is-audio="false"
+                :is-active="i === 1"
                 @lock="gestureLocked = true"
                 @unlock="gestureLocked = false"
                 @edge-swipe="onEdgeSwipe"
@@ -172,15 +259,15 @@
       </div>
       
       <!-- 桌面端按钮 -->
-      <button class="preview-prev desktop-only" @click.stop="prevImage" v-if="previewIndex > 0">
+      <button class="preview-prev" @click.stop="prevImage" v-if="!isMobile && previewIndex > 0">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
       </button>
-      <button class="preview-next desktop-only" @click.stop="nextImage" v-if="previewIndex < mediaFiles.length - 1">
+      <button class="preview-next" @click.stop="nextImage" v-if="!isMobile && previewIndex < mediaFiles.length - 1">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
       </button>
       
       <!-- 桌面端旋转按钮 -->
-      <button class="rotate-btn desktop-only" @click.stop="rotateImage" title="旋转90°">
+      <button class="rotate-btn" @click.stop="rotateImage" v-if="!isMobile" title="旋转90°">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
       </button>
       
@@ -196,11 +283,14 @@
 import axios from 'axios';
 import { mapGetters } from 'vuex';
 import TransformMedia from '@/components/TransformMedia.vue';
+import ToggleDark from '@/components/ToggleDark.vue';
+import { hardStopAll, installGlobalMediaGuards } from '@/utils/mediaManager';
 
 export default {
   name: 'PublicBrowse',
   components: {
-    TransformMedia
+    TransformMedia,
+    ToggleDark
   },
   data() {
     return {
@@ -219,8 +309,16 @@ export default {
       pageSize: 24,
       columnCount: 4,
       columnHeights: [0, 0, 0, 0],
-      // 桌面端旋转
+      // 桌面端旋转和缩放
       imageRotation: 0,
+      imageScale: 1,
+      // 桌面端拖拽
+      imageTx: 0,
+      imageTy: 0,
+      imageDragging: false,
+      imageDragStart: null,
+      imageStartTx: 0,
+      imageStartTy: 0,
       // 手机端滑动
       swipeX: 0,
       swipeStartX: 0,
@@ -232,6 +330,12 @@ export default {
       viewportW: 0,
       // 手势锁定（子组件缩放/旋转时锁住轮播）
       gestureLocked: false,
+      // 音频滑动切换
+      audioSwipeStartX: 0,
+      audioSwipeStartT: 0,
+      audioSwipeActive: false,
+      // 设备类型判断（用 JS 而非纯 CSS，避免全屏时媒体查询失效）
+      isMobile: false,
     };
   },
   computed: {
@@ -275,9 +379,11 @@ export default {
       return this.previewIndex < this.mediaFiles.length - 1 ? this.mediaFiles[this.previewIndex + 1] : null;
     },
     desktopImageStyle() {
+      const inDrag = this.imageDragging;
       return {
-        transform: `rotate(${this.imageRotation}deg)`,
-        transition: 'transform 0.3s ease'
+        transform: `translate(${this.imageTx}px, ${this.imageTy}px) rotate(${this.imageRotation}deg) scale(${this.imageScale})`,
+        transition: inDrag ? 'none' : 'transform 0.3s ease',
+        cursor: this.imageScale > 1 ? (this.imageDragging ? 'grabbing' : 'grab') : 'default'
       };
     },
     swipeWindow() {
@@ -301,18 +407,32 @@ export default {
     }
   },
   mounted() {
+    // 安装全局媒体守卫
+    installGlobalMediaGuards();
+    this.checkMobile();
     this.initFromRoute();
     this.setupIntersectionObserver();
     this.updateColumnCount();
     window.addEventListener('resize', this.updateColumnCount);
+    window.addEventListener('resize', this.checkMobile);
   },
   beforeUnmount() {
     if (this.observer) {
       this.observer.disconnect();
     }
     window.removeEventListener('resize', this.updateColumnCount);
+    window.removeEventListener('resize', this.checkMobile);
   },
   methods: {
+    // 检测是否为移动设备（用 JS 判断，避免全屏时 CSS 媒体查询失效）
+    checkMobile() {
+      // 用 pointer: coarse 检测（触摸屏主输入），结合屏幕宽度
+      // 不单独用 ontouchstart，因为很多电脑也支持触摸
+      const isCoarse = window.matchMedia?.('(pointer: coarse)').matches;
+      const isSmall = window.innerWidth <= 768;
+      this.isMobile = isCoarse || isSmall;
+    },
+
     // 生成 slide key，切换时让子组件重新挂载以重置 transform
     getSlideKey(f, i) {
       if (!f) return `empty-${i}`;
@@ -358,6 +478,10 @@ export default {
       const colIndex = this.getShortestColumn();
       file.columnIndex = colIndex;
       this.columnHeights[colIndex] += height;
+      // 音频和其他文件直接标记为已加载（没有 load 事件）
+      if (this.isAudio(file) || (!this.isImage(file) && !this.isVideo(file))) {
+        file.loaded = true;
+      }
     },
 
     onImageLoad(event, file) {
@@ -511,12 +635,12 @@ export default {
     },
 
     getFileUrl(name) {
-      return `${window.location.origin}/file/${name}`;
+      return `${window.location.origin}/file/${encodeURI(name)}`;
     },
 
     isImage(file) {
       const ext = file.name.split('.').pop().toLowerCase();
-      return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(ext);
+      return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'avif'].includes(ext);
     },
 
     isVideo(file) {
@@ -524,6 +648,15 @@ export default {
       return ['mp4', 'webm', 'ogg', 'mov'].includes(ext);
     },
 
+    isAudio(file) {
+      const ext = file.name.split('.').pop().toLowerCase();
+      return ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'].includes(ext);
+    },
+
+    getFileName(name) {
+      return name.split('/').pop();
+    },
+
     handleImageError(e) {
       e.target.style.display = 'none';
     },
@@ -568,11 +701,17 @@ export default {
 
     openPreview(file) {
       if (file.isFolder) return;
+      // 打开预览前先硬停全站（防止瀑布流 hover video 或旧实例残留）
+      hardStopAll(null);
+      
       const mediaIndex = this.mediaFiles.findIndex(f => f.name === file.name);
       if (mediaIndex >= 0) {
         this.previewIndex = mediaIndex;
         this.previewVisible = true;
         this.imageRotation = 0;
+        this.imageScale = 1;
+        this.imageTx = 0;
+        this.imageTy = 0;
         this.gestureLocked = false;
         document.body.style.overflow = 'hidden';
         this.$nextTick(() => {
@@ -582,46 +721,94 @@ export default {
     },
 
     closePreview() {
+      // 关闭预览先硬停全站，再关弹窗
+      hardStopAll(null);
       this.previewVisible = false;
       this.imageRotation = 0;
+      this.imageScale = 1;
+      this.imageTx = 0;
+      this.imageTy = 0;
       this.gestureLocked = false;
       document.body.style.overflow = '';
     },
 
     prevImage() {
+      // 切换前硬停全站
+      hardStopAll(null);
       if (this.previewIndex > 0) {
         this.previewIndex--;
         this.imageRotation = 0;
+        this.imageScale = 1;
+        this.imageTx = 0;
+        this.imageTy = 0;
       }
     },
 
     nextImage() {
+      // 切换前硬停全站
+      hardStopAll(null);
       if (this.previewIndex < this.mediaFiles.length - 1) {
         this.previewIndex++;
         this.imageRotation = 0;
+        this.imageScale = 1;
+        this.imageTx = 0;
+        this.imageTy = 0;
       }
     },
 
     rotateImage() {
+      // 持续累加旋转角度，不重置，这样动画永远是顺时针
+      // 0 → 90 → 180 → 270 → 360 → 450 → ...
       this.imageRotation += 90;
-      // 动画结束后归一化（无动画）
-      if (this.imageRotation >= 360) {
-        setTimeout(() => {
-          // 临时禁用 transition
-          const el = this.$el.querySelector('.preview-image, .preview-video');
-          if (el) {
-            el.style.transition = 'none';
-            this.imageRotation = 0;
-            // 强制重绘后恢复 transition
-            el.offsetHeight;
-            el.style.transition = '';
-          } else {
-            this.imageRotation = 0;
-          }
-        }, 300);
+    },
+
+    // 桌面端滚轮缩放
+    handleWheel(e) {
+      // 只对图片生效
+      if (!this.currentPreviewFile || !this.isImage(this.currentPreviewFile)) return;
+      
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      let newScale = this.imageScale + delta;
+      
+      // 限制缩放范围 0.5 ~ 4
+      newScale = Math.max(0.5, Math.min(4, newScale));
+      this.imageScale = newScale;
+      
+      // 缩放到1以下时重置位移
+      if (newScale <= 1) {
+        this.imageTx = 0;
+        this.imageTy = 0;
       }
     },
 
+    // 桌面端鼠标拖拽：开始
+    onImageMouseDown(e) {
+      // 只有放大时才能拖拽
+      if (this.imageScale <= 1) return;
+      
+      e.preventDefault();
+      this.imageDragging = true;
+      this.imageDragStart = { x: e.clientX, y: e.clientY };
+      this.imageStartTx = this.imageTx;
+      this.imageStartTy = this.imageTy;
+    },
+
+    // 桌面端鼠标拖拽：移动
+    onImageMouseMove(e) {
+      if (!this.imageDragging) return;
+      
+      const dx = e.clientX - this.imageDragStart.x;
+      const dy = e.clientY - this.imageDragStart.y;
+      
+      this.imageTx = this.imageStartTx + dx;
+      this.imageTy = this.imageStartTy + dy;
+    },
+
+    // 桌面端鼠标拖拽：结束
+    onImageMouseUp() {
+      this.imageDragging = false;
+    },
+
     // 手机端滑动：开始
     onSwipeStart(e) {
       if (this.gestureLocked) return;
@@ -712,13 +899,94 @@ export default {
       return (distance * dimension * constant) / (dimension + constant * distance);
     },
 
-    // 放大状态下边界滑动翻页
+    // 放大状态下边界滑动翻页（带动画）
     onEdgeSwipe(dir) {
       // dir: +1 下一页, -1 上一页
-      if (dir === +1 && this.previewIndex < this.mediaFiles.length - 1) {
-        this.previewIndex++;
-      } else if (dir === -1 && this.previewIndex > 0) {
-        this.previewIndex--;
+      if ((dir === -1 && this.previewIndex === 0) ||
+          (dir === +1 && this.previewIndex === this.mediaFiles.length - 1)) {
+        return;
+      }
+      
+      // 触发轮播动画
+      this.swipeDir = dir;
+      this.swipeAnimating = true;
+      
+      if (dir === +1) this.swipeX = -this.viewportW;
+      else if (dir === -1) this.swipeX = +this.viewportW;
+    },
+
+    // ========== 音频滑动切换 ==========
+    // 音频滑动开始
+    onAudioSwipeStart(e) {
+      const t = e.touches[0];
+      this.audioSwipeStartX = t.clientX;
+      this.audioSwipeStartT = performance.now();
+      this.audioSwipeActive = false;
+    },
+
+    // 音频滑动移动
+    onAudioSwipeMove(e) {
+      if (!this.audioSwipeStartX) return;
+      const t = e.touches[0];
+      const dx = t.clientX - this.audioSwipeStartX;
+      // 水平滑动超过 30px 才激活
+      if (Math.abs(dx) > 30) {
+        this.audioSwipeActive = true;
+      }
+    },
+
+    // 音频滑动结束：切换上一首/下一首
+    onAudioSwipeEnd(e) {
+      if (!this.audioSwipeActive) {
+        this.audioSwipeStartX = 0;
+        return;
+      }
+      
+      const t = e.changedTouches[0];
+      const dx = t.clientX - this.audioSwipeStartX;
+      const dt = Math.max(1, performance.now() - this.audioSwipeStartT);
+      const vx = dx / dt;
+      
+      // 滑动距离超过 80px 或速度超过 0.5 触发切换
+      const threshold = 80;
+      if (dx > threshold || vx > 0.5) {
+        // 右滑 → 上一首
+        this.prevImage();
+      } else if (dx < -threshold || vx < -0.5) {
+        // 左滑 → 下一首
+        this.nextImage();
+      }
+      
+      this.audioSwipeStartX = 0;
+      this.audioSwipeActive = false;
+    },
+
+    // 桌面端视频播放时，硬停其他所有媒体
+    onDesktopVideoPlay(e) {
+      hardStopAll(e.target);
+    },
+
+    // 手机端媒体播放时，硬停其他所有媒体
+    onMobileMediaPlay(e) {
+      hardStopAll(e.target);
+    },
+
+    // 音频播放结束：顺序播放模式下切换下一首
+    onAudioEnded(action) {
+      if (action === 'next') {
+        // 顺序播放：切换到下一首
+        if (this.previewIndex < this.mediaFiles.length - 1) {
+          this.previewIndex++;
+          // 等待 DOM 更新后自动播放下一首
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const audioRef = this.isMobile ? this.$refs.mobileAudio : this.$refs.desktopAudio;
+              if (audioRef?.player) {
+                audioRef.player.play();
+              }
+            }, 100);
+          });
+        }
       }
     }
   }
@@ -740,16 +1008,53 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 32px;
+  padding: 16px 24px;
   background: rgba(15, 15, 15, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid #1a1a1a;
+  position: relative;
+}
+
+.header-left {
+  flex: 0 0 auto;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.theme-toggle-btn {
+  background: transparent;
+  border-radius: 8px;
+  transition: background 0.2s;
+}
+
+.theme-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.header-right {
+  flex: 0 0 auto;
+  z-index: 1;
+}
+
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 0;
 }
 
 .logo {
   font-size: 20px;
   font-weight: 600;
   color: #fff;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.logo:hover {
+  opacity: 0.8;
 }
 
 .breadcrumb {
@@ -790,6 +1095,36 @@ export default {
   color: #666;
 }
 
+.error-credit {
+  margin-top: 40px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+}
+
+.error-credit p {
+  margin-bottom: 12px;
+}
+
+.error-credit-links {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.error-credit-links a {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: rgba(255, 255, 255, 0.5);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.error-credit-links a:hover {
+  color: #3b82f6;
+}
+
 .loading-spinner {
   width: 48px;
   height: 48px;
@@ -969,15 +1304,64 @@ export default {
   width: 100%;
   height: 200px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   background: #141414;
-  color: #333;
+  color: #555;
+  gap: 12px;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .file-placeholder svg {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
+}
+
+.file-name {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  word-break: break-all;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.audio-placeholder {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  gap: 12px;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.audio-icon {
+  width: 48px;
+  height: 48px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.audio-name {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  word-break: break-all;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .overlay-actions {
@@ -1069,6 +1453,74 @@ export default {
   overflow: hidden;
 }
 
+/* 手机端预览容器 */
+.preview-content-mobile {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* 手机端视频：完全原生，占满屏幕 */
+.mobile-video-native {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #000;
+}
+
+/* 手机端音频容器 */
+.mobile-audio-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.mobile-audio-wrap .swipe-hint {
+  margin-top: 20px;
+}
+
+.swipe-hint {
+  font-size: 12px;
+  color: rgba(255,255,255,0.4);
+}
+
+/* 手机端其他文件预览 */
+.other-file-preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.6);
+  gap: 16px;
+}
+
+.other-file-preview svg {
+  width: 64px;
+  height: 64px;
+}
+
+.other-file-preview .file-name {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  padding: 0 20px;
+  word-break: break-all;
+}
+
 .swipe-viewport {
   width: 100%;
   height: 100%;
@@ -1198,34 +1650,13 @@ export default {
   height: 24px;
 }
 
-/* 桌面端显示，手机端隐藏 */
+/* 手机端响应式调整 */
 @media (max-width: 768px) {
-  .desktop-only {
-    display: none !important;
-  }
-  
-  .preview-content.mobile-only {
-    display: block;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
   .page-indicator {
     bottom: 40px;
   }
 }
 
-/* 手机端显示，桌面端隐藏 */
-@media (min-width: 769px) {
-  .mobile-only {
-    display: none !important;
-  }
-}
-
 /* 平板端 */
 @media (max-width: 1199px) and (min-width: 601px) {
   .gallery-container {
@@ -1335,4 +1766,131 @@ export default {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+
+/* 白天模式（跟随全局 dark class） */
+:root:not(.dark) .public-browse {
+  background: #f5f5f5;
+  color: #333;
+}
+
+:root:not(.dark) .header {
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom-color: #e0e0e0;
+}
+
+:root:not(.dark) .logo {
+  color: #333;
+}
+
+:root:not(.dark) .breadcrumb-item {
+  color: #666;
+}
+
+:root:not(.dark) .breadcrumb-item:hover {
+  background: #e8e8e8;
+  color: #333;
+}
+
+:root:not(.dark) .breadcrumb-sep {
+  color: #ccc;
+}
+
+:root:not(.dark) .file-count {
+  color: #999;
+}
+
+:root:not(.dark) .loading-container,
+:root:not(.dark) .error-container {
+  color: #999;
+}
+
+:root:not(.dark) .error-credit {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:root:not(.dark) .error-credit-links a {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+:root:not(.dark) .loading-spinner {
+  border-color: #ddd;
+  border-top-color: #3b82f6;
+}
+
+:root:not(.dark) .loading-spinner-small {
+  border-color: #ddd;
+  border-top-color: #3b82f6;
+}
+
+:root:not(.dark) .folder-card {
+  background: #fff;
+  border-color: #e0e0e0;
+}
+
+:root:not(.dark) .folder-card:hover {
+  background: #fafafa;
+  border-color: #ccc;
+}
+
+:root:not(.dark) .folder-icon {
+  color: #999;
+}
+
+:root:not(.dark) .folder-name {
+  color: #666;
+}
+
+:root:not(.dark) .image-wrapper {
+  background: #fff;
+  border-color: #e0e0e0;
+}
+
+:root:not(.dark) .image-wrapper::before {
+  background: linear-gradient(90deg, #f5f5f5 25%, #fff 50%, #f5f5f5 75%);
+}
+
+:root:not(.dark) .image-wrapper:hover {
+  border-color: #ccc;
+}
+
+:root:not(.dark) .file-placeholder {
+  background: #f5f5f5;
+  color: #999;
+}
+
+:root:not(.dark) .file-name {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+:root:not(.dark) .audio-placeholder {
+  background: linear-gradient(135deg, #e8f4f8 0%, #d4e5f7 100%);
+}
+
+:root:not(.dark) .audio-icon {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:root:not(.dark) .audio-name {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+:root:not(.dark) .no-more {
+  color: #bbb;
+}
+
+:root:not(.dark) .credit-link {
+  color: #aaa;
+}
+
+:root:not(.dark) .credit-link:hover {
+  color: #666;
+}
+
+:root:not(.dark) .loading-more {
+  color: #999;
+}
+
+:root:not(.dark) .theme-toggle-btn:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
 </style>