injectlib/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2025-11-25 19:37:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: smaller animation

Browse Source
This commit is contained in:
Junyan Qin
2025-11-24 16:15:22 +08:00
parent 93a9973406
commit 8feb61ecb3
3 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/package.json
View File

@@ -61,7 +61,10 @@
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"react-photo-view": "^1.2.7", "react-photo-view": "^1.2.7",
"react-syntax-highlighter": "^16.1.0", "react-syntax-highlighter": "^16.1.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-highlight": "^7.0.2",
"rehype-raw": "^7.0.0", "rehype-raw": "^7.0.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwind-merge": "^3.2.0", "tailwind-merge": "^3.2.0",

20
web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx
View File

@@ -219,15 +219,21 @@ export default function PluginCardComponent({
{/* Hover overlay with action buttons */} {/* Hover overlay with action buttons */}
<div <div
className={`absolute inset-0 bg-gray-100/65 dark:bg-black/40 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-300 z-10 ${isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'}`} className={`absolute inset-0 bg-gray-100/65 dark:bg-black/40 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-300 z-10 ${
isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
> >
<Button <Button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onViewReadme(cardVO); onViewReadme(cardVO);
}} }}
className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`} className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md flex items-center gap-2 transition-all duration-300 ${
style={{ transitionDelay: isHovered ? '50ms' : '0ms' }} isHovered
? 'translate-y-0 opacity-100'
: 'translate-y-2 opacity-0'
}`}
style={{ transitionDelay: isHovered ? '20ms' : '0ms' }}
> >
<FileText className="w-4 h-4" /> <FileText className="w-4 h-4" />
{t('plugins.readme')} {t('plugins.readme')}
@@ -238,8 +244,12 @@ export default function PluginCardComponent({
onCardClick(); onCardClick();
}} }}
variant="outline" variant="outline"
className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`} className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-md flex items-center gap-2 transition-all duration-300 ${
style={{ transitionDelay: isHovered ? '100ms' : '0ms' }} isHovered
? 'translate-y-0 opacity-100'
: 'translate-y-2 opacity-0'
}`}
style={{ transitionDelay: isHovered ? '40ms' : '0ms' }}
> >
<Settings className="w-4 h-4" /> <Settings className="w-4 h-4" />
{t('plugins.config')} {t('plugins.config')}

16
web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
View File

@@ -138,12 +138,16 @@ export default function PluginMarketCardComponent({
{/* Hover overlay with action buttons */} {/* Hover overlay with action buttons */}
<div <div
className={`absolute inset-0 bg-gray-100/65 dark:bg-black/40 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-300 ${isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'}`} className={`absolute inset-0 bg-gray-100/65 dark:bg-black/40 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-300 ${
isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
> >
<Button <Button
onClick={handleInstallClick} onClick={handleInstallClick}
className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`} className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${
style={{ transitionDelay: isHovered ? '50ms' : '0ms' }} isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
}`}
style={{ transitionDelay: isHovered ? '20ms' : '0ms' }}
> >
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
{t('market.install')} {t('market.install')}
@@ -151,8 +155,10 @@ export default function PluginMarketCardComponent({
<Button <Button
onClick={handleViewDetailsClick} onClick={handleViewDetailsClick}
variant="outline" variant="outline"
className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}`} className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-all duration-300 ${
style={{ transitionDelay: isHovered ? '100ms' : '0ms' }} isHovered ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
}`}
style={{ transitionDelay: isHovered ? '40ms' : '0ms' }}
> >
<ExternalLink className="w-4 h-4" /> <ExternalLink className="w-4 h-4" />
{t('market.viewDetails')} {t('market.viewDetails')}