调整背书序列,可清楚后重复使用
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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('已完全重置页面,可以开始新的背诵任务');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
<textarea
|
<textarea
|
||||||
id="textInput"
|
id="textInput"
|
||||||
class="text-input"
|
class="text-input"
|
||||||
placeholder="例如: 第一章 西周 夏商学校名称 西周学在官府 国学乡学 六艺 私学兴起的原因与意义 稷下学宫..."
|
placeholder="请粘贴或输入需要背诵的知识点列表 例如: 第一章 西周 夏商学校名称 西周学在官府 国学乡学 六艺..."
|
||||||
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user