!239 update main pages

Merge pull request !239 from 陈精华/main-pages
2025-04-05 17:37:49 +08:00 · 2023-09-25 11:11:30 +00:00 · 2023-09-25 11:11:30 +00:00 · 32b0a46574
commit 32b0a46574
parent 8eab415430 94a76a72a4
10 changed files with 250 additions and 278 deletions
--- a/server/src/main/java/cn/keking/service/FileHandlerService.java
+++ b/server/src/main/java/cn/keking/service/FileHandlerService.java
@ -175,8 +175,8 @@ public class FileHandlerService implements InitializingBean {
            }
            // 添加sheet控制头
            sb.append("<script src=\"js/jquery-3.6.1.min.js\" type=\"text/javascript\"></script>");
-            sb.append("<script src=\"js/excel.header.js\" type=\"text/javascript\"></script>");
-            sb.append("<link rel=\"stylesheet\" href=\"bootstrap/css/xlsx.css\">");
+            sb.append("<script src=\"excel/excel.header.js\" type=\"text/javascript\"></script>");
+            sb.append("<link rel=\"stylesheet\" href=\"excel/excel.css\">");
        } catch (IOException e) {
            e.printStackTrace();
        }
--- a/server/src/main/java/cn/keking/utils/CaptchaUtil.java
+++ b/server/src/main/java/cn/keking/utils/CaptchaUtil.java
@ -8,16 +8,14 @@ import java.util.Random;

 public class CaptchaUtil {

-    public static final String captcha_code = "captchaCode";
-    public static final String captcha_generate_time = "captchaTime";
+    public static final String CAPTCHA_CODE = "captchaCode";
+    public static final String CAPTCHA_GENERATE_TIME = "captchaTime";

-    private static final int width = 100;// 定义图片的width
-    private static final int height = 30;// 定义图片的height
-    private static final int codeLength = 4;// 定义图片上显示验证码的个数
-    private static final int xx = 18;
-    private static final int fontHeight = 28;
-    private static final int codeY = 27;
-    private static final char[] codeSequence = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
+    private static final int WIDTH = 100;// 定义图片的width
+    private static final int HEIGHT = 30;// 定义图片的height
+    private static final int CODE_LENGTH = 4;// 定义图片上显示验证码的个数
+    private static final int FONT_HEIGHT = 28;
+    private static final char[] CODE_SEQUENCE = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', '2', '3', '4', '5', '6', '7', '8', '9'};

    /**
@ -28,23 +26,23 @@ public class CaptchaUtil {
    public static BufferedImage generateCaptchaPic(final String captchaCode) {
        Assert.notNull(captchaCode, "captchaCode must not be null");
        // 定义图像buffer
-        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
+        BufferedImage buffImg = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        Graphics gd = buffImg.getGraphics();
        Random random = new Random();
        // 将图像填充为白色
        gd.setColor(Color.WHITE);
-        gd.fillRect(0, 0, width, height);
-        Font font = new Font("Times New Roman", Font.BOLD, fontHeight);
+        gd.fillRect(0, 0, WIDTH, HEIGHT);
+        Font font = new Font("Times New Roman", Font.BOLD, FONT_HEIGHT);
        gd.setFont(font);
        // 画边框。
        gd.setColor(Color.BLACK);
-        gd.drawRect(0, 0, width - 1, height - 1);
+        gd.drawRect(0, 0, WIDTH - 1, HEIGHT - 1);

        // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。
        gd.setColor(Color.BLACK);
        for (int i = 0; i < 30; i++) {
-            int x = random.nextInt(width);
-            int y = random.nextInt(height);
+            int x = random.nextInt(WIDTH);
+            int y = random.nextInt(HEIGHT);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            gd.drawLine(x, y, x + xl, y + yl);
@ -57,7 +55,7 @@ public class CaptchaUtil {
        blue = random.nextInt(255);
        // 用随机产生的颜色将验证码绘制到图像中。
        gd.setColor(new Color(red, green, blue));
-        gd.drawString(captchaCode, 18, codeY);
+        gd.drawString(captchaCode, 18, 27);
        return buffImg;
    }

@ -68,8 +66,8 @@ public class CaptchaUtil {
    public static String generateCaptchaCode() {
        Random random = new Random();
        StringBuilder randomCode = new StringBuilder();
-        for (int i = 0; i < codeLength; i++) {
-            randomCode.append(codeSequence[random.nextInt(52)]);
+        for (int i = 0; i < CODE_LENGTH; i++) {
+            randomCode.append(CODE_SEQUENCE[random.nextInt(52)]);
        }
        return randomCode.toString();
    }
--- a/server/src/main/java/cn/keking/web/controller/FileController.java
+++ b/server/src/main/java/cn/keking/web/controller/FileController.java
@ -35,8 +35,8 @@ import java.util.List;
 import java.util.Map;
 import java.util.Objects;

-import static cn.keking.utils.CaptchaUtil.captcha_code;
-import static cn.keking.utils.CaptchaUtil.captcha_generate_time;
+import static cn.keking.utils.CaptchaUtil.CAPTCHA_CODE;
+import static cn.keking.utils.CaptchaUtil.CAPTCHA_GENERATE_TIME;

 /**
 * @author yudian-it
@ -88,7 +88,7 @@ public class FileController {
            logger.error(msg);
            return ReturnResponse.failure(msg);
        }
-        WebUtils.removeSessionAttr(request, captcha_code); //删除缓存验证码
+        WebUtils.removeSessionAttr(request, CAPTCHA_CODE); //删除缓存验证码
        return ReturnResponse.success();
    }

@ -105,16 +105,16 @@ public class FileController {
        response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", -1);
-        String captchaCode = WebUtils.getSessionAttr(request, captcha_code);
-        long captchaGenerateTime = WebUtils.getLongSessionAttr(request, captcha_generate_time);
+        String captchaCode = WebUtils.getSessionAttr(request, CAPTCHA_CODE);
+        long captchaGenerateTime = WebUtils.getLongSessionAttr(request, CAPTCHA_GENERATE_TIME);
        long timeDifference = DateUtils.calculateCurrentTimeDifference(captchaGenerateTime);

        // 验证码为空，且生成验证码超过50秒，重新生成验证码
        if (timeDifference > 50 && ObjectUtils.isEmpty(captchaCode)) {
            captchaCode = CaptchaUtil.generateCaptchaCode();
            // 更新验证码
-            WebUtils.setSessionAttr(request, captcha_code, captchaCode);
-            WebUtils.setSessionAttr(request, captcha_generate_time, DateUtils.getCurrentSecond());
+            WebUtils.setSessionAttr(request, CAPTCHA_CODE, captchaCode);
+            WebUtils.setSessionAttr(request, CAPTCHA_GENERATE_TIME, DateUtils.getCurrentSecond());
        } else {
            captchaCode = ObjectUtils.isEmpty(captchaCode) ? "wait" : captchaCode;
        }
@ -195,7 +195,7 @@ public class FileController {
            return ReturnResponse.failure("密码 or 验证码为空，删除失败！");
        }

-        String expectedPassword = ConfigConstants.getDeleteCaptcha() ? WebUtils.getSessionAttr(request, captcha_code) : ConfigConstants.getPassword();
+        String expectedPassword = ConfigConstants.getDeleteCaptcha() ? WebUtils.getSessionAttr(request, CAPTCHA_CODE) : ConfigConstants.getPassword();

        if (!password.equalsIgnoreCase(expectedPassword)) {
            logger.error("删除文件【{}】失败，密码错误！", fileName);
--- a/server/src/main/resources/static/bootstrap/css/xlsx.css
+++ b/server/src/main/resources/static/bootstrap/css/xlsx.css
--- a/server/src/main/resources/static/excel/excel.header.js
+++ b/server/src/main/resources/static/excel/excel.header.js
@ -0,0 +1,56 @@
+/**创建一个div并固定在底部，将center中的所有a标签放在改div中**/
+$("body").append($("<div>").css({"width":"100%","height":"100%px","position":"fixed","top":"0","left":"0"
+    ,"background-color":"rgba(53, 53, 53, 1)","line-height":"30px","font-size":"13px"}).attr("id","excel-header-nav"));
+$("center").css("display", "none");
+var centerChildrenA = $("center").children("a");
+if (centerChildrenA.length === 0) {
+    $("#excel-header-nav").hide();
+}
+$(centerChildrenA).each(function (a, b) {
+    // 获取a标签对应的target的name值，并设置name对应标签的样式以避免锚点标签标题被覆盖
+    var href = $(b).attr("href");
+    var name = href.substr(1);
+    $("[name=" + name + "]").css({"display":"block","padding-top":"14.01px"});
+    $(b).css({"padding":"5px","border-right":"1px solid white","color":"#f9f9f9"});
+    $("#excel-header-nav").append(b);
+});
+/**给所有的table添加class=table table-striped样式**/
+$("table").addClass("table table-striped");
+/**
+ * openoffice，只有一个 colgroup，用col子标签来描述列,liboffice 每一列都是一个colgroup 
+ * var meta = $("meta[name=generator]");
+ * LibreOffice  //OpenOffice
+ * console.log(meta[0].content);
+ */
+/**计算表头宽度----start**/
+function ______getColgroupWidth(colgroups){
+	var twidth = 0;
+	$(colgroups).each(function (i, g) {
+		var w = $(g).attr("width");
+		var s = $(g).attr("span");
+		if(null==s || undefined==s){
+			s=1;
+		}
+		twidth +=1*w*s;
+	});
+	return twidth;
+}
+$("table").each(function (a, b) {
+	var twidth = 0;
+    var tableChildrenColgroup = $(b).children("colgroup");
+    if(0==tableChildrenColgroup.length){
+    }else if(1==tableChildrenColgroup.length){
+    	var cols = tableChildrenColgroup.children("col");
+    	if(0==cols.length){
+    		twidth=______getColgroupWidth(tableChildrenColgroup);
+    	}else{
+    		$(cols).each(function (i, g) {
+        		var w = $(g).attr("width");
+        		twidth +=1*w;
+        	});
+    	}
+    }else{
+    	twidth = ______getColgroupWidth(tableChildrenColgroup);
+    }
+    $(b).css({"width":twidth});
+});
--- a/server/src/main/resources/static/favicon.ico
+++ b/server/src/main/resources/static/favicon.ico
--- a/server/src/main/resources/web/main/index.ftl
+++ b/server/src/main/resources/web/main/index.ftl
@ -3,13 +3,11 @@
 <html lang="en">
 <head>
    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>kkFileView演示首页</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="css/viewer.min.css"/>
    <link rel="stylesheet" href="css/loading.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="css/theme.css"/>
    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
@ -21,69 +19,50 @@
        .alert {
            width: 50%;
        }
-        #size{
-            float:left;
-
-        }
    </style>
-    <#--  删除吗CSS样式 -->
-    <#if deleteCaptcha >
-        <style>
-            .code{
-                position: fixed;
-                width: 300px;
-                height: 200px;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%,-50%);
-                background-color: #F0FFF0;
-                text-align: center;
-                padding: 20px;
-                z-index: 100002;
-            }
-            .close{
-                margin-top: 20px;
-            }
-            .code-input{
-                border: 1px solid #ccc;
-                border-radius: 3px;
-                width: 110px;
-                height: 40px;
-            }
-            .code-input:focus{
-                border-color: #66afe9;
-                outline: 0;
-                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-                box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
-            }
-
-        </style>
-    </#if>
 </head>

 <body>

+<#-- 删除文件验证码弹窗  -->
+<#if deleteCaptcha >
+<div id="deleteCaptchaModal" class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-sm" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">删除文件</h4>
+            </div>
+            <br>
+            <input type="text" id="deleteCaptchaFileName" style="display: none">
+            <div class="modal-body input-group">
+                <span style="display: table-cell; vertical-align: middle;">
+                    <img id="deleteCaptchaImg" alt="deleteCaptchaImg" src="">
+                    &nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                <input type="text" id="deleteCaptchaText" class="form-control" placeholder="请输入验证码">
+            </div>
+            <div class="modal-footer" style="text-align: center">
+                <button type="button" id="deleteCaptchaConfirmBtn" class="btn btn-danger">确认删除</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+            </div>
+        </div>
+    </div>
+</div>
+</#if>
+
 <!-- Fixed navbar -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                    aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li class="active"><a href="./index">首页</a></li>
-                <li><a href="./integrated">接入说明</a></li>
-                <li><a href="./record">版本发布记录</a></li>
-                <li><a href="./sponsor">赞助开源</a></li>
-            </ul>
-        </div>
+        <ul class="nav navbar-nav">
+            <li class="active"><a href="./index">首页</a></li>
+            <li><a href="./integrated">接入说明</a></li>
+            <li><a href="./record">版本发布记录</a></li>
+            <li><a href="./sponsor">赞助开源</a></li>
+        </ul>
    </div>
 </nav>

@ -148,10 +127,7 @@
            </form>
        </div>
    </div>
-    <#--  删除吗弹窗  -->
-    <#if deleteCaptcha >
-        <div id="codeContent">  </div>
-    </#if>
+
    <#--  预览测试  -->
    <div class="panel panel-success">
        <div class="panel-heading">
@ -160,7 +136,8 @@
        <div class="panel-body">
            <#if fileUploadDisable == false>
                <form enctype="multipart/form-data" id="fileUpload">
-                    <input type="file" id="size" name="file"/> <input class="btn btn-success" type="button" id="btnSubmit" value=" 上 传 "/>
+                    <input type="file" id="file" name="file" style="float: left; margin: 0 auto; font-size:22px;" placeholder="请选择文件"/>
+                    <input type="button" id="fileUploadBtn" class="btn btn-success" value=" 上 传 "/>
                </form>
            </#if>
            <table id="table" data-pagination="true"></table>
@ -168,7 +145,7 @@
    </div>
 </div>

-<div class="loading_container">
+<div class="loading_container" style="position: fixed;">
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
@ -199,97 +176,46 @@
 </#if>
 <script>
    <#if deleteCaptcha >
-    function deleteFile(fileName) {
-        var codename =`<div class="code"><h4>请输入下面删除码!</h4><div><img id="verImg" width="130px" height="48px" src="/deleteFile/captcha"></div><form><input type="type" oninput="if(value.length>5)value=value.slice(0,5);" class="code-input"  id="_code" placeholder="请输入验证码"><button id="deleteFile1" type="button" class="btn btn-success">提交</button></form><button id="close" type="button" class="btn btn-danger">关闭</button></div>`;
-        $('#codeContent').html(codename);
-        var code = document.querySelector('.code');
-        var closeBtn = document.getElementById("close");
-        closeBtn.addEventListener('click', hidePopup);
-        function hidePopup(){
-            code.style.display = 'none';
-        }
-        var closedelete = document.getElementById("deleteFile1");
-        closedelete.addEventListener('click', deleteFile1);
-        function deleteFile1(){
-            var password = $("#_code").val();
-            $.ajax({
-                url: '${baseUrl}deleteFile?fileName=' + fileName +'&password='+password,
-                success: function (data) {
-                    if ("删除文件失败，密码错误！" === data.msg) {
-                        alert(data.msg);
-                    } else {
-                        //刷新验证码
-                        document.getElementById('verImg').click();
-                        $('#table').bootstrapTable('refresh', {});
-                        code.style.display = 'none';
-                    }
-                },
-                error: function (data) {
-                    return false;
+        $("#deleteCaptchaImg").click(function() {
+            $("#deleteCaptchaImg").attr("src","${baseUrl}deleteFile/captcha?timestamp=" + new Date().getTime());
+        });
+        $("#deleteCaptchaConfirmBtn").click(function() {
+            var fileName = $("#deleteCaptchaFileName").val();
+            var deleteCaptchaText = $("#deleteCaptchaText").val();
+            $.get('${baseUrl}deleteFile?fileName=' + fileName +'&password=' + deleteCaptchaText, function(data){
+                if ("删除文件失败，密码错误！" === data.msg) {
+                    alert(data.msg);
+                } else {
+                    $('#table').bootstrapTable("refresh", {});
+                    $("#deleteCaptchaText").val("");
+                    $("#deleteCaptchaModal").modal("hide");
                }
-            })
+            });
+        });
+        function deleteFile(fileName) {
+            $("#deleteCaptchaImg").click();
+            $("#deleteCaptchaFileName").val(fileName);
+            $("#deleteCaptchaText").val("");
+            $("#deleteCaptchaModal").modal("show");
        }
-        var windowUrl = window.URL || window.webkitURL; //处理浏览器兼容性
-        document.getElementById('verImg').onclick = function(e){
-            //1、创建ajax对象
-            var xhr = null;
-            try{
-                xhr = new XMLHttpRequest();
-            }catch(error){
-                xhr = new ActiveXObject("Microsoft.XMLHTTP");
-            }
-            //2、调用open
-            xhr.open("get", "/deleteFile/captcha", true);
-            xhr.responseType = "blob";
-            //3、调用send
-            xhr.send();
-            //4、等待数据响应
-            xhr.onreadystatechange = function(){
-                if(xhr.readyState == 4){
-                    //判断本次下载的状态码都是多少
-                    if(xhr.status == 200){
-                        var blob = this.response;
-                        $("#verImg").attr("src",windowUrl.createObjectURL(blob));
-                        //$('#verImg').attr('src', xhr.responseText);
-
-                        //  alert(windowUrl.createObjectURL(blob));
-                    }else{
-                        alert("Error:" + xhr.status);
-                    }
-                }
-            }
-        }
-
-    }
    <#else>
-    function deleteFile(fileName,password) {
-        if(window.confirm('你确定要删除文件吗？')){
-            <#if deleteCaptcha >
-            password = prompt("请输入获取的验证码:");
-            <#else>
-            password = prompt("请输入默认密码:123456");
-            </#if>
-            $.ajax({
-                url: '${baseUrl}deleteFile?fileName=' + fileName +'&password='+password,
-                success: function (data) {
-                    // console.log(data);
-                    // 删除完成，刷新table
-                    if ("删除文件失败，密码错误！" === data.msg) {
-                        alert(data.msg);
-                    } else {
-
-                        $('#table').bootstrapTable('refresh', {});
+        function deleteFile(fileName) {
+            if (window.confirm('你确定要删除文件吗？')) {
+                password = prompt("请输入默认密码:123456");
+                $.ajax({
+                    url: '${baseUrl}deleteFile?fileName=' + fileName +'&password='+password,
+                    success: function (data) {
+                        if ("删除文件失败，密码错误！" === data.msg) {
+                            alert(data.msg);
+                        } else {
+                            $("#table").bootstrapTable("refresh", {});
+                        }
                    }
-                },
-                error: function (data) {
-                    return false;
-                }
-            })
-        }else{
-            return false;
+                });
+            } else {
+                return false;
+            }
        }
-
-    }
    </#if>

    function showLoadingDiv() {
@ -333,7 +259,9 @@
                title: '文件名'
            }, {
                field: 'action',
-                title: '操作'
+                title: '操作',
+                align: 'center',
+                width: 160
            }]
        }).on('pre-body.bs.table', function (e, data) {
            // 每个data添加一列用来操作
@ -361,13 +289,9 @@
            window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(b64Encoded));
        });

-        $('#fileSelectBtn').on('click', function () {
-            $('#fileSelect').click();
-        });
-
-        $("#btnSubmit").click(function () {
-            var filepath = $("#size").val();
-            if(!checkFileSize(filepath)){
+        $("#fileUploadBtn").click(function () {
+            var filepath = $("#file").val();
+            if(!checkFileSize(filepath)) {
                return false;
            }
            showLoadingDiv();
@ -408,12 +332,12 @@
                img.src = filepath;
                filesize = img.fileSize;
            } else {
-                filesize = $("#size")[0].files[0].size; //byte
+                filesize = $("#file")[0].files[0].size; //byte
            }
            if (filesize > 0 && filesize > maxsize) {
                alert(errMsg);
                return false;
-            } else if (filesize == -1) {
+            } else if (filesize === -1) {
                alert(tipMsg);
                return false;
            }
--- a/server/src/main/resources/web/main/integrated.ftl
+++ b/server/src/main/resources/web/main/integrated.ftl
@ -3,50 +3,28 @@
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>接入说明</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="css/viewer.min.css"/>
-    <link rel="stylesheet" href="css/loading.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"/>
-    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="css/theme.css"/>
    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
-    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
-    <script type="text/javascript" src="js/base64.min.js"></script>
-    <style>
-        .alert {
-            width: 50%;
-        }
-    </style>
 </head>

 <body>

-<!-- Fixed navbar -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                    aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li><a href="./index">首页</a></li>
-                <li class="active"><a href="./integrated">接入说明</a></li>
-                <li><a href="./record">版本发布记录</a></li>
-                <li><a href="./sponsor">赞助开源</a></li>
-            </ul>
-        </div>
+        <ul class="nav navbar-nav">
+            <li><a href="./index">首页</a></li>
+            <li class="active"><a href="./integrated">接入说明</a></li>
+            <li><a href="./record">版本发布记录</a></li>
+            <li><a href="./sponsor">赞助开源</a></li>
+        </ul>
    </div>
 </nav>

--- a/server/src/main/resources/web/main/record.ftl
+++ b/server/src/main/resources/web/main/record.ftl
@ -3,41 +3,28 @@
 <html lang="en">
 <head>
    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>kkFileView版本记录</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="css/viewer.min.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/theme.css"/>
    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
-    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
 </head>

 <body>

-<!-- Fixed navbar -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                    aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li><a href="./index">首页</a></li>
-                <li><a href="./integrated">接入说明</a></li>
-                <li class="active"><a href="./record">版本发布记录</a></li>
-                <li><a href="./sponsor">赞助开源</a></li>
-            </ul>
-        </div>
+        <ul class="nav navbar-nav">
+            <li><a href="./index">首页</a></li>
+            <li><a href="./integrated">接入说明</a></li>
+            <li class="active"><a href="./record">版本发布记录</a></li>
+            <li><a href="./sponsor">赞助开源</a></li>
+        </ul>
    </div>
 </nav>

@ -67,6 +54,7 @@
                13.其他功能优化及已知问题修复 <br>
            </div>
        </div>
+    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">2023年07月04日，v4.3.0版本</h3>
@ -95,9 +83,10 @@
                20. 其他功能优化及已知问题修复 <br>
            </div>
        </div>
+    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2023年04月18日，v4.2.1 版本</h3>
+            <h3 class="panel-title">2023年04月18日，v4.2.1版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -107,7 +96,7 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2023年04月13日，v4.2.0 版本</h3>
+            <h3 class="panel-title">2023年04月13日，v4.2.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -148,7 +137,7 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2022年12月14日，v4.1.0 版本</h3>
+            <h3 class="panel-title">2022年12月14日，v4.1.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -167,7 +156,7 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2021年7月6日，v4.0.0 版本</h3>
+            <h3 class="panel-title">2021年7月6日，v4.0.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -184,12 +173,11 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2021年6月17日，v3.6.0版本</h3>
+            <h3 class="panel-title">2021年06月17日，v3.6.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
-                ** ofd 类型文件支持版本，本次版本重要功能均由社区开发贡献，感谢 @gaoxingzaq、@zhangxiaoxiao9527 的代码贡献
-                **<br>
+                ** ofd 类型文件支持版本，本次版本重要功能均由社区开发贡献，感谢 @gaoxingzaq、@zhangxiaoxiao9527 的代码贡献 ** <br>
                1. 新增 ofd 类型文件预览支持，ofd 是国产的类似 pdf 格式的文件<br>
                2. 新增了 ffmpeg 视频文件转码预览支持，打开转码功能后，理论上支持所有主流视频的预览，如 rm、rmvb、flv 等<br>
                3. 美化了 ppt、pptx 类型文件预览效果，比之前版本好看太多<br>
@ -199,7 +187,43 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2021年1月28日</h3>
+            <h3 class="panel-title">2021年04月06日，v3.5.1版本</h3>
+        </div>
+        <div class="panel-body">
+            <div>
+                3.5.1版本发布，修复已知问题<br>
+                1. 修复 tif、tiff 文件预览初始内存太小预览失败的问题<br>
+                2. 修复PDF预览模式跨域问题<br>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-success">
+        <div class="panel-heading">
+            <h3 class="panel-title">2021年03月17日，v3.5.0版本</h3>
+        </div>
+        <div class="panel-body">
+            <div>
+                2021 一季度 v3.5 性能升级版发布<br>
+                1.  新增 office-plugin 转换进程、任务超时可配置<br>
+                2.  更新 spring-boot 到最新的 v2.4.2 版本<br>
+                3.  新增 tiff 、tif 图像文件格式预览支持<br>
+                4.  新增依赖 highlightjs 代码文件预览高亮支持<br>
+                5.  新增 wps 文档预览支持<br>
+                6.  新增 stars 增长趋势图<br>
+                7.  新增启动完成，打印启动耗时、演示页访问地址<br>
+                8.  新增 kkFIleView 的 banner 信息<br>
+                9.  优化启动脚本<br>
+                10. 优化项目结构、优化 maven 结构<br>
+                11. 移除多余的 repositories 配置，移除针对 tomcat 的配置<br>
+                12. 优化下载文件 io 操作<br>
+                13. 修复：优化项目目录结构之后，windows下启动报错“找不到office组件”<br>
+                14. 修复：jodd.io.NetUtil.downloadFile下载大于16M文件报错问题<br>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-success">
+        <div class="panel-heading">
+            <h3 class="panel-title">2021年1月28日，v3.3.1版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -228,7 +252,7 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2020年12月27日</h3>
+            <h3 class="panel-title">2020年12月27日，v3.3.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -254,7 +278,21 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2020年05月20日</h3>
+            <h3 class="panel-title">2020年08月12日，v2.2.1版本</h3>
+        </div>
+        <div class="panel-body">
+            <div>
+                1. 支持纯文本预览原样格式输出<br>
+                2. 修复PDF预览出现文字缺失异常，升级pdf.js组件<br>
+                3. docker镜像底层使用ubuntu，镜像体积更小、构建更快<br>
+                4. 预览接口同时支持get和post请求<br>
+                5. 修复上传到demo中的压缩文件预览异常<br>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-success">
+        <div class="panel-heading">
+            <h3 class="panel-title">2020年05月20日，v2.2.0版本</h3>
        </div>
        <div class="panel-body">
            <div>
@ -279,7 +317,7 @@
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
-            <h3 class="panel-title">2019年06月18日</h3>
+            <h3 class="panel-title">2019年06月20日</h3>
        </div>
        <div class="panel-body">
            <div>
@ -359,6 +397,5 @@
        </div>
    </div>
 </div>
-</div>
 </body>
 </html>
--- a/server/src/main/resources/web/main/sponsor.ftl
+++ b/server/src/main/resources/web/main/sponsor.ftl
@ -3,25 +3,13 @@
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>赞助开源</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="css/viewer.min.css"/>
-    <link rel="stylesheet" href="css/loading.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"/>
-    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="css/theme.css"/>
    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
-    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
-    <script type="text/javascript" src="js/base64.min.js"></script>
-    <style>
-        .alert {
-            width: 50%;
-        }
-    </style>
 </head>

 <body>
@ -30,23 +18,14 @@
 <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
-                    aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
            <a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li><a href="./index">首页</a></li>
-                <li><a href="./integrated">接入说明</a></li>
-                <li><a href="./record">版本发布记录</a></li>
-                <li class="active"><a href="./sponsor">赞助开源</a></li>
-            </ul>
-        </div>
+        <ul class="nav navbar-nav">
+            <li><a href="./index">首页</a></li>
+            <li><a href="./integrated">接入说明</a></li>
+            <li><a href="./record">版本发布记录</a></li>
+            <li class="active"><a href="./sponsor">赞助开源</a></li>
+        </ul>
    </div>
 </nav>

@ -54,16 +33,16 @@
    <#--  接入说明  -->
    <div class="page-header">
        <h1>赞助开源</h1>
-        <ur style="font-size: 16px;">
+        <ul style="font-size: 16px;">
            <li>kkFileView 开源至今已 6 个年头，积累 <a target="_blank" href="https://gitee.com/kekingcn/file-online-preview">Gitee(16.9K)</a>、<a target="_blank" href="https://github.com/kekingcn/kkFileView">GitHub(8k)</a> 多的 star</li>
            <li>kkFileView 被广泛应用于金融、教育、银行、政务、计算机等行业, 不完全统计有 200+ 企业在使用</li>
            <li>kkFileView 每年的文档站点、演示站点的服务器、CDN 资源, 至少在 1000元以上</li>
            <li>kkFileView 是一款完全开源的在线预览项目，如果你觉得 kkFileView 对你有帮助，可以通过下面的方式来赞助我们，谢谢！</li>
-        </ur>
+        </ul>
    </div>
    <div>
-        <div style="font-size: 16px;">
-            <img width="400px" height="550px" src="/images/alipay.jpeg"/> &nbsp;&nbsp;&nbsp;<img width="400px" height="550px" src="/images/wxpay.jpeg"/>
+        <div style="font-size: 16px; text-align: center;">
+            <img width="400px" height="550px" alt="alipay" src="../images/alipay.jpeg"/> &nbsp;&nbsp;&nbsp;<img width="400px" height="550px" alt="wxpay" src="../images/wxpay.jpeg"/>
        </div>
    </div>
    <div>