Skip to content

Commit cfb6b03

Browse files
danielvikidanielviki
committed
baseline version
1 parent 97139dd commit cfb6b03

File tree

4 files changed

+200
-89
lines changed

4 files changed

+200
-89
lines changed

‎backend/services/playground.py

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ def insertion_sort(a):
1010
for i in range(1,len(a)):
1111
while i>0 and a[i]<a[i-1]:
1212
a[i], a[i-1] = a[i-1], a[i]
13-
print(f"插入移动 {a[i]}→位置{i}，当前序列：{a}")
13+
print(f"插入移动 {a[i]}→位置{i+1}，当前序列：{a}")
1414
i -= 1
1515
return a
1616

@@ -20,8 +20,9 @@ def selection_sort(a):
2020
for j in range(i+1, len(a)):
2121
if a[j] < a[min_idx]:
2222
min_idx = j
23-
a[i], a[min_idx] = a[min_idx], a[i]
24-
print(f"选择交换 {a[i]}↔{a[min_idx]}，当前序列：{a}")
23+
if min_idx != i: # Only swap and print if a new minimum was found
24+
a[i], a[min_idx] = a[min_idx], a[i]
25+
print(f"选择交换 {a[i]}↔{a[min_idx]}，当前序列：{a}")
2526
return a
2627

2728
def quick_sort(a, start=None, end=None):
@@ -84,15 +85,19 @@ def shell_sort(a):
8485
while gap > 0:
8586
print(f"希尔排序当前间隔：{gap}")
8687
for i in range(gap, n):
87-
temp = a[i]
88+
temp = a[i] # Store the current element
8889
j = i
90+
91+
# Shift elements that are greater than temp
8992
while j >= gap and a[j - gap] > temp:
9093
a[j] = a[j - gap]
91-
print(f"希尔排序移动 {a[j]}→位置{j}，当前序列：{a}")
94+
print(f"希尔排序移动 {a[j]}→位置{j+1}，当前序列：{a}")
9295
j -= gap
93-
a[j] = temp
94-
if j != i:
95-
print(f"希尔排序插入 {temp}到位置{j}，当前序列：{a}")
96+
97+
# Place temp in its correct position
98+
if j != i: # Only update and print if position changed
99+
a[j] = temp
100+
print(f"希尔排序插入 {temp}到位置{j+1}，当前序列：{a}")
96101
gap //= 2
97102
return a
98103

‎frontend/index.html

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,65 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Sorting Visualizer</title>
7-
<!-- Update CSS path if using Vue CLI/Vite structure -->
6+
<title>Algorithm Sorting Visualizer</title>
87
<link rel="stylesheet" href="src/assets/main.css">
9-
<!-- Use specific Vue.js version -->
108
<script src="https://unpkg.com/vue@3.3.4"></script>
119
</head>
1210
<body>
1311
<div id="app" class="container">
14-
<h1>Sorting Visualizer</h1>
12+
<h1>Algorithm Sorting Visualizer</h1>
1513

1614
<div class="input-section">
1715
<div class="method-selector">
18-
<label for="sortMethod">Select Sorting Method:</label>
19-
<!-- Add id attribute to match label -->
16+
<label for="sortMethod">选择排序算法：</label>
2017
<select v-model="sortMethod" id="sortMethod">
21-
<option value="bubble">Bubble Sort</option>
22-
<option value="insertion">Insertion Sort</option>
23-
<option value="selection">Selection Sort</option>
24-
<option value="merge">Merge Sort</option>
25-
<option value="quick">Quick Sort</option>
26-
<option value="shell">Shell Sort</option>
27-
<option value="heap">Heap Sort</option>
18+
<option value="bubble">冒泡排序 (Bubble Sort)</option>
19+
<option value="insertion">插入排序 (Insertion Sort)</option>
20+
<option value="selection">选择排序 (Selection Sort)</option>
21+
<option value="merge">归并排序 (Merge Sort)</option>
22+
<option value="quick">快速排序 (Quick Sort)</option>
23+
<option value="shell">希尔排序 (Shell Sort)</option>
24+
<option value="heap">堆排序 (Heap Sort)</option>
2825
</select>
2926
</div>
3027

28+
<div class="algorithm-description">
29+
<p>{{ currentDescription }}</p>
30+
</div>
31+
3132
<div class="numbers-input">
32-
<label>Enter 5 Numbers:</label>
33+
<label>请输入5个数字：</label>
3334
<div class="input-group">
34-
<input type="number" v-model="numbers[0]" placeholder="Number 1" class="number-input">
35-
<input type="number" v-model="numbers[1]" placeholder="Number 2" class="number-input">
36-
<input type="number" v-model="numbers[2]" placeholder="Number 3" class="number-input">
37-
<input type="number" v-model="numbers[3]" placeholder="Number 4" class="number-input">
38-
<input type="number" v-model="numbers[4]" placeholder="Number 5" class="number-input">
35+
<input type="number" v-model="numbers[0]" placeholder="第1个数字" class="number-input">
36+
<input type="number" v-model="numbers[1]" placeholder="第2个数字" class="number-input">
37+
<input type="number" v-model="numbers[2]" placeholder="第3个数字" class="number-input">
38+
<input type="number" v-model="numbers[3]" placeholder="第4个数字" class="number-input">
39+
<input type="number" v-model="numbers[4]" placeholder="第5个数字" class="number-input">
3940
</div>
4041
</div>
4142

4243
<button @click="sortNumbers" :disabled="isLoading">
43-
{{ isLoading ? 'Sorting...' : 'Sort Numbers' }}
44+
{{ isLoading ? '排序中...' : '开始排序' }}
4445
</button>
4546
</div>
4647

4748
<div class="output-section">
4849
<div class="steps-container">
49-
<h2>Sorting Steps:</h2>
50+
<h2>排序步骤：</h2>
5051
<div class="steps-list">
5152
<div v-for="(step, index) in sortingSteps"
5253
:key="index"
5354
class="step-item">
54-
Step {{ index + 1 }}: {{ step }}
55+
第 {{ index + 1 }} 步：{{ step }}
5556
</div>
5657
</div>
5758
</div>
5859
<div class="result-container">
59-
<h2>Final Result:</h2>
60+
<h2>最终结果：</h2>
6061
<div class="result">{{ sortingResult }}</div>
6162
</div>
6263
</div>
6364
</div>
64-
<!-- Update script path if using Vue CLI/Vite structure -->
6565
<script src="src/main.js"></script>
6666
</body>
6767
</html>

‎frontend/src/assets/main.css

Lines changed: 148 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,189 @@
11
:root {
2-
font-family: Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
2+
--primary-color: #3498db;
3+
--secondary-color: #2ecc71;
4+
--background-color: #f5f7fa;
5+
--border-color: #e1e8ed;
6+
--text-color: #2c3e50;
7+
--shadow: 0 2px 4px rgba(0,0,0,0.1);
58
}
69

710
body {
8-
margin: 0;
9-
min-height: 100vh;
11+
margin: 0;
12+
min-height: 100vh;
13+
background-color: var(--background-color);
14+
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
15+
color: var(--text-color);
1016
}
1117

1218
.container {
13-
max-width: 800px;
14-
margin: 0 auto;
15-
padding: 20px;
19+
max-width: 1000px;
20+
margin: 2rem auto;
21+
padding: 0 20px;
22+
}
23+
24+
h1 {
25+
text-align: center;
26+
color: var(--text-color);
27+
font-size: 2.5rem;
28+
margin-bottom: 2rem;
29+
font-weight: 600;
1630
}
1731

1832
.input-section {
19-
background-color: #f5f5f5;
20-
padding: 20px;
21-
border-radius: 8px;
22-
margin: 20px 0;
33+
background: white;
34+
padding: 2rem;
35+
border-radius: 12px;
36+
box-shadow: var(--shadow);
37+
margin-bottom: 2rem;
38+
}
39+
40+
.method-selector {
41+
margin-bottom: 1.5rem;
42+
}
43+
44+
.method-selector label {
45+
display: block;
46+
margin-bottom: 0.5rem;
47+
font-weight: 500;
48+
}
49+
50+
select {
51+
width: 100%;
52+
padding: 0.75rem;
53+
border: 2px solid var(--border-color);
54+
border-radius: 8px;
55+
font-size: 1rem;
56+
transition: border-color 0.3s;
57+
appearance: none;
58+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%232c3e50' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") no-repeat right 0.75rem center/16px 16px;
59+
}
60+
61+
select:focus {
62+
border-color: var(--primary-color);
63+
outline: none;
64+
}
65+
66+
.algorithm-description {
67+
background: #f8f9fa;
68+
padding: 1rem;
69+
border-radius: 8px;
70+
margin: 1.5rem 0;
71+
border-left: 4px solid var(--primary-color);
2372
}
2473

25-
.method-selector, .numbers-input {
26-
margin-bottom: 20px;
74+
.numbers-input {
75+
margin: 1.5rem 0;
2776
}
2877

2978
.input-group {
30-
display: flex;
31-
gap: 10px;
32-
flex-wrap: wrap;
79+
display: grid;
80+
grid-template-columns: repeat(5, 1fr);
81+
gap: 1rem;
82+
margin-top: 0.5rem;
3383
}
3484

3585
.number-input {
36-
width: 80px;
37-
padding: 8px;
38-
border: 1px solid #ddd;
39-
border-radius: 4px;
86+
width: 100%;
87+
padding: 0.75rem;
88+
border: 2px solid var(--border-color);
89+
border-radius: 8px;
90+
font-size: 1rem;
91+
transition: border-color 0.3s;
92+
}
93+
94+
.number-input:focus {
95+
border-color: var(--primary-color);
96+
outline: none;
4097
}
4198

4299
button {
43-
background-color: #4CAF50;
44-
color: white;
45-
padding: 10px 20px;
46-
border: none;
47-
border-radius: 4px;
48-
cursor: pointer;
100+
width: 100%;
101+
padding: 1rem;
102+
background: var(--primary-color);
103+
color: white;
104+
border: none;
105+
border-radius: 8px;
106+
font-size: 1rem;
107+
font-weight: 500;
108+
cursor: pointer;
109+
transition: background-color 0.3s, transform 0.1s;
49110
}
50111

51-
button:disabled {
52-
background-color: #cccccc;
53-
cursor: not-allowed;
112+
button:hover {
113+
background: #2980b9;
114+
transform: translateY(-1px);
54115
}
55116

56-
select {
57-
padding: 8px;
58-
margin: 5px 0;
59-
width: 200px;
60-
border-radius: 4px;
61-
border: 1px solid #ddd;
117+
button:disabled {
118+
background: #bdc3c7;
119+
cursor: not-allowed;
120+
transform: none;
62121
}
63122

64123
.output-section {
65-
background-color: #fff;
66-
padding: 20px;
67-
border-radius: 8px;
68-
border: 1px solid #ddd;
69-
margin-top: 20px;
124+
background: white;
125+
padding: 2rem;
126+
border-radius: 12px;
127+
box-shadow: var(--shadow);
128+
}
129+
130+
.steps-container h2,
131+
.result-container h2 {
132+
color: var(--text-color);
133+
margin-top: 0;
134+
font-size: 1.5rem;
70135
}
71136

72137
.steps-list {
73-
max-height: 300px;
74-
overflow-y: auto;
75-
padding: 10px;
76-
background-color: #f9f9f9;
77-
border-radius: 4px;
78-
margin: 10px 0;
138+
max-height: 300px;
139+
overflow-y: auto;
140+
border: 1px solid var(--border-color);
141+
border-radius: 8px;
142+
padding: 1rem;
143+
margin: 1rem 0;
79144
}
80145

81146
.step-item {
82-
padding: 8px;
83-
border-bottom: 1px solid #eee;
84-
animation: fadeIn 0.5s ease-in-out;
147+
padding: 0.75rem;
148+
border-bottom: 1px solid var(--border-color);
149+
animation: fadeIn 0.3s ease-in-out;
150+
}
151+
152+
.step-item:last-child {
153+
border-bottom: none;
85154
}
86155

87156
.result {
88-
padding: 10px;
89-
background-color: #e8f5e9;
90-
border-radius: 4px;
91-
margin-top: 10px;
157+
background: #e8f6f3;
158+
padding: 1rem;
159+
border-radius: 8px;
160+
font-size: 1.1rem;
161+
font-weight: 500;
162+
text-align: center;
92163
}
93164

94165
@keyframes fadeIn {
95-
from { opacity: 0; transform: translateY(-10px); }
96-
to { opacity: 1; transform: translateY(0); }
166+
from {
167+
opacity: 0;
168+
transform: translateY(-10px);
169+
}
170+
to {
171+
opacity: 1;
172+
transform: translateY(0);
173+
}
174+
}
175+
176+
@media (max-width: 768px) {
177+
.input-group {
178+
grid-template-columns: repeat(2, 1fr);
179+
}
180+
181+
.container {
182+
margin: 1rem auto;
183+
}
184+
185+
.input-section,
186+
.output-section {
187+
padding: 1.5rem;
188+
}
97189
}

0 commit comments

Comments
 (0)