// ==UserScript== // @name （测试）隐藏/显示超星学习通作业答案 // @namespace http://tampermonkey.net/ // @version 2.3.0 // @description 一键隐藏超星学习通作业页面中所有 div.mark_answer 答案块，支持单个控制和全局控制，支持为每道题添加笔记。 // @author You // @match https://*.chaoxing.com/mooc-ans/mooc2/work/view* // @icon https://www.google.com/s2/favicons?sz=64&domain=chaoxing.com // @grant none // @run-at document-end // @license MIT // @downloadURL none // ==/UserScript== (function() { 'use strict'; // ===================== 配置管理模块 ===================== class Config { static DEFAULT = { // ========== DOM 选择器配置 ========== selectors: { answerBlock: 'div.mark_answer', // 答案块的选择器 container: 'div.topicNumber', // 题目容器的选择器 questionItem: 'div.mark_item' // 题目项的选择器 }, // ========== 延迟配置 ========== delays: { initialization: 800 // 脚本初始化延迟时间（毫秒），确保页面加载完成 }, // ========== 单个答案控制按钮配置 ========== answerButton: { // --- 按钮位置配置 --- position: { marginLeft: '10px', // 按钮左外边距 marginRight: '0px', // 按钮右外边距 marginTop: '10px', // 按钮上外边距 marginBottom: '0px', // 按钮下外边距 verticalAlign: 'middle' // 垂直对齐方式（top/middle/bottom） }, // --- 按钮样式配置 --- style: { fontSize: '12px', // 字体大小 padding: '2px 8px', // 内边距（上下 左右） borderRadius: '3px', // 圆角半径 border: 'none', // 边框样式 fontWeight: 'normal', // 字体粗细（normal/bold/100-900） cursor: 'pointer', // 鼠标样式 transition: 'background 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { showBackground: '#4299e1', // "显示答案"按钮背景色（蓝色） hideBackground: '#9f7aea', // "隐藏答案"按钮背景色（紫色） textColor: 'white', // 按钮文字颜色 hoverOpacity: '0.8' // 鼠标悬停时的透明度 }, // --- 按钮文字配置 --- text: { show: '显示答案', // "显示答案"按钮文字 hide: '隐藏答案' // "隐藏答案"按钮文字 } }, // ========== 笔记控制按钮配置 ========== noteButton: { // --- 按钮位置配置 --- position: { marginLeft: '5px', // 按钮左外边距（与答案按钮的间距） marginRight: '0px', // 按钮右外边距 marginTop: '10px', // 按钮上外边距 marginBottom: '0px', // 按钮下外边距 verticalAlign: 'middle' // 垂直对齐方式 }, // --- 按钮样式配置 --- style: { fontSize: '12px', // 字体大小 padding: '2px 8px', // 内边距（上下 左右） borderRadius: '3px', // 圆角半径 border: 'none', // 边框样式 fontWeight: 'normal', // 字体粗细 cursor: 'pointer', // 鼠标样式 transition: 'background 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { showBackground: '#48bb78', // "显示笔记"按钮背景色（绿色） hideBackground: '#9f7aea', // "隐藏笔记"按钮背景色（紫色） textColor: 'white', // 按钮文字颜色 hoverOpacity: '0.8' // 鼠标悬停时的透明度 }, // --- 按钮文字配置 --- text: { show: '显示笔记', // "显示笔记"按钮文字 hide: '隐藏笔记' // "隐藏笔记"按钮文字 } }, // ========== 保存笔记按钮配置 ========== saveNoteButton: { // --- 按钮位置配置 --- position: { marginLeft: '5px', // 按钮左外边距（与笔记按钮的间距） marginRight: '0px', // 按钮右外边距 marginTop: '10px', // 按钮上外边距 marginBottom: '0px', // 按钮下外边距 verticalAlign: 'middle' // 垂直对齐方式 }, // --- 按钮样式配置 --- style: { fontSize: '12px', // 字体大小 padding: '2px 8px', // 内边距（上下 左右） borderRadius: '3px', // 圆角半径 border: 'none', // 边框样式 fontWeight: 'normal', // 字体粗细 cursor: 'pointer', // 鼠标样式 transition: 'background 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { background: '#38b2ac', // 按钮背景色（青色） textColor: 'white', // 按钮文字颜色 hoverOpacity: '0.8' // 鼠标悬停时的透明度 }, // --- 按钮文字配置 --- text: '💾 保存' // 保存按钮文字 }, // ========== 全局控制按钮配置 ========== globalButton: { // --- 按钮位置配置 --- position: { top: '8px', // 距离容器顶部的距离 right: '8px', // 距离容器右侧的距离 zIndex: '9999' // 层级（确保在最上层） }, // --- 按钮样式配置 --- style: { fontSize: '12px', // 字体大小 padding: '3px 10px', // 内边距（上下 左右） borderRadius: '4px', // 圆角半径 border: 'none', // 边框样式 fontWeight: 'normal', // 字体粗细 cursor: 'pointer', // 鼠标样式 transition: 'background 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { showAllBackground: '#4299e1', // "显示全部答案"按钮背景色（蓝色） hideAllBackground: '#9f7aea', // "隐藏全部答案"按钮背景色（紫色） textColor: 'white', // 按钮文字颜色 hoverOpacity: '0.8' // 鼠标悬停时的透明度 }, // --- 按钮文字配置 --- text: { showAll: '显示全部答案', // "显示全部答案"按钮文字 hideAll: '隐藏全部答案' // "隐藏全部答案"按钮文字 } }, // ========== 笔记编辑器配置 ========== noteEditor: { placeholder: '在这里记录你的笔记...', // 编辑器占位符文字 width: '110%', // 编辑器宽度 minHeight: '60px', // 编辑器最小高度 maxHeight: '400px', // 编辑器最大高度（超出滚动） fontSize: '14px', // 编辑器字体大小 padding: '10px', // 编辑器内边距 marginTop: '10px', // 编辑器上外边距 marginBottom: '10px', // 编辑器下外边距 borderRadius: '4px', // 编辑器圆角半径 borderWidth: '1px', // 编辑器边框宽度 borderStyle: 'solid', // 编辑器边框样式 borderColor: '#cbd5e0', // 编辑器边框颜色（默认） focusBorderColor: '#4299e1', // 编辑器获得焦点时的边框颜色 backgroundColor: '#f7fafc', // 编辑器背景颜色 textColor: '#2d3748', // 编辑器文字颜色 fontFamily: 'inherit', // 编辑器字体（继承父元素） resize: 'vertical' // 调整大小方式（none/vertical/horizontal/both） }, // ========== 用户设置默认值 ========== settings: { autoSave: false, // 是否开启自动保存（默认关闭） autoSaveDelay: 5000 // 自动保存延迟时间（毫秒） }, // ========== 控制面板按钮配置 ========== manageButton: { // --- 按钮位置配置 --- position: { top: '35px', // 距离容器顶部的距离（在全局按钮下方） right: '8px', // 距离容器右侧的距离 zIndex: '9999' // 层级（确保在最上层） }, // --- 按钮样式配置 --- style: { fontSize: '12px', // 字体大小 padding: '3px 10px', // 内边距（上下 左右） borderRadius: '4px', // 圆角半径 border: 'none', // 边框样式 fontWeight: 'normal', // 字体粗细 cursor: 'pointer', // 鼠标样式 transition: 'background 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { background: '#ed8936', // 按钮背景色（橙色） textColor: 'white', // 按钮文字颜色 hoverOpacity: '0.8' // 鼠标悬停时的透明度 }, // --- 按钮文字配置 --- text: '⚙️ 控制面板' // 控制面板按钮文字 }, // ========== 控制面板保存按钮配置 ========== panelSaveButton: { // --- 按钮样式配置 --- style: { padding: '10px 24px', // 内边距（上下 左右） borderRadius: '6px', // 圆角半径 border: 'none', // 边框样式 fontSize: '14px', // 字体大小 fontWeight: '600', // 字体粗细 cursor: 'pointer', // 鼠标样式 transition: 'all 0.2s' // 过渡动画 }, // --- 按钮颜色配置 --- colors: { background: '#4299e1', // 按钮背景色（蓝色） hoverBackground: '#3182ce', // 悬停时背景色 textColor: 'white', // 按钮文字颜色 successBackground: '#48bb78', // 保存成功背景色（绿色） errorBackground: '#f56565', // 保存失败背景色（红色） boxShadow: '0 2px 4px rgba(66, 153, 225, 0.3)', // 默认阴影 hoverBoxShadow: '0 4px 6px rgba(66, 153, 225, 0.4)' // 悬停阴影 }, // --- 按钮文字配置 --- text: { save: '💾 保存设置', // 默认文字 success: '✅ 保存成功', // 保存成功文字 error: '❌ 保存失败' // 保存失败文字 } }, // ========== 数据库配置 ========== database: { name: 'ChaoxingNotesDB', // IndexedDB 数据库名称 version: 3, // 数据库版本号（v3：添加设置存储） stores: { notes: 'notes', // 笔记存储名称 attachments: 'attachments', // 附件存储名称 settings: 'settings' // 用户设置存储名称 } }, // ========== 提示消息配置 ========== messages: { noAnswerBlocks: 'ℹ️ 未找到答案块（可能页面未完全加载，可刷新重试）', noContainer: 'ℹ️ 未找到容器模块，仅启用单个答案块隐藏功能', success: '✅ 超星作业答案块隐藏工具执行完成！', hiddenCount: (count) => `- 已隐藏 ${count} 个答案内容块，每个块已添加独立显示按钮`, globalButton: (hasContainer) => `- ${hasContainer ? '已在容器右上角添加全局控制按钮' : '未找到容器模块，未添加全局按钮'}`, noteSaved: '💾 笔记已自动保存', noteLoadError: '⚠️ 加载笔记失败' } }; constructor(customConfig = {}) { this.config = this._deepMerge(Config.DEFAULT, customConfig); } get(path) { return path.split('.').reduce((obj, key) => obj?.[key], this.config); } _deepMerge(target, source) { const result = { ...target }; for (const key in source) { if (source[key] instanceof Object && key in target) { result[key] = this._deepMerge(target[key], source[key]); } else { result[key] = source[key]; } } return result; } } // ===================== 日志管理模块 ===================== class Logger { static log(message, type = 'info') { const prefix = type === 'error' ? '❌' : type === 'warn' ? '⚠️' : 'ℹ️'; console.log(`${prefix} ${message}`); } static success(message) { console.log(`✅ ${message}`); } static error(message, error) { console.error(`❌ ${message}`, error); } } // ===================== URL 解析器 ===================== class URLParser { static parseWorkInfo() { const url = new URL(window.location.href); return { courseId: url.searchParams.get('courseId') || '', classId: url.searchParams.get('classId') || '', workId: url.searchParams.get('workId') || '' }; } static getWorkKey() { const { courseId, classId, workId } = this.parseWorkInfo(); return `${courseId}_${classId}_${workId}`; } } // ===================== IndexedDB 管理器 ===================== class DatabaseManager { constructor(config) { this.config = config; this.db = null; } async init() { return new Promise((resolve, reject) => { const request = indexedDB.open( this.config.get('database.name'), this.config.get('database.version') ); request.onerror = () => reject(request.error); request.onsuccess = () => { this.db = request.result; resolve(this.db); }; request.onupgradeneeded = (event) => { const db = event.target.result; const oldVersion = event.oldVersion; // 创建或升级笔记存储 if (!db.objectStoreNames.contains(this.config.get('database.stores.notes'))) { const notesStore = db.createObjectStore( this.config.get('database.stores.notes'), { keyPath: 'id' } ); notesStore.createIndex('workKey', 'workKey', { unique: false }); notesStore.createIndex('questionId', 'questionId', { unique: false }); notesStore.createIndex('timestamp', 'timestamp', { unique: false }); } // v2: 创建附件存储（为未来图片等附件做准备） if (oldVersion < 2 && !db.objectStoreNames.contains(this.config.get('database.stores.attachments'))) { const attachmentsStore = db.createObjectStore( this.config.get('database.stores.attachments'), { keyPath: 'id' } ); attachmentsStore.createIndex('noteId', 'noteId', { unique: false }); attachmentsStore.createIndex('workKey', 'workKey', { unique: false }); attachmentsStore.createIndex('type', 'type', { unique: false }); attachmentsStore.createIndex('timestamp', 'timestamp', { unique: false }); } // v3: 创建设置存储 if (oldVersion < 3 && !db.objectStoreNames.contains(this.config.get('database.stores.settings'))) { db.createObjectStore( this.config.get('database.stores.settings'), { keyPath: 'key' } ); } }; }); } async saveNote(workKey, questionId, content) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readwrite' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const id = `${workKey}_${questionId}`; const data = { id, workKey, questionId, content, contentType: 'text', // 内容类型：text, html等 hasAttachments: false, // 是否有附件 attachmentCount: 0, // 附件数量 timestamp: Date.now(), updatedAt: Date.now() }; const request = objectStore.put(data); request.onsuccess = () => resolve(data); request.onerror = () => reject(request.error); }); } async getNote(workKey, questionId) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const id = `${workKey}_${questionId}`; const request = objectStore.get(id); request.onsuccess = () => resolve(request.result?.content || ''); request.onerror = () => reject(request.error); }); } async getAllNotes(workKey) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const index = objectStore.index('workKey'); const request = index.getAll(workKey); request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } /** * 获取整个域名下的所有笔记 */ async getAllDomainNotes() { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const request = objectStore.getAll(); request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } async deleteNote(workKey, questionId) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readwrite' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const id = `${workKey}_${questionId}`; const request = objectStore.delete(id); request.onsuccess = () => resolve(); request.onerror = () => reject(request.error); }); } /** * 批量删除笔记 * @param {Array} noteIds - 笔记ID数组 */ async deleteNotes(noteIds) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readwrite' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); let completedCount = 0; const totalCount = noteIds.length; if (totalCount === 0) { resolve(0); return; } noteIds.forEach(id => { const request = objectStore.delete(id); request.onsuccess = () => { completedCount++; if (completedCount === totalCount) { resolve(completedCount); } }; request.onerror = () => { Logger.error(`删除笔记失败: ${id}`, request.error); completedCount++; if (completedCount === totalCount) { resolve(completedCount); } }; }); }); } /** * 获取数据库统计信息 */ async getStatistics() { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.notes')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.notes')); const countRequest = objectStore.count(); countRequest.onsuccess = () => { resolve({ totalNotes: countRequest.result, databaseName: this.config.get('database.name'), version: this.config.get('database.version') }); }; countRequest.onerror = () => reject(countRequest.error); }); } /** * 保存设置 * @param {string} key - 设置键 * @param {any} value - 设置值 */ async saveSetting(key, value) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.settings')], 'readwrite' ); const objectStore = transaction.objectStore(this.config.get('database.stores.settings')); const data = { key, value, updatedAt: Date.now() }; const request = objectStore.put(data); request.onsuccess = () => resolve(data); request.onerror = () => reject(request.error); }); } /** * 获取设置 * @param {string} key - 设置键 * @param {any} defaultValue - 默认值 */ async getSetting(key, defaultValue = null) { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.settings')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.settings')); const request = objectStore.get(key); request.onsuccess = () => { const result = request.result; resolve(result ? result.value : defaultValue); }; request.onerror = () => reject(request.error); }); } /** * 获取所有设置 */ async getAllSettings() { if (!this.db) await this.init(); return new Promise((resolve, reject) => { const transaction = this.db.transaction( [this.config.get('database.stores.settings')], 'readonly' ); const objectStore = transaction.objectStore(this.config.get('database.stores.settings')); const request = objectStore.getAll(); request.onsuccess = () => { const settings = {}; request.result.forEach(item => { settings[item.key] = item.value; }); resolve(settings); }; request.onerror = () => reject(request.error); }); } } // ===================== 笔记编辑器组件 ===================== class NoteEditor { constructor(questionId, workKey, dbManager, config, styleGenerator) { this.questionId = questionId; this.workKey = workKey; this.dbManager = dbManager; this.config = config; this.styleGenerator = styleGenerator; this.editor = null; this.saveTimer = null; this.isVisible = false; } async create() { const noteConfig = this.config.get('noteEditor'); this.editor = DOMHelper.createElement('textarea', { placeholder: noteConfig.placeholder, style: this.styleGenerator.getNoteEditorStyle() }); // 加载已保存的笔记 try { const savedContent = await this.dbManager.getNote(this.workKey, this.questionId); if (savedContent) { this.editor.value = savedContent; this._adjustHeight(); } } catch (error) { Logger.error(this.config.get('messages.noteLoadError'), error); } // 监听输入事件，自动调整高度和保存 this.editor.addEventListener('input', () => { this._adjustHeight(); this._scheduleAutoSave(); }); // 获得焦点时改变边框颜色 this.editor.addEventListener('focus', () => { this.editor.style.borderColor = this.config.get('noteEditor.focusBorderColor'); }); this.editor.addEventListener('blur', () => { this.editor.style.borderColor = this.config.get('noteEditor.borderColor'); }); return this.editor; } _adjustHeight() { // 重置高度以获取正确的 scrollHeight this.editor.style.height = 'auto'; const noteConfig = this.config.get('noteEditor'); const minHeight = parseInt(noteConfig.minHeight); const maxHeight = parseInt(noteConfig.maxHeight); const newHeight = Math.min(Math.max(this.editor.scrollHeight, minHeight), maxHeight); this.editor.style.height = `${newHeight}px`; } _scheduleAutoSave() { // 检查自动保存是否启用 this.dbManager.getSetting('autoSave', this.config.get('settings.autoSave')) .then(autoSaveEnabled => { if (!autoSaveEnabled) return; if (this.saveTimer) { clearTimeout(this.saveTimer); } this.dbManager.getSetting('autoSaveDelay', this.config.get('settings.autoSaveDelay')) .then(delay => { this.saveTimer = setTimeout(async () => { await this.save(); }, delay); }); }); } async save() { try { const content = this.editor.value.trim(); await this.dbManager.saveNote(this.workKey, this.questionId, content); } catch (error) { Logger.error('保存笔记失败', error); } } show() { this.editor.style.display = 'block'; this.isVisible = true; this._adjustHeight(); } hide() { this.editor.style.display = 'none'; this.isVisible = false; } toggle() { if (this.isVisible) { this.hide(); } else { this.show(); } } getElement() { return this.editor; } } // ===================== 控制面板UI组件 ===================== class ControlPanelUI { constructor(dbManager, workKey, config) { this.dbManager = dbManager; this.workKey = workKey; this.config = config; this.modal = null; this.notesList = []; this.selectedNotes = new Set(); this.notesScope = 'current'; // 'current', 'course', 'class', 'domain' this.currentTab = 'settings'; // 'settings', 'notes', 'styles' this.settings = {}; this.notesMenuExpanded = false; // 管理笔记子菜单是否展开 // 解析 workKey 获取 courseId, classId, workId const parts = workKey.split('_'); this.courseId = parts[0] || ''; this.classId = parts[1] || ''; this.workId = parts[2] || ''; } /** * 显示控制面板 */ async show() { await this._loadSettings(); await this._loadNotes(); this._createModal(); this._renderContent(); } /** * 加载用户设置 */ async _loadSettings() { try { this.settings = await this.dbManager.getAllSettings(); // 填充默认值 if (!('autoSave' in this.settings)) { this.settings.autoSave = this.config.get('settings.autoSave'); } if (!('autoSaveDelay' in this.settings)) { this.settings.autoSaveDelay = this.config.get('settings.autoSaveDelay'); } } catch (error) { Logger.error('加载设置失败', error); this.settings = { autoSave: this.config.get('settings.autoSave'), autoSaveDelay: this.config.get('settings.autoSaveDelay') }; } } /** * 加载笔记数据 */ async _loadNotes() { try { const allNotes = await this.dbManager.getAllDomainNotes(); switch (this.notesScope) { case 'current': // 当前页面：完全匹配 workKey this.notesList = allNotes.filter(note => note.workKey === this.workKey); break; case 'course': // 当前课程：courseId 相同 this.notesList = allNotes.filter(note => { const parts = note.workKey.split('_'); return parts[0] === this.courseId; }); break; case 'class': // 当前班级：courseId 和 classId 都相同 this.notesList = allNotes.filter(note => { const parts = note.workKey.split('_'); return parts[0] === this.courseId && parts[1] === this.classId; }); break; case 'domain': // 整个域名：所有笔记 this.notesList = allNotes; break; default: this.notesList = allNotes.filter(note => note.workKey === this.workKey); } this.notesList.sort((a, b) => b.timestamp - a.timestamp); } catch (error) { Logger.error('加载笔记失败', error); this.notesList = []; } } /** * 创建模态框 */ _createModal() { // 创建遮罩层 const overlay = DOMHelper.createElement('div', { style: { position: 'fixed', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', zIndex: '99999', display: 'flex', justifyContent: 'center', alignItems: 'center' } }); // 创建主容器 const mainContainer = DOMHelper.createElement('div', { style: { backgroundColor: 'white', borderRadius: '12px', width: '90%', maxWidth: '900px', height: '85vh', display: 'flex', boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)', overflow: 'hidden' } }); // 创建左侧边栏 const sidebar = this._createSidebar(); mainContainer.appendChild(sidebar); // 创建右侧内容区 const contentArea = DOMHelper.createElement('div', { id: 'panel-content-area', style: { flex: '1', display: 'flex', flexDirection: 'column', backgroundColor: '#f7fafc' } }); // 创建内容区标题栏 const contentHeader = DOMHelper.createElement('div', { id: 'panel-content-header', style: { padding: '20px 30px', borderBottom: '1px solid #e2e8f0', backgroundColor: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }); const headerTitle = DOMHelper.createElement('h2', { id: 'panel-header-title', innerText: '⚙️ 设置', style: { margin: '0', fontSize: '20px', fontWeight: 'bold', color: '#2d3748' } }); const closeBtn = DOMHelper.createElement('button', { innerText: '✕', style: { background: 'none', border: 'none', fontSize: '24px', cursor: 'pointer', color: '#718096', padding: '0', width: '30px', height: '30px', lineHeight: '30px', textAlign: 'center', borderRadius: '50%', transition: 'background 0.2s' } }); closeBtn.addEventListener('mouseenter', () => { closeBtn.style.backgroundColor = '#e2e8f0'; }); closeBtn.addEventListener('mouseleave', () => { closeBtn.style.backgroundColor = 'transparent'; }); closeBtn.addEventListener('click', () => this._close()); contentHeader.appendChild(headerTitle); contentHeader.appendChild(closeBtn); contentArea.appendChild(contentHeader); // 创建内容主体 const contentBody = DOMHelper.createElement('div', { id: 'panel-content-body', style: { flex: '1', overflow: 'auto', padding: '30px' } }); contentArea.appendChild(contentBody); mainContainer.appendChild(contentArea); overlay.appendChild(mainContainer); // 点击遮罩层关闭 overlay.addEventListener('click', (e) => { if (e.target === overlay) { this._close(); } }); this.modal = overlay; document.body.appendChild(overlay); } /** * 创建左侧边栏 */ _createSidebar() { const sidebar = DOMHelper.createElement('div', { style: { width: '220px', backgroundColor: '#2d3748', display: 'flex', flexDirection: 'column', padding: '20px 0' } }); // 标题 const title = DOMHelper.createElement('div', { innerText: '控制面板', style: { padding: '0 20px 20px', fontSize: '18px', fontWeight: 'bold', color: 'white', borderBottom: '1px solid rgba(255, 255, 255, 0.1)', marginBottom: '10px' } }); sidebar.appendChild(title); // 菜单项 const menuItems = [ { id: 'settings', icon: '⚙️', text: '设置' }, { id: 'notes', icon: '📝', text: '管理笔记', hasSubmenu: true, submenu: [ { id: 'notes-current', icon: '📄', text: '当前页面', scope: 'current' }, { id: 'notes-course', icon: '📚', text: '当前课程', scope: 'course' }, { id: 'notes-class', icon: '👥', text: '当前班级', scope: 'class' }, { id: 'notes-domain', icon: '🌐', text: '整个域名', scope: 'domain' } ] }, { id: 'styles', icon: '🎨', text: '样式管理' } ]; menuItems.forEach(item => { const menuItem = this._createMenuItem(item); sidebar.appendChild(menuItem); }); return sidebar; } /** * 创建菜单项（支持子菜单） */ _createMenuItem(item) { const container = DOMHelper.createElement('div'); // 主菜单项 const menuItem = DOMHelper.createElement('div', { dataset: { tab: item.id }, style: { padding: '12px 20px', cursor: 'pointer', color: this.currentTab === item.id ? 'white' : '#a0aec0', backgroundColor: this.currentTab === item.id ? '#4a5568' : 'transparent', borderLeft: this.currentTab === item.id ? '3px solid #4299e1' : '3px solid transparent', fontWeight: this.currentTab === item.id ? 'bold' : 'normal', transition: 'all 0.2s', display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'space-between' } }); const leftContent = DOMHelper.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } }); const iconSpan = DOMHelper.createElement('span', { innerText: item.icon, style: { fontSize: '16px' } }); const textSpan = DOMHelper.createElement('span', { innerText: item.text, style: { fontSize: '14px' } }); leftContent.appendChild(iconSpan); leftContent.appendChild(textSpan); menuItem.appendChild(leftContent); // 如果有子菜单，添加展开图标 if (item.hasSubmenu) { const expandIcon = DOMHelper.createElement('span', { innerText: '▼', style: { fontSize: '10px', transition: 'transform 0.2s', transform: this.notesMenuExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } }); menuItem.appendChild(expandIcon); // 创建子菜单容器 const submenuContainer = DOMHelper.createElement('div', { style: { display: this.notesMenuExpanded ? 'block' : 'none', backgroundColor: '#1a202c' } }); item.submenu.forEach(subItem => { const subMenuItem = this._createSubMenuItem(subItem); submenuContainer.appendChild(subMenuItem); }); menuItem.addEventListener('click', () => { this.notesMenuExpanded = !this.notesMenuExpanded; expandIcon.style.transform = this.notesMenuExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'; submenuContainer.style.display = this.notesMenuExpanded ? 'block' : 'none'; }); container.appendChild(menuItem); container.appendChild(submenuContainer); } else { // 无子菜单的普通菜单项 menuItem.addEventListener('mouseenter', () => { if (this.currentTab !== item.id) { menuItem.style.backgroundColor = '#4a5568'; menuItem.style.color = '#e2e8f0'; } }); menuItem.addEventListener('mouseleave', () => { if (this.currentTab !== item.id) { menuItem.style.backgroundColor = 'transparent'; menuItem.style.color = '#a0aec0'; } }); menuItem.addEventListener('click', () => { this.currentTab = item.id; this._updateSidebarState(); this._renderContent(); }); container.appendChild(menuItem); } return container; } /** * 创建子菜单项 */ _createSubMenuItem(subItem) { const isActive = this.currentTab === 'notes' && this.notesScope === subItem.scope; const subMenuItem = DOMHelper.createElement('div', { dataset: { scope: subItem.scope }, style: { padding: '10px 20px 10px 50px', cursor: 'pointer', color: isActive ? '#4299e1' : '#718096', backgroundColor: isActive ? '#2d3748' : 'transparent', fontSize: '13px', transition: 'all 0.2s', display: 'flex', alignItems: 'center', gap: '8px' } }); const icon = DOMHelper.createElement('span', { innerText: subItem.icon, style: { fontSize: '14px' } }); const text = DOMHelper.createElement('span', { innerText: subItem.text }); subMenuItem.appendChild(icon); subMenuItem.appendChild(text); subMenuItem.addEventListener('mouseenter', () => { if (!(this.currentTab === 'notes' && this.notesScope === subItem.scope)) { subMenuItem.style.backgroundColor = '#2d3748'; subMenuItem.style.color = '#a0aec0'; } }); subMenuItem.addEventListener('mouseleave', () => { if (!(this.currentTab === 'notes' && this.notesScope === subItem.scope)) { subMenuItem.style.backgroundColor = 'transparent'; subMenuItem.style.color = '#718096'; } }); subMenuItem.addEventListener('click', async () => { this.currentTab = 'notes'; this.notesScope = subItem.scope; this.selectedNotes.clear(); await this._loadNotes(); this._updateSidebarState(); this._renderContent(); }); return subMenuItem; } /** * 更新侧边栏状态 */ _updateSidebarState() { const menuItems = this.modal.querySelectorAll('[data-tab]'); menuItems.forEach(item => { const isActive = item.dataset.tab === this.currentTab; item.style.color = isActive ? 'white' : '#a0aec0'; item.style.backgroundColor = isActive ? '#4a5568' : 'transparent'; item.style.borderLeft = isActive ? '3px solid #4299e1' : '3px solid transparent'; item.style.fontWeight = isActive ? 'bold' : 'normal'; }); } /** * 渲染内容区 */ _renderContent() { const headerTitle = document.getElementById('panel-header-title'); const contentBody = document.getElementById('panel-content-body'); if (this.currentTab === 'settings') { headerTitle.innerText = '⚙️ 设置'; this._renderSettingsPanel(contentBody); } else if (this.currentTab === 'notes') { headerTitle.innerText = '📝 管理笔记'; this._renderNotesPanel(contentBody); } else if (this.currentTab === 'styles') { headerTitle.innerText = '🎨 样式管理'; this._renderStylesPanel(contentBody); } } /** * 渲染设置面板 */ _renderSettingsPanel(container) { container.innerHTML = ''; const settingsContainer = DOMHelper.createElement('div', { style: { backgroundColor: 'white', borderRadius: '8px', padding: '24px', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)', marginBottom: '20px' } }); // 自动保存开关 const autoSaveSection = this._createSettingItem( '自动保存', '开启后会在输入停止一段时间后自动保存笔记', 'checkbox', 'autoSave', this.settings.autoSave ); settingsContainer.appendChild(autoSaveSection); // 自动保存延迟时间 const delaySection = this._createSettingItem( '自动保存延迟', '输入停止后多久开始保存（毫秒）', 'number', 'autoSaveDelay', this.settings.autoSaveDelay ); settingsContainer.appendChild(delaySection); container.appendChild(settingsContainer); // 添加保存按钮 const saveButtonContainer = DOMHelper.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' } }); const buttonConfig = this.config.get('panelSaveButton'); const saveButton = DOMHelper.createElement('button', { innerText: buttonConfig.text.save, style: { padding: buttonConfig.style.padding, border: buttonConfig.style.border, borderRadius: buttonConfig.style.borderRadius, backgroundColor: buttonConfig.colors.background, color: buttonConfig.colors.textColor, fontSize: buttonConfig.style.fontSize, fontWeight: buttonConfig.style.fontWeight, cursor: buttonConfig.style.cursor, transition: buttonConfig.style.transition, boxShadow: buttonConfig.colors.boxShadow } }); saveButton.addEventListener('mouseenter', () => { saveButton.style.backgroundColor = buttonConfig.colors.hoverBackground; saveButton.style.transform = 'translateY(-1px)'; saveButton.style.boxShadow = buttonConfig.colors.hoverBoxShadow; }); saveButton.addEventListener('mouseleave', () => { if (saveButton.innerText === buttonConfig.text.save) { saveButton.style.backgroundColor = buttonConfig.colors.background; saveButton.style.transform = 'translateY(0)'; saveButton.style.boxShadow = buttonConfig.colors.boxShadow; } }); saveButton.addEventListener('click', async () => { try { // 保存所有设置 await this.dbManager.saveSetting('autoSave', this.settings.autoSave); await this.dbManager.saveSetting('autoSaveDelay', this.settings.autoSaveDelay); // 显示成功提示 saveButton.innerText = buttonConfig.text.success; saveButton.style.backgroundColor = buttonConfig.colors.successBackground; setTimeout(() => { saveButton.innerText = buttonConfig.text.save; saveButton.style.backgroundColor = buttonConfig.colors.background; }, 2000); Logger.success('设置已保存'); } catch (error) { Logger.error('保存设置失败', error); saveButton.innerText = buttonConfig.text.error; saveButton.style.backgroundColor = buttonConfig.colors.errorBackground; setTimeout(() => { saveButton.innerText = buttonConfig.text.save; saveButton.style.backgroundColor = buttonConfig.colors.background; }, 2000); } }); saveButtonContainer.appendChild(saveButton); container.appendChild(saveButtonContainer); } /** * 创建设置项 */ _createSettingItem(label, description, type, key, value) { const item = DOMHelper.createElement('div', { style: { marginBottom: '24px', paddingBottom: '24px', borderBottom: '1px solid #e2e8f0' } }); const labelEl = DOMHelper.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' } }); const labelText = DOMHelper.createElement('span', { innerText: label, style: { fontSize: '16px', fontWeight: '600', color: '#2d3748' } }); let input; if (type === 'checkbox') { input = DOMHelper.createElement('input', { type: 'checkbox', checked: value, style: { width: '20px', height: '20px', cursor: 'pointer' } }); input.addEventListener('change', () => { this.settings[key] = input.checked; }); } else if (type === 'number') { input = DOMHelper.createElement('input', { type: 'number', value: value, style: { width: '120px', padding: '6px 12px', border: '1px solid #cbd5e0', borderRadius: '4px', fontSize: '14px' } }); input.addEventListener('change', () => { const numValue = parseInt(input.value); if (numValue > 0) { this.settings[key] = numValue; } }); } labelEl.appendChild(labelText); labelEl.appendChild(input); const desc = DOMHelper.createElement('div', { innerText: description, style: { fontSize: '13px', color: '#718096', marginTop: '4px' } }); item.appendChild(labelEl); item.appendChild(desc); return item; } /** * 渲染笔记管理面板 */ _renderNotesPanel(container) { container.innerHTML = ''; container.style.padding = '0'; if (this.notesList.length === 0) { const emptyMsg = DOMHelper.createElement('div', { innerText: '📭 暂无笔记', style: { textAlign: 'center', color: '#a0aec0', padding: '60px 20px', fontSize: '16px' } }); container.appendChild(emptyMsg); return; } // 操作栏 const toolbar = DOMHelper.createElement('div', { style: { padding: '15px 30px', backgroundColor: 'white', borderBottom: '1px solid #e2e8f0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }); const info = DOMHelper.createElement('span', { id: 'notes-info-text', innerText: `共 ${this.notesList.length} 条笔记`, style: { fontSize: '14px', color: '#718096' } }); const actions = DOMHelper.createElement('div', { style: { display: 'flex', gap: '10px' } }); const selectAllBtn = DOMHelper.createElement('button', { innerText: '全选', style: { padding: '6px 14px', border: '1px solid #cbd5e0', borderRadius: '4px', backgroundColor: 'white', cursor: 'pointer', fontSize: '13px', fontWeight: '500', transition: 'all 0.2s' } }); const deleteBtn = DOMHelper.createElement('button', { innerText: '删除选中', style: { padding: '6px 14px', border: 'none', borderRadius: '4px', backgroundColor: '#f56565', color: 'white', cursor: 'pointer', fontSize: '13px', fontWeight: '500', transition: 'all 0.2s' } }); selectAllBtn.addEventListener('click', () => this._toggleSelectAll()); deleteBtn.addEventListener('click', () => this._deleteSelected()); actions.appendChild(selectAllBtn); actions.appendChild(deleteBtn); toolbar.appendChild(info); toolbar.appendChild(actions); // 笔记列表 const notesList = DOMHelper.createElement('div', { id: 'notes-list-content', style: { padding: '20px 30px', overflow: 'auto', flex: '1' } }); if (this.notesScope === 'current') { // 当前页面：直接显示笔记列表 this.notesList.forEach(note => { const noteItem = this._createNoteItem(note); notesList.appendChild(noteItem); }); } else { // 其他范围：按 workKey 分组显示 const groupedNotes = this._groupNotesByWorkKey(this.notesList); Object.entries(groupedNotes).forEach(([workKey, notes]) => { const group = this._createNotesGroup(workKey, notes); notesList.appendChild(group); }); } container.appendChild(toolbar); container.appendChild(notesList); } /** * 创建笔记项 */ _createNoteItem(note) { const item = DOMHelper.createElement('div', { style: { padding: '16px', marginBottom: '12px', border: '1px solid #e2e8f0', borderRadius: '8px', backgroundColor: this.selectedNotes.has(note.id) ? '#ebf8ff' : 'white', cursor: 'pointer', transition: 'all 0.2s' } }); item.addEventListener('mouseenter', () => { if (!this.selectedNotes.has(note.id)) { item.style.backgroundColor = '#f7fafc'; } }); item.addEventListener('mouseleave', () => { if (!this.selectedNotes.has(note.id)) { item.style.backgroundColor = 'white'; } }); const header = DOMHelper.createElement('div', { style: { display: 'flex', alignItems: 'center', marginBottom: '10px', gap: '10px' } }); const checkbox = DOMHelper.createElement('input', { type: 'checkbox', checked: this.selectedNotes.has(note.id), style: { width: '16px', height: '16px', cursor: 'pointer' } }); checkbox.addEventListener('change', (e) => { e.stopPropagation(); if (checkbox.checked) { this.selectedNotes.add(note.id); item.style.backgroundColor = '#ebf8ff'; } else { this.selectedNotes.delete(note.id); item.style.backgroundColor = 'white'; } this._updateNotesInfo(); }); const questionId = DOMHelper.createElement('span', { innerText: note.questionId, style: { fontSize: '14px', fontWeight: '600', color: '#4299e1', flex: '1' } }); const time = DOMHelper.createElement('span', { innerText: new Date(note.timestamp).toLocaleString('zh-CN'), style: { fontSize: '12px', color: '#a0aec0' } }); header.appendChild(checkbox); header.appendChild(questionId); header.appendChild(time); const content = DOMHelper.createElement('div', { innerText: note.content || '(空笔记)', style: { fontSize: '14px', color: note.content ? '#2d3748' : '#a0aec0', lineHeight: '1.6', maxHeight: '80px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'pre-wrap' } }); item.appendChild(header); item.appendChild(content); item.addEventListener('click', (e) => { if (e.target !== checkbox) { checkbox.checked = !checkbox.checked; checkbox.dispatchEvent(new Event('change')); } }); return item; } /** * 切换全选 */ _toggleSelectAll() { if (this.selectedNotes.size === this.notesList.length) { this.selectedNotes.clear(); } else { this.notesList.forEach(note => this.selectedNotes.add(note.id)); } this._renderContent(); } /** * 删除选中的笔记 */ async _deleteSelected() { if (this.selectedNotes.size === 0) { alert('请先选择要删除的笔记'); return; } if (!confirm(`确定要删除选中的 ${this.selectedNotes.size} 条笔记吗？\n此操作不可恢复！`)) { return; } try { const noteIds = Array.from(this.selectedNotes); await this.dbManager.deleteNotes(noteIds); Logger.success(`已删除 ${noteIds.length} 条笔记`); this.selectedNotes.clear(); await this._loadNotes(); this._renderContent(); } catch (error) { Logger.error('删除笔记失败', error); alert('删除笔记失败，请查看控制台了解详情'); } } /** * 更新笔记信息 */ _updateNotesInfo() { const info = document.getElementById('notes-info-text'); if (info) { const selectedText = this.selectedNotes.size > 0 ? `，已选中 ${this.selectedNotes.size} 条` : ''; info.innerText = `共 ${this.notesList.length} 条笔记${selectedText}`; } } /** * 按 workKey 分组笔记 */ _groupNotesByWorkKey(notes) { const groups = {}; notes.forEach(note => { if (!groups[note.workKey]) { groups[note.workKey] = []; } groups[note.workKey].push(note); }); // 按时间戳排序每个组 Object.keys(groups).forEach(key => { groups[key].sort((a, b) => b.timestamp - a.timestamp); }); return groups; } /** * 创建笔记组（用于域名模式） */ _createNotesGroup(workKey, notes) { const group = DOMHelper.createElement('div', { style: { marginBottom: '30px' } }); // 组标题 const groupHeader = DOMHelper.createElement('div', { style: { padding: '12px 16px', backgroundColor: '#e3f2fd', borderRadius: '8px', marginBottom: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', transition: 'all 0.2s' } }); const headerLeft = DOMHelper.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } }); const collapseIcon = DOMHelper.createElement('span', { innerText: '▼', style: { fontSize: '12px', color: '#1976d2', transition: 'transform 0.2s' } }); const groupTitle = DOMHelper.createElement('span', { innerText: `📄 ${workKey}`, style: { fontSize: '14px', fontWeight: '600', color: '#1976d2' } }); const groupCount = DOMHelper.createElement('span', { innerText: `(${notes.length} 条)`, style: { fontSize: '13px', color: '#64b5f6', marginLeft: '8px' } }); headerLeft.appendChild(collapseIcon); headerLeft.appendChild(groupTitle); headerLeft.appendChild(groupCount); // 全选此组的按钮 const selectGroupBtn = DOMHelper.createElement('button', { innerText: '全选', style: { padding: '4px 10px', border: '1px solid #2196f3', borderRadius: '4px', backgroundColor: 'white', color: '#2196f3', cursor: 'pointer', fontSize: '12px', fontWeight: '500', transition: 'all 0.2s' } }); selectGroupBtn.addEventListener('click', (e) => { e.stopPropagation(); const allSelected = notes.every(note => this.selectedNotes.has(note.id)); if (allSelected) { notes.forEach(note => this.selectedNotes.delete(note.id)); selectGroupBtn.innerText = '全选'; } else { notes.forEach(note => this.selectedNotes.add(note.id)); selectGroupBtn.innerText = '取消'; } this._renderContent(); }); groupHeader.appendChild(headerLeft); groupHeader.appendChild(selectGroupBtn); // 笔记列表容器 const notesContainer = DOMHelper.createElement('div', { style: { display: 'block', paddingLeft: '20px' } }); notes.forEach(note => { const noteItem = this._createNoteItem(note); notesContainer.appendChild(noteItem); }); // 折叠/展开功能 let isCollapsed = false; groupHeader.addEventListener('click', (e) => { if (e.target === selectGroupBtn) return; isCollapsed = !isCollapsed; notesContainer.style.display = isCollapsed ? 'none' : 'block'; collapseIcon.style.transform = isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'; }); group.appendChild(groupHeader); group.appendChild(notesContainer); return group; } /** * 渲染样式管理面板 */ async _renderStylesPanel(container) { container.innerHTML = ''; // 样式配置的分类 const styleCategories = [ { title: '答案按钮样式', key: 'answerButton', fields: [ { name: 'fontSize', label: '字体大小', type: 'text', path: 'style.fontSize' }, { name: 'padding', label: '内边距', type: 'text', path: 'style.padding' }, { name: 'borderRadius', label: '圆角半径', type: 'text', path: 'style.borderRadius' }, { name: 'showBackground', label: '显示按钮背景色', type: 'color', path: 'colors.showBackground' }, { name: 'hideBackground', label: '隐藏按钮背景色', type: 'color', path: 'colors.hideBackground' } ] }, { title: '笔记按钮样式', key: 'noteButton', fields: [ { name: 'fontSize', label: '字体大小', type: 'text', path: 'style.fontSize' }, { name: 'padding', label: '内边距', type: 'text', path: 'style.padding' }, { name: 'showBackground', label: '显示按钮背景色', type: 'color', path: 'colors.showBackground' }, { name: 'hideBackground', label: '隐藏按钮背景色', type: 'color', path: 'colors.hideBackground' } ] }, { title: '保存笔记按钮样式', key: 'saveNoteButton', fields: [ { name: 'fontSize', label: '字体大小', type: 'text', path: 'style.fontSize' }, { name: 'padding', label: '内边距', type: 'text', path: 'style.padding' }, { name: 'background', label: '背景色', type: 'color', path: 'colors.background' } ] }, { title: '笔记编辑器样式', key: 'noteEditor', fields: [ { name: 'width', label: '宽度', type: 'text', path: 'width' }, { name: 'minHeight', label: '最小高度', type: 'text', path: 'minHeight' }, { name: 'maxHeight', label: '最大高度', type: 'text', path: 'maxHeight' }, { name: 'fontSize', label: '字体大小', type: 'text', path: 'fontSize' }, { name: 'backgroundColor', label: '背景色', type: 'color', path: 'backgroundColor' }, { name: 'borderColor', label: '边框颜色', type: 'color', path: 'borderColor' } ] } ]; // 加载已保存的样式配置 const savedStyles = await this.dbManager.getSetting('customStyles', {}); // 创建滚动容器 const scrollContainer = DOMHelper.createElement('div', { style: { overflow: 'auto', padding: '20px' } }); // 为每个分类创建配置区块 styleCategories.forEach(category => { const section = this._createStyleSection(category, savedStyles); scrollContainer.appendChild(section); }); container.appendChild(scrollContainer); // 添加保存和重置按钮 const buttonContainer = DOMHelper.createElement('div', { style: { padding: '20px', borderTop: '1px solid #e2e8f0', display: 'flex', justifyContent: 'space-between', backgroundColor: 'white' } }); const resetButton = DOMHelper.createElement('button', { innerText: '🔄 重置为默认', style: { padding: '10px 20px', border: '1px solid #cbd5e0', borderRadius: '6px', backgroundColor: 'white', color: '#718096', fontSize: '14px', fontWeight: '600', cursor: 'pointer', transition: 'all 0.2s' } }); resetButton.addEventListener('click', async () => { if (confirm('确定要重置所有样式为默认值吗？')) { await this.dbManager.saveSetting('customStyles', {}); Logger.success('样式已重置'); this._renderStylesPanel(container); } }); const buttonConfig = this.config.get('panelSaveButton'); const saveButton = DOMHelper.createElement('button', { innerText: buttonConfig.text.save, style: { padding: buttonConfig.style.padding, border: buttonConfig.style.border, borderRadius: buttonConfig.style.borderRadius, backgroundColor: buttonConfig.colors.background, color: buttonConfig.colors.textColor, fontSize: buttonConfig.style.fontSize, fontWeight: buttonConfig.style.fontWeight, cursor: buttonConfig.style.cursor, transition: buttonConfig.style.transition, boxShadow: buttonConfig.colors.boxShadow } }); saveButton.addEventListener('click', async () => { try { const customStyles = {}; // 收集所有表单数据 styleCategories.forEach(category => { category.fields.forEach(field => { const input = document.getElementById(`style-${category.key}-${field.name}`); if (input && input.value) { if (!customStyles[category.key]) { customStyles[category.key] = {}; } // 设置嵌套属性 const pathParts = field.path.split('.'); let target = customStyles[category.key]; for (let i = 0; i < pathParts.length - 1; i++) { if (!target[pathParts[i]]) { target[pathParts[i]] = {}; } target = target[pathParts[i]]; } target[pathParts[pathParts.length - 1]] = input.value; } }); }); await this.dbManager.saveSetting('customStyles', customStyles); saveButton.innerText = buttonConfig.text.success; saveButton.style.backgroundColor = buttonConfig.colors.successBackground; setTimeout(() => { saveButton.innerText = buttonConfig.text.save; saveButton.style.backgroundColor = buttonConfig.colors.background; }, 2000); Logger.success('样式已保存，刷新页面后生效'); } catch (error) { Logger.error('保存样式失败', error); saveButton.innerText = buttonConfig.text.error; saveButton.style.backgroundColor = buttonConfig.colors.errorBackground; setTimeout(() => { saveButton.innerText = buttonConfig.text.save; saveButton.style.backgroundColor = buttonConfig.colors.background; }, 2000); } }); buttonContainer.appendChild(resetButton); buttonContainer.appendChild(saveButton); container.appendChild(buttonContainer); } /** * 创建样式配置区块 */ _createStyleSection(category, savedStyles) { const section = DOMHelper.createElement('div', { style: { backgroundColor: 'white', borderRadius: '8px', padding: '20px', marginBottom: '20px', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)' } }); const title = DOMHelper.createElement('h3', { innerText: category.title, style: { margin: '0 0 16px 0', fontSize: '16px', fontWeight: '600', color: '#2d3748', borderBottom: '2px solid #4299e1', paddingBottom: '8px' } }); section.appendChild(title); category.fields.forEach(field => { const fieldGroup = DOMHelper.createElement('div', { style: { marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }); const label = DOMHelper.createElement('label', { innerText: field.label, style: { fontSize: '14px', color: '#4a5568', fontWeight: '500', flex: '1' } }); // 获取当前值（优先使用保存的值，否则使用默认配置值） let currentValue; if (savedStyles[category.key]) { const pathParts = field.path.split('.'); let value = savedStyles[category.key]; for (let part of pathParts) { value = value?.[part]; } currentValue = value; } if (!currentValue) { const pathParts = field.path.split('.'); let value = this.config.get(category.key); for (let part of pathParts) { value = value?.[part]; } currentValue = value || ''; } const input = DOMHelper.createElement('input', { type: field.type, value: currentValue, id: `style-${category.key}-${field.name}`, style: { width: field.type === 'color' ? '60px' : '150px', padding: '6px 10px', border: '1px solid #cbd5e0', borderRadius: '4px', fontSize: '13px' } }); fieldGroup.appendChild(label); fieldGroup.appendChild(input); section.appendChild(fieldGroup); }); return section; } /** * 关闭模态框 */ _close() { if (this.modal && this.modal.parentNode) { document.body.removeChild(this.modal); this.modal = null; } } } // ===================== DOM 工具类 ===================== class DOMHelper { static createElement(tag, attributes = {}) { const element = document.createElement(tag); Object.entries(attributes).forEach(([key, value]) => { if (key === 'style' && typeof value === 'object') { Object.assign(element.style, value); } else if (key === 'dataset' && typeof value === 'object') { Object.entries(value).forEach(([dataKey, dataValue]) => { element.dataset[dataKey] = dataValue; }); } else { element[key] = value; } }); return element; } static insertElement(element, parent, nextSibling = null) { if (nextSibling) { parent.insertBefore(element, nextSibling); } else { parent.appendChild(element); } } static removeElement(element) { element?.parentNode?.removeChild(element); } static ensureRelativePosition(element) { if (getComputedStyle(element).position === 'static') { element.style.position = 'relative'; } } } // ===================== 样式生成器 ===================== class StyleGenerator { constructor(config) { this.config = config; } /** * 获取单个答案按钮的样式 * @param {boolean} isHidden - 是否为隐藏状态 * @returns {Object} 样式对象 */ getAnswerButtonStyle(isHidden = true) { const position = this.config.get('answerButton.position'); const style = this.config.get('answerButton.style'); const colors = this.config.get('answerButton.colors'); return { marginLeft: position.marginLeft, marginRight: position.marginRight, marginTop: position.marginTop, marginBottom: position.marginBottom, verticalAlign: position.verticalAlign, padding: style.padding, border: style.border, borderRadius: style.borderRadius, background: isHidden ? colors.showBackground : colors.hideBackground, color: colors.textColor, fontSize: style.fontSize, fontWeight: style.fontWeight, cursor: style.cursor, transition: style.transition, display: 'inline-block' }; } /** * 获取笔记按钮的样式 * @param {boolean} isVisible - 笔记是否可见 * @returns {Object} 样式对象 */ getNoteButtonStyle(isVisible = false) { const position = this.config.get('noteButton.position'); const style = this.config.get('noteButton.style'); const colors = this.config.get('noteButton.colors'); return { marginLeft: position.marginLeft, marginRight: position.marginRight, marginTop: position.marginTop, marginBottom: position.marginBottom, verticalAlign: position.verticalAlign, padding: style.padding, border: style.border, borderRadius: style.borderRadius, background: isVisible ? colors.hideBackground : colors.showBackground, color: colors.textColor, fontSize: style.fontSize, fontWeight: style.fontWeight, cursor: style.cursor, transition: style.transition, display: 'inline-block' }; } /** * 获取保存笔记按钮的样式 * @returns {Object} 样式对象 */ getSaveNoteButtonStyle() { const position = this.config.get('saveNoteButton.position'); const style = this.config.get('saveNoteButton.style'); const colors = this.config.get('saveNoteButton.colors'); return { marginLeft: position.marginLeft, marginRight: position.marginRight, marginTop: position.marginTop, marginBottom: position.marginBottom, verticalAlign: position.verticalAlign, padding: style.padding, border: style.border, borderRadius: style.borderRadius, background: colors.background, color: colors.textColor, fontSize: style.fontSize, fontWeight: style.fontWeight, cursor: style.cursor, transition: style.transition, display: 'inline-block' }; } /** * 获取全局按钮的样式 * @param {boolean} isHidden - 是否为全部隐藏状态 * @returns {Object} 样式对象 */ getGlobalButtonStyle(isHidden = true) { const position = this.config.get('globalButton.position'); const style = this.config.get('globalButton.style'); const colors = this.config.get('globalButton.colors'); return { position: 'absolute', top: position.top, right: position.right, zIndex: position.zIndex, border: style.border, borderRadius: style.borderRadius, padding: style.padding, fontSize: style.fontSize, fontWeight: style.fontWeight, color: colors.textColor, cursor: style.cursor, transition: style.transition, background: isHidden ? colors.showAllBackground : colors.hideAllBackground }; } /** * 获取笔记编辑器的样式 * @returns {Object} 样式对象 */ getNoteEditorStyle() { const noteConfig = this.config.get('noteEditor'); return { width: noteConfig.width || '100%', minHeight: noteConfig.minHeight, maxHeight: noteConfig.maxHeight, padding: noteConfig.padding, marginTop: noteConfig.marginTop, marginBottom: noteConfig.marginBottom, fontSize: noteConfig.fontSize, border: `${noteConfig.borderWidth} ${noteConfig.borderStyle} ${noteConfig.borderColor}`, borderRadius: noteConfig.borderRadius, backgroundColor: noteConfig.backgroundColor, color: noteConfig.textColor, resize: noteConfig.resize, fontFamily: noteConfig.fontFamily, outline: 'none', display: 'none', transition: 'border-color 0.2s', boxSizing: 'border-box' }; } /** * 获取管理按钮的样式 * @returns {Object} 样式对象 */ getManageButtonStyle() { const position = this.config.get('manageButton.position'); const style = this.config.get('manageButton.style'); const colors = this.config.get('manageButton.colors'); return { position: 'absolute', top: position.top, right: position.right, zIndex: position.zIndex, border: style.border, borderRadius: style.borderRadius, padding: style.padding, fontSize: style.fontSize, fontWeight: style.fontWeight, color: colors.textColor, cursor: style.cursor, transition: style.transition, background: colors.background }; } } // ===================== 答案块控制器 ===================== class AnswerBlockController { constructor(block, config, styleGenerator, dbManager, workKey) { this.block = block; this.config = config; this.styleGenerator = styleGenerator; this.dbManager = dbManager; this.workKey = workKey; this.parent = block.parentNode; this.nextSibling = block.nextSibling; this.originalHTML = block.outerHTML; this.toggleButton = null; this.noteButton = null; this.saveNoteButton = null; this.noteEditor = null; this.buttonContainer = null; this.currentAnswerBlock = null; // 跟踪当前显示的答案块 this.isHidden = false; this.questionId = this._extractQuestionId(); } _extractQuestionId() { // 从父元素中查找包含 question 的 id let element = this.block; while (element && element !== document.body) { if (element.id && element.id.startsWith('question')) { return element.id; } element = element.parentElement; } // 如果没找到，生成一个唯一标识 return `question_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; } async initialize() { this._hideBlockInitial(); await this._createButtons(); await this._createNoteEditor(); return this.buttonContainer; } _hideBlockInitial() { // 初始化时删除原始答案块 DOMHelper.removeElement(this.block); this.currentAnswerBlock = null; this.isHidden = true; } async _createButtons() { // 创建按钮容器 this.buttonContainer = DOMHelper.createElement('div', { style: { display: 'inline-block', marginLeft: this.config.get('answerButton.position.marginLeft'), marginTop: this.config.get('answerButton.position.marginTop'), verticalAlign: this.config.get('answerButton.position.verticalAlign') } }); // 创建答案切换按钮 this._createAnswerToggleButton(); // 创建笔记切换按钮 this._createNoteToggleButton(); // 创建保存笔记按钮 this._createSaveNoteButton(); // 插入按钮容器 DOMHelper.insertElement(this.buttonContainer, this.parent, this.nextSibling); } _createAnswerToggleButton() { const buttonText = this.config.get('answerButton.text'); this.toggleButton = DOMHelper.createElement('button', { innerText: buttonText.show, style: this.styleGenerator.getAnswerButtonStyle(true), title: '点击显示/隐藏当前答案块', dataset: { isHidden: 'true', originalHTML: this.originalHTML } }); this.toggleButton.addEventListener('click', () => this._handleAnswerToggle()); this.buttonContainer.appendChild(this.toggleButton); } _createNoteToggleButton() { const buttonText = this.config.get('noteButton.text'); this.noteButton = DOMHelper.createElement('button', { innerText: buttonText.show, style: this.styleGenerator.getNoteButtonStyle(false), title: '点击显示/隐藏笔记编辑器', dataset: { isVisible: 'false' } }); this.noteButton.addEventListener('click', () => this._handleNoteToggle()); this.buttonContainer.appendChild(this.noteButton); } _createSaveNoteButton() { const buttonText = this.config.get('saveNoteButton.text'); this.saveNoteButton = DOMHelper.createElement('button', { innerText: buttonText, style: this.styleGenerator.getSaveNoteButtonStyle(), title: '手动保存当前笔记' }); this.saveNoteButton.addEventListener('click', async () => { await this.noteEditor.save(); Logger.success('💾 笔记已保存'); }); this.buttonContainer.appendChild(this.saveNoteButton); } async _createNoteEditor() { this.noteEditor = new NoteEditor( this.questionId, this.workKey, this.dbManager, this.config, this.styleGenerator ); const editorElement = await this.noteEditor.create(); // 将编辑器插入到按钮容器之后 DOMHelper.insertElement(editorElement, this.parent, this.buttonContainer.nextSibling); } _handleAnswerToggle() { if (this.isHidden) { this._showBlock(); } else { this._hideBlock(); } this._updateAnswerButtonState(); } _showBlock() { // 如果已经有显示的答案块，先删除它（防止重复） if (this.currentAnswerBlock && this.currentAnswerBlock.parentNode) { DOMHelper.removeElement(this.currentAnswerBlock); } const tempContainer = document.createElement('div'); tempContainer.innerHTML = this.originalHTML; const restoredBlock = tempContainer.firstChild; // 保存对新创建的答案块的引用 this.currentAnswerBlock = restoredBlock; // 插入到笔记编辑器之后（如果可见）或按钮容器之后 const insertAfter = this.noteEditor.isVisible ? this.noteEditor.getElement().nextSibling : this.buttonContainer.nextSibling; DOMHelper.insertElement(restoredBlock, this.parent, insertAfter); this.isHidden = false; } _hideBlock() { // 删除当前显示的答案块 if (this.currentAnswerBlock && this.currentAnswerBlock.parentNode) { DOMHelper.removeElement(this.currentAnswerBlock); this.currentAnswerBlock = null; } this.isHidden = true; } _updateAnswerButtonState() { const buttonText = this.config.get('answerButton.text'); const colors = this.config.get('answerButton.colors'); this.toggleButton.innerText = this.isHidden ? buttonText.show : buttonText.hide; this.toggleButton.style.background = this.isHidden ? colors.showBackground : colors.hideBackground; this.toggleButton.dataset.isHidden = String(this.isHidden); } _handleNoteToggle() { this.noteEditor.toggle(); this._updateNoteButtonState(); } _updateNoteButtonState() { const buttonText = this.config.get('noteButton.text'); const colors = this.config.get('noteButton.colors'); this.noteButton.innerText = this.noteEditor.isVisible ? buttonText.hide : buttonText.show; this.noteButton.style.background = this.noteEditor.isVisible ? colors.hideBackground : colors.showBackground; this.noteButton.dataset.isVisible = String(this.noteEditor.isVisible); } toggle() { this._handleAnswerToggle(); } getState() { return this.isHidden; } } // ===================== 全局控制器 ===================== class GlobalController { constructor(container, controllers, config, styleGenerator, dbManager, workKey) { this.container = container; this.controllers = controllers; this.config = config; this.styleGenerator = styleGenerator; this.dbManager = dbManager; this.workKey = workKey; this.globalButton = null; this.manageButton = null; } initialize() { if (!this.container) return null; DOMHelper.ensureRelativePosition(this.container); this._createGlobalButton(); this._createManageButton(); return this.globalButton; } _createGlobalButton() { const buttonText = this.config.get('globalButton.text'); this.globalButton = DOMHelper.createElement('button', { innerText: buttonText.showAll, style: this.styleGenerator.getGlobalButtonStyle(true), title: '点击一键显示/隐藏所有答案块' }); this.globalButton.addEventListener('click', () => this._handleGlobalToggle()); this.container.appendChild(this.globalButton); } _createManageButton() { const buttonText = this.config.get('manageButton.text'); this.manageButton = DOMHelper.createElement('button', { innerText: buttonText, style: this.styleGenerator.getManageButtonStyle(), title: '打开控制面板：设置和笔记管理' }); this.manageButton.addEventListener('click', () => this._handleManageClick()); this.container.appendChild(this.manageButton); } _handleManageClick() { const controlPanel = new ControlPanelUI(this.dbManager, this.workKey, this.config); controlPanel.show(); } _handleGlobalToggle() { const allHidden = this.controllers.every(ctrl => ctrl.getState()); this.controllers.forEach(controller => { const shouldToggle = allHidden ? controller.getState() : !controller.getState(); if (shouldToggle) { controller.toggle(); } }); this._updateGlobalButtonState(!allHidden); } _updateGlobalButtonState(allHidden) { const buttonText = this.config.get('globalButton.text'); const colors = this.config.get('globalButton.colors'); this.globalButton.innerText = allHidden ? buttonText.showAll : buttonText.hideAll; this.globalButton.style.background = allHidden ? colors.showAllBackground : colors.hideAllBackground; } } // ===================== 主应用类 ===================== class ChaoxingAnswerHider { constructor(customConfig = {}) { this.config = new Config(customConfig); this.styleGenerator = new StyleGenerator(this.config); this.dbManager = new DatabaseManager(this.config); this.answerControllers = []; this.globalController = null; this.workKey = URLParser.getWorkKey(); } async initialize() { try { // 初始化数据库 await this.dbManager.init(); Logger.success('数据库初始化成功'); // 加载自定义样式配置 await this._loadCustomStyles(); await this._waitForPageLoad(); const elements = this._findElements(); if (!this._validateElements(elements)) { return; } await this._initializeAnswerBlocks(elements.answerBlocks); this._initializeGlobalControl(elements.container); this._logSuccess(elements.answerBlocks.length, !!elements.container); } catch (error) { Logger.error('初始化失败', error); } } async _loadCustomStyles() { try { const customStyles = await this.dbManager.getSetting('customStyles', {}); if (customStyles && Object.keys(customStyles).length > 0) { // 将自定义样式合并到配置中 this.config = new Config(this.config._deepMerge(this.config.config, customStyles)); this.styleGenerator = new StyleGenerator(this.config); Logger.log('✨ 已加载自定义样式配置'); } } catch (error) { Logger.error('加载自定义样式失败', error); } } _waitForPageLoad() { const delay = this.config.get('delays.initialization'); return new Promise(resolve => setTimeout(resolve, delay)); } _findElements() { return { container: document.querySelector(this.config.get('selectors.container')), answerBlocks: document.querySelectorAll(this.config.get('selectors.answerBlock')) }; } _validateElements({ container, answerBlocks }) { if (answerBlocks.length === 0) { Logger.log(this.config.get('messages.noAnswerBlocks')); return false; } if (!container) { Logger.log(this.config.get('messages.noContainer'), 'warn'); } return true; } async _initializeAnswerBlocks(blocks) { for (const block of blocks) { const controller = new AnswerBlockController( block, this.config, this.styleGenerator, this.dbManager, this.workKey ); await controller.initialize(); this.answerControllers.push(controller); } } _initializeGlobalControl(container) { this.globalController = new GlobalController( container, this.answerControllers, this.config, this.styleGenerator, this.dbManager, this.workKey ); this.globalController.initialize(); } _logSuccess(count, hasContainer) { Logger.success(this.config.get('messages.success')); Logger.log(this.config.get('messages.hiddenCount')(count)); Logger.log(this.config.get('messages.globalButton')(hasContainer)); Logger.log(`📝 笔记功能已启用，数据存储标识: ${this.workKey}`); } } // ===================== 启动应用 ===================== const app = new ChaoxingAnswerHider(); app.initialize(); })();