Feature: 创建项目 & 导航栏动画 & i18n国际化支持

src/App.vue

@@ -0,0 +1,198 @@
+<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"
+    >
+      <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/BeltSpecificationCalculate.vue'
+  import MultiLayerPaperTapeWidthAngleCalculate from '@/components/MultiLayerPaperTapeWidthAngleCalculate.vue'
+  import PaperRollWeightLengthCalculate from '@/components/PaperRollWeightLengthCalculate.vue'
+  import PaperTapeWidthAngleCalculate from '@/components/PaperTapeWidthAngleCalculate.vue'
+  import PaperTubeProductionCalculate from '@/components/PaperTubeProductionCalculate.vue'
+  import PaperTubeWeightCalculate from '@/components/PaperTubeWeightCalculate.vue'
+
+  const { t, locale } = useI18n()
+
+  const drawer = ref(true)
+  const selectedIndex = ref(0)
+  const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth)
+
+  // 监听窗口变化
+  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('beltSpecificationCalculate'),
+        component: 'BeltSpecificationCalculate',
+      },
+      {
+        title: t('multiLayerPaperTapeWidthAngleCalculate'),
+        component: 'MultiLayerPaperTapeWidthAngleCalculate',
+      },
+      {
+        title: t('paperRollWeightLengthCalculate'),
+        component: 'PaperRollWeightLengthCalculate',
+      },
+      {
+        title: t('paperTapeWidthAngleCalculate'),
+        component: 'PaperTapeWidthAngleCalculate',
+      },
+      {
+        title: t('paperTubeProductionCalculate'),
+        component: 'PaperTubeProductionCalculate',
+      },
+      {
+        title: t('paperTubeWeightCalculate'),
+        component: 'PaperTubeWeightCalculate',
+      },
+    ]
+  })
+
+  const components = {
+    BeltSpecificationCalculate,
+    MultiLayerPaperTapeWidthAngleCalculate,
+    PaperRollWeightLengthCalculate,
+    PaperTapeWidthAngleCalculate,
+    PaperTubeProductionCalculate,
+    PaperTubeWeightCalculate,
+  }
+
+  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 // 选择后自动关闭抽屉
+  }
+</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/auto-imports.d.ts

@@ -0,0 +1,147 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
+
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+  }
+}

src/components.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppFooter: typeof import('./components/AppFooter.vue')['default']
+    BeltSpecificationCalculate: typeof import('./components/BeltSpecificationCalculate.vue')['default']
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    MultiLayerPaperTapeWidthAngleCalculate: typeof import('./components/MultiLayerPaperTapeWidthAngleCalculate.vue')['default']
+    PaperRollWeightLengthCalculate: typeof import('./components/PaperRollWeightLengthCalculate.vue')['default']
+    PaperTapeWidthAngleCalculate: typeof import('./components/PaperTapeWidthAngleCalculate.vue')['default']
+    PaperTubeProductionCalculate: typeof import('./components/PaperTubeProductionCalculate.vue')['default']
+    PaperTubeWeightCalculate: typeof import('./components/PaperTubeWeightCalculate.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

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/BeltSpecificationCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<h1>test</h1>
+</template>
+
+<style scoped lang="sass">
+
+</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/components/MultiLayerPaperTapeWidthAngleCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/components/PaperRollWeightLengthCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/components/PaperTapeWidthAngleCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/components/PaperTubeProductionCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/components/PaperTubeWeightCalculate.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

src/layouts/README.md

@@ -0,0 +1,5 @@
+# Layouts
+
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts-next](https://github.com/loicduong/vite-plugin-vue-layouts-next) repository.

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(null)
+
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'BaselineLayout',
+    data () {
+      return {
+        drawer: null,
+      }
+    },
+  }
+</script>

src/layouts/default.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+
+  <AppFooter />
+</template>
+
+<script lang="ts" setup>
+  //
+</script>

src/locale/en.json

@@ -0,0 +1,11 @@
+{
+  "appTitle": "Paper Tube Production Calculator",
+  "beltSpecificationCalculate": "Belt Specification Calculate",
+  "hello": "Hello",
+  "multiLayerPaperTapeWidthAngleCalculate": "MultiLayer Paper Tape Width Angle Calculate",
+  "paperRollWeightLengthCalculate": "Paper Roll Weight Length Calculate",
+  "paperTapeWidthAngleCalculate": "Paper Tape Width Angle Calculate",
+  "paperTubeProductionCalculate": "Paper Tube Production Calculate",
+  "paperTubeWeightCalculate": "Paper Tube Weight Calculate",
+  "welcome": "Welcome to our application"
+}

src/locale/zh.json

@@ -0,0 +1,11 @@
+{
+  "appTitle": "纸管制作辅助生产工具",
+  "beltSpecificationCalculate": "皮带规格计算",
+  "hello": "你好",
+  "multiLayerPaperTapeWidthAngleCalculate": "多层纸带宽度角度计算",
+  "paperRollWeightLengthCalculate": "纸卷重量长度计算",
+  "paperTapeWidthAngleCalculate": "纸带宽度角度计算",
+  "paperTubeProductionCalculate": "纸管产能计算",
+  "paperTubeWeightCalculate": "纸管重量计算",
+  "welcome": "欢迎来到我的应用程序"
+}

src/main.ts

@@ -0,0 +1,24 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Styles
+import 'unfonts.css'
+import '@/styles/custom.css'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

src/pages/README.md

@@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigatable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.

src/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+   <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+</script>

src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

src/plugins/i18n.ts

@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n'
+import en from '@/locale/en.json'
+import zh from '@/locale/zh.json'
+
+export default createI18n({
+  legacy: false,
+  locale: 'zh',
+  fallbackLocale: 'en',
+  messages: {
+    zh,
+    en,
+  },
+})

src/plugins/index.ts

@@ -0,0 +1,22 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+import router from '../router'
+import pinia from '../stores'
+
+// Plugins
+import i18n from './i18n'
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(i18n)
+    .use(pinia)
+}

src/plugins/vuetify.ts

@@ -0,0 +1,37 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify, type ThemeDefinition } from 'vuetify'
+import { md3 } from 'vuetify/blueprints'
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+const jinshenLightTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF', // White
+    primary: '#1976D2', // Blue
+    secondary: '#424242', // Grey
+    error: '#FF5252', // Red
+    info: '#2196F3', // Light Blue
+    success: '#4CAF50', // Green
+    warning: '#FB8C00', // Orange
+  },
+}
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: jinshenLightTheme,
+    },
+  },
+  blueprint: md3,
+})

src/router/index.ts

@@ -0,0 +1,36 @@
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
+
+import { setupLayouts } from 'virtual:generated-layouts'
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: setupLayouts(routes),
+})
+
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (localStorage.getItem('vuetify:dynamic-reload')) {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    } else {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
+})
+
+export default router

src/stores/README.md

@@ -0,0 +1,5 @@
+# Store
+
+Pinia stores are used to store reactive state and expose actions to mutate it.
+
+Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.

src/stores/app.ts

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

src/stores/index.ts

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

src/styles/custom.css

@@ -0,0 +1,17 @@
+.app-bar-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.app-bar-pill {
+  border-radius: 50px !important;
+  margin: 16px 16px;
+  width: calc(100% - 32px) !important;
+  transform: translateX(0);
+}
+
+.app-bar-rect {
+  border-radius: 0 !important;
+  margin: 0;
+  width: 100% !important;
+  transform: translateX(0);
+}

src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

src/typed-router.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+  }
+}