yuming
1324 lines
49 KiB
HTML
1324 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Telegram 下载控制台</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
min-height: 100vh;
|
|
color: #e8e8e8;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header p {
|
|
color: #888;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
color: #00d9ff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-title::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 20px;
|
|
background: linear-gradient(180deg, #00d9ff, #00ff88);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #aaa;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group input, .form-group select {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-group input:focus, .form-group select:focus {
|
|
outline: none;
|
|
border-color: #00d9ff;
|
|
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
.date-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(0, 217, 255, 0.3);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.btn-warning {
|
|
background: linear-gradient(90deg, #ff9500, #ff5e3a);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(255, 149, 0, 0.3);
|
|
}
|
|
|
|
.btn-success {
|
|
background: linear-gradient(90deg, #00ff88, #00d9ff);
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(0, 255, 136, 0.3);
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 16px 32px;
|
|
font-size: 1.1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.status-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.status-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #00ff88;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.download-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.download-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.download-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.download-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.download-name {
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.download-stats {
|
|
margin-left: 16px;
|
|
text-align: right;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.download-percent {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #00d9ff;
|
|
}
|
|
|
|
.download-speed {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.current-config {
|
|
background: rgba(0, 217, 255, 0.1);
|
|
border: 1px solid rgba(0, 217, 255, 0.2);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.config-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.config-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.config-key {
|
|
color: #888;
|
|
}
|
|
|
|
.config-value {
|
|
color: #00ff88;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
}
|
|
|
|
.alert {
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
display: none;
|
|
}
|
|
|
|
.alert-success {
|
|
background: rgba(0, 255, 136, 0.1);
|
|
border: 1px solid rgba(0, 255, 136, 0.3);
|
|
color: #00ff88;
|
|
}
|
|
|
|
.alert-error {
|
|
background: rgba(255, 100, 100, 0.1);
|
|
border: 1px solid rgba(255, 100, 100, 0.3);
|
|
color: #ff6464;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.input-with-btn {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.input-with-btn input {
|
|
flex: 1;
|
|
}
|
|
|
|
.input-with-btn .btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.validation-result {
|
|
margin-top: 12px;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
display: none;
|
|
}
|
|
|
|
.validation-success {
|
|
background: rgba(0, 255, 136, 0.1);
|
|
border: 1px solid rgba(0, 255, 136, 0.3);
|
|
}
|
|
|
|
.validation-error {
|
|
background: rgba(255, 100, 100, 0.1);
|
|
border: 1px solid rgba(255, 100, 100, 0.3);
|
|
}
|
|
|
|
.channel-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.channel-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.channel-details h3 {
|
|
font-size: 1.1rem;
|
|
color: #fff;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.channel-details p {
|
|
font-size: 0.85rem;
|
|
color: #00ff88;
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
border-radius: 50%;
|
|
border-top-color: #00d9ff;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* History List Styles */
|
|
.history-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.history-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.history-item:hover {
|
|
background: rgba(0, 217, 255, 0.1);
|
|
border-color: rgba(0, 217, 255, 0.3);
|
|
}
|
|
|
|
.history-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.history-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #00d9ff33, #00ff8833);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.history-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.history-title {
|
|
font-size: 0.95rem;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.history-meta {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.history-meta span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.history-delete {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: rgba(255, 100, 100, 0.1);
|
|
border-radius: 6px;
|
|
color: #ff6464;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.history-item:hover .history-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.history-delete:hover {
|
|
background: rgba(255, 100, 100, 0.2);
|
|
}
|
|
|
|
.history-empty {
|
|
text-align: center;
|
|
padding: 30px;
|
|
color: #666;
|
|
}
|
|
|
|
.history-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.history-header .card-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn-text {
|
|
background: none;
|
|
border: none;
|
|
color: #ff6464;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-text:hover {
|
|
background: rgba(255, 100, 100, 0.1);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.date-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.status-bar {
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.status-item {
|
|
flex: 1;
|
|
min-width: 80px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📥 Telegram 下载控制台</h1>
|
|
<p>配置频道和时间范围，一键下载媒体文件</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">当前配置</div>
|
|
<div id="alert-box" class="alert"></div>
|
|
<div class="current-config" id="current-config">
|
|
<div class="config-item">
|
|
<span class="config-key">频道</span>
|
|
<span class="config-value" id="cfg-channel">加载中...</span>
|
|
</div>
|
|
<div class="config-item">
|
|
<span class="config-key">时间过滤</span>
|
|
<span class="config-value" id="cfg-filter">加载中...</span>
|
|
</div>
|
|
<div class="config-item">
|
|
<span class="config-key">保存路径</span>
|
|
<span class="config-value" id="cfg-path">加载中...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史频道 -->
|
|
<div class="card" id="history-card">
|
|
<div class="history-header">
|
|
<div class="card-title">📜 历史频道</div>
|
|
<button type="button" class="btn-text" id="clear-history-btn" onclick="clearHistory()" style="display: none;">
|
|
🗑️ 清空历史
|
|
</button>
|
|
</div>
|
|
<div class="history-list" id="history-list">
|
|
<div class="history-empty">
|
|
<p>暂无历史记录</p>
|
|
<p style="font-size: 0.8rem; margin-top: 8px;">配置过的频道会显示在这里</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">新建下载任务</div>
|
|
<form id="download-form">
|
|
<div class="form-group">
|
|
<label>频道链接或用户名</label>
|
|
<div class="input-with-btn">
|
|
<input type="text" id="channel-input" placeholder="例如: https://t.me/happycat03 或 happycat03" required>
|
|
<button type="button" class="btn btn-secondary" id="validate-btn" onclick="validateChannel()">
|
|
🔍 验证频道
|
|
</button>
|
|
</div>
|
|
<p class="hint">支持 t.me 链接、@用户名 或直接输入用户名</p>
|
|
</div>
|
|
|
|
<!-- 频道验证结果 -->
|
|
<div id="validation-result" class="validation-result">
|
|
<div class="channel-info">
|
|
<div class="channel-icon" id="channel-icon">📺</div>
|
|
<div class="channel-details">
|
|
<h3 id="channel-title">频道名称</h3>
|
|
<p id="channel-type">类型: 频道</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-row">
|
|
<div class="form-group">
|
|
<label>开始日期</label>
|
|
<input type="date" id="start-date" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>结束日期（可选）</label>
|
|
<input type="date" id="end-date">
|
|
<p class="hint">留空表示下载到最新</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" style="flex-wrap: wrap;">
|
|
<button type="button" class="btn btn-primary" id="restart-btn" onclick="saveAndRestart()">
|
|
🔄 保存并重启下载
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" onclick="location.href='/'">
|
|
📊 查看下载进度
|
|
</button>
|
|
</div>
|
|
<p class="hint" style="margin-top: 12px; text-align: center;">
|
|
💡 建议先点击"验证频道"确认频道有效后，再保存配置
|
|
</p>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">下载控制</div>
|
|
<div style="margin-bottom: 20px;">
|
|
<button type="button" class="btn btn-large btn-warning" id="pause-btn" onclick="toggleDownload()">
|
|
⏸️ 暂停下载
|
|
</button>
|
|
</div>
|
|
<div id="pause-status" style="text-align: center; margin-bottom: 16px; color: #888; font-size: 0.9rem;">
|
|
状态: <span id="current-state" style="color: #00ff88;">下载中</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-title">📊 任务进度</div>
|
|
<!-- 当前任务信息 -->
|
|
<div id="task-info" class="current-config" style="display: none;">
|
|
<div class="config-item">
|
|
<span class="config-key">当前频道</span>
|
|
<span class="config-value" id="task-chat">-</span>
|
|
</div>
|
|
<div class="config-item">
|
|
<span class="config-key">任务状态</span>
|
|
<span class="config-value" id="task-status">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<div class="status-item">
|
|
<div class="status-value" id="download-speed">0 B/s</div>
|
|
<div class="status-label">下载速度</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-value" id="downloading-count">0</div>
|
|
<div class="status-label">下载中</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-value" id="completed-count">0</div>
|
|
<div class="status-label">已完成</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<div class="status-value" id="skipped-count" style="color: #ff9500;">0</div>
|
|
<div class="status-label">已跳过</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="download-list" id="download-list">
|
|
<div class="empty-state" id="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
<p id="empty-state-text">暂无下载任务</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; padding: 20px; color: #666; font-size: 0.8rem;">
|
|
Telegram Media Downloader v<span id="version">2.2.5</span>
|
|
<br>
|
|
<span style="color: #00ff88;">✅ 点击"保存并重启下载"将自动保存配置并重启程序开始下载</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 存储验证后的频道信息
|
|
let validatedChannel = null;
|
|
|
|
// 解析频道链接
|
|
function parseChannelId(input) {
|
|
input = input.trim();
|
|
// https://t.me/xxx 格式
|
|
const tmeMatch = input.match(/t\.me\/([a-zA-Z0-9_]+)/);
|
|
if (tmeMatch) return tmeMatch[1];
|
|
// @xxx 格式
|
|
if (input.startsWith('@')) return input.substring(1);
|
|
// 直接返回
|
|
return input;
|
|
}
|
|
|
|
// 加载当前配置
|
|
function loadConfig() {
|
|
fetch('/api/get_config')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('cfg-channel').textContent = data.chat_id || '未配置';
|
|
document.getElementById('cfg-filter').textContent = data.download_filter || '无';
|
|
document.getElementById('cfg-path').textContent = data.save_path || '默认路径';
|
|
})
|
|
.catch(() => {
|
|
document.getElementById('cfg-channel').textContent = '获取失败';
|
|
});
|
|
}
|
|
|
|
// 类型图标映射
|
|
const typeIconMap = {
|
|
'CHANNEL': '📺',
|
|
'SUPERGROUP': '👥',
|
|
'GROUP': '👥',
|
|
'PRIVATE': '👤',
|
|
'BOT': '🤖'
|
|
};
|
|
|
|
// 格式化时间
|
|
function formatTime(isoString) {
|
|
if (!isoString) return '';
|
|
const date = new Date(isoString);
|
|
const now = new Date();
|
|
const diff = now - date;
|
|
|
|
if (diff < 60000) return '刚刚';
|
|
if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
|
|
if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前';
|
|
if (diff < 604800000) return Math.floor(diff / 86400000) + '天前';
|
|
|
|
return date.toLocaleDateString('zh-CN');
|
|
}
|
|
|
|
// 加载历史频道
|
|
function loadChannelHistory() {
|
|
fetch('/api/channel_history')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const listEl = document.getElementById('history-list');
|
|
const clearBtn = document.getElementById('clear-history-btn');
|
|
|
|
if (!data.success || !data.history || data.history.length === 0) {
|
|
listEl.innerHTML = `
|
|
<div class="history-empty">
|
|
<p>暂无历史记录</p>
|
|
<p style="font-size: 0.8rem; margin-top: 8px;">配置过的频道会显示在这里</p>
|
|
</div>
|
|
`;
|
|
clearBtn.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
clearBtn.style.display = 'block';
|
|
|
|
listEl.innerHTML = data.history.map(item => `
|
|
<div class="history-item" onclick="selectHistory('${item.chat_id}', '${(item.chat_title || '').replace(/'/g, "\\'")}', '${item.chat_type || ''}')">
|
|
<div class="history-icon">${typeIconMap[item.chat_type] || '📁'}</div>
|
|
<div class="history-info">
|
|
<div class="history-title">${item.chat_title || item.chat_id}</div>
|
|
<div class="history-meta">
|
|
<span>@${item.chat_id}</span>
|
|
<span>🕐 ${formatTime(item.last_used)}</span>
|
|
${item.use_count > 1 ? `<span>📊 使用 ${item.use_count} 次</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<button class="history-delete" onclick="event.stopPropagation(); deleteHistory('${item.chat_id}')" title="删除">
|
|
🗑️
|
|
</button>
|
|
</div>
|
|
`).join('');
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to load history:', err);
|
|
});
|
|
}
|
|
|
|
// 选择历史频道
|
|
function selectHistory(chatId, chatTitle, chatType) {
|
|
document.getElementById('channel-input').value = chatId;
|
|
|
|
// 设置已验证状态
|
|
validatedChannel = {
|
|
valid: true,
|
|
chat_id: chatId,
|
|
chat_title: chatTitle || chatId,
|
|
chat_type: chatType
|
|
};
|
|
|
|
// 显示验证结果
|
|
showValidationResult(validatedChannel);
|
|
|
|
showAlert(`已选择: ${chatTitle || chatId}`, 'success');
|
|
|
|
// 滚动到表单
|
|
document.getElementById('download-form').scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
// 删除历史记录
|
|
function deleteHistory(chatId) {
|
|
if (!confirm('确定要删除这条历史记录吗？')) return;
|
|
|
|
fetch(`/api/channel_history/${encodeURIComponent(chatId)}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
loadChannelHistory();
|
|
showAlert('已删除', 'success');
|
|
} else {
|
|
showAlert('删除失败: ' + (data.error || '未知错误'), 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showAlert('删除失败: ' + err.message, 'error');
|
|
});
|
|
}
|
|
|
|
// 清空历史记录
|
|
function clearHistory() {
|
|
if (!confirm('确定要清空所有历史记录吗？此操作不可恢复。')) return;
|
|
|
|
fetch('/api/channel_history/clear', {
|
|
method: 'POST'
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
loadChannelHistory();
|
|
showAlert('历史记录已清空', 'success');
|
|
} else {
|
|
showAlert('清空失败: ' + (data.error || '未知错误'), 'error');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showAlert('清空失败: ' + err.message, 'error');
|
|
});
|
|
}
|
|
|
|
// 显示提示
|
|
function showAlert(message, type) {
|
|
const alertBox = document.getElementById('alert-box');
|
|
alertBox.textContent = message;
|
|
alertBox.className = 'alert alert-' + type;
|
|
alertBox.style.display = 'block';
|
|
setTimeout(() => {
|
|
alertBox.style.display = 'none';
|
|
}, 5000);
|
|
}
|
|
|
|
// 显示验证结果
|
|
function showValidationResult(result) {
|
|
const resultEl = document.getElementById('validation-result');
|
|
const titleEl = document.getElementById('channel-title');
|
|
const typeEl = document.getElementById('channel-type');
|
|
const iconEl = document.getElementById('channel-icon');
|
|
|
|
if (result.valid) {
|
|
validatedChannel = result;
|
|
resultEl.className = 'validation-result validation-success';
|
|
titleEl.textContent = result.chat_title;
|
|
|
|
// 根据类型显示不同图标
|
|
const typeMap = {
|
|
'CHANNEL': { icon: '📺', name: '频道' },
|
|
'SUPERGROUP': { icon: '👥', name: '超级群组' },
|
|
'GROUP': { icon: '👥', name: '群组' },
|
|
'PRIVATE': { icon: '👤', name: '私聊' },
|
|
'BOT': { icon: '🤖', name: '机器人' }
|
|
};
|
|
const typeInfo = typeMap[result.chat_type] || { icon: '📁', name: result.chat_type };
|
|
iconEl.textContent = typeInfo.icon;
|
|
typeEl.textContent = `类型: ${typeInfo.name}`;
|
|
typeEl.style.color = '#00ff88';
|
|
} else {
|
|
validatedChannel = null;
|
|
resultEl.className = 'validation-result validation-error';
|
|
titleEl.textContent = '验证失败';
|
|
iconEl.textContent = '❌';
|
|
typeEl.textContent = result.error;
|
|
typeEl.style.color = '#ff6464';
|
|
}
|
|
|
|
resultEl.style.display = 'block';
|
|
}
|
|
|
|
// 验证频道
|
|
function validateChannel() {
|
|
const channelInput = document.getElementById('channel-input').value;
|
|
const channelId = parseChannelId(channelInput);
|
|
|
|
if (!channelId) {
|
|
showAlert('请输入频道链接或用户名', 'error');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('validate-btn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner"></span> 验证中...';
|
|
|
|
// 隐藏之前的结果
|
|
document.getElementById('validation-result').style.display = 'none';
|
|
validatedChannel = null;
|
|
|
|
fetch('/api/validate_chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ chat_id: channelId })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
showValidationResult(data);
|
|
if (data.valid) {
|
|
showAlert(`✅ 已验证: ${data.chat_title}`, 'success');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showValidationResult({ valid: false, error: err.message });
|
|
showAlert('验证失败: ' + err.message, 'error');
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.textContent = '🔍 验证频道';
|
|
});
|
|
}
|
|
|
|
// 当输入框内容变化时，清除验证状态
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('channel-input').addEventListener('input', function() {
|
|
validatedChannel = null;
|
|
document.getElementById('validation-result').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
// 保存并重启
|
|
function saveAndRestart() {
|
|
const channelInput = document.getElementById('channel-input').value;
|
|
const startDate = document.getElementById('start-date').value;
|
|
const endDate = document.getElementById('end-date').value;
|
|
|
|
const channelId = parseChannelId(channelInput);
|
|
|
|
if (!channelId) {
|
|
showAlert('请输入有效的频道链接或用户名', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!startDate) {
|
|
showAlert('请选择开始日期', 'error');
|
|
return;
|
|
}
|
|
|
|
// 如果还没验证，先进行验证
|
|
if (!validatedChannel) {
|
|
const btn = document.getElementById('restart-btn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner"></span> 验证频道中...';
|
|
|
|
fetch('/api/validate_chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ chat_id: channelId })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.valid) {
|
|
showValidationResult(data);
|
|
// 验证成功，继续保存
|
|
doSaveAndRestart(channelId, startDate, endDate, data.chat_title, data.chat_type);
|
|
} else {
|
|
showValidationResult(data);
|
|
showAlert('频道验证失败: ' + data.error, 'error');
|
|
btn.disabled = false;
|
|
btn.textContent = '🔄 保存并重启下载';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showAlert('验证失败: ' + err.message, 'error');
|
|
btn.disabled = false;
|
|
btn.textContent = '🔄 保存并重启下载';
|
|
});
|
|
} else {
|
|
// 已验证，直接保存
|
|
doSaveAndRestart(channelId, startDate, endDate, validatedChannel.chat_title, validatedChannel.chat_type);
|
|
}
|
|
}
|
|
|
|
// 执行保存并重启
|
|
function doSaveAndRestart(channelId, startDate, endDate, chatTitle, chatType) {
|
|
const btn = document.getElementById('restart-btn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner"></span> 正在重启...';
|
|
|
|
fetch('/api/save_and_restart', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
chat_id: channelId,
|
|
start_date: startDate,
|
|
end_date: endDate,
|
|
chat_title: chatTitle,
|
|
chat_type: chatType || ''
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showAlert('✅ ' + data.message + ' 页面将在5秒后刷新...', 'success');
|
|
// 等待程序重启后刷新页面
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 5000);
|
|
} else {
|
|
showAlert('操作失败: ' + (data.error || '未知错误'), 'error');
|
|
btn.disabled = false;
|
|
btn.textContent = '🔄 保存并重启下载';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
showAlert('操作失败: ' + err.message, 'error');
|
|
btn.disabled = false;
|
|
btn.textContent = '🔄 保存并重启下载';
|
|
});
|
|
}
|
|
|
|
// 表单提交时使用保存并重启
|
|
document.getElementById('download-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
saveAndRestart();
|
|
});
|
|
|
|
// 更新下载状态
|
|
function updateDownloadStatus() {
|
|
fetch('/get_download_status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
// 后端已处理：暂停时返回0，直接显示即可
|
|
document.getElementById('download-speed').textContent = data.download_speed || '0 B/s';
|
|
|
|
// 保存当前暂停状态供任务进度使用
|
|
window.currentDownloadState = data.state; // 'pause' = 下载中, 'continue' = 已暂停
|
|
})
|
|
.catch(() => {});
|
|
|
|
// 获取任务进度
|
|
fetch('/api/task_progress')
|
|
.then(r => r.json())
|
|
.then(progress => {
|
|
const taskInfo = document.getElementById('task-info');
|
|
const taskChat = document.getElementById('task-chat');
|
|
const taskStatus = document.getElementById('task-status');
|
|
const skippedCount = document.getElementById('skipped-count');
|
|
const emptyStateText = document.getElementById('empty-state-text');
|
|
|
|
// 更新跳过计数
|
|
skippedCount.textContent = progress.skipped_files || 0;
|
|
|
|
// 检查是否暂停
|
|
const isPaused = window.currentDownloadState === 'continue';
|
|
|
|
// 如果有当前任务
|
|
if (progress.current_chat) {
|
|
taskInfo.style.display = 'block';
|
|
taskChat.textContent = progress.current_chat_title || progress.current_chat;
|
|
|
|
const downloading = progress.downloading_files || 0;
|
|
const completed = progress.completed_files || 0;
|
|
const skipped = progress.skipped_files || 0;
|
|
|
|
// 根据检查状态、下载状态和暂停状态综合判断
|
|
if (progress.is_checking && isPaused) {
|
|
// 检查中 + 用户暂停了下载
|
|
taskStatus.textContent = `⏸️🔍 已暂停下载，正在检查文件... (已跳过${skipped}个)`;
|
|
taskStatus.style.color = '#ff9500';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = `下载已暂停，文件检查继续中...`;
|
|
}
|
|
} else if (progress.is_checking && downloading > 0) {
|
|
// 边检查边下载
|
|
taskStatus.textContent = `🔍🚀 正在检查文件并下载 (${downloading}个下载中, 已跳过${skipped}个)`;
|
|
taskStatus.style.color = '#00d9ff';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = `正在检查文件并下载...`;
|
|
}
|
|
} else if (progress.is_checking) {
|
|
// 仅检查中
|
|
taskStatus.textContent = `🔍 正在检查文件... (已跳过 ${skipped} 个)`;
|
|
taskStatus.style.color = '#00d9ff';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = `正在检查文件，已跳过 ${skipped} 个已下载文件...`;
|
|
}
|
|
} else if (isPaused) {
|
|
// 检查完成，用户点击了暂停
|
|
taskStatus.textContent = `⏸️ 已暂停下载 (已完成${completed}个, 跳过${skipped}个)`;
|
|
taskStatus.style.color = '#ff9500';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = '检查完成，下载已暂停';
|
|
}
|
|
} else if (downloading > 0) {
|
|
// 检查完成，正在下载
|
|
taskStatus.textContent = `🚀 下载中 (${downloading}个下载中, 已完成${completed}个, 跳过${skipped}个)`;
|
|
taskStatus.style.color = '#00ff88';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = `正在下载...`;
|
|
}
|
|
} else if (completed > 0 || skipped > 0) {
|
|
// 全部完成
|
|
taskStatus.textContent = `✅ 任务完成 (已完成${completed}个, 跳过${skipped}个)`;
|
|
taskStatus.style.color = '#00ff88';
|
|
|
|
if (emptyStateText) {
|
|
emptyStateText.textContent = `所有任务已完成`;
|
|
}
|
|
} else {
|
|
taskStatus.textContent = '⏳ 等待中';
|
|
taskStatus.style.color = '#888';
|
|
}
|
|
} else {
|
|
// 无当前任务时，根据暂停状态显示
|
|
if (isPaused) {
|
|
taskInfo.style.display = 'block';
|
|
taskChat.textContent = '-';
|
|
taskStatus.textContent = '⏸️ 已暂停下载';
|
|
taskStatus.style.color = '#ff9500';
|
|
} else {
|
|
taskInfo.style.display = 'none';
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
|
|
fetch('/get_download_list?already_down=false')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const downloadingCount = data.filter(d => d.download_progress < 100).length;
|
|
const completedCount = data.filter(d => d.download_progress >= 100).length;
|
|
|
|
document.getElementById('downloading-count').textContent = downloadingCount;
|
|
document.getElementById('completed-count').textContent = completedCount;
|
|
|
|
const listEl = document.getElementById('download-list');
|
|
|
|
if (data.length === 0) {
|
|
// 保留空状态但不覆盖检查中的提示
|
|
const existingEmpty = listEl.querySelector('.empty-state');
|
|
if (!existingEmpty) {
|
|
listEl.innerHTML = `
|
|
<div class="empty-state" id="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
<p id="empty-state-text">暂无下载任务</p>
|
|
</div>
|
|
`;
|
|
}
|
|
return;
|
|
}
|
|
|
|
listEl.innerHTML = data.map(item => `
|
|
<div class="download-item">
|
|
<div class="download-info">
|
|
<div class="download-name" title="${item.filename}">${item.filename}</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${item.download_progress}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="download-stats">
|
|
<div class="download-percent">${item.download_progress}%</div>
|
|
<div class="download-speed">${item.download_speed}</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// 设置默认日期
|
|
document.getElementById('start-date').value = '2024-01-01';
|
|
|
|
// 初始化
|
|
loadConfig();
|
|
loadChannelHistory();
|
|
updateDownloadStatus();
|
|
setInterval(updateDownloadStatus, 2000);
|
|
|
|
// 获取版本
|
|
fetch('/get_app_version')
|
|
.then(r => r.text())
|
|
.then(v => document.getElementById('version').textContent = v)
|
|
.catch(() => {});
|
|
|
|
// 当前下载状态
|
|
let isDownloading = true;
|
|
|
|
// 切换下载状态（暂停/继续）
|
|
function toggleDownload() {
|
|
const btn = document.getElementById('pause-btn');
|
|
const stateEl = document.getElementById('current-state');
|
|
|
|
btn.disabled = true;
|
|
|
|
const action = isDownloading ? 'pause' : 'continue';
|
|
|
|
fetch('/set_download_state?state=' + action, {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
})
|
|
.then(r => {
|
|
if (r.redirected || r.status === 401 || r.status === 302) {
|
|
// 需要登录，跳转到登录页
|
|
window.location.href = '/login';
|
|
throw new Error('需要登录');
|
|
}
|
|
return r.text();
|
|
})
|
|
.then(response => {
|
|
// 响应是下一个操作: "pause" 表示当前是下载中，"continue" 表示当前是暂停
|
|
const taskStatus = document.getElementById('task-status');
|
|
|
|
if (response === 'pause') {
|
|
isDownloading = true;
|
|
window.currentDownloadState = 'pause';
|
|
btn.textContent = '⏸️ 暂停下载';
|
|
btn.className = 'btn btn-large btn-warning';
|
|
stateEl.textContent = '下载中';
|
|
stateEl.style.color = '#00ff88';
|
|
// 任务状态由 updateDownloadStatus 自动更新（保持检查状态或显示下载中）
|
|
showAlert('已恢复下载', 'success');
|
|
} else if (response === 'continue') {
|
|
isDownloading = false;
|
|
window.currentDownloadState = 'continue';
|
|
btn.textContent = '▶️ 继续下载';
|
|
btn.className = 'btn btn-large btn-success';
|
|
stateEl.textContent = '已暂停';
|
|
stateEl.style.color = '#ff9500';
|
|
// 暂停时清零速度显示
|
|
document.getElementById('download-speed').textContent = '0 B/s';
|
|
// 任务状态由 updateDownloadStatus 自动更新（检查中继续显示检查，检查完成后显示暂停）
|
|
showAlert('已暂停下载（文件检查将继续完成）', 'success');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (err.message !== '需要登录') {
|
|
showAlert('操作失败: ' + err.message, 'error');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
|
|
// 获取当前下载状态
|
|
function checkDownloadState() {
|
|
fetch('/get_download_status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const btn = document.getElementById('pause-btn');
|
|
const stateEl = document.getElementById('current-state');
|
|
|
|
// 保存全局状态
|
|
window.currentDownloadState = data.state;
|
|
|
|
// data.state 是 "pause" 表示当前下载中可以暂停，"continue" 表示当前暂停可以继续
|
|
if (data.state === 'pause') {
|
|
isDownloading = true;
|
|
btn.textContent = '⏸️ 暂停下载';
|
|
btn.className = 'btn btn-large btn-warning';
|
|
stateEl.textContent = '下载中';
|
|
stateEl.style.color = '#00ff88';
|
|
} else {
|
|
isDownloading = false;
|
|
btn.textContent = '▶️ 继续下载';
|
|
btn.className = 'btn btn-large btn-success';
|
|
stateEl.textContent = '已暂停';
|
|
stateEl.style.color = '#ff9500';
|
|
// 暂停时清零速度显示
|
|
document.getElementById('download-speed').textContent = '0 B/s';
|
|
// 任务状态由 updateDownloadStatus 自动更新（根据检查状态和暂停状态综合判断）
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// 初始化时检查状态
|
|
checkDownloadState();
|
|
</script>
|
|
</body>
|
|
</html>
|