refactor(ui): 重构debugger组件使用统一的TipsComponent

CC11001100 · CC11001100 · commit bd115c6b6f38 · 2025-05-18T03:41:29.000+08:00
diff --git a/src/config/ui/component/debugger/debugger-component.ts b/src/config/ui/component/debugger/debugger-component.ts
@@ -34,6 +34,7 @@ export class DebuggerComponent implements LanguageUpdateable {
     private currentLanguage: Language | undefined;
     private currentConfig: DebuggerConfig | undefined;
     private componentElement: HTMLElement | null = null;
+    private tipsInstances: { [key: string]: TipsComponent } = {}; // 存储tips实例的映射表
     
     constructor() {
         this.componentId = 'debugger-component';
@@ -96,6 +97,11 @@ export class DebuggerComponent implements LanguageUpdateable {
         const tempContainer = document.createElement('div');
         tempContainer.innerHTML = createDebuggerTemplate(language, debuggerInformation);
         this.componentElement = tempContainer.firstElementChild as HTMLElement;
+        
+        // 渲染所有的tips组件
+        if (this.componentElement) {
+            this.renderTipsComponents(language, debuggerInformation.id);
+        }
 
         // 绑定事件处理
         bindDebuggerEvents(
@@ -114,6 +120,53 @@ export class DebuggerComponent implements LanguageUpdateable {
 
         return this.componentElement;
     }
+    
+    /**
+     * 渲染所有tips组件
+     * @param language 语言配置
+     * @param debuggerId 断点ID
+     */
+    private renderTipsComponents(language: Language, debuggerId: string): void {
+        if (!this.componentElement) return;
+        
+        // 为每个提示容器渲染TipsComponent
+        const tipsConfig = [
+            { containerId: `${debuggerId}-enable-tip-container`, tipText: language.debugger_config.enableTips },
+            { containerId: `${debuggerId}-url-pattern-tip-container`, tipText: language.debugger_config.urlPatternTips },
+            { containerId: `${debuggerId}-url-pattern-text-tip-container`, tipText: language.debugger_config.urlPatternTextTips },
+            { containerId: `${debuggerId}-url-pattern-test-tip-container`, tipText: language.debugger_config.urlPatternTestTips },
+            { containerId: `${debuggerId}-enable-request-debugger-tip-container`, tipText: language.debugger_config.enableRequestDebuggerTips },
+            { containerId: `${debuggerId}-enable-response-debugger-tip-container`, tipText: language.debugger_config.enableResponseDebuggerTips },
+            { containerId: `${debuggerId}-callback-function-param-name-tip-container`, tipText: language.debugger_config.callbackFunctionParamNameTips },
+            { containerId: `${debuggerId}-comment-tip-container`, tipText: language.debugger_config.commentTips }
+        ];
+        
+        // 清理旧的tips实例
+        for (const key in this.tipsInstances) {
+            if (this.tipsInstances[key]) {
+                this.tipsInstances[key].destroy();
+            }
+        }
+        this.tipsInstances = {};
+        
+        for (const config of tipsConfig) {
+            const container = this.componentElement.querySelector(`#${config.containerId}`);
+            if (container) {
+                // 先清空容器内容
+                container.innerHTML = '';
+                
+                // 创建新的TipsComponent实例
+                const tipComponent = new TipsComponent();
+                const tipElement = tipComponent.render(config.tipText);
+                
+                // 保存tips实例以便后续管理
+                this.tipsInstances[config.containerId] = tipComponent;
+                
+                // 将tip元素添加到容器中
+                container.appendChild(tipElement);
+            }
+        }
+    }
 
     /**
      * 实现LanguageUpdateable接口
@@ -131,6 +184,9 @@ export class DebuggerComponent implements LanguageUpdateable {
             return;
         }
 
+        // 更新语言时重新渲染所有tips组件
+        this.renderTipsComponents(language, this.currentConfig.id);
+
         updateDebuggerLanguage(
             this.componentElement,
             language,
@@ -171,6 +227,14 @@ export class DebuggerComponent implements LanguageUpdateable {
             if (this.tipsComponent) {
                 this.tipsComponent.destroy();
             }
+            
+            // 销毁所有tips实例
+            for (const key in this.tipsInstances) {
+                if (this.tipsInstances[key]) {
+                    this.tipsInstances[key].destroy();
+                }
+            }
+            this.tipsInstances = {};
 
             // 移除DOM元素
             if (this.componentElement) {
diff --git a/src/config/ui/component/debugger/language-update.ts b/src/config/ui/component/debugger/language-update.ts
@@ -68,22 +68,14 @@ export function updateDebuggerLanguage(
             // 强制更新每一行的标签文本
             updateRowLabel(rows[0], language.debugger_config.enable);
             updateRowLabel(rows[1], language.debugger_config.urlPattern);
-            updateRowLabel(rows[2], language.debugger_config.urlPattern);
+            updateRowLabel(rows[2], language.debugger_config.urlPatternKeyword);
             updateRowLabel(rows[3], language.debugger_config.urlPatternTest);
             updateRowLabel(rows[4], language.debugger_config.enableRequestDebugger);
             updateRowLabel(rows[5], language.debugger_config.enableResponseDebugger);
             updateRowLabel(rows[6], language.debugger_config.callbackFunctionParamName);
             updateRowLabel(rows[7], language.debugger_config.comment);
             
-            // 更新提示信息
-            updateRowTooltip(rows[0], language.debugger_config.enableTips);
-            updateRowTooltip(rows[1], language.debugger_config.urlPatternTips);
-            updateRowTooltip(rows[2], language.debugger_config.urlPatternTextTips);
-            updateRowTooltip(rows[3], language.debugger_config.urlPatternTestTips);
-            updateRowTooltip(rows[4], language.debugger_config.enableRequestDebuggerTips);
-            updateRowTooltip(rows[5], language.debugger_config.enableResponseDebuggerTips);
-            updateRowTooltip(rows[6], language.debugger_config.callbackFunctionParamNameTips);
-            updateRowTooltip(rows[7], language.debugger_config.commentTips);
+            // 不再需要直接更新提示信息，因为TipsComponent会处理这部分
         }
 
         // 更新子组件的语言
@@ -112,9 +104,7 @@ export function updateDebuggerLanguage(
         if (textareaComponent) {
             textareaComponent.updateLanguage(language);
         }
-        if (tipsComponent) {
-            tipsComponent.updateLanguage(language);
-        }
+        // tipsComponent由DebuggerComponent中的renderTipsComponents方法更新，无需在此处理
         
         // 直接更新所有输入框的placeholder
         updateAllInputPlaceholders(componentElement, language, currentConfig, inputComponent);
@@ -138,28 +128,13 @@ export function updateDebuggerLanguage(
 function updateRowLabel(row: Element | null, text: string): void {
     if (!row) return;
     
-    // 获取右侧单元格中的span标签
-    const label = row.querySelector('td[align="right"] span:last-child');
+    // 获取右侧单元格中的标签文本元素
+    const label = row.querySelector('td[align="right"] .label-text');
     if (label) {
         label.textContent = text;
     }
 }
 
-/**
- * 更新行中的提示信息
- * @param row 表格行
- * @param tooltipText 提示文本
- */
-function updateRowTooltip(row: Element | null, tooltipText: string): void {
-    if (!row) return;
-    
-    // 获取提示元素
-    const tooltip = row.querySelector('.js-script-hook-tooltip');
-    if (tooltip) {
-        tooltip.textContent = tooltipText;
-    }
-}
-
 /**
  * 强制更新所有文本标签
  * 使用多种选择器查找所有可能的标签元素，确保语言切换时全部更新
@@ -169,8 +144,8 @@ function updateRowTooltip(row: Element | null, tooltipText: string): void {
 function forceUpdateAllTextLabels(componentElement: HTMLElement, language: Language): void {
     if (!componentElement) return;
 
-    // 1. 获取所有字段标签并根据内容标识它们
-    const allLabelSpans = componentElement.querySelectorAll('td[align="right"] span');
+    // 获取所有字段标签并根据内容标识它们
+    const allLabelSpans = componentElement.querySelectorAll('td[align="right"] .label-text');
     
     allLabelSpans.forEach(span => {
         const text = span.textContent?.trim() || '';
@@ -198,45 +173,6 @@ function forceUpdateAllTextLabels(componentElement: HTMLElement, language: Langu
             span.textContent = language.debugger_config.urlPatternTest;
         }
     });
-    
-    // 2. 对于嵌套在表格行中的标签，使用行索引方法再次更新
-    const rows = componentElement.querySelectorAll('.debugger-component-table tr');
-    if (rows && rows.length > 0) {
-        // 对关键行强制更新
-        if (rows[4]) {
-            updateRowLabel(rows[4], language.debugger_config.enableRequestDebugger);
-        }
-        if (rows[5]) {
-            updateRowLabel(rows[5], language.debugger_config.enableResponseDebugger);
-        }
-        if (rows[6]) {
-            updateRowLabel(rows[6], language.debugger_config.callbackFunctionParamName);
-        }
-        if (rows[7]) {
-            updateRowLabel(rows[7], language.debugger_config.comment);
-        }
-    }
-    
-    // 3. 检查是否有特定ID的字段可以直接更新
-    const requestLabel = componentElement.querySelector('#request-debugger-label');
-    if (requestLabel) {
-        requestLabel.textContent = language.debugger_config.enableRequestDebugger;
-    }
-    
-    const responseLabel = componentElement.querySelector('#response-debugger-label');
-    if (responseLabel) {
-        responseLabel.textContent = language.debugger_config.enableResponseDebugger;
-    }
-    
-    const callbackLabel = componentElement.querySelector('#callback-function-label');
-    if (callbackLabel) {
-        callbackLabel.textContent = language.debugger_config.callbackFunctionParamName;
-    }
-    
-    const commentLabel = componentElement.querySelector('#comment-label');
-    if (commentLabel) {
-        commentLabel.textContent = language.debugger_config.comment;
-    }
 }
 
 /**
diff --git a/src/config/ui/component/debugger/styles.ts b/src/config/ui/component/debugger/styles.ts
@@ -59,7 +59,8 @@ export const debuggerStyles = `
 }
 
 .debugger-component-table tr {
-    height: 38px;
+    min-height: 38px;
+    height: auto;
     vertical-align: middle;
 }
 
@@ -69,10 +70,10 @@ export const debuggerStyles = `
 }
 
 .debugger-component-table td[align="right"] {
-    width: 200px;
+    width: 300px;
     text-align: right;
     padding-right: 15px;
-    white-space: nowrap;
+    white-space: normal;
 }
 
 .debugger-component-table td[align="left"] {
@@ -99,4 +100,106 @@ export const debuggerStyles = `
     line-height: 28px;
     padding: 0 10px;
 }
+
+/* Tips和标签布局容器 */
+.tips-label-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    min-height: 26px;
+    gap: 4px;
+}
+
+/* Tips容器样式 */
+.tip-container {
+    display: inline-block;
+    flex-shrink: 0;
+    margin-right: 0;
+    width: 16px;
+    height: 16px;
+}
+
+/* 标签文本样式 */
+.label-text {
+    display: inline-block;
+    vertical-align: middle;
+    word-break: break-word;
+    line-height: 1.3;
+    padding-top: 1px;
+}
+
+/* 原生问号样式覆盖，避免与tips冲突 */
+.breakpoint-question-mark {
+    display: none !important;
+}
+
+/* 隐藏ServerGo界面的原生问号标记 */
+.breakpoint-configuration .questionmark {
+    display: none !important;
+}
+
+/* 隐藏任何出现在我们组件外围的问号 */
+.js-script-hook-debugger-list > div > .questionmark,
+.breakpoint-configuration > .questionmark,
+#js-script-hook-debugger-list ~ .questionmark,
+.debugger-component-fieldset ~ .questionmark {
+    display: none !important;
+}
+
+/* 隐藏任何问号字符 */
+.js-script-hook-debugger-list .questionmark,
+#js-script-hook-debugger-list .questionmark {
+    display: none !important;
+}
+
+/* 可能的通用类，隐藏所有原生问号 */
+.js-script-hook-modal .questionmark,
+.js-script-hook-modal-content .questionmark {
+    display: none !important;
+}
+
+/* 增强问号隐藏规则 */
+.js-script-hook-modal *[class*="uestion"],
+.breakpoint-configuration *[class*="uestion"] {
+    display: none !important;
+}
+
+/* 针对箭头指向的问号 */
+.breakpoint-configuration > * > .questionmark {
+    display: none !important;
+}
+
+/* 修复ServerGo断点配置界面的布局问题 */
+.breakpoint-configuration {
+    /* 确保内容不超出容器 */
+    max-width: 100%;
+}
+
+/* 调整实际界面中的问号与标签对齐 */
+.breakpoint-configuration td:first-child {
+    width: 10px !important;
+    padding-right: 4px !important;
+    white-space: nowrap;
+}
+
+/* 使标签靠近问号 */
+.breakpoint-configuration td[align="right"],
+.breakpoint-configuration td:nth-child(2) {
+    text-align: left !important;
+    padding-left: 5px !important;
+    width: auto !important;
+}
+
+/* 直接针对红框中的JSONP回调函数布局问题 */
+.breakpoint-configuration tr:nth-child(6) td,
+.breakpoint-configuration tr:nth-child(6) td * {
+    vertical-align: top !important;
+    display: inline-block;
+}
+
+/* 强制所有标签左对齐 */
+.breakpoint-configuration table tr td {
+    text-align: left !important;
+}
 `; 
diff --git a/src/config/ui/component/debugger/template.ts b/src/config/ui/component/debugger/template.ts
