From e68c2f7d314311f44fe6946e50587f50c397dded Mon Sep 17 00:00:00 2001
From: brzhang <brzhang@brzhangdeMacBook-Pro.local>
Date: Wed, 14 Aug 2024 17:03:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96=E4=B8=80=E4=B8=8B?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scripts/themes/default-theme.js | 180 ++++++++++++++-------
 src/assets/scripts/util.js                 |   3 +
 2 files changed, 121 insertions(+), 62 deletions(-)

diff --git a/src/assets/scripts/themes/default-theme.js b/src/assets/scripts/themes/default-theme.js
index ab4c8e1f6..b1d3978fd 100644
--- a/src/assets/scripts/themes/default-theme.js
+++ b/src/assets/scripts/themes/default-theme.js
@@ -1,4 +1,5 @@
 let baseColor = `#3f3f3f`
+let baseBorderColor = `rgba(215, 16, 166, 0.8)`
 
 export default {
   BASE: {
@@ -6,66 +7,93 @@ export default {
     'line-height': `1.75`,
   },
   block: {
-    // 一级标题样式
     h1: {
-      'font-size': `1.2em`,
+      'font-size': `1.4em`,
       'text-align': `center`,
       'font-weight': `bold`,
       display: `table`,
       margin: `2em auto 1em`,
-      padding: `0 1em`,
-      'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
+      padding: `0.5em 1em`,
+      'border-bottom': `2px solid ${baseBorderColor}`,
       color: baseColor,
+      'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `translateY(-3px)`,
+        'box-shadow': `0 10px 20px rgba(0,0,0,0.1)`,
+      },
     },
 
-    // 二级标题样式
     h2: {
-      'font-size': `1.2em`,
+      'font-size': `1.3em`,
       'text-align': `center`,
       'font-weight': `bold`,
       display: `table`,
       margin: `4em auto 2em`,
-      padding: `0 0.2em`,
-      background: `rgba(0, 152, 116, 0.9)`,
+      padding: `0.3em 1em`,
+      background: `${baseBorderColor}`,
       color: `#fff`,
+      'border-radius': `8px`,
+      'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `scale(1.05)`,
+        'box-shadow': `0 6px 8px rgba(0,0,0,0.15)`,
+      },
     },
 
-    // 三级标题样式
     h3: {
       'font-weight': `bold`,
-      'font-size': `1.1em`,
+      'font-size': `1.2em`,
       margin: `2em 8px 0.75em 0`,
       'line-height': `1.2`,
-      'padding-left': `8px`,
-      'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
+      'padding-left': `12px`,
+      'border-left': `4px solid ${baseBorderColor}`,
+      'border-bottom': `1px solid ${baseBorderColor}`,
       color: baseColor,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        'padding-left': `16px`,
+        'border-left-width': `6px`,
+      },
     },
 
-    // 四级标题样式
     h4: {
       'font-weight': `bold`,
-      'font-size': `1em`,
+      'font-size': `1.1em`,
       margin: `2em 8px 0.5em`,
       color: `rgba(66, 185, 131, 0.9)`,
+      transition: `color 0.3s ease`,
+      '&:hover': {
+        color: `rgba(66, 185, 131, 1)`,
+      },
     },
 
-    // 段落样式
     p: {
       margin: `1.5em 8px`,
       'letter-spacing': `0.1em`,
       color: baseColor,
       'text-align': `justify`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `translateX(3px)`,
+      },
     },
 
-    // 引用样式
     blockquote: {
-      'font-style': `normal`,
-      'border-left': `none`,
-      padding: `1em`,
-      'border-radius': `8px`,
-      color: `rgba(0,0,0,0.5)`,
-      background: `#f7f7f7`,
+      'font-style': `italic`,
+      'border-left': `4px solid ${baseBorderColor}`,
+      padding: `1em 1em 1em 2em`,
+      'border-radius': `6px`,
+      color: `rgba(0,0,0,0.6)`,
+      background: `linear-gradient(to right, #f7f7f7, #ffffff)`,
       margin: `2em 8px`,
+      'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `translateY(-3px)`,
+        'box-shadow': `0 6px 8px rgba(0,0,0,0.1)`,
+      },
     },
 
     blockquote_p: {
@@ -74,6 +102,7 @@ export default {
       'font-size': `1em`,
       display: `block`,
     },
+
     code_pre: {
       'font-size': `14px`,
       'overflow-x': `auto`,
@@ -81,59 +110,72 @@ export default {
       padding: `1em`,
       'line-height': `1.5`,
       margin: `10px 8px`,
+      background: `#f4f4f4`,
+      'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        'box-shadow': `inset 0 0 15px rgba(0,0,0,0.1)`,
+      },
     },
+
     code: {
       margin: 0,
-      'white-space': `nowrap`,
-      'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
+      'white-space': `pre-wrap`,
+      'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
     },
 
     image: {
-      'border-radius': `4px`,
+      'border-radius': `8px`,
       display: `block`,
       margin: `0.1em auto 0.5em`,
       width: `100% !important`,
+      'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `scale(1.02)`,
+        'box-shadow': `0 6px 12px rgba(0,0,0,0.15)`,
+      },
     },
 
     ol: {
       'margin-left': `0`,
-      'padding-left': `1em`,
+      'padding-left': `1.5em`,
       color: baseColor,
     },
 
     ul: {
       'margin-left': `0`,
-      'padding-left': `1em`,
-      'list-style': `circle`,
+      'padding-left': `1.5em`,
+      'list-style': `none`,
       color: baseColor,
     },
 
-    footnotes: {
-      margin: `0.5em 8px`,
-      'font-size': `80%`,
-      color: baseColor,
+    'ul li::before': {
+      content: `"•"`,
+      color: `rgba(0, 152, 116, 0.9)`,
+      'font-weight': `bold`,
+      display: `inline-block`,
+      width: `1em`,
+      'margin-left': `-1em`,
     },
 
-    figure: {
-      margin: `1.5em 8px`,
-      color: baseColor,
-    },
     hr: {
-      'border-style': `solid`,
-      'border-width': `1px 0 0`,
-      'border-color': `rgba(0,0,0,0.1)`,
-      '-webkit-transform-origin': `0 0`,
-      '-webkit-transform': `scale(1, 0.5)`,
-      'transform-origin': `0 0`,
-      transform: `scale(1, 0.5)`,
+      border: `none`,
+      height: `1px`,
+      background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
+      margin: `2em 0`,
     },
   },
   inline: {
     listitem: {
       'text-indent': `-1em`,
       display: `block`,
-      margin: `0.2em 8px`,
+      margin: `0.5em 8px`,
       color: baseColor,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        transform: `translateX(5px)`,
+      },
     },
 
     codespan: {
@@ -142,52 +184,66 @@ export default {
       background: `rgba(27,31,35,.05)`,
       padding: `3px 5px`,
       'border-radius': `4px`,
-      // 'word-break': `break-all`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        background: `rgba(27,31,35,.1)`,
+      },
     },
 
     link: {
       color: `#576b95`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        color: `#1a3f6f`,
+        'text-decoration': `underline`,
+      },
     },
 
-    wx_link: {
-      color: `#576b95`,
-      'text-decoration': `none`,
-    },
-
-    // 字体加粗样式
     strong: {
       color: `rgba(15, 76, 129, 0.9)`,
       'font-weight': `bold`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        color: `rgba(15, 76, 129, 1)`,
+        'text-shadow': `1px 1px 2px rgba(15, 76, 129, 0.2)`,
+      },
     },
 
     table: {
-      'border-collapse': `collapse`,
+      'border-collapse': `separate`,
+      'border-spacing': `0`,
       'text-align': `center`,
       margin: `1em 8px`,
       color: baseColor,
+      'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
+      'border-radius': `8px`,
+      overflow: `hidden`,
     },
 
     thead: {
-      background: `rgba(0, 0, 0, 0.05)`,
+      background: `linear-gradient(45deg, rgba(0, 152, 116, 0.9), rgba(0, 192, 146, 0.9))`,
+      color: `#fff`,
       'font-weight': `bold`,
-      color: baseColor,
     },
 
     td: {
       border: `1px solid #dfdfdf`,
-      padding: `0.25em 0.5em`,
+      padding: `0.5em 1em`,
       color: baseColor,
+      transition: `all 0.3s ease`,
     },
 
-    footnote: {
-      'font-size': `12px`,
-      color: baseColor,
+    'tr:hover td': {
+      background: `rgba(0, 152, 116, 0.05)`,
     },
 
-    figcaption: {
-      'text-align': `center`,
-      color: `#888`,
-      'font-size': `0.8em`,
+    footnote: {
+      'font-size': `12px`,
+      color: `rgba(0,0,0,0.5)`,
+      transition: `all 0.3s ease`,
+      '&:hover': {
+        color: `rgba(0,0,0,0.7)`,
+      },
     },
   },
 }
diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js
index 4ce9b3b44..672f88c56 100644
--- a/src/assets/scripts/util.js
+++ b/src/assets/scripts/util.js
@@ -8,7 +8,10 @@ const createCustomTheme = (theme, color) => {
   customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
   customTheme.block.h2[`background`] = color
   customTheme.block.h3[`border-left`] = `3px solid ${color}`
+  customTheme.block.h3[`border-bottom`] = `1px dashed ${color}`
   customTheme.block.h4[`color`] = color
+  customTheme.block.blockquote[`border-left`] = `4px solid ${color}`
+
   customTheme.inline.strong[`color`] = color
   return customTheme
 }