feat(theme): add Global Component Badge

添加全局组件 Badge

packages/theme/src/client/clientAppEnhance.ts

@@ -1,10 +1,13 @@
 import { defineClientAppEnhance } from '@vuepress/client'
 import { h } from 'vue'
+import Badge from './components/global/Badge.vue'
 import { useScrollPromise } from './composables'
 
 import './styles/index.scss'
 
 export default defineClientAppEnhance(({ app, router }) => {
+  app.component('Badge', Badge)
+
   app.component('NavbarSearch', () => {
     const SearchComponent =
       app.component('Docsearch') || app.component('SearchBox')

packages/theme/src/client/components/global/Badge.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: 'tip',
+  },
+  text: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  vertical: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+})
+</script>
+<template>
+  <span class="badge" :class="type" :style="{ verticalAlign: vertical }">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+<style lang="scss">
+.badge {
+  display: inline-block;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 6px;
+  color: var(--c-bg);
+  vertical-align: top;
+  transition: color var(--t-color), background-color var(--t-color);
+
+  &.tip {
+    background-color: var(--c-badge-tip);
+  }
+
+  &.warning {
+    background-color: var(--c-badge-warning);
+  }
+
+  &.danger {
+    background-color: var(--c-badge-danger);
+  }
+
+  .table-of-contents & {
+    vertical-align: middle;
+  }
+
+  & + & {
+    margin-left: 5px;
+  }
+}
+</style>

packages/theme/src/client/styles/normalize.scss

@@ -12,6 +12,10 @@ body {
   box-sizing: border-box;
 }
 
+:root {
+  scroll-behavior: smooth;
+}
+
 html.dark {
   color-scheme: dark;
 }

packages/theme/src/client/styles/vars-dark.scss

@@ -28,3 +28,13 @@ html.dark {
 
   --c-hl-bg-color: #363b46;
 }
+
+html.dark .DocSearch {
+  --docsearch-logo-color: var(--c-text);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+}

packages/theme/src/client/styles/vars.scss

@@ -1,13 +1,12 @@
 :root {
-
   // brand color
   --c-brand: #0095d9;
   --c-brand-light: #2ca9e1;
 
   // background color
-  --c-bg: #F3F4F6;
-  --c-bg-light: #E5E7EB;
-  --c-bg-lighter: #D1D5DB;
+  --c-bg: #f3f4f6;
+  --c-bg-light: #e5e7eb;
+  --c-bg-lighter: #d1d5db;
   --c-bg-container: #fff;
   --c-bg-navbar: var(--c-bg-container);
   --c-bg-sidebar: var(--c-bg-container);
@@ -26,7 +25,7 @@
   --c-border-dark: #dfe2e5;
 
   // container color
-  --c-tip: #60A5FA;
+  --c-tip: #60a5fa;
   --c-tip-bg: var(--c-bg-light);
   --c-tip-title: var(--c-text);
   --c-tip-text: var(--c-text);
@@ -43,17 +42,26 @@
   --c-danger-text-accent: var(--c-text);
   --c-detail-bg: #eee;
 
+  // badge component colors
+  --c-badge-tip: var(--c-tip);
+  --c-badge-warning: var(--c-warning);
+  --c-badge-danger: var(--c-danger);
+
   // transition
   --t-color: 0.3s ease;
   --t-transform: 0.3s ease;
 
   // box-shadow
   --shadow-sm: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --shadow-md: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 0 #0000, 0 0 #0000, 0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 3px 6px -1px rgba(0, 0, 0, 0.06);
+  --shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 0 #0000, 0 0 #0000, 0 6px 8px -1px rgba(0, 0, 0, 0.1),
+    0 3px 6px -1px rgba(0, 0, 0, 0.06);
 
-  --shadow-footer: 0 -1px 3px 0px rgba(0, 0, 0, 0.1), 0 0 #0000, 0 0 #0000, 0 -1px 2px 0px rgba(0, 0, 0, 0.06);
+  --shadow-footer: 0 -1px 3px 0px rgba(0, 0, 0, 0.1), 0 0 #0000, 0 0 #0000,
+    0 -1px 2px 0px rgba(0, 0, 0, 0.06);
 
   // border-radius
   --p-around: 4px;
@@ -64,7 +72,6 @@
   --code-ln-color: #9e9e9e;
   --code-ln-wrapper-width: 3.5rem;
 
-
   // font vars
   --font-family: -apple-system, BlinkMackSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -88,9 +95,29 @@
 
   --search-input-width: 8rem;
   --search-result-width: 20rem;
+}
 
+.DocSearch {
+  --docsearch-primary-color: var(--c-brand);
+  --docsearch-text-color: var(--c-text);
+  --docsearch-highlight-color: var(--c-brand);
+  --docsearch-muted-color: var(--c-text-quote);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--c-bg-light);
+  --docsearch-searchbox-background: var(--c-bg-lighter);
+  --docsearch-searchbox-focus-background: var(--c-bg);
+  --docsearch-searchbox-shadow: var(--shadow);
+  --docsearch-hit-color: var(--c-text-light);
+  --docsearch-hit-active-color: var(--c-bg);
+  --docsearch-hit-background: var(--c-bg);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
+  --docsearch-footer-background: var(--c-bg);
 }
 
 .external-link-icon {
   --external-link-icon-color: var(--c-text-quote);
 }
+
+.medium-zoom-overlay {
+  --medium-zoom-bg-color: var(--c-bg);
+}

packages/theme/src/client/utils/dom.ts

@@ -46,15 +46,19 @@ export function scrollTo(
   top: number,
   time = 300
 ): void {
-  const currentTop = getScrollTop(target)
-  const step = Math.ceil(time / 16)
-  let currentStep = 0
-  const change = top - currentTop
-  const timer = setInterval(() => {
-    currentStep++
-    if (currentStep >= step) {
-      timer && clearInterval(timer)
-    }
-    setScrollTop(target, tween(currentStep, currentTop, change, step))
-  }, 1000 / 60)
+  if (target !== document) {
+    const currentTop = getScrollTop(target)
+    const step = Math.ceil(time / 16)
+    let currentStep = 0
+    const change = top - currentTop
+    const timer = setInterval(() => {
+      currentStep++
+      if (currentStep >= step) {
+        timer && clearInterval(timer)
+      }
+      setScrollTop(target, tween(currentStep, currentTop, change, step))
+    }, 1000 / 60)
+  } else {
+    window.scrollTo({ top, behavior: 'smooth' })
+  }
 }