feat(架构调整): 新增daikan高级组件

docs/examples/daikan/customer.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, provide, ref } from 'vue'
+import { KkDaikan } from 'kankan-components'
+import type { DaikanUserInfoType } from 'kankan-components'
+const loading = ref(false)
+
+const userInfo = ref<DaikanUserInfoType>({
+  userId: 'test-user-222',
+  roomId: 'test-roomid-1',
+  avatar: '',
+  nickName: 'customer',
+  role: 'customer',
+})
+const socketUrl = ref('wss://testws.4dkankan.com')
+const socketUrlLib = ref(
+  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js'
+)
+
+onMounted(() => {
+  const __win = window as any
+  if (!__win.__sdk) {
+    const __sdk = (__win.__sdk = new __win.KanKan({
+      num: 'KJ-t-wOXfx2SDFy',
+      server: '#DEMOSEVER#',
+    }))
+    provide('__sdk', __sdk)
+    __sdk.Scene.on('ready', () => (loading.value = true))
+    __sdk.mount('#scene').render()
+  }
+})
+onUnmounted(() => {
+  const __win = window as any
+  if (__win.__sdk) {
+    __win.__sdk = null
+  }
+})
+</script>
+
+<template>
+  <div id="scene" class="scene">
+    <Teleport v-if="loading" to=".kankan-plugins">
+      <div xui_daikan_view>
+        <kk-daikan
+          :socket-lib="socketUrlLib"
+          :user-info="userInfo"
+          :socket-url="socketUrl"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style>
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.scene {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+</style>

docs/examples/daikan/leader.vue

@@ -1,8 +1,21 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, provide, ref } from 'vue'
 import { KkDaikan } from 'kankan-components'
+import type { DaikanUserInfoType } from 'kankan-components'
 const loading = ref(false)
 
+const userInfo = ref<DaikanUserInfoType>({
+  userId: 'test-user-1',
+  roomId: 'test-roomid-1',
+  avatar: '',
+  nickName: 'xxxxx',
+  role: 'leader',
+})
+const socketUrl = ref('wss://testws.4dkankan.com')
+const socketUrlLib = ref(
+  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js'
+)
+
 onMounted(() => {
   const __win = window as any
   if (!__win.__sdk) {
@@ -11,8 +24,8 @@ onMounted(() => {
       server: '#DEMOSEVER#',
     }))
     provide('__sdk', __sdk)
-    debugger
-    __sdk.TagManager.on('ready', () => (loading.value = true))
+    __sdk.Scene.on('ready', () => (loading.value = true))
+
     __sdk.mount('#scene').render()
   }
 })
@@ -22,17 +35,30 @@ onUnmounted(() => {
     __win.__sdk = null
   }
 })
-const handleTagview = ({ id }) => {
-  console.log('id', id)
+const handleJoin = () => {
+  console.log('isJoin')
+}
+const handleError = (data: any) => {
+  console.log('handleError', data)
+}
+const handleSync = (data: any) => {
+  console.log('handleSync', data)
 }
 </script>
 
 <template>
   <div id="scene" class="scene">
     <Teleport v-if="loading" to=".kankan-plugins">
-      <!-- <div xui_daikan_view>
-        <kk-daikan />
-      </div> -->
+      <div xui_daikan_view>
+        <kk-daikan
+          :socket-lib="socketUrlLib"
+          :user-info="userInfo"
+          :socket-url="socketUrl"
+          @join="handleJoin"
+          @error="handleError"
+          @sync="handleSync"
+        />
+      </div>
     </Teleport>
   </div>
 </template>

docs/zh-CN/component/daikan.md

@@ -7,10 +7,11 @@ lang: zh-CN
 
 ## Daikan 属性
 
-| 名称    | 描述         | 类型     | 默认     |
-| ------- | ------------ | -------- | -------- |
-| `tag`   | 热点 Object  | `Object` | tag 类型 |
-| `image` | 热点图标背景 | `string` | 图像地址 |
+| 名称        | 描述            | 类型                                                                                             | 默认                                                               |
+| ----------- | --------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| `socketLib` | socket sdk 地址 | `string`                                                                                         | https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js |
+| `socketUrl` | socket wss 地址 | `string`                                                                                         |                                                                    |
+| `userInfo`  | socket 用户信息 | ^[object]`Ref<{userId: string, roomId: string, nickName: string, avatar: string, role: string}>` |                                                                    |
 
 ## Daikan Slots
 
@@ -18,16 +19,33 @@ lang: zh-CN
 | --------- | ------- |
 | `default` | slot Id |
 
-Tags 热点使用如下。
+## Event 事件
+
+| 事件名      | 说明                             | 参数 |
+| ----------- | -------------------------------- | ---- |
+| join        | Daikan socket 加入成功回调       | —    |
+| error       | Daikan socket 错误信息回调       | —    |
+| sync        | Daikan 带看人 同步动作回调       | —    |
+| receiveSync | Daikan 被带看人 同步动作接收回调 | —    |
+
+daikan 使用如下。
 
 ## 带看人
 
-:::repl
+:::repl 操作后，可以往下看到被带看人的实例同步。
 
 daikan/leader
 
 :::
 
+## 被带看人
+
+:::repl
+
+daikan/customer
+
+:::
+
 <!-- ## 自定义 UI 模版
 
 :::repl

packages/components/advance/daikan/index.ts

@@ -4,4 +4,5 @@ import daikan from './src/daikan.vue'
 export const KkDaikan = withInstall(daikan)
 
 export default KkDaikan
+
 export * from './src/daikan'

packages/components/advance/daikan/src/daikan.ts

@@ -6,12 +6,15 @@ export type DaikanUserInfoType = {
   roomId: string
   nickName: string
   avatar: string
+  role: 'leader' | 'customer'
 }
-
+// {userId: string, roomId: string, nickName: string, avatar: string, role: 'leader' | 'customer'}
 export const daikanProps = buildProps({
   socketLib: {
     type: String,
-    required: true,
+    required: false,
+    default:
+      'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js',
   },
   socketUrl: {
     type: String,

packages/components/advance/daikan/src/daikan.vue

@@ -3,12 +3,97 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, inject, ref, unref, watch, watchEffect } from 'vue'
 import { useNamespace } from '@kankan-components/hooks'
 import { daikanProps } from './daikan'
 
+const __sdk: any = inject('__sdk')
+const props = defineProps(daikanProps)
 const ns = useNamespace('daikan')
 defineOptions({
   name: 'KkDaikan',
 })
-defineProps(daikanProps)
+const isLeader = computed(() => {
+  return unref(props.userInfo).role === 'leader'
+})
+
+const isSDKLoad = computed(() => {
+  return __sdk && __sdk.Scene && __sdk.Scene.ready
+})
+const isSocketLoad = ref(false)
+const emits = defineEmits(['join', 'sync', 'receiveSync', 'error'])
+const loadSocket = (libSdk: string) => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = libSdk
+    script.addEventListener('load', resolve)
+    script.addEventListener('error', reject)
+    document.body.append(script)
+  })
+}
+
+const handleSocketSetup = async (): Promise<void> => {
+  const socket = (window as any).io(props.socketUrl, {
+    path: '/ws-sync',
+    transports: ['websocket'],
+  })
+
+  if (socket) {
+    // console.error(`isSDKLoad-socket`)
+    socket.on('connect', () => {
+      socket.emit('join', {
+        ...unref(props.userInfo),
+      })
+      socket.on('action', (data: any) => {
+        if (data.type === 'user-join') {
+          emits('join')
+        }
+        if (data.type === 'error') {
+          emits('error', {
+            ...data,
+          })
+        }
+      })
+      // console.error(`isLeader:${unref(isLeader)}`)
+      if (unref(isLeader)) {
+        // 带看主动发送同屏数据到socket room
+        __sdk.Connect.follow.on('data', (data: any) => {
+          socket.emit('sync', data)
+          emits('sync', data)
+        })
+      } else {
+        // 角色接收到同屏数据
+        socket.on('sync', (data: any) => {
+          __sdk.Connect.follow.receive(data)
+          emits('receiveSync', data)
+        })
+      }
+    })
+  }
+}
+watchEffect(async () => {
+  if (props.socketLib) {
+    try {
+      await loadSocket(unref(props.socketLib))
+      isSocketLoad.value = true
+    } catch {
+      // eslint-disable-next-line no-console
+      isSocketLoad.value = false
+      console.error('socket load fail!')
+    }
+  }
+})
+watch(
+  [isSDKLoad, isSocketLoad],
+  async (checker) => {
+    if (unref(checker[0]) && unref(checker[1])) {
+      // console.error(`isSDKLoaded`)
+      await handleSocketSetup()
+      __sdk.Connect.follow.start({ follow: !unref(isLeader) })
+    }
+  },
+  {
+    immediate: true,
+  }
+)
 </script>

packages/components/basic/button/src/button-group.vue

@@ -10,7 +10,7 @@ import { useNamespace } from '@kankan-components/hooks'
 import { buttonGroupProps } from './button-group'
 
 defineOptions({
-  name: 'ElButtonGroup',
+  name: 'KkButtonGroup',
 })
 const props = defineProps(buttonGroupProps)
 provide(

playground/src/pages/daikan.vue

@@ -5,38 +5,36 @@ import type { DaikanUserInfoType } from '@kankan-components/components'
 import '@kankan-components/theme-chalk/src/tag.scss'
 const __sdk: any = inject('__sdk')
 
-const tags = ref<any>([])
+const loading = ref(false)
 const socketUrl = ref('wss://testws.4dkankan.com')
+const socketUrlLib = ref(
+  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js'
+)
 
 const userInfo = ref<DaikanUserInfoType>({
   userId: 'test-user-1',
   roomId: 'test-roomid-1',
   avatar: '',
-  nickName: '',
+  nickName: 'xxxxx',
+  role: 'leader',
 })
 
 onMounted(async () => {
-  __sdk.TagManager.on('loaded', (data: any) =>
-    __sdk.TagManager.load((tags.value = data) && tags.value)
-  )
+  __sdk.Scene.on('loaded', () => (loading.value = true))
   __sdk.mount('#scene').render()
 })
-
-const handleTagview = (data: any) => {
-  console.log('tag', data)
-}
 </script>
 
 <template>
   <div id="scene">
-    <Teleport v-if="tags.length" to=".kankan-plugins">
+    <Teleport v-if="loading" to=".kankan-plugins">
       <div xui_daikan_view>
-        <KkDaikan
-          :socket-lib="xxx"
+        <kk-daikan
+          :socket-lib="socketUrlLib"
           :user-info="userInfo"
           :socket-url="socketUrl"
         >
-        </KkDaikan>
+        </kk-daikan>
       </div>
     </Teleport>
   </div>

playground/src/pages/daikan2.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onMounted, inject, ref } from 'vue'
+import { KkDaikan } from '@kankan-components/components'
+import type { DaikanUserInfoType } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/src/tag.scss'
+const __sdk: any = inject('__sdk')
+
+const tags = ref<any>([])
+const socketUrl = ref('wss://testws.4dkankan.com')
+const socketUrlLib = ref(
+  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js'
+)
+
+const userInfo = ref<DaikanUserInfoType>({
+  userId: 'test-user-2',
+  roomId: 'test-roomid-1',
+  avatar: '',
+  nickName: '2222',
+  role: 'customer',
+})
+
+onMounted(async () => {
+  __sdk.TagManager.on('loaded', (data: any) =>
+    __sdk.TagManager.load((tags.value = data) && tags.value)
+  )
+  __sdk.mount('#scene').render()
+})
+
+const handleTagview = (data: any) => {
+  console.log('tag', data)
+}
+</script>
+
+<template>
+  <div id="scene">
+    <Teleport v-if="tags.length" to=".kankan-plugins">
+      <div xui_daikan_view>
+        <KkDaikan
+          :socket-lib="socketUrlLib"
+          :user-info="userInfo"
+          :socket-url="socketUrl"
+        >
+        </KkDaikan>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+#scene {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

playground/src/router.ts

@@ -16,6 +16,11 @@ export default createRouter({
             path: '/daikan',
             component: () => import('./pages/daikan.vue'),
         },
+        {
+            path: '/daikan2',
+            component: () => import('./pages/daikan2.vue'),
+        },
+
 
     ],
 })

playground/src/sdk.ts

@@ -2,6 +2,7 @@ import { App } from 'vue'
 
 const __win = window as any
 const __sdk = (__win.__sdk = new __win.KanKan({
+
     num: 'KJ-t-wOXfx2SDFy',
     // server: 'https://test.4dkankan.com',
     server: '/demoServer',