style: 纸管重量计算页面布局调整

- 将结果由卡片式调整为列表式

src/components.d.ts

@@ -9,7 +9,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BeltSpecificationCalculate: typeof import('./components/Modules/BeltSpecificationCalculate.vue')['default']
+    CalculateResult: typeof import('./components/CalculateResult.vue')['default']
     FourLayerPaperStrawCalculate: typeof import('./components/Modules/FourLayerPaperStrawCalculate.vue')['default']
+    InputParamSection: typeof import('./components/InputParamSection.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']
@@ -17,9 +19,9 @@ declare module 'vue' {
     PaperTubeWeightCalculate: typeof import('./components/Modules/PaperTubeWeightCalculate.vue')['default']
     ParamInputField: typeof import('./components/ParamInputField.vue')['default']
     ResultCard: typeof import('./components/ResultCard.vue')['default']
+    ResultSection: typeof import('./components/ResultSection.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ThreeeLayerPaperStrawCalculate: typeof import('./components/Modules/threeeLayerPaperStrawCalculate.vue')['default']
     ThreeLayerPaperStrawCalculate: typeof import('./components/Modules/ThreeLayerPaperStrawCalculate.vue')['default']
   }
 }

src/components/InputParamSection.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-list-item>
+    <v-list-item-title class="text-h6 text-primary">
+      {{ value.value.toFixed(fixed ?? 2) }} {{ $t(`units.${value.unit}`) }}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      {{ label }}
+    </v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  defineProps<{
+    label: string
+    value: Param
+    fixed?: number
+  }>()
+</script>

src/components/Modules/PaperTubeWeightCalculate.vue

@@ -93,21 +93,55 @@
             {{ $t('results') }}
           </v-card-title>
 
-          <v-row>
-            <v-col cols="12">
-              <result-card
-                :label="`${$t('singlePaperTubeWeight')}`"
-                :value="result.singlePaperTubeWeight"
-              />
-            </v-col>
-            <v-col cols="12">
-              <result-card
-                :label="`${$t('totalPaperTubeWeight')}`"
-                :value="result.totalPaperTubeWeight"
-              />
-            </v-col>
-          </v-row>
+          <v-list lines="two">
+            <result-section :label="$t('singlePaperTubeWeight')" :value="result.singlePaperTubeWeight" />
+            <result-section :label="$t('totalPaperTubeWeight')" :value="result.totalPaperTubeWeight" />
+          </v-list>
+
+          <v-expansion-panels flat multiple>
+            <v-expansion-panel hide-actions>
+              <v-expansion-panel-title class="text-warning font-weight-bold">
+                <template #default="{ expanded }">
+                  <span>
+                    <v-icon icon="mdi-information-outline" />
+                    {{ expanded ? $t('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollLength')" :value="paperRollLength" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section
+                      :label="$t('paperDensity')"
+                      :value="paperDensity"
+                    />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section
+                      :fixed="0"
+                      :label="$t('productionAmount')"
+                      :value="productionAmount"
+                    />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
+                  </v-col>
+                </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </v-card>
+
       </v-col>
     </v-row>
   </div>
@@ -138,7 +172,7 @@
 
   const resetParameters = () => {
     paperRollLength.value = createParam(1000, 'mm')
-    paperDensity.value = createParam(0.76, 'gpcm3')
+    paperDensity.value = createParam(0.76, 'g_per_cm3')
     productionAmount.value = createParam(1000, 'pcs')
     paperCoreDiameter.value = createParam(76.2, 'mm')
     paperRollWallThickness.value = createParam(10, 'mm')

src/components/ResultSection.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-list-item>
+      <v-list-item-title class="text-h4 text-primary font-weight-bold">
+        {{ value.value.toFixed(2) }} {{ $t(`units.${value.unit}`) }}
+      </v-list-item-title>
+      <v-list-item-subtitle>
+        {{ label }}
+      </v-list-item-subtitle>
+    </v-list-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  defineProps<{
+    label: string
+    value: Param
+  }>()
+</script>

src/plugins/vuetify.ts

@@ -30,6 +30,11 @@ const jinshenLightTheme: ThemeDefinition = {
 export default createVuetify({
   theme: {
     defaultTheme: 'light',
+    variations: {
+      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+      lighten: 5,
+      darken: 5,
+    },
     themes: {
       light: jinshenLightTheme,
     },