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>