116 lines
2.4 KiB
Vue
116 lines
2.4 KiB
Vue
<template>
|
|
<n-layout class="settings-layout" has-sider>
|
|
<n-layout-sider
|
|
class="settings-sidebar"
|
|
:width="150"
|
|
:native-scrollbar="false"
|
|
:bordered="false"
|
|
>
|
|
<n-menu
|
|
:value="activeSetting"
|
|
:options="settingOptions"
|
|
class="settings-menu"
|
|
@update:value="handleSettingChange"
|
|
/>
|
|
</n-layout-sider>
|
|
|
|
<n-layout-content class="settings-content" :native-scrollbar="false">
|
|
<RouterView />
|
|
</n-layout-content>
|
|
</n-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue"
|
|
import { RouterView, useRoute, useRouter } from "vue-router"
|
|
import type { MenuOption } from "naive-ui"
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const settingOptions: MenuOption[] = [
|
|
{
|
|
label: "音乐源",
|
|
key: "settings-source",
|
|
},
|
|
{
|
|
label: "外观",
|
|
key: "settings-appearance",
|
|
},
|
|
]
|
|
|
|
const activeSetting = computed(() => String(route.name ?? "settings-source"))
|
|
|
|
function handleSettingChange(key: string) {
|
|
void router.push({ name: key })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.settings-layout {
|
|
width: 100%;
|
|
max-width: 1180px;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-sidebar {
|
|
flex: 0 0 190px;
|
|
min-height: 0;
|
|
padding: 0 12px 0 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-menu {
|
|
width: 100%;
|
|
--n-item-text-color: var(--app-text-secondary);
|
|
--n-item-text-color-hover: var(--app-text);
|
|
--n-item-text-color-active: var(--app-primary);
|
|
--n-item-color-active: rgba(180, 83, 42, 0.12);
|
|
--n-item-color-active-hover: rgba(180, 83, 42, 0.16);
|
|
}
|
|
|
|
.settings-menu :deep(.n-menu-item-content) {
|
|
border-radius: 8px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.settings-menu :deep(.n-menu-item-content:hover),
|
|
.settings-menu :deep(.n-menu-item-content--selected),
|
|
.settings-menu :deep(.n-menu-item-content::before),
|
|
.settings-menu :deep(.n-menu-item-content:hover::before),
|
|
.settings-menu :deep(.n-menu-item-content--selected::before) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.settings-menu :deep(.n-menu-item-content--selected) {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.settings-content {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.settings-layout {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.settings-sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 0 18px;
|
|
}
|
|
|
|
.settings-menu {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
</style>
|