Skip to content

Commit 2221438

Browse files
Aditya-132Aditya-132
authored
improving UI of welcome page (#708)
1 parent 5fadf66 commit 2221438

File tree

1 file changed

+222
-32
lines changed

1 file changed

+222
-32
lines changed

‎console/atest-ui/src/views/WelcomePage.vue‎

Lines changed: 222 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
33
import { API } from '../views/net'
4+
import { Document } from '@element-plus/icons-vue'
45
56
interface SBOM {
67
go: {}
@@ -16,40 +17,229 @@ API.SBOM((d) => {
1617
</script>
1718

1819
<template>
19-
<div>Welcome to use atest to improve your code quality!</div>
20-
<div>Please read the following guide if this is your first time to use atest.</div>
21-
<li>Create a store for saving the data</li>
22-
<li>Create a test suite on the left panel</li>
23-
<li>Select a suite, then create the test case</li>
24-
25-
<div>
26-
Please get more details from the <a href="https://linuxsuren.github.io/api-testing/" target="_blank" rel="noopener">official document</a>.
27-
</div>
28-
29-
<el-divider/>
20+
<div class="container">
21+
<el-card class="welcome-card">
22+
<template #header>
23+
<div class="card-header">
24+
<span>Welcome to atest</span>
25+
</div>
26+
</template>
27+
28+
<div class="welcome-content">
29+
<p>Use atest to improve your code quality!</p>
30+
<p class="guide-text">Please read the following guide if this is your first time using atest:</p>
31+
32+
<el-steps direction="vertical" :active="3" class="guide-steps">
33+
<el-step title="Create a store" description="Create a store for saving the data" />
34+
<el-step title="Create test suite" description="Create a test suite on the left panel" />
35+
<el-step title="Create test case" description="Select a suite, then create the test case" />
36+
</el-steps>
37+
38+
<div class="document-link">
39+
<el-link type="primary" href="https://linuxsuren.github.io/api-testing/" target="_blank" :icon="Document" class="doc-link">
40+
View official documentation
41+
</el-link>
42+
</div>
43+
</div>
44+
</el-card>
3045

31-
<div>
32-
Golang dependencies:
33-
<div>
34-
<el-scrollbar height="200px" always>
35-
<li v-for="k, v in sbomItems.go">
36-
{{ v }}@{{ k }}
37-
</li>
38-
</el-scrollbar>
39-
</div>
40-
</div>
46+
<el-divider border-style="dashed" />
4147

42-
<div>
43-
JavaScript dependencies:
44-
<div>
45-
<el-scrollbar height="200px" always>
46-
<li v-for="k, v in sbomItems.js.dependencies">
47-
{{ v }}@{{ k }}
48-
</li>
49-
<li v-for="k, v in sbomItems.js.devDependencies">
50-
{{ v }}@{{ k }}
51-
</li>
52-
</el-scrollbar>
48+
<div class="dependency-section">
49+
<el-row :gutter="20">
50+
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
51+
<el-card class="dependency-card">
52+
<template #header>
53+
<div class="card-header">
54+
<span>Golang Dependencies</span>
55+
<el-tag type="info" size="small">{{ Object.keys(sbomItems.go || {}).length }} packages</el-tag>
56+
</div>
57+
</template>
58+
<el-scrollbar :height="scrollbarHeight" always>
59+
<ul class="dependency-list">
60+
<li v-for="(k, v) in sbomItems.go" :key="v" class="dependency-item">
61+
<span class="package-name">{{ v }}</span>
62+
<el-tag size="small" class="version-tag">{{ k }}</el-tag>
63+
</li>
64+
</ul>
65+
</el-scrollbar>
66+
</el-card>
67+
</el-col>
68+
69+
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
70+
<el-card class="dependency-card">
71+
<template #header>
72+
<div class="card-header">
73+
<span>JavaScript Dependencies</span>
74+
<el-tag type="info" size="small">
75+
{{ Object.keys(sbomItems.js?.dependencies || {}).length + Object.keys(sbomItems.js?.devDependencies || {}).length }} packages
76+
</el-tag>
77+
</div>
78+
</template>
79+
<el-tabs type="border-card">
80+
<el-tab-pane label="Dependencies">
81+
<el-scrollbar :height="scrollbarHeight - 50" always>
82+
<ul class="dependency-list">
83+
<li v-for="(k, v) in sbomItems.js?.dependencies" :key="v" class="dependency-item">
84+
<span class="package-name">{{ v }}</span>
85+
<el-tag size="small" class="version-tag">{{ k }}</el-tag>
86+
</li>
87+
</ul>
88+
</el-scrollbar>
89+
</el-tab-pane>
90+
<el-tab-pane label="Dev Dependencies">
91+
<el-scrollbar :height="scrollbarHeight - 50" always>
92+
<ul class="dependency-list">
93+
<li v-for="(k, v) in sbomItems.js?.devDependencies" :key="v" class="dependency-item">
94+
<span class="package-name">{{ v }}</span>
95+
<el-tag size="small" class="version-tag">{{ k }}</el-tag>
96+
</li>
97+
</ul>
98+
</el-scrollbar>
99+
</el-tab-pane>
100+
</el-tabs>
101+
</el-card>
102+
</el-col>
103+
</el-row>
53104
</div>
54105
</div>
55106
</template>
107+
108+
<style scoped>
109+
.container {
110+
width: 100%;
111+
max-width: 1200px;
112+
margin: 0 auto;
113+
padding: 20px;
114+
box-sizing: border-box;
115+
}
116+
117+
.welcome-card {
118+
margin-bottom: 20px;
119+
}
120+
121+
.card-header {
122+
display: flex;
123+
justify-content: space-between;
124+
align-items: center;
125+
flex-wrap: wrap;
126+
gap: 10px;
127+
}
128+
129+
.welcome-content {
130+
padding: 10px;
131+
}
132+
133+
.guide-text {
134+
margin: 15px 0;
135+
color: #606266;
136+
}
137+
138+
.guide-steps {
139+
margin: 20px 0;
140+
}
141+
142+
.document-link {
143+
margin-top: 20px;
144+
text-align: center;
145+
}
146+
147+
.doc-link {
148+
font-size: 16px;
149+
}
150+
151+
.dependency-section {
152+
margin-top: 30px;
153+
}
154+
155+
.dependency-card {
156+
height: 100%;
157+
margin-bottom: 20px;
158+
}
159+
160+
.dependency-list {
161+
list-style: none;
162+
padding: 0;
163+
margin: 0;
164+
}
165+
166+
.dependency-item {
167+
padding: 8px 12px;
168+
border-bottom: 1px solid #ebeef5;
169+
display: flex;
170+
justify-content: space-between;
171+
align-items: center;
172+
flex-wrap: wrap;
173+
gap: 5px;
174+
}
175+
176+
.dependency-item:last-child {
177+
border-bottom: none;
178+
}
179+
180+
.package-name {
181+
font-family: monospace;
182+
color: #409eff;
183+
word-break: break-word;
184+
}
185+
186+
.version-tag {
187+
margin-left: 10px;
188+
font-family: monospace;
189+
}
190+
191+
/* Responsive adjustments */
192+
@media (max-width: 768px) {
193+
.container {
194+
padding: 15px;
195+
}
196+
197+
.card-header {
198+
flex-direction: column;
199+
align-items: flex-start;
200+
}
201+
202+
.guide-steps {
203+
margin: 15px 0;
204+
}
205+
206+
.dependency-item {
207+
flex-direction: column;
208+
align-items: flex-start;
209+
padding: 10px 0;
210+
}
211+
212+
.version-tag {
213+
margin-left: 0;
214+
margin-top: 5px;
215+
}
216+
}
217+
218+
@media (max-width: 480px) {
219+
.container {
220+
padding: 10px;
221+
}
222+
223+
.welcome-content {
224+
padding: 5px;
225+
}
226+
227+
.dependency-card {
228+
margin-bottom: 15px;
229+
}
230+
}
231+
</style>
232+
233+
<script lang="ts">
234+
export default {
235+
computed: {
236+
scrollbarHeight() {
237+
// Adjust scrollbar height based on screen size
238+
if (window.innerWidth < 768) {
239+
return 200;
240+
}
241+
return 300;
242+
}
243+
}
244+
}
245+
</script>

0 commit comments

Comments
 (0)