From 52ca4306fd010f29fcec53147a2c7e48d443ac69 Mon Sep 17 00:00:00 2001
From: Gabe Yuan <gabe@zq.com>
Date: Tue, 28 Nov 2023 11:41:45 +0800
Subject: [PATCH] feat: blockquote style

---
 src/config/i18n.js         |  4 ++++
 src/config/index.js        |  3 +++
 src/views/Content/index.js | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/src/config/i18n.js b/src/config/i18n.js
index 94a0f78..ae14358 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -335,6 +335,10 @@ export const I18N = {
     zh: `高亮`,
     en: `Highlight`,
   },
+  blockquote: {
+    zh: `引用`,
+    en: `Blockquote`,
+  },
   diy_style: {
     zh: `自定义样式`,
     en: `Custom Style`,
diff --git a/src/config/index.js b/src/config/index.js
index dc2cab0..637cd28 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -269,6 +269,7 @@ export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
 export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
+export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
 export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
 export const OPT_STYLE_ALL = [
   OPT_STYLE_NONE,
@@ -278,6 +279,7 @@ export const OPT_STYLE_ALL = [
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
   OPT_STYLE_DIY,
 ];
 export const OPT_STYLE_USE_COLOR = [
@@ -286,6 +288,7 @@ export const OPT_STYLE_USE_COLOR = [
   OPT_STYLE_DASHLINE,
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
 ];
 
 export const OPT_MOUSEKEY_DISABLE = "mk_disable";
diff --git a/src/views/Content/index.js b/src/views/Content/index.js
index f1236ed..512fe58 100644
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -7,6 +7,7 @@ import {
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
   OPT_STYLE_DIY,
   DEFAULT_COLOR,
   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")`
   filter: blur(0.2em);
   -webkit-filter: blur(0.2em);
@@ -86,6 +99,12 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
           {children}
         </HighlightSpan>
       );
+    case OPT_STYLE_BLOCKQUOTE: // 引用
+      return (
+        <BlockquoteSpan $lineColor={bgColor || DEFAULT_COLOR}>
+          {children}
+        </BlockquoteSpan>
+      );
     case OPT_STYLE_DIY: // 自定义
       return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
     default: