jinshen_calculator/src/App.vue

<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/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 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 // 选择后自动关闭抽屉
  }
</script>