fix: remove all unnecessary animations from all pages

- Remove dead code animations (animate-in, fade-in, slide-in, zoom-in, shake) from tailwindcss-animate plugin (not installed)
- Remove decorative transition effects (transition-all, transition-colors) from all page components
- Remove scale effects (active:scale-95) from buttons
- Remove bounce animations (animate-bounce) from icons
- Keep functional animate-spin on loading spinners as they provide essential loading feedback

Affected pages: Dashboard, Timestamp, Jwt, JsonTools, Base64Converter, HtmlToMarkdown, MarkdownToHtml, QrCode, TextStatistics
This commit is contained in:
雨霖铃
2026-05-25 20:29:12 +08:00
parent af2262d2c9
commit 0f3b6c4cd8
23 changed files with 64 additions and 83 deletions
+2 -2
View File
@@ -10,11 +10,11 @@ export default function GeneratePanel() {
const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5 animate-in fade-in duration-300">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
{/* 左翼:高性能受控输入翼终端 */}
<div
className={cn(
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4 transition-all duration-200',
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
)}
>
+2 -2
View File
@@ -61,7 +61,7 @@ export default function ParsePanel() {
/* 💡 统一大视觉轴:
- 追加 p-0.5 微隔离,配合 gap-6 建立与生成面板(GeneratePanel)绝对像素对齐的网格天平。
*/
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5 animate-in fade-in duration-300">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
{/* 左翼:图片接收/拖拽/剪贴板上传终端 */}
<div className="flex flex-col h-full">
<ImageUploader
@@ -78,7 +78,7 @@ export default function ParsePanel() {
{/* 右翼:高阶解析出码只读终端 */}
<div
className={cn(
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4 transition-all duration-200',
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
// 💡 视觉对称增强:加入相同的聚焦变量环联动,使双翼权重达成完美绝对平衡
'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
)}
+3 -3
View File
@@ -23,7 +23,7 @@ export default function Index() {
- 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁,开启标准的 w-full 全自适应包裹。
- 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4,接管系统级重排!
*/}
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none animate-in fade-in duration-300">
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
{/* 流式中央控制切流卡:注入 sm 断点防御,防范单栏状态下发生变形 */}
<div className="w-full sm:w-fit pt-0.5">
<SwitchButtonGroup
@@ -40,11 +40,11 @@ export default function Index() {
*/}
<div className="w-full pt-1.5">
{qrCode.mode === 'generate' ? (
<div className="animate-in fade-in duration-200">
<div>
<GeneratePanel />
</div>
) : (
<div className="animate-in fade-in duration-200">
<div>
<ParsePanel />
</div>
)}