新增:新页面路由
This commit is contained in:
parent
9a8b69c15a
commit
0c2127c087
89
src/App.vue
89
src/App.vue
@ -4,36 +4,30 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useUserStore } from './stores/user'
|
||||
import { useLocaleStore } from './stores/locale'
|
||||
import Toast from './components/Toast.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
const localeStore = useLocaleStore()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const display = useDisplay()
|
||||
|
||||
const currentRoute = computed(() => route.path)
|
||||
const currentLocaleLabel = computed(() => {
|
||||
return (
|
||||
localeStore.localeOptions.find((o) => o.value === localeStore.currentLocale)?.label ??
|
||||
String(localeStore.currentLocale)
|
||||
)
|
||||
})
|
||||
|
||||
const showBottomNav = computed(() => display.smAndDown.value)
|
||||
const mineTargetPath = computed(() => (userStore.isLoggedIn ? '/wallet' : '/login'))
|
||||
const showBottomNav = computed(() => {
|
||||
if (!display.smAndDown.value) return false
|
||||
return currentRoute.value === '/' || currentRoute.value === '/search' || currentRoute.value === '/profile'
|
||||
})
|
||||
const mineTargetPath = computed(() => '/profile')
|
||||
const bottomNavValue = computed({
|
||||
get() {
|
||||
const p = currentRoute.value
|
||||
if (p.startsWith('/wallet')) return '/wallet'
|
||||
if (p.startsWith('/login')) return '/wallet' // Mine 入口在登录页也保持高亮
|
||||
if (p.startsWith('/profile')) return '/profile'
|
||||
if (p.startsWith('/search')) return '/search'
|
||||
return '/'
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === '/wallet') router.push(mineTargetPath.value)
|
||||
if (v === '/profile') router.push(mineTargetPath.value)
|
||||
else router.push(v)
|
||||
},
|
||||
})
|
||||
@ -74,29 +68,6 @@ watch(
|
||||
</v-btn>
|
||||
<v-app-bar-title v-if="currentRoute === '/'">TestMarket</v-app-bar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-menu location="bottom" :close-on-content-click="true" class="locale-menu">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
variant="text"
|
||||
size="small"
|
||||
class="locale-btn"
|
||||
:aria-label="`${t('common.more')} (${currentLocaleLabel})`"
|
||||
>
|
||||
<v-icon size="24">mdi-earth</v-icon>
|
||||
<span class="locale-label">{{ currentLocaleLabel }}</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="opt in localeStore.localeOptions"
|
||||
:key="opt.value"
|
||||
:title="opt.label"
|
||||
:active="localeStore.currentLocale === opt.value"
|
||||
@click="localeStore.setLocale(opt.value)"
|
||||
/>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
v-if="!userStore.isLoggedIn"
|
||||
text
|
||||
@ -115,23 +86,18 @@ watch(
|
||||
>
|
||||
<span class="balance-text">${{ userStore.balance }}</span>
|
||||
</v-btn>
|
||||
<v-menu location="bottom" :close-on-content-click="false">
|
||||
<template #activator="{ props }">
|
||||
<v-btn v-bind="props" icon variant="text" class="avatar-btn">
|
||||
<v-avatar size="36" color="primary">
|
||||
<v-img v-if="userStore.avatarUrl" :src="userStore.avatarUrl" cover alt="avatar" />
|
||||
<v-icon v-else>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
:title="userStore.user?.nickName || userStore.user?.userName || t('common.user')"
|
||||
disabled
|
||||
/>
|
||||
<v-list-item :title="t('common.logout')" @click="userStore.logout()" />
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
icon
|
||||
variant="text"
|
||||
class="avatar-btn"
|
||||
:aria-label="t('common.user')"
|
||||
@click="$router.push('/profile')"
|
||||
>
|
||||
<v-avatar size="36" color="primary">
|
||||
<v-img v-if="userStore.avatarUrl" :src="userStore.avatarUrl" cover alt="avatar" />
|
||||
<v-icon v-else>mdi-account</v-icon>
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
</div>
|
||||
</v-app-bar>
|
||||
@ -160,7 +126,7 @@ watch(
|
||||
<v-icon size="24">mdi-magnify</v-icon>
|
||||
<span>Search</span>
|
||||
</v-btn>
|
||||
<v-btn value="/wallet" :ripple="false">
|
||||
<v-btn value="/profile" :ripple="false">
|
||||
<v-icon size="24">mdi-account-outline</v-icon>
|
||||
<span>Mine</span>
|
||||
</v-btn>
|
||||
@ -206,20 +172,6 @@ watch(
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
.locale-btn {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.locale-label {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.72);
|
||||
max-width: 88px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 底部导航:整条栏上方淡投影 */
|
||||
:deep(.v-bottom-navigation) {
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
|
||||
@ -260,6 +212,7 @@ watch(
|
||||
:global(html),
|
||||
:global(body) {
|
||||
background: rgb(252, 252, 252);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
:global(.v-application) {
|
||||
background: rgb(252, 252, 252);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user