-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreader.html
More file actions
141 lines (127 loc) · 6.05 KB
/
Copy pathreader.html
File metadata and controls
141 lines (127 loc) · 6.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIReader - 深度阅读伴侣</title>
<link rel="stylesheet" href="reader.css">
</head>
<body>
<div class="app">
<!-- ====== 左侧：主阅读区 ====== -->
<main class="reader-pane" id="reader-pane">
<!-- ====== 目录侧栏 ====== -->
<div class="toc-panel" id="toc-panel">
<div class="toc-header">目录</div>
<div class="toc-list" id="toc-list"></div>
</div>
<!-- 加载后的阅读渲染区 -->
<div class="viewer-container" id="viewer-container">
<div class="topbar">
<span class="topbar-title" id="book-title">未命名书籍</span>
<div class="topbar-actions">
<button class="topbar-btn" id="btn-home" title="返回大厅">🏠</button>
<button class="topbar-btn" id="btn-lang" title="切换 AI 回复语言">中</button>
<button class="topbar-btn" id="btn-theme" title="切换深浅色主题">🌓</button>
<button class="topbar-btn" id="btn-toc" title="目录">📑</button>
<button class="topbar-btn" id="btn-close" title="关闭当前书籍">×</button>
</div>
</div>
<div id="viewer" class="viewer"></div>
<div class="bottombar">
<button class="nav-btn" id="btn-prev" title="上一页 (←)">← 上一页</button>
<span class="page-indicator" id="page-indicator">—</span>
<button class="nav-btn" id="btn-next" title="下一页 (→)">下一页 →</button>
</div>
</div>
</main>
<!-- ====== 右侧：AI 心智面板 ====== -->
<aside class="ai-pane" id="ai-pane">
<div class="ai-header">
<span class="ai-header-title">AI 陪读面板</span>
</div>
<div class="ai-actions">
<button class="ai-btn" data-action="history">
<svg class="ai-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
</svg>
前文复盘回顾
</button>
<button class="ai-btn" data-action="chapter">
<svg class="ai-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>
</svg>
提炼本章骨架
</button>
<button class="ai-btn" data-action="explain">
<svg class="ai-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
</svg>
解释选中段落
</button>
<button class="ai-btn" data-action="quiz">
<svg class="ai-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
</svg>
沙盘推演测验
</button>
<button class="ai-btn extract-btn" id="btn-extract">
📖 一键提取全书框架
</button>
</div>
<div class="chat-container" id="chat-container">
<div class="chat-placeholder">
<svg class="chat-placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
<p>AI 陪读伴侣</p>
<p class="chat-placeholder-hint">点击上方按钮或输入问题开始对话</p>
</div>
</div>
<div class="chat-input-area">
<textarea id="chat-input" placeholder="输入你的推演或向导师提问..." rows="2"></textarea>
<button id="btn-send">发送</button>
</div>
</aside>
</div>
<!-- ====== 全书框架提取弹窗 ====== -->
<div class="extract-modal" id="extract-modal">
<div class="extract-modal-content">
<div class="extract-modal-header">
<span class="extract-modal-title">📖 一键提取全书框架</span>
<button class="extract-close" id="extract-close" title="关闭">×</button>
</div>
<div class="extract-body">
<div class="extract-progress-wrap" id="extract-progress-wrap">
<div class="extract-progress-head">
<span>提取进度</span>
<span class="extract-timer" id="extract-timer">⏱ 00:00</span>
</div>
<div class="extract-progress-bar">
<div class="extract-progress-fill" id="extract-progress-fill"></div>
</div>
<div class="extract-progress-text" id="extract-progress-text">准备中...</div>
</div>
<div class="extract-status" id="extract-status"></div>
<div class="extract-result" id="extract-result"></div>
<div class="extract-actions" id="extract-actions">
<button class="btn-extract-action primary" id="extract-copy">📋 复制 Markdown</button>
<button class="btn-extract-action" id="extract-download">⬇️ 下载 .md</button>
<button class="btn-extract-action" id="extract-again">🔄 重新提取</button>
</div>
<button class="extract-cancel" id="extract-cancel">取消提取</button>
</div>
</div>
</div>
<!-- 注意：epub.js 运行时解压 EPUB 依赖 JSZip，必须先加载，勿删 -->
<script src="jszip.min.js"></script>
<script src="epub.min.js"></script>
<script src="marked.min.js"></script>
<script src="skills/markdown.js"></script>
<script src="skills/db.js"></script>
<script src="skills/api.js"></script>
<script src="skills/extract.js"></script>
<script src="skills/skills.js"></script>
<script src="skills/reader.js"></script>
</body>
</html>