“外行人士模式”HTML代码示例

禁止任何形式的转载或商业使用让非技术人员也能像玩积木一样轻松调整词汇分类。html!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title外行人士 · 词语积木分类库/title!-- Font Awesome (icons) --link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.cssstyle* {box-sizing: border-box;margin: 0;padding: 0;}body {background: #f4f7fc;font-family: Segoe UI, Roboto, system-ui, -apple-system, sans-serif;padding: 2rem 1.5rem;color: #1e293b;}.container {max-width: 1400px;margin: 0 auto;}/* 头部 */.header {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-bottom: 2.5rem;gap: 1rem;}.header h1 {font-weight: 500;font-size: 2rem;letter-spacing: -0.02em;display: flex;align-items: center;gap: 0.75rem;}.header h1 i {color: #3b82f6;font-size: 2.2rem;}.mode-badge {background: #dbeafe;color: #1e4f8a;padding: 0.5rem 1.2rem;border-radius: 40px;font-weight: 500;font-size: 0.95rem;display: flex;align-items: center;gap: 0.6rem;box-shadow: 0 2px 6px rgba(0,0,0,0.03);border: 1px solid #bfdbfe;}.mode-badge i {font-size: 1.1rem;}/* 分类网格 (积木式) */.category-grid {display: flex;flex-direction: column;gap: 2rem;}.category-block {background: white;border-radius: 28px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 20, 40, 0.04);padding: 1.5rem 1.8rem 1.8rem;transition: box-shadow 0.2s;border: 1px solid #e9edf4;}.category-block:hover {box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);}.category-header {display: flex;align-items: center;gap: 0.75rem;margin-bottom: 1.25rem;flex-wrap: wrap;}.category-header h2 {font-size: 1.3rem;font-weight: 600;background: #f1f5f9;padding: 0.2rem 1rem;border-radius: 30px;display: inline-block;letter-spacing: 0.3px;color: #0f172a;border: 1px solid #e2e8f0;}.category-header .legal-tag {font-size: 0.7rem;background: #fee2e2;color: #b91c1c;padding: 0.2rem 0.8rem;border-radius: 30px;font-weight: 500;border: 1px solid #fecaca;letter-spacing: 0.3px;}.category-header .word-count {margin-left: auto;font-size: 0.85rem;color: #64748b;background: #f8fafc;padding: 0.2rem 1rem;border-radius: 30px;border: 1px solid #e2e8f0;}/* 词条积木容器 */.word-bricks {display: flex;flex-wrap: wrap;gap: 0.8rem 1rem;min-height: 4rem;padding: 0.25rem 0;transition: background 0.1s;}/* 单个词条 积木块 */.word-brick {background: white;border: 1px solid #d1d9e6;border-radius: 60px;padding: 0.45rem 1.2rem 0.45rem 1.4rem;display: inline-flex;align-items: center;gap: 0.65rem;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);transition: all 0.15s;cursor: grab;font-size: 0.95rem;font-weight: 480;background: #ffffff;backdrop-filter: blur(2px);user-select: none;}.word-brick:active {cursor: grabbing;box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);border-color: #94a3b8;transform: scale(0.97);}.word-brick.dragging {opacity: 0.4;transform: scale(0.95);border-style: dashed;}.word-brick .brick-text {display: inline-block;pointer-events: none;}/* 分类下拉选择器 (积木风格) */.brick-selector {border: none;background: #f1f5f9;padding: 0.2rem 0.6rem 0.2rem 0.9rem;border-radius: 40px;font-size: 0.75rem;font-weight: 500;color: #1e293b;border: 1px solid #d1d9e6;cursor: pointer;outline: none;transition: 0.1s;height: 28px;width: auto;max-width: 110px;background-image: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width12 height12 viewBox0 0 12 8path fill%2347556b dM6 8L0 0h12z//svg);background-repeat: no-repeat;background-position: right 8px center;background-size: 12px;padding-right: 28px;appearance: none;-webkit-appearance: none;background-color: #f8fafc;border: 1px solid #d1d9e6;}.brick-selector:hover {background-color: #eef2f6;border-color: #b9c3d1;}.brick-selector:focus {border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59,130,246,0.2);}.brick-selector option {background: white;color: #0f172a;}/* 法律词汇特殊样式 (灰色锁定感) */.word-brick.legal-brick {background: #f1f3f5;border-color: #cbd5e1;color: #475569;cursor: default;opacity: 0.8;}.word-brick.legal-brick .brick-selector {background-color: #e2e8f0;border-color: #b9c3d1;color: #334155;cursor: not-allowed;opacity: 0.7;pointer-events: none;}.word-brick.legal-brick i {color: #94a3b8;font-size: 0.8rem;margin-right: 0.1rem;}.word-brick .brick-icon {color: #64748b;font-size: 0.85rem;pointer-events: none;opacity: 0.7;}.word-brick.legal-brick .brick-icon {color: #94a3b8;}/* 拖拽占位空状态 */.empty-hint {color: #94a3b8;font-size: 0.9rem;padding: 0.5rem 1rem;font-style: italic;background: #f8fafc;border-radius: 60px;border: 1px dashed #d1d9e6;}/* 底部说明 */.footer-note {margin-top: 3.5rem;border-top: 1px solid #e2e8f0;padding-top: 1.5rem;display: flex;flex-wrap: wrap;justify-content: space-between;color: #475569;font-size: 0.9rem;}.footer-note i {margin-right: 0.3rem;color: #3b82f6;}.footer-note .hint {background: #f1f5f9;padding: 0.3rem 1rem;border-radius: 40px;}/* 响应式 */media (max-width: 700px) {body { padding: 1.2rem; }.category-block { padding: 1.2rem; }.word-brick { padding: 0.3rem 1rem 0.3rem 1.2rem; gap: 0.5rem; }}/style/headbodydiv classcontainer!-- 头部 外行模式徽章 --div classheaderh1i classfas fa-puzzle-piece/i词语积木库span stylefont-size: 0.9rem; font-weight: 400; color: #475569; margin-left: 0.5rem;i classfas fa-arrows-alt stylefont-size: 0.8rem;/i 拖拽 · 改分类/span/h1div classmode-badgei classfas fa-user-graduate/i外行人士模式span stylefont-size: 0.7rem; background: #2563eb20; padding: 0.1rem 0.6rem; border-radius: 30px; color: #1e4f8a;i classfas fa-rotate/i 积木化/span/div/div!-- 分类网格 由JS动态渲染 --div idcategoryGrid classcategory-grid!-- 动态生成 --/div!-- 底部 --div classfooter-notespani classfas fa-grip-vertical/i 拖拽积木到其他分类 · 下拉菜单改变分类/spanspan classhinti classfas fa-gavel/i 法律词汇 span stylecolor:#b91c1c;锁定/span (不可拖拽/改分类)/span/div/divscript(function() {// ------- 模拟数据 (后台词语分类库) --------// 包含法律词汇 (isLegal: true) 和普通词汇const initialData [{id: cat-1,name: 科技,words: [{ id: w1, text: 算法, isLegal: false },{ id: w2, text: 数据库, isLegal: false },{ id: w3, text: 防火墙, isLegal: false },{ id: w4, text: 加密, isLegal: false },]},{id: cat-2,name: 法律,words: [{ id: w5, text: 合同法, isLegal: true },{ id: w6, text: 侵权, isLegal: true },{ id: w7, text: 诉讼时效, isLegal: true },{ id: w8, text: 知识产权, isLegal: true },]},{id: cat-3,name: 经济,words: [{ id: w9, text: 通胀, isLegal: false },{ id: w10, text: GDP, isLegal: false },{ id: w11, text: 货币政策, isLegal: false },{ id: w12, text: 债券, isLegal: false },]},{id: cat-4,name: 医疗,words: [{ id: w13, text: 临床, isLegal: false },{ id: w14, text: 免疫, isLegal: false },{ id: w15, text: 处方, isLegal: false },{ id: w16, text: 基因, isLegal: false },]}];// 当前数据 (引用)let categories JSON.parse(JSON.stringify(initialData));// 获取容器const grid document.getElementById(categoryGrid);// ----- 渲染函数 (根据 categories 重建) -----function render() {grid.innerHTML ; // 清空categories.forEach((cat, catIndex) {const block document.createElement(div);block.className category-block;block.dataset.categoryId cat.id;// --- header ---const header document.createElement(div);header.className category-header;const title document.createElement(h2);title.textContent cat.name;header.appendChild(title);// 法律标签 (如果分类名含“法律” 或 有法律词汇显示指示)const hasLegal cat.words.some(w w.isLegal true);if (hasLegal) {const tag document.createElement(span);tag.className legal-tag;tag.innerHTML i classfas fa-scale-balanced/i 法律;header.appendChild(tag);}const countSpan document.createElement(span);countSpan.className word-count;countSpan.textContent ${cat.words.length} 个词;header.appendChild(countSpan);block.appendChild(header);// --- 积木容器 ---const brickContainer document.createElement(div);brickContainer.className word-bricks;brickContainer.dataset.categoryId cat.id;if (cat.words.length 0) {const empty document.createElement(span);empty.className empty-hint;empty.innerHTML i classfa-regular fa-circle/i 无词汇拖入积木;brickContainer.appendChild(empty);} else {cat.words.forEach((word, wordIndex) {const brick createBrickElement(word, cat, catIndex, wordIndex);brickContainer.appendChild(brick);});}block.appendChild(brickContainer);grid.appendChild(block);});// 重新绑定拖拽事件 (事件委托 动态)attachDragEvents();}// ----- 创建单个积木 DOM -----function createBrickElement(word, parentCategory, catIndex, wordIndex) {const brick document.createElement(div);brick.className word-brick;if (word.isLegal) {brick.classList.add(legal-brick);}brick.draggable !word.isLegal; // 法律词汇不可拖拽brick.dataset.wordId word.id;brick.dataset.sourceCategoryId parentCategory.id;brick.dataset.wordIndex wordIndex;// 文字const textSpan document.createElement(span);textSpan.className brick-text;textSpan.textContent word.text;brick.appendChild(textSpan);// 小图标 (装饰)const icon document.createElement(i);icon.className brick-icon fa-regular fa-cube;brick.appendChild(icon);// 下拉菜单 (分类选择器) —— 法律词汇禁用const select document.createElement(select);select.className brick-selector;if (word.isLegal) {select.disabled true;select.style.pointerEvents none;}// 填充选项categories.forEach(cat {const option document.createElement(option);option.value cat.id;option.textContent cat.name;if (cat.id parentCategory.id) {option.selected true;}select.appendChild(option);});// 变更事件修改分类 (仅非法律词汇)select.addEventListener(change, function(e) {e.stopPropagation();if (word.isLegal) return; // 安全防护const targetCategoryId this.value;const sourceCategoryId brick.dataset.sourceCategoryId;if (targetCategoryId sourceCategoryId) return;// 从原分类移除const sourceCat categories.find(c c.id sourceCategoryId);if (!sourceCat) return;const wordIdx sourceCat.words.findIndex(w w.id word.id);if (wordIdx -1) return;const [movedWord] sourceCat.words.splice(wordIdx, 1);// 添加到目标分类const targetCat categories.find(c c.id targetCategoryId);if (!targetCat) return;targetCat.words.push(movedWord);// 重新渲染render();});brick.appendChild(select);// ------ 拖拽事件 (仅非法律词汇) ------if (!word.isLegal) {brick.addEventListener(dragstart, handleDragStart);brick.addEventListener(dragend, handleDragEnd);} else {// 法律词汇禁止拖拽brick.draggable false;}return brick;}// ----- 拖拽处理 (全局变量) -----let dragData null;function handleDragStart(e) {const brick e.target.closest(.word-brick);if (!brick) return;// 法律词汇不允许拖拽 (但已经 draggablefalse)if (brick.classList.contains(legal-brick)) {e.preventDefault();return;}const wordId brick.dataset.wordId;const sourceCatId brick.dataset.sourceCategoryId;// 查找 word 对象let sourceCat categories.find(c c.id sourceCatId);if (!sourceCat) return;const word sourceCat.words.find(w w.id wordId);if (!word || word.isLegal) {e.preventDefault();return;}dragData {wordId: wordId,sourceCategoryId: sourceCatId,text: word.text,isLegal: word.isLegal};// 添加拖拽样式brick.classList.add(dragging);e.dataTransfer.effectAllowed move;e.dataTransfer.setData(text/plain, wordId);// 拖拽图标const ghost brick.cloneNode(true);ghost.style.opacity 0.6;ghost.style.position absolute;ghost.style.top -1000px;document.body.appendChild(ghost);e.dataTransfer.setDragImage(ghost, 30, 20);setTimeout(() document.body.removeChild(ghost), 0);}function handleDragEnd(e) {const brick e.target.closest(.word-brick);if (brick) brick.classList.remove(dragging);// 不清除 dragData 太快drop 中会使用drop 后清除}// ----- 全局拖拽目标: drop / dragover (事件委托) -----function attachDragEvents() {// 移除之前的监听避免重复绑定 (直接使用新监听)// 使用事件委托在 grid 上grid.removeEventListener(dragover, handleDragOver);grid.removeEventListener(drop, handleDrop);grid.addEventListener(dragover, handleDragOver);grid.addEventListener(drop, handleDrop);}function handleDragOver(e) {e.preventDefault(); // 必须e.dataTransfer.dropEffect move;// 高亮目标分类容器 (视觉反馈)const container e.target.closest(.word-bricks);if (container) {container.style.background #eef2ff;container.style.borderRadius 28px;container.style.transition 0.1s;}}// drop 事件 (放置)function handleDrop(e) {e.preventDefault();// 清除高亮document.querySelectorAll(.word-bricks).forEach(el {el.style.background ;el.style.borderRadius ;});if (!dragData) return;// 获取目标分类容器const targetBrickContainer e.target.closest(.word-bricks);if (!targetBrickContainer) return;const targetCategoryId targetBrickContainer.dataset.categoryId;const sourceCategoryId dragData.sourceCategoryId;// 如果相同分类或拖拽数据无效if (targetCategoryId sourceCategoryId) {dragData null;return;}// 检查目标分类是否存在const targetCat categories.find(c c.id targetCategoryId);const sourceCat categories.find(c c.id sourceCategoryId);if (!targetCat || !sourceCat) {dragData null;return;}// 查找单词const wordIndex sourceCat.words.findIndex(w w.id dragData.wordId);if (wordIndex -1) {dragData null;return;}const movedWord sourceCat.words[wordIndex];// 再次确保非法律if (movedWord.isLegal) {dragData null;return;}// 执行移动sourceCat.words.splice(wordIndex, 1);targetCat.words.push(movedWord);// 清空拖拽数据dragData null;// 重新渲染render();}// 额外: 拖拽离开清除高亮grid.addEventListener(dragleave, function(e) {const container e.target.closest(.word-bricks);if (container) {container.style.background ;container.style.borderRadius ;}});// 初始化render();// 暴露给调试 (非必须)window.__categories categories;})();/script/body/html积木式操作与权限管理使用者可以像玩积木一样通过拖拽或下拉菜单来调整词汇分类同时法律词汇会被自动锁定确保数据安全。· 拖拽调整分类直接拖拽非法律词汇的“积木块”到其他分类区域即可完成分类移动操作直观。· 下拉菜单切换每个词汇积木旁都配有分类下拉菜单也可以从中选择新的分类实现快速调整。· 法律词汇保护属于“法律”分类的词汇会显示为灰色并带有锁定标识无法被拖拽或通过下拉菜单修改分类保障核心数据的稳定性。最后我有一个疑问国外研发用于隔离人民群众和社会精英的门槛不应该成为我国外行人的应用门槛——什么时候精通一门非母语语言和懂得大量专业知识成为了国内大众化软件的使用隐形门槛了