perf: beautify url tag style

pull/90/head
moonrailgun 2 years ago
parent a53321ad41
commit db4e4e8958

@ -1,7 +1,13 @@
import { Link } from '@capital/component'; import { Link } from '@capital/component';
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import type { TagProps } from '../bbcode/type'; import type { TagProps } from '../bbcode/type';
const UnderlineSpan = styled.span`
text-decoration: underline;
text-decoration-style: dotted;
`;
export const UrlTag: React.FC<TagProps> = React.memo((props) => { export const UrlTag: React.FC<TagProps> = React.memo((props) => {
const { node } = props; const { node } = props;
const text = node.content.join(''); const text = node.content.join('');
@ -9,17 +15,25 @@ export const UrlTag: React.FC<TagProps> = React.memo((props) => {
if (url.startsWith('/')) { if (url.startsWith('/')) {
// 内部地址,使用 react-router 进行导航 // 内部地址,使用 react-router 进行导航
return <Link to={url}>{text}</Link>; return (
<Link to={url}>
<UnderlineSpan>{text}</UnderlineSpan>
</Link>
);
} }
if (url.startsWith(window.location.origin)) { if (url.startsWith(window.location.origin)) {
// 内部地址,使用 react-router 进行导航 // 内部地址,使用 react-router 进行导航
return <Link to={url.replace(window.location.origin, '')}>{text}</Link>; return (
<Link to={url.replace(window.location.origin, '')}>
<UnderlineSpan>{text}</UnderlineSpan>
</Link>
);
} }
return ( return (
<a href={url} title={text} target="_blank" rel="noopener noreferrer"> <a href={url} title={text} target="_blank" rel="noopener noreferrer">
{text} <UnderlineSpan>{text}</UnderlineSpan>
</a> </a>
); );
}); });

Loading…
Cancel
Save