From 67553afe9c8492055bc6639dcfd08c137967a927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 22 May 2026 21:10:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=20TextStatistics=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=92=8C=20TextInputArea=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=85=A8=E9=9D=A2=E8=BF=81=E7=A7=BB=E8=87=B3=20shadcn?=
 =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/TextInputArea.tsx   | 25 ++++------
 pages/TextStatistics/index.tsx | 88 +++++++++++++++-------------------
 2 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/components/TextInputArea.tsx b/components/TextInputArea.tsx
index cb076da..b644825 100644
--- a/components/TextInputArea.tsx
+++ b/components/TextInputArea.tsx
@@ -220,7 +220,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
   return (
     <div className={cn('w-full flex flex-col gap-1.5', className)}>
-      {/* 顶部工具栏 */}
       {hasTopBar && (
         <div className="flex items-center justify-between px-0.5">
           <div className="flex items-center gap-2">
@@ -247,10 +246,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
         </div>
       )}
 
-      {/* 核心卡片容器：完美适配 shadcn 风格的多行包裹框 */}
       <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',
+          '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',
           displayError &&
             'border-destructive focus-within:ring-destructive focus-within:border-destructive',
         )}
@@ -264,14 +262,14 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
           autoFocus={autoFocus}
           readOnly={readOnly}
           placeholder={placeholder}
-          className="w-full bg-transparent px-3 py-2.5 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus:outline-none resize-none border-0 block"
+          className="w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block"
           {...restProps}
         />
 
-        {/* 底部隔离式功能区：杜绝重叠和塌陷 */}
         {hasBottomBar && (
-          <div className="flex items-center justify-between px-2 py-1.5 bg-muted/20 border-t border-border/60">
-            <div className="flex items-center gap-1.5">
+          <div className="flex h-10 items-center justify-between px-4 bg-muted/30 border-t border-border/50">
+            {/* 左侧自定义动作 */}
+            <div className="flex items-center gap-1.5 min-w-0">
               {bottomActions.map((action) => (
                 <ActionButton
                   key={action.key}
@@ -283,14 +281,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
               ))}
             </div>
 
-            <div className="flex items-center gap-1 ml-auto">
+            {/* 右侧系统按钮组 */}
+            <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
                 <button
                   type="button"
                   onClick={handleCopy}
-                  aria-label={t('textInputArea.copyContent')}
-                  title={t('textInputArea.copyContent')}
-                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 >
                   <Copy className="h-4 w-4" />
                 </button>
@@ -299,9 +296,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                 <button
                   type="button"
                   onClick={handleClear}
-                  aria-label={t('textInputArea.clear')}
-                  title={t('textInputArea.clear')}
-                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 >
                   <X className="h-4 w-4" />
                 </button>
@@ -311,7 +306,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
         )}
       </div>
 
-      {/* 错误提示区域 */}
+      {/* 错误提示 */}
       {displayError && (
         <p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
           {displayError}
diff --git a/pages/TextStatistics/index.tsx b/pages/TextStatistics/index.tsx
index 9f44c9d..6720a14 100644
--- a/pages/TextStatistics/index.tsx
+++ b/pages/TextStatistics/index.tsx
@@ -3,15 +3,10 @@ import { FileText } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import TextInputArea from '@/components/TextInputArea';
 import { formatByteSize, getTextStats } from '@/utils/textStatistics';
-import { textStatisticsPageStyles } from '@/config/pageTheme';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { useContextMenuData } from '@/utils/useContextMenuData';
+import { cn } from '@/lib/utils';
 
-/**
- * 文本统计页面组件
- *
- * 提供实时的文本分析功能，包括字符数、单词数、行数和字节大小。
- */
 export default function Index() {
   const { t } = useLazyTranslation('textStatistics');
   const [text, setText] = useState('');
@@ -22,8 +17,7 @@ export default function Index() {
 
   useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
 
-  // 实时计算统计信息，使用 useMemo 优化性能
-  // 对于 10,000 字符以上的文本，Intl.Segmenter 也能保持良好的性能
+  // 实时计算统计信息，由 useMemo 拦截非必要计算
   const stats = useMemo(() => getTextStats(text), [text]);
 
   const statItems = [
@@ -34,49 +28,45 @@ export default function Index() {
   ];
 
   return (
-    <div>
-      <div className="p-2">
-        {/* 头部区域 */}
-        <PageHeader
-          title={t('textStatistics:pageTitle')}
-          subtitle={t('textStatistics:pageSubtitle')}
-          icon={<FileText />}
-          iconColor={textStatisticsPageStyles.primaryColor}
-        />
+    <div className="p-4 w-full space-y-4 animate-in fade-in duration-300">
+      {/* 头部区域 */}
+      <PageHeader
+        title={t('textStatistics:pageTitle')}
+        subtitle={t('textStatistics:pageSubtitle')}
+        icon={<FileText />}
+        iconColor="text-purple-500"
+      />
 
-        {/* 文本输入区域 */}
-        <TextInputArea
-          value={text}
-          onChange={setText}
-          placeholder={t('textStatistics:placeholder')}
-          minRows={8}
-          maxRows={15}
-          showClear={false}
-        />
+      {/* 文本输入区域 */}
+      <TextInputArea
+        value={text}
+        onChange={setText}
+        placeholder={t('textStatistics:placeholder')}
+        minRows={10}
+        maxRows={18}
+        showClear={true}
+        allowCopy={true}
+      />
 
-        {/* 统计结果展示区域 */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
-          {statItems.map((item) => (
-            <div
-              key={item.label}
-              className="p-2 text-center rounded-2xl border transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] min-h-[64px] md:min-h-[90px] flex flex-row md:flex-col items-center justify-between md:justify-center px-3 md:px-2 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(156,39,176,0.15)] hover:border-purple-600"
-              style={{
-                backgroundColor: `${textStatisticsPageStyles.primaryColor}0a`,
-                borderColor: `${textStatisticsPageStyles.primaryColor}1a`,
-              }}
-            >
-              <span className="text-muted-foreground whitespace-nowrap mb-0 md:mb-1">
-                {item.label}
-              </span>
-              <span
-                className="break-all font-semibold"
-                style={{ color: textStatisticsPageStyles.primaryColor }}
-              >
-                {item.value}
-              </span>
-            </div>
-          ))}
-        </div>
+      {/* 统计结果展示区域 */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {statItems.map((item) => (
+          <div
+            key={item.label}
+            className={cn(
+              'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
+              'transition-all duration-200 ease-out',
+              'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
+            )}
+          >
+            <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
+              {item.label}
+            </span>
+            <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
+              {item.value}
+            </span>
+          </div>
+        ))}
       </div>
     </div>
   );