Skip to content

Commit f96a085

Browse files
Aditya-132Aditya-132
authored
Update App.vue
reverted changes because it is complex to covert UI same to same in Tailwind Signed-off-by: Aditya Chincholkar <[email protected]>
1 parent 4846678 commit f96a085

File tree

1 file changed

+111
-132
lines changed

1 file changed

+111
-132
lines changed

‎console/atest-ui/src/App.vue‎

Lines changed: 111 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<script setup lang="ts">
22
import {
3-
Document,
4-
Menu as IconMenu,
5-
Histogram,
6-
Location,
7-
Share,
8-
ArrowDown,
9-
Guide,
10-
DataAnalysis,
11-
Help,
12-
Setting
3+
Document,
4+
Menu as IconMenu,
5+
Histogram,
6+
Location,
7+
Share,
8+
ArrowDown,
9+
Guide,
10+
DataAnalysis, Help, Setting
1311
} from '@element-plus/icons-vue'
1412
import { ref, watch } from 'vue'
1513
import { API } from './views/net'
@@ -22,10 +20,11 @@ import SecretManager from './views/SecretManager.vue'
2220
import WelcomePage from './views/WelcomePage.vue'
2321
import DataManager from './views/DataManager.vue'
2422
import { useI18n } from 'vue-i18n'
25-
import { setAsDarkTheme, getThemes, setTheme, getTheme } from './theme'
2623
2724
const { t, locale: i18nLocale } = useI18n()
2825
26+
import { setAsDarkTheme, getThemes, setTheme, getTheme } from './theme'
27+
2928
const allThemes = ref(getThemes())
3029
const asDarkMode = ref(Cache.GetPreference().darkTheme)
3130
setAsDarkTheme(asDarkMode.value)
@@ -41,20 +40,21 @@ API.GetVersion((d) => {
4140
const version = d.version.match('^v\\d*.\\d*.\\d*')
4241
const dirtyVersion = d.version.match('^v\\d*.\\d*.\\d*-\\d*-g')
4342
44-
if (!version && !dirtyVersion) return
43+
if (!version && !dirtyVersion) {
44+
return
45+
}
4546
4647
if (dirtyVersion && dirtyVersion.length > 0) {
47-
appVersionLink.value += '/commit/' + d.message.replace(dirtyVersion[0], '')
48+
appVersionLink.value = appVersionLink.value + '/commit/' + d.message.replace(dirtyVersion[0], '')
4849
} else if (version && version.length > 0) {
49-
appVersionLink.value += '/releases/tag/' + version[0]
50+
appVersionLink.value = appVersionLink.value + '/releases/tag/' + version[0]
5051
}
5152
})
5253
5354
const isCollapse = ref(true)
5455
watch(isCollapse, (v: boolean) => {
5556
window.localStorage.setItem('button.style', v ? 'simple' : '')
5657
})
57-
5858
const lastActiveMenu = window.localStorage.getItem('activeMenu')
5959
const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
6060
const panelName = ref(activeMenu)
@@ -65,179 +65,158 @@ const handleSelect = (key: string) => {
6565
6666
const locale = ref(Cache.GetPreference().language)
6767
i18nLocale.value = locale.value
68-
watch(locale, (e: string) => {
68+
69+
watch(locale, (e: string) =>{
6970
Cache.WithLocale(e)
7071
i18nLocale.value = e
7172
})
7273
7374
const handleChangeLan = (command: string) => {
7475
switch (command) {
75-
case 'chinese':
76-
locale.value = 'zh-CN'
77-
break
78-
case 'english':
79-
locale.value = 'en-US'
80-
break
76+
case "chinese":
77+
locale.value = "zh-CN"
78+
break;
79+
case "english":
80+
locale.value = "en-US"
81+
break;
8182
}
82-
}
83+
};
8384
84-
const ID = ref(null)
85+
const ID = ref(null);
8586
const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
86-
ID.value = selectID
87-
panelName.value = historyPanelName
87+
ID.value = selectID;
88+
panelName.value = historyPanelName;
8889
}
8990
9091
const settingDialogVisible = ref(false)
9192
watch(settingDialogVisible, (v: boolean) => {
92-
if (v) {
93-
allThemes.value = getThemes()
94-
}
93+
if (v) {
94+
allThemes.value = getThemes()
95+
}
9596
})
96-
9797
const theme = ref(getTheme())
9898
watch(theme, (e) => {
99-
setTheme(e)
99+
setTheme(e)
100100
})
101101
</script>
102102

103103
<template>
104-
<el-container class="h-screen">
105-
<!-- Sidebar -->
106-
<el-aside class="flex flex-col border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" :width="isCollapse ? '80px' : '200px'">
107-
<!-- Collapse radio buttons, centered -->
108-
<el-radio-group v-model="isCollapse" class="p-3 flex justify-center space-x-3">
109-
<el-radio-button :value="false" class="px-3">+</el-radio-button>
110-
<el-radio-button :value="true" class="px-3">-</el-radio-button>
104+
<el-container style="height: 100%;">
105+
<el-aside width="auto" style="display: flex; flex-direction: column;">
106+
<el-radio-group v-model="isCollapse">
107+
<el-radio-button :value="false">+</el-radio-button>
108+
<el-radio-button :value="true">-</el-radio-button>
111109
</el-radio-group>
112-
113-
<!-- Menu -->
114110
<el-menu
111+
class="el-menu-vertical"
112+
style="height: 100%;"
115113
:default-active="activeMenu"
116114
:collapse="isCollapse"
117115
@select="handleSelect"
118-
class="el-menu-vertical flex-1 overflow-auto border-r-0"
119116
>
120117
<el-menu-item index="welcome">
121-
<el-icon><Share /></el-icon>
118+
<el-icon><share /></el-icon>
122119
<template #title>{{ t('title.welcome') }}</template>
123120
</el-menu-item>
124121
<el-menu-item index="testing" test-id="testing-menu">
125-
<el-icon><IconMenu /></el-icon>
126-
<template #title>{{ t('title.testing') }}</template>
122+
<el-icon><icon-menu /></el-icon>
123+
<template #title>{{ t('title.testing' )}}</template>
127124
</el-menu-item>
128125
<el-menu-item index="history" test-id="history-menu">
129-
<el-icon><Histogram /></el-icon>
130-
<template #title>{{ t('title.history') }}</template>
126+
<el-icon><histogram /></el-icon>
127+
<template #title>{{ t('title.history' )}}</template>
131128
</el-menu-item>
132129
<el-menu-item index="mock" test-id="mock-menu">
133130
<el-icon><Guide /></el-icon>
134-
<template #title>{{ t('title.mock') }}</template>
131+
<template #title>{{ t('title.mock' )}}</template>
135132
</el-menu-item>
136133
<el-menu-item index="data" test-id="data-menu">
137134
<el-icon><DataAnalysis /></el-icon>
138-
<template #title>{{ t('title.data') }}</template>
135+
<template #title>{{ t('title.data' )}}</template>
139136
</el-menu-item>
140137
<el-menu-item index="secret">
141-
<el-icon><Document /></el-icon>
138+
<el-icon><document /></el-icon>
142139
<template #title>{{ t('title.secrets') }}</template>
143140
</el-menu-item>
144141
<el-menu-item index="store">
145-
<el-icon><Location /></el-icon>
142+
<el-icon><location /></el-icon>
146143
<template #title>{{ t('title.stores') }}</template>
147144
</el-menu-item>
148145
</el-menu>
149146
</el-aside>
150147

151-
<!-- Main content -->
152-
<el-main class="relative flex-1 p-4 bg-white dark:bg-[#1e1e1e] dark:text-white overflow-auto">
153-
154-
155-
<!-- Panels -->
156-
<div class="pr-12">
157-
<TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel" />
158-
<TestingHistoryPanel v-else-if="panelName === 'history'" :ID="ID" />
159-
<DataManager v-else-if="panelName === 'data'" />
160-
<MockManager v-else-if="panelName === 'mock'" />
161-
<StoreManager v-else-if="panelName === 'store'" />
162-
<SecretManager v-else-if="panelName === 'secret'" />
163-
<WelcomePage v-else />
148+
<el-main style="padding-top: 0px;">
149+
<div class="top-menu">
150+
<el-col style="display: flex; align-items: center;">
151+
<el-icon @click="settingDialogVisible=true" size="20"><Setting /></el-icon>
152+
</el-col>
164153
</div>
154+
<TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
155+
<TestingHistoryPanel v-else-if="panelName === 'history'" :ID="ID"/>
156+
<DataManager v-else-if="panelName === 'data'" />
157+
<MockManager v-else-if="panelName === 'mock'" />
158+
<StoreManager v-else-if="panelName === 'store'" />
159+
<SecretManager v-else-if="panelName === 'secret'" />
160+
<WelcomePage v-else />
165161
</el-main>
166-
<!-- Settings button top-right -->
167-
<div class="absolute top-4 right-4 cursor-pointer z-10" @click="settingDialogVisible = true" title="Settings">
168-
<el-icon size="20"><Setting /></el-icon>
169-
</div>
170162

171-
<!-- Footer version link -->
172-
<div class="absolute bottom-2 right-4 text-sm z-10">
173-
<a
174-
:href="appVersionLink"
175-
target="_blank"
176-
rel="noopener"
177-
class="text-emerald-500 hover:bg-emerald-100 dark:hover:bg-emerald-900 transition rounded px-2 py-1 select-none"
178-
>
179-
{{ appVersion }}
180-
</a>
163+
<div style="position: absolute; bottom: 0px; right: 10px;">
164+
<a :href=appVersionLink target="_blank" rel="noopener">{{appVersion}}</a>
181165
</div>
182166
</el-container>
183167

184-
<!-- Settings Dialog -->
185-
<el-dialog
186-
v-model="settingDialogVisible"
187-
:title="t('title.setting')"
188-
width="50%"
189-
draggable
190-
destroy-on-close
191-
class="!p-6"
192-
>
193-
<el-row class="mb-6 items-center">
194-
<el-col :span="4" class="font-semibold text-gray-700 dark:text-gray-300">Theme:</el-col>
195-
<el-col :span="18">
196-
<el-select v-model="theme" placeholder="Select a theme" class="w-full">
197-
<el-option v-for="item in allThemes" :key="item" :label="item" :value="item" />
198-
</el-select>
199-
<el-icon class="ml-3 align-middle">
200-
<el-link
201-
href="https://github.com/LinuxSuRen/atest-ext-data-swagger/tree/master/data/theme"
202-
target="_blank"
203-
class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
204-
> <Help /> </el-link
205-
>
206-
</el-icon>
207-
</el-col>
208-
</el-row>
209-
210-
<el-row class="mb-6 items-center">
211-
<el-col :span="4" class="font-semibold text-gray-700 dark:text-gray-300">Language:</el-col>
212-
<el-col :span="18" class="flex items-center gap-3">
213-
<el-tag class="text-base">{{ t('language') }}</el-tag>
214-
<el-dropdown trigger="click" @command="handleChangeLan">
215-
<el-icon><ArrowDown /></el-icon>
216-
<template #dropdown>
217-
<el-dropdown-menu>
218-
<el-dropdown-item command="chinese">中文</el-dropdown-item>
219-
<el-dropdown-item command="english">English</el-dropdown-item>
220-
</el-dropdown-menu>
221-
</template>
222-
</el-dropdown>
223-
</el-col>
224-
</el-row>
225-
226-
<el-row class="items-center">
227-
<el-col :span="4" class="font-semibold text-gray-700 dark:text-gray-300">Dark Mode:</el-col>
228-
<el-col :span="18">
229-
<el-switch type="primary" v-model="asDarkMode" />
230-
</el-col>
231-
</el-row>
232-
</el-dialog>
168+
<el-dialog v-model="settingDialogVisible" :title="t('title.setting' )" width="50%" draggable destroy-on-close>
169+
<el-row>
170+
<el-col :span="4">
171+
Theme:
172+
</el-col>
173+
<el-col :span="18">
174+
<el-select v-model="theme" placeholder="Select a theme">
175+
<el-option
176+
v-for="item in allThemes"
177+
:key="item"
178+
:label="item"
179+
:value="item"
180+
/>
181+
</el-select>
182+
<el-icon>
183+
<el-link href="https://github.com/LinuxSuRen/atest-ext-data-swagger/tree/master/data/theme" target="_blank">
184+
<Help />
185+
</el-link>
186+
</el-icon>
187+
</el-col>
188+
</el-row>
189+
190+
<el-row>
191+
<el-col :span="4">
192+
Language:
193+
</el-col>
194+
<el-col :span="18">
195+
<el-tag style="font-size: 18px;">{{ t('language') }}</el-tag>
196+
<el-dropdown trigger="click" @command="(command: string) => handleChangeLan(command)">
197+
<el-icon><arrow-down /></el-icon>
198+
<template #dropdown>
199+
<el-dropdown-menu>
200+
<el-dropdown-item command="chinese">中文</el-dropdown-item>
201+
<el-dropdown-item command="english">English</el-dropdown-item>
202+
</el-dropdown-menu>
203+
</template>
204+
</el-dropdown>
205+
</el-col>
206+
</el-row>
207+
<el-row>
208+
<el-col :span="4">
209+
Dark Mode:
210+
</el-col>
211+
<el-col :span="18">
212+
<el-switch type="primary" data-intro="Switch light and dark modes" v-model="asDarkMode"/>
213+
</el-col>
214+
</el-row>
215+
</el-dialog>
233216
</template>
234217

235-
<style scoped>
218+
<style>
236219
.el-menu-vertical:not(.el-menu--collapse) {
237220
width: 200px;
238221
}
239-
240-
.el-menu-vertical {
241-
border-right: none !important;
242-
}
243-
</style>
222+
</style>

0 commit comments

Comments
 (0)