Fix: 优化代码结构

.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/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,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>

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

@@ -62,5 +62,12 @@
   "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"
 }

src/locale/zh.json

@@ -62,5 +62,12 @@
   "calculatedValue": "计算值",
   "fit": "符合",
   "notFit": "不符合",
-  "multiLayerExcelOutputFile": "多层纸带宽度角度计算"
+  "multiLayerExcelOutputFile": "多层纸带宽度角度计算",
+  "about": "关于",
+  "calculator": "计算工具",
+  "companyName": "浙江金申机械制造有限公司",
+  "appDescription": "纸管制作辅助生产工具，提供纸管重量、尺寸、角度等多种参数的计算。",
+  "allRightsReserved": "版权所有",
+  "close": "关闭",
+  "officialWebsite": "官方网站"
 }

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

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/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/' : '/',
 })