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

---
 .../resources/templates/file-baogutang.html   | 111 ++++++++++++++++--
 1 file changed, 101 insertions(+), 10 deletions(-)
diff --git a/baogutang-admin/src/main/resources/templates/file-baogutang.html b/baogutang-admin/src/main/resources/templates/file-baogutang.html
index d4b3e58..995daaa 100644
--- a/baogutang-admin/src/main/resources/templates/file-baogutang.html
+++ b/baogutang-admin/src/main/resources/templates/file-baogutang.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="NIKO.png">
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="icon" type="image/png" href="NIKO.png"/>
     <title>BAOGUTANG-FILE</title>
     <style>
         body {
@@ -84,11 +84,38 @@
             margin: 30px 0;
             border-top: 1px solid #ddd;
         }
+
+        /* 类型选项按钮组样式 */
+        .type-options {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .type-option {
+            flex: 0 0 auto;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            cursor: pointer;
+            background-color: #f7f7f7;
+            font-size: 14px;
+            color: #333;
+            text-align: center;
+            user-select: none;
+        }
+        .type-option:hover {
+            background-color: #eee;
+        }
+        .type-option.active {
+            background-color: rgb(98, 210, 161);
+            color: #fff;
+            border-color: rgb(98, 210, 161);
+        }
     </style>
 </head>
 <body>
 <div class="container">
-    <h1>FILE-BAOGUTANG</h1>
+    <h1>BAOGUTANG-FILE</h1>
 
     <!-- 文件转 Base64 -->
     <div class="section">
@@ -107,12 +134,51 @@
         <h3>Base64 转文件</h3>
         <label for="base64Input">粘贴 Base64 字符串</label>
         <textarea id="base64Input" placeholder="粘贴 Base64 字符串"></textarea>
+
+        <div class="type-options" id="typeOptions">
+            <div class="type-option" data-type="auto">自动识别</div>
+            <div class="type-option" data-type="image/png">图片(PNG)</div>
+            <div class="type-option" data-type="image/jpeg">图片(JPEG)</div>
+            <div class="type-option" data-type="video/mp4">视频(MP4)</div>
+            <div class="type-option" data-type="application/pdf">PDF文件</div>
+            <div class="type-option" data-type="text/plain">文本文件</div>
+            <div class="type-option" data-type="application/octet-stream">通用文件</div>
+        </div>
+
         <button onclick="convertToFile()">转换为文件并预览</button>
         <div class="preview" id="previewArea"></div>
     </div>
 </div>
 
 <script>
+    let selectedType = 'auto';
+
+    // 页面加载时默认选中“自动识别”
+    window.addEventListener('DOMContentLoaded', () => {
+        resetTypeSelection();
+    });
+
+    function resetTypeSelection() {
+        const typeOptions = document.querySelectorAll('.type-option');
+        typeOptions.forEach(option => {
+            option.classList.remove('active');
+            if(option.dataset.type === 'auto') {
+                option.classList.add('active');
+                selectedType = 'auto';
+            }
+        });
+    }
+
+    // 点击类型选项按钮，更新选中状态
+    document.getElementById('typeOptions').addEventListener('click', (e) => {
+        if (e.target.classList.contains('type-option')) {
+            const typeOptions = document.querySelectorAll('.type-option');
+            typeOptions.forEach(option => option.classList.remove('active'));
+            e.target.classList.add('active');
+            selectedType = e.target.dataset.type;
+        }
+    });
+
     // 将文件转换为 Base64
     function convertToBase64() {
         const fileInput = document.getElementById('fileInput');
@@ -139,21 +205,41 @@
 
     // 将 Base64 转换为文件并预览
     function convertToFile() {
-        const base64Input = document.getElementById('base64Input').value;
+        const base64Input = document.getElementById('base64Input');
         const previewArea = document.getElementById('previewArea');
 
-        if (!base64Input.trim()) {
+        let inputValue = base64Input.value.trim();
+
+        if (!inputValue) {
             alert('请提供有效的 Base64 字符串！');
+            // 清空后恢复自动识别
+            resetTypeSelection();
             return;
         }
 
         // 清空预览区域
         previewArea.innerHTML = '';
 
-        // 创建文件链接
-        const [header, base64String] = base64Input.split(',');
-        const mimeType = header.match(/data:(.*);base64/)?.[1] || 'application/octet-stream';
-        const binary = atob(base64String || base64Input); // 解码 Base64
+        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 arrayBuffer = new Uint8Array(binary.length);
 
         for (let i = 0; i < binary.length; i++) {
@@ -188,6 +274,11 @@
                 previewArea.appendChild(textArea);
             };
             reader.readAsText(blob);
+        } else if (mimeType.startsWith('video/')) {
+            const video = document.createElement('video');
+            video.controls = true;
+            video.src = fileUrl;
+            previewArea.appendChild(video);
         }
     }
 </script>
