调整背书序列,可清楚后重复使用

This commit is contained in:
赵杰 Jie Zhao (雄狮汽车科技)
2025-11-03 16:51:38 +08:00
parent 6fc4438a13
commit 37fb88b042
3 changed files with 136 additions and 13 deletions

View File

@@ -1,6 +1,31 @@
.recitation-container { .recitation-container {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
position: relative;
isolation: isolate; /* 创建新的堆叠上下文,防止外部覆盖层 */
}
/* 防止意外覆盖层显示 - 只清除空的或意外的伪元素 */
.recitation-container *::before,
.recitation-container *::after {
/* 保留正常使用的伪元素,只阻止意外内容 */
pointer-events: none;
}
/* 确保容器内所有元素正常显示,无意外覆盖 */
.items-list,
.sorted-list {
position: relative;
z-index: 1;
background: white;
overflow: hidden; /* 防止内容溢出 */
}
/* 转盘容器保持相对定位,确保指针正常显示 */
.wheel-container {
position: relative;
z-index: 1;
overflow: visible; /* 转盘指针需要可见 */
} }
.input-section, .input-section,

View File

@@ -43,11 +43,66 @@ const STORAGE_KEY_SORTED = 'recitation_sorted_items';
const STORAGE_KEY_ORIGINAL_TEXT = 'recitation_original_text'; const STORAGE_KEY_ORIGINAL_TEXT = 'recitation_original_text';
const STORAGE_KEY_MASTERED = 'recitation_mastered_items'; const STORAGE_KEY_MASTERED = 'recitation_mastered_items';
// 页面加载时恢复数据 // 页面加载时恢复数据并清理异常元素
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
// 首先清理任何可能的异常覆盖层或调试元素
cleanupAbnormalElements();
// 然后恢复保存的数据
restoreFromStorage(); restoreFromStorage();
}); });
// 清理异常元素 - 移除可能的覆盖层、时间戳等调试元素
function cleanupAbnormalElements() {
try {
// 查找所有可能包含时间戳格式的文本节点(如 25-11-03-16, 03-16:41 等)
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);
let node;
const timestampPattern = /\d{2}-\d{2}-\d{2}-\d{2}|\d{2}-\d{2}:\d{2}/;
const nodesToRemove = [];
while (node = walker.nextNode()) {
if (timestampPattern.test(node.textContent.trim())) {
// 找到包含时间戳的文本节点,移除其父元素(如果它是独立显示的元素)
const parent = node.parentElement;
if (parent && (
parent.style.opacity && parseFloat(parent.style.opacity) < 1 ||
parent.style.position === 'absolute' ||
parent.style.position === 'fixed'
)) {
nodesToRemove.push(parent);
}
}
}
// 移除异常元素
nodesToRemove.forEach(el => {
if (el && el.parentNode) {
el.remove();
}
});
// 移除任何具有明显时间戳样式的元素(半透明、绝对定位等)
document.querySelectorAll('*').forEach(el => {
const style = window.getComputedStyle(el);
if (style.opacity && parseFloat(style.opacity) < 0.8 &&
(style.position === 'absolute' || style.position === 'fixed') &&
el.textContent.match(timestampPattern)) {
el.remove();
}
});
} catch (e) {
console.warn('清理异常元素时出错:', e);
}
}
// 保存到本地存储 // 保存到本地存储
function saveToStorage() { function saveToStorage() {
try { try {
@@ -105,12 +160,26 @@ function restoreFromStorage() {
} }
} }
// 清除本地存储 // 清除本地存储 - 完全清理所有相关数据
function clearStorage() { function clearStorage() {
try {
localStorage.removeItem(STORAGE_KEY_EXTRACTED); localStorage.removeItem(STORAGE_KEY_EXTRACTED);
localStorage.removeItem(STORAGE_KEY_SORTED); localStorage.removeItem(STORAGE_KEY_SORTED);
localStorage.removeItem(STORAGE_KEY_ORIGINAL_TEXT); localStorage.removeItem(STORAGE_KEY_ORIGINAL_TEXT);
localStorage.removeItem(STORAGE_KEY_MASTERED); localStorage.removeItem(STORAGE_KEY_MASTERED);
// 清除任何可能存在的其他相关键
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith('recitation_')) {
keysToRemove.push(key);
}
}
keysToRemove.forEach(key => localStorage.removeItem(key));
} catch (e) {
console.error('清除本地存储失败:', e);
}
} }
// 更新可用项目列表(排除已掌握的) // 更新可用项目列表(排除已掌握的)
@@ -477,33 +546,62 @@ function exportData(format) {
}); });
} }
// 重置 // 重置 - 完全清理所有数据和显示
resetBtn.addEventListener('click', () => { resetBtn.addEventListener('click', () => {
// 重置所有变量
extractedItems = []; extractedItems = [];
sortedItems = []; sortedItems = [];
availableItems = []; availableItems = [];
masteredItems = []; masteredItems = [];
currentSpinIndex = 0; currentSpinIndex = 0;
currentSelectedItem = null; currentSelectedItem = null;
isSpinning = false;
// 清理输入框
textInput.value = ''; textInput.value = '';
textInput.disabled = false; textInput.disabled = false;
// 隐藏所有区域
extractedSection.style.display = 'none'; extractedSection.style.display = 'none';
wheelSection.style.display = 'none'; wheelSection.style.display = 'none';
resultSection.style.display = 'none'; resultSection.style.display = 'none';
// 清理提取的项目列表显示
itemsList.innerHTML = '';
itemCount.textContent = '0';
// 清理转盘
wheel.innerHTML = ''; wheel.innerHTML = '';
const svg = wheel.querySelector('svg'); const svg = wheel.querySelector('svg');
if (svg) { if (svg) {
svg.style.transform = 'rotate(0deg)'; svg.style.transform = 'rotate(0deg)';
svg.remove();
} }
// 清理当前项目显示
currentItem.textContent = ''; currentItem.textContent = '';
masteryButtons.style.display = 'none'; masteryButtons.style.display = 'none';
isSpinning = false; // 清理排序结果列表
spinBtn.disabled = false; sortedList.innerHTML = '';
updateMasteryInfo();
clearStorage(); // 清除本地存储 // 重置按钮状态
spinBtn.disabled = false;
extractBtn.disabled = false;
extractBtn.textContent = '识别知识点';
sortBtn.disabled = false;
sortBtn.textContent = '开始随机排序';
// 更新掌握情况信息
remainingNum.textContent = '0';
// 清除本地存储
clearStorage();
// 强制清理DOM中可能残留的元素
document.querySelectorAll('.item-tag').forEach(el => el.remove());
document.querySelectorAll('.sorted-item').forEach(el => el.remove());
// 确认清理完成
console.log('已完全重置页面,可以开始新的背诵任务');
}); });

View File

@@ -28,7 +28,7 @@
<textarea <textarea
id="textInput" id="textInput"
class="text-input" class="text-input"
placeholder="例如:&#10;第一章 西周&#10;夏商学校名称&#10;西周学在官府&#10;国学乡学&#10;六艺&#10;私学兴起的原因与意义&#10;稷下学宫..." placeholder="请粘贴或输入需要背诵的知识点列表&#10;例如:&#10;第一章 西周&#10;夏商学校名称&#10;西周学在官府&#10;国学乡学&#10;六艺..."
rows="10" rows="10"
></textarea> ></textarea>
<button id="extractBtn" class="btn btn-primary">识别知识点</button> <button id="extractBtn" class="btn btn-primary">识别知识点</button>
@@ -69,7 +69,7 @@
<button id="exportCsvBtn" class="btn btn-export">导出为CSV</button> <button id="exportCsvBtn" class="btn btn-export">导出为CSV</button>
</div> </div>
<div id="sortedList" class="sorted-list"></div> <div id="sortedList" class="sorted-list"></div>
<button id="resetBtn" class="btn btn-secondary">重新开始</button> <button id="resetBtn" class="btn btn-secondary">清空所有内容,重新开始</button>
</div> </div>
</div> </div>
</main> </main>