u
This commit is contained in:
oneao committed
1 parent
b7f50f3ccb
commit
11bcef03e1
8 files changed
+437
-537
No files matched your search
+1
-1
@@ -1,3 +1,3 @@
|
||||
VITE_APP_PORT = 8080
|
||||
VITE_APP_PORT = 8081
|
||||
|
||||
VITE_ALIYUN_BUCKET = 'g3hy'
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"g3hd": "http://192.168.1.137:8085/api"
|
||||
"g3hd": "http://127.0.0.1:8085/api"
|
||||
}
|
||||
@@ -1,470 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>拖拽触发文件下载演示</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<title>数据看板</title>
|
||||
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-area,
|
||||
.explanation {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.demo-area h2,
|
||||
.explanation h2 {
|
||||
color: #3498db;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.draggable-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.draggable-item:active {
|
||||
cursor: grabbing;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.draggable-icon {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.download-hint {
|
||||
background-color: #f8f9fa;
|
||||
border-left: 4px solid #3498db;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 12px;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.85rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
background-color: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
overflow-x: auto;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.code-keyword {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.code-string {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.code-function {
|
||||
color: #9b59b6;
|
||||
}
|
||||
|
||||
.limitations {
|
||||
background-color: #fff8e1;
|
||||
border: 1px solid #ffd54f;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.limitations h3 {
|
||||
color: #f39c12;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.drag-target {
|
||||
border: 3px dashed #3498db;
|
||||
background-color: rgba(52, 152, 219, 0.05);
|
||||
}
|
||||
</style>
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>拖拽触发文件下载演示</h1>
|
||||
<p class="subtitle">演示如何通过拖拽操作触发浏览器文件下载</p>
|
||||
</header>
|
||||
<body class="bg-gray-100">
|
||||
|
||||
<div class="container">
|
||||
<div class="demo-area">
|
||||
<h2>演示区域</h2>
|
||||
<p>将下面的元素拖拽到桌面或文件夹，会触发文件下载到浏览器的默认下载目录。</p>
|
||||
<div class="p-4">
|
||||
|
||||
<div class="draggable-item" id="draggableElement" draggable="true">
|
||||
<div class="draggable-icon">📦</div>
|
||||
<h3>拖拽我下载文件</h3>
|
||||
<p>按住鼠标左键拖拽到桌面或文件夹</p>
|
||||
</div>
|
||||
<!-- 顶部 -->
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-xl font-bold">数据看板</h1>
|
||||
<button id="refreshBtn"
|
||||
class="bg-blue-500 text-white px-3 py-1 rounded"
|
||||
onclick="refreshData()">
|
||||
🔄 刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="download-hint">
|
||||
<p><strong>提示：</strong> 文件将下载到浏览器的默认下载目录（如"下载"文件夹），而不是直接保存到拖拽的目标位置。</p>
|
||||
</div>
|
||||
<!-- KPI -->
|
||||
<div id="kpi" class="grid grid-cols-6 gap-3 mb-4"></div>
|
||||
|
||||
<div class="file-list">
|
||||
<p><strong>可下载的文件：</strong></p>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">📄</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">示例文档.txt</div>
|
||||
<div class="file-size">文本文件，约 20 字节</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">🖼️</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">demo-image.png</div>
|
||||
<div class="file-size">图片文件，约 45 KB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">📊</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">数据报告.pdf</div>
|
||||
<div class="file-size">PDF文档，约 120 KB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 趋势 -->
|
||||
<div class="bg-white p-4 rounded shadow mb-4">
|
||||
<div class="mb-2 font-semibold">近7天上传趋势</div>
|
||||
<div id="trend" style="height:260px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMessage" class="status-message"></div>
|
||||
</div>
|
||||
<!-- 中间区域 -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div class="explanation">
|
||||
<h2>技术原理</h2>
|
||||
<p>这个演示通过以下步骤实现拖拽触发下载：</p>
|
||||
<ol>
|
||||
<li>为可拖拽元素添加 <code>draggable="true"</code> 属性</li>
|
||||
<li>监听 <code>dragstart</code> 事件</li>
|
||||
<li>在事件处理函数中，动态创建隐藏的下载链接</li>
|
||||
<li>设置链接的 <code>href</code> 和 <code>download</code> 属性</li>
|
||||
<li>通过 JavaScript 模拟点击链接，触发下载</li>
|
||||
</ol>
|
||||
|
||||
<div class="code-container">
|
||||
<pre><code><span class="code-comment">// 获取可拖拽元素</span>
|
||||
<span class="code-keyword">const</span> draggable = document.<span class="code-function">getElementById</span>(<span class="code-string">'draggableElement'</span>);
|
||||
|
||||
<span class="code-comment">// 监听拖拽开始事件</span>
|
||||
draggable.<span class="code-function">addEventListener</span>(<span class="code-string">'dragstart'</span>, <span class="code-keyword">function</span>(e) {
|
||||
<span class="code-comment">// 设置拖拽效果为"复制"</span>
|
||||
e.dataTransfer.effectAllowed = <span class="code-string">'copy'</span>;
|
||||
<span class="code-comment">// 设置拖拽数据（某些系统需要）</span>
|
||||
e.dataTransfer.<span class="code-function">setData</span>(<span class="code-string">'text/plain'</span>, <span class="code-string">'下载文件'</span>);
|
||||
|
||||
<span class="code-comment">// 创建隐藏的下载链接</span>
|
||||
<span class="code-keyword">const</span> link = document.<span class="code-function">createElement</span>(<span class="code-string">'a'</span>);
|
||||
|
||||
<span class="code-comment">// 可以根据需要切换不同的文件</span>
|
||||
<span class="code-keyword">const</span> fileType = <span class="code-function">getSelectedFileType</span>(); <span class="code-comment">// 假设的函数</span>
|
||||
link.href = <span class="code-function">getFileUrl</span>(fileType); <span class="code-comment">// 文件URL</span>
|
||||
link.download = <span class="code-function">getFileName</span>(fileType); <span class="code-string">// 下载的文件名</span>
|
||||
|
||||
<span class="code-comment">// 模拟点击触发下载</span>
|
||||
document.body.<span class="code-function">appendChild</span>(link);
|
||||
link.<span class="code-function">click</span>();
|
||||
document.body.<span class="code-function">removeChild</span>(link);
|
||||
|
||||
<span class="code-comment">// 显示状态消息</span>
|
||||
<span class="code-function">showStatus</span>(<span class="code-string">'下载已开始，请检查浏览器的下载列表'</span>, <span class="code-string">'success'</span>);
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 排行 -->
|
||||
<div class="bg-white p-4 rounded shadow col-span-2">
|
||||
<div class="mb-2 font-semibold">操作员上传排行</div>
|
||||
<div id="rank" style="height:260px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="limitations">
|
||||
<h3>技术限制与注意事项</h3>
|
||||
<ul>
|
||||
<li>拖拽操作实际上触发的是浏览器的标准下载流程，文件会保存到默认下载目录，而不是拖拽的目标位置</li>
|
||||
<li>某些浏览器可能对拖拽触发下载有安全限制</li>
|
||||
<li>下载行为受浏览器下载设置的影响（如下载前询问保存位置）</li>
|
||||
<li>需要服务器正确设置CORS头部（如果文件来自不同源）</li>
|
||||
<li>对于大文件，下载可能在后台进行，用户可能不会立即察觉</li>
|
||||
</ul>
|
||||
<!-- 右侧 -->
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- 最新上传 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold">最新上传</div>
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-gray-500">
|
||||
<th>箱号</th><th>操作员</th><th>时间</th><th>数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 企业公告 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold">📢 企业公告</div>
|
||||
<div id="notice" class="text-sm space-y-2 max-h-[120px] overflow-auto"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>演示：拖拽触发文件下载 | 使用 HTML、CSS 和 JavaScript 实现</p>
|
||||
<p>注意：这是一个前端技术演示，实际文件下载功能需要配合服务器端或Blob API</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const draggableElement = document.getElementById('draggableElement');
|
||||
const statusMessage = document.getElementById('statusMessage');
|
||||
<!-- 异常 -->
|
||||
<div class="bg-white p-4 rounded shadow">
|
||||
<div class="mb-2 font-semibold text-red-500">⚠️ 数据异常</div>
|
||||
<div id="warn" class="text-sm text-red-500 space-y-1"></div>
|
||||
</div>
|
||||
|
||||
// 模拟可下载的文件数据
|
||||
const files = {
|
||||
txt: {
|
||||
name: "示例文档.txt",
|
||||
content: "这是一个通过拖拽下载的示例文件。\n创建时间: " + new Date().toLocaleString(),
|
||||
type: "text/plain"
|
||||
},
|
||||
png: {
|
||||
name: "demo-image.png",
|
||||
// 这里使用一个实际存在的在线图片URL作为示例
|
||||
url: "https://via.placeholder.com/300x200/3498db/FFFFFF?text=Demo+Image",
|
||||
type: "image/png"
|
||||
},
|
||||
pdf: {
|
||||
name: "数据报告.pdf",
|
||||
// 使用一个简单的PDF数据URL作为示例（实际应用中应使用真实文件）
|
||||
content: "data:application/pdf;base64,JVBERi0xLjcNCiWhs8XXDQoxIDAgb2JqDQo8PC9QYWdlcyAyIDAgUi9UeXBlL0NhdGFsb2cvTWV0YWRhdGEgNTUgMCBSL1ZpZXdlclByZWZlcmVuY2VzIDU2IDAgUj4+DQplbmRvYmoNCjIgMCBvYmoNCjw8L0NvdW50IDEvVHlwZS9QYWdlcy9LaWRzWyAzIDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9YT2JqZWN0PDwvSW1hZ2U1IDUgMCBSPj4vRm9udDw8L0YxIDYgMCBSPj4+Pi9NZWRpYUJveFswIDAgNTk1LjMyIDg0MS45Ml0vQ29udGVudHMgNCAwIFI+Pg0KZW5kb2JqDQo0IDAgb2JqDQo8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDQ3Pj4NCnN0cmVhbQ0KeJwr5DI2UzC2NFcI5TIAQqgMhKGuMZeJoYEhl6mBCZcJF4hrymUJkgWxTCDKzLjMuUy4TKDKQKq4DADa8g6JDQplbmRzdHJlYW0NCmVuZG9iag0KNSAwIG9iag0KPDwvVHlwZS9YT2JqZWN0L1N1YnR5cGUvSW1hZ2UvV2lkdGggMzAwL0hlaWdodCAyMDAvQ29sb3JTcGFjZS9EZXZpY2VSR0IvQml0c1BlckNvbXBvbmVudCA4L0ZpbHRlci9EQ1REZWNvZGUvTGVuZ3RoIDM2OTc+Pg0Kc3RyZWFtDQr/2Q==",
|
||||
type: "application/pdf"
|
||||
}
|
||||
};
|
||||
</div>
|
||||
|
||||
// 当前选中的文件类型
|
||||
let currentFileType = 'txt';
|
||||
<script>
|
||||
// ===== 模拟数据 =====
|
||||
function getData() {
|
||||
return {
|
||||
kpi: [
|
||||
["今日箱数", rand(80,150)],
|
||||
["照片总数", rand(300,800)],
|
||||
["活跃操作员", rand(5,20)],
|
||||
["最近上传", "10:" + rand(10,59)],
|
||||
["异常箱数", rand(0,10)],
|
||||
["待处理", rand(0,5)],
|
||||
],
|
||||
trend: Array.from({length:7},()=>rand(50,150)),
|
||||
rank: Array.from({length:5},()=>rand(40,120)),
|
||||
users: ["张三","李四","王五","赵六","钱七"],
|
||||
list: [
|
||||
["MSCU1234567","张三","10:30",5],
|
||||
["TEMU7654321","李四","10:20",4],
|
||||
["CMAU9988776","王五","10:10",6],
|
||||
],
|
||||
notice: [
|
||||
"📌 今日起必须上传封条照片",
|
||||
"📌 晚班请补录遗漏数据",
|
||||
"📌 周五晚系统维护"
|
||||
],
|
||||
warn: [
|
||||
"图片少于3张：" + rand(0,5),
|
||||
"箱号为空：" + rand(0,3),
|
||||
"OCR失败：" + rand(0,3)
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 显示状态消息
|
||||
function showStatus(message, type) {
|
||||
statusMessage.textContent = message;
|
||||
statusMessage.className = 'status-message ' + type;
|
||||
statusMessage.style.display = 'block';
|
||||
function rand(min,max){return Math.floor(Math.random()*(max-min)+min)}
|
||||
|
||||
// 3秒后隐藏消息
|
||||
setTimeout(() => {
|
||||
statusMessage.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
// ===== 渲染 =====
|
||||
let trendChart = echarts.init(document.getElementById('trend'));
|
||||
let rankChart = echarts.init(document.getElementById('rank'));
|
||||
|
||||
// 获取文件URL
|
||||
function getFileUrl(fileType) {
|
||||
if (fileType === 'png') {
|
||||
return files.png.url;
|
||||
} else if (fileType === 'pdf') {
|
||||
return files.pdf.content; // 使用base64数据URL
|
||||
} else {
|
||||
// 为文本文件创建Blob URL
|
||||
const blob = new Blob([files.txt.content], { type: files.txt.type });
|
||||
return URL.createObjectURL(blob);
|
||||
}
|
||||
}
|
||||
function render() {
|
||||
const data = getData();
|
||||
|
||||
// 获取文件名
|
||||
function getFileName(fileType) {
|
||||
return files[fileType].name;
|
||||
}
|
||||
// KPI
|
||||
document.getElementById("kpi").innerHTML = data.kpi.map(i=>`
|
||||
<div class="bg-white p-3 rounded shadow">
|
||||
<div class="text-gray-400 text-xs">${i[0]}</div>
|
||||
<div class="text-xl font-bold mt-1">${i[1]}</div>
|
||||
</div>
|
||||
`).join("");
|
||||
|
||||
// 处理拖拽开始事件
|
||||
draggableElement.addEventListener('dragstart', function (e) {
|
||||
// 设置拖拽效果为"复制"
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text/plain', '下载文件: ' + getFileName(currentFileType));
|
||||
// 表格
|
||||
document.getElementById("table").innerHTML = data.list.map(i=>`
|
||||
<tr class="border-t">
|
||||
<td>${i[0]}</td>
|
||||
<td>${i[1]}</td>
|
||||
<td>${i[2]}</td>
|
||||
<td>${i[3]}</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
// 添加拖拽视觉效果
|
||||
this.classList.add('drag-target');
|
||||
// 公告
|
||||
document.getElementById("notice").innerHTML =
|
||||
data.notice.map(i=>`<div>${i}</div>`).join("");
|
||||
|
||||
// 创建隐藏的下载链接
|
||||
const link = document.createElement('a');
|
||||
link.href = getFileUrl(currentFileType);
|
||||
link.download = getFileName(currentFileType);
|
||||
// 异常
|
||||
document.getElementById("warn").innerHTML =
|
||||
data.warn.map(i=>`<div>${i}</div>`).join("");
|
||||
|
||||
// 模拟点击触发下载
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
// 趋势图
|
||||
trendChart.setOption({
|
||||
xAxis: { type: 'category', data: ['一','二','三','四','五','六','日'] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: data.trend,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}]
|
||||
});
|
||||
|
||||
// 显示成功消息
|
||||
showStatus(`"${getFileName(currentFileType)}" 下载已开始，请检查浏览器的下载列表`, 'success');
|
||||
// 排行
|
||||
rankChart.setOption({
|
||||
xAxis: { type: 'category', data: data.users },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: data.rank,
|
||||
type: 'bar'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
// 如果是文本文件，需要释放Blob URL
|
||||
if (currentFileType === 'txt') {
|
||||
setTimeout(() => URL.revokeObjectURL(link.href), 100);
|
||||
}
|
||||
// ===== 刷新 =====
|
||||
function refreshData() {
|
||||
const btn = document.getElementById("refreshBtn");
|
||||
btn.innerText = "刷新中...";
|
||||
btn.disabled = true;
|
||||
|
||||
// 循环切换文件类型（用于演示多种文件）
|
||||
if (currentFileType === 'txt') {
|
||||
currentFileType = 'png';
|
||||
} else if (currentFileType === 'png') {
|
||||
currentFileType = 'pdf';
|
||||
} else {
|
||||
currentFileType = 'txt';
|
||||
}
|
||||
setTimeout(()=>{
|
||||
render();
|
||||
btn.innerText = "🔄 刷新";
|
||||
btn.disabled = false;
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// 更新拖拽元素的提示文本
|
||||
updateDraggableText();
|
||||
});
|
||||
render();
|
||||
</script>
|
||||
|
||||
// 拖拽结束事件
|
||||
draggableElement.addEventListener('dragend', function () {
|
||||
this.classList.remove('drag-target');
|
||||
});
|
||||
|
||||
// 更新拖拽元素的提示文本
|
||||
function updateDraggableText() {
|
||||
const fileTypeNames = {
|
||||
'txt': '文本文件',
|
||||
'png': '图片文件',
|
||||
'pdf': 'PDF文档'
|
||||
};
|
||||
|
||||
const fileTypeElement = draggableElement.querySelector('p');
|
||||
if (fileTypeElement) {
|
||||
fileTypeElement.textContent = `下次拖拽将下载: ${getFileName(currentFileType)} (${fileTypeNames[currentFileType]})`;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化文本
|
||||
updateDraggableText();
|
||||
|
||||
// 添加文件类型选择功能
|
||||
const fileItems = document.querySelectorAll('.file-item');
|
||||
fileItems.forEach((item, index) => {
|
||||
item.addEventListener('click', function () {
|
||||
const types = ['txt', 'png', 'pdf'];
|
||||
currentFileType = types[index];
|
||||
updateDraggableText();
|
||||
|
||||
// 高亮显示选中的文件
|
||||
fileItems.forEach(el => el.style.backgroundColor = '#f8f9fa');
|
||||
this.style.backgroundColor = '#e3f2fd';
|
||||
|
||||
showStatus(`已选择 "${getFileName(currentFileType)}"，现在可以拖拽下载`, 'success');
|
||||
});
|
||||
});
|
||||
|
||||
// 默认选中第一个文件
|
||||
if (fileItems.length > 0) {
|
||||
fileItems[0].style.backgroundColor = '#e3f2fd';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user