339 lines
12 KiB
JavaScript
339 lines
12 KiB
JavaScript
// channel-enhancements.js - 频道搜索、面包屑、快捷键增强功能（终极修复版）
|
||
(function() {
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
} else {
|
||
init();
|
||
}
|
||
|
||
function init() {
|
||
addStyles();
|
||
createSearchBox();
|
||
createBreadcrumb();
|
||
createShortcutHint();
|
||
initShortcuts();
|
||
bindCardClicks(); // ★ 新增：为卡片绑定点击切换模块
|
||
window.addEventListener('hashchange', updateBreadcrumb);
|
||
updateBreadcrumb();
|
||
}
|
||
|
||
function addStyles() {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.channel-search-container {
|
||
padding: 16px 20px;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #e9ecef;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.channel-search-input {
|
||
flex: 1;
|
||
padding: 10px 16px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 24px;
|
||
font-size: 14px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.channel-search-input:focus {
|
||
border-color: #4d6bfe;
|
||
box-shadow: 0 0 0 3px rgba(77,107,254,0.1);
|
||
}
|
||
.channel-search-clear {
|
||
background: none;
|
||
border: none;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
color: #6c757d;
|
||
padding: 0 8px;
|
||
display: none;
|
||
}
|
||
.channel-search-clear:hover {
|
||
color: #212529;
|
||
}
|
||
.channel-search-input:not(:placeholder-shown) + .channel-search-clear {
|
||
display: inline-block;
|
||
}
|
||
.highlight {
|
||
background-color: #ffeb3b;
|
||
padding: 2px 0;
|
||
border-radius: 2px;
|
||
}
|
||
.no-results {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
}
|
||
.channel-breadcrumb {
|
||
padding: 12px 20px;
|
||
background: white;
|
||
border-bottom: 1px solid #e9ecef;
|
||
font-size: 14px;
|
||
}
|
||
.channel-breadcrumb a {
|
||
color: #4d6bfe;
|
||
text-decoration: none;
|
||
}
|
||
.channel-breadcrumb a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.channel-breadcrumb span {
|
||
color: #6c757d;
|
||
}
|
||
.channel-breadcrumb .current {
|
||
color: #212529;
|
||
font-weight: 500;
|
||
}
|
||
.shortcut-hint {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: rgba(0,0,0,0.7);
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 30px;
|
||
font-size: 12px;
|
||
backdrop-filter: blur(4px);
|
||
z-index: 1000;
|
||
}
|
||
.shortcut-hint kbd {
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
margin: 0 2px;
|
||
}
|
||
.module-card.selected {
|
||
outline: 2px solid #4d6bfe;
|
||
outline-offset: 2px;
|
||
transform: scale(1.02);
|
||
transition: all 0.2s;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
function createSearchBox() {
|
||
const container = document.querySelector('.module-grid') || document.querySelector('#module-list') || document.querySelector('.channel-content');
|
||
if (!container) return;
|
||
|
||
const searchContainer = document.createElement('div');
|
||
searchContainer.className = 'channel-search-container';
|
||
searchContainer.innerHTML = `
|
||
<input type="text" class="channel-search-input" placeholder="搜索模块...">
|
||
<button class="channel-search-clear">×</button>
|
||
`;
|
||
container.parentNode.insertBefore(searchContainer, container);
|
||
|
||
const searchInput = searchContainer.querySelector('.channel-search-input');
|
||
const clearBtn = searchContainer.querySelector('.channel-search-clear');
|
||
|
||
searchInput.addEventListener('input', function() {
|
||
filterModules(this.value);
|
||
});
|
||
|
||
clearBtn.addEventListener('click', function() {
|
||
searchInput.value = '';
|
||
filterModules('');
|
||
searchInput.focus();
|
||
});
|
||
|
||
window.__channelSearchInput = searchInput;
|
||
}
|
||
|
||
function filterModules(keyword) {
|
||
const cards = document.querySelectorAll('.module-card');
|
||
const container = document.querySelector('.module-grid') || document.querySelector('#module-list');
|
||
let hasResults = false;
|
||
|
||
// 移除所有高亮
|
||
removeAllHighlights();
|
||
|
||
cards.forEach(card => {
|
||
const text = card.innerText || card.textContent;
|
||
if (keyword === '') {
|
||
card.style.display = '';
|
||
hasResults = true;
|
||
} else {
|
||
const lowerText = text.toLowerCase();
|
||
const lowerKeyword = keyword.toLowerCase();
|
||
if (lowerText.includes(lowerKeyword)) {
|
||
card.style.display = '';
|
||
highlightText(card, keyword);
|
||
hasResults = true;
|
||
} else {
|
||
card.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
|
||
let noResultsEl = document.querySelector('.no-results');
|
||
if (!hasResults && keyword !== '') {
|
||
if (!noResultsEl) {
|
||
noResultsEl = document.createElement('div');
|
||
noResultsEl.className = 'no-results';
|
||
noResultsEl.textContent = '没有找到匹配的模块';
|
||
container.parentNode.insertBefore(noResultsEl, container.nextSibling);
|
||
}
|
||
} else {
|
||
if (noResultsEl) noResultsEl.remove();
|
||
}
|
||
}
|
||
|
||
function removeAllHighlights() {
|
||
document.querySelectorAll('.highlight').forEach(span => {
|
||
const parent = span.parentNode;
|
||
parent.replaceChild(document.createTextNode(span.textContent), span);
|
||
parent.normalize();
|
||
});
|
||
}
|
||
|
||
function highlightText(card, keyword) {
|
||
const regex = new RegExp(`(${keyword})`, 'gi');
|
||
const walk = document.createTreeWalker(card, NodeFilter.SHOW_TEXT, {
|
||
acceptNode: function(node) {
|
||
if (node.parentNode.classList && node.parentNode.classList.contains('highlight')) {
|
||
return NodeFilter.FILTER_REJECT;
|
||
}
|
||
return NodeFilter.FILTER_ACCEPT;
|
||
}
|
||
}, false);
|
||
|
||
const textNodes = [];
|
||
while (walk.nextNode()) textNodes.push(walk.currentNode);
|
||
|
||
textNodes.forEach(node => {
|
||
const text = node.nodeValue;
|
||
if (regex.test(text)) {
|
||
const span = document.createElement('span');
|
||
span.className = 'highlight';
|
||
span.innerHTML = text.replace(regex, '<span class="highlight">$1</span>');
|
||
node.parentNode.replaceChild(span, node);
|
||
}
|
||
});
|
||
}
|
||
|
||
function createBreadcrumb() {
|
||
const searchContainer = document.querySelector('.channel-search-container');
|
||
const breadcrumb = document.createElement('div');
|
||
breadcrumb.className = 'channel-breadcrumb';
|
||
breadcrumb.id = 'channelBreadcrumb';
|
||
if (searchContainer) {
|
||
searchContainer.parentNode.insertBefore(breadcrumb, searchContainer.nextSibling);
|
||
} else {
|
||
const container = document.querySelector('.module-grid') || document.querySelector('#module-list');
|
||
if (container) {
|
||
container.parentNode.insertBefore(breadcrumb, container);
|
||
}
|
||
}
|
||
}
|
||
|
||
function updateBreadcrumb() {
|
||
const breadcrumb = document.getElementById('channelBreadcrumb');
|
||
if (!breadcrumb) return;
|
||
const hash = window.location.hash.slice(1) || '';
|
||
let moduleName = '频道';
|
||
if (hash.startsWith('module-')) {
|
||
const moduleId = hash.replace('module-', '');
|
||
const moduleNames = {
|
||
'M06': '工单管理',
|
||
'M08': '数据看板',
|
||
'M11': '组件库',
|
||
'debug': '调试面板'
|
||
};
|
||
moduleName = moduleNames[moduleId] || moduleId;
|
||
}
|
||
breadcrumb.innerHTML = `
|
||
<a href="#/">首页</a> >
|
||
<a href="#/channel">频道</a> >
|
||
<span class="current">${moduleName}</span>
|
||
`;
|
||
}
|
||
|
||
function createShortcutHint() {
|
||
const hint = document.createElement('div');
|
||
hint.className = 'shortcut-hint';
|
||
hint.innerHTML = `
|
||
<kbd>⌘K</kbd> 搜索 ·
|
||
<kbd>↑</kbd><kbd>↓</kbd> 选择 ·
|
||
<kbd>Enter</kbd> 打开 ·
|
||
<kbd>Esc</kbd> 关闭
|
||
`;
|
||
document.body.appendChild(hint);
|
||
}
|
||
|
||
function initShortcuts() {
|
||
document.addEventListener('keydown', function(e) {
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||
e.preventDefault();
|
||
const searchInput = window.__channelSearchInput;
|
||
if (searchInput) searchInput.focus();
|
||
}
|
||
if (e.key === 'Escape') {
|
||
const searchInput = window.__channelSearchInput;
|
||
if (searchInput && document.activeElement === searchInput) {
|
||
searchInput.value = '';
|
||
filterModules('');
|
||
searchInput.blur();
|
||
} else if (searchInput && searchInput.value) {
|
||
searchInput.value = '';
|
||
filterModules('');
|
||
}
|
||
}
|
||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||
const cards = Array.from(document.querySelectorAll('.module-card:not([style*="display: none"])'));
|
||
if (cards.length === 0) return;
|
||
e.preventDefault();
|
||
let selectedIndex = cards.findIndex(card => card.classList.contains('selected'));
|
||
if (selectedIndex === -1) {
|
||
selectedIndex = e.key === 'ArrowDown' ? 0 : cards.length - 1;
|
||
} else {
|
||
cards[selectedIndex].classList.remove('selected');
|
||
if (e.key === 'ArrowDown') {
|
||
selectedIndex = (selectedIndex + 1) % cards.length;
|
||
} else {
|
||
selectedIndex = (selectedIndex - 1 + cards.length) % cards.length;
|
||
}
|
||
}
|
||
cards[selectedIndex].classList.add('selected');
|
||
cards[selectedIndex].scrollIntoView({ block: 'nearest' });
|
||
}
|
||
if (e.key === 'Enter') {
|
||
const selected = document.querySelector('.module-card.selected');
|
||
if (selected) {
|
||
selected.click(); // 触发我们绑定的点击事件
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// ★★★ 核心修复：为所有卡片绑定点击切换模块 ★★★
|
||
function bindCardClicks() {
|
||
const grid = document.querySelector('.module-grid') || document.querySelector('#module-list') || document.body;
|
||
grid.addEventListener('click', function(e) {
|
||
const card = e.target.closest('.module-card');
|
||
if (!card) return;
|
||
|
||
// 阻止可能冲突的其他事件（可选）
|
||
e.preventDefault();
|
||
|
||
// 根据卡片文字判断是哪个模块
|
||
const text = card.innerText || card.textContent;
|
||
let moduleId = null;
|
||
if (text.includes('工单管理')) moduleId = 'M06';
|
||
else if (text.includes('数据统计')) moduleId = 'M08';
|
||
else if (text.includes('组件库')) moduleId = 'M11';
|
||
else if (text.includes('调试面板')) moduleId = 'debug';
|
||
// 如果识别不到，尝试从其他属性获取（比如 data-module-id）
|
||
else if (card.dataset.moduleId) moduleId = card.dataset.moduleId;
|
||
|
||
if (moduleId) {
|
||
// 改变 hash，触发路由更新
|
||
window.location.hash = `module-${moduleId}`;
|
||
}
|
||
});
|
||
}
|
||
})();
|