Feature: 基本路由系统
This commit is contained in:
305
src/App.vue
305
src/App.vue
@ -1,311 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-app-bar
|
<router-view />
|
||||||
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"
|
|
||||||
@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="out-in">
|
|
||||||
<component :is="currentComponent" :key="selectedIndex" />
|
|
||||||
</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>
|
</v-app>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
import BeltSpecificationCalculate from '@/components/Modules/BeltSpecificationCalculate.vue'
|
|
||||||
import MultiLayerPaperTapeWidthAngleCalculate from '@/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue'
|
|
||||||
import PaperRollWeightLengthCalculate from '@/components/Modules/PaperRollWeightLengthCalculate.vue'
|
|
||||||
import PaperTapeWidthAngleCalculate from '@/components/Modules/PaperTapeWidthAngleCalculate.vue'
|
|
||||||
import PaperTubeProductionCalculate from '@/components/Modules/PaperTubeProductionCalculate.vue'
|
|
||||||
import PaperTubeWeightCalculate from '@/components/Modules/PaperTubeWeightCalculate.vue'
|
|
||||||
|
|
||||||
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'),
|
|
||||||
component: 'PaperTubeWeightCalculate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('beltSpecificationCalculate'),
|
|
||||||
component: 'BeltSpecificationCalculate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('paperRollWeightLengthCalculate'),
|
|
||||||
component: 'PaperRollWeightLengthCalculate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('paperTubeProductionCalculate'),
|
|
||||||
component: 'PaperTubeProductionCalculate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('paperTapeWidthAngleCalculate'),
|
|
||||||
component: 'PaperTapeWidthAngleCalculate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('multiLayerPaperTapeWidthAngleCalculate'),
|
|
||||||
component: 'MultiLayerPaperTapeWidthAngleCalculate',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const components = {
|
|
||||||
PaperTubeWeightCalculate,
|
|
||||||
BeltSpecificationCalculate,
|
|
||||||
PaperRollWeightLengthCalculate,
|
|
||||||
PaperTubeProductionCalculate,
|
|
||||||
PaperTapeWidthAngleCalculate,
|
|
||||||
MultiLayerPaperTapeWidthAngleCalculate,
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentComponent = computed(() => {
|
|
||||||
const componentName = menuItems.value[selectedIndex.value]?.component || 'BeltSpecificationCalculate'
|
|
||||||
return components[componentName as keyof typeof components]
|
|
||||||
})
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|||||||
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>
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<template>
|
|
||||||
<VApp id="inspire">
|
|
||||||
<VNavigationDrawer v-model="drawer">
|
|
||||||
<!-- -->
|
|
||||||
</VNavigationDrawer>
|
|
||||||
|
|
||||||
<VAppBar>
|
|
||||||
<VAppBarNavIcon @click="drawer = !drawer" />
|
|
||||||
<VToolbarTitle>Baseline Layout</VToolbarTitle>
|
|
||||||
</VAppBar>
|
|
||||||
|
|
||||||
<VMain>
|
|
||||||
<!-- -->
|
|
||||||
</VMain>
|
|
||||||
</VApp>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const drawer = ref(false)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'BaselineLayout',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
drawer: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
13
src/pages/calculators/belt-specification.vue
Normal file
13
src/pages/calculators/belt-specification.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<BeltSpecificationCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import BeltSpecificationCalculate from '@/components/Modules/BeltSpecificationCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: beltSpecification
|
||||||
|
</route>
|
||||||
13
src/pages/calculators/multi-layer-paper-tape-width-angle.vue
Normal file
13
src/pages/calculators/multi-layer-paper-tape-width-angle.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<MultiLayerPaperTapeWidthAngleCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import MultiLayerPaperTapeWidthAngleCalculate from '@/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: multiLayerPaperTapeWidthAngle
|
||||||
|
</route>
|
||||||
13
src/pages/calculators/paper-roll-weight-length.vue
Normal file
13
src/pages/calculators/paper-roll-weight-length.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<PaperRollWeightLengthCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import PaperRollWeightLengthCalculate from '@/components/Modules/PaperRollWeightLengthCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: paperRollWeightLength
|
||||||
|
</route>
|
||||||
13
src/pages/calculators/paper-tape-width-angle.vue
Normal file
13
src/pages/calculators/paper-tape-width-angle.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<PaperTapeWidthAngleCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import PaperTapeWidthAngleCalculate from '@/components/Modules/PaperTapeWidthAngleCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: paperTapeWidthAngle
|
||||||
|
</route>
|
||||||
13
src/pages/calculators/paper-tube-production.vue
Normal file
13
src/pages/calculators/paper-tube-production.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<PaperTubeProductionCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import PaperTubeProductionCalculate from '@/components/Modules/PaperTubeProductionCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: paperTubeProduction
|
||||||
|
</route>
|
||||||
13
src/pages/calculators/paper-tube-weight.vue
Normal file
13
src/pages/calculators/paper-tube-weight.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<PaperTubeWeightCalculate />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import PaperTubeWeightCalculate from '@/components/Modules/PaperTubeWeightCalculate.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<route lang="yaml">
|
||||||
|
meta:
|
||||||
|
layout: CalculatorLayout
|
||||||
|
title: paperTubeWeight
|
||||||
|
</route>
|
||||||
@ -1,6 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<HelloWorld />
|
<div>Redirecting...</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// Redirect to the calculators page
|
||||||
|
router.push('/calculators/paper-tube-weight')
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
6
src/typed-router.d.ts
vendored
6
src/typed-router.d.ts
vendored
@ -19,5 +19,11 @@ declare module 'vue-router/auto-routes' {
|
|||||||
*/
|
*/
|
||||||
export interface RouteNamedMap {
|
export interface RouteNamedMap {
|
||||||
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/belt-specification': RouteRecordInfo<'/calculators/belt-specification', '/calculators/belt-specification', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/multi-layer-paper-tape-width-angle': RouteRecordInfo<'/calculators/multi-layer-paper-tape-width-angle', '/calculators/multi-layer-paper-tape-width-angle', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/paper-roll-weight-length': RouteRecordInfo<'/calculators/paper-roll-weight-length', '/calculators/paper-roll-weight-length', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/paper-tape-width-angle': RouteRecordInfo<'/calculators/paper-tape-width-angle', '/calculators/paper-tape-width-angle', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/paper-tube-production': RouteRecordInfo<'/calculators/paper-tube-production', '/calculators/paper-tube-production', Record<never, never>, Record<never, never>>,
|
||||||
|
'/calculators/paper-tube-weight': RouteRecordInfo<'/calculators/paper-tube-weight', '/calculators/paper-tube-weight', Record<never, never>, Record<never, never>>,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user