refactor: 更新样式和组件结构以提升一致性和可读性
- 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。 - 在 ConverterForm.tsx 中简化类名,移除冗余样式。 - 在 LiveClock.tsx 中调整样式,优化文本显示。 - 在 ResultView.tsx 中更新布局和样式,提升视觉效果。
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user