Skip to content

Commit 10c924a

Browse files
committed
完善项目功能和文档
1. 修复IndexedDB版本升级问题 2. 简化README文档,只保留必要信息 3. 确保所有功能正常工作
1 parent c266d77 commit 10c924a

File tree

2 files changed

+11
-59
lines changed

2 files changed

+11
-59
lines changed

README.md

Lines changed: 5 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,14 @@
1-
# 对称二叉树可视化
1+
# 101. 对称二叉树 - 算法可视化
22

3-
这个项目提供了对称二叉树算法的交互式可视化,帮助您理解对称二叉树的判断原理
3+
LeetCode 第101题「对称二叉树」的可视化动画演示
44

5-
## 功能特点
5+
## 在线演示
66

7-
- **直观的树形可视化**:清晰展示二叉树结构
8-
- **详细的步骤解释**:每一步比较都有详细的文字说明
9-
- **辅助线和箭头**:使用大量辅助线、箭头和标记,直观展示比较过程
10-
- **镜像轴标记**:明确展示树的镜像对称性
11-
- **动画效果**:丰富的动画效果使算法过程更加生动
12-
- **递归栈可视化**:实时显示递归调用栈的变化
13-
- **树的生成工具**:可生成随机树或对称树,方便测试
14-
- **两种算法实现**:同时支持递归和迭代两种判断方法
7+
👉 [点击查看在线演示](https://fuck-algorithm.github.io/leetcode-101-symmetric-tree/)
158

16-
## 可视化说明
17-
18-
这个工具使用不同颜色和视觉元素来帮助理解对称二叉树的判断过程:
19-
20-
- **蓝色节点**:根节点
21-
- **绿色节点**:左子树节点
22-
- **浅绿色节点**:右子树节点
23-
- **橙色高亮**:当前正在比较的节点对
24-
- **粉色/紫色高亮**:当前正在比较的左/右子树
25-
- **绿色对号**:对称/匹配的节点
26-
- **红色叉号**:不对称/不匹配的节点
27-
- **橙色虚线**:中心镜像轴
28-
- **箭头连接线**:显示节点间的比较关系
29-
- **文字说明框**:详细解释每一步操作
30-
31-
## 使用方法
32-
33-
1. 输入格式化的树数组(如 `[1,2,2,3,4,4,3]`)或使用生成按钮
34-
2. 选择算法实现方法(递归或迭代)
35-
3. 使用步骤控制按钮逐步查看算法执行过程
36-
4. 观察递归栈的变化(递归方法)
37-
5. 查看每一步的详细解释和视觉辅助线
38-
39-
## 开发技术
40-
41-
- React 框架
42-
- TypeScript 类型支持
43-
- D3.js 图形渲染
44-
- CSS 动画效果
45-
46-
## 安装和运行
9+
## 本地运行
4710

4811
```bash
49-
# 安装依赖
5012
npm install
51-
52-
# 运行开发服务器
5313
npm run dev
5414
```
55-
56-
## 项目改进
57-
58-
最新版本的可视化效果进行了全面重写,增强了视觉效果并改进了用户体验:
59-
60-
- 添加了更多的辅助线、箭头和说明文字
61-
- 增加了节点镜像关系的视觉标记
62-
- 优化了动画效果,使流程更加流畅
63-
- 添加了详细的步骤解释面板
64-
- 增强了节点比较时的视觉反馈
65-
- 改进了整体布局和响应式设计

src/components/tree/Header.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,17 @@ interface CacheData {
2121

2222
const openDB = (): Promise<IDBDatabase> => {
2323
return new Promise((resolve, reject) => {
24-
const request = indexedDB.open(DB_NAME, 1);
24+
const request = indexedDB.open(DB_NAME, 2); // 升级版本号
2525
request.onerror = () => reject(request.error);
2626
request.onsuccess = () => resolve(request.result);
2727
request.onupgradeneeded = (event) => {
2828
const db = (event.target as IDBOpenDBRequest).result;
29-
if (!db.objectStoreNames.contains(STORE_NAME)) {
30-
db.createObjectStore(STORE_NAME, { keyPath: 'key' });
29+
// 删除旧的store(如果存在)
30+
if (db.objectStoreNames.contains(STORE_NAME)) {
31+
db.deleteObjectStore(STORE_NAME);
3132
}
33+
// 创建新的store
34+
db.createObjectStore(STORE_NAME, { keyPath: 'key' });
3235
};
3336
});
3437
};

0 commit comments

Comments
 (0)