Merge branch 'main' into i18n

commit 38d10d7151
Author: R2m1liA <15258427350@163.com>
Date:   Sat Jul 19 11:34:11 2025 +0800

    Feature: 添加俄语、西班牙语支持 & 添加单位国际化

commit 25d4dc7a7f
Author: R2m1liA <15258427350@163.com>
Date:   Fri Jul 18 11:42:21 2025 +0800

    Fix: 修正导航栏动画 & 移除无用代码

commit e9d254c4e7
Author: R2m1liA <15258427350@163.com>
Date:   Fri Jul 18 11:37:40 2025 +0800

    Fix: 修改部分文本表述

commit c85afc9bde
Author: R2m1liA <15258427350@163.com>
Date:   Fri Jul 18 11:36:08 2025 +0800

    Feature: 添加更多语言支持

.drone.yml

@@ -0,0 +1,10 @@
+kind: pipeline
+type: docker
+name: build-and-deploy
+
+steps: 
+  - name: install & build
+    image: oven/bun
+    commands:
+      - bun install
+      - bun run build

src/App.vue

@@ -1,211 +1,8 @@
 <template>
   <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"
-    >
-      <v-list-item class="pa-4">
-        <v-list-item-title class="text-h6 text-primary">
-          {{ locale === 'zh' ? '计算工具' : 'Calculator' }}
-        </v-list-item-title>
-        <v-list-item-subtitle>
-          {{ locale === 'zh' ? '纸管计算辅助工具' : 'Paper Tube Calculator' }}
-        </v-list-item-subtitle>
-      </v-list-item>
-
-      <v-divider />
-
-      <v-list 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-navigation-drawer>
-
-    <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-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 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>

src/assets/logo.svg

@@ -1,6 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
-<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
-<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
-<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
-</svg>

src/components.d.ts

@@ -8,9 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
     BeltSpecificationCalculate: typeof import('./components/Modules/BeltSpecificationCalculate.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     MultiLayerPaperTapeWidthAngleCalculate: typeof import('./components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue')['default']
     PaperRollWeightLengthCalculate: typeof import('./components/Modules/PaperRollWeightLengthCalculate.vue')['default']
     PaperTapeWidthAngleCalculate: typeof import('./components/Modules/PaperTapeWidthAngleCalculate.vue')['default']

src/components/AppFooter.vue

@@ -1,82 +0,0 @@
-<template>
-  <v-footer
-    app
-    height="40"
-  >
-    <a
-      v-for="item in items"
-      :key="item.title"
-      class="d-inline-block mx-2 social-link"
-      :href="item.href"
-      rel="noopener noreferrer"
-      target="_blank"
-      :title="item.title"
-    >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
-    </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
-      <a
-        class="text-decoration-none on-surface"
-        href="https://vuetifyjs.com/about/licensing/"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        MIT License
-      </a>
-    </div>
-  </v-footer>
-</template>
-
-<script setup lang="ts">
-  const items = [
-    {
-      title: 'Vuetify Documentation',
-      icon: `$vuetify`,
-      href: 'https://vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Support',
-      icon: 'mdi-shield-star-outline',
-      href: 'https://support.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify X',
-      icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
-      href: 'https://x.com/vuetifyjs',
-    },
-    {
-      title: 'Vuetify GitHub',
-      icon: `mdi-github`,
-      href: 'https://github.com/vuetifyjs/vuetify',
-    },
-    {
-      title: 'Vuetify Discord',
-      icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
-      href: 'https://community.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Reddit',
-      icon: `mdi-reddit`,
-      href: 'https://reddit.com/r/vuetifyjs',
-    },
-  ]
-</script>
-
-<style scoped lang="sass">
-  .social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
-    transition: .2s ease-in-out
-
-    &:hover
-      color: rgba(25, 118, 210, 1)
-</style>

src/components/HelloWorld.vue

@@ -1,90 +0,0 @@
-<template>
-  <v-container class="fill-height" max-width="900">
-    <div>
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
-
-      <div class="mb-8 text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="tonal"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">
-                Get started
-              </h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
-              </div>
-            </template>
-          </v-card>
-        </v-col>
-
-        <v-col v-for="link in links" :key="link.href" cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            :href="link.href"
-            :prepend-icon="link.icon"
-            rel="noopener noreferrer"
-            rounded="lg"
-            :subtitle="link.subtitle"
-            target="_blank"
-            :title="link.title"
-            variant="tonal"
-          />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-  const links = [
-    {
-      href: 'https://vuetifyjs.com/',
-      icon: 'mdi-text-box-outline',
-      subtitle: 'Learn about all things Vuetify in our documentation.',
-      title: 'Documentation',
-    },
-    {
-      href: 'https://vuetifyjs.com/introduction/why-vuetify/#feature-guides',
-      icon: 'mdi-star-circle-outline',
-      subtitle: 'Explore available framework Features.',
-      title: 'Features',
-    },
-    {
-      href: 'https://vuetifyjs.com/components/all',
-      icon: 'mdi-widgets-outline',
-      subtitle: 'Discover components in the API Explorer.',
-      title: 'Components',
-    },
-    {
-      href: 'https://discord.vuetifyjs.com',
-      icon: 'mdi-account-group-outline',
-      subtitle: 'Connect with Vuetify developers.',
-      title: 'Community',
-    },
-  ]
-</script>

src/components/Modules/BeltSpecificationCalculate.vue

@@ -86,19 +86,19 @@
           <v-row>
             <v-col cols="12">
               <result-card
-                :label="`${$t('recommendBeltThickness')} (${result.recommendBeltThickness.unit})`"
+                :label="`${$t('recommendBeltThickness')}`"
                 :value="result.recommendBeltThickness"
               />
             </v-col>
             <v-col cols="12">
               <result-card
-                :label="`${$t('recommendBeltWidth')} (${result.recommendBeltWidth.unit})`"
+                :label="`${$t('recommendBeltWidth')}`"
                 :value="result.recommendBeltWidth"
               />
             </v-col>
             <v-col cols="12">
               <result-card
-                :label="`${$t('recommendBeltLength')} (${result.recommendBeltLength.unit})`"
+                :label="`${$t('recommendBeltLength')}`"
                 :value="result.recommendBeltLength"
               />
             </v-col>
@@ -124,8 +124,8 @@
     t('50_120Series'),
     t('200_Series'),
     t('600_Series'),
-    t('new_120Series'),
+    t('PT23-120_Series'),
-    t('new_200_Series'),
+    t('PT23-200_Series'),
     t('custom'),
   ])
 
@@ -199,11 +199,11 @@
         maxWheelbase: 1675,
         hubDiameter: 320,
       },
-      [t('new_120Series')]: {
+      [t('PT23-120_Series')]: {
         maxWheelbase: 900,
         hubDiameter: 240,
       },
-      [t('new_200_Series')]: {
+      [t('PT23-200_Series')]: {
         maxWheelbase: 1100,
         hubDiameter: 268,
       },

src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue

@@ -27,26 +27,26 @@
               <param-input-field
                 v-model="paperCoreDiameter"
                 :disabled="recordList.length > 0"
-                :label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
+                :label="$t('paperCoreDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="bottomPaperWidth"
                 :disabled="recordList.length > 0"
-                :label="`${$t('bottomPaperWidth')} (${bottomPaperWidth.unit})`"
+                :label="$t('bottomPaperWidth')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperGrammage"
-                :label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
+                :label="$t('paperGrammage')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperDensity"
-                :label="`${$t('paperDensity')} (${paperDensity.unit})`"
+                :label="$t('paperDensity')"
               />
             </v-col>
           </v-row>
@@ -137,16 +137,16 @@
                 <th>{{ $t('paperGrammage') }}</th>
                 <th>{{ $t('cumulativeThickness') }}</th>
                 <th>{{ $t('angle') }}</th>
-                <th>{{ $t('paperWidth') }}</th>
+                <th>{{ $t('paperTapeWidth') }}</th>
               </tr>
             </thead>
             <transition-group name="fade" tag="tbody">
               <tr v-for="(record, index) in recordList" :key="index" class="table-row-item">
                 <td>{{ record.layer }}</td>
-                <td>{{ record.grammage.value.toFixed(2) }} {{ record.grammage.unit }}</td>
+                <td>{{ record.grammage.value }} {{ $t(`units.${record.grammage.unit}`) }}</td>
-                <td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ record.cumulativeThickness.unit }}</td>
+                <td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ $t(`units.${record.cumulativeThickness.unit}`) }}</td>
-                <td>{{ record.angle.value.toFixed(2) }} {{ record.angle.unit }}</td>
+                <td>{{ record.angle.value.toFixed(2) }} {{ $t(`units.${record.angle.unit}`) }}</td>
-                <td>{{ record.paperWidth.value.toFixed(2) }} {{ record.paperWidth.unit }}</td>
+                <td>{{ record.paperWidth.value.toFixed(2) }} {{ $t(`units.${record.paperWidth.unit}`) }}</td>
               </tr>
             </transition-group>
           </v-table>
@@ -176,8 +176,8 @@
 
   const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
   const bottomPaperWidth = ref<Param>(createParam(100, 'mm'))
-  const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
+  const paperGrammage = ref<Param>(createParam(420, 'g_per_m2'))
-  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g_per_cm3'))
 
   const recordList = ref<LayerRecord[]>([])
 
@@ -195,7 +195,7 @@
       layer: recordList.value.length + 1,
       grammage: paperGrammage.value,
       cumulativeThickness: createParam(paperTotalThickness + paperRollWallThickness, 'mm'),
-      angle: createParam(beltAngle, '°'),
+      angle: createParam(beltAngle, 'degree'),
       paperWidth: createParam(paperWidth, 'mm'),
     }
   })
@@ -338,13 +338,13 @@
       // 添加Results表头列名
       worksheet.getCell('A8').value = t('layer')
       worksheet.getCell('A8').style = parameterStyle
-      worksheet.getCell('B8').value = t('paperGrammage') + ` (${recordList.value[0].grammage.unit})`
+      worksheet.getCell('B8').value = t('paperGrammage') + ` (${t(`units.${recordList.value[0].grammage.unit}`)})`
       worksheet.getCell('B8').style = parameterStyle
-      worksheet.getCell('C8').value = t('cumulativeThickness') + ` (${recordList.value[0].cumulativeThickness.unit})`
+      worksheet.getCell('C8').value = t('cumulativeThickness') + ` (${t(`units.${recordList.value[0].cumulativeThickness.unit}`)})`
       worksheet.getCell('C8').style = parameterStyle
-      worksheet.getCell('D8').value = t('angle') + ` (${recordList.value[0].angle.unit})`
+      worksheet.getCell('D8').value = t('angle') + ` (${t(`units.${recordList.value[0].angle.unit}`)})`
       worksheet.getCell('D8').style = parameterStyle
-      worksheet.getCell('E8').value = t('paperWidth') + ` (${recordList.value[0].paperWidth.unit})`
+      worksheet.getCell('E8').value = t('paperWidth') + ` (${t(`units.${recordList.value[0].paperWidth.unit}`)})`
       worksheet.getCell('E8').style = parameterStyle
 
       // 添加Results数据
@@ -420,7 +420,7 @@
       worksheet.mergeCells('F5:H6')
 
       // 自动调整列宽
-      for (const [index, column] of worksheet.columns.entries()) {
+      for (const [_index, column] of worksheet.columns.entries()) {
         let maxLength = 0
 
         if (column && typeof column.eachCell === 'function') {

src/components/Modules/PaperRollWeightLengthCalculate.vue

@@ -10,7 +10,7 @@
         md="6"
       >
         <v-card
-          class="pa-6 parameters-card"
+          class="pa-6 parameter-card"
           elevation="8"
           rounded="xl"
         >
@@ -28,31 +28,31 @@
             <v-col cols="12">
               <param-input-field
                 v-model="paperCoreDiameter"
-                :label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
+                :label="$t('paperCoreDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollExternalDiameter"
-                :label="`${$t('paperRollExternalDiameter')} (${paperRollExternalDiameter.unit})`"
+                :label="$t('paperRollExternalDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollWidth"
-                :label="`${$t('paperRollWidth')} (${paperRollWidth.unit})`"
+                :label="$t('paperRollWidth')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperDensity"
-                :label="`${$t('paperDensity')} (${paperDensity.unit})`"
+                :label="$t('paperDensity')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperGrammage"
-                :label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
+                :label="$t('paperGrammage')"
               />
             </v-col>
           </v-row>
@@ -126,8 +126,8 @@
   const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
   const paperRollExternalDiameter = ref<Param>(createParam(200, 'mm'))
   const paperRollWidth = ref<Param>(createParam(100, 'mm'))
-  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g_per_cm3'))
-  const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
+  const paperGrammage = ref<Param>(createParam(420, 'g_per_m2'))
 
   const result = computed(() => {
     const paperRollExternalRadius = paperRollExternalDiameter.value.value / 2
@@ -147,8 +147,8 @@
     paperCoreDiameter.value = createParam(76.2, 'mm')
     paperRollExternalDiameter.value = createParam(200, 'mm')
     paperRollWidth.value = createParam(100, 'mm')
-    paperDensity.value = createParam(0.76, 'g/cm³')
+    paperDensity.value = createParam(0.76, 'g_per_cm3')
-    paperGrammage.value = createParam(420, 'g/m²')
+    paperGrammage.value = createParam(420, 'g_per_m2')
   }
 </script>
 

src/components/Modules/PaperTapeWidthAngleCalculate.vue

@@ -26,19 +26,19 @@
             <v-col cols="12">
               <param-input-field
                 v-model="paperCoreDiameter"
-                :label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
+                :label="$t('paperCoreDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollWallThickness"
-                :label="`${$t('paperRollWallThickness')} (${paperRollWallThickness.unit})`"
+                :label="$t('paperRollWallThickness')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="innerPaperWidth"
-                :label="`${$t('innerPaperWidth')} (${innerPaperWidth.unit})`"
+                :label="$t('innerPaperWidth')"
               />
             </v-col>
           </v-row>
@@ -106,8 +106,8 @@
     const paperWidth = leadingLength * Math.sin(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
 
     return {
-      beltAngle: createParam(beltAngle, '°'),
+      beltAngle: createParam(beltAngle, 'degree'),
-      paperHolderAngle: createParam(paperHolderAngle, '°'),
+      paperHolderAngle: createParam(paperHolderAngle, 'degree'),
       leadingLength: createParam(leadingLength, 'mm'),
       paperWidth: createParam(paperWidth, 'mm'),
     }

src/components/Modules/PaperTubeProductionCalculate.vue

@@ -26,49 +26,49 @@
             <v-col cols="12">
               <param-input-field
                 v-model="paperCoreDiameter"
-                :label="`${$t('paperCoreDiameter')}(${paperCoreDiameter.unit})`"
+                :label="$t('paperCoreDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollWallThickness"
-                :label="`${$t('paperRollWallThickness')}(${paperRollWallThickness.unit})`"
+                :label="$t('paperRollWallThickness')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollLength"
-                :label="`${$t('paperRollLength')}(${paperRollLength.unit})`"
+                :label="$t('paperRollLength')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperDensity"
-                :label="`${$t('paperDensity')}(${paperDensity.unit})`"
+                :label="$t('paperDensity')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="innerPaperWidth"
-                :label="`${$t('innerPaperWidth')}(${innerPaperWidth.unit})`"
+                :label="$t('innerPaperWidth')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="workFrequency"
-                :label="`${$t('workFrequency')}(${workFrequency.unit})`"
+                :label="$t('workFrequency')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="workTime"
-                :label="`${$t('workTime')}(${workTime.unit})`"
+                :label="$t('workTime')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="workEfficiency"
-                :label="`${$t('workEfficiency')}(${workEfficiency.unit})`"
+                :label="$t('workEfficiency')"
               />
             </v-col>
           </v-row>
@@ -162,11 +162,11 @@
   const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
   const paperRollWallThickness = ref<Param>(createParam(10, 'mm'))
   const paperRollLength = ref<Param>(createParam(1000, 'mm'))
-  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g_per_cm3'))
   const innerPaperWidth = ref<Param>(createParam(105, 'mm'))
-  const workFrequency = ref<Param>(createParam(30, 'Hz'))
+  const workFrequency = ref<Param>(createParam(30, 'hz'))
-  const workTime = ref<Param>(createParam(8, 'h'))
+  const workTime = ref<Param>(createParam(8, 'hour'))
-  const workEfficiency = ref<Param>(createParam(85, '%'))
+  const workEfficiency = ref<Param>(createParam(85, 'percent'))
 
   const result = computed(() => {
     const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperRollWallThickness.value.value
@@ -181,12 +181,12 @@
     const productionWeightPerDay = productionWeightPerHour * workTime.value.value
 
     return {
-      feedPaperSpeed: createParam(feedPaperSpeed, 'm/min'),
+      feedPaperSpeed: createParam(feedPaperSpeed, 'm_per_min'),
-      outputSpeed: createParam(outputSpeed, 'm/min'),
+      outputSpeed: createParam(outputSpeed, 'm_per_min'),
-      productionAmountPerHour: createParam(productionAmountPerHour, '支/h'),
+      productionAmountPerHour: createParam(productionAmountPerHour, 'pcs_per_hour'),
-      productionWeightPerHour: createParam(productionWeightPerHour, 'kg/h'),
+      productionWeightPerHour: createParam(productionWeightPerHour, 'kg_per_hour'),
-      productionAmountPerDay: createParam(productionAmountPerDay, '支'),
+      productionAmountPerDay: createParam(productionAmountPerDay, 'pcs_per_day'),
-      productionWeightPerDay: createParam(productionWeightPerDay, 'kg'),
+      productionWeightPerDay: createParam(productionWeightPerDay, 'kg_per_day'),
     }
   })
 
@@ -194,11 +194,11 @@
     paperCoreDiameter.value = createParam(76.2, 'mm')
     paperRollWallThickness.value = createParam(10, 'mm')
     paperRollLength.value = createParam(1000, 'mm')
-    paperDensity.value = createParam(0.76, 'g/cm³')
+    paperDensity.value = createParam(0.76, 'g_per_cm3')
     innerPaperWidth.value = createParam(105, 'mm')
-    workFrequency.value = createParam(30, 'Hz')
+    workFrequency.value = createParam(30, 'hz')
-    workTime.value = createParam(8, 'h')
+    workTime.value = createParam(8, 'hour')
-    workEfficiency.value = createParam(85, '%')
+    workEfficiency.value = createParam(85, 'percent')
   }
 
 </script>

src/components/Modules/PaperTubeWeightCalculate.vue

@@ -26,31 +26,31 @@
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollLength"
-                :label="`${$t('paperRollLength')}(${paperRollLength.unit})`"
+                :label="$t('paperRollLength')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperDensity"
-                :label="`${$t('paperDensity')}(${paperDensity.unit})`"
+                :label="$t('paperDensity')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="productionAmount"
-                :label="`${$t('productionAmount')}(${productionAmount.unit})`"
+                :label="$t('productionAmount')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperCoreDiameter"
-                :label="`${$t('paperCoreDiameter')}(${paperCoreDiameter.unit})`"
+                :label="$t('paperCoreDiameter')"
               />
             </v-col>
             <v-col cols="12">
               <param-input-field
                 v-model="paperRollWallThickness"
-                :label="`${$t('paperRollWallThickness')}(${paperRollWallThickness.unit})`"
+                :label="$t('paperRollWallThickness')"
               />
             </v-col>
           </v-row>
@@ -96,13 +96,13 @@
           <v-row>
             <v-col cols="12">
               <result-card
-                :label="`${$t('singlePaperTubeWeight')}(${result.singlePaperTubeWeight.unit})`"
+                :label="`${$t('singlePaperTubeWeight')}`"
                 :value="result.singlePaperTubeWeight"
               />
             </v-col>
             <v-col cols="12">
               <result-card
-                :label="`${$t('totalPaperTubeWeight')}(${result.totalPaperTubeWeight.unit})`"
+                :label="`${$t('totalPaperTubeWeight')}`"
                 :value="result.totalPaperTubeWeight"
               />
             </v-col>
@@ -118,8 +118,8 @@
   import { createParam, type Param } from '@/types/param'
 
   const paperRollLength = ref<Param>(createParam(1000, 'mm'))
-  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g_per_cm3'))
-  const productionAmount = ref<Param>(createParam(1000, '支'))
+  const productionAmount = ref<Param>(createParam(1000, 'pcs'))
   const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
   const paperRollWallThickness = ref<Param>(createParam(10, 'mm'))
 
@@ -138,8 +138,8 @@
 
   const resetParameters = () => {
     paperRollLength.value = createParam(1000, 'mm')
-    paperDensity.value = createParam(0.76, 'g/cm³')
+    paperDensity.value = createParam(0.76, 'gpcm3')
-    productionAmount.value = createParam(1000, '支')
+    productionAmount.value = createParam(1000, 'pcs')
     paperCoreDiameter.value = createParam(76.2, 'mm')
     paperRollWallThickness.value = createParam(10, 'mm')
   }

src/components/ParamInputField.vue

@@ -3,9 +3,10 @@
     density="compact"
     :disabled="disabled"
     hide-details
-    :label="label"
+    hide-spin-buttons
+    :label="label + ' (' + $t(`units.${modelValue.unit}`) + ')'"
     :model-value="modelValue.value.toString()"
-    :suffix="modelValue.unit"
+    :suffix="$t(`units.${modelValue.unit}`)"
     type="number"
     variant="outlined"
     @update:model-value="handleUpdate"

src/components/ResultCard.vue

@@ -19,7 +19,7 @@
         size="large"
         variant="outlined"
       >
-        {{ value.value.toFixed(2) }} {{ value.unit }}
+        {{ value.value.toFixed(2) }} {{ $t(`units.${value.unit}`) }}
       </v-chip>
     </v-card-text>
   </v-card>

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',
+  },
+]

src/layouts/CalculatorLayout.vue

@@ -0,0 +1,577 @@
+<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-menu
+        v-model="languageMenu"
+        :close-on-content-click="true"
+        location="bottom end"
+        offset="8"
+      >
+        <template #activator="{ props }">
+          <v-btn
+            v-bind="props"
+            :icon="$vuetify.display.xs"
+            :prepend-icon="$vuetify.display.xs ? undefined : 'mdi-translate'"
+            :size="$vuetify.display.xs ? 'default' : 'large'"
+            variant="text"
+          >
+            <v-icon v-if="$vuetify.display.xs">mdi-translate</v-icon>
+            <span v-else class="text-button">{{ currentLanguage.label }}</span>
+          </v-btn>
+        </template>
+
+        <!-- <v-list
+          class="language-menu"
+          density="compact"
+          min-width="160"
+        >
+          <v-list-item
+            v-for="lang in availableLanguages"
+            :key="lang.code"
+            :activate="locale === lang.code"
+            :title="lang.label"
+            @click="changeLanguage(lang.code)"
+          >
+            <template #append>
+              <v-icon
+                v-if="locale === lang.code"
+                class="text-primary"
+                icon="mdi-check"
+              />
+            </template>
+          </v-list-item>
+        </v-list> -->
+        <div class="language-pill-container">
+          <v-chip-group
+            v-model="selectedLanguageIndex"
+            direction="vertical"
+            selected-class="text-primary"
+            @update:model-value="handleLanguageChange"
+          >
+            <v-chip
+              v-for="(lang, index) in availableLanguages"
+              :key="lang.code"
+              class="language-pill-large"
+              :color="locale === lang.code ? 'primary' : undefined"
+              label
+              rounded="xl"
+              size="large"
+              :value="index"
+              :variant="locale === lang.code ? 'flat' : 'outlined'"
+            >
+              <v-icon
+                v-if="locale === lang.code"
+                class="mr-2"
+                icon="mdi-check"
+                size="small"
+              />
+              {{ lang.label }}
+            </v-chip>
+          </v-chip-group>
+        </div>
+
+      </v-menu>
+    </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-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 languageMenu = 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,
+      }
+    })
+  })
+
+  const availableLanguages = [
+    {
+      code: 'zh',
+      label: '中文（简体）',
+    },
+    {
+      code: 'en',
+      label: 'English',
+    },
+    {
+      code: 'ru',
+      label: 'Русский(Experimental)',
+    },
+    {
+      code: 'sp',
+      label: 'Español(Experimental)',
+    },
+  ]
+  const currentLanguage = computed(() => {
+    return availableLanguages.find(lang => lang.code === locale.value) || availableLanguages[0]
+  })
+
+  const selectedLanguageIndex = computed(() => {
+    return availableLanguages.findIndex(lang => lang.code === locale.value)
+  })
+
+  function handleLanguageChange (index: number) {
+    if (index !== undefined && index >= 0 && index < availableLanguages.length) {
+      locale.value = availableLanguages[index].code
+    }
+  }
+
+  function handleSelect (_index: number) {
+    drawer.value = false // 选择后自动关闭抽屉
+  }
+
+  onMounted(() => {
+    document.title = pageTitle.value
+  })
+
+  watch(locale, () => {
+    document.title = pageTitle.value
+  })
+</script>
+
+<style scoped>
+/* AppBar响应式样式 */
+@media (max-width: 599px) {
+  .v-app-bar-title {
+    font-size: 0.875rem !important;
+    line-height: 1.2 !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100vw - 120px); /* 为导航按钮和语言按钮留出空间 */
+  }
+}
+
+@media (min-width: 600px) and (max-width: 959px) {
+  .v-app-bar-title {
+    font-size: 1rem !important;
+    line-height: 1.3 !important;
+  }
+}
+
+/* 导航抽屉响应式样式 */
+@media (max-width: 599px) {
+  .v-list-item-title {
+    font-size: 0.75rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .v-list-item-subtitle {
+    font-size: 0.625rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .v-list-item {
+    min-height: 36px !important;
+  }
+
+  /* 确保文本不会溢出 */
+  .v-list-item-title,
+  .v-list-item-subtitle {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 959px) {
+  .v-list-item-title {
+    font-size: 0.875rem !important;
+  }
+
+  .v-list-item-subtitle {
+    font-size: 0.75rem !important;
+  }
+
+  .v-app-bar-title {
+    font-size: 1rem !important;
+  }
+}
+
+/* 关于对话框响应式样式 */
+@media (max-width: 599px) {
+  .v-dialog .v-card-title {
+    font-size: 1rem !important;
+  }
+
+  .v-dialog .v-card-text {
+    font-size: 0.875rem !important;
+  }
+
+  .v-dialog .text-caption {
+    font-size: 0.75rem !important;
+  }
+}
+
+/* 移动设备上的特殊处理 */
+@media (max-width: 599px) {
+  .v-list-item.pa-4 {
+    padding: 12px 16px !important;
+  }
+
+  .v-list-item.ma-1 {
+    margin: 2px 4px !important;
+  }
+}
+
+/* 无背景的语言选择器容器 */
+.language-pill-container {
+  padding: 8px;
+  min-width: 180px;
+  max-width: 320px;
+}
+
+/* 大尺寸语言药丸样式 */
+.language-pill-large {
+  margin: 4px 0;
+  padding: 12px 20px;
+  height: 48px;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border-radius: 24px;
+  width: 100%;
+
+  /* 文本居中 */
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.language-pill-large:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* chip内容居中对齐 */
+.language-pill-large .v-chip__content {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 100% !important;
+  font-weight: 500;
+}
+
+/* 响应式药丸样式 */
+@media (max-width: 599px) {
+  .language-pill-container {
+    min-width: 160px;
+    max-width: 280px;
+    padding: 6px;
+  }
+
+  .language-pill-large {
+    margin: 2px 0;
+    padding: 8px 16px;
+    height: 40px;
+    font-size: 0.875rem;
+  }
+
+  .text-button {
+    font-size: 0.75rem !important;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 959px) {
+  .language-pill-large {
+    padding: 10px 18px;
+    height: 44px;
+    font-size: 0.9375rem;
+  }
+}
+
+/* 药丸选中状态 */
+.v-chip--variant-flat {
+  background: rgb(var(--v-theme-primary)) !important;
+  color: rgb(var(--v-theme-surface)) !important;
+  box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.1);
+}
+
+/* 药丸未选中状态 */
+.v-chip--variant-outlined {
+  border: 1px solid rgba(var(--v-theme-info), 0.3);
+  color: rgb(var(--v-theme-info));
+  background: rgba(var(--v-theme-surface), 1);
+}
+
+.v-chip--variant-outlined:hover {
+  background: rgba(var(--v-theme-info), 0.08);
+  border-color: rgba(var(--v-theme-info), 0.5);
+}
+
+/* 选中状态的图标 */
+.language-pill-large .v-icon {
+  opacity: 1;
+}
+
+/* 字体权重调整 */
+.language-pill-large .v-chip__content {
+  font-weight: 500;
+}
+
+.language-pill {
+  margin: 2px 4px;
+  transition: all 0.2s ease;
+}
+
+.language-pill:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 响应式药丸样式 */
+@media (max-width: 599px) {
+  .language-pill-menu {
+    min-width: 160px;
+    max-width: 250px;
+  }
+
+  .language-pill {
+    margin: 1px 2px;
+  }
+
+  .text-button {
+    font-size: 0.75rem !important;
+  }
+}
+</style>

src/layouts/baseline.vue

@@ -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>

src/layouts/default.vue

@@ -3,7 +3,6 @@
     <router-view />
   </v-main>
 
-  <AppFooter />
 </template>
 
 <script lang="ts" setup>

src/locale/en.json

@@ -1,17 +1,17 @@
 {
   "appTitle": "Paper Tube Production Calculator",
-  "beltSpecificationCalculate": "Belt Specification Calculate",
+  "beltSpecificationCalculate": "Belt Specification",
-  "multiLayerPaperTapeWidthAngleCalculate": "MultiLayer Paper Tape Width Angle Calculate",
+  "multiLayerPaperTapeWidthAngleCalculate": "MultiLayer Paper Tape Width & Angle",
   "paperCoreDiameter": "Paper core diameter",
   "paperDensity": "Paper density",
   "paperGrammage": "Grammage",
   "paperRollExternalDiameter": "Paper roll external diameter",
   "paperRollLength": "Paper roll length",
   "paperRollWallThickness": "Paper roll wall thickness",
-  "paperRollWeightLengthCalculate": "Paper Roll Weight Length Calculate",
+  "paperRollWeightLengthCalculate": "Paper Roll Weight Length",
-  "paperTapeWidthAngleCalculate": "Paper Tape Width Angle Calculate",
+  "paperTapeWidthAngleCalculate": "Paper Tape Width & Angle",
-  "paperTubeProductionCalculate": "Paper Tube Production Calculate",
+  "paperTubeProductionCalculate": "Paper Tube Production",
-  "paperTubeWeightCalculate": "Paper Tube Weight Calculate",
+  "paperTubeWeightCalculate": "Paper Tube Weight",
   "parameters": "Parameters",
   "productionAmount": "Production amount",
   "reset": "Reset",
@@ -42,7 +42,8 @@
   "50_120Series": "50, 120 series",
   "200_Series": "200 series",
   "600_Series": "600 series",
-  "new_200_Series": "New 200 series",
+  "PT23-120_Series": "PT23-120 series",
+  "PT23-200_Series": "PT23-200 series",
   "custom": "Customize",
   "recommendBeltLength": "Recommended belt length",
   "recommendBeltWidth": "Recommended bandwidth",
@@ -54,7 +55,6 @@
   "add": "Add",
   "layer": "Layer",
   "angle": "Angle",
-  "new_120Series": "New 120 Series",
   "cumulativeThickness": "Cumulative thickness",
   "reference": "Reference",
   "minimum": "Minimum",
@@ -62,5 +62,31 @@
   "calculatedValue": "Calculated value",
   "fit": "FIT",
   "notFit": "NOT FIT",
-  "multiLayerExcelOutputFile": "MultiLayerPaperTapeWidthAngle"
+  "multiLayerExcelOutputFile": "MultiLayerPaperTapeWidthAngle",
+  "about": "About",
+  "calculator": "Calculator",
+  "companyName": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd.",
+  "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",
+  "loading": "Loading",
+  "paperTapeWidth": "Paper tape width",
+  "units": {
+    "mm": "mm",
+    "m": "m",
+    "g_per_cm3": "g/cm³",
+    "pcs": "pcs",
+    "kg": "kg",
+    "g_per_m2": "g/m²",
+    "hz": "Hz",
+    "hour": "h",
+    "percent": "%",
+    "m_per_min": "m/min",
+    "kg_per_hour": "kg/h",
+    "pcs_per_hour": "pcs/h",
+    "kg_per_day": "kg/d",
+    "pcs_per_day": "pcs/d",
+    "degree": "°"
+  }
 }

src/locale/ru.json

@@ -0,0 +1,94 @@
+{
+  "appTitle": "Калькулятор производства бумажных трубок",
+  "beltSpecificationCalculate": "Спецификация ремня",
+  "multiLayerPaperTapeWidthAngleCalculate": "Ширина и угол многослойной бумажной ленты",
+  "paperCoreDiameter": "Диаметр бумажного сердечника",
+  "paperDensity": "Плотность бумаги",
+  "paperGrammage": "Граммаж",
+  "paperRollExternalDiameter": "Внешний диаметр бумажного рулона",
+  "paperRollLength": "Длина бумажного рулона",
+  "paperRollWallThickness": "Толщина стенки бумажного рулона",
+  "paperRollWeightLengthCalculate": "Вес и длина бумажного рулона",
+  "paperTapeWidthAngleCalculate": "Ширина и угол бумажной ленты",
+  "paperTubeProductionCalculate": "Производство бумажных трубок",
+  "paperTubeWeightCalculate": "Вес бумажной трубки",
+  "parameters": "Параметры",
+  "productionAmount": "Количество производства",
+  "reset": "Сброс",
+  "results": "Результаты",
+  "singlePaperTubeWeight": "Вес одной бумажной трубки",
+  "totalPaperTubeWeight": "Общий вес бумажных трубок",
+  "paperRollWidth": "Ширина бумажного рулона",
+  "paperThickness": "Толщина бумаги",
+  "paperRollWeight": "Вес бумажного рулона",
+  "paperLength": "Длина бумажного рулона",
+  "innerPaperWidth": "Ширина внутренней бумаги",
+  "workFrequency": "Рабочая частота",
+  "workTime": "Рабочее время",
+  "workEfficiency": "Эффективность работы",
+  "feedPaperSpeed": "Скорость подачи",
+  "outputSpeed": "Скорость выхода",
+  "productionAmountPerDay": "Дневная выработка",
+  "productionAmountPerHour": "Часовая выработка",
+  "productionWeightPerDay": "Дневная выработка по весу",
+  "productionWeightPerHour": "Часовая выработка по весу",
+  "beltAngle": "Угол ремня",
+  "paperHolderAngle": "Угол держателя бумаги",
+  "leadingLength": "Ведущая длина",
+  "paperWidth": "Ширина бумаги",
+  "machineModel": "Модель",
+  "maxWheelbase": "Максимальная колесная база",
+  "hubDiameter": "Диаметр ступицы",
+  "50_120Series": "50, 120 серии",
+  "200_Series": "200 серия",
+  "600_Series": "600 серия",
+  "PT23-120_Series": "PT23-120 серия",
+  "PT23-200_Series": "PT23-200 серия",
+  "custom": "Настроить",
+  "recommendBeltLength": "Рекомендуемая длина ремня",
+  "recommendBeltWidth": "Рекомендуемая ширина ремня",
+  "recommendBeltThickness": "Рекомендуемая толщина ремня",
+  "bottomPaperWidth": "Ширина нижней бумаги",
+  "save": "Сохранить",
+  "clear": "Очистить",
+  "remove": "Удалить",
+  "add": "Добавить",
+  "layer": "Слой",
+  "angle": "Угол",
+  "cumulativeThickness": "Накопительная толщина",
+  "reference": "Справочная информация",
+  "minimum": "Минимум",
+  "maximum": "Максимум",
+  "calculatedValue": "Расчетное значение",
+  "fit": "ПОДХОДИТ",
+  "notFit": "НЕ ПОДХОДИТ",
+  "multiLayerExcelOutputFile": "МногослойнаяШиринаУголБумажнойЛенты",
+  "about": "О программе",
+  "calculator": "Калькулятор",
+  "companyName": "Чжэцзян Цзиньшэнь Машиностроительная компания с ограниченной ответственностью",
+  "appDescription": "Вспомогательный инструмент для производства бумажных трубок, обеспечивающий расчет различных параметров: веса, размеров, углов и т.д.",
+  "allRightsReserved": "Все права защищены",
+  "close": "Закрыть",
+  "officialWebsite": "Официальный сайт",
+  "loading": "Загрузка",
+  "paperTapeWidth": "Ширина бумажной ленты",
+  "selectLanguage": "Выберите язык",
+  "units": {
+    "mm": "мм",
+    "m": "м",
+    "g_per_cm3": "г/см³",
+    "pcs": "шт.",
+    "kg": "кг",
+    "g_per_m2": "г/м²",
+    "hz": "Гц",
+    "hour": "ч",
+    "percent": "%",
+    "m_per_min": "м/мин",
+    "kg_per_hour": "кг/ч",
+    "pcs_per_hour": "шт./ч",
+    "kg_per_day": "кг/д",
+    "pcs_per_day": "шт./д",
+    "degree": "°"
+  }
+  
+}

src/locale/sp.json

@@ -0,0 +1,93 @@
+{
+  "appTitle": "Calculadora de Producción de Tubos de Papel",
+  "beltSpecificationCalculate": "Especificación de Correa",
+  "multiLayerPaperTapeWidthAngleCalculate": "Ancho y Ángulo de Cinta de Papel Multicapa",
+  "paperCoreDiameter": "Diámetro del núcleo de papel",
+  "paperDensity": "Densidad del papel",
+  "paperGrammage": "Gramaje",
+  "paperRollExternalDiameter": "Diámetro externo del rollo de papel",
+  "paperRollLength": "Longitud del rollo de papel",
+  "paperRollWallThickness": "Grosor de pared del rollo de papel",
+  "paperRollWeightLengthCalculate": "Peso y Longitud del Rollo de Papel",
+  "paperTapeWidthAngleCalculate": "Ancho y Ángulo de Cinta de Papel",
+  "paperTubeProductionCalculate": "Producción de Tubos de Papel",
+  "paperTubeWeightCalculate": "Peso del Tubo de Papel",
+  "parameters": "Parámetros",
+  "productionAmount": "Cantidad de producción",
+  "reset": "Restablecer",
+  "results": "Resultados",
+  "singlePaperTubeWeight": "Peso de un solo tubo de papel",
+  "totalPaperTubeWeight": "Peso total de tubos de papel",
+  "paperRollWidth": "Ancho del rollo de papel",
+  "paperThickness": "Grosor del papel",
+  "paperRollWeight": "Peso del rollo de papel",
+  "paperLength": "Longitud del rollo de papel",
+  "innerPaperWidth": "Ancho del papel interior",
+  "workFrequency": "Frecuencia de trabajo",
+  "workTime": "Tiempo de trabajo",
+  "workEfficiency": "Eficiencia del trabajo",
+  "feedPaperSpeed": "Velocidad de alimentación",
+  "outputSpeed": "Velocidad de salida",
+  "productionAmountPerDay": "Producción diaria",
+  "productionAmountPerHour": "Producción por hora",
+  "productionWeightPerDay": "Peso de producción diaria",
+  "productionWeightPerHour": "Peso de producción por hora",
+  "beltAngle": "Ángulo de la correa",
+  "paperHolderAngle": "Ángulo del soporte de papel",
+  "leadingLength": "Longitud de avance",
+  "paperWidth": "Ancho del papel",
+  "machineModel": "Modelo de máquina",
+  "maxWheelbase": "Distancia entre ejes máxima",
+  "hubDiameter": "Diámetro del cubo",
+  "50_120Series": "Series 50, 120",
+  "200_Series": "Serie 200",
+  "600_Series": "Serie 600",
+  "PT23-120_Series": "Serie PT23-120",
+  "PT23-200_Series": "Serie PT23-200",
+  "custom": "Personalizar",
+  "recommendBeltLength": "Longitud de correa recomendada",
+  "recommendBeltWidth": "Ancho de correa recomendado",
+  "recommendBeltThickness": "Grosor de correa recomendado",
+  "bottomPaperWidth": "Ancho del papel inferior",
+  "save": "Guardar",
+  "clear": "Limpiar",
+  "remove": "Eliminar",
+  "add": "Agregar",
+  "layer": "Capa",
+  "angle": "Ángulo",
+  "cumulativeThickness": "Grosor acumulativo",
+  "reference": "Referencia",
+  "minimum": "Mínimo",
+  "maximum": "Máximo",
+  "calculatedValue": "Valor calculado",
+  "fit": "AJUSTA",
+  "notFit": "NO AJUSTA",
+  "multiLayerExcelOutputFile": "AnchoAnguloTintaPapelMulticapa",
+  "about": "Acerca de",
+  "calculator": "Calculadora",
+  "companyName": "Zhejiang Jinshen Machinery Manufacturing Co., Ltd.",
+  "appDescription": "Herramienta auxiliar de producción de tubos de papel que proporciona cálculo de varios parámetros como peso, tamaño, ángulo, etc.",
+  "allRightsReserved": "Todos los derechos reservados",
+  "close": "Cerrar",
+  "officialWebsite": "Sitio web oficial",
+  "loading": "Cargando",
+  "paperTapeWidth": "Ancho de cinta de papel",
+  "selectLanguage": "Seleccionar idioma",
+  "units": {
+    "mm": "mm",
+    "m": "m",
+    "g_per_cm3": "g/cm³",
+    "pcs": "uds.",
+    "kg": "kg",
+    "g_per_m2": "g/m²",
+    "hz": "Hz",
+    "hour": "h",
+    "percent": "%",
+    "m_per_min": "m/min",
+    "kg_per_hour": "kg/h",
+    "pcs_per_hour": "uds./h",
+    "kg_per_day": "kg/d",
+    "pcs_per_day": "uds./d",
+    "degree": "°"
+  }
+}

src/locale/zh.json

@@ -1,5 +1,5 @@
 {
-  "appTitle": "纸管制作辅助生产工具",
+  "appTitle": "纸管生产辅助计算工具",
   "beltSpecificationCalculate": "皮带规格计算",
   "multiLayerPaperTapeWidthAngleCalculate": "多层纸带宽度角度计算",
   "paperCoreDiameter": "纸芯内径",
@@ -42,7 +42,8 @@
   "50_120Series": "50、120系列",
   "200_Series": "200系列",
   "600_Series": "600系列",
-  "new_200_Series": "新200系列",
+  "PT23-120_Series": "PT23-120系列",
+  "PT23-200_Series": "PT23-200系列",
   "custom": "自定义",
   "recommendBeltThickness": "推荐皮带厚度",
   "recommendBeltWidth": "推荐皮带宽度",
@@ -54,7 +55,6 @@
   "add": "新增",
   "layer": "层数",
   "angle": "角度",
-  "new_120Series": "新120系列",
   "cumulativeThickness": "累计厚度",
   "reference": "参考区间",
   "minimum": "最小值",
@@ -62,5 +62,31 @@
   "calculatedValue": "计算值",
   "fit": "符合",
   "notFit": "不符合",
-  "multiLayerExcelOutputFile": "多层纸带宽度角度计算"
+  "multiLayerExcelOutputFile": "多层纸带宽度角度计算",
+  "about": "关于",
+  "calculator": "计算工具",
+  "companyName": "浙江金申机械制造有限公司",
+  "appDescription": "纸管生产辅助计算工具，提供纸管重量、尺寸、角度等多种参数的计算。",
+  "allRightsReserved": "版权所有",
+  "close": "关闭",
+  "officialWebsite": "官方网站",
+  "loading": "加载中",
+  "paperTapeWidth": "纸带宽度",
+  "units": {
+    "mm": "mm",
+    "m": "m",
+    "g_per_cm3": "g/cm³",
+    "pcs": "支",
+    "kg": "kg",
+    "g_per_m2": "g/m²",
+    "hz": "Hz",
+    "hour": "小时",
+    "percent": "%",
+    "m_per_min": "m/min",
+    "kg_per_hour": "kg/h",
+    "pcs_per_hour": "pcs/h",
+    "kg_per_day": "kg/d",
+    "pcs_per_day": "pcs/d",
+    "degree": "°"
+  }
 }

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>

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>

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>

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>

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>

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>

src/pages/index.vue

@@ -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>

src/plugins/i18n.ts

@@ -1,5 +1,7 @@
 import { createI18n } from 'vue-i18n'
 import en from '@/locale/en.json'
+import ru from '@/locale/ru.json'
+import sp from '@/locale/sp.json'
 import zh from '@/locale/zh.json'
 
 export default createI18n({
@@ -9,5 +11,7 @@ export default createI18n({
   messages: {
     zh,
     en,
+    ru,
+    sp,
   },
 })

src/router/index.ts

@@ -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

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/stores/navigation.ts

@@ -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,
+  }
+})

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>>,
   }
 }

vite.config.mts

@@ -96,4 +96,5 @@ export default defineConfig({
       },
     },
   },
+  // base: process.env.NODE_ENV === 'production' ? '/calculator/' : '/',
 })