1
1
mirror of https://github.com/KenanZhu/AutoLibrary.git synced 2026-06-18 07:23:03 +08:00
Files
AutoLibrary/document/manual.html
T
2025-11-04 00:14:45 +08:00

847 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoLibrary 操作手册</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
:root {
--primary: #2c3e50;
--secondary: #3498db;
--accent: #e74c3c;
--light: #f8f9fa;
--dark: #2c3e50;
--gray: #6c757d;
--border: #dee2e6;
}
body {
background-color: #c0c0c0a4;
color: #333;
line-height: 1.6;
}
.manual-container {
display: flex;
max-width: 1400px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
min-height: 100vh;
}
.sidebar {
width: 280px;
background: var(--primary);
color: rgba(255, 255, 255, 0.7);
padding: 2rem 1rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-header {
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1.5rem;
transition: all 0.2s ease;
}
.sidebar-header:hover {
color: white;
}
.sidebar h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.sidebar-nav {
list-style: none;
}
.sidebar-nav li {
margin-bottom: 0.5rem;
}
.sidebar-nav a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
display: block;
padding: 0.7rem 1rem;
border-radius: 5px;
transition: all 0.2s ease;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.content {
flex: 1;
background: rgb(245, 245, 245);
padding: 2rem 3rem;
overflow-y: auto;
max-height: 100vh;
}
.section {
margin-bottom: 1rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
h2 {
color: var(--primary);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--secondary);
}
h3 {
color: var(--dark);
margin: 1.5rem 0 1rem;
}
.intro-box {
background: #e3f2fd;
border-left: 4px solid var(--secondary);
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 0 5px 5px 0;
}
.step-container {
counter-reset: step-counter;
}
.step {
display: flex;
margin-bottom: 2rem;
background: var(--light);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
position: relative;
}
.step-number {
counter-increment: step-counter;
background: var(--secondary);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 1.5rem;
flex-shrink: 0;
font-size: 1.1rem;
}
.step-number::before {
content: counter(step-counter);
}
.step-content {
flex: 1;
}
.step-image {
background: #e9ecef;
border-radius: 5px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray);
margin: 1rem 0;
font-style: italic;
}
.note {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1rem;
margin: 1rem 0;
border-radius: 0 5px 5px 0;
}
.warning {
background: #f8d7da;
border-left: 4px solid #dc3545;
padding: 1rem;
margin: 1rem 0;
border-radius: 0 5px 5px 0;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
border: 1px solid #444;
border-left: 4px solid var(--secondary);
padding: 1rem;
margin: 1rem 0;
font-family: 'Consolas', monospace;
white-space: pre-wrap;
border-radius: 0 5px 5px 0;
font-size: 0.9rem;
overflow-x: auto;
line-height: 1.4;
}
.code-block .key { color: #2b997f; }
.code-block .string { color: #9acf65; }
.code-block .number { color: #3dd942; }
.code-block .boolean { color: #24e9ff; }
.code-block .null { color: #ff79c6; }
.code-block .property { color: #8be9fd; }
.code-block .punctuation { color: #f8f8f2; }
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.feature-card {
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 2rem;
color: var(--secondary);
margin-bottom: 1rem;
}
.config-tabs {
display: flex;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.config-tab {
padding: 0.8rem 1.5rem;
cursor: pointer;
border: none;
background: none;
font-size: 1rem;
color: var(--gray);
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
}
.config-tab.active {
color: var(--secondary);
border-bottom: 3px solid var(--secondary);
}
.tab-content {
background: white;
border-radius: 0 5px 5px 5px;
padding: 1.5rem;
border: 1px solid var(--border);
border-top: none;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.download-section {
text-align: center;
padding: 2rem;
background: var(--light);
border-radius: 8px;
margin-top: 2rem;
}
.btn {
display: inline-block;
background: var(--secondary);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 3px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: #2980b9;
transform: translateY(-2px);
}
.faq-item {
margin-bottom: 1.5rem;
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
}
.faq-question {
padding: 1rem 1.5rem;
background: var(--light);
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
padding: 1rem 1.5rem;
display: none;
}
.faq-item.active .faq-answer {
display: block;
}
.browser-drivers {
display: flex;
justify-content: space-between;
gap: 1.5rem;
margin: 1.5rem 0;
}
.browser-card {
flex: 1;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.browser-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.browser-logo {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
overflow: hidden;
}
.browser-logo img {
max-width: 100%;
max-height: 100%;
}
.browser-card h4 {
margin-bottom: 1rem;
color: var(--primary);
}
.browser-card .btn {
margin-top: 1rem;
}
@media (max-width: 992px) {
.manual-container {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.content {
padding: 1.5rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="manual-container">
<aside class="sidebar">
<div class="sidebar-header">
<h1>AutoLibrary</h1>
<p>操作手册 v0.01</p>
</div>
<ul class="sidebar-nav">
<li><a href="#intro" class="active">工具简介</a></li>
<li><a href="#preparation">准备工作</a></li>
<li><a href="#usage">使用步骤</a></li>
<li><a href="#configuration">配置说明</a></li>
<li><a href="#features">功能详解</a></li>
<li><a href="#interface">用户界面</a></li>
<li><a href="#troubleshooting">故障排除</a></li>
<li><a href="#faq">常见问题</a></li>
<li><a href="#download">下载安装</a></li>
</ul>
</aside>
<main class="content">
<section id="name" class="section">
<h1>AutoLibrary</h1>
</section>
<section id="intro" class="section">
<h2>工具简介</h2>
<div class="step">
<div class="step-content">
<div class="intro-box">
<p>AutoLibrary 是一款专为北京建筑大学图书馆设计的自动化工具,旨在帮助学生简化图书馆座位操作流程,节省宝贵时间。</p>
</div>
<p>本工具模拟人工操作,通过简单的界面交互使用。</p>
<h3>工具特点</h3>
<ul>
<p>模拟人工操作,不干扰图书馆系统正常运行</p>
<p>支持多种预约模式,满足不同使用场景</p>
<p>支持多账号批量预约</p>
<p>自动处理验证码,减少人工干预</p>
</ul>
</div>
</div>
</section>
<section id="preparation" class="section">
<h2>准备工作</h2>
<div class="step-container">
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>下载浏览器驱动</h3>
<p>工具需要通过浏览器驱动来控制浏览器,请根据您使用的浏览器下载对应版本的驱动:</p>
<div class="browser-drivers">
<div class="browser-card">
<div class="browser-logo">
<img src="https://edgestatic.azureedge.net/welcome/static/favicon.png" alt="Microsoft Edge">
</div>
<h4>Microsoft Edge</h4>
<p>适用于Windows 10/11系统</p>
<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/" target="_blank" class="btn">下载驱动</a>
</div>
<div class="browser-card">
<div class="browser-logo">
<img src="https://www.gstatic.cn/devrel-devsite/prod/v154b6c17f7870ab2939b3d571919274f806798dc59971188e1f4183601ea7775/chrome/images/touchicon-180.png" alt="Google Chrome">
</div>
<h4>Google Chrome</h4>
<p>最常用的浏览器</p>
<a href="https://developer.chrome.google.cn/docs/chromedriver/downloads" target="_blank" class="btn">下载驱动</a>
</div>
<div class="browser-card">
<div class="browser-logo">
<img src="https://www.firefox.com/media/img/favicons/firefox/browser/favicon-196x196.59e3822720be.png" alt="Mozilla Firefox">
</div>
<h4>Mozilla Firefox</h4>
<p>开源浏览器</p>
<a href="https://github.com/mozilla/geckodriver/releases" target="_blank" class="btn">下载驱动</a>
</div>
</div>
<div class="note">
<strong>注意:</strong> 浏览器驱动版本必须与您的浏览器版本兼容,否则工具无法正常工作。
</div>
<div class="step-image">
浏览器驱动下载页面截图区域
</div>
</div>
</div>
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>确认驱动路径</h3>
<p>下载驱动后,将浏览器驱动程序的路径(如'C:\Users\Administrator\Downloads\msedgedriver.exe')输入到AutoLibrary配置界面中。</p>
<div class="step-image">
驱动文件放置位置截图区域
</div>
</div>
</div>
</div>
</section>
<section id="usage" class="section">
<h2>使用步骤</h2>
<div class="step-container">
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>编辑配置文件</h3>
<p>使用文本编辑器(如记事本、Visual Studio Code等)打开config.json和users.json文件,按照您的需求修改参数。</p>
<div class="warning">
<strong>重要:</strong> 请勿使用Microsoft Word等富文本编辑器,这可能导致文件格式错误。
</div>
<div class="step-image">
配置文件编辑截图区域
</div>
</div>
</div>
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>运行工具</h3>
<p>双击运行main.exe文件,工具将自动开始预约流程。</p>
<div class="step-image">
工具运行界面截图区域
</div>
</div>
</div>
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>监控运行状态</h3>
<p>如果headless模式设置为false,您将看到浏览器窗口自动操作。请勿手动干预浏览器窗口。</p>
<div class="step-image">
浏览器自动操作截图区域
</div>
</div>
</div>
<div class="step">
<div class="step-number"></div>
<div class="step-content">
<h3>查看结果</h3>
<p>工具运行完成后,查看生成的日志文件确认预约结果。</p>
<div class="step-image">
运行日志截图区域
</div>
</div>
</div>
</div>
</section>
<section id="configuration" class="section">
<h2>配置说明</h2>
<p>AutoLibrary通过两个配置文件来控制工具行为:config.json(工具设置)和users.json(用户信息)。</p>
<div class="config-tabs">
<button class="config-tab active" data-tab="config-tab">config.json</button>
<button class="config-tab" data-tab="users-tab">users.json</button>
</div>
<div class="tab-content">
<div id="config-tab" class="tab-pane active">
<h3>工具配置文件</h3>
<p>config.json文件控制工具的基本运行参数:</p>
<div class="code-block">
{
<span class="property">"library"</span>: {
<span class="property">"lib_host_url"</span>: <span class="string">"http://10.1.20.7"</span>,
<span class="property">"lib_login_url"</span>: <span class="string">"/login"</span>
},
<span class="property">"mode"</span>: {
<span class="property">"run_mode"</span>: <span class="number">1</span>
},
<span class="property">"login"</span>: {
<span class="property">"auto_captcha"</span>: <span class="key">true</span>,
<span class="property">"login_attempt"</span>: <span class="number">3</span>
},
<span class="property">"web_driver"</span>: {
<span class="property">"driver_type"</span>: <span class="string">"edge"</span>,
<span class="property">"driver_path"</span>: <span class="string">"msedgedriver.exe"</span>,
<span class="property">"headless"</span>: <span class="key">false</span>
}
}
</div>
<h4>参数说明</h4>
<ul>
<li><strong>run_mode</strong>: 运行模式,可组合使用(1+4+8=13)</li>
<li><strong>auto_captcha</strong>: 自动验证码识别,建议保持true</li>
<li><strong>login_attempt</strong>: 登录尝试次数,默认3次</li>
<li><strong>driver_type</strong>: 浏览器类型(edge/chrome/firefox</li>
<li><strong>driver_path</strong>: 驱动文件路径</li>
<li><strong>headless</strong>: 无头模式,false会显示浏览器窗口</li>
</ul>
</div>
<div id="users-tab" class="tab-pane">
<h3>用户配置文件</h3>
<p>users.json文件包含用户账号和预约信息:</p>
<div class="code-block">
{
<span class="property">"users"</span>: [
{
<span class="property">"username"</span>: <span class="string">"您的学号"</span>,
<span class="property">"password"</span>: <span class="string">"您的密码"</span>,
<span class="property">"reserve_info"</span>: {
<span class="property">"date"</span>: <span class="string">"2025-10-30"</span>,
<span class="property">"start_time"</span>: <span class="string">"09:30"</span>,
<span class="property">"end_time"</span>: <span class="string">"17:00"</span>,
<span class="property">"place"</span>: <span class="string">"1"</span>,
<span class="property">"floor"</span>: <span class="string">"4"</span>,
<span class="property">"room"</span>: <span class="string">"5"</span>,
<span class="property">"seat_id"</span>: <span class="string">"31A"</span>,
<span class="property">"expect_duration"</span>: <span class="number">6</span>
}
}
]
}
</div>
<h4>参数说明</h4>
<ul>
<li><strong>username</strong>: 学号</li>
<li><strong>password</strong>: 密码</li>
<li><strong>date</strong>: 预约日期(格式:YYYY-MM-DD</li>
<li><strong>start_time/end_time</strong>: 预约时间段</li>
<li><strong>place/floor/room</strong>: 图书馆位置信息</li>
<li><strong>seat_id</strong>: 座位编号(重要)</li>
<li><strong>expect_duration</strong>: 期望使用时长(小时)</li>
</ul>
<div class="note">
<strong>提示:</strong> 可以添加多个用户,工具会按顺序处理每个用户的预约请求。
</div>
</div>
</div>
</section>
<section id="features" class="section">
<h2>功能详解</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon"></div>
<h3>自动预约(模式 +1</h3>
<p>当您当前没有有效预约时,工具会自动为您预约指定座位。</p>
<div class="note">
<strong>适用场景:</strong> 提前预约第二天的座位
</div>
</div>
<div class="feature-card">
<div class="feature-icon"></div>
<h3>自动签到(模式 +4</h3>
<p>如果您已有预约,且在可签到时间范围内,工具会自动完成签到。</p>
<div class="note">
<strong>适用场景:</strong> 避免因忘记签到而失去座位
</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<h3>自动续约(模式 +8</h3>
<p>当您正在使用座位且到达可续约时间时,工具会自动延长使用时间。</p>
<div class="note">
<strong>适用场景:</strong> 需要长时间使用座位的情况
</div>
</div>
</div>
<h3>模式组合使用</h3>
<p>运行模式可以组合使用,只需将对应模式的数值相加:</p>
<ul>
<li>自动预约 + 自动签到 + 自动续约 = 13(推荐)</li>
<li>自动预约 = 1</li>
<li>自动预约 + 自动签到 = 5</li>
</ul>
</section>
<section id="troubleshooting" class="section">
<h2>故障排除</h2>
<h3>常见问题及解决方法</h3>
<div class="faq-item">
<div class="faq-question">工具启动时报错"无法找到驱动"</div>
<div class="faq-answer">
<p>这是因为浏览器驱动未正确安装或版本不匹配。</p>
<ul>
<li>检查驱动文件是否放置在正确位置</li>
<li>确认驱动版本与浏览器版本完全匹配</li>
<li>尝试重新下载并安装驱动</li>
</ul>
</div>
</div>
<div class="faq-item">
<div class="faq-question">登录失败,提示账号密码错误</div>
<div class="faq-answer">
<p>请检查users.json文件中的账号密码是否正确。</p>
<ul>
<li>确认学号和密码无误</li>
<li>检查是否有特殊字符需要转义</li>
<li>尝试手动登录图书馆系统确认账号可用</li>
</ul>
</div>
</div>
<div class="faq-item">
<div class="faq-question">预约失败,提示座位不可用</div>
<div class="faq-answer">
<p>目标座位可能已被他人预约或不在可预约时间。</p>
<ul>
<li>确认座位编号是否正确</li>
<li>检查预约时间是否符合图书馆规定</li>
<li>尝试预约其他座位或调整预约时间</li>
</ul>
</div>
</div>
</section>
<section id="faq" class="section">
<h2>常见问题</h2>
<div class="faq-item">
<div class="faq-question">使用AutoLibrary是否安全?</div>
<div class="faq-answer">
<p>AutoLibrary完全模拟人工操作,不干扰图书馆系统正常运行。工具不会收集或上传您的个人信息,所有数据仅保存在本地配置文件中。</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">可以同时预约多个座位吗?</div>
<div class="faq-answer">
<p>根据图书馆规定,每个账号同一时间段只能预约一个座位。但您可以在users.json中添加多个账号,工具会依次处理每个账号的预约请求。</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">工具运行期间可以操作电脑吗?</div>
<div class="faq-answer">
<p>可以正常使用电脑,但请勿操作工具自动打开的浏览器窗口,否则可能会干扰工具的正常运行。</p>
</div>
</div>
</section>
<section id="download" class="section">
<h2>下载安装</h2>
<div class="download-section">
<h3>获取AutoLibrary</h3>
<p>点击下方按钮下载最新版本的AutoLibrary工具包:</p>
<a href="#" class="btn">下载 AutoLibrary v0.01</a>
<div class="note" style="margin-top: 1.5rem;">
<p>文件大小:约15MB</p>
<p>系统要求:Windows 10/11,支持Edge/Chrome/Firefox浏览器</p>
</div>
</div>
<h3>安装步骤</h3>
<ol>
<li>下载压缩包并解压到任意文件夹</li>
<li>根据您使用的浏览器下载对应版本的驱动</li>
<li>将驱动文件放置到工具文件夹中</li>
<li>按照本手册说明编辑配置文件</li>
<li>双击main.exe运行工具</li>
</ol>
</section>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.sidebar-nav a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
document.querySelectorAll('.sidebar-nav a').forEach(a => {
a.classList.remove('active');
});
this.classList.add('active');
const targetId = this.getAttribute('href');
const targetSection = document.querySelector(targetId);
if (targetSection) {
targetSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
document.querySelectorAll('.config-tab').forEach(tab => {
tab.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
document.querySelectorAll('.config-tab').forEach(t => {
t.classList.remove('active');
});
this.classList.add('active');
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
});
});
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', function() {
const faqItem = this.parentElement;
faqItem.classList.toggle('active');
});
});
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.sidebar-nav a');
const observerOptions = {
root: null,
rootMargin: '0px 0px -50% 0px',
threshold: 0.2
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.remove('active');
});
const activeLink = document.querySelector(`.sidebar-nav a[href="#${id}"]`);
if (activeLink) {
activeLink.classList.add('active');
}
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
});
</script>
</body>
</html>