Typeseter/index.html at master · TinySnow/Typeseter · 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
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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>排版器</title>
  </head>
  <body>
    <!--
      页面结构顺序：
      1) 模式切换
      2) 设置项
      3) 文本框与操作按钮
      4) GitHub 链接
    -->
    <main class="app">
      <header class="top">
        <div class="top-row">
          <h1>排版器</h1>
          <div class="top-actions">
            <button id="profile-save-btn" type="button" class="secondary">保存为配置文件</button>
          </div>
        </div>
      </header>

      <details id="mode-panel" class="panel collapse-panel">
        <summary class="collapse-summary">
          <div class="collapse-head">
            <h2 class="panel-title">模式</h2>
            <div class="mode-switch" id="mode-switch">
              <label>
                <input type="radio" name="typeset-mode" value="plain" checked />
                纯文本模式
              </label>
              <label>
                <input type="radio" name="typeset-mode" value="markdown" />
                md 模式
              </label>
            </div>
          </div>
        </summary>
        <div id="mode-preview-row" class="collapse-body mode-preview-row" style="display: none">
          <label id="preview-toggle" class="preview-toggle">
            <input id="markdown-protection-preview" type="checkbox" />
            md 保护范围预览（会插入 KEEP 标记）
          </label>
        </div>
      </details>

      <details id="profile-panel" class="panel collapse-panel" style="display: none">
        <summary class="collapse-summary">
          <div class="collapse-head">
            <h2 class="panel-title">配置文件</h2>
            <div id="profile-toolbar" class="toolbar profile-toolbar">
              <button id="profile-apply-btn" type="button">应用配置</button>
              <button id="profile-overwrite-btn" type="button" class="secondary">覆盖当前配置</button>
              <button id="profile-delete-btn" type="button" class="secondary">删除配置</button>
            </div>
          </div>
        </summary>
        <div class="collapse-body profile-row">
          <label for="profile-select">配置名称</label>
          <select id="profile-select"></select>
          <span id="profile-meta" class="profile-meta"></span>
        </div>
      </details>

      <section class="panel">
        <details>
          <summary>设置</summary>
          <div class="settings">
            <div>
              <h2>常规修正</h2>
              <div id="common-settings" class="check-grid"></div>
            </div>

            <div>
              <h2>段落间距</h2>
              <div class="line-gap-row">
                <label for="line-gap-select">段落间空行数</label>
                <select id="line-gap-select">
                  <option value="0">不空行</option>
                  <option value="1">空一行</option>
                  <option value="2">空两行</option>
                  <option value="-1">自定义分隔符</option>
                </select>
                <input
                  id="line-breaker-input"
                  type="text"
                  placeholder="自定义段落分隔符"
                />
              </div>
            </div>

            <div>
              <h2>标点修正（英转中）</h2>
              <div id="punctuation-settings" class="check-grid"></div>
            </div>

            <div>
              <h2>其他修正</h2>
              <div id="other-settings" class="check-grid"></div>
            </div>
          </div>
        </details>
      </section>

      <section class="panel">
        <div class="panel-head">
          <h2 class="panel-title">文本框</h2>
          <div class="toolbar">
            <button id="typeset-btn" type="button">立即排版</button>
            <button id="reset-btn" type="button" class="secondary">重置设置</button>
            <button id="copy-btn" type="button" class="secondary">复制结果</button>
          </div>
        </div>
        <textarea
          id="editor"
          rows="24"
          placeholder="请输入需要排版的中文文本"
        ></textarea>
      </section>

      <footer class="footer">
        <a href="https://github.com/TinySnow/Typeseter" target="_blank" rel="noreferrer">GitHub</a>
      </footer>
    </main>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>