From 3c527ca86ca8e92a726d72ec717c0729c2c0adc4 Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:43:29 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E5=8D=9A=E5=AE=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blossom-web/index.html                        |   2 -
 blossom-web/src/App.vue                       |   6 +-
 blossom-web/src/assets/styles/css/main.css    |  10 --
 blossom-web/src/components/BLTag.vue          |   1 +
 blossom-web/src/views/article/Articles.vue    |  14 +-
 .../views/article/scripts/doc-tree-detail.ts  |   4 +-
 .../src/views/article/styles/doc-content.scss |  13 +-
 .../src/views/article/styles/doc-toc.scss     | 164 ++++++++++--------
 .../src/views/article/styles/doc-tree.scss    |   1 +
 .../src/views/index/ChartLineWords.vue        |   2 +-
 blossom-web/src/views/index/HomeSubject.vue   |   7 +-
 blossom-web/src/views/index/HomeUserInfo.vue  |   1 +
 12 files changed, 107 insertions(+), 118 deletions(-)

diff --git a/blossom-web/index.html b/blossom-web/index.html
index f67acfa..584135e 100644
--- a/blossom-web/index.html
+++ b/blossom-web/index.html
@@ -5,11 +5,9 @@
     <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="referrer" content="no-referrer" />
-    <!-- <title>Blossom</title> -->
     <script src="/config.js"></script>
     <style>
       * {
-        font-family: 'Consolas', 'Menlo', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
         box-sizing: border-box;
       }
 
diff --git a/blossom-web/src/App.vue b/blossom-web/src/App.vue
index 648ca33..9c71327 100644
--- a/blossom-web/src/App.vue
+++ b/blossom-web/src/App.vue
@@ -16,9 +16,6 @@ const userStore = useUserStore()
 onMounted(async () => {
   await userStore.getUserinfoOpen()
   initCustomTheme()
-  console.log(userStore.userParams.WEB_BLOG_SHOW_ARTICLE_NAME);
-  
-
   // 优先使用后台配置的博客名称, 否则使用默认
   if (isNotBlank(userStore.userParams.WEB_LOGO_NAME)) {
     document.title = userStore.userParams.WEB_LOGO_NAME
@@ -43,8 +40,7 @@ const THEME_STYLE_TAG_ID = 'blossom-blog-theme-css'
  */
 const initCustomTheme = () => {
   const rgb = userStore.userParams.WEB_BLOG_COLOR
-  console.log(rgb)
-  if (!rgb.toLowerCase().startsWith('rgb(')) {
+  if (rgb && !rgb.toLowerCase().startsWith('rgb(')) {
     return
   }
   const prefix = rgb.substring(4, rgb.length - 1)
diff --git a/blossom-web/src/assets/styles/css/main.css b/blossom-web/src/assets/styles/css/main.css
index ff3fa0a..58851e7 100644
--- a/blossom-web/src/assets/styles/css/main.css
+++ b/blossom-web/src/assets/styles/css/main.css
@@ -24,19 +24,9 @@ body {
 /** ================================== 滚动条 ================================== */
 /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
 ::-webkit-scrollbar {
-  /* 滚动条宽度 */
   width: 5px;
-  /* 滚动条高度 */
   height: 5px;
-  /* 滚动条里槽的背景色 */
-  /* background-color: #eeeeee; */
 }
-
-::-webkit-scrollbar:hover {
-  /* width: 8px; */
-  /* height: 8px; */
-}
-
 /* 定义滑块 内阴影+圆角 */
 ::-webkit-scrollbar-thumb {
   background-color: #c7c7c7;
diff --git a/blossom-web/src/components/BLTag.vue b/blossom-web/src/components/BLTag.vue
index 8da4b62..5aa4454 100644
--- a/blossom-web/src/components/BLTag.vue
+++ b/blossom-web/src/components/BLTag.vue
@@ -70,6 +70,7 @@ const props = defineProps({
   }
 
   .tag-content {
+    font-family: 'Jetbrains Mono';
     font-size: inherit;
     font-weight: inherit;
     line-height: 12px;
diff --git a/blossom-web/src/views/article/Articles.vue b/blossom-web/src/views/article/Articles.vue
index 246a424..28c2fab 100644
--- a/blossom-web/src/views/article/Articles.vue
+++ b/blossom-web/src/views/article/Articles.vue
@@ -39,7 +39,7 @@
                   <div class="name-wrapper" :style="{ maxWidth: isNotBlank(data.icon) ? 'calc(100% - 25px)' : '100%' }">
                     {{ data.n }}
                   </div>
-                  <bl-tag v-for="tag in tags(data)" style="margin-top: 3px" :bg-color="tag.bgColor" :icon="tag.icon">
+                  <bl-tag v-for="tag in tags(data)" :bg-color="tag.bgColor" :icon="tag.icon">
                     {{ tag.content }}
                   </bl-tag>
                 </div>
@@ -66,24 +66,24 @@
 
       <div class="toc-container" :style="tocStyle">
         <div class="viewer-toc">
-          <div v-if="article.id != 0">
-            <div class="toc-subtitle" style="font-size: 15px">{{ article.name }}</div>
-            <div class="toc-subtitle">
+          <div v-if="article.id != 0" class="doc-info">
+            <div class="doc-name" style="font-size: 15px">{{ article.name }}</div>
+            <div class="doc-subtitle">
               <span class="iconbl bl-pen-line"></span> {{ article.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article.uv }} |
               <span class="iconbl bl-like-line"></span> {{ article.likes }}
             </div>
-            <div class="toc-subtitle">
+            <div class="doc-subtitle">
               <span class="iconbl bl-a-clock3-line"></span> 公开
               {{ article.openTime }}
             </div>
-            <div class="toc-subtitle">
+            <div class="doc-subtitle">
               <span class="iconbl bl-a-clock3-line"></span> 修改
               {{ article.syncTime }}
             </div>
           </div>
           <div class="toc-title">目录</div>
           <div class="toc-content">
-            <div v-for="toc in tocList" :key="toc.id" :class="[toc.clazz]" @click="toScroll(toc.id)">
+            <div v-for="toc in tocList" :key="toc.id" :class="['toc-item', 'link', toc.clazz]" @click="toScroll(toc.id)">
               {{ toc.content }}
             </div>
           </div>
diff --git a/blossom-web/src/views/article/scripts/doc-tree-detail.ts b/blossom-web/src/views/article/scripts/doc-tree-detail.ts
index e200f28..be41ec2 100644
--- a/blossom-web/src/views/article/scripts/doc-tree-detail.ts
+++ b/blossom-web/src/views/article/scripts/doc-tree-detail.ts
@@ -29,9 +29,9 @@ export const tags = (doc: DocTree) => {
   let icons: any = []
   doc.t.forEach((tag) => {
     if (tag.toLocaleLowerCase() === 'subject') {
-      icons.unshift({ content: '专题', bgColor: '#939393', icon: 'bl-a-lowerrightpage-line' })
+      icons.unshift({ content: '专题', bgColor: '#565656', icon: 'bl-a-lowerrightpage-line' })
     } else if (tag.toLocaleLowerCase() === 'toc') {
-      icons.push({ content: '目录', bgColor: '#565656' })
+      icons.push({ content: '目录', bgColor: '#939393' })
     } else {
       icons.push({ content: tag })
     }
diff --git a/blossom-web/src/views/article/styles/doc-content.scss b/blossom-web/src/views/article/styles/doc-content.scss
index 9339c5f..cdc5f12 100644
--- a/blossom-web/src/views/article/styles/doc-content.scss
+++ b/blossom-web/src/views/article/styles/doc-content.scss
@@ -35,17 +35,6 @@
       font-size: 1.2em !important;
     }
 
-    ::-webkit-scrollbar {
-      /* 滚动条里槽的背景色 */
-      background-color: transparent;
-    }
-
-    /* 定义滑块 内阴影+圆角 */
-    ::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background-color: #967777;
-    }
-
     :deep(a) {
       color: var(--el-color-primary);
       font-weight: bold;
@@ -265,7 +254,7 @@
       overflow: hidden;
 
       * {
-        font-family: 'Jetbrains Mono' !important;
+        font-family: 'Jetbrains Mono';
         font-size: 0.95em;
       }
 
diff --git a/blossom-web/src/views/article/styles/doc-toc.scss b/blossom-web/src/views/article/styles/doc-toc.scss
index 3f11cc5..5afa5e6 100644
--- a/blossom-web/src/views/article/styles/doc-toc.scss
+++ b/blossom-web/src/views/article/styles/doc-toc.scss
@@ -1,8 +1,6 @@
 .toc-container {
   @include box(270px, 100%, 270px, 270px);
   border-left: 1px solid #eeeeee;
-  overflow: auto;
-  transition: 0.3s;
 
   &::-webkit-scrollbar-thumb {
     background-color: #ebebeb;
@@ -10,83 +8,103 @@
 
   .viewer-toc {
     @include box(100%, 100%);
-    color: #5e5e5e;
-    padding: 10px;
+    padding: 10px 5px 10px 10px;
     z-index: 1000;
     transition: 0.3s;
 
-    .toc-title {
-      @include box(100%, 40px);
-      @include font(25px, 700);
-      line-height: 40px;
-      margin-top: 10px;
-      padding-top: 10px;
-      border-top: 3px solid #bcbcbc;
-    }
-
-    .toc-subtitle {
-      @include flex(row, flex-start, center);
-      @include font(12px);
-      width: 100%;
-      color: #ababab;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      white-space: pre;
-      margin-top: 5px;
-    }
-
-    .toc-content {
-      @include font(14px);
-      width: 100%;
-      overflow-y: auto;
-      margin-top: 20px;
-
-      .toc-1,
-      .toc-2,
-      .toc-3,
-      .toc-4,
-      .toc-5,
-      .toc-6 {
-        min-height: 20px;
-        cursor: pointer;
-
-        &:hover {
-          font-weight: bold;
-          color: var(--el-color-primary);
-        }
+    .doc-info {
+      .doc-name {
+        color: #ababab;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-bottom: 10px;
       }
-
-      .toc-1 {
-        font-size: 1.1em;
+      .doc-subtitle {
+        @include flex(row, flex-start, center);
+        @include font(12px);
+        font-family: 'Jetbrains Mono';
+        width: 100%;
+        color: #ababab;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        white-space: pre;
         margin-top: 5px;
-
-        &:first-child {
-          margin: 0;
-          padding: 0;
-          border: 0;
-        }
-      }
-
-      .toc-2 {
-        padding-left: 10px;
-      }
-
-      .toc-3 {
-        padding-left: 20px;
-      }
-
-      .toc-4 {
-        padding-left: 30px;
-      }
-
-      .toc-5 {
-        padding-left: 40px;
-      }
-
-      .toc-6 {
-        padding-left: 50px;
       }
     }
   }
 }
+
+.toc-title {
+  @include box(100%, 50px);
+  @include font(25px, 700);
+  color: #4c4c4c;
+  line-height: 40px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 3px solid #dedede;
+}
+
+.toc-content {
+  @include font(14px);
+  font-family: 'Jetbrains Mono';
+  height: calc(100% - 60px - 70px - 20px);
+  margin-top: 5px;
+  padding-bottom: 5px;
+  overflow-y: auto;
+  padding-left: 5px;
+
+  .toc-item {
+    width: auto;
+    padding: 4px 0;
+    color: #5e5e5e;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 20%;
+      left: -5px;
+      width: 2px;
+      height: 60%;
+      background: var(--el-color-primary-light-4);
+      border-radius: 10px;
+      opacity: 0;
+      transition: opacity 0.1s;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+
+  .toc-2 {
+    margin-left: 10px;
+  }
+
+  .toc-3 {
+    margin-left: 20px;
+  }
+
+  .toc-4 {
+    margin-left: 30px;
+  }
+
+  .toc-5 {
+    margin-left: 40px;
+  }
+
+  .toc-6 {
+    margin-left: 50px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ebebeb;
+  }
+}
diff --git a/blossom-web/src/views/article/styles/doc-tree.scss b/blossom-web/src/views/article/styles/doc-tree.scss
index 6b0158d..85a8ba8 100644
--- a/blossom-web/src/views/article/styles/doc-tree.scss
+++ b/blossom-web/src/views/article/styles/doc-tree.scss
@@ -1,5 +1,6 @@
 .doc-tree-container {
   @include box(300px, 100%, 300px, 300px);
+  font-family: 'Jetbrains Mono';
   border-right: 1px solid var(--el-border-color);
   transition: 0.1s;
 
diff --git a/blossom-web/src/views/index/ChartLineWords.vue b/blossom-web/src/views/index/ChartLineWords.vue
index 71c63ce..8c65563 100644
--- a/blossom-web/src/views/index/ChartLineWords.vue
+++ b/blossom-web/src/views/index/ChartLineWords.vue
@@ -61,7 +61,7 @@ const formartNumber = (param: number): string => {
 const renderChart = (callback?: any) => {
   chartLineLog.setOption({
     title: {
-      bottom: 45,
+      bottom: 25,
       right: 25,
       text: '历史笔记字数',
       textStyle: {
diff --git a/blossom-web/src/views/index/HomeSubject.vue b/blossom-web/src/views/index/HomeSubject.vue
index dde228e..5e4b9a9 100644
--- a/blossom-web/src/views/index/HomeSubject.vue
+++ b/blossom-web/src/views/index/HomeSubject.vue
@@ -49,6 +49,7 @@ const toToc = (articleId: number) => {
 .home-subject-root {
   @include box(100%, 100%);
   @include flex(row, flex-start, flex-start);
+  font-family: 'Jetbrains Mono';
   flex-wrap: wrap;
   align-content: flex-start;
   padding: 20px;
@@ -71,18 +72,12 @@ const toToc = (articleId: number) => {
     .iconbl {
       font-size: 12px;
       margin-right: 5px;
-      opacity: 0;
-      transition: opacity 0.3s;
     }
 
     &:hover {
       border: 0;
       box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.5), -3px -3px 10px rgba(255, 255, 255, 0.1);
 
-      .iconbl {
-        opacity: 1;
-      }
-
       .name {
         text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, 0.5);
       }
diff --git a/blossom-web/src/views/index/HomeUserInfo.vue b/blossom-web/src/views/index/HomeUserInfo.vue
index 8706682..aeadbea 100644
--- a/blossom-web/src/views/index/HomeUserInfo.vue
+++ b/blossom-web/src/views/index/HomeUserInfo.vue
@@ -52,6 +52,7 @@ const links = () => {
 .home-userinfo-root {
   @include box(100%, 100%);
   @include flex(column, center, center);
+  font-family: 'Jetbrains Mono';
 
   .userinfo-desc {
     @include flex(row, flex-start, flex-end);