Skip to content

Commit 2eaf313

Browse files
SamYSFSamYSF
committed
optimize: optimize test pages
1 parent 80cf32e commit 2eaf313

File tree

2 files changed

+81
-95
lines changed

2 files changed

+81
-95
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
2-
<el-tooltip effect="dark" content="You can get some functions templates by click it." placement="top-start">
3-
<el-button type="primary" @click="dialogVisible = !dialogVisible"
4-
data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}
5-
</el-button>
6-
</el-tooltip>
2+
<el-affix position="bottom" :offset="20" style="position: absolute; bottom: 5px;">
3+
<el-tooltip effect="dark" content="You can get some functions templates by click it." placement="top-start">
4+
<el-button type="primary" @click="dialogVisible = !dialogVisible"
5+
data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}
6+
</el-button>
7+
</el-tooltip>
8+
</el-affix>
79

810
<el-dialog v-model="dialogVisible" :title="t('title.templateQuery')" width="40%" draggable destroy-on-close>
911
<template #footer>

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

Lines changed: 74 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,78 @@
11
<template>
22
<!-- Index -->
33
<div class="index" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
4-
<el-card class="card" shawon="hover">
5-
<el-button
6-
type="primary"
7-
@click="openTestSuiteCreateDialog"
8-
data-intro="Click here to create a new test suite"
9-
test-id="open-new-suite-dialog"
10-
:icon="Edit"
11-
>{{ t('button.new') }}</el-button
12-
>
13-
<el-button
14-
type="primary"
15-
@click="openTestSuiteImportDialog"
16-
data-intro="Click here to import from Postman"
17-
test-id="open-import-suite-dialog"
18-
>{{ t('button.import') }}</el-button
19-
>
20-
<el-button type="primary" @click="loadStores" :icon="Refresh">{{
21-
t('button.refresh')
22-
}}</el-button>
23-
<TemplateFunctions />
24-
<div class="filter-input">
25-
<el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" />
26-
</div>
27-
28-
<div class="test-container">
29-
<!-- Test suite tree containers -->
30-
<el-tree
31-
v-loading="storesLoading"
32-
:data="data"
33-
highlight-current
34-
:check-on-click-node="true"
35-
:expand-on-click-node="false"
36-
:current-node-key="currentNodekey"
37-
ref="treeRef"
38-
node-key="id"
39-
:filter-node-method="filterTestCases"
40-
@node-click="handleNodeClick"
41-
data-intro="This is the test suite tree. You can click the test suite to edit it."
42-
>
43-
<template #default="{ node, data }">
44-
<span>
45-
<i :class="getColorClass(data.kind)">{{ data.kind }}</i>
46-
<i class="test-suite">{{ node.label }}</i>
47-
</span>
48-
</template>
49-
</el-tree>
50-
<!-- Test suite and case containers. -->
51-
<el-card shadow="hover">
52-
<TestCase
53-
v-if="viewName === 'testcase'"
54-
:suite="testSuite"
55-
:kindName="testSuiteKind"
56-
:name="testCaseName"
57-
@updated="loadStores"
58-
style="height: 100%"
59-
data-intro="This is the test case editor. You can edit the test case here."
60-
/>
61-
<TestSuite
62-
v-else-if="viewName === 'testsuite'"
63-
:name="testSuite"
64-
@updated="loadStores"
65-
data-intro="This is the test suite editor. You can edit the test suite here."
66-
/>
67-
</el-card>
68-
</div>
4+
<el-card class="card" shawon="hover" :body-style="{ width: '100%' }">
5+
<el-container style="height: 100%">
6+
<el-main style="padding-top: 5px; padding-bottom: 5px;">
7+
<el-container style="height: 100%;">
8+
<el-aside>
9+
<el-button
10+
type="primary"
11+
@click="openTestSuiteCreateDialog"
12+
data-intro="Click here to create a new test suite"
13+
test-id="open-new-suite-dialog"
14+
:icon="Edit"
15+
>{{ t('button.new') }}</el-button
16+
>
17+
<el-button
18+
type="primary"
19+
@click="openTestSuiteImportDialog"
20+
data-intro="Click here to import from Postman"
21+
test-id="open-import-suite-dialog"
22+
>{{ t('button.import') }}</el-button
23+
>
24+
<el-button type="primary" @click="loadStores" :icon="Refresh">{{
25+
t('button.refresh')
26+
}}</el-button>
27+
<div class="filter-input">
28+
<el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" />
29+
</div>
30+
<!-- Test suite tree containers -->
31+
<el-tree
32+
v-loading="storesLoading"
33+
:data="data"
34+
highlight-current
35+
:check-on-click-node="true"
36+
:expand-on-click-node="false"
37+
:current-node-key="currentNodekey"
38+
ref="treeRef"
39+
node-key="id"
40+
:filter-node-method="filterTestCases"
41+
@node-click="handleNodeClick"
42+
data-intro="This is the test suite tree. You can click the test suite to edit it."
43+
>
44+
<template #default="{ node, data }">
45+
<span>
46+
<i :class="getColorClass(data.kind)">{{ data.kind }}</i>
47+
<i class="test-suite">{{ node.label }}</i>
48+
</span>
49+
</template>
50+
</el-tree>
51+
<TemplateFunctions />
52+
</el-aside>
53+
<!-- Test suite and case containers. -->
54+
<el-main style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
55+
<el-card shadow="hover">
56+
<TestCase
57+
v-if="viewName === 'testcase'"
58+
:suite="testSuite"
59+
:kindName="testSuiteKind"
60+
:name="testCaseName"
61+
@updated="loadStores"
62+
style="height: 100%"
63+
data-intro="This is the test case editor. You can edit the test case here."
64+
/>
65+
<TestSuite
66+
v-else-if="viewName === 'testsuite'"
67+
:name="testSuite"
68+
@updated="loadStores"
69+
data-intro="This is the test suite editor. You can edit the test suite here."
70+
/>
71+
</el-card>
72+
</el-main>
73+
</el-container>
74+
</el-main>
75+
</el-container>
6976
</el-card>
7077
</div>
7178

@@ -593,9 +600,8 @@ const getColorClass = (kind: string) => {
593600
594601
.filter-input {
595602
vertical-align: middle;
596-
float: right;
597-
padding-left: 1vh;
598-
width: 50vh;
603+
padding-top: 1vh;
604+
padding-bottom: 1vh;
599605
}
600606
}
601607
@@ -672,28 +678,6 @@ nav a:first-of-type {
672678
font-weight: 600;
673679
}
674680
675-
.test-container {
676-
display: flex;
677-
flex-direction: row;
678-
margin-top: 2%;
679-
justify-content: space-around;
680-
width: 100%;
681-
682-
.el-tree {
683-
width: 30vh;
684-
}
685-
686-
span {
687-
display: flex;
688-
flex-direction: row-reverse;
689-
align-items: center;
690-
691-
i {
692-
padding-left: 10%;
693-
}
694-
}
695-
}
696-
697681
.test-suite {
698682
padding-left: 10%;
699683
font-style: normal;

0 commit comments

Comments
 (0)