Skip to content

Commit 99a47f8

Browse files
danielvikidanielviki
committed
minor update
1 parent d2b056a commit 99a47f8

File tree

2 files changed

+159
-44
lines changed

2 files changed

+159
-44
lines changed

‎frontend/src/App.vue

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,71 @@
11
<template>
2-
<div class="container">
3-
<h1>Sorting Visualizer</h1>
4-
5-
<div class="input-section">
6-
<div class="method-selector">
7-
<label for="sortMethod">Select Sorting Method:</label>
8-
<select v-model="sortMethod">
9-
<option value="bubble">Bubble Sort</option>
10-
<option value="insertion">Insertion Sort</option>
11-
<option value="selection">Selection Sort</option>
12-
<option value="merge">Merge Sort</option>
13-
<option value="quick">Quick Sort</option>
14-
<option value="shell">Shell Sort</option>
15-
<option value="heap">Heap Sort</option>
16-
</select>
17-
</div>
2+
<div class="app-wrapper">
3+
<div class="container">
4+
<h1>Sorting Visualizer</h1>
5+
6+
<div class="input-section">
7+
<div class="method-selector">
8+
<label for="sortMethod">Select Sorting Method:</label>
9+
<select v-model="sortMethod">
10+
<option value="bubble">Bubble Sort</option>
11+
<option value="insertion">Insertion Sort</option>
12+
<option value="selection">Selection Sort</option>
13+
<option value="merge">Merge Sort</option>
14+
<option value="quick">Quick Sort</option>
15+
<option value="shell">Shell Sort</option>
16+
<option value="heap">Heap Sort</option>
17+
</select>
18+
</div>
1819

19-
<div class="numbers-input">
20-
<label>Enter 5 Numbers:</label>
21-
<div class="input-group">
22-
<input
23-
v-for="(num, index) in numbers"
24-
:key="index"
25-
type="number"
26-
v-model="numbers[index]"
27-
:placeholder="`Number ${index + 1}`"
28-
class="number-input"
29-
>
20+
<div class="numbers-input">
21+
<label>Enter 5 Numbers:</label>
22+
<div class="input-group">
23+
<input
24+
v-for="(num, index) in numbers"
25+
:key="index"
26+
type="number"
27+
v-model="numbers[index]"
28+
:placeholder="`Number ${index + 1}`"
29+
class="number-input"
30+
>
31+
</div>
3032
</div>
31-
</div>
3233

33-
<button @click="sortNumbers" :disabled="isLoading">
34-
{{ isLoading ? 'Sorting...' : 'Sort Numbers' }}
35-
</button>
36-
</div>
34+
<button @click="sortNumbers" :disabled="isLoading">
35+
{{ isLoading ? 'Sorting...' : 'Sort Numbers' }}
36+
</button>
37+
</div>
3738

38-
<div class="output-section">
39-
<div class="steps-container">
40-
<h2>Sorting Steps:</h2>
41-
<div id="sortingSteps" class="steps-list">
42-
<div v-for="(step, index) in sortingSteps"
43-
:key="index"
44-
class="step-item">
45-
{{ step }}
39+
<div class="output-section">
40+
<div class="steps-container">
41+
<h2>Sorting Steps:</h2>
42+
<div id="sortingSteps" class="steps-list">
43+
<div v-for="(step, index) in sortingSteps"
44+
:key="index"
45+
class="step-item">
46+
{{ step }}
47+
</div>
4648
</div>
4749
</div>
48-
</div>
49-
<div class="result-container">
50-
<h2>Final Result:</h2>
51-
<div id="sortingResult" class="result">{{ result }}</div>
50+
<div class="result-container">
51+
<h2>Final Result:</h2>
52+
<div id="sortingResult" class="result">{{ result }}</div>
53+
</div>
5254
</div>
5355
</div>
56+
<Footer />
5457
</div>
5558
</template>
5659

5760
<script>
5861
import { ref } from 'vue'
62+
import Footer from './components/Footer.vue'
5963
6064
export default {
6165
name: 'App',
66+
components: {
67+
Footer
68+
},
6269
setup() {
6370
const sortMethod = ref('bubble')
6471
const numbers = ref(Array(5).fill(''))
@@ -119,7 +126,14 @@ export default {
119126
</script>
120127

121128
<style scoped>
129+
.app-wrapper {
130+
min-height: 100vh;
131+
display: flex;
132+
flex-direction: column;
133+
}
134+
122135
.container {
136+
flex: 1;
123137
max-width: 800px;
124138
margin: 0 auto;
125139
padding: 20px;

‎frontend/src/components/Footer.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<footer class="footer">
3+
<div class="footer-content">
4+
<div class="footer-section">
5+
<h3>关于本项目</h3>
6+
<p>排序算法可视化工具，帮助理解各种排序算法的工作原理。</p>
7+
</div>
8+
<div class="footer-section">
9+
<h3>支持的算法</h3>
10+
<ul>
11+
<li>冒泡排序</li>
12+
<li>插入排序</li>
13+
<li>选择排序</li>
14+
<li>归并排序</li>
15+
<li>快速排序</li>
16+
<li>希尔排序</li>
17+
<li>堆排序</li>
18+
</ul>
19+
</div>
20+
<div class="footer-section">
21+
<h3>技术栈</h3>
22+
<ul>
23+
<li>Vue.js 3</li>
24+
<li>Flask</li>
25+
<li>Python</li>
26+
</ul>
27+
</div>
28+
</div>
29+
<div class="footer-bottom">
30+
<p>&copy; 2025 Algorithm Sorting Visualizer. All rights reserved.</p>
31+
</div>
32+
</footer>
33+
</template>
34+
35+
<style scoped>
36+
.footer {
37+
background: white;
38+
margin-top: 2rem;
39+
padding: 2rem 0;
40+
box-shadow: var(--shadow);
41+
}
42+
43+
.footer-content {
44+
max-width: 1000px;
45+
margin: 0 auto;
46+
padding: 0 20px;
47+
display: grid;
48+
grid-template-columns: repeat(3, 1fr);
49+
gap: 2rem;
50+
}
51+
52+
.footer-section h3 {
53+
color: var(--text-color);
54+
font-size: 1.2rem;
55+
margin-bottom: 1rem;
56+
font-weight: 500;
57+
}
58+
59+
.footer-section ul {
60+
list-style: none;
61+
padding: 0;
62+
margin: 0;
63+
}
64+
65+
.footer-section li {
66+
margin-bottom: 0.5rem;
67+
color: var(--text-color);
68+
opacity: 0.8;
69+
}
70+
71+
.footer-section p {
72+
color: var(--text-color);
73+
opacity: 0.8;
74+
line-height: 1.5;
75+
}
76+
77+
.footer-bottom {
78+
max-width: 1000px;
79+
margin: 2rem auto 0;
80+
padding: 1.5rem 20px 0;
81+
border-top: 1px solid var(--border-color);
82+
text-align: center;
83+
}
84+
85+
.footer-bottom p {
86+
color: var(--text-color);
87+
opacity: 0.6;
88+
font-size: 0.9rem;
89+
}
90+
91+
@media (max-width: 768px) {
92+
.footer-content {
93+
grid-template-columns: 1fr;
94+
gap: 1.5rem;
95+
}
96+
97+
.footer-section {
98+
text-align: center;
99+
}
100+
}
101+
</style>

0 commit comments

Comments
 (0)