293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文章导出 - 百家号管理系统</title>
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="/static/css/icons-local.css">
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 主布局容器 -->
|
||
<div class="app-container">
|
||
<!-- 左侧菜单栏 -->
|
||
<aside class="sidebar">
|
||
<!-- Logo区域 -->
|
||
<div class="sidebar-logo">
|
||
<div class="sidebar-logo-icon">
|
||
<i class="bi bi-cloud-download"></i>
|
||
</div>
|
||
<div class="sidebar-logo-text">
|
||
<div class="sidebar-logo-title">百家号工具</div>
|
||
<div class="sidebar-logo-subtitle">文章导出系统</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜单导航 -->
|
||
<nav class="sidebar-nav">
|
||
<ul class="nav-menu">
|
||
<li class="nav-item">
|
||
<a href="/" class="nav-link active">
|
||
<i class="bi bi-download"></i>
|
||
<span>文章导出</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="/queue" class="nav-link">
|
||
<i class="bi bi-list-task"></i>
|
||
<span>任务队列</span>
|
||
<span class="nav-badge" id="queueBadge" style="display: none;">0</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- 用户信息区域 -->
|
||
<div class="sidebar-user">
|
||
<div class="user-info-card">
|
||
<div class="user-avatar">
|
||
<i class="bi bi-person-fill"></i>
|
||
</div>
|
||
<div class="user-details">
|
||
<div class="user-name">{{ username }}</div>
|
||
<div class="user-role">管理员</div>
|
||
</div>
|
||
<button class="logout-btn" id="logoutBtn" title="登出">
|
||
<i class="bi bi-box-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主内容区域 -->
|
||
<main class="main-content">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="top-navbar">
|
||
<h1 class="navbar-title">
|
||
<i class="bi bi-file-earmark-arrow-down"></i>
|
||
文章导出
|
||
</h1>
|
||
</header>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="content-area">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<h2 class="page-title">
|
||
<i class="bi bi-newspaper"></i>
|
||
百家号文章导出
|
||
</h2>
|
||
<p class="page-description">输入百家号作者主页链接，导出指定时间范围内的文章信息</p>
|
||
</div>
|
||
<!-- 输入表单卡片 -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
<i class="bi bi-link-45deg label-icon"></i>
|
||
百家号作者主页地址
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="authorUrl"
|
||
class="form-input"
|
||
value="https://baijiahao.baidu.com/u?app_id=1700253559210167"
|
||
placeholder="例如：https://baijiahao.baidu.com/u?app_id=1700253559210167"
|
||
>
|
||
<div class="input-hint">
|
||
<i class="bi bi-info-circle"></i>
|
||
请输入完整的百家号作者主页URL地址
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
<i class="bi bi-cookie label-icon"></i>
|
||
Cookie (可选，如果出现登录页面请填写)
|
||
</label>
|
||
<textarea
|
||
id="cookieInput"
|
||
class="form-input form-textarea"
|
||
rows="3"
|
||
placeholder="如果需要登录，请粘贴浏览器中的Cookie"
|
||
></textarea>
|
||
<div class="input-hint">
|
||
<i class="bi bi-info-circle"></i>
|
||
获取方法：打开百家号 → F12开发者工具 → Network → 刷新页面 → 点击任意请求 → 复制Request Headers中的Cookie
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
<i class="bi bi-calendar-range label-icon"></i>
|
||
时间范围
|
||
</label>
|
||
<select id="monthsSelect" class="form-select">
|
||
<option value="0.15" selected>近5天</option>
|
||
<option value="0.33">近10天</option>
|
||
<option value="1">近1个月</option>
|
||
<option value="6">近6个月</option>
|
||
<option value="12">近12个月</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
<i class="bi bi-filter label-icon"></i>
|
||
内容过滤
|
||
</label>
|
||
<div class="checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="articlesOnlyCheckbox" checked>
|
||
<span class="checkbox-text">仅爬取文章（跳过视频内容）</span>
|
||
</label>
|
||
</div>
|
||
<div class="input-hint">
|
||
<i class="bi bi-info-circle"></i>
|
||
勾选后将过滤掉所有视频类型的内容，只保留文章
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 信息卡片 -->
|
||
<div class="card info-card">
|
||
<div class="card-body">
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<i class="bi bi-file-earmark-spreadsheet info-icon"></i>
|
||
<div class="info-content">
|
||
<div class="info-label">导出格式</div>
|
||
<div class="info-value">Excel (.xlsx)</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="bi bi-card-list info-icon"></i>
|
||
<div class="info-content">
|
||
<div class="info-label">导出内容</div>
|
||
<div class="info-value">文章标题、发布时间</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div style="display: flex; gap: 10px;">
|
||
<button id="exportBtn" class="btn btn-primary" style="flex: 1;">
|
||
<i class="bi bi-download"></i>
|
||
即时导出
|
||
</button>
|
||
<button id="addToQueueBtn" class="btn btn-secondary" style="flex: 1;">
|
||
<i class="bi bi-plus-circle"></i>
|
||
添加到队列
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 加载状态 -->
|
||
<div id="loadingBox" class="loading-box" style="display: none;">
|
||
<div class="loading-spinner"></div>
|
||
<p class="loading-text">正在获取文章数据，请稍候...</p>
|
||
|
||
<!-- 进度详情 -->
|
||
<div id="progressDetails" class="progress-details" style="display: none;">
|
||
<div class="progress-bar-container">
|
||
<div id="progressBar" class="progress-bar"></div>
|
||
</div>
|
||
<div class="progress-info">
|
||
<span id="progressMessage" class="progress-message">初始化...</span>
|
||
<span id="progressPercent" class="progress-percent">0%</span>
|
||
</div>
|
||
<div id="progressSteps" class="progress-steps">
|
||
<div class="step-item">
|
||
<i class="bi bi-1-circle"></i>
|
||
<span>解析URL</span>
|
||
</div>
|
||
<div class="step-item">
|
||
<i class="bi bi-2-circle"></i>
|
||
<span>启动浏览器</span>
|
||
</div>
|
||
<div class="step-item">
|
||
<i class="bi bi-3-circle"></i>
|
||
<span>加载页面</span>
|
||
</div>
|
||
<div class="step-item">
|
||
<i class="bi bi-4-circle"></i>
|
||
<span>滚动获取</span>
|
||
</div>
|
||
<div class="step-item">
|
||
<i class="bi bi-5-circle"></i>
|
||
<span>提取数据</span>
|
||
</div>
|
||
<div class="step-item">
|
||
<i class="bi bi-6-circle"></i>
|
||
<span>生成Excel</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结果显示 -->
|
||
<div id="resultBox" class="result-box" style="display: none;">
|
||
<div id="resultMessage" class="result-message"></div>
|
||
<button id="downloadBtn" class="btn btn-success" style="display: none;">
|
||
<i class="bi bi-file-arrow-down"></i>
|
||
下载Excel文件
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 文章预览列表 -->
|
||
<div id="articlePreview" class="card article-preview" style="display: none;">
|
||
<div class="card-header">
|
||
<i class="bi bi-list-ul"></i>
|
||
已提取文章列表
|
||
<span id="articleCount" class="article-count">0篇</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="articleList" class="article-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用说明卡片 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<i class="bi bi-info-circle"></i>
|
||
使用说明
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="info-steps">
|
||
<div class="info-step">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<h4>复制URL</h4>
|
||
<p>在浏览器中打开百家号作者主页，复制完整的URL地址</p>
|
||
</div>
|
||
</div>
|
||
<div class="info-step">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<h4>配置参数</h4>
|
||
<p>选择时间范围和代理设置，如需要可填写Cookie</p>
|
||
</div>
|
||
</div>
|
||
<div class="info-step">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<h4>导出文章</h4>
|
||
<p>点击“即时导出”或“添加到队列”，等待处理完成</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- jQuery - 使用国内CDN -->
|
||
<script src="/static/js/jquery.min.js"></script>
|
||
<script src="/static/js/main.js"></script>
|
||
</body>
|
||
</html>
|