5.0版本 发布 美化首页 修复压缩包 秘钥问题 修复分页问题

server/src/main/resources/static/js/fenye.js

@@ -19,281 +19,236 @@
     return str.replace(/(?:\r\n|\r|\n){2,}/g, '\n');
 }
 
-      function DHTMLpagenation(content,kkkeyword,Length,page,txt)
+// 重命名构造函数为 Pagination 避免递归
-        {
+function Pagination(content, kkkeyword, Length, page, txt) {
     if (page == 0) {
         page = 1;
     }
-            this.content=content; // 内容
+    
-            this.contentLength=s.length; // 内容长度
+    // 存储实例属性
-            this.pageSizeCount; // 总页数
+    this.content = content;
-            this.perpageLength= Length; //default perpage byte length.
+    this.contentLength = content.length;
-            this.currentPage= page; // 起始页为第1页
+    this.pageSizeCount = 0;
-            this.regularExp=/\d+/; // 建立正则表达式，匹配数字型字符串。
+    this.perpageLength = Length;
-            this.divDisplayContent;
+    this.currentPage = page;
-            this.contentStyle=null;
+    this.kkkeyword = kkkeyword;
+    this.txt = txt;
+    this.regularExp = /\d+/;
     this.strDisplayContent = "";
-            this.divDisplayPagenation;
     this.strDisplayPagenation = "";
 
-            // 把第二个参数赋给perpageLength;
+    // 获取或创建分页容器
-            arguments.length==2 ? perpageLength = arguments[1] : '';
+    this.divDisplayPagenation = document.getElementById("divPagenation");
-
+    if (!this.divDisplayPagenation) {
-            try {
+        this.divDisplayPagenation = document.createElement("DIV");
-                //创建要显示的DIV
+        this.divDisplayPagenation.id = "divPagenation";
-                divExecuteTime=document.createElement("DIV");
+        document.body.appendChild(this.divDisplayPagenation);
-                document.body.appendChild(divExecuteTime);
-            }
-            catch(e)
-            {
     }
 
-            // 得到divPagenation容器。
+    // 获取或创建内容容器
-            if(document.getElementById("divPagenation"))
+    this.divDisplayContent = document.getElementById("divContent");
-            {
+    if (!this.divDisplayContent) {
-                divDisplayPagenation=document.getElementById("divPagenation");
+        this.divDisplayContent = document.createElement("DIV");
-            }
+        this.divDisplayContent.id = "divContent";
-            else
+        document.body.appendChild(this.divDisplayContent);
-            {
-                try
-                {
-                    //创建分页信息
-                    divDisplayPagenation=document.createElement("DIV");
-                    divDisplayPagenation.id="divPagenation";
-                    document.body.appendChild(divDisplayPagenation);
-                }
-                catch(e)
-                {
-                    return false;
-                }
     }
 
-            // 得到divContent容器
+    // 初始化
-            if(document.getElementById("divContent"))
+    this.initialize();
-            {
-                divDisplayContent=document.getElementById("divContent");
 }
-            else
-            {
-                try
-                {
-                    //创建每页显示内容的消息的DIV
-                    divDisplayContent=document.createElement("DIV");
-                    divDisplayContent.id="divContent";
-                    document.body.appendChild(divDisplayContent);
-                }
-                catch(e)
-                {
-                    return false;
-                }
-            }
-            DHTMLpagenation.initialize();
-            return this;
 
+// 初始化分页
+Pagination.prototype.initialize = function () {
+    this.divDisplayContent.className = "divContent";
+
+    if (this.contentLength <= this.perpageLength) {
+        this.displayAllContent();
+        return;
+    }
+
+    this.pageSizeCount = Math.ceil((this.contentLength / this.perpageLength));
+    this.goto(this.currentPage);
 };
 
-        //初始化分页；
+// 显示所有内容（不分页）
-        //包括把加入CSS，检查是否需要分页
+Pagination.prototype.displayAllContent = function () {
-        DHTMLpagenation.initialize=function()
+    var content = this.content;
-        {
-            divDisplayContent.className= contentStyle != null ? contentStyle : "divContent";
     
-            if(contentLength<=perpageLength)
+    if (this.txt == "code") {
-            {
-                if(txt =="code"){
         content = htmlttt(content);
-                strDisplayContent = '<pre><code>'+content+'</code></pre>';
+        this.strDisplayContent = '<pre><code>' + content + '</code></pre>';
-                divDisplayContent.innerHTML=strDisplayContent;
+        this.divDisplayContent.innerHTML = this.strDisplayContent;
-				if (!!window.ActiveXObject || "ActiveXObject" in window){
+        if (!(!!window.ActiveXObject || "ActiveXObject" in window)) {
-           }else{
+            if (typeof hljs !== 'undefined') {
-            	hljs.highlightAll(kkkeyword);
+                hljs.highlightAll(this.kkkeyword);
             }
-                }else if(txt =="js"){
+        }
+    } else if (this.txt == "js") {
         content = htmlttt(content);
-                 var result = js_beautify(content, 1, "\t");
+        var result = '';
-                strDisplayContent = '<pre><code class="language-js">'+result+'</code></pre>';
+        if (typeof js_beautify !== 'undefined') {
-                divDisplayContent.innerHTML=strDisplayContent;
+            result = js_beautify(content, 1, "\t");
-				if (!!window.ActiveXObject || "ActiveXObject" in window){
         } else {
-            	hljs.highlightAll(kkkeyword);
+            result = content;
+        }
+        this.strDisplayContent = '<pre><code class="language-js">' + result + '</code></pre>';
+        this.divDisplayContent.innerHTML = this.strDisplayContent;
+        if (!(!!window.ActiveXObject || "ActiveXObject" in window)) {
+            if (typeof hljs !== 'undefined') {
+                hljs.highlightAll(this.kkkeyword);
+            }
         }
     } else {
         content = removeExtraNewlines(content);
-                    let list = content.split('\n') // 换行符分割
+        let list = content.split('\n');
         for (let i = 0; i < list.length; i++) {
-                        list[i] =  i + "." + list[i] // 加序号
+            list[i] = i + "." + list[i];
         }
-                    let txt = list.join('\n'); 
+        let txtContent = list.join('\n');
-             if (kkkeyword!==""&&kkkeyword!==null&&kkkeyword!=="null") {
+        if (this.kkkeyword !== "" && this.kkkeyword !== null && this.kkkeyword !== "null") {
-            	 txt = txt.split(kkkeyword).join("<span class='highlight'>" + kkkeyword + "</span>");
+            txtContent = txtContent.split(this.kkkeyword).join("<span class='highlight'>" + this.kkkeyword + "</span>");
         }
-                divDisplayContent.innerHTML=txt;    
+        this.divDisplayContent.innerHTML = txtContent;
     }
-                return null;
-            }
-
-            pageSizeCount=Math.ceil((contentLength/perpageLength));
-
-            DHTMLpagenation.goto(currentPage);
-
-            DHTMLpagenation.displayContent();
 };
 
 // 显示分页栏
-        DHTMLpagenation.displayPage=function()
+Pagination.prototype.displayPage = function () {
-        {
+    this.strDisplayPagenation = "";
-            strDisplayPagenation="";
-            if(currentPage && currentPage !=1)
-            {
     
-             strDisplayPagenation+='<button  onclick="DHTMLpagenation.previous()">上一页 </button>';
+    if (this.currentPage && this.currentPage != 1) {
-            }
+        this.strDisplayPagenation += '<button onclick="window.currentPagination.previous()">上一页</button> ';
-            else
+    } else {
-            {
+        this.strDisplayPagenation += "上一页 ";
-                strDisplayPagenation+="上一页";
     }
 
-            if(currentPage && currentPage!=pageSizeCount)
+    if (this.currentPage && this.currentPage != this.pageSizeCount) {
-            {
+        this.strDisplayPagenation += '<button onclick="window.currentPagination.next()">下一页</button> ';
-             strDisplayPagenation+='<button  onclick="DHTMLpagenation.next()">下一页 </button>';
+        this.strDisplayPagenation += "<input type='number' value='" + this.currentPage + "' id='yemaPerpageLength' style='width:70px' /><button type='button' onclick='window.currentPagination.tiaozhuan()'>跳转</button> ";
+    } else {
+        this.strDisplayPagenation += "下一页 ";
+    }
     
-             strDisplayPagenation+="<input type='number' value='"+currentPage+"' id='yemaPerpageLength' style='width:70px' /><button type='button' onclick='DHTMLpagenation.tiaozhuan()'/> 跳转</button> ";
+    if (isEmptyString(this.currentPage)) {
+        this.currentPage = 1;
     }
-            else
+    
-            {
+    this.strDisplayPagenation += "第" + this.currentPage + "/" + this.pageSizeCount + "页。<br>每页 " + this.perpageLength + " 字符，调整字符数：<input type='number' value='" + this.perpageLength + "' id='ctlPerpageLength' style='width:70px' /><button onclick='window.currentPagination.change()'>确定</button>";
-               strDisplayPagenation+="下一页";
+    this.divDisplayPagenation.innerHTML = this.strDisplayPagenation;
-            }
-            if (isEmptyString(currentPage)) {
-             currentPage =1;
-             }
-           strDisplayPagenation+=+currentPage+"/" + pageSizeCount + "页。<br>每页 " + perpageLength + " 字符，调整字符数：<input type='number' value='"+perpageLength+"' id='ctlPerpageLength'  style='width:70px'  /><button onclick='DHTMLpagenation.change()' /> 确定</button>";
-          divDisplayPagenation.innerHTML=strDisplayPagenation;
 };
 
 // 上一页
-        DHTMLpagenation.previous=function()
+Pagination.prototype.previous = function () {
-        {
+    this.goto(this.currentPage - 1);
-            DHTMLpagenation.goto(currentPage-1);
 };
 
 // 下一页
-        DHTMLpagenation.next=function()
+Pagination.prototype.next = function () {
-        {
+    this.goto(this.currentPage + 1);
-
-            DHTMLpagenation.goto(currentPage+1);
 };
 
 // 跳转至某一页
-        DHTMLpagenation.goto=function(iCurrentPage)
+Pagination.prototype.goto = function (iCurrentPage) {
-        {
     if (isEmptyString(iCurrentPage)) {
         iCurrentPage = 1;
     }
-            if(regularExp.test(iCurrentPage))
+    
-            {
+    if (this.regularExp.test(iCurrentPage)) {
-                currentPage=iCurrentPage;
+        this.currentPage = parseInt(iCurrentPage);
-                //获取当前的内容 里面包含 ❈
+        
-                var currentContent = s.substr((currentPage-1)*perpageLength,perpageLength);
+        // 获取当前页的内容
-                //当前页是否有 ❈ 获取最后一个 ❈ 的位置
+        var startPos = (this.currentPage - 1) * this.perpageLength;
+        var currentContent = this.content.substr(startPos, this.perpageLength);
+        
+        // 处理特殊分隔符（如果有）
         var indexOf = currentContent.indexOf("❈");
-                if(indexOf >= 0)
+        if (indexOf >= 0) {
-                {
+            var beginToEndContent = this.content.substr(0, this.currentPage * this.perpageLength);
-                      //获取从开始位置到当前页位置的内容
-                      var beginToEndContent = s.substr(0,currentPage*perpageLength);
-
-                      //获取开始到当前页位置的内容 中的 * 的最后的下标
             var reCount = beginToEndContent.split("❈").length - 1;
-
             var contentArray = currentContent.split("❈");
-
+            currentContent = this.replaceStr(contentArray, reCount);
-                      currentContent = replaceStr(contentArray,reCount,matchContent);
-
         }
 
-                strDisplayContent=currentContent;
+        this.strDisplayContent = currentContent;
-            }
+        this.displayPage();
-            else
+        this.displayContent();
-            {
+    } else {
         alert("页面参数错误");
     }
-            DHTMLpagenation.displayPage();
-            DHTMLpagenation.displayContent();
 };
+
 // 显示当前页内容
-        DHTMLpagenation.displayContent=function()
+Pagination.prototype.displayContent = function () {
-        {
+    var strDisplayContent = this.strDisplayContent;
-           if(txt =="code"){
+    
+    if (this.txt == "code") {
         strDisplayContent = htmlttt(strDisplayContent);
         strDisplayContent = "<pre><code>" + strDisplayContent + "</code></pre>";
-            divDisplayContent.innerHTML=strDisplayContent;
+        this.divDisplayContent.innerHTML = strDisplayContent;
-            	if (!!window.ActiveXObject || "ActiveXObject" in window){
+        if (!(!!window.ActiveXObject || "ActiveXObject" in window)) {
-            }else{
+            if (typeof hljs !== 'undefined') {
-			hljs.highlightAll(kkkeyword);
+                hljs.highlightAll(this.kkkeyword);
             }
-                }else if(txt =="js"){
+        }
+    } else if (this.txt == "js") {
         strDisplayContent = htmlttt(strDisplayContent);
-                 var result = js_beautify(strDisplayContent, 1, "\t");
+        var result = '';
+        if (typeof js_beautify !== 'undefined') {
+            result = js_beautify(strDisplayContent, 1, "\t");
+        } else {
+            result = strDisplayContent;
+        }
         strDisplayContent = '<pre><code class="language-js">' + result + '</code></pre>';
-            divDisplayContent.innerHTML=strDisplayContent;
+        this.divDisplayContent.innerHTML = strDisplayContent;
-				if (!!window.ActiveXObject || "ActiveXObject" in window){
+        if (!(!!window.ActiveXObject || "ActiveXObject" in window)) {
-           }else{
+            if (typeof hljs !== 'undefined') {
-            	hljs.highlightAll(kkkeyword);
+                hljs.highlightAll(this.kkkeyword);
+            }
         }
     } else {
-             if (kkkeyword!==""&&kkkeyword!==null&&kkkeyword!=="null") {
+        if (this.kkkeyword !== "" && this.kkkeyword !== null && this.kkkeyword !== "null") {
- 
+            strDisplayContent = strDisplayContent.split(this.kkkeyword).join("<span class='highlight'>" + this.kkkeyword + "</span>");
-            	strDisplayContent = strDisplayContent.split(kkkeyword).join("<span class='highlight'>" + kkkeyword + "</span>");
         }
-              divDisplayContent.innerHTML=strDisplayContent;
+        this.divDisplayContent.innerHTML = strDisplayContent;
     }
 };
+
 // 改变每页的字节数
-        DHTMLpagenation.change=function()
+Pagination.prototype.change = function () {
-        {
-
     var iPerpageLength = document.getElementById("ctlPerpageLength").value;
-            if(regularExp.test(iPerpageLength))
+    if (this.regularExp.test(iPerpageLength)) {
-            {
+        // 创建新的分页实例
-
+        window.currentPagination = new Pagination(
-                DHTMLpagenation(s,iPerpageLength);
+            this.content, 
-            }
+            this.kkkeyword, 
-            else
+            parseInt(iPerpageLength), 
-            {
+            this.currentPage, 
+            this.txt
+        );
+    } else {
         alert("请输入数字");
     }
 };
-           //改变页码
+
-        DHTMLpagenation.tiaozhuan=function()
+// 跳转到指定页
-        {
+Pagination.prototype.tiaozhuan = function () {
     var yema = document.getElementById("yemaPerpageLength").value;
-            if(regularExp.test(yema))
+    if (this.regularExp.test(yema)) {
-            {
+        this.goto(yema);
-             DHTMLpagenation.goto(yema);
+    } else {
-            }
-            else
-            {
         alert("请输入数字");
     }
 };
 
-        /*  currentArray:当前页以 * 分割后的数组
+// 替换字符串函数
-            replaceCount:从开始内容到当前页的内容 * 的个数
+Pagination.prototype.replaceStr = function (currentArray, replaceCount) {
-            matchArray ： img标签的匹配的内容
+    // 简化版，直接拼接数组元素
-        */
+    return currentArray.join('');
-        function replaceStr(currentArray,replaceCount,matchArray)
+};
-        {
-            var result = "";
-            for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
-            {
 
-               var temp = (matchArray[j] + currentArray[i]);
+// 全局函数（保持向后兼容）
-
+function DHTMLpagenation(content, kkkeyword, Length, page, txt) {
-               result = temp + result;
+    // 创建 Pagination 实例
-
+    window.currentPagination = new Pagination(content, kkkeyword, Length, page, txt);
-               j--;
+    return window.currentPagination;
-            }
-
-            result = currentArray[0] + result ;
-
-            return result;
 }

server/src/main/resources/web/compress.ftl

@@ -63,9 +63,9 @@ var keyword = getQueryParam(currentUrl, 'watermarkTxt');
         if (!treeNode.isParent) {
             var path = '${baseUrl}'+treeNode.id+"?kkCompressfileKey="+'${fileTree}'+"&kkCompressfilepath="+encodeURIComponent(treeNode.id)+"&fullfilename="+encodeURIComponent(treeNode.name);
            if (isNotEmpty(keyword)){
-             location.href = "${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode(path))+"&watermarkTxt="+keyword;
+             location.href = "${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode(path))+"&watermarkTxt="+keyword+ "&key=${kkkey}";
            }else{
-             location.href = "${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode(path));}
+             location.href = "${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode(path))+ "&key=${kkkey}";}
          
         }
     }

server/src/main/resources/web/main/index.ftl

@@ -29,44 +29,63 @@
             transform: translate(-50%, -50%);
             -ms-transform: translate(-50%, -50%);
         }
+        
         /* 分页样式调整 */
         .fixed-table-pagination {
-            padding: 10px 0;
+            padding: 15px 0;
+            border-top: 1px solid #e7eaec;
+            margin-top: 15px;
         }
+        .pagination > li > a,
+        .pagination > li > span {
+            margin: 0 3px;
+            border-radius: 3px;
+            color: #337ab7;
+        }
+        .pagination > .active > a,
+        .pagination > .active > a:hover,
+        .pagination > .active > span,
+        .pagination > .active > span:hover {
+            background-color: #337ab7;
+            border-color: #337ab7;
+        }
+        
         /* 目录导航样式 */
         .breadcrumb {
             background-color: #f8f9fa;
-            padding: 8px 15px;
+            padding: 10px 20px;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
-        }
+            border-radius: 4px;
-        .breadcrumb a {
+            border: 1px solid #e7eaec;
-            color: #0275d8;
-            text-decoration: none;
-        }
-        .breadcrumb a:hover {
-            text-decoration: underline;
         }
         .breadcrumb > li + li:before {
-            content: ">\00a0";
+            content: ">";
-            padding: 0 5px;
+            padding: 0 8px;
             color: #6c757d;
         }
         .file-icon {
-            margin-right: 5px;
+            margin-right: 8px;
+            font-size: 14px;
         }
+        
+        /* 表格行样式 */
         .folder-row {
             background-color: #f8f9fa;
-            font-weight: bold;
+            font-weight: 500;
         }
-        .file-row {
+        .folder-row:hover {
-            background-color: #ffffff;
+            background-color: #e9ecef;
         }
-        /* 修正URL链接颜色为黑色 */
+        .file-row:hover {
+            background-color: #f5f5f5;
+        }
+        
+        /* 修正URL链接颜色 */
         .breadcrumb a, 
         .breadcrumb a:hover {
             color: #333 !important;
+            text-decoration: none;
         }
-        /* 修正文件链接颜色 */
         #table a:not(.btn) {
             color: #333 !important;
             text-decoration: none;
@@ -75,13 +94,166 @@
             color: #0275d8 !important;
             text-decoration: underline;
         }
-        /* 按钮链接保持原有颜色 */
+        
+        /* 按钮样式优化 */
         .btn {
-            color: #fff !important;
+            border-radius: 3px;
+            padding: 5px 12px;
         }
-        .btn.btn-default {
+        .btn-sm {
-            color: #333 !important;
+            padding: 3px 8px;
+            font-size: 12px;
         }
+        .btn-success {
+            background-color: #5cb85c;
+            border-color: #4cae4c;
+        }
+        .btn-success:hover {
+            background-color: #449d44;
+            border-color: #398439;
+        }
+        .btn-primary {
+            background-color: #337ab7;
+            border-color: #2e6da4;
+        }
+        .btn-primary:hover {
+            background-color: #286090;
+            border-color: #204d74;
+        }
+        .btn-danger {
+            background-color: #d9534f;
+            border-color: #d43f3a;
+        }
+        .btn-danger:hover {
+            background-color: #c9302c;
+            border-color: #ac2925;
+        }
+        .btn-info {
+            background-color: #5bc0de;
+            border-color: #46b8da;
+        }
+        .btn-info:hover {
+            background-color: #31b0d5;
+            border-color: #269abc;
+        }
+        
+        /* 输入框和表单样式 */
+        .form-control {
+            border-radius: 3px;
+            border: 1px solid #ccc;
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+        }
+        .form-control:focus {
+            border-color: #66afe9;
+            outline: 0;
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+        }
+        
+        /* 地址预览区域优化 - 保持一行 */
+        .preview-form-row {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .preview-form-row .form-group {
+            margin-bottom: 0;
+            flex-shrink: 0;
+        }
+        .preview-form-row #_url {
+            flex-grow: 1;
+            min-width: 300px;
+        }
+        .preview-form-row .checkbox-inline {
+            margin-right: 10px;
+            white-space: nowrap;
+        }
+        .preview-form-row .form-control {
+            display: inline-block;
+            width: auto;
+            min-width: 70px;
+        }
+        .preview-form-row .form-control#filePassword {
+            min-width: 80px;
+        }
+        .preview-form-row .form-control#watermarkTxt {
+            min-width: 100px;
+        }
+        .preview-form-row .form-control#kkkey {
+            min-width: 100px;
+        }
+        .preview-form-row .btn-success {
+            white-space: nowrap;
+        }
+        
+        /* 搜索框优化 */
+        .input-group {
+            width: 100%;
+        }
+        .input-group-btn .btn {
+            border-radius: 0 3px 3px 0;
+        }
+        #searchInput {
+            border-radius: 3px 0 0 3px;
+        }
+        
+        /* 上传区域优化 */
+        #file {
+            padding: 6px;
+        }
+        .input-group-btn .btn {
+            margin-left: 5px;
+        }
+        
+        /* 表格样式优化 */
+        #table {
+            border: 1px solid #e7eaec;
+            border-radius: 4px;
+            margin-top: 15px;
+        }
+        .fixed-table-container {
+            border: none;
+        }
+        .table > thead > tr > th {
+            border-bottom: 2px solid #e7eaec;
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        .table > tbody > tr > td {
+            border-top: 1px solid #e7eaec;
+            padding: 12px 8px;
+            vertical-align: middle;
+        }
+        
+        /* 模态框优化 */
+        .modal-content {
+            border-radius: 5px;
+            box-shadow: 0 5px 15px rgba(0,0,0,.5);
+        }
+        .modal-header {
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #e7eaec;
+            border-radius: 5px 5px 0 0;
+        }
+        .modal-footer {
+            background-color: #f8f9fa;
+            border-top: 1px solid #e7eaec;
+            border-radius: 0 0 5px 5px;
+        }
+        
+        /* 操作按钮间距 */
+        .btn + .btn {
+            margin-left: 5px;
+        }
+        
+        /* 高亮搜索结果 */
+        .text-danger[style*="background-color: yellow"] {
+            padding: 0 2px;
+            font-weight: bold;
+        }
+        
         /* 禁用状态样式 */
         .disabled-upload {
             opacity: 0.6;
@@ -90,6 +262,19 @@
         .disabled-upload .btn {
             cursor: not-allowed;
         }
+        .disabled-upload .alert {
+            margin-bottom: 0;
+        }
+        
+        /* 响应式调整 */
+        @media (max-width: 1200px) {
+            .preview-form-row {
+                flex-wrap: wrap;
+            }
+            .preview-form-row #_url {
+                min-width: 200px;
+            }
+        }
     </style>
 </head>
 
@@ -141,11 +326,11 @@
     <#--  接入说明  -->
     <div class="page-header">
         <h1>支持的文件类型</h1>
-        我们一直在扩展支持的文件类型，不断优化预览的效果，如果您有什么建议，欢迎在kk开源社区留意反馈：<a target='_blank' href="https://t.zsxq.com/09ZHSXbsQ">https://t.zsxq.com/09ZHSXbsQ</a>。
+        我们一直在扩展支持的文件类型，不断优化预览的效果，如果您有什么建议，欢迎在kk开源社区留言反馈：<a target='_blank' href="https://t.zsxq.com/09ZHSXbsQ">https://t.zsxq.com/09ZHSXbsQ</a>。
     </div>
     <div>
         <ol>
-            <li>支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages  ,pptm 等 Office 办公文档</li>
+            <li>支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办公文档</li>
             <li>支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档</li>
             <li>支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档</li>
             <li>支持 vsd, vsdx 等 Visio 流程图文件</li>
@@ -160,7 +345,7 @@
             <li>支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt  等 CAD 模型文件</li>
             <li>支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本</li>
             <li>支持 zip, rar, jar, tar, gzip, 7z 等压缩包</li>
-            <li>支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp, heic ,heif 等图片预览（翻转，缩放，镜像）</li>
+            <li>支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp, heic 等图片预览（翻转，缩放，镜像）</li>
             <li>支持 tif, tiff 图信息模型文件（翻转，缩放）</li>
             <li>支持 tga 图像格式文件</li>
             <li>支持 svg 矢量图像格式文件 （翻转，缩放）</li>
@@ -192,10 +377,10 @@
                     <label><input type="checkbox" name="forceUpdatedCache" value="true"/>更新</label>
                     <label><input type="checkbox" name="kkagent" value="true"/>跨域</label>
                     <label><input type="checkbox" id="encryption" name="encryption" value="aes"/>AES</label>
-                    <input type="text" id="filePassword" name="filePassword" placeholder="密码" style="width:40px;">
+                    <input type="text" id="filePassword" name="filePassword" placeholder="密码" style="width:50px;">
-                    <input type="text" id="page" name="page" placeholder="页码" style="width:40px;">
+                    <input type="text" id="page" name="page" placeholder="页码" style="width:50px;">
-                    <input type="text" id="highlightall" name="highlightall" placeholder="高亮显示" style="width:50px;">
+                    <input type="text" id="highlightall" name="highlightall" placeholder="高亮显示" style="width:60px;">
-                    <input type="text" id="watermarkTxt" name="watermarkTxt" placeholder="插入水印" style="width:50px;">
+                    <input type="text" id="watermarkTxt" name="watermarkTxt" placeholder="插入水印" style="width:60px;">
                     <#if isshowkey>
                         <input type="text" id="kkkey" name="key" placeholder="KK秘钥" style="width:60px;">
                     </#if>
@@ -464,6 +649,7 @@
                 field: 'name',
                 title: '名称',
                 sortable: true,
+                width: '40%',
                 formatter: function(value, row, index) {
                     var iconClass = row.isDirectory ? 'glyphicon glyphicon-folder-open' : 'glyphicon glyphicon-file';
                     var iconColor = row.isDirectory ? '#f0ad4e' : '#337ab7';
@@ -491,15 +677,16 @@
                 field: 'isDirectory',
                 title: '类型',
                 sortable: true,
-                width: 80,
+                width: '10%',
+                align: 'center',
                 formatter: function(value) {
-                    return value ? '文件夹' : '文件';
+                    return value ? '<span class="label label-warning">文件夹</span>' : '<span class="label label-primary">文件</span>';
                 }
             }, {
                 field: 'lastModified',
                 title: '修改时间',
                 sortable: true,
-                width: 150,
+                width: '20%',
                 formatter: function(value) {
                     if (value) {
                         return new Date(value).toLocaleString();
@@ -510,10 +697,11 @@
                 field: 'size',
                 title: '大小',
                 sortable: true,
-                width: 100,
+                width: '10%',
+                align: 'right',
                 formatter: function(value, row) {
                     if (row.isDirectory) {
-                        return '-';
+                        return '<span class="text-muted">-</span>';
                     }
                     if (value) {
                         if (value < 1024) {
@@ -530,17 +718,32 @@
                 field: 'action',
                 title: '操作',
                 align: 'center',
-                width: 200,
+                width: '20%',
+                events: {
+                    'click .btn-info': function(e, value, row, index) {
+                        if (row.isDirectory) {
+                            changeDirectory(row.fullPath);
+                        }
+                    },
+                    'click .btn-success': function(e, value, row, index) {
+                        // 预览链接会自动在新窗口打开，这里不需要额外处理
+                    },
+                    'click .btn-danger': function(e, value, row, index) {
+                        if (row.isDirectory) {
+                            deleteFile(encodeURIComponent(Base64.encode("http://"+row.fullPath)), true);
+                        } else {
+                            deleteFile(encodeURIComponent(Base64.encode("http://"+row.relativePath)), false);
+                        }
+                    }
+                },
                 formatter: function(value, row, index) {
                     if (row.isDirectory) {
-                        return '<button class="btn btn-info btn-sm" onclick="changeDirectory(\'' + row.fullPath + '\')">进入</button> ' +
+                        return '<button class="btn btn-info btn-sm">进入</button>' +
-                               '<button class="btn btn-danger btn-sm" style="margin-left:5px;" onclick="deleteFile(\'' + encodeURIComponent(Base64.encode("http://"+row.fullPath)) + '\', true)">删除</button>';
+                               '<button class="btn btn-danger btn-sm" style="margin-left:5px;">删除</button>';
                     } else {
-                        // 构建预览URL
                         var previewUrl = buildFilePreviewUrl(row);
-                        
                         return '<a class="btn btn-success btn-sm" target="_blank" href="' + previewUrl + '">预览</a>' +
-                               '<button class="btn btn-danger btn-sm" style="margin-left:5px;" onclick="deleteFile(\'' + encodeURIComponent(Base64.encode("http://"+row.relativePath)) + '\', false)">删除</button>';
+                               '<button class="btn btn-danger btn-sm" style="margin-left:5px;">删除</button>';
                     }
                 }
             }],
@@ -548,6 +751,10 @@
                 return {
                     classes: row.isDirectory ? 'folder-row' : 'file-row'
                 };
+            },
+            onPostBody: function() {
+                // 表格渲染完成后，调整表头对齐方式
+                $('.fixed-table-header th').css('vertical-align', 'middle');
             }
         }).on('load-success.bs.table', function (e, data) {
             console.log('表格数据加载成功');
@@ -568,8 +775,6 @@
         return previewUrl;
     }
     
-
-    
     // 切换目录
     function changeDirectory(path) {
         currentPath = path;