Skip to content

Commit e3202f9

Browse files
yuluo-yxyuluo-yx
committed
ui: optimize headercomponent style
Signed-off-by: yuluo-yx <[email protected]>
1 parent f3b3a52 commit e3202f9

File tree

9 files changed

+122
-109
lines changed

9 files changed

+122
-109
lines changed

‎console/atest-ui/src/api/store/store.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,3 @@ export const VerifyStore = (params: string) =>
4141
post('/api/server.Runner/VerifyStore', params, {
4242
'X-Auth': getToken()
4343
})
44-
45-
export const LoadStores = () =>
46-
post('/server.Runner/GetStores', params, {
47-
'X-Auth': getToken()
48-
})

‎console/atest-ui/src/assets/logo/logo.png‎

10.9 KB
Loading

‎console/atest-ui/src/assets/main.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
#app {
44
/* max-width: 1280px; */
55
margin: 0 auto;
6-
padding: ;
6+
padding: 0 auto;
77
height: 100vh;
8-
font-weight: normal;
8+
font-weight: normal;overflow: hidden;
99
}
1010

1111
a,

‎console/atest-ui/src/components/HeaderComponent.vue‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<template>
22
<div class="container">
3-
<div>
4-
<!-- todo: add logo -->
5-
<a href="#">API Testing</a>
6-
</div>
3+
<div class="logo_container">
4+
<a href="#">
5+
<img src="../assets/logo/logo.png" alt="logo">
6+
&nbsp;&nbsp;
7+
<p>API Testing</p>
8+
</a>
9+
</div>
710
<div>
811
<ui>
912
<li>
@@ -12,7 +15,7 @@
1215
</a>
1316
</li>
1417
<li>
15-
<a href="https://github.com/linuxsuren/api-testing.git" target="_blank"><img
18+
<a href="https://github.com/linuxsuren/api-testing.git" target="_blank"><img class="github"
1619
src="../assets/github/github-mark.png" alt="github" /></a>
1720
</li>
1821
<!-- todo：主题样式显示有误。 -->
@@ -49,18 +52,25 @@ const setTheme = () => {
4952
<style scoped>
5053
.container {
5154
display: flex;
52-
align-items: center;
5355
line-height: 40px;
54-
justify-content: space-around;
55-
}
56+
justify-content: space-between;
57+
flex-direction: row;
58+
align-items: center;
5659
57-
ui {
58-
display: flex;
59-
list-style: none;
60+
.logo_container {
61+
display: flex;
62+
align-items: center;
6063
61-
li {
62-
line-height: 50px;
63-
margin-left: 20%;
64+
p {
65+
display: inline-block;
66+
vertical-align: middle;
67+
}
68+
69+
img {
70+
width: 100px;
71+
height: 50px;
72+
vertical-align: middle;
73+
}
6474
}
6575
}
6676
@@ -70,12 +80,21 @@ a {
7080
color: black;
7181
}
7282
83+
ui {
84+
display: flex;
85+
list-style: none;
86+
87+
li {
88+
padding-right: 10%;
89+
}
90+
}
91+
7392
.el-switch {
7493
--el-switch-on-color: black;
7594
--el-switch-off-color: white;
7695
}
7796
78-
img {
97+
.github {
7998
vertical-align: middle;
8099
width: 30px;
81100
height: 30px;

‎console/atest-ui/src/components/other/TemplateFunctions.vue‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
1-
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
import type { Pair } from './types'
4-
import { useI18n } from 'vue-i18n'
5-
6-
const { t } = useI18n()
7-
8-
const dialogVisible = ref(false)
9-
const query = ref('')
10-
const funcs = ref([] as Pair[])
11-
12-
function queryFuncs() {
13-
API.FunctionsQuery(query.value, (d) => {
14-
funcs.value = d.data
15-
})
16-
}
17-
</script>
18-
191
<template>
20-
<el-affix position="bottom" :offset="20" style="position: absolute; bottom: 5px;" >
2+
<el-tooltip effect="dark" content="You can get some functions templates by click it." placement="top-start">
213
<el-button type="primary" @click="dialogVisible = !dialogVisible"
22-
data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}</el-button>
23-
</el-affix>
4+
data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}
5+
</el-button>
6+
</el-tooltip>
247

258
<el-dialog v-model="dialogVisible" :title="t('title.templateQuery')" width="40%" draggable destroy-on-close>
269
<template #footer>
@@ -44,4 +27,22 @@ function queryFuncs() {
4427
</template>
4528
</el-dialog>
4629
</template>
47-
../types/types
30+
31+
32+
<script setup lang="ts">
33+
import { ref } from 'vue'
34+
import type { Pair } from './types'
35+
import { useI18n } from 'vue-i18n'
36+
37+
const { t } = useI18n()
38+
39+
const dialogVisible = ref(false)
40+
const query = ref('')
41+
const funcs = ref([] as Pair[])
42+
43+
function queryFuncs() {
44+
API.FunctionsQuery(query.value, (d) => {
45+
funcs.value = d.data
46+
})
47+
}
48+
</script>

‎console/atest-ui/src/components/test/TestCase.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -805,10 +805,7 @@ const queryHeaderValues = (queryString: string, cb: (arg: any) => void) => {
805805
cb(results)
806806
}
807807
808-
onMounted(() => {
809-
810-
load()
811-
})
808+
load()
812809
813810
watch(props, () => {
814811

‎console/atest-ui/src/router/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ const router = createRouter({
7676
})
7777

7878
router.beforeEach(async (to, from, next) => {
79-
console.log(to, from)
79+
// output route info for debug
80+
// console.log(to, from)
8081
next()
8182
})
8283

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
</template>
2424

25-
<style>
25+
<style scoped>
2626
.index {
2727
display: flex;
2828
justify-content: center;

‎console/atest-ui/src/views/test/TestingPanel.vue‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
<template>
2-
<div class="common-layout" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
3-
<el-container style="height: 100%">
4-
<el-main style="padding-top: 5px; padding-bottom: 5px;">
5-
<el-container style="height: 100%">
6-
<el-aside>
7-
<el-button type="primary" @click="openTestSuiteCreateDialog"
8-
data-intro="Click here to create a new test suite" test-id="open-new-suite-dialog" :icon="Edit">{{
9-
t('button.new') }}</el-button>
10-
<el-button type="primary" @click="openTestSuiteImportDialog" data-intro="Click here to import from Postman"
11-
test-id="open-import-suite-dialog">{{ t('button.import') }}</el-button>
12-
<el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
13-
<el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
14-
15-
<el-tree v-loading="storesLoading" :data=data highlight-current :check-on-click-node="true"
16-
:expand-on-click-node="false" :current-node-key="currentNodekey" ref="treeRef" node-key="id"
17-
:filter-node-method="filterTestCases" @node-click="handleNodeClick"
18-
data-intro="This is the test suite tree. You can click the test suite to edit it." />
19-
<TemplateFunctions />
20-
</el-aside>
21-
22-
<el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
23-
<TestCase v-if="viewName === 'testcase'" :suite="testSuite" :kindName="testSuiteKind" :name="testCaseName"
24-
@updated="loadStores" style="height: 100%;"
25-
data-intro="This is the test case editor. You can edit the test case here." />
26-
<TestSuite v-else-if="viewName === 'testsuite'" :name="testSuite" @updated="loadStores"
27-
data-intro="This is the test suite editor. You can edit the test suite here." />
28-
</el-main>
29-
</el-container>
30-
</el-main>
31-
</el-container>
2+
<div class="index" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
3+
<el-card class="card" shawon="hover">
4+
<el-button type="primary" @click="openTestSuiteCreateDialog" data-intro="Click here to create a new test suite"
5+
test-id="open-new-suite-dialog" :icon="Edit">{{
6+
t('button.new') }}</el-button>
7+
<el-button type="primary" @click="openTestSuiteImportDialog" data-intro="Click here to import from Postman"
8+
test-id="open-import-suite-dialog">{{ t('button.import') }}</el-button>
9+
<el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
10+
<TemplateFunctions />
11+
<br>
12+
<br>
13+
<el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
14+
15+
<el-tree v-loading="storesLoading" :data=data highlight-current :check-on-click-node="true"
16+
:expand-on-click-node="false" :current-node-key="currentNodekey" ref="treeRef" node-key="id"
17+
:filter-node-method="filterTestCases" @node-click="handleNodeClick"
18+
data-intro="This is the test suite tree. You can click the test suite to edit it." />
19+
</el-card>
3220
</div>
3321

3422
<el-dialog v-model="dialogVisible" :title="t('title.createTestSuite')" width="30%" draggable>
@@ -127,13 +115,14 @@ import { Cache } from '../../utils/cache'
127115
import { useI18n } from 'vue-i18n'
128116
import { ErrorTips } from '@/utils/tips'
129117
import { DefaultResponseProcess } from '@/api/common'
118+
import { GetStores } from '@/api/store/store'
130119
import type { TestStore, Tree, Suite } from '../../types/types'
131120
import type { FormInstance, FormRules } from 'element-plus'
132-
import {
133-
ListTestCase,
134-
LoadTestSuite,
135-
CreateTestSuite,
136-
ImportTestSuite
121+
import {
122+
ListTestCase,
123+
LoadTestSuite,
124+
CreateTestSuite,
125+
ImportTestSuite
137126
} from '@/api/test/test'
138127
139128
const { t } = useI18n()
@@ -220,7 +209,7 @@ const storesLoading = ref(false)
220209
221210
const loadStores = async () => {
222211
storesLoading.value = true
223-
await loadStores()
212+
await GetStores()
224213
.then(DefaultResponseProcess)
225214
.then(async (d) => {
226215
stores.value = d.data
@@ -303,39 +292,39 @@ const importSuiteForm = reactive({
303292
store: ''
304293
})
305294
306-
function openTestSuiteCreateDialog() {
295+
const openTestSuiteCreateDialog = () => {
307296
dialogVisible.value = true
308297
}
309298
310-
function openTestSuiteImportDialog() {
299+
const openTestSuiteImportDialog = () => {
311300
importDialogVisible.value = true
312301
}
313302
314303
const rules = reactive<FormRules<Suite>>({
315304
name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
316305
store: [{ required: true, message: 'Location is required', trigger: 'blur' }]
317306
})
318-
const submitForm = async (formEl: FormInstance | undefined) => {
319-
if (!formEl) return
320-
await formEl.validate((valid: boolean) => {
321-
if (valid) {
322-
suiteCreatingLoading.value = true
323-
CreateTestSuite(testSuiteForm).then((res: any) => {
324-
suiteCreatingLoading.value = false
325-
if (res.error !== "") {
326-
ElMessage.error('Oops, ' + res.error)
327-
} else {
328-
loadStores()
329-
dialogVisible.value = false
330-
formEl.resetFields()
331-
}
332-
}).catch((err) => {
333-
suiteCreatingLoading.value = false
334-
ElMessage.error('Oops, ' + err)
335-
})
336-
}
337-
})
338-
}
307+
// const submitForm = async (formEl: FormInstance | undefined) => {
308+
// if (!formEl) return
309+
// await formEl.validate((valid: boolean) => {
310+
// if (valid) {
311+
// suiteCreatingLoading.value = true
312+
// CreateTestSuite(testSuiteForm).then((res: any) => {
313+
// suiteCreatingLoading.value = false
314+
// if (res.error !== "") {
315+
// ElMessage.error('Oops, ' + res.error)
316+
// } else {
317+
// loadStores()
318+
// dialogVisible.value = false
319+
// formEl.resetFields()
320+
// }
321+
// }).catch((err) => {
322+
// suiteCreatingLoading.value = false
323+
// ElMessage.error('Oops, ' + err)
324+
// })
325+
// }
326+
// })
327+
// }
339328
340329
const importSuiteFormRules = reactive<FormRules<Suite>>({
341330
url: [
@@ -407,6 +396,17 @@ const suiteKinds = [{
407396
</script>
408397

409398
<style scoped>
399+
.index {
400+
display: flex
401+
}
402+
403+
.card {
404+
margin-top: 1%;
405+
width: 100%; /* 使用百分比单位 */
406+
max-width: 1750px; /* 设置最大宽度 */
407+
height: auto;
408+
}
409+
410410
header {
411411
line-height: 1.5;
412412
max-height: 100vh;

0 commit comments

Comments
 (0)