Skip to content

Commit a18b992

Browse files
521xueweihan521xueweihan
committed
perf: rm rc-image
1 parent 5b2eead commit a18b992

File tree

12 files changed

+68
-145
lines changed

12 files changed

+68
-145
lines changed

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
"nprogress": "^0.2.0",
4141
"pino-http": "^10.2.0",
4242
"raw-loader": "^4.0.2",
43-
"rc-image": "^7.0.0-2",
4443
"rc-util": "^5.34.1",
4544
"react": "^18.1.0",
4645
"react-dom": "^18.1.0",

‎src/components/ImageWithPreview.tsx

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,90 @@
1-
import RcImage from 'rc-image';
2-
import { useEffect, useState } from 'react';
1+
import { useState } from 'react';
32
import { AiOutlineClose } from 'react-icons/ai';
43

5-
import 'rc-image/assets/index.css';
6-
74
import GifPlayButton from './loading/GifPlayButton';
85

96
const gifCoverImage = '!gif';
107

11-
const ImageWithPreview = (props: {
8+
interface ImageWithPreviewProps {
129
src: string;
1310
alt: string;
1411
[key: string]: any;
15-
}) => {
12+
}
13+
14+
const ImageWithPreview = ({ src, alt, ...rest }: ImageWithPreviewProps) => {
1615
const [imgSrc, setImgSrc] = useState(
17-
props.src?.endsWith('gif') ? `${props.src}${gifCoverImage}` : props.src
16+
src?.endsWith('gif') ? `${src}${gifCoverImage}` : src
1817
);
19-
const isGifThumb = imgSrc.endsWith(gifCoverImage);
20-
const isGif = imgSrc?.endsWith('gif') && !isGifThumb;
21-
const sourceIsGif = props.src?.endsWith('gif');
22-
23-
useEffect(() => {
24-
if (props.src?.endsWith('gif')) {
25-
setImgSrc(`${props.src}${gifCoverImage}`);
26-
} else {
27-
setImgSrc(props.src);
28-
}
29-
}, [props.src]);
18+
const sourceIsGif = src?.endsWith('gif');
19+
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
3020

3121
const handleLoadGif = (e: React.MouseEvent) => {
3222
e.stopPropagation();
3323
setTimeout(() => {
3424
if (sourceIsGif) {
35-
setImgSrc(imgSrc?.replace(gifCoverImage, ''));
25+
setImgSrc(src);
3626
}
3727
}, 300);
3828
};
3929

30+
const handleOpenPreview = () => {
31+
setIsPreviewOpen(true);
32+
};
33+
34+
const handleClosePreview = () => {
35+
setIsPreviewOpen(false);
36+
};
37+
38+
const handleWheel = (e: React.MouseEvent) => {
39+
e.preventDefault();
40+
setIsPreviewOpen(false);
41+
};
42+
4043
return (
41-
<div className='relative flex'>
42-
<RcImage
43-
{...props}
44-
src={imgSrc}
45-
style={{
46-
opacity: isGifThumb ? '0.9' : '1',
47-
width: '100%',
48-
height: 'auto',
49-
}}
50-
preview={{
51-
icons: { close: <AiOutlineClose style={{ fontSize: 13 }} /> },
52-
toolbarRender: () => <></>,
53-
}}
54-
/>
55-
{sourceIsGif && (
56-
<div className='absolute top-0 left-0 h-full w-full opacity-100'>
44+
<>
45+
<div className='relative flex'>
46+
<img
47+
{...rest}
48+
src={imgSrc}
49+
alt={alt}
50+
style={{
51+
opacity: imgSrc.endsWith(gifCoverImage) ? 0.9 : 1,
52+
width: '100%',
53+
height: 'auto',
54+
cursor: 'zoom-in',
55+
}}
56+
onClick={handleOpenPreview}
57+
/>
58+
{sourceIsGif && imgSrc.endsWith(gifCoverImage) && (
5759
<div
5860
onClick={handleLoadGif}
59-
className={`flex h-full cursor-pointer items-center justify-center transition-all duration-300 ${
60-
isGif ? 'scale-75 opacity-0' : 'scale-100 opacity-100'
61-
}`}
61+
className='absolute top-0 left-0 flex h-full w-full cursor-pointer items-center justify-center'
6262
>
6363
<GifPlayButton />
6464
</div>
65+
)}
66+
</div>
67+
{isPreviewOpen && (
68+
<div
69+
className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75'
70+
onClick={handleClosePreview}
71+
onWheel={handleWheel}
72+
>
73+
<img
74+
src={src}
75+
alt={alt}
76+
className='max-h-full max-w-full object-contain'
77+
style={{ cursor: 'zoom-out' }}
78+
/>
79+
<button
80+
className='absolute top-4 right-4 rounded-full bg-black bg-opacity-50 p-1 text-white'
81+
onClick={handleClosePreview}
82+
>
83+
<AiOutlineClose style={{ fontSize: 13 }} />
84+
</button>
6585
</div>
6686
)}
67-
</div>
87+
</>
6888
);
6989
};
7090

‎src/components/layout/FooterLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ const FooterLink: React.FC<FooterLinkProps> = ({
1212
className = '',
1313
}) => {
1414
return (
15+
// eslint-disable-next-line react/jsx-no-target-blank
1516
<a
1617
className={`cursor-pointer hover:text-blue-500 ${className}`}
1718
target='_blank'
1819
href={href}
1920
aria-label='footer-link'
20-
rel='noreferrer'
2121
>
2222
{children}
2323
</a>

‎src/components/navbar/RedirectBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const RedirectBar = ({ text = '跳转中...', target, i18n_lang }: Props) => {
1212
{target != '/' && (
1313
<div className='flex px-4 pb-3 text-gray-500'>
1414
{target}
15-
<a className='ml-3' target='_blank' href={target} rel='noreferrer'>
15+
<a className='ml-3' href={target}>
1616
{i18n_lang == 'en'
1717
? "Click here if you're stuck"
1818
: '⚠️卡住就手动点这里⚠️'}

‎src/components/respository/Tabs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Tabs = ({ repo, t, i18n_lang }: RepositoryProps) => {
2727
<ImageWithPreview
2828
src={repo?.image_url}
2929
className='rounded-lg border border-gray-200 dark:border-none'
30-
alt='图片'
30+
alt={`${repo.name} image`}
3131
/>
3232
</div>
3333
)}

‎src/components/side/Recommend.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { RecommendItem, SideProps } from '@/types/home';
1313
const RecommendList = ({ repositories }: { repositories: RecommendItem[] }) => (
1414
<div className='dark:text-gray-300'>
1515
{repositories.map((item) => (
16-
<Link prefetch={false} href={`/repository/${item.rid}/`} key={item.rid}>
16+
<Link prefetch={false} href={`/repository/${item.rid}`} key={item.rid}>
1717
<div className='flex cursor-pointer flex-row rounded-md py-2 hover:bg-gray-50 hover:text-blue-400 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-blue-400'>
1818
<div className='flex w-full items-center px-1'>
1919
<img

‎src/components/user/CommentList.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,7 @@ export const CommentList = ({ uid, t, i18n_lang }: Props) => {
6464
</Button>
6565
</FeedbackModal>
6666
)}
67-
<a
68-
href={`/${item.belong}/${item.belong_id}`}
69-
target='_blank'
70-
rel='noreferrer'
71-
>
67+
<a href={`/${item.belong}/${item.belong_id}`}>
7268
<Button
7369
variant='light'
7470
className='h-7 p-2 font-normal dark:border-gray-300 dark:bg-gray-800 dark:text-gray-300'

‎src/pages/article/[aid].tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ const ArticlePage: NextPage<ArticleProps> = ({ article }) => {
3535
/>
3636
</div>
3737
) : (
38+
// eslint-disable-next-line react/jsx-no-target-blank
3839
<a
3940
href='https://www.buymeacoffee.com/hellogithub'
4041
className='flex justify-center'
4142
target='_blank'
42-
rel='noreferrer'
4343
>
4444
<img
4545
src='https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png'

‎src/pages/onefile/code/[oid].tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,6 @@ const OneFileDetailPage: NextPage<OneFileProps> = ({ onefile }) => {
6060
<a
6161
className='flex cursor-pointer items-center justify-center rounded-md border py-0.5 px-1 hover:border-blue-500 hover:text-current active:!text-gray-400 dark:border-gray-700 md:hover:text-blue-500'
6262
href={onefile.demo_url}
63-
target='_blank'
64-
rel='noreferrer'
6563
>
6664
<GoPlay className='mr-1' size={14} />
6765
{t('code.play')}
@@ -71,8 +69,6 @@ const OneFileDetailPage: NextPage<OneFileProps> = ({ onefile }) => {
7169
<a
7270
className='flex cursor-pointer items-center justify-center rounded-md border py-0.5 px-1 hover:border-blue-500 hover:text-current active:!text-gray-400 dark:border-gray-700 md:hover:text-blue-500'
7371
href={onefile.repo_url}
74-
target='_blank'
75-
rel='noreferrer'
7672
>
7773
<GoLink className='mr-1' size={14} />
7874
{t('code.vite')}

‎src/styles/fix-rc-image.css

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)