diff --git a/src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue b/src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue
index 1abb27b..1b40cc4 100644
--- a/src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue
+++ b/src/components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue
@@ -1,11 +1,222 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
+  <div class="calculator-container">
+    <v-row justify="center">
+      <!-- 参数输入区域 -->
+      <v-col
+        cols="12"
+        lg="5"
+        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">
+              <param-input-field
+                v-model="paperCoreDiameter"
+                :disabled="recordList.length > 0"
+                :label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
+              />
+            </v-col>
+            <v-col cols="12">
+              <param-input-field
+                v-model="bottomPaperWidth"
+                :disabled="recordList.length > 0"
+                :label="`${$t('bottomPaperWidth')} (${bottomPaperWidth.unit})`"
+              />
+            </v-col>
+            <v-col cols="12">
+              <param-input-field
+                v-model="paperGrammage"
+                :label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
+              />
+            </v-col>
+            <v-col cols="12">
+              <param-input-field
+                v-model="paperDensity"
+                :label="`${$t('paperDensity')} (${paperDensity.unit})`"
+              />
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-6" />
+
+          <v-row>
+            <v-col cols="12">
+              <div class="d-flex flex-column flex-sm-row justify-end align-center ga-3">
+                <!-- 次要功能按钮组 -->
+                <div class="d-flex ga-2 order-2 order-sm-1">
+                  <v-btn
+                    color="warning"
+                    size="small"
+                    variant="outlined"
+                    @click="clearAll"
+                  >
+                    <v-icon class="mr-1">mdi-refresh</v-icon>
+                    {{ $t('clear') }}
+                  </v-btn>
+                  <v-btn
+                    color="success"
+                    size="small"
+                    variant="outlined"
+                    @click="saveParams"
+                  >
+                    <v-icon class="mr-1">mdi-content-save</v-icon>
+                    {{ $t('save') }}
+                  </v-btn>
+                </div>
+
+                <!-- 主要功能按钮组 -->
+                <v-btn-group
+                  class="order-1 order-sm-2"
+                  color="primary"
+                  divided
+                  variant="elevated"
+                >
+                  <v-btn
+                    :size="$vuetify.display.xs ? 'default' : 'large'"
+                    @click="removeLayer"
+                  >
+                    <v-icon class="mr-1">mdi-minus</v-icon>
+                    {{ $t('remove') }}
+                  </v-btn>
+                  <v-btn
+                    :size="$vuetify.display.xs ? 'default' : 'large'"
+                    @click="addLayer"
+                  >
+                    <v-icon class="mr-1">mdi-plus</v-icon>
+                    {{ $t('add') }}
+                  </v-btn>
+                </v-btn-group>
+              </div>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+
+      <!-- 结果显示区域 -->
+      <v-col
+        cols="12"
+        lg="5"
+        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-calculator"
+              size="large"
+            />
+            {{ $t('results') }}
+          </v-card-title>
+
+          <v-table
+            fixed-header
+          >
+            <thead>
+              <tr>
+                <th>{{ $t('layer') }}</th>
+                <th>{{ $t('paperGrammage') }}</th>
+                <th>{{ $t('cumulative Thickness') }}</th>
+                <th>{{ $t('angle') }}</th>
+                <th>{{ $t('paperWidth') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(record, index) in recordList" :key="index">
+                <td>{{ record.layer }}</td>
+                <td>{{ record.grammage.value.toFixed(2) }} {{ record.grammage.unit }}</td>
+                <td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ record.cumulativeThickness.unit }}</td>
+                <td>{{ record.angle.value.toFixed(2) }} {{ record.angle.unit }}</td>
+                <td>{{ record.paperWidth.value.toFixed(2) }} {{ record.paperWidth.unit }}</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
-<style scoped lang="sass">
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { createParam, type Param } from '@/types/param'
+  import { degreesToRadians, radiansToDegrees } from '@/utils/angle'
 
-</style>
+  interface LayerRecord {
+    layer: number
+    grammage: Param
+    cumulativeThickness: Param
+    angle: Param
+    paperWidth: Param
+  }
+
+  const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
+  const bottomPaperWidth = ref<Param>(createParam(100, 'mm'))
+  const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
+  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
+
+  const recordList = ref<LayerRecord[]>([])
+
+  const result = computed(() => {
+    const paperRollWallThickness = paperGrammage.value.value / paperDensity.value.value / 1000
+    // eslint-disable-next-line unicorn/prefer-at
+    const paperTotalThickness = recordList.value.length === 0 ? 0 : recordList.value[recordList.value.length - 1].cumulativeThickness.value
+    const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperTotalThickness
+    const paperAngle = 90 - radiansToDegrees(Math.acos(bottomPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
+    const leadingLength = bottomPaperWidth.value.value / Math.sin(degreesToRadians(90 - paperAngle))
+    const beltAngle = 90 - radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
+    const paperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))))
+
+    return {
+      layer: recordList.value.length + 1,
+      grammage: paperGrammage.value,
+      cumulativeThickness: createParam(paperTotalThickness + paperRollWallThickness, 'mm'),
+      angle: createParam(beltAngle, '°'),
+      paperWidth: createParam(paperWidth, 'mm'),
+    }
+  })
+
+  // 按钮功能方法
+  const clearAll = () => {
+    recordList.value = []
+  }
+
+  const saveParams = () => {
+    // TODO 计算结果导出为Excel
+    console.log('SAVE')
+  }
+
+  const addLayer = () => {
+    // 添加层的逻辑
+    recordList.value.push({
+      layer: result.value.layer,
+      grammage: result.value.grammage,
+      cumulativeThickness: result.value.cumulativeThickness,
+      angle: result.value.angle,
+      paperWidth: result.value.paperWidth,
+    })
+  }
+
+  const removeLayer = () => {
+    // 移除层的逻辑
+    recordList.value.pop()
+  }
+</script>
diff --git a/src/locale/en.json b/src/locale/en.json
index 7895a10..6bd2c80 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -47,5 +47,13 @@
   "custom": "Customize",
   "recommendBeltLength": "Recommended belt length",
   "recommendBeltWidth": "Recommended bandwidth",
-  "recommendBeltThickness": "Recommended belt thickness"
+  "recommendBeltThickness": "Recommended belt thickness",
+  "bottomPaperWidth": "Bottom paper width",
+  "save": "Save",
+  "clear": "Clear",
+  "remove": "Remove",
+  "add": "Add",
+  "layer": "Layer",
+  "cumulative Thickness": "Cumulative thickness",
+  "angle": "Angle"
 }
diff --git a/src/locale/zh.json b/src/locale/zh.json
index 231893c..c87a089 100644
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -47,5 +47,13 @@
   "custom": "自定义",
   "recommendBeltThickness": "推荐皮带厚度",
   "recommendBeltWidth": "推荐皮带宽度",
-  "recommendBeltLength": "推荐皮带长度"
+  "recommendBeltLength": "推荐皮带长度",
+  "bottomPaperWidth": "底纸宽度",
+  "save": "保存",
+  "clear": "清空",
+  "remove": "移除",
+  "add": "新增",
+  "layer": "层数",
+  "cumulative Thickness": "累计厚度",
+  "angle": "角度"
 }