Skip to content

Commit b20d62f

Browse files
CC11001100CC11001100
committed
feat: 添加微信交流群悬浮球组件和 GitHub Actions 部署配置
1 parent 3ad3d0d commit b20d62f

27 files changed

+2381
-568
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '20'
29+
cache: 'npm'
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Run linter
35+
run: npm run lint
36+
37+
- name: Run tests
38+
run: npm run test
39+
40+
- name: Build
41+
run: npm run build
42+
43+
- name: Setup Pages
44+
uses: actions/configure-pages@v4
45+
46+
- name: Upload artifact
47+
uses: actions/upload-pages-artifact@v3
48+
with:
49+
path: './dist'
50+
51+
deploy:
52+
environment:
53+
name: github-pages
54+
url: ${{ steps.deployment.outputs.page_url }}
55+
runs-on: ubuntu-latest
56+
needs: build
57+
steps:
58+
- name: Deploy to GitHub Pages
59+
id: deployment
60+
uses: actions/deploy-pages@v4

‎.kiro/specs/parentheses-generator-visualization/design.md‎

Lines changed: 129 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ interface AppState {
7272
leftCount: number;
7373
rightCount: number;
7474
highlightedLine: number;
75+
variables: VariablesState; // 变量监视状态
76+
callStackDepth: number; // 当前调用栈深度
7577
}
7678
```
7779

@@ -110,6 +112,7 @@ interface TreeVisualizationProps {
110112
currentNodeId: string | null;
111113
width: number;
112114
height: number;
115+
showAnnotations?: boolean; // 是否显示节点和边的文字说明
113116
}
114117
```
115118

@@ -127,15 +130,79 @@ interface StatePanelProps {
127130
```
128131

129132
#### 6. CodePanel Component
130-
算法代码展示面板。
133+
右侧大型 Java 代码展示面板，具有调试器风格的效果。
131134

132135
```typescript
133136
interface CodePanelProps {
134137
highlightedLine: number;
135138
callStackDepth: number;
139+
variables: VariablesState;
140+
showVariablesPanel: boolean;
141+
}
142+
143+
interface VariablesState {
144+
currentString: string; // 当前构建的字符串 (StringBuilder)
145+
leftCount: number; // 剩余左括号数量 (open)
146+
rightCount: number; // 剩余右括号数量 (close)
147+
resultList: string[]; // 结果列表 (ArrayList<String>)
148+
n: number; // 输入的 n 值
149+
callStackDepth: number; // 当前递归深度
150+
changedVariable: string | null; // 最近变化的变量名，用于高亮
151+
}
152+
```
153+
154+
**Java 代码内容：**
155+
```java
156+
class Solution {
157+
public List<String> generateParenthesis(int n) {
158+
List<String> result = new ArrayList<>();
159+
backtrack(result, new StringBuilder(), 0, 0, n);
160+
return result;
161+
}
162+
163+
private void backtrack(List<String> result, StringBuilder current,
164+
int open, int close, int max) {
165+
if (current.length() == max * 2) {
166+
result.add(current.toString());
167+
return;
168+
}
169+
170+
if (open < max) {
171+
current.append('(');
172+
backtrack(result, current, open + 1, close, max);
173+
current.deleteCharAt(current.length() - 1);
174+
}
175+
176+
if (close < open) {
177+
current.append(')');
178+
backtrack(result, current, open, close + 1, max);
179+
current.deleteCharAt(current.length() - 1);
180+
}
181+
}
136182
}
137183
```
138184

185+
**代码行映射：**
186+
| 行号 | 代码内容 | 对应算法动作 |
187+
|------|----------|--------------|
188+
| 1 | class Solution { | - |
189+
| 2 | public List<String> generateParenthesis(int n) { | 初始化 |
190+
| 3 | List<String> result = new ArrayList<>(); | 创建结果列表 |
191+
| 4 | backtrack(result, new StringBuilder(), 0, 0, n); | 开始回溯 |
192+
| 5 | return result; | 返回结果 |
193+
| 8 | private void backtrack(...) { | 进入递归 |
194+
| 9 | if (current.length() == max * 2) { | 检查完成条件 |
195+
| 10 | result.add(current.toString()); | 添加有效结果 |
196+
| 11 | return; | 返回 |
197+
| 14 | if (open < max) { | 检查能否添加左括号 |
198+
| 15 | current.append('('); | 添加左括号 |
199+
| 16 | backtrack(result, current, open + 1, close, max); | 递归调用 |
200+
| 17 | current.deleteCharAt(current.length() - 1); | 回溯删除 |
201+
| 20 | if (close < open) { | 检查能否添加右括号 |
202+
| 21 | current.append(')'); | 添加右括号 |
203+
| 22 | backtrack(result, current, open, close + 1, max); | 递归调用 |
204+
| 23 | current.deleteCharAt(current.length() - 1); | 回溯删除 |
205+
139206
#### 7. ResultsPanel Component
140207
结果列表展示面板。
141208

@@ -166,6 +233,15 @@ interface GenerationStep {
166233
isValid: boolean;
167234
codeLine: number;
168235
callStackDepth: number;
236+
// 增强的变量状态用于调试面板
237+
variables: {
238+
current: string; // StringBuilder 当前值
239+
open: number; // 已使用的左括号数
240+
close: number; // 已使用的右括号数
241+
max: number; // n 值
242+
resultSnapshot: string[]; // 当前结果列表快照
243+
};
244+
changedVariable: 'current' | 'open' | 'close' | 'result' | null; // 本步骤变化的变量
169245
}
170246
```
171247

@@ -191,6 +267,18 @@ interface TreeNode {
191267
status: 'pending' | 'exploring' | 'valid' | 'pruned' | 'complete';
192268
leftRemaining: number;
193269
rightRemaining: number;
270+
annotation?: string; // 节点上方的状态注释文字
271+
pruneReason?: string; // 剪枝原因说明（仅当 status 为 'pruned' 时）
272+
}
273+
```
274+
275+
### EdgeLabel
276+
277+
```typescript
278+
interface EdgeLabel {
279+
sourceId: string; // 父节点 ID
280+
targetId: string; // 子节点 ID
281+
label: string; // 边上的操作标签，如 "添加 (" 或 "添加 )"
194282
}
195283
```
196284

@@ -262,7 +350,35 @@ interface GenerationHistory {
262350

263351
### Property 10: Code Panel State Synchronization
264352
*For any* generation step, the highlighted code line and displayed call stack depth SHALL exactly match the step's codeLine and callStackDepth values.
265-
**Validates: Requirements 6.2, 6.3**
353+
**Validates: Requirements 6.3, 6.6**
354+
355+
### Property 14: Variables Panel State Accuracy
356+
*For any* generation step, the variables panel SHALL display values that exactly match the step's variables object (current string, open count, close count, result list).
357+
**Validates: Requirements 6.4, 6.5, 8.2, 8.3, 8.4, 8.5**
358+
359+
### Property 15: Code-Tree Synchronization
360+
*For any* generation step, the highlighted code line SHALL correspond to the action being performed on the currently highlighted tree node.
361+
**Validates: Requirements 6.7**
362+
363+
### Property 16: Variable Change Highlighting
364+
*For any* generation step where changedVariable is not null, the corresponding variable in the variables panel SHALL have highlight styling applied.
365+
**Validates: Requirements 8.6**
366+
367+
### Property 17: Call Stack Depth Display
368+
*For any* generation step, the displayed call stack depth indicator SHALL equal the step's callStackDepth value.
369+
**Validates: Requirements 8.7**
370+
371+
### Property 11: Node Annotation Content Correctness
372+
*For any* tree node, the annotation SHALL correctly reflect the node's state: showing remaining bracket counts for normal nodes, pruning reason for pruned nodes, and success indicator for valid complete nodes.
373+
**Validates: Requirements 7.1, 7.4, 7.5**
374+
375+
### Property 12: Edge Label Correctness
376+
*For any* edge connecting a parent node to a child node, the edge label SHALL correctly indicate the bracket type added (left or right) matching the child node's value.
377+
**Validates: Requirements 7.2**
378+
379+
### Property 13: Current Node Annotation Highlighting
380+
*For any* node that is currently being explored (currentNodeId matches node.id), the annotation text SHALL have highlighted styling applied to draw user attention.
381+
**Validates: Requirements 7.3**
266382

267383
## Error Handling
268384

@@ -313,6 +429,17 @@ interface GenerationHistory {
313429
4. **Synchronization Property Tests**
314430
- Property 8: For any step, verify display values match step data
315431
- Property 10: For any step, verify code panel state matches step data
432+
- Property 15: For any step, verify code line corresponds to tree node action
433+
434+
5. **Annotation Property Tests**
435+
- Property 11: For any node, verify annotation content matches node state
436+
- Property 12: For any edge, verify label matches child node's bracket value
437+
- Property 13: For current node, verify annotation has highlighted styling
438+
439+
6. **Variables Panel Property Tests**
440+
- Property 14: For any step, verify variables panel displays exact step variable values
441+
- Property 16: For any step with changed variable, verify highlight styling applied
442+
- Property 17: For any step, verify call stack depth indicator matches step data
316443

317444
### Test Configuration
318445
- Property tests: minimum 100 iterations per property

‎.kiro/specs/parentheses-generator-visualization/requirements.md‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@
3737
4. WHEN a path leads to a valid complete combination THEN the Parentheses_Generator SHALL highlight that leaf node with a distinct success color
3838
5. WHEN a path is pruned (invalid) THEN the Parentheses_Generator SHALL indicate the pruned state with a distinct visual style
3939

40+
### Requirement 7
41+
42+
**User Story:** As a user, I want to see explanatory text labels on nodes and edges, so that I can better understand the algorithm decision process at each step.
43+
44+
#### Acceptance Criteria
45+
46+
1. WHEN a node is displayed THEN the Parentheses_Generator SHALL show a brief annotation above the node indicating the current state (remaining left/right bracket counts)
47+
2. WHEN an edge connects two nodes THEN the Parentheses_Generator SHALL display a label on the edge indicating the action taken (add left bracket or add right bracket)
48+
3. WHEN the current node is being explored THEN the Parentheses_Generator SHALL highlight the annotation text to draw user attention
49+
4. WHEN a node represents a pruned path THEN the Parentheses_Generator SHALL display a brief explanation of why the path was pruned
50+
5. WHEN a node represents a valid complete combination THEN the Parentheses_Generator SHALL display a success indicator annotation
51+
4052
### Requirement 3
4153

4254
**User Story:** As a user, I want to control the animation playback, so that I can learn at my own pace.
@@ -72,11 +84,30 @@
7284

7385
### Requirement 6
7486

75-
**User Story:** As a user, I want to see the algorithm code alongside the visualization, so that I can correlate the animation with the actual implementation.
87+
**User Story:** As a user, I want to see the Java algorithm code in a large right-side panel with debugging effects, so that I can understand the code execution like using a real debugger.
7688

7789
#### Acceptance Criteria
7890

79-
1. WHEN the visualization is displayed THEN the Parentheses_Generator SHALL show the backtracking algorithm pseudocode in a code panel
80-
2. WHEN a Generation_Step executes THEN the Parentheses_Generator SHALL highlight the corresponding line in the code panel
81-
3. WHEN the algorithm makes a recursive call THEN the Parentheses_Generator SHALL visually indicate the call stack depth
91+
1. WHEN the visualization is displayed THEN the Parentheses_Generator SHALL show a prominently sized code panel on the right side occupying at least 30% of the screen width
92+
2. WHEN the visualization is displayed THEN the Parentheses_Generator SHALL display the complete Java solution code for the parentheses generation problem with syntax highlighting
93+
3. WHEN a Generation_Step executes THEN the Parentheses_Generator SHALL highlight the currently executing line with a distinct background color simulating debugger breakpoint style
94+
4. WHEN the algorithm state changes THEN the Parentheses_Generator SHALL display a variables panel showing current memory values including the current string, left count, right count, and result list
95+
5. WHEN the highlighted line changes THEN the Parentheses_Generator SHALL update the variables panel to reflect the exact state at that execution point
96+
6. WHEN the algorithm makes a recursive call THEN the Parentheses_Generator SHALL visually indicate the call stack depth in the variables panel
97+
7. WHEN the user steps through the algorithm THEN the Parentheses_Generator SHALL synchronize the code line highlight with the corresponding tree node highlight
98+
99+
100+
101+
### Requirement 8
102+
103+
**User Story:** As a user, I want to see a dedicated variables watch panel that displays memory values in real-time, so that I can understand how data changes during algorithm execution.
104+
105+
#### Acceptance Criteria
82106

107+
1. WHEN the code panel is displayed THEN the Parentheses_Generator SHALL include a variables watch section below or beside the code
108+
2. WHEN displaying variables THEN the Parentheses_Generator SHALL show the current StringBuilder or String value being constructed
109+
3. WHEN displaying variables THEN the Parentheses_Generator SHALL show the remaining left bracket count (open) as a numeric value
110+
4. WHEN displaying variables THEN the Parentheses_Generator SHALL show the remaining right bracket count (close) as a numeric value
111+
5. WHEN displaying variables THEN the Parentheses_Generator SHALL show the result ArrayList with all completed valid combinations found so far
112+
6. WHEN a variable value changes THEN the Parentheses_Generator SHALL briefly highlight the changed variable to draw user attention
113+
7. WHEN the recursion depth changes THEN the Parentheses_Generator SHALL display the current call stack depth as a visual indicator

‎.kiro/specs/parentheses-generator-visualization/tasks.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,77 @@
136136

137137
- [x] 9. Final Checkpoint - Ensure all tests pass
138138
- Ensure all tests pass, ask the user if questions arise.
139+
140+
- [x] 10. Enhance CodePanel with Java code and debugger-style features
141+
- [x] 10.1 Update GenerationStep type with enhanced variables
142+
- Add `variables` object with current, open, close, max, resultSnapshot fields
143+
- Add `changedVariable` field to track which variable changed
144+
- Update algorithm.ts to populate these fields during step generation
145+
- _Requirements: 6.4, 6.5, 8.2, 8.3, 8.4, 8.5_
146+
- [x] 10.2 Create VariablesState interface and update CodePanel props
147+
- Define VariablesState interface in types/index.ts
148+
- Update CodePanelProps to include variables and showVariablesPanel
149+
- _Requirements: 6.4, 8.1_
150+
- [x] 10.3 Implement Java code display with syntax highlighting
151+
- Replace pseudocode with complete Java Solution class code
152+
- Add syntax highlighting styles for Java keywords, strings, comments
153+
- Ensure code panel occupies at least 30% of screen width
154+
- _Requirements: 6.1, 6.2_
155+
- [x] 10.4 Implement line-by-line highlighting with debugger style
156+
- Add distinct background color for currently executing line
157+
- Update code line mapping to match Java code structure
158+
- Synchronize highlighted line with current generation step
159+
- _Requirements: 6.3, 6.7_
160+
- [x] 10.5 Write property test for code-tree synchronization
161+
- **Property 15: Code-Tree Synchronization**
162+
- **Validates: Requirements 6.7**
163+
- [x] 10.6 Implement variables watch panel
164+
- Create variables section below or beside code
165+
- Display current StringBuilder value, open count, close count
166+
- Display result ArrayList with current valid combinations
167+
- Show call stack depth indicator
168+
- _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.7_
169+
- [x] 10.7 Write property test for variables panel state accuracy
170+
- **Property 14: Variables Panel State Accuracy**
171+
- **Validates: Requirements 6.4, 6.5, 8.2, 8.3, 8.4, 8.5**
172+
- [x] 10.8 Implement variable change highlighting
173+
- Briefly highlight changed variable when value updates
174+
- Use changedVariable field to determine which variable to highlight
175+
- _Requirements: 8.6_
176+
- [x] 10.9 Write property test for variable change highlighting
177+
- **Property 16: Variable Change Highlighting**
178+
- **Validates: Requirements 8.6**
179+
- [x] 10.10 Write property test for call stack depth display
180+
- **Property 17: Call Stack Depth Display**
181+
- **Validates: Requirements 8.7**
182+
183+
- [x] 11. Checkpoint - Ensure CodePanel enhancement tests pass
184+
- Ensure all tests pass, ask the user if questions arise.
185+
186+
- [x] 12. Implement node and edge annotation labels
187+
- [x] 12.1 Update TreeNode type with annotation fields
188+
- Add `annotation` and `pruneReason` fields to TreeNode interface
189+
- Update tree builder to generate annotation text based on node state
190+
- _Requirements: 7.1, 7.4, 7.5_
191+
- [x] 12.2 Implement node annotation rendering
192+
- Display remaining bracket counts above normal nodes (如: "L:2 R:3")
193+
- Show pruning reason for pruned nodes (如: "右括号过多")
194+
- Display success indicator for valid complete nodes (如: "✓ 有效")
195+
- Highlight annotation text for current exploring node
196+
- _Requirements: 7.1, 7.3, 7.4, 7.5_
197+
- [x] 12.3 Write property test for node annotation correctness
198+
- **Property 11: Node Annotation Content Correctness**
199+
- **Validates: Requirements 7.1, 7.4, 7.5**
200+
- [x] 12.4 Implement edge label rendering
201+
- Display action label on edges (如: "添加 (" 或 "添加 )")
202+
- Position labels at the midpoint of edges
203+
- _Requirements: 7.2_
204+
- [x] 12.5 Write property test for edge label correctness
205+
- **Property 12: Edge Label Correctness**
206+
- **Validates: Requirements 7.2**
207+
- [x] 12.6 Write property test for current node annotation highlighting
208+
- **Property 13: Current Node Annotation Highlighting**
209+
- **Validates: Requirements 7.3**
210+
211+
- [x] 13. Final Checkpoint - Ensure all annotation tests pass
212+
- Ensure all tests pass, ask the user if questions arise.

0 commit comments

Comments
 (0)