Skip to content

Commit 82597e8

Browse files
author
ws-wangjg
committed
feat: antd icons animated
1 parent 8d28ce2 commit 82597e8

33 files changed

Lines changed: 1223 additions & 207 deletions

File tree

‎src/components/GlobalSearch/index.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React, { useState, useRef, useEffect, KeyboardEvent } from 'react'
23
import { Modal, Input, Avatar, InputRef, theme } from 'antd'
34
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable'
@@ -256,7 +257,11 @@ const SearchRow: React.FC<SearchRowProps> = ({ entry, idx, isActive, isDark, tok
256257
>
257258
{item.key}
258259
</span>
259-
{isActive && <EnterOutlined style={{ color: isDark ? '#666' : '#999', marginLeft: 12 }} />}
260+
{isActive && (
261+
<AnimatedIcon variant="spin" mode="hover">
262+
<EnterOutlined style={{ color: isDark ? '#666' : '#999', marginLeft: 12 }} />
263+
</AnimatedIcon>
264+
)}
260265
</button>
261266
)
262267
}
@@ -536,7 +541,15 @@ const GlobalSearchView: React.FC<GlobalSearchViewProps> = ({
536541
}}
537542
title={isFullscreen ? '退出全屏' : '全屏'}
538543
>
539-
{isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
544+
{isFullscreen ? (
545+
<AnimatedIcon variant="spin" mode="hover">
546+
<FullscreenExitOutlined />
547+
</AnimatedIcon>
548+
) : (
549+
<AnimatedIcon variant="spin" mode="hover">
550+
<FullscreenOutlined />
551+
</AnimatedIcon>
552+
)}
540553
</button>
541554
<button
542555
type="button"
@@ -552,15 +565,20 @@ const GlobalSearchView: React.FC<GlobalSearchViewProps> = ({
552565
}}
553566
title="关闭"
554567
>
555-
<CloseOutlined />
568+
<AnimatedIcon variant="spin" mode="hover">
569+
<CloseOutlined />
570+
</AnimatedIcon>
556571
</button>
557572
</div>
558573
</div>
559-
560574
<div style={{ padding: '16px 24px', flexShrink: 0 }}>
561575
<Input
562576
ref={inputRef}
563-
prefix={<SearchOutlined style={{ color: palette.inputPrefixColor }} />}
577+
prefix={
578+
<AnimatedIcon variant="spin" mode="hover">
579+
<SearchOutlined style={{ color: palette.inputPrefixColor }} />
580+
</AnimatedIcon>
581+
}
564582
placeholder="请输入...（支持中文、拼音及英文）"
565583
title="请输入...（支持中文、拼音及英文）"
566584
value={inputValue}
@@ -580,7 +598,6 @@ const GlobalSearchView: React.FC<GlobalSearchViewProps> = ({
580598
}}
581599
/>
582600
</div>
583-
584601
<div
585602
ref={listRef}
586603
style={{
@@ -616,7 +633,6 @@ const GlobalSearchView: React.FC<GlobalSearchViewProps> = ({
616633
))
617634
)}
618635
</div>
619-
620636
<div
621637
style={{
622638
padding: '12px 24px',
@@ -632,11 +648,19 @@ const GlobalSearchView: React.FC<GlobalSearchViewProps> = ({
632648
}}
633649
>
634650
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
635-
<ArrowUpOutlined style={{ fontSize: 10 }} />
636-
<ArrowDownOutlined style={{ fontSize: 10 }} /> 导航
651+
<AnimatedIcon variant="spin" mode="hover">
652+
<ArrowUpOutlined style={{ fontSize: 10 }} />
653+
</AnimatedIcon>
654+
<AnimatedIcon variant="spin" mode="hover">
655+
<ArrowDownOutlined style={{ fontSize: 10 }} />
656+
</AnimatedIcon>{' '}
657+
导航
637658
</span>
638659
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
639-
<EnterOutlined style={{ fontSize: 10, color: palette.enterIcon }} /> 选择
660+
<AnimatedIcon variant="spin" mode="hover">
661+
<EnterOutlined style={{ fontSize: 10, color: palette.enterIcon }} />
662+
</AnimatedIcon>{' '}
663+
选择
640664
</span>
641665
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
642666
<span

‎src/components/ResponsiveTable/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React from 'react'
23
import type { ReactNode } from 'react'
34
import type { TableProps } from 'antd'
@@ -457,7 +458,16 @@ const ResponsiveTable = <T,>(props: ResponsiveTableProps<T> & TableProps<T>) =>
457458
<span>操作</span>
458459
{showColumnSettings && (
459460
<Popover content={popContent} title="列设置">
460-
<Button icon={<SettingOutlined />} size="small" aria-label="列设置" title="列设置" />
461+
<Button
462+
icon={
463+
<AnimatedIcon variant="spin" mode="hover">
464+
<SettingOutlined />
465+
</AnimatedIcon>
466+
}
467+
size="small"
468+
aria-label="列设置"
469+
title="列设置"
470+
/>
461471
</Popover>
462472
)}
463473
</div>

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,4 @@ export { default as SliderCaptcha } from './stateless/SliderCaptcha'
154154
export { default as MdxEditor } from './stateless/MdxEditor'
155155
export { default as MoveChecker } from './stateless/MoveChecker'
156156
export { default as SafeHtml } from './stateless/SafeHtml'
157+
export { default as AnimatedIcon } from './stateless/AnimatedIcon'

‎src/components/stateless/FixTabPanel/index.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React, { useRef, useState } from 'react'
23
import { FloatButton } from 'antd'
34
import { VerticalAlignTopOutlined } from '@ant-design/icons'
@@ -39,7 +40,6 @@ const FixTabPanel = React.forwardRef(
3940
{...scrollProgressProps}
4041
/>
4142
)}
42-
4343
<div
4444
style={{
4545
position: 'relative',
@@ -54,9 +54,10 @@ const FixTabPanel = React.forwardRef(
5454
>
5555
{children}
5656
</div>
57-
5857
<FloatButton.BackTop target={() => containerNode} style={{ right: 6, bottom: 2 }}>
59-
<VerticalAlignTopOutlined style={{ fontSize: 20 }} />
58+
<AnimatedIcon variant="spin" mode="hover">
59+
<VerticalAlignTopOutlined style={{ fontSize: 20 }} />
60+
</AnimatedIcon>
6061
</FloatButton.BackTop>
6162
</div>
6263
)

‎src/components/stateless/LandingPage/index.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React from 'react'
23
import useSafeNavigate from '@app-hooks/useSafeNavigate'
34
import { Button } from 'antd'
@@ -13,7 +14,11 @@ const LandingPage = () => {
1314
<section className={styles.overlay} />
1415
<Button
1516
className={styles.rollback}
16-
icon={<ArrowLeftOutlined style={{ fontSize: 18 }} />}
17+
icon={
18+
<AnimatedIcon variant="spin" mode="hover">
19+
<ArrowLeftOutlined style={{ fontSize: 18 }} />
20+
</AnimatedIcon>
21+
}
1722
type="text"
1823
size="large"
1924
onClick={() => redirectTo('/')}

‎src/components/stateless/LanguageSwitcher/index.jsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React from 'react'
23
import { Button, Space, Tooltip } from 'antd'
34
import { useTranslation } from 'react-i18next'
@@ -17,12 +18,28 @@ const LanguageSwitcher = () => {
1718
<Space>
1819
{isZh && (
1920
<Tooltip title="Switch to English" placement="bottom">
20-
<Button icon={<GlobalOutlined />} size="small" onClick={() => handleLanguageChange('en')} />
21+
<Button
22+
icon={
23+
<AnimatedIcon variant="spin" mode="hover">
24+
<GlobalOutlined />
25+
</AnimatedIcon>
26+
}
27+
size="small"
28+
onClick={() => handleLanguageChange('en')}
29+
/>
2130
</Tooltip>
2231
)}
2332
{isEn && (
2433
<Tooltip title="切换为中文" placement="bottom">
25-
<Button size="small" icon={<TranslationOutlined />} onClick={() => handleLanguageChange('zh')} />
34+
<Button
35+
size="small"
36+
icon={
37+
<AnimatedIcon variant="spin" mode="hover">
38+
<TranslationOutlined />
39+
</AnimatedIcon>
40+
}
41+
onClick={() => handleLanguageChange('zh')}
42+
/>
2643
</Tooltip>
2744
)}
2845
</Space>

‎src/components/stateless/Loading/index.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React from 'react'
23
import { Spin } from 'antd'
34
import { LoadingOutlined } from '@ant-design/icons'
45

5-
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
6+
const antIcon = (
7+
<AnimatedIcon variant="spin" mode="hover">
8+
<LoadingOutlined style={{ fontSize: 24 }} spin />
9+
</AnimatedIcon>
10+
)
611
const Loading = ({ style = {} }) => (
712
<div
813
style={{

‎src/components/stateless/NoMatch/index.jsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React from 'react'
23
import { useLocation } from 'react-router-dom'
34
import { Button, Result, Flex, Typography, theme } from 'antd'
@@ -49,10 +50,25 @@ const NoMatch = () => {
4950
}
5051
extra={
5152
<Flex gap="middle" justify="center" style={{ marginTop: 24 }}>
52-
<Button icon={<RollbackOutlined />} onClick={goBack}>
53+
<Button
54+
icon={
55+
<AnimatedIcon variant="spin" mode="hover">
56+
<RollbackOutlined />
57+
</AnimatedIcon>
58+
}
59+
onClick={goBack}
60+
>
5361
返回上一页
5462
</Button>
55-
<Button type="primary" icon={<HomeOutlined />} onClick={() => redirectTo('/')}>
63+
<Button
64+
type="primary"
65+
icon={
66+
<AnimatedIcon variant="spin" mode="hover">
67+
<HomeOutlined />
68+
</AnimatedIcon>
69+
}
70+
onClick={() => redirectTo('/')}
71+
>
5672
返回首页
5773
</Button>
5874
</Flex>

‎src/components/stateless/NotificationDrawer/index.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import AnimatedIcon from '@stateless/AnimatedIcon'
12
import React, { useState } from 'react'
23
import { Badge, Button, Space, Typography, theme, Drawer } from 'antd'
34
import { useStore } from '@/store'
@@ -159,10 +160,27 @@ const NotificationDropdown = ({ iconColor, variant = 'inline', buttonStyle, ghos
159160
}}
160161
>
161162
<Space>
162-
<Button size="small" onClick={markAllRead} icon={<CheckCircleOutlined />}>
163+
<Button
164+
size="small"
165+
onClick={markAllRead}
166+
icon={
167+
<AnimatedIcon variant="spin" mode="hover">
168+
<CheckCircleOutlined />
169+
</AnimatedIcon>
170+
}
171+
>
163172
全部已读
164173
</Button>
165-
<Button size="small" onClick={clearAll} icon={<DeleteOutlined />} danger>
174+
<Button
175+
size="small"
176+
onClick={clearAll}
177+
icon={
178+
<AnimatedIcon variant="spin" mode="hover">
179+
<DeleteOutlined />
180+
</AnimatedIcon>
181+
}
182+
danger
183+
>
166184
清空
167185
</Button>
168186
<Button size="small" type="link" onClick={() => safeNavigate('/notifications')}>
@@ -177,7 +195,9 @@ const NotificationDropdown = ({ iconColor, variant = 'inline', buttonStyle, ghos
177195

178196
const iconNode = (
179197
<Badge count={unreadCount} size="small" overflowCount={49}>
180-
<BellOutlined style={{ fontSize: 16, color: iconColor }} />
198+
<AnimatedIcon variant="spin" mode="hover">
199+
<BellOutlined style={{ fontSize: 16, color: iconColor }} />
200+
</AnimatedIcon>
181201
</Badge>
182202
)
183203

‎src/components/stateless/PDFExport/index.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
'use client'
2+
import AnimatedIcon from '@stateless/AnimatedIcon'
23
import React, { useRef, useState, useCallback, useMemo } from 'react'
34
import * as echarts from 'echarts'
45
import html2canvas from 'html2canvas'
@@ -140,7 +141,9 @@ const PDFExportDemo: React.FC = () => {
140141
{contextHolder}
141142
<div style={{ marginBottom: '24px', textAlign: 'center' }}>
142143
<Title level={1} style={{ marginBottom: '8px' }}>
143-
<FileTextOutlined style={{ marginRight: '8px' }} />
144+
<AnimatedIcon variant="spin" mode="hover">
145+
<FileTextOutlined style={{ marginRight: '8px' }} />
146+
</AnimatedIcon>
144147
React 19 + ECharts 6 + Ant Design 5
145148
</Title>
146149
<Paragraph style={{ fontSize: '16px', color: '#666' }}>演示如何将包含图表的页面导出为PDF文件</Paragraph>
@@ -149,7 +152,11 @@ const PDFExportDemo: React.FC = () => {
149152
<Button
150153
type="primary"
151154
size="large"
152-
icon={<DownloadOutlined />}
155+
icon={
156+
<AnimatedIcon variant="spin" mode="hover">
157+
<DownloadOutlined />
158+
</AnimatedIcon>
159+
}
153160
onClick={exportToPDF}
154161
loading={isExporting}
155162
style={{ padding: '0 32px' }}
@@ -222,7 +229,9 @@ const PDFExportDemo: React.FC = () => {
222229
<Card style={{ marginBottom: '24px' }}>
223230
<div style={{ textAlign: 'center', marginBottom: '16px' }}>
224231
<Title level={3}>
225-
<BarChartOutlined style={{ marginRight: '8px' }} />
232+
<AnimatedIcon variant="spin" mode="hover">
233+
<BarChartOutlined style={{ marginRight: '8px' }} />
234+
</AnimatedIcon>
226235
销售趋势图表
227236
</Title>
228237
</div>

0 commit comments

Comments
 (0)