97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router'
|
|
import AppIcon from '../components/base/AppIcon.vue'
|
|
import { desktopNav } from '../router/nav'
|
|
|
|
const route = useRoute()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout-desktop">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<span class="brand__mark"><AppIcon name="dashboard" :size="18" /></span>
|
|
<strong>备考通</strong>
|
|
</div>
|
|
<nav class="nav">
|
|
<RouterLink
|
|
v-for="item in desktopNav"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="nav-item"
|
|
:class="{ active: route.path === item.to }"
|
|
>
|
|
<AppIcon :name="item.icon" :size="18" />
|
|
<span>{{ item.label }}</span>
|
|
</RouterLink>
|
|
</nav>
|
|
</aside>
|
|
<main class="content"><slot /></main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout-desktop {
|
|
min-height: 100vh;
|
|
}
|
|
.sidebar {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
width: var(--sidebar-width-desktop);
|
|
padding: var(--space-4) var(--space-3);
|
|
background: var(--bg-card);
|
|
border-right: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-2);
|
|
height: 40px;
|
|
font-size: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
.brand__mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--gradient-hero-deep);
|
|
color: var(--on-accent);
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
height: 40px;
|
|
padding: 0 var(--space-3);
|
|
border-radius: var(--radius-btn);
|
|
color: var(--text-secondary);
|
|
font-size: 13px;
|
|
transition: background var(--motion-hover-fast) var(--ease-default);
|
|
}
|
|
.nav-item:hover {
|
|
background: var(--bg-soft);
|
|
color: var(--text-primary);
|
|
}
|
|
.nav-item.active {
|
|
background: var(--primary);
|
|
color: var(--on-accent);
|
|
font-weight: var(--fw-card-title);
|
|
}
|
|
.content {
|
|
margin-left: var(--sidebar-width-desktop);
|
|
padding: var(--padding-desktop);
|
|
max-width: calc(var(--sidebar-width-desktop) + var(--content-max-width));
|
|
}
|
|
</style>
|