Feature: 基本路由系统
This commit is contained in:
291
src/layouts/CalculatorLayout.vue
Normal file
291
src/layouts/CalculatorLayout.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<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">
|
||||
{{ menuItems[selectedIndex].title }}
|
||||
</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
|
||||
/>
|
||||
<v-fade-transition mode="hide-on-leave">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</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'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const drawer = ref(true)
|
||||
const selectedIndex = ref(0)
|
||||
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 [
|
||||
{
|
||||
title: t('paperTubeWeightCalculate'),
|
||||
to: '/calculators/paper-tube-weight',
|
||||
},
|
||||
{
|
||||
title: t('beltSpecificationCalculate'),
|
||||
to: '/calculators/belt-specification',
|
||||
},
|
||||
{
|
||||
title: t('paperRollWeightLengthCalculate'),
|
||||
to: '/calculators/paper-roll-weight-length',
|
||||
},
|
||||
{
|
||||
title: t('paperTubeProductionCalculate'),
|
||||
to: '/calculators/paper-tube-production',
|
||||
},
|
||||
{
|
||||
title: t('paperTapeWidthAngleCalculate'),
|
||||
to: '/calculators/paper-tape-width-angle',
|
||||
},
|
||||
{
|
||||
title: t('multiLayerPaperTapeWidthAngleCalculate'),
|
||||
to: '/calculators/multi-layer-paper-tape-width-angle',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
function toggleLanguage () {
|
||||
locale.value = locale.value === 'zh' ? 'en' : 'zh'
|
||||
}
|
||||
|
||||
function handleSelect (index: number) {
|
||||
selectedIndex.value = index
|
||||
drawer.value = false // 选择后自动关闭抽屉
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.title = pageTitle.value
|
||||
})
|
||||
|
||||
watch(locale, () => {
|
||||
document.title = pageTitle.value
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user