Feature: 添加基于Drone的CI/CD配置

src/App.vue

@@ -1,8 +1,211 @@
 <template>
   <v-app>
-    <router-view />
+    <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"
+    >
+      <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

@@ -0,0 +1,6 @@
+<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,7 +8,9 @@ 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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,90 @@
+<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

@@ -1,33 +0,0 @@
-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

@@ -1,274 +0,0 @@
-<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

@@ -0,0 +1,33 @@
+<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,6 +3,7 @@
     <router-view />
   </v-main>
 
+  <AppFooter />
 </template>
 
 <script lang="ts" setup>

src/locale/en.json

@@ -62,12 +62,5 @@
   "calculatedValue": "Calculated value",
   "fit": "FIT",
   "notFit": "NOT FIT",
-  "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"
+  "multiLayerExcelOutputFile": "MultiLayerPaperTapeWidthAngle"
 }

src/locale/zh.json

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

src/pages/calculators/belt-specification.vue

@@ -1,13 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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,15 +1,6 @@
 <template>
-  <div>Redirecting...</div>
+   <HelloWorld />
 </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

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

src/typed-router.d.ts

@@ -19,11 +19,5 @@ 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,5 +96,5 @@ export default defineConfig({
       },
     },
   },
-  // base: process.env.NODE_ENV === 'production' ? '/calculator/' : '/',
+  base: process.env.NODE_ENV === 'production' ? '/calculator-dev/' : '/',
 })