docs: 跨端输出 RN 文档重构

docs-vitepress/.vitepress/theme/alias-components/CustomFlyout.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useFlyout } from 'vitepress/dist/client/theme-default/composables/flyout.js'
+import VPMenu from 'vitepress/dist/client/theme-default/components/VPMenu.vue'
+
+const props = defineProps<{
+    icon?: string
+    button?: string
+    label?: string
+    items?: any[]
+}>()
+
+const open = ref(false)
+const el = ref<HTMLElement>()
+const isNew = computed(() => {
+    return props.items?.some(item => item.badge)
+})
+
+useFlyout({ el, onBlur })
+
+function onBlur() {
+    open.value = false
+}
+</script>
+
+<template>
+    <div
+         class="VPFlyout"
+         ref="el"
+         @mouseenter="open = true"
+         @mouseleave="open = false">
+        <button
+                type="button"
+                class="button"
+                aria-haspopup="true"
+                :aria-expanded="open"
+                :aria-label="label"
+                @click="open = !open">
+            <span v-if="button || icon" class="text">
+                <span v-if="icon" :class="[icon, 'option-icon']" />
+                <span v-if="button" v-html="button"></span>
+                <NavBarBadge v-if="isNew" />
+                <span class="vpi-chevron-down text-icon" />
+            </span>
+
+            <span v-else class="vpi-more-horizontal icon" />
+        </button>
+
+        <div class="menu">
+            <VPMenu :items="items">
+                <slot />
+            </VPMenu>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.VPFlyout {
+    position: relative;
+}
+
+.VPFlyout:hover {
+    color: var(--vp-c-brand-1);
+    transition: color 0.25s;
+}
+
+.VPFlyout:hover .text {
+    color: var(--vp-c-text-2);
+}
+
+.VPFlyout:hover .icon {
+    fill: var(--vp-c-text-2);
+}
+
+.VPFlyout.active .text {
+    color: var(--vp-c-brand-1);
+}
+
+.VPFlyout.active:hover .text {
+    color: var(--vp-c-brand-2);
+}
+
+.button[aria-expanded="false"]+.menu {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(0);
+}
+
+.VPFlyout:hover .menu,
+.button[aria-expanded="true"]+.menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.button {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    height: var(--vp-nav-height);
+    color: var(--vp-c-text-1);
+    transition: color 0.5s;
+}
+
+.text {
+    display: flex;
+    align-items: center;
+    line-height: var(--vp-nav-height);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-text-1);
+    transition: color 0.25s;
+}
+
+.option-icon {
+    margin-right: 0px;
+    font-size: 16px;
+}
+
+.text-icon {
+    margin-left: 4px;
+    font-size: 14px;
+}
+
+.icon {
+    font-size: 20px;
+    transition: fill 0.25s;
+}
+
+.menu {
+    position: absolute;
+    top: calc(var(--vp-nav-height) / 2 + 20px);
+    right: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+</style>

docs-vitepress/.vitepress/theme/alias-components/CustomMenuLink.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { isActive } from 'vitepress/dist/client/shared.js'
+import { VPLink } from 'vitepress/theme'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { page } = useData()
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <div class="VPMenuLink">
+    <VPLink
+            v-bind="$attrs"
+            :class="{
+              active: isActive(
+                page.relativePath,
+                item.activeMatch || item.link,
+                !!item.activeMatch
+              )
+            }"
+            :href="item.link"
+            :target="item.target"
+            :rel="item.rel"
+            :no-icon="item.noIcon">
+      <span v-html="item.text"></span>
+      <NavBarBadge v-if="item.badge" :text="item.badge.text" />
+    </VPLink>
+  </div>
+</template>
+
+<style scoped>
+.VPMenuGroup+.VPMenuLink {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 12px 12px 0;
+}
+
+.link {
+  display: block;
+  border-radius: 6px;
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  text-align: left;
+  white-space: nowrap;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
+}
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.link.active {
+  color: var(--vp-c-brand-1);
+}
+</style>

docs-vitepress/.vitepress/theme/alias-components/CustomNavBarMenuLink.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { isActive } from 'vitepress/dist/client/shared.js'
+import { VPLink } from 'vitepress/theme'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <VPLink
+          :class="{
+            VPNavBarMenuLink: true,
+            active: isActive(
+              page.relativePath,
+              item.activeMatch || item.link,
+              !!item.activeMatch
+            )
+          }"
+          :href="item.link"
+          :target="item.target"
+          :rel="item.rel"
+          :no-icon="item.noIcon"
+          tabindex="0">
+    <span v-html="item.text"></span>
+    <NavBarBadge v-if="item.badge" :text="item.badge.text" />
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavBarMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPNavBarMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavBarMenuLink:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

docs-vitepress/.vitepress/theme/components/CustomLayout.vue

@@ -21,8 +21,8 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
   const clipPath = [
     `circle(0px at ${x}px ${y}px)`,
     `circle(${Math.hypot(
-        Math.max(x, innerWidth - x),
-        Math.max(y, innerHeight - y),
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y),
     )}px at ${x}px ${y}px)`,
   ]
 
@@ -37,6 +37,7 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     {
       duration: 300,
       easing: 'ease-in',
+      fill: 'forwards',
       pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
     },
   )

docs-vitepress/.vitepress/theme/components/NavBarBadge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+    text?: string
+}>()
+</script>
+
+<template>
+    <span class="badge">
+        {{ text || '新' }}
+    </span>
+</template>
+
+<style scoped>
+.badge {
+    display: inline-block;
+    padding: 3.5px 4px;
+    margin-left: 6px;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: .2px;
+    border-radius: 6px;
+    background: #3b8eed;
+    color: #f9f9f9;
+    vertical-align: text-bottom;
+}
+</style>

docs-vitepress/.vitepress/theme/index.js

@@ -1,7 +1,8 @@
 import { h } from "vue"
-import DefaultTheme from "vitepress/theme"
+import DefaultTheme, { VPBadge } from "vitepress/theme"
 import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client"
 import HomepageLayout from "./layouts/HomepageLayout.vue"
+import NavBarBadge from "./components/NavBarBadge.vue"
 
 import '@shikijs/vitepress-twoslash/style.css'
 import "virtual:group-icons.css"
@@ -15,5 +16,7 @@ export default {
     },
     enhanceApp({ app }) {
         app.use(TwoslashFloatingVue)
+        app.component('Badge', VPBadge)
+        app.component('NavBarBadge', NavBarBadge)
     },
 }

docs-vitepress/.vitepress/theme/layouts/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-<!--    <ParentLayout/>-->
+   <!-- <ParentLayout/> -->
   </div>
 </template>
 

docs-vitepress/.vitepress/theme/styles/index.css

@@ -14,6 +14,7 @@
     --vt-c-brand-light: var(--vt-c-green-light);
     --vt-c-brand-dark: var(--vt-c-green-dark);
     --vp-c-brand-1: var(--vt-c-brand);
+    --vp-c-brand-2: var(--vt-c-brand);
 }
 
 .dark {

docs-vitepress/.vitepress/theme/styles/switchAppearance.css

@@ -14,3 +14,11 @@
 .dark::view-transition-old(root) {
   z-index: 9999;
 }
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}

docs-vitepress/api-proxy/base/app/app-event/offAppHide.md

@@ -0,0 +1,21 @@
+## mpx.offAppHide(function listener)
+
+移除小程序切后台事件的监听函数
+
+支持情况： 微信、支付宝、RN、web
+
+[参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/app/app-event/wx.offAppShow.html)
+
+### 参数
+
+**function listener**
+
+onAppHide 传入的监听函数。不传此参数则移除所有监听函数(支付宝除外)。
+
+### 示例代码
+```js
+const listener = function (res) { console.log(res) }
+
+mpx.onAppHide(listener)
+mpx.offAppHide(listener)
+```