TripLog/templates/nodes/attachments.php

<div class="page-header">
    <div>
        <h1>节点附件</h1>
        <p class="muted">
            <a href="<?= url('activities/show', ['id' => $node['activity_id']]) ?>">
                <?= e($node['activity_title']) ?>
            </a>
            ·
            <?= e($node['title'] ?: '无标题节点') ?>
            ·
            <?= $node['node_category'] === 'plan' ? '计划' : '执行' ?>
        </p>
    </div>
    <a href="<?= url('activities/show', ['id' => $node['activity_id']]) ?>" class="btn">返回活动</a>
</div>

<form method="post" action="<?= url('attachments/upload') ?>" enctype="multipart/form-data" class="form" style="margin-bottom:24px;">
    <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
    <input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">

    <div class="form-row">
        <label>上传附件</label>
        <div class="drop-zone" id="drop-zone">
            <input type="file" name="files[]" id="file-input" multiple style="display:none;">
            <div class="drop-zone-inner">
                <div style="font-size:32px;">📎</div>
                <p style="margin:6px 0 0;">点击或拖拽文件到这里</p>
                <p class="muted" style="font-size:12px; margin:4px 0 0;">
                    支持 JPG / PNG / GIF / WebP / PDF / DOC / XLS / MP4 等，单个不超过 20MB
                </p>
            </div>
        </div>
        <div id="file-list" class="file-list"></div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-primary" id="btn-submit-upload" style="display:none;">开始上传</button>
    </div>
</form>

<h2 style="font-size:16px; margin: 32px 0 12px;">已上传（<?= count($attachments) ?>）</h2>

<?php if (empty($attachments)): ?>
    <div class="empty">
        <p>暂无附件，上传第一张机票/门票/照片吧</p>
    </div>
<?php else: ?>
    <div class="attachment-grid">
        <?php foreach ($attachments as $att):
            $url = $att['file_url'];
            $name = $att['file_name'] ?: basename($url);
            $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
            $isImage = in_array($ext, ['jpg','jpeg','png','gif','webp','heic'], true);
            $filePath = dirname(__DIR__, 2) . $url;
            $size = is_file($filePath) ? filesize($filePath) : 0;
            $sizeText = $size > 0 ? ($size < 1024 * 1024
                ? round($size / 1024, 1) . ' KB'
                : round($size / 1024 / 1024, 2) . ' MB') : '';
        ?>
            <div class="attachment-card">
                <a href="<?= e($url) ?>" target="_blank" class="attachment-link">
                    <?php if ($isImage): ?>
                        <img src="<?= e($url) ?>" alt="" class="attachment-thumb">
                    <?php else: ?>
                        <div class="attachment-icon">
                            <?php
                            $icons = ['pdf'=>'📄','doc'=>'📝','docx'=>'📝','xls'=>'📊','xlsx'=>'📊','mp4'=>'🎬','mov'=>'🎬','zip'=>'🗜️'];
                            echo $icons[$ext] ?? '📎';
                            ?>
                        </div>
                    <?php endif; ?>
                </a>
                <div class="attachment-meta">
                    <div class="attachment-name" title="<?= e($name) ?>"><?= e($name) ?></div>
                    <div class="attachment-sub">
                        <?= e($att['uploader_name'] ?: '未知') ?>
                        <?php if ($sizeText): ?> · <?= e($sizeText) ?><?php endif; ?>
                    </div>
                    <form method="post" action="<?= url('attachments/destroy') ?>" style="display:inline;"
                          onsubmit="return confirm('确定删除此附件？');">
                        <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
                        <input type="hidden" name="id" value="<?= (int)$att['id'] ?>">
                        <button type="submit" class="attachment-delete" title="删除">×</button>
                    </form>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<script>
(function () {
    var dropZone = document.getElementById('drop-zone');
    var fileInput = document.getElementById('file-input');
    var fileList = document.getElementById('file-list');
    var btnSubmit = document.getElementById('btn-submit-upload');
    if (!dropZone || !fileInput) return;

    dropZone.addEventListener('click', function () { fileInput.click(); });

    dropZone.addEventListener('dragover', function (e) {
        e.preventDefault();
        dropZone.classList.add('dragging');
    });
    dropZone.addEventListener('dragleave', function () {
        dropZone.classList.remove('dragging');
    });
    dropZone.addEventListener('drop', function (e) {
        e.preventDefault();
        dropZone.classList.remove('dragging');
        if (e.dataTransfer.files.length) {
            fileInput.files = e.dataTransfer.files;
            refreshList();
        }
    });

    fileInput.addEventListener('change', refreshList);

    function refreshList() {
        fileList.innerHTML = '';
        var files = fileInput.files;
        if (!files.length) {
            btnSubmit.style.display = 'none';
            return;
        }
        for (var i = 0; i < files.length; i++) {
            var f = files[i];
            var size = f.size < 1024 * 1024
                ? (f.size / 1024).toFixed(1) + ' KB'
                : (f.size / 1024 / 1024).toFixed(2) + ' MB';
            var row = document.createElement('div');
            row.className = 'file-row';
            row.textContent = '📎 ' + f.name + '  (' + size + ')';
            fileList.appendChild(row);
        }
        btnSubmit.style.display = 'inline-block';
    }
})();
</script>