aotian16/navigation-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update frontend

Browse Source
This commit is contained in:
aotian16
2025-03-26 01:57:10 +08:00
parent 00035a5cb1
commit a038d4a673
3 changed files with 395 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/index.html
View File

@ -5,34 +5,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的导航网站</title> <title>我的导航网站</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<div class="header-left"> <div class="header-left">
<h1>我的导航网站</h1> <h1><i class="fas fa-compass"></i> 我的导航</h1>
<div class="search-box"> <div class="search-box">
<input type="text" id="searchInput" placeholder="搜索网站..."> <input type="text" id="searchInput" placeholder="搜索网站...">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="theme-switcher">
<button id="themeBtn"><i class="fas fa-moon"></i></button> <button id="themeBtn"><i class="fas fa-moon"></i></button>
</div>
<div class="actions">
<button id="addSiteBtn"><i class="fas fa-plus"></i> 添加网站</button> <button id="addSiteBtn"><i class="fas fa-plus"></i> 添加网站</button>
<button id="manageCategoriesBtn"><i class="fas fa-tags"></i> 管理分类</button> <button id="manageCategoriesBtn"><i class="fas fa-tags"></i> 管理分类</button>
<button id="exportBtn"><i class="fas fa-file-export"></i> 导出</button> <button id="exportBtn"><i class="fas fa-file-export"></i> 导出</button>
<button id="importBtn"><i class="fas fa-file-import"></i> 导入</button> <button id="importBtn"><i class="fas fa-file-import"></i> 导入</button>
<input type="file" id="importFile" style="display: none;" accept=".json"> <input type="file" id="importFile" style="display: none;" accept=".json">
</div> </div>
</div>
</header> </header>
<div class="categories" id="categories"> <div class="categories" id="categories">
<!-- 分类将通过JavaScript动态生成 --> <!-- 分类将通过JavaScript动态生成 -->
<div class="loading">加载中...</div>
</div> </div>
<!-- 添加网站的模态框 --> <!-- 添加网站的模态框 -->
@ -51,9 +48,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="siteCategory"><i class="fas fa-tag"></i> 分类</label> <label for="siteCategory"><i class="fas fa-tag"></i> 分类</label>
<select id="siteCategory" required> <input type="text" id="siteCategory" required>
<!-- 分类选项将通过JavaScript动态生成 -->
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="siteIcon"><i class="fas fa-image"></i> 图标URL (可选)</label> <label for="siteIcon"><i class="fas fa-image"></i> 图标URL (可选)</label>
@ -80,7 +75,6 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

374
frontend/script.js
View File

@ -1,35 +1,367 @@
// 修改原有的数据获取方式 document.addEventListener('DOMContentLoaded', function() {
async function fetchSites() { // DOM元素
try { const categoriesContainer = document.getElementById('categories');
const response = await fetch('/api/sites'); const addSiteModal = document.getElementById('addSiteModal');
if (!response.ok) throw new Error('Network response was not ok'); const manageCategoriesModal = document.getElementById('manageCategoriesModal');
return await response.json(); const addSiteBtn = document.getElementById('addSiteBtn');
} catch (error) { const manageCategoriesBtn = document.getElementById('manageCategoriesBtn');
console.error('Error fetching sites:', error); const closeButtons = document.querySelectorAll('.close');
return {}; const addSiteForm = document.getElementById('addSiteForm');
} const exportBtn = document.getElementById('exportBtn');
} const importBtn = document.getElementById('importBtn');
const importFile = document.getElementById('importFile');
const searchInput = document.getElementById('searchInput');
const themeBtn = document.getElementById('themeBtn');
const categoryList = document.getElementById('categoryList');
const newCategoryName = document.getElementById('newCategoryName');
const addCategoryBtn = document.getElementById('addCategoryBtn');
// 修改添加网站的函数 // 当前主题
async function addSite(site) { const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', currentTheme);
themeBtn.innerHTML = currentTheme === 'light' ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
// 加载数据
loadSites();
// 打开添加网站模态框
addSiteBtn.addEventListener('click', () => {
addSiteModal.style.display = 'block';
});
// 打开管理分类模态框
manageCategoriesBtn.addEventListener('click', () => {
renderCategoryList();
manageCategoriesModal.style.display = 'block';
});
// 关闭模态框
closeButtons.forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.modal').style.display = 'none';
});
});
// 点击模态框外部关闭
window.addEventListener('click', (e) => {
if (e.target.classList.contains('modal')) {
e.target.style.display = 'none';
}
});
// 添加网站表单提交
addSiteForm.addEventListener('submit', async (e) => {
e.preventDefault();
const name = document.getElementById('siteName').value.trim();
const url = document.getElementById('siteUrl').value.trim();
const category = document.getElementById('siteCategory').value.trim();
const icon = document.getElementById('siteIcon').value.trim();
try {
const response = await fetch('/api/add', { const response = await fetch('/api/add', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(site) body: JSON.stringify({
name,
url,
icon: icon || null,
category
})
}); });
return await response.json();
}
// 修改删除网站的函数 if (!response.ok) throw new Error('添加失败');
async function deleteSite(id) {
const response = await fetch('/api/delete', { // 清空表单并关闭模态框
addSiteForm.reset();
addSiteModal.style.display = 'none';
// 重新加载数据
loadSites();
} catch (error) {
console.error('Error:', error);
alert('添加网站时出错: ' + error.message);
}
});
// 导出数据
exportBtn.addEventListener('click', async () => {
try {
const response = await fetch('/api/sites');
if (!response.ok) throw new Error('导出失败');
const data = await response.json();
const dataStr = JSON.stringify(data, null, 2);
const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
const exportFileDefaultName = `导航数据_${new Date().toISOString().slice(0,10)}.json`;
const linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
} catch (error) {
console.error('导出失败:', error);
alert('导出数据时出错');
}
});
// 导入数据
importBtn.addEventListener('click', () => {
importFile.click();
});
importFile.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = async (e) => {
try {
const importedData = JSON.parse(e.target.result);
if (confirm('确定要导入数据吗？这将覆盖当前所有导航数据。')) {
const response = await fetch('/api/import', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ id }) body: JSON.stringify(importedData)
}); });
return await response.json();
if (!response.ok) throw new Error('导入失败');
alert('数据导入成功！');
loadSites();
} }
} catch (error) {
console.error('导入失败:', error);
alert('导入数据时出错: ' + error.message);
}
};
reader.readAsText(file);
// 清空input，以便可以重复导入同一文件
e.target.value = '';
});
// 添加新分类
addCategoryBtn.addEventListener('click', async () => {
const categoryName = newCategoryName.value.trim();
if (!categoryName) return;
try {
// 这里需要根据你的Go后端API进行调整
const response = await fetch('/api/categories', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: categoryName })
});
if (!response.ok) throw new Error('添加分类失败');
newCategoryName.value = '';
renderCategoryList();
loadSites();
} catch (error) {
console.error('添加分类失败:', error);
alert('添加分类时出错: ' + error.message);
}
});
// 搜索功能
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
document.querySelectorAll('.site').forEach(site => {
const name = site.getAttribute('data-name') || '';
const url = site.getAttribute('data-url') || '';
if (name.includes(searchTerm) || url.includes(searchTerm)) {
site.style.display = 'flex';
} else {
site.style.display = 'none';
}
});
});
// 主题切换
themeBtn.addEventListener('click', toggleTheme);
// 加载网站数据
async function loadSites() {
categoriesContainer.innerHTML = '<div class="loading">加载中...</div>';
try {
const response = await fetch('/api/sites');
if (!response.ok) throw new Error('Network response was not ok');
const sites = await response.json();
renderSites(sites);
} catch (error) {
console.error('Error loading sites:', error);
categoriesContainer.innerHTML = '<div class="error">加载失败，请刷新重试</div>';
}
}
// 渲染网站
function renderSites(sites) {
if (!sites || sites.length === 0) {
categoriesContainer.innerHTML = '<p>暂无网站，请添加您的第一个网站。</p>';
return;
}
// 按分类分组
const categories = {};
sites.forEach(site => {
if (!categories[site.category]) {
categories[site.category] = [];
}
categories[site.category].push(site);
});
// 清空容器
categoriesContainer.innerHTML = '';
// 渲染每个分类
for (const category in categories) {
const categoryElement = document.createElement('div');
categoryElement.className = 'category';
const categoryTitle = document.createElement('h2');
categoryTitle.innerHTML = `<i class="fas fa-folder"></i> ${category}`;
const sitesContainer = document.createElement('div');
sitesContainer.className = 'sites';
categories[category].forEach(site => {
const siteElement = document.createElement('a');
siteElement.className = 'site';
siteElement.href = site.url;
siteElement.target = '_blank';
siteElement.setAttribute('data-name', site.name.toLowerCase());
siteElement.setAttribute('data-url', site.url.toLowerCase());
const iconElement = document.createElement('div');
iconElement.className = 'site-icon';
if (site.icon) {
const img = document.createElement('img');
img.src = site.icon;
img.alt = site.name;
iconElement.appendChild(img);
} else {
iconElement.textContent = site.name.charAt(0).toUpperCase();
}
const nameElement = document.createElement('span');
nameElement.className = 'site-name';
nameElement.textContent = site.name;
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.innerHTML = '×';
deleteBtn.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
if (confirm(`确定要删除 "${site.name}" 吗？`)) {
try {
const response = await fetch(`/api/delete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id: site.id })
});
if (response.ok) {
loadSites();
} else {
throw new Error('删除失败');
}
} catch (error) {
console.error('Error deleting site:', error);
alert('删除网站时出错');
}
}
});
siteElement.appendChild(iconElement);
siteElement.appendChild(nameElement);
siteElement.appendChild(deleteBtn);
sitesContainer.appendChild(siteElement);
});
categoryElement.appendChild(categoryTitle);
categoryElement.appendChild(sitesContainer);
categoriesContainer.appendChild(categoryElement);
}
}
// 渲染分类列表
async function renderCategoryList() {
categoryList.innerHTML = '<div class="loading">加载中...</div>';
try {
const response = await fetch('/api/sites');
if (!response.ok) throw new Error('Network response was not ok');
const sites = await response.json();
// 获取所有分类
const categories = new Set();
sites.forEach(site => categories.add(site.category));
categoryList.innerHTML = '';
categories.forEach(category => {
const categoryItem = document.createElement('div');
categoryItem.className = 'category-item';
const categoryName = document.createElement('span');
categoryName.textContent = category;
const deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '<i class="fas fa-trash"></i> 删除';
deleteBtn.addEventListener('click', async () => {
if (confirm(`确定要删除分类 "${category}" 吗？这将删除该分类下的所有网站。`)) {
try {
// 这里需要根据你的Go后端API进行调整
const response = await fetch(`/api/categories/${encodeURIComponent(category)}`, {
method: 'DELETE'
});
if (response.ok) {
renderCategoryList();
loadSites();
} else {
throw new Error('删除分类失败');
}
} catch (error) {
console.error('删除分类失败:', error);
alert('删除分类时出错: ' + error.message);
}
}
});
categoryItem.appendChild(categoryName);
categoryItem.appendChild(deleteBtn);
categoryList.appendChild(categoryItem);
});
} catch (error) {
console.error('Error loading categories:', error);
categoryList.innerHTML = '<div class="error">加载分类失败</div>';
}
}
// 切换主题
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
themeBtn.innerHTML = newTheme === 'light' ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
}
});

87
frontend/styles.css
View File

@ -59,6 +59,9 @@ header {
h1 { h1 {
font-size: 2rem; font-size: 2rem;
color: var(--primary-color); color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
} }
.search-box { .search-box {
@ -84,13 +87,7 @@ h1 {
opacity: 0.7; opacity: 0.7;
} }
.actions { button {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.actions button {
padding: 8px 16px; padding: 8px 16px;
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: white;
@ -102,21 +99,22 @@ h1 {
gap: 5px; gap: 5px;
} }
.actions button:hover { button:hover {
opacity: 0.9; opacity: 0.9;
} }
.actions button i { button i {
font-size: 0.9rem; font-size: 0.9rem;
} }
.theme-switcher button { .loading, .error {
background: none; text-align: center;
border: none; padding: 20px;
color: var(--text-color); color: var(--primary-color);
font-size: 1.2rem; }
cursor: pointer;
padding: 5px; .error {
color: var(--danger-color);
} }
.categories { .categories {
@ -200,12 +198,12 @@ h1 {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
display: none; display: none;
align-items: center;
justify-content: center;
} }
.site:hover .delete-btn { .site:hover .delete-btn {
display: flex; display: flex;
align-items: center;
justify-content: center;
} }
/* 模态框样式 */ /* 模态框样式 */
@ -269,8 +267,7 @@ h1 {
gap: 8px; gap: 8px;
} }
.form-group input, .form-group input {
.form-group select {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -326,6 +323,9 @@ form button:hover {
border-radius: 4px; border-radius: 4px;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
} }
.add-category { .add-category {
@ -352,50 +352,3 @@ form button:hover {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
}
/* 拖拽样式 */
.sortable-ghost {
opacity: 0.5;
background: var(--primary-color);
}
.sortable-chosen {
box-shadow: 0 0 10px var(--shadow-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.header-left, .header-right {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.search-box {
width: 100%;
}
.actions {
justify-content: space-between;
}
.actions button {
flex-grow: 1;
justify-content: center;
}
.sites {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.add-category {
flex-direction: column;
}
}