From bed128a0bacb2457ab260cfadd73f6c3f7fb7cdd Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Wed, 16 Jul 2025 14:50:01 +0800
Subject: [PATCH] =?UTF-8?q?Feature:=20=E5=B0=86=E5=8D=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=BF=AE=E6=94=B9=E4=B8=BA=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 305 +-----------------
 src/config/navigation.ts                      |  33 ++
 src/layouts/CalculatorLayout.vue              | 274 ++++++++++++++++
 src/layouts/baseline.vue                      |  33 --
 src/layouts/default.vue                       |   1 -
 src/pages/calculators/belt-specification.vue  |  13 +
 .../multi-layer-paper-tape-width-angle.vue    |  13 +
 .../calculators/paper-roll-weight-length.vue  |  13 +
 .../calculators/paper-tape-width-angle.vue    |  13 +
 .../calculators/paper-tube-production.vue     |  13 +
 src/pages/calculators/paper-tube-weight.vue   |  13 +
 src/pages/index.vue                           |  11 +-
 src/typed-router.d.ts                         |   6 +
 13 files changed, 402 insertions(+), 339 deletions(-)
 create mode 100644 src/config/navigation.ts
 create mode 100644 src/layouts/CalculatorLayout.vue
 delete mode 100644 src/layouts/baseline.vue
 create mode 100644 src/pages/calculators/belt-specification.vue
 create mode 100644 src/pages/calculators/multi-layer-paper-tape-width-angle.vue
 create mode 100644 src/pages/calculators/paper-roll-weight-length.vue
 create mode 100644 src/pages/calculators/paper-tape-width-angle.vue
 create mode 100644 src/pages/calculators/paper-tube-production.vue
 create mode 100644 src/pages/calculators/paper-tube-weight.vue

diff --git a/src/App.vue b/src/App.vue
index 3873ea4..9f212ff 100644
--- a/src/App.vue
+++ b/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">
-          &copy; {{ 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>
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
new file mode 100644
index 0000000..0d4c494
--- /dev/null
+++ b/src/config/navigation.ts
@@ -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',
+  },
+]
diff --git a/src/layouts/CalculatorLayout.vue b/src/layouts/CalculatorLayout.vue
new file mode 100644
index 0000000..a45e502
--- /dev/null
+++ b/src/layouts/CalculatorLayout.vue
@@ -0,0 +1,274 @@
+<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">
+          &copy; {{ 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'
+
+  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 navigationConfig.map((item, _) => {
+      return {
+        title: t(item.title),
+        to: item.to,
+      }
+    })
+  })
+
+  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>
diff --git a/src/layouts/baseline.vue b/src/layouts/baseline.vue
deleted file mode 100644
index b326d60..0000000
--- a/src/layouts/baseline.vue
+++ /dev/null
@@ -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>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 651a9b0..1e18262 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -3,7 +3,6 @@
     <router-view />
   </v-main>
 
-  <AppFooter />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/calculators/belt-specification.vue b/src/pages/calculators/belt-specification.vue
new file mode 100644
index 0000000..eba3aed
--- /dev/null
+++ b/src/pages/calculators/belt-specification.vue
@@ -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>
diff --git a/src/pages/calculators/multi-layer-paper-tape-width-angle.vue b/src/pages/calculators/multi-layer-paper-tape-width-angle.vue
new file mode 100644
index 0000000..85a7fa5
--- /dev/null
+++ b/src/pages/calculators/multi-layer-paper-tape-width-angle.vue
@@ -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>
diff --git a/src/pages/calculators/paper-roll-weight-length.vue b/src/pages/calculators/paper-roll-weight-length.vue
new file mode 100644
index 0000000..a656eba
--- /dev/null
+++ b/src/pages/calculators/paper-roll-weight-length.vue
@@ -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>
diff --git a/src/pages/calculators/paper-tape-width-angle.vue b/src/pages/calculators/paper-tape-width-angle.vue
new file mode 100644
index 0000000..802a6a6
--- /dev/null
+++ b/src/pages/calculators/paper-tape-width-angle.vue
@@ -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>
diff --git a/src/pages/calculators/paper-tube-production.vue b/src/pages/calculators/paper-tube-production.vue
new file mode 100644
index 0000000..91b6503
--- /dev/null
+++ b/src/pages/calculators/paper-tube-production.vue
@@ -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>
diff --git a/src/pages/calculators/paper-tube-weight.vue b/src/pages/calculators/paper-tube-weight.vue
new file mode 100644
index 0000000..032843e
--- /dev/null
+++ b/src/pages/calculators/paper-tube-weight.vue
@@ -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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a5537bf..74809d8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,15 @@
 <template>
-   <HelloWorld />
+  <div>Redirecting...</div>
 </template>
 
 <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>
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 331ee51..21247ae 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -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>>,
   }
 }