From e5a9b31a6c32c9a24007f92c08d9faed59e7166e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B3=A2=E6=BE=9C=E5=A3=AE=E9=98=94?= <263303411@qq.com>
Date: Sat, 20 Dec 2025 21:39:14 +0800
Subject: [PATCH] first commit

---
 index.html |  295 +++++++++++++++
 script.js  | 1024 +++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  | 1033 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 2352 insertions(+)
 create mode 100644 index.html
 create mode 100644 script.js
 create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6a7975f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Android开发网址管理器</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>">
+</head>
+<body>
+    <div class="container">
+        <!-- 顶部导航栏 -->
+        <header class="header">
+            <div class="logo">
+                <i class="fas fa-link"></i>
+                <h1>Android开发网址管理器</h1>
+            </div>
+            <div class="header-controls">
+                <button id="themeToggle" class="btn-icon" title="切换主题">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <button id="importBtn" class="btn-secondary" title="导入数据">
+                    <i class="fas fa-file-import"></i> 导入
+                </button>
+                <button id="exportBtn" class="btn-primary" title="导出数据">
+                    <i class="fas fa-file-export"></i> 导出
+                </button>
+            </div>
+        </header>
+
+        <!-- 主内容区域 -->
+        <main class="main-content">
+            <!-- 左侧边栏 - 分类管理 -->
+            <aside class="sidebar">
+                <div class="sidebar-header">
+                    <h2><i class="fas fa-folder"></i> 分类</h2>
+                    <button id="addCategoryBtn" class="btn-icon" title="添加分类">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                </div>
+                <div class="categories-list" id="categoriesList">
+                    <!-- 分类将通过JavaScript动态生成 -->
+                    <div class="category-item active" data-id="all">
+                        <i class="fas fa-globe"></i>
+                        <span>全部网址</span>
+                        <span class="count-badge">0</span>
+                    </div>
+                    <div class="category-item" data-id="favorites">
+                        <i class="fas fa-star"></i>
+                        <span>收藏夹</span>
+                        <span class="count-badge">0</span>
+                    </div>
+                    <div class="category-item" data-id="recent">
+                        <i class="fas fa-history"></i>
+                        <span>最近访问</span>
+                        <span class="count-badge">0</span>
+                    </div>
+                </div>
+
+                <div class="tags-section">
+                    <h3><i class="fas fa-tags"></i> 常用标签</h3>
+                    <div class="tags-container" id="tagsContainer">
+                        <!-- 标签将通过JavaScript动态生成 -->
+                    </div>
+                </div>
+
+                <div class="stats-section">
+                    <h3><i class="fas fa-chart-bar"></i> 统计</h3>
+                    <div class="stats">
+                        <div class="stat-item">
+                            <span class="stat-label">总网址数</span>
+                            <span class="stat-value" id="totalUrls">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">分类数</span>
+                            <span class="stat-value" id="totalCategories">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">收藏数</span>
+                            <span class="stat-value" id="totalFavorites">0</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- 右侧主区域 -->
+            <section class="content-area">
+                <!-- 工具栏 -->
+                <div class="toolbar">
+                    <div class="search-box">
+                        <i class="fas fa-search"></i>
+                        <input type="text" id="searchInput" placeholder="搜索网址、标题或标签...">
+                        <button id="clearSearch" class="btn-icon" title="清除搜索">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="view-controls">
+                        <button id="gridViewBtn" class="btn-icon active" title="网格视图">
+                            <i class="fas fa-th-large"></i>
+                        </button>
+                        <button id="listViewBtn" class="btn-icon" title="列表视图">
+                            <i class="fas fa-list"></i>
+                        </button>
+                        <button id="addUrlBtn" class="btn-primary">
+                            <i class="fas fa-plus"></i> 添加网址
+                        </button>
+                        <button id="bulkActionsBtn" class="btn-secondary" title="批量操作">
+                            <i class="fas fa-tasks"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 网址显示区域 -->
+                <div class="urls-container grid-view" id="urlsContainer">
+                    <!-- 网址卡片将通过JavaScript动态生成 -->
+                    <div class="empty-state" id="emptyState">
+                        <i class="fas fa-bookmark fa-3x"></i>
+                        <h3>暂无网址</h3>
+                        <p>点击"添加网址"按钮开始添加您的第一个网址</p>
+                        <button id="addFirstUrlBtn" class="btn-primary">
+                            <i class="fas fa-plus"></i> 添加第一个网址
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 批量操作面板 -->
+                <div class="bulk-actions-panel" id="bulkActionsPanel">
+                    <div class="bulk-header">
+                        <span id="selectedCount">已选择 0 个项目</span>
+                        <div class="bulk-buttons">
+                            <button id="bulkOpenBtn" class="btn-secondary">
+                                <i class="fas fa-external-link-alt"></i> 批量打开
+                            </button>
+                            <button id="bulkDeleteBtn" class="btn-danger">
+                                <i class="fas fa-trash"></i> 批量删除
+                            </button>
+                            <button id="bulkCancelBtn" class="btn-icon">
+                                <i class="fas fa-times"></i> 取消
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- 快捷键提示 -->
+        <div class="shortcuts-hint">
+            <i class="fas fa-keyboard"></i> 快捷键提示: Ctrl+F (搜索), Ctrl+N (新建), Ctrl+S (保存), Esc (取消)
+        </div>
+    </div>
+
+    <!-- 模态框 - 添加/编辑网址 -->
+    <div class="modal" id="urlModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modalTitle">添加网址</h2>
+                <button class="close-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <form id="urlForm">
+                    <div class="form-group">
+                        <label for="urlTitle"><i class="fas fa-heading"></i> 标题 *</label>
+                        <input type="text" id="urlTitle" required placeholder="例如：Android开发者文档">
+                    </div>
+                    <div class="form-group">
+                        <label for="urlAddress"><i class="fas fa-link"></i> 网址 *</label>
+                        <input type="url" id="urlAddress" required placeholder="https://developer.android.com">
+                    </div>
+                    <div class="form-group">
+                        <label for="urlDescription"><i class="fas fa-align-left"></i> 描述</label>
+                        <textarea id="urlDescription" rows="3" placeholder="网址的简要描述..."></textarea>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="urlCategory"><i class="fas fa-folder"></i> 分类</label>
+                            <select id="urlCategory">
+                                <option value="">选择分类</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="urlIcon"><i class="fas fa-icons"></i> 图标</label>
+                            <select id="urlIcon">
+                                <option value="fas fa-globe">🌐 网站</option>
+                                <option value="fas fa-book">📚 文档</option>
+                                <option value="fas fa-tools">🛠️ 工具</option>
+                                <option value="fas fa-code">💻 代码</option>
+                                <option value="fas fa-comments">💬 社区</option>
+                                <option value="fas fa-palette">🎨 设计</option>
+                                <option value="fas fa-video">🎥 视频</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label><i class="fas fa-tags"></i> 标签</label>
+                        <div class="tags-input-container">
+                            <div class="tags-display" id="tagsDisplay"></div>
+                            <input type="text" id="tagsInput" placeholder="输入标签后按回车添加">
+                        </div>
+                    </div>
+                    <div class="form-group checkbox-group">
+                        <label>
+                            <input type="checkbox" id="urlFavorite">
+                            <i class="fas fa-star"></i> 添加到收藏夹
+                        </label>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary close-modal">取消</button>
+                <button type="submit" form="urlForm" class="btn-primary">保存</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 模态框 - 添加分类 -->
+    <div class="modal" id="categoryModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>添加分类</h2>
+                <button class="close-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <form id="categoryForm">
+                    <div class="form-group">
+                        <label for="categoryName">分类名称 *</label>
+                        <input type="text" id="categoryName" required placeholder="例如：开发文档">
+                    </div>
+                    <div class="form-group">
+                        <label for="categoryColor">颜色</label>
+                        <input type="color" id="categoryColor" value="#3498db">
+                    </div>
+                    <div class="form-group">
+                        <label for="categoryIcon">图标</label>
+                        <select id="categoryIcon">
+                            <option value="fas fa-folder">📁 文件夹</option>
+                            <option value="fas fa-book">📚 文档</option>
+                            <option value="fas fa-code">💻 代码</option>
+                            <option value="fas fa-tools">🛠️ 工具</option>
+                            <option value="fas fa-comments">💬 社区</option>
+                            <option value="fas fa-video">🎥 视频</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary close-modal">取消</button>
+                <button type="submit" form="categoryForm" class="btn-primary">创建</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 导入/导出模态框 -->
+    <div class="modal" id="importExportModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="importExportTitle">导入/导出数据</h2>
+                <button class="close-modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="import-export-tabs">
+                    <button class="tab-btn active" data-tab="export">导出数据</button>
+                    <button class="tab-btn" data-tab="import">导入数据</button>
+                </div>
+                
+                <div class="tab-content active" id="exportTab">
+                    <p>将您的所有网址数据导出为JSON文件：</p>
+                    <div class="data-preview">
+                        <pre id="exportDataPreview"></pre>
+                    </div>
+                    <button id="downloadJsonBtn" class="btn-primary">
+                        <i class="fas fa-download"></i> 下载JSON文件
+                    </button>
+                </div>
+                
+                <div class="tab-content" id="importTab">
+                    <p>从JSON文件导入网址数据：</p>
+                    <div class="file-upload-area" id="fileUploadArea">
+                        <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                        <p>拖放JSON文件到这里，或点击选择文件</p>
+                        <input type="file" id="jsonFileInput" accept=".json">
+                    </div>
+                    <div class="import-warning">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        <p>注意：导入数据将覆盖当前的所有数据，请先备份！</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
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 = `
+            <div class="category-item ${this.currentCategory === 'all' ? 'active' : ''}" data-id="all">
+                <i class="fas fa-globe"></i>
+                <span>全部网址</span>
+                <span class="count-badge">${allCount}</span>
+            </div>
+            <div class="category-item ${this.currentCategory === 'favorites' ? 'active' : ''}" data-id="favorites">
+                <i class="fas fa-star"></i>
+                <span>收藏夹</span>
+                <span class="count-badge">${favoritesCount}</span>
+            </div>
+            <div class="category-item ${this.currentCategory === 'recent' ? 'active' : ''}" data-id="recent">
+                <i class="fas fa-history"></i>
+                <span>最近访问</span>
+                <span class="count-badge">${recentCount}</span>
+            </div>
+        `;
+        
+        // 添加自定义分类
+        this.categories.forEach(category => {
+            const count = this.urls.filter(url => url.category === category.id).length;
+            html += `
+                <div class="category-item ${this.currentCategory === category.id ? 'active' : ''}" data-id="${category.id}">
+                    <i class="${category.icon}" style="color: ${category.color}"></i>
+                    <span>${category.name}</span>
+                    <span class="count-badge">${count}</span>
+                </div>
+            `;
+        });
+        
+        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 += `
+                <div class="url-card ${isSelected ? 'selected' : ''}" data-id="${url.id}">
+                    <input type="checkbox" ${isSelected ? 'checked' : ''}>
+                    <div class="url-card-header">
+                        <div style="display: flex; align-items: center;">
+                            <i class="${url.icon} url-icon"></i>
+                            <div>
+                                <div class="url-title">${url.title}</div>
+                                <div class="url-address">${url.url}</div>
+                            </div>
+                        </div>
+                        <div class="url-actions">
+                            <button class="favorite-btn ${url.favorite ? 'active' : ''}" title="${url.favorite ? '取消收藏' : '收藏'}">
+                                <i class="fas fa-star"></i>
+                            </button>
+                            <button class="edit-url" title="编辑">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="delete-url" title="删除">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                    ${url.description ? `<div class="url-description">${url.description}</div>` : ''}
+                    <div class="url-footer">
+                        <div class="url-tags">
+                            ${url.tags?.map(tag => `<span class="url-tag">${tag}</span>`).join('') || ''}
+                        </div>
+                        <div class="url-meta">
+                            ${category ? `<span style="color: ${category.color}"><i class="${category.icon}"></i> ${category.name}</span>` : ''}
+                            <button class="open-url" title="打开网址">
+                                <i class="fas fa-external-link-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        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 += `<span class="tag ${isActive ? 'active' : ''}" data-tag="${tag}">${tag} (${count})</span>`;
+        });
+        
+        tagsContainer.innerHTML = html;
+    }
+    
+    updateCategorySelector() {
+        try {
+            const categorySelect = document.getElementById('urlCategory');
+            if (!categorySelect) return;
+            
+            let html = '<option value="">选择分类</option>';
+            this.categories.forEach(category => {
+                html += `<option value="${category.id}">${category.name}</option>`;
+            });
+            
+            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 = `
+            <span>${tagText}</span>
+            <button type="button">&times;</button>
+        `;
+        
+        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;
+}
