diff --git a/example/webapp/main.go b/example/webapp/main.go
index 035f095..a967912 100644
--- a/example/webapp/main.go
+++ b/example/webapp/main.go
@@ -348,6 +348,9 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
     <script>
         let currentTopic = null;
         let currentCenterIndex = null; // 追踪当前中心索引位置
+        let direction = 'forward'; // 默认方向为向前翻页
+        let startIndex = null;
+        let endIndex = null;
 
         // 加载 topics
         async function loadTopics() {
@@ -355,7 +358,7 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
             const topics = await response.json();
 
             const list = document.getElementById('topicList');
-            list.innerHTML = topics.map(topic =>
+            list.innerHTML = topics.sort().map(topic =>
                 '<li class="topic-item" onclick="selectTopic(\'' + topic + '\')">' + topic + '</li>'
             ).join('');
         }
@@ -363,7 +366,9 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
         // 选择 topic
         function selectTopic(topic) {
             currentTopic = topic;
-            currentCenterIndex = null; // 切换 topic 时重置索引
+            direction = 'forward'; // 切换 topic 时重置方向
+            startIndex = null;
+            endIndex = null;
 
             // 更新选中状态
             document.querySelectorAll('.topic-item').forEach(item => {
@@ -393,7 +398,7 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
         }
 
         // 加载日志
-        async function loadLogs(index) {
+        async function loadLogs() {
             if (!currentTopic) return;
 
             const backward = document.getElementById('backwardCount').value;
@@ -401,19 +406,18 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 
             // 构建查询 URL
             let url = '/api/query?topic=' + currentTopic +
-                '&backward=' + backward + '&forward=' + forward;
+                '&backward=' + backward + '&forward=' + forward +
+                '&direction=' + direction;
 
-            // 如果指定了索引，添加到查询参数
-            if (index !== undefined && index !== null) {
-                url += '&index=' + index;
+            if (direction === 'backward' && startIndex != null) {
+                url += '&index=' + startIndex;
+            } else if (direction === 'forward' && endIndex != null) {
+                url += '&index=' + endIndex;
             }
 
             const response = await fetch(url);
             const data = await response.json();
 
-            // 更新当前中心索引
-            currentCenterIndex = data.centerIndex;
-
             const container = document.getElementById('logContainer');
 
             if (data.records.length === 0) {
@@ -444,35 +448,25 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
                        '</div>';
             }).join('');
 
+            if (data.records.length > 0) {
+            	startIndex = data.records[0].index;
+            	endIndex = data.records[data.records.length - 1].index;
+            } else {
+            	startIndex = null;
+            	endIndex = null;
+            }
+
             container.innerHTML = html;
         }
 
         function queryBackward() {
-            if (currentCenterIndex === null || currentCenterIndex === undefined) {
-                loadLogs();
-                return;
-            }
-
-            const backward = parseInt(document.getElementById('backwardCount').value);
-            const forward = parseInt(document.getElementById('forwardCount').value);
-
-            // 向前翻页：中心索引向前移动（backward + forward + 1）个位置
-            const newIndex = currentCenterIndex - (backward + forward + 1);
-            loadLogs(newIndex >= 0 ? newIndex : 0);
+        	direction = 'backward';
+            loadLogs();
         }
 
         function queryForward() {
-            if (currentCenterIndex === null || currentCenterIndex === undefined) {
-                loadLogs();
-                return;
-            }
-
-            const backward = parseInt(document.getElementById('backwardCount').value);
-            const forward = parseInt(document.getElementById('forwardCount').value);
-
-            // 向后翻页：中心索引向后移动（backward + forward + 1）个位置
-            const newIndex = currentCenterIndex + (backward + forward + 1);
-            loadLogs(newIndex);
+        	direction = 'forward';
+            loadLogs();
         }
 
         function formatBytes(bytes) {
@@ -483,6 +477,7 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 
         // 初始化
         loadTopics();
+
         // 只自动刷新统计信息，不刷新日志
         setInterval(() => {
             if (currentTopic) {
@@ -530,6 +525,7 @@ func handleQuery(w http.ResponseWriter, r *http.Request) {
 
 	// 获取查询参数
 	indexParam := r.URL.Query().Get("index")
+	direction := r.URL.Query().Get("direction")
 	backward, _ := strconv.Atoi(r.URL.Query().Get("backward"))
 	forward, _ := strconv.Atoi(r.URL.Query().Get("forward"))
 
@@ -550,50 +546,55 @@ func handleQuery(w http.ResponseWriter, r *http.Request) {
 	// 获取记录总数
 	totalCount := processor.GetRecordCount()
 
-	// 确定查询中心索引
-	var centerIndex int
-	if indexParam == "" {
-		// 如果没有指定索引，使用当前处理位置
-		centerIndex = seq.GetProcessingIndex(topic)
-	} else {
-		centerIndex, _ = strconv.Atoi(indexParam)
-		// 限制索引范围
-		if centerIndex < 0 {
-			centerIndex = 0
-		}
-		if centerIndex >= totalCount {
-			centerIndex = totalCount - 1
-		}
-	}
-
 	// 获取当前处理索引和读取索引（用于状态判断）
 	startIdx := seq.GetProcessingIndex(topic)
 	endIdx := seq.GetReadIndex(topic)
 
-	// 合并查询结果：向后 + 当前 + 向前
+	// 执行查询
 	var results []*seqlog.RecordWithStatus
+	var startRecordIndex int
 
-	// 向后查询（查询更早的记录）
-	if backward > 0 && centerIndex > 0 {
-		backResults, err := processor.QueryNewest(centerIndex-1, backward)
-		if err == nil {
-			results = append(results, backResults...)
+	if direction == "backward" {
+		// 向前翻页：查询更早的记录
+		var index int
+		if indexParam == "" {
+			index = startIdx
+		} else {
+			index, _ = strconv.Atoi(indexParam)
 		}
-	}
 
-	// 当前位置的记录
-	if centerIndex >= 0 && centerIndex < totalCount {
-		currentResults, err := processor.QueryOldest(centerIndex, 1)
-		if err == nil {
-			results = append(results, currentResults...)
+		if index > 0 {
+			var queryErr error
+			results, queryErr = processor.QueryNewest(index-1, backward)
+			if queryErr != nil {
+				http.Error(w, queryErr.Error(), http.StatusInternalServerError)
+				return
+			}
+			if len(results) > 0 {
+				// QueryNewest 返回的结果按索引递增排列
+				startRecordIndex = index - len(results)
+			}
+		}
+	} else {
+		// 向后翻页：查询更新的记录
+		var index int
+		if indexParam == "" {
+			index = startIdx
+		} else {
+			index, _ = strconv.Atoi(indexParam)
 		}
-	}
 
-	// 向前查询（查询更新的记录）
-	if forward > 0 && centerIndex+1 < totalCount {
-		forwardResults, err := processor.QueryOldest(centerIndex+1, forward)
-		if err == nil {
-			results = append(results, forwardResults...)
+		if index < totalCount {
+			var queryErr error
+			results, queryErr = processor.QueryOldest(index, forward)
+			if queryErr != nil {
+				http.Error(w, queryErr.Error(), http.StatusInternalServerError)
+				return
+			}
+			if len(results) > 0 {
+				// QueryOldest 返回的结果按索引递增排列
+				startRecordIndex = index
+			}
 		}
 	}
 
@@ -603,12 +604,6 @@ func handleQuery(w http.ResponseWriter, r *http.Request) {
 		Data   string `json:"data"`
 	}
 
-	// 计算每条记录的实际索引位置
-	startRecordIndex := centerIndex - backward
-	if startRecordIndex < 0 {
-		startRecordIndex = 0
-	}
-
 	records := make([]Record, len(results))
 	for i, r := range results {
 		records[i] = Record{
@@ -619,12 +614,11 @@ func handleQuery(w http.ResponseWriter, r *http.Request) {
 	}
 
 	json.NewEncoder(w).Encode(map[string]interface{}{
-		"records":      records,
-		"total":        len(records),
-		"centerIndex":  centerIndex,
-		"totalCount":   totalCount,
+		"records":         records,
+		"total":           len(records),
+		"totalCount":      totalCount,
 		"processingIndex": startIdx,
-		"readIndex":    endIdx,
+		"readIndex":       endIdx,
 	})
 }