tri_differ/index.html at main · jameswibe79/tri_differ · 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
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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Word 多文档对比</title>
    <link rel="stylesheet" href="src/styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <div class="brand-block">
          <span class="app-mark" aria-hidden="true">W</span>
          <div>
            <h1>Word 多文档对比</h1>
            <p>本地解析 .docx，按任务组织窗口，右栏生成雷同索引</p>
          </div>
        </div>

        <div class="thresholds" aria-label="对比阈值">
          <label class="range-control">
            <span>文本阈值 <output id="textThresholdValue">78%</output></span>
            <input id="textThreshold" type="range" min="0.50" max="0.98" step="0.01" value="0.78" />
          </label>
          <label class="range-control">
            <span>图片容差 <output id="imageThresholdValue">10</output></span>
            <input id="imageThreshold" type="range" min="0" max="24" step="1" value="10" />
          </label>
          <label class="range-control zoom-control">
            <span>页面缩放 <output id="zoomValue">适合页</output></span>
            <input id="pageZoom" type="range" min="0.20" max="1.25" step="0.05" value="0.75" />
          </label>
          <button class="ghost-action fit-action" id="fitZoom" type="button">适合页</button>
          <button class="primary-action" id="runCompare" type="button">对比</button>
        </div>
      </header>

      <main class="workspace" id="workspace">
        <aside class="left-rail" aria-label="文件与任务">
          <section class="rail-section files-section">
            <div class="section-title">
              <h2>文件</h2>
              <button class="ghost-action" id="clearAll" type="button">清空</button>
            </div>
            <div class="file-slots" id="fileSlots"></div>
          </section>
        </aside>

        <div class="rail-switch rail-switch-left" aria-label="左侧栏开关">
          <button class="rail-toggle-button" id="toggleLeftRail" type="button" aria-expanded="true">隐藏</button>
        </div>

        <section class="docs-grid" id="docsGrid" aria-label="文档内容"></section>

        <div class="rail-switch rail-switch-right" aria-label="右侧栏开关">
          <button class="rail-toggle-button" id="toggleRightRail" type="button" aria-expanded="true">隐藏</button>
        </div>

        <aside class="right-rail" aria-label="概览与索引">
          <section class="rail-section summary-section is-collapsed" id="summarySection">
            <div class="section-title">
              <h2>概览</h2>
              <div class="section-actions">
                <button class="ghost-action" id="exportIndex" type="button">导出</button>
                <button class="ghost-action" id="toggleSummary" type="button">展开</button>
              </div>
            </div>
            <div class="summary-compact" id="summaryCompact"></div>
            <div class="summary-grid" id="summaryGrid"></div>
          </section>

          <section class="rail-section index-section">
            <div class="section-title">
              <h2>雷同索引</h2>
              <span class="match-count" id="matchCount">0</span>
            </div>
            <div class="tab-bar" id="filterTabs" role="tablist" aria-label="索引类型">
              <button class="tab-button is-active" type="button" data-filter="all">全部</button>
              <button class="tab-button" type="button" data-filter="text">文本</button>
              <button class="tab-button" type="button" data-filter="image">图片</button>
            </div>
            <div class="match-list" id="matchList"></div>
          </section>
        </aside>
      </main>
    </div>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>

    <script src="vendor/jszip.min.js"></script>
    <script src="src/app.js" defer></script>
  </body>
</html>