From 0906d1f425837388d81a1184069a9c17fd3102d4 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, 19 Jun 2026 10:27:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(Timestamp):=20=E9=87=8D=E6=9E=84=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E6=88=B3=E8=BD=AC=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20ConverterForm=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Timestamp 页面中引入 ConverterForm 组件，简化输入和转换逻辑。
- 新增常量定义，包括模式选项、单位选项和输入占位符，提升代码可读性。
- 更新 useTimestampConverter 钩子，添加输入占位符支持。
- 引入 ToolCard 组件以统一样式和结构，优化页面布局。
---
 .../Timestamp/components/ConverterForm.tsx    |  76 +++++++++++++
 src/pages/Timestamp/components/ToolCard.tsx   |  15 +++
 src/pages/Timestamp/constants.ts              |  18 +++
 src/pages/Timestamp/index.tsx                 | 106 ++----------------
 src/pages/Timestamp/useTimestampConverter.ts  |   4 +-
 5 files changed, 122 insertions(+), 97 deletions(-)
 create mode 100644 src/pages/Timestamp/components/ConverterForm.tsx
 create mode 100644 src/pages/Timestamp/components/ToolCard.tsx

diff --git a/src/pages/Timestamp/components/ConverterForm.tsx b/src/pages/Timestamp/components/ConverterForm.tsx
new file mode 100644
index 0000000..0653ddd
--- /dev/null
+++ b/src/pages/Timestamp/components/ConverterForm.tsx
@@ -0,0 +1,76 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { MODE_OPTIONS, UNIT_OPTIONS, ZONES, type ZoneType } from '../constants';
+import type { UseTimestampConverterReturn } from '../useTimestampConverter';
+import ToolCard from './ToolCard';
+
+type ConverterFormProps = Omit<UseTimestampConverterReturn, 'result' | 'handleUseNow'>;
+
+export default function ConverterForm({
+  mode,
+  input,
+  unit,
+  zone,
+  error,
+  inputPlaceholder,
+  setMode,
+  setInput,
+  setUnit,
+  setZone,
+}: ConverterFormProps) {
+  return (
+    <ToolCard className="gap-4">
+      <SwitchButtonGroup value={mode} options={MODE_OPTIONS} onChange={setMode} size="small" />
+
+      <div className="flex flex-col gap-1.5">
+        <Input
+          type="text"
+          placeholder={inputPlaceholder}
+          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',
+          )}
+        />
+
+        {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
+      </div>
+
+      <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+        <SwitchButtonGroup
+          value={unit}
+          options={UNIT_OPTIONS}
+          onChange={setUnit}
+          size="small"
+          className="sm:w-auto shrink-0"
+        />
+
+        <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
+          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+            <SelectValue placeholder="选择时区" />
+          </SelectTrigger>
+          <SelectContent className="max-h-64 font-mono">
+            {ZONES.map((z) => (
+              <SelectItem
+                key={z}
+                value={z}
+                className="text-xs font-semibold focus:bg-accent cursor-pointer"
+              >
+                {z}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </ToolCard>
+  );
+}
diff --git a/src/pages/Timestamp/components/ToolCard.tsx b/src/pages/Timestamp/components/ToolCard.tsx
new file mode 100644
index 0000000..489fc72
--- /dev/null
+++ b/src/pages/Timestamp/components/ToolCard.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { CARD_CLASS } from '../constants';
+
+interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export default function ToolCard({ children, className, ...props }: ToolCardProps) {
+  return (
+    <div className={cn(CARD_CLASS, className)} {...props}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/pages/Timestamp/constants.ts b/src/pages/Timestamp/constants.ts
index 8077d34..199182b 100644
--- a/src/pages/Timestamp/constants.ts
+++ b/src/pages/Timestamp/constants.ts
@@ -9,6 +9,24 @@ export type ModeType = 'ts2dt' | 'dt2ts';
 export type UnitType = 'ms' | 's';
 export type ZoneType = (typeof ZONES)[number];
 
+export const MODE_OPTIONS: { value: ModeType; label: string }[] = [
+  { value: 'ts2dt', label: '时间戳转日期' },
+  { value: 'dt2ts', label: '日期转时间戳' },
+];
+
+export const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
+  { value: 'ms', label: '毫秒' },
+  { value: 's', label: '秒' },
+];
+
+export const INPUT_PLACEHOLDERS: Record<ModeType, string> = {
+  ts2dt: '输入时间戳...',
+  dt2ts: 'YYYY-MM-DD HH:mm:ss',
+};
+
+export const CARD_CLASS =
+  'p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col';
+
 const DIVISORS: Record<UnitType, number> = { ms: 1, s: 1000 };
 
 export function msToUnit(ms: number, unit: UnitType): number {
diff --git a/src/pages/Timestamp/index.tsx b/src/pages/Timestamp/index.tsx
index 47812a8..31f699d 100644
--- a/src/pages/Timestamp/index.tsx
+++ b/src/pages/Timestamp/index.tsx
@@ -1,108 +1,22 @@
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { ZONES } from './constants';
-import type { ModeType, UnitType, ZoneType } from './constants';
 import LiveClock from './components/LiveClock';
+import ConverterForm from './components/ConverterForm';
 import ResultView from './components/ResultView';
+import ToolCard from './components/ToolCard';
 import { useTimestampConverter } from './useTimestampConverter';
-import { cn } from '@/lib/utils';
-
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-const MODE_OPTIONS: { value: ModeType; label: string }[] = [
-  { value: 'ts2dt', label: '时间戳转日期' },
-  { value: 'dt2ts', label: '日期转时间戳' },
-];
-
-const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
-  { value: 'ms', label: '毫秒' },
-  { value: 's', label: '秒' },
-];
 
 export default function Index() {
-  const {
-    mode,
-    input,
-    unit,
-    zone,
-    result,
-    error,
-    setMode,
-    setInput,
-    setUnit,
-    setZone,
-    handleUseNow,
-  } = useTimestampConverter();
+  const { result, handleUseNow, ...formProps } = useTimestampConverter();
 
   return (
-    <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
-      <div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
-        <LiveClock unit={unit} onUseNow={handleUseNow} />
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <LiveClock unit={formProps.unit} onUseNow={handleUseNow} />
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
-            <div className="flex flex-col gap-4">
-              <SwitchButtonGroup
-                value={mode}
-                options={MODE_OPTIONS}
-                onChange={setMode}
-                size="small"
-              />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+        <ConverterForm {...formProps} />
 
-              <div className="flex flex-col gap-1.5">
-                <Input
-                  type="text"
-                  placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
-                  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',
-                  )}
-                />
-
-                {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
-              </div>
-
-              <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
-                <SwitchButtonGroup
-                  value={unit}
-                  options={UNIT_OPTIONS}
-                  onChange={setUnit}
-                  size="small"
-                  className="sm:w-auto shrink-0"
-                />
-
-                <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-                  <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
-                    <SelectValue placeholder="选择时区" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-64 font-mono">
-                    {ZONES.map((z) => (
-                      <SelectItem
-                        key={z}
-                        value={z}
-                        className="text-xs font-semibold focus:bg-accent cursor-pointer"
-                      >
-                        {z}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-
-          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
-            <ResultView result={result} showEmptyPlaceholder />
-          </div>
-        </div>
+        <ToolCard className="h-full">
+          <ResultView result={result} showEmptyPlaceholder />
+        </ToolCard>
       </div>
     </div>
   );
diff --git a/src/pages/Timestamp/useTimestampConverter.ts b/src/pages/Timestamp/useTimestampConverter.ts
index 400258d..b8bda29 100644
--- a/src/pages/Timestamp/useTimestampConverter.ts
+++ b/src/pages/Timestamp/useTimestampConverter.ts
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType, ModeType } from './constants';
-import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
+import { DATE_FORMAT, INPUT_PLACEHOLDERS, msToUnit, dayjsFromTimestamp } from './constants';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -11,6 +11,7 @@ export interface UseTimestampConverterReturn {
   zone: ZoneType;
   result: string;
   error: string;
+  inputPlaceholder: string;
 
   setMode: (mode: ModeType) => void;
   setInput: (value: string) => void;
@@ -100,6 +101,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     zone,
     result,
     error,
+    inputPlaceholder: INPUT_PLACEHOLDERS[mode],
     setMode: handleSetMode,
     setInput,
     setUnit,