From 868cc88d54374fe404955b31716bbffa624bb7b1 Mon Sep 17 00:00:00 2001
From: superlishunqin <852326703@qq.com>
Date: Sat, 17 May 2025 16:14:28 +0800
Subject: [PATCH] upgrade_page_browse

---
 app/static/css/browse.css      | 54 ++++++++++++++++++++++++++++++++--
 app/static/js/browse.js        | 50 ++++++++++++++++++++++++++++---
 app/templates/book/browse.html | 54 ++++++++++++++++++++++++++--------
 3 files changed, 139 insertions(+), 19 deletions(-)

diff --git a/app/static/css/browse.css b/app/static/css/browse.css
index aa89546..bfbfbc0 100644
--- a/app/static/css/browse.css
+++ b/app/static/css/browse.css
@@ -86,7 +86,7 @@
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
     position: relative;
-    z-index: 2;
+    z-index: 10; /* 增加z-index值 */
 }
 
 .search-form {
@@ -203,7 +203,7 @@
     border-radius: 12px;
     box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
     padding: 10px;
-    z-index: 100;
+    z-index: 20; /* 确保下拉菜单有更高的z-index */
     display: none;
     max-height: 300px;
     overflow-y: auto;
@@ -272,6 +272,54 @@
     box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
 }
 
+/* 统一下拉菜单样式 */
+.sort-filters, .order-filters {
+    position: relative;
+    flex: 1;
+    min-width: 150px;
+}
+
+.sort-toggle, .order-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    width: 100%;
+    height: 42px;
+    background: #f7fafc;
+    border: 1px solid #e4e7eb;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #3c4858;
+    transition: all 0.3s;
+}
+
+.sort-toggle:hover, .order-toggle:hover {
+    background: #edf2f7;
+}
+
+.sort-dropdown, .order-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 8px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    padding: 10px;
+    z-index: 20; /* 确保下拉菜单有更高的z-index */
+    display: none;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.sort-dropdown.show, .order-dropdown.show {
+    display: block;
+    animation: fadeIn 0.2s;
+}
+
 /* 图书统计显示 */
 .browse-stats {
     display: flex;
@@ -340,7 +388,7 @@
     gap: 25px;
     margin-bottom: 40px;
     position: relative;
-    z-index: 2;
+    z-index: 5; /* 降低图书卡片的z-index */
 }
 
 /* 图书卡片样式 */
diff --git a/app/static/js/browse.js b/app/static/js/browse.js
index 91dcd5e..94a508c 100644
--- a/app/static/js/browse.js
+++ b/app/static/js/browse.js
@@ -1,15 +1,42 @@
 // 图书浏览页面脚本
 $(document).ready(function() {
     // 分类筛选下拉菜单
-    $('.category-filter-toggle').click(function() {
+    $('.category-filter-toggle:not(.sort-toggle):not(.order-toggle)').click(function(e) {
+        e.stopPropagation();
+        // 关闭其他可能打开的下拉菜单
+        $('.category-filter-dropdown').not($(this).siblings('.category-filter-dropdown')).removeClass('show');
+        $('.category-filter-toggle').not($(this)).removeClass('active');
+
         $(this).toggleClass('active');
-        $('.category-filter-dropdown').toggleClass('show');
+        $(this).siblings('.category-filter-dropdown').toggleClass('show');
+    });
+
+    // 排序下拉菜单
+    $('.sort-toggle').click(function(e) {
+        e.stopPropagation();
+        // 关闭其他可能打开的下拉菜单
+        $('.category-filter-dropdown').not($(this).siblings('.sort-dropdown')).removeClass('show');
+        $('.category-filter-toggle').not($(this)).removeClass('active');
+
+        $(this).toggleClass('active');
+        $(this).siblings('.sort-dropdown').toggleClass('show');
+    });
+
+    // 升降序下拉菜单
+    $('.order-toggle').click(function(e) {
+        e.stopPropagation();
+        // 关闭其他可能打开的下拉菜单
+        $('.category-filter-dropdown').not($(this).siblings('.order-dropdown')).removeClass('show');
+        $('.category-filter-toggle').not($(this)).removeClass('active');
+
+        $(this).toggleClass('active');
+        $(this).siblings('.order-dropdown').toggleClass('show');
     });
 
     // 点击外部关闭下拉菜单
     $(document).click(function(e) {
-        if (!$(e.target).closest('.category-filters').length) {
-            $('.category-filter-dropdown').removeClass('show');
+        if (!$(e.target).closest('.category-filters, .sort-filters, .order-filters').length) {
+            $('.category-filter-dropdown, .sort-dropdown, .order-dropdown').removeClass('show');
             $('.category-filter-toggle').removeClass('active');
         }
     });
@@ -251,6 +278,21 @@ $(document).ready(function() {
                 transform: translateY(0);
             }
         }
+        
+        /* 添加下拉菜单的 z-index 样式，解决被图书挡住的问题 */
+        .filter-section {
+            position: relative;
+            z-index: 30;
+        }
+        
+        .category-filter-dropdown, .sort-dropdown, .order-dropdown {
+            z-index: 31;
+        }
+        
+        .books-grid {
+            position: relative;
+            z-index: 5;
+        }
     `;
 
     $('<style>').text(notificationCSS).appendTo('head');
diff --git a/app/templates/book/browse.html b/app/templates/book/browse.html
index be241bd..160e1e9 100644
--- a/app/templates/book/browse.html
+++ b/app/templates/book/browse.html
@@ -47,19 +47,49 @@
                         {% endfor %}
                     </div>
                 </div>
-                <div class="form-group filter-group">
-                    <select name="sort" class="form-control" onchange="this.form.submit()">
-                        <option value="id" {% if sort == 'id' %}selected{% endif %}>默认排序</option>
-                        <option value="created_at" {% if sort == 'created_at' %}selected{% endif %}>入库时间</option>
-                        <option value="title" {% if sort == 'title' %}selected{% endif %}>书名</option>
-                        <option value="stock" {% if sort == 'stock' %}selected{% endif %}>库存</option>
-                    </select>
+
+                <!-- 修改默认排序下拉列表 -->
+                <div class="sort-filters">
+                    <button type="button" class="category-filter-toggle sort-toggle">
+                        <i class="fas fa-sort"></i> {{ '入库时间' if sort == 'created_at' else '书名' if sort == 'title' else '库存' if sort == 'stock' else '默认排序' }}
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="category-filter-dropdown sort-dropdown">
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='id', order=order) }}"
+                           class="category-item {% if sort == 'id' %}active{% endif %}">
+                            <i class="fas fa-sort-numeric-down"></i> 默认排序
+                        </a>
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='created_at', order=order) }}"
+                           class="category-item {% if sort == 'created_at' %}active{% endif %}">
+                            <i class="fas fa-calendar-alt"></i> 入库时间
+                        </a>
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='title', order=order) }}"
+                           class="category-item {% if sort == 'title' %}active{% endif %}">
+                            <i class="fas fa-font"></i> 书名
+                        </a>
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort='stock', order=order) }}"
+                           class="category-item {% if sort == 'stock' %}active{% endif %}">
+                            <i class="fas fa-warehouse"></i> 库存
+                        </a>
+                    </div>
                 </div>
-                <div class="form-group filter-group">
-                    <select name="order" class="form-control" onchange="this.form.submit()">
-                        <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
-                        <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
-                    </select>
+
+                <!-- 修改升降序下拉列表 -->
+                <div class="order-filters">
+                    <button type="button" class="category-filter-toggle order-toggle">
+                        <i class="fas fa-{{ 'sort-amount-down' if order == 'desc' else 'sort-amount-up' }}"></i> {{ '降序' if order == 'desc' else '升序' }}
+                        <i class="fas fa-chevron-down"></i>
+                    </button>
+                    <div class="category-filter-dropdown order-dropdown">
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort=sort, order='desc') }}"
+                           class="category-item {% if order == 'desc' %}active{% endif %}">
+                            <i class="fas fa-sort-amount-down"></i> 降序
+                        </a>
+                        <a href="{{ url_for('book.browse_books', search=search, category_id=category_id, sort=sort, order='asc') }}"
+                           class="category-item {% if order == 'asc' %}active{% endif %}">
+                            <i class="fas fa-sort-amount-up"></i> 升序
+                        </a>
+                    </div>
                 </div>
             </div>
         </form>