feat: taskbar preview (#519)

by @fzlzjerry 任务栏预览
tjy-gitnub · Jan 11, 2025 · 0483194 · 0483194
1 parent 88e26e1
commit 0483194
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 3 deletions.
diff --git a/desktop.css b/desktop.css
@@ -2741,3 +2741,57 @@ body > .container > .image-container > .svg {
         transform: rotate(-90deg);
     }
 }
+
+#taskbar-preview {
+    position: fixed;
+    bottom: 60px;
+    background: var(--card-bg);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 12px;
+    display: none;
+    z-index: 10000;
+    transition: all 0.2s ease-out;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+#taskbar-preview.show {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+#taskbar-preview .preview-title {
+    font-size: 13px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    color: var(--text);
+    opacity: 0.9;
+}
+
+#taskbar-preview .preview-title img {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+}
+
+#taskbar-preview .preview-content {
+    width: 280px;
+    height: 180px;
+    background: var(--hover);
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#taskbar-preview .preview-content img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+}
diff --git a/desktop.html b/desktop.html
@@ -1840,6 +1840,10 @@ <h2 class="tit"><span></span>其它</h2>
 			<div class="cnt update">
 				<h1 class="tit"><span></span>更新记录</h1>
 				<div style="margin-left: 20px;">
+					<details><summary><span>v9.1.2</span> 任务栏预览</summary><p>
+						&emsp;&emsp;-(更新来自 @fzlzjerry)<br>
+						&emsp;&emsp;-加入任务栏窗口预览<br>
+					</details>
 					<details><summary><span>v9.1.1</span> 移动端适配</summary><p>
 						&emsp;&emsp;-(更新来自@NB-Group)<br>
 						&emsp;&emsp;- 在移动端竖屏体验时将会提示“横屏以获得最佳体验”<br>
@@ -2913,7 +2917,7 @@ <h1 class="tit"><span></span>更新记录</h1>
 												</tr>
 												<tr>
 													<td>驱动程序日期: </td>
-													<td>2023 / 4 / 1</td>
+													<td>2025 / 1 / 5</td>
 												</tr>
 												<tr>
 													<td>DirectX 版本</td>

diff --git a/desktop.js b/desktop.js
@@ -3431,7 +3431,7 @@ function openapp(name) {
     $('.window.' + name).addClass('load');
     showwin(name);
     $('#taskbar').attr('count', Number($('#taskbar').attr('count')) + 1);
-    $('#taskbar').append(`<a class="${name}" onclick="taskbarclick(\'${name}\')" win12_title="${$(`.window.${name}>.titbar>p`).text()}" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)" oncontextmenu="return showcm(event, 'taskbar', '${name}')"><img src="icon/${icon[name] || (name + '.svg')}"></a>`);
+    $('#taskbar').append(`<a class="${name}" onclick="taskbarclick('${name}\')" win12_title="${$(`.window.${name}>.titbar>p`).text()}" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)" oncontextmenu="return showcm(event, 'taskbar', '${name}')"><img src="icon/${icon[name] || (name + '.svg')}"></a>`);
     if ($('#taskbar').attr('count') == '1') {
         $('#taskbar').css('display', 'flex');
     }
@@ -4515,4 +4515,91 @@ function checkOrientation() {
 
 // 监听屏幕方向变化
 window.addEventListener("resize", checkOrientation);
-window.addEventListener("orientationchange", checkOrientation);
+window.addEventListener("orientationchange", checkOrientation);
+
+let previewTimeout;
+
+function showTaskbarPreview(name, event) {
+    clearTimeout(previewTimeout);
+
+    const preview = document.getElementById('taskbar-preview');
+    if (!preview) {
+        const previewEl = document.createElement('div');
+        previewEl.id = 'taskbar-preview';
+        previewEl.innerHTML = `
+            <div class="preview-title">
+                <img src="" alt="">
+                <span></span>
+            </div>
+            <div class="preview-content">
+                <div class="preview-window"></div>
+            </div>
+        `;
+        document.body.appendChild(previewEl);
+    }
+
+    const win = $(`.window.${name}`);
+    if (win.length && !win.hasClass('min')) {
+        const preview = $('#taskbar-preview');
+        const taskbarItem = $(event.currentTarget);
+        const itemRect = taskbarItem[0].getBoundingClientRect();
+
+        // Set preview position
+        preview.css({
+            left: itemRect.left + (itemRect.width - 200) / 2,
+            bottom: '60px'
+        });
+
+        // Set window title and icon
+        const titleImg = win.find('.titbar img.icon').attr('src');
+        const title = win.find('.titbar p').text() || win.find('.titbar span').text();
+
+        preview.find('.preview-title img').attr('src', titleImg);
+        preview.find('.preview-title span').text(title);
+
+        // Create simplified window preview
+        const previewWindow = preview.find('.preview-content .preview-window');
+        previewWindow.empty();
+
+        // Clone important window elements for preview
+        const content = win.find('.content').clone();
+        content.find('script').remove(); // Remove any scripts
+        content.find('iframe').remove(); // Remove iframes
+
+        // Scale down the content
+        content.css({
+            transform: 'scale(0.2)',
+            transformOrigin: 'top left',
+            width: '500%', // 1/0.2 = 5
+            height: '500%'
+        });
+
+        previewWindow.append(content);
+        preview.addClass('show');
+    }
+}
+
+function hideTaskbarPreview() {
+    previewTimeout = setTimeout(() => {
+        $('#taskbar-preview').removeClass('show');
+    }, 200);
+}
+
+// Add hover events to taskbar items
+$(document).on('mouseenter', '#taskbar>a', function(e) {
+    const name = this.className.split(' ')[0];
+    showTaskbarPreview(name, e);
+});
+
+$(document).on('mouseleave', '#taskbar>a', function() {
+    hideTaskbarPreview();
+});
+
+// Add hover events to preview
+$(document).on('mouseenter', '#taskbar-preview', function() {
+    clearTimeout(previewTimeout);
+});
+
+$(document).on('mouseleave', '#taskbar-preview', function() {
+    hideTaskbarPreview();
+});