From bbc1258a40216a9d9da421bdf395cd68f1ce5d07 Mon Sep 17 00:00:00 2001
From: N1KO <tangjiyang@yinshantech.cn>
Date: Thu, 19 Dec 2024 17:16:16 +0800
Subject: [PATCH] file-parse

---
 .../resources/templates/file-baogutang.html   | 97 +++++++++++--------
 1 file changed, 58 insertions(+), 39 deletions(-)

diff --git a/baogutang-admin/src/main/resources/templates/file-baogutang.html b/baogutang-admin/src/main/resources/templates/file-baogutang.html
index 5e94bc1..dbd1867 100644
--- a/baogutang-admin/src/main/resources/templates/file-baogutang.html
+++ b/baogutang-admin/src/main/resources/templates/file-baogutang.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="icon" type="image/png" href="NIKO.png"/>
     <title>BAOGUTANG-FILE</title>
-    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{css/bootstrap.min.css}">
-    <link href="css/font-awesome.min.css" rel="stylesheet" th:href="@{css/font-awesome.min.css}">
-    <link href="css/base.css" rel="stylesheet" th:href="@{css/base.css}">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/font-awesome.min.css" rel="stylesheet">
+    <link href="css/base.css" rel="stylesheet">
     <style>
         body {
             font-family: "Microsoft YaHei", Arial, sans-serif;
@@ -16,18 +16,6 @@
             padding: 0;
         }
 
-        /* 顶部标题条 */
-        .top-bar {
-            background-color: #50b3a2; /* 可根据需求调整颜色，参考截图中的色调 */
-            padding: 20px;
-        }
-        .top-bar h1 {
-            margin: 0;
-            font-size: 20px;
-            font-weight: bold;
-            color: #fff; /* 标题文字颜色为白色，突出标题 */
-        }
-
         .container {
             max-width: 1200px;
             margin: 20px auto;
@@ -37,18 +25,22 @@
             border-radius: 5px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
+
         h3 {
             color: #444;
             margin-bottom: 10px;
         }
+
         .section {
             margin-bottom: 30px;
         }
+
         label {
             font-weight: bold;
             margin-bottom: 5px;
             display: block;
         }
+
         input[type="file"], textarea, button {
             width: 100%;
             margin-bottom: 10px;
@@ -57,30 +49,44 @@
             border-radius: 3px;
             font-size: 14px;
         }
+
         button {
             background-color: rgb(98, 210, 161);
             color: white;
             cursor: pointer;
             border: none;
         }
+
         button:hover {
             background-color: rgba(98, 210, 161, 0.8);
         }
+
         textarea {
             height: 150px;
             resize: none;
         }
+
         .preview {
             margin-top: 10px;
+            min-height: 200px;
+            transition: opacity 0.3s ease; /* 添加过渡 */
+            opacity: 1;
         }
+
+        .preview.hide {
+            opacity: 0;
+        }
+
         img, iframe {
             max-width: 100%;
             border: 1px solid #ddd;
             border-radius: 3px;
         }
+
         iframe {
-            height: 80vh; /* PDF预览高度设置为屏幕高度的80% */
+            height: 80vh;
         }
+
         .download-link {
             display: block;
             margin-top: 10px;
@@ -88,21 +94,23 @@
             text-decoration: none;
             font-weight: bold;
         }
+
         .download-link:hover {
             text-decoration: underline;
         }
+
         .divider {
             margin: 30px 0;
             border-top: 1px solid #ddd;
         }
 
-        /* 类型选项按钮组样式 */
         .type-options {
             display: flex;
             gap: 10px;
             margin-bottom: 10px;
             flex-wrap: wrap;
         }
+
         .type-option {
             flex: 0 0 auto;
             padding: 10px;
@@ -116,17 +124,17 @@
             user-select: none;
             transition: background-color 0.2s;
         }
+
         .type-option:hover {
             background-color: #eee;
         }
+
         .type-option.active {
             background-color: rgb(98, 210, 161);
             color: #fff;
             border-color: rgb(98, 210, 161);
         }
     </style>
-    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 </head>
 <body style="over-flow:hidden;">
 <header class="header">
@@ -168,14 +176,13 @@
         </div>
 
         <button onclick="convertToFile()">转换为文件并预览</button>
-        <div class="preview" id="previewArea"></div>
+        <div class="preview hide" id="previewArea"></div>
     </div>
 </div>
 
 <script>
     let selectedType = 'auto';
 
-    // 页面加载时默认选中“自动识别”
     window.addEventListener('DOMContentLoaded', () => {
         resetTypeSelection();
     });
@@ -191,7 +198,6 @@
         });
     }
 
-    // 点击类型选项按钮，更新选中状态
     document.getElementById('typeOptions').addEventListener('click', (e) => {
         if (e.target.classList.contains('type-option')) {
             const typeOptions = document.querySelectorAll('.type-option');
@@ -201,7 +207,6 @@
         }
     });
 
-    // 将文件转换为 Base64
     function convertToBase64() {
         const fileInput = document.getElementById('fileInput');
         const base64Output = document.getElementById('base64Output');
@@ -222,10 +227,9 @@
             alert('文件读取失败！');
         };
 
-        reader.readAsDataURL(file); // 将文件读取为 Base64
+        reader.readAsDataURL(file);
     }
 
-    // 将 Base64 转换为文件并预览
     function convertToFile() {
         const base64Input = document.getElementById('base64Input');
         const previewArea = document.getElementById('previewArea');
@@ -234,34 +238,30 @@
 
         if (!inputValue) {
             alert('请提供有效的 Base64 字符串！');
-            // 清空后恢复自动识别
             resetTypeSelection();
             return;
         }
 
-        // 清空预览区域
-        previewArea.innerHTML = '';
+        // 隐藏预览区（淡出）
+        previewArea.classList.add('hide');
 
         let finalBase64 = inputValue;
         let mimeType = '';
 
-        // 根据选中类型进行处理
         if (selectedType === 'auto') {
             let headerMatch = finalBase64.match(/^data:(.*);base64,/);
             if (headerMatch) {
                 mimeType = headerMatch[1];
                 finalBase64 = finalBase64.substring(finalBase64.indexOf(',')+1);
             } else {
-                // 未选择类型且无头信息则默认使用application/octet-stream
                 mimeType = 'application/octet-stream';
             }
         } else {
-            // 用户选择了特定类型
             finalBase64 = finalBase64.replace(/^data:.*;base64,/, '');
             mimeType = selectedType;
         }
 
-        const binary = atob(finalBase64); // 解码 Base64
+        const binary = atob(finalBase64);
         const arrayBuffer = new Uint8Array(binary.length);
 
         for (let i = 0; i < binary.length; i++) {
@@ -271,23 +271,25 @@
         const blob = new Blob([arrayBuffer], { type: mimeType });
         const fileUrl = URL.createObjectURL(blob);
 
-        // 下载链接
+        const fragment = document.createDocumentFragment();
+
         const downloadLink = document.createElement('a');
         downloadLink.href = fileUrl;
         downloadLink.download = 'converted_file';
         downloadLink.textContent = '点击下载文件';
         downloadLink.className = 'download-link';
-        previewArea.appendChild(downloadLink);
+        fragment.appendChild(downloadLink);
 
-        // 根据文件类型生成预览
         if (mimeType.startsWith('image/')) {
             const img = document.createElement('img');
             img.src = fileUrl;
-            previewArea.appendChild(img);
+            fragment.appendChild(img);
+            updatePreview(fragment);
         } else if (mimeType === 'application/pdf') {
             const iframe = document.createElement('iframe');
             iframe.src = fileUrl;
-            previewArea.appendChild(iframe);
+            fragment.appendChild(iframe);
+            updatePreview(fragment);
         } else if (mimeType.startsWith('text/')) {
             const reader = new FileReader();
             reader.onload = function (e) {
@@ -295,14 +297,31 @@
                 textArea.value = e.target.result;
                 textArea.style.width = '100%';
                 textArea.style.height = '200px';
-                previewArea.appendChild(textArea);
+                fragment.appendChild(textArea);
+                updatePreview(fragment);
             };
             reader.readAsText(blob);
         } else if (mimeType.startsWith('video/')) {
             const video = document.createElement('video');
             video.controls = true;
             video.src = fileUrl;
-            previewArea.appendChild(video);
+            fragment.appendChild(video);
+            updatePreview(fragment);
+        } else {
+            // 其他类型，不预览，只提供下载
+            updatePreview(fragment);
+        }
+
+        function updatePreview(fragment) {
+            // 将新内容插入前，先等待CSS过渡结束后再显示，减少闪动感
+            // 这里可以直接替换内容，然后在下一个事件循环中取消hide类以渐显
+            previewArea.innerHTML = '';
+            previewArea.appendChild(fragment);
+
+            // 使用requestAnimationFrame在下一帧再移除'hide'类，保证CSS有机会渲染
+            requestAnimationFrame(() => {
+                previewArea.classList.remove('hide');
+            });
         }
     }
 </script>