refactor: 更新样式和组件结构以提升一致性和可读性

- 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。
- 在 ConverterForm.tsx 中简化类名,移除冗余样式。
- 在 LiveClock.tsx 中调整样式,优化文本显示。
- 在 ResultView.tsx 中更新布局和样式,提升视觉效果。
This commit is contained in:
2026-07-08 23:24:54 +08:00
parent 8424fa219f
commit 83866c8ae0
4 changed files with 19 additions and 28 deletions
@@ -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>
))}