499 lines
16 KiB
JavaScript
499 lines
16 KiB
JavaScript
// API 配置（从 config.js 读取，部署 Pages 时请设置后端 Worker 地址）
|
||
const API_BASE = typeof window !== 'undefined' && window.API_BASE !== undefined ? window.API_BASE : '';
|
||
|
||
// 初始数据（示例）
|
||
let sites = [
|
||
{
|
||
id: '1',
|
||
name: '百度',
|
||
url: 'https://www.baidu.com',
|
||
description: '全球最大的中文搜索引擎',
|
||
category: '常用',
|
||
tags: ['搜索', '中文']
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '知乎',
|
||
url: 'https://www.zhihu.com',
|
||
description: '中文互联网高质量的问答社区',
|
||
category: '社交',
|
||
tags: ['问答', '知识']
|
||
},
|
||
{
|
||
id: '3',
|
||
name: 'GitHub',
|
||
url: 'https://github.com',
|
||
description: '全球最大的代码托管平台',
|
||
category: '工作',
|
||
tags: ['代码', '开发']
|
||
},
|
||
{
|
||
id: '4',
|
||
name: 'Bilibili',
|
||
url: 'https://www.bilibili.com',
|
||
description: '中国年轻世代高度聚集的文化社区',
|
||
category: '娱乐',
|
||
tags: ['视频', '弹幕']
|
||
},
|
||
{
|
||
id: '5',
|
||
name: '淘宝',
|
||
url: 'https://www.taobao.com',
|
||
description: '亚洲最大的购物网站',
|
||
category: '购物',
|
||
tags: ['电商', '购物']
|
||
}
|
||
|
||
|
||
];
|
||
|
||
let deferredInstallPrompt = null;
|
||
let installBtn = null;
|
||
let hasRefreshing = false;
|
||
|
||
function isStandaloneMode() {
|
||
return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
|
||
}
|
||
|
||
function createInstallButton() {
|
||
if (installBtn) {
|
||
return installBtn;
|
||
}
|
||
|
||
installBtn = document.createElement('button');
|
||
installBtn.className = 'install-btn';
|
||
installBtn.type = 'button';
|
||
installBtn.textContent = '📲 安装应用';
|
||
installBtn.style.cssText = `
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
||
display: none;
|
||
z-index: 1000;
|
||
transition: all 0.2s ease;
|
||
`;
|
||
|
||
installBtn.addEventListener('mouseenter', () => {
|
||
installBtn.style.transform = 'translateY(-2px)';
|
||
installBtn.style.boxShadow = '0 6px 20px rgba(16, 185, 129, 0.4)';
|
||
});
|
||
|
||
installBtn.addEventListener('mouseleave', () => {
|
||
installBtn.style.transform = 'translateY(0)';
|
||
installBtn.style.boxShadow = '0 4px 15px rgba(16, 185, 129, 0.3)';
|
||
});
|
||
|
||
installBtn.addEventListener('click', async () => {
|
||
if (!deferredInstallPrompt) {
|
||
return;
|
||
}
|
||
|
||
deferredInstallPrompt.prompt();
|
||
const choice = await deferredInstallPrompt.userChoice;
|
||
|
||
if (choice.outcome === 'accepted') {
|
||
showToast('已触发安装流程');
|
||
}
|
||
|
||
deferredInstallPrompt = null;
|
||
installBtn.style.display = 'none';
|
||
});
|
||
|
||
document.body.appendChild(installBtn);
|
||
return installBtn;
|
||
}
|
||
|
||
function initInstallPrompt() {
|
||
const button = createInstallButton();
|
||
|
||
if (isStandaloneMode()) {
|
||
button.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
window.addEventListener('beforeinstallprompt', (event) => {
|
||
event.preventDefault();
|
||
deferredInstallPrompt = event;
|
||
button.style.display = 'block';
|
||
});
|
||
|
||
window.addEventListener('appinstalled', () => {
|
||
deferredInstallPrompt = null;
|
||
button.style.display = 'none';
|
||
showToast('应用安装成功');
|
||
});
|
||
}
|
||
|
||
async function registerServiceWorker() {
|
||
if (!('serviceWorker' in navigator)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const registration = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
|
||
|
||
if (registration.waiting) {
|
||
promptRefresh(registration.waiting);
|
||
}
|
||
|
||
registration.addEventListener('updatefound', () => {
|
||
const newWorker = registration.installing;
|
||
if (!newWorker) {
|
||
return;
|
||
}
|
||
|
||
newWorker.addEventListener('statechange', () => {
|
||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||
promptRefresh(newWorker);
|
||
}
|
||
});
|
||
});
|
||
|
||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||
if (hasRefreshing) {
|
||
return;
|
||
}
|
||
hasRefreshing = true;
|
||
window.location.reload();
|
||
});
|
||
} catch (error) {
|
||
console.error('Service Worker 注册失败:', error);
|
||
}
|
||
}
|
||
|
||
function promptRefresh(worker) {
|
||
const shouldRefresh = window.confirm('发现新版本，是否立即刷新？');
|
||
if (shouldRefresh) {
|
||
worker.postMessage('SKIP_WAITING');
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 加载网站数据
|
||
async function loadSites() {
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/sites`);
|
||
if (response.ok) {
|
||
sites = await response.json();
|
||
updateStats();
|
||
renderSites();
|
||
}
|
||
} catch (error) {
|
||
console.error('加载网站数据失败:', error);
|
||
// 使用默认数据
|
||
updateStats();
|
||
renderSites();
|
||
}
|
||
}
|
||
|
||
// 更新统计信息
|
||
function updateStats() {
|
||
const totalSites = sites.length;
|
||
const categories = [...new Set(sites.map(site => site.category))];
|
||
const allTags = sites.flatMap(site => site.tags || []);
|
||
const uniqueTags = [...new Set(allTags)];
|
||
|
||
document.getElementById('total-sites').textContent = totalSites;
|
||
document.getElementById('total-categories').textContent = categories.length;
|
||
document.getElementById('total-tags').textContent = uniqueTags.length;
|
||
|
||
// 更新分类过滤器
|
||
updateCategoryFilters();
|
||
}
|
||
|
||
// 更新分类过滤器
|
||
function updateCategoryFilters() {
|
||
const categoryFilters = document.getElementById('category-filters');
|
||
const categories = ['all', ...new Set(sites.map(site => site.category))];
|
||
|
||
categoryFilters.innerHTML = '';
|
||
|
||
categories.forEach(category => {
|
||
const filterBtn = document.createElement('div');
|
||
filterBtn.className = 'category-filter';
|
||
filterBtn.textContent = category === 'all' ? '全部' : category;
|
||
filterBtn.dataset.category = category;
|
||
|
||
if (category === 'all') {
|
||
filterBtn.classList.add('active');
|
||
}
|
||
|
||
filterBtn.addEventListener('click', () => {
|
||
document.querySelectorAll('.category-filter').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
filterBtn.classList.add('active');
|
||
filterSites();
|
||
closeCategorySidebar();
|
||
});
|
||
|
||
categoryFilters.appendChild(filterBtn);
|
||
});
|
||
}
|
||
|
||
// 渲染网站
|
||
function renderSites(filteredSites = null) {
|
||
const container = document.getElementById('categories-container');
|
||
const searchInput = document.getElementById('search-input').value.toLowerCase();
|
||
const activeCategory = document.querySelector('.category-filter.active').dataset.category;
|
||
|
||
// 如果没有传入过滤后的网站，则使用全部网站
|
||
const sitesToRender = filteredSites || sites;
|
||
|
||
// 如果有搜索关键词，进一步过滤
|
||
let finalSites = sitesToRender;
|
||
if (searchInput) {
|
||
finalSites = sitesToRender.filter(site =>
|
||
site.name.toLowerCase().includes(searchInput) ||
|
||
(site.description && site.description.toLowerCase().includes(searchInput)) ||
|
||
(site.tags && site.tags.some(tag => tag.toLowerCase().includes(searchInput)))
|
||
);
|
||
}
|
||
|
||
// 如果有分类过滤
|
||
if (activeCategory !== 'all') {
|
||
finalSites = finalSites.filter(site => site.category === activeCategory);
|
||
}
|
||
|
||
// 按分类分组
|
||
const sitesByCategory = {};
|
||
finalSites.forEach(site => {
|
||
if (!sitesByCategory[site.category]) {
|
||
sitesByCategory[site.category] = [];
|
||
}
|
||
sitesByCategory[site.category].push(site);
|
||
});
|
||
|
||
// 如果没有网站匹配
|
||
if (Object.keys(sitesByCategory).length === 0) {
|
||
container.innerHTML = `
|
||
<div class="empty-state">
|
||
<div style="font-size: 4rem; margin-bottom: 15px;">🔍</div>
|
||
<h2>没有找到匹配的网站</h2>
|
||
<p>尝试调整搜索关键词或分类筛选条件</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
// 渲染分类区块
|
||
container.innerHTML = '';
|
||
Object.keys(sitesByCategory).sort().forEach(category => {
|
||
const categorySection = document.createElement('div');
|
||
categorySection.className = 'category-section';
|
||
|
||
categorySection.innerHTML = `
|
||
<h2 class="category-title">${category}</h2>
|
||
<div class="sites-grid" id="category-${category.replace(/\s+/g, '-')}">
|
||
${sitesByCategory[category].map(site => createSiteCard(site)).join('')}
|
||
</div>
|
||
`;
|
||
|
||
container.appendChild(categorySection);
|
||
});
|
||
|
||
// 添加点击事件
|
||
document.querySelectorAll('.site-card').forEach(card => {
|
||
card.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.site-icon') && !e.target.closest('img')) {
|
||
window.open(card.dataset.url, '_blank');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 通过 Worker 代理获取 favicon
|
||
function getFaviconUrl(domain) {
|
||
return `${API_BASE}/api/favicon?domain=${domain}`;
|
||
}
|
||
|
||
// 生成favicon HTML，使用 Worker 代理
|
||
function generateFaviconHtml(domain, firstLetter) {
|
||
const faviconUrl = getFaviconUrl(domain);
|
||
|
||
// Worker 会自动尝试多个源，失败时显示占位符
|
||
const onerrorCode = `this.parentElement.innerHTML='<div class=\\'favicon-placeholder\\'>${firstLetter}</div>';`;
|
||
|
||
return {
|
||
src: faviconUrl,
|
||
onerror: onerrorCode
|
||
};
|
||
}
|
||
|
||
// 创建网站卡片HTML
|
||
function createSiteCard(site) {
|
||
// 从URL提取域名用于获取favicon
|
||
const domain = new URL(site.url).hostname.replace('www.', '');
|
||
|
||
// 生成网站名称首字母作为备用图标
|
||
const firstLetter = site.name.charAt(0).toUpperCase();
|
||
|
||
// 获取favicon配置
|
||
const faviconConfig = generateFaviconHtml(domain, firstLetter);
|
||
|
||
// 处理标签
|
||
const tagsHtml = site.tags && site.tags.length > 0
|
||
? site.tags.map(tag => `<span class="tag">${tag}</span>`).join('')
|
||
: '';
|
||
|
||
// 处理标签文本（用于 title）
|
||
const tagsText = site.tags && site.tags.length > 0
|
||
? site.tags.join('、')
|
||
: '';
|
||
|
||
const clickCount = typeof site.clicks === 'number' ? site.clicks : 0;
|
||
|
||
return `
|
||
<a href="${site.url}" target="_blank" class="site-card" data-url="${site.url}" data-site-id="${site.id}">
|
||
<span class="site-card-clicks" title="访问次数">${clickCount}</span>
|
||
<div class="site-icon">
|
||
<img
|
||
src="${faviconConfig.src}"
|
||
onerror="${faviconConfig.onerror}"
|
||
alt="${site.name}图标"
|
||
>
|
||
</div>
|
||
<div class="site-card-body">
|
||
<div class="site-name" title="${site.name}">${site.name}</div>
|
||
<div class="site-description" title="${site.description || ''}">${site.description || ''}</div>
|
||
</div>
|
||
<div class="site-tags" title="${tagsText}">${tagsHtml}</div>
|
||
</a>
|
||
`;
|
||
}
|
||
|
||
// 显示提示消息
|
||
function showToast(message, type = 'success') {
|
||
const toast = document.getElementById('toast');
|
||
toast.className = `toast ${type} show`;
|
||
document.querySelector('.toast-message').textContent = message;
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 3000);
|
||
}
|
||
|
||
// 过滤网站（搜索和分类）
|
||
function filterSites() {
|
||
renderSites();
|
||
}
|
||
|
||
// 显示提示消息
|
||
function showToast(message, type = 'success') {
|
||
const toast = document.getElementById('toast');
|
||
toast.className = `toast ${type} show`;
|
||
document.querySelector('.toast-message').textContent = message;
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 3000);
|
||
}
|
||
|
||
// 过滤网站（搜索和分类）
|
||
function filterSites() {
|
||
renderSites();
|
||
}
|
||
|
||
// 网页搜索处理
|
||
function performWebSearch(query, engine) {
|
||
const encodedQuery = encodeURIComponent(query);
|
||
let searchUrl = '';
|
||
|
||
switch (engine) {
|
||
case 'google':
|
||
searchUrl = `https://www.google.com/search?q=${encodedQuery}`;
|
||
break;
|
||
case 'baidu':
|
||
searchUrl = `https://www.baidu.com/s?wd=${encodedQuery}`;
|
||
break;
|
||
case 'bing':
|
||
searchUrl = `https://www.bing.com/search?q=${encodedQuery}`;
|
||
break;
|
||
case 'duckduckgo':
|
||
searchUrl = `https://duckduckgo.com/?q=${encodedQuery}`;
|
||
break;
|
||
case 'yandex':
|
||
searchUrl = `https://yandex.com/search/?text=${encodedQuery}`;
|
||
break;
|
||
default:
|
||
searchUrl = `https://www.google.com/search?q=${encodedQuery}`;
|
||
}
|
||
|
||
window.open(searchUrl, '_blank');
|
||
}
|
||
|
||
function openCategorySidebar() {
|
||
document.body.classList.add('category-sidebar-open');
|
||
const backdrop = document.getElementById('category-sidebar-backdrop');
|
||
if (backdrop) backdrop.setAttribute('aria-hidden', 'false');
|
||
}
|
||
|
||
function closeCategorySidebar() {
|
||
document.body.classList.remove('category-sidebar-open');
|
||
const backdrop = document.getElementById('category-sidebar-backdrop');
|
||
if (backdrop) backdrop.setAttribute('aria-hidden', 'true');
|
||
}
|
||
|
||
function initCategorySidebar() {
|
||
const toggle = document.getElementById('category-sidebar-toggle');
|
||
const closeBtn = document.getElementById('category-sidebar-close');
|
||
const backdrop = document.getElementById('category-sidebar-backdrop');
|
||
if (toggle) toggle.addEventListener('click', openCategorySidebar);
|
||
if (closeBtn) closeBtn.addEventListener('click', closeCategorySidebar);
|
||
if (backdrop) backdrop.addEventListener('click', closeCategorySidebar);
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
initInstallPrompt();
|
||
initCategorySidebar();
|
||
|
||
// 点击卡片时上报访问次数（不阻止跳转）
|
||
const container = document.getElementById('categories-container');
|
||
if (container) {
|
||
container.addEventListener('click', (e) => {
|
||
const card = e.target.closest('.site-card');
|
||
if (!card) return;
|
||
const id = card.dataset.siteId;
|
||
if (id) {
|
||
const base = typeof window !== 'undefined' && window.API_BASE !== undefined ? window.API_BASE : '';
|
||
fetch(base + '/api/sites/' + id + '/click', { method: 'POST', keepalive: true }).catch(() => {});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 注册 PWA Service Worker
|
||
await registerServiceWorker();
|
||
|
||
// 加载网站数据
|
||
await loadSites();
|
||
|
||
// 搜索输入
|
||
document.getElementById('search-input').addEventListener('input', filterSites);
|
||
|
||
// 网页搜索表单提交
|
||
const webSearchForm = document.getElementById('web-search-form');
|
||
if (webSearchForm) {
|
||
webSearchForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const query = document.getElementById('web-search-input').value.trim();
|
||
const engine = document.getElementById('search-engine').value;
|
||
|
||
if (query) {
|
||
performWebSearch(query, engine);
|
||
document.getElementById('web-search-input').value = '';
|
||
}
|
||
});
|
||
}
|
||
});
|