Add CallKit Docs

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: [

docs/.vuepress/sidebar/callkit.ts

@@ -0,0 +1,134 @@
+import path from "node:path";
+import fs from "node:fs";
+
+const getSubDirectories = (dir) =>
+  fs
+    .readdirSync(dir)
+    .filter((item) => fs.statSync(path.join(dir, item)).isDirectory());
+const CALL_DOC_PATH = path.resolve(__dirname, "../../callkit");
+const callKitPlatformList = getSubDirectories(CALL_DOC_PATH);
+
+const callKitSidebar = [
+  {
+    /*
+      text: 分组标题
+      children: 分组导航列表  
+        text: 显示的文本
+        link: 链接地址
+        show: 不存在或者值为 true 时，菜单显示；存在并且值为 false 时，菜单不显示
+        only: 数组形式，只有在数组中的平台下显示
+        except: 数组形式，除了数组中指定的平台外都显示
+        collapsible: 子菜单是否允许展开/收起，true: 允许; false: 不允许。请参考「子菜单示例」
+        children: 子菜单。请参考「子菜单示例」
+    */
+    text: "产品介绍",
+    collapsible: true,
+    children: [
+      { text: "产品概述", link: "product_overview.html" },
+      { text: "开通服务", link: "product_activation.html" },
+      { text: "购买指南", link: "product_purchase.html" }
+    ]
+  },
+  {
+    text: "快速开始",
+    collapsible: true,
+    children: [
+      { text: "跑通示例项目", link: "sample_runthrough.html" },
+      { text: "快速开始", link: "quickstart.html" }
+    ]
+  },
+  {
+    text: "集成文档",
+    collapsible: true,
+    children: [
+      { text: "CallKit 架构", link: "architecture.html" },
+      { text: "集成 CallKit", link: "integration.html" },
+      { text: "权限", link: "permission.html", only: ["android"] },
+      {
+        text: "使用 LiveCommunicationKit", link: "livecommunicationkit.html", only: ["ios"]
+      },
+      { text: "画中画", link: "picture_in_picture.html", only: ["ios"] },
+      { text: "使用 Telecom", link: "telecom.html", only: ["android"] },
+      { text: "来电通知和悬浮窗", link: "float_top.html", only: ["android"] },
+      { text: "自定义资源", link: "customization.html" },
+      { text: "通话信令", link: "signaling.html" },
+      { text: "API 概览", link: "api_overview.html" },
+      {
+        text: "常见问题",
+        collapsible: true,
+        children: [
+          { text: "常见问题", link: "common_issue.html" },
+        ]
+      }
+    ]
+  },
+  {
+    text: "设计文档",
+    collapsible: true,
+    children: [{ text: "设计指南", link: "design_guide.html" }]
+  },
+  {
+    text: "历史文档",
+    collapsible: true,
+    children: [{ text: "历史文档", link: "easecallkit.html" }]
+  }
+];
+
+function buildCallKitSidebar() {
+  const result = {};
+  callKitPlatformList.forEach((platform) => {
+    const key = `/callkit/${platform}/`;
+    result[key] = callKitSidebar
+      .map((sidebar) =>
+        handleSidebarItem(platform, sidebar, CALL_DOC_PATH, "callkit")
+      )
+      .filter((s) => s);
+  });
+  return result;
+}
+
+function linkExists(platform: string, link: string, docPath: string): boolean {
+  try {
+    const filePath = `${docPath}/${platform}/${link.replace(/.html$/, ".md")}`;
+    return fs.existsSync(filePath);
+  } catch (e) {
+    console.error(`Error checking file existence: ${e}`);
+    return false;
+  }
+}
+
+function handleSidebarItem(platform, sidebar, docPath, kitType) {
+  const hasChildren =
+    sidebar.hasOwnProperty("children") && sidebar.children.length > 0;
+  const hasOnly = sidebar.hasOwnProperty("only") && sidebar.only.length > 0;
+  const hasExcept =
+    sidebar.hasOwnProperty("except") && sidebar.except.length > 0;
+
+  let needThisPlatform = true;
+  if (hasOnly) {
+    needThisPlatform = sidebar.only.indexOf(platform) > -1;
+  }
+  if (hasExcept) {
+    needThisPlatform = sidebar.except.indexOf(platform) == -1;
+  }
+
+  if (!needThisPlatform) {
+    return null;
+  }
+
+  if (hasChildren) {
+    let newchildren = sidebar.children
+      .map((s) => handleSidebarItem(platform, s, docPath, kitType))
+      .filter((s) => s);
+    if (newchildren.length > 0) {
+      return { ...sidebar, children: newchildren };
+    }
+  } else {
+    if (linkExists(platform, sidebar.link, docPath)) {
+      const newLink = `/${kitType}/${platform}/${sidebar.link}`;
+      return { ...sidebar, link: newLink };
+    }
+  }
+}
+
+export const CALL_KIT_SIDEBAR = buildCallKitSidebar();

docs/.vuepress/sidebar/index.ts

@@ -2,6 +2,7 @@ import { sidebar } from "vuepress-theme-hope";
 import { DOC_SIDEBAR } from "./document";
 import { CHAT_UIKIT_SIDEBAR, CHATROOM_UIKIT_SIDEBAR } from "./uikit";
 import { PRIVATE_IM_SIDEBAR, PRIVATE_MEDIA_SIDEBAR } from "./private";
+import { CALL_KIT_SIDEBAR } from "./callkit";
 import { PUSH_SIDEBAR } from "./push";
 
 export const zhSidebar = sidebar({
@@ -589,6 +590,7 @@ export const zhSidebar = sidebar({
   ...DOC_SIDEBAR,
   ...CHAT_UIKIT_SIDEBAR,
   ...CHATROOM_UIKIT_SIDEBAR,
+  ...CALL_KIT_SIDEBAR,
   "/private/im/": PRIVATE_IM_SIDEBAR,
   "/private/media/": PRIVATE_MEDIA_SIDEBAR,
   "/push": PUSH_SIDEBAR,

docs/.vuepress/styles/index.scss

@@ -101,4 +101,14 @@ $fade-amount: 20; // 每级字体颜色变淡的递减值
       }
     }
   }
-}
+}
+
+.hint-container.details {
+  padding: 12px;
+  background: var(--bg-color-back);
+  border: 1px solid var(--border-color-dark);
+}
+
+.hint-container.details summary::before {
+  display: none;
+}