diff --git a/assets/css/style_simple.css b/assets/css/style_simple.css
new file mode 100644
index 0000000..c625f9d
--- /dev/null
+++ b/assets/css/style_simple.css
@@ -0,0 +1,553 @@
+* {
+    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;
+}
+
+/* 视图切换下拉菜单 */
+.view-menu {
+    position: fixed;
+    top: 60px;
+    right: 15px;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 8px 0;
+    min-width: 150px;
+    z-index: 101;
+    display: none;
+}
+
+.view-menu.show {
+    display: block;
+}
+
+.view-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+    border: none;
+    background: none;
+    width: 100%;
+    font-size: 0.9em;
+    text-align: left;
+}
+
+.view-menu-item:hover {
+    background-color: var(--hover-bg);
+}
+
+.view-menu-item.active {
+    background-color: var(--accent-color);
+    color: white;
+}
+
+.view-menu-icon {
+    margin-right: 10px;
+    font-size: 1.1em;
+}
+
+/* 栏目区域 */
+.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-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.section-title {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.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);
+}
+
+.download-btn {
+    padding: 5px 12px;
+    font-size: 0.8em;
+    border: 1px solid var(--accent-color);
+    border-radius: 4px;
+    background: var(--bg-secondary);
+    color: var(--accent-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.download-btn:hover {
+    background: var(--accent-color);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
+}
+
+body.dark-mode .download-btn {
+    background: var(--bg-secondary);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
+body.dark-mode .download-btn:hover {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* 紧凑网格布局 */
+.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-title-wrapper {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .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);
+}
\ No newline at end of file
diff --git a/assets/css/style_table.css b/assets/css/style_table.css
new file mode 100644
index 0000000..295f2fa
--- /dev/null
+++ b/assets/css/style_table.css
@@ -0,0 +1,525 @@
+* {
+    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: 100%;
+    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-menu {
+    position: fixed;
+    top: 60px;
+    right: 15px;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 8px 0;
+    min-width: 150px;
+    z-index: 101;
+    display: none;
+}
+
+.view-menu.show {
+    display: block;
+}
+
+.view-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+    border: none;
+    background: none;
+    width: 100%;
+    font-size: 0.9em;
+    text-align: left;
+}
+
+.view-menu-item:hover {
+    background-color: var(--hover-bg);
+}
+
+.view-menu-item.active {
+    background-color: var(--accent-color);
+    color: white;
+}
+
+.view-menu-icon {
+    margin-right: 10px;
+    font-size: 1.1em;
+}
+
+/* 栏目区域 */
+.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-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.section-title {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.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);
+}
+
+.download-btn {
+    padding: 5px 12px;
+    font-size: 0.8em;
+    border: 1px solid var(--accent-color);
+    border-radius: 4px;
+    background: var(--bg-secondary);
+    color: var(--accent-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.download-btn:hover {
+    background: var(--accent-color);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
+}
+
+body.dark-mode .download-btn {
+    background: var(--bg-secondary);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
+body.dark-mode .download-btn:hover {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* 表格容器 - 支持横向滚动 */
+.table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* 高密度表格 */
+.tool-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85em;
+}
+
+.tool-table thead {
+    background-color: var(--bg-primary);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.tool-table th {
+    padding: 8px 12px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-primary);
+    border-bottom: 2px solid var(--border-color);
+    white-space: nowrap;
+}
+
+.tool-table tbody tr {
+    border-bottom: 1px solid var(--border-color);
+    transition: background-color 0.2s ease;
+}
+
+.tool-table tbody tr:hover {
+    background-color: var(--hover-bg);
+}
+
+.tool-table td {
+    padding: 6px 12px;
+    vertical-align: middle;
+}
+
+/* 工具名称列 */
+.col-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    min-width: 120px;
+    white-space: nowrap;
+}
+
+/* 工具链接列 */
+.col-url {
+    min-width: 200px;
+    max-width: 250px;
+}
+
+.col-url a {
+    color: var(--accent-color);
+    text-decoration: none;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
+}
+
+.col-url a:hover {
+    text-decoration: underline;
+}
+
+/* 工具描述列 - 可横向滚动 */
+.col-description {
+    min-width: 300px;
+    max-width: 600px;
+}
+
+.description-cell {
+    overflow-x: auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--text-secondary);
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+}
+
+.description-cell::-webkit-scrollbar {
+    height: 4px;
+}
+
+.description-cell::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+}
+
+.description-cell::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 2px;
+}
+
+/* 空状态 */
+.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: 768px) {
+    .container {
+        padding: 10px;
+    }
+
+    h1 {
+        font-size: 1.5em;
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    .section-title-wrapper {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .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;
+    }
+
+    .tool-table {
+        font-size: 0.8em;
+    }
+
+    .tool-table th,
+    .tool-table td {
+        padding: 5px 8px;
+    }
+}
+
+/* 滚动条样式 */
+::-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);
+}
\ No newline at end of file
diff --git a/assets/json/blue.json b/assets/json/blue.json
new file mode 100644
index 0000000..67bbac8
--- /dev/null
+++ b/assets/json/blue.json
@@ -0,0 +1,20 @@
+[
+    {
+        "section": "蓝队工具"
+    },
+    {
+        "name": "工具名称",
+        "url": "工具链接",
+        "description": "工具描述"
+    },
+    {
+        "name": "工具名称",
+        "url": "工具链接",
+        "description": "工具描述"
+    },
+    {
+        "name": "工具名称",
+        "url": "工具链接",
+        "description": "工具描述"
+    }
+]
\ No newline at end of file
diff --git a/index.php b/index.php
index 9ad7615..3a6f5b5 100644
--- a/index.php
+++ b/index.php
@@ -41,516 +41,7 @@ try {
     <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>
-    <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;
-        }
-
-        /* 视图切换下拉菜单 */
-        .view-menu {
-            position: fixed;
-            top: 60px;
-            right: 15px;
-            background-color: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            padding: 8px 0;
-            min-width: 150px;
-            z-index: 101;
-            display: none;
-        }
-
-        .view-menu.show {
-            display: block;
-        }
-
-        .view-menu-item {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: background-color 0.2s ease;
-            cursor: pointer;
-            border: none;
-            background: none;
-            width: 100%;
-            font-size: 0.9em;
-            text-align: left;
-        }
-
-        .view-menu-item:hover {
-            background-color: var(--hover-bg);
-        }
-
-        .view-menu-item.active {
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .view-menu-icon {
-            margin-right: 10px;
-            font-size: 1.1em;
-        }
-
-        /* 栏目区域 */
-        .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>
+    <link rel="stylesheet" href="assets/css/style_simple.css">
 </head>
 <body>
     <div class="container">
@@ -593,14 +84,23 @@ try {
         <?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">
-                    <h2 class="section-title">
-                        <?= htmlspecialchars($config['title']) ?>
-                    </h2>
+                    <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" 
diff --git a/table.php b/table.php
index aa63840..d9cc897 100644
--- a/table.php
+++ b/table.php
@@ -41,488 +41,7 @@ try {
     <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>
-    <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: 100%;
-            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-menu {
-            position: fixed;
-            top: 60px;
-            right: 15px;
-            background-color: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            padding: 8px 0;
-            min-width: 150px;
-            z-index: 101;
-            display: none;
-        }
-
-        .view-menu.show {
-            display: block;
-        }
-
-        .view-menu-item {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: background-color 0.2s ease;
-            cursor: pointer;
-            border: none;
-            background: none;
-            width: 100%;
-            font-size: 0.9em;
-            text-align: left;
-        }
-
-        .view-menu-item:hover {
-            background-color: var(--hover-bg);
-        }
-
-        .view-menu-item.active {
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .view-menu-icon {
-            margin-right: 10px;
-            font-size: 1.1em;
-        }
-
-        /* 栏目区域 */
-        .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);
-        }
-
-        /* 表格容器 - 支持横向滚动 */
-        .table-container {
-            overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        /* 高密度表格 */
-        .tool-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 0.85em;
-        }
-
-        .tool-table thead {
-            background-color: var(--bg-primary);
-            position: sticky;
-            top: 0;
-            z-index: 10;
-        }
-
-        .tool-table th {
-            padding: 8px 12px;
-            text-align: left;
-            font-weight: 600;
-            color: var(--text-primary);
-            border-bottom: 2px solid var(--border-color);
-            white-space: nowrap;
-        }
-
-        .tool-table tbody tr {
-            border-bottom: 1px solid var(--border-color);
-            transition: background-color 0.2s ease;
-        }
-
-        .tool-table tbody tr:hover {
-            background-color: var(--hover-bg);
-        }
-
-        .tool-table td {
-            padding: 6px 12px;
-            vertical-align: middle;
-        }
-
-        /* 工具名称列 */
-        .col-name {
-            font-weight: 600;
-            color: var(--text-primary);
-            min-width: 120px;
-            white-space: nowrap;
-        }
-
-        /* 工具链接列 */
-        .col-url {
-            min-width: 200px;
-            max-width: 250px;
-        }
-
-        .col-url a {
-            color: var(--accent-color);
-            text-decoration: none;
-            display: inline-block;
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            direction: rtl;
-            text-align: left;
-        }
-
-        .col-url a:hover {
-            text-decoration: underline;
-        }
-
-        /* 工具描述列 - 可横向滚动 */
-        .col-description {
-            min-width: 300px;
-            max-width: 600px;
-        }
-
-        .description-cell {
-            overflow-x: auto;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            color: var(--text-secondary);
-            -webkit-overflow-scrolling: touch;
-            scrollbar-width: thin;
-        }
-
-        .description-cell::-webkit-scrollbar {
-            height: 4px;
-        }
-
-        .description-cell::-webkit-scrollbar-track {
-            background: var(--bg-primary);
-        }
-
-        .description-cell::-webkit-scrollbar-thumb {
-            background: var(--border-color);
-            border-radius: 2px;
-        }
-
-        /* 空状态 */
-        .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: 768px) {
-            .container {
-                padding: 10px;
-            }
-
-            h1 {
-                font-size: 1.5em;
-            }
-
-            .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;
-            }
-
-            .tool-table {
-                font-size: 0.8em;
-            }
-
-            .tool-table th,
-            .tool-table td {
-                padding: 5px 8px;
-            }
-        }
-
-        /* 滚动条样式 */
-        ::-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>
+    <link rel="stylesheet" href="assets/css/style_table.css">
 </head>
 <body>
     <div class="container">
@@ -565,13 +84,23 @@ try {
         <?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">
-                    <h2 class="section-title">
-                        <?= htmlspecialchars($config['title']) ?>
-                    </h2>
+                    <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"