ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-30 18:24:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix: Fix page transition & improve active handling

Browse source 
Fix: Fix current route parsing
This commit is contained in:
Nelson Chan 2021-11-04 22:12:52 +08:00
parent 369cad90c1
commit 1a218aaa17
2 changed files with 42 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/pages/Settings.vue
View file

@ -1,46 +1,45 @@
<template> <template>
<transition name="slide-fade" appear> <div>
<div> <h1 v-show="show" class="mb-3">
<h1 v-show="show" class="mb-3"> {{ $t("Settings") }}
{{ $t("Settings") }} </h1>
</h1>
<div class="shadow-box"> <div class="shadow-box">
<div class="row"> <div class="row">
<div class="settings-menu"> <div class="settings-menu">
<router-link <router-link
v-for="(item, key) in subMenus" v-for="(item, key) in subMenus"
:key="key" :key="key"
:to="`/settings/${item.path}`" :to="`/settings/${key}`"
> >
<div <div class="menu-item">
class="menu-item" {{ item.title }}
:class="{ active: $route.name == `settings-${key}` }" </div>
> </router-link>
{{ item.title }} </div>
</div> <div class="settings-content">
</router-link> <div class="settings-content-header">
{{ subMenus[currentPage].title }}
</div> </div>
<div class="settings-content"> <div class="mx-3">
<div class="settings-content-header"> <router-view v-slot="{ Component }">
{{ subMenus[$route.name.split("-")[1]].title }} <transition name="slide-fade" appear>
</div> <component :is="Component" />
<div class="mx-3"> </transition>
<router-view /> </router-view>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</transition> </div>
</template> </template>
<script> <script>
export default { import { useRoute } from "vue-router";
export default {
data() { data() {
return { return {
show: true, show: true,
settings: {}, settings: {},
@ -49,36 +48,39 @@ export default {
subMenus: { subMenus: {
general: { general: {
title: this.$t("General"), title: this.$t("General"),
path: "general",
}, },
appearance: { appearance: {
title: this.$t("Appearance"), title: this.$t("Appearance"),
path: "appearance",
}, },
notifications: { notifications: {
title: this.$t("Notifications"), title: this.$t("Notifications"),
path: "notifications",
}, },
monitorHistory: { "monitor-history": {
title: this.$t("Monitor History"), title: this.$t("Monitor History"),
path: "monitor-history",
}, },
security: { security: {
title: this.$t("Security"), title: this.$t("Security"),
path: "security",
}, },
backup: { backup: {
title: this.$t("Backup"), title: this.$t("Backup"),
path: "backup",
}, },
about: { about: {
title: this.$t("About"), title: this.$t("About"),
path: "about", },
}
}, },
}; };
}, },
computed: {
currentPage() {
let pathEnd = useRoute().path.split("/").at(-1);
if (pathEnd == "settings" || pathEnd == null) {
return "general";
}
return pathEnd;
},
},
mounted() { mounted() {
this.loadSettings(); this.loadSettings();
}, },
@ -120,7 +122,6 @@ export default {
.shadow-box { .shadow-box {
padding: 20px; padding: 20px;
min-height: calc(100vh - 155px); min-height: calc(100vh - 155px);
max-height: calc(100vh - 30px);
} }
footer { footer {
@ -154,7 +155,7 @@ footer {
} }
} }
.menu-item.active { .active .menu-item {
background: $highlight-white; background: $highlight-white;
border-left: 4px solid $primary; border-left: 4px solid $primary;
border-top-left-radius: 0; border-top-left-radius: 0;

7
src/router.js
View file

@ -71,37 +71,30 @@ const routes = [
{ {
path: "general", path: "general",
alias: "", alias: "",
name: "settings-general",
component: General, component: General,
}, },
{ {
path: "appearance", path: "appearance",
name: "settings-appearance",
component: Appearance, component: Appearance,
}, },
{ {
path: "notifications", path: "notifications",
name: "settings-notifications",
component: Notifications, component: Notifications,
}, },
{ {
path: "monitor-history", path: "monitor-history",
name: "settings-monitorHistory",
component: MonitorHistory, component: MonitorHistory,
}, },
{ {
path: "security", path: "security",
name: "settings-security",
component: Security, component: Security,
}, },
{ {
path: "backup", path: "backup",
name: "settings-backup",
component: Backup, component: Backup,
}, },
{ {
path: "about", path: "about",
name: "settings-about",
component: About, component: About,
}, },
] ]