-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexamples.html
More file actions
556 lines (465 loc) · 26.1 KB
/
Copy pathexamples.html
File metadata and controls
556 lines (465 loc) · 26.1 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例代码 - Ruin 语言文档</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="container">
<header>
<h1>📚 示例代码</h1>
<div class="version">实战示例和最佳实践</div>
</header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="getting-started.html">快速开始</a></li>
<li><a href="syntax.html">语法</a></li>
<li><a href="types.html">类型系统</a></li>
<li><a href="function.html">函数系统</a></li>
<li><a href="builtin.html">内置模块</a></li>
<li><a href="string.html">String 模块</a></li>
<li><a href="object.html">Object 模块</a></li>
<li><a href="this.html">this 关键字</a></li>
<li><a href="fs.html">文件系统</a></li>
<li><a href="http.html">HTTP 模块</a></li>
<li><a href="json.html">JSON 处理</a></li>
<li><a href="system.html">System 模块</a></li>
<li><a href="gui.html">GUI系统</a></li>
<li><a href="window.html">窗口管理</a></li>
<li><a href="canvas.html">Canvas 绘图</a></li>
<li><a href="input.html">输入系统</a></li>
<li><a href="lifecycle.html">生命周期</a></li>
<li><a href="async.html">异步编程</a></li>
<li><a href="gpu.html">GPU计算</a></li>
<li><a href="cv.html">计算机视觉</a></li>
<li><a href="llama.html">Llama AI</a></li>
<li><a href="screen.html">屏幕捕获</a></li>
<li><a href="examples.html" class="active">示例</a></li>
</ul>
</nav>
<main>
<div class="breadcrumb">
<a href="index.html">首页</a> <span>></span> 示例代码
</div>
<section id="intro">
<h2>📖 概述</h2>
<p>以下是 Ruin 语言的实战示例，展示了从简单的 Hello World 到复杂的图像处理和屏幕捕获的完整应用。所有示例都可以在 <code>test/</code> 目录中找到。</p>
<div class="info-box">
<h4>💡 运行示例</h4>
<pre><code>./dist/ruin.exe test/示例文件.ruin</code></pre>
</div>
</section>
<section id="closures">
<h2>🔒 闭包与异步编程</h2>
<p><strong>文件：</strong><code>test/test-closure.ruin</code></p>
<p>展示闭包、高阶函数和异步编程的完整示例。</p>
<pre><code><span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="comment">// 闭包示例</span>
<span class="keyword">let</span> function createCounter = () => function {
<span class="keyword">let</span> number count = <span class="number">0</span>;
<span class="keyword">return</span> () => number {
count = count + <span class="number">1</span>;
<span class="keyword">return</span> count;
};
};
<span class="keyword">let</span> function counter = createCounter();
console.log(counter()); <span class="comment">// 1</span>
console.log(counter()); <span class="comment">// 2</span></code></pre>
<div class="success-box">
<h4>✅ 特点</h4>
<ul>
<li>闭包捕获外部变量</li>
<li>高阶函数返回函数</li>
<li>异步回调支持</li>
</ul>
</div>
</section>
<section id="type-conversion">
<h2>🔄 类型转换</h2>
<p><strong>文件：</strong><code>test/test-convert.ruin</code></p>
<p>展示 Ruin 的类型转换系统。</p>
<pre><code><span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="keyword">import</span> convert <span class="keyword">from</span> <span class="string">"convert"</span>;
<span class="comment">// 字符串转数字</span>
<span class="keyword">let</span> string numStr = <span class="string">"123"</span>;
<span class="keyword">let</span> number num = parseInt(numStr);
console.log(<span class="string">"解析的数字: "</span> + num);
<span class="comment">// 数字转字符串</span>
<span class="keyword">let</span> number value = <span class="number">456</span>;
<span class="keyword">let</span> string valueStr = toString(value);
console.log(<span class="string">"转换的字符串: "</span> + valueStr);
<span class="comment">// 布尔转换</span>
<span class="keyword">let</span> boolean flag = toBool(<span class="string">"true"</span>);
console.log(<span class="string">"布尔值: "</span> + flag);</code></pre>
<div class="success-box">
<h4>✅ 涵盖知识点</h4>
<ul>
<li>parseInt() 字符串转数字</li>
<li>toString() 数字转字符串</li>
<li>toBool() 字符串转布尔</li>
<li>类型安全的转换</li>
</ul>
</div>
</section>
<section id="screen-basic">
<h2>📸 屏幕捕获基础</h2>
<p><strong>文件：</strong><code>test/test-screen-basic.ruin</code></p>
<p>展示 ScreenCapture 模块的所有基础功能。</p>
<h3>测试功能</h3>
<ul>
<li>✅ 平台检测（Windows DXGI / Linux X11）</li>
<li>✅ 显示器信息获取（分辨率、刷新率、位置）</li>
<li>✅ 多显示器列表</li>
<li>✅ 光标位置追踪</li>
<li>✅ 全屏截图保存</li>
<li>✅ 区域截图保存</li>
<li>✅ 屏幕图像捕获（cv.Mat 类型）</li>
<li>✅ 资源管理</li>
</ul>
<h3>关键代码</h3>
<pre><code><span class="keyword">import</span> screen <span class="keyword">from</span> <span class="string">"screen"</span>;
<span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="keyword">import</span> type <span class="keyword">from</span> <span class="string">"type"</span>;
<span class="comment">// 1. 获取平台和显示器信息</span>
<span class="keyword">let</span> string platform = screen.getPlatform();
<span class="keyword">let</span> number displayCount = screen.getDisplayCount();
console.log(<span class="string">"平台: "</span> + platform);
console.log(<span class="string">"显示器数量: "</span> + displayCount);
<span class="comment">// 2. 获取显示器详细信息</span>
<span class="keyword">let</span> object info = screen.getDisplayInfo(<span class="number">0</span>);
console.log(<span class="string">"分辨率: "</span> + info.width + <span class="string">"x"</span> + info.height);
console.log(<span class="string">"刷新率: "</span> + info.refreshRate + <span class="string">" Hz"</span>);
<span class="comment">// 3. 光标位置</span>
<span class="keyword">let</span> object cursor = screen.getCursorPosition();
console.log(<span class="string">"光标位置: ("</span> + cursor.x + <span class="string">", "</span> + cursor.y + <span class="string">")"</span>);
<span class="comment">// 4. 保存截图</span>
screen.saveScreenshot(<span class="string">"test/results/screenshot-full.png"</span>);
screen.saveRegionScreenshot(<span class="string">"test/results/region.png"</span>, <span class="number">100</span>, <span class="number">100</span>, <span class="number">800</span>, <span class="number">600</span>);
<span class="comment">// 5. 捕获图像（返回 cv.Mat）</span>
<span class="keyword">let</span> object img = screen.captureScreen();
<span class="keyword">if</span> (img.__type == type.Mat) {
console.log(<span class="string">"✓ 捕获成功"</span>);
screen.releaseImage(img);
}</code></pre>
<div class="success-box">
<h4>✅ 涵盖知识点</h4>
<ul>
<li>ScreenCapture API 使用</li>
<li>跨平台屏幕捕获</li>
<li>类型检查（type.Mat）</li>
<li>资源管理（releaseImage）</li>
<li>文件保存</li>
</ul>
</div>
</section>
<section id="cv-processing">
<h2>🖼️ OpenCV 图像处理</h2>
<p><strong>文件：</strong><code>test/test-cv-channels.ruin</code></p>
<p>展示 OpenCV 的各种图像处理功能。</p>
<pre><code><span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="keyword">import</span> cv <span class="keyword">from</span> <span class="string">"cv"</span>;
<span class="comment">// 读取图像</span>
<span class="keyword">let</span> object img = cv.imread(<span class="string">"test_image.jpg"</span>);
<span class="comment">// 转换为灰度图</span>
<span class="keyword">let</span> object gray = cv.cvtColor(img, <span class="number">6</span>);
<span class="comment">// 高斯模糊</span>
<span class="keyword">let</span> object blurred = cv.GaussianBlur(gray, <span class="number">15</span>, <span class="number">5.0</span>);
<span class="comment">// 边缘检测</span>
<span class="keyword">let</span> object edges = cv.Canny(blurred, <span class="number">50.0</span>, <span class="number">150.0</span>);
<span class="comment">// 保存结果</span>
cv.imwrite(<span class="string">"output.png"</span>, edges);
console.log(<span class="string">"图像处理完成！"</span>);</code></pre>
<div class="success-box">
<h4>✅ 涵盖知识点</h4>
<ul>
<li>图像读取与保存</li>
<li>颜色空间转换</li>
<li>图像滤波（高斯模糊）</li>
<li>边缘检测（Canny）</li>
<li>OpenCV 基础操作</li>
</ul>
</div>
</section>
<section id="comparison">
<h2>📊 示例对比</h2>
<table>
<thead>
<tr>
<th>示例</th>
<th>难度</th>
<th>模块</th>
<th>特点</th>
<th>运行时间</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>test-closure</strong></td>
<td>⭐⭐</td>
<td>console</td>
<td>闭包和高阶函数</td>
<td>< 0.1s</td>
</tr>
<tr>
<td><strong>test-convert</strong></td>
<td>⭐</td>
<td>convert</td>
<td>类型转换</td>
<td>< 0.1s</td>
</tr>
<tr>
<td><strong>test-screen-basic</strong></td>
<td>⭐⭐</td>
<td>screen</td>
<td>屏幕捕获基础</td>
<td>< 1s</td>
</tr>
<tr>
<td><strong>test-cv-channels</strong></td>
<td>⭐⭐</td>
<td>cv</td>
<td>OpenCV 图像处理</td>
<td>< 1s</td>
</tr>
</tbody>
</table>
</section>
<section id="running">
<h2>🚀 运行示例</h2>
<h3>闭包和函数</h3>
<pre><code><span class="comment"># 闭包示例</span>
./dist/ruin.exe test/test-closure.ruin
<span class="comment"># 测试闭包捕获和高阶函数</span></code></pre>
<h3>类型转换</h3>
<pre><code><span class="comment"># 类型转换测试</span>
./dist/ruin.exe test/test-convert.ruin
<span class="comment"># 测试各种类型转换函数</span></code></pre>
<h3>屏幕捕获</h3>
<pre><code><span class="comment"># 基础功能测试</span>
./dist/ruin.exe test/test-screen-basic.ruin
<span class="comment"># 生成文件：</span>
<span class="comment"># test/results/screenshot-full.png</span>
<span class="comment"># test/results/screenshot-region.png</span></code></pre>
<h3>OpenCV 图像处理</h3>
<pre><code><span class="comment"># CV 通道和图像处理</span>
./dist/ruin.exe test/test-cv-channels.ruin
<span class="comment"># 测试 OpenCV 的各种图像处理功能</span></code></pre>
</section>
<section id="learning-path">
<h2>🎓 学习路径</h2>
<div class="info-box">
<h4>推荐学习顺序</h4>
<ol>
<li><strong>test-convert.ruin</strong> - 学习类型转换</li>
<li><strong>test-closure.ruin</strong> - 理解闭包和高阶函数</li>
<li><strong>test-screen-basic.ruin</strong> - 了解屏幕捕获 API</li>
<li><strong>test-cv-channels.ruin</strong> - 掌握 OpenCV 图像处理</li>
</ol>
</div>
<h3>知识点覆盖</h3>
<ul>
<li>✅ 强类型语法</li>
<li>✅ 函数定义与调用</li>
<li>✅ 异步编程（await）</li>
<li>✅ 模块导入（import）</li>
<li>✅ GUI 窗口系统</li>
<li>✅ Canvas 绘图</li>
<li>✅ OpenCV 图像处理</li>
<li>✅ ScreenCapture 屏幕捕获</li>
<li>✅ HTTP 网络请求</li>
<li>✅ 资源管理</li>
<li>✅ 类型系统（type.Mat）</li>
</ul>
</section>
<section id="more-examples">
<h2>💡 更多示例</h2>
<p>查看 <code>test/</code> 目录获取更多示例：</p>
<ul>
<li><code>test/test-callback.ruin</code> - 回调函数示例</li>
<li><code>test/test-import-export.ruin</code> - 模块导入导出</li>
<li><code>test/test-phase1-features.ruin</code> - 第一阶段功能</li>
<li><code>test/test-phase2-features.ruin</code> - 第二阶段功能</li>
<li><code>test/test-input-simple.ruin</code> - 输入系统示例</li>
<li><code>test/test-audio-complete.ruin</code> - 音频功能</li>
</ul>
<p>语法测试示例（<code>test/syntax/</code>）：</p>
<ul>
<li><code>01-lexer/</code> - 词法分析器测试（关键字、数字、运算符、字符串）</li>
<li><code>02-parser/</code> - 解析器测试（表达式、语句、类型系统）</li>
<li><code>03-semantic/</code> - 语义分析测试（作用域）</li>
<li><code>04-integration/</code> - 集成测试（异步、闭包、泛型等）</li>
</ul>
<p>完整文档：</p>
<ul>
<li><a href="cv.html">OpenCV 模块文档</a></li>
<li><a href="screen.html">ScreenCapture 模块文档</a></li>
<li><a href="canvas.html">Canvas 绘图文档</a></li>
<li><a href="gui.html">GUI 系统文档</a></li>
</ul>
</section>
<section id="simple-game">
<h2>🎮 简单游戏</h2>
<p>一个完整的可玩游戏示例，包含玩家控制、分数系统和边界检测。</p>
<pre><code><span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="keyword">import</span> input <span class="keyword">from</span> <span class="string">"input"</span>;
<span class="keyword">import</span> gui <span class="keyword">from</span> <span class="string">"gui"</span>;
<span class="keyword">import</span> director <span class="keyword">from</span> <span class="string">"director"</span>;
<span class="comment">// 创建窗口</span>
<span class="keyword">let</span> window win = gui.createWindow({
width: <span class="number">800</span>,
height: <span class="number">600</span>,
title: <span class="string">"简单游戏"</span>,
center: <span class="keyword">true</span>
});
<span class="comment">// 创建玩家</span>
<span class="keyword">let</span> sprite player = gui.createSprite({
width: <span class="number">50</span>,
height: <span class="number">50</span>,
backgroundColor: {r: <span class="number">0.2</span>, g: <span class="number">0.8</span>, b: <span class="number">0.2</span>, a: <span class="number">1.0</span>}
});
<span class="keyword">let</span> number playerX = <span class="number">400.0</span>;
<span class="keyword">let</span> number playerY = <span class="number">300.0</span>;
<span class="keyword">let</span> number speed = <span class="number">5.0</span>;
<span class="keyword">let</span> number score = <span class="number">0</span>;
<span class="comment">// 分数显示</span>
<span class="keyword">let</span> label scoreLabel = gui.createLabel(<span class="string">"Score: 0"</span>, {
fontSize: <span class="number">24</span>,
color: {r: <span class="number">1.0</span>, g: <span class="number">1.0</span>, b: <span class="number">1.0</span>, a: <span class="number">1.0</span>}
});
scoreLabel.x = <span class="number">10.0</span>;
scoreLabel.y = <span class="number">10.0</span>;
<span class="comment">// 玩家逻辑</span>
player.start = <span class="keyword">function</span>() {
console.log(<span class="string">"游戏开始！"</span>);
};
player.update = <span class="keyword">function</span>(number delta) {
<span class="comment">// 使用轴输入</span>
<span class="keyword">let</span> number horizontal = input.getAxis(<span class="string">"move_left"</span>, <span class="string">"move_right"</span>);
<span class="keyword">let</span> number vertical = input.getAxis(<span class="string">"move_up"</span>, <span class="string">"move_down"</span>);
playerX = playerX + (horizontal * speed);
playerY = playerY + (vertical * speed);
<span class="comment">// 边界检测</span>
<span class="keyword">if</span> (playerX < <span class="number">0.0</span>) { playerX = <span class="number">0.0</span>; }
<span class="keyword">if</span> (playerX > <span class="number">750.0</span>) { playerX = <span class="number">750.0</span>; }
<span class="keyword">if</span> (playerY < <span class="number">0.0</span>) { playerY = <span class="number">0.0</span>; }
<span class="keyword">if</span> (playerY > <span class="number">550.0</span>) { playerY = <span class="number">550.0</span>; }
player.x = playerX;
player.y = playerY;
<span class="comment">// 空格增加分数</span>
<span class="keyword">if</span> (input.isActionJustPressed(<span class="string">"jump"</span>)) {
score = score + <span class="number">10</span>;
scoreLabel.text = <span class="string">"Score: "</span> + score;
console.log(<span class="string">"得分: "</span> + score);
}
};
<span class="comment">// 添加到场景</span>
director.getScene().canvas.addChild(player);
director.getScene().canvas.addChild(scoreLabel);
win.show();</code></pre>
</section>
<section id="button-example">
<h2>🔘 按钮交互示例</h2>
<pre><code><span class="keyword">import</span> console <span class="keyword">from</span> <span class="string">"console"</span>;
<span class="keyword">import</span> gui <span class="keyword">from</span> <span class="string">"gui"</span>;
<span class="keyword">import</span> director <span class="keyword">from</span> <span class="string">"director"</span>;
<span class="keyword">let</span> window win = gui.createWindow({
width: <span class="number">400</span>,
height: <span class="number">300</span>,
title: <span class="string">"按钮示例"</span>
});
<span class="keyword">let</span> label counter = gui.createLabel(<span class="string">"点击次数: 0"</span>, {
fontSize: <span class="number">24</span>
});
counter.x = <span class="number">100.0</span>;
counter.y = <span class="number">80.0</span>;
<span class="keyword">let</span> number clickCount = <span class="number">0</span>;
<span class="keyword">let</span> button btn = gui.createButton(<span class="string">"点击我"</span>, {
width: <span class="number">120</span>,
height: <span class="number">40</span>
});
btn.x = <span class="number">140.0</span>;
btn.y = <span class="number">150.0</span>;
btn.on(<span class="string">"click"</span>, <span class="keyword">function</span>() {
clickCount = clickCount + <span class="number">1</span>;
counter.text = <span class="string">"点击次数: "</span> + clickCount;
console.log(<span class="string">"点击了 "</span> + clickCount + <span class="string">" 次"</span>);
});
director.getScene().canvas.addChild(counter);
director.getScene().canvas.addChild(btn);
win.show();</code></pre>
</section>
<section id="layout-example">
<h2>📐 布局示例</h2>
<pre><code><span class="keyword">import</span> gui <span class="keyword">from</span> <span class="string">"gui"</span>;
<span class="keyword">import</span> director <span class="keyword">from</span> <span class="string">"director"</span>;
<span class="keyword">let</span> window win = gui.createWindow({
width: <span class="number">600</span>,
height: <span class="number">400</span>,
title: <span class="string">"布局示例"</span>
});
<span class="comment">// 垂直布局容器</span>
<span class="keyword">let</span> container vbox = gui.createContainer({
layout: <span class="string">"vertical"</span>,
padding: <span class="number">20</span>,
spacing: <span class="number">15</span>
});
<span class="comment">// 添加多个元素</span>
<span class="keyword">let</span> label title = gui.createLabel(<span class="string">"标题"</span>, {fontSize: <span class="number">28</span>});
<span class="keyword">let</span> label subtitle = gui.createLabel(<span class="string">"副标题"</span>, {fontSize: <span class="number">18</span>});
<span class="keyword">let</span> button btn1 = gui.createButton(<span class="string">"按钮 1"</span>);
<span class="keyword">let</span> button btn2 = gui.createButton(<span class="string">"按钮 2"</span>);
vbox.addChild(title);
vbox.addChild(subtitle);
vbox.addChild(btn1);
vbox.addChild(btn2);
director.getScene().canvas.addChild(vbox);
win.show();</code></pre>
</section>
<section id="tips">
<h2>💡 实用技巧</h2>
<h3>1. 组件不显示？</h3>
<div class="warning-box">
<p>确保：</p>
<ul>
<li>✅ 已添加到场景树：<code>director.getScene().canvas.addChild(component)</code></li>
<li>✅ 组件是活跃的：<code>component.active === true</code></li>
<li>✅ 组件是可见的：<code>component.visible === true</code></li>
<li>✅ 位置在窗口范围内</li>
</ul>
</div>
<h3>2. 输入不响应？</h3>
<div class="warning-box">
<p>确保：</p>
<ul>
<li>✅ 导入了 input 模块：<code>import input from "input"</code></li>
<li>✅ 在 <code>update</code> 回调中检测输入</li>
<li>✅ 窗口已显示（<code>win.show()</code>）</li>
</ul>
</div>
<h3>3. 窗口立即关闭？</h3>
<div class="success-box">
<p>确保程序没有立即结束。如果使用组件的 <code>update</code> 回调，窗口会持续运行。</p>
</div>
</section>
<section id="test-files">
<h2>📂 测试文件统计</h2>
<p>当前项目包含 <strong>56个</strong>通过测试的文件：</p>
<ul>
<li><code>test/</code> 根目录: 30 个功能测试</li>
<li><code>test/syntax/</code>: 19 个语法测试</li>
<li><code>test/comprehensive/</code>: 7 个综合测试</li>
</ul>
<p>所有测试文件都经过验证，确保可以正常运行。</p>
</section>
</main>
<footer>
<p>© 2025 Ruin 语言项目</p>
</footer>
</div>
<a href="#" class="back-to-top" id="backToTop">↑ 返回顶部</a>
<script src="assets/nav.js"></script>
</body>
</html>