Просмотр исходного кода

style(signature): 横屏下缩小底部按钮并将阅读同意移至签字框下方

- 底部操作栏 .sig-footer 高度 92→56px,按钮改为内容宽度(不再 flex:1 占满整行)、height 72→40px、字号 15→13px、圆角 24→12rpx
- 阅读同意勾选框由签字框上方移至签字框下方(组件内 signature-agree 块下移),与页面底部按钮成组
- computeCanvasHeight 因底部栏缩小同步下调 reserved(214/174 → 170/134),保证横屏画布不被裁剪
- 同步更新 TC-SIG2D-02 用例期望值(134/170 两档)
asus 2 дней назад
Родитель
Сommit
512f7f99d5

+ 4 - 4
cfc-frontend/__tests__/pages/signature/signature.canvas2d.test.js

@@ -13,7 +13,7 @@
  *     TC-SIG2D-01b 模板不渲染 h5DegradeHint/.rotate-hint(本轮未重新引入)
  *     TC-SIG2D-01c 调 wx.setPageOrientation(landscape + portrait)
  *     TC-SIG2D-01d~01j 行为级:H5 降级不切横屏 / success+complete 重算高度 / 窗口监听成对注册注销 / doBack 恢复竖屏 / onUnload 清理
- *     TC-SIG2D-02  computeCanvasHeight 保留(174/214 两档 + 160 下限)
+ *     TC-SIG2D-02  computeCanvasHeight 保留(134/170 两档 + 160 下限)
  *   S4-2 canvas 2d(hand-signature.vue,不回归)
  *     TC-SIG2D-03~07、01-E、02-E 保持不变
  *     TC-SIG2D-07b height watch 仅在值变化且非 savingLive/销毁时重建(书写中不丢笔迹)
@@ -264,9 +264,9 @@ describe('恢复签名页自动横屏 + canvas 2d 不回归 · signature.canvas2
     expect(seq).toEqual(['offResize', 'orient:portrait'])
   })
 
-  test('TC-SIG2D-02 computeCanvasHeight 保留竖屏计算(174/214 两档 + 160 下限)', function () {
-    expect(makePage(390, false).computeCanvasHeight()).toBe(390 - 174)
-    expect(makePage(390, true).computeCanvasHeight()).toBe(390 - 214)
+  test('TC-SIG2D-02 computeCanvasHeight 保留横屏计算(134/170 两档 + 160 下限)', function () {
+    expect(makePage(390, false).computeCanvasHeight()).toBe(390 - 134)
+    expect(makePage(390, true).computeCanvasHeight()).toBe(390 - 170)
     expect(makePage(200, true).computeCanvasHeight()).toBe(160)
   })
 

+ 8 - 8
cfc-frontend/pages/signature/components/hand-signature/hand-signature.vue

@@ -17,13 +17,6 @@
 -->
 <template>
   <view class="hand-signature">
-    <!-- 同意声明(requireAgree=true 时显示,未勾选不可确认签名) -->
-    <view v-if="requireAgree" class="signature-agree" @click="toggleAgree">
-      <view class="agree-box" :class="{ 'agree-box-on': agreed }">
-        <text v-if="agreed" class="agree-tick">✓</text>
-      </view>
-      <text class="agree-text">{{ agreeText }}</text>
-    </view>
     <view class="signature-canvas-wrap">
       <canvas
         :id="canvasId"
@@ -42,6 +35,13 @@
         class="signature-preview"
       />
     </view>
+    <!-- 同意声明(requireAgree=true 时显示,未勾选不可确认签名):置于签字框下方,与页面底部操作按钮成组 -->
+    <view v-if="requireAgree" class="signature-agree" @click="toggleAgree">
+      <view class="agree-box" :class="{ 'agree-box-on': agreed }">
+        <text v-if="agreed" class="agree-tick">✓</text>
+      </view>
+      <text class="agree-text">{{ agreeText }}</text>
+    </view>
     <view class="signature-actions">
       <button class="btn-sign-clear" :disabled="savingLive || !hasContent && !currentDataUrl" @click="handleClear">
         {{ savingLive ? '处理中...' : '重写' }}
@@ -407,7 +407,7 @@ export default {
 .signature-agree {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 16rpx;
+  margin-top: 12rpx;
 }
 .agree-box {
   flex: 0 0 16px;

+ 12 - 11
cfc-frontend/pages/signature/signature.vue

@@ -105,8 +105,8 @@ export default {
         win = null
       }
       var vh = (win && win.windowHeight) ? win.windowHeight : 400
-      // 顶部标题 ~66px + 底部操作栏 92px + 同意声明 ~40px + 留白 16px(可按横屏实际固定栏微调)
-      var reserved = this.requireAgree ? 214 : 174
+        // 顶部标题 ~66px + 底部操作栏(已缩小) 56px + 同意声明 ~36px(位于签字框下方、计入组件高度) + 留白 12px
+      var reserved = this.requireAgree ? 170 : 134
       var h = parseInt(vh, 10) - reserved
       return h > 160 ? h : 160
     },
@@ -240,25 +240,26 @@ export default {
   overflow: hidden;
 }
 
-/* 底部固定操作栏 */
+/* 底部固定操作栏(横屏下紧凑:按钮内容宽度、不再占满整行) */
 .sig-footer {
   flex-shrink: 0;
-  height: 92px;
+  height: 56px;
   display: flex;
   align-items: center;
+  justify-content: center;
+  gap: 8px;
   padding: 0 12px;
   background: $app-surface;
   box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
 }
 .sig-btn {
-  flex: 1;
-  height: 72px;
-  line-height: 72px;
-  margin: 0 6px;
-  padding: 0;
+  flex: 0 0 auto;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 18px;
   border: none;
-  border-radius: 24rpx;
-  font-size: calc(15px * var(--font-scale, 1));
+  border-radius: 12rpx;
+  font-size: calc(13px * var(--font-scale, 1));
   text-align: center;
 }
 .sig-btn::after {