zhaojunlong
40118ec508
feat(config): 添加任务配置中的模型模式支持 - 在config.json中为任务添加mode和useBrowser字段 - 默认使用glm-5模型模式 feat(ui): 更新前端界面显示模型信息并添加模型选择功能 - 在任务表格中添加模型列显示 - 在新增/编辑任务表单中添加模型选择下拉框 - 支持多种模型选项包括qwen3.5-plus、qwen3-max等 - 更新表格列数以适应新增的模型列 feat(core): 实现任务模型模式的功能支持 - 在agentService.js中添加normalizeMode函数处理模型模式 - 修改createTask和runAgentTask函数支持mode参数 - 在scheduler.js中实现任务的模型模式配置 - 在server.js中添加模型模式的标准化和API支持 - 为任务运行时添加模型模式的日志输出 ```
1010 lines
42 KiB
HTML
1010 lines
42 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>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Fira+Code:wght@500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
||
|
||
:root {
|
||
--primary: #0f6ecd;
|
||
--primary-hover: #0c5caf;
|
||
--secondary: #0ea5a4;
|
||
--accent: #f59e0b;
|
||
--success: #0f9d58;
|
||
--danger: #d94848;
|
||
--text: #10233a;
|
||
--muted: #4f647d;
|
||
--line: rgba(15, 35, 58, 0.14);
|
||
--surface: rgba(255, 255, 255, 0.64);
|
||
--surface-strong: rgba(255, 255, 255, 0.82);
|
||
--shadow: 0 24px 50px rgba(15, 42, 74, 0.18);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Fira Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
background:
|
||
radial-gradient(1200px 600px at -10% -10%, rgba(15, 110, 205, 0.20), transparent 60%),
|
||
radial-gradient(900px 500px at 110% -20%, rgba(14, 165, 164, 0.20), transparent 55%),
|
||
linear-gradient(145deg, #edf6ff 0%, #e8fbf6 48%, #f7fbff 100%);
|
||
}
|
||
|
||
.container {
|
||
max-width: 1140px;
|
||
margin: 0 auto;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
background: var(--surface);
|
||
backdrop-filter: blur(18px);
|
||
-webkit-backdrop-filter: blur(18px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.header {
|
||
padding: 26px 30px;
|
||
text-align: center;
|
||
color: #f6fbff;
|
||
background: linear-gradient(120deg, #0f6ecd 0%, #0e9ab2 68%, #10b981 100%);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
|
||
}
|
||
|
||
.header h1 {
|
||
font-family: 'Fira Code', 'Noto Sans SC', sans-serif;
|
||
letter-spacing: 0.2px;
|
||
font-size: 24px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.header p { opacity: 0.92; font-size: 13px; }
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 6px;
|
||
padding: 8px;
|
||
background: rgba(255, 255, 255, 0.36);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.tab {
|
||
flex: 1;
|
||
padding: 12px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
border-radius: 10px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.tab:hover {
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.56);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
.tab.active {
|
||
color: var(--primary);
|
||
background: var(--surface-strong);
|
||
border-color: rgba(15, 110, 205, 0.30);
|
||
box-shadow: inset 0 0 0 1px rgba(15, 110, 205, 0.12);
|
||
}
|
||
|
||
.content { padding: 24px; }
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
|
||
label {
|
||
display: block;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
}
|
||
|
||
input[type="text"], input[type="number"], input[type="password"], textarea, select {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
background: rgba(255, 255, 255, 0.76);
|
||
color: var(--text);
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||
}
|
||
|
||
input:focus, textarea:focus, select:focus {
|
||
outline: none;
|
||
border-color: rgba(15, 110, 205, 0.55);
|
||
box-shadow: 0 0 0 3px rgba(15, 110, 205, 0.12);
|
||
background: #ffffff;
|
||
}
|
||
|
||
textarea {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-row { display: flex; gap: 16px; }
|
||
.form-row > * { flex: 1; }
|
||
|
||
.btn {
|
||
padding: 10px 18px;
|
||
border: 1px solid transparent;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.btn-primary {
|
||
color: #fff;
|
||
background: linear-gradient(120deg, var(--primary), #178ac2);
|
||
box-shadow: 0 8px 18px rgba(15, 110, 205, 0.25);
|
||
}
|
||
|
||
.btn-primary:hover { background: linear-gradient(120deg, var(--primary-hover), #1279aa); }
|
||
|
||
.btn-success {
|
||
color: #fff;
|
||
background: linear-gradient(120deg, #0f9d58, #14b46c);
|
||
box-shadow: 0 8px 16px rgba(15, 157, 88, 0.24);
|
||
}
|
||
|
||
.btn-success:hover { filter: brightness(0.96); }
|
||
|
||
.btn-danger {
|
||
color: #fff;
|
||
background: linear-gradient(120deg, #d94848, #e26a5f);
|
||
box-shadow: 0 8px 16px rgba(217, 72, 72, 0.22);
|
||
}
|
||
|
||
.btn-danger:hover { filter: brightness(0.96); }
|
||
|
||
.btn-secondary {
|
||
color: #1e3856;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
.btn-secondary:hover { background: #ffffff; }
|
||
|
||
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
|
||
|
||
table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; }
|
||
|
||
th {
|
||
background: rgba(15, 110, 205, 0.12);
|
||
padding: 12px;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
color: #19446f;
|
||
border-bottom: 1px solid rgba(15, 110, 205, 0.22);
|
||
}
|
||
|
||
td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid rgba(15, 35, 58, 0.08);
|
||
font-size: 13px;
|
||
color: #203a58;
|
||
vertical-align: top;
|
||
background: rgba(255, 255, 255, 0.42);
|
||
}
|
||
|
||
tr:hover td { background: rgba(255, 255, 255, 0.74); }
|
||
|
||
.prompt-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.tag-on { background: rgba(15, 157, 88, 0.12); color: #0b7f47; border-color: rgba(15, 157, 88, 0.24); }
|
||
.tag-off { background: rgba(217, 72, 72, 0.12); color: #b83b3b; border-color: rgba(217, 72, 72, 0.24); }
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(9, 20, 36, 0.34);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
backdrop-filter: blur(4px);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.modal.show { display: flex; }
|
||
|
||
.modal-body {
|
||
border-radius: 16px;
|
||
padding: 26px;
|
||
width: 620px;
|
||
max-width: 92vw;
|
||
max-height: 86vh;
|
||
overflow-y: auto;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid var(--line);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.modal-body h3 { margin-bottom: 20px; color: var(--text); }
|
||
|
||
.status-box {
|
||
padding: 14px;
|
||
border-radius: 10px;
|
||
margin-top: 16px;
|
||
font-size: 14px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.status-info {
|
||
background: rgba(15, 110, 205, 0.10);
|
||
color: #0f5eab;
|
||
border-color: rgba(15, 110, 205, 0.24);
|
||
}
|
||
|
||
.status-success {
|
||
background: rgba(15, 157, 88, 0.10);
|
||
color: #0f7f4b;
|
||
border-color: rgba(15, 157, 88, 0.24);
|
||
}
|
||
|
||
.status-error {
|
||
background: rgba(217, 72, 72, 0.10);
|
||
color: #b43d3d;
|
||
border-color: rgba(217, 72, 72, 0.24);
|
||
}
|
||
|
||
.empty-state { text-align: center; padding: 42px; color: var(--muted); }
|
||
|
||
.result-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.result-card:hover {
|
||
border-color: rgba(15, 110, 205, 0.30);
|
||
box-shadow: 0 10px 26px rgba(15, 42, 74, 0.14);
|
||
}
|
||
|
||
.result-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.result-card-header h4 { font-size: 15px; color: #17395b; }
|
||
.result-card-header span { font-size: 12px; color: var(--muted); }
|
||
|
||
.result-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(15, 35, 58, 0.08);
|
||
gap: 12px;
|
||
}
|
||
|
||
.result-item:last-child { border-bottom: none; }
|
||
.result-item .type { min-width: 80px; font-weight: 700; color: var(--primary); font-size: 13px; }
|
||
.result-item .name { flex: 1; font-size: 13px; color: #1f3957; }
|
||
.result-item .amount { min-width: 100px; text-align: right; font-weight: 700; color: #ad5b1a; font-size: 13px; }
|
||
.result-item .date { min-width: 90px; text-align: center; color: var(--muted); font-size: 12px; }
|
||
.result-item a { color: var(--primary); text-decoration: none; font-size: 12px; }
|
||
.result-item a:hover { text-decoration: underline; }
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.config-section {
|
||
background: rgba(255, 255, 255, 0.58);
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.config-section h3 {
|
||
margin-bottom: 14px;
|
||
font-size: 16px;
|
||
color: #19446f;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
body { padding: 12px; }
|
||
.content { padding: 14px; }
|
||
.form-row { flex-direction: column; gap: 10px; }
|
||
.header { padding: 20px 16px; }
|
||
.header h1 { font-size: 20px; }
|
||
.tabs { padding: 6px; }
|
||
.tab { font-size: 14px; padding: 10px 6px; }
|
||
.btn { padding: 9px 14px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
transition: none !important;
|
||
animation: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>公告抓取与分析工具</h1>
|
||
<p>基于 Agent API 的智能公告信息采集</p>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" onclick="switchTab('tasks')">任务配置</button>
|
||
<button class="tab" onclick="switchTab('results')">抓取结果</button>
|
||
<button class="tab" onclick="switchTab('settings')">系统设置</button>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<!-- ===== 任务配置 Tab ===== -->
|
||
<div id="tab-tasks" class="tab-content active">
|
||
<div class="toolbar">
|
||
<div>
|
||
<button class="btn btn-primary" onclick="openTaskModal()">+ 新增任务</button>
|
||
<button class="btn btn-success" id="btnRunAll" onclick="runAllTasks()">运行全部启用</button>
|
||
</div>
|
||
<div style="font-size:13px;color:#888;" id="taskSummary"></div>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>城市</th>
|
||
<th>提示词</th>
|
||
<th>模型</th>
|
||
<th>状态</th>
|
||
<th>浏览器</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tasksTbody">
|
||
<tr><td colspan="6" class="empty-state">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div id="batchRunStatus" class="status-box status-info" style="display:none;"></div>
|
||
</div>
|
||
|
||
<!-- ===== 抓取结果 Tab ===== -->
|
||
<div id="tab-results" class="tab-content">
|
||
<div class="toolbar">
|
||
<div style="display:flex;gap:10px;align-items:center;">
|
||
<select id="filterCity" onchange="loadResults()" style="width:auto;">
|
||
<option value="">全部城市</option>
|
||
</select>
|
||
<button class="btn btn-secondary btn-sm" onclick="loadResults()">刷新</button>
|
||
</div>
|
||
<button class="btn btn-danger btn-sm" onclick="clearResults()">清空全部</button>
|
||
</div>
|
||
|
||
<div id="resultsList"></div>
|
||
<div id="resultsPagination" style="text-align:center;margin-top:16px;"></div>
|
||
</div>
|
||
|
||
<!-- ===== 系统设置 Tab ===== -->
|
||
<div id="tab-settings" class="tab-content">
|
||
<!-- Agent 配置 -->
|
||
<div class="config-section">
|
||
<h3>Agent 服务配置</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>服务地址 (baseUrl)</label>
|
||
<input type="text" id="cfgBaseUrl" placeholder="http://192.168.3.65:18625">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>useBrowser</label>
|
||
<select id="cfgUseBrowser">
|
||
<option value="false">false</option>
|
||
<option value="true">true</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>轮询间隔 (毫秒)</label>
|
||
<input type="number" id="cfgPollInterval" placeholder="3000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>超时时间 (毫秒)</label>
|
||
<input type="number" id="cfgTimeout" placeholder="300000">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 定时任务配置 -->
|
||
<div class="config-section">
|
||
<h3>定时任务</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>启用</label>
|
||
<select id="cfgSchedulerEnabled">
|
||
<option value="false">禁用</option>
|
||
<option value="true">启用</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Cron 表达式</label>
|
||
<input type="text" id="cfgCronTime" placeholder="0 9 * * *">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>描述</label>
|
||
<input type="text" id="cfgDescription" placeholder="每天9点采集">
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-secondary btn-sm" onclick="triggerScheduledTask()">立即执行定时任务</button>
|
||
<span id="schedulerStatus" style="margin-left:12px;font-size:13px;color:#888;"></span>
|
||
</div>
|
||
|
||
<!-- 邮件配置 -->
|
||
<div class="config-section">
|
||
<h3>邮件配置</h3>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>SMTP 服务器</label>
|
||
<input type="text" id="cfgSmtpHost" placeholder="smtp.qq.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>端口</label>
|
||
<input type="number" id="cfgSmtpPort" placeholder="587">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>用户名</label>
|
||
<input type="text" id="cfgSmtpUser" placeholder="your-email@qq.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>密码/授权码</label>
|
||
<input type="password" id="cfgSmtpPass" placeholder="授权码">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>收件人 (多个用逗号分隔)</label>
|
||
<input type="text" id="cfgRecipients" placeholder="a@example.com, b@example.com">
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" onclick="saveSettings()">保存全部设置</button>
|
||
<span id="settingsSaveStatus" style="margin-left:12px;font-size:13px;"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务编辑弹窗 -->
|
||
<div class="modal" id="taskModal" onclick="if(event.target===this)closeTaskModal()">
|
||
<div class="modal-body">
|
||
<h3 id="taskModalTitle">新增任务</h3>
|
||
<form onsubmit="saveTask(event)">
|
||
<input type="hidden" id="taskEditId">
|
||
<div class="form-group">
|
||
<label>城市名称</label>
|
||
<input type="text" id="taskCity" placeholder="如：南京市" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>提示词 (在提示词中包含目标网址和抓取要求)</label>
|
||
<textarea id="taskPrompt" rows="6" placeholder="请访问 https://xxx.com 获取今天的所有招标公告和中标公告信息..." required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>模型 (mode)</label>
|
||
<select id="taskMode">
|
||
<option value="qwen3.5-plus">qwen3.5-plus</option>
|
||
<option value="qwen3-max-2026-01-23">qwen3-max-2026-01-23</option>
|
||
<option value="qwen3-coder-next">qwen3-coder-next</option>
|
||
<option value="qwen3-coder-plus">qwen3-coder-plus</option>
|
||
<option value="glm-5">glm-5</option>
|
||
<option value="glm-4.7">glm-4.7</option>
|
||
<option value="kimi-k2.5">kimi-k2.5</option>
|
||
<option value="MiniMax-M2.5">MiniMax-M2.5</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="taskEnabled" checked> 启用
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="taskUseBrowser"> 打开浏览器
|
||
</label>
|
||
</div>
|
||
<div style="display:flex;gap:10px;justify-content:flex-end;">
|
||
<button type="button" class="btn btn-secondary" onclick="closeTaskModal()">取消</button>
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let tasksList = [];
|
||
let currentResultsPage = 1;
|
||
|
||
// ===== Tab 切换 =====
|
||
function switchTab(name) {
|
||
document.querySelectorAll('.tab').forEach((t, i) => {
|
||
t.classList.toggle('active', ['tasks', 'results', 'settings'][i] === name);
|
||
});
|
||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||
document.getElementById('tab-' + name).classList.add('active');
|
||
|
||
if (name === 'results') loadResults();
|
||
if (name === 'settings') loadSettings();
|
||
}
|
||
|
||
// ===== 任务 CRUD =====
|
||
async function loadTasks() {
|
||
try {
|
||
const res = await fetch('/api/tasks');
|
||
const json = await res.json();
|
||
tasksList = json.data || [];
|
||
renderTasks();
|
||
} catch (e) {
|
||
console.error('加载任务失败:', e);
|
||
}
|
||
}
|
||
|
||
function renderTasks() {
|
||
const tbody = document.getElementById('tasksTbody');
|
||
const enabled = tasksList.filter(t => t.enabled).length;
|
||
document.getElementById('taskSummary').textContent = `共 ${tasksList.length} 个任务，${enabled} 个启用`;
|
||
|
||
if (tasksList.length === 0) {
|
||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">暂无任务，点击「新增任务」添加</td></tr>';
|
||
return;
|
||
}
|
||
|
||
tbody.innerHTML = tasksList.map(t => `
|
||
<tr>
|
||
<td><strong>${t.city || '-'}</strong></td>
|
||
<td class="prompt-cell" title="${(t.prompt || '').replace(/"/g, '"')}">${t.prompt || '-'}</td>
|
||
<td><code style="font-family:'Fira Code','Cascadia Code',monospace;font-size:12px;">${t.mode || 'qwen3.5-plus'}</code></td>
|
||
<td><span class="tag ${t.enabled ? 'tag-on' : 'tag-off'}">${t.enabled ? '启用' : '禁用'}</span></td>
|
||
<td><span class="tag ${t.useBrowser === true ? 'tag-on' : (t.useBrowser === false ? 'tag-off' : '')}">${t.useBrowser === true ? '打开' : (t.useBrowser === false ? '关闭' : '继承全局')}</span></td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="openTaskModal('${t.id}')">编辑</button>
|
||
<button class="btn btn-success btn-sm" onclick="runSingleTask('${t.id}', this)">运行</button>
|
||
<button class="btn btn-secondary btn-sm" onclick="toggleTask('${t.id}', ${!t.enabled})">${t.enabled ? '禁用' : '启用'}</button>
|
||
<button class="btn btn-danger btn-sm" onclick="deleteTask('${t.id}')">删除</button>
|
||
</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
function openTaskModal(id) {
|
||
const item = id ? tasksList.find(t => t.id === id) : null;
|
||
const globalUseBrowser = document.getElementById('cfgUseBrowser').value === 'true';
|
||
document.getElementById('taskModalTitle').textContent = item ? '编辑任务' : '新增任务';
|
||
document.getElementById('taskEditId').value = item ? item.id : '';
|
||
document.getElementById('taskCity').value = item ? item.city : '';
|
||
document.getElementById('taskPrompt').value = item ? item.prompt : '';
|
||
const modeSelect = document.getElementById('taskMode');
|
||
const modeValue = item?.mode || 'qwen3.5-plus';
|
||
if (![...modeSelect.options].some(opt => opt.value === modeValue)) {
|
||
const option = document.createElement('option');
|
||
option.value = modeValue;
|
||
option.textContent = modeValue;
|
||
modeSelect.appendChild(option);
|
||
}
|
||
modeSelect.value = modeValue;
|
||
document.getElementById('taskEnabled').checked = item ? item.enabled : true;
|
||
document.getElementById('taskUseBrowser').checked = item
|
||
? (typeof item.useBrowser === 'boolean' ? item.useBrowser : globalUseBrowser)
|
||
: globalUseBrowser;
|
||
document.getElementById('taskModal').classList.add('show');
|
||
}
|
||
|
||
function closeTaskModal() {
|
||
document.getElementById('taskModal').classList.remove('show');
|
||
}
|
||
|
||
async function saveTask(e) {
|
||
e.preventDefault();
|
||
const id = document.getElementById('taskEditId').value;
|
||
const data = {
|
||
city: document.getElementById('taskCity').value.trim(),
|
||
prompt: document.getElementById('taskPrompt').value.trim(),
|
||
mode: document.getElementById('taskMode').value.trim() || 'qwen3.5-plus',
|
||
enabled: document.getElementById('taskEnabled').checked,
|
||
useBrowser: document.getElementById('taskUseBrowser').checked,
|
||
};
|
||
try {
|
||
const url = id ? `/api/tasks/${id}` : '/api/tasks';
|
||
const method = id ? 'PUT' : 'POST';
|
||
const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
closeTaskModal();
|
||
await loadTasks();
|
||
} catch (err) {
|
||
alert('保存失败: ' + err.message);
|
||
}
|
||
}
|
||
|
||
async function deleteTask(id) {
|
||
const item = tasksList.find(t => t.id === id);
|
||
if (!confirm(`确定要删除「${item?.city}」的任务吗？`)) return;
|
||
try {
|
||
const res = await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
await loadTasks();
|
||
} catch (err) {
|
||
alert('删除失败: ' + err.message);
|
||
}
|
||
}
|
||
|
||
async function toggleTask(id, enabled) {
|
||
try {
|
||
const res = await fetch(`/api/tasks/${id}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ enabled })
|
||
});
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
await loadTasks();
|
||
} catch (err) {
|
||
alert('操作失败: ' + err.message);
|
||
}
|
||
}
|
||
|
||
// ===== 运行任务（异步 + 轮询状态） =====
|
||
let pollTimer = null;
|
||
|
||
function stopPolling() {
|
||
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
|
||
}
|
||
|
||
function startPolling(statusDiv, onFinished) {
|
||
stopPolling();
|
||
pollTimer = setInterval(async () => {
|
||
try {
|
||
const res = await fetch('/api/tasks/status');
|
||
const json = await res.json();
|
||
if (!json.success) return;
|
||
const s = json.data;
|
||
const elapsed = s.elapsed || 0;
|
||
const min = Math.floor(elapsed / 60);
|
||
const sec = elapsed % 60;
|
||
const timeStr = min > 0 ? `${min}分${sec}秒` : `${sec}秒`;
|
||
|
||
if (!s.finished) {
|
||
statusDiv.className = 'status-box status-info';
|
||
statusDiv.textContent = `正在执行: ${s.city || ''}（${s.current}/${s.total}）已用时 ${timeStr}...`;
|
||
} else {
|
||
stopPolling();
|
||
onFinished(s);
|
||
}
|
||
} catch (e) {
|
||
console.error('轮询状态失败:', e);
|
||
}
|
||
}, 2000);
|
||
}
|
||
|
||
async function runSingleTask(id, btnEl) {
|
||
const origText = btnEl.textContent;
|
||
btnEl.disabled = true;
|
||
btnEl.textContent = '运行中...';
|
||
const statusDiv = document.getElementById('batchRunStatus');
|
||
statusDiv.style.display = 'block';
|
||
statusDiv.className = 'status-box status-info';
|
||
statusDiv.textContent = '正在启动任务...';
|
||
|
||
try {
|
||
const res = await fetch(`/api/tasks/${id}/run`, { method: 'POST' });
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
|
||
startPolling(statusDiv, (s) => {
|
||
btnEl.disabled = false;
|
||
btnEl.textContent = origText;
|
||
if (s.error) {
|
||
statusDiv.className = 'status-box status-error';
|
||
statusDiv.textContent = '运行失败: ' + s.error;
|
||
} else {
|
||
const total = s.results?.[0]?.data?.total || 0;
|
||
statusDiv.className = 'status-box status-success';
|
||
statusDiv.textContent = `运行完成！获取到 ${total} 条结果`;
|
||
}
|
||
});
|
||
} catch (err) {
|
||
btnEl.disabled = false;
|
||
btnEl.textContent = origText;
|
||
statusDiv.className = 'status-box status-error';
|
||
statusDiv.textContent = '启动失败: ' + err.message;
|
||
}
|
||
}
|
||
|
||
async function runAllTasks() {
|
||
const enabled = tasksList.filter(t => t.enabled);
|
||
if (enabled.length === 0) { alert('没有已启用的任务'); return; }
|
||
if (!confirm(`确定要运行全部 ${enabled.length} 个已启用的任务吗？`)) return;
|
||
|
||
const btn = document.getElementById('btnRunAll');
|
||
const statusDiv = document.getElementById('batchRunStatus');
|
||
btn.disabled = true;
|
||
btn.textContent = '运行中...';
|
||
statusDiv.style.display = 'block';
|
||
statusDiv.className = 'status-box status-info';
|
||
statusDiv.textContent = '正在启动任务...';
|
||
|
||
try {
|
||
const res = await fetch('/api/tasks/run', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({})
|
||
});
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
|
||
startPolling(statusDiv, (s) => {
|
||
btn.disabled = false;
|
||
btn.textContent = '运行全部启用';
|
||
const results = s.results || [];
|
||
const ok = results.filter(r => !r.error).length;
|
||
const fail = results.filter(r => r.error).length;
|
||
if (s.error) {
|
||
statusDiv.className = 'status-box status-error';
|
||
statusDiv.textContent = '运行失败: ' + s.error;
|
||
} else {
|
||
statusDiv.className = 'status-box status-success';
|
||
statusDiv.innerHTML = `运行完成！成功 <strong>${ok}</strong>，失败 <strong>${fail}</strong>`;
|
||
}
|
||
});
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
btn.textContent = '运行全部启用';
|
||
statusDiv.className = 'status-box status-error';
|
||
statusDiv.textContent = '启动失败: ' + e.message;
|
||
}
|
||
}
|
||
|
||
// ===== 结果展示 =====
|
||
async function loadResults() {
|
||
const city = document.getElementById('filterCity').value;
|
||
try {
|
||
// 加载筛选选项
|
||
const filtersRes = await fetch('/api/results/filters');
|
||
const filtersJson = await filtersRes.json();
|
||
if (filtersJson.success) {
|
||
const sel = document.getElementById('filterCity');
|
||
const curVal = sel.value;
|
||
sel.innerHTML = '<option value="">全部城市</option>' +
|
||
(filtersJson.data.cities || []).map(c => `<option value="${c}" ${c === curVal ? 'selected' : ''}>${c}</option>`).join('');
|
||
}
|
||
|
||
// 加载结果
|
||
const params = new URLSearchParams({ page: currentResultsPage, pageSize: 10 });
|
||
if (city) params.set('city', city);
|
||
const res = await fetch('/api/results?' + params);
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
|
||
renderResults(json.data, json.total, json.page, json.pageSize);
|
||
} catch (e) {
|
||
document.getElementById('resultsList').innerHTML = `<div class="status-box status-error">加载失败: ${e.message}</div>`;
|
||
}
|
||
}
|
||
|
||
function renderResults(data, total, page, pageSize) {
|
||
const container = document.getElementById('resultsList');
|
||
if (!data || data.length === 0) {
|
||
container.innerHTML = '<div class="empty-state">暂无结果</div>';
|
||
document.getElementById('resultsPagination').innerHTML = '';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = data.map(r => {
|
||
const results = r.data?.results || [];
|
||
const errorHtml = r.error ? `<div style="color:#dc3545;font-size:13px;margin-top:8px;">错误: ${r.error}</div>` : '';
|
||
|
||
const itemsHtml = results.length > 0 ? results.map(item => `
|
||
<div class="result-item">
|
||
<span class="type">${item.type || '-'}</span>
|
||
<span class="name">${item.project_name || '-'}</span>
|
||
<span class="amount">${item.amount_yuan ? item.amount_yuan.toLocaleString() + ' 元' : '-'}</span>
|
||
<span class="date">${item.date || '-'}</span>
|
||
${item.target_link ? `<a href="${item.target_link}" target="_blank">查看</a>` : ''}
|
||
</div>
|
||
`).join('') : '<div style="padding:10px;color:#999;font-size:13px;">无数据</div>';
|
||
|
||
return `
|
||
<div class="result-card">
|
||
<div class="result-card-header">
|
||
<h4>${r.city || '未知城市'} <span style="font-weight:normal;color:#888;font-size:13px;">(${results.length} 条)</span></h4>
|
||
<span>${r.scrapedAt ? new Date(r.scrapedAt).toLocaleString('zh-CN') : ''}</span>
|
||
</div>
|
||
${itemsHtml}
|
||
${errorHtml}
|
||
<div style="text-align:right;margin-top:8px;">
|
||
<button class="btn btn-danger btn-sm" onclick="deleteResult('${r.id}')">删除</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
// 分页
|
||
const totalPages = Math.ceil(total / pageSize);
|
||
if (totalPages > 1) {
|
||
let pHtml = '';
|
||
for (let i = 1; i <= totalPages; i++) {
|
||
pHtml += `<button class="btn btn-sm ${i === page ? 'btn-primary' : 'btn-secondary'}" onclick="goPage(${i})" style="margin:0 3px;">${i}</button>`;
|
||
}
|
||
document.getElementById('resultsPagination').innerHTML = `<div>第 ${page}/${totalPages} 页，共 ${total} 条</div>${pHtml}`;
|
||
} else {
|
||
document.getElementById('resultsPagination').innerHTML = total > 0 ? `共 ${total} 条` : '';
|
||
}
|
||
}
|
||
|
||
function goPage(p) { currentResultsPage = p; loadResults(); }
|
||
|
||
async function deleteResult(id) {
|
||
if (!confirm('确定删除这条结果？')) return;
|
||
try {
|
||
await fetch(`/api/results/${id}`, { method: 'DELETE' });
|
||
loadResults();
|
||
} catch (e) {
|
||
alert('删除失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
async function clearResults() {
|
||
if (!confirm('确定要清空全部结果吗？此操作不可恢复。')) return;
|
||
try {
|
||
await fetch('/api/results', { method: 'DELETE' });
|
||
loadResults();
|
||
} catch (e) {
|
||
alert('清空失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
// ===== 设置 =====
|
||
async function loadSettings() {
|
||
try {
|
||
const res = await fetch('/api/config');
|
||
const json = await res.json();
|
||
if (!json.success) return;
|
||
const cfg = json.data;
|
||
|
||
// Agent
|
||
document.getElementById('cfgBaseUrl').value = cfg.agent?.baseUrl || '';
|
||
document.getElementById('cfgUseBrowser').value = String(cfg.agent?.useBrowser ?? false);
|
||
document.getElementById('cfgPollInterval').value = cfg.agent?.pollInterval || 3000;
|
||
document.getElementById('cfgTimeout').value = cfg.agent?.timeout || 300000;
|
||
|
||
// Scheduler
|
||
document.getElementById('cfgSchedulerEnabled').value = String(cfg.scheduler?.enabled ?? false);
|
||
document.getElementById('cfgCronTime').value = cfg.scheduler?.cronTime || '0 9 * * *';
|
||
document.getElementById('cfgDescription').value = cfg.scheduler?.description || '';
|
||
|
||
// Email
|
||
document.getElementById('cfgSmtpHost').value = cfg.email?.smtpHost || '';
|
||
document.getElementById('cfgSmtpPort').value = cfg.email?.smtpPort || 587;
|
||
document.getElementById('cfgSmtpUser').value = cfg.email?.smtpUser || '';
|
||
document.getElementById('cfgSmtpPass').value = cfg.email?.smtpPass || '';
|
||
document.getElementById('cfgRecipients').value = cfg.email?.recipients || '';
|
||
|
||
// Scheduler status
|
||
const statusRes = await fetch('/api/scheduler/status');
|
||
const statusJson = await statusRes.json();
|
||
if (statusJson.success) {
|
||
const s = statusJson.data;
|
||
document.getElementById('schedulerStatus').textContent =
|
||
s.isRunning ? `运行中 (${s.enabledTasks} 个任务)` : '未运行';
|
||
}
|
||
} catch (e) {
|
||
console.error('加载设置失败:', e);
|
||
}
|
||
}
|
||
|
||
async function saveSettings() {
|
||
try {
|
||
// 先获取当前完整配置（保留 tasks）
|
||
const curRes = await fetch('/api/config');
|
||
const curJson = await curRes.json();
|
||
const curCfg = curJson.data || {};
|
||
|
||
const cfg = {
|
||
agent: {
|
||
baseUrl: document.getElementById('cfgBaseUrl').value.trim(),
|
||
useBrowser: document.getElementById('cfgUseBrowser').value === 'true',
|
||
pollInterval: parseInt(document.getElementById('cfgPollInterval').value) || 3000,
|
||
timeout: parseInt(document.getElementById('cfgTimeout').value) || 300000,
|
||
},
|
||
tasks: curCfg.tasks || [],
|
||
scheduler: {
|
||
enabled: document.getElementById('cfgSchedulerEnabled').value === 'true',
|
||
cronTime: document.getElementById('cfgCronTime').value.trim() || '0 9 * * *',
|
||
description: document.getElementById('cfgDescription').value.trim(),
|
||
},
|
||
email: {
|
||
smtpHost: document.getElementById('cfgSmtpHost').value.trim(),
|
||
smtpPort: parseInt(document.getElementById('cfgSmtpPort').value) || 587,
|
||
smtpUser: document.getElementById('cfgSmtpUser').value.trim(),
|
||
smtpPass: document.getElementById('cfgSmtpPass').value.trim(),
|
||
recipients: document.getElementById('cfgRecipients').value.trim(),
|
||
}
|
||
};
|
||
|
||
const res = await fetch('/api/config', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(cfg)
|
||
});
|
||
const json = await res.json();
|
||
if (!json.success) throw new Error(json.error);
|
||
|
||
const span = document.getElementById('settingsSaveStatus');
|
||
span.textContent = '已保存';
|
||
span.style.color = '#28a745';
|
||
setTimeout(() => { span.textContent = ''; }, 3000);
|
||
} catch (e) {
|
||
alert('保存失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
async function triggerScheduledTask() {
|
||
if (!confirm('确定要立即执行定时任务吗？')) return;
|
||
try {
|
||
const res = await fetch('/api/run-scheduled-task', { method: 'POST' });
|
||
const json = await res.json();
|
||
alert(json.message || '已触发');
|
||
} catch (e) {
|
||
alert('触发失败: ' + e.message);
|
||
}
|
||
}
|
||
|
||
// ===== 初始化 =====
|
||
loadTasks();
|
||
loadSettings();
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|