PaperHelper/reader.html at main · xjcway123/PaperHelper · GitHub

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
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="reader.css" />
  <title>阅读器 · 论文助手</title>
</head>
<body>
  <header class="toolbar">
    <div class="tb-left">
      <img class="mark" src="icons/icon48.png" alt="" />
      <span class="doc-title" id="docTitle">加载中…</span>
    </div>
    <div class="tb-center">
      <button id="zoomOut" title="缩小">−</button>
      <span id="zoomVal">130%</span>
      <button id="zoomIn" title="放大">+</button>
      <span class="divider"></span>
      <span id="pageInfo" class="page-info">—</span>
    </div>
    <div class="tb-right">
      <span class="palette" id="palette" title="高亮颜色">
        <button class="sw" data-color="#ffe066" style="background:#ffe066" aria-label="黄色"></button>
        <button class="sw" data-color="#9be7a6" style="background:#9be7a6" aria-label="绿色"></button>
        <button class="sw" data-color="#9ccdf6" style="background:#9ccdf6" aria-label="蓝色"></button>
        <button class="sw" data-color="#f6a9c9" style="background:#f6a9c9" aria-label="粉色"></button>
      </span>
      <button id="aiBtn" class="primary">✦ AI 摘要</button>
      <button id="toggleSide" title="高亮 / 笔记">☰</button>
    </div>
  </header>

  <div class="body">
    <main id="viewer" class="viewer"></main>

    <aside id="side" class="side">
      <div class="tabs">
        <button data-tab="ai" class="active" id="tabAi">AI 摘要</button>
        <button data-tab="hl" id="tabHl">高亮 / 笔记</button>
      </div>

      <section id="panelAi" class="panel">
        <div id="aiEmpty" class="hint">点上方“✦ AI 摘要”，让 Claude 基于全文生成结构化总结与关键结论。<br><br>需先在扩展设置里填入你的 Anthropic API Key（仅存本地）。</div>
        <div id="aiContent" class="ai-content"></div>
      </section>

      <section id="panelHl" class="panel" hidden>
        <div id="hlEmpty" class="hint">在正文中选中文字即可高亮；点高亮条目可加笔记。</div>
        <div id="hlList"></div>
      </section>
    </aside>
  </div>

  <!-- 划词浮动工具条 -->
  <div id="selBar" class="sel-bar" hidden>
    <button id="selHl" title="高亮">高亮</button>
    <button id="selNote" title="高亮并加笔记">＋笔记</button>
  </div>

  <div id="toast" class="toast"></div>
  <script type="module" src="reader.js"></script>
</body>
</html>