lijian541x
/
ema_project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <style>
        body { padding: 15px; }
        .upload-area { border: 2px dashed #e6e6e6; border-radius: 8px; padding: 40px; text-align: center; margin-bottom: 15px; cursor: pointer; transition: all 0.3s; }
        .upload-area:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.05); }
        .upload-area i { font-size: 48px; color: #999; }
        .upload-area p { margin-top: 10px; color: #999; }
        .file-list { display: flex; flex-wrap: wrap; gap: 15px; }
        .file-item { width: 180px; background: #fff; border-radius: 8px; padding: 15px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .file-item img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; }
        .file-item .file-name { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .file-item .file-actions { margin-top: 8px; }
        .file-item .file-actions a { margin: 0 3px; color: #667eea; cursor: pointer; }
        .file-item .file-actions a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <div class="upload-area" id="uploadArea">
        <i class="layui-icon layui-icon-upload-drag"></i>
        <p>点击上传文件或将文件拖拽到此处</p>
        <p style="font-size: 12px; margin-top: 5px;">支持 jpg、png、gif、pdf、doc、docx、xls、xlsx 等格式</p>
    </div>
    
    <div class="layui-form" style="margin-bottom: 15px;">
        <div class="layui-inline">
            <input type="text" name="keyword" placeholder="搜索文件名" class="layui-input" style="width: 200px;">
        </div>
        <button type="button" class="layui-btn" id="btnSearch"><i class="layui-icon layui-icon-search"></i></button>
    </div>
    
    <div class="file-list" id="fileList">
        <!-- 文件列表将通过JS动态加载 -->
    </div>
    
    <div id="pagination" style="text-align: center; margin-top: 20px;"></div>
    
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        layui.use(['layer', 'upload', 'laypage'], function() {
            var layer = layui.layer;
            var upload = layui.upload;
            var laypage = layui.laypage;
            var $ = layui.jquery;
            
            var files = [];
            var currentPage = 1;
            var pageSize = 12;
            
            // 上传组件
            upload.render({
                elem: '#uploadArea',
                url: Config.getApiUrl(Config.api.file.upload),
                headers: function() {
                    var token = localStorage.getItem('token');
                    return token ? { 'Authorization': token } : {};
                },
                done: function(res) {
                    if (res.code === 200) {
                        Common.success('上传成功');
                        files.unshift(res.data);
                        renderFileList();
                    } else {
                        Common.error(res.msg || '上传失败');
                    }
                },
                error: function() {
                    Common.error('上传失败，请重试');
                }
            });
            
            // 搜索
            $('#btnSearch').click(function() {
                var keyword = $('input[name="keyword"]').val().toLowerCase();
                renderFileList(keyword);
            });
            
            // 渲染文件列表
            function renderFileList(keyword) {
                var filtered = files;
                if (keyword) {
                    filtered = files.filter(function(f) {
                        return f.originalName.toLowerCase().indexOf(keyword) !== -1;
                    });
                }
                
                var start = (currentPage - 1) * pageSize;
                var end = start + pageSize;
                var pageData = filtered.slice(start, end);
                
                var html = '';
                pageData.forEach(function(file) {
                    var isImage = /\.(jpg|jpeg|png|gif|bmp)$/i.test(file.originalName);
                    var preview = isImage 
                        ? '<img src="' + file.url + '" alt="' + file.originalName + '">' 
                        : '<div style="height:120px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border-radius:4px;"><i class="layui-icon layui-icon-file-b" style="font-size:48px; color:#999;"></i></div>';
                    
                    html += '<div class="file-item">';
                    html += preview;
                    html += '<div class="file-name" title="' + file.originalName + '">' + file.originalName + '</div>';
                    html += '<div class="file-actions">';
                    html += '<a href="javascript:;" onclick="copyUrl(\'' + file.url + '\')">复制链接</a>';
                    html += '<a href="javascript:;" onclick="deleteFile(\'' + file.url + '\', this)">删除</a>';
                    html += '</div></div>';
                });
                
                if (!html) {
                    html = '<div style="width:100%; text-align:center; padding:60px; color:#999;">暂无文件</div>';
                }
                
                $('#fileList').html(html);
                
                // 渲染分页
                laypage.render({
                    elem: 'pagination',
                    count: filtered.length,
                    limit: pageSize,
                    curr: currentPage,
                    jump: function(obj, first) {
                        if (!first) {
                            currentPage = obj.curr;
                            renderFileList(keyword);
                        }
                    }
                });
            }
            
            // 复制链接
            window.copyUrl = function(url) {
                var fullUrl = Config.baseUrl + url;
                var input = document.createElement('input');
                input.value = fullUrl;
                document.body.appendChild(input);
                input.select();
                document.execCommand('copy');
                document.body.removeChild(input);
                Common.success('链接已复制到剪贴板');
            };
            
            // 删除文件
            window.deleteFile = function(url, el) {
                Common.confirm('确定要删除这个文件吗？', function() {
                    Common.get(Config.api.file.delete + '?url=' + encodeURIComponent(url), function(res) {
                        Common.success('删除成功', function() {
                            $(el).closest('.file-item').remove();
                        });
                    });
                });
            };
            
            // 初始化
            renderFileList();
        });
    </script>
</body>
</html>