fmt: biome format --write

2025-12-12 22:52:03 +08:00
parent d5089dabd9
commit 6336a451da
13 changed files with 80 additions and 42 deletions
--- a/frontend/src/App.tsx
+++ b/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";
--- a/frontend/src/components/ChangePassword.tsx
+++ b/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";
--- a/frontend/src/components/CommandQueue.tsx
+++ b/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";
--- a/frontend/src/components/Login.tsx
+++ b/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";
--- a/frontend/src/components/RequestDetails.tsx
+++ b/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">
-          {isObject ? (isOpen() ? "▼" : "►") : ""}
-        </span>
+        <span class="w-4 inline-block text-gray-500">{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 
-              title="Request" 
-              data={props.log.request_body} 
-            />
+            <DataSection title="Request" data={props.log.request_body} />

            {/* Original Response */}
-            <DataSection 
-              title="Response" 
-              data={props.log.response_body} 
-            />
+            <DataSection title="Response" data={props.log.response_body} />

            {/* Intercepted Request */}
            <Show when={props.log.intercepted_request}>
--- a/frontend/src/components/RequestLogs.tsx
+++ b/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(
-    () => ({ search: search(), method: method() }),
-    async (filters) => {
-      return logsApi.list(filters);
+  const handleMethodChange = (e: { currentTarget: { value: string } }) => {
+    setMethod(e.currentTarget.value);
+    setPage(1);
+  };
+
+  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 () => {
-    return await logsApi.list();
-  });
-  const methods = createMemo(() => {
-    return allLogs.loading ? [] : [...new Set(allLogs()!.map((log) => log.method))];
-  });
+  const [methods, { refetch: refetchMethods }] = createResource(logsApi.methods);
  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>
--- a/frontend/src/components/RulesList.tsx
+++ b/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";
--- a/frontend/src/components/ui/Button.tsx
+++ b/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(
--- a/frontend/src/components/ui/Card.tsx
+++ b/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", {
--- a/frontend/src/components/ui/Input.tsx
+++ b/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(
--- a/frontend/src/components/ui/Modal.tsx
+++ b/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"]);
--- a/frontend/src/components/ui/Select.tsx
+++ b/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", {
--- a/frontend/src/components/ui/Textarea.tsx
+++ b/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", {