feat: 博客字体调整功能(#80)

blossom-web/src/views/article/ArticleSetting.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="detail">
+    <bl-row>
+      字体大小：
+      <el-button size="small" :icon="Plus" @click="increase()"></el-button>
+      <el-button size="small" :icon="Minus" @click="decrease()"></el-button>
+    </bl-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus, Minus } from '@element-plus/icons-vue'
+import { increase, decrease } from './article-setting'
+</script>
+
+<style scoped lang="scss">
+.detail {
+  @include flex(column, flex-start, flex-start);
+  height: 100%;
+  padding-top: 20px;
+  padding-bottom: 30px;
+  font-size: 13px;
+
+  .btns {
+    .iconbl {
+      margin-right: 15px;
+    }
+  }
+}
+</style>

blossom-web/src/views/article/Articles.vue

@@ -91,7 +91,7 @@
       </div>
 
       <div class="article" ref="PreviewRef">
-        <div class="bl-preview" v-html="article.html"></div>
+        <div class="bl-preview" :style="{ fontSize: getFontSize() }" v-html="article.html"></div>
       </div>
 
       <div class="toc-container" :style="tocStyle">
@@ -119,20 +119,30 @@
           </div>
         </div>
       </div>
+
+      <div class="workbench" @click="showSetting">
+        <el-icon color="#7b7b7ba9"><Setting /></el-icon>
+      </div>
     </div>
   </div>
+
+  <el-drawer v-model="isShowSetting" direction="btt" :with-header="true" :destroy-on-close="true" size="70px">
+    <ArticleSetting></ArticleSetting>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { ref, onUnmounted, nextTick } from 'vue'
-import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
+import { ArrowDownBold, ArrowRightBold, Setting } from '@element-plus/icons-vue'
 import { articleInfoOpenApi, articleInfoApi, docTreeOpenApi, docTreeApi } from '@/api/blossom'
 import { useUserStore } from '@/stores/user'
 import { isNull, isEmpty, isNotNull } from '@/assets/utils/obj'
-import DocTitle from './DocTitle.vue'
 import { useLifecycle } from '@/scripts/lifecycle'
+import DocTitle from './DocTitle.vue'
+import ArticleSetting from './ArticleSetting.vue'
 import 'katex/dist/katex.min.css'
+import { getFontSize } from './article-setting'
 
 const userStore = useUserStore()
 useLifecycle(
@@ -333,6 +343,15 @@ const onHtmlEventDispatch = (_t: any, _ty: any, _event: any, type: ArticleHtmlEv
     }
   }
 }
+
+//#region setting
+const isShowSetting = ref(false)
+
+const showSetting = () => {
+  isShowSetting.value = true
+}
+//#endregion
+
 //#region ----------------------------------------< 响应式样式 >--------------------------------------
 const maskStyle = ref({ display: 'none' })
 const menuShow = ref(false)
@@ -648,8 +667,7 @@ const onresize = () => {
       .bl-preview {
         $borderRadius: 4px;
         color: #4b4b4b;
-        font-size: 0.9rem;
-        // font-size: 14px;
+        font-size: inherit;
         line-height: 1.6;
 
         :deep(svg) {
@@ -671,7 +689,7 @@ const onresize = () => {
         /* 定义滑块 内阴影+圆角 */
         ::-webkit-scrollbar-thumb {
           border-radius: 4px;
-          background-color: #717171;
+          background-color: #967777;
         }
 
         :deep(a) {
@@ -695,25 +713,30 @@ const onresize = () => {
         :deep(h1) {
           padding: 10px 0;
           margin-top: 70px;
-          border-bottom: 2px solid #bebebe;
+          border-bottom: 2px solid #e5e5e5;
           text-align: left;
           position: relative;
+          font-size: 1.8em;
         }
 
         :deep(h2) {
-          font-size: 25px;
+          font-size: 1.6em;
         }
 
         :deep(h3) {
-          font-size: 22px;
+          font-size: 1.4em;
         }
 
         :deep(h4) {
-          font-size: 19px;
+          font-size: 1.3em;
         }
 
-        :deep(h5, h6) {
-          font-size: 16px;
+        :deep(h5) {
+          font-size: 1.2em;
+        }
+
+        :deep(h6) {
+          font-size: 1.1em;
         }
 
         :deep(h1:first-child) {
@@ -882,6 +905,11 @@ const onresize = () => {
           position: relative;
           overflow: hidden;
 
+          ::-webkit-scrollbar-thumb {
+            border-radius: 4px;
+            background-color: #5c5c5c;
+          }
+
           .pre-copy {
             position: absolute;
             top: 5px;
@@ -1053,6 +1081,24 @@ const onresize = () => {
         }
       }
     }
+
+    .workbench {
+      @include flex(row, center, center);
+      @include box(35px, 35px);
+      background-color: #fff;
+      box-shadow: -1px 0px 3px #bababa;
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+      position: absolute;
+      right: 0;
+      bottom: 20px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: var(--el-color-primary-light-7);
+      }
+    }
   }
 
   // 屏幕宽度在 1100 以内时使用以下样式

blossom-web/src/views/article/article-setting.ts

@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import { Local } from '@/assets/utils/storage'
+
+const FONT_SIZE_KEY = 'BLOSSOM-ARTICLE-FONT-SZIE'
+
+const fontSize = ref<number>(Local.get(FONT_SIZE_KEY) || 0.9)
+
+const increase = () => {
+  fontSize.value += 0.1
+  console.log(1)
+  Local.set(FONT_SIZE_KEY, fontSize.value)
+}
+
+const decrease = () => {
+  fontSize.value -= 0.1
+  Local.set(FONT_SIZE_KEY, fontSize.value)
+}
+
+const getFontSize = () => {
+  return fontSize.value + 'rem'
+}
+export { getFontSize, increase, decrease }