@yuhere/js-jsonrpc2 2.1.3 → 2.1.4

package/htdoc/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>JSON-RPC 2.0</title>
-    <script type="module" crossorigin src="./assets/index-BEVUmX2-.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-hcP2-9jw.css">
+    <script type="module" crossorigin src="./assets/index-sVQlhxjI.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BAZmvr5x.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuhere/js-jsonrpc2",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A TypeScript JSON-RPC 2.0 server library with schema validation, authorization, dependency injection, and multiple transports.",
   "homepage": "https://github.com/yuhere/js-jsonrpc2#readme",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "js-jsonrpc2": "./dist/cli.js"
   },
   "scripts": {
-    "build": "npm run build:lib && npm run build:webui",
+    "build": "clean && npm run build:lib && npm run build:webui",
     "build:lib": "tsc -p tsconfig.build.json && tsc-esm-fix",
     "build:webui": "tsc -p webui//tsconfig.json && vite build --config webui/vite.config.ts",
     "dev": "run-p dev:lib dev:webui",

package/webui/src/components/TestPanel.tsx

@@ -20,6 +20,12 @@ const COPY_OPTIONS: { value: CopyKind; label: string }[] = [
     { value: 'fetch', label: '复制 fetch' },
 ];
 
+/** 格式化耗时：<1s 用 ms，否则用 s */
+function formatElapsed(ms: number): string {
+    if (ms < 1000) return `${ms.toFixed(0)} ms`;
+    return `${(ms / 1000).toFixed(2)} s`;
+}
+
 export function TestPanel({
     method,
     detail,
@@ -32,6 +38,7 @@ export function TestPanel({
 
     const [values, setValues] = useState<unknown[]>([]);
     const [output, setOutput] = useState('');
+    const [elapsed, setElapsed] = useState<{ total: number; firstFrame?: number } | null>(null);
     const [running, setRunning] = useState(false);
     const [copyKind, setCopyKind] = useState<CopyKind>('curl');
     const [copied, setCopied] = useState(false);
@@ -44,6 +51,7 @@ export function TestPanel({
         if (!method) return;
         setValues(paramSchemas.map(sampleFromSchema));
         setOutput('');
+        setElapsed(null);
     }, [method, paramSchemas]);
 
     useEffect(() => {
@@ -76,29 +84,46 @@ export function TestPanel({
         if (!method) return;
         setRunning(true);
         setOutput('');
+        setElapsed(null);
+
+        const startedAt = performance.now();
         try {
             const result = await rpc.call(method, ...values);
+
+            // 首帧/响应到达耗时
+            const firstFrameAt = performance.now() - startedAt;
+
             if (isStreamResult(result)) {
                 let idx = 0;
                 const lines: string[] = [];
+
+                // 每帧记录到达时间
                 for await (const value of result) {
-                    lines.push(`[${idx}] ${JSON.stringify(value, null, 2)}`);
+                    const now = performance.now() - startedAt;
+                    lines.push(
+                        `[${idx}] (+${formatElapsed(now)}) ${JSON.stringify(value, null, 2)}`,
+                    );
                     idx++;
                     setOutput(lines.join('\n'));
                 }
-                if (idx === 0) setOutput('（流已结束，无数据）');
-                else lines.push(`（流已结束，共 ${idx} 帧）`), setOutput(lines.join('\n'));
-            } else {
-                setOutput(JSON.stringify(result, null, 2));
-            }
 
-            if (isStreamReturn) {
+                const totalAt = performance.now() - startedAt;
+                if (idx === 0) {
+                    lines.push(`（流已结束，无数据，总耗时 ${formatElapsed(totalAt)}）`);
+                } else {
+                    lines.push(`（流已结束，共 ${idx} 帧，总耗时 ${formatElapsed(totalAt)}）`);
+                }
+                setOutput(lines.join('\n'));
+                setElapsed({ total: totalAt, firstFrame: firstFrameAt });
             } else {
-                const result = await rpc.call(method, ...values);
+                const totalAt = performance.now() - startedAt;
                 setOutput(JSON.stringify(result, null, 2));
+                setElapsed({ total: totalAt });
             }
         } catch (e) {
+            const totalAt = performance.now() - startedAt;
             setOutput(formatError(e));
+            setElapsed({ total: totalAt });
         } finally {
             setRunning(false);
             requestAnimationFrame(() =>
@@ -211,12 +236,30 @@ export function TestPanel({
                 >
                     重置为示例
                 </button>
-                <button onClick={() => setOutput('')} disabled={!output}>
+                <button
+                    onClick={() => {
+                        setOutput('');
+                        setElapsed(null);
+                    }}
+                    disabled={!output && !elapsed}
+                >
                     清空输出
                 </button>
             </div>
 
-            <h3>结果{isStreamReturn && <span className="hint">（流式）</span>}</h3>
+            <h3>
+                结果{isStreamReturn && <span className="hint">（流式）</span>}
+                {elapsed && (
+                    <span className="elapsed-badge">
+                        {' '}⏱ {formatElapsed(elapsed.total)}
+                        {elapsed.firstFrame !== undefined && (
+                            <span className="hint">
+                                {' '}· 首帧 {formatElapsed(elapsed.firstFrame)}
+                            </span>
+                        )}
+                    </span>
+                )}
+            </h3>
             <pre className="output" ref={outRef}>
                 {output || '（尚未执行）'}
             </pre>

package/webui/src/styles/geek.css

@@ -726,4 +726,17 @@ textarea:focus {
     .split-button {
         display: inline-flex;
     }
+}
+
+/* ---- 耗时徽章（TestPanel 结果区） ---- */
+.elapsed-badge {
+    color: var(--syn-number);
+    font-size: 12px;
+    font-weight: normal;
+    letter-spacing: 0;
+    text-transform: none;
+}
+
+.elapsed-badge .hint {
+    font-size: 11px;
 }