From 37fb88b04283ee0cbb54039404f8da6bc9e16300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B0=20Jie=20Zhao=20=EF=BC=88=E9=9B=84?=
=?UTF-8?q?=E7=8B=AE=E6=B1=BD=E8=BD=A6=E7=A7=91=E6=8A=80=EF=BC=89?=
<00061074@chery.local>
Date: Mon, 3 Nov 2025 16:51:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=83=8C=E4=B9=A6=E5=BA=8F?=
=?UTF-8?q?=E5=88=97=EF=BC=8C=E5=8F=AF=E6=B8=85=E6=A5=9A=E5=90=8E=E9=87=8D?=
=?UTF-8?q?=E5=A4=8D=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
static/css/recitation.css | 25 ++++++++
static/js/recitation.js | 120 ++++++++++++++++++++++++++++++++++----
templates/recitation.html | 4 +-
3 files changed, 136 insertions(+), 13 deletions(-)
diff --git a/static/css/recitation.css b/static/css/recitation.css
index 2cbcc88..2802703 100644
--- a/static/css/recitation.css
+++ b/static/css/recitation.css
@@ -1,6 +1,31 @@
.recitation-container {
max-width: 900px;
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,
diff --git a/static/js/recitation.js b/static/js/recitation.js
index f69b6e4..982b82d 100644
--- a/static/js/recitation.js
+++ b/static/js/recitation.js
@@ -43,11 +43,66 @@ const STORAGE_KEY_SORTED = 'recitation_sorted_items';
const STORAGE_KEY_ORIGINAL_TEXT = 'recitation_original_text';
const STORAGE_KEY_MASTERED = 'recitation_mastered_items';
-// 页面加载时恢复数据
+// 页面加载时恢复数据并清理异常元素
window.addEventListener('DOMContentLoaded', () => {
+ // 首先清理任何可能的异常覆盖层或调试元素
+ cleanupAbnormalElements();
+
+ // 然后恢复保存的数据
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() {
try {
@@ -105,12 +160,26 @@ function restoreFromStorage() {
}
}
-// 清除本地存储
+// 清除本地存储 - 完全清理所有相关数据
function clearStorage() {
- localStorage.removeItem(STORAGE_KEY_EXTRACTED);
- localStorage.removeItem(STORAGE_KEY_SORTED);
- localStorage.removeItem(STORAGE_KEY_ORIGINAL_TEXT);
- localStorage.removeItem(STORAGE_KEY_MASTERED);
+ try {
+ localStorage.removeItem(STORAGE_KEY_EXTRACTED);
+ localStorage.removeItem(STORAGE_KEY_SORTED);
+ localStorage.removeItem(STORAGE_KEY_ORIGINAL_TEXT);
+ 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', () => {
+ // 重置所有变量
extractedItems = [];
sortedItems = [];
availableItems = [];
masteredItems = [];
currentSpinIndex = 0;
currentSelectedItem = null;
+ isSpinning = false;
+ // 清理输入框
textInput.value = '';
textInput.disabled = false;
+ // 隐藏所有区域
extractedSection.style.display = 'none';
wheelSection.style.display = 'none';
resultSection.style.display = 'none';
+ // 清理提取的项目列表显示
+ itemsList.innerHTML = '';
+ itemCount.textContent = '0';
+
+ // 清理转盘
wheel.innerHTML = '';
const svg = wheel.querySelector('svg');
if (svg) {
svg.style.transform = 'rotate(0deg)';
+ svg.remove();
}
+
+ // 清理当前项目显示
currentItem.textContent = '';
masteryButtons.style.display = 'none';
- isSpinning = false;
- spinBtn.disabled = false;
- updateMasteryInfo();
+ // 清理排序结果列表
+ sortedList.innerHTML = '';
- 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('已完全重置页面，可以开始新的背诵任务');
});
diff --git a/templates/recitation.html b/templates/recitation.html
index 6676ce3..faa1af7 100644
--- a/templates/recitation.html
+++ b/templates/recitation.html
@@ -28,7 +28,7 @@
@@ -69,7 +69,7 @@
-
+