From 3c7cdf5db88bfe64bd801f7150e8b78ffea9f572 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sun, 5 Oct 2025 20:58:14 +0800
Subject: [PATCH] feat(header): enhance navigation and search functionality
 with context-aware behavior

---
 static/css/components/header.css |  3 +-
 templates/base.html              |  2 ++
 templates/components/header.html | 59 +++++++++++++-------------------
 3 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/static/css/components/header.css b/static/css/components/header.css
index 28b1feb1..d439663b 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -73,7 +73,6 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  transition: all 0.2s ease;
   font-size: 0.9rem;
 }
 
@@ -273,4 +272,4 @@
   .header-search {
     flex: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/templates/base.html b/templates/base.html
index 1e7bca43..b3beeff2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,6 +14,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/loras_static/images/favicon-16x16.png">
     <link rel="manifest" href="/loras_static/images/site.webmanifest">
 
+    <link rel="preload" as="font" type="font/woff2" href="/loras_static/vendor/font-awesome/webfonts/fa-solid-900.woff2" crossorigin>
+
     <!-- 添加性能监控 -->
     <script>
         performance.mark('page-start');
diff --git a/templates/components/header.html b/templates/components/header.html
index 90cd26b6..ae739982 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -6,33 +6,48 @@
         <span class="app-title">{{ t('header.appTitle') }}</span>
       </a>
     </div>
+    {% set current_path = request.path %}
+    {% if current_path.startswith('/loras/recipes') %}
+      {% set current_page = 'recipes' %}
+    {% elif current_path.startswith('/checkpoints') %}
+      {% set current_page = 'checkpoints' %}
+    {% elif current_path.startswith('/embeddings') %}
+      {% set current_page = 'embeddings' %}
+    {% elif current_path.startswith('/statistics') %}
+      {% set current_page = 'statistics' %}
+    {% else %}
+      {% set current_page = 'loras' %}
+    {% endif %}
+    {% set search_disabled = current_page == 'statistics' %}
+    {% set search_placeholder_key = 'header.search.notAvailable' if search_disabled else 'header.search.placeholders.' ~ current_page %}
+    {% set header_search_class = 'header-search disabled' if search_disabled else 'header-search' %}
     <nav class="main-nav">
-      <a href="/loras" class="nav-item" id="lorasNavItem">
+      <a href="/loras" class="nav-item{% if current_path == '/loras' %} active{% endif %}" id="lorasNavItem">
         <i class="fas fa-layer-group"></i> <span>{{ t('header.navigation.loras') }}</span>
       </a>
-      <a href="/loras/recipes" class="nav-item" id="recipesNavItem">
+      <a href="/loras/recipes" class="nav-item{% if current_path.startswith('/loras/recipes') %} active{% endif %}" id="recipesNavItem">
         <i class="fas fa-book-open"></i> <span>{{ t('header.navigation.recipes') }}</span>
       </a>
-      <a href="/checkpoints" class="nav-item" id="checkpointsNavItem">
+      <a href="/checkpoints" class="nav-item{% if current_path.startswith('/checkpoints') %} active{% endif %}" id="checkpointsNavItem">
         <i class="fas fa-check-circle"></i> <span>{{ t('header.navigation.checkpoints') }}</span>
       </a>
-      <a href="/embeddings" class="nav-item" id="embeddingsNavItem">
+      <a href="/embeddings" class="nav-item{% if current_path.startswith('/embeddings') %} active{% endif %}" id="embeddingsNavItem">
         <i class="fas fa-code"></i> <span>{{ t('header.navigation.embeddings') }}</span>
       </a>
-      <a href="/statistics" class="nav-item" id="statisticsNavItem">
+      <a href="/statistics" class="nav-item{% if current_path.startswith('/statistics') %} active{% endif %}" id="statisticsNavItem">
         <i class="fas fa-chart-bar"></i> <span>{{ t('header.navigation.statistics') }}</span>
       </a>
     </nav>
     
     <!-- Context-aware search container -->
-    <div class="header-search" id="headerSearch">
+    <div class="{{ header_search_class }}" id="headerSearch">
       <div class="search-container">
-        <input type="text" id="searchInput" placeholder="{{ t('header.search.placeholder') }}" />
+        <input type="text" id="searchInput" placeholder="{{ t(search_placeholder_key) }}"{% if search_disabled %} disabled{% endif %} />
         <i class="fas fa-search search-icon"></i>
-        <button class="search-options-toggle" id="searchOptionsToggle" title="{{ t('header.search.options') }}">
+        <button class="search-options-toggle" id="searchOptionsToggle" title="{{ t('header.search.options') }}"{% if search_disabled %} disabled aria-disabled="true"{% endif %}>
           <i class="fas fa-sliders-h"></i>
         </button>
-        <button class="search-filter-toggle" id="filterButton" title="{{ t('header.filter.title') }}">
+        <button class="search-filter-toggle" id="filterButton" title="{{ t('header.filter.title') }}"{% if search_disabled %} disabled aria-disabled="true"{% endif %}>
           <i class="fas fa-filter"></i>
           <span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
         </button>
@@ -131,29 +146,3 @@
   </div>
 </div>
 
-<!-- Header JavaScript will be handled by the HeaderManager in Header.js -->
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Get the current path from the URL
-    const currentPath = window.location.pathname;
-    
-    // Update active nav item (i18n is handled by the HeaderManager)
-    const lorasNavItem = document.getElementById('lorasNavItem');
-    const recipesNavItem = document.getElementById('recipesNavItem');
-    const checkpointsNavItem = document.getElementById('checkpointsNavItem');
-    const embeddingsNavItem = document.getElementById('embeddingsNavItem');
-    const statisticsNavItem = document.getElementById('statisticsNavItem');
-    
-    if (currentPath === '/loras') {
-      lorasNavItem.classList.add('active');
-    } else if (currentPath === '/loras/recipes') {
-      recipesNavItem.classList.add('active');
-    } else if (currentPath === '/checkpoints') {
-      checkpointsNavItem.classList.add('active');
-    } else if (currentPath === '/embeddings') {
-      embeddingsNavItem.classList.add('active');
-    } else if (currentPath === '/statistics') {
-      statisticsNavItem.classList.add('active');
-    }
-  });
-</script>
\ No newline at end of file