🎨 重新調整版面符合英文版語系的顯示

This commit is contained in:
Minidoracat 2025-06-13 17:57:34 +08:00
parent 5950a5be17
commit cfdc192b1e
4 changed files with 64 additions and 69 deletions

View File

@ -241,6 +241,9 @@
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.btn-icon {

View File

@ -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');
}
}
};
/**

View File

@ -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);
}
// 更新按鈕文字

View File

@ -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"