2192 lines
81 KiB
JavaScript
2192 lines
81 KiB
JavaScript
addEventListener('fetch', (event) => {
|
||
event.respondWith(handleRequest(event.request));
|
||
});
|
||
|
||
async function handleRequest(request) {
|
||
const url = new URL(request.url);
|
||
const { pathname } = url;
|
||
|
||
try {
|
||
// 登录请求处理
|
||
if (pathname === '/login' && request.method === 'POST') {
|
||
const formData = new URLSearchParams(await request.text());
|
||
const username = formData.get('username');
|
||
const password = formData.get('password');
|
||
|
||
if (username === envusername && password === envpassword) {
|
||
return new Response(await renderNavigationPage(), {
|
||
headers: { 'Content-Type': 'text/html; charset=utf-8' },
|
||
});
|
||
}
|
||
// 登录失败时直接返回登录页面并显示错误
|
||
return new Response(await renderLoginPage(true), {
|
||
headers: { 'Content-Type': 'text/html; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
// 路由处理
|
||
switch (pathname) {
|
||
case '/':
|
||
case '/login.html':
|
||
return new Response(await renderLoginPage(), {
|
||
headers: { 'Content-Type': 'text/html; charset=utf-8' }
|
||
});
|
||
|
||
case '/privacy':
|
||
return serveStaticFile('privacy.html');
|
||
|
||
case '/data':
|
||
return fetchNavigationData();
|
||
|
||
case '/add-category':
|
||
if (request.method === 'POST') return addCategory(request);
|
||
break;
|
||
|
||
case '/add-site':
|
||
if (request.method === 'POST') return addSite(request);
|
||
break;
|
||
|
||
case '/delete-category':
|
||
if (request.method === 'POST') return deleteCategory(request);
|
||
break;
|
||
|
||
case '/delete-site':
|
||
if (request.method === 'POST') return deleteSite(request);
|
||
break;
|
||
|
||
case '/edit-site':
|
||
if (request.method === 'POST') return editSite(request);
|
||
break;
|
||
case '/edit-category':
|
||
if (request.method === 'POST') return editCategory(request);
|
||
break;
|
||
// 在handleRequest中添加切换分类状态的路由
|
||
case '/toggle-category':
|
||
if (request.method === 'POST') return toggleCategory(request);
|
||
break;
|
||
// 在handleRequest的switch语句中添加新路由
|
||
case '/reorder-site':
|
||
if (request.method === 'POST') return reorderSite(request);
|
||
break;
|
||
case '/load-notification':
|
||
return loadNotification();
|
||
case '/export':
|
||
return exportData(); // 导出接口
|
||
|
||
case '/import':
|
||
if (request.method === 'POST') return importData(request);
|
||
break;
|
||
}
|
||
|
||
// 未匹配的路由返回404
|
||
return serveStaticFile('NotFound.html', 404);
|
||
} catch (error) {
|
||
console.error('Error handling request:', error);
|
||
return new Response('Internal Server Error', { status: 500 });
|
||
}
|
||
}
|
||
|
||
// KV 数据操作函数
|
||
async function getNavigationData() {
|
||
const data = await NAVIGATION_DATA.get('data');
|
||
const parsedData = data ? JSON.parse(data) : { categories: [] };
|
||
|
||
// 初始化折叠状态
|
||
parsedData.categories.forEach(category => {
|
||
if (typeof category.collapsed === 'undefined') {
|
||
category.collapsed = false; // 默认展开状态
|
||
}
|
||
});
|
||
|
||
return parsedData;
|
||
}
|
||
// 导出导航数据为 JSON 文件
|
||
async function exportData() {
|
||
const navigationData = await getNavigationData(); // 复用已有函数
|
||
const jsonStr = JSON.stringify(navigationData, null, 2);
|
||
|
||
return new Response(jsonStr, {
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Content-Disposition': 'attachment; filename="navigation_backup.json"',
|
||
},
|
||
});
|
||
}
|
||
// 从上传的 JSON 文件导入导航数据
|
||
async function importData(request) {
|
||
try {
|
||
const formData = await request.formData();
|
||
const file = formData.get('file');
|
||
|
||
if (!file) {
|
||
return new Response(JSON.stringify({ error: '请选择要导入的文件' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
});
|
||
}
|
||
|
||
// 读取文件内容
|
||
const fileText = await file.text();
|
||
const importedData = JSON.parse(fileText);
|
||
|
||
// 简单验证格式：必须包含 categories 数组
|
||
if (!importedData || !Array.isArray(importedData.categories)) {
|
||
return new Response(JSON.stringify({ error: '无效的备份文件格式，缺少 categories 数组' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
});
|
||
}
|
||
|
||
// 可选：进一步验证每个分类和站点结构（这里略，可根据需要补充）
|
||
|
||
// 写入 KV
|
||
await NAVIGATION_DATA.put('data', JSON.stringify(importedData));
|
||
|
||
return new Response(JSON.stringify({ message: '数据导入成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' },
|
||
});
|
||
} catch (error) {
|
||
return new Response(JSON.stringify({ error: '导入失败：' + error.message }), {
|
||
status: 500,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
});
|
||
}
|
||
}
|
||
// 添加站点重新排序功能
|
||
async function reorderSite(request) {
|
||
const requestBody = await request.json();
|
||
const { categoryIndex, oldIndex, newIndex } = requestBody;
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证分类索引
|
||
if (categoryIndex < 0 || categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
const category = navigationData.categories[categoryIndex];
|
||
// 验证站点索引
|
||
if (oldIndex < 0 || oldIndex >= category.sites.length ||
|
||
newIndex < 0 || newIndex >= category.sites.length) {
|
||
return new Response(JSON.stringify({ error: '无效站点索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 移动站点位置
|
||
const siteToMove = category.sites.splice(oldIndex, 1)[0];
|
||
category.sites.splice(newIndex, 0, siteToMove);
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '站点顺序已更新' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
// 添加编辑分类的API处理函数
|
||
async function editCategory(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证索引有效性
|
||
if (requestBody.categoryIndex < 0 ||
|
||
requestBody.categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 检查新名称是否已存在
|
||
const newName = requestBody.newName.trim();
|
||
const categoryExists = navigationData.categories.some(
|
||
(cat, index) => index !== requestBody.categoryIndex && cat.name === newName
|
||
);
|
||
|
||
if (categoryExists) {
|
||
return new Response(JSON.stringify({ error: '分类名称已存在' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 更新分类名称
|
||
navigationData.categories[requestBody.categoryIndex].name = newName;
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '分类名称修改成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
// 添加切换分类折叠状态的API处理函数
|
||
async function toggleCategory(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证索引有效性
|
||
if (requestBody.categoryIndex < 0 ||
|
||
requestBody.categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 切换折叠状态
|
||
const category = navigationData.categories[requestBody.categoryIndex];
|
||
category.collapsed = !category.collapsed;
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({
|
||
message: '状态更新成功',
|
||
collapsed: category.collapsed
|
||
}), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
// 切换分类折叠状态
|
||
async function toggleCategoryState(categoryIndex) {
|
||
const response = await fetch('/toggle-category', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ categoryIndex })
|
||
});
|
||
|
||
if (response.ok) {
|
||
const result = await response.json();
|
||
const categoryElement = document.getElementById(`category-sites-${categoryIndex}`);
|
||
const toggleIcon = document.querySelector(`.toggle-btn[onclick="toggleCategoryState(${categoryIndex})"] .iconify`);
|
||
|
||
if (result.collapsed) {
|
||
categoryElement.style.display = 'none';
|
||
toggleIcon.setAttribute('data-icon', 'mdi:chevron-right');
|
||
} else {
|
||
categoryElement.style.display = 'flex';
|
||
toggleIcon.setAttribute('data-icon', 'mdi:chevron-down');
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
async function setNavigationData(data) {
|
||
await NAVIGATION_DATA.put('data', JSON.stringify(data));
|
||
}
|
||
|
||
// 静态文件服务
|
||
async function serveStaticFile(filename, status = 200) {
|
||
const content = await STATIC_FILES.get(filename);
|
||
if (content) {
|
||
return new Response(content, {
|
||
status,
|
||
headers: { 'Content-Type': 'text/html; charset=utf-8' }
|
||
});
|
||
}
|
||
return new Response(`${filename} not found`, { status: 404 });
|
||
}
|
||
|
||
// API 端点处理函数
|
||
async function fetchNavigationData() {
|
||
const navigationData = await getNavigationData();
|
||
return new Response(JSON.stringify(navigationData), {
|
||
headers: {
|
||
'Content-Type': 'application/json; charset=utf-8',
|
||
'Cache-Control': 'no-cache'
|
||
}
|
||
});
|
||
}
|
||
|
||
async function addCategory(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 检查分类是否已存在
|
||
const categoryExists = navigationData.categories.some(
|
||
cat => cat.name === requestBody.name
|
||
);
|
||
|
||
if (categoryExists) {
|
||
return new Response(JSON.stringify({ error: '分类已存在' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
navigationData.categories.push({
|
||
name: requestBody.name,
|
||
sites: []
|
||
});
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '分类添加成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
async function addSite(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证索引有效性
|
||
if (requestBody.categoryIndex < 0 ||
|
||
requestBody.categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 添加站点描述字段
|
||
navigationData.categories[requestBody.categoryIndex].sites.push({
|
||
name: requestBody.siteName,
|
||
url: requestBody.siteUrl,
|
||
icon: requestBody.siteIcon,
|
||
info: requestBody.siteInfo || '' // 添加站点描述
|
||
});
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '站点添加成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
async function editSite(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 获取原始分类索引和新分类索引
|
||
const originalCategoryIndex = requestBody.originalCategoryIndex;
|
||
const newCategoryIndex = requestBody.newCategoryIndex;
|
||
const siteIndex = requestBody.siteIndex;
|
||
|
||
// 验证索引有效性
|
||
if (originalCategoryIndex < 0 ||
|
||
originalCategoryIndex >= navigationData.categories.length ||
|
||
newCategoryIndex < 0 ||
|
||
newCategoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
const originalCategory = navigationData.categories[originalCategoryIndex];
|
||
if (siteIndex < 0 || siteIndex >= originalCategory.sites.length) {
|
||
return new Response(JSON.stringify({ error: '无效站点索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
// 获取站点对象
|
||
const site = originalCategory.sites[siteIndex];
|
||
|
||
// 更新站点信息
|
||
site.name = requestBody.siteName;
|
||
site.url = requestBody.siteUrl;
|
||
site.icon = requestBody.siteIcon;
|
||
site.info = requestBody.siteInfo || '';
|
||
|
||
// 如果分类发生变化，移动站点到新分类
|
||
if (originalCategoryIndex !== newCategoryIndex) {
|
||
// 从原分类移除
|
||
originalCategory.sites.splice(siteIndex, 1);
|
||
|
||
// 添加到新分类
|
||
navigationData.categories[newCategoryIndex].sites.push(site);
|
||
}
|
||
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '站点更新成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
async function deleteCategory(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证索引有效性
|
||
if (requestBody.categoryIndex < 0 ||
|
||
requestBody.categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
navigationData.categories.splice(requestBody.categoryIndex, 1);
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '分类删除成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
async function deleteSite(request) {
|
||
const requestBody = await request.json();
|
||
const navigationData = await getNavigationData();
|
||
|
||
// 验证索引有效性
|
||
if (requestBody.categoryIndex < 0 ||
|
||
requestBody.categoryIndex >= navigationData.categories.length) {
|
||
return new Response(JSON.stringify({ error: '无效分类索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
const category = navigationData.categories[requestBody.categoryIndex];
|
||
if (requestBody.siteIndex < 0 || requestBody.siteIndex >= category.sites.length) {
|
||
return new Response(JSON.stringify({ error: '无效站点索引' }), {
|
||
status: 400,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
}
|
||
|
||
category.sites.splice(requestBody.siteIndex, 1);
|
||
await setNavigationData(navigationData);
|
||
return new Response(JSON.stringify({ message: '站点删除成功' }), {
|
||
headers: { 'Content-Type': 'application/json; charset=utf-8' }
|
||
});
|
||
}
|
||
|
||
async function loadNotification() {
|
||
const notification = await NAVIGATION_DATA.get('info');
|
||
return new Response(notification || '', {
|
||
headers: { 'Cache-Control': 'no-cache' }
|
||
});
|
||
}
|
||
|
||
// 页面渲染函数
|
||
async function renderLoginPage(showError = false) {
|
||
return `
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Dispark|点滴星火登录页</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
height: 100vh;
|
||
background-image: url('https://cdn.pixabay.com/photo/2024/09/06/02/03/hill-9026381_960_720.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
font-family: Arial, sans-serif;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
h1 {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
font-size: 36px;
|
||
margin: 0;
|
||
color: #fff;
|
||
}
|
||
.login-container {
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
padding: 30px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 350px;
|
||
text-align: center;
|
||
}
|
||
.login-container input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin: 5px 0 15px 0;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
.login-container button {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background-color: #007BFF;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.login-container button:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
footer {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
footer a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.error-message {
|
||
color: #ff0000;
|
||
margin-bottom: 15px;
|
||
display: ${showError ? 'block' : 'none'};
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1 style="display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 24px;">
|
||
<a href="https://www.9872991.xyz/">
|
||
<img src="https://api.iconify.design/devicon/prometheus.svg?width=64&height=64&color=%23FFFFFF"
|
||
alt="Prometheus Icon" style="filter: invert(1);">
|
||
</a>
|
||
<span>Dispark|点滴星火</span>
|
||
</h1>
|
||
|
||
<div class="login-container">
|
||
<div class="error-message">用户名或密码错误，请重试</div>
|
||
<form action="/login" method="POST">
|
||
<input type="text" id="username" name="username" placeholder="用户名" required>
|
||
<input type="password" id="password" name="password" placeholder="密码" required>
|
||
<button type="submit" id="login-button">登录</button>
|
||
</form>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>
|
||
<span>© 2025</span>
|
||
<a href="https://www.9912987.xyz/" target="_blank">Dispark|点滴星火</a>
|
||
<a href="/privacy">隐私政策</a>
|
||
<a href="mailto:i@dispark.top">联系方式</a>
|
||
<a href="https://wwww.9872991.xyz">更多书签</a>
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>`;
|
||
}
|
||
|
||
async function renderNavigationPage() {
|
||
const navigationData = await getNavigationData();
|
||
|
||
const html = `
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Dispark|点滴星火</title>
|
||
<link rel="icon" href="https://api.iconify.design/devicon/prometheus.svg" type="image/png">
|
||
<script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
padding: 20px;
|
||
background-color: #f4f4f9;
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
/* 搜索框容器 - 顶部居中位置 */
|
||
.search-container {
|
||
position: relative;
|
||
max-width: 200px;
|
||
margin: 0 auto;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
/* 搜索框样式 */
|
||
#searchInput {
|
||
width: 100%;
|
||
padding: 14px 20px 14px 50px;
|
||
font-size: 16px;
|
||
border: none;
|
||
border-radius: 50px;
|
||
background: #fff;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
color: #333;
|
||
outline: none;
|
||
}
|
||
|
||
#searchInput:focus {
|
||
box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 搜索图标 */
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #999;
|
||
pointer-events: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
#searchInput:focus + .search-icon {
|
||
color: #4A90E2;
|
||
}
|
||
|
||
/* 清除按钮 */
|
||
.clear-btn {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: #999;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
|
||
#searchInput:not(:placeholder-shown) + .search-icon + .clear-btn {
|
||
display: block;
|
||
}
|
||
|
||
/* 搜索结果计数 */
|
||
.search-results {
|
||
text-align: center;
|
||
margin: 10px 0 20px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 优化后的 header 样式 */
|
||
header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: sticky;
|
||
top: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
z-index: 100;
|
||
padding: 10px 15px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
/* 添加拖拽样式 */
|
||
.drag-handle {
|
||
cursor: move;
|
||
opacity: 0.5;
|
||
transition: opacity 0.3s;
|
||
margin-right: 5px;
|
||
}
|
||
.drag-handle:hover {
|
||
opacity: 1;
|
||
}
|
||
.dragging {
|
||
opacity: 0.7;
|
||
transform: scale(1.02);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 移动端优化 - 关键改进 */
|
||
@media (max-width: 768px) {
|
||
header {
|
||
flex-direction: column;
|
||
padding: 5px 8px; /* 更紧凑的内边距 */
|
||
}
|
||
header > div {
|
||
width: 100%;
|
||
max-width: 100% !important;
|
||
min-width: 100% !important;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.search-container {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.header-buttons {
|
||
justify-content: center !important;
|
||
}
|
||
.header-top {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-left {
|
||
text-align: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.header-left h1 {
|
||
font-size: 1.1rem !important; /* 更小的字体 */
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 1.2rem !important; /* 更小的标题 */
|
||
margin: 3px 0 !important;
|
||
}
|
||
|
||
.title-subtext {
|
||
font-size: 0.6rem !important; /* 更小的副标题 */
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
#datetime {
|
||
font-size: 0.7rem;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
.header-buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 5px;
|
||
width: 100%;
|
||
margin: 5px 0 0 0 !important;
|
||
}
|
||
|
||
.header-buttons button {
|
||
padding: 5px 8px;
|
||
font-size: 11px;
|
||
min-height: 32px;
|
||
}
|
||
|
||
/* 滚动时进一步缩小 header */
|
||
body.scrolled header {
|
||
padding: 3px 5px;
|
||
height: 50px; /* 固定高度 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
body.scrolled .header-middle {
|
||
display: none; /* 滚动时隐藏中间部分 */
|
||
}
|
||
|
||
body.scrolled .header-top {
|
||
width: 100%;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
body.scrolled .header-left {
|
||
flex: 1;
|
||
text-align: left;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
body.scrolled .header-buttons {
|
||
display: none; /* 滚动时隐藏按钮 */
|
||
}
|
||
|
||
/* 调整主内容区域 */
|
||
main {
|
||
margin-top: 120px; /* 更小的初始高度 */
|
||
transition: margin-top 0.3s ease;
|
||
}
|
||
|
||
body.scrolled main {
|
||
margin-top: 60px; /* 滚动后更小的空间 */
|
||
}
|
||
footer {
|
||
font-size: 12px;
|
||
flex-direction: column;
|
||
height: auto;
|
||
padding: 8px 0;
|
||
}
|
||
footer p {
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
footer a::after {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
/* 桌面端优化 */
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-middle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 5px 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.header-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-right: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 滚动时缩小 header */
|
||
body.scrolled header {
|
||
padding: 5px 15px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
body.scrolled .main-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
body.scrolled .title-subtext {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
body.scrolled .header-buttons button {
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
/* 主内容区域调整 */
|
||
main {
|
||
margin-top: 140px;
|
||
transition: margin-top 0.3s ease;
|
||
}
|
||
|
||
body.scrolled main {
|
||
margin-top: 70px;
|
||
}
|
||
main {
|
||
margin-top: 80px;
|
||
padding: 20px;
|
||
}
|
||
section {
|
||
margin-bottom: 30px;
|
||
}
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
color: #4A90E2;
|
||
border-bottom: 2px solid #4A90E2;
|
||
padding-bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
gap: 10px;
|
||
}
|
||
li {
|
||
width: 120px;
|
||
padding: 10px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
li:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||
}
|
||
.item-icon {
|
||
cursor: pointer;
|
||
}
|
||
a {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
color: #ff6700;
|
||
}
|
||
.opts {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
}
|
||
button {
|
||
cursor: pointer;
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
#addCategoryForm {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
gap: 15px;
|
||
}
|
||
#notification-banner {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
#notification-message {
|
||
display: inline-block;
|
||
padding-left: 100%;
|
||
animation: scroll-left 20s linear infinite;
|
||
}
|
||
@keyframes scroll-left {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-100%); }
|
||
}
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
/* 新增标题样式 */
|
||
.main-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(45deg, #4A90E2, #5E60CE, #7B68EE);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-fill-color: transparent;
|
||
text-shadow: 0 4px 10px rgba(74, 144, 226, 0.2);
|
||
letter-spacing: 1px;
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: 0 0 10px 0;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
.main-title::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #4A90E2, #7B68EE);
|
||
border-radius: 2px;
|
||
transform: scaleX(0.8);
|
||
}
|
||
|
||
.title-subtext {
|
||
font-size: 1rem;
|
||
color: #666;
|
||
font-weight: 400;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
margin-top: 5px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 添加标题动画 */
|
||
@keyframes titleGlow {
|
||
0% { text-shadow: 0 4px 10px rgba(74, 144, 226, 0.2); }
|
||
50% { text-shadow: 0 4px 20px rgba(123, 104, 238, 0.4); }
|
||
100% { text-shadow: 0 4px 10px rgba(74, 144, 226, 0.2); }
|
||
}
|
||
|
||
.main-title {
|
||
animation: titleGlow 4s ease-in-out infinite;
|
||
}
|
||
/* 修改模态框为不透明背景 */
|
||
.modal-content {
|
||
background: #fff; /* 改为纯白色不透明背景 */
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
width: 90%;
|
||
max-width: 500px;
|
||
position: relative;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
/* 添加分类模态框特定样式 */
|
||
/* 优化添加分类模态框为水平布局 */
|
||
#addCategoryModal .modal-content {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
padding: 25px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
}
|
||
|
||
#addCategoryModal h2 {
|
||
font-size: 20px;
|
||
color: #333;
|
||
margin-top: 0;
|
||
margin-bottom: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
|
||
#addCategoryForm {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
#addCategoryForm input {
|
||
flex: 1;
|
||
padding: 12px 15px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
transition: all 0.3s;
|
||
height: 46px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#addCategoryForm input:focus {
|
||
border-color: #ff9800;
|
||
box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
|
||
outline: none;
|
||
}
|
||
|
||
#addCategoryForm button[type="submit"] {
|
||
background: #ff9800;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 0 20px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
height: 46px;
|
||
min-width: 100px;
|
||
}
|
||
|
||
#addCategoryForm button[type="submit"]:hover {
|
||
background: #e68a00;
|
||
}
|
||
|
||
/* 所有模态框的统一关闭按钮样式 */
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
opacity: 0.6;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
opacity: 1;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.modal-close::before, .modal-close::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 18px;
|
||
height: 2px;
|
||
background: #666;
|
||
transform-origin: center;
|
||
}
|
||
|
||
.modal-close::before {
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
}
|
||
|
||
.modal-close::after {
|
||
transform: translate(-50%, -50%) rotate(-45deg);
|
||
}
|
||
|
||
/* 添加站点和编辑站点模态框的样式 */
|
||
#myModal .modal-content,
|
||
#editSiteModal .modal-content {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
padding: 25px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
}
|
||
|
||
#myModal h2,
|
||
#editSiteModal h2 {
|
||
font-size: 20px;
|
||
color: #333;
|
||
margin-top: 0;
|
||
margin-bottom: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
#addSiteForm,
|
||
#editSiteForm {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
#addSiteForm input,
|
||
#addSiteForm select,
|
||
#addSiteForm textarea,
|
||
#editSiteForm input,
|
||
#editSiteForm select,
|
||
#editSiteForm textarea {
|
||
padding: 12px 15px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
#addSiteForm input:focus,
|
||
#addSiteForm select:focus,
|
||
#addSiteForm textarea:focus,
|
||
#editSiteForm input:focus,
|
||
#editSiteForm select:focus,
|
||
#editSiteForm textarea:focus {
|
||
border-color: #4A90E2;
|
||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||
outline: none;
|
||
}
|
||
|
||
#addSiteForm button[type="submit"],
|
||
#editSiteForm button[type="submit"] {
|
||
background: #4A90E2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
#addSiteForm button[type="submit"]:hover {
|
||
background: #3a7bc8;
|
||
}
|
||
|
||
#editSiteForm button[type="submit"] {
|
||
background: #ff9800;
|
||
}
|
||
|
||
#editSiteForm button[type="submit"]:hover {
|
||
background: #e68a00;
|
||
}
|
||
form {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
input, select, textarea {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-family: inherit;
|
||
background: #f9f9f9;
|
||
}
|
||
button[type="submit"] {
|
||
padding: 10px;
|
||
background: #007BFF;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
/* 新增悬停提示框样式 */
|
||
/* 添加站点描述提示框的悬停样式 */
|
||
.info-icon {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
color: #999;
|
||
cursor: help;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
transition: all 0.3s;
|
||
z-index: 10;
|
||
}
|
||
|
||
.info-icon:hover {
|
||
opacity: 1;
|
||
color: #4A90E2;
|
||
}
|
||
|
||
.info-tooltip {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
background-color: #333;
|
||
color: #fff;
|
||
padding: 10px 15px;
|
||
border-radius: 6px;
|
||
white-space: normal;
|
||
width: max-content;
|
||
max-width: 280px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||
z-index: 100;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.info-icon:hover .info-tooltip {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.info-tooltip::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 100%;
|
||
right: 10px;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
border-color: transparent transparent #333 transparent;
|
||
}
|
||
|
||
/* 修复站点链接点击问题 */
|
||
.item-icon {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.site-link {
|
||
display: block;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.site-name {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.site-name:hover {
|
||
color: #ff6700;
|
||
}
|
||
/* 自定义确认对话框样式 */
|
||
#customConfirmModal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 2000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.confirm-content {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
padding: 25px;
|
||
max-width: 400px;
|
||
width: 90%;
|
||
text-align: center;
|
||
}
|
||
|
||
.confirm-message {
|
||
font-size: 18px;
|
||
margin-bottom: 25px;
|
||
color: #333;
|
||
}
|
||
|
||
.confirm-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.confirm-button {
|
||
padding: 10px 25px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.confirm-ok {
|
||
background: #ff5252;
|
||
color: white;
|
||
}
|
||
|
||
.confirm-ok:hover {
|
||
background: #e04545;
|
||
}
|
||
|
||
.confirm-cancel {
|
||
background: #e0e0e0;
|
||
color: #333;
|
||
}
|
||
|
||
.confirm-cancel:hover {
|
||
background: #d0d0d0;
|
||
}
|
||
/* 页脚样式优化 - 开始 */
|
||
footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 40px; /* 增加高度 */
|
||
background: #f0f0f0;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
z-index: 999;
|
||
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
|
||
footer p {
|
||
margin: 0;
|
||
padding: 0 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
footer a {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
footer a:hover {
|
||
color: #2980b9;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
footer a::after {
|
||
content: "|";
|
||
margin-left: 10px;
|
||
color: #ccc;
|
||
}
|
||
|
||
footer a:last-child::after {
|
||
content: none;
|
||
}
|
||
/* 页脚样式优化 - 结束 */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header style="display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: fixed; top: 0; left: 0; z-index: 1000; box-sizing: border-box;">
|
||
<!-- 左侧：Logo和搜索框组合 -->
|
||
<div style="display: flex; align-items: center; flex: 1; min-width: 40%;">
|
||
<!-- Logo和标题 -->
|
||
<div style="display: flex; flex-direction: column; margin-right: 20px; flex-shrink: 0;">
|
||
<div style="display: flex; align-items: center;">
|
||
<a href="https://www.9872991.xyz/" target="_blank" style="display: flex; align-items: center;">
|
||
<img src="https://api.iconify.design/devicon/prometheus.svg?width=48&height=48" alt="Logo">
|
||
<h1 style="margin-left: 10px; margin-bottom: 0; font-size: 1.5rem; color: #333; white-space: nowrap;">Dispark</h1>
|
||
</a>
|
||
</div>
|
||
<div id="datetime" style="font-size: 0.9rem; margin-top: 5px; color: #666; white-space: nowrap;">
|
||
正在加载时间...
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索框 - 靠近Logo -->
|
||
<div class="search-container" style="flex: 1; min-width: 30px; max-width: 300px;">
|
||
<input type="text" id="searchInput" placeholder="搜索站点名称或描述...">
|
||
<span class="search-icon iconify" data-icon="mdi:magnify" data-width="24" data-height="24"></span>
|
||
<button class="clear-btn" onclick="clearSearch()">
|
||
<span class="iconify" data-icon="mdi:close" data-width="20" data-height="20"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：主标题和按钮 -->
|
||
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 20%; overflow: hidden;">
|
||
<!-- 主标题 -->
|
||
<div class="main-title" style="font-size: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">点滴星火导航站</div>
|
||
<div class="title-subtext" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">探索 · 连接 · 发现</div>
|
||
</div>
|
||
|
||
<!-- 右侧按钮组 -->
|
||
<div style="display: flex; gap: 10px; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; max-width: 40%;">
|
||
<button id="addCategoryBtn" style="background-color: #ff9800; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="carbon:add-filled" data-width="16px" data-height="16px"></span>
|
||
添加分类
|
||
</button>
|
||
|
||
<button onclick="window.open('https://xinsheng.9912987.xyz/', '_blank')" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="mdi:message-text" data-width="16px" data-height="16px"></span>
|
||
留言板
|
||
</button>
|
||
|
||
<button onclick="window.open('https://news.9912987.xyz/', '_blank')" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="mdi:newspaper" data-width="16px" data-height="16px"></span>
|
||
新闻
|
||
</button>
|
||
<!-- 导出按钮 -->
|
||
<button onclick="exportData()" style="background-color: #17a2b8; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="mdi:export" data-width="16px" data-height="16px"></span>
|
||
导出
|
||
</button>
|
||
|
||
<!-- 导入按钮（触发隐藏 file input） -->
|
||
<button onclick="document.getElementById('importFile').click()" style="background-color: #6c757d; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="mdi:import" data-width="16px" data-height="16px"></span>
|
||
导入
|
||
</button>
|
||
<input type="file" id="importFile" accept=".json,application/json" style="display: none;" onchange="importData(this.files[0])">
|
||
<button onclick="location.href='/login.html'" style="background-color: #007BFF; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
|
||
<span class="iconify" data-icon="mdi:logout" data-width="16px" data-height="16px"></span>
|
||
退出
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<!-- 搜索结果计数显示 -->
|
||
<div class="search-results" id="searchResults"></div>
|
||
${renderCategories(navigationData.categories)} <!-- 确保这里调用了renderCategories -->
|
||
|
||
</main>
|
||
<!-- 自定义确认对话框 -->
|
||
<div id="customConfirmModal">
|
||
<div class="confirm-content">
|
||
<div class="confirm-message" id="confirmMessage"></div>
|
||
<div class="confirm-buttons">
|
||
<button class="confirm-button confirm-ok" id="confirmOk">确定</button>
|
||
<button class="confirm-button confirm-cancel" id="confirmCancel">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 修复后的添加分类模态框 -->
|
||
<div id="addCategoryModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-close" onclick="closeModal('addCategoryModal')"></div>
|
||
<h2>添加新分类</h2>
|
||
<form id="addCategoryForm">
|
||
<input type="text" name="categoryName" placeholder="输入分类名称" required>
|
||
<button type="submit">添加分类</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- 添加站点模态框 -->
|
||
<div id="myModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-close" onclick="closeModal('myModal')"></div>
|
||
<h2>添加新站点</h2>
|
||
<form id="addSiteForm">
|
||
<select name="categoryIndex" required>
|
||
${navigationData.categories.map((category, index) =>
|
||
`<option value="${index}">${category.name}</option>`
|
||
).join('')}
|
||
</select>
|
||
<input type="text" name="siteName" placeholder="站点名称" required>
|
||
<input type="url" name="siteUrl" placeholder="站点链接" required>
|
||
<input type="text" name="siteIcon" placeholder="图标名称" required value="noto:fire">
|
||
<textarea name="siteInfo" placeholder="站点描述 (可选)" rows="3"></textarea>
|
||
<button type="submit">添加站点</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- 添加分类名称修改模态框到HTML -->
|
||
<div id="editCategoryModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-close" onclick="closeModal('editCategoryModal')"></div>
|
||
<h2>修改分类名称</h2>
|
||
<form id="editCategoryForm">
|
||
<input type="hidden" name="categoryIndex">
|
||
<input type="text" name="categoryName" placeholder="分类名称" required>
|
||
<button type="submit">保存修改</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 在编辑站点模态框中添加分类选择 -->
|
||
<!-- 编辑站点模态框 -->
|
||
<div id="editSiteModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-close" onclick="closeModal('editSiteModal')"></div>
|
||
<h2>修改站点</h2>
|
||
<form id="editSiteForm">
|
||
<input type="hidden" name="originalCategoryIndex">
|
||
<input type="hidden" name="siteIndex">
|
||
|
||
<!-- 添加分类选择下拉菜单 -->
|
||
<select name="newCategoryIndex" required>
|
||
${navigationData.categories.map((category, index) =>
|
||
`<option value="${index}">${category.name}</option>`
|
||
).join('')}
|
||
</select>
|
||
|
||
<input type="text" name="siteName" placeholder="站点名称" required>
|
||
<input type="url" name="siteUrl" placeholder="站点链接" required>
|
||
<input type="text" name="siteIcon" placeholder="图标名称" required>
|
||
<textarea name="siteInfo" placeholder="站点描述 (可选)" rows="3"></textarea>
|
||
<button type="submit">保存修改</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
// 在script标签中添加拖拽功能
|
||
let draggedItem = null;
|
||
|
||
function onDragStart(event, categoryIndex, siteIndex) {
|
||
event.dataTransfer.setData("text/plain", JSON.stringify({
|
||
categoryIndex: categoryIndex,
|
||
siteIndex: siteIndex
|
||
}));
|
||
event.currentTarget.classList.add('dragging');
|
||
draggedItem = event.currentTarget;
|
||
}
|
||
|
||
function onDragOver(event) {
|
||
event.preventDefault();
|
||
event.dataTransfer.dropEffect = "move";
|
||
}
|
||
|
||
async function onDrop(event, targetCategoryIndex, targetSiteIndex) {
|
||
event.preventDefault();
|
||
|
||
if (!draggedItem) return;
|
||
|
||
const data = JSON.parse(event.dataTransfer.getData("text/plain"));
|
||
const sourceCategoryIndex = data.categoryIndex;
|
||
const sourceSiteIndex = data.siteIndex;
|
||
|
||
// 移除拖拽样式
|
||
draggedItem.classList.remove('dragging');
|
||
draggedItem = null;
|
||
|
||
// 如果是同一分类内的移动
|
||
if (sourceCategoryIndex === targetCategoryIndex) {
|
||
try {
|
||
const response = await fetch('/reorder-site', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
categoryIndex: sourceCategoryIndex,
|
||
oldIndex: sourceSiteIndex,
|
||
newIndex: targetSiteIndex
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
location.reload();
|
||
} else {
|
||
const error = await response.json();
|
||
alert(error.error || '移动失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('移动失败:', error);
|
||
alert('站点移动失败，请重试');
|
||
}
|
||
} else {
|
||
alert('站点只能在同一个分类内移动位置');
|
||
}
|
||
}
|
||
// 添加切换分类折叠状态函数
|
||
async function toggleCategoryState(categoryIndex) {
|
||
const response = await fetch('/toggle-category', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ categoryIndex })
|
||
});
|
||
|
||
if (response.ok) {
|
||
const result = await response.json();
|
||
const categoryElement = document.getElementById('category-sites-' + categoryIndex);
|
||
const toggleIcon = document.getElementById('toggle-icon-' + categoryIndex);
|
||
|
||
if (result.collapsed) {
|
||
categoryElement.style.display = 'none';
|
||
toggleIcon.setAttribute('data-icon', 'mdi:chevron-right');
|
||
} else {
|
||
categoryElement.style.display = 'flex';
|
||
toggleIcon.setAttribute('data-icon', 'mdi:chevron-down');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 修复站点链接点击问题
|
||
function openSiteLink(url) {
|
||
window.open(url, '_blank');
|
||
}
|
||
// 自定义确认函数
|
||
let confirmCallback = null;
|
||
let currentCategoryIndex = null;
|
||
let currentSiteIndex = null;
|
||
let isSiteDeletion = false;
|
||
|
||
function showConfirm(message, callback, categoryIndex, siteIndex = null) {
|
||
document.getElementById('confirmMessage').textContent = message;
|
||
confirmCallback = callback;
|
||
currentCategoryIndex = categoryIndex;
|
||
currentSiteIndex = siteIndex;
|
||
isSiteDeletion = siteIndex !== null;
|
||
document.getElementById('customConfirmModal').style.display = "flex";
|
||
}
|
||
|
||
// 打开编辑分类模态框
|
||
function openEditCategoryModal(categoryIndex) {
|
||
const categoryName = document.getElementById(\`category-name-\${categoryIndex}\`).textContent;
|
||
document.getElementById('editCategoryForm').categoryIndex.value = categoryIndex;
|
||
document.getElementById('editCategoryForm').categoryName.value = categoryName;
|
||
document.getElementById('editCategoryModal').style.display = "flex";
|
||
}
|
||
// 添加编辑分类表单提交事件
|
||
document.getElementById('editCategoryForm')?.addEventListener('submit', async function(event) {
|
||
event.preventDefault();
|
||
const formData = new FormData(event.target);
|
||
const data = {
|
||
categoryIndex: parseInt(formData.get('categoryIndex')),
|
||
newName: formData.get('categoryName')
|
||
};
|
||
|
||
const response = await fetch('/edit-category', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeModal('editCategoryModal');
|
||
// 更新分类名称显示
|
||
const categoryNameElement = document.getElementById(\`category-name-\${data.categoryIndex}\`);
|
||
if (categoryNameElement) {
|
||
categoryNameElement.textContent = data.newName;
|
||
}
|
||
} else {
|
||
const error = await response.json();
|
||
alert(error.error || '修改失败');
|
||
}
|
||
});
|
||
|
||
// 绑定确认对话框按钮事件
|
||
document.getElementById('confirmOk').addEventListener('click', function() {
|
||
if (confirmCallback) {
|
||
confirmCallback(currentCategoryIndex, currentSiteIndex);
|
||
}
|
||
document.getElementById('customConfirmModal').style.display = "none";
|
||
});
|
||
|
||
document.getElementById('confirmCancel').addEventListener('click', function() {
|
||
document.getElementById('customConfirmModal').style.display = "none";
|
||
});
|
||
|
||
// 修改删除分类函数 - 修复字符串问题
|
||
function deleteCategory(categoryIndex) {
|
||
const categoryName = navigationData.categories[categoryIndex]?.name || '该分类';
|
||
showConfirm('确定要删除分类 "' + categoryName + '" 吗？此操作不可恢复。',
|
||
performDeleteCategory,
|
||
categoryIndex);
|
||
}
|
||
|
||
async function performDeleteCategory(categoryIndex) {
|
||
const response = await fetch('/delete-category', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ categoryIndex })
|
||
});
|
||
|
||
if (response.ok) location.reload();
|
||
}
|
||
|
||
// 修改删除站点函数 - 修复字符串问题
|
||
function deleteSite(categoryIndex, siteIndex) {
|
||
const siteName = navigationData.categories[categoryIndex]?.sites[siteIndex]?.name || '该站点';
|
||
showConfirm('确定要删除站点 "' + siteName + '" 吗？此操作不可恢复。',
|
||
performDeleteSite,
|
||
categoryIndex,
|
||
siteIndex);
|
||
}
|
||
|
||
async function performDeleteSite(categoryIndex, siteIndex) {
|
||
const response = await fetch('/delete-site', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ categoryIndex, siteIndex })
|
||
});
|
||
|
||
if (response.ok) location.reload();
|
||
}
|
||
// 初始化导航数据（从服务器获取）
|
||
let navigationData = { categories: [] };
|
||
|
||
// 关闭模态框函数
|
||
function closeModal(modalId) {
|
||
document.getElementById(modalId).style.display = "none";
|
||
}
|
||
|
||
// 添加分类按钮事件
|
||
document.getElementById('addCategoryBtn')?.addEventListener('click', function() {
|
||
document.getElementById('addCategoryModal').style.display = "flex";
|
||
});
|
||
|
||
// 添加分类表单提交事件
|
||
document.getElementById('addCategoryForm')?.addEventListener('submit', async function(event) {
|
||
event.preventDefault();
|
||
const categoryName = event.target.categoryName.value;
|
||
|
||
const response = await fetch('/data');
|
||
const navigationData = await response.json();
|
||
|
||
const categoryExists = navigationData.categories.some(
|
||
cat => cat.name === categoryName
|
||
);
|
||
|
||
if (!categoryExists) {
|
||
const addResponse = await fetch('/add-category', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: categoryName })
|
||
});
|
||
|
||
if (addResponse.ok) {
|
||
document.getElementById('addCategoryModal').style.display = "none";
|
||
location.reload();
|
||
}
|
||
} else {
|
||
alert('该分类已经存在，请输入不同的分类名称。');
|
||
}
|
||
});
|
||
|
||
|
||
// 添加站点表单提交事件
|
||
document.getElementById('addSiteForm')?.addEventListener('submit', async function(event) {
|
||
event.preventDefault();
|
||
const formData = new FormData(event.target);
|
||
const data = {
|
||
categoryIndex: parseInt(formData.get('categoryIndex')),
|
||
siteName: formData.get('siteName'),
|
||
siteUrl: formData.get('siteUrl'),
|
||
siteIcon: formData.get('siteIcon'),
|
||
siteInfo: formData.get('siteInfo')
|
||
};
|
||
|
||
const response = await fetch('/add-site', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeModal('myModal');
|
||
location.reload();
|
||
}
|
||
});
|
||
|
||
// 编辑站点表单提交事件
|
||
document.getElementById('editSiteForm')?.addEventListener('submit', async function(event) {
|
||
event.preventDefault();
|
||
const formData = new FormData(event.target);
|
||
const data = {
|
||
originalCategoryIndex: parseInt(formData.get('originalCategoryIndex')),
|
||
newCategoryIndex: parseInt(formData.get('newCategoryIndex')),
|
||
siteIndex: parseInt(formData.get('siteIndex')),
|
||
siteName: formData.get('siteName'),
|
||
siteUrl: formData.get('siteUrl'),
|
||
siteIcon: formData.get('siteIcon'),
|
||
siteInfo: formData.get('siteInfo')
|
||
};
|
||
|
||
const response = await fetch('/edit-site', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (response.ok) {
|
||
closeModal('editSiteModal');
|
||
location.reload();
|
||
}
|
||
});
|
||
|
||
// 模态框控制
|
||
const modal = document.getElementById("myModal");
|
||
const editModal = document.getElementById("editSiteModal");
|
||
const infoModal = document.getElementById("infoModal");
|
||
|
||
// 打开添加站点模态框的函数
|
||
function openAddModal(categoryIndex) {
|
||
document.getElementById('myModal').style.display = "flex";
|
||
document.querySelector("#addSiteForm select").value = categoryIndex;
|
||
}
|
||
|
||
// 打开编辑站点模态框的函数
|
||
function openEditModal(categoryIndex, siteIndex, siteName, siteUrl, siteIcon, siteInfo) {
|
||
const modal = document.getElementById('editSiteModal');
|
||
modal.style.display = "flex";
|
||
|
||
const form = document.getElementById('editSiteForm');
|
||
form.originalCategoryIndex.value = categoryIndex;
|
||
form.newCategoryIndex.value = categoryIndex;
|
||
form.siteIndex.value = siteIndex;
|
||
form.siteName.value = siteName;
|
||
form.siteUrl.value = siteUrl;
|
||
form.siteIcon.value = siteIcon;
|
||
form.siteInfo.value = siteInfo || '';
|
||
}
|
||
|
||
// 显示站点描述
|
||
function showSiteInfo(siteName, siteInfo) {
|
||
if (!siteInfo) return;
|
||
|
||
document.getElementById('info-title').textContent = siteName + ' - 描述';
|
||
document.getElementById('info-text').textContent = siteInfo;
|
||
infoModal.style.display = "flex";
|
||
}
|
||
|
||
// 关闭所有模态框
|
||
function closeModals() {
|
||
document.getElementById('myModal').style.display = "none";
|
||
document.getElementById('editSiteModal').style.display = "none";
|
||
document.getElementById('infoModal').style.display = "none";
|
||
document.getElementById('addCategoryModal').style.display = "none";
|
||
}
|
||
|
||
// 关闭按钮事件
|
||
document.querySelectorAll('.close, .info-close').forEach(btn => {
|
||
btn.addEventListener('click', closeModals);
|
||
});
|
||
|
||
// 点击模态框外部关闭
|
||
window.addEventListener('click', function(event) {
|
||
if (event.target.classList.contains('modal')) {
|
||
// 关闭所有模态框
|
||
document.querySelectorAll('.modal').forEach(modal => {
|
||
modal.style.display = "none";
|
||
});
|
||
}
|
||
});
|
||
|
||
|
||
// 日期显示
|
||
function updateDate() {
|
||
const now = new Date();
|
||
const options = {
|
||
weekday: 'long',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
};
|
||
document.getElementById('datetime').textContent =
|
||
now.toLocaleDateString('zh-CN', options);
|
||
}
|
||
// 添加悬停事件处理函数
|
||
function setupTooltips() {
|
||
// 为所有信息图标添加悬停事件
|
||
document.querySelectorAll('.info-icon').forEach(icon => {
|
||
const tooltip = icon.querySelector('.info-tooltip');
|
||
|
||
icon.addEventListener('mouseenter', () => {
|
||
tooltip.style.visibility = 'visible';
|
||
tooltip.style.opacity = '1';
|
||
tooltip.style.transform = 'translateY(0)';
|
||
});
|
||
|
||
icon.addEventListener('mouseleave', () => {
|
||
tooltip.style.visibility = 'hidden';
|
||
tooltip.style.opacity = '0';
|
||
tooltip.style.transform = 'translateY(10px)';
|
||
});
|
||
});
|
||
}
|
||
// 优化后的滚动处理
|
||
window.addEventListener('scroll', function() {
|
||
const scrollPosition = window.scrollY;
|
||
const header = document.querySelector('header');
|
||
const main = document.querySelector('main');
|
||
const isMobile = window.innerWidth <= 768;
|
||
|
||
if (scrollPosition > 30) {
|
||
document.body.classList.add('scrolled');
|
||
} else {
|
||
document.body.classList.remove('scrolled');
|
||
}
|
||
|
||
// 移动设备上进一步优化
|
||
if (isMobile) {
|
||
if (scrollPosition > 50) {
|
||
header.style.position = 'fixed';
|
||
header.style.height = '50px';
|
||
main.style.marginTop = '60px';
|
||
} else {
|
||
header.style.position = 'sticky';
|
||
header.style.height = 'auto';
|
||
main.style.marginTop = '120px';
|
||
}
|
||
}
|
||
});
|
||
// 添加搜索功能
|
||
document.getElementById('searchInput').addEventListener('input', function() {
|
||
const searchTerm = this.value.trim().toLowerCase();
|
||
performSearch(searchTerm);
|
||
});
|
||
// 清除搜索
|
||
function clearSearch() {
|
||
document.getElementById('searchInput').value = '';
|
||
performSearch('');
|
||
}
|
||
|
||
// 搜索执行函数
|
||
function performSearch(term) {
|
||
const resultsContainer = document.getElementById('searchResults');
|
||
|
||
// 清除之前的高亮
|
||
document.querySelectorAll('.highlight').forEach(el => {
|
||
const parent = el.parentNode;
|
||
parent.replaceChild(document.createTextNode(el.textContent), el);
|
||
});
|
||
|
||
// 重置所有元素的显示状态
|
||
document.querySelectorAll('section').forEach(section => {
|
||
section.style.display = 'block';
|
||
});
|
||
|
||
document.querySelectorAll('section ul li').forEach(li => {
|
||
li.style.display = 'flex';
|
||
});
|
||
|
||
// 如果没有搜索词，显示所有内容
|
||
if (!term) {
|
||
resultsContainer.textContent = '';
|
||
return;
|
||
}
|
||
|
||
// 搜索逻辑
|
||
let matchCount = 0;
|
||
|
||
// 遍历所有站点
|
||
document.querySelectorAll('section ul li').forEach(li => {
|
||
const nameElement = li.querySelector('.site-name');
|
||
const infoElement = li.querySelector('.info-tooltip');
|
||
|
||
const name = nameElement ? nameElement.textContent.toLowerCase() : '';
|
||
const info = infoElement ? infoElement.textContent.toLowerCase() : '';
|
||
|
||
// 检查是否匹配
|
||
if (name.includes(term) || info.includes(term)) {
|
||
matchCount++;
|
||
|
||
// 高亮匹配文本
|
||
if (name.includes(term)) {
|
||
highlightText(nameElement, term);
|
||
}
|
||
|
||
if (info.includes(term) && infoElement) {
|
||
highlightText(infoElement, term);
|
||
}
|
||
} else {
|
||
// 隐藏不匹配的站点
|
||
li.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 隐藏没有匹配站点的分类
|
||
document.querySelectorAll('section').forEach(section => {
|
||
const visibleSites = section.querySelectorAll('ul li[style="display: flex;"]');
|
||
if (visibleSites.length === 0) {
|
||
section.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 显示结果计数
|
||
resultsContainer.textContent = matchCount > 0 ?
|
||
'找到 ' + matchCount + ' 个匹配结果' :
|
||
'没有找到匹配的站点';
|
||
|
||
// 如果有匹配结果，滚动到第一个结果
|
||
if (matchCount > 0) {
|
||
const firstMatch = document.querySelector('section:not([style="display: none;"])');
|
||
if (firstMatch) {
|
||
firstMatch.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}
|
||
}
|
||
// 导出数据
|
||
async function exportData() {
|
||
// 直接跳转到导出接口，浏览器会自动下载
|
||
window.location.href = '/export';
|
||
}
|
||
|
||
// 导入数据
|
||
async function importData(file) {
|
||
if (!file) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
const response = await fetch('/import', {
|
||
method: 'POST',
|
||
body: formData,
|
||
});
|
||
|
||
const result = await response.json();
|
||
if (response.ok) {
|
||
alert('导入成功，页面即将刷新');
|
||
location.reload();
|
||
} else {
|
||
alert('导入失败：' + (result.error || '未知错误'));
|
||
}
|
||
}
|
||
// 高亮文本函数
|
||
function highlightText(element, term) {
|
||
const text = element.textContent;
|
||
const regex = new RegExp('(' + escapeRegExp(term) + ')', 'gi');
|
||
|
||
const newContent = text.replace(regex, '<span class="highlight">$1</span>');
|
||
element.innerHTML = newContent;
|
||
}
|
||
|
||
// 转义正则表达式特殊字符
|
||
function escapeRegExp(string) {
|
||
return string.replace(/[.*+?^$()|[\]\\]/g, '\\$&');
|
||
}
|
||
|
||
// 初始化
|
||
window.addEventListener('load', async function() {
|
||
updateDate();
|
||
|
||
// 加载通知
|
||
const response = await fetch('/load-notification');
|
||
const notification = await response.text();
|
||
document.getElementById('notification-message').textContent =
|
||
notification || '暂无新通知';
|
||
|
||
// 设置工具提示
|
||
// setupTooltips();
|
||
// 移动设备上设置更紧凑的布局
|
||
if (window.innerWidth <= 768) {
|
||
document.querySelector('header').classList.add('mobile');
|
||
document.querySelector('main').style.marginTop = '120px';
|
||
}
|
||
});
|
||
</script>
|
||
<footer>
|
||
<p>
|
||
<a>© 2025</a>
|
||
<a href="https://www.9912987.xyz/" target="_blank">Dispark|点滴星火</a>
|
||
<a href="/privacy">隐私政策</a>
|
||
<a href="mailto:i@dispark.top">联系方式</a>
|
||
<a href="http://113.44.203.109:36615" target="_blank" rel="noopener noreferrer">更多书签</a>
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>`;
|
||
|
||
return html;
|
||
}
|
||
|
||
/// 修复renderCategories函数 - 关键修改
|
||
function renderCategories(categories) {
|
||
return categories.map((category, categoryIndex) => `
|
||
<section>
|
||
<h2 style="display: flex; align-items: center;">
|
||
<!-- 折叠/展开按钮 -->
|
||
<button class="toggle-btn" onclick="toggleCategoryState(${categoryIndex})"
|
||
style="background: none; border: none; cursor: pointer; margin-right: 8px;">
|
||
<span id="toggle-icon-${categoryIndex}" class="iconify"
|
||
data-icon="${category.collapsed ? 'mdi:chevron-right' : 'mdi:chevron-down'}"
|
||
data-width="24px" data-height="24px"></span>
|
||
</button>
|
||
|
||
<span id="category-name-${categoryIndex}">${category.name}</span>
|
||
|
||
<!-- 编辑分类名称按钮 -->
|
||
<button class="edit-category-btn" onclick="openEditCategoryModal(${categoryIndex})"
|
||
style="background: none; border: none; cursor: pointer; margin-left: 8px;">
|
||
<span class="iconify" data-icon="mdi:pencil" data-width="20px" data-height="20px"></span>
|
||
</button>
|
||
|
||
<!-- 删除分类按钮 -->
|
||
<button class="delete-ca-btn" onclick="deleteCategory(${categoryIndex})">
|
||
<span class="iconify" data-icon="material-symbols:delete-outline" data-width="24px" data-height="24px"></span>
|
||
</button>
|
||
|
||
<!-- 添加站点按钮 -->
|
||
<button class="add-site-btn" onclick="openAddModal(${categoryIndex})">
|
||
<span class="iconify" data-icon="carbon:add-filled" data-width="24px" data-height="24px"></span>
|
||
</button>
|
||
</h2>
|
||
|
||
<ul id="category-sites-${categoryIndex}"
|
||
style="${category.collapsed ? 'display: none;' : 'display: flex;'}">
|
||
${category.sites.map((site, siteIndex) => `
|
||
<li draggable="true" ondragstart="onDragStart(event, ${categoryIndex}, ${siteIndex})" ondragover="onDragOver(event)" ondrop="onDrop(event, ${categoryIndex}, ${siteIndex})">
|
||
<div class="site-block" onclick="openSiteLink('${escapeString(site.url)}')">
|
||
<!-- 添加拖拽手柄 -->
|
||
<div class="drag-handle" onclick="event.stopPropagation()">
|
||
<span class="iconify" data-icon="mdi:drag" data-width="16px" data-height="16px"></span>
|
||
</div>
|
||
<div class="item-icon">
|
||
<span class="iconify" data-icon="${site.icon}" data-width="40px" data-height="40px"></span>
|
||
</div>
|
||
<a href="${site.url}" target="_blank" class="site-link" onclick="event.stopPropagation(); return true;">
|
||
<span class="site-name">${site.name}</span>
|
||
</a>
|
||
|
||
${site.info ? `
|
||
<div class="info-icon" onclick="event.stopPropagation()">
|
||
<span class="iconify" data-icon="mdi:information-outline" data-width="16px" data-height="16px"></span>
|
||
<div class="info-tooltip">
|
||
${site.info}
|
||
</div>
|
||
</div>
|
||
` : ''}
|
||
|
||
<div class="opts">
|
||
<button onclick="event.stopPropagation(); deleteSite(${categoryIndex}, ${siteIndex})">
|
||
<span class="iconify" data-icon="material-symbols:delete-outline" data-width="16px" data-height="16px"></span>
|
||
</button>
|
||
<button onclick="event.stopPropagation(); openEditModal(${categoryIndex}, ${siteIndex}, '${escapeString(site.name)}', '${escapeString(site.url)}', '${escapeString(site.icon)}', '${escapeString(site.info || '')}')">
|
||
<span class="iconify" data-icon="raphael:edit" data-width="16px" data-height="16px"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
`).join('')}
|
||
</ul>
|
||
</section>
|
||
`).join('');
|
||
}
|
||
|
||
// 辅助函数：转义特殊字符
|
||
function escapeString(str) {
|
||
return str ? str
|
||
.replace(/\\/g, '\\\\')
|
||
.replace(/'/g, "\\'")
|
||
.replace(/"/g, '\\"')
|
||
.replace(/\n/g, '\\n')
|
||
.replace(/\r/g, '\\r') : '';
|
||
}
|