更新高密度浏览模式

assets/css/style.css

@@ -157,25 +157,25 @@ body.dark-mode .search-result-title {
 
 .theme-toggle {
     position: absolute;
-    right: 20px;
+    right: 65px;
     top: 20px;
     background: white;
-    border: 2px solid #e2e8f0;
+    border: 1px solid #e2e8f0;
     border-radius: 50%;
-    width: 45px;
+    width: 40px;
-    height: 45px;
+    height: 40px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .theme-toggle:hover {
     transform: scale(1.1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     border-color: #4299e1;
 }
 
@@ -188,6 +188,75 @@ body.dark-mode .theme-toggle:hover {
     border-color: #63b3ed;
 }
 
+/* 视图切换按钮 */
+.view-toggle {
+    position: absolute;
+    right: 15px;
+    top: 20px;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.view-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-color: #4299e1;
+}
+
+body.dark-mode .view-toggle {
+    background: #2d3748;
+    border-color: #4a5568;
+}
+
+body.dark-mode .view-toggle:hover {
+    border-color: #63b3ed;
+}
+
+.view-tooltip {
+    position: absolute;
+    bottom: -35px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-10px);
+    background: rgba(0, 0, 0, 0.85);
+    color: #fff;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.view-tooltip::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid rgba(0, 0, 0, 0.85);
+}
+
+.view-toggle:hover .view-tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+}
+
 .theme-tooltip {
     position: absolute;
     bottom: -35px;
@@ -560,7 +629,7 @@ body.dark-mode .beian-divider {
         width: 40px;
         height: 40px;
         font-size: 1.1rem;
-        right: 10px;
+        right: 65px;
         top: 10px;
     }
 
@@ -570,6 +639,20 @@ body.dark-mode .beian-divider {
         bottom: -32px;
     }
 
+    .view-toggle {
+        width: 40px;
+        height: 40px;
+        font-size: 1.1rem;
+        right: 10px;
+        top: 10px;
+    }
+
+    .view-tooltip {
+        font-size: 0.75rem;
+        padding: 5px 10px;
+        bottom: -32px;
+    }
+
     .section-header {
         flex-direction: column;
         align-items: flex-start;

assets/json/collection.json

@@ -0,0 +1,20 @@
+[
+    {
+        "section": "合集/导航"
+    },
+    {
+        "name": "404星链计划",
+        "url": "https://github.com/knownsec/404StarLink",
+        "description": "知道创宇404实验室网安工具收集册"
+    },
+    {
+        "name": "Vulhub",
+        "url": "https://github.com/vulhub/vulhub",
+        "description": "基于Docker的漏洞复现工程，也可以在其中搜寻漏洞利用脚本"
+    },
+    {
+        "name": "Sechub",
+        "url": "https://git.masonliu.com/MasonLiu/SecHub",
+        "description": "由本人开发的网安工具集网站"
+    }
+]

assets/json/intranet.json

@@ -0,0 +1,25 @@
+[
+    {
+        "section": "内网渗透工具"
+    },
+    {
+        "name": "Suo5",
+        "url": "https://github.com/zema1/suo5",
+        "description": "高性能网站代理脚本"
+    },
+    {
+        "name": "FRP",
+        "url": "https://github.com/fatedier/frp",
+        "description": "一个快速反向代理工具"
+    },
+    {
+        "name": "fscan",
+        "url": "https://github.com/shadow1ng/fscan",
+        "description": "内网高速扫描工具（易被发现）"
+    },
+    {
+        "name": "fscan结果美化工具",
+        "url": "https://github.com/ZororoZ/fscanOutput",
+        "description": "fscan结果美化工具"
+    }
+]

assets/json/mobile.json

@@ -0,0 +1,15 @@
+[
+    {
+        "section": "移动端渗透工具"
+    },
+    {
+        "name": "Magisk",
+        "url": "https://github.com/topjohnwu/Magisk",
+        "description": "安卓root工具，一代神器"
+    },
+    {
+        "name": "Frida",
+        "url": "https://github.com/frida/frida",
+        "description": "移动端内核Hook工具"
+    }
+]

assets/json/plugin.json

@@ -0,0 +1,10 @@
+[
+    {
+        "section": "插件/非工具"
+    },
+    {
+        "name": "HaE",
+        "url": "https://github.com/gh0stkey/HaE",
+        "description": "HaE是一款可以快速挖掘目标指纹和关键信息的Burp插件"
+    }
+]

assets/json/poc.json

@@ -0,0 +1,20 @@
+[
+    {
+        "section": "POC/EXP"
+    },
+    {
+        "name": "CVE-2026-31431",
+        "url": "https://copy.fail/",
+        "description": "基于复制功能的Linux系统提权漏洞"
+    },
+    {
+        "name": "MS17-010检测工具",
+        "url": "https://github.com/TeskeVirtualSystem/MS17010Test",
+        "description": "Windows可用，快速检测永恒之蓝漏洞"
+    },
+    {
+        "name": "CVE-2023-32315",
+        "url": "https://github.com/vulhub/vulhub/tree/master/openfire/CVE-2023-32315",
+        "description": "Openfire任意用户添加漏洞"
+    }
+]

assets/json/proxy.json

@@ -0,0 +1,30 @@
+[
+    {
+        "section": "代理工具/集成平台"
+    },
+    {
+        "name": "Burp Suite",
+        "url": "https://portswigger.net/burp",
+        "description": "经典，功能强大的Web应用安全测试工具，建议自行搜索破解版"
+    },
+    {
+        "name": "Yakit",
+        "url": "https://github.com/yaklang/yakit",
+        "description": "交互式应用安全测试平台"
+    },
+    {
+        "name": "Reqable",
+        "url": "https://reqable.com/zh-CN/",
+        "description": "多平台协同抓包分析以及API调试平台，支持Python脚本"
+    },
+    {
+        "name": "Fiddler",
+        "url": "https://www.telerik.com/fiddler",
+        "description": "HTTP调试代理工具，一般用于PC抓取移动端报文"
+    },
+    {
+        "name": "Proxifier",
+        "url": "https://www.proxifier.com/",
+        "description": "功能强大的网络代理工具，支持HTTP/HTTPS/SOCKS代理"
+    }
+]

assets/json/scanner.json

@@ -0,0 +1,40 @@
+[
+    {
+        "section": "多功能扫描器"
+    },
+    {
+        "name": "Nuclei",
+        "url": "https://github.com/projectdiscovery/nuclei",
+        "description": "（POC/EXP扫描工具）Nuclei 是一个快速、灵活且可扩展的漏洞扫描工具"
+    },
+    {
+        "name": "arog",
+        "url": "https://github.com/zan8in/afrog",
+        "description": "（POC/EXP扫描工具）基于Go语言开发的开源漏扫系统"
+    },
+    {
+        "name": "Pocsuite3",
+        "url": "https://github.com/knownsec/pocsuite3",
+        "description": "（POC/EXP扫描工具）基于Python开发的开源漏扫系统"
+    },
+    {
+        "name": "xray",
+        "url": "https://github.com/chaitin/xray",
+        "description": "（POC/EXP扫描工具）长亭开发的漏洞扫描工具，支持被动扫描"
+    },
+    {
+        "name": "Nikto",
+        "url": "https://github.com/sullo/nikto",
+        "description": "Web服务器扫描工具"
+    },
+    {
+        "name": "OpenVAS",
+        "url": "https://github.com/greenbone/openvas",
+        "description": "自动化开源漏洞扫描工具"
+    },
+    {
+        "name": "Goby",
+        "url": "https://gobies.org/",
+        "description": "自动化漏洞扫描工具，建议自行上网搜索红队破解版"
+    }
+]

assets/json/shell.json

@@ -0,0 +1,15 @@
+[
+    {
+        "section": "Shell管理工具"
+    },
+    {
+        "name": "AntSword蚁剑",
+        "url": "https://github.com/AntSwordProject/antSword",
+        "description": "AntSword蚁剑是一个功能强大的Shell管理工具，尤其是在PHP场景下"
+    },
+    {
+        "name": "Godzilla哥斯拉",
+        "url": "https://github.com/BeichenDream/Godzilla",
+        "description": "多语言支持的强大Shell管理工具"
+    }
+]

assets/json/template.json

@@ -2,6 +2,16 @@
     {
         "section": "栏目名称"
     },
+    {
+        "name": "工具名称",
+        "url": "工具链接",
+        "description": "工具描述"
+    },
+    {
+        "name": "工具名称",
+        "url": "工具链接",
+        "description": "工具描述"
+    },
     {
         "name": "工具名称",
         "url": "工具链接",

assets/json/tools.json

@@ -0,0 +1,20 @@
+[
+    {
+        "section": "工具"
+    },
+    {
+        "name": "Dirsearch",
+        "url": "https://github.com/maurosoria/dirsearch",
+        "description": "经典网站路径扫描爆破工具"
+    },
+    {
+        "name": "Dirmap",
+        "url": "https://github.com/H4ckForJob/dirmap",
+        "description": "网站路径扫描爆破工具"
+    },
+    {
+        "name": "Sqlmap",
+        "url": "https://github.com/sqlmapproject/sqlmap",
+        "description": "主流的强大SQL注入神器"
+    }
+]

db.php

@@ -8,6 +8,7 @@ class SecHubDatabase {
     private $dbPath;
     private $jsonDir;
     private $db;
+    private $needsInitialSync = false;
 
     public function __construct($dbPath, $jsonDir) {
         $this->dbPath = $dbPath;
@@ -20,18 +21,43 @@ class SecHubDatabase {
      */
     private function initDatabase() {
         try {
+            // 检查数据库文件是否存在
+            $dbExists = file_exists($this->dbPath);
+            
             $this->db = new PDO('sqlite:' . $this->dbPath);
             $this->db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
             $this->db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
             
             // 创建同步日志表
             $this->createSyncLogTable();
+            
+            // 如果数据库文件是新创建的，或者没有任何业务数据表，标记需要同步
+            if (!$dbExists || $this->isEmptyDatabase()) {
+                $this->needsInitialSync = true;
+            }
         } catch (PDOException $e) {
             error_log("数据库连接失败: " . $e->getMessage());
             throw $e;
         }
     }
 
+    /**
+     * 检查数据库是否为空（没有业务数据表）
+     */
+    private function isEmptyDatabase() {
+        try {
+            $sql = "SELECT count(*) as table_count FROM sqlite_master 
+                    WHERE type='table' 
+                      AND name NOT LIKE 'sqlite_%' 
+                      AND name != 'json_sync_log'";
+            $stmt = $this->db->query($sql);
+            $result = $stmt->fetch();
+            return $result['table_count'] == 0;
+        } catch (Exception $e) {
+            return true;
+        }
+    }
+
     /**
      * 创建同步日志表
      */
@@ -52,6 +78,18 @@ class SecHubDatabase {
      * 检查并同步JSON数据到数据库
      */
     public function syncJsonToDatabase() {
+        // 如果是初始同步，强制同步所有文件
+        if ($this->needsInitialSync) {
+            $jsonFiles = glob($this->jsonDir . '*.json');
+            
+            foreach ($jsonFiles as $file) {
+                $this->syncSingleFile($file);
+            }
+            $this->needsInitialSync = false;
+            return;
+        }
+        
+        // 正常增量同步
         $jsonFiles = glob($this->jsonDir . '*.json');
         
         foreach ($jsonFiles as $file) {

index.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * SecHub - 网络安全工具导航页
+ * SecHub - 网络安全工具导航页（紧凑版）
  */
 
 // 定义路径
@@ -16,29 +16,14 @@ if (!is_dir($dbDir)) {
 // 引入数据库类
 require_once __DIR__ . '/db.php';
 
-/**
- * 渲染卡片HTML
- * @param array $item 项目数据
- * @return string HTML字符串
- */
-function renderCard($item) {
-    $name = htmlspecialchars($item['name'] ?? '未命名');
-    $url = htmlspecialchars($item['url'] ?? '#');
-    $description = htmlspecialchars($item['description'] ?? '暂无简介');
-    
-    return "
-    <div class=\"card\" onclick=\"window.open('{$url}', '_blank')\">
-        <div class=\"card-header\">
-            <h3 class=\"card-title\">{$name}</h3>
-            <a href=\"{$url}\" target=\"_blank\" class=\"card-link\" onclick=\"event.stopPropagation()\">{$url}</a>
-        </div>
-        <p class=\"card-description\">{$description}</p>
-    </div>";
-}
-
 // 初始化数据库并同步数据
 try {
     $database = new SecHubDatabase($dbPath, $jsonDir);
+    
+    if (!file_exists($dbPath)) {
+        error_log("数据库文件不存在，将在同步时创建");
+    }
+    
     $database->syncJsonToDatabase();
     
     // 获取栏目配置
@@ -55,14 +40,475 @@ try {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="./assets/imgs/favicon.ico" type="image/x-icon">
-    <title>SecHub - 网络安全工具集</title>
+    <title>SecHub（简洁版）</title>
-    <link rel="stylesheet" href="assets/css/style.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg-primary: #f5f7fa;
+            --bg-secondary: #ffffff;
+            --text-primary: #2c3e50;
+            --text-secondary: #7f8c8d;
+            --border-color: #e0e6ed;
+            --accent-color: #3498db;
+            --hover-bg: #f0f4f8;
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+
+        body.dark-mode {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --text-primary: #e0e0e0;
+            --text-secondary: #999999;
+            --border-color: #404040;
+            --accent-color: #4a9eff;
+            --hover-bg: #3a3a3a;
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.4;
+            transition: all 0.3s ease;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 15px;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 20px;
+            position: relative;
+        }
+
+        h1 {
+            font-size: 1.8em;
+            margin-bottom: 5px;
+            color: var(--text-primary);
+        }
+
+        header p {
+            font-size: 0.9em;
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+        }
+
+        /* 全局搜索框 */
+        .search-container {
+            position: relative;
+            max-width: 600px;
+            margin: 0 auto 15px;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 2px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 0.95em;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+        }
+
+        .search-results {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            box-shadow: var(--shadow);
+            max-height: 500px;
+            overflow-y: auto;
+            z-index: 1000;
+            margin-top: 5px;
+        }
+
+        .search-result-section {
+            padding: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .search-result-title {
+            font-size: 0.9em;
+            color: var(--accent-color);
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        .no-results {
+            padding: 20px;
+            text-align: center;
+            color: var(--text-secondary);
+        }
+
+        /* 主题切换按钮 */
+        .theme-toggle {
+            position: fixed;
+            top: 15px;
+            right: 65px;
+            background-color: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2em;
+            box-shadow: var(--shadow);
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        /* 视图切换按钮 */
+        .view-toggle {
+            position: fixed;
+            top: 15px;
+            right: 15px;
+            background-color: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2em;
+            box-shadow: var(--shadow);
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+
+        .view-toggle:hover {
+            transform: scale(1.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .view-tooltip {
+            position: absolute;
+            bottom: -35px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--text-primary);
+            color: var(--bg-secondary);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.75em;
+            white-space: nowrap;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .view-toggle:hover .view-tooltip {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        /* 栏目区域 */
+        .section {
+            margin-bottom: 20px;
+            background-color: var(--bg-secondary);
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: var(--shadow);
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--accent-color);
+        }
+
+        .section-title {
+            font-size: 1.1em;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .section-search {
+            width: 200px;
+            padding: 6px 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 0.85em;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+        }
+
+        .section-search:focus {
+            outline: none;
+            border-color: var(--accent-color);
+        }
+
+        /* 紧凑网格布局 */
+        .compact-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 8px;
+        }
+
+        /* 紧凑卡片 */
+        .compact-card {
+            background-color: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 10px 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .compact-card:hover {
+            background-color: var(--hover-bg);
+            border-color: var(--accent-color);
+            transform: translateY(-2px);
+            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+        }
+
+        .compact-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background-color: var(--accent-color);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .compact-card:hover::before {
+            opacity: 1;
+        }
+
+        .compact-card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 6px;
+        }
+
+        .compact-card-title {
+            font-size: 0.95em;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 0;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+
+        .compact-card-link {
+            font-size: 0.75em;
+            color: var(--accent-color);
+            text-decoration: none;
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+        }
+
+        .compact-card-link:hover {
+            text-decoration: underline;
+        }
+
+        .compact-card-description {
+            font-size: 0.8em;
+            color: var(--text-secondary);
+            line-height: 1.3;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* 空状态 */
+        .empty-state {
+            text-align: center;
+            padding: 20px;
+            color: var(--text-secondary);
+            font-size: 0.9em;
+        }
+
+        /* 页脚 */
+        .panel-footer {
+            text-align: center;
+            padding: 20px 0;
+            margin-top: 30px;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .footer-content {
+            color: var(--text-secondary);
+            font-size: 0.85em;
+        }
+
+        .footer-content a {
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+
+        .footer-content a:hover {
+            text-decoration: underline;
+        }
+
+        .beian-info {
+            margin-top: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .beian-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .beian-link:hover {
+            color: var(--accent-color);
+        }
+
+        .beian-divider {
+            color: var(--text-secondary);
+        }
+
+        .beian-icon {
+            vertical-align: middle;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 1200px) {
+            .compact-grid {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+
+            h1 {
+                font-size: 1.5em;
+            }
+
+            .compact-grid {
+                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+                gap: 6px;
+            }
+
+            .section-header {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 8px;
+            }
+
+            .section-search {
+                width: 100%;
+            }
+
+            .theme-toggle {
+                top: 10px;
+                right: 60px;
+                width: 35px;
+                height: 35px;
+                font-size: 1em;
+            }
+
+            .view-toggle {
+                top: 10px;
+                right: 10px;
+                width: 35px;
+                height: 35px;
+                font-size: 1em;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .compact-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .compact-card {
+                padding: 8px 10px;
+            }
+
+            .compact-card-title {
+                font-size: 0.9em;
+            }
+
+            .compact-card-description {
+                font-size: 0.75em;
+            }
+        }
+
+        /* 滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+    </style>
 </head>
 <body>
     <div class="container">
         <header>
             <h1>SecHub 网安工具集</h1>
-            <p>一站式网络安全工具与资源导航平台</p>
+            <p>高密度浏览模式 | 一屏查看更多工具</p>
             
             <!-- 全局搜索框 -->
             <div class="search-container">
@@ -76,30 +522,24 @@ try {
             
             <button id="theme-toggle" class="theme-toggle" title="点击切换白天/黑夜模式">
                 <span class="theme-icon">🌙</span>
-                <span class="theme-tooltip">切换主题</span>
+            </button>
+            <button id="view-toggle" class="view-toggle" title="切换到标准视图" onclick="window.location.href='simple.php'">
+                <span class="view-icon">📄</span>
+                <span class="view-tooltip">标准视图</span>
             </button>
         </header>
 
-         <?php foreach ($sections as $key => $config): ?>
+        <?php foreach ($sections as $key => $config): ?>
             <?php 
                 $items = $database->getItemsBySection($key);
-                // 获取对应的JSON文件名
                 $jsonFile = $key . '.json';
             ?>
             
             <section class="section" data-section="<?= htmlspecialchars($key) ?>">
                 <div class="section-header">
-                    <div class="section-title-wrapper">
+                    <h2 class="section-title">
-                        <h2 class="section-title">
+                        <?= htmlspecialchars($config['title']) ?>
-                            <?= htmlspecialchars($config['title']) ?>
+                    </h2>
-                        </h2>
-                        <!-- 下载按钮 -->
-                        <button class="download-btn" 
-                                onclick="downloadJson('<?= htmlspecialchars($jsonFile) ?>')"
-                                title="下载JSON文件">
-                            📥 下载数据源
-                        </button>
-                    </div>
                     <!-- 单项搜索框 -->
                     <input type="text" 
                            class="section-search" 
@@ -113,9 +553,15 @@ try {
                         <p>暂无数据</p>
                     </div>
                 <?php else: ?>
-                    <div class="cards-grid" data-section-items="<?= htmlspecialchars($key) ?>">
+                    <div class="compact-grid" data-section-items="<?= htmlspecialchars($key) ?>">
                         <?php foreach ($items as $item): ?>
-                            <?= renderCard($item) ?>
+                            <div class="compact-card" onclick="window.open('<?= htmlspecialchars($item['url'] ?? '#') ?>', '_blank')">
+                                <div class="compact-card-header">
+                                    <h3 class="compact-card-title"><?= htmlspecialchars($item['name'] ?? '未命名') ?></h3>
+                                    <a href="<?= htmlspecialchars($item['url'] ?? '#') ?>" target="_blank" class="compact-card-link" onclick="event.stopPropagation()"><?= htmlspecialchars($item['url'] ?? '') ?></a>
+                                </div>
+                                <p class="compact-card-description"><?= htmlspecialchars($item['description'] ?? '暂无简介') ?></p>
+                            </div>
                         <?php endforeach; ?>
                     </div>
                 <?php endif; ?>
@@ -146,19 +592,19 @@ try {
             return div.innerHTML;
         }
 
-        // 渲染卡片函数（用于搜索结果）
+        // 渲染紧凑卡片（用于搜索结果）
-        function renderCardJS(item) {
+        function renderCompactCardJS(item) {
             const name = item.name || '未命名';
             const url = item.url || '#';
             const description = item.description || '暂无简介';
             
             return `
-            <div class="card" onclick="window.open('${url}', '_blank')">
+            <div class="compact-card" onclick="window.open('${url}', '_blank')">
-                <div class="card-header">
+                <div class="compact-card-header">
-                    <h3 class="card-title">${escapeHtml(name)}</h3>
+                    <h3 class="compact-card-title">${escapeHtml(name)}</h3>
-                    <a href="${url}" target="_blank" class="card-link" onclick="event.stopPropagation()">${escapeHtml(url)}</a>
+                    <a href="${url}" target="_blank" class="compact-card-link" onclick="event.stopPropagation()">${escapeHtml(url)}</a>
                 </div>
-                <p class="card-description">${escapeHtml(description)}</p>
+                <p class="compact-card-description">${escapeHtml(description)}</p>
             </div>`;
         }
 
@@ -173,7 +619,6 @@ try {
             
             if (keyword.length === 0) {
                 searchResults.style.display = 'none';
-                showAllSections();
                 return;
             }
 
@@ -213,11 +658,11 @@ try {
                 sectionDiv.appendChild(title);
                 
                 const cardsGrid = document.createElement('div');
-                cardsGrid.className = 'cards-grid';
+                cardsGrid.className = 'compact-grid';
                 
                 section.items.forEach(item => {
                     const cardDiv = document.createElement('div');
-                    cardDiv.innerHTML = renderCardJS(item);
+                    cardDiv.innerHTML = renderCompactCardJS(item);
                     cardsGrid.appendChild(cardDiv.firstElementChild);
                 });
                 
@@ -228,45 +673,26 @@ try {
             searchResults.style.display = 'block';
         }
 
-        function showAllSections() {
-            // 不需要做任何事，因为栏目一直显示
-        }
-
-        function hideAllSections() {
-            // 不需要隐藏栏目
-        }
-
-        // 下载JSON文件
-        function downloadJson(filename) {
-            const url = `assets/json/${filename}`;
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = filename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-
         // 单项搜索功能
         document.querySelectorAll('.section-search').forEach(input => {
             input.addEventListener('input', function() {
                 const section = this.dataset.section;
-                const keyword = this.value.trim();
+                const keyword = this.value.trim().toLowerCase();
                 const cardsGrid = document.querySelector(`[data-section-items="${section}"]`);
                 
                 if (!cardsGrid) return;
                 
-                const cards = cardsGrid.querySelectorAll('.card');
+                const cards = cardsGrid.querySelectorAll('.compact-card');
                 
                 cards.forEach(card => {
-                    const title = card.querySelector('.card-title').textContent.toLowerCase();
+                    const title = card.querySelector('.compact-card-title').textContent.toLowerCase();
-                    const description = card.querySelector('.card-description').textContent.toLowerCase();
+                    const description = card.querySelector('.compact-card-description').textContent.toLowerCase();
-                    const link = card.querySelector('.card-link').textContent.toLowerCase();
+                    const link = card.querySelector('.compact-card-link').textContent.toLowerCase();
                     
                     if (keyword === '' || 
-                        title.includes(keyword.toLowerCase()) || 
+                        title.includes(keyword) || 
-                        description.includes(keyword.toLowerCase()) ||
+                        description.includes(keyword) ||
-                        link.includes(keyword.toLowerCase())) {
+                        link.includes(keyword)) {
                         card.style.display = 'block';
                     } else {
                         card.style.display = 'none';
@@ -279,9 +705,6 @@ try {
         document.addEventListener('click', function(e) {
             if (!e.target.closest('.search-container')) {
                 searchResults.style.display = 'none';
-                if (globalSearchInput.value.trim() === '') {
-                    showAllSections();
-                }
             }
         });
 
@@ -300,14 +723,6 @@ try {
                 themeIcon.textContent = '☀️';
             }
             
-            // 首次访问显示提示
-            if (!localStorage.getItem('themeHintShown')) {
-                setTimeout(() => {
-                    showThemeHint();
-                    localStorage.setItem('themeHintShown', 'true');
-                }, 1500);
-            }
-            
             // 切换主题
             themeToggle.addEventListener('click', function() {
                 body.classList.toggle('dark-mode');
@@ -320,18 +735,7 @@ try {
                     localStorage.setItem('theme', 'light');
                 }
             });
-            
-            // 显示提示函数
-            function showThemeHint() {
-                const tooltip = themeToggle.querySelector('.theme-tooltip');
-                tooltip.classList.add('show');
-                
-                // 3秒后隐藏提示
-                setTimeout(() => {
-                    tooltip.classList.remove('show');
-                }, 3000);
-            }
         })();
     </script>
 </body>
-</html>
+</html>

simple.php

@@ -0,0 +1,347 @@
+<?php
+/**
+ * SecHub - 网络安全工具导航页
+ */
+
+// 定义路径
+$jsonDir = __DIR__ . '/assets/json/';
+$dbDir = __DIR__ . '/assets/db/';
+$dbPath = $dbDir . 'sechub.db';
+
+// 确保数据库目录存在
+if (!is_dir($dbDir)) {
+    mkdir($dbDir, 0755, true);
+}
+
+// 引入数据库类
+require_once __DIR__ . '/db.php';
+
+/**
+ * 渲染卡片HTML
+ * @param array $item 项目数据
+ * @return string HTML字符串
+ */
+function renderCard($item) {
+    $name = htmlspecialchars($item['name'] ?? '未命名');
+    $url = htmlspecialchars($item['url'] ?? '#');
+    $description = htmlspecialchars($item['description'] ?? '暂无简介');
+    
+    return "
+    <div class=\"card\" onclick=\"window.open('{$url}', '_blank')\">
+        <div class=\"card-header\">
+            <h3 class=\"card-title\">{$name}</h3>
+            <a href=\"{$url}\" target=\"_blank\" class=\"card-link\" onclick=\"event.stopPropagation()\">{$url}</a>
+        </div>
+        <p class=\"card-description\">{$description}</p>
+    </div>";
+}
+
+// 初始化数据库并同步数据
+try {
+    $database = new SecHubDatabase($dbPath, $jsonDir);
+    
+    // 检查数据库文件是否存在，如果不存在会在新建时自动创建
+    if (!file_exists($dbPath)) {
+        error_log("数据库文件不存在，将在同步时创建");
+    }
+    
+    $database->syncJsonToDatabase();
+    
+    // 获取栏目配置
+    $sections = $database->getSectionsConfig();
+} catch (Exception $e) {
+    error_log("数据库初始化失败: " . $e->getMessage());
+    $sections = [];
+}
+?>
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="./assets/imgs/favicon.ico" type="image/x-icon">
+    <title>SecHub - 网络安全工具集</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>SecHub 网安工具集</h1>
+            <p>一站式网络安全工具与资源导航平台</p>
+            
+            <!-- 全局搜索框 -->
+            <div class="search-container">
+                <input type="text" 
+                       id="global-search" 
+                       class="search-input" 
+                       placeholder="🔍 搜索工具名称、描述或链接..."
+                       autocomplete="off">
+                <div id="search-results" class="search-results"></div>
+            </div>
+            
+            <button id="theme-toggle" class="theme-toggle" title="点击切换白天/黑夜模式">
+                <span class="theme-icon">🌙</span>
+                <span class="theme-tooltip">切换主题</span>
+            </button>
+            <button id="view-toggle" class="view-toggle" title="切换到紧凑视图" onclick="window.location.href='index.php'">
+                <span class="view-icon">📋</span>
+                <span class="view-tooltip">紧凑视图</span>
+            </button>
+        </header>
+
+         <?php foreach ($sections as $key => $config): ?>
+            <?php 
+                $items = $database->getItemsBySection($key);
+                // 获取对应的JSON文件名
+                $jsonFile = $key . '.json';
+            ?>
+            
+            <section class="section" data-section="<?= htmlspecialchars($key) ?>">
+                <div class="section-header">
+                    <div class="section-title-wrapper">
+                        <h2 class="section-title">
+                            <?= htmlspecialchars($config['title']) ?>
+                        </h2>
+                        <!-- 下载按钮 -->
+                        <button class="download-btn" 
+                                onclick="downloadJson('<?= htmlspecialchars($jsonFile) ?>')"
+                                title="下载JSON文件">
+                            📥 下载数据源
+                        </button>
+                    </div>
+                    <!-- 单项搜索框 -->
+                    <input type="text" 
+                           class="section-search" 
+                           data-section="<?= htmlspecialchars($key) ?>"
+                           placeholder="🔍 在此栏目中搜索..."
+                           autocomplete="off">
+                </div>
+                
+                <?php if (empty($items)): ?>
+                    <div class="empty-state">
+                        <p>暂无数据</p>
+                    </div>
+                <?php else: ?>
+                    <div class="cards-grid" data-section-items="<?= htmlspecialchars($key) ?>">
+                        <?php foreach ($items as $item): ?>
+                            <?= renderCard($item) ?>
+                        <?php endforeach; ?>
+                    </div>
+                <?php endif; ?>
+            </section>
+        <?php endforeach; ?>
+
+        <footer class="panel-footer">
+            <div class="footer-content">
+                <p class="copyright">&copy; <?= date('Y') ?> <a href="https://git.masonliu.com/MasonLiu/SecHub" target="_blank" rel="noopener noreferrer">SecHub - 网络安全工具集</a></p>
+                <p class="copyright">Gaming Master Cybersecurity | MasonLiu</p>
+                <div class="beian-info">
+                    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="beian-link">蜀ICP备2026025173号</a>
+                    <span class="beian-divider">|</span>
+                    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=51162302000285" target="_blank" rel="noopener noreferrer" class="beian-link">
+                        <img src="/assets/imgs/beian.png" alt="公安备案" width="16" height="16" class="beian-icon"/>
+                        <span>川公网安备51162302000285号</span>
+                    </a>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        // HTML转义函数
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // 渲染卡片函数（用于搜索结果）
+        function renderCardJS(item) {
+            const name = item.name || '未命名';
+            const url = item.url || '#';
+            const description = item.description || '暂无简介';
+            
+            return `
+            <div class="card" onclick="window.open('${url}', '_blank')">
+                <div class="card-header">
+                    <h3 class="card-title">${escapeHtml(name)}</h3>
+                    <a href="${url}" target="_blank" class="card-link" onclick="event.stopPropagation()">${escapeHtml(url)}</a>
+                </div>
+                <p class="card-description">${escapeHtml(description)}</p>
+            </div>`;
+        }
+
+        // 全局搜索功能
+        const globalSearchInput = document.getElementById('global-search');
+        const searchResults = document.getElementById('search-results');
+        let searchTimeout;
+
+        globalSearchInput.addEventListener('input', function() {
+            clearTimeout(searchTimeout);
+            const keyword = this.value.trim();
+            
+            if (keyword.length === 0) {
+                searchResults.style.display = 'none';
+                showAllSections();
+                return;
+            }
+
+            searchTimeout = setTimeout(() => {
+                performGlobalSearch(keyword);
+            }, 300);
+        });
+
+        function performGlobalSearch(keyword) {
+            fetch(`search.php?action=global&keyword=${encodeURIComponent(keyword)}`)
+                .then(response => response.json())
+                .then(data => {
+                    displaySearchResults(data);
+                })
+                .catch(error => {
+                    console.error('搜索失败:', error);
+                });
+        }
+
+        function displaySearchResults(results) {
+            searchResults.innerHTML = '';
+            
+            if (Object.keys(results).length === 0) {
+                searchResults.innerHTML = '<div class="no-results">未找到相关结果</div>';
+                searchResults.style.display = 'block';
+                return;
+            }
+
+            Object.keys(results).forEach(tableName => {
+                const section = results[tableName];
+                const sectionDiv = document.createElement('div');
+                sectionDiv.className = 'search-result-section';
+                
+                const title = document.createElement('h3');
+                title.className = 'search-result-title';
+                title.textContent = section.section;
+                sectionDiv.appendChild(title);
+                
+                const cardsGrid = document.createElement('div');
+                cardsGrid.className = 'cards-grid';
+                
+                section.items.forEach(item => {
+                    const cardDiv = document.createElement('div');
+                    cardDiv.innerHTML = renderCardJS(item);
+                    cardsGrid.appendChild(cardDiv.firstElementChild);
+                });
+                
+                sectionDiv.appendChild(cardsGrid);
+                searchResults.appendChild(sectionDiv);
+            });
+            
+            searchResults.style.display = 'block';
+        }
+
+        function showAllSections() {
+            // 不需要做任何事，因为栏目一直显示
+        }
+
+        function hideAllSections() {
+            // 不需要隐藏栏目
+        }
+
+        // 下载JSON文件
+        function downloadJson(filename) {
+            const url = `assets/json/${filename}`;
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
+        // 单项搜索功能
+        document.querySelectorAll('.section-search').forEach(input => {
+            input.addEventListener('input', function() {
+                const section = this.dataset.section;
+                const keyword = this.value.trim();
+                const cardsGrid = document.querySelector(`[data-section-items="${section}"]`);
+                
+                if (!cardsGrid) return;
+                
+                const cards = cardsGrid.querySelectorAll('.card');
+                
+                cards.forEach(card => {
+                    const title = card.querySelector('.card-title').textContent.toLowerCase();
+                    const description = card.querySelector('.card-description').textContent.toLowerCase();
+                    const link = card.querySelector('.card-link').textContent.toLowerCase();
+                    
+                    if (keyword === '' || 
+                        title.includes(keyword.toLowerCase()) || 
+                        description.includes(keyword.toLowerCase()) ||
+                        link.includes(keyword.toLowerCase())) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+            });
+        });
+
+        // 点击其他地方关闭搜索结果
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.search-container')) {
+                searchResults.style.display = 'none';
+                if (globalSearchInput.value.trim() === '') {
+                    showAllSections();
+                }
+            }
+        });
+
+        // 黑夜模式切换功能
+        (function() {
+            const themeToggle = document.getElementById('theme-toggle');
+            const themeIcon = themeToggle.querySelector('.theme-icon');
+            const body = document.body;
+            
+            // 从localStorage读取主题设置
+            const currentTheme = localStorage.getItem('theme') || 'light';
+            
+            // 应用保存的主题
+            if (currentTheme === 'dark') {
+                body.classList.add('dark-mode');
+                themeIcon.textContent = '☀️';
+            }
+            
+            // 首次访问显示提示
+            if (!localStorage.getItem('themeHintShown')) {
+                setTimeout(() => {
+                    showThemeHint();
+                    localStorage.setItem('themeHintShown', 'true');
+                }, 1500);
+            }
+            
+            // 切换主题
+            themeToggle.addEventListener('click', function() {
+                body.classList.toggle('dark-mode');
+                
+                if (body.classList.contains('dark-mode')) {
+                    themeIcon.textContent = '☀️';
+                    localStorage.setItem('theme', 'dark');
+                } else {
+                    themeIcon.textContent = '🌙';
+                    localStorage.setItem('theme', 'light');
+                }
+            });
+            
+            // 显示提示函数
+            function showThemeHint() {
+                const tooltip = themeToggle.querySelector('.theme-tooltip');
+                tooltip.classList.add('show');
+                
+                // 3秒后隐藏提示
+                setTimeout(() => {
+                    tooltip.classList.remove('show');
+                }, 3000);
+            }
+        })();
+    </script>
+</body>
+</html>