mirror of
https://github.com/Usagi-org/ai-goofish-monitor.git
synced 2025-11-25 03:15:07 +08:00
321 lines
12 KiB
HTML
321 lines
12 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>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<style>
|
||
.status-badge {
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.8em;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-transform: uppercase;
|
||
display: inline-block;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
vertical-align: baseline;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-running {
|
||
background-color: #28a745; /* green */
|
||
}
|
||
|
||
.status-stopped {
|
||
background-color: #6c757d; /* gray */
|
||
}
|
||
|
||
.tasks-table .action-btn {
|
||
padding: 4px 8px;
|
||
margin-right: 5px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tasks-table .run-task-btn {
|
||
background-color: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.tasks-table .stop-task-btn {
|
||
background-color: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.tasks-table .action-btn:disabled {
|
||
background-color: #cccccc;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.modal-content.large {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.instructions {
|
||
background-color: #f9f9f9;
|
||
border: 1px solid #ddd;
|
||
padding: 15px;
|
||
padding-left: 35px;
|
||
border-radius: 5px;
|
||
margin-bottom: 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.instructions li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.code-block {
|
||
position: relative;
|
||
background-color: #eef;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.code-block pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
font-size: 0.9em;
|
||
color: #333;
|
||
}
|
||
|
||
.code-block .copy-btn {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
padding: 2px 6px;
|
||
}
|
||
|
||
.login-status-widget {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
cursor: pointer;
|
||
z-index: 101; /* Ensure it's above other header content */
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.login-status-widget .status-text {
|
||
padding: 8px 12px;
|
||
border-radius: 16px;
|
||
color: white;
|
||
font-size: 0.9em;
|
||
display: inline-block;
|
||
}
|
||
|
||
.login-status-widget .status-ok {
|
||
background-color: #28a745;
|
||
}
|
||
|
||
.login-status-widget .status-error {
|
||
background-color: #dc3545;
|
||
}
|
||
|
||
.login-status-widget .dropdown-menu {
|
||
display: none;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 100%;
|
||
background-color: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
min-width: 120px;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.login-status-widget:hover .dropdown-menu {
|
||
display: block;
|
||
}
|
||
|
||
.login-status-widget .dropdown-item {
|
||
display: block;
|
||
padding: 8px 12px;
|
||
color: #333;
|
||
text-decoration: none;
|
||
font-size: 0.9em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.login-status-widget .dropdown-item:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.login-status-widget .dropdown-item.delete {
|
||
color: #dc3545;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>闲鱼智能监控机器人 - 管理后台</h1>
|
||
<div id="login-status-widget-container"></div>
|
||
</header>
|
||
<div class="container">
|
||
<aside>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#tasks" class="nav-link active">任务管理</a></li>
|
||
<li><a href="#results" class="nav-link">结果查看</a></li>
|
||
<li><a href="#logs" class="nav-link">运行日志</a></li>
|
||
<li><a href="#settings" class="nav-link">系统设置</a></li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
<main id="main-content">
|
||
<!-- 内容将根据侧边栏选择动态加载 -->
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Add Task Modal -->
|
||
<div id="add-task-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>创建新监控任务 (AI驱动)</h2>
|
||
<button id="close-modal-btn" class="close-button">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="add-task-form">
|
||
<div class="form-group">
|
||
<label for="task-name">任务名称</label>
|
||
<input type="text" id="task-name" name="task_name" placeholder="例如：索尼 A7M4 相机" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="keyword">搜索关键词</label>
|
||
<input type="text" id="keyword" name="keyword" placeholder="例如：a7m4" required>
|
||
</div>
|
||
<div class="form-group form-group-inline">
|
||
<div>
|
||
<label for="min-price">价格范围 (可选)</label>
|
||
<input type="number" id="min-price" name="min_price" placeholder="最低价">
|
||
</div>
|
||
<span>-</span>
|
||
<div>
|
||
<label for="max-price"> </label>
|
||
<input type="number" id="max-price" name="max_price" placeholder="最高价">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="max-pages">最大搜索页数</label>
|
||
<input type="number" id="max-pages" name="max_pages" value="3" min="1" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="task-cron">定时执行 (Cron 表达式) <a href="https://crontab.guru/" target="_blank"
|
||
title="点击查看Cron表达式帮助">[?]</a></label>
|
||
<input type="text" id="task-cron" name="cron" placeholder="分 时 日 月 周 (例如: 0 8 * * *)">
|
||
<p class="form-hint">留空则不启用定时执行。例如 "0 22 * * *" 表示每晚22:00执行。</p>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="task-description">详细购买需求</label>
|
||
<textarea id="task-description" name="description" rows="6"
|
||
placeholder="请用自然语言详细描述你的购买需求，AI将根据此描述生成分析标准。例如：我想买一台95新以上的索尼A7M4相机，预算在10000到13000元之间，快门数要低于5000。必须是国行且配件齐全。优先考虑个人卖家..."
|
||
required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="personal-only" name="personal_only" checked>
|
||
仅筛选个人闲置卖家
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="cancel-add-task-btn" class="control-button">取消</button>
|
||
<button id="save-new-task-btn" class="control-button primary-btn">
|
||
<span class="btn-text">创建任务</span>
|
||
<span class="spinner" style="display: none;"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- refresh criteria Modal -->
|
||
<div id="refresh-criteria-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>重新生成AI标准</h2>
|
||
<button id="close-refresh-criteria-btn" class="close-button">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="refresh-criteria-form">
|
||
<div class="form-group">
|
||
<label for="refresh-criteria-description">详细购买需求</label>
|
||
<textarea id="refresh-criteria-description" name="description" rows="6"
|
||
placeholder="请用自然语言详细描述你的购买需求，AI将根据此描述生成分析标准。例如：我想买一台95新以上的索尼A7M4相机，预算在10000到13000元之间，快门数要低于5000。必须是国行且配件齐全。优先考虑个人卖家..."
|
||
required></textarea>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="cancel-refresh-criteria-btn" class="control-button">取消</button>
|
||
<button id="refresh-criteria-btn" class="control-button primary-btn">
|
||
<span class="btn-text">重新生成</span>
|
||
<span class="spinner" style="display: none;"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JSON Viewer Modal -->
|
||
<div id="json-viewer-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>AI 分析详情</h2>
|
||
<button id="close-json-viewer-btn" class="close-button">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre id="json-viewer-content"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Manual Login State Modal -->
|
||
<div id="login-state-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-content large">
|
||
<div class="modal-header">
|
||
<h2>手动更新登录状态 (Cookie)</h2>
|
||
<button id="close-login-state-modal-btn" class="close-button">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="login-state-form" onsubmit="return false;">
|
||
|
||
<!-- Chrome Extension Method -->
|
||
<h3 style="margin-top: 20px; margin-bottom: 10px;">使用Chrome扩展（推荐）</h3>
|
||
<p>此方法用于在无法运行图形化浏览器的服务器上更新闲鱼登录凭证。</p>
|
||
<p>安装Chrome扩展来提取闲鱼登录状态：</p>
|
||
<ol class="instructions">
|
||
<li>在Chrome浏览器中安装 <a href="https://chromewebstore.google.com/detail/xianyu-login-state-extrac/eidlpfjiodpigmfcahkmlenhppfklcoa" target="_blank"
|
||
rel="noopener noreferrer">闲鱼登录状态提取扩展</a></li>
|
||
<li>打开并登录 <a href="https://www.goofish.com" target="_blank"
|
||
rel="noopener noreferrer">闲鱼官网</a>。
|
||
</li>
|
||
<li>登录成功后，点击浏览器工具栏中的该扩展图标。</li>
|
||
<li>点击"提取登录状态"按钮获取登录信息。</li>
|
||
<li>点击"复制到剪贴板"按钮。</li>
|
||
<li>将复制的内容粘贴到下方的文本框中，然后点击"保存"。</li>
|
||
</ol>
|
||
<div class="form-group">
|
||
<label for="login-state-content">粘贴JSON内容:</label>
|
||
<textarea id="login-state-content" name="content" rows="8"
|
||
placeholder="请在此处粘贴从浏览器扩展复制的JSON文本..."></textarea>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="cancel-login-state-btn" type="button" class="control-button">取消</button>
|
||
<button id="save-login-state-btn" type="button" class="control-button primary-btn">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/main.js"></script>
|
||
</body>
|
||
</html>
|