perf: 优化客户端媒体浏览器

2025-12-13 03:52:50 +00:00 · 2024-12-02 20:50:10 +08:00 · 2024-12-02 20:50:10 +08:00 · 65e75f974d
commit 65e75f974d
parent 8afc1db72f
3 changed files with 336 additions and 340 deletions
--- a/electron/electron.js
+++ b/electron/electron.js
@ -479,6 +479,7 @@ function createMediaWindow(args, type = 'image') {
        height: args.height || 700,
        minWidth: 360,
        minHeight: 360,
+        autoHideMenuBar: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
--- a/electron/render/video/index.html
+++ b/electron/render/video/index.html
@ -14,6 +14,7 @@
            overflow: hidden;
            user-select: none;
        }
+
        #video-container {
            width: 100%;
            height: 100%;
@ -21,22 +22,27 @@
            justify-content: center;
            align-items: center;
        }
+
        .plyr {
            width: 100%;
            height: 100%;
        }
+
        video {
            width: 100%;
            height: 100%;
        }
+
        /* 自定义播放器主题色 */
        :root {
            --plyr-color-main: #409eff;
        }
+
        /* 黑色背景主题 */
        .plyr--video {
            background: #000;
        }
+
        .plyr__control--overlaid {
            background: rgba(64, 158, 255, 0.8);
        }
--- a/electron/render/viewer/index.html
+++ b/electron/render/viewer/index.html
@ -27,36 +27,29 @@
        .viewer-close {
            display: none;
        }
-
-        /* 加载动画 */
-        .loading {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: #fff;
-            animation: spin 1s ease-in-out infinite;
-            display: none;
-        }
-
-        @keyframes spin {
-            to { transform: translate(-50%, -50%) rotate(360deg); }
-        }
    </style>
 </head>
 <body>
 <div id="image-container"></div>
-<div class="loading"></div>

 <script src="./viewer.min.js"></script>
 <script>
    const {ipcRenderer} = require('electron');
    let viewer = null;

+    const thumbnailUrl = (url) => {
+        const crops = {
+            ratio: 3,
+            percentage: '320x0'
+        }
+        url = `${url}`
+            .replace(/_thumb\.(png|jpg|jpeg)$/, '')
+            .replace(/\/crop\/([^\/]+)$/, '')
+        return url + "/crop/" + Object.keys(crops).map(key => {
+            return `${key}:${crops[key]}`
+        }).join(",")
+    }
+
    // 标题翻译
    const titleTranslations = {
        zh: '图片查看器',
@ -73,9 +66,6 @@
    // 接收主进程发送的图片数据
    ipcRenderer.on('load-media', (event, args) => {
        const container = document.getElementById('image-container');
-        const loading = document.querySelector('.loading');
-
-        loading.style.display = 'block';
        container.innerHTML = ''; // 清空容器

        // 更新网页标题
@ -83,9 +73,10 @@
        document.title = args.title || titleTranslations[currentLang] || titleTranslations['en'];

        // 创建图片元素
-        args.images.forEach((src, index) => {
+        args.images.forEach(src => {
            const img = document.createElement('img');
-            img.src = src;
+            img.src = thumbnailUrl(src);
+            img.setAttribute('data-original', src);
            container.appendChild(img);
        });

@ -119,7 +110,7 @@
            },

            // 是否显示缩略图导航栏
-            navbar: true,
+            navbar: 2,

            // 是否显示工具提示
            tooltip: true,
@ -155,14 +146,12 @@
            // 'static'：点击背景不会关闭查看器
            backdrop: 'static',

+            // 使用url属性来加载原始图片
+            url: 'data-original',
+
            // 初始显示第几张图片（从0开始计数）
            initialViewIndex: args.currentIndex || 0,

-            // 图片加载完成后的回调函数
-            viewed() {
-                loading.style.display = 'none';
-            },
-
            // 查看器隐藏时的回调函数
            hidden() {
                window.close();