彻底重构并修复URL匹配关键字行的问号图标与输入框对齐问题

Author: CC11001100

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

@@ -8,18 +8,19 @@ export const inputStyles = `
     width: 100%;
     display: inline-block;
     vertical-align: middle;
+    line-height: normal;
 }
 
 .js-script-hook-input-field {
     width: 100%;
-    height: 30px;
+    height: 32px; /* 与行高匹配 */
     padding: 0 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 14px;
     background-color: white;
-    line-height: 28px;
+    line-height: 30px;
     vertical-align: middle;
 }
 
@@ -39,9 +40,27 @@ export const inputStyles = `
 /* 确保输入框在表格中与其他元素对齐 */
 .debugger-component-table .js-script-hook-input-container {
     margin: 0;
+    display: inline-flex;
+    align-items: center;
+    height: 40px;
 }
 
 .debugger-component-table .js-script-hook-input-field {
     vertical-align: middle;
 }
+
+/* 特别处理URL匹配关键字输入框 */
+[id$="-url-pattern-input-container"] .js-script-hook-input-container {
+    display: inline-flex;
+    align-items: center;
+}
+
+[id$="-url-pattern-input-container"] .js-script-hook-input-field {
+    height: 32px;
+}
+
+/* 确保输入框placeholder不影响高度 */
+.js-script-hook-input-field::placeholder {
+    line-height: normal;
+}
 `; 

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

@@ -21,7 +21,8 @@ export const tipsStyles = `
         position: relative;
         vertical-align: middle;
         line-height: 1;
-        top: -1px; /* 微调图标位置，使其更好地与文本对齐 */
+        /* 重要：精确控制图标位置，使其与输入框完美对齐 */
+        transform: translateY(-1px);
     }
     
     /* 确保问号图标和后面的文本对齐 */
@@ -36,6 +37,8 @@ export const tipsStyles = `
     /* 创建一个包装器，确保问号图标与文本在水平和垂直方向上对齐 */
     td[align="right"] {
         white-space: nowrap;
+        height: 42px;
+        line-height: normal;
     }
     
     td[align="right"] .js-script-hook-tips-icon,
@@ -44,6 +47,15 @@ export const tipsStyles = `
         vertical-align: middle;
     }
     
+    /* URL匹配关键字行特殊处理 - 确保这行的问号图标完美对齐 */
+    [id$="-url-pattern-input-container"] {
+        line-height: normal !important;
+    }
+    
+    tr:has([id$="-url-pattern-input-container"]) td[align="right"] .js-script-hook-tips-icon {
+        transform: translateY(0);
+    }
+    
     /* 工具提示样式 */
     .js-script-hook-tooltip {
         visibility: hidden;

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

@@ -60,13 +60,16 @@ export const debuggerStyles = `
 
 .debugger-component-table tr {
     height: 42px; /* 略微增加行高，给UI元素更多呼吸空间 */
-    line-height: 42px; /* 行高与高度保持一致 */
+    min-height: 42px; /* 确保最小高度 */
+    line-height: normal; /* 重要：使用normal而不是固定值 */
+    vertical-align: middle;
 }
 
 .debugger-component-table td {
     padding: 6px 8px;
     vertical-align: middle;
     line-height: normal;
+    height: 42px; /* 确保单元格高度一致 */
 }
 
 .debugger-component-table td[align="right"] {
@@ -87,24 +90,43 @@ export const debuggerStyles = `
     vertical-align: middle;
 }
 
+/* 针对特定行的特殊样式调整 */
+.debugger-component-table tr:has([id$="-url-pattern-input-container"]) {
+    height: 42px;
+    display: flex;
+    align-items: center;
+}
+
+.debugger-component-table tr:has([id$="-url-pattern-input-container"]) td {
+    display: flex;
+    align-items: center;
+}
+
+.debugger-component-table tr:has([id$="-url-pattern-input-container"]) td[align="right"] {
+    justify-content: flex-end;
+}
+
 /* 修正输入框与问号图标的对齐 */
 .js-script-hook-input-container {
-    display: inline-block;
+    display: inline-flex;
     vertical-align: middle;
+    align-items: center;
 }
 
 /* 确保测试按钮与问号图标对齐 */
 .js-script-hook-button-container {
-    display: inline-block;
+    display: inline-flex;
     vertical-align: middle;
     margin: 0;
+    align-items: center;
+    height: 42px;
 }
 
 /* 调整输入框的高度，使其与行高匹配 */
 .js-script-hook-input-field {
     box-sizing: border-box;
-    height: 30px;
-    line-height: 28px;
+    height: 32px;
+    line-height: 30px;
     padding: 0 10px;
 }
 `;