Feature: 纸管重量计算

src/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     PaperTubeProductionCalculate: typeof import('./components/Modules/PaperTubeProductionCalculate.vue')['default']
     PaperTubeWeightCalculate: typeof import('./components/Modules/PaperTubeWeightCalculate.vue')['default']
     ParamInputField: typeof import('./components/ParamInputField.vue')['default']
+    ResultCard: typeof import('./components/ResultCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/Modules/PaperTubeWeightCalculate.vue

@@ -1,11 +1,141 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
+  <div class="calculator-container">
+    <v-row>
+      <!-- 参数输入区域 -->
+      <v-col
+        cols="12"
+        lg="6"
+        md="6"
+      >
+        <v-card
+          class="pa-6 parameter-card"
+          elevation="8"
+          rounded="xl"
+        >
+          <v-card-title class="text-h5 mb-6 d-flex align-center">
+            <v-icon
+              class="mr-3"
+              color="primary"
+              icon="mdi-tune"
+              size="large"
+            />
+            {{ $t('parameters') }}
+          </v-card-title>
 
+          <v-row>
+            <v-col cols="12">
+              <ParamInputField
+                v-model="paperRollLength"
+                :label="`${$t('paperRollLength')}(${paperRollLength.unit})`"
+              />
+            </v-col>
+            <v-col cols="12">
+              <ParamInputField
+                v-model="paperDensity"
+                :label="`${$t('paperDensity')}(${paperDensity.unit})`"
+              />
+            </v-col>
+
+            <v-col cols="12">
+              <ParamInputField
+                v-model="productionAmount"
+                :label="`${$t('productionAmount')}(${productionAmount.unit})`"
+              />
+            </v-col>
+
+            <v-col cols="12">
+              <ParamInputField
+                v-model="paperCoreDiameter"
+                :label="`${$t('paperCoreDiameter')}(${paperCoreDiameter.unit})`"
+              />
+            </v-col>
+
+            <v-col cols="12">
+              <ParamInputField
+                v-model="paperRollWallThickness"
+                :label="`${$t('paperRollWallThickness')}(${paperRollWallThickness.unit})`"
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-6" />
+
+          <v-row>
+            <v-btn
+              block
+              color="warning"
+              prepend-icon="mdi-refresh"
+              size="large"
+              variant="outlined"
+            >
+              {{ $t('reset') }}
+            </v-btn>
+          </v-row>
+        </v-card>
+      </v-col>
+
+      <!-- 计算结果区域 -->
+      <v-col
+        cols="12"
+        lg="6"
+        md="6"
+      >
+        <v-card
+          class="pa-6 result-card"
+          elevation="8"
+          rounded="xl"
+        >
+          <v-card-title class="text-h5 mb-6 d-flex align-center">
+            <v-icon
+              class="mr-3"
+              color="primary"
+              icon="mdi-tune"
+              size="large"
+            />
+            {{ $t('results') }}
+          </v-card-title>
+
+          <v-row>
+            <v-col cols="12">
+              <ResultCard
+                :label="`${$t('singlePaperTubeWeight')}(${singlePaperTubeWeight.unit})`"
+                :value="singlePaperTubeWeight"
+              />
+            </v-col>
+            <v-col cols="12">
+              <ResultCard
+                :label="`${$t('totalPaperTubeWeight')}(${totalPaperTubeWeight.unit})`"
+                :value="totalPaperTubeWeight"
+              />
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
-<style scoped lang="sass">
+<script setup lang="ts">
+  import ParamInputField from '@/components/ParamInputField.vue'
+  import { createParam, type Param } from '@/types/param'
 
-</style>
+  const paperRollLength = ref<Param>(createParam(1000, 'mm'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+  const productionAmount = ref<Param>(createParam(1000, '支'))
+  const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
+  const paperRollWallThickness = ref<Param>(createParam(10, 'mm'))
+
+  const singlePaperTubeWeight = computed(() => {
+    const paperCoreRadius = paperCoreDiameter.value.value / 2
+    const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperRollWallThickness.value.value
+    const paperRollExternalRadius = paperRollExternalDiameter / 2
+    const paperRollVolume = paperRollLength.value.value * Math.PI * (Math.pow(paperRollExternalRadius, 2) - Math.pow(paperCoreRadius, 2))
+    const weight = paperRollVolume * paperDensity.value.value / 1_000_000
+    return createParam(weight, 'kg')
+  })
+
+  const totalPaperTubeWeight = computed(() => {
+    const weight = singlePaperTubeWeight.value.value * productionAmount.value.value
+    return createParam(weight, 'kg')
+  })
+</script>

src/components/ParamInputField.vue

@@ -1,5 +1,5 @@
 <template>
-<v-text-field
+  <v-text-field
     density="compact"
     hide-details
     :label="label"

src/components/ResultCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card
+    class="mb-4"
+    elevation="3"
+    rounded="lg"
+  >
+    <v-card-title class="bg-primary from-primary to-secondary text-white">
+      <v-icon
+        class="mr-2"
+        icon="mdi-calculator-variant"
+      />
+      {{ label }}
+    </v-card-title>
+    <v-card-text class="text-h5 py-6 text-center">
+      <v-chip
+        class="text-h6 pa-4"
+        color="primary"
+        label
+        size="large"
+        variant="outlined"
+      >
+        {{ value.value.toFixed(4) }} {{ value.unit }}
+      </v-chip>
+    </v-card-text>
+  </v-card>
+
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  interface Props {
+    label: string
+    value: Param
+  }
+
+  defineProps<Props>()
+</script>

src/locale/en.json

@@ -1,11 +1,23 @@
 {
   "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"
+
+  "parameters": "Parameters",
+  "results": "Results",
+
+  "paperRollLength": "Paper Roll Length",
+  "paperDensity": "Paper Density",
+  "productionAmount": "Production Amount",
+  "paperCoreDiameter": "Paper Core Diameter",
+  "paperRollWallThickness": "Paper Roll Wall Thickness",
+  "singlePaperTubeWeight": "Single Paper Tube Weight",
+  "totalPaperTubeWeight": "Total Paper Tube Weight",
+
+  "reset": "Reset"
 }

src/locale/zh.json

@@ -1,11 +1,22 @@
 {
   "appTitle": "纸管制作辅助生产工具",
   "beltSpecificationCalculate": "皮带规格计算",
-  "hello": "你好",
   "multiLayerPaperTapeWidthAngleCalculate": "多层纸带宽度角度计算",
   "paperRollWeightLengthCalculate": "纸卷重量长度计算",
   "paperTapeWidthAngleCalculate": "纸带宽度角度计算",
   "paperTubeProductionCalculate": "纸管产能计算",
   "paperTubeWeightCalculate": "纸管重量计算",
-  "welcome": "欢迎来到我的应用程序"
+
+  "parameters": "参数",
+  "results": "结果",
+
+  "paperRollLength": "纸卷长度",
+  "paperDensity": "纸张密度",
+  "productionAmount": "生产数量",
+  "paperCoreDiameter": "纸芯内径",
+  "paperRollWallThickness": "纸卷壁厚",
+  "singlePaperTubeWeight": "单个纸管重量",
+  "totalPaperTubeWeight": "总纸管重量",
+
+  "reset": "重置"
 }

src/styles/custom.css

@@ -23,3 +23,114 @@ html, body {
 ::-webkit-scrollbar {
   display: none;
 }
+
+/* 自定义样式 */
+.bg-gradient-to-r {
+  background: linear-gradient(90deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%);
+}
+
+.gb-primary {
+  background-color: rgb(var(--v-theme-primary)) !important;
+}
+
+.v-card--rounded-lg {
+  border-radius: 16px !important;
+}
+
+.v-btn--elevated {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.v-btn:hover {
+  transform: translateY(-1px);
+  transition: transform 0.2s ease-in-out;
+}
+
+.v-main {
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.calculator-container {
+  max-width: 1400px;
+  margin: 0 16px 16px 16px;
+}
+
+.parameter-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.result-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+/* 确保导航栏文字完整显示 */
+.v-list-item-title {
+  white-space: nowrap !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
+  line-height: 1.2 !important;
+}
+
+/* 导航栏项目间距优化 */
+.v-navigation-drawer .v-list-item {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+  min-height: 48px !important;
+}
+
+/* 导航栏图标和文字对齐 */
+.v-navigation-drawer .v-list-item__prepend {
+  margin-right: 12px !important;
+}
+
+/* 响应式导航栏标题 */
+.v-navigation-drawer .v-list-item-title {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}
+
+/* 导航栏头部样式优化 */
+.v-navigation-drawer .v-list-item.pa-4 .v-list-item-title {
+  font-size: 1.25rem !important;
+  font-weight: 600 !important;
+}
+
+.v-navigation-drawer .v-list-item.pa-4 .v-list-item-subtitle {
+  font-size: 0.75rem !important;
+  opacity: 0.7;
+}
+
+/* 响应式导航栏宽度 */
+@media (max-width: 960px) {
+  .drawer-transition {
+    max-width: 280px !important;
+  }
+  
+  .v-navigation-drawer .v-list-item-title {
+    font-size: 0.8rem !important;
+    line-height: 1.1 !important;
+  }
+}
+
+@media (max-width: 600px) {
+  .v-navigation-drawer .v-list-item-title {
+    font-size: 0.75rem !important;
+    line-height: 1.0 !important;
+  }
+  
+  .v-navigation-drawer .v-list-item {
+    min-height: 44px !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+}