mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-06-06 00:01:33 +08:00
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { useRoute } from 'vue-router'
|
|
import AccountSettingsAccount from '@/views/pages/account-settings/AccountSettingsAccount.vue'
|
|
import AccountSettingsNotification from '@/views/pages/account-settings/AccountSettingsNotification.vue'
|
|
import AccountSettingsSecurity from '@/views/pages/account-settings/AccountSettingsSecurity.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const activeTab = ref(route.params.tab)
|
|
|
|
// tabs
|
|
const tabs = [
|
|
{ title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
|
|
{ title: 'Security', icon: 'mdi-lock-open-outline', tab: 'security' },
|
|
{ title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notification' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VTabs
|
|
v-model="activeTab"
|
|
show-arrows
|
|
>
|
|
<VTab
|
|
v-for="item in tabs"
|
|
:key="item.icon"
|
|
:value="item.tab"
|
|
>
|
|
<VIcon
|
|
size="20"
|
|
start
|
|
:icon="item.icon"
|
|
/>
|
|
{{ item.title }}
|
|
</VTab>
|
|
</VTabs>
|
|
<VDivider />
|
|
|
|
<VWindow
|
|
v-model="activeTab"
|
|
class="mt-5 disable-tab-transition"
|
|
>
|
|
<!-- Account -->
|
|
<VWindowItem value="account">
|
|
<AccountSettingsAccount />
|
|
</VWindowItem>
|
|
|
|
<!-- Security -->
|
|
<VWindowItem value="security">
|
|
<AccountSettingsSecurity />
|
|
</VWindowItem>
|
|
|
|
<!-- Notification -->
|
|
<VWindowItem value="notification">
|
|
<AccountSettingsNotification />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</div>
|
|
</template>
|