feat(webpanel): display core version

core/scripts/webpanel/assets/js/base.js

@@ -30,109 +30,4 @@ $(function () {
         darkModeIcon.removeClass("fa-moon fa-sun")
             .addClass(enabled ? "fa-sun" : "fa-moon");
     }
-
-    const versionUrl = $('body').data('version-url');
-    $.ajax({
-        url: versionUrl,
-        type: 'GET',
-        success: function (response) {
-             $('#panel-version').text(`Version: ${response.current_version || 'N/A'}`);
-        },
-        error: function (error) {
-            console.error("Error fetching version:", error);
-            $('#panel-version').text('Version: Error');
-        }
-    });
-
-    function shouldCheckForUpdates() {
-        const lastCheck = localStorage.getItem('lastUpdateCheck');
-        const updateDismissed = localStorage.getItem('updateDismissed');
-        const now = Date.now();
-        const checkInterval = 24 * 60 * 60 * 1000;
-        
-        if (!lastCheck) return true;
-        if (updateDismissed && now - parseInt(updateDismissed) < 2 * 60 * 60 * 1000) return false;
-        
-        return now - parseInt(lastCheck) > checkInterval;
-    }
-
-    function showUpdateBar(version, changelog) {
-        $('#updateMessage').text(`Version ${version} is now available`);
-        
-        const converter = new showdown.Converter();
-        const htmlChangelog = changelog ? converter.makeHtml(changelog) : '<p>No changelog available.</p>';
-        $('#changelogText').html(htmlChangelog);
-
-        $('#updateBar').slideDown(300);
-        
-        $('#viewRelease').off('click').on('click', function(e) {
-            e.preventDefault();
-            window.open('https://github.com/ReturnFI/Blitz/releases/latest', '_blank');
-        });
-        
-        $('#showChangelog').off('click').on('click', function() {
-            const $content = $('#changelogContent');
-            const $icon = $(this).find('i');
-            
-            if ($content.is(':visible')) {
-                $content.slideUp(250);
-                $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
-                $(this).css('opacity', '0.8');
-            } else {
-                $content.slideDown(250);
-                $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
-                $(this).css('opacity', '1');
-            }
-        });
-        
-        $('.dropdown-toggle').dropdown();
-        
-        $('#remindLater').off('click').on('click', function(e) {
-            e.preventDefault();
-            $('#updateBar').slideUp(350);
-        });
-        
-        $('#skipVersion').off('click').on('click', function(e) {
-            e.preventDefault();
-            localStorage.setItem('dismissedVersion', version);
-            localStorage.setItem('updateDismissed', Date.now().toString());
-            $('#updateBar').slideUp(350);
-        });
-        
-        $('#closeUpdateBar').off('click').on('click', function() {
-            $('#updateBar').slideUp(350);
-        });
-    }
-
-    function checkForUpdates() {
-        if (!shouldCheckForUpdates()) return;
-
-        const checkVersionUrl = $('body').data('check-version-url');
-        $.ajax({
-            url: checkVersionUrl,
-            type: 'GET',
-            timeout: 10000,
-            success: function (response) {
-                localStorage.setItem('lastUpdateCheck', Date.now().toString());
-                
-                if (response.is_latest) {
-                    localStorage.removeItem('updateDismissed');
-                    return;
-                }
-
-                const dismissedVersion = localStorage.getItem('dismissedVersion');
-                if (dismissedVersion === response.latest_version) return;
-
-                showUpdateBar(response.latest_version, response.changelog);
-            },
-            error: function (xhr, status, error) {
-                if (status !== 'timeout') {
-                    console.warn("Update check failed:", error);
-                }
-                localStorage.setItem('lastUpdateCheck', Date.now().toString());
-            }
-        });
-    }
-
-    setTimeout(checkForUpdates, 2000);
 });

core/scripts/webpanel/assets/js/index.js

@@ -82,45 +82,136 @@ document.addEventListener('DOMContentLoaded', function () {
 
     const restartBtn = document.getElementById('restart-hysteria2-btn');
     const restartUrl = document.querySelector('.content').dataset.restartHysteriaUrl;
-
     restartBtn.addEventListener('click', function(e) {
         e.preventDefault();
         
         restartBtn.innerHTML = 'Restarting... <i class="fas fa-sync-alt fa-spin ml-1"></i>';
         restartBtn.style.pointerEvents = 'none';
 
-        fetch(restartUrl, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            }
-        })
-        .then(response => {
-            if (!response.ok) {
-                return response.json().then(err => { throw new Error(err.detail || 'Unknown error'); });
-            }
-            return response.json();
-        })
-        .then(data => {
-            Swal.fire({
-                icon: 'success',
-                title: 'Success',
-                text: data.detail,
-                timer: 2000,
-                showConfirmButton: false
+        fetch(restartUrl, { method: 'POST' })
+            .then(response => {
+                if (!response.ok) return response.json().then(err => { throw new Error(err.detail || 'Unknown error'); });
+                return response.json();
+            })
+            .then(data => {
+                Swal.fire({ icon: 'success', title: 'Success', text: data.detail, timer: 2000, showConfirmButton: false });
+                setTimeout(updateServiceStatuses, 1000);
+            })
+            .catch(error => {
+                Swal.fire({ icon: 'error', title: 'Error', text: `Failed to restart Hysteria2: ${error.message}` });
+            })
+            .finally(() => {
+                restartBtn.innerHTML = 'Restart Service <i class="fas fa-sync-alt ml-1"></i>';
+                restartBtn.style.pointerEvents = 'auto';
             });
-            setTimeout(updateServiceStatuses, 1000);
-        })
-        .catch(error => {
-            Swal.fire({
-                icon: 'error',
-                title: 'Error',
-                text: `Failed to restart Hysteria2: ${error.message}`
-            });
-        })
-        .finally(() => {
-            restartBtn.innerHTML = 'Restart Service <i class="fas fa-sync-alt ml-1"></i>';
-            restartBtn.style.pointerEvents = 'auto';
-        });
     });
+
+    const versionUrl = $('.content').data('version-url');
+    $.ajax({
+        url: versionUrl,
+        type: 'GET',
+        success: function (response) {
+            $('#panel-version-display').text(response.current_version || 'N/A');
+            if (response.core_version) {
+                $('#core-version-display').text(response.core_version);
+                $('#core-version-row').show();
+            }
+        },
+        error: function (error) {
+            console.error("Error fetching version:", error);
+            $('#panel-version-display').text('Error');
+        }
+    });
+
+    function shouldCheckForUpdates() {
+        const lastCheck = localStorage.getItem('lastUpdateCheck');
+        const updateDismissed = localStorage.getItem('updateDismissed');
+        const now = Date.now();
+        const checkInterval = 24 * 60 * 60 * 1000;
+        
+        if (!lastCheck) return true;
+        if (updateDismissed && now - parseInt(updateDismissed) < 2 * 60 * 60 * 1000) return false;
+        
+        return now - parseInt(lastCheck) > checkInterval;
+    }
+
+    function showUpdateBar(version, changelog) {
+        $('#updateMessage').text(`Version ${version} is now available`);
+        
+        const converter = new showdown.Converter();
+        const htmlChangelog = changelog ? converter.makeHtml(changelog) : '<p>No changelog available.</p>';
+        $('#changelogText').html(htmlChangelog);
+
+        $('#updateBar').slideDown(300);
+        
+        $('#viewRelease').off('click').on('click', function(e) {
+            e.preventDefault();
+            window.open('https://github.com/ReturnFI/Blitz/releases/latest', '_blank');
+        });
+        
+        $('#showChangelog').off('click').on('click', function() {
+            const $content = $('#changelogContent');
+            const $icon = $(this).find('i');
+            
+            if ($content.is(':visible')) {
+                $content.slideUp(250);
+                $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
+                $(this).css('opacity', '0.8');
+            } else {
+                $content.slideDown(250);
+                $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
+                $(this).css('opacity', '1');
+            }
+        });
+        
+        $('.dropdown-toggle').dropdown();
+        
+        $('#remindLater').off('click').on('click', function(e) {
+            e.preventDefault();
+            $('#updateBar').slideUp(350);
+        });
+        
+        $('#skipVersion').off('click').on('click', function(e) {
+            e.preventDefault();
+            localStorage.setItem('dismissedVersion', version);
+            localStorage.setItem('updateDismissed', Date.now().toString());
+            $('#updateBar').slideUp(350);
+        });
+        
+        $('#closeUpdateBar').off('click').on('click', function() {
+            $('#updateBar').slideUp(350);
+        });
+    }
+
+    function checkForUpdates() {
+        if (!shouldCheckForUpdates()) return;
+
+        const checkVersionUrl = $('.content').data('check-version-url');
+        $.ajax({
+            url: checkVersionUrl,
+            type: 'GET',
+            timeout: 10000,
+            success: function (response) {
+                localStorage.setItem('lastUpdateCheck', Date.now().toString());
+                
+                if (response.is_latest) {
+                    localStorage.removeItem('updateDismissed');
+                    return;
+                }
+
+                const dismissedVersion = localStorage.getItem('dismissedVersion');
+                if (dismissedVersion === response.latest_version) return;
+
+                showUpdateBar(response.latest_version, response.changelog);
+            },
+            error: function (xhr, status, error) {
+                if (status !== 'timeout') {
+                    console.warn("Update check failed:", error);
+                }
+                localStorage.setItem('lastUpdateCheck', Date.now().toString());
+            }
+        });
+    }
+
+    setTimeout(checkForUpdates, 2000);
 });

core/scripts/webpanel/templates/base.html

@@ -23,9 +23,7 @@
     {% block stylesheets %}{% endblock %}
 </head>
 
-<body class="hold-transition sidebar-mini sidebar-collapse" 
-      data-version-url="{{ url_for('get_version_info') }}" 
-      data-check-version-url="{{ url_for('check_version_info') }}">
+<body class="hold-transition sidebar-mini sidebar-collapse">
     <div class="wrapper">
         
         <!-- Update Notification Bar -->
@@ -188,16 +186,13 @@
 
         <!-- Footer -->
         <footer class="main-footer">
-            <div class="d-flex align-items-center">
-                <a href="https://github.com/ReturnFI/Blitz" target="_blank" rel="noopener noreferrer" class="text-decoration-none mr-3">
-                    <i class="fab fa-github"></i> GitHub
-                </a>
-                <a href="https://t.me/hysteria2_panel" target="_blank" rel="noopener noreferrer" class="text-decoration-none mr-3">
-                    <i class="fab fa-telegram-plane"></i> Telegram
-                </a>
-                <div class="ml-auto">
-                    <a href="https://github.com/ReturnFI/Blitz/releases" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
-                        <i class="fas fa-code-branch"></i> <span id="panel-version">Loading version...</span>
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
+                <div class="mb-2 mb-md-0">
+                    <a href="https://github.com/ReturnFI/Blitz" target="_blank" rel="noopener noreferrer" class="text-decoration-none mr-3">
+                        <i class="fab fa-github"></i> GitHub
+                    </a>
+                    <a href="https://t.me/hysteria2_panel" target="_blank" rel="noopener noreferrer" class="text-decoration-none">
+                        <i class="fab fa-telegram-plane"></i> Telegram
                     </a>
                 </div>
             </div>
@@ -239,7 +234,7 @@
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
     <!-- ShowdownJS for Markdown -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
-    <!-- Custom JS -->
+    <!-- Base JS -->
     <script src="{{ url_for('assets', path='js/base.js') }}"></script>
     
     {% block javascripts %}{% endblock %}

core/scripts/webpanel/templates/index.html

@@ -16,10 +16,12 @@
 <section class="content" 
          data-server-status-url="{{ url_for('server_status_api') }}" 
          data-services-status-url="{{ url_for('server_services_status_api') }}"
-         data-restart-hysteria-url="{{ url_for('restart_service') }}">
+         data-restart-hysteria-url="{{ url_for('restart_service') }}"
+         data-version-url="{{ url_for('get_version_info') }}" 
+         data-check-version-url="{{ url_for('check_version_info') }}">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-md-3 col-sm-6 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-info"><i class="fas fa-microchip"></i></span>
                     <div class="info-box-content">
@@ -28,7 +30,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3 col-sm-6 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-warning"><i class="fas fa-memory"></i></span>
                     <div class="info-box-content">
@@ -37,7 +39,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3 col-sm-6 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-success"><i class="fas fa-users"></i></span>
                     <div class="info-box-content">
@@ -46,7 +48,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3 col-sm-6 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-secondary"><i class="fas fa-clock"></i></span>
                     <div class="info-box-content">
@@ -57,23 +59,23 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-4 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-primary"><i class="fas fa-exchange-alt"></i></span>
                     <div class="info-box-content">
                         <span class="info-box-text">Network Speed</span>
                         <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
-                            <span class="d-block" id="download-speed">🔽 Download: --</span>
-                            <span class="d-block" id="upload-speed">🔼 Upload: --</span>
+                            <span class="d-block" id="download-speed">🔽 --</span>
+                            <span class="d-block" id="upload-speed">🔼 --</span>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm">
                     <span class="info-box-icon bg-dark"><i class="fas fa-project-diagram"></i></span>
                     <div class="info-box-content">
-                        <span class="info-box-text">Active Connections</span>
+                        <span class="info-box-text">Connections</span>
                         <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
                             <span class="d-block" id="tcp-connections">TCP: --</span>
                             <span class="d-block" id="udp-connections">UDP: --</span>
@@ -81,7 +83,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4 col-12">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="info-box shadow-sm" id="ip-info-box">
                     <span class="info-box-icon bg-purple"><i class="fas fa-network-wired"></i></span>
                     <div class="info-box-content">
@@ -95,6 +97,22 @@
                     </div>
                 </div>
             </div>
+            <div class="col-lg-3 col-md-6 col-12">
+                <div class="info-box shadow-sm">
+                    <span class="info-box-icon bg-indigo"><i class="fas fa-info-circle"></i></span>
+                    <div class="info-box-content">
+                        <span class="info-box-text">Version Info</span>
+                        <div style="font-size: 16px; line-height: 1.3; font-weight: bold;">
+                            <a href="https://github.com/ReturnFI/Blitz/releases" target="_blank" rel="noopener noreferrer" class="text-reset d-block">
+                                Panel: <strong id="panel-version-display">...</strong>
+                            </a>
+                            <a id="core-version-row" href="https://github.com/apernet/hysteria/releases" target="_blank" rel="noopener noreferrer" class="text-reset d-block" style="display: none;">
+                                Core: <strong id="core-version-display">...</strong>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="row">