feat: blockquote style

This commit is contained in:
Gabe Yuan
2023-11-28 11:41:45 +08:00
parent da368ee612
commit 52ca4306fd
3 changed files with 26 additions and 0 deletions

View File

@@ -335,6 +335,10 @@ export const I18N = {
zh: `高亮`, zh: `高亮`,
en: `Highlight`, en: `Highlight`,
}, },
blockquote: {
zh: `引用`,
en: `Blockquote`,
},
diy_style: { diy_style: {
zh: `自定义样式`, zh: `自定义样式`,
en: `Custom Style`, en: `Custom Style`,

View File

@@ -269,6 +269,7 @@ export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮 export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
export const OPT_STYLE_DIY = "diy_style"; // 自定义样式 export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
export const OPT_STYLE_ALL = [ export const OPT_STYLE_ALL = [
OPT_STYLE_NONE, OPT_STYLE_NONE,
@@ -278,6 +279,7 @@ export const OPT_STYLE_ALL = [
OPT_STYLE_WAVYLINE, OPT_STYLE_WAVYLINE,
OPT_STYLE_FUZZY, OPT_STYLE_FUZZY,
OPT_STYLE_HIGHLIGHT, OPT_STYLE_HIGHLIGHT,
OPT_STYLE_BLOCKQUOTE,
OPT_STYLE_DIY, OPT_STYLE_DIY,
]; ];
export const OPT_STYLE_USE_COLOR = [ export const OPT_STYLE_USE_COLOR = [
@@ -286,6 +288,7 @@ export const OPT_STYLE_USE_COLOR = [
OPT_STYLE_DASHLINE, OPT_STYLE_DASHLINE,
OPT_STYLE_WAVYLINE, OPT_STYLE_WAVYLINE,
OPT_STYLE_HIGHLIGHT, OPT_STYLE_HIGHLIGHT,
OPT_STYLE_BLOCKQUOTE,
]; ];
export const OPT_MOUSEKEY_DISABLE = "mk_disable"; export const OPT_MOUSEKEY_DISABLE = "mk_disable";

View File

@@ -7,6 +7,7 @@ import {
OPT_STYLE_WAVYLINE, OPT_STYLE_WAVYLINE,
OPT_STYLE_FUZZY, OPT_STYLE_FUZZY,
OPT_STYLE_HIGHLIGHT, OPT_STYLE_HIGHLIGHT,
OPT_STYLE_BLOCKQUOTE,
OPT_STYLE_DIY, OPT_STYLE_DIY,
DEFAULT_COLOR, DEFAULT_COLOR,
MSG_TRANS_CURRULE, MSG_TRANS_CURRULE,
@@ -34,6 +35,18 @@ const LineSpan = styled("span")`
} }
`; `;
const BlockquoteSpan = styled("span")`
opacity: 0.6;
-webkit-opacity: 0.6;
display: block;
padding: 0 0.75em;
border-left: 0.25em solid ${(props) => props.$lineColor};
&:hover {
opacity: 1;
-webkit-opacity: 1;
}
`;
const FuzzySpan = styled("span")` const FuzzySpan = styled("span")`
filter: blur(0.2em); filter: blur(0.2em);
-webkit-filter: blur(0.2em); -webkit-filter: blur(0.2em);
@@ -86,6 +99,12 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
{children} {children}
</HighlightSpan> </HighlightSpan>
); );
case OPT_STYLE_BLOCKQUOTE: // 引用
return (
<BlockquoteSpan $lineColor={bgColor || DEFAULT_COLOR}>
{children}
</BlockquoteSpan>
);
case OPT_STYLE_DIY: // 自定义 case OPT_STYLE_DIY: // 自定义
return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>; return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
default: default: