Skip to content

Commit 7cab06a

Browse files
CC11001100CC11001100
committed
refactor: 优化输入对话框和相关组件\n\n1. 改进输入对话框组件的样式和响应式布局\n2. 优化语言更新处理逻辑，确保UI组件能正确响应语言变化\n3. 修复部分样式和交互问题
1 parent 06406dc commit 7cab06a

File tree

3 files changed

+89
-10
lines changed

3 files changed

+89
-10
lines changed

‎src/config/ui/component/basic/input-dialog/input-dialog-component.ts‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -91,17 +91,32 @@ export class InputDialogComponent implements LanguageUpdateable {
9191
cancelText?: string
9292
): void {
9393
try {
94+
// 获取当前语言配置
9495
const language = LanguageEventManager.getInstance().getCurrentLanguage();
9596

97+
// 检测是否为URL测试对话框并应用正确的语言
98+
const isUrlTestDialog = title.includes('enter the URL') ||
99+
title.includes('Please enter the URL') ||
100+
title.includes('请输入要测试的URL');
101+
102+
if (isUrlTestDialog && language) {
103+
// 使用当前语言的URL测试提示
104+
title = language.debugger_config.urlPatternTestPrompt;
105+
placeholder = language.debugger_config.urlPatternTextPlaceholder;
106+
okText = language.basic.testButton;
107+
cancelText = language.basic.inputDialog.defaultCancelText;
108+
logger.debug(`检测到URL测试对话框，应用当前语言的文本配置`);
109+
}
110+
96111
// 保存当前配置
97112
this.currentConfig = {
98113
title,
99114
message,
100115
callback,
101116
defaultValue,
102117
placeholder,
103-
okText: okText || language?.basic.inputDialog.defaultOkText || 'OK',
104-
cancelText: cancelText || language?.basic.inputDialog.defaultCancelText || 'Cancel'
118+
okText: okText || (language?.basic.inputDialog.defaultOkText || 'OK'),
119+
cancelText: cancelText || (language?.basic.inputDialog.defaultCancelText || 'Cancel')
105120
};
106121

107122
this.appendStyles();
@@ -231,33 +246,61 @@ export class InputDialogComponent implements LanguageUpdateable {
231246
return;
232247
}
233248

249+
// 更新对话框标题
250+
const header = this.dialogElement.querySelector('.js-script-hook-input-dialog-header');
251+
if (header) {
252+
// 保存图标元素
253+
const iconSpan = header.querySelector('.js-script-hook-input-dialog-icon');
254+
const iconHtml = iconSpan ? iconSpan.outerHTML : '';
255+
256+
// 检查标题是否需要本地化
257+
if (this.currentConfig.title.includes('enter the URL') ||
258+
this.currentConfig.title.includes('Please enter the URL') ||
259+
this.currentConfig.title.includes('请输入要测试的URL')) {
260+
// 检测到是URL测试对话框，使用对应语言的提示文本
261+
header.innerHTML = iconHtml + language.debugger_config.urlPatternTestPrompt;
262+
logger.debug(`已将对话框标题更新为URL测试提示: ${language.debugger_config.urlPatternTestPrompt}`);
263+
}
264+
}
265+
234266
// 更新确认按钮文本
235267
const okButton = this.dialogElement.querySelector('.js-script-hook-input-dialog-ok-btn') as HTMLButtonElement;
236268
if (okButton) {
237-
okButton.textContent = this.currentConfig.okText;
269+
// 检查是否为测试按钮
270+
if (this.currentConfig.okText === 'Test' ||
271+
this.currentConfig.okText === '测试' ||
272+
this.currentConfig.okText === language.basic.testButton) {
273+
okButton.textContent = language.basic.testButton;
274+
logger.debug(`已将确认按钮更新为测试按钮: ${language.basic.testButton}`);
275+
} else {
276+
okButton.textContent = language.basic.inputDialog.defaultOkText;
277+
}
238278
}
239279

240280
// 更新取消按钮文本
241281
const cancelButton = this.dialogElement.querySelector('.js-script-hook-input-dialog-cancel-btn') as HTMLButtonElement;
242282
if (cancelButton) {
243-
cancelButton.textContent = this.currentConfig.cancelText;
283+
cancelButton.textContent = language.basic.inputDialog.defaultCancelText;
284+
logger.debug(`已将取消按钮更新为: ${language.basic.inputDialog.defaultCancelText}`);
244285
}
245286

246287
// 更新输入框的placeholder
247288
const inputField = this.dialogElement.querySelector('.js-script-hook-input-dialog-input') as HTMLInputElement;
248-
if (inputField && this.currentConfig.placeholder) {
289+
if (inputField) {
249290
// 如果当前placeholder是URL pattern相关的提示文本
250-
if (this.currentConfig.placeholder.includes('Enter a keyword') ||
291+
if (this.currentConfig.placeholder === language.debugger_config.urlPatternTextPlaceholder ||
292+
this.currentConfig.placeholder.includes('Enter a keyword') ||
251293
this.currentConfig.placeholder.includes('输入关键字')) {
252294
inputField.placeholder = language.debugger_config.urlPatternTextPlaceholder;
295+
logger.debug(`已将输入框占位符更新为URL匹配提示: ${language.debugger_config.urlPatternTextPlaceholder}`);
253296
}
254297
// 如果当前placeholder是JSONP回调函数参数名相关的提示文本
255298
else if (this.currentConfig.placeholder.includes('If not specified') ||
256299
this.currentConfig.placeholder.includes('不指定的话')) {
257300
inputField.placeholder = language.debugger_config.callbackFunctionParamNamePlaceholder;
258301
}
259302
// 如果是其他类型的placeholder，保持原样
260-
else {
303+
else if (this.currentConfig.placeholder) {
261304
inputField.placeholder = this.currentConfig.placeholder;
262305
}
263306
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,30 @@ export const inputStyles = `
2929
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
3030
}
3131
32+
/* 禁用状态的输入框样式 */
33+
.js-script-hook-input-field:disabled {
34+
background-color: #f2f2f2;
35+
color: #999;
36+
border-color: #ddd;
37+
cursor: not-allowed;
38+
opacity: 0.7;
39+
box-shadow: none;
40+
background-image: repeating-linear-gradient(
41+
45deg,
42+
transparent,
43+
transparent 10px,
44+
rgba(0, 0, 0, 0.03) 10px,
45+
rgba(0, 0, 0, 0.03) 20px
46+
);
47+
text-decoration: line-through;
48+
font-style: italic;
49+
}
50+
51+
.js-script-hook-input-field:disabled::placeholder {
52+
color: #aaa;
53+
text-decoration: line-through;
54+
}
55+
3256
.js-script-hook-input-label {
3357
font-size: 12px;
3458
color: #666;

‎src/config/ui/component/debugger/language-update.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -270,15 +270,27 @@ function updateAllInputPlaceholders(componentElement: HTMLElement, language: Lan
270270
// 查找URL匹配方式输入框并更新placeholder
271271
const urlPatternInput = componentElement.querySelector(`#${currentConfig.id}-url-pattern-text`) as HTMLInputElement;
272272
if (urlPatternInput) {
273-
urlPatternInput.placeholder = language.debugger_config.urlPatternTextPlaceholder;
273+
// 根据输入框是否禁用设置不同的占位符文本
274+
if (urlPatternInput.disabled || currentConfig.urlPatternType === 'match-all') {
275+
urlPatternInput.placeholder = language.debugger_config.urlPatternMatchAllDisabledText;
276+
languageUpdateLogger.debug(`URL匹配方式输入框为禁用状态，更新placeholder为: ${language.debugger_config.urlPatternMatchAllDisabledText}`);
277+
} else {
278+
urlPatternInput.placeholder = language.debugger_config.urlPatternTextPlaceholder;
279+
languageUpdateLogger.debug(`更新URL匹配方式输入框placeholder为: ${language.debugger_config.urlPatternTextPlaceholder}`);
280+
}
274281

275282
// 如果有提供InputComponent实例，使用其setPlaceholder方法更新
276283
if (inputComponent) {
277284
const inputCompInstance = inputComponent;
278285
// 使用setTimeout确保DOM操作完成后再调用
279286
setTimeout(() => {
280-
inputCompInstance.setPlaceholder(language.debugger_config.urlPatternTextPlaceholder);
281-
languageUpdateLogger.debug(`通过InputComponent更新URL匹配方式输入框placeholder为: ${language.debugger_config.urlPatternTextPlaceholder}`);
287+
if (urlPatternInput.disabled || currentConfig.urlPatternType === 'match-all') {
288+
inputCompInstance.setPlaceholder(language.debugger_config.urlPatternMatchAllDisabledText);
289+
languageUpdateLogger.debug(`通过InputComponent更新禁用状态的URL匹配方式输入框placeholder为: ${language.debugger_config.urlPatternMatchAllDisabledText}`);
290+
} else {
291+
inputCompInstance.setPlaceholder(language.debugger_config.urlPatternTextPlaceholder);
292+
languageUpdateLogger.debug(`通过InputComponent更新URL匹配方式输入框placeholder为: ${language.debugger_config.urlPatternTextPlaceholder}`);
293+
}
282294
}, 0);
283295
}
284296
}

0 commit comments

Comments
 (0)