fmt: biome format --write

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, onMount, Show } from "solid-js";
+import { type Component, createSignal, onMount, Show } from "solid-js";
 import RulesList from "./components/RulesList";
 import CommandQueue from "./components/CommandQueue";
 import Login from "./components/Login";

frontend/src/components/ChangePassword.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal } from "solid-js";
+import { type Component, createSignal } from "solid-js";
 import { authApi } from "../api/client";
 import { authStore } from "../api/auth";
 import { Button } from "./ui/Button";

frontend/src/components/CommandQueue.tsx

@@ -1,4 +1,4 @@
-import { Component, createResource, For, Show } from "solid-js";
+import { type Component, createResource, For, Show } from "solid-js";
 import { commandsApi } from "../api/client";
 import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";

frontend/src/components/Login.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal } from "solid-js";
+import { type Component, createSignal } from "solid-js";
 import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";
 import { Input } from "./ui/Input";

frontend/src/components/RequestDetails.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, For, Show } from "solid-js";
+import { type Component, createSignal, For, Show } from "solid-js";
 import type { RequestLog } from "../types";
 import { Button } from "./ui/Button";
 import { CardContent, CardFooter, CardHeader } from "./ui/Card";
@@ -36,9 +36,7 @@ const TreeView: Component<TreeViewProps> = (props) => {
         class="flex items-center cursor-pointer hover:bg-gray-100 rounded px-1"
         onClick={() => setIsOpen(!isOpen())}
       >
-        <span class="w-4 inline-block text-gray-500">
+        <span class="w-4 inline-block text-gray-500">{isObject ? (isOpen() ? "▼" : "►") : ""}</span>
-          {isObject ? (isOpen() ? "▼" : "►") : ""}
-        </span>
         <span class="font-semibold text-gray-800">{props.name}:</span>
         <Show when={!isObject}>
           <span class="ml-2">{renderValue(props.data)}</span>
@@ -75,7 +73,7 @@ const DataSection: Component<DataSectionProps> = (props) => {
             </span>
           </Show>
         </h4>
-        
+
         {/* View Toggle Buttons */}
         <div class="flex text-xs rounded-md border border-gray-300 overflow-hidden">
           <button
@@ -138,16 +136,10 @@ const RequestDetails: Component<RequestDetailsProps> = (props) => {
         <CardContent class="flex-1 overflow-y-auto min-h-0">
           <div class="grid grid-cols-1 gap-6">
             {/* Original Request */}
-            <DataSection 
+            <DataSection title="Request" data={props.log.request_body} />
-              title="Request" 
-              data={props.log.request_body} 
-            />
 
             {/* Original Response */}
-            <DataSection 
+            <DataSection title="Response" data={props.log.response_body} />
-              title="Response" 
-              data={props.log.response_body} 
-            />
 
             {/* Intercepted Request */}
             <Show when={props.log.intercepted_request}>

frontend/src/components/RequestLogs.tsx

@@ -1,4 +1,4 @@
-import { Component, createMemo, createResource, createSignal, For, Show } from "solid-js";
+import { type Component, createResource, createSignal, For, Show } from "solid-js";
 import { logsApi } from "../api/client";
 import type { RequestLog as RequestLogType } from "../types";
 import { Button } from "./ui/Button";
@@ -7,7 +7,10 @@ import { Input } from "./ui/Input";
 import { Select } from "./ui/Select";
 import RequestDetails from "./RequestDetails";
 
+const PAGE_SIZE = 100;
+
 const RequestLogs: Component = () => {
+  const [page, setPage] = createSignal(1);
   const [search, setSearch] = createSignal("");
   const [inputValue, setInputValue] = createSignal("");
   const [method, setMethod] = createSignal("");
@@ -18,24 +21,32 @@ const RequestLogs: Component = () => {
     const value = e.currentTarget.value;
     setInputValue(value);
     clearTimeout(debounceTimer);
-    debounceTimer = window.setTimeout(() => setSearch(value), 300);
+    debounceTimer = window.setTimeout(() => {
+      setSearch(value);
+      setPage(1);
+    }, 300);
   };
 
-  const [logs, { refetch: refetchLogs }] = createResource(
+  const handleMethodChange = (e: { currentTarget: { value: string } }) => {
-    () => ({ search: search(), method: method() }),
+    setMethod(e.currentTarget.value);
-    async (filters) => {
+    setPage(1);
-      return logsApi.list(filters);
+  };
+
+  const [logsData, { refetch: refetchLogs }] = createResource(
+    () => ({
+      search: search(),
+      method: method(),
+      page: page(),
+      limit: PAGE_SIZE,
+    }),
+    async (params) => {
+      return logsApi.list(params);
     },
   );
-  const [allLogs, { refetch: refetchAllLogs }] = createResource(async () => {
+  const [methods, { refetch: refetchMethods }] = createResource(logsApi.methods);
-    return await logsApi.list();
-  });
-  const methods = createMemo(() => {
-    return allLogs.loading ? [] : [...new Set(allLogs()!.map((log) => log.method))];
-  });
   const refetch = () => {
     refetchLogs();
-    refetchAllLogs();
+    refetchMethods();
   };
 
   const handleLogClick = (log: RequestLogType) => {
@@ -50,15 +61,29 @@ const RequestLogs: Component = () => {
     return new Date(dateStr).toLocaleString();
   };
 
+  // 辅助计算
+  const totalLogs = () => logsData()?.total || 0;
+  const currentLogs = () => logsData()?.data || [];
+  const totalPages = () => Math.ceil(totalLogs() / PAGE_SIZE);
+
+  // 分页操作
+  const goNext = () => {
+    if (page() < totalPages()) setPage((p) => p + 1);
+  };
+  const goPrev = () => {
+    if (page() > 1) setPage((p) => p - 1);
+  };
+
   return (
     <>
       <div class="space-y-4">
         <div class="flex items-center justify-between">
           <h2 class="text-2xl font-semibold">
             Request Logs
-            <Show when={logs() && !logs.loading && !allLogs.loading}>
+            <Show when={!logsData.loading}>
               <span class="text-gray-500 text-base ml-2">
-                ({logs()?.length} of {allLogs()?.length} logs)
+                (Showing {(page() - 1) * PAGE_SIZE + 1}-{Math.min(page() * PAGE_SIZE, totalLogs())} of{" "}
+                {totalLogs()})
               </span>
             </Show>
           </h2>
@@ -78,7 +103,7 @@ const RequestLogs: Component = () => {
               />
             </div>
             <div class="w-full sm:w-1/4">
-              <Select value={method()} onChange={(e) => setMethod(e.currentTarget.value)} class="w-full">
+              <Select value={method()} onChange={handleMethodChange} class="w-full">
                 <option value="">All Methods</option>
                 <For each={methods()}>{(m) => <option value={m}>{m}</option>}</For>
               </Select>
@@ -98,7 +123,7 @@ const RequestLogs: Component = () => {
               </thead>
               <tbody class="bg-white divide-y divide-gray-200">
                 <Show
-                  when={!logs.loading}
+                  when={!logsData.loading}
                   fallback={
                     <tr>
                       <td colspan="3" class="text-center py-4">
@@ -108,7 +133,7 @@ const RequestLogs: Component = () => {
                   }
                 >
                   <For
-                    each={logs()}
+                    each={currentLogs()}
                     fallback={
                       <tr>
                         <td colspan="3" class="text-center py-8 text-gray-500">
@@ -135,6 +160,27 @@ const RequestLogs: Component = () => {
               </tbody>
             </table>
           </div>
+
+          {/* 5. 底部添加分页控制条 */}
+          <Show when={totalLogs() > 0}>
+            <div class="p-4 border-t flex items-center justify-between bg-gray-50">
+              <div class="text-sm text-gray-500">
+                Page {page()} of {totalPages()}
+              </div>
+              <div class="space-x-2">
+                <Button variant="secondary" onClick={goPrev} disabled={page() === 1 || logsData.loading}>
+                  Previous
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={goNext}
+                  disabled={page() >= totalPages() || logsData.loading}
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          </Show>
         </Card>
       </div>
       <Show when={selectedLog()}>{(log) => <RequestDetails log={log()} onClose={handleCloseDetails} />}</Show>

frontend/src/components/RulesList.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, createResource, For, Show } from "solid-js";
+import { type Component, createSignal, createResource, For, Show } from "solid-js";
 import { rulesApi } from "../api/client";
 import type { InterceptionRule } from "../types";
 import { Button } from "./ui/Button";

frontend/src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(

frontend/src/components/ui/Card.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const cardVariants = cva("bg-white shadow rounded-lg", {

frontend/src/components/ui/Input.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(

frontend/src/components/ui/Modal.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 
 const Modal: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
   const [local, others] = splitProps(props, ["class"]);

frontend/src/components/ui/Select.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const selectVariants = cva("w-full border border-gray-300 rounded-md px-3 py-2", {

frontend/src/components/ui/Textarea.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type Component, type JSX, splitProps } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const textareaVariants = cva("w-full border border-gray-300 rounded-md px-3 py-2 font-mono text-sm", {