rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 移除无意义的 cn() 包装

Browse Source 
对仅含静态类名或单一三元表达式的 className 改用普通字符串，保留有条件合并或 prop 覆盖场景下的 cn() 用法。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
雨霖铃
2026-06-30 21:05:10 +08:00
parent 149883565d
commit d0825c5ec0
8 changed files with 49 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Base64Converter/components/Base64ConverterSection.tsx
+4 -8
View File
@@ -50,10 +50,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
setDirection(next);
};
const handleDownload = () => {
if (decoded) downloadBlob(decoded.blob, decodedFileName);
};
return (
<div className="w-full flex flex-col space-y-4 px-2">
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
@@ -115,7 +111,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
/>
</div>
)}
<Upload className={cn('w-8 h-8 text-primary')} />
<Upload className="w-8 h-8 text-primary" />
<span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
{info.name}
</span>
@@ -137,11 +133,11 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
</span>
<span className="text-[10px] font-medium text-muted-foreground/60">
{`最大文件大小：${maxFileSizeStr}`}
最大文件大小：{maxFileSizeStr}
</span>
{mode === 'image' && (
<span className="text-[10px] font-medium text-muted-foreground/50">
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式
</span>
)}
</div>
@@ -231,7 +227,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
blobSize={decoded.blob.size}
fileName={decodedFileName}
onFileNameChange={setCustomFileName}
onDownload={handleDownload}
onDownload={() => downloadBlob(decoded.blob, decodedFileName)}
>
{mode === 'image' && (
<div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
src/pages/Dashboard/index.tsx
+5 -24
View File
@@ -1,11 +1,10 @@
import { cn } from '@/lib/utils';
import { useDashboard } from './useDashboard';
export default function Index() {
const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
return (
<div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
<div className="flex flex-col gap-4 p-3.5 w-full h-auto select-none">
{showRecent && (
<div className="flex flex-col gap-2">
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
@@ -19,12 +18,7 @@ export default function Index() {
key={key}
type="button"
onClick={() => navigateTo(key)}
className={cn(
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
'border border-border/60 bg-card text-card-foreground',
'hover:bg-muted/40 hover:border-primary/30',
'transition-colors cursor-pointer',
)}
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border border-border/60 bg-card text-card-foreground hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
>
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
{feature.label}
@@ -42,9 +36,7 @@ export default function Index() {
{visibleFeatures.length === 0 ? (
<p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
) : (
<div
className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
>
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
{visibleFeatures.map(({ key, feature }) => {
const IconComponent = feature.icon;
return (
@@ -52,20 +44,9 @@ export default function Index() {
key={key}
type="button"
onClick={() => navigateTo(key)}
className={cn(
'group flex flex-col items-center justify-center gap-1.5',
'py-3 px-2 rounded-xl border border-border/50 bg-card',
'hover:bg-muted/40 hover:border-primary/30',
'transition-colors cursor-pointer',
)}
className="group flex flex-col items-center justify-center gap-1.5 py-3 px-2 rounded-xl border border-border/50 bg-card hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
>
<IconComponent
className={cn(
'h-5 w-5 text-muted-foreground/70',
'group-hover:text-foreground',
'transition-colors',
)}
/>
<IconComponent className="h-5 w-5 text-muted-foreground/70 group-hover:text-foreground transition-colors" />
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
{feature.label}
</span>