mirror of
https://github.com/Minidoracat/mcp-feedback-enhanced.git
synced 2025-07-27 02:22:26 +08:00
🎨 重新調整版面符合英文版語系的顯示
This commit is contained in:
parent
5950a5be17
commit
cfdc192b1e
@ -241,6 +241,9 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
@ -428,8 +428,8 @@
|
||||
|
||||
// 初始化輸入按鈕到所有回饋輸入區域
|
||||
const inputContainers = [
|
||||
'#feedbackText', // 回饋分頁
|
||||
'#combinedFeedbackText' // 工作區分頁
|
||||
'#feedbackText', // 回饋分頁的 textarea
|
||||
'#combinedFeedbackText' // 工作區分頁的 textarea
|
||||
];
|
||||
this.promptInputButtons.init(inputContainers);
|
||||
|
||||
@ -1268,14 +1268,10 @@
|
||||
*/
|
||||
FeedbackApp.prototype.showCountdownDisplay = function() {
|
||||
const countdownDisplay = document.getElementById('countdownDisplay');
|
||||
const countdownDisplayCombined = document.getElementById('countdownDisplayCombined');
|
||||
|
||||
if (countdownDisplay) {
|
||||
countdownDisplay.style.display = 'flex';
|
||||
}
|
||||
if (countdownDisplayCombined) {
|
||||
countdownDisplayCombined.style.display = 'flex';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1283,14 +1279,10 @@
|
||||
*/
|
||||
FeedbackApp.prototype.hideCountdownDisplay = function() {
|
||||
const countdownDisplay = document.getElementById('countdownDisplay');
|
||||
const countdownDisplayCombined = document.getElementById('countdownDisplayCombined');
|
||||
|
||||
if (countdownDisplay) {
|
||||
countdownDisplay.style.display = 'none';
|
||||
}
|
||||
if (countdownDisplayCombined) {
|
||||
countdownDisplayCombined.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1298,11 +1290,10 @@
|
||||
*/
|
||||
FeedbackApp.prototype.updateCountdownDisplay = function(remainingSeconds) {
|
||||
const countdownTimer = document.getElementById('countdownTimer');
|
||||
const countdownTimerCombined = document.getElementById('countdownTimerCombined');
|
||||
|
||||
const formattedTime = window.MCPFeedback.Utils.Time.formatAutoSubmitCountdown(remainingSeconds);
|
||||
|
||||
// 更新主要倒數計時器
|
||||
// 更新倒數計時器
|
||||
if (countdownTimer) {
|
||||
countdownTimer.textContent = formattedTime;
|
||||
|
||||
@ -1314,19 +1305,6 @@
|
||||
countdownTimer.classList.add('warning');
|
||||
}
|
||||
}
|
||||
|
||||
// 更新工作區倒數計時器
|
||||
if (countdownTimerCombined) {
|
||||
countdownTimerCombined.textContent = formattedTime;
|
||||
|
||||
// 根據剩餘時間調整樣式
|
||||
countdownTimerCombined.className = 'countdown-timer';
|
||||
if (remainingSeconds <= 10) {
|
||||
countdownTimerCombined.classList.add('danger');
|
||||
} else if (remainingSeconds <= 30) {
|
||||
countdownTimerCombined.classList.add('warning');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -49,7 +49,7 @@
|
||||
const container = document.querySelector(selector);
|
||||
if (container) {
|
||||
this.containers.push(container);
|
||||
this.createButtons(container, index);
|
||||
this.bindExistingButtons(container, index);
|
||||
successCount++;
|
||||
} else {
|
||||
console.warn('⚠️ 找不到提示詞按鈕容器:', selector);
|
||||
@ -64,46 +64,42 @@
|
||||
this.updateButtonStates();
|
||||
|
||||
this.isInitialized = true;
|
||||
console.log('✅ PromptInputButtons 初始化完成,成功創建', successCount, '組按鈕');
|
||||
console.log('✅ PromptInputButtons 初始化完成,成功綁定', successCount, '組按鈕');
|
||||
return true;
|
||||
}
|
||||
|
||||
console.error('❌ 沒有成功創建任何提示詞按鈕');
|
||||
console.error('❌ 沒有成功綁定任何提示詞按鈕');
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 創建按鈕
|
||||
* 綁定已存在的按鈕
|
||||
*/
|
||||
PromptInputButtons.prototype.createButtons = function(container, index) {
|
||||
const buttonsHtml = `
|
||||
<div class="prompt-input-buttons">
|
||||
<button type="button" class="prompt-input-btn select-prompt-btn" data-container-index="${index}">
|
||||
<span>📝</span>
|
||||
<span class="button-text"></span>
|
||||
</button>
|
||||
<button type="button" class="prompt-input-btn last-prompt-btn" data-container-index="${index}">
|
||||
<span>🔄</span>
|
||||
<span class="button-text"></span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 在 input-group 的 label 後面插入按鈕
|
||||
PromptInputButtons.prototype.bindExistingButtons = function(container, index) {
|
||||
// 查找已存在的按鈕容器
|
||||
const inputGroup = container.closest('.input-group') || container;
|
||||
const label = inputGroup.querySelector('.input-label');
|
||||
const buttonContainer = inputGroup.querySelector('.prompt-input-buttons');
|
||||
|
||||
if (label) {
|
||||
label.insertAdjacentHTML('afterend', buttonsHtml);
|
||||
} else {
|
||||
inputGroup.insertAdjacentHTML('afterbegin', buttonsHtml);
|
||||
if (!buttonContainer) {
|
||||
console.warn('⚠️ 找不到提示詞按鈕容器:', container);
|
||||
return;
|
||||
}
|
||||
|
||||
// 獲取按鈕引用
|
||||
const buttonContainer = inputGroup.querySelector('.prompt-input-buttons');
|
||||
if (buttonContainer) {
|
||||
this.selectButtons.push(buttonContainer.querySelector('.select-prompt-btn'));
|
||||
this.lastUsedButtons.push(buttonContainer.querySelector('.last-prompt-btn'));
|
||||
const selectBtn = buttonContainer.querySelector('.select-prompt-btn');
|
||||
const lastUsedBtn = buttonContainer.querySelector('.last-prompt-btn');
|
||||
|
||||
if (selectBtn && lastUsedBtn) {
|
||||
// 設置正確的 data-container-index
|
||||
selectBtn.setAttribute('data-container-index', index);
|
||||
lastUsedBtn.setAttribute('data-container-index', index);
|
||||
|
||||
this.selectButtons.push(selectBtn);
|
||||
this.lastUsedButtons.push(lastUsedBtn);
|
||||
|
||||
console.log('✅ 成功綁定提示詞按鈕,容器索引:', index);
|
||||
} else {
|
||||
console.warn('⚠️ 找不到提示詞按鈕元素:', container);
|
||||
}
|
||||
|
||||
// 更新按鈕文字
|
||||
|
@ -378,6 +378,12 @@
|
||||
|
||||
<!-- 中間:連線狀態資訊 -->
|
||||
<div class="connection-status-group">
|
||||
<!-- 倒數計時器顯示 -->
|
||||
<div id="countdownDisplay" class="countdown-display" style="display: none;">
|
||||
<span class="countdown-label" data-i18n="autoSubmit.countdownLabel">提交倒數</span>
|
||||
<span id="countdownTimer" class="countdown-timer">--:--</span>
|
||||
</div>
|
||||
|
||||
<!-- 主要連線狀態 -->
|
||||
<div class="connection-indicator connecting" id="mainConnectionStatus">
|
||||
<div class="status-icon pulse"></div>
|
||||
@ -411,9 +417,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右側:保留空間以保持佈局平衡 -->
|
||||
<!-- 右側:快速操作 -->
|
||||
<div class="quick-actions">
|
||||
<!-- 移除不必要的按鈕,保持佈局平衡 -->
|
||||
<!-- 保留空間以保持佈局平衡 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -555,14 +561,20 @@
|
||||
{% include 'components/status-indicator.html' %}
|
||||
|
||||
<div class="input-group">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||
<label class="input-label" data-i18n="feedback.textLabel">文字回饋</label>
|
||||
<!-- 倒數計時器顯示 -->
|
||||
<div id="countdownDisplay" class="countdown-display" style="display: none;">
|
||||
<span class="countdown-label" data-i18n="autoSubmit.countdownLabel">提交倒數</span>
|
||||
<span id="countdownTimer" class="countdown-timer">--:--</span>
|
||||
</div>
|
||||
<label class="input-label" data-i18n="feedback.textLabel">文字回饋</label>
|
||||
|
||||
<!-- 提示詞按鈕 -->
|
||||
<div class="prompt-input-buttons" id="feedbackPromptButtons">
|
||||
<button type="button" class="prompt-input-btn select-prompt-btn" data-container-index="0">
|
||||
<span>📝</span>
|
||||
<span class="button-text" data-i18n="prompts.buttons.selectPrompt">Templates</span>
|
||||
</button>
|
||||
<button type="button" class="prompt-input-btn last-prompt-btn" data-container-index="0">
|
||||
<span>🔄</span>
|
||||
<span class="button-text" data-i18n="prompts.buttons.useLastPrompt">Last Used</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id="feedbackText"
|
||||
class="text-input"
|
||||
@ -657,14 +669,20 @@
|
||||
{% include 'components/status-indicator.html' %}
|
||||
|
||||
<div class="input-group">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||
<label class="input-label" data-i18n="feedback.textLabel">文字回饋</label>
|
||||
<!-- 倒數計時器顯示 -->
|
||||
<div id="countdownDisplayCombined" class="countdown-display" style="display: none;">
|
||||
<span class="countdown-label" data-i18n="autoSubmit.countdownLabel">提交倒數</span>
|
||||
<span id="countdownTimerCombined" class="countdown-timer">--:--</span>
|
||||
</div>
|
||||
<label class="input-label" data-i18n="feedback.textLabel">文字回饋</label>
|
||||
|
||||
<!-- 提示詞按鈕 -->
|
||||
<div class="prompt-input-buttons" id="combinedPromptButtons">
|
||||
<button type="button" class="prompt-input-btn select-prompt-btn" data-container-index="1">
|
||||
<span>📝</span>
|
||||
<span class="button-text" data-i18n="prompts.buttons.selectPrompt">Templates</span>
|
||||
</button>
|
||||
<button type="button" class="prompt-input-btn last-prompt-btn" data-container-index="1">
|
||||
<span>🔄</span>
|
||||
<span class="button-text" data-i18n="prompts.buttons.useLastPrompt">Last Used</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id="combinedFeedbackText"
|
||||
class="text-input"
|
||||
|
Loading…
x
Reference in New Issue
Block a user