feat(json-tools): 引入可折叠面板组件并优化布局交互

src/pages/JsonTools/components/CollapsiblePanel.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface CollapsiblePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** 面板标题 */
+  title: string;
+  /** 是否处于折叠态 */
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  /** 折叠态展示的单行缩略预览文本 */
+  preview?: string;
+  /** 展开态内容 */
+  children?: React.ReactNode;
+}
+
+export default function CollapsiblePanel({
+  title,
+  collapsed,
+  onToggleCollapse,
+  preview,
+  children,
+  className,
+  ...props
+}: CollapsiblePanelProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col overflow-hidden rounded-md border bg-card transition-all duration-300 ease-in-out',
+        className,
+      )}
+      style={{
+        flex: collapsed ? '0 0 36px' : '1 1 120px',
+      }}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={onToggleCollapse}
+        className={cn(
+          'flex h-[36px] w-full cursor-pointer select-none items-center justify-between bg-muted/20 hover:bg-muted/30 transition-colors px-3 shrink-0 text-left focus:outline-none focus:bg-muted/40',
+          !collapsed && 'border-b border-border/60',
+        )}
+      >
+        <span className="text-[11px] font-semibold text-foreground/90 shrink-0">{title}</span>
+        <span
+          className={cn(
+            'flex-1 truncate font-mono text-xs text-muted-foreground/70 ml-3 transition-all duration-300',
+            collapsed ? 'opacity-100 max-w-full' : 'opacity-0 max-w-0 pointer-events-none',
+          )}
+        >
+          {preview}
+        </span>
+        <ChevronRight
+          className={cn(
+            'h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground transition-transform duration-300',
+            !collapsed && 'rotate-90',
+          )}
+        />
+      </button>
+
+      <div
+        className={cn(
+          'flex-1 min-h-0 flex flex-col transition-opacity duration-300',
+          collapsed ? 'opacity-0 pointer-events-none' : 'opacity-100',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

src/pages/JsonTools/components/JsonConvertSection.tsx

@@ -1,29 +1,24 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import TextInputArea from '@/components/TextInputArea';
 import JsonResultPanel from './JsonResultPanel';
+import CollapsiblePanel from './CollapsiblePanel';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';
+import { buildPreview } from '../useJsonTools';
 import type { ConvertFunction, ConvertResult } from '../types';
 
-const CONVERT_LABELS: Record<
+const CONVERT_LABELS: Record<string, { inputPlaceholder: string; outputLabel: string }> = {
-  string,
-  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
-> = {
   yaml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'YAML 结果',
-    emptyHint: '输入 JSON 后点击转换',
   },
   toml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'TOML 结果',
-    emptyHint: '输入 JSON 后点击转换',
   },
   minify: {
     inputPlaceholder: '输入需要压缩的 JSON...',
     outputLabel: '压缩结果',
-    emptyHint: '输入 JSON 后点击压缩',
   },
 };
 
@@ -40,6 +35,7 @@ export default function JsonConvertSection({
 }: JsonConvertSectionProps) {
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
+  const [inputCollapsed, setInputCollapsed] = useState(false);
 
   const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
 
@@ -71,32 +67,40 @@ export default function JsonConvertSection({
     }
   }, [debouncedInput, error, convertFunction]);
 
-  return (
+  const preview = useMemo(() => buildPreview(input), [input]);
-    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
-      <TextInputArea
-        placeholder={labels.inputPlaceholder}
-        value={input}
-        onChange={setInput}
-        externalError={error || runtimeError || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={7}
-        maxRows={14}
-        onClear={() => setInput('')}
-      />
 
-      {result?.output ? (
+  return (
-        <JsonResultPanel
+    <div className={cn('w-full flex flex-1 min-h-0 flex-col gap-3', className)} {...props}>
-          title={labels.outputLabel}
+      <CollapsiblePanel
-          content={result.output}
+        title="JSON 输入"
-          originalBytes={result.originalBytes}
+        collapsed={inputCollapsed}
-          outputBytes={result.outputBytes}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
-          maxHeight="380px"
+        preview={preview}
+      >
+        <TextInputArea
+          fill
+          borderless
+          placeholder={labels.inputPlaceholder}
+          value={input}
+          onChange={setInput}
+          externalError={error || runtimeError || undefined}
+          showClear={true}
+          allowCopy={true}
+          className="min-h-0 flex-1"
+          onClear={() => setInput('')}
         />
-      ) : (
+      </CollapsiblePanel>
-        <EmptyPlaceholder>
+
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+      {result?.output && (
-        </EmptyPlaceholder>
+        <div className="flex min-h-0 flex-1">
+          <JsonResultPanel
+            fill
+            title={labels.outputLabel}
+            content={result.output}
+            originalBytes={result.originalBytes}
+            outputBytes={result.outputBytes}
+          />
+        </div>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonDiffPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ChevronRight } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
+import CollapsiblePanel from './CollapsiblePanel';
 import { cn } from '@/lib/utils';
 
 export interface JsonDiffPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -30,62 +30,30 @@ export default function JsonDiffPanel({
   ...props
 }: JsonDiffPanelProps) {
   return (
-    <div
+    <CollapsiblePanel
+      title={title}
+      collapsed={collapsed}
+      onToggleCollapse={onToggleCollapse}
+      preview={preview}
       className={cn(
-        'flex flex-col overflow-hidden rounded-md border bg-card transition-all duration-300 ease-in-out',
         error
           ? 'border-destructive focus-within:ring-1 focus-within:ring-destructive focus-within:border-destructive'
           : 'border-border focus-within:ring-1 focus-within:ring-ring focus-within:border-border/80',
         className,
       )}
-      style={{
-        flex: collapsed ? '0 0 36px' : '1 1 120px',
-      }}
       {...props}
     >
-      <button
+      <TextInputArea
-        type="button"
+        fill
-        onClick={onToggleCollapse}
+        value={value}
-        className={cn(
+        onChange={onChange}
-          'flex h-[36px] w-full cursor-pointer select-none items-center justify-between bg-muted/20 hover:bg-muted/30 transition-colors px-3 shrink-0 text-left focus:outline-none focus:bg-muted/40',
+        placeholder={placeholder}
-          !collapsed && 'border-b border-border/60',
+        externalError={error ?? undefined}
-        )}
+        showClear={true}
-      >
+        allowCopy={true}
-        <span className="text-[11px] font-semibold text-foreground/90 shrink-0">{title}</span>
+        borderless
-        <span
+        className="min-h-0 flex-1"
-          className={cn(
+      />
-            'flex-1 truncate font-mono text-xs text-muted-foreground/70 ml-3 transition-all duration-300',
+    </CollapsiblePanel>
-            collapsed ? 'opacity-100 max-w-full' : 'opacity-0 max-w-0 pointer-events-none',
-          )}
-        >
-          {preview}
-        </span>
-        <ChevronRight
-          className={cn(
-            'h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground transition-transform duration-300',
-            !collapsed && 'rotate-90',
-          )}
-        />
-      </button>
-
-      <div
-        className={cn(
-          'flex-1 min-h-0 flex flex-col transition-opacity duration-300',
-          collapsed ? 'opacity-0 pointer-events-none' : 'opacity-100',
-        )}
-      >
-        <TextInputArea
-          fill
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          externalError={error ?? undefined}
-          showClear={true}
-          allowCopy={true}
-          borderless
-          className="min-h-0 flex-1"
-        />
-      </div>
-    </div>
   );
 }

src/pages/JsonTools/components/JsonFormatSection.tsx

@@ -5,18 +5,20 @@ import {
   type JsonFormatResult,
   validateJson,
 } from '@/utils/jsonFormatter';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
+import CollapsiblePanel from './CollapsiblePanel';
 import JsonResultPanel from './JsonResultPanel';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { buildPreview } from '../useJsonTools';
 
 export default function JsonFormatSection() {
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
   const [indentSize, setIndentSize] = useState<number>(2);
   const [sortKeys, setSortKeys] = useState(false);
+  const [inputCollapsed, setInputCollapsed] = useState(false);
 
   useEffect(() => {
     const handle = setTimeout(() => {
@@ -47,9 +49,11 @@ export default function JsonFormatSection() {
     }
   }, [debouncedInput, error, indentSize, sortKeys]);
 
+  const preview = useMemo(() => buildPreview(input), [input]);
+
   return (
-    <div className="w-full flex flex-col gap-4">
+    <div className="w-full flex flex-1 min-h-0 flex-col gap-3">
-      <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
+      <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60 shrink-0">
         <div className="flex gap-4 items-center w-full">
           <div className="flex gap-2 items-center shrink-0 select-none">
             <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
@@ -57,7 +61,7 @@ export default function JsonFormatSection() {
             </span>
             <SwitchButtonGroup
               value={indentSize}
-              onChange={(v) => setIndentSize(Number(v))}
+              onChange={(v: number) => setIndentSize(Number(v))}
               options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
               size="small"
             />
@@ -86,29 +90,36 @@ export default function JsonFormatSection() {
         </div>
       </div>
 
-      <TextInputArea
+      <CollapsiblePanel
-        placeholder="输入需要格式化的 JSON..."
+        title="JSON 输入"
-        value={input}
+        collapsed={inputCollapsed}
-        onChange={setInput}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
-        externalError={error || runtimeError || undefined}
+        preview={preview}
-        showClear={true}
+      >
-        allowCopy={true}
+        <TextInputArea
-        minRows={8}
+          fill
-        maxRows={15}
+          borderless
-        onClear={() => setInput('')}
+          placeholder="输入需要格式化的 JSON..."
-      />
+          value={input}
-
+          onChange={setInput}
-      {result?.formatted ? (
+          externalError={error || runtimeError || undefined}
-        <JsonResultPanel
+          showClear={true}
-          title="格式化结果"
+          allowCopy={true}
-          content={result.formatted}
+          className="min-h-0 flex-1"
-          originalBytes={result.originalBytes}
+          onClear={() => setInput('')}
-          outputBytes={result.formattedBytes}
         />
-      ) : (
+      </CollapsiblePanel>
-        <EmptyPlaceholder>
+
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+      {result?.formatted && (
-        </EmptyPlaceholder>
+        <div className="flex min-h-0 flex-1">
+          <JsonResultPanel
+            fill
+            title="格式化结果"
+            content={result.formatted}
+            originalBytes={result.originalBytes}
+            outputBytes={result.formattedBytes}
+          />
+        </div>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonResultPanel.tsx

@@ -1,5 +1,6 @@
 import { formatBytes } from '@/utils/format';
 import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils';
 
 export interface JsonResultPanelProps {
   title: string;
@@ -8,6 +9,11 @@ export interface JsonResultPanelProps {
   outputBytes: number;
   outputSizeLabel?: string;
   maxHeight?: string;
+  /**
+   * 撑满父容器剩余高度并启用内部滚动（而非按 maxHeight 截断）。
+   * 用于 popup / sidepanel 等固定高度场景下与折叠输入面板共享垂直空间。
+   */
+  fill?: boolean;
 }
 
 export default function JsonResultPanel({
@@ -17,9 +23,15 @@ export default function JsonResultPanel({
   outputBytes,
   outputSizeLabel = '格式化后大小',
   maxHeight = '420px',
+  fill = false,
 }: JsonResultPanelProps) {
   return (
-    <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+    <div
+      className={cn(
+        'relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
+        fill ? 'flex flex-col flex-1 min-h-0' : 'flex flex-col',
+      )}
+    >
       <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
         <div className="flex gap-4 items-center">
           <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
@@ -43,8 +55,11 @@ export default function JsonResultPanel({
       </div>
 
       <div
-        className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text"
+        className={cn(
-        style={{ maxHeight }}
+          'p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text',
+          fill && 'flex-1 min-h-0',
+        )}
+        style={fill ? undefined : { maxHeight }}
       >
         {content}
       </div>

src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import JsonFormatSection from '../JsonFormatSection';
+
+describe('JsonFormatSection', () => {
+  it('渲染输入面板标题与缩进/键名排序工具栏', () => {
+    render(<JsonFormatSection />);
+    expect(screen.getByText('JSON 输入')).toBeInTheDocument();
+    expect(screen.getByText('缩进')).toBeInTheDocument();
+    expect(screen.getByText('键名排序')).toBeInTheDocument();
+  });
+
+  it('输入无效 JSON 时不渲染结果面板与占位区', async () => {
+    render(<JsonFormatSection />);
+    const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+    fireEvent.change(input, { target: { value: '{ invalid json ' } });
+    await waitFor(() => {
+      expect(screen.queryByText('格式化结果')).not.toBeInTheDocument();
+    });
+    expect(
+      screen.queryByText('请修正上方 JSON 的语法错误以开启实时流式格式化'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('输入 JSON 后点击格式化')).not.toBeInTheDocument();
+  });
+
+  it('输入有效 JSON 后渲染格式化结果面板', async () => {
+    render(<JsonFormatSection />);
+    const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+    fireEvent.change(input, { target: { value: '{"a":1,"b":2}' } });
+    await waitFor(() => {
+      expect(screen.getByText('格式化结果')).toBeInTheDocument();
+    });
+    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+    expect(screen.getByText(/"b": 2/)).toBeInTheDocument();
+  });
+
+  it('点击标题可折叠输入面板', async () => {
+    const user = userEvent.setup();
+    render(<JsonFormatSection />);
+    const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+    fireEvent.change(input, { target: { value: '{"a":1}' } });
+    await waitFor(() => {
+      expect(screen.getByText('格式化结果')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('JSON 输入'));
+
+    // 折叠后输入框内容区隐藏
+    await waitFor(() => {
+      expect(input.closest('.opacity-0')).toBeInTheDocument();
+    });
+    // 折叠态展示单行预览
+    expect(screen.getByText('{"a":1}（点击展开）')).toBeInTheDocument();
+  });
+});

src/pages/JsonTools/useJsonTools.ts

@@ -48,7 +48,7 @@ export interface UseJsonToolsReturn {
   minifyConvert: ConvertFunction;
 }
 
-const buildPreview = (raw: string): string => {
+export const buildPreview = (raw: string): string => {
   const single = raw.replace(/\s+/g, ' ').trim();
   const truncated = single.length > 80 ? `${single.slice(0, 80)}…` : single;
   return truncated ? `${truncated}（点击展开）` : '（点击展开）';