Compare commits
4 Commits
Router
...
8080976772
| Author | SHA1 | Date | |
|---|---|---|---|
| 8080976772 | |||
| 9720bf05c6 | |||
| bdb02fd147 | |||
| bed128a0ba |
305
src/App.vue
305
src/App.vue
@ -1,311 +1,8 @@
|
||||
<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"
|
||||
@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>
|
||||
<router-view />
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
md="6"
|
||||
>
|
||||
<v-card
|
||||
class="pa-6 parameters-card"
|
||||
class="pa-6 parameter-card"
|
||||
elevation="8"
|
||||
rounded="xl"
|
||||
>
|
||||
|
||||
33
src/config/navigation.ts
Normal file
33
src/config/navigation.ts
Normal file
@ -0,0 +1,33 @@
|
||||
export interface NavigationItem {
|
||||
title: string
|
||||
to: string
|
||||
icon?: string
|
||||
component?: string
|
||||
}
|
||||
|
||||
export const navigationConfig: NavigationItem[] = [
|
||||
{
|
||||
title: 'paperTubeWeightCalculate',
|
||||
to: '/calculators/paper-tube-weight',
|
||||
},
|
||||
{
|
||||
title: 'beltSpecificationCalculate',
|
||||
to: '/calculators/belt-specification',
|
||||
},
|
||||
{
|
||||
title: 'paperRollWeightLengthCalculate',
|
||||
to: '/calculators/paper-roll-weight-length',
|
||||
},
|
||||
{
|
||||
title: 'paperTubeProductionCalculate',
|
||||
to: '/calculators/paper-tube-production',
|
||||
},
|
||||
{
|
||||
title: 'paperTapeWidthAngleCalculate',
|
||||
to: '/calculators/paper-tape-width-angle',
|
||||
},
|
||||
{
|
||||
title: 'multiLayerPaperTapeWidthAngleCalculate',
|
||||
to: '/calculators/multi-layer-paper-tape-width-angle',
|
||||
},
|
||||
]
|
||||
282
src/layouts/CalculatorLayout.vue
Normal file
282
src/layouts/CalculatorLayout.vue
Normal file
@ -0,0 +1,282 @@
|
||||
<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
|
||||
/>
|
||||
<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>
|
||||
@ -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>
|
||||
@ -3,7 +3,6 @@
|
||||
<router-view />
|
||||
</v-main>
|
||||
|
||||
<AppFooter />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -69,5 +69,6 @@
|
||||
"appDescription": "Paper tube production auxiliary production tool provides calculation of various parameters such as weight, size, angle, etc.",
|
||||
"allRightsReserved": "All Rights Reserved",
|
||||
"close": "Close",
|
||||
"officialWebsite": "Official website"
|
||||
"officialWebsite": "Official website",
|
||||
"loading": "Loading"
|
||||
}
|
||||
|
||||
@ -69,5 +69,6 @@
|
||||
"appDescription": "纸管制作辅助生产工具，提供纸管重量、尺寸、角度等多种参数的计算。",
|
||||
"allRightsReserved": "版权所有",
|
||||
"close": "关闭",
|
||||
"officialWebsite": "官方网站"
|
||||
"officialWebsite": "官方网站",
|
||||
"loading": "加载中"
|
||||
}
|
||||
|
||||
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,48 @@
|
||||
<template>
|
||||
<HelloWorld />
|
||||
<v-container class="d-flex justify-center align-center" style="min-height: 50vh;">
|
||||
<div class="text-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
size="64"
|
||||
width="6"
|
||||
/>
|
||||
<div class="text-h6 mt-4 text-primary">
|
||||
{{ $t('loading') }}...
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(async () => {
|
||||
// 等待路由完全准备好
|
||||
await router.isReady()
|
||||
|
||||
// 检查是否是直接访问首页
|
||||
const isDirectAccess = route.path === '/' && !document.referrer.includes(window.location.origin)
|
||||
|
||||
let targetPath = '/calculators/paper-tube-weight' // 默认路径
|
||||
|
||||
if (!isDirectAccess) {
|
||||
// 如果不是直接访问，尝试恢复上次的路径
|
||||
const lastRoute = sessionStorage.getItem('lastRoute')
|
||||
const savedPath = localStorage.getItem('lastPath')
|
||||
targetPath = lastRoute || savedPath || targetPath
|
||||
}
|
||||
|
||||
// 使用 replace 避免在历史记录中留下首页
|
||||
router.replace(targetPath)
|
||||
})
|
||||
</script>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
layout: CalculatorLayout
|
||||
</route>
|
||||
|
||||
@ -33,4 +33,28 @@ router.isReady().then(() => {
|
||||
localStorage.removeItem('vuetify:dynamic-reload')
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 如果访问根路径且不是直接输入地址访问
|
||||
if (to.path === '/' && from.path !== '/') {
|
||||
// 检查是否有保存的路径
|
||||
const lastRoute = sessionStorage.getItem('lastRoute')
|
||||
const savedPath = localStorage.getItem('lastPath')
|
||||
|
||||
if (lastRoute || savedPath) {
|
||||
// 重定向到上次访问的页面
|
||||
next(lastRoute || savedPath || '/calculators/paper-tube-weight')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 保存当前路由（非首页）
|
||||
if (to.path !== '/') {
|
||||
sessionStorage.setItem('lastRoute', to.fullPath)
|
||||
localStorage.setItem('lastPath', to.fullPath)
|
||||
}
|
||||
|
||||
next()
|
||||
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
31
src/stores/navigation.ts
Normal file
31
src/stores/navigation.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { navigationConfig } from '@/config/navigation'
|
||||
|
||||
export const useNavigationStore = defineStore('navigation', () => {
|
||||
// Status
|
||||
const route = useRoute()
|
||||
const drawer = ref(false)
|
||||
|
||||
// 当前选中的菜单项
|
||||
const selectedIndex = computed(() => {
|
||||
return navigationConfig.findIndex(item => item.to === route.path)
|
||||
})
|
||||
|
||||
// Actions
|
||||
function toggleDrawer () {
|
||||
drawer.value = !drawer.value
|
||||
}
|
||||
|
||||
function setDrawerOpen (open: boolean) {
|
||||
drawer.value = open
|
||||
}
|
||||
|
||||
return {
|
||||
selectedIndex,
|
||||
drawer,
|
||||
toggleDrawer,
|
||||
setDrawerOpen,
|
||||
}
|
||||
})
|
||||
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 {
|
||||
'/': 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