From 1b9de2ad38c3e2d4b4a520ec5f311ad21cc13e99 Mon Sep 17 00:00:00 2001 From: huanshuo-W <15258427350@163.com> Date: Tue, 8 Jul 2025 11:12:07 +0800 Subject: [PATCH] =?UTF-8?q?Feature:=20=E7=BA=B8=E7=AE=A1=E9=87=8D=E9=87=8F?= =?UTF-8?q?=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components.d.ts | 1 + .../Modules/PaperTubeWeightCalculate.vue | 142 +++++++++++++++++- src/components/ParamInputField.vue | 2 +- src/components/ResultCard.vue | 38 +++++ src/locale/en.json | 16 +- src/locale/zh.json | 15 +- src/styles/custom.css | 113 +++++++++++++- 7 files changed, 315 insertions(+), 12 deletions(-) create mode 100644 src/components/ResultCard.vue diff --git a/src/components.d.ts b/src/components.d.ts index 1353342..07a4466 100644 --- a/src/components.d.ts +++ b/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'] } diff --git a/src/components/Modules/PaperTubeWeightCalculate.vue b/src/components/Modules/PaperTubeWeightCalculate.vue index 1abb27b..dd06b8c 100644 --- a/src/components/Modules/PaperTubeWeightCalculate.vue +++ b/src/components/Modules/PaperTubeWeightCalculate.vue @@ -1,11 +1,141 @@ - - - + const paperRollLength = ref(createParam(1000, 'mm')) + const paperDensity = ref(createParam(0.76, 'g/cm³')) + const productionAmount = ref(createParam(1000, '支')) + const paperCoreDiameter = ref(createParam(76.2, 'mm')) + const paperRollWallThickness = ref(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') + }) + diff --git a/src/components/ParamInputField.vue b/src/components/ParamInputField.vue index 3663035..0a3cd65 100644 --- a/src/components/ParamInputField.vue +++ b/src/components/ParamInputField.vue @@ -1,5 +1,5 @@ + + diff --git a/src/locale/en.json b/src/locale/en.json index ab9c4ab..9a7bd45 100644 --- a/src/locale/en.json +++ b/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" } \ No newline at end of file diff --git a/src/locale/zh.json b/src/locale/zh.json index 6b18e7d..36df641 100644 --- a/src/locale/zh.json +++ b/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": "重置" } \ No newline at end of file diff --git a/src/styles/custom.css b/src/styles/custom.css index 91305d6..dba19cb 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -22,4 +22,115 @@ html, body { ::-webkit-scrollbar { display: none; -} \ No newline at end of file +} + +/* 自定义样式 */ +.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; + } +}