style(height): 调整样式和布局以提高可读性

- 修改刻度尺组件高度从 520rpx 为 420rpx
- 格式化 canvas 元素属性换行显示
- 更新注释内容并调整缩进对齐
- 格式化 JavaScript 中日期格式化函数空格
- 重新组织 CSS 样式代码块增加可读性
- 为按钮添加宽度和底部边距样式

src/components/scale-ruler.vue

@@ -131,7 +131,7 @@ function onTouchEnd() {
 <style scoped>
 .ruler-wrapper {
   position: relative;
-  height: 520rpx;
+  height: 420rpx;
   display: flex;
   align-items: flex-start;
 }

src/pages/health/height.vue

@@ -13,12 +13,13 @@
     <!-- 趋势图：放在月份选择下面 -->
     <view class="chart-wrap">
       <view class="chart-header">本月趋势</view>
-  <canvas ref="chartCanvas" id="chartCanvas" canvas-id="heightChart" class="chart-canvas" width="340" height="120"></canvas>
+      <canvas ref="chartCanvas" id="chartCanvas" canvas-id="heightChart" class="chart-canvas" width="340"
+        height="120"></canvas>
     </view>
 
-  <!-- 刻度尺控制（已移入添加模态） -->
+    <!-- 刻度尺控制（已移入添加模态） -->
 
-  <view class="content">
+    <view class="content">
       <view class="summary">共 {{ records.length }} 条记录，本月平均：{{ averageHeight }} cm</view>
 
       <view class="list">
@@ -53,7 +54,8 @@
 
         <!-- 刻度尺：用于在添加时调整身高 -->
         <view style="margin:12rpx 0">
-          <ScaleRuler v-if="showAdd" :min="120" :max="220" :step="1" :gutter="16" :initialValue="addHeight ?? 170" @change="onAddRulerChange" @update:value="onAddRulerUpdate" />
+          <ScaleRuler v-if="showAdd" :min="120" :max="220" :step="1" :gutter="16" :initialValue="addHeight ?? 170"
+            @change="onAddRulerChange" @update:value="onAddRulerUpdate" />
         </view>
 
         <view class="modal-actions">
@@ -109,7 +111,7 @@ function generateMockRecords(d: Date): RecordItem[] {
 }
 
 function formatDisplayDate(d: Date) {
-  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
 
 const averageHeight = computed(() => {
@@ -512,33 +514,184 @@ function confirmAdd() {
 </script>
 
 <style scoped>
-.page { min-height: calc(100vh); padding-top: calc(var(--status-bar-height) + 44px); background: #f5f6f8; box-sizing: border-box }
-.header { padding: 20rpx 40rpx }
-.month-selector { display:flex; align-items:center; justify-content:center; gap:12rpx }
-.month-label { font-size: 34rpx; color:#333 }
-.btn { background:transparent; border:none; font-size:36rpx; color:#666 }
-.content { padding: 20rpx 24rpx 100rpx 24rpx }
-.chart-wrap { padding: 12rpx 24rpx }
-.chart-header { font-size: 28rpx; color: #666; margin-bottom: 10rpx }
-.chart-svg { width: 100%; height: 160rpx; display: block }
-.summary { padding: 20rpx; color:#666; font-size:28rpx }
-.list { background:#fff; border-radius:12rpx; padding: 10rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03) }
-.empty { padding:40rpx; text-align:center; color:#999 }
-.list-item { display:flex; justify-content:space-between; padding:20rpx; border-bottom:1rpx solid #f0f0f0 }
-.list-item .date { color:#666 }
-.list-item .value { color:#333; font-weight:600 }
-
-.fab { position: fixed; right: 28rpx; bottom: 160rpx; width: 110rpx; height: 110rpx; border-radius: 999px; background: linear-gradient(180deg,#ff7a00,#ff4a00); display:flex; align-items:center; justify-content:center; box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.2); z-index: 1200 }
-.fab-inner { color:#fff; font-size:56rpx; line-height:56rpx }
-
-.modal { position: fixed; left:0; right:0; top:0; bottom:0; display:flex; align-items:flex-end; justify-content:center; z-index: 1300 }
-.modal-backdrop { position:absolute; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.4) }
-.modal-panel { position:relative; width:100%; background:#fff; border-top-left-radius:18rpx; border-top-right-radius:18rpx; padding:30rpx }
-.modal-title { font-size:34rpx; margin-bottom:20rpx }
-.form-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18rpx }
-.input { width:260rpx; text-align:right; padding:8rpx; border-radius:8rpx; border:1rpx solid #eee }
-.picker-display { color:#333 }
-.modal-actions { display:flex; justify-content:flex-end; gap:12rpx }
-.btn-muted { background:#f0f0f0; padding:10rpx 20rpx; border-radius:8rpx }
-.btn-primary { background:#ff6a00; color:#fff; padding:10rpx 20rpx; border-radius:8rpx }
+.page {
+  min-height: calc(100vh);
+  padding-top: calc(var(--status-bar-height) + 44px);
+  background: #f5f6f8;
+  box-sizing: border-box
+}
+
+.header {
+  padding: 20rpx 40rpx
+}
+
+.month-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx
+}
+
+.month-label {
+  font-size: 34rpx;
+  color: #333
+}
+
+.btn {
+  background: transparent;
+  border: none;
+  font-size: 36rpx;
+  color: #666
+}
+
+.content {
+  padding: 20rpx 24rpx 100rpx 24rpx
+}
+
+.chart-wrap {
+  padding: 12rpx 24rpx
+}
+
+.chart-header {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 10rpx
+}
+
+.chart-svg {
+  width: 100%;
+  height: 160rpx;
+  display: block
+}
+
+.summary {
+  padding: 20rpx;
+  color: #666;
+  font-size: 28rpx
+}
+
+.list {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 10rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03)
+}
+
+.empty {
+  padding: 40rpx;
+  text-align: center;
+  color: #999
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0
+}
+
+.list-item .date {
+  color: #666
+}
+
+.list-item .value {
+  color: #333;
+  font-weight: 600
+}
+
+.fab {
+  position: fixed;
+  right: 28rpx;
+  bottom: 160rpx;
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ff7a00, #ff4a00);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2);
+  z-index: 1200
+}
+
+.fab-inner {
+  color: #fff;
+  font-size: 56rpx;
+  line-height: 56rpx
+}
+
+.modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1300
+}
+
+.modal-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4)
+}
+
+.modal-panel {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  border-top-left-radius: 18rpx;
+  border-top-right-radius: 18rpx;
+  padding: 30rpx
+}
+
+.modal-title {
+  font-size: 34rpx;
+  margin-bottom: 20rpx
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18rpx
+}
+
+.input {
+  width: 260rpx;
+  text-align: right;
+  padding: 8rpx;
+  border-radius: 8rpx;
+  border: 1rpx solid #eee
+}
+
+.picker-display {
+  color: #333
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12rpx
+}
+
+.btn-muted {
+  background: #f0f0f0;
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx
+}
+
+.btn-primary {
+  background: #ff6a00;
+  color: #fff;
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+  width: 300rpx;
+  margin-bottom: 80rpx;
+}
 </style>