完成网页布局
This commit is contained in:
parent
76d8726ee5
commit
c863d3b2e0
@ -269,10 +269,6 @@
|
||||
<div>正在加载任务数据...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-update" id="lastUpdate">
|
||||
最后更新: --
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -352,9 +348,9 @@
|
||||
var progressPercent = Math.round(task.progress * 100) + '%';
|
||||
|
||||
taskHtml += `
|
||||
<div class="task-item" data-id="${task.id}">
|
||||
<div class="task-item" data-id="${task.task_id}">
|
||||
<div class="file-info">
|
||||
<div class="file-name">${task.fileName}</div>
|
||||
<div class="file-name">${task.filename}</div>
|
||||
</div>
|
||||
<div class="progress-container">
|
||||
<div class="layui-progress">
|
||||
@ -375,12 +371,12 @@
|
||||
// 更新任务进度（不重新渲染整个列表）
|
||||
function updateTaskProgress(tasks) {
|
||||
tasks = tasks.data;
|
||||
tasks.forEach(function () {
|
||||
var taskItem = $(`.task-item[data-id="${task.id}"]`);
|
||||
tasks.forEach(function (item) {
|
||||
var taskItem = $(`.task-item[data-id="${item.task_id}"]`);
|
||||
if (taskItem.length > 0) {
|
||||
var progressPercent = Math.round(task.progress * 100) + '%';
|
||||
var statusText = task.status === 'completed' ? '已完成' : '进行中';
|
||||
var statusClass = task.status === 'completed' ? 'status-completed' : 'status-processing';
|
||||
var progressPercent = Math.round(item.progress * 100) + '%';
|
||||
var statusText = item.status === 'completed' ? '已完成' : '进行中';
|
||||
var statusClass = item.status === 'completed' ? 'status-completed' : 'status-processing';
|
||||
|
||||
// 更新进度条
|
||||
var progressBar = taskItem.find('.layui-progress-bar');
|
||||
@ -442,10 +438,12 @@
|
||||
formType: 0,
|
||||
}, function (url, index) {
|
||||
layer.close(index);
|
||||
// 获取token
|
||||
const token = localStorage.getItem('Authorization');
|
||||
|
||||
// 调用检查接口
|
||||
const token = localStorage.getItem('Authorization');
|
||||
const loadingIndex = layer.load(2, {
|
||||
shade: [0.1, '#000']
|
||||
});
|
||||
|
||||
fetch(`/api/check/${encodeURIComponent(url)}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
@ -454,25 +452,187 @@
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log('响应状态:', response.status);
|
||||
console.log('响应头:', response.headers);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('检查URL失败');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('接口返回数据:', data);
|
||||
layer.close(loadingIndex);
|
||||
|
||||
if (data.code !== 200 || !data.data) {
|
||||
layer.msg('接口返回异常', { icon: 2 });
|
||||
return;
|
||||
}
|
||||
|
||||
const { serial_number, title, url: urlList } = data.data;
|
||||
|
||||
// 检测设备类型
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
// 动态生成URL列表HTML - 响应式布局
|
||||
const urlHtml = urlList.map((u, index) => {
|
||||
if (isMobile) {
|
||||
// 手机端布局 - 垂直排列
|
||||
return `
|
||||
<li class="layui-col-xs12" style="padding: 10px 0; border-bottom: 1px solid #f6f6f6;">
|
||||
<div style="word-break: break-all; font-size: 13px; color: #666; margin-bottom: 8px;">
|
||||
${u}
|
||||
</div>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal select-url"
|
||||
data-serial="${serial_number}"
|
||||
data-url="${u}"
|
||||
style="width: 100%;">
|
||||
选择
|
||||
</button>
|
||||
</li>`;
|
||||
} else {
|
||||
// 电脑端布局 - 水平排列
|
||||
return `
|
||||
<li class="layui-row" style="padding: 8px 0; border-bottom: 1px solid #f6f6f6; margin: 0;">
|
||||
<div class="layui-col-xs10" style="word-break: break-all; font-size: 13px; color: #666; line-height: 32px;">
|
||||
${u}
|
||||
</div>
|
||||
<div class="layui-col-xs2" style="text-align: right;">
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal select-url"
|
||||
data-serial="${serial_number}"
|
||||
data-url="${u}">
|
||||
选择
|
||||
</button>
|
||||
</div>
|
||||
</li>`;
|
||||
}
|
||||
}).join('');
|
||||
|
||||
// 响应式弹窗设置
|
||||
const popupSettings = isMobile ? {
|
||||
area: ['90vw', '70vh'],
|
||||
content: `
|
||||
<div style="padding: 15px;">
|
||||
<div class="layui-form-item" style="margin-bottom: 15px;">
|
||||
<label class="layui-form-label" style="width: 80px; padding: 9px 5px;">番号：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="${serial_number || ''}" readonly
|
||||
style="background-color: #f8f8f8; color: #666; font-size: 14px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" style="margin-bottom: 15px;">
|
||||
<label class="layui-form-label" style="width: 80px; padding: 9px 5px;">标题：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="${title || ''}" readonly
|
||||
style="background-color: #f8f8f8; color: #666; font-size: 14px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="width: 80px; padding: 9px 5px;">URL列表：</label>
|
||||
<div class="layui-input-block">
|
||||
<div style="max-height: 40vh; overflow-y: auto; border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px;">
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">${urlHtml || '<li style="padding: 10px; text-align: center; color: #999;">无URL</li>'}</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
} : {
|
||||
area: ['580px', '420px'],
|
||||
content: `
|
||||
<div style="padding: 15px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="width: 100px;">番号：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="${serial_number || ''}" readonly
|
||||
style="background-color: #f8f8f8; color: #666;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="width: 100px;">标题：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" value="${title || ''}" readonly
|
||||
style="background-color: #f8f8f8; color: #666;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="width: 100px;">URL列表：</label>
|
||||
<div class="layui-input-block">
|
||||
<div style="max-height: 200px; overflow-y: auto; border: 1px solid #e6e6e6; border-radius: 2px; padding: 0 10px;">
|
||||
<ul style="list-style: none; padding: 0; margin: 0;">${urlHtml || '<li style="padding: 10px; text-align: center; color: #999;">无URL</li>'}</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const popupIndex = layer.open({
|
||||
type: 1,
|
||||
title: '链接详情',
|
||||
...popupSettings,
|
||||
btn: ['关闭'],
|
||||
success: function (layero) {
|
||||
// 为选择按钮绑定点击事件
|
||||
$(layero).find('.select-url').on('click', function () {
|
||||
const serial = $(this).data('serial');
|
||||
const selectedUrl = $(this).data('url');
|
||||
|
||||
|
||||
// 响应式提示框
|
||||
const msgSettings = isMobile ? {
|
||||
area: ['80vw', 'auto'],
|
||||
time: 4000
|
||||
} : {
|
||||
area: ['400px', 'auto'],
|
||||
time: 3000
|
||||
};
|
||||
const downloadLoading = layer.msg('正在提交下载任务...', {icon: 16, time: 0});
|
||||
fetch('/api/download', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: serial,
|
||||
url: selectedUrl
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('下载任务提交失败');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
layer.close(downloadLoading);
|
||||
if (data.code === 200) {
|
||||
layer.msg('下载任务提交成功', {icon: 1});
|
||||
// 关闭所有弹出层
|
||||
layer.closeAll();
|
||||
// 重新加载任务列表
|
||||
// initTaskList();
|
||||
initTaskList();
|
||||
} else {
|
||||
layer.msg('下载任务提交失败: ' + data.msg, {icon: 2});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('错误信息:', error);
|
||||
layer.msg('添加任务失败: ' + error.message);
|
||||
layer.close(downloadLoading);
|
||||
layer.msg('下载任务提交失败: ' + error.message, {icon: 2});
|
||||
});
|
||||
});
|
||||
},
|
||||
yes: function(index) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
layer.close(loadingIndex);
|
||||
layer.msg('添加任务失败: ' + error.message, { icon: 2, time: 2000 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
initTaskList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -13,7 +13,7 @@ http {
|
||||
default $remote_addr;
|
||||
}
|
||||
server {
|
||||
listen 4560;
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
client_header_buffer_size 64k;
|
||||
large_client_header_buffers 8 128k;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user