refactor(view): 重构文件上传组件并提取通用显示逻辑

将文件上传组件的HTML结构进行优化，添加图标和提示信息
提取文件显示和删除逻辑为通用函数renderFileDisplay和removeFile
移除重复代码，提高组件可维护性和复用性

src/view/broadcast/form.html

@@ -25,10 +25,14 @@
             </label>
             <label class="layui-form-item relative block">
                 <span class="help-label"><b>附件</b></span>
-                <input type="hidden" name="files" value="{$vo.files|default=''}" class="layui-input" placeholder="请上传附件">
-                <a data-file='mut' data-type="*" data-field="files" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 5px;">上传文件</a>
-                <!-- 附件展示区域 -->
-                <div id="files-display" style="margin-top: 10px;"></div>
+                <div class="layui-input-block">
+                    <input type="hidden" name="files" value="{$vo.files|default=''}" class="layui-input">
+                    <a data-file='mut' data-type="*" data-field="files" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 5px;">
+                        <i class="layui-icon layui-icon-upload-drag"></i> 上传文件
+                    </a>
+                    <div class="layui-form-mid layui-word-aux">支持上传PDF、Word、图片等格式文件</div>
+                    <div id="files-display" style="margin-top: 10px;"></div>
+                </div>
             </label>
         </fieldset>
         <fieldset class="layui-bg-gray">
@@ -67,78 +71,15 @@
 </form>
 <script>
     // 初始化附件上传功能
-    $('input[name="files"]').uploadFile();
+    // $('input[name="files"]').uploadFile();
     
-    // 附件处理功能
-    function renderFiles() {
-        var filesValue = $('input[name="files"]').val();
-        var displayDiv = $('#files-display');
-        displayDiv.empty();
-        
-        if (filesValue && filesValue.trim()) {
-            var files = filesValue.split('|').filter(function(url) {
-                return url.trim() !== '';
-            });
-            
-            if (files.length > 0) {
-                var html = '<div style="border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px; background-color: #fafafa;">';
-                html += '<div style="font-weight: bold; margin-bottom: 8px; color: #666;">已上传附件 (' + files.length + ')：</div>';
-                
-                files.forEach(function(url, index) {
-                    if (url.trim()) {
-                        var fileName = '附件' + (index + 1);
-                        
-                        // 尝试从URL参数中获取attname作为文件名
-                        try {
-                            var urlObj = new URL(url, window.location.origin);
-                            var attname = urlObj.searchParams.get('attname');
-                            if (attname) {
-                                fileName = decodeURIComponent(attname);
-                            } else {
-                                // 如果没有attname参数，则使用URL路径的最后部分
-                                fileName = url.split('/').pop() || '附件' + (index + 1);
-                            }
-                        } catch (e) {
-                            // 如果URL解析失败，使用默认方式
-                            fileName = url.split('/').pop() || '附件' + (index + 1);
-                        }
-                        
-                        html += '<div style="margin-bottom: 6px; padding: 6px; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: space-between;">';
-                        html += '<div style="flex: 1; display: flex; align-items: center;">';
-                        html += '<i class="layui-icon layui-icon-file" style="margin-right: 8px; color: #1E9FFF;"></i>';
-                        html += '<a href="' + url + '" target="_blank" style="color: #1E9FFF; text-decoration: none; word-break: break-all;">' + fileName + '</a>';
-                        html += '</div>';
-                        html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeFile(\'' + url + '\')" style="margin-left: 10px;">删除</button>';
-                        html += '</div>';
-                    }
-                });
-                
-                html += '</div>';
-                displayDiv.html(html);
-            }
-        }
-    }
+    // 初始化文件显示
+    renderFileDisplay('files');
     
-    // 删除附件
-    function removeFile(urlToRemove) {
-        var filesValue = $('input[name="files"]').val();
-        if (filesValue) {
-            var files = filesValue.split('|').filter(function(url) {
-                return url.trim() !== '' && url !== urlToRemove;
-            });
-            $('input[name="files"]').val(files.join('|'));
-            renderFiles();
-        }
-    }
-    
-    // 监听附件字段变化
-    $('input[name="files"]').on('input change', function() {
-        renderFiles();
-    });
+    // 监听文件字段变化
+    $('input[name="files"]').on('input change', function() { renderFileDisplay('files'); });
 
     $(function () {
-        // 页面加载时初始化附件显示
-        renderFiles();
         
         layui.use(['form'], function () {
             const Form = layui.form;
@@ -176,4 +117,65 @@
             })
         });
     })
+
+// 文件显示渲染函数
+function renderFileDisplay(fieldName) {
+    var fileValue = $('input[name="' + fieldName + '"]').val();
+    var displayDiv = $('#' + fieldName + '-display');
+    displayDiv.empty();
+    
+    if (fileValue && fileValue.trim()) {
+        var files = fileValue.split('|').filter(function(url) {
+            return url.trim() !== '';
+        });
+        
+        if (files.length > 0) {
+            var html = '<div style="border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px; background-color: #fafafa;">';
+            html += '<div style="font-weight: bold; margin-bottom: 8px; color: #666;">已上传文件 (' + files.length + ')：</div>';
+            
+            files.forEach(function(url, index) {
+                if (url.trim()) {
+                    var fileName = '文件' + (index + 1);
+                    
+                    // 尝试从URL参数中获取attname作为文件名
+                    try {
+                        var urlObj = new URL(url, window.location.origin);
+                        var attname = urlObj.searchParams.get('attname');
+                        if (attname) {
+                            fileName = decodeURIComponent(attname);
+                        } else {
+                            // 如果没有attname参数，则使用URL路径的最后部分
+                            fileName = url.split('/').pop() || '文件' + (index + 1);
+                        }
+                    } catch (e) {
+                        // 如果URL解析失败，使用默认方式
+                        fileName = url.split('/').pop() || '文件' + (index + 1);
+                    }
+                    html += '<div style="margin-bottom: 6px; padding: 6px; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: space-between;">';
+                    html += '<div style="flex: 1; display: flex; align-items: center;">';
+                    html += '<i class="layui-icon layui-icon-file" style="margin-right: 8px; color: #1E9FFF;"></i>';
+                    html += '<a href="' + url + '" target="_blank" style="color: #1E9FFF; text-decoration: none; word-break: break-all;">' + decodeURIComponent(fileName) + '</a>';
+                    html += '</div>';
+                    html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeFile(\'' + fieldName + '\', \'' + url + '\')" style="margin-left: 10px;">删除</button>';
+                    html += '</div>';
+                }
+            });
+            
+            html += '</div>';
+            displayDiv.html(html);
+        }
+    }
+}
+
+// 删除文件
+function removeFile(fieldName, urlToRemove) {
+    var fileValue = $('input[name="' + fieldName + '"]').val();
+    if (fileValue) {
+        var files = fileValue.split('|').filter(function(url) {
+            return url.trim() !== '' && url !== urlToRemove;
+        });
+        $('input[name="' + fieldName + '"]').val(files.join('|'));
+        renderFileDisplay(fieldName);
+    }
+}
 </script>