120 lines
2.4 KiB
Vue
120 lines
2.4 KiB
Vue
<template>
|
|
<div id="app">
|
|
<router-view />
|
|
<!-- 底部导航栏 -->
|
|
<nav class="bottom-nav" v-if="showNav">
|
|
<button
|
|
class="nav-item"
|
|
:class="{ active: currentRoute === '/' || currentRoute === '/avatar/manage' }"
|
|
@click="navigateTo('/avatar/manage')"
|
|
>
|
|
<span class="nav-icon">🤖</span>
|
|
<span class="nav-label">我的分身</span>
|
|
</button>
|
|
<button
|
|
class="nav-item"
|
|
:class="{ active: currentRoute === '/authorization' }"
|
|
@click="navigateTo('/authorization')"
|
|
>
|
|
<span class="nav-icon">🔑</span>
|
|
<span class="nav-label">授权管理</span>
|
|
</button>
|
|
<button
|
|
class="nav-item"
|
|
:class="{ active: currentRoute === '/token/charge' }"
|
|
@click="navigateTo('/token/charge')"
|
|
>
|
|
<span class="nav-icon">💰</span>
|
|
<span class="nav-label">Token</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const currentRoute = ref<string>(route.path)
|
|
const showNav = ref<boolean>(true)
|
|
|
|
// 监听路由变化
|
|
watch(() => route.path, (newPath) => {
|
|
currentRoute.value = newPath
|
|
// 首页（创建引导）与编辑页隐藏底部导航
|
|
showNav.value = newPath !== '/' && !newPath.startsWith('/avatar/edit')
|
|
})
|
|
|
|
// 导航
|
|
const navigateTo = (path: string) => {
|
|
router.push(path)
|
|
}
|
|
|
|
onMounted(() => {
|
|
currentRoute.value = route.path
|
|
showNav.value = route.path !== '/' && !route.path.startsWith('/avatar/edit')
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#app {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #F8F9FA;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* 底部导航栏 */
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
background: white;
|
|
border-top: 1px solid #EDEEF1;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.nav-label {
|
|
font-size: 11px;
|
|
color: #9398AE;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-item.active .nav-label {
|
|
color: #F97316;
|
|
}
|
|
|
|
.nav-item.active .nav-icon {
|
|
filter: none;
|
|
}
|
|
</style>
|