feat: 优化资料清单 界面交互和替换图标

app/public/js/config_dir.js

@@ -6,6 +6,16 @@ $(document).ready(function() {
             this.spread = SpreadJsObj.createNewSpread($('#config-dir-spread')[0]);
             this.spread.options.showHorizontalScrollbar = false;
             this.sheet = this.spread.getActiveSheet();
+            this.treeIcons = {
+                folder: new Image(),
+                leaf: new Image(),
+            };
+            const refreshTreeIcon = () => { this.spread.refresh(); };
+            this.treeIcons.folder.onload = refreshTreeIcon;
+            this.treeIcons.leaf.onload = refreshTreeIcon;
+            this.treeIcons.folder.src = '/public/images/filesjs-folder.png';
+            this.treeIcons.leaf.src = '/public/images/filesjs-leaf.png';
+            const treeIcons = this.treeIcons;
 
             this.filingTree = createNewPathTree('base', {
                 id: 'tree_id', pid: 'tree_pid', order: 'order', level: 'level',
@@ -20,7 +30,12 @@ $(document).ready(function() {
                             return data.name;
                         },
                         getIcon: function(data) {
-                            return data.is_leaf ? 'file' : 'folder';
+                            const fallback = data.is_leaf ? 'file' : 'folder';
+                            return {
+                                image: data.is_leaf ? treeIcons.leaf : treeIcons.folder,
+                                fallback,
+                                size: 18,
+                            };
                         },
                     },
                     { title: '已传文件', colSpan: '1', rowSpan: '1', field: 'file_count', hAlign: 1, width: 75, formatter: '@' },

app/public/js/filesjs.js

@@ -12,6 +12,16 @@ $(document).ready(function() {
             this.spread = SpreadJsObj.createNewSpread($('#filing-spread')[0]);
             this.spread.options.showHorizontalScrollbar = false; // 隐藏水平滚动条
             this.sheet = this.spread.getActiveSheet();
+            this.treeIcons = {
+                folder: new Image(),
+                leaf: new Image(),
+            };
+            const refreshTreeIcon = () => { this.spread.refresh(); };
+            this.treeIcons.folder.onload = refreshTreeIcon;
+            this.treeIcons.leaf.onload = refreshTreeIcon;
+            this.treeIcons.folder.src = '/public/images/filesjs-folder.png';
+            this.treeIcons.leaf.src = '/public/images/filesjs-leaf.png';
+            const treeIcons = this.treeIcons;
 
             // 初始化 PathTree，使用 zh_filing 原有字段映射
             this.filingTree = createNewPathTree('base', {
@@ -33,7 +43,12 @@ $(document).ready(function() {
                             return data.name;
                         },
                         getIcon: function(data) {
-                            return data.is_leaf ? 'file' : 'folder';
+                            const fallback = data.is_leaf ? 'file' : 'folder';
+                            return {
+                                image: data.is_leaf ? treeIcons.leaf : treeIcons.folder,
+                                fallback,
+                                size: 18,
+                            };
                         },
                     },
                     { title: '文件数', colSpan: '1', rowSpan: '1', field: 'total_file_count', hAlign: 1, width: 70, formatter: '@' },
@@ -166,6 +181,7 @@ $(document).ready(function() {
             const convertedData = this._convertData(filing);
             this.filingTree.loadDatas(convertedData);
             SpreadJsObj.loadSheetData(this.sheet, SpreadJsObj.DataType.Tree, this.filingTree);
+            this.resizeSpreadColumns();
 
             // 恢复上次选中的节点
             const curCache = getLocalCache(this.curFilingKey);
@@ -180,6 +196,26 @@ $(document).ready(function() {
         }
 
         /**
+         * 根据目录区域宽度调整树表列宽，拖动分隔条时保持 SpreadJS 填满容器。
+         */
+        resizeSpreadColumns() {
+            const containerWidth = Math.floor($('#filing-spread').innerWidth() || 0);
+            if (containerWidth <= 0) return;
+
+            const rowHeaderWidth = 25;
+            const fileCountWidth = 70;
+            const scrollbarWidth = 18;
+            const borderWidth = 2;
+            const nameWidth = Math.max(
+                containerWidth - rowHeaderWidth - fileCountWidth - scrollbarWidth - borderWidth,
+                60
+            );
+            this.sheet.setColumnWidth(0, nameWidth);
+            this.sheet.setColumnWidth(1, fileCountWidth);
+            this.spread.refresh();
+        }
+
+        /**
          * 绑定事件
          */
         _bindEvents() {
@@ -1835,7 +1871,7 @@ $(document).ready(function() {
      * 侧边工具栏展开/收起
      */
     const refreshSideLayout = function() {
-        filingSjs.spread.refresh();
+        filingSjs.resizeSpreadColumns();
         if (fileReference) fileReference.spread.refresh();
     };
 
@@ -1880,6 +1916,7 @@ $(document).ready(function() {
                                 {title: '备注', field: 'remark', hAlign: 1, width: 150, formatter: '@'}
                             ],
                             emptyRows: 0, headRows: 1, headRowHeight: [32], defaultRowHeight: 21,
+                            headerFont: '12px 微软雅黑', font: '12px 微软雅黑',
                             headColWidth: [30], selectedBackColor: '#fffacd', readOnly: true,
                             localCache: { key: 'file_detail_reference', colWidth: true },
                         },
@@ -1898,12 +1935,15 @@ $(document).ready(function() {
     // 左右拖拽分隔条
     $.divResizer({
         select: '#file-right-spr',
-        callback: function() { filingSjs.spread.refresh(); },
+        callback: function() { filingSjs.resizeSpreadColumns(); },
     });
     $.divResizer({
         select: '#right-spr',
         callback: refreshSideLayout,
     });
+    $(window).off('resize.filesjsFiling').on('resize.filesjsFiling', function() {
+        filingSjs.resizeSpreadColumns();
+    });
 
     // ========== 事件委托绑定 ==========
 

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -1776,11 +1776,18 @@ const SpreadJsObj = {
                         if (col && col.getIcon) {
                             const iconType = col.getIcon(node);
                             if (iconType) {
-                                const iconSize = 14;
+                                const customImage = typeof iconType === 'object' ? iconType.image : null;
+                                const customSize = typeof iconType === 'object' ? Number(iconType.size) : 0;
+                                const fallbackType = typeof iconType === 'object' ? iconType.fallback : iconType;
+                                const iconSize = customSize > 0 ? customSize : 14;
                                 const iconY = y + Math.floor((h - iconSize) / 2);
-                                if (iconType === 'folder') {
+                                const imageReady = customImage && customImage.complete &&
+                                    (customImage.naturalWidth || customImage.width);
+                                if (imageReady) {
+                                    canvas.drawImage(customImage, x, iconY, iconSize, iconSize);
+                                } else if (fallbackType === 'folder') {
                                     drawFolderIcon(canvas, x, iconY, iconSize);
-                                } else if (iconType === 'file') {
+                                } else if (fallbackType === 'file') {
                                     drawFileIcon(canvas, x, iconY, iconSize);
                                 }
                                 x += iconSize + 4;

app/view/file/filesjs.ejs

@@ -1,3 +1,44 @@
+<style>
+    #file-right-view {
+        position: relative;
+    }
+    #file-right-spr.file-main-resizer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 12px;
+        height: 100%;
+        margin-left: 0;
+        float: none;
+        cursor: col-resize;
+        z-index: 20;
+        user-select: none;
+    }
+    #file-right-spr .file-main-resizer-button {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 10px;
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: translateY(-50%);
+        border: 1px solid #b8c2cc;
+        border-radius: 0 4px 4px 0;
+        background-color: #fff;
+        color: #7d8790;
+        box-shadow: 1px 0 3px rgba(0, 0, 0, .12);
+        pointer-events: none;
+        transition: border-color .15s, background-color .15s, color .15s;
+    }
+    #file-right-spr:hover .file-main-resizer-button {
+        border-color: #409eff;
+        background-color: #ecf5ff;
+        color: #409eff;
+    }
+</style>
 <div class="panel-content">
     <div class="panel-title fluid">
         <div class="title-main  d-flex justify-content-between">
@@ -31,7 +72,9 @@
                         <div id="filing-spread" style="width: 100%; height: calc(100% - 40px);"></div>
                     </div>
                     <div id="file-right-view" style="width: 76%; min-width: 0; flex: 0 0 auto; overflow: hidden;">
-                        <div class="resize-x" id="file-right-spr" r-Type="width" div1="#file-left-view" div2="#file-right-view" title="调整大小" a-type="percent" store-id="file-detail-sjs" store-version="1.0.0" min="20"></div>
+                        <div class="resize-x file-main-resizer" id="file-right-spr" r-Type="width" div1="#file-left-view" div2="#file-right-view" title="拖动调整目录和文件区域宽度" a-type="percent" store-id="file-detail-sjs" store-version="1.0.0" min="20">
+                            <span class="file-main-resizer-button" aria-hidden="true">&#8942;</span>
+                        </div>
                         <div class="ml-2" id="file-view" style="display: none; min-width: 0; overflow: hidden;">
                             <div class="d-flex flex-nowrap align-items-stretch w-100" style="min-width: 0;">
                                 <div class="flex-grow-1 pr-2" style="min-width: 0; overflow-x: auto;">