From e59bd3611018f8b5d709d8e86796bebe9960a450 Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:53:34 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E4=BC=98=E5=8C=96=E6=96=B0=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E8=AE=BF=E9=97=AE=E4=B8=AD=E7=9A=84=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E6=A0=B7=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/article/ArticleViewWindow.vue   |  28 ++-
 .../views/article/styles/bl-preview-toc.scss  | 223 +++++++++++-------
 2 files changed, 153 insertions(+), 98 deletions(-)

diff --git a/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue b/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue
index d9e4840..c787070 100644
--- a/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue
+++ b/blossom-editor/src/renderer/src/views/article/ArticleViewWindow.vue
@@ -3,27 +3,29 @@
     <AppHeader simple></AppHeader>
   </div>
   <div class="article-view-window-root">
+    <div class="preview bl-preview" :style="editorStyle" v-html="article?.html" ref="WindowPreviewRef" style="margin-right: 5px"></div>
+    <el-backtop target=".preview" :right="350" :bottom="50">
+      <div class="iconbl bl-a-doubleonline-line backtop"></div>
+    </el-backtop>
+
     <!-- the toc -->
     <div class="bl-preview-toc-block">
-      <div class="toc-subtitle">《{{ article?.name }}》</div>
-      <div class="toc-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 class="doc-info">
+        <div class="doc-name">《{{ 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="doc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}</div>
+        <div class="doc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}</div>
+        <div class="toc-title">目录</div>
       </div>
-      <div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}</div>
-      <div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}</div>
-      <div class="toc-title">目录</div>
       <div class="toc-content">
-        <div v-for="toc in tocs" :key="toc.id" :class="[toc.clazz]" @click="toScroll(toc.id)">
+        <div v-for="toc in tocs" :key="toc.id" :class="['toc-item', toc.clazz]" @click="toScroll(toc.id)">
           {{ toc.content }}
         </div>
       </div>
     </div>
-
-    <div class="preview bl-preview" :style="editorStyle" v-html="article?.html" ref="WindowPreviewRef"></div>
-    <el-backtop target=".preview" :right="50" :bottom="50">
-      <div class="iconbl bl-a-doubleonline-line backtop"></div>
-    </el-backtop>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss b/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss
index 4a4efd3..ad8b4e9 100644
--- a/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss
+++ b/blossom-editor/src/renderer/src/views/article/styles/bl-preview-toc.scss
@@ -4,10 +4,148 @@
   transition:
     width 0.2s,
     height 0.2s;
+}
+
+// 块的目录, 用在新窗口中
+.bl-preview-toc-block {
+  @include box(400px, 100%);
+  color: #5e5e5e;
+  border-left: 1px solid var(--bl-preview-toc-border-color);
+  padding-right: 5px;
+
+  .doc-info {
+    .doc-name {
+      color: #ababab;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-bottom: 10px;
+    }
+    .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;
+    }
+  }
+
+  .toc-title {
+    @include font(25px, 700);
+    width: 100%;
+    border-top: 1px solid var(--bl-preview-toc-border-color);
+    margin-top: 10px;
+    padding-top: 8px;
+    margin-bottom: 8px;
+  }
 
   .toc-content {
+    @include box(100%, calc(100% - 130px));
+    @include font(14px);
+    padding-bottom: 20px;
+    padding-left: 5px;
     overflow-y: scroll;
 
+    .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;
+    }
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .bl-preview-toc-absolute {
+    max-height: 500px !important;
+    background-color: red;
+
+    .toc-content {
+      max-height: calc(500px - 150px - 60px - 20px) !important;
+    }
+  }
+}
+
+// 浮动的目录, 用在编辑器中
+.bl-preview-toc-absolute {
+  @include font(12px);
+  @include themeShadow(2px 4px 7px 2px rgba(49, 49, 49, 0.3), 2px 4px 7px 2px rgb(28, 28, 28));
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  padding-top: 0px;
+  background-color: #4d4d4dbd;
+  border-radius: 10px;
+  z-index: 2002;
+  max-height: 700px;
+  overflow: hidden;
+  user-select: none;
+
+  .toc-title {
+    @include box(100%, 40px);
+    @include font(15px, 700);
+    @include themeColor(#ffffff, #cdcdcd);
+    padding-top: 10px;
+    cursor: move;
+  }
+
+  .toc-content {
+    @include themeColor(#e2e2e2, #bcbcbc);
+    overflow-y: scroll;
+    width: 100%;
+    max-height: calc(700px - 150px - 60px - 20px);
+
+    .toc-1 {
+      @include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
+    }
+
     .toc-1,
     .toc-2,
     .toc-3,
@@ -56,86 +194,6 @@
       padding-left: 50px;
     }
   }
-}
-
-// 块的目录, 用在新窗口中
-.bl-preview-toc-block {
-  @include box(400px, 100%);
-  color: #5e5e5e;
-  border-right: 3px solid var(--bl-preview-toc-border-color);
-
-  .toc-title {
-    @include box(100%, 50px);
-    @include font(30px, 700);
-    border-top: 3px solid var(--bl-preview-toc-border-color);
-    margin-top: 10px;
-    padding: 10px 0;
-  }
-
-  .toc-subtitle {
-    @include box(100%, 20px);
-    @include font(12px);
-    color: #ababab;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    white-space: pre;
-  }
-
-  .toc-content {
-    @include box(100%, calc(100% - 130px));
-    @include font(13px);
-    padding-bottom: 10px;
-
-    .toc-1 {
-      border-top: 2px solid var(--bl-preview-toc-border-color);
-    }
-  }
-}
-
-@media screen and (max-height: 800px) {
-  .bl-preview-toc-absolute {
-    max-height: 500px !important;
-    background-color: red;
-
-    .toc-content {
-      max-height: calc(500px - 150px - 60px - 20px) !important;
-    }
-  }
-}
-
-// 浮动的目录, 用在编辑器中
-.bl-preview-toc-absolute {
-  @include font(12px);
-  @include themeShadow(2px 4px 7px 2px rgba(49, 49, 49, 0.3), 2px 4px 7px 2px rgb(28, 28, 28));
-  position: absolute;
-  top: 50px;
-  right: 50px;
-  padding-top: 0px;
-  background-color: #4d4d4dbd;
-  border-radius: 10px;
-  z-index: 2002;
-  max-height: 700px;
-  overflow: hidden;
-  user-select: none;
-
-  .toc-title {
-    @include box(100%, 40px);
-    @include font(15px, 700);
-    @include themeColor(#ffffff, #cdcdcd);
-    padding-top: 10px;
-    cursor: move;
-  }
-
-  .toc-content {
-    @include themeColor(#e2e2e2, #bcbcbc);
-    width: 100%;
-    max-height: calc(700px - 150px - 60px - 20px);
-
-    .toc-1 {
-      @include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
-    }
-  }
 
   .img-title {
     @include box(100%, 20px);
@@ -196,9 +254,4 @@
 
 .bl-preview-toc-absolute.is-expand-close {
   @include box(50px, 40px);
-  // .toc-title {
-  //   span {
-  //     display: none;
-  //   }
-  // }
 }