feat(health): 调整健康数据图表高度和输入框宽度

- 将血糖、血压、心率、身高、体重页面的canvas高度从240rpx调整为280rpx或320rpx
- 更新canvas尺寸计算逻辑以匹配新的高度设置
- 将输入框宽度从240rpx调整为150rpx以优化布局显示效果
- 确保canvas样式与微信小程序示例保持一致

src/pages/health/details/blood-glucose.vue

@@ -101,7 +101,7 @@ const pickerValue = ref(formatPickerDate(current.value))
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
-const canvasHeight = ref(240)
+const canvasHeight = ref(280)
 
 // 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
 function getCanvasSize(): Promise<{ width: number; height: number }> {
@@ -109,7 +109,7 @@ function getCanvasSize(): Promise<{ width: number; height: number }> {
     // 使用固定尺寸，参考微信小程序示例
     const windowWidth = uni.getSystemInfoSync().windowWidth;
     const width = windowWidth; // 占满屏幕宽度
-    const height = 240 / 750 * windowWidth; // 240rpx转换为px，与CSS高度匹配
+    const height = 280 / 750 * windowWidth; // 280rpx转换为px，与CSS高度匹配
     resolve({ width, height });
   });
 }
@@ -763,7 +763,7 @@ async function confirmDeleteRecord(id: string) {
 /* 关键修复：确保canvas样式正确，参考微信小程序示例 */
 .chart-canvas {
   width: 750rpx;
-  height: 240rpx;
+  height: 280rpx;
   background-color: #FFFFFF;
   display: block;
 }
@@ -895,7 +895,7 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .input { 
-  width: 240rpx; 
+  width: 150rpx; 
   text-align: right; 
   padding: 16rpx; 
   border-radius: 14rpx; 

src/pages/health/details/blood-pressure.vue

@@ -99,7 +99,7 @@ const pickerValue = ref(formatPickerDate(current.value))
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
-const canvasHeight = ref(240)
+const canvasHeight = ref(320)
 
 // 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
 function getCanvasSize(): Promise<{ width: number; height: number }> {
@@ -107,7 +107,7 @@ function getCanvasSize(): Promise<{ width: number; height: number }> {
     // 使用固定尺寸，参考微信小程序示例
     const windowWidth = uni.getSystemInfoSync().windowWidth;
     const width = windowWidth; // 占满屏幕宽度
-    const height = 240 / 750 * windowWidth; // 240rpx转换为px，与CSS高度匹配
+    const height = 320 / 750 * windowWidth; // 320rpx转换为px，与CSS高度匹配
     resolve({ width, height });
   });
 }
@@ -800,7 +800,7 @@ async function confirmDeleteRecord(id: string) {
 /* 关键修复：确保canvas样式正确，参考微信小程序示例 */
 .chart-canvas {
   width: 750rpx;
-  height: 240rpx;
+  height: 320rpx;
   background-color: #FFFFFF;
   display: block;
 }
@@ -932,7 +932,7 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .input { 
-  width: 240rpx; 
+  width: 150rpx; 
   text-align: right; 
   padding: 16rpx; 
   border-radius: 14rpx; 

src/pages/health/details/heart-rate.vue

@@ -90,7 +90,7 @@ const pickerValue = ref(formatPickerDate(current.value))
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
-const canvasHeight = ref(240)
+const canvasHeight = ref(280)
 
 // 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
 function getCanvasSize(): Promise<{ width: number; height: number }> {
@@ -98,7 +98,7 @@ function getCanvasSize(): Promise<{ width: number; height: number }> {
     // 使用固定尺寸，参考微信小程序示例
     const windowWidth = uni.getSystemInfoSync().windowWidth;
     const width = windowWidth; // 占满屏幕宽度
-    const height = 240 / 750 * windowWidth; // 240rpx转换为px，与CSS高度匹配
+    const height = 280 / 750 * windowWidth; // 280rpx转换为px，与CSS高度匹配
     resolve({ width, height });
   });
 }
@@ -754,7 +754,7 @@ async function confirmDeleteRecord(id: string) {
 /* 关键修复：确保canvas样式正确，参考微信小程序示例 */
 .chart-canvas {
   width: 750rpx;
-  height: 240rpx;
+  height: 280rpx;
   background-color: #FFFFFF;
   display: block;
 }
@@ -886,7 +886,7 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .input { 
-  width: 240rpx; 
+  width: 150rpx; 
   text-align: right; 
   padding: 16rpx; 
   border-radius: 14rpx; 

src/pages/health/details/height.vue

@@ -91,7 +91,7 @@ const pickerValue = ref(formatPickerDate(current.value))
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
-const canvasHeight = ref(240)
+const canvasHeight = ref(280)
 
 // 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
 function getCanvasSize(): Promise<{ width: number; height: number }> {
@@ -99,7 +99,7 @@ function getCanvasSize(): Promise<{ width: number; height: number }> {
     // 使用固定尺寸，参考微信小程序示例
     const windowWidth = uni.getSystemInfoSync().windowWidth;
     const width = windowWidth; // 占满屏幕宽度
-    const height = 240 / 750 * windowWidth; // 240rpx转换为px，与CSS高度匹配
+    const height = 280 / 750 * windowWidth; // 280rpx转换为px，与CSS高度匹配
     resolve({ width, height });
   });
 }
@@ -755,7 +755,7 @@ async function confirmDeleteRecord(id: string) {
 /* 关键修复：确保canvas样式正确，参考微信小程序示例 */
 .chart-canvas {
   width: 750rpx;
-  height: 240rpx;
+  height: 280rpx;
   background-color: #FFFFFF;
   display: block;
 }
@@ -887,7 +887,7 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .input { 
-  width: 240rpx; 
+  width: 150rpx; 
   text-align: right; 
   padding: 16rpx; 
   border-radius: 14rpx; 

src/pages/health/details/weight.vue

@@ -89,7 +89,7 @@ const pickerValue = ref(formatPickerDate(current.value))
 
 // 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
 const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
-const canvasHeight = ref(240)
+const canvasHeight = ref(280)
 
 // 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
 function getCanvasSize(): Promise<{ width: number; height: number }> {
@@ -97,7 +97,7 @@ function getCanvasSize(): Promise<{ width: number; height: number }> {
     // 使用固定尺寸，参考微信小程序示例
     const windowWidth = uni.getSystemInfoSync().windowWidth;
     const width = windowWidth; // 占满屏幕宽度
-    const height = 240 / 750 * windowWidth; // 240rpx转换为px，与CSS高度匹配
+    const height = 280 / 750 * windowWidth; // 280rpx转换为px，与CSS高度匹配
     resolve({ width, height });
   });
 }
@@ -753,7 +753,7 @@ async function confirmDeleteRecord(id: string) {
 /* 关键修复：确保canvas样式正确，参考微信小程序示例 */
 .chart-canvas {
   width: 750rpx;
-  height: 240rpx;
+  height: 280rpx;
   background-color: #FFFFFF;
   display: block;
 }
@@ -886,7 +886,7 @@ async function confirmDeleteRecord(id: string) {
 }
 
 .input { 
-  width: 240rpx; 
+  width: 150rpx; 
   text-align: right; 
   padding: 16rpx; 
   border-radius: 14rpx;