feat: 搜索颜色适配

assets/vdoing/styles/palette.styl

@@ -46,54 +46,63 @@ $lineNumbersWrapperWidth = 2.5rem
 
 // 浅色模式
 .theme-mode-light
-  --bodyBg: #f4f4f4
-  --mainBg: rgba(255,255,255,1)
-  --sidebarBg: rgba(255,255,255,.8)
-  --blurBg: rgba(255,255,255,.9)
-  --customBlockBg: #f1f1f1
-  --textColor: #00323c
-  --textLightenColor: #0085AD
-  --borderColor: rgba(0,0,0,.12)
-  --codeBg: #f6f6f6
-  --codeColor: #525252
+  --bodyBg #f4f4f4
+  --mainBg rgba(255,255,255,1)
+  --sidebarBg rgba(255,255,255,.8)
+  --blurBg rgba(255,255,255,.9)
+  --pageTitleBg #e4e1e1
+  --customBlockBg #f1f1f1
+  --textColor #00323c
+  --textLightenColor #0085AD
+  --borderColor rgba(0,0,0,.12)
+  --codeBg #f6f6f6
+  --codeColor #525252
+  --codeTabBg --mainBg
+  --codeContentBg --mainBg
   codeThemeLight()
 
 // 深色模式
 .theme-mode-dark
-  --bodyBg: rgb(39,39,43)
-  --mainBg: rgba(30,30,34,1)
-  --sidebarBg: rgba(30,30,34,.8)
-  --blurBg: rgba(30,30,34,.8)
-  --customBlockBg: rgb(39,39,43)
-  --textColor: rgb(155,155,170)
-  --textLightenColor: #0085AD
-  // --borderColor: #2C2C3A
-  --borderColor: #30363d
-  --codeBg: #252526
-  --codeColor: #fff
+  --bodyBg rgb(39,39,43)
+  --mainBg rgba(30,30,34,1)
+  --sidebarBg rgba(30,30,34,.8)
+  --blurBg rgba(30,30,34,.8)
+  --pageTitleBg --mainBg
+  --customBlockBg rgb(39,39,43)
+  --textColor rgb(155,155,170)
+  --textLightenColor #0085AD
+  // --borderColor #2C2C3A
+  --borderColor #30363d
+  --codeBg #252526
+  --codeColor #fff
+  --codeTabBg = --mainBg
+  --codeContentBg = --mainBg
   codeThemeDark()
 
 // 阅读模式
 .theme-mode-read
-  --bodyBg: rgb(236,236,204)
-  --mainBg: rgba(245,245,213,1)
-  --sidebarBg: rgba(245,245,213,.8)
-  --blurBg: rgba(245,245,213,.9)
-  --customBlockBg: rgb(236,236,204)
-  --textColor: #704214
-  --textLightenColor: #996633
-  --borderColor: rgba(0,0,0,.15)
-  --codeBg: #282c34
-  --codeColor: #fff
+  --bodyBg rgb(236,236,204)
+  --mainBg rgba(245,245,213,1)
+  --sidebarBg rgba(245,245,213,.8)
+  --blurBg rgba(245,245,213,.9)
+  --pageTitleBg #e1dcb7
+  --customBlockBg rgb(236,236,204)
+  --textColor #704214
+  --textLightenColor #996633
+  --borderColor rgba(0,0,0,.15)
+  --codeBg #282c34
+  --codeColor #fff
+  --codeTabBg --mainBg
+  --codeContentBg rgba(27, 31, 35, 5%)
   codeThemeDark()
 
 // 背景色整体一致
 .theme-style-line.theme-mode-light
-  --bodyBg: rgba(255,255,255,1)
+  --bodyBg rgba(255,255,255,1)
 .theme-style-line.theme-mode-dark
-  --bodyBg: rgba(30,30,34,1)
+  --bodyBg rgba(30,30,34,1)
 .theme-style-line.theme-mode-read
-  --bodyBg: rgba(245,245,213,1)
+  --bodyBg rgba(245,245,213,1)
 
 // media媒介查询
 $MQMobile = 480px

components/vdoing/Buttons.vue

@@ -22,7 +22,7 @@
       @click="datas.showModeBox = true"
     >
       <transition name="mode">
-        <ul class="select-box" ref="modeBox" v-show="datas.showModeBox" @click.stop @touchstart.stop>
+        <ul class="select-box" ref="modeBoxRef" v-show="datas.showModeBox" @click.stop @touchstart.stop>
           <li
             v-for="item in datas.modeList"
             :key="item.KEY"
@@ -40,15 +40,21 @@
 
 <script lang="ts" setup>
 import storage from "good-storage"
-import { EmitsOptions } from "@vue/runtime-core" // 本地存储
+import { debounce } from "lodash" // 本地存储
 
 const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+
+// refs
+const modeBoxRef = ref()
+
+// uses
+const route = useRoute()
 const appConfig = useAppConfig()
 
 // datas
 const datas = reactive({
   threshold: 100,
-  scrollTop: null,
+  scrollTop: 0,
   showCommentBut: false,
   commentTop: null,
   currentMode: "",
@@ -99,18 +105,105 @@ const methods = {
     datas.currentMode = key
     emit("toggle-theme-mode", key)
   },
+  getScrollTop: () => {
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+  },
   scrollToTop: () => {
-    const a = 1
+    window.scrollTo({ top: 0, behavior: "smooth" })
+    datas.scrollTop = 0
+  },
+
+  getCommentTop: () => {
+    setTimeout(() => {
+      let commentEl =
+        document.querySelector(datas.COMMENT_SELECTOR_1) ||
+        document.querySelector(datas.COMMENT_SELECTOR_2) ||
+        document.querySelector(datas.COMMENT_SELECTOR_3)
+      // if (commentEl) {
+      //   datas.showCommentBut = this.$frontmatter.comment !== false && this.$frontmatter.home !== true
+      //   this.commentTop = commentEl.offsetTop - 58
+      // }
+    }, 500)
   },
   scrollToComment: () => {
-    const a = 1
+    // window.scrollTo({ top: datas.commentTop, behavior: 'smooth' })
+    // datas._textareaEl = document.querySelector(datas.COMMENT_SELECTOR_1 + ' textarea') || document.querySelector(datas.COMMENT_SELECTOR_2 + ' input') || document.querySelector(datas.COMMENT_SELECTOR_3 + ' textarea')
+    // if (datas._textareaEl && methods.getScrollTop() !== datas._recordScrollTop) {
+    //   document.addEventListener("scroll", this._handleListener)
+    // } else if (this._textareaEl && this.getScrollTop() === this._recordScrollTop) {
+    //   this._handleFocus()
+    // }
+  },
+  _handleListener: () => {
+    // clearTimeout(this._scrollTimer)
+    // this._scrollTimer = setTimeout(() => {
+    //   document.removeEventListener('scroll', this._handleListener)
+    //   this._recordScrollTop = this.getScrollTop()
+    //   this._handleFocus()
+    // }, 30)
+  },
+  _handleFocus: () => {
+    // this._textareaEl.focus()
+    // this._textareaEl.classList.add('yellowBorder')
+    // setTimeout(() => {
+    //   this._textareaEl.classList.remove('yellowBorder')
+    // }, 500)
   },
 }
 
 // lifecycle
 onMounted(() => {
   datas.currentMode = storage.get("mode") || appConfig.themeConfig.defaultMode || "auto"
+
+  datas.scrollTop = methods.getScrollTop()
+  window.addEventListener(
+    "scroll",
+    debounce(() => {
+      datas.scrollTop = methods.getScrollTop()
+    }, 100)
+  )
+
+  // window.addEventListener("load", () => {
+  //   methods.getCommentTop()
+  // })
+
+  // 小屏时选择主题模式后关闭选择框
+  if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+    modeBoxRef.value.onclick = () => {
+      datas.showModeBox = false
+    }
+    window.addEventListener(
+      "scroll",
+      debounce(() => {
+        if (datas.showModeBox) {
+          datas.showModeBox = false
+        }
+      }, 100)
+    )
+  }
+
+  // 移动端对类似:hover效果的处理
+  const buttons = document.querySelectorAll(".buttons .button")
+  for (let i = 0; i < buttons.length; i++) {
+    const button = buttons[i]
+    button.addEventListener("touchstart", function () {
+      button.classList.add("hover")
+    })
+    button.addEventListener("touchend", function () {
+      setTimeout(() => {
+        button.classList.remove("hover")
+      }, 150)
+    })
+  }
 })
+
+watch(
+  () => route.params,
+  () => {
+    // datas.showCommentBut = false
+    // methods.getCommentTop()
+  }
+)
 </script>
 
 <style lang="stylus">
@@ -124,7 +217,7 @@ onMounted(() => {
   position fixed
   right 2rem
   bottom 2.5rem
-  z-index 11
+  z-index 99
   @media (max-width $MQNarrow)
     right 1rem
     bottom 1.5rem

components/vdoing/MeiliSearchBox.vue

@@ -71,16 +71,17 @@ const client = useMeilisearchClient()
         height 2rem
         position absolute
     .ais-Hits
-      display none
+      //display none
+      display block
       .suggestions
         overflow auto
         max-height calc(100vh - 6rem)
-        background #fff
+        background-color var(--mainBg)
         min-width 500px
         max-width 700px
         position absolute
         top 2rem
-        border 1px solid #cfd4db
+        border 1px solid var(--borderColor)
         border-radius 6px
         padding .4rem
         list-style-type none
@@ -97,32 +98,34 @@ const client = useMeilisearchClient()
             color #415b75
             width 100%
             .parent-page-title
-              color #fff
+              color var(--textColor)
               font-weight 600
-              background-color #11a8cd
+              background-color var(--pageTitleBg)
               padding 5px
             .suggestion-row
               border-collapse collapse
               width 100%
               display table
               .page-title
                 width 35%
-                background #f5f5f5
-                border 1px solid #eaecef
+                color var(--textColor)
+                background-color var(--bodyBg)
+                border 1px solid var(--borderColor)
                 border-left none
                 display table-cell
                 text-align right
                 padding 5px
                 font-weight 600
               .suggestion-content
                 font-weight 400
-                border 1px solid #eaecef
+                border 1px solid var(--borderColor)
+                color var(--textColor)
                 border-right none
                 width 65%
                 display table-cell
                 padding 5px
                 &:hover
-                  background #f5f5f5
+                  background var(--bodyBg)
                 .highlight
                   font-weight 600
                   color #11a8cd

components/vdoing/Navbar.vue

@@ -13,7 +13,7 @@
         <div ref="siteName" class="site-name" v-if="appConfig.siteTitle">
           {{ appConfig.siteTitle }}
         </div>
-        <div class="site-slogan">寻找未知的技术拼图</div>
+        <div class="site-slogan">{{ appConfig.siteSlogan }}</div>
       </div>
     </NuxtLink>
 

layouts/vdoing.vue

@@ -5,6 +5,7 @@
     @touchstart="methods.onTouchStart"
     @touchend="methods.onTouchEnd"
   >
+    <!-- 页眉 -->
     <Navbar v-if="computes.shouldShowNavbar" @toggle-sidebar="methods.toggleSidebar" />
 
     <div class="sidebar-mask" @click="methods.toggleSidebar(false)"></div>
@@ -28,10 +29,13 @@
 
     <slot />
 
+    <!-- 页脚 -->
     <Footer />
 
+    <!-- 主题切换、返回顶部 -->
     <Buttons ref="buttons" @toggle-theme-mode="methods.toggleThemeMode" />
 
+    <!-- 自定义背景图 -->
     <BodyBgImg v-if="appConfig.themeConfig.bodyBgImg" />
 
     <!-- 自定义html插入左右下角的小窗口 -->
@@ -149,7 +153,6 @@ const methods = {
     }
   },
   toggleThemeMode: (key: string) => {
-    console.log("toggleThemeMode triggered", key)
     if (key === "auto") {
       methods._autoMode()
     } else {
@@ -183,16 +186,12 @@ onBeforeMount(() => {
   const mode = storage.get("mode") // 不放在created是因为vuepress不能在created访问浏览器api，如window
   const { defaultMode } = appConfig.themeConfig
 
-  console.log("mode=>", mode)
-  console.log("defaultMode", defaultMode)
-
   if (defaultMode && defaultMode !== "auto" && !mode) {
     datas.themeMode = defaultMode
   } else if (!mode || mode === "auto" || (!mode && defaultMode === "auto")) {
     // 当未切换过模式，或模式处于'跟随系统'时
     methods._autoMode()
   } else {
-    console.log("zzzzz", mode)
     datas.themeMode = mode
   }
   methods.setBodyClass()

pages/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div style="margin-top: 100px">index</div>
+    <div style="margin-top: 100px" v-for="testItem in testItems.items">
+      index
+      <p>{{ testItem }}</p>
+    </div>
   </div>
 </template>
 
@@ -16,6 +19,14 @@ const zhiSdk = ZhiUtil.zhiSdk(env)
 const logger = zhiSdk.getLogger()
 const common = zhiSdk.common
 
+const testItems = reactive({
+  items: <string[]>[],
+})
+
+for (let i = 0; i < 20; i++) {
+  testItems.items.push("hello")
+}
+
 function hello(from: string): void {
   logger.debug("Nuxt env is ok")
   logger.info(common.strUtil.f("Hello, {0} {1} v{2}! You are from {3}", "zhi", "theme", version, from))