From d0f9e65ad1d86c2048e52fe73508692b9aff29ee Mon Sep 17 00:00:00 2001
From: Kaku <xiao_doubi9637@outlook.com>
Date: Thu, 10 Jul 2025 23:50:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.py                    |   4 +-
 templates/book.html.j2     | 137 ++++++++++++--
 templates/login.html       |  68 +++++--
 templates/overview.html.j2 |  97 +++++++---
 templates/upload.html      |  79 +++++++-
 templates/view.html.j2     | 374 ++++++++++++++++++++++++++++++++-----
 6 files changed, 644 insertions(+), 115 deletions(-)

diff --git a/main.py b/main.py
index ce271de..65adb65 100644
--- a/main.py
+++ b/main.py
@@ -1,7 +1,7 @@
 import app_conf
 import db.util
 import db.file, file
-from flask import *
+from flask import Flask
 
 from router.api_Img import api_Img_bp
 from router.page import page_bp
@@ -28,6 +28,6 @@ if __name__ == "__main__":
     app.run(
         debug=conf.getboolean("server", "debug"),
         host=conf.get("server", "host"),
-        port=conf.get("server", "port"),
+        port=int(conf.get("server", "port")),
         threaded=conf.getboolean("server", "threaded"),
     )
diff --git a/templates/book.html.j2 b/templates/book.html.j2
index 1088e1c..18be80e 100644
--- a/templates/book.html.j2
+++ b/templates/book.html.j2
@@ -7,37 +7,55 @@
     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
     <title>ComiPy-详情页面</title>
     <style>
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
             margin: 0;
             padding: 0;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            color: #202124;
+            line-height: 1.6;
         }
 
         .container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 24px 16px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            margin-top: 16px;
+            margin-bottom: 16px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
         }
 
         .header {
             display: flex;
-            justify-content: space-between;
             flex-direction: column;
-            width: 80%;
-            margin-top: 20px;
+            gap: 24px;
+            margin-bottom: 24px;
         }
 
         @media (min-width: 600px) {
             .header {
                 flex-direction: row;
+                align-items: flex-start;
             }
         }
 
-
-
         .movie-poster {
             flex: 1;
-            margin-right: 20px;
+            max-width: 300px;
+        }
+
+        .movie-poster img {
+            width: 100%;
+            height: auto;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
         }
 
         .movie-details {
@@ -45,28 +63,109 @@
         }
 
         .movie-details h1 {
-            font-size: 24px;
-            margin-bottom: 10px;
+            font-size: 1.75rem;
+            font-weight: 400;
+            color: #1a73e8;
+            margin-bottom: 16px;
         }
 
         .movie-details p {
-            font-size: 16px;
-            margin-bottom: 10px;
+            font-size: 14px;
+            color: #5f6368;
+            margin-bottom: 12px;
+        }
+
+        .btn {
+            background: #1a73e8;
+            border: 1px solid #1a73e8;
+            color: #ffffff;
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            font-size: 14px;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .btn:hover {
+            background: #1557b0;
+            border-color: #1557b0;
+            color: #ffffff;
+            text-decoration: none;
+        }
+
+        .btn-outline {
+            background: #ffffff;
+            border: 1px solid #dadce0;
+            color: #1a73e8;
+        }
+
+        .btn-outline:hover {
+            background: #f8f9fa;
+            border-color: #1a73e8;
+            color: #1a73e8;
         }
 
         .comments-section {
-            width: 80%;
-            margin-top: 20px;
+            margin-top: 32px;
+        }
+
+        .comments-section h2 {
+            color: #1a73e8;
+            font-weight: 400;
+            font-size: 1.25rem;
+            margin-bottom: 16px;
         }
 
         .comment {
-            border: 1px solid #ccc;
-            padding: 10px;
-            margin-bottom: 10px;
+            background: #f8f9fa;
+            border: 1px solid #dadce0;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 12px;
         }
 
         .comment p {
             margin: 0;
+            color: #202124;
+        }
+
+        .comment-meta {
+            font-size: 12px;
+            color: #5f6368;
+            margin-top: 8px;
+        }
+
+        .form-control {
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            padding: 12px;
+            font-family: inherit;
+            width: 100%;
+            margin-bottom: 12px;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+        }
+
+        .modal-content {
+            border-radius: 8px;
+            border: none;
+            box-shadow: 0 4px 8px rgba(60, 64, 67, 0.3);
+        }
+
+        .modal-header {
+            border-bottom: 1px solid #dadce0;
+        }
+
+        .modal-title {
+            color: #1a73e8;
+            font-weight: 400;
         }
     </style>
 </head>
diff --git a/templates/login.html b/templates/login.html
index 4c13a96..de2784e 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,50 +5,84 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ComiPy-登录</title>
     <style>
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
+            font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+            background-color: #f8f9fa;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
             margin: 0;
+            color: #202124;
+            line-height: 1.6;
         }
 
         .container {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 5px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            background-color: #ffffff;
+            padding: 32px;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+            width: 100%;
+            max-width: 400px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #1a73e8;
+            font-weight: 400;
+            margin-bottom: 24px;
         }
 
         .form-group {
-            margin-bottom: 15px;
+            margin-bottom: 16px;
         }
 
         .form-group label {
             display: block;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            color: #202124;
+            font-weight: 500;
+            font-size: 14px;
         }
 
         .form-group input {
             width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 3px;
-            box-sizing: border-box;
+            padding: 12px;
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            font-family: inherit;
+            font-size: 14px;
+        }
+
+        .form-group input:focus {
+            outline: none;
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
         }
 
         .form-group button {
             width: 100%;
-            padding: 10px;
-            background-color: #5cb85c;
-            border: none;
-            border-radius: 3px;
-            color: white;
+            padding: 12px;
+            background: #1a73e8;
+            border: 1px solid #1a73e8;
+            border-radius: 4px;
+            color: #ffffff;
             cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
         }
 
+        .form-group button:hover {
+            background: #1557b0;
+            border-color: #1557b0;
+        }
+    </style>
+
         .form-group button:hover {
             background-color: #4cae4c;
         }
diff --git a/templates/overview.html.j2 b/templates/overview.html.j2
index d2cdea7..0613727 100644
--- a/templates/overview.html.j2
+++ b/templates/overview.html.j2
@@ -7,26 +7,38 @@
   <link href="/static/css/bootstrap.min.css" rel="stylesheet">
   <title>ComiPy-概览</title>
   <style>
+    * {
+      box-sizing: border-box;
+    }
+
     body {
-      font-family: Arial, sans-serif;
+      font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
       margin: 0;
-      padding: 20px;
-      background-color: #f0f0f0;
+      padding: 0;
+      background-color: #f8f9fa;
+      min-height: 100vh;
+      color: #202124;
+      line-height: 1.6;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px 16px;
     }
 
     #gallery {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      grid-gap: 20px;
-      font-size: small;
+      gap: 16px;
+      font-size: 14px;
     }
 
     /* 当屏幕宽度大于600px时，调整列数和列的宽度 */
     @media (min-width: 600px) {
       #gallery {
         grid-template-columns: repeat(3, 1fr);
-        font-size: medium;
-        /* 两列布局 */
+        font-size: 15px;
       }
     }
 
@@ -34,20 +46,57 @@
     @media (min-width: 900px) {
       #gallery {
         grid-template-columns: repeat(5, 1fr);
-        font-size: large;
-        /* 三列布局 */
+        font-size: 16px;
       }
     }
 
+    .gallery-item {
+      background: #ffffff;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+      transition: box-shadow 0.2s ease;
+      cursor: pointer;
+    }
+
+    .gallery-item:hover {
+      box-shadow: 0 4px 8px rgba(60, 64, 67, 0.3);
+    }
+
+    .gallery-item img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 8px 8px 0 0;
+    }
+
+    .gallery-item-content {
+      padding: 12px;
+    }
+
+    .gallery-item h3 {
+      margin: 0 0 8px 0;
+      font-size: 1em;
+      font-weight: 500;
+      color: #1a73e8;
+      text-decoration: none;
+    }
+
+    .gallery-item p {
+      margin: 0;
+      color: #5f6368;
+      font-size: 0.875em;
+    }
+
     #global-blur {
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(255, 255, 255, 0.95);
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
       /* 模糊度可以根据需要调整 */
       transition: display;
       z-index: 10;
@@ -77,19 +126,21 @@
     </div>
   </div>
   <hr />
-  <div id="gallery">
-    {% for item in list %}
-    <div class="card">
-      {% if item[4] > aftertime %}
-      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">New</span>
-      {% endif %}
-      <img src="/api/img/{{ item[1] }}/0?mini=yes" class="img-thumbnail card-img-top"
-        onclick="linkjump('{{ item[1] }}')" />
-      <div class="card-body">
-        <p class="card-text">{{ item[2] }}</p>
+  <div class="container">
+    <div id="gallery">
+      {% for item in list %}
+      <div class="gallery-item" onclick="linkjump('{{ item[1] }}')">
+        {% if item[4] > aftertime %}
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">New</span>
+        {% endif %}
+        <img src="/api/img/{{ item[1] }}/0?mini=yes" alt="{{ item[2] }}" />
+        <div class="gallery-item-content">
+          <h3>{{ item[2] }}</h3>
+          <p>点击查看详情</p>
+        </div>
       </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
   <hr />
   <div style=display:flex;justify-content:center;align-items:center;>
diff --git a/templates/upload.html b/templates/upload.html
index efec530..5c71755 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -9,11 +9,84 @@
     <!-- Bootstrap CSS -->
     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        /* Custom styles */
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            color: #202124;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 24px 16px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            margin-top: 40px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+        }
+
+        h2 {
+            color: #1a73e8;
+            font-weight: 400;
+            margin-bottom: 24px;
+            text-align: center;
+        }
+
+        .form-control {
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            padding: 12px;
+            font-family: inherit;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: #1a73e8;
+            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+        }
+
+        .btn-primary {
+            background: #1a73e8;
+            border: 1px solid #1a73e8;
+            color: #ffffff;
+            padding: 12px 24px;
+            border-radius: 4px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .btn-primary:hover {
+            background: #1557b0;
+            border-color: #1557b0;
+        }
+
+        .progress {
+            background-color: #f1f3f4;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: 16px;
+        }
+
         #progress_bar {
+            background-color: #1a73e8;
+            height: 8px;
             width: 0;
-            background-color: #64B587;
-            height: 20px;
+            transition: width 0.3s ease;
+        }
+
+        #loading {
+            margin-top: 12px;
+            color: #5f6368;
+            font-size: 14px;
         }
     </style>
 </head>
diff --git a/templates/view.html.j2 b/templates/view.html.j2
index ec2d2ab..4769058 100644
--- a/templates/view.html.j2
+++ b/templates/view.html.j2
@@ -6,82 +6,229 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ComiPy-漫画详情页</title>
     <style>
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
             margin: 0;
-            padding: 20px;
-            background-color: #f0f0f0;
+            padding: 0;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            color: #202124;
+            line-height: 1.6;
+        }
+
+        .header {
+            background: #ffffff;
+            padding: 12px 20px;
+            text-align: center;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 100;
+            border-bottom: 1px solid #dadce0;
+            transform: translateY(0);
+            transition: transform 0.3s ease-in-out;
+        }
+
+        .header.hidden {
+            transform: translateY(-100%);
+        }
+
+        .header h1 {
+            display: none;
+        }
+
+        .page-info {
+            font-size: 0.8rem;
+            color: #5f6368;
+            margin-bottom: 8px;
+            font-weight: 400;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 24px 16px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            margin-top: 80px;
+            margin-bottom: 16px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
         }
 
         #comic-container {
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 16px;
+            margin-bottom: 32px;
         }
 
         .comic-image {
             max-width: 100%;
+            width: auto;
             height: auto;
-            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+            transition: box-shadow 0.3s ease;
+            background: #fff;
+            overflow: hidden;
+        }
+
+        .comic-image:hover {
+            box-shadow: 0 4px 8px rgba(60, 64, 67, 0.3);
         }
 
         img {
             display: block;
             width: 100%;
             min-height: 200px;
-            margin-top: 10px;
+            border-radius: 4px;
+            background: linear-gradient(45deg, #f1f3f4 25%, transparent 25%, transparent 75%, #f1f3f4 75%), 
+                        linear-gradient(45deg, #f1f3f4 25%, transparent 25%, transparent 75%, #f1f3f4 75%);
+            background-size: 20px 20px;
+            background-position: 0 0, 10px 10px;
         }
 
-        #pagination {
+        .pagination-container {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
-            margin-top: 20px;
+            gap: 8px;
+            margin: 16px 0;
         }
 
         .page-button {
-            padding: 10px 15px;
-            margin: 5px;
-            background-color: #007bff;
-            color: white;
-            border: none;
+            padding: 8px 16px;
+            background: #ffffff;
+            color: #1a73e8;
+            border: 1px solid #dadce0;
             cursor: pointer;
-            border-radius: 5px;
+            border-radius: 4px;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+            min-width: 36px;
+            font-family: inherit;
+        }
+
+        .page-button:hover:not(:disabled) {
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+            border-color: #1a73e8;
+        }
+
+        .page-button:active:not(:disabled) {
+            background: #f8f9fa;
         }
 
         .page-button:disabled {
-            background-color: #cccccc;
-        }
-
-        .ellipsis {
-            padding: 10px 15px;
-            margin: 0 5px;
-            background-color: transparent;
-            border: none;
+            background: #1a73e8;
+            color: #ffffff;
+            border-color: #1a73e8;
             cursor: default;
         }
 
+        .page-button.nav-button {
+            background: #1a73e8;
+            color: #ffffff;
+            border-color: #1a73e8;
+            padding: 8px 24px;
+            font-size: 14px;
+        }
+
+        .page-button.nav-button:hover:not(:disabled) {
+            background: #1557b0;
+            box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
+        }
+
+        .page-button:disabled.nav-button {
+            background: #dadce0;
+            color: #80868b;
+            border-color: #dadce0;
+        }
+
+        .ellipsis {
+            padding: 8px 16px;
+            margin: 0;
+            background: transparent;
+            border: none;
+            cursor: default;
+            color: #5f6368;
+            font-weight: 400;
+        }
+
+        .loading-placeholder {
+            background: linear-gradient(90deg, #f1f3f4 25%, #e8eaed 50%, #f1f3f4 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+            border-radius: 4px;
+        }
+
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
         #global-blur {
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: rgba(255, 255, 255, 0.95);
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            transition: opacity 0.1s ease;
-            z-index: 1;
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            transition: opacity 0.3s ease;
+            z-index: 1000;
             pointer-events: none;
             opacity: 0;
         }
+
+        @media (max-width: 768px) {
+            .header {
+                padding: 16px;
+            }
+            
+            .header h1 {
+                font-size: 1.5rem;
+            }
+            
+            .container {
+                margin: 8px;
+                padding: 16px 12px;
+            }
+            
+            .page-button {
+                padding: 6px 12px;
+                font-size: 13px;
+                min-width: 32px;
+            }
+            
+            .page-button.nav-button {
+                padding: 6px 16px;
+                font-size: 13px;
+            }
+        }
     </style>
 </head>
 
 <body>
-    <div id="comic-container"></div>
-    <div id="pagination"></div>
+    <div class="header" id="header">
+        <div class="page-info" id="page-info">第 <span id="current-page-display">1</span> 页，共 <span id="total-pages-display">1</span> 页</div>
+        <div class="pagination-container" id="top-pagination"></div>
+    </div>
+    
+    <div class="container">
+        <div id="comic-container"></div>
+        <div class="pagination-container" id="bottom-pagination"></div>
+    </div>
+    
     <div id="global-blur" onclick="unshowGlobalBlur()"></div>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
@@ -92,47 +239,142 @@
             ];
             const itemsPerPage = 25; // 每页显示的图片数量
             let currentPage = 1;
+            const totalPages = Math.ceil(imgsData.length / itemsPerPage);
 
             function renderPage(page) {
                 const comicContainer = document.getElementById('comic-container');
                 comicContainer.innerHTML = ''; // 清空当前内容
 
+                // 显示加载动画
+                showLoadingPlaceholders();
+
                 const start = (page - 1) * itemsPerPage;
                 const end = start + itemsPerPage;
                 const pageItems = imgsData.slice(start, end);
 
-                pageItems.forEach(item => {
-                    const img = document.createElement('img');
-                    img.className = 'imgs comic-image';
-                    img.setAttribute('data-src', item.src);
-                    img.setAttribute('alt', item.alt);
-                    comicContainer.appendChild(img);
-                });
+                // 清空加载动画并加载图片
+                setTimeout(() => {
+                    comicContainer.innerHTML = '';
+                    pageItems.forEach((item, index) => {
+                        const img = document.createElement('img');
+                        img.className = 'imgs comic-image loading-placeholder';
+                        img.setAttribute('data-src', item.src);
+                        img.setAttribute('alt', item.alt);
+                        img.onload = () => img.classList.remove('loading-placeholder');
+                        comicContainer.appendChild(img);
+                    });
 
-                window.scrollTo(0, 0); // 滚动到页面顶部
-                lazyLoad(); // 确保惰性加载生效
+                    window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动到页面顶部
+                    lazyLoad(); // 确保惰性加载生效
+                }, 300);
+            }
+
+            function showLoadingPlaceholders() {
+                const comicContainer = document.getElementById('comic-container');
+                comicContainer.innerHTML = '';
+                for (let i = 0; i < Math.min(itemsPerPage, 5); i++) {
+                    const placeholder = document.createElement('div');
+                    placeholder.className = 'comic-image loading-placeholder';
+                    placeholder.style.height = '400px';
+                    comicContainer.appendChild(placeholder);
+                }
+            }
+
+            function updatePageInfo() {
+                document.getElementById('current-page-display').textContent = currentPage;
+                document.getElementById('total-pages-display').textContent = totalPages;
             }
 
             function renderPagination() {
-                const pagination = document.getElementById('pagination');
-                pagination.innerHTML = ''; // 清空当前内容
-
-                const totalPages = Math.ceil(imgsData.length / itemsPerPage);
+                const topPagination = document.getElementById('top-pagination');
+                const bottomPagination = document.getElementById('bottom-pagination');
+                
+                // 清空当前内容
+                topPagination.innerHTML = '';
+                bottomPagination.innerHTML = '';
 
                 if (totalPages <= 1) return;
 
-                for (let i = 1; i <= totalPages; i++) {
+                // 创建分页按钮
+                function createPaginationButtons(container) {
+                    // 上一页按钮
+                    const prevButton = document.createElement('button');
+                    prevButton.className = 'page-button nav-button';
+                    prevButton.innerHTML = '上一页';
+                    prevButton.disabled = (currentPage === 1);
+                    prevButton.addEventListener('click', () => {
+                        if (currentPage > 1) {
+                            currentPage--;
+                            changePage();
+                        }
+                    });
+                    container.appendChild(prevButton);
+
+                    // 页码按钮
+                    const startPage = Math.max(1, currentPage - 2);
+                    const endPage = Math.min(totalPages, currentPage + 2);
+
+                    // 第一页
+                    if (startPage > 1) {
+                        createPageButton(container, 1);
+                        if (startPage > 2) {
+                            const ellipsis = document.createElement('span');
+                            ellipsis.className = 'ellipsis';
+                            ellipsis.textContent = '...';
+                            container.appendChild(ellipsis);
+                        }
+                    }
+
+                    // 中间页码
+                    for (let i = startPage; i <= endPage; i++) {
+                        createPageButton(container, i);
+                    }
+
+                    // 最后一页
+                    if (endPage < totalPages) {
+                        if (endPage < totalPages - 1) {
+                            const ellipsis = document.createElement('span');
+                            ellipsis.className = 'ellipsis';
+                            ellipsis.textContent = '...';
+                            container.appendChild(ellipsis);
+                        }
+                        createPageButton(container, totalPages);
+                    }
+
+                    // 下一页按钮
+                    const nextButton = document.createElement('button');
+                    nextButton.className = 'page-button nav-button';
+                    nextButton.innerHTML = '下一页';
+                    nextButton.disabled = (currentPage === totalPages);
+                    nextButton.addEventListener('click', () => {
+                        if (currentPage < totalPages) {
+                            currentPage++;
+                            changePage();
+                        }
+                    });
+                    container.appendChild(nextButton);
+                }
+
+                function createPageButton(container, pageNum) {
                     const button = document.createElement('button');
                     button.className = 'page-button';
-                    button.innerText = i;
-                    button.disabled = (i === currentPage);
+                    button.innerText = pageNum;
+                    button.disabled = (pageNum === currentPage);
                     button.addEventListener('click', () => {
-                        currentPage = i;
-                        renderPage(i);
-                        renderPagination();
+                        currentPage = pageNum;
+                        changePage();
                     });
-                    pagination.appendChild(button);
+                    container.appendChild(button);
                 }
+
+                createPaginationButtons(topPagination);
+                createPaginationButtons(bottomPagination);
+            }
+
+            function changePage() {
+                renderPage(currentPage);
+                renderPagination();
+                updatePageInfo();
             }
 
             function lazyLoad() {
@@ -144,15 +386,43 @@
                     if (img.src) return; // 如果已经加载过了就跳过
 
                     const imgTop = img.getBoundingClientRect().top + scrollY;
-                    if (windowHeight + scrollY > imgTop) {
+                    if (windowHeight + scrollY + 200 > imgTop) { // 提前200px开始加载
                         img.src = img.getAttribute('data-src');
                     }
                 });
             }
 
-            window.addEventListener('scroll', lazyLoad);
+            // 键盘快捷键支持
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowLeft' && currentPage > 1) {
+                    currentPage--;
+                    changePage();
+                } else if (e.key === 'ArrowRight' && currentPage < totalPages) {
+                    currentPage++;
+                    changePage();
+                }
+            });
+
+            // 滚动隐藏顶栏功能
+            let lastScrollTop = 0;
+            const header = document.getElementById('header');
+            
+            window.addEventListener('scroll', () => {
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                
+                if (scrollTop > lastScrollTop && scrollTop > 100) {
+                    // 向下滚动且滚动距离超过100px时隐藏
+                    header.classList.add('hidden');
+                } else {
+                    // 向上滚动时显示
+                    header.classList.remove('hidden');
+                }
+                
+                lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // 防止负数
+                lazyLoad();
+            });
+
             window.addEventListener('resize', lazyLoad);
-            lazyLoad(); // 页面加载时初始化调用
 
             const globalBlur = document.getElementById('global-blur');
 
@@ -166,6 +436,8 @@
                 }
             });
 
+            // 初始化页面
+            updatePageInfo();
             renderPage(currentPage);
             renderPagination();
         });