/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3a86ff;
    text-decoration: none;
}

.menu {
    display: flex;
    align-items: center;
}

.menu ul {
    display: flex;
    list-style: none;
}

.menu ul li {
    margin-left: 30px;
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.menu ul li a:hover {
    color: #3a86ff;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(10px);
    z-index: 1000;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    margin-left: 0;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
}

.dropdown-toggle i {
    margin-left: 5px;
    font-size: 0.8rem;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    z-index: 1000;
}

.mobile-menu-overlay.active .mobile-menu {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-close {
    cursor: pointer;
    font-size: 1.5rem;
}

.mobile-menu-list {
    list-style: none;
    padding: 20px;
}

.mobile-menu-list li {
    margin-bottom: 15px;
}

.mobile-menu-list li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: block;
    padding: 10px 0;
}

.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

.mobile-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-menu {
    max-height: 500px;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #3a86ff 0%, #8338ec 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* Search Bar */
.search-container {
    max-width: 700px;
    margin: 0 auto;
}

.search-bar {
    display: flex;
    background-color: white;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#search-input {
    flex: 1;
    padding: 15px 30px;
    border: none;
    font-size: 1rem;
    outline: none;
}

.search-btn {
    padding: 0 30px;
    background-color: #3a86ff;
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
}

.search-btn:hover {
    background-color: #2a6fdb;
}

.search-btn i {
    margin-right: 8px;
}

/* Categories Section */
.categories {
    padding: 60px 0;
}

.categories h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2rem;
    color: #333;
}

.category {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.category h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #3a86ff;
}

.subcategories {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.subcategory-list {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 10px;
}

.subcategory-list a {
    text-decoration: none;
    background-color: #f0f0f0;
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.subcategory-list a:hover {
    background-color: #3a86ff;
    color: white;
}

.more-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.more-btn:hover {
    border-color: #3a86ff;
    color: #3a86ff;
}

.more-btn i {
    margin-left: 5px;
}

/* Category Header */
.category-header {
    background-color: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #f0f0f0;
}

.category-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #333;
}

.category-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
}

/* Filters Section */
.filters {
    background-color: #f8f9fa;
    padding: 20px 0;
    border-bottom: 1px solid #e9ecef;
}

.filter-container {
    display: flex;
    gap: 30px;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label {
    font-weight: 500;
    color: #333;
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
}

/* Tools List */
.tools-list {
    padding: 60px 0;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.tool-card {
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.tool-logo {
    margin-bottom: 20px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tool-name {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333;
}

.tool-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.stars {
    color: #ffc107;
    margin-bottom: 5px;
}

.stars i {
    margin: 0 2px;
}

.rating-text {
    font-size: 0.9rem;
    color: #666;
}

.tool-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.tool-link {
    display: inline-block;
    background-color: #3a86ff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.tool-link:hover {
    background-color: #2a6fdb;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.page-btn, .next-btn {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.page-btn:hover, .next-btn:hover {
    border-color: #3a86ff;
    color: #3a86ff;
}

.page-btn.active {
    background-color: #3a86ff;
    border-color: #3a86ff;
    color: white;
}

.next-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Tool Info Section */
.tool-info {
    background-color: white;
    padding: 60px 0;
    border-bottom: 1px solid #f0f0f0;
}

.tool-header {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.tool-logo-large {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.tool-logo-large img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tool-details {
    flex: 1;
}

.tool-details h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.tool-details .tool-rating {
    flex-direction: row;
    gap: 15px;
    margin-bottom: 20px;
}

#tool-short-description {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.8;
}

.tool-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.favorite {
    background-color: #f0f0f0;
    color: #333;
}

.favorite:hover {
    background-color: #e0e0e0;
}

.favorite.active {
    background-color: #ff4757;
    color: white;
}

.opensite {
    background-color: #3a86ff;
    color: white;
}

.opensite:hover {
    background-color: #2a6fdb;
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-buttons span {
    font-weight: 500;
    color: #666;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background-color: #3a86ff;
    color: white;
}

/* Tool Experience Section */
.tool-experience {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-color: #e9ecef;
}

.experience-header h2 {
    font-size: 1.5rem;
    color: #333;
}

.fullscreen-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fullscreen-btn:hover {
    border-color: #3a86ff;
    color: #3a86ff;
}

.iframe-container {
    position: relative;
    height: 600px;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Tool Content Tabs */
.tool-content {
    padding: 60px 0;
}

.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    overflow-x: auto;
    padding-bottom: 10px;
}

.tab-nav::-webkit-scrollbar {
    height: 4px;
}

.tab-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.tab-nav::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.tab-nav::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #3a86ff;
}

.tab-btn.active {
    color: #3a86ff;
    position: relative;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3a86ff;
}

.tab-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-pane h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

.tab-pane h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #444;
    margin-top: 25px;
}

.tab-pane ul, .tab-pane ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.tab-pane ul li, .tab-pane ol li {
    margin-bottom: 10px;
    color: #666;
    line-height: 1.6;
}

.tab-pane p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.8;
}

.use-case {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}

.use-case:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pricing-plan {
    display: inline-block;
    width: calc(33.333% - 20px);
    vertical-align: top;
    margin-right: 30px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

.pricing-plan:last-child {
    margin-right: 0;
}

.pricing-plan .price {
    font-size: 2rem;
    font-weight: 700;
    color: #3a86ff;
    margin-bottom: 20px;
}

.pricing-plan ul {
    text-align: left;
}

/* Favorite Tools Section */
.favorite-tools {
    padding: 60px 0;
}

.favorite-tools h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2rem;
    color: #333;
}

/* Privacy & Terms Pages */
.privacy-page, .terms-page {
    padding: 60px 0;
    background-color: white;
}

.privacy-page h1, .terms-page h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #333;
}

.privacy-page h2, .terms-page h2 {
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #444;
}

.privacy-page h3, .terms-page h3 {
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #555;
}

.privacy-page p, .terms-page p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #666;
}

.privacy-page ul, .terms-page ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.privacy-page ul li, .terms-page ul li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #666;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.footer-info p {
    color: #ccc;
    line-height: 1.6;
}

.footer-links h4, .footer-contact h4, .footer-social h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    text-decoration: none;
    color: #ccc;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: white;
}

.footer-contact p {
    color: #ccc;
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: #3a86ff;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #444;
    color: #ccc;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3a86ff;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #2a6fdb;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .pricing-plan {
        width: calc(50% - 20px);
    }
}

@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .menu {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .subcategories {
        flex-direction: column;
        gap: 15px;
    }
    
    .tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .tool-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 60px 0;
    }
    
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .search-bar {
        flex-direction: column;
        border-radius: 8px;
    }
    
    #search-input {
        border-radius: 4px 4px 0 0;
    }
    
    .search-btn {
        border-radius: 0 0 4px 4px;
        width: 100%;
        justify-content: center;
    }
    
    .categories {
        padding: 40px 0;
    }
    
    .tools-list {
        padding: 40px 0;
    }
    
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .filter-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .tool-info {
        padding: 40px 0;
    }
    
    .tool-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .iframe-container {
        height: 400px;
    }
    
    .tool-content {
        padding: 40px 0;
    }
    
    .pricing-plan {
        width: 100%;
        margin-right: 0;
    }
    
    footer {
        padding: 40px 0 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .categories h2 {
        font-size: 1.8rem;
    }
    
    .category h3 {
        font-size: 1.3rem;
    }
    
    .subcategory-list {
        flex-direction: column;
        align-items: center;
    }
    
    .subcategory-list a {
        width: 100%;
        text-align: center;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .tool-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .tab-nav {
        flex-direction: column;
        align-items: center;
    }
    
    .tab-btn {
        width: 100%;
        text-align: center;
    }
    
    .tab-content {
        padding: 20px;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}```

### 2. 主JavaScript文件

```javascript:d%3A%2Fdev%2Fcode%2Fujcms%2Fujcms-src-9.8.2%2Fsrc%2Fmain%2Fwebapp%2Ftemplates%2F16%2Fdefault%2F_files%2Fjs%2Fscript.js
// Mobile Menu Toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const mobileMenuClose = document.querySelector('.mobile-menu-close');
const mobileMenuOverlay = document.querySelector('.mobile-menu-overlay');
const mobileDropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');

if (mobileMenuBtn) {
    mobileMenuBtn.addEventListener('click', () => {
        mobileMenuOverlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    });
}

if (mobileMenuClose) {
    mobileMenuClose.addEventListener('click', () => {
        mobileMenuOverlay.classList.remove('active');
        document.body.style.overflow = '';
    });
}

if (mobileMenuOverlay) {
    mobileMenuOverlay.addEventListener('click', (e) => {
        if (e.target === mobileMenuOverlay) {
            mobileMenuOverlay.classList.remove('active');
            document.body.style.overflow = '';
        }
    });
}

if (mobileDropdownToggles.length > 0) {
    mobileDropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            const parent = toggle.closest('.mobile-dropdown');
            parent.classList.toggle('active');
        });
    });
}

// Back to Top Button
const backToTopBtn = document.getElementById('back-to-top');

if (backToTopBtn) {
    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.add('visible');
        } else {
            backToTopBtn.classList.remove('visible');
        }
    });

    backToTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

// Search Functionality
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');

if (searchInput && searchButton) {
    searchButton.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    function performSearch() {
        const searchTerm = searchInput.value.trim().toLowerCase();
        if (searchTerm) {
            alert(`Searching for: ${searchTerm}\nThis would normally filter the tools based on the search term.`);
            // In a real implementation, you would filter the tools based on the search term
        }
    }
}

// More Button Functionality for Subcategories
const moreButtons = document.querySelectorAll('.more-btn');

if (moreButtons.length > 0) {
    moreButtons.forEach(button => {
        button.addEventListener('click', () => {
            const subcategoryList = button.parentElement.querySelector('.subcategory-list');
            const isExpanded = subcategoryList.classList.contains('expanded');
            
            if (isExpanded) {
                subcategoryList.classList.remove('expanded');
                button.innerHTML = 'More <i class="fas fa-chevron-down"></i>';
            } else {
                subcategoryList.classList.add('expanded');
                button.innerHTML = 'Less <i class="fas fa-chevron-up"></i>';
            }
        });
    });
}

// Add this CSS dynamically for the expanded subcategories
const style = document.createElement('style');
style.textContent = `
.subcategory-list.expanded {
    max-height: none;
}
`;
document.head.appendChild(style);
```

### 3. 分类页面JavaScript文件

```javascript:d%3A%2Fdev%2Fcode%2Fujcms%2Fujcms-src-9.8.2%2Fsrc%2Fmain%2Fwebapp%2Ftemplates%2F16%2Fdefault%2F_files%2Fjs%2Fchannel.js
// Category Title and Description based on URL parameter
function setCategoryInfo() {
    const urlParams = new URLSearchParams(window.location.search);
    const subcategory = urlParams.get('subcategory');
    
    const categoryTitle = document.getElementById('category-title');
    const categoryDescription = document.getElementById('category-description');
    
    if (subcategory && categoryTitle && categoryDescription) {
        // Convert subcategory slug to human-readable format
        const readableCategory = subcategory.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
        
        categoryTitle.textContent = `${readableCategory} AI Tools`;
        categoryDescription.textContent = `Discover top ${readableCategory.toLowerCase()} AI tools based on popularity and trends from authoritative sources. Higher-ranked tools indicate greater popularity.`;
        
        // Update page title
        document.title = `${readableCategory} AI Tools - NavAI Hub`;
    }
}

// Filter and Sort Functionality
function setupFilters() {
    const priceFilter = document.getElementById('price-filter');
    const ratingFilter = document.getElementById('rating-filter');
    const sortFilter = document.getElementById('sort-filter');
    
    if (priceFilter) {
        priceFilter.addEventListener('change', applyFilters);
    }
    
    if (ratingFilter) {
        ratingFilter.addEventListener('change', applyFilters);
    }
    
    if (sortFilter) {
        sortFilter.addEventListener('change', applyFilters);
    }
}

function applyFilters() {
    const priceValue = document.getElementById('price-filter').value;
    const ratingValue = document.getElementById('rating-filter').value;
    const sortValue = document.getElementById('sort-filter').value;
    
    // In a real implementation, you would filter and sort the tools based on these values
    console.log(`Applying filters - Price: ${priceValue}, Rating: ${ratingValue}, Sort: ${sortValue}`);
    
    // For demonstration purposes, show an alert
    alert(`Filters applied:\n- Price: ${priceValue}\n- Rating: ${ratingValue}\n- Sort: ${sortValue}\n\nThis would normally filter and sort the tools based on your selections.`);
}

// Pagination Functionality
function setupPagination() {
    const pageButtons = document.querySelectorAll('.page-btn');
    const nextButton = document.querySelector('.next-btn');
    
    if (pageButtons.length > 0) {
        pageButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                pageButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                button.classList.add('active');
                
                // In a real implementation, you would load the corresponding page of tools
                console.log(`Loading page ${button.textContent}`);
            });
        });
    }
    
    if (nextButton) {
        nextButton.addEventListener('click', () => {
            // Find the current active page button
            const activeButton = document.querySelector('.page-btn.active');
            const activeIndex = Array.from(pageButtons).indexOf(activeButton);
            
            // If there's a next page button
            if (activeIndex < pageButtons.length - 1) {
                // Remove active class from current button
                activeButton.classList.remove('active');
                // Add active class to next button
                pageButtons[activeIndex + 1].classList.add('active');
                
                // In a real implementation, you would load the next page of tools
                console.log(`Loading page ${pageButtons[activeIndex + 1].textContent}`);
            }
        });
    }
}

// Initialize page when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
    setCategoryInfo();
    setupFilters();
    setupPagination();
});
```

### 4. 工具详情页JavaScript文件

```javascript:d%3A%2Fdev%2Fcode%2Fujcms%2Fujcms-src-9.8.2%2Fsrc%2Fmain%2Fwebapp%2Ftemplates%2F16%2Fdefault%2F_files%2Fjs%2Farticle.js
// Set tool information based on URL parameter
function setToolInfo() {
    const urlParams = new URLSearchParams(window.location.search);
    const toolId = urlParams.get('id');
    
    // In a real implementation, you would fetch tool data based on the ID
    // For now, we'll use static data
    const tools = {
        '1': {
            name: 'ChatGPT',
            description: 'A powerful AI chatbot that can generate human-like text and assist with various tasks.',
            website: 'https://openai.com/chatgpt'
        },
        '2': {
            name: 'DALL-E 2',
            description: 'An AI system that can create realistic images and art from a description in natural language.',
            website: 'https://openai.com/dall-e-2'
        },
        '3': {
            name: 'Midjourney',
            description: 'An AI program and service created and hosted by a San Francisco-based independent research lab.',
            website: 'https://midjourney.com'
        },
        '4': {
            name: 'GitHub Copilot',
            description: 'An AI pair programmer that suggests code as you type, helping you write code faster.',
            website: 'https://github.com/features/copilot'
        },
        '5': {
            name: 'Grammarly',
            description: 'An AI-powered writing assistant that helps with grammar, spelling, and style suggestions.',
            website: 'https://www.grammarly.com'
        }
    };
    
    const tool = tools[toolId] || tools['1']; // Default to ChatGPT if ID not found
    
    // Update tool information
    const toolTitle = document.getElementById('tool-title');
    const toolName = document.getElementById('tool-name');
    const toolShortDescription = document.getElementById('tool-short-description');
    const openSiteButton = document.querySelector('.opensite');
    const iframe = document.querySelector('.iframe-container iframe');
    
    if (toolTitle) toolTitle.textContent = `${tool.name} - AI Tool | NavAI Hub`;
    if (toolName) toolName.textContent = tool.name;
    if (toolShortDescription) toolShortDescription.textContent = tool.description;
    if (openSiteButton) openSiteButton.href = tool.website;
    if (iframe) iframe.src = tool.website;
    
    // Update page title
    document.title = `${tool.name} - AI Tool | NavAI Hub`;
}

// Tab Functionality
function setupTabs() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    if (tabButtons.length > 0 && tabPanes.length > 0) {
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');
                
                // Remove active class from all buttons and panes
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabPanes.forEach(pane => pane.classList.remove('active'));
                
                // Add active class to clicked button and corresponding pane
                button.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });
    }
}

// Favorite Button Functionality
function setupFavoriteButton() {
    const favoriteButton = document.getElementById('favorite-btn');
    
    if (favoriteButton) {
        // Check if tool is already favorited
        const urlParams = new URLSearchParams(window.location.search);
        const toolId = urlParams.get('id') || '1';
        const favorites = JSON.parse(localStorage.getItem('navaihub-favorites')) || [];
        
        if (favorites.includes(toolId)) {
            favoriteButton.classList.add('active');
            favoriteButton.innerHTML = '<i class="fas fa-heart"></i> Added to Favorites';
        }
        
        favoriteButton.addEventListener('click', () => {
            const isFavorited = favoriteButton.classList.contains('active');
            
            if (isFavorited) {
                // Remove from favorites
                const index = favorites.indexOf(toolId);
                if (index > -1) {
                    favorites.splice(index, 1);
                }
                favoriteButton.classList.remove('active');
                favoriteButton.innerHTML = '<i class="far fa-heart"></i> Add to Favorites';
                alert('Tool removed from favorites!');
            } else {
                // Add to favorites
                favorites.push(toolId);
                favoriteButton.classList.add('active');
                favoriteButton.innerHTML = '<i class="fas fa-heart"></i> Added to Favorites';
                alert('Tool added to favorites!');
            }
            
            // Save to localStorage
            localStorage.setItem('navaihub-favorites', JSON.stringify(favorites));
        });
    }
}

// Fullscreen Functionality for iFrame
function setupFullscreenButton() {
    const fullscreenButton = document.getElementById('fullscreen-btn');
    const iframeContainer = document.querySelector('.iframe-container');
    
    if (fullscreenButton && iframeContainer) {
        fullscreenButton.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                if (iframeContainer.requestFullscreen) {
                    iframeContainer.requestFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-compress"></i> Exit Fullscreen';
                } else if (iframeContainer.webkitRequestFullscreen) {
                    iframeContainer.webkitRequestFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-compress"></i> Exit Fullscreen';
                } else if (iframeContainer.msRequestFullscreen) {
                    iframeContainer.msRequestFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-compress"></i> Exit Fullscreen';
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                    fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
                }
            }
        });
        
        // Listen for fullscreen change events
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
            }
        });
        
        document.addEventListener('webkitfullscreenchange', () => {
            if (!document.webkitFullscreenElement) {
                fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
            }
        });
        
        document.addEventListener('msfullscreenchange', () => {
            if (!document.msFullscreenElement) {
                fullscreenButton.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
            }
        });
    }
}

// Initialize page when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
    setToolInfo();
    setupTabs();
    setupFavoriteButton();
    setupFullscreenButton();
});
```