-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathoptions.html
More file actions
158 lines (149 loc) · 7.67 KB
/
Copy pathoptions.html
File metadata and controls
158 lines (149 loc) · 7.67 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Smart TOC & Scroll 设置</title>
<link rel="stylesheet" href="options.css?v=2.19.0" />
</head>
<body>
<main class="page">
<section class="settings-panel" aria-labelledby="settings-title">
<header class="page-header">
<div>
<img src="icons/icon128.png" width="32" height="32" alt="" />
<h1 id="settings-title">Smart TOC & Scroll</h1>
<p class="page-subtitle">低干扰阅读导航设置</p>
</div>
</header>
<div class="settings-list">
<section class="setting-row" aria-labelledby="themePreset-label">
<div class="setting-copy">
<h2 id="themePreset-label">导航类型</h2>
<p id="themePresetHint" aria-live="polite">完整目录，适合文档站和技术长文。</p>
</div>
<div class="setting-control">
<select id="themePreset" class="native-select" tabindex="-1" aria-hidden="true">
<option value="default">标准面板</option>
<option value="barcode">边缘导航</option>
</select>
<div class="segmented-control segmented-control--preset" data-control-for="themePreset" role="group" aria-labelledby="themePreset-label" aria-describedby="themePresetHint">
<button class="is-active" type="button" data-value="default" aria-pressed="true">标准面板</button>
<button type="button" data-value="barcode" aria-pressed="false">边缘导航</button>
</div>
</div>
</section>
<section id="barcodePreviewRow" class="setting-row" aria-labelledby="barcodePreview-label" hidden>
<div class="setting-copy">
<h2 id="barcodePreview-label">边缘导航样式</h2>
<p id="barcodePreviewHint" aria-live="polite">只显示目标标题和前后各一项，快速确认跳转位置。</p>
</div>
<div class="setting-control">
<select id="barcodePreview" class="native-select" tabindex="-1" aria-hidden="true">
<option value="spotlight">邻节预览</option>
<option value="gpt">检索目录</option>
<option value="sspai">页边大纲</option>
</select>
<div class="segmented-control segmented-control--barcode-preview" data-control-for="barcodePreview" role="group" aria-labelledby="barcodePreview-label" aria-describedby="barcodePreviewHint">
<button type="button" data-value="spotlight" aria-pressed="false">邻节预览</button>
<button type="button" data-value="gpt" aria-pressed="false">检索目录</button>
<button type="button" data-value="sspai" aria-pressed="false">页边大纲</button>
</div>
</div>
</section>
<section id="standardInteractionRow" class="setting-row" aria-labelledby="expandMode-label">
<div class="setting-copy">
<h2 id="expandMode-label">交互方式</h2>
<p id="expandModeHint">悬停预览目录，点击浮标可固定展开。</p>
</div>
<div class="setting-control">
<select id="expandMode" class="native-select" tabindex="-1" aria-hidden="true">
<option value="hover">悬停预览</option>
<option value="click">点击开关</option>
<option value="press">短按回顶 / 长按展开</option>
</select>
<div class="segmented-control segmented-control--wide" data-control-for="expandMode" role="group" aria-labelledby="expandMode-label">
<button class="is-active" type="button" data-value="hover" aria-pressed="true">悬停预览</button>
<button type="button" data-value="click" aria-pressed="false">点击开关</button>
<button type="button" data-value="press" aria-pressed="false">短按 / 长按</button>
</div>
</div>
</section>
<section class="setting-row" aria-labelledby="display-label">
<div class="setting-copy">
<h2 id="display-label">显示条件</h2>
<p>避免短页面或首屏阅读被打扰。</p>
</div>
<div class="setting-control compact-grid">
<label class="compact-field">
<span>滚动屏数</span>
<input
id="showAfterScrollScreens"
type="number" required
min="0"
step="0.5"
aria-label="滚动屏数"
aria-describedby="display-label"
value="1"
/>
</label>
<label class="compact-field">
<span>最少标题</span>
<input id="minHeaders" type="number" required min="0" step="1" aria-label="最少标题" value="3" />
</label>
</div>
</section>
<section class="setting-row" aria-labelledby="position-label">
<div class="setting-copy">
<h2 id="position-label">位置</h2>
<p>让浮层贴近阅读边缘，避开正文主体。</p>
</div>
<div class="setting-control">
<select id="position" class="native-select" tabindex="-1" aria-hidden="true">
<option value="right">右侧</option>
<option value="left">左侧</option>
</select>
<div class="segmented-control" data-control-for="position" role="group" aria-labelledby="position-label">
<button class="is-active" type="button" data-value="right" aria-pressed="true">右侧</button>
<button type="button" data-value="left" aria-pressed="false">左侧</button>
</div>
</div>
</section>
<section class="setting-row" aria-labelledby="compatibility-label">
<div class="setting-copy">
<h2 id="compatibility-label">兼容策略</h2>
<p>页面已有导航控件时，减少重复打扰。</p>
</div>
<div class="setting-control toggle-stack">
<label class="toggle-pill">
<input id="avoidExistingWidgets" type="checkbox" checked />
<span>自动避让已有控件</span>
</label>
<label class="toggle-pill">
<input id="forceShow" type="checkbox" />
<span>始终显示</span>
</label>
</div>
</section>
<section class="setting-row setting-row--textarea" aria-labelledby="disabledDomains-label">
<div class="setting-copy">
<h2 id="disabledDomains-label">禁用域名</h2>
<p>逗号分隔域名，包含其子域名。保存后刷新网页生效。</p>
</div>
<div class="setting-control">
<textarea id="disabledDomains" rows="3" placeholder="example.com, docs.example.org"></textarea>
</div>
</section>
</div>
<footer class="settings-footer">
<p>本地分析页面结构，偏好通过浏览器同步。保存后刷新文章页生效。</p>
<div class="actions">
<span id="status" role="status" aria-live="polite" aria-atomic="true"></span>
<button id="save" type="button" disabled>已保存</button>
</div>
</footer>
</section>
</main>
<script src="options.js?v=2.19.0"></script>
</body>
</html>