提交代码

frontend/src/pages/ChatBotPage.tsx

@@ -772,7 +772,8 @@ export const ChatBotPage = () => {
     reset();
   };
 
-  const actionButtonSize = Math.round(layout.recordButtonSize * 0.58);
+  // 取消/发送按钮尺寸由布局系统统一计算，确保与间距一起按比例缩放
+  const actionButtonSize = layout.actionButtonSize;
   // 计算取消/发送按钮的 top 位置，使其中心与录音按钮中心对齐
   // 录音按钮中心 = recordButtonOffset + recordButtonSize / 2
   // 取消/发送按钮中心 = top + actionButtonSize / 2

frontend/src/utils/screenSize.ts

@@ -148,7 +148,7 @@ export interface LayoutParams {
   
   // 间距
   verticalGap: number;
-  buttonGap: number;  // 取消和发送按钮之间的水平间距（固定值）
+  buttonGap: number;  // 取消和发送按钮之间的水平间距
   
   // 进度环边距（进度环比录音按钮大的尺寸）
   progressRingPadding: number;
@@ -194,7 +194,7 @@ export const getLayoutParams = (): LayoutParams => {
       recordButtonSize: 88,
       waveformHeight: 52,
       verticalGap: 16,
-      buttonGap: 35, // 固定值，不缩放
+      buttonGap: 35,
       progressRingPadding: 17, // 88 * 0.92 * 0.21 ≈ 17 (按比例缩放)
     };
   } else {
@@ -207,7 +207,7 @@ export const getLayoutParams = (): LayoutParams => {
       recordButtonSize: 96,
       waveformHeight: 56,
       verticalGap: 20,
-      buttonGap: 35, // 固定值，不缩放
+      buttonGap: 35,
       progressRingPadding: 18, // 基准值：96 * 0.1875 = 18
     };
   }
@@ -308,7 +308,7 @@ const BASE_LAYOUT = {
   
   // 间距
   verticalGap: 20,      // 波形与按钮的垂直间距
-  buttonGap: 35,        // 取消和发送按钮之间的水平间距（固定值，不缩放）
+  buttonGap: 35,        // 取消和发送按钮之间的水平间距（仅用于旧布局，V3 等比例版本中会根据按钮尺寸重新计算）
   minGapBetweenElements: 16, // 元素之间最小间距
 } as const;
 
@@ -345,10 +345,12 @@ export interface CalculatedLayout {
   recordButtonSize: number;
   progressRingSize: number;
   waveformHeight: number;
+  // 行为按钮（取消/发送）尺寸
+  actionButtonSize: number;
   
   // 间距
   verticalGap: number;
-  buttonGap: number;  // 取消和发送按钮之间的水平间距（固定值）
+  buttonGap: number;  // 取消和发送按钮之间的水平间距（随按钮尺寸弹性变化）
   progressRingPadding: number;
   recordButtonOffset: number; // 录音按钮相对于进度环的 top 偏移
   
@@ -401,10 +403,15 @@ export function calculateLayout(
   // 2. 基于缩放比例计算所有元素尺寸
   const waveformHeight = Math.round(BASE.waveformHeight * scale);
   const verticalGap = Math.round(BASE.verticalGap * scale);
-  const buttonGap = BASE.buttonGap; // 按钮间距固定为 35px，不缩放
   const recordButtonSize = Math.max(44, Math.round(BASE.recordButtonSize * scale)); // 最小 44px 可点击
   const progressRingPadding = Math.round(BASE.progressRingPadding * scale);
   const progressRingSize = recordButtonSize + progressRingPadding;
+  // 行为按钮（取消/发送）尺寸与录音按钮保持 0.58 比例
+  const actionButtonSize = Math.round(recordButtonSize * 0.58);
+  // 为了让两按钮的中心距离约等于两个按钮宽度之和 D ≈ 2 * actionButtonSize：
+  // 当前几何关系：中心距 D = actionButtonSize + 2 * buttonGap
+  // 令 D = 2 * actionButtonSize，可得 buttonGap = actionButtonSize / 2
+  const buttonGap = Math.round(actionButtonSize / 2);
   
   // 3. 动态检测底部安全区域（移动端适配）
   // 声波纹直接贴底，不需要安全区域
@@ -551,6 +558,7 @@ export function calculateLayout(
     recordButtonSize,
     progressRingSize,
     waveformHeight,
+    actionButtonSize,
     verticalGap,
     buttonGap,
     progressRingPadding,