refactor(renderer): 更新顶部栏和主窗口页面布局

更改顶部栏按钮文本为“菜单”。在主窗口页面中,将按钮移动至卡片内,并添加直接进入看板的按钮,以改善用户界面和用户体验。
This commit is contained in:
hello8693 2024-08-22 21:14:07 +08:00
parent 76cd5af332
commit cceb850510
2 changed files with 34 additions and 12 deletions

View File

@ -14,7 +14,7 @@
<template #append> <template #append>
<div class="ga-4"> <div class="ga-4">
<v-btn @click="router.push('/mainWindow')">打开配置</v-btn> <v-btn @click="router.push('/mainWindow')">菜单</v-btn>
</div> </div>
</template> </template>
</v-app-bar> </v-app-bar>

View File

@ -1,13 +1,17 @@
<template> <template>
<v-container> <v-container class="main-container" fill-height>
<v-row> <v-row justify="center" align="center">
<v-col cols="12"> <v-col cols="12" md="4">
<h1>电视猪考试看板</h1> <v-card class="pa-4" outlined>
<v-btn block color="primary" dark @click="openDialog"> 打开配置 </v-btn>
<p class="mt-2 text-center">打开 JSON 配置文件</p>
</v-card>
</v-col> </v-col>
</v-row> <v-col cols="12" md="4" class="mt-4 mt-md-0">
<v-row> <v-card class="pa-4" outlined>
<v-col cols="12"> <v-btn block color="success" dark @click="gotoInfoPage"> 直接进入看板 </v-btn>
<v-btn color="primary" dark @click="openDialog"> 打开配置 </v-btn> <p class="mt-2 text-center">直接进入看板将继续使用上次加载的配置</p>
</v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -18,21 +22,39 @@ import { useRouter } from 'vue-router';
import { useProfileStore } from '@renderer/stores/app'; import { useProfileStore } from '@renderer/stores/app';
const globalStore = useProfileStore(); const globalStore = useProfileStore();
const router = useRouter();
function openDialog() { function openDialog() {
window.electron.ipcRenderer.send('prog:loadjson'); window.electron.ipcRenderer.send('prog:loadjson');
} }
function gotoInfoPage() {
router.push('/infoPage');
}
window.electron.ipcRenderer.on('common:openFile', (event, message) => { window.electron.ipcRenderer.on('common:openFile', (event, message) => {
console.log(message.data); console.log(message.data);
const examData = JSON.parse(message.data); const examData = JSON.parse(message.data);
globalStore.$patch(examData); globalStore.$patch(examData);
router.push('/infoPage'); router.push('/infoPage');
}); });
const router = useRouter();
</script> </script>
<style scoped> <style scoped>
/* 根据需要添加额外的样式 */ .main-container {
padding: 20px;
display: flex;
align-items: center;
}
.v-card {
width: 100%;
max-width: 300px;
margin: auto;
}
.v-btn {
height: 48px;
}
.text-center {
text-align: center;
}
</style> </style>