Skip to content

Commit 9564fde

Browse files
committed
优化UI:缩短延迟控制宽度、进度条100%宽度绿色/灰色配色、添加Google Analytics、修复ESLint警告
1 parent 529041c commit 9564fde

File tree

22 files changed

+2214
-626
lines changed

22 files changed

+2214
-626
lines changed

.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
PORT=16278

.github/workflows/deploy.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ jobs:
2525
- name: Build project
2626
run: npm run build
2727
env:
28-
CI: false # 避免将警告视为错误
28+
CI: true # 将警告视为错误,确保代码质量
2929

3030
- name: Deploy to GitHub Pages
3131
uses: JamesIves/github-pages-deploy-action@v4

README.md

Lines changed: 0 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +0,0 @@
1-
# LeetCode 160: 相交链表 - 可视化教程
2-
3-
## 在线演示
4-
5-
🚀 **[在线查看演示](https://fuck-algorithm.github.io/leetcode-160-intersection-of-two-linked-lists/)**
6-
7-
这个交互式可视化工具可以帮助你理解 LeetCode 第 160 题 "相交链表" 的解题思路和实现过程。
8-
9-
![相交链表示例图](https://assets.leetcode.com/uploads/2021/03/05/160_statement.png)
10-
11-
## 📖 问题描述
12-
13-
给你两个单链表的头节点 `headA``headB`,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 `null`
14-
15-
题目数据保证整个链式结构中不存在环。
16-
17-
## 🔍 解题思路
18-
19-
本可视化工具展示了解决此问题的"双指针"方法:
20-
21-
### 双指针解法 (O(m+n) 时间, O(1) 空间)
22-
23-
这是一种优雅的解法,无需额外空间:
24-
25-
1. 创建两个指针 `pA``pB`,分别指向链表 A 和链表 B 的头节点
26-
2. 同时遍历两个链表,当一个指针到达链表末尾时,将其重定向到另一个链表的头部
27-
3. 如果两个链表相交,两个指针最终会在相交点相遇
28-
4. 如果两个链表不相交,两个指针最终都会变为 `null`
29-
30-
### 数学原理
31-
32-
- 如果两个链表有相交,设链表 A 相交前长度为 a,链表 B 相交前长度为 b,相交部分长度为 c
33-
- 指针 pA 走完路径: a + c + b
34-
- 指针 pB 走完路径: b + c + a
35-
- 由于两个路径长度相同,且都会经过相交点,两指针必会相遇
36-
37-
## ✨ 应用功能
38-
39-
- **交互式可视化**:通过动画直观展示算法的执行过程
40-
- **步骤控制**
41-
- 单步执行(前进/后退)
42-
- 连续自动执行
43-
- 执行速度/延迟调整
44-
- **键盘快捷键**
45-
- ← 上一步
46-
- → 下一步
47-
- 空格键 暂停/连续执行
48-
- **自定义示例**:创建自己的链表示例以测试算法
49-
- **多标签页**
50-
- 算法可视化
51-
- 题目详细描述
52-
- 解题代码展示
53-
54-
## 🚀 本地开发
55-
56-
```bash
57-
# 克隆仓库
58-
git clone https://github.com/fuck-algorithm/leetcode-160-intersection-of-two-linked-lists.git
59-
cd leetcode-160-intersection-of-two-linked-lists
60-
61-
# 安装依赖
62-
npm install
63-
64-
# 启动开发服务器
65-
npm start
66-
```
67-
68-
## 🔧 部署到 GitHub Pages
69-
70-
```bash
71-
npm run deploy
72-
```
73-
74-
## 🛠️ 技术栈
75-
76-
- React + TypeScript
77-
- D3.js (可视化)
78-
- CSS3 (动画和样式)
79-
- GitHub Pages (部署)
80-
81-
## 📚 学习资源
82-
83-
- [LeetCode 原题](https://leetcode.cn/problems/intersection-of-two-linked-lists/description/)
84-
- [相关文章和讲解]() - 待添加
85-
86-
## 📝 贡献指南
87-
88-
欢迎提交 Issues 和 Pull Requests 来改进这个项目!
89-
90-
## 📄 许可证
91-
92-
MIT

public/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<!-- Google tag (gtag.js) -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-17X78NFTLG"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
gtag('config', 'G-17X78NFTLG');
11+
</script>
412
<meta charset="utf-8" />
513
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
614
<meta name="viewport" content="width=device-width, initial-scale=1" />

src/App.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const App: React.FC = () => {
2323
handleSpeedChange,
2424
toggleAutoExecution,
2525
resetExecution,
26-
handleChangeSolution
26+
seekToStep
2727
} = useAlgorithmSteps();
2828

2929
useEffect(() => {
@@ -54,6 +54,7 @@ const App: React.FC = () => {
5454
onSpeedChange={handleSpeedChange}
5555
onToggleExecution={toggleAutoExecution}
5656
onReset={resetExecution}
57+
onSeekToStep={seekToStep}
5758
/>
5859
</Tab>
5960
<Tab id="problem" label="题目描述">

0 commit comments

Comments
 (0)