Merge pull request #1421 from haoxiuwen/callkit

Add CallKit Docs

Author: haoxiuwen

docs/.vuepress/components/CallKitSwitch.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const PLATFORM_ICON_MAP = {
+  android: {
+    icon: "/icon-Android.svg",
+    activeIcon: "/icon-Android-hover.svg"
+  },
+  ios: {
+    icon: "/icon-iOS.svg",
+    activeIcon: "/icon-iOS-hover.svg"
+  },
+  web: {
+    icon: "/icon-web.svg",
+    activeIcon: "/icon-web-hover.png"
+  },
+  harmonyos: {
+    icon: "/icon-harmonyos.svg",
+    activeIcon: "/icon-harmonyos-hover.svg"
+  },
+  windows: {
+    icon: "/icon-windows.svg",
+    activeIcon: "/icon-windows-hover.svg"
+  },
+  ["react-native"]: {
+    icon: "/icon-ReactNative.svg",
+    activeIcon: "/icon-ReactNative-hover.svg"
+  },
+  flutter: {
+    icon: "/icon-flutter.svg",
+    activeIcon: "/icon-flutter-hover.png"
+  },
+  unity: {
+    icon: "/icon-unity.svg",
+    activeIcon: "/icon-unity-hover.svg"
+  },
+  uniapp: {
+    icon: "/icon-uni-app.svg",
+    activeIcon: "/icon-uni-app.svg"
+  },
+  applet: {
+    icon: "/icon-mini-program.svg",
+    activeIcon: "/icon-mini-program-hover.svg"
+  },
+  ["server-side"]: {
+    icon: "/icon-platform.svg",
+    activeIcon: "/icon-platform-hover.svg"
+  }
+};
+
+const options = [
+  {
+    label: "平台",
+    options: [
+      {
+        value: "android",
+        label: "Android"
+      },
+      {
+        value: "ios",
+        label: "iOS"
+      },
+      {
+        value: "web",
+        label: "Web"
+      }
+    ]
+  }
+];
+
+const platform = ref("android");
+const platformIcon = computed(
+  () => PLATFORM_ICON_MAP[platform.value]?.activeIcon
+);
+const route = useRoute();
+const router = useRouter();
+watch(
+  () => route.path,
+  () => {
+    if (route.path.indexOf("/callkit") == 0) {
+      const splitRoute = route.path.split("/");
+      platform.value = splitRoute[2];
+    }
+  },
+  { immediate: true }
+);
+
+// 切换平台，如果有相同路径的route就直接跳转
+const onChange = (platform) => {
+  const nextPlatformDocRouters = router.options.routes
+    .filter(
+      (item) =>
+        item.hasOwnProperty("name") &&
+        item?.path.indexOf(`/callkit/${platform}`) == 0
+    )
+    .map((item) => item.path);
+
+  let newPath = route.path.split("/");
+  newPath[2] = platform;
+  const nextPathPath = newPath.join("/");
+
+  if (nextPlatformDocRouters.indexOf(nextPathPath) > -1) {
+    router.push(nextPathPath);
+  } else {
+    router.push(`/callkit/${platform}/product_overview.html`);
+  }
+};
+</script>
+
+<template>
+  <el-select v-model="platform" @change="onChange" placeholder="请选择">
+    <template #prefix>
+      <img width="20" height="20" :src="platformIcon" />
+    </template>
+    <el-option-group
+      v-for="group in options"
+      :key="group.label"
+      :label="group.label"
+    >
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        class="option-content"
+      >
+        <span class="label-icon">
+          <img
+            class="default"
+            width="20"
+            height="20"
+            :src="PLATFORM_ICON_MAP[item.value]?.icon"
+          />
+          <img
+            class="active"
+            width="20"
+            height="20"
+            :src="PLATFORM_ICON_MAP[item.value]?.activeIcon"
+          />
+        </span>
+        <span>{{ item.label }}</span>
+      </el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<style lang="scss" scope>
+.option-content:hover .default {
+  display: none;
+}
+
+.option-content .active {
+  display: none;
+}
+
+.option-content:hover .active {
+  display: inline-block;
+}
+
+.label-icon {
+  vertical-align: sub;
+  padding-right: 5px;
+}
+</style>

docs/.vuepress/components/Sidebar.vue

@@ -3,18 +3,21 @@
   import PlatformSwitch from './PlatformSwitch.vue'
   import PrivateSwitch from './PrivateSwitch.vue'
   import UIKitSwitch from './UIKitSwitch.vue'
+  import CallKitSwitch from './CallKitSwitch.vue'
   import { usePageData } from '@vuepress/client'
   import { ref, watch } from 'vue'
 
   const pageData = usePageData()
   const showPlatformSwitch = ref(false)
   const showPrivateSwitch = ref(false)
   const showUIKitSwitch = ref(false)
+  const showCallKitSwitch = ref(false)
   watch(pageData, ()=> {
     const pagePath = pageData.value.path
     showPrivateSwitch.value = pagePath.indexOf('/private/') == 0
     showPlatformSwitch.value = pagePath.indexOf('/document/') == 0
     showUIKitSwitch.value = pagePath.indexOf('/uikit/') == 0
+    showCallKitSwitch.value = pagePath.indexOf('/callkit/') == 0
   }, {immediate:true})
 
 
@@ -37,6 +40,11 @@
           <UIKitSwitch />
         </ClientOnly>
       </div>
+      <div v-show="showCallKitSwitch" class="platform-switch">
+        <ClientOnly>
+          <CallKitSwitch />
+        </ClientOnly>
+      </div>
     </template>
   </Sidebar>
 </template>

docs/.vuepress/navbar/index.ts

@@ -77,6 +77,26 @@ export const zhNavbar = navbar([
       }
     ]
   },
+  {
+    text: 'CallKit',
+    children: [
+      {
+        text: 'Android',
+        icon: '/icon-Android.svg',
+        link: '/callkit/android/product_overview.html'
+      },
+      {
+        text: 'iOS',
+        icon: '/icon-iOS.svg',
+        link: '/callkit/ios/product_overview.html'
+      },
+      {
+        text: 'Web',
+        icon: '/icon-web.svg',
+        link: '/callkit/web/product_overview.html'
+      },
+    ]
+  },
   {
     text: 'SDK/REST 集成',
     children: [