From 6a214b37967f95254eabffba95c57e43445bad07 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Mon, 1 Dec 2025 15:30:40 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BA=B8=E7=AE=A1=E9=87=8D=E9=87=8F?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将结果由卡片式调整为列表式
---
 src/components.d.ts                           |  4 +-
 src/components/InputParamSection.vue          | 20 ++++++
 .../Modules/PaperTubeWeightCalculate.vue      | 64 ++++++++++++++-----
 src/components/ResultSection.vue              | 21 ++++++
 src/plugins/vuetify.ts                        |  5 ++
 5 files changed, 98 insertions(+), 16 deletions(-)
 create mode 100644 src/components/InputParamSection.vue
 create mode 100644 src/components/ResultSection.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index e55f69c..133d2d1 100644
--- a/src/components.d.ts
+++ b/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']
   }
 }
diff --git a/src/components/InputParamSection.vue b/src/components/InputParamSection.vue
new file mode 100644
index 0000000..13c5205
--- /dev/null
+++ b/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>
diff --git a/src/components/Modules/PaperTubeWeightCalculate.vue b/src/components/Modules/PaperTubeWeightCalculate.vue
index 833fa2f..9c4e484 100644
--- a/src/components/Modules/PaperTubeWeightCalculate.vue
+++ b/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')
diff --git a/src/components/ResultSection.vue b/src/components/ResultSection.vue
new file mode 100644
index 0000000..e965a06
--- /dev/null
+++ b/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>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 679f22e..9721582 100644
--- a/src/plugins/vuetify.ts
+++ b/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,
     },