From b7191c09bba419db8f547fbac89194585da8c1b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <2712495353@qq.com>
Date: Mon, 13 Jul 2026 23:31:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(json-tools):=20=E4=BC=98=E5=8C=96=20Js?=
 =?UTF-8?q?onDiffPanel=20=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C=E5=B9=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=20TextInputArea=20=E7=81=B5=E6=B4=BB?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TextInputArea.tsx              | 11 ++-
 .../JsonTools/components/JsonDiffPanel.tsx    | 87 +++++++++++--------
 src/pages/JsonTools/components/JsonTree.tsx   |  2 +-
 .../__tests__/JsonDiffPanel.test.tsx          |  3 +-
 4 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/src/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
index 9e92015..22eebba 100644
--- a/src/components/TextInputArea.tsx
+++ b/src/components/TextInputArea.tsx
@@ -48,6 +48,9 @@ export interface TextInputAreaProps extends Omit<
    * 用于需要固定高度 + 内部滚动的卡片面板。
    */
   fill?: boolean;
+
+  /** 是否无边框、无阴影、无圆角（适用于嵌套在其他有边框的容器中） */
+  borderless?: boolean;
 }
 
 function ActionButton({
@@ -113,6 +116,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     externalError,
     onClear,
     fill = false,
+    borderless = false,
     ...restProps
   } = props;
 
@@ -241,9 +245,12 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
       <div
         className={cn(
-          'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
+          borderless
+            ? 'bg-transparent overflow-hidden'
+            : 'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
           fill && 'flex-1 min-h-0 flex flex-col',
-          displayError &&
+          !borderless &&
+            displayError &&
             'border-destructive focus-within:ring-destructive focus-within:border-destructive',
         )}
       >
diff --git a/src/pages/JsonTools/components/JsonDiffPanel.tsx b/src/pages/JsonTools/components/JsonDiffPanel.tsx
index dc995ca..0c627cf 100644
--- a/src/pages/JsonTools/components/JsonDiffPanel.tsx
+++ b/src/pages/JsonTools/components/JsonDiffPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
 import { cn } from '@/lib/utils';
 
@@ -10,7 +10,7 @@ export interface JsonDiffPanelProps extends Omit<React.HTMLAttributes<HTMLDivEle
   value: string;
   onChange: (value: string) => void;
   error?: string | null;
-  /** 是否处于折叠态（Accordion 收起） */
+  /** 是否处于折叠态 */
   collapsed: boolean;
   onToggleCollapse: () => void;
   /** 折叠态展示的单行缩略预览文本 */
@@ -32,45 +32,60 @@ export default function JsonDiffPanel({
   return (
     <div
       className={cn(
-        'flex flex-col overflow-hidden rounded-md border border-border bg-card',
-        collapsed ? 'h-[38px] shrink-0' : 'flex-1 min-h-[120px]',
+        '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}
     >
-      {collapsed ? (
-        <button
-          type="button"
-          onClick={onToggleCollapse}
-          className="flex h-[36px] w-full items-center gap-2 px-3 text-left select-none bg-muted/40 hover:bg-muted/70 transition-colors"
+      <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',
+          )}
         >
-          <span className="shrink-0 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80">
-            {title}
-          </span>
-          <span className="flex-1 truncate font-mono text-xs text-muted-foreground">{preview}</span>
-          <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
-        </button>
-      ) : (
-        <>
-          <div
-            onClick={onToggleCollapse}
-            className="flex h-[36px] cursor-pointer select-none items-center justify-between border-b border-border/60 bg-muted/20 hover:bg-muted/40 transition-colors px-3"
-          >
-            <span className="text-[11px] font-semibold text-foreground/90">{title}</span>
-            <ChevronDown className="h-4 w-4 text-muted-foreground hover:text-foreground" />
-          </div>
-          <TextInputArea
-            fill
-            value={value}
-            onChange={onChange}
-            placeholder={placeholder}
-            externalError={error ?? undefined}
-            showClear={true}
-            allowCopy={true}
-            className="min-h-0 flex-1"
-          />
-        </>
-      )}
+          {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>
   );
 }
diff --git a/src/pages/JsonTools/components/JsonTree.tsx b/src/pages/JsonTools/components/JsonTree.tsx
index abb3450..a96b7f1 100644
--- a/src/pages/JsonTools/components/JsonTree.tsx
+++ b/src/pages/JsonTools/components/JsonTree.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { DiffNode, DiffType } from '../types';
 import { cn } from '@/lib/utils';
diff --git a/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx b/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
index 66009cb..59240d8 100644
--- a/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
+++ b/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
@@ -33,7 +33,8 @@ describe('JsonDiffPanel', () => {
       />,
     );
     expect(screen.getByText('abc（点击展开）')).toBeInTheDocument();
-    expect(screen.queryByPlaceholderText('x')).not.toBeInTheDocument();
+    const input = screen.getByPlaceholderText('x');
+    expect(input.closest('.opacity-0')).toBeInTheDocument();
   });
 
   it('点击标题可切换折叠', async () => {