Skip to content

Commit c906130

Browse files
CC11001100CC11001100
committed
fix: 修复代码框宽度、Java语法高亮和代码行高亮问题
1. 增加代码框宽度为原来的120%（min-width: 380px, max-width: 540px） 2. 添加 prismjs 依赖并导入 Java 和 Go 语言支持，修复 Java 代码无语法高亮问题 3. 修正 algorithmSteps.ts 中各语言的代码行号配置，使高亮行与实际执行代码对应
1 parent f6827e0 commit c906130

File tree

6 files changed

+91
-59
lines changed

6 files changed

+91
-59
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@
1414
"d3": "^7.9.0",
1515
"idb": "^8.0.3",
1616
"prism-react-renderer": "^2.4.1",
17+
"prismjs": "^1.30.0",
1718
"react": "^19.2.0",
1819
"react-dom": "^19.2.0"
1920
},
2021
"devDependencies": {
2122
"@eslint/js": "^9.39.1",
2223
"@types/node": "^24.10.1",
24+
"@types/prismjs": "^1.26.5",
2325
"@types/react": "^19.2.5",
2426
"@types/react-dom": "^19.2.3",
2527
"@vitejs/plugin-react": "^5.1.1",

‎src/App.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
}
2222

2323
.code-section {
24-
flex: 1;
25-
min-width: 320px;
26-
max-width: 450px;
24+
flex: 1.2;
25+
min-width: 380px;
26+
max-width: 540px;
2727
display: flex;
2828
}

‎src/components/CodePanel/CodePanel.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Highlight, themes } from 'prism-react-renderer';
2+
import { Highlight, themes, Prism } from 'prism-react-renderer';
33
import type { ProgrammingLanguage, AlgorithmStep, VariableState } from '../../types';
44
import { codeSnippets, getCodeByLanguage } from '../../data/codeSnippets';
55
import { getSetting, saveSetting } from '../../utils/indexedDB';
66
import './CodePanel.css';
77

8+
// 添加 Java 和 Go 语言支持
9+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
10+
(window as any).Prism = Prism;
11+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
12+
// @ts-ignore
13+
import('prismjs/components/prism-java');
14+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
15+
// @ts-ignore
16+
import('prismjs/components/prism-go');
17+
818
interface CodePanelProps {
919
currentStep: AlgorithmStep | null;
1020
}

‎src/utils/algorithmSteps.ts‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,15 @@ export const generateAlgorithmSteps = (
5454
upper,
5555
action: 'enter',
5656
codeLines: {
57-
java: [3, 4],
57+
java: [6],
5858
python: [2, 3],
59-
golang: [3, 4],
60-
javascript: [3, 4],
59+
golang: [5],
60+
javascript: [5],
6161
},
6262
variables: [
63-
{ name: 'root', value: node ? `TreeNode(${node.val})` : 'null', line: 3, language: 'java' },
64-
{ name: 'lower', value: formatBound(lower), line: 3, language: 'java' },
65-
{ name: 'upper', value: formatBound(upper), line: 3, language: 'java' },
63+
{ name: 'root', value: node ? `TreeNode(${node.val})` : 'null', line: 6, language: 'java' },
64+
{ name: 'lower', value: formatBound(lower), line: 6, language: 'java' },
65+
{ name: 'upper', value: formatBound(upper), line: 6, language: 'java' },
6666
],
6767
annotations: nodeId ? [{
6868
nodeId,
@@ -85,10 +85,10 @@ export const generateAlgorithmSteps = (
8585
action: 'return',
8686
result: true,
8787
codeLines: {
88-
java: [4, 5, 6],
89-
python: [3, 4],
90-
golang: [4, 5, 6],
91-
javascript: [4, 5, 6],
88+
java: [7, 8, 9],
89+
python: [4, 5],
90+
golang: [6, 7, 8],
91+
javascript: [6, 7, 8],
9292
},
9393
variables: [],
9494
annotations: [],
@@ -109,15 +109,15 @@ export const generateAlgorithmSteps = (
109109
action: 'check',
110110
result: inRange,
111111
codeLines: {
112-
java: [7, 8, 9],
113-
python: [5],
114-
golang: [7, 8, 9],
115-
javascript: [7, 8, 9],
112+
java: [10, 11, 12],
113+
python: [6, 7],
114+
golang: [9, 10, 11],
115+
javascript: [9, 10, 11],
116116
},
117117
variables: [
118-
{ name: 'root.val', value: node.val.toString(), line: 7, language: 'java' },
119-
{ name: 'lower', value: formatBound(lower), line: 7, language: 'java' },
120-
{ name: 'upper', value: formatBound(upper), line: 7, language: 'java' },
118+
{ name: 'root.val', value: node.val.toString(), line: 10, language: 'java' },
119+
{ name: 'lower', value: formatBound(lower), line: 10, language: 'java' },
120+
{ name: 'upper', value: formatBound(upper), line: 10, language: 'java' },
121121
],
122122
annotations: [{
123123
nodeId: nodeId!,
@@ -139,10 +139,10 @@ export const generateAlgorithmSteps = (
139139
action: 'result',
140140
result: false,
141141
codeLines: {
142-
java: [7, 8, 9],
143-
python: [5],
144-
golang: [7, 8, 9],
145-
javascript: [7, 8, 9],
142+
java: [10, 11, 12],
143+
python: [6, 7],
144+
golang: [9, 10, 11],
145+
javascript: [9, 10, 11],
146146
},
147147
variables: [],
148148
annotations: [{
@@ -166,13 +166,13 @@ export const generateAlgorithmSteps = (
166166
upper,
167167
action: 'recurse-left',
168168
codeLines: {
169-
java: [10],
170-
python: [6],
171-
golang: [10],
172-
javascript: [10],
169+
java: [13],
170+
python: [8],
171+
golang: [12],
172+
javascript: [12],
173173
},
174174
variables: [
175-
{ name: 'new_upper', value: node.val.toString(), line: 10, language: 'java' },
175+
{ name: 'new_upper', value: node.val.toString(), line: 13, language: 'java' },
176176
],
177177
annotations: [{
178178
nodeId: nodeId!,
@@ -197,10 +197,10 @@ export const generateAlgorithmSteps = (
197197
action: 'result',
198198
result: false,
199199
codeLines: {
200-
java: [10],
201-
python: [6],
202-
golang: [10],
203-
javascript: [10],
200+
java: [13, 14],
201+
python: [8, 9],
202+
golang: [12, 13],
203+
javascript: [12, 13],
204204
},
205205
variables: [],
206206
annotations: [{
@@ -224,13 +224,13 @@ export const generateAlgorithmSteps = (
224224
upper,
225225
action: 'recurse-right',
226226
codeLines: {
227-
java: [10],
228-
python: [7],
229-
golang: [10],
230-
javascript: [10],
227+
java: [14],
228+
python: [9],
229+
golang: [13],
230+
javascript: [13],
231231
},
232232
variables: [
233-
{ name: 'new_lower', value: node.val.toString(), line: 10, language: 'java' },
233+
{ name: 'new_lower', value: node.val.toString(), line: 14, language: 'java' },
234234
],
235235
annotations: [{
236236
nodeId: nodeId!,
@@ -256,14 +256,14 @@ export const generateAlgorithmSteps = (
256256
action: 'return',
257257
result: finalResult,
258258
codeLines: {
259-
java: [10],
260-
python: [6, 7],
261-
golang: [10],
262-
javascript: [10],
259+
java: [13, 14],
260+
python: [8, 9],
261+
golang: [12, 13],
262+
javascript: [12, 13],
263263
},
264264
variables: [
265-
{ name: 'leftResult', value: leftResult.toString(), line: 10, language: 'java' },
266-
{ name: 'rightResult', value: rightResult.toString(), line: 10, language: 'java' },
265+
{ name: 'leftResult', value: leftResult.toString(), line: 13, language: 'java' },
266+
{ name: 'rightResult', value: rightResult.toString(), line: 14, language: 'java' },
267267
],
268268
annotations: [{
269269
nodeId: nodeId!,
@@ -286,10 +286,10 @@ export const generateAlgorithmSteps = (
286286
upper: Number.MAX_SAFE_INTEGER,
287287
action: 'enter',
288288
codeLines: {
289-
java: [1, 2, 11, 12, 13],
290-
python: [1, 2],
291-
golang: [1, 2, 11, 12, 13],
292-
javascript: [1, 2, 11, 12, 13],
289+
java: [1, 2, 3],
290+
python: [1, 2, 3],
291+
golang: [1, 2],
292+
javascript: [1, 2],
293293
},
294294
variables: [],
295295
annotations: [],
@@ -308,13 +308,13 @@ export const generateAlgorithmSteps = (
308308
action: 'result',
309309
result,
310310
codeLines: {
311-
java: [11, 12, 13],
312-
python: [1, 2],
313-
golang: [11, 12, 13],
314-
javascript: [11, 12, 13],
311+
java: [2, 3],
312+
python: [2, 3],
313+
golang: [1, 2],
314+
javascript: [1, 2],
315315
},
316316
variables: [
317-
{ name: 'result', value: result.toString(), line: 13, language: 'java' },
317+
{ name: 'result', value: result.toString(), line: 3, language: 'java' },
318318
],
319319
annotations: [],
320320
callStack: [],

‎src/utils/treeUtils.ts‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,17 @@ export const buildVisualTree = (
7373
left: number,
7474
right: number,
7575
parent: VisualNode | null,
76-
_isNull: boolean = false
76+
parentHasThisChild: boolean = true
7777
): VisualNode | null => {
78+
// 如果不显示NULL节点，且当前节点为空，则返回null
7879
if (!node && !showNullNodes) return null;
79-
if (!node && depth >= treeHeight) return null;
80+
81+
// 如果当前节点为空，且父节点没有这个子节点（即不需要显示NULL占位符），则返回null
82+
// 只有当父节点存在且该位置确实需要显示NULL时才创建NULL节点
83+
if (!node && !parentHasThisChild) return null;
84+
85+
// 如果节点为空且深度超过树高度，不再创建更深层的NULL节点
86+
if (!node && depth > treeHeight) return null;
8087

8188
const x = (left + right) / 2;
8289
const y = (depth + 1) * levelHeight;
@@ -94,14 +101,16 @@ export const buildVisualTree = (
94101
};
95102

96103
if (node) {
97-
visualNode.left = buildNode(node.left, depth + 1, left, x, visualNode, !node.left);
98-
visualNode.right = buildNode(node.right, depth + 1, x, right, visualNode, !node.right);
104+
// 对于实际存在的节点，总是尝试创建其子节点（包括NULL子节点）
105+
// 只要showNullNodes为true，就应该显示NULL子节点
106+
visualNode.left = buildNode(node.left, depth + 1, left, x, visualNode, true);
107+
visualNode.right = buildNode(node.right, depth + 1, x, right, visualNode, true);
99108
}
100109

101110
return visualNode;
102111
};
103112

104-
return buildNode(root, 0, 0, width, null);
113+
return buildNode(root, 0, 0, width, null, true);
105114
};
106115

107116
// 获取所有节点（扁平化）

0 commit comments

Comments
 (0)