彻底修复断点列表中问号提示图标与输入框高度对齐问题

Author: CC11001100

src/config/ui/component/basic/input/styles.ts

@@ -4,18 +4,23 @@
 export const inputStyles = `
 .js-script-hook-input-container {
     position: relative;
-    margin: 8px 0;
+    margin: 0;
     width: 100%;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 .js-script-hook-input-field {
     width: 100%;
-    padding: 8px 10px;
+    height: 30px;
+    padding: 0 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 14px;
     background-color: white;
+    line-height: 28px;
+    vertical-align: middle;
 }
 
 .js-script-hook-input-field:focus {
@@ -30,4 +35,13 @@ export const inputStyles = `
     margin-bottom: 4px;
     display: block;
 }
+
+/* 确保输入框在表格中与其他元素对齐 */
+.debugger-component-table .js-script-hook-input-container {
+    margin: 0;
+}
+
+.debugger-component-table .js-script-hook-input-field {
+    vertical-align: middle;
+}
 `; 

src/config/ui/component/basic/tips/styles.ts

@@ -9,6 +9,8 @@ export const tipsStyles = `
         justify-content: center;
         width: 16px;
         height: 16px;
+        min-width: 16px;
+        min-height: 16px;
         border-radius: 50%;
         background-color: #007bff;
         color: white;
@@ -19,6 +21,7 @@ export const tipsStyles = `
         position: relative;
         vertical-align: middle;
         line-height: 1;
+        top: -1px; /* 微调图标位置，使其更好地与文本对齐 */
     }
     
     /* 确保问号图标和后面的文本对齐 */
@@ -30,6 +33,17 @@ export const tipsStyles = `
         height: 100%;
     }
     
+    /* 创建一个包装器，确保问号图标与文本在水平和垂直方向上对齐 */
+    td[align="right"] {
+        white-space: nowrap;
+    }
+    
+    td[align="right"] .js-script-hook-tips-icon,
+    td[align="right"] span {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    
     /* 工具提示样式 */
     .js-script-hook-tooltip {
         visibility: hidden;

src/config/ui/component/debugger/styles.ts

@@ -55,14 +55,16 @@ export const debuggerStyles = `
     width: 100%;
     border-spacing: 0;
     border-collapse: separate;
+    table-layout: fixed; /* 固定表格布局，减少重排 */
 }
 
 .debugger-component-table tr {
-    height: 40px; /* 设置固定的行高 */
+    height: 42px; /* 略微增加行高，给UI元素更多呼吸空间 */
+    line-height: 42px; /* 行高与高度保持一致 */
 }
 
 .debugger-component-table td {
-    padding: 8px;
+    padding: 6px 8px;
     vertical-align: middle;
     line-height: normal;
 }
@@ -72,6 +74,7 @@ export const debuggerStyles = `
     text-align: right;
     padding-right: 15px;
     white-space: nowrap; /* 防止文本换行 */
+    overflow: visible; /* 确保提示图标不被截断 */
 }
 
 .debugger-component-table td[align="left"] {
@@ -83,4 +86,25 @@ export const debuggerStyles = `
 .debugger-component-table td > * {
     vertical-align: middle;
 }
+
+/* 修正输入框与问号图标的对齐 */
+.js-script-hook-input-container {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* 确保测试按钮与问号图标对齐 */
+.js-script-hook-button-container {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+}
+
+/* 调整输入框的高度，使其与行高匹配 */
+.js-script-hook-input-field {
+    box-sizing: border-box;
+    height: 30px;
+    line-height: 28px;
+    padding: 0 10px;
+}
 `;