285 lines
7.4 KiB
Vue
285 lines
7.4 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-app-bar
|
|
app
|
|
class="app-bar-transition"
|
|
:class="{ 'app-bar-pill': !drawer, 'app-bar-rect': drawer }"
|
|
color="primary"
|
|
elevation="4"
|
|
:rounded="drawer ? 'none' : 'pill'"
|
|
>
|
|
<v-app-bar-nav-icon @click="drawer = !drawer" />
|
|
<v-app-bar-title class="text-h6">
|
|
<template v-if="menuItems.length > 0 && menuItems[selectedIndex]">
|
|
{{ menuItems[selectedIndex].title || $t('appTitle') }}
|
|
</template>
|
|
</v-app-bar-title>
|
|
|
|
<v-spacer />
|
|
|
|
<v-btn icon="mdi-translate" @click="toggleLanguage" />
|
|
</v-app-bar>
|
|
|
|
<v-navigation-drawer
|
|
v-model="drawer"
|
|
app
|
|
class="drawer-transition"
|
|
:width="drawerWidth"
|
|
>
|
|
|
|
<div class="fill-height d-flex flex-column">
|
|
<v-list-item class="pa-4">
|
|
<v-list-item-title class="text-h6 text-primary">
|
|
{{ $t('calculator') }}
|
|
</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
{{ $t('appTitle') }}
|
|
</v-list-item-subtitle>
|
|
</v-list-item>
|
|
|
|
<v-divider />
|
|
|
|
<v-list class="flex-grow-1" density="compact">
|
|
<v-list-item
|
|
v-for="(item, index) in menuItems"
|
|
:key="index"
|
|
:active="selectedIndex === index"
|
|
class="ma-1"
|
|
:color="selectedIndex === index ? 'primary' : undefined"
|
|
rounded="lg"
|
|
:to="item.to"
|
|
@click="handleSelect(index)"
|
|
>
|
|
<v-list-item-title class="text-body-2">
|
|
{{ item.title }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-divider />
|
|
|
|
<div class="pa3">
|
|
<v-btn
|
|
block
|
|
class="mb-2"
|
|
prepend-icon="mdi-information-outline"
|
|
variant="text"
|
|
@click="showAboutDialog = true"
|
|
>
|
|
{{ $t('about') }}
|
|
</v-btn>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</v-navigation-drawer>
|
|
|
|
<v-dialog
|
|
v-model="showAboutDialog"
|
|
max-width="500px"
|
|
>
|
|
<v-card
|
|
class="mx-auto"
|
|
prepend-icon="mdi-information-outline"
|
|
>
|
|
<template #title>
|
|
<v-card-title class="text-h5">
|
|
{{ appInfo.appName }}
|
|
</v-card-title>
|
|
</template>
|
|
|
|
<template #subtitle>
|
|
<div class="text-caption text-secondary">
|
|
{{ appInfo.version }}
|
|
{{ appInfo.copyright }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #text>
|
|
<v-card-text>
|
|
<div>
|
|
{{ appInfo.description }}
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<div class="mb-3">
|
|
{{ $t('officialWebsite') }}:
|
|
<v-btn
|
|
color="primary"
|
|
:href="appInfo.officialWebsite"
|
|
prepend-icon="mdi-web"
|
|
rel="noopener noreferrer"
|
|
size="small"
|
|
target="_blank"
|
|
variant="text"
|
|
>
|
|
{{ appInfo.officialWebsite }}
|
|
</v-btn>
|
|
</div></template>
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="primary"
|
|
variant="text"
|
|
@click="showAboutDialog = false"
|
|
>
|
|
{{ $t('close') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
|
|
</v-card></v-dialog>
|
|
|
|
<v-main>
|
|
<v-container
|
|
class="pa-6"
|
|
fluid
|
|
/>
|
|
<router-view v-slot="{ Component }">
|
|
<v-fade-transition hide-on-leave>
|
|
<component :is="Component" />
|
|
</v-fade-transition>
|
|
</router-view>
|
|
</v-main>
|
|
|
|
<!-- 页脚 -->
|
|
<v-footer app class="pa-4 bg-grey-lighten-5">
|
|
<div class="d-flex justify-space-between align-center w-100">
|
|
<div class="text-caption text-disabled">
|
|
© {{ new Date().getFullYear() }} {{ appInfo.author }} - {{ $t('allRightsReserved') }}
|
|
</div>
|
|
<div class="text-caption text-disabled">
|
|
v{{ appInfo.version }}
|
|
</div>
|
|
</div>
|
|
</v-footer>
|
|
</v-app>
|
|
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { navigationConfig } from '@/config/navigation'
|
|
import { useNavigationStore } from '@/stores/navigation'
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
const navigationStore = useNavigationStore()
|
|
|
|
const drawer = computed({
|
|
get: () => navigationStore.drawer,
|
|
set: (value: boolean) => {
|
|
navigationStore.setDrawerOpen(value)
|
|
},
|
|
})
|
|
const selectedIndex = computed(() => navigationStore.selectedIndex)
|
|
|
|
const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth)
|
|
|
|
const showAboutDialog = ref(false)
|
|
|
|
// 应用信息
|
|
const appInfo = computed(() => {
|
|
return {
|
|
appName: t('appTitle'),
|
|
version: '1.0.0',
|
|
author: t('companyName'),
|
|
description: t('appDescription'),
|
|
copyright: `© ${new Date().getFullYear()} ${t('companyName')}. ${t('allRightsReserved')}`,
|
|
officialWebsite: 'http://www.jinshen.cn',
|
|
}
|
|
})
|
|
|
|
// 动态设置网页标题
|
|
const pageTitle = computed(() => {
|
|
return t('appTitle')
|
|
})
|
|
|
|
// 监听窗口变化
|
|
const handleResize = () => {
|
|
if (typeof window === 'undefined') return
|
|
windowWidth.value = window.innerWidth
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (typeof window === 'undefined') return
|
|
window.addEventListener('resize', handleResize)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (typeof window === 'undefined') return
|
|
window.removeEventListener('resize', handleResize)
|
|
})
|
|
|
|
const drawerWidth = computed(() => {
|
|
const isZh = locale.value === 'zh'
|
|
|
|
// 计算菜单项中最长标题的长度
|
|
const maxTitleLength = menuItems.value.reduce((max, item) => {
|
|
return Math.max(max, item.title.length)
|
|
}, 0)
|
|
|
|
const isMobile = windowWidth.value < 600
|
|
const isTablet = windowWidth.value < 960
|
|
|
|
// 根据屏幕宽度和标题长度计算抽屉宽度
|
|
let calculatedWidth: number
|
|
|
|
if (isMobile) {
|
|
// 移动设备：更紧凑的布局
|
|
calculatedWidth = isZh ? maxTitleLength * 12 + 60 : maxTitleLength * 6 + 60
|
|
} else if (isTablet) {
|
|
// 平板设备：中等布局
|
|
calculatedWidth = isZh ? maxTitleLength * 13 + 70 : maxTitleLength * 6.5 + 70
|
|
} else {
|
|
// 桌面设备：宽松布局
|
|
calculatedWidth = isZh ? maxTitleLength * 15 + 80 : maxTitleLength * 7 + 80
|
|
}
|
|
|
|
const minWidth = isMobile ? 240 : (isTablet ? 280 : 300)
|
|
const maxWidth = isMobile ? 360 : (isTablet ? 400 : 500)
|
|
|
|
const finalWidth = Math.max(minWidth, Math.min(calculatedWidth, maxWidth))
|
|
|
|
// 开发环境调试信息
|
|
if (import.meta.env.DEV) {
|
|
console.debug('Navigation drawer width calculation:', {
|
|
locale: locale.value,
|
|
maxTitleLength,
|
|
calculatedWidth,
|
|
finalWidth,
|
|
windowWidth: windowWidth.value,
|
|
device: isMobile ? 'mobile' : (isTablet ? 'tablet' : 'desktop'),
|
|
})
|
|
}
|
|
|
|
return finalWidth
|
|
})
|
|
|
|
const menuItems = computed(() => {
|
|
return navigationConfig.map((item, _) => {
|
|
return {
|
|
title: t(item.title),
|
|
to: item.to,
|
|
}
|
|
})
|
|
})
|
|
|
|
function toggleLanguage () {
|
|
locale.value = locale.value === 'zh' ? 'en' : 'zh'
|
|
}
|
|
|
|
function handleSelect (_index: number) {
|
|
drawer.value = false // 选择后自动关闭抽屉
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.title = pageTitle.value
|
|
})
|
|
|
|
watch(locale, () => {
|
|
document.title = pageTitle.value
|
|
})
|
|
</script>
|