Android开发网址管理器

commit e5a9b31a6c32c9a24007f92c08d9faed59e7166e Author: 波澜壮阔 <263303411@qq.com> Date: Sat Dec 20 21:39:14 2025 +0800 first commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a7975f --- /dev/null +++ b/index.html @@ -0,0 +1,295 @@ + + + + + + Android开发网址管理器 + + + + + + +

+ + + + +

+ +

+ + + +

常用标签

+ +

统计

+ 总网址数 + 0 +

+ 分类数 + 0 +

+ 收藏数 + 0 +

+ + +

+ + + + +

+ +

暂无网址

点击"添加网址"按钮开始添加您的第一个网址

+ +

+ + +

+ 已选择 0 个项目 +

+ + + +

+ + +

+ 快捷键提示: Ctrl+F (搜索), Ctrl+N (新建), Ctrl+S (保存), Esc (取消) +

+ + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..cd09351 --- /dev/null +++ b/script.js @@ -0,0 +1,1024 @@ +// 网址管理器应用 +class UrlManager { + constructor() { + this.urls = []; + this.categories = []; + this.selectedUrls = new Set(); + this.currentCategory = 'all'; + this.currentSearch = ''; + this.currentTag = ''; + this.viewMode = 'grid'; + this.editingUrlId = null; + + this.init(); + } + + init() { + this.loadData(); + this.setupEventListeners(); + this.render(); + this.setupKeyboardShortcuts(); + } + + // 数据存储 + loadData() { + // 加载默认数据或从localStorage加载 + const savedUrls = localStorage.getItem('urlManager_urls'); + const savedCategories = localStorage.getItem('urlManager_categories'); + + if (savedUrls) { + this.urls = JSON.parse(savedUrls); + } else { + // 添加一些示例数据 + this.urls = this.getDefaultUrls(); + } + + if (savedCategories) { + this.categories = JSON.parse(savedCategories); + } else { + this.categories = this.getDefaultCategories(); + } + } + + saveData() { + try { + localStorage.setItem('urlManager_urls', JSON.stringify(this.urls)); + localStorage.setItem('urlManager_categories', JSON.stringify(this.categories)); + } catch (error) { + console.error('保存数据到localStorage失败:', error); + // 如果localStorage已满或其他错误，只记录错误，不抛出异常 + // 因为数据已经在内存中了，只是无法持久化 + // 抛出异常会导致误报"保存失败" + } + } + + getDefaultUrls() { + return [ + { + id: '1', + title: 'Android开发者文档', + url: 'https://developer.android.com', + description: '官方Android开发文档和API参考', + category: 'dev-docs', + icon: 'fas fa-book', + tags: ['文档', '官方', 'Android'], + favorite: true, + createdAt: new Date().toISOString(), + lastAccessed: null, + accessCount: 0 + }, + { + id: '2', + title: 'GitHub', + url: 'https://github.com', + description: '代码托管和版本控制平台', + category: 'tools', + icon: 'fas fa-code', + tags: ['工具', '代码', '版本控制'], + favorite: true, + createdAt: new Date().toISOString(), + lastAccessed: null, + accessCount: 0 + }, + { + id: '3', + title: 'Stack Overflow', + url: 'https://stackoverflow.com', + description: '开发者问答社区', + category: 'community', + icon: 'fas fa-comments', + tags: ['社区', '问答', '帮助'], + favorite: false, + createdAt: new Date().toISOString(), + lastAccessed: null, + accessCount: 0 + }, + { + id: '4', + title: 'Material Design', + url: 'https://material.io', + description: 'Google的设计系统', + category: 'design', + icon: 'fas fa-palette', + tags: ['设计', 'UI', 'Material'], + favorite: false, + createdAt: new Date().toISOString(), + lastAccessed: null, + accessCount: 0 + } + ]; + } + + getDefaultCategories() { + return [ + { id: 'dev-docs', name: '开发文档', color: '#3498db', icon: 'fas fa-book' }, + { id: 'tools', name: '工具', color: '#2ecc71', icon: 'fas fa-tools' }, + { id: 'community', name: '社区', color: '#9b59b6', icon: 'fas fa-comments' }, + { id: 'design', name: '设计', color: '#e74c3c', icon: 'fas fa-palette' } + ]; + } + + // 网址管理方法 + addUrl(urlData) { + const newUrl = { + id: Date.now().toString(), + createdAt: new Date().toISOString(), + lastAccessed: null, + accessCount: 0, + ...urlData + }; + + // 先保存数据到内存和localStorage（核心操作，不能失败） + this.urls.push(newUrl); + this.saveData(); + + // 如果当前有分类过滤或搜索过滤，切换到"全部网址"以确保新添加的网址能显示 + if (this.currentCategory !== 'all' || this.currentSearch || this.currentTag) { + this.currentCategory = 'all'; + this.currentSearch = ''; + this.currentTag = ''; + // 清除搜索框 + const searchInput = document.getElementById('searchInput'); + if (searchInput) { + searchInput.value = ''; + } + } + + // 渲染页面（必须执行，确保页面刷新） + // render() 会更新分类选择器的UI状态，所以不需要单独更新 + this.render(); + return newUrl; + } + + updateUrl(id, updates) { + const index = this.urls.findIndex(url => url.id === id); + if (index !== -1) { + // 先保存数据到内存和localStorage（核心操作，不能失败） + this.urls[index] = { ...this.urls[index], ...updates }; + this.saveData(); + + // 渲染页面（必须执行，确保页面刷新） + this.render(); + return true; + } + return false; + } + + deleteUrl(id) { + const index = this.urls.findIndex(url => url.id === id); + if (index !== -1) { + this.urls.splice(index, 1); + this.selectedUrls.delete(id); + this.saveData(); + this.render(); + return true; + } + return false; + } + + deleteSelectedUrls() { + this.urls = this.urls.filter(url => !this.selectedUrls.has(url.id)); + this.selectedUrls.clear(); + this.saveData(); + this.render(); + this.hideBulkActions(); + } + + toggleFavorite(id) { + const url = this.urls.find(url => url.id === id); + if (url) { + url.favorite = !url.favorite; + this.saveData(); + this.render(); + } + } + + // 分类管理 + addCategory(categoryData) { + const newCategory = { + id: Date.now().toString(), + ...categoryData + }; + + this.categories.push(newCategory); + this.saveData(); + this.renderCategories(); + return newCategory; + } + + // 过滤和搜索 + getFilteredUrls() { + let filtered = [...this.urls]; + + // 按分类过滤 + if (this.currentCategory === 'favorites') { + filtered = filtered.filter(url => url.favorite); + } else if (this.currentCategory === 'recent') { + filtered = filtered.filter(url => url.lastAccessed) + .sort((a, b) => new Date(b.lastAccessed) - new Date(a.lastAccessed)) + .slice(0, 20); + } else if (this.currentCategory !== 'all') { + filtered = filtered.filter(url => url.category === this.currentCategory); + } + + // 按搜索词过滤 + if (this.currentSearch) { + const searchLower = this.currentSearch.toLowerCase(); + filtered = filtered.filter(url => + url.title.toLowerCase().includes(searchLower) || + url.url.toLowerCase().includes(searchLower) || + url.description?.toLowerCase().includes(searchLower) || + url.tags?.some(tag => tag.toLowerCase().includes(searchLower)) + ); + } + + // 按标签过滤 + if (this.currentTag) { + filtered = filtered.filter(url => + url.tags?.some(tag => tag.toLowerCase() === this.currentTag.toLowerCase()) + ); + } + + return filtered; + } + + // 渲染方法 + render() { + // 分别处理每个渲染方法，确保即使某个方法失败，其他方法也能执行 + try { + this.renderCategories(); + } catch (error) { + console.warn('渲染分类时出错:', error); + } + + try { + this.renderUrls(); + } catch (error) { + console.warn('渲染网址列表时出错:', error); + } + + try { + this.renderStats(); + } catch (error) { + console.warn('渲染统计信息时出错:', error); + } + + try { + this.renderTags(); + } catch (error) { + console.warn('渲染标签时出错:', error); + } + } + + renderCategories() { + const categoriesList = document.getElementById('categoriesList'); + if (!categoriesList) return; + + const allCount = this.urls.length; + const favoritesCount = this.urls.filter(url => url.favorite).length; + const recentCount = this.urls.filter(url => url.lastAccessed).length; + + let html = ` +

+ + 全部网址 + ${allCount} +

+ + 收藏夹 + ${favoritesCount} +

+ + 最近访问 + ${recentCount} +

+ `; + + // 添加自定义分类 + this.categories.forEach(category => { + const count = this.urls.filter(url => url.category === category.id).length; + html += ` +

+ + ${category.name} + ${count} +

+ `; + }); + + categoriesList.innerHTML = html; + + // 更新分类选择器 + this.updateCategorySelector(); + } + + renderUrls() { + const urlsContainer = document.getElementById('urlsContainer'); + const emptyState = document.getElementById('emptyState'); + if (!urlsContainer) { + console.warn('urlsContainer 元素不存在'); + return; + } + + const filteredUrls = this.getFilteredUrls(); + + if (filteredUrls.length === 0) { + if (emptyState) { + emptyState.style.display = 'block'; + } + urlsContainer.innerHTML = ''; + if (emptyState) { + urlsContainer.appendChild(emptyState); + } + return; + } + + if (emptyState) { + emptyState.style.display = 'none'; + } + + let html = ''; + filteredUrls.forEach(url => { + const category = this.categories.find(c => c.id === url.category); + const isSelected = this.selectedUrls.has(url.id); + + html += ` +

+ +

${url.title}

${url.url}

+ + + +

+ ${url.description ? `

${url.description}

` : ''} + +

+ `; + }); + + urlsContainer.innerHTML = html; + } + + renderStats() { + const totalUrlsEl = document.getElementById('totalUrls'); + const totalCategoriesEl = document.getElementById('totalCategories'); + const totalFavoritesEl = document.getElementById('totalFavorites'); + + if (totalUrlsEl) totalUrlsEl.textContent = this.urls.length; + if (totalCategoriesEl) totalCategoriesEl.textContent = this.categories.length; + if (totalFavoritesEl) totalFavoritesEl.textContent = this.urls.filter(url => url.favorite).length; + } + + renderTags() { + const tagsContainer = document.getElementById('tagsContainer'); + if (!tagsContainer) return; + + // 收集所有标签 + const tagCounts = {}; + this.urls.forEach(url => { + url.tags?.forEach(tag => { + tagCounts[tag] = (tagCounts[tag] || 0) + 1; + }); + }); + + const tags = Object.entries(tagCounts) + .sort((a, b) => b[1] - a[1]) + .slice(0, 10); + + let html = ''; + tags.forEach(([tag, count]) => { + const isActive = this.currentTag === tag; + html += `${tag} (${count})`; + }); + + tagsContainer.innerHTML = html; + } + + updateCategorySelector() { + try { + const categorySelect = document.getElementById('urlCategory'); + if (!categorySelect) return; + + let html = ''; + this.categories.forEach(category => { + html += ``; + }); + + categorySelect.innerHTML = html; + } catch (error) { + console.warn('更新分类选择器时出错:', error); + // 不影响其他操作 + } + } + + // 事件监听器 + setupEventListeners() { + // 主题切换 + document.getElementById('themeToggle').addEventListener('click', () => { + this.toggleTheme(); + }); + + // 添加网址按钮 + document.getElementById('addUrlBtn').addEventListener('click', () => { + this.showUrlModal(); + }); + + document.getElementById('addFirstUrlBtn').addEventListener('click', () => { + this.showUrlModal(); + }); + + // 添加分类按钮 + document.getElementById('addCategoryBtn').addEventListener('click', () => { + this.showCategoryModal(); + }); + + // 搜索 + document.getElementById('searchInput').addEventListener('input', (e) => { + this.currentSearch = e.target.value; + this.renderUrls(); + }); + + document.getElementById('clearSearch').addEventListener('click', () => { + document.getElementById('searchInput').value = ''; + this.currentSearch = ''; + this.renderUrls(); + }); + + // 视图切换 + document.getElementById('gridViewBtn').addEventListener('click', () => { + this.setViewMode('grid'); + }); + + document.getElementById('listViewBtn').addEventListener('click', () => { + this.setViewMode('list'); + }); + + // 批量操作 + document.getElementById('bulkActionsBtn').addEventListener('click', () => { + this.showBulkActions(); + }); + + document.getElementById('bulkCancelBtn').addEventListener('click', () => { + this.hideBulkActions(); + }); + + document.getElementById('bulkDeleteBtn').addEventListener('click', () => { + if (confirm(`确定要删除选中的 ${this.selectedUrls.size} 个网址吗？`)) { + this.deleteSelectedUrls(); + } + }); + + document.getElementById('bulkOpenBtn').addEventListener('click', () => { + this.openSelectedUrls(); + }); + + // 导入/导出 + document.getElementById('importBtn').addEventListener('click', () => { + this.showImportExportModal('import'); + }); + + document.getElementById('exportBtn').addEventListener('click', () => { + this.showImportExportModal('export'); + }); + + // 模态框关闭 + document.querySelectorAll('.close-modal').forEach(btn => { + btn.addEventListener('click', () => { + this.closeAllModals(); + }); + }); + + // 网址表单提交 - 使用bind确保正确的this上下文 + document.getElementById('urlForm').addEventListener('submit', (e) => { + e.preventDefault(); + this.handleUrlFormSubmit(); + }); + + // 分类表单提交 + document.getElementById('categoryForm').addEventListener('submit', (e) => { + e.preventDefault(); + this.handleCategoryFormSubmit(); + }); + + // 标签输入 + document.getElementById('tagsInput').addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + this.addTagToInput(e.target.value); + e.target.value = ''; + } + }); + + // 文件导入 + document.getElementById('jsonFileInput').addEventListener('change', (e) => { + this.handleFileImport(e.target.files[0]); + }); + + // 添加调试日志 + console.log('事件监听器已设置完成'); + + // 事件委托 + document.addEventListener('click', (e) => { + // 分类点击 + if (e.target.closest('.category-item')) { + const categoryItem = e.target.closest('.category-item'); + const categoryId = categoryItem.dataset.id; + this.setCurrentCategory(categoryId); + } + + // 标签点击 + if (e.target.closest('.tag')) { + const tag = e.target.closest('.tag').dataset.tag; + this.setCurrentTag(tag); + } + + // 网址卡片操作 + if (e.target.closest('.url-card')) { + const urlCard = e.target.closest('.url-card'); + const urlId = urlCard.dataset.id; + + // 复选框选择 + if (e.target.type === 'checkbox') { + this.toggleUrlSelection(urlId, e.target.checked); + } + + // 收藏按钮 + if (e.target.closest('.favorite-btn')) { + e.preventDefault(); + e.stopPropagation(); + this.toggleFavorite(urlId); + } + + // 编辑按钮 + if (e.target.closest('.edit-url')) { + e.preventDefault(); + e.stopPropagation(); + this.editUrl(urlId); + } + + // 删除按钮 + if (e.target.closest('.delete-url')) { + e.preventDefault(); + e.stopPropagation(); + if (confirm('确定要删除这个网址吗？')) { + this.deleteUrl(urlId); + } + } + + // 打开网址按钮 + if (e.target.closest('.open-url')) { + e.preventDefault(); + e.stopPropagation(); + this.openUrl(urlId); + } + } + + // 导入/导出标签页切换 + if (e.target.closest('.tab-btn')) { + const tabBtn = e.target.closest('.tab-btn'); + const tab = tabBtn.dataset.tab; + this.switchImportExportTab(tab); + } + + // 下载JSON按钮 + if (e.target.id === 'downloadJsonBtn') { + this.downloadJson(); + } + }); + } + + // 模态框方法 + showUrlModal(urlId = null) { + this.editingUrlId = urlId; + const modal = document.getElementById('urlModal'); + const title = document.getElementById('modalTitle'); + const form = document.getElementById('urlForm'); + + if (urlId) { + // 编辑模式 + title.textContent = '编辑网址'; + const url = this.urls.find(u => u.id === urlId); + if (url) { + document.getElementById('urlTitle').value = url.title; + document.getElementById('urlAddress').value = url.url; + document.getElementById('urlDescription').value = url.description || ''; + document.getElementById('urlCategory').value = url.category || ''; + document.getElementById('urlIcon').value = url.icon || 'fas fa-globe'; + document.getElementById('urlFavorite').checked = url.favorite || false; + + // 设置标签 + const tagsDisplay = document.getElementById('tagsDisplay'); + tagsDisplay.innerHTML = ''; + if (url.tags) { + url.tags.forEach(tag => { + this.addTagToDisplay(tag); + }); + } + } + } else { + // 添加模式 + title.textContent = '添加网址'; + form.reset(); + document.getElementById('tagsDisplay').innerHTML = ''; + } + + modal.classList.add('active'); + } + + showCategoryModal() { + const modal = document.getElementById('categoryModal'); + modal.classList.add('active'); + } + + showImportExportModal(tab = 'export') { + const modal = document.getElementById('importExportModal'); + const title = document.getElementById('importExportTitle'); + + if (tab === 'export') { + title.textContent = '导出数据'; + this.updateExportPreview(); + } else { + title.textContent = '导入数据'; + } + + this.switchImportExportTab(tab); + modal.classList.add('active'); + } + + closeAllModals() { + document.querySelectorAll('.modal').forEach(modal => { + modal.classList.remove('active'); + }); + this.editingUrlId = null; + // 强制触发重排，确保弹窗关闭 + void document.body.offsetHeight; + } + + // 表单处理 + handleUrlFormSubmit() { + const title = document.getElementById('urlTitle').value.trim(); + const url = document.getElementById('urlAddress').value.trim(); + const description = document.getElementById('urlDescription').value.trim(); + const category = document.getElementById('urlCategory').value; + const icon = document.getElementById('urlIcon').value; + const favorite = document.getElementById('urlFavorite').checked; + + // 获取标签 + const tags = []; + document.querySelectorAll('#tagsDisplay .tag-input-tag').forEach(tagEl => { + const span = tagEl.querySelector('span'); + if (span) { + tags.push(span.textContent); + } + }); + + if (!title || !url) { + alert('标题和网址是必填项'); + return false; + } + + const urlData = { + title, + url, + description, + category, + icon, + tags, + favorite + }; + + // 保存数据（只对核心保存操作进行错误处理） + try { + if (this.editingUrlId) { + const success = this.updateUrl(this.editingUrlId, urlData); + if (!success) { + alert('更新失败：未找到要更新的网址'); + return false; + } + } else { + this.addUrl(urlData); + } + // 如果执行到这里，说明保存成功（addUrl/updateUrl 没有抛出异常） + // render() 已经在 addUrl/updateUrl 中调用，页面应该已经刷新 + } catch (error) { + console.error('保存网址时出错:', error); + // 只有在真正的保存操作失败时才提示 + alert('保存失败，请重试'); + return false; + } + + // 重置表单（这些操作不应该影响保存结果） + try { + const form = document.getElementById('urlForm'); + if (form) { + form.reset(); + } + const tagsDisplay = document.getElementById('tagsDisplay'); + if (tagsDisplay) { + tagsDisplay.innerHTML = ''; + } + } catch (error) { + console.warn('重置表单时出错:', error); + // 不影响保存结果，继续执行 + } + + // 关闭弹窗（addUrl/updateUrl 已经调用了 render() 刷新页面） + this.closeAllModals(); + + return false; + } + + handleCategoryFormSubmit() { + const name = document.getElementById('categoryName').value.trim(); + const color = document.getElementById('categoryColor').value; + const icon = document.getElementById('categoryIcon').value; + + if (!name) { + alert('分类名称是必填项'); + return; + } + + const categoryData = { + name, + color, + icon + }; + + this.addCategory(categoryData); + this.closeAllModals(); + } + + // 标签处理 + addTagToInput(tagText) { + if (!tagText.trim()) return; + + const tagsDisplay = document.getElementById('tagsDisplay'); + const existingTags = Array.from(tagsDisplay.querySelectorAll('.tag-input-tag span')) + .map(span => span.textContent); + + if (!existingTags.includes(tagText.trim())) { + this.addTagToDisplay(tagText.trim()); + } + } + + addTagToDisplay(tagText) { + const tagsDisplay = document.getElementById('tagsDisplay'); + const tagEl = document.createElement('div'); + tagEl.className = 'tag-input-tag'; + tagEl.innerHTML = ` + ${tagText} + + `; + + tagEl.querySelector('button').addEventListener('click', () => { + tagEl.remove(); + }); + + tagsDisplay.appendChild(tagEl); + } + + // 文件导入/导出 + handleFileImport(file) { + if (!file) return; + + const reader = new FileReader(); + reader.onload = (e) => { + try { + const data = JSON.parse(e.target.result); + + if (confirm('导入数据将覆盖当前的所有数据，确定要继续吗？')) { + if (data.urls) this.urls = data.urls; + if (data.categories) this.categories = data.categories; + this.saveData(); + this.render(); + this.closeAllModals(); + alert('数据导入成功！'); + } + } catch (error) { + alert('文件格式错误，请选择有效的JSON文件'); + } + }; + reader.readAsText(file); + } + + updateExportPreview() { + const preview = document.getElementById('exportDataPreview'); + const data = { + urls: this.urls, + categories: this.categories, + exportedAt: new Date().toISOString() + }; + preview.textContent = JSON.stringify(data, null, 2); + } + + downloadJson() { + const data = { + urls: this.urls, + categories: this.categories, + exportedAt: new Date().toISOString() + }; + + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `url-manager-backup-${new Date().toISOString().split('T')[0]}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + + switchImportExportTab(tab) { + // 更新按钮状态 + document.querySelectorAll('.tab-btn').forEach(btn => { + btn.classList.toggle('active', btn.dataset.tab === tab); + }); + + // 更新内容显示 + document.querySelectorAll('.tab-content').forEach(content => { + content.classList.toggle('active', content.id === `${tab}Tab`); + }); + } + + // 其他方法 + setCurrentCategory(categoryId) { + this.currentCategory = categoryId; + this.render(); + + // 更新UI状态 + document.querySelectorAll('.category-item').forEach(item => { + item.classList.toggle('active', item.dataset.id === categoryId); + }); + } + + setCurrentTag(tag) { + if (this.currentTag === tag) { + this.currentTag = ''; // 取消选择 + } else { + this.currentTag = tag; + } + this.renderUrls(); + this.renderTags(); + } + + setViewMode(mode) { + this.viewMode = mode; + const urlsContainer = document.getElementById('urlsContainer'); + const gridBtn = document.getElementById('gridViewBtn'); + const listBtn = document.getElementById('listViewBtn'); + + urlsContainer.classList.remove('grid-view', 'list-view'); + urlsContainer.classList.add(`${mode}-view`); + + gridBtn.classList.toggle('active', mode === 'grid'); + listBtn.classList.toggle('active', mode === 'list'); + } + + toggleUrlSelection(urlId, checked) { + if (checked) { + this.selectedUrls.add(urlId); + } else { + this.selectedUrls.delete(urlId); + } + + this.updateBulkActions(); + this.renderUrls(); + } + + updateBulkActions() { + const selectedCount = document.getElementById('selectedCount'); + const bulkPanel = document.getElementById('bulkActionsPanel'); + + selectedCount.textContent = `已选择 ${this.selectedUrls.size} 个项目`; + + if (this.selectedUrls.size > 0) { + bulkPanel.classList.add('active'); + } else { + bulkPanel.classList.remove('active'); + } + } + + showBulkActions() { + // 显示批量操作面板 + const bulkPanel = document.getElementById('bulkActionsPanel'); + bulkPanel.classList.add('active'); + } + + hideBulkActions() { + // 清除选择并隐藏面板 + this.selectedUrls.clear(); + const bulkPanel = document.getElementById('bulkActionsPanel'); + bulkPanel.classList.remove('active'); + this.renderUrls(); + } + + openUrl(urlId) { + const url = this.urls.find(u => u.id === urlId); + if (url) { + window.open(url.url, '_blank'); + + // 更新访问记录 + url.lastAccessed = new Date().toISOString(); + url.accessCount = (url.accessCount || 0) + 1; + this.saveData(); + } + } + + openSelectedUrls() { + this.urls.forEach(url => { + if (this.selectedUrls.has(url.id)) { + window.open(url.url, '_blank'); + + // 更新访问记录 + url.lastAccessed = new Date().toISOString(); + url.accessCount = (url.accessCount || 0) + 1; + } + }); + this.saveData(); + } + + editUrl(urlId) { + this.showUrlModal(urlId); + } + + toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + const themeIcon = document.querySelector('#themeToggle i'); + + document.documentElement.setAttribute('data-theme', newTheme); + themeIcon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; + + localStorage.setItem('urlManager_theme', newTheme); + } + + setupKeyboardShortcuts() { + document.addEventListener('keydown', (e) => { + // Ctrl+F 聚焦搜索框 + if (e.ctrlKey && e.key === 'f') { + e.preventDefault(); + document.getElementById('searchInput').focus(); + } + + // Ctrl+N 添加新网址 + if (e.ctrlKey && e.key === 'n') { + e.preventDefault(); + this.showUrlModal(); + } + + // Esc 关闭模态框或取消批量选择 + if (e.key === 'Escape') { + if (this.selectedUrls.size > 0) { + this.hideBulkActions(); + } else { + this.closeAllModals(); + } + } + + // Ctrl+S 保存数据（导出） + if (e.ctrlKey && e.key === 's') { + e.preventDefault(); + this.showImportExportModal('export'); + } + }); + + // 加载保存的主题 + const savedTheme = localStorage.getItem('urlManager_theme') || 'light'; + document.documentElement.setAttribute('data-theme', savedTheme); + const themeIcon = document.querySelector('#themeToggle i'); + themeIcon.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; + } +} + +// 初始化应用 +document.addEventListener('DOMContentLoaded', () => { + window.urlManager = new UrlManager(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e07f7c3 --- /dev/null +++ b/style.css @@ -0,0 +1,1033 @@ +/* 基础样式重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* 亮色主题变量 */ + --primary-color: #3498db; + --secondary-color: #2ecc71; + --danger-color: #e74c3c; + --warning-color: #f39c12; + --dark-color: #2c3e50; + --light-color: #ecf0f1; + --gray-color: #95a5a6; + --border-color: #ddd; + --shadow-color: rgba(0, 0, 0, 0.1); + --bg-color: #ffffff; + --card-bg: #ffffff; + --text-color: #333333; + --text-secondary: #666666; + --sidebar-bg: #f8f9fa; + --hover-color: #f5f5f5; + --transition-speed: 0.3s; +} + +[data-theme="dark"] { + /* 暗色主题变量 */ + --primary-color: #3498db; + --secondary-color: #2ecc71; + --danger-color: #e74c3c; + --warning-color: #f39c12; + --dark-color: #1a1a2e; + --light-color: #2d3748; + --gray-color: #718096; + --border-color: #4a5568; + --shadow-color: rgba(0, 0, 0, 0.3); + --bg-color: #1a202c; + --card-bg: #2d3748; + --text-color: #e2e8f0; + --text-secondary: #a0aec0; + --sidebar-bg: #2d3748; + --hover-color: #4a5568; +} + +body { + font-family: 'Inter', 'Segoe UI', sans-serif; + background-color: var(--bg-color); + color: var(--text-color); + line-height: 1.6; + transition: background-color var(--transition-speed), color var(--transition-speed); + min-height: 100vh; +} + +/* 等宽字体用于代码相关元素 */ +code, pre, .monospace { + font-family: 'Roboto Mono', 'Courier New', monospace; +} + +/* 容器布局 */ +.container { + display: flex; + flex-direction: column; + min-height: 100vh; + max-width: 100%; + overflow-x: hidden; +} + +/* 顶部导航栏 */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background-color: var(--card-bg); + border-bottom: 1px solid var(--border-color); + box-shadow: 0 2px 10px var(--shadow-color); + position: sticky; + top: 0; + z-index: 100; +} + +.logo { + display: flex; + align-items: center; + gap: 1rem; +} + +.logo i { + font-size: 2rem; + color: var(--primary-color); +} + +.logo h1 { + font-size: 1.5rem; + font-weight: 600; +} + +.header-controls { + display: flex; + gap: 1rem; + align-items: center; +} + +/* 主内容区域 */ +.main-content { + display: flex; + flex: 1; + min-height: calc(100vh - 80px); +} + +/* 侧边栏 */ +.sidebar { + width: 280px; + background-color: var(--sidebar-bg); + border-right: 1px solid var(--border-color); + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 2rem; + overflow-y: auto; +} + +.sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sidebar-header h2 { + font-size: 1.2rem; + font-weight: 600; +} + +/* 分类列表 */ +.categories-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.category-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + border-radius: 8px; + cursor: pointer; + transition: all var(--transition-speed); + position: relative; +} + +.category-item:hover { + background-color: var(--hover-color); +} + +.category-item.active { + background-color: var(--primary-color); + color: white; +} + +.category-item i { + font-size: 1.1rem; + width: 20px; + text-align: center; +} + +.category-item span { + flex: 1; +} + +.count-badge { + background-color: var(--gray-color); + color: white; + padding: 0.2rem 0.6rem; + border-radius: 12px; + font-size: 0.8rem; + font-weight: 600; +} + +.category-item.active .count-badge { + background-color: white; + color: var(--primary-color); +} + +/* 标签区域 */ +.tags-section h3 { + font-size: 1rem; + margin-bottom: 1rem; + color: var(--text-secondary); +} + +.tags-container { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tag { + background-color: var(--light-color); + color: var(--text-color); + padding: 0.4rem 0.8rem; + border-radius: 16px; + font-size: 0.85rem; + cursor: pointer; + transition: all var(--transition-speed); +} + +.tag:hover { + background-color: var(--primary-color); + color: white; +} + +.tag.active { + background-color: var(--primary-color); + color: white; +} + +/* 统计区域 */ +.stats-section h3 { + font-size: 1rem; + margin-bottom: 1rem; + color: var(--text-secondary); +} + +.stats { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.stat-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0; + border-bottom: 1px solid var(--border-color); +} + +.stat-label { + color: var(--text-secondary); + font-size: 0.9rem; +} + +.stat-value { + font-weight: 700; + font-size: 1.2rem; + color: var(--primary-color); +} + +/* 主要内容区域 */ +.content-area { + flex: 1; + padding: 2rem; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +/* 工具栏 */ +.toolbar { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +.search-box { + flex: 1; + max-width: 500px; + position: relative; + display: flex; + align-items: center; +} + +.search-box i { + position: absolute; + left: 1rem; + color: var(--gray-color); +} + +.search-box input { + width: 100%; + padding: 0.75rem 1rem 0.75rem 3rem; + border: 1px solid var(--border-color); + border-radius: 8px; + background-color: var(--card-bg); + color: var(--text-color); + font-size: 1rem; + transition: all var(--transition-speed); +} + +.search-box input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); +} + +#clearSearch { + position: absolute; + right: 0.5rem; + background: none; + border: none; + color: var(--gray-color); + cursor: pointer; +} + +.view-controls { + display: flex; + gap: 0.5rem; + align-items: center; +} + +/* 按钮样式 */ +.btn-primary, .btn-secondary, .btn-danger, .btn-icon { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + transition: all var(--transition-speed); + display: inline-flex; + align-items: center; + gap: 0.5rem; + justify-content: center; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-primary:hover { + background-color: #2980b9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); +} + +.btn-secondary { + background-color: var(--light-color); + color: var(--text-color); +} + +.btn-secondary:hover { + background-color: var(--gray-color); + color: white; +} + +.btn-danger { + background-color: var(--danger-color); + color: white; +} + +.btn-danger:hover { + background-color: #c0392b; +} + +.btn-icon { + background: none; + color: var(--text-color); + padding: 0.5rem; + border-radius: 50%; + width: 40px; + height: 40px; +} + +.btn-icon:hover { + background-color: var(--hover-color); +} + +.btn-icon.active { + background-color: var(--primary-color); + color: white; +} + +/* 网址容器 */ +.urls-container { + flex: 1; + display: grid; + gap: 1.5rem; + position: relative; +} + +.urls-container.grid-view { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); +} + +.urls-container.list-view { + grid-template-columns: 1fr; +} + +/* 网址卡片 */ +.url-card { + background-color: var(--card-bg); + border-radius: 12px; + padding: 1.5rem; + border: 1px solid var(--border-color); + transition: all var(--transition-speed); + position: relative; + overflow: hidden; +} + +.url-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 25px var(--shadow-color); + border-color: var(--primary-color); +} + +.url-card.selected { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px var(--primary-color); +} + +.url-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; +} + +.url-icon { + font-size: 1.5rem; + color: var(--primary-color); + margin-right: 0.75rem; +} + +.url-title { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 0.25rem; + flex: 1; +} + +.url-actions { + display: flex; + gap: 0.5rem; +} + +.url-actions button { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 0.25rem; + border-radius: 4px; +} + +.url-actions button:hover { + color: var(--primary-color); + background-color: var(--hover-color); +} + +.url-address { + color: var(--primary-color); + font-size: 0.9rem; + margin-bottom: 1rem; + word-break: break-all; + font-family: 'Roboto Mono', monospace; +} + +.url-description { + color: var(--text-secondary); + font-size: 0.95rem; + margin-bottom: 1rem; + line-height: 1.5; +} + +.url-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border-color); +} + +.url-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.url-tag { + background-color: var(--light-color); + color: var(--text-color); + padding: 0.25rem 0.75rem; + border-radius: 12px; + font-size: 0.8rem; +} + +.url-meta { + display: flex; + align-items: center; + gap: 1rem; + color: var(--text-secondary); + font-size: 0.85rem; +} + +.favorite-btn { + color: var(--warning-color); + background: none; + border: none; + cursor: pointer; + font-size: 1.1rem; +} + +.favorite-btn.active { + color: #f1c40f; +} + +/* 空状态 */ +.empty-state { + grid-column: 1 / -1; + text-align: center; + padding: 4rem 2rem; + color: var(--text-secondary); +} + +.empty-state i { + margin-bottom: 1.5rem; + color: var(--gray-color); +} + +.empty-state h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + color: var(--text-color); +} + +.empty-state p { + margin-bottom: 2rem; +} + +/* 批量操作面板 */ +.bulk-actions-panel { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: var(--card-bg); + border-top: 1px solid var(--border-color); + padding: 1rem 2rem; + transform: translateY(100%); + transition: transform var(--transition-speed); + box-shadow: 0 -4px 20px var(--shadow-color); + z-index: 1000; +} + +.bulk-actions-panel.active { + transform: translateY(0); +} + +.bulk-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.bulk-buttons { + display: flex; + gap: 1rem; +} + +/* 模态框 */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2000; + align-items: center; + justify-content: center; + padding: 1rem; +} + +.modal.active { + display: flex; +} + +.modal-content { + background-color: var(--card-bg); + border-radius: 12px; + max-width: 600px; + width: 100%; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 20px 60px var(--shadow-color); + animation: modalSlideIn 0.3s ease; +} + +@keyframes modalSlideIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2rem; + border-bottom: 1px solid var(--border-color); +} + +.modal-header h2 { + font-size: 1.5rem; + font-weight: 600; +} + +.close-modal { + background: none; + border: none; + font-size: 1.5rem; + color: var(--text-secondary); + cursor: pointer; + padding: 0.5rem; + border-radius: 50%; +} + +.close-modal:hover { + background-color: var(--hover-color); +} + +.modal-body { + padding: 2rem; +} + +.modal-footer { + padding: 1.5rem 2rem; + border-top: 1px solid var(--border-color); + display: flex; + justify-content: flex-end; + gap: 1rem; +} + +/* 表单样式 */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--text-color); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid var(--border-color); + border-radius: 8px; + background-color: var(--bg-color); + color: var(--text-color); + font-size: 1rem; + transition: all var(--transition-speed); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); +} + +.form-row { + display: flex; + gap: 1rem; +} + +.form-row .form-group { + flex: 1; +} + +.tags-input-container { + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 0.75rem; + background-color: var(--bg-color); +} + +.tags-display { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.tag-input-tag { + background-color: var(--primary-color); + color: white; + padding: 0.4rem 0.8rem; + border-radius: 16px; + font-size: 0.85rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.tag-input-tag button { + background: none; + border: none; + color: white; + cursor: pointer; + padding: 0; + font-size: 0.9rem; +} + +#tagsInput { + border: none; + padding: 0; + background: none; + width: 100%; +} + +.checkbox-group label { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.checkbox-group input[type="checkbox"] { + width: auto; + margin: 0; +} + +/* 导入/导出标签页 */ +.import-export-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); + padding-bottom: 0.5rem; +} + +.tab-btn { + background: none; + border: none; + padding: 0.75rem 1.5rem; + color: var(--text-secondary); + cursor: pointer; + border-radius: 8px 8px 0 0; + font-weight: 500; + transition: all var(--transition-speed); +} + +.tab-btn:hover { + color: var(--text-color); + background-color: var(--hover-color); +} + +.tab-btn.active { + color: var(--primary-color); + border-bottom: 2px solid var(--primary-color); +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.data-preview { + background-color: var(--dark-color); + color: var(--light-color); + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; + max-height: 200px; + overflow-y: auto; + font-family: 'Roboto Mono', monospace; + font-size: 0.9rem; +} + +.file-upload-area { + border: 2px dashed var(--border-color); + border-radius: 12px; + padding: 3rem 2rem; + text-align: center; + margin: 1.5rem 0; + cursor: pointer; + transition: all var(--transition-speed); +} + +.file-upload-area:hover { + border-color: var(--primary-color); + background-color: var(--hover-color); +} + +.file-upload-area i { + color: var(--gray-color); + margin-bottom: 1rem; +} + +.import-warning { + background-color: rgba(231, 76, 60, 0.1); + border: 1px solid var(--danger-color); + border-radius: 8px; + padding: 1rem; + margin-top: 1.5rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.import-warning i { + color: var(--danger-color); + font-size: 1.2rem; +} + +.import-warning p { + color: var(--text-color); + margin: 0; +} + +/* 快捷键提示 */ +.shortcuts-hint { + position: fixed; + bottom: 1rem; + right: 1rem; + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 0.75rem 1.5rem; + font-size: 0.9rem; + color: var(--text-secondary); + box-shadow: 0 4px 12px var(--shadow-color); + z-index: 100; + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* 响应式设计 */ +@media (max-width: 1024px) { + .main-content { + flex-direction: column; + } + + .sidebar { + width: 100%; + border-right: none; + border-bottom: 1px solid var(--border-color); + max-height: 300px; + overflow-y: auto; + } + + .categories-list { + flex-direction: row; + flex-wrap: wrap; + } + + .category-item { + flex: 1; + min-width: 150px; + } +} + +@media (max-width: 768px) { + .header { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .header-controls { + width: 100%; + justify-content: center; + } + + .toolbar { + flex-direction: column; + align-items: stretch; + } + + .search-box { + max-width: 100%; + } + + .view-controls { + justify-content: center; + } + + .urls-container.grid-view { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + .form-row { + flex-direction: column; + gap: 0; + } + + .modal-content { + margin: 1rem; + max-height: 80vh; + } + + .shortcuts-hint { + display: none; + } +} + +@media (max-width: 480px) { + .urls-container.grid-view { + grid-template-columns: 1fr; + } + + .url-card-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .url-actions { + align-self: flex-end; + } + + .url-footer { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .url-meta { + width: 100%; + justify-content: space-between; + } +} + +/* 动画效果 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.url-card { + animation: fadeIn 0.3s ease; +} + +/* 滚动条样式 */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--sidebar-bg); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: var(--gray-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--primary-color); +} + +/* 选择框样式 */ +.url-card input[type="checkbox"] { + position: absolute; + top: 1rem; + left: 1rem; + width: 20px; + height: 20px; + cursor: pointer; + z-index: 10; + opacity: 0; +} + +.url-card.selected input[type="checkbox"] { + opacity: 1; +} + +.url-card::before { + content: ''; + position: absolute; + top: 1rem; + left: 1rem; + width: 20px; + height: 20px; + border: 2px solid var(--border-color); + border-radius: 4px; + background-color: var(--card-bg); + transition: all var(--transition-speed); + z-index: 1; +} + +.url-card.selected::before { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.url-card.selected::after { + content: '✓'; + position: absolute; + top: 1rem; + left: 1rem; + width: 20px; + height: 20px; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: bold; + z-index: 2; +}

暂无网址

添加网址

添加分类

导入/导出数据