From 14d85e5265ba005fb7e4d6da5306ed410cbf68f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <2712495353@qq.com>
Date: Wed, 8 Jul 2026 23:24:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E4=B8=80=E8=87=B4=E6=80=A7=E5=92=8C=E5=8F=AF?=
 =?UTF-8?q?=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。
- 在 ConverterForm.tsx 中简化类名，移除冗余样式。
- 在 LiveClock.tsx 中调整样式，优化文本显示。
- 在 ResultView.tsx 中更新布局和样式，提升视觉效果。
---
 src/lib/utils.ts                              |  3 ++-
 .../Timestamp/components/ConverterForm.tsx    | 16 +++++-----------
 src/pages/Timestamp/components/LiveClock.tsx  | 19 ++++++++-----------
 src/pages/Timestamp/components/ResultView.tsx |  9 ++++-----
 4 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b4b4fa2..9ad0df4 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }
diff --git a/src/pages/Timestamp/components/ConverterForm.tsx b/src/pages/Timestamp/components/ConverterForm.tsx
index 715574a..77f5f1c 100644
--- a/src/pages/Timestamp/components/ConverterForm.tsx
+++ b/src/pages/Timestamp/components/ConverterForm.tsx
@@ -41,10 +41,7 @@ export default function ConverterForm({
           placeholder={INPUT_PLACEHOLDERS[mode]}
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          className={cn(
-            'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
-            error && 'border-destructive focus-visible:ring-destructive',
-          )}
+          className={cn('h-10', error && 'border-destructive')}
         />
 
         {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
@@ -60,16 +57,13 @@ export default function ConverterForm({
         />
 
         <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+          <SelectTrigger>
             <SelectValue placeholder="选择时区" />
           </SelectTrigger>
-          <SelectContent className="max-h-64 font-mono">
+
+          <SelectContent className="max-h-64">
             {ZONES.map((z) => (
-              <SelectItem
-                key={z}
-                value={z}
-                className="text-xs font-semibold focus:bg-accent cursor-pointer"
-              >
+              <SelectItem key={z} value={z} className="cursor-pointer">
                 {z}
               </SelectItem>
             ))}
diff --git a/src/pages/Timestamp/components/LiveClock.tsx b/src/pages/Timestamp/components/LiveClock.tsx
index 40748b4..2700266 100644
--- a/src/pages/Timestamp/components/LiveClock.tsx
+++ b/src/pages/Timestamp/components/LiveClock.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
@@ -7,7 +8,7 @@ import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
-interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LiveClockProps extends HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
   onUseNow: (val: number) => void;
 }
@@ -28,18 +29,14 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
   return (
     <div
       className={cn(
-        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+        'flex items-center gap-3 px-3 h-10 rounded-lg font-bold text-[12px] border px-[20px]',
         className,
       )}
       {...props}
     >
-      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
-        当前时间戳
-      </span>
+      <span>当前时间戳</span>
 
-      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
-        {text}
-      </span>
+      <span className="flex-1 text-sm ">{text}</span>
 
       <Button
         type="button"
@@ -50,12 +47,12 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
         title="填充到下方"
         variant="ghost"
         size="icon"
-        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+        className="h-7 w-7"
       >
         <Clock className="w-3.5 h-3.5" />
       </Button>
 
-      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7" />
     </div>
   );
 }
diff --git a/src/pages/Timestamp/components/ResultView.tsx b/src/pages/Timestamp/components/ResultView.tsx
index 464601a..56113e6 100644
--- a/src/pages/Timestamp/components/ResultView.tsx
+++ b/src/pages/Timestamp/components/ResultView.tsx
@@ -34,16 +34,15 @@ export default function ResultView({
         转换结果
       </span>
 
-      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
-        <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
-          {result}
-        </span>
+      <div className="bg-card border p-4 rounded-lg flex items-center gap-3 justify-between">
+        <span className="break-all text-lg select-all flex-1">{result}</span>
+
         <CopyButton
           text={result}
           tooltip="复制结果"
           variant="ghost"
           size="icon"
-          className="h-7 w-7 text-muted-foreground hover:text-foreground"
+          className="h-7 w-7"
         />
       </div>
     </div>