From dde7c22f3f2c6ee55bc2e7771935f18d469809e0 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Tue, 18 Jul 2023 10:51:33 +0800
Subject: [PATCH 01/20] feat: back title

---
 client/packages/rtc-web/package.json          |  1 +
 .../rtc-web/src/assets/svg-icon/back.svg      |  1 +
 .../rtc-web/src/assets/svg-icon/chat.svg      |  1 +
 .../components/back/back-previous-level.vue   | 19 +++++++++++++
 .../src/components/back/back-title.vue        | 26 +++++++++++++++++
 .../rtc-web/src/components/back/index.ts      |  2 ++
 .../src/components/form-room/form-room.vue    |  8 ------
 .../rtc-web/src/components/menu/menu-list.vue |  5 +++-
 client/packages/rtc-web/src/layout/index.vue  |  2 +-
 .../packages/rtc-web/src/views/chat/chat.vue  | 28 +++++++++++++++----
 client/packages/rtc-web/src/views/welcome.vue |  2 +-
 client/pnpm-lock.yaml                         | 24 ++++++++++++++++
 12 files changed, 103 insertions(+), 16 deletions(-)
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/back.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/chat.svg
 create mode 100644 client/packages/rtc-web/src/components/back/back-previous-level.vue
 create mode 100644 client/packages/rtc-web/src/components/back/back-title.vue
 create mode 100644 client/packages/rtc-web/src/components/back/index.ts

diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index 9b0982a..937caee 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -11,6 +11,7 @@
     "@types/lodash": "^4.14.195",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vueuse/core": "^10.2.0",
+    "@vueuse/router": "^10.2.1",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
     "vue": "^3.3.4",
diff --git a/client/packages/rtc-web/src/assets/svg-icon/back.svg b/client/packages/rtc-web/src/assets/svg-icon/back.svg
new file mode 100644
index 0000000..c823dcf
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/back.svg
@@ -0,0 +1 @@
+<svg t="1689645854295" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1042" width="200" height="200"><path d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z" fill="#2F54EB" p-id="1043"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/chat.svg b/client/packages/rtc-web/src/assets/svg-icon/chat.svg
new file mode 100644
index 0000000..0d08497
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/chat.svg
@@ -0,0 +1 @@
+<svg t="1689646256077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2749" width="200" height="200"><path d="M512 64c259.2 0 469.333333 200.576 469.333333 448s-210.133333 448-469.333333 448a484.48 484.48 0 0 1-232.725333-58.88l-116.394667 50.645333a42.666667 42.666667 0 0 1-58.517333-49.002666l29.76-125.013334C76.629333 703.402667 42.666667 611.477333 42.666667 512 42.666667 264.576 252.8 64 512 64z m0 64C287.488 128 106.666667 300.586667 106.666667 512c0 79.573333 25.557333 155.434667 72.554666 219.285333l5.525334 7.317334 18.709333 24.192-26.965333 113.237333 105.984-46.08 27.477333 15.018667C370.858667 878.229333 439.978667 896 512 896c224.512 0 405.333333-172.586667 405.333333-384S736.512 128 512 128z m-157.696 341.333333a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m159.018667 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m158.997333 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z" fill="#2F54EB" p-id="2750"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/components/back/back-previous-level.vue b/client/packages/rtc-web/src/components/back/back-previous-level.vue
new file mode 100644
index 0000000..27eab48
--- /dev/null
+++ b/client/packages/rtc-web/src/components/back/back-previous-level.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'BackPreviousLevel',
+});
+
+const emits = defineEmits(['back']);
+</script>
+
+<template>
+  <div class="flex items-center">
+    <button
+      class="btn-circle btn border-0 bg-transparent"
+      @click="emits('back')"
+    >
+      <svg-icon name="back" class="h-6 w-6" />
+    </button>
+    <slot></slot>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/back/back-title.vue b/client/packages/rtc-web/src/components/back/back-title.vue
new file mode 100644
index 0000000..b92b152
--- /dev/null
+++ b/client/packages/rtc-web/src/components/back/back-title.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineOptions({
+  name: 'BackTitle',
+});
+
+const props = defineProps({
+  svgName: {
+    type: String as PropType<string>,
+    required: true,
+  },
+  title: {
+    type: String as PropType<string>,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="flex cursor-pointer items-center">
+    <!-- <svg-icon :name="props.svgName" class="mr-1 h-8 w-8"></svg-icon> -->
+    <div v-if="props.title">{{ props.title }}</div>
+    <slot v-else></slot>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/back/index.ts b/client/packages/rtc-web/src/components/back/index.ts
new file mode 100644
index 0000000..7525fb5
--- /dev/null
+++ b/client/packages/rtc-web/src/components/back/index.ts
@@ -0,0 +1,2 @@
+export { default as BackPreviousLevel } from './back-previous-level.vue';
+export { default as BackTitle } from './back-title.vue';
diff --git a/client/packages/rtc-web/src/components/form-room/form-room.vue b/client/packages/rtc-web/src/components/form-room/form-room.vue
index 0216a9a..d1fd70c 100644
--- a/client/packages/rtc-web/src/components/form-room/form-room.vue
+++ b/client/packages/rtc-web/src/components/form-room/form-room.vue
@@ -2,7 +2,6 @@
 import { useRoom } from '@/hooks';
 import { useForm } from '../form-base';
 import { computed } from 'vue';
-import { watch } from 'vue';
 
 defineOptions({
   name: 'FormRoom',
@@ -16,13 +15,6 @@ const { validateRoomId } = useRoom(() => formData.value.roomId || '');
 
 const roomIdValid = computed(() => !formErrors.value['roomId']);
 
-watch(
-  () => roomIdValid.value,
-  (v) => {
-    console.log(v);
-  }
-);
-
 defineExpose({
   onSubmit: handleSubmit,
   resetForm: resetFields,
diff --git a/client/packages/rtc-web/src/components/menu/menu-list.vue b/client/packages/rtc-web/src/components/menu/menu-list.vue
index 0a7558f..8ef0b49 100644
--- a/client/packages/rtc-web/src/components/menu/menu-list.vue
+++ b/client/packages/rtc-web/src/components/menu/menu-list.vue
@@ -56,7 +56,10 @@ const handleClose = () => {
     class="flex items-center justify-between"
   >
     <div>{{ item.label }}</div>
-    <button class="btn-circle btn bg-transparent" @click="createRoom(item.key)">
+    <button
+      class="btn-circle btn border-0 bg-transparent"
+      @click="createRoom(item.key)"
+    >
       <svg-icon :name="item.icon" class="h-5 w-5" />
     </button>
   </div>
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index 6372a49..8aadf2f 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -14,7 +14,7 @@ defineOptions({
       <MenuSide
         class="hidden dark:shadow-sm dark:shadow-neutral-600 lg:block lg:shadow-md"
       />
-      <RouterView />
+      <RouterView class="flex-1" />
     </FullHeightFlexBox>
   </FullHeightFlexBox>
 </template>
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index 981df40..007b52d 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -1,27 +1,45 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, useRouter } from 'vue-router';
 import { useRoom } from '@/hooks';
+import { BackPreviousLevel, BackTitle } from '@/components/back';
+import { useRouteParams } from '@vueuse/router';
 
 defineOptions({
   name: 'ChatView',
 });
 
 const router = useRouter();
-const { params } = useRoute();
+const roomId = useRouteParams('roomId');
 
-const { isValid } = useRoom((params.roomId as string) || '');
+const { isValid } = useRoom((roomId.value as string) || '');
 
 const checkParams = () => {
-  console.log(isValid.value);
   if (!isValid.value) router.replace('/');
 };
 
 onMounted(checkParams);
+
+onBeforeRouteUpdate((to, from) => {
+  if (to.params.roomId !== from.params.roomId) {
+    roomId.value = to.params.roomId;
+    checkParams();
+  }
+});
+
+const handleBackLevel = () => router.replace('/');
 </script>
 
 <template>
-  <div>我是chat - {{ params.roomId }}</div>
+  <div class="flex w-full flex-col">
+    <BackPreviousLevel class="border-b py-1" @back="handleBackLevel">
+      <BackTitle svg-name="chat">
+        {{ roomId }}
+      </BackTitle>
+    </BackPreviousLevel>
+
+    <div class="flex-1">内容</div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/client/packages/rtc-web/src/views/welcome.vue b/client/packages/rtc-web/src/views/welcome.vue
index 184e808..2e95535 100644
--- a/client/packages/rtc-web/src/views/welcome.vue
+++ b/client/packages/rtc-web/src/views/welcome.vue
@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <div>Welcome</div>
+  <div class="flex items-center justify-center">Welcome</div>
 </template>
 
 <stylescoped></stylescoped>
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index d891ee1..f32dd5c 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -11,6 +11,7 @@ importers:
       '@vitejs/plugin-vue': ^4.2.3
       '@vitejs/plugin-vue-jsx': ^3.0.1
       '@vueuse/core': ^10.2.0
+      '@vueuse/router': ^10.2.1
       autoprefixer: ^10.4.14
       daisyui: ^3.1.6
       eslint: ^8.43.0
@@ -36,6 +37,7 @@ importers:
       '@types/lodash': 4.14.195
       '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.3.9+vue@3.3.4
       '@vueuse/core': 10.2.0_vue@3.3.4
+      '@vueuse/router': 10.2.1_vue-router@4.2.2+vue@3.3.4
       lodash: 4.17.21
       nanoid: 4.0.2
       vue: 3.3.4
@@ -1021,6 +1023,19 @@ packages:
     resolution: {integrity: sha512-IR7Mkq6QSgZ38q/2ZzOt+Zz1OpcEsnwE64WBumDQ+RGKrosFCtUA2zgRrOqDEzPBXrVB+4HhFkwDjQMu0fDBKw==}
     dev: false
 
+  /@vueuse/router/10.2.1_vue-router@4.2.2+vue@3.3.4:
+    resolution: {integrity: sha512-H/1T4fLzMmeBNEmcXlbqk6AEp0HQpzf+0eeNJ6fGrs3RWClE2i3nYEFbtxfQeSm/7nZ6nf/UhgahzUQdyMhIwQ==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 10.2.1_vue@3.3.4
+      vue-demi: 0.14.5_vue@3.3.4
+      vue-router: 4.2.2_vue@3.3.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/10.2.0_vue@3.3.4:
     resolution: {integrity: sha512-dIeA8+g9Av3H5iF4NXR/sft4V6vys76CpZ6hxwj8eMXybXk2WRl3scSsOVi+kQ9SX38COR7AH7WwY83UcuxbSg==}
     dependencies:
@@ -1030,6 +1045,15 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared/10.2.1_vue@3.3.4:
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+    dependencies:
+      vue-demi: 0.14.5_vue@3.3.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /acorn-jsx/5.3.2_acorn@8.9.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:

From d6517c2b33471c515faa0f2db629419e8d81d8d3 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Tue, 18 Jul 2023 12:39:53 +0800
Subject: [PATCH 02/20] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/package.json          |   1 +
 .../rtc-web/src/config/config-enum.ts         |   3 +
 client/packages/rtc-web/src/config/index.ts   |   1 +
 client/packages/rtc-web/src/env.d.ts          |   1 +
 client/packages/rtc-web/src/hooks/index.ts    |   1 +
 .../packages/rtc-web/src/hooks/useInitData.ts |  41 ++++
 client/packages/rtc-web/src/layout/index.vue  |  12 +
 client/packages/rtc-web/vite.config.ts        |  12 +
 client/pnpm-lock.yaml                         | 211 +++++++++++++++++-
 9 files changed, 281 insertions(+), 2 deletions(-)
 create mode 100644 client/packages/rtc-web/src/config/config-enum.ts
 create mode 100644 client/packages/rtc-web/src/config/index.ts
 create mode 100644 client/packages/rtc-web/src/env.d.ts
 create mode 100644 client/packages/rtc-web/src/hooks/useInitData.ts

diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index 937caee..70ad7b4 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -14,6 +14,7 @@
     "@vueuse/router": "^10.2.1",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
+    "socket.io-client": "2.3.0",
     "vue": "^3.3.4",
     "vue-router": "4"
   },
diff --git a/client/packages/rtc-web/src/config/config-enum.ts b/client/packages/rtc-web/src/config/config-enum.ts
new file mode 100644
index 0000000..db0fcc1
--- /dev/null
+++ b/client/packages/rtc-web/src/config/config-enum.ts
@@ -0,0 +1,3 @@
+export const enum ConfigEnum {
+  useRelay = 'tl-rtc-file-use-relay',
+}
diff --git a/client/packages/rtc-web/src/config/index.ts b/client/packages/rtc-web/src/config/index.ts
new file mode 100644
index 0000000..fd36dbc
--- /dev/null
+++ b/client/packages/rtc-web/src/config/index.ts
@@ -0,0 +1 @@
+export * from './config-enum';
diff --git a/client/packages/rtc-web/src/env.d.ts b/client/packages/rtc-web/src/env.d.ts
new file mode 100644
index 0000000..b38d3f4
--- /dev/null
+++ b/client/packages/rtc-web/src/env.d.ts
@@ -0,0 +1 @@
+declare module 'socket.io-client';
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index 4eef31e..8ef627b 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useTheme';
 export * from './useRoom';
+export * from './useInitData';
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
new file mode 100644
index 0000000..91383e3
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -0,0 +1,41 @@
+import { ConfigEnum } from '@/config';
+import { useFetch, useLocalStorage } from '@vueuse/core';
+import { ref, watch } from 'vue';
+import io from 'socket.io-client';
+
+export const useFetchData = () => {
+  const useTurn = useLocalStorage(ConfigEnum.useRelay, true);
+
+  const { data } = useFetch(() => `/api/comm/initData?turn=${useTurn.value}`)
+    .get()
+    .json();
+
+  return { data };
+};
+
+export const useInitData = () => {
+  const { data } = useFetchData();
+  const initData = ref({
+    langMode: 'zh', // 默认中文
+  });
+
+  watch(
+    () => data.value,
+    (v) => {
+      if (v) {
+        const { wsHost, logo, version, rtcConfig, options } = v;
+        initData.value = Object.assign({}, initData.value, {
+          socket: wsHost ? io(wsHost) : null,
+          logo,
+          version,
+          options,
+          config: rtcConfig,
+        });
+      }
+    }
+  );
+
+  return {
+    initData,
+  };
+};
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index 8aadf2f..1ed0e2c 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -1,10 +1,22 @@
 <script lang="ts" setup>
 import { MenuSide } from '@/components/menu';
 import { NavHeader, FullHeightFlexBox } from '@/components/lib';
+import { useInitData } from '@/hooks';
+import { watch } from 'vue';
 
 defineOptions({
   name: 'LayoutIndex',
 });
+
+const { initData } = useInitData();
+console.log(initData);
+
+watch(
+  () => initData.value,
+  (v) => {
+    console.log(v);
+  }
+);
 </script>
 
 <template>
diff --git a/client/packages/rtc-web/vite.config.ts b/client/packages/rtc-web/vite.config.ts
index e3cb5bc..b7a533c 100644
--- a/client/packages/rtc-web/vite.config.ts
+++ b/client/packages/rtc-web/vite.config.ts
@@ -8,6 +8,9 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 
 const pathResolve = (path: string) => resolve(__dirname, path);
 
+// http://localhost:9092/api
+// https://im.iamtsm.cn/api
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -18,6 +21,15 @@ export default defineConfig({
       },
     ],
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:9092/api',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
   plugins: [
     vue(),
     vueJsx(),
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index f32dd5c..65fae36 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -24,6 +24,7 @@ importers:
       postcss-import: ^15.1.0
       prettier: ^2.8.8
       prettier-plugin-tailwindcss: ^0.3.0
+      socket.io-client: 2.3.0
       tailwindcss: ^3.3.2
       typescript: ^5.1.3
       vite: ^4.3.9
@@ -40,6 +41,7 @@ importers:
       '@vueuse/router': 10.2.1_vue-router@4.2.2+vue@3.3.4
       lodash: 4.17.21
       nanoid: 4.0.2
+      socket.io-client: 2.3.0
       vue: 3.3.4
       vue-router: 4.2.2_vue@3.3.4
     devDependencies:
@@ -1068,6 +1070,10 @@ packages:
     hasBin: true
     dev: true
 
+  /after/0.8.2:
+    resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
+    dev: false
+
   /ajv/6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -1151,11 +1157,19 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /arraybuffer.slice/0.0.7:
+    resolution: {integrity: sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==}
+    dev: false
+
   /assign-symbols/1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /async-limiter/1.0.1:
+    resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
+    dev: false
+
   /atob/2.1.2:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
@@ -1178,6 +1192,10 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /backo2/1.0.2:
+    resolution: {integrity: sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==}
+    dev: false
+
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -1195,6 +1213,22 @@ packages:
       pascalcase: 0.1.1
     dev: true
 
+  /base64-arraybuffer/0.1.4:
+    resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /base64-arraybuffer/0.1.5:
+    resolution: {integrity: sha512-437oANT9tP582zZMwSvZGy2nmSeAb8DW2me3y+Uv1Wp2Rulr8Mqlyrv3E7MLxmsiaPSMMDmiDVzgE+e8zlMx9g==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /better-assert/1.0.2:
+    resolution: {integrity: sha512-bYeph2DFlpK1XmGs6fvlLRUN29QISM3GBuUwSFsMY2XRx4AvC0WNCS57j4c/xGrK2RS24C1w3YoBOsw9fT46tQ==}
+    dependencies:
+      callsite: 1.0.0
+    dev: false
+
   /big.js/5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
     dev: true
@@ -1204,6 +1238,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /blob/0.0.5:
+    resolution: {integrity: sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==}
+    dev: false
+
   /bluebird/3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
     dev: true
@@ -1275,6 +1313,10 @@ packages:
       unset-value: 1.0.0
     dev: true
 
+  /callsite/1.0.0:
+    resolution: {integrity: sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
+    dev: false
+
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1394,9 +1436,20 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /component-bind/1.0.0:
+    resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
+    dev: false
+
+  /component-emitter/1.2.1:
+    resolution: {integrity: sha512-jPatnhd33viNplKjqXKRkGU345p263OIWzDL2wH3LGIGp5Kojo+uXizHmOADRvhGFFTnJqX3jBAKP6vvmSDKcA==}
+    dev: false
+
   /component-emitter/1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
-    dev: true
+
+  /component-inherit/0.0.3:
+    resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
+    dev: false
 
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
@@ -1504,6 +1557,29 @@ packages:
       ms: 2.0.0
     dev: true
 
+  /debug/3.1.0:
+    resolution: {integrity: sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: false
+
+  /debug/4.1.1:
+    resolution: {integrity: sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==}
+    deprecated: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: false
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -1627,6 +1703,36 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /engine.io-client/3.4.4:
+    resolution: {integrity: sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==}
+    dependencies:
+      component-emitter: 1.3.0
+      component-inherit: 0.0.3
+      debug: 3.1.0
+      engine.io-parser: 2.2.1
+      has-cors: 1.1.0
+      indexof: 0.0.1
+      parseqs: 0.0.6
+      parseuri: 0.0.6
+      ws: 6.1.4
+      xmlhttprequest-ssl: 1.5.5
+      yeast: 0.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /engine.io-parser/2.2.1:
+    resolution: {integrity: sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==}
+    dependencies:
+      after: 0.8.2
+      arraybuffer.slice: 0.0.7
+      base64-arraybuffer: 0.1.4
+      blob: 0.0.5
+      has-binary2: 1.0.3
+    dev: false
+
   /entities/1.1.2:
     resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
     dev: true
@@ -2092,6 +2198,16 @@ packages:
       ansi-regex: 2.1.1
     dev: true
 
+  /has-binary2/1.0.3:
+    resolution: {integrity: sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==}
+    dependencies:
+      isarray: 2.0.1
+    dev: false
+
+  /has-cors/1.1.0:
+    resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
+    dev: false
+
   /has-flag/1.0.0:
     resolution: {integrity: sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==}
     engines: {node: '>=0.10.0'}
@@ -2190,6 +2306,10 @@ packages:
     engines: {node: '>=0.8.19'}
     dev: true
 
+  /indexof/0.0.1:
+    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
+    dev: false
+
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -2326,6 +2446,10 @@ packages:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
     dev: true
 
+  /isarray/2.0.1:
+    resolution: {integrity: sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==}
+    dev: false
+
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
@@ -2564,7 +2688,6 @@ packages:
 
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-    dev: true
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -2643,6 +2766,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /object-component/0.0.3:
+    resolution: {integrity: sha512-S0sN3agnVh2SZNEIGc0N1X4Z5K0JeFbGBrnuZpsxuUh5XLF0BnvWkMjRXo/zGKLd/eghvNIKcx1pQkmUjXIyrA==}
+    dev: false
+
   /object-copy/0.1.0:
     resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
     engines: {node: '>=0.10.0'}
@@ -2710,6 +2837,26 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parseqs/0.0.5:
+    resolution: {integrity: sha512-B3Nrjw2aL7aI4TDujOzfA4NsEc4u1lVcIRE0xesutH8kjeWF70uk+W5cBlIQx04zUH9NTBvuN36Y9xLRPK6Jjw==}
+    dependencies:
+      better-assert: 1.0.2
+    dev: false
+
+  /parseqs/0.0.6:
+    resolution: {integrity: sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==}
+    dev: false
+
+  /parseuri/0.0.5:
+    resolution: {integrity: sha512-ijhdxJu6l5Ru12jF0JvzXVPvsC+VibqeaExlNoMhWN6VQ79PGjkmc7oA4W1lp00sFkNyj0fx6ivPLdV51/UMog==}
+    dependencies:
+      better-assert: 1.0.2
+    dev: false
+
+  /parseuri/0.0.6:
+    resolution: {integrity: sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==}
+    dev: false
+
   /pascalcase/0.1.1:
     resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
     engines: {node: '>=0.10.0'}
@@ -3157,6 +3304,39 @@ packages:
       - supports-color
     dev: true
 
+  /socket.io-client/2.3.0:
+    resolution: {integrity: sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==}
+    dependencies:
+      backo2: 1.0.2
+      base64-arraybuffer: 0.1.5
+      component-bind: 1.0.0
+      component-emitter: 1.2.1
+      debug: 4.1.1
+      engine.io-client: 3.4.4
+      has-binary2: 1.0.3
+      has-cors: 1.1.0
+      indexof: 0.0.1
+      object-component: 0.0.3
+      parseqs: 0.0.5
+      parseuri: 0.0.5
+      socket.io-parser: 3.3.3
+      to-array: 0.1.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /socket.io-parser/3.3.3:
+    resolution: {integrity: sha512-qOg87q1PMWWTeO01768Yh9ogn7chB9zkKtQnya41Y355S0UmpXgpcrFwAgjYJxu9BdKug5r5e9YtVSeWhKBUZg==}
+    dependencies:
+      component-emitter: 1.3.0
+      debug: 3.1.0
+      isarray: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -3369,6 +3549,10 @@ packages:
       any-promise: 1.3.0
     dev: true
 
+  /to-array/0.1.4:
+    resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
+    dev: false
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -3653,11 +3837,30 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /ws/6.1.4:
+    resolution: {integrity: sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dependencies:
+      async-limiter: 1.0.1
+    dev: false
+
   /xml-name-validator/4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
     dev: true
 
+  /xmlhttprequest-ssl/1.5.5:
+    resolution: {integrity: sha512-/bFPLUgJrfGUL10AIv4Y7/CUt6so9CLtB/oFxQSHseSDNNCdC6vwwKEqwLN6wNPBg9YWXAiMu8jkf6RPRS/75Q==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /yallist/3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
     dev: false
@@ -3671,6 +3874,10 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
+  /yeast/0.1.2:
+    resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
+    dev: false
+
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}

From ec8a751b1bf7961ffdda8fb2b2275b7f4bd7fa53 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 19 Jul 2023 16:39:35 +0800
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E5=AE=A4?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=EF=BC=8C=E4=BB=A5=E5=8F=8A=E8=81=94?=
 =?UTF-8?q?=E5=8A=A8query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rtc-web/src/assets/styles/index.css       | 20 ++++++++
 .../rtc-web/src/assets/svg-icon/emoji.svg     |  1 +
 .../rtc-web/src/assets/svg-icon/member.svg    |  1 +
 .../src/components/back/back-title.vue        |  2 +-
 .../src/components/chat-room/chat-input.vue   | 12 +++++
 .../src/components/chat-room/chat-room.vue    | 26 ++++++++++
 .../rtc-web/src/components/chat-room/index.ts |  2 +
 .../rtc-web/src/components/menu-action.vue    | 35 ++++++++++++++
 .../packages/rtc-web/src/config/constant.ts   |  9 ++++
 client/packages/rtc-web/src/config/index.ts   |  1 +
 client/packages/rtc-web/src/context/index.ts  | 22 +++++++++
 .../packages/rtc-web/src/hooks/useInitData.ts |  7 ++-
 client/packages/rtc-web/src/layout/index.vue  | 11 +----
 .../packages/rtc-web/src/views/chat/chat.vue  | 47 +++++++++++++++++--
 .../src/views/chat/hooks/useSwitchMember.ts   | 35 ++++++++++++++
 15 files changed, 213 insertions(+), 18 deletions(-)
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/emoji.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/member.svg
 create mode 100644 client/packages/rtc-web/src/components/chat-room/chat-input.vue
 create mode 100644 client/packages/rtc-web/src/components/chat-room/chat-room.vue
 create mode 100644 client/packages/rtc-web/src/components/chat-room/index.ts
 create mode 100644 client/packages/rtc-web/src/components/menu-action.vue
 create mode 100644 client/packages/rtc-web/src/config/constant.ts
 create mode 100644 client/packages/rtc-web/src/context/index.ts
 create mode 100644 client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts

diff --git a/client/packages/rtc-web/src/assets/styles/index.css b/client/packages/rtc-web/src/assets/styles/index.css
index 77d1d3c..6d49701 100644
--- a/client/packages/rtc-web/src/assets/styles/index.css
+++ b/client/packages/rtc-web/src/assets/styles/index.css
@@ -1 +1,21 @@
 @import './tailwindcss';
+
+/* width */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/client/packages/rtc-web/src/assets/svg-icon/emoji.svg b/client/packages/rtc-web/src/assets/svg-icon/emoji.svg
new file mode 100644
index 0000000..7126d84
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/emoji.svg
@@ -0,0 +1 @@
+<svg t="1689752584815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6347" width="200" height="200"><path d="M480 452.266667m-426.666667 0a426.666667 426.666667 0 1 0 853.333334 0 426.666667 426.666667 0 1 0-853.333334 0Z" fill="#FFE500" p-id="6348"></path><path d="M480 25.6c-234.666667 0-426.666667 192-426.666667 426.666667s192 426.666667 426.666667 426.666666 426.666667-192 426.666667-426.666666-192-426.666667-426.666667-426.666667z m0 789.333333C264.533333 814.933333 91.733333 640 91.733333 426.666667c0-215.466667 174.933333-388.266667 388.266667-388.266667S870.4 211.2 870.4 426.666667c0 213.333333-174.933333 388.266667-390.4 388.266666z" fill="#EBCB00" p-id="6349"></path><path d="M352 110.933333a128 32 0 1 0 256 0 128 32 0 1 0-256 0Z" fill="#FFF48C" p-id="6350"></path><path d="M138.666667 966.4a341.333333 32 0 1 0 682.666666 0 341.333333 32 0 1 0-682.666666 0Z" fill="#45413C" opacity=".15" p-id="6351"></path><path d="M170.666667 558.933333a53.333333 32 0 1 0 106.666666 0 53.333333 32 0 1 0-106.666666 0Z" fill="#FFAA54" p-id="6352"></path><path d="M277.333333 409.6m-21.333333 0a21.333333 21.333333 0 1 0 42.666667 0 21.333333 21.333333 0 1 0-42.666667 0Z" fill="#45413C" p-id="6353"></path><path d="M693.333333 409.6m-21.333333 0a21.333333 21.333333 0 1 0 42.666667 0 21.333333 21.333333 0 1 0-42.666667 0Z" fill="#45413C" p-id="6354"></path><path d="M384 729.6s51.2-21.333333 96-21.333333 96 21.333333 96 21.333333M512 526.933333h416c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667H512" fill="#FFE500" p-id="6355"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/member.svg b/client/packages/rtc-web/src/assets/svg-icon/member.svg
new file mode 100644
index 0000000..5d824d1
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/member.svg
@@ -0,0 +1 @@
+<svg t="1689750291003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="200" height="200"><path d="M837.603556 277.134222a2.275556 2.275556 0 0 0-0.056889-0.483555c-0.199111-0.654222 14.848 44.856889-0.597334-1.934223a88.462222 88.462222 0 0 0-0.995555-2.929777c-14.961778-42.496-39.224889-58.965333-57.002667-62.321778-22.840889-4.352-47.587556 5.774222-47.587555 35.498667 0 4.437333 0.853333 9.272889 2.417777 14.250666l-0.142222-0.028444c0.085333 0.256 0.227556 0.512 0.369778 0.768 1.621333 5.063111 3.953778 10.268444 6.769778 15.445333 13.767111 34.019556 21.333333 71.224889 21.333333 110.165333 0 76.117333-28.956444 145.521778-76.458667 197.802667 102.030222 60.273778 177.208889 184.149333 203.064889 303.672889H981.333333c-21.162667-119.978667-82.915556-248.632889-170.524444-325.632a385.194667 385.194667 0 0 0 42.154667-175.843556 386.275556 386.275556 0 0 0-15.36-108.430222zM429.056 637.013333a250.026667 250.026667 0 1 0-0.028444-500.081777 250.026667 250.026667 0 0 0 0.028444 500.081777z m158.151111-253.354666a161.479111 161.479111 0 1 1-322.958222 0 161.479111 161.479111 0 0 1 322.958222 0z m182.784 503.381333c-30.663111-180.878222-180.707556-340.935111-352.483555-340.935111-191.744 0-343.950222 160.056889-374.840889 340.935111h91.306666c29.354667-130.304 141.624889-250.026667 283.534223-250.026667 122.737778 0 232.248889 119.694222 261.205333 250.026667h91.278222z" p-id="2522"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/components/back/back-title.vue b/client/packages/rtc-web/src/components/back/back-title.vue
index b92b152..5fbc3a6 100644
--- a/client/packages/rtc-web/src/components/back/back-title.vue
+++ b/client/packages/rtc-web/src/components/back/back-title.vue
@@ -18,7 +18,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="flex cursor-pointer items-center">
+  <div class="flex items-center">
     <!-- <svg-icon :name="props.svgName" class="mr-1 h-8 w-8"></svg-icon> -->
     <div v-if="props.title">{{ props.title }}</div>
     <slot v-else></slot>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-input.vue b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
new file mode 100644
index 0000000..ba788f5
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'ChatInput',
+});
+</script>
+
+<template>
+  <textarea
+    class="textarea-info textarea resize-none"
+    placeholder="请输入聊天消息"
+  ></textarea>
+</template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room.vue b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
new file mode 100644
index 0000000..9f704d3
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import ChatInput from './chat-input.vue';
+import MenuAction from '../menu-action.vue';
+import { ChatInputAction } from '@/config';
+
+defineOptions({
+  name: 'ChatRoomCom',
+});
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="flex flex-1 flex-col">
+      <div class="flex-1 px-4 py-4">聊天框</div>
+      <div
+        class="flex h-[260px] flex-col border-t pb-1.5 dark:border-neutral-600"
+      >
+        <MenuAction :menu-action="ChatInputAction" class="pl-2 pt-2" />
+        <ChatInput class="mt-2 flex-1" />
+      </div>
+    </div>
+    <div class="hidden w-[220px] border-l dark:border-neutral-600 lg:block">
+      成员列表
+    </div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/chat-room/index.ts b/client/packages/rtc-web/src/components/chat-room/index.ts
new file mode 100644
index 0000000..13137d0
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/index.ts
@@ -0,0 +1,2 @@
+export { default as ChatRoomCom } from './chat-room.vue';
+export { default as ChatInput } from './chat-input.vue';
diff --git a/client/packages/rtc-web/src/components/menu-action.vue b/client/packages/rtc-web/src/components/menu-action.vue
new file mode 100644
index 0000000..532e767
--- /dev/null
+++ b/client/packages/rtc-web/src/components/menu-action.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'MenuActions',
+});
+
+type PropTypes = {
+  menuAction: { name: string; tip: string; color?: string }[];
+};
+
+const props = withDefaults(defineProps<PropTypes>(), {
+  menuAction: () => [] as PropTypes['menuAction'],
+});
+
+const emits = defineEmits(['clickIcon']);
+
+const handleClick = (name: string) => emits('clickIcon', name);
+</script>
+
+<template>
+  <div class="flex">
+    <div
+      v-for="item in props.menuAction"
+      :key="item.name"
+      :data-tip="item.tip"
+      class="tooltip tooltip-bottom"
+    >
+      <svg-icon
+        :color="item.color"
+        :name="item.name"
+        class="h-6 w-6 cursor-pointer"
+        @click="handleClick(item.name)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/config/constant.ts b/client/packages/rtc-web/src/config/constant.ts
new file mode 100644
index 0000000..3eaf125
--- /dev/null
+++ b/client/packages/rtc-web/src/config/constant.ts
@@ -0,0 +1,9 @@
+type MenuActionType = { name: string; tip: string; color?: string };
+
+export const ChatAction: MenuActionType[] = [
+  { name: 'member', tip: '显示成员', color: undefined },
+];
+
+export const ChatInputAction: MenuActionType[] = [
+  { name: 'emoji', tip: '表情' },
+];
diff --git a/client/packages/rtc-web/src/config/index.ts b/client/packages/rtc-web/src/config/index.ts
index fd36dbc..a136a35 100644
--- a/client/packages/rtc-web/src/config/index.ts
+++ b/client/packages/rtc-web/src/config/index.ts
@@ -1 +1,2 @@
 export * from './config-enum';
+export * from './constant';
diff --git a/client/packages/rtc-web/src/context/index.ts b/client/packages/rtc-web/src/context/index.ts
new file mode 100644
index 0000000..a823678
--- /dev/null
+++ b/client/packages/rtc-web/src/context/index.ts
@@ -0,0 +1,22 @@
+import { InjectionKey, Ref } from 'vue';
+
+export type InitDataKeyType = Partial<{
+  langMode: string;
+  socket: any;
+  logo: string;
+  version: string;
+  options: {
+    offerToReceiveAudio: number;
+    offerToReceiveVideo: number;
+  };
+  config: {
+    iceServers: Partial<{
+      urls: string;
+      username: string;
+      credential: string;
+    }>[];
+  };
+}>;
+
+export const InitDataKey: InjectionKey<Ref<InitDataKeyType>> =
+  Symbol('initDataKey');
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index 91383e3..b841f69 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -1,7 +1,8 @@
 import { ConfigEnum } from '@/config';
 import { useFetch, useLocalStorage } from '@vueuse/core';
-import { ref, watch } from 'vue';
+import { inject, provide, ref, watch } from 'vue';
 import io from 'socket.io-client';
+import { InitDataKey, InitDataKeyType } from '@/context';
 
 export const useFetchData = () => {
   const useTurn = useLocalStorage(ConfigEnum.useRelay, true);
@@ -15,7 +16,7 @@ export const useFetchData = () => {
 
 export const useInitData = () => {
   const { data } = useFetchData();
-  const initData = ref({
+  const initData = ref<InitDataKeyType>({
     langMode: 'zh', // 默认中文
   });
 
@@ -35,6 +36,8 @@ export const useInitData = () => {
     }
   );
 
+  provide(InitDataKey, initData);
+
   return {
     initData,
   };
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index 1ed0e2c..84c60fa 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -2,21 +2,12 @@
 import { MenuSide } from '@/components/menu';
 import { NavHeader, FullHeightFlexBox } from '@/components/lib';
 import { useInitData } from '@/hooks';
-import { watch } from 'vue';
 
 defineOptions({
   name: 'LayoutIndex',
 });
 
-const { initData } = useInitData();
-console.log(initData);
-
-watch(
-  () => initData.value,
-  (v) => {
-    console.log(v);
-  }
-);
+useInitData();
 </script>
 
 <template>
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index 007b52d..add5465 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { onBeforeRouteUpdate, useRouter } from 'vue-router';
 import { useRoom } from '@/hooks';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
 import { useRouteParams } from '@vueuse/router';
+import { ChatRoomCom } from '@/components/chat-room';
+import MenuAction from '@/components/menu-action.vue';
+import { ChatAction } from '@/config';
+import { useSwitchMember } from './hooks/useSwitchMember';
 
 defineOptions({
   name: 'ChatView',
@@ -14,6 +18,21 @@ const roomId = useRouteParams('roomId');
 
 const { isValid } = useRoom((roomId.value as string) || '');
 
+const { switchMember, open, isIgScreen } = useSwitchMember();
+
+const chatActionMenu = ref(ChatAction);
+
+watch(
+  () => open.value,
+  (v) => {
+    const findv = chatActionMenu.value.find((item) => item.name === 'member');
+    if (findv) {
+      findv.color = v ? '#2F54EB' : undefined;
+    }
+  },
+  { immediate: true }
+);
+
 const checkParams = () => {
   if (!isValid.value) router.replace('/');
 };
@@ -28,17 +47,35 @@ onBeforeRouteUpdate((to, from) => {
 });
 
 const handleBackLevel = () => router.replace('/');
+
+const handleClickIcon = (name: string) => {
+  if (name === 'member' && !isIgScreen.value) {
+    switchMember();
+  }
+};
 </script>
 
 <template>
   <div class="flex w-full flex-col">
-    <BackPreviousLevel class="border-b py-1" @back="handleBackLevel">
-      <BackTitle svg-name="chat">
-        {{ roomId }}
+    <BackPreviousLevel
+      class="py-2 shadow-md dark:shadow-sm dark:shadow-neutral-600"
+      @back="handleBackLevel"
+    >
+      <BackTitle svg-name="chat" class="flex-1 justify-between">
+        <div class="cursor-pointer">
+          {{ roomId }}
+        </div>
+        <MenuAction
+          :menu-action="chatActionMenu"
+          class="mr-6"
+          @click-icon="handleClickIcon"
+        />
       </BackTitle>
     </BackPreviousLevel>
 
-    <div class="flex-1">内容</div>
+    <div class="flex-1">
+      <ChatRoomCom />
+    </div>
   </div>
 </template>
 
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts b/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
new file mode 100644
index 0000000..e234153
--- /dev/null
+++ b/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
@@ -0,0 +1,35 @@
+import { useUrlSearchParams, useWindowSize } from '@vueuse/core';
+import { computed, watch } from 'vue';
+
+export const useSwitchMember = () => {
+  const { width } = useWindowSize();
+
+  const params = useUrlSearchParams<{ showMembers: string | undefined }>(
+    'history'
+  );
+
+  if (params.showMembers === undefined) {
+    params.showMembers = 'true';
+  }
+
+  const switchMember = () => {
+    params.showMembers = params.showMembers === 'true' ? 'false' : 'true';
+  };
+
+  const open = computed(() => params.showMembers === 'true');
+
+  const isIgScreen = computed(() => width.value <= 1024);
+
+  watch(
+    () => isIgScreen.value,
+    (w) => {
+      params.showMembers = w ? 'false' : 'true';
+    }
+  );
+
+  return {
+    open,
+    switchMember,
+    isIgScreen,
+  };
+};

From 1399a43ee3cb64462b09c50b6c74c40be34d1275 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Fri, 21 Jul 2023 12:47:34 +0800
Subject: [PATCH 04/20] =?UTF-8?q?feat:=20useSocket=EF=BC=8Conline=20users?=
 =?UTF-8?q?=20count?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rtc-web/src/assets/svg-icon/count.svg     |  1 +
 .../rtc-web/src/components/base/nav-icons.vue | 13 ++++-
 .../src/components/chat-room/chat-room.vue    |  8 +++-
 client/packages/rtc-web/src/hooks/index.ts    |  1 +
 .../rtc-web/src/hooks/socket-utils/index.ts   |  2 +
 .../src/hooks/socket-utils/useSocket.ts       | 22 +++++++++
 .../src/hooks/socket-utils/useSocketUtils.ts  | 11 +++++
 .../packages/rtc-web/src/hooks/useInitData.ts |  2 +-
 client/packages/rtc-web/src/utils/common.ts   | 16 +++++++
 .../packages/rtc-web/src/views/chat/chat.vue  |  4 +-
 .../src/views/chat/hooks/useSwitchMember.ts   | 47 +++++++++++++------
 11 files changed, 108 insertions(+), 19 deletions(-)
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/count.svg
 create mode 100644 client/packages/rtc-web/src/hooks/socket-utils/index.ts
 create mode 100644 client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
 create mode 100644 client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts

diff --git a/client/packages/rtc-web/src/assets/svg-icon/count.svg b/client/packages/rtc-web/src/assets/svg-icon/count.svg
new file mode 100644
index 0000000..5427670
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/count.svg
@@ -0,0 +1 @@
+<svg t="1689914473474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1272" width="200" height="200"><path d="M514.048 128q79.872 0 149.504 30.208t121.856 82.432 82.432 122.368 30.208 150.016q0 78.848-30.208 148.48t-82.432 121.856-121.856 82.432-149.504 30.208-149.504-30.208-121.856-82.432-82.432-121.856-30.208-148.48q0-79.872 30.208-150.016t82.432-122.368 121.856-82.432 149.504-30.208z" p-id="1273" fill="#0CC6BF"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/components/base/nav-icons.vue b/client/packages/rtc-web/src/components/base/nav-icons.vue
index 4ed2cbc..df87805 100644
--- a/client/packages/rtc-web/src/components/base/nav-icons.vue
+++ b/client/packages/rtc-web/src/components/base/nav-icons.vue
@@ -1,11 +1,15 @@
 <script lang="ts" setup>
 import { useSwitchTheme, ThemeEnum } from '@/hooks';
 import { computed } from 'vue';
+import { useSocketCount } from '@/hooks';
 
 defineOptions({
   name: 'NavIcons',
 });
 
+// 获取 当前在线人数
+const { data: curCount } = useSocketCount();
+
 const { themeInfo, setTheme, isDark } = useSwitchTheme();
 
 const themeIcon = computed(() =>
@@ -18,9 +22,16 @@ const switchTheme = () =>
 
 <template>
   <div>
+    <div class="flex items-center text-sm">
+      <svg-icon name="count" class="mr-2 h-3 w-3" />
+      在线人数：
+      <div class="font-semibold">
+        {{ curCount }}
+      </div>
+    </div>
     <a
       href="https://github.com/tl-open-source/tl-rtc-file"
-      class="cursor-pointer"
+      class="ml-8 cursor-pointer"
     >
       <svg-icon
         name="github"
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room.vue b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
index 9f704d3..cd9aea5 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
@@ -2,6 +2,9 @@
 import ChatInput from './chat-input.vue';
 import MenuAction from '../menu-action.vue';
 import { ChatInputAction } from '@/config';
+import { useSwitchMember } from '@/views/chat/hooks/useSwitchMember';
+
+const { open } = useSwitchMember();
 
 defineOptions({
   name: 'ChatRoomCom',
@@ -19,7 +22,10 @@ defineOptions({
         <ChatInput class="mt-2 flex-1" />
       </div>
     </div>
-    <div class="hidden w-[220px] border-l dark:border-neutral-600 lg:block">
+    <div
+      v-if="open"
+      class="hidden w-[220px] border-l dark:border-neutral-600 lg:block"
+    >
       成员列表
     </div>
   </div>
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index 8ef627b..9ed3c4a 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useTheme';
 export * from './useRoom';
 export * from './useInitData';
+export * from './socket-utils';
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/index.ts b/client/packages/rtc-web/src/hooks/socket-utils/index.ts
new file mode 100644
index 0000000..3f0c43f
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/socket-utils/index.ts
@@ -0,0 +1,2 @@
+export * from './useSocket';
+export * from './useSocketUtils';
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
new file mode 100644
index 0000000..ec85ff1
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
@@ -0,0 +1,22 @@
+import { InitDataKey } from '@/context';
+import { CommonFnType } from '@/types';
+import { inject, ref, watch } from 'vue';
+
+export const useSocket = <T>(fn: CommonFnType) => {
+  const initData = inject(InitDataKey);
+
+  const data = ref<T>();
+
+  if (initData) {
+    watch(
+      () => initData.value.socket,
+      async (v) => {
+        data.value = await fn(v);
+      }
+    );
+  }
+
+  return {
+    data,
+  };
+};
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts b/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts
new file mode 100644
index 0000000..9ab8539
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts
@@ -0,0 +1,11 @@
+import { useSocket } from './useSocket';
+import { transformSocketListenEvent } from '@/utils';
+
+export const useSocketCount = () => {
+  const handleSocketCount = async (socket: any) => {
+    const [count] = await transformSocketListenEvent(socket, 'count');
+    return count.mc;
+  };
+
+  return useSocket<number>(handleSocketCount);
+};
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index b841f69..9600b14 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -1,6 +1,6 @@
 import { ConfigEnum } from '@/config';
 import { useFetch, useLocalStorage } from '@vueuse/core';
-import { inject, provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue';
 import io from 'socket.io-client';
 import { InitDataKey, InitDataKeyType } from '@/context';
 
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index 9e7e973..125aaed 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -10,3 +10,19 @@ export function withBtnClickEvent(fn: CommonFnType) {
 export function preventDefault(e: Event) {
   e.preventDefault();
 }
+
+export function safenExecuteConditioFn(condition: boolean, fn: CommonFnType) {
+  if (condition) {
+    fn();
+  }
+}
+
+// 将 socket on 转换为 promisify
+export function transformSocketListenEvent(socket: any, ev: string) {
+  return new Promise<any[]>((resolve) => {
+    const cb = (...args: any[]) => {
+      resolve(args);
+    };
+    socket.on(ev, cb);
+  });
+}
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index add5465..4ccdd28 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -18,7 +18,7 @@ const roomId = useRouteParams('roomId');
 
 const { isValid } = useRoom((roomId.value as string) || '');
 
-const { switchMember, open, isIgScreen } = useSwitchMember();
+const { switchMember, open, isLgScreen } = useSwitchMember();
 
 const chatActionMenu = ref(ChatAction);
 
@@ -49,7 +49,7 @@ onBeforeRouteUpdate((to, from) => {
 const handleBackLevel = () => router.replace('/');
 
 const handleClickIcon = (name: string) => {
-  if (name === 'member' && !isIgScreen.value) {
+  if (name === 'member' && !isLgScreen.value) {
     switchMember();
   }
 };
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts b/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
index e234153..f03d2cc 100644
--- a/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
+++ b/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
@@ -1,35 +1,54 @@
-import { useUrlSearchParams, useWindowSize } from '@vueuse/core';
-import { computed, watch } from 'vue';
+import { useWindowSize } from '@vueuse/core';
+import { useRouteQuery } from '@vueuse/router';
+import { computed, toRefs, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { isNaN } from 'lodash';
 
 export const useSwitchMember = () => {
   const { width } = useWindowSize();
 
-  const params = useUrlSearchParams<{ showMembers: string | undefined }>(
-    'history'
-  );
+  const { query } = toRefs(useRoute());
 
-  if (params.showMembers === undefined) {
-    params.showMembers = 'true';
-  }
+  const showMembers = useRouteQuery('showMembers', '0', {
+    transform: Number,
+  });
 
   const switchMember = () => {
-    params.showMembers = params.showMembers === 'true' ? 'false' : 'true';
+    showMembers.value = showMembers.value === 0 ? 1 : 0;
   };
 
-  const open = computed(() => params.showMembers === 'true');
+  const open = computed(() => showMembers.value === 1);
 
-  const isIgScreen = computed(() => width.value <= 1024);
+  // 是否是宽屏， max-width = 1024
+  const isLgScreen = computed(() => width.value <= 1024);
 
   watch(
-    () => isIgScreen.value,
+    () => isLgScreen.value,
     (w) => {
-      params.showMembers = w ? 'false' : 'true';
+      showMembers.value = w ? 0 : 1;
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => query.value.showMembers,
+    (v) => {
+      const nv = Number(v);
+      if (!isNaN(nv)) {
+        showMembers.value = nv;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
     }
   );
 
   return {
     open,
     switchMember,
-    isIgScreen,
+    isLgScreen,
   };
 };

From b6a2ea02deabb60b9df4b4306ba5948507ea0c5c Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Sun, 23 Jul 2023 23:34:21 +0800
Subject: [PATCH 05/20] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4useSocket?=
 =?UTF-8?q?=E3=80=81useCreateRoom(=E4=BC=98=E5=8C=96hook)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/.eslintrc.cjs         |   1 +
 .../src/assets/svg-icon/user-smail.svg        |   1 +
 .../components/chat-room/chat-room-user.vue   |  17 +
 .../src/components/chat-room/chat-room.vue    |   3 +-
 .../src/components/chat-room/user-card.vue    |  35 ++
 client/packages/rtc-web/src/config/index.ts   |   1 +
 .../rtc-web/src/config/socket-event-name.ts   |   7 +
 client/packages/rtc-web/src/hooks/index.ts    |   1 +
 .../src/hooks/socket-utils/useSocket.ts       |  17 +-
 .../src/hooks/socket-utils/useSocketUtils.ts  |  17 +-
 .../packages/rtc-web/src/hooks/useInitData.ts |   4 +-
 client/packages/rtc-web/src/hooks/useRoom.ts  | 134 ++++-
 .../rtc-web/src/hooks/useRouterReactive.ts    |  28 +
 client/packages/rtc-web/src/utils/index.ts    |   2 +
 client/packages/rtc-web/src/utils/user.ts     | 503 ++++++++++++++++++
 .../packages/rtc-web/src/views/chat/chat.vue  |  25 +-
 16 files changed, 759 insertions(+), 37 deletions(-)
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/user-smail.svg
 create mode 100644 client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
 create mode 100644 client/packages/rtc-web/src/components/chat-room/user-card.vue
 create mode 100644 client/packages/rtc-web/src/config/socket-event-name.ts
 create mode 100644 client/packages/rtc-web/src/hooks/useRouterReactive.ts
 create mode 100644 client/packages/rtc-web/src/utils/user.ts

diff --git a/client/packages/rtc-web/.eslintrc.cjs b/client/packages/rtc-web/.eslintrc.cjs
index 874f700..d25ee04 100644
--- a/client/packages/rtc-web/.eslintrc.cjs
+++ b/client/packages/rtc-web/.eslintrc.cjs
@@ -23,5 +23,6 @@ module.exports = {
     'vue/attribute-hyphenation': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     'no-debugger': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
 };
diff --git a/client/packages/rtc-web/src/assets/svg-icon/user-smail.svg b/client/packages/rtc-web/src/assets/svg-icon/user-smail.svg
new file mode 100644
index 0000000..a425c7f
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/user-smail.svg
@@ -0,0 +1 @@
+<svg t="1690124637853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1266" width="200" height="200"><path d="M512 512m-511.982387 0a511.982387 511.982387 0 1 0 1023.964774 0 511.982387 511.982387 0 1 0-1023.964774 0Z" fill="#F9C228" p-id="1267"></path><path d="M917.619539 199.639491C761.536154-3.082215 483.485105-56.554248 265.951152 62.930031a531.620502 531.620502 0 0 0-166.598142 387.161472c0 294.430822 238.686756 533.099966 533.099966 533.099966a535.424837 535.424837 0 0 0 101.219951-9.598899 514.289646 514.289646 0 0 0 90.705195-55.973031C1048.393533 745.138768 1090.223598 423.672515 917.619539 199.639491z" fill="#FCDC22" p-id="1268"></path><path d="M972.042656 550.272308c-111.329618 114.904988-252.600757 198.670795-415.482628 260.033299 0 0 55.867355 156.664603 207.829377 101.53698 250.628139-90.846096 207.653251-361.570279 207.653251-361.570279z" fill="#FC9B88" p-id="1269"></path><path d="M522.690884 570.08655a80.119986 64.145304 90 1 0 128.290609 0 80.119986 64.145304 90 1 0-128.290609 0Z" fill="#282828" p-id="1270"></path><path d="M860.519298 429.449467a80.119986 54.881046 90 1 0 109.762092 0 80.119986 54.881046 90 1 0-109.762092 0Z" fill="#282828" p-id="1271"></path><path d="M953.813553 724.584795a261.319023 261.319023 0 0 0-116.014585-59.988717C754.121225 723.616099 659.699759 771.434469 556.560028 810.305607c0 0 55.867355 156.664603 207.829377 101.53698 110.959752-40.209701 164.361335-115.64472 189.424148-187.257792z" fill="#EA0F1A" p-id="1272"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
new file mode 100644
index 0000000..6042fcf
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import UserCard from './user-card.vue';
+
+defineOptions({
+  name: 'ChatRoomUsers',
+});
+</script>
+
+<template>
+  <div class="px-2 pt-2 text-sm">
+    <div class="mb-1 text-gray-400">房主</div>
+    <UserCard class="mb-8" />
+
+    <div class="mb-1 text-gray-400">房间成员</div>
+    <UserCard />
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room.vue b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
index cd9aea5..5d9271d 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ChatInput from './chat-input.vue';
 import MenuAction from '../menu-action.vue';
+import ChatRoomUser from './chat-room-user.vue';
 import { ChatInputAction } from '@/config';
 import { useSwitchMember } from '@/views/chat/hooks/useSwitchMember';
 
@@ -26,7 +27,7 @@ defineOptions({
       v-if="open"
       class="hidden w-[220px] border-l dark:border-neutral-600 lg:block"
     >
-      成员列表
+      <ChatRoomUser />
     </div>
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/components/chat-room/user-card.vue b/client/packages/rtc-web/src/components/chat-room/user-card.vue
new file mode 100644
index 0000000..43350a2
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/user-card.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineOptions({
+  name: 'UserCard',
+});
+
+defineProps({
+  iconname: {
+    type: String as PropType<string>,
+    default: 'member',
+  },
+  iconcolor: {
+    type: String as PropType<string>,
+    default: 'currentcolor',
+  },
+  username: {
+    type: String as PropType<string>,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="user-card flex">
+    <button class="btn-circle btn border-0 bg-transparent">
+      <svg-icon :name="iconname" class="h-8 w-8" :color="iconcolor" />
+    </button>
+    <div class="ml-1 text-sm">
+      <div>{{ username }}</div>
+      <slot></slot>
+      <!-- <div class="other-info"></div> -->
+    </div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/config/index.ts b/client/packages/rtc-web/src/config/index.ts
index a136a35..d62b67e 100644
--- a/client/packages/rtc-web/src/config/index.ts
+++ b/client/packages/rtc-web/src/config/index.ts
@@ -1,2 +1,3 @@
 export * from './config-enum';
 export * from './constant';
+export * from './socket-event-name';
diff --git a/client/packages/rtc-web/src/config/socket-event-name.ts b/client/packages/rtc-web/src/config/socket-event-name.ts
new file mode 100644
index 0000000..001424c
--- /dev/null
+++ b/client/packages/rtc-web/src/config/socket-event-name.ts
@@ -0,0 +1,7 @@
+export const enum SocketEventName {
+  Count = 'count',
+  CreateAndJoin = 'createAndJoin',
+  RoomCreated = 'created',
+  RoomExit = 'exit',
+  RoomJoin = 'joined',
+}
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index 9ed3c4a..58d7199 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useTheme';
 export * from './useRoom';
 export * from './useInitData';
 export * from './socket-utils';
+export * from './useRouterReactive';
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
index ec85ff1..732e7fa 100644
--- a/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
+++ b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
@@ -1,22 +1,21 @@
 import { InitDataKey } from '@/context';
 import { CommonFnType } from '@/types';
-import { inject, ref, watch } from 'vue';
+import { inject, watch } from 'vue';
 
-export const useSocket = <T>(fn: CommonFnType) => {
+export const useSocket = (fn: CommonFnType) => {
   const initData = inject(InitDataKey);
 
-  const data = ref<T>();
-
   if (initData) {
     watch(
       () => initData.value.socket,
       async (v) => {
-        data.value = await fn(v);
+        if (v) {
+          await fn(v);
+        }
+      },
+      {
+        immediate: true,
       }
     );
   }
-
-  return {
-    data,
-  };
 };
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts b/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts
index 9ab8539..7369ad8 100644
--- a/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts
+++ b/client/packages/rtc-web/src/hooks/socket-utils/useSocketUtils.ts
@@ -1,11 +1,18 @@
+import { SocketEventName } from '@/config';
 import { useSocket } from './useSocket';
-import { transformSocketListenEvent } from '@/utils';
+import { ref } from 'vue';
 
 export const useSocketCount = () => {
-  const handleSocketCount = async (socket: any) => {
-    const [count] = await transformSocketListenEvent(socket, 'count');
-    return count.mc;
+  const count = ref(0);
+  const handleSocketCount = (socket: any) => {
+    socket.on(SocketEventName.Count, (data: any) => {
+      count.value = data.mc;
+    });
   };
 
-  return useSocket<number>(handleSocketCount);
+  useSocket(handleSocketCount);
+
+  return {
+    data: count,
+  };
 };
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index 9600b14..e6ffa7b 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -1,6 +1,6 @@
 import { ConfigEnum } from '@/config';
 import { useFetch, useLocalStorage } from '@vueuse/core';
-import { provide, ref, watch } from 'vue';
+import { provide, ref, shallowReactive, watch } from 'vue';
 import io from 'socket.io-client';
 import { InitDataKey, InitDataKeyType } from '@/context';
 
@@ -26,7 +26,7 @@ export const useInitData = () => {
       if (v) {
         const { wsHost, logo, version, rtcConfig, options } = v;
         initData.value = Object.assign({}, initData.value, {
-          socket: wsHost ? io(wsHost) : null,
+          socket: wsHost ? shallowReactive(io(wsHost)) : null,
           logo,
           version,
           options,
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 80c8dc7..f6c7318 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -1,6 +1,39 @@
 import { CommonFnType } from '@/types';
 import { resolveRef } from '@/utils/reactive';
-import { MaybeRef, computed } from 'vue';
+import {
+  MaybeRef,
+  computed,
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+import { useSocket } from './socket-utils';
+import { SocketEventName } from '@/config';
+import { useRouteParamsReactive } from '.';
+import { useRouter } from 'vue-router';
+import { InitDataKey } from '@/context';
+import { genNickName } from '@/utils';
+
+export type Member = {
+  id: string;
+  nickName: string;
+  langMode: string;
+  owner: boolean;
+  ua: string;
+  joinTime: string;
+  userAgent: string;
+  ip: string;
+  network: string;
+};
+
+export type OwnerInfo = {
+  socketId: string;
+  roomId: string;
+  recoderId: string;
+  owner: boolean;
+};
 
 export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
   const realValue = resolveRef(value);
@@ -17,3 +50,102 @@ export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
     isValid,
   };
 };
+
+export const useCreateRoom = () => {
+  const router = useRouter();
+
+  const initData = inject(InitDataKey);
+
+  const { roomId } = useRouteParamsReactive(['roomId']);
+
+  const { isValid } = useRoom(() => roomId.value || '');
+
+  const emitCreateRoom = (socket: any) => {
+    socket.emit(SocketEventName.CreateAndJoin, {
+      room: roomId.value,
+      type: 'password',
+      password: '',
+      nickName: genNickName(),
+      langMode: initData?.value.langMode,
+      ua: 'pc',
+      // network: this.network,
+    });
+  };
+
+  const checkParams = () => {
+    console.log('check');
+    if (!isValid.value) {
+      router.replace('/');
+    } else {
+      useSocket(emitCreateRoom);
+    }
+  };
+
+  watch(
+    () => isValid.value,
+    () => {
+      checkParams();
+    }
+  );
+
+  onMounted(checkParams);
+
+  return {
+    roomId,
+    isValid,
+  };
+};
+
+// 获取房间的一些信息，例如 peer 等信息
+export const useGetRoomInfo = () => {
+  const members = ref<Member[]>([]);
+  const ownerInfo = ref<OwnerInfo>({
+    socketId: '',
+    owner: true,
+    recoderId: '',
+    roomId: '',
+  });
+
+  const roomCreated = (data: any) => {
+    members.value = data.peers.map((peer: any) => {
+      return {
+        id: peer.id,
+        nickName: peer.nickName,
+        langMode: peer.langMode,
+        owner: peer.owner,
+        ua: peer.ua,
+        joinTime: peer.joinTime,
+        ip: peer.ip,
+        network: peer.network,
+      };
+    });
+
+    ownerInfo.value = {
+      owner: data.owner,
+      recoderId: data.recoderId,
+      roomId: data.room,
+      socketId: data.id,
+    };
+    console.log('created', members, ownerInfo);
+  };
+
+  const roomExit = async (data: any) => {
+    console.log('exit', data);
+  };
+
+  const roomJoin = async (result: any) => {
+    console.log('join', result);
+  };
+  const handleRoomInfo = async (socket: any) => {
+    socket.on(SocketEventName.RoomCreated, roomCreated);
+    socket.on(SocketEventName.RoomExit, roomExit);
+    socket.on(SocketEventName.RoomJoin, roomJoin);
+  };
+
+  useSocket(handleRoomInfo);
+
+  return {
+    members,
+    ownerInfo,
+  };
+};
diff --git a/client/packages/rtc-web/src/hooks/useRouterReactive.ts b/client/packages/rtc-web/src/hooks/useRouterReactive.ts
new file mode 100644
index 0000000..9d339af
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/useRouterReactive.ts
@@ -0,0 +1,28 @@
+import { useRouteParams } from '@vueuse/router';
+import { Ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+export const useRouteParamsReactive = <T extends string>(keys: T[]) => {
+  const params = keys.reduce(
+    (cur, next) => ({ ...cur, [next]: useRouteParams(next) }),
+    {} as Record<T, Ref<string | string[] | null>>
+  );
+
+  const route = useRoute();
+
+  watch(
+    () => route.params,
+    (v) => {
+      Object.keys(v).forEach((key) => {
+        if (params[key as T]) {
+          params[key as T].value = v[key];
+        }
+      });
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  return params;
+};
diff --git a/client/packages/rtc-web/src/utils/index.ts b/client/packages/rtc-web/src/utils/index.ts
index d0b9323..e48135e 100644
--- a/client/packages/rtc-web/src/utils/index.ts
+++ b/client/packages/rtc-web/src/utils/index.ts
@@ -1 +1,3 @@
 export * from './common';
+export * from './user';
+export * from './reactive';
diff --git a/client/packages/rtc-web/src/utils/user.ts b/client/packages/rtc-web/src/utils/user.ts
new file mode 100644
index 0000000..49d71ae
--- /dev/null
+++ b/client/packages/rtc-web/src/utils/user.ts
@@ -0,0 +1,503 @@
+export const nameDataBase = () => {
+  const adjectives = [
+    '幽默的',
+    '搞笑的',
+    '疯狂的',
+    '奇怪的',
+    '古怪的',
+    '无聊的',
+    '神秘的',
+    '魔幻的',
+    '风趣的',
+    '调皮的',
+    '聪明的',
+    '美丽的',
+    '可爱的',
+    '迷人的',
+    '酷的',
+    '萌萌的',
+    '潇洒的',
+    '霸气的',
+    '猛烈的',
+    '光芒的',
+    '伶俐的',
+    '俏皮的',
+    '小巧的',
+    '细腻的',
+    '娇嫩的',
+    '柔软的',
+    '亲切的',
+    '朴实的',
+    '拘谨的',
+    '高傲的',
+    '自恋的',
+    '浪漫的',
+    '单纯的',
+    '深情的',
+    '执着的',
+    '冷酷的',
+    '刁蛮的',
+    '天真的',
+    '多情的',
+    '成熟的',
+    '忧郁的',
+    '神经质的',
+    '孤独的',
+    '怀旧的',
+    '清新的',
+    '淡雅的',
+    '冷艳的',
+    '高冷的',
+    '玩世不恭的',
+    '逆天的',
+    '暴躁的',
+    '暴力的',
+    '妩媚的',
+    '狡猾的',
+    '自信的',
+    '自卑的',
+    '悲观的',
+    '乐观的',
+    '勇敢的',
+    '胆小的',
+    '快乐的',
+    '痛苦的',
+    '善良的',
+    '邪恶的',
+    '深邃的',
+    '神圣的',
+    '丰满的',
+    '单薄的',
+    '肥胖的',
+    '瘦弱的',
+    '英俊的',
+    '丑陋的',
+    '芳香的',
+    '臭气熏天的',
+    '热情的',
+    '冷漠的',
+    '朝气蓬勃的',
+    '干净的',
+    '脏兮兮的',
+    '无忧无虑的',
+    '喜怒无常的',
+    '平凡的',
+    '非凡的',
+    '害羞的',
+    '热心的',
+    '机智的',
+    '敏捷的',
+    '迟钝的',
+    '聪慧的',
+    '无知的',
+    '真诚的',
+    '虚伪的',
+    '直率的',
+    '谨慎的',
+    '大胆的',
+    '谦虚的',
+    '傲慢的',
+    '严肃的',
+    '轻松的',
+    '紧张的',
+    '勤劳的',
+    '懒惰的',
+    '守时的',
+    '迟到的',
+    '坚强的',
+    '软弱的',
+    '聪慧的',
+    '愚笨的',
+    '机灵的',
+    '迟钝的',
+    '淘气的',
+    '乖巧的',
+    '活泼的',
+    '沉默的',
+    '健康的',
+    '不健康的',
+    '高大的',
+    '矮小的',
+    '长的',
+    '短的',
+    '胖的',
+    '瘦的',
+    '美满的',
+    '不幸的',
+    '富有的',
+    '贫穷的',
+    '快乐的',
+    '不开心的',
+    '甜美的',
+    '苦涩的',
+    '精明的',
+    '愚蠢的',
+    '聪明的',
+    '智商高的',
+    '心灵手巧的',
+    '笨手笨脚的',
+    '冷静的',
+    '冲动的',
+    '踏实的',
+    '轻浮的',
+    '温柔的',
+    '粗暴的',
+    '好学的',
+    '讨厌学习的',
+    '好吃的',
+    '不好吃的',
+    '耐心的',
+    '急躁的',
+    '友善的',
+    '冷漠的',
+    '豁达的',
+    '固执的',
+    '谨慎的',
+    '善良的',
+    '狠毒的',
+    '平和的',
+    '狂躁的',
+    '机会主义的',
+    '悲观的',
+    '乐观的',
+    '心胸开阔的',
+    '偏狭的',
+    '讲义气的',
+    '不守信用的',
+    '有魅力的',
+    '无趣的',
+    '有思想的',
+    '无聊的',
+    '谋略深的',
+    '目光短浅的',
+    '善解人意的',
+    '自私的',
+    '坦率的',
+    '虚伪的',
+    '好奇的',
+    '不解风情的',
+    '喜欢交友的',
+    '独来独往的',
+    '健谈的',
+    '静默的',
+    '喜欢思考的',
+    '机智幽默的',
+    '情感丰富的',
+    '心地善良的',
+    '充满自信的',
+    '天真烂漫的',
+    '追求完美的',
+    '充满活力的',
+    '喜欢冒险的',
+    '充满创造力的',
+    '沉着冷静的',
+    '目标明确的',
+    '性格温和的',
+    '乐于助人的',
+    '聪明伶俐的',
+    '重情重义的',
+    '思维敏捷的',
+    '慷慨大方的',
+    '婉约多姿的',
+    '时尚前卫的',
+    '豁达开朗的',
+    '气质高雅的',
+    '优雅大方的',
+    '沉静深沉的',
+    '坚韧不拔的',
+    '独立自主的',
+    '外向开朗的',
+    '内向沉默的',
+    '深情专注的',
+    '精力旺盛的',
+    '富于幽默的',
+    '心思细腻的',
+    '喜怒形于色的',
+    '忠心耿耿的',
+    '玩世不恭的',
+    '活力四射的',
+    '脚踏实地的',
+    '注重细节的',
+    '保守谨慎的',
+    '世故圆滑的',
+    '梦想家的',
+    '勇往直前的',
+    '干练果敢的',
+    '待人友善的',
+    '思想开放的',
+    '敢于挑战的',
+    '感性洒脱的',
+    '洒脱不羁的',
+    '自我牺牲的',
+    '处事果断的',
+    '好奇心强的',
+    '待人热情的',
+    '热情洋溢的',
+    '孤独悲伤的',
+    '浪漫多情的',
+    '爱笑的',
+    '不羁的',
+    '傻气的',
+    '不拘小节的',
+    '懒散的',
+    '无聊的',
+    '低调的',
+    '敏感的',
+    '冷酷的',
+    '专注的',
+    '不屑的',
+    '激情的',
+    '忠诚的',
+    '神秘的',
+    '高傲的',
+    '自由的',
+    '文艺的',
+    '时尚的',
+    '落落大方的',
+    '有才华的',
+    '有气质的',
+    '阳光的',
+    '风趣的',
+    '天真浪漫的',
+    '爽朗开朗的',
+    '内敛沉静的',
+    '刻苦努力的',
+    '性格迥异的',
+    '个性张扬的',
+    '脾气火爆的',
+    '傲娇的',
+    '爱撒娇的',
+    '心思缜密的',
+    '理智果断的',
+    '懒惰的',
+    '喜欢拖延的',
+    '有责任感的',
+    '追求自由的',
+    '感性的',
+    '理性的',
+    '缺乏安全感的',
+    '追求安全感的',
+    '情绪化的',
+    '乐观的',
+    '悲观的',
+    '现实主义的',
+    '理想主义的',
+    '平易近人的',
+    '目中无人的',
+    '重视亲情的',
+    '重视友情的',
+    '重视爱情的',
+    '有爱心的',
+    '有正义感的',
+    '有同情心的',
+    '有童心的',
+    '有自信的',
+    '胆小怕事的',
+    '爱唠叨的',
+    '话多的',
+    '话少的',
+    '勇于冒险的',
+    '爱挑战的',
+    '善于发现美的',
+    '自我意识强的',
+    '不喜欢被约束的',
+    '慢热型的',
+    '热情洋溢的',
+    '容易受伤的',
+    '重视感情的',
+    '善于沟通的',
+    '不善于表达的',
+    '有幽默感的',
+    '平易近人的',
+    '有亲和力的',
+    '脸皮厚的',
+    '喜欢交际的',
+    '宅男/宅女的',
+    '喜欢独处的',
+    '有自知之明的',
+    '喜欢音乐的',
+    '喜欢阅读的',
+    '喜欢旅行的',
+    '喜欢美食的',
+    '喜欢运动的',
+    '喜欢摄影的',
+    '喜欢收藏的',
+    '喜欢购物的',
+    '不喜欢出门的',
+    '喜欢挑剔的',
+    '喜欢自省的',
+    '不喜欢评价他人的',
+    '喜欢评价他人的',
+    '有品位的',
+    '不讲卫生的',
+    '讲究卫生的',
+    '喜欢干净的',
+    '喜欢乱的',
+    '喜欢组织的',
+    '喜欢随意的',
+    '喜欢收纳的',
+  ];
+  const nouns = [
+    '狗子',
+    '猫咪',
+    '小鹿',
+    '小熊',
+    '小兔',
+    '小羊',
+    '小猪',
+    '小马',
+    '小狮子',
+    '小老虎',
+    '小猴子',
+    '小鱼儿',
+    '小乌龟',
+    '小鸟儿',
+    '小蚂蚁',
+    '小蜜蜂',
+    '小蝴蝶',
+    '小蜻蜓',
+    '小螃蟹',
+    '小章鱼',
+    '小海豚',
+    '小鲨鱼',
+    '小鲸鱼',
+    '小鳄鱼',
+    '小鸭子',
+    '小雪人',
+    '小皮球',
+    '小篮球',
+    '小足球',
+    '小排球',
+    '小棒球',
+    '小滑板',
+    '小冰棍',
+    '小雨伞',
+    '小手套',
+    '小电影',
+    '小蓝天',
+    '小公主',
+    '小王子',
+    '小玩具',
+    '小糖果',
+    '小巧克力',
+    '小冰淇淋',
+    '小蛋糕',
+    '小披萨',
+    '小汉堡',
+    '小炸鸡',
+    '小烤鸭',
+    '小鱼丸',
+    '小火锅',
+    '小串串',
+    '小煎饼',
+    '小油条',
+    '小葱油饼',
+    '小米粥',
+    '小酸奶',
+    '小豆腐',
+    '小饺子',
+    '小包子',
+    '小馄饨',
+    '小面条',
+    '小牛肉面',
+    '小糯米鸡',
+    '小蒸饺',
+    '小炒面',
+    '小蒸包',
+    '小烤肉',
+    '小烤串',
+    '小花生米',
+    '小太阳',
+    '小月亮',
+    '小星星',
+    '小彩虹',
+    '小风车',
+    '小气球',
+    '小钢琴',
+    '小吉他',
+    '小音响',
+    '小麦克风',
+    '小演员',
+    '小画家',
+    '小工程师',
+    '小医生',
+    '小警察',
+    '小消防员',
+    '小司机',
+    '小农民',
+    '小潜水员',
+    '小飞行员',
+    '小篮球',
+    '小游泳健将',
+    '小跑步冠军',
+    '小武术高手',
+    '小芭蕾舞者',
+    '小沙画家',
+    '小书法家',
+    '小拼图专家',
+    '小玩具收藏家',
+    '小电影制片人',
+    '小太空旅行家',
+    '超级英雄',
+    '无敌大魔王',
+    '终极霸主',
+    '至尊帝王',
+    '天降巨人',
+    '绝世奇才',
+    '神话之门',
+    '恐怖怪兽',
+    '魔法使者',
+    '神秘剑客',
+    '不朽传说',
+    '宇宙霸主',
+    '地狱火山',
+    '无尽黑暗',
+    '闪耀之星',
+    '璀璨之光',
+    '金色骑士',
+    '毁天灭地',
+    '战无不胜',
+    '碾压一切',
+    '绝世高手',
+    '超凡脱俗',
+    '万象之王',
+    '黑暗骑士',
+    '霸天战神',
+    '万众瞩目',
+    '震古烁今',
+    '纵横天下',
+    '永不磨灭',
+    '恒久不变',
+    '帝国之主',
+    '不屈不挠',
+    '狂暴之王',
+    '超越极限',
+    '魔力无边',
+    '星光闪耀',
+    '无尽追求',
+    '刀锋之舞',
+    '独步天下',
+    '吞噬万物',
+    '永恒之境',
+    '灭世战神',
+    '海量财富',
+    '神话传说',
+    '唯我独尊',
+    '万剑归宗',
+    '嗜血狂魔',
+    '深海之王',
+    '幻想之城',
+    '天命之子',
+  ];
+  return { adjectives, nouns };
+};
+
+export function genNickName() {
+  const { adjectives, nouns } = nameDataBase();
+  const adjectiveIndex = Math.floor(Math.random() * adjectives.length);
+  const nounIndex = Math.floor(Math.random() * nouns.length);
+  const adjective = adjectives[adjectiveIndex];
+  const noun = nouns[nounIndex];
+  const randomNum = Math.floor(Math.random() * 1000);
+  return adjective + noun + randomNum;
+}
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index 4ccdd28..3b0066a 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import { onBeforeRouteUpdate, useRouter } from 'vue-router';
-import { useRoom } from '@/hooks';
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCreateRoom, useGetRoomInfo } from '@/hooks';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
-import { useRouteParams } from '@vueuse/router';
 import { ChatRoomCom } from '@/components/chat-room';
 import MenuAction from '@/components/menu-action.vue';
 import { ChatAction } from '@/config';
@@ -14,9 +13,10 @@ defineOptions({
 });
 
 const router = useRouter();
-const roomId = useRouteParams('roomId');
 
-const { isValid } = useRoom((roomId.value as string) || '');
+const { roomId } = useCreateRoom();
+
+useGetRoomInfo();
 
 const { switchMember, open, isLgScreen } = useSwitchMember();
 
@@ -33,19 +33,6 @@ watch(
   { immediate: true }
 );
 
-const checkParams = () => {
-  if (!isValid.value) router.replace('/');
-};
-
-onMounted(checkParams);
-
-onBeforeRouteUpdate((to, from) => {
-  if (to.params.roomId !== from.params.roomId) {
-    roomId.value = to.params.roomId;
-    checkParams();
-  }
-});
-
 const handleBackLevel = () => router.replace('/');
 
 const handleClickIcon = (name: string) => {

From 7f60b4d65fa5f5379e97e084bd0eac5769aae6d9 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 26 Jul 2023 12:48:52 +0800
Subject: [PATCH 06/20] =?UTF-8?q?feat:=20=E6=8B=86=E5=88=86roomInfo?=
 =?UTF-8?q?=E3=80=81roomConnect=20=E7=9A=84=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat-room/chat-room-user.vue   |  30 ++-
 .../rtc-web/src/config/socket-event-name.ts   |   3 +
 client/packages/rtc-web/src/context/index.ts  |  11 +-
 .../packages/rtc-web/src/hooks/useInitData.ts |   7 +-
 client/packages/rtc-web/src/hooks/useRoom.ts  | 197 ++++++++++++++++--
 .../packages/rtc-web/src/views/chat/chat.vue  |   4 +-
 6 files changed, 213 insertions(+), 39 deletions(-)

diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
index 6042fcf..3171a95 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
+import { useGetRoomInfo } from '@/hooks';
 import UserCard from './user-card.vue';
+import { computed } from 'vue';
+
+const { members, roomOwner, self } = useGetRoomInfo();
+const memberwithoutOwner = computed(() =>
+  members.value.filter((item) => !item.owner)
+);
 
 defineOptions({
   name: 'ChatRoomUsers',
@@ -9,9 +16,26 @@ defineOptions({
 <template>
   <div class="px-2 pt-2 text-sm">
     <div class="mb-1 text-gray-400">房主</div>
-    <UserCard class="mb-8" />
+    <UserCard
+      class="mb-4"
+      iconcolor="#2F54EB"
+      :username="
+        roomOwner?.id === self?.id
+          ? `${roomOwner?.nickName} (本人)`
+          : roomOwner?.nickName
+      "
+    />
 
-    <div class="mb-1 text-gray-400">房间成员</div>
-    <UserCard />
+    <div class="mb-1 text-gray-400">
+      房间成员 ({{ memberwithoutOwner.length }})
+    </div>
+    <UserCard
+      v-for="item in memberwithoutOwner"
+      :key="item.id"
+      :username="
+        item.id === self?.id ? `${item.nickName} (本人)` : item.nickName
+      "
+      iconname="user-smail"
+    />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/config/socket-event-name.ts b/client/packages/rtc-web/src/config/socket-event-name.ts
index 001424c..1f68024 100644
--- a/client/packages/rtc-web/src/config/socket-event-name.ts
+++ b/client/packages/rtc-web/src/config/socket-event-name.ts
@@ -4,4 +4,7 @@ export const enum SocketEventName {
   RoomCreated = 'created',
   RoomExit = 'exit',
   RoomJoin = 'joined',
+  RoomOffer = 'offer',
+  RoomAnswer = 'answer',
+  RoomCandidate = 'candidate',
 }
diff --git a/client/packages/rtc-web/src/context/index.ts b/client/packages/rtc-web/src/context/index.ts
index a823678..50ff166 100644
--- a/client/packages/rtc-web/src/context/index.ts
+++ b/client/packages/rtc-web/src/context/index.ts
@@ -5,16 +5,9 @@ export type InitDataKeyType = Partial<{
   socket: any;
   logo: string;
   version: string;
-  options: {
-    offerToReceiveAudio: number;
-    offerToReceiveVideo: number;
-  };
+  options: RTCOfferOptions;
   config: {
-    iceServers: Partial<{
-      urls: string;
-      username: string;
-      credential: string;
-    }>[];
+    iceServers: RTCIceServer[];
   };
 }>;
 
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index e6ffa7b..e8df2f8 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -5,7 +5,7 @@ import io from 'socket.io-client';
 import { InitDataKey, InitDataKeyType } from '@/context';
 
 export const useFetchData = () => {
-  const useTurn = useLocalStorage(ConfigEnum.useRelay, true);
+  const useTurn = useLocalStorage(ConfigEnum.useRelay, false);
 
   const { data } = useFetch(() => `/api/comm/initData?turn=${useTurn.value}`)
     .get()
@@ -29,7 +29,10 @@ export const useInitData = () => {
           socket: wsHost ? shallowReactive(io(wsHost)) : null,
           logo,
           version,
-          options,
+          options: Object.keys(options).reduce(
+            (cur, next) => ({ ...cur, [next]: Boolean(options[next]) }),
+            {}
+          ),
           config: rtcConfig,
         });
       }
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index f6c7318..2931065 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -4,9 +4,10 @@ import {
   MaybeRef,
   computed,
   inject,
+  onBeforeUnmount,
   onMounted,
-  reactive,
   ref,
+  shallowRef,
   watch,
 } from 'vue';
 import { useSocket } from './socket-utils';
@@ -15,6 +16,8 @@ import { useRouteParamsReactive } from '.';
 import { useRouter } from 'vue-router';
 import { InitDataKey } from '@/context';
 import { genNickName } from '@/utils';
+import { uniqBy } from 'lodash';
+import { watchArray } from '@vueuse/core';
 
 export type Member = {
   id: string;
@@ -26,6 +29,7 @@ export type Member = {
   userAgent: string;
   ip: string;
   network: string;
+  room?: string;
 };
 
 export type OwnerInfo = {
@@ -61,6 +65,7 @@ export const useCreateRoom = () => {
   const { isValid } = useRoom(() => roomId.value || '');
 
   const emitCreateRoom = (socket: any) => {
+    console.log('emitCreateRoom');
     socket.emit(SocketEventName.CreateAndJoin, {
       room: roomId.value,
       type: 'password',
@@ -96,56 +101,204 @@ export const useCreateRoom = () => {
   };
 };
 
+// 设置 room 连接的一些处理
+export const useRoomConnect = () => {
+  const roomInfo = useGetRoomInfo();
+
+  const { members, selfInfo } = roomInfo;
+  const rtcConnects = new Map<string, RTCPeerConnection>();
+  const initData = inject(InitDataKey)!;
+  const socketRef = shallowRef();
+
+  watchArray(
+    () => members.value,
+    async (_, __, added, removed) => {
+      console.log('watch', added, removed);
+
+      // 处理 exit
+      if (removed.length) {
+        removed.forEach((peer) => {
+          if (peer.id) {
+            rtcConnects.delete(peer.id);
+          }
+        });
+      }
+    }
+  );
+
+  const createRtcConnect = (id: string) => {
+    const pc = new RTCPeerConnection(initData.value.config);
+
+    pc.onicecandidate = (e) => {
+      // console.log('on candidate', e);
+    };
+
+    rtcConnects.set(id, pc);
+
+    return pc;
+  };
+
+  const getRtcConnect = (id: string) => {
+    return rtcConnects.get(id) || createRtcConnect(id);
+  };
+
+  // room Created事件 创建 peer、创建 offer
+  const roomCreated = async (data: any) => {
+    selfInfo.value = {
+      owner: data.owner,
+      recoderId: data.recoderId,
+      roomId: data.room,
+      socketId: data.id,
+    };
+    const handler = async (peer: any) => {
+      const rtcConnect = getRtcConnect(peer.id);
+      await createOffer(rtcConnect, peer);
+    };
+
+    await Promise.all(data.peers.map(handler));
+    console.log('connect created', data, rtcConnects);
+  };
+
+  const createOffer = async (pc: RTCPeerConnection, peer: any) => {
+    const offer = await pc.createOffer(initData.value.options);
+    await pc.setLocalDescription(offer);
+    socketRef.value.emit(SocketEventName.RoomOffer, {
+      from: selfInfo.value.socketId,
+      to: peer.id,
+      room: selfInfo.value.roomId,
+      sdp: offer.sdp,
+    });
+  };
+
+  const roomOffer = async (data: any) => {
+    const pc = getRtcConnect(data.from);
+    await pc.setRemoteDescription(
+      new RTCSessionDescription({ type: 'offer', sdp: data.sdp })
+    );
+    const answer = await pc.createAnswer(initData.value.options);
+    await pc.setLocalDescription(answer);
+
+    socketRef.value.emit(SocketEventName.RoomAnswer, {
+      from: selfInfo.value.socketId,
+      to: data.from,
+      room: selfInfo.value.roomId,
+      sdp: answer.sdp,
+    });
+  };
+
+  const roomAnswer = async (data: any) => {
+    const pc = getRtcConnect(data.from);
+
+    await pc.setRemoteDescription(
+      new RTCSessionDescription({ type: 'answer', sdp: data.sdp })
+    );
+  };
+  const roomCandidate = () => {
+    //
+  };
+
+  const handleRoomConnect = (socket: any) => {
+    socketRef.value = socket;
+    socket.on(SocketEventName.RoomCreated, roomCreated);
+    socket.on(SocketEventName.RoomOffer, roomOffer);
+    socket.on(SocketEventName.RoomAnswer, roomAnswer);
+    socket.on(SocketEventName.RoomCandidate, roomCandidate);
+  };
+  useSocket(handleRoomConnect);
+
+  return { ...roomInfo };
+};
+
 // 获取房间的一些信息，例如 peer 等信息
 export const useGetRoomInfo = () => {
-  const members = ref<Member[]>([]);
-  const ownerInfo = ref<OwnerInfo>({
+  const members = ref<Partial<Member>[]>([]);
+  const selfInfo = ref<OwnerInfo>({
     socketId: '',
-    owner: true,
+    owner: false,
     recoderId: '',
     roomId: '',
   });
 
   const roomCreated = (data: any) => {
-    members.value = data.peers.map((peer: any) => {
-      return {
-        id: peer.id,
-        nickName: peer.nickName,
-        langMode: peer.langMode,
-        owner: peer.owner,
-        ua: peer.ua,
-        joinTime: peer.joinTime,
-        ip: peer.ip,
-        network: peer.network,
-      };
-    });
+    members.value = uniqBy(
+      [
+        ...data.peers.map((peer: any) => ({
+          id: peer.id,
+          nickName: peer.nickName,
+          owner: peer.owner,
+        })),
+        {
+          id: data.id,
+          owner: data.owner,
+          nickName: data.nickName,
+        },
+      ],
+      'id'
+    );
 
-    ownerInfo.value = {
+    selfInfo.value = {
+      socketId: data.id,
       owner: data.owner,
       recoderId: data.recoderId,
       roomId: data.room,
-      socketId: data.id,
     };
-    console.log('created', members, ownerInfo);
+    console.log('created', members, data);
   };
 
   const roomExit = async (data: any) => {
     console.log('exit', data);
+    members.value = members.value.filter((item) => item.id !== data.from);
   };
 
-  const roomJoin = async (result: any) => {
-    console.log('join', result);
+  const roomJoin = async (data: any) => {
+    console.log('join', data);
+    members.value = uniqBy(
+      [
+        ...members.value,
+        {
+          id: data.id,
+          nickName: data.nickName,
+          owner: data.owner,
+        },
+      ],
+      'id'
+    );
   };
+
+  const roomOwner = computed(
+    () => members.value.find((item) => item.owner) || undefined
+  );
+
+  const self = computed(
+    () =>
+      members.value.find((item) => item.id === selfInfo.value.socketId) ||
+      undefined
+  );
+
   const handleRoomInfo = async (socket: any) => {
+    console.log('执行', socket);
     socket.on(SocketEventName.RoomCreated, roomCreated);
     socket.on(SocketEventName.RoomExit, roomExit);
     socket.on(SocketEventName.RoomJoin, roomJoin);
+
+    onBeforeUnmount(() => {
+      console.log('unmount');
+      console.log(selfInfo.value);
+      socket.emit(SocketEventName.RoomExit, {
+        from: selfInfo.value.socketId,
+        room: selfInfo.value.roomId,
+        recoderId: selfInfo.value.recoderId,
+      });
+      socket.removeAllListeners();
+    });
   };
 
   useSocket(handleRoomInfo);
 
   return {
+    roomOwner,
     members,
-    ownerInfo,
+    self,
+    selfInfo,
   };
 };
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index 3b0066a..55e100f 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { useCreateRoom, useGetRoomInfo } from '@/hooks';
+import { useCreateRoom } from '@/hooks';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
 import { ChatRoomCom } from '@/components/chat-room';
 import MenuAction from '@/components/menu-action.vue';
@@ -16,8 +16,6 @@ const router = useRouter();
 
 const { roomId } = useCreateRoom();
 
-useGetRoomInfo();
-
 const { switchMember, open, isLgScreen } = useSwitchMember();
 
 const chatActionMenu = ref(ChatAction);

From 41ce424b38379c488cf7e37cf7c9e2153a804194 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 26 Jul 2023 19:25:58 +0800
Subject: [PATCH 07/20] =?UTF-8?q?feat:=20chat=20room=20=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chat-room/chat-content.vue | 20 +++++++++++
 .../src/components/chat-room/chat-input.vue   | 36 ++++++++++++++++---
 .../src/components/chat-room/chat-message.vue | 33 +++++++++++++++++
 .../components/chat-room/chat-room-user.vue   | 27 ++++++++++----
 .../src/components/chat-room/chat-room.vue    | 14 ++++++--
 .../rtc-web/src/components/chat-room/props.ts |  6 ++++
 .../src/components/chat-room/user-card.vue    | 31 ++++++++--------
 .../packages/rtc-web/src/components/lib.tsx   |  2 +-
 .../rtc-web/src/config/socket-event-name.ts   |  4 +++
 client/packages/rtc-web/src/utils/common.ts   | 31 ++++++++++++++++
 .../packages/rtc-web/src/views/chat/chat.vue  |  2 +-
 .../src/views/chat/hooks/useGroupChat.ts      | 33 +++++++++++++++++
 12 files changed, 207 insertions(+), 32 deletions(-)
 create mode 100644 client/packages/rtc-web/src/components/chat-room/chat-content.vue
 create mode 100644 client/packages/rtc-web/src/components/chat-room/chat-message.vue
 create mode 100644 client/packages/rtc-web/src/components/chat-room/props.ts
 create mode 100644 client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts

diff --git a/client/packages/rtc-web/src/components/chat-room/chat-content.vue b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
new file mode 100644
index 0000000..01e7faf
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import ChatMessage from './chat-message.vue';
+</script>
+
+<template>
+  <div class="overflow-y-scroll">
+    <ChatMessage
+      class="mb-4"
+      time="2020-12-12 12:12"
+      username="钟文池"
+      message="asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉"
+    />
+    <ChatMessage
+      class="mb-4"
+      time="2020-12-12 12:12"
+      username="钟文池"
+      message="asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉"
+    />
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-input.vue b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
index ba788f5..143b798 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-input.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
@@ -1,12 +1,40 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
+import { ref } from 'vue';
+
 defineOptions({
   name: 'ChatInput',
 });
+
+const msg = ref('');
+
+const emits = defineEmits(['sendMsg']);
+
+const canSend = computed(() => msg.value !== '');
+
+const handleSend = () => {
+  if (canSend.value) {
+    emits('sendMsg', msg.value);
+    msg.value = '';
+  }
+};
 </script>
 
 <template>
-  <textarea
-    class="textarea-info textarea resize-none"
-    placeholder="请输入聊天消息"
-  ></textarea>
+  <div class="flex flex-col rounded-lg border border-info">
+    <textarea
+      v-model="msg"
+      class="textarea flex-1 resize-none border-b-0 focus:outline-none"
+      placeholder="请输入聊天消息"
+    ></textarea>
+    <div class="mb-2 flex justify-end pr-4">
+      <button
+        class="btn-info btn px-3"
+        :class="{ 'btn-disabled': !canSend }"
+        @click="handleSend"
+      >
+        发送
+      </button>
+    </div>
+  </div>
 </template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-message.vue b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
new file mode 100644
index 0000000..eda2291
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import UserCard from './user-card.vue';
+import { UserCardProps } from './props';
+
+type ChatMessageProps = Partial<
+  UserCardProps & {
+    message: string;
+    background: string;
+  }
+>;
+
+defineOptions({
+  name: 'ChatMessage',
+});
+
+const props = withDefaults(defineProps<ChatMessageProps>(), {
+  iconname: 'user-smail',
+  iconcolor: 'currentcolor',
+  message: '',
+  background: '',
+});
+</script>
+
+<template>
+  <UserCard v-bind="props">
+    <div
+      :style="{ backgroundColor: background }"
+      class="flex max-w-[45%] flex-1 flex-wrap rounded-lg bg-slate-200 px-4 py-2 leading-6 text-black"
+    >
+      {{ props.message }}
+    </div>
+  </UserCard>
+</template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
index 3171a95..99afeea 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
@@ -1,16 +1,31 @@
 <script lang="ts" setup>
-import { useGetRoomInfo } from '@/hooks';
+import { Member } from '@/hooks';
 import UserCard from './user-card.vue';
 import { computed } from 'vue';
-
-const { members, roomOwner, self } = useGetRoomInfo();
-const memberwithoutOwner = computed(() =>
-  members.value.filter((item) => !item.owner)
-);
+import { PropType } from 'vue';
 
 defineOptions({
   name: 'ChatRoomUsers',
 });
+
+const props = defineProps({
+  members: {
+    type: Array as PropType<Partial<Member>[]>,
+    default: () => [],
+  },
+  roomOwner: {
+    type: Object as PropType<Partial<Member>>,
+    default: () => ({}),
+  },
+  self: {
+    type: Object as PropType<Partial<Member>>,
+    default: () => ({}),
+  },
+});
+
+const memberwithoutOwner = computed(() =>
+  props.members.filter((item) => !item.owner)
+);
 </script>
 
 <template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room.vue b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
index 5d9271d..36d0984 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room.vue
@@ -2,11 +2,19 @@
 import ChatInput from './chat-input.vue';
 import MenuAction from '../menu-action.vue';
 import ChatRoomUser from './chat-room-user.vue';
+import ChatContent from './chat-content.vue';
 import { ChatInputAction } from '@/config';
 import { useSwitchMember } from '@/views/chat/hooks/useSwitchMember';
+import { useGetRoomInfo } from '@/hooks/useRoom';
 
 const { open } = useSwitchMember();
 
+const { members, roomOwner, self } = useGetRoomInfo();
+
+const handleSendmsg = (msg: string) => {
+  console.log(msg);
+};
+
 defineOptions({
   name: 'ChatRoomCom',
 });
@@ -15,19 +23,19 @@ defineOptions({
 <template>
   <div class="flex h-full">
     <div class="flex flex-1 flex-col">
-      <div class="flex-1 px-4 py-4">聊天框</div>
+      <ChatContent class="flex-1 px-4 py-4" />
       <div
         class="flex h-[260px] flex-col border-t pb-1.5 dark:border-neutral-600"
       >
         <MenuAction :menu-action="ChatInputAction" class="pl-2 pt-2" />
-        <ChatInput class="mt-2 flex-1" />
+        <ChatInput class="mt-2 flex-1" @send-msg="handleSendmsg" />
       </div>
     </div>
     <div
       v-if="open"
       class="hidden w-[220px] border-l dark:border-neutral-600 lg:block"
     >
-      <ChatRoomUser />
+      <ChatRoomUser :members="members" :room-owner="roomOwner" :self="self" />
     </div>
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/components/chat-room/props.ts b/client/packages/rtc-web/src/components/chat-room/props.ts
new file mode 100644
index 0000000..0992f35
--- /dev/null
+++ b/client/packages/rtc-web/src/components/chat-room/props.ts
@@ -0,0 +1,6 @@
+export type UserCardProps = {
+  iconname?: string;
+  iconcolor?: string;
+  username?: string;
+  time?: string;
+};
diff --git a/client/packages/rtc-web/src/components/chat-room/user-card.vue b/client/packages/rtc-web/src/components/chat-room/user-card.vue
index 43350a2..966f98b 100644
--- a/client/packages/rtc-web/src/components/chat-room/user-card.vue
+++ b/client/packages/rtc-web/src/components/chat-room/user-card.vue
@@ -1,33 +1,30 @@
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { UserCardProps } from './props';
 
 defineOptions({
   name: 'UserCard',
 });
 
-defineProps({
-  iconname: {
-    type: String as PropType<string>,
-    default: 'member',
-  },
-  iconcolor: {
-    type: String as PropType<string>,
-    default: 'currentcolor',
-  },
-  username: {
-    type: String as PropType<string>,
-    default: '',
-  },
+withDefaults(defineProps<UserCardProps>(), {
+  iconname: 'member',
+  iconcolor: 'currentcolor',
+  username: '',
+  time: '',
 });
 </script>
 
 <template>
-  <div class="user-card flex">
+  <div class="user-card flex items-start">
     <button class="btn-circle btn border-0 bg-transparent">
       <svg-icon :name="iconname" class="h-8 w-8" :color="iconcolor" />
     </button>
-    <div class="ml-1 text-sm">
-      <div>{{ username }}</div>
+    <div class="ml-1 flex w-full flex-col text-sm">
+      <div class="mb-1">
+        {{ username }}
+        <span v-if="time" class="ml-4 text-slate-700 dark:text-gray-300">{{
+          time
+        }}</span>
+      </div>
       <slot></slot>
       <!-- <div class="other-info"></div> -->
     </div>
diff --git a/client/packages/rtc-web/src/components/lib.tsx b/client/packages/rtc-web/src/components/lib.tsx
index 37351cb..e3e27c2 100644
--- a/client/packages/rtc-web/src/components/lib.tsx
+++ b/client/packages/rtc-web/src/components/lib.tsx
@@ -47,7 +47,7 @@ export const FullHeightFlexBox = (
   };
 
   return (
-    <div class={['flex', height[type], `flex-${dire}`]}>
+    <div class={['flex', height[type], `flex-${dire}`, 'min-h-0']}>
       {ctx.slots.default?.()}
     </div>
   );
diff --git a/client/packages/rtc-web/src/config/socket-event-name.ts b/client/packages/rtc-web/src/config/socket-event-name.ts
index 1f68024..44f0cc2 100644
--- a/client/packages/rtc-web/src/config/socket-event-name.ts
+++ b/client/packages/rtc-web/src/config/socket-event-name.ts
@@ -8,3 +8,7 @@ export const enum SocketEventName {
   RoomAnswer = 'answer',
   RoomCandidate = 'candidate',
 }
+
+export const enum ChatEventName {
+  ChatingRoom = 'chatingRoom',
+}
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index 125aaed..a3c1b61 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -26,3 +26,34 @@ export function transformSocketListenEvent(socket: any, ev: string) {
     socket.on(ev, cb);
   });
 }
+
+// 转义字符串
+export function escapeStr(str: string) {
+  const entityMap: any = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;',
+  };
+
+  const encodedMap: any = {
+    '%': '%25',
+    '!': '%21',
+    "'": '%27',
+    '(': '%28',
+    ')': '%29',
+    '*': '%2A',
+    '-': '%2D',
+    '.': '%2E',
+    _: '%5F',
+    '~': '%7E',
+  };
+
+  return String(str).replace(/[&<>"'`=/%!'()*\-._~]/g, function (s) {
+    return entityMap[s] || encodedMap[s] || '';
+  });
+}
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index 55e100f..b8519dd 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -58,7 +58,7 @@ const handleClickIcon = (name: string) => {
       </BackTitle>
     </BackPreviousLevel>
 
-    <div class="flex-1">
+    <div class="min-h-0 flex-1">
       <ChatRoomCom />
     </div>
   </div>
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts b/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts
new file mode 100644
index 0000000..724a17e
--- /dev/null
+++ b/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts
@@ -0,0 +1,33 @@
+import { ChatEventName } from '@/config';
+import { useSocket } from '@/hooks';
+import { shallowRef } from 'vue';
+
+export type SendMessage = {
+  content: string;
+  room: string;
+  from: string;
+  nickName: string;
+  recoderId: any;
+};
+
+export const useGroupChat = () => {
+  const socketRef = shallowRef();
+  const handleChatingRoom = (data: SendMessage) => {
+    console.log('receive', data);
+  };
+
+  const sendMessage = (data: SendMessage) => {
+    socketRef.value.emit(ChatEventName.ChatingRoom, data);
+  };
+
+  const handleSocket = (socket: any) => {
+    socketRef.value = socket;
+    socket.on(ChatEventName.ChatingRoom, handleChatingRoom);
+  };
+
+  useSocket(handleSocket);
+
+  return {
+    sendMessage,
+  };
+};

From 83eb811b4fe9515104aa7fcee31de196a5867247 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Fri, 4 Aug 2023 18:48:49 +0800
Subject: [PATCH 08/20] feat: chat

---
 client/.vscode/settings.json                  |  2 +
 client/packages/rtc-web/package.json          |  1 +
 .../src/components/chat-room/chat-content.vue | 31 ++++++----
 .../src/components/chat-room/chat-message.vue | 13 ++++-
 .../rtc-web/src/components/chat-room/index.ts |  5 +-
 .../rtc-web/src/components/chat-room/props.ts |  1 +
 .../src/components/chat-room/user-card.vue    | 12 ++--
 .../rtc-web/src/config/socket-event-name.ts   |  1 +
 .../src/hooks/socket-utils/useSocket.ts       |  4 +-
 client/packages/rtc-web/src/hooks/useRoom.ts  | 16 ++++--
 client/packages/rtc-web/src/utils/common.ts   | 31 ++++++++++
 .../chat-room => views/chat}/chat-room.vue    | 37 ++++++++++--
 .../packages/rtc-web/src/views/chat/chat.vue  |  2 +-
 .../rtc-web/src/views/chat/hooks/useChat.ts   | 57 +++++++++++++++++++
 .../src/views/chat/hooks/useGroupChat.ts      | 33 -----------
 client/pnpm-lock.yaml                         |  6 ++
 16 files changed, 187 insertions(+), 65 deletions(-)
 create mode 100644 client/.vscode/settings.json
 rename client/packages/rtc-web/src/{components/chat-room => views/chat}/chat-room.vue (50%)
 create mode 100644 client/packages/rtc-web/src/views/chat/hooks/useChat.ts
 delete mode 100644 client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts

diff --git a/client/.vscode/settings.json b/client/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/client/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index 70ad7b4..6fa4d51 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -12,6 +12,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vueuse/core": "^10.2.0",
     "@vueuse/router": "^10.2.1",
+    "dayjs": "^1.11.9",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
     "socket.io-client": "2.3.0",
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-content.vue b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
index 01e7faf..7c96245 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-content.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
@@ -1,20 +1,31 @@
 <script lang="ts" setup>
 import ChatMessage from './chat-message.vue';
+
+defineOptions({
+  name: 'ChatContent',
+});
+
+const props = defineProps<{
+  msgList: {
+    time: string;
+    username: string;
+    message: string;
+    reverse: boolean;
+  }[];
+}>();
 </script>
 
 <template>
-  <div class="overflow-y-scroll">
-    <ChatMessage
-      class="mb-4"
-      time="2020-12-12 12:12"
-      username="钟文池"
-      message="asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉"
-    />
+  <div class="flex flex-col justify-end overflow-y-auto">
     <ChatMessage
+      v-for="(item, index) in props.msgList"
+      :key="index"
       class="mb-4"
-      time="2020-12-12 12:12"
-      username="钟文池"
-      message="asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉asdasjdiqw大奖赛哦大家琼文京东卡六十九撒洒家打开按时间看来大家ask领导健康撒娇的看来撒娇的卡拉"
+      :time="item.time"
+      :username="item.username"
+      :message="item.message"
+      :reverse="item.reverse"
+      :background="item.reverse ? 'bg-success' : ''"
     />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-message.vue b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
index eda2291..f9899a4 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-message.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
@@ -11,6 +11,7 @@ type ChatMessageProps = Partial<
 
 defineOptions({
   name: 'ChatMessage',
+  inheritAttrs: true,
 });
 
 const props = withDefaults(defineProps<ChatMessageProps>(), {
@@ -18,16 +19,22 @@ const props = withDefaults(defineProps<ChatMessageProps>(), {
   iconcolor: 'currentcolor',
   message: '',
   background: '',
+  reverse: false,
 });
 </script>
 
 <template>
   <UserCard v-bind="props">
     <div
-      :style="{ backgroundColor: background }"
-      class="flex max-w-[45%] flex-1 flex-wrap rounded-lg bg-slate-200 px-4 py-2 leading-6 text-black"
+      class="flex flex-wrap"
+      :class="[reverse ? 'justify-end' : 'justify-start']"
     >
-      {{ props.message }}
+      <div
+        class="whitespace-pre-wrap rounded-lg px-4 py-2 leading-6 text-black"
+        :class="[background ? background : 'bg-slate-200']"
+      >
+        {{ props.message }}
+      </div>
     </div>
   </UserCard>
 </template>
diff --git a/client/packages/rtc-web/src/components/chat-room/index.ts b/client/packages/rtc-web/src/components/chat-room/index.ts
index 13137d0..1e0007a 100644
--- a/client/packages/rtc-web/src/components/chat-room/index.ts
+++ b/client/packages/rtc-web/src/components/chat-room/index.ts
@@ -1,2 +1,5 @@
-export { default as ChatRoomCom } from './chat-room.vue';
 export { default as ChatInput } from './chat-input.vue';
+export { default as ChatMessage } from './chat-message.vue';
+export { default as ChatRoomUser } from './chat-room-user.vue';
+export { default as ChatContent } from './chat-content.vue';
+export { default as UserCard } from './user-card.vue';
diff --git a/client/packages/rtc-web/src/components/chat-room/props.ts b/client/packages/rtc-web/src/components/chat-room/props.ts
index 0992f35..8088b7d 100644
--- a/client/packages/rtc-web/src/components/chat-room/props.ts
+++ b/client/packages/rtc-web/src/components/chat-room/props.ts
@@ -3,4 +3,5 @@ export type UserCardProps = {
   iconcolor?: string;
   username?: string;
   time?: string;
+  reverse?: boolean;
 };
diff --git a/client/packages/rtc-web/src/components/chat-room/user-card.vue b/client/packages/rtc-web/src/components/chat-room/user-card.vue
index 966f98b..189210f 100644
--- a/client/packages/rtc-web/src/components/chat-room/user-card.vue
+++ b/client/packages/rtc-web/src/components/chat-room/user-card.vue
@@ -10,16 +10,20 @@ withDefaults(defineProps<UserCardProps>(), {
   iconcolor: 'currentcolor',
   username: '',
   time: '',
+  reverse: false,
 });
 </script>
 
 <template>
-  <div class="user-card flex items-start">
-    <button class="btn-circle btn border-0 bg-transparent">
+  <div
+    class="user-card flex items-start"
+    :class="[reverse ? 'flex-row-reverse' : '']"
+  >
+    <button class="btn-square btn border-0 bg-transparent">
       <svg-icon :name="iconname" class="h-8 w-8" :color="iconcolor" />
     </button>
-    <div class="ml-1 flex w-full flex-col text-sm">
-      <div class="mb-1">
+    <div class="ml-1 flex flex-col text-sm">
+      <div class="mb-1" :class="[reverse ? 'text-right' : 'text-left']">
         {{ username }}
         <span v-if="time" class="ml-4 text-slate-700 dark:text-gray-300">{{
           time
diff --git a/client/packages/rtc-web/src/config/socket-event-name.ts b/client/packages/rtc-web/src/config/socket-event-name.ts
index 44f0cc2..16fa491 100644
--- a/client/packages/rtc-web/src/config/socket-event-name.ts
+++ b/client/packages/rtc-web/src/config/socket-event-name.ts
@@ -9,6 +9,7 @@ export const enum SocketEventName {
   RoomCandidate = 'candidate',
 }
 
+// chat 的事件名
 export const enum ChatEventName {
   ChatingRoom = 'chatingRoom',
 }
diff --git a/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
index 732e7fa..6efce7d 100644
--- a/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
+++ b/client/packages/rtc-web/src/hooks/socket-utils/useSocket.ts
@@ -2,7 +2,7 @@ import { InitDataKey } from '@/context';
 import { CommonFnType } from '@/types';
 import { inject, watch } from 'vue';
 
-export const useSocket = (fn: CommonFnType) => {
+export const useSocket = (fn?: CommonFnType) => {
   const initData = inject(InitDataKey);
 
   if (initData) {
@@ -10,7 +10,7 @@ export const useSocket = (fn: CommonFnType) => {
       () => initData.value.socket,
       async (v) => {
         if (v) {
-          await fn(v);
+          await fn?.(v);
         }
       },
       {
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 2931065..af3afee 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -30,6 +30,7 @@ export type Member = {
   ip: string;
   network: string;
   room?: string;
+  roomInfo?: OwnerInfo;
 };
 
 export type OwnerInfo = {
@@ -129,7 +130,7 @@ export const useRoomConnect = () => {
   const createRtcConnect = (id: string) => {
     const pc = new RTCPeerConnection(initData.value.config);
 
-    pc.onicecandidate = (e) => {
+    pc.onicecandidate = () => {
       // console.log('on candidate', e);
     };
 
@@ -269,11 +270,16 @@ export const useGetRoomInfo = () => {
     () => members.value.find((item) => item.owner) || undefined
   );
 
-  const self = computed(
-    () =>
+  const self = computed(() => {
+    const info =
       members.value.find((item) => item.id === selfInfo.value.socketId) ||
-      undefined
-  );
+      undefined;
+
+    if (info) {
+      return Object.assign({}, { ...info, roomInfo: selfInfo.value });
+    }
+    return undefined;
+  });
 
   const handleRoomInfo = async (socket: any) => {
     console.log('执行', socket);
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index a3c1b61..fb7f21a 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -57,3 +57,34 @@ export function escapeStr(str: string) {
     return entityMap[s] || encodedMap[s] || '';
   });
 }
+
+export function unescapeStr(str: string) {
+  const entityMap: any = {
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+    '&#x2F;': '/',
+    '&#x60;': '`',
+    '&#x3D;': '=',
+  };
+  const encodedMap: any = {
+    '%25': '%',
+    '%21': '!',
+    '%27': "'",
+    '%28': '(',
+    '%29': ')',
+    '%2A': '*',
+    '%2D': '-',
+    '%2E': '.',
+    '%5F': '_',
+    '%7E': '~',
+  };
+  return String(str).replace(
+    /&(amp|lt|gt|quot|#39|#x2F|#x60|#x3D);|%(25|21|27|28|29|2A|2D|2E|5F|7E)/g,
+    function (s) {
+      return entityMap[s] || encodedMap[s] || '';
+    }
+  );
+}
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room.vue b/client/packages/rtc-web/src/views/chat/chat-room.vue
similarity index 50%
rename from client/packages/rtc-web/src/components/chat-room/chat-room.vue
rename to client/packages/rtc-web/src/views/chat/chat-room.vue
index 36d0984..acbd248 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room.vue
+++ b/client/packages/rtc-web/src/views/chat/chat-room.vue
@@ -1,20 +1,45 @@
 <script lang="ts" setup>
-import ChatInput from './chat-input.vue';
-import MenuAction from '../menu-action.vue';
-import ChatRoomUser from './chat-room-user.vue';
-import ChatContent from './chat-content.vue';
+import { ChatContent, ChatRoomUser, ChatInput } from '@/components/chat-room';
+import MenuAction from '@/components/menu-action.vue';
 import { ChatInputAction } from '@/config';
 import { useSwitchMember } from '@/views/chat/hooks/useSwitchMember';
 import { useGetRoomInfo } from '@/hooks/useRoom';
+import { useChat } from './hooks/useChat';
+import { escapeStr } from '@/utils';
+import dayjs from 'dayjs';
+import { computed } from 'vue';
 
 const { open } = useSwitchMember();
 
 const { members, roomOwner, self } = useGetRoomInfo();
 
+const { sendMessage, msgList } = useChat();
+
 const handleSendmsg = (msg: string) => {
-  console.log(msg);
+  console.log(msg, self.value);
+
+  if (self.value) {
+    const { roomInfo, nickName = '' } = self.value;
+    sendMessage({
+      content: escapeStr(msg),
+      room: roomInfo?.roomId || '',
+      from: roomInfo?.socketId || '',
+      nickName,
+      recoderId: roomInfo?.recoderId,
+      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    });
+  }
 };
 
+const msgContent = computed(() =>
+  msgList.value.map((item) => ({
+    message: item.content,
+    time: item.time,
+    username: item.nickName,
+    reverse: item.type === 'send',
+  }))
+);
+
 defineOptions({
   name: 'ChatRoomCom',
 });
@@ -23,7 +48,7 @@ defineOptions({
 <template>
   <div class="flex h-full">
     <div class="flex flex-1 flex-col">
-      <ChatContent class="flex-1 px-4 py-4" />
+      <ChatContent class="flex-1 px-4 py-4" :msg-list="msgContent" />
       <div
         class="flex h-[260px] flex-col border-t pb-1.5 dark:border-neutral-600"
       >
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index b8519dd..c6b78e7 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useCreateRoom } from '@/hooks';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
-import { ChatRoomCom } from '@/components/chat-room';
+import ChatRoomCom from './chat-room.vue';
 import MenuAction from '@/components/menu-action.vue';
 import { ChatAction } from '@/config';
 import { useSwitchMember } from './hooks/useSwitchMember';
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useChat.ts b/client/packages/rtc-web/src/views/chat/hooks/useChat.ts
new file mode 100644
index 0000000..345d8f9
--- /dev/null
+++ b/client/packages/rtc-web/src/views/chat/hooks/useChat.ts
@@ -0,0 +1,57 @@
+import { ChatEventName } from '@/config';
+import { useSocket } from '@/hooks';
+import { unescapeStr } from '@/utils';
+import { ref, shallowRef } from 'vue';
+
+export type SendMessage = {
+  content: string;
+  room: string;
+  from: string;
+  nickName: string;
+  recoderId: any;
+  time: string;
+  to?: string;
+};
+
+// export type MessageStatus = 'fail' | 'complete' | 'pending';
+export type MessageType = 'send' | 'receive';
+
+export type MessageInfo = {
+  content: string;
+  // status: MessageStatus;
+  type: MessageType;
+} & SendMessage;
+
+export const useChat = () => {
+  const socketRef = shallowRef();
+  const msgList = ref<MessageInfo[]>([]);
+
+  const handleChat = (socket: any) => {
+    socketRef.value = socket;
+    socket.on(ChatEventName.ChatingRoom, handleChatingRoom);
+  };
+  const handleChatingRoom = (data: SendMessage) => {
+    console.log('receive', data);
+    msgList.value.push({
+      ...data,
+      content: unescapeStr(data.content),
+      type: 'receive',
+    });
+  };
+
+  const sendMessage = (data: SendMessage) => {
+    socketRef.value.emit(ChatEventName.ChatingRoom, data);
+    msgList.value.push({
+      ...data,
+      content: unescapeStr(data.content),
+      type: 'send',
+    });
+  };
+
+  useSocket(handleChat);
+
+  return {
+    sendMessage,
+    msgList,
+  };
+};
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts b/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts
deleted file mode 100644
index 724a17e..0000000
--- a/client/packages/rtc-web/src/views/chat/hooks/useGroupChat.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ChatEventName } from '@/config';
-import { useSocket } from '@/hooks';
-import { shallowRef } from 'vue';
-
-export type SendMessage = {
-  content: string;
-  room: string;
-  from: string;
-  nickName: string;
-  recoderId: any;
-};
-
-export const useGroupChat = () => {
-  const socketRef = shallowRef();
-  const handleChatingRoom = (data: SendMessage) => {
-    console.log('receive', data);
-  };
-
-  const sendMessage = (data: SendMessage) => {
-    socketRef.value.emit(ChatEventName.ChatingRoom, data);
-  };
-
-  const handleSocket = (socket: any) => {
-    socketRef.value = socket;
-    socket.on(ChatEventName.ChatingRoom, handleChatingRoom);
-  };
-
-  useSocket(handleSocket);
-
-  return {
-    sendMessage,
-  };
-};
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 65fae36..3e0bbce 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -14,6 +14,7 @@ importers:
       '@vueuse/router': ^10.2.1
       autoprefixer: ^10.4.14
       daisyui: ^3.1.6
+      dayjs: ^1.11.9
       eslint: ^8.43.0
       eslint-config-prettier: ^8.8.0
       eslint-plugin-prettier: ^4.2.1
@@ -39,6 +40,7 @@ importers:
       '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.3.9+vue@3.3.4
       '@vueuse/core': 10.2.0_vue@3.3.4
       '@vueuse/router': 10.2.1_vue-router@4.2.2+vue@3.3.4
+      dayjs: 1.11.9
       lodash: 4.17.21
       nanoid: 4.0.2
       socket.io-client: 2.3.0
@@ -1542,6 +1544,10 @@ packages:
       - ts-node
     dev: true
 
+  /dayjs/1.11.9:
+    resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
+    dev: false
+
   /de-indent/1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true

From 0814f7c2b801bd498e0e1e3ca408d4b444964ea1 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Fri, 4 Aug 2023 20:09:59 +0800
Subject: [PATCH 09/20] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=20+=20emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/package.json          |  4 +-
 .../src/components/chat-room/chat-input.vue   | 22 +++++++++--
 .../rtc-web/src/components/emoji/index.vue    | 39 +++++++++++++++++++
 .../rtc-web/src/components/menu-action.vue    | 11 ++++++
 client/packages/rtc-web/src/env.d.ts          |  1 +
 .../rtc-web/src/views/chat/chat-room.vue      | 29 ++++++++++----
 client/pnpm-lock.yaml                         | 35 +++++++++++++++++
 7 files changed, 128 insertions(+), 13 deletions(-)
 create mode 100644 client/packages/rtc-web/src/components/emoji/index.vue

diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index 6fa4d51..b37dd9d 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -17,7 +17,9 @@
     "nanoid": "^4.0.2",
     "socket.io-client": "2.3.0",
     "vue": "^3.3.4",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue3-emoji-picker": "^1.1.7",
+    "vue3-popper": "^1.5.0"
   },
   "devDependencies": {
     "@types/node": "^20.3.1",
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-input.vue b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
index 143b798..12ff1bb 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-input.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-input.vue
@@ -1,14 +1,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { ref } from 'vue';
+import { useVModel } from '@vueuse/core';
 
 defineOptions({
   name: 'ChatInput',
 });
 
-const msg = ref('');
+const props = defineProps({
+  msg: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['sendMsg', 'update:msg']);
 
-const emits = defineEmits(['sendMsg']);
+const msg = useVModel(props, 'msg', emits);
 
 const canSend = computed(() => msg.value !== '');
 
@@ -18,6 +25,12 @@ const handleSend = () => {
     msg.value = '';
   }
 };
+
+const keyDownEvent = (e: any) => {
+  if (e.ctrlKey && e.keyCode === 13) {
+    handleSend();
+  }
+};
 </script>
 
 <template>
@@ -25,7 +38,8 @@ const handleSend = () => {
     <textarea
       v-model="msg"
       class="textarea flex-1 resize-none border-b-0 focus:outline-none"
-      placeholder="请输入聊天消息"
+      placeholder="请输入聊天消息 使用 Ctrl + Enter 发送"
+      @keydown="keyDownEvent"
     ></textarea>
     <div class="mb-2 flex justify-end pr-4">
       <button
diff --git a/client/packages/rtc-web/src/components/emoji/index.vue b/client/packages/rtc-web/src/components/emoji/index.vue
new file mode 100644
index 0000000..3f2c001
--- /dev/null
+++ b/client/packages/rtc-web/src/components/emoji/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import Popper from 'vue3-popper';
+import EmojiPicker from 'vue3-emoji-picker';
+import 'vue3-emoji-picker/css';
+import { useTheme } from '@/hooks';
+import { ref } from 'vue';
+
+defineOptions({
+  name: 'EmojiPicker',
+});
+
+const emits = defineEmits(['emojiChange']);
+
+const { isDark } = useTheme();
+
+const visibleEmoji = ref(false);
+
+const onSelectEmoji = (data: any) => {
+  emits('emojiChange', data);
+};
+</script>
+
+<template>
+  <Popper
+    @open:popper="visibleEmoji = true"
+    @close:popper="visibleEmoji = false"
+  >
+    <slot></slot>
+
+    <template #content>
+      <EmojiPicker
+        v-if="visibleEmoji"
+        :native="true"
+        :theme="isDark ? 'dark' : 'light'"
+        @select="onSelectEmoji"
+      />
+    </template>
+  </Popper>
+</template>
diff --git a/client/packages/rtc-web/src/components/menu-action.vue b/client/packages/rtc-web/src/components/menu-action.vue
index 532e767..a3c9564 100644
--- a/client/packages/rtc-web/src/components/menu-action.vue
+++ b/client/packages/rtc-web/src/components/menu-action.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import EmojiPicker from '@/components/emoji/index.vue';
+
 defineOptions({
   name: 'MenuActions',
 });
@@ -24,7 +26,16 @@ const handleClick = (name: string) => emits('clickIcon', name);
       :data-tip="item.tip"
       class="tooltip tooltip-bottom"
     >
+      <emoji-picker v-if="item.name === 'emoji'" v-bind="$attrs">
+        <svg-icon
+          :color="item.color"
+          :name="item.name"
+          class="h-6 w-6 cursor-pointer"
+          @click="handleClick(item.name)"
+        />
+      </emoji-picker>
       <svg-icon
+        v-else
         :color="item.color"
         :name="item.name"
         class="h-6 w-6 cursor-pointer"
diff --git a/client/packages/rtc-web/src/env.d.ts b/client/packages/rtc-web/src/env.d.ts
index b38d3f4..3e25b75 100644
--- a/client/packages/rtc-web/src/env.d.ts
+++ b/client/packages/rtc-web/src/env.d.ts
@@ -1 +1,2 @@
 declare module 'socket.io-client';
+declare module 'vue3-emoji-picker';
diff --git a/client/packages/rtc-web/src/views/chat/chat-room.vue b/client/packages/rtc-web/src/views/chat/chat-room.vue
index acbd248..9a74d19 100644
--- a/client/packages/rtc-web/src/views/chat/chat-room.vue
+++ b/client/packages/rtc-web/src/views/chat/chat-room.vue
@@ -7,7 +7,11 @@ import { useGetRoomInfo } from '@/hooks/useRoom';
 import { useChat } from './hooks/useChat';
 import { escapeStr } from '@/utils';
 import dayjs from 'dayjs';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+
+defineOptions({
+  name: 'ChatRoomCom',
+});
 
 const { open } = useSwitchMember();
 
@@ -15,9 +19,9 @@ const { members, roomOwner, self } = useGetRoomInfo();
 
 const { sendMessage, msgList } = useChat();
 
-const handleSendmsg = (msg: string) => {
-  console.log(msg, self.value);
+const inputMsg = ref('');
 
+const handleSendmsg = (msg: string) => {
   if (self.value) {
     const { roomInfo, nickName = '' } = self.value;
     sendMessage({
@@ -40,9 +44,10 @@ const msgContent = computed(() =>
   }))
 );
 
-defineOptions({
-  name: 'ChatRoomCom',
-});
+const handleEmojiChange = (data: any) => {
+  const unicode = parseInt(`0x${data.r}`, 16);
+  inputMsg.value += String.fromCodePoint(unicode);
+};
 </script>
 
 <template>
@@ -52,8 +57,16 @@ defineOptions({
       <div
         class="flex h-[260px] flex-col border-t pb-1.5 dark:border-neutral-600"
       >
-        <MenuAction :menu-action="ChatInputAction" class="pl-2 pt-2" />
-        <ChatInput class="mt-2 flex-1" @send-msg="handleSendmsg" />
+        <MenuAction
+          :menu-action="ChatInputAction"
+          class="pl-2 pt-2"
+          @emoji-change="handleEmojiChange"
+        />
+        <ChatInput
+          v-model:msg="inputMsg"
+          class="mt-2 flex-1"
+          @send-msg="handleSendmsg"
+        />
       </div>
     </div>
     <div
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 3e0bbce..e82b1b1 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -35,6 +35,8 @@ importers:
       vue-eslint-parser: ^9.3.1
       vue-router: '4'
       vue-tsc: ^1.8.1
+      vue3-emoji-picker: ^1.1.7
+      vue3-popper: ^1.5.0
     dependencies:
       '@types/lodash': 4.14.195
       '@vitejs/plugin-vue-jsx': 3.0.1_vite@4.3.9+vue@3.3.4
@@ -46,6 +48,8 @@ importers:
       socket.io-client: 2.3.0
       vue: 3.3.4
       vue-router: 4.2.2_vue@3.3.4
+      vue3-emoji-picker: 1.1.7
+      vue3-popper: 1.5.0_vue@3.3.4
     devDependencies:
       '@types/node': 20.3.2
       '@typescript-eslint/eslint-plugin': 5.60.1_emhilanx7rvvqwlixwztbx5x2m
@@ -659,6 +663,10 @@ packages:
       fastq: 1.15.0
     dev: true
 
+  /@popperjs/core/2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -1552,6 +1560,10 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+  /debounce/1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -2288,6 +2300,10 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /idb/7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+    dev: false
+
   /ignore/5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -3826,6 +3842,25 @@ packages:
       '@vue/server-renderer': 3.3.4_vue@3.3.4
       '@vue/shared': 3.3.4
 
+  /vue3-emoji-picker/1.1.7:
+    resolution: {integrity: sha512-dKSI1NyrinYFykllwcOqBB1sw7EHdwQG4tjHYSO+khQkY8Csn4Evn5X2nAdz8Kl8o3P1J0jV4BGwbQ2dVWCxMA==}
+    dependencies:
+      '@popperjs/core': 2.11.8
+      idb: 7.1.1
+      vue: 3.3.4
+    dev: false
+
+  /vue3-popper/1.5.0_vue@3.3.4:
+    resolution: {integrity: sha512-xaEnx90YBnlSg5G2yWqm2DHWHg+DB99UVRp4VsyTF0QLXyHrqSuE1Xo5+sG0AQq/lBcrGMlk5NU5xE2MDLKViw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: ^3.2.20
+    dependencies:
+      '@popperjs/core': 2.11.8
+      debounce: 1.2.1
+      vue: 3.3.4
+    dev: false
+
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}

From 5dc63f57110ce18e254a8d78cf01bbd6c4020255 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Sun, 6 Aug 2023 22:47:32 +0800
Subject: [PATCH 10/20] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E6=94=B9?=
 =?UTF-8?q?=E5=8F=98=E5=85=83=E7=B4=A0=E5=A4=A7=E5=B0=8F=E7=9A=84hook?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8Ffix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chat-room/chat-content.vue |   2 +-
 .../src/components/chat-room/chat-message.vue |   3 +-
 .../components/chat-room/chat-room-user.vue   |  36 ++++-
 .../src/components/chat-room/user-card.vue    |   1 +
 .../rtc-web/src/components/menu/menu-side.vue |   2 +-
 client/packages/rtc-web/src/hooks/index.ts    |   1 +
 .../rtc-web/src/hooks/useDragChangeSize.ts    | 123 ++++++++++++++++++
 client/packages/rtc-web/src/utils/common.ts   |   4 +
 .../rtc-web/src/views/chat/chat-room.vue      |  58 +++++++--
 client/packages/rtc-web/vite.config.ts        |   1 +
 10 files changed, 215 insertions(+), 16 deletions(-)
 create mode 100644 client/packages/rtc-web/src/hooks/useDragChangeSize.ts

diff --git a/client/packages/rtc-web/src/components/chat-room/chat-content.vue b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
index 7c96245..8aca609 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-content.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-content.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col justify-end overflow-y-auto">
+  <div class="flex flex-col justify-end overflow-y-auto overflow-x-hidden">
     <ChatMessage
       v-for="(item, index) in props.msgList"
       :key="index"
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-message.vue b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
index f9899a4..8f73385 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-message.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-message.vue
@@ -11,7 +11,6 @@ type ChatMessageProps = Partial<
 
 defineOptions({
   name: 'ChatMessage',
-  inheritAttrs: true,
 });
 
 const props = withDefaults(defineProps<ChatMessageProps>(), {
@@ -30,7 +29,7 @@ const props = withDefaults(defineProps<ChatMessageProps>(), {
       :class="[reverse ? 'justify-end' : 'justify-start']"
     >
       <div
-        class="whitespace-pre-wrap rounded-lg px-4 py-2 leading-6 text-black"
+        class="max-w-[260px] whitespace-pre-wrap break-words rounded-lg px-4 py-2 leading-6 text-black lg:max-w-[500px]"
         :class="[background ? background : 'bg-slate-200']"
       >
         {{ props.message }}
diff --git a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
index 99afeea..68bd5fd 100644
--- a/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
+++ b/client/packages/rtc-web/src/components/chat-room/chat-room-user.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Member } from '@/hooks';
+import { Member, useDragChangeSize } from '@/hooks';
 import UserCard from './user-card.vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { PropType } from 'vue';
 
 defineOptions({
@@ -21,15 +21,45 @@ const props = defineProps({
     type: Object as PropType<Partial<Member>>,
     default: () => ({}),
   },
+  width: {
+    type: String as PropType<string>,
+    default: '220px',
+  },
 });
 
 const memberwithoutOwner = computed(() =>
   props.members.filter((item) => !item.owner)
 );
+
+const chatRoomUserRef = ref<any>();
+
+const { style, canDragged } = useDragChangeSize(chatRoomUserRef, {
+  initialSize: {
+    width: props.width,
+  },
+  position: 'left',
+  persistentSize: {
+    height: '100%',
+  },
+});
+
+const reSizeClass = computed(() => {
+  if (canDragged.value.draggable) {
+    if (canDragged.value.position === 'left') {
+      return ['cursor-w-resize'];
+    }
+  }
+  return [];
+});
 </script>
 
 <template>
-  <div class="px-2 pt-2 text-sm">
+  <div
+    ref="chatRoomUserRef"
+    :class="[...reSizeClass]"
+    class="h-full overflow-auto px-2 py-2 text-sm"
+    :style="style"
+  >
     <div class="mb-1 text-gray-400">房主</div>
     <UserCard
       class="mb-4"
diff --git a/client/packages/rtc-web/src/components/chat-room/user-card.vue b/client/packages/rtc-web/src/components/chat-room/user-card.vue
index 189210f..8a30ea9 100644
--- a/client/packages/rtc-web/src/components/chat-room/user-card.vue
+++ b/client/packages/rtc-web/src/components/chat-room/user-card.vue
@@ -3,6 +3,7 @@ import { UserCardProps } from './props';
 
 defineOptions({
   name: 'UserCard',
+  inheritAttrs: false,
 });
 
 withDefaults(defineProps<UserCardProps>(), {
diff --git a/client/packages/rtc-web/src/components/menu/menu-side.vue b/client/packages/rtc-web/src/components/menu/menu-side.vue
index 2da499e..68f429f 100644
--- a/client/packages/rtc-web/src/components/menu/menu-side.vue
+++ b/client/packages/rtc-web/src/components/menu/menu-side.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="menu h-full w-80 p-4">
+  <div class="menu h-full w-80 min-w-[320px] p-4">
     <MenuList />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index 58d7199..b163bdc 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './useRoom';
 export * from './useInitData';
 export * from './socket-utils';
 export * from './useRouterReactive';
+export * from './useDragChangeSize';
diff --git a/client/packages/rtc-web/src/hooks/useDragChangeSize.ts b/client/packages/rtc-web/src/hooks/useDragChangeSize.ts
new file mode 100644
index 0000000..ec19487
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/useDragChangeSize.ts
@@ -0,0 +1,123 @@
+import { isItBetween } from '@/utils';
+import {
+  MaybeElementRef,
+  useMouseInElement,
+  useMousePressed,
+} from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+
+type ResizeOption = {
+  initialSize?: {
+    width?: string;
+    height?: string;
+  };
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  persistentSize?: {
+    width?: string;
+    height?: string;
+  }; // 用来控制在拖拽时不会变的数据
+};
+
+export const useDragChangeSize = (
+  target: MaybeElementRef,
+  options?: ResizeOption
+) => {
+  const offset = 5;
+  const { elementX, elementY, elementWidth, elementHeight } =
+    useMouseInElement(target);
+
+  const style = computed(() => {
+    return Object.assign(
+      {},
+      {
+        width: `${
+          elementWidth.value
+            ? elementWidth.value + 'px'
+            : options?.initialSize?.width ?? '100%'
+        }`,
+        height: `${
+          elementHeight.value
+            ? elementHeight.value + 'px'
+            : options?.initialSize?.height ?? '100%'
+        }`,
+      },
+      options?.persistentSize || ({} as any)
+    );
+  });
+
+  const { pressed } = useMousePressed({ target, touch: false });
+
+  const draggablePos = computed(() => ({
+    left: {
+      x: [-offset, offset],
+      y: [0, elementHeight.value],
+    },
+    top: {
+      x: [0, elementWidth.value],
+      y: [-offset, offset],
+    },
+  }));
+
+  const judgeEnterPos = () => {
+    const findV = Object.keys(draggablePos.value).find((key) => {
+      const posKey = key as keyof typeof draggablePos.value;
+
+      return (
+        isItBetween(elementX.value, draggablePos.value[posKey].x) &&
+        isItBetween(elementY.value, draggablePos.value[posKey].y)
+      );
+    });
+    const draggable = options?.position ? options.position === findV : !!findV;
+    return {
+      draggable,
+      position: findV || '',
+    };
+  };
+
+  // 判断点击时候是否在拖拽范围内
+  const draggableByClick = ref({
+    draggable: false,
+    position: '',
+  });
+
+  // 供外部用的判断 是否可以拖拽
+  const canDragged = computed(judgeEnterPos);
+
+  const doResize = ([posX, posY]: number[], type: string) => {
+    const movX = posX - offset;
+    const movY = posY - offset;
+    if (type === 'left') {
+      const differenceX = -movX;
+      elementWidth.value = elementWidth.value + differenceX;
+    }
+
+    if (type === 'top') {
+      const differenceY = -movY;
+      elementHeight.value = elementHeight.value + differenceY;
+    }
+  };
+
+  watch([elementX, elementY], (v) => {
+    if (pressed.value) {
+      if (draggableByClick.value.draggable) {
+        doResize(v, draggableByClick.value.position);
+      }
+    }
+  });
+
+  watch(pressed, (v) => {
+    if (v) {
+      draggableByClick.value = judgeEnterPos();
+    } else {
+      draggableByClick.value = {
+        draggable: false,
+        position: '',
+      };
+    }
+  });
+
+  return {
+    canDragged,
+    style,
+  };
+};
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index fb7f21a..b26c1f6 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -88,3 +88,7 @@ export function unescapeStr(str: string) {
     }
   );
 }
+
+export const isItBetween = (num: number, arr: number[]) => {
+  return num >= arr[0] && num <= arr[1];
+};
diff --git a/client/packages/rtc-web/src/views/chat/chat-room.vue b/client/packages/rtc-web/src/views/chat/chat-room.vue
index 9a74d19..5aa5f54 100644
--- a/client/packages/rtc-web/src/views/chat/chat-room.vue
+++ b/client/packages/rtc-web/src/views/chat/chat-room.vue
@@ -7,7 +7,8 @@ import { useGetRoomInfo } from '@/hooks/useRoom';
 import { useChat } from './hooks/useChat';
 import { escapeStr } from '@/utils';
 import dayjs from 'dayjs';
-import { computed, ref } from 'vue';
+import { computed, ref, nextTick } from 'vue';
+import { useDragChangeSize } from '@/hooks';
 
 defineOptions({
   name: 'ChatRoomCom',
@@ -21,6 +22,26 @@ const { sendMessage, msgList } = useChat();
 
 const inputMsg = ref('');
 
+const chatMsgBoxRef = ref<any>(null);
+const chatMsgContentRef = ref<Element | null>(null);
+
+const { canDragged, style } = useDragChangeSize(chatMsgBoxRef, {
+  initialSize: { height: '260px' },
+  position: 'top',
+  persistentSize: {
+    width: '100%',
+  },
+});
+
+const reSizeClass = computed(() => {
+  if (canDragged.value.draggable) {
+    if (canDragged.value.position === 'top') {
+      return ['cursor-ns-resize'];
+    }
+  }
+  return [];
+});
+
 const handleSendmsg = (msg: string) => {
   if (self.value) {
     const { roomInfo, nickName = '' } = self.value;
@@ -32,6 +53,14 @@ const handleSendmsg = (msg: string) => {
       recoderId: roomInfo?.recoderId,
       time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     });
+
+    nextTick(() => {
+      chatMsgContentRef?.value?.scroll({
+        top: chatMsgContentRef.value.scrollHeight,
+        left: 0,
+        behavior: 'smooth',
+      });
+    });
   }
 };
 
@@ -53,9 +82,18 @@ const handleEmojiChange = (data: any) => {
 <template>
   <div class="flex h-full">
     <div class="flex flex-1 flex-col">
-      <ChatContent class="flex-1 px-4 py-4" :msg-list="msgContent" />
+      <!-- 这里得多加一个 div 才能 scroll -->
+      <div
+        ref="chatMsgContentRef"
+        class="ces min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-4"
+      >
+        <ChatContent :msg-list="msgContent" />
+      </div>
       <div
-        class="flex h-[260px] flex-col border-t pb-1.5 dark:border-neutral-600"
+        ref="chatMsgBoxRef"
+        :style="style"
+        :class="[...reSizeClass]"
+        class="flex h-[260px] max-h-[610px] flex-col border-t pb-1.5 dark:border-neutral-600"
       >
         <MenuAction
           :menu-action="ChatInputAction"
@@ -69,11 +107,13 @@ const handleEmojiChange = (data: any) => {
         />
       </div>
     </div>
-    <div
-      v-if="open"
-      class="hidden w-[220px] border-l dark:border-neutral-600 lg:block"
-    >
-      <ChatRoomUser :members="members" :room-owner="roomOwner" :self="self" />
-    </div>
+    <ChatRoomUser
+      v-show="open"
+      class="hidden max-w-[400px] border-l dark:border-neutral-600 lg:block"
+      width="220px"
+      :members="members"
+      :room-owner="roomOwner"
+      :self="self"
+    />
   </div>
 </template>
diff --git a/client/packages/rtc-web/vite.config.ts b/client/packages/rtc-web/vite.config.ts
index b7a533c..dedba30 100644
--- a/client/packages/rtc-web/vite.config.ts
+++ b/client/packages/rtc-web/vite.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
     ],
   },
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/api': {
         target: 'http://localhost:9092/api',

From c34b6ef8ec2826f06f1a386f914b1543457d02f4 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 9 Aug 2023 15:14:42 +0800
Subject: [PATCH 11/20] feat: video chat init

---
 .../rtc-web/src/assets/svg-icon/audio.svg     |   1 +
 .../rtc-web/src/assets/svg-icon/camera.svg    |   1 +
 .../rtc-web/src/assets/svg-icon/hang-up.svg   |   1 +
 .../src/assets/svg-icon/mirror-image.svg      |   1 +
 .../rtc-web/src/assets/svg-icon/up.svg        |   1 +
 .../packages/rtc-web/src/components/lib.tsx   |   9 +-
 .../rtc-web/src/components/menu-action.vue    |  30 +++++-
 .../rtc-web/src/components/menu/menu-list.vue |   5 +
 .../rtc-web/src/components/menu/menu-side.vue |   5 +-
 .../packages/rtc-web/src/config/constant.ts   |  42 +++++++-
 client/packages/rtc-web/src/hooks/index.ts    |   1 +
 .../rtc-web/src/hooks/useDragChangeSize.ts    |   5 +
 client/packages/rtc-web/src/hooks/useRoom.ts  |  38 +++----
 .../rtc-web/src/hooks/useRouterReactive.ts    |  33 +++++-
 .../useSwitchByUrl.ts}                        |  43 ++++----
 client/packages/rtc-web/src/routes/router.ts  |   4 +
 client/packages/rtc-web/src/utils/common.ts   |   2 +
 .../rtc-web/src/views/chat/chat-room.vue      |   2 +-
 .../packages/rtc-web/src/views/chat/chat.vue  |   2 +-
 .../src/views/video/hooks/useVideoCall.ts     |  51 +++++++++
 .../src/views/video/video-control-menu.vue    | 100 ++++++++++++++++++
 .../rtc-web/src/views/video/video-control.vue |  44 ++++++++
 .../rtc-web/src/views/video/video-room.vue    |  42 ++++++++
 .../rtc-web/src/views/video/video.vue         |  41 +++++++
 24 files changed, 447 insertions(+), 57 deletions(-)
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/audio.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/camera.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/hang-up.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/mirror-image.svg
 create mode 100644 client/packages/rtc-web/src/assets/svg-icon/up.svg
 rename client/packages/rtc-web/src/{views/chat/hooks/useSwitchMember.ts => hooks/useSwitchByUrl.ts} (53%)
 create mode 100644 client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
 create mode 100644 client/packages/rtc-web/src/views/video/video-control-menu.vue
 create mode 100644 client/packages/rtc-web/src/views/video/video-control.vue
 create mode 100644 client/packages/rtc-web/src/views/video/video-room.vue
 create mode 100644 client/packages/rtc-web/src/views/video/video.vue

diff --git a/client/packages/rtc-web/src/assets/svg-icon/audio.svg b/client/packages/rtc-web/src/assets/svg-icon/audio.svg
new file mode 100644
index 0000000..9c36589
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/audio.svg
@@ -0,0 +1 @@
+<svg t="1691553735044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1412" width="200" height="200"><path d="M483.363 517.9h-53.357v53.348h53.357V517.9z m-160.051 0v53.348h53.348V517.9h-53.348z m213.398 53.348h53.348V517.9H536.71v53.348z m160.051 0V517.9h-53.347v53.348h53.347z m-266.755 53.365v53.348h53.357v-53.348h-53.357z m-106.694 0l19.802 53.348h33.545v-53.348h-53.347z m213.398 53.348h53.348v-53.348H536.71v53.348z m-106.704 69.748l53.357 10.273v-26.674h-53.357v16.401z m106.704 5.514l53.348-8.576v-13.338H536.71v21.914z m106.704-75.262h38.922l14.425-53.348h-53.347v53.348zM536.71 464.553h-53.347V517.9h53.347v-53.347z m-106.704 0h-53.347V517.9h53.347v-53.347zM590.058 517.9h53.356v-53.347h-53.356V517.9zM483.363 624.613h53.347v-53.365h-53.347v53.365z m-53.357-53.365h-53.347v53.365h53.347v-53.365z m160.052 53.365h53.356v-53.365h-53.356v53.365z m-106.695 53.348v53.348h53.347v-53.348h-53.347z m-106.704 0v36.746l53.347 16.602v-53.348h-53.347z m213.399 53.348l53.356-17.449v-35.898h-53.356v53.347z m106.703-160.061v53.365l17.414-35.896v-17.469h-17.414zM536.71 464.553h53.348v-53.348H536.71v53.348z m160.051 0v-53.348h-53.347v53.348h53.347z m-213.398-53.347h-53.357v53.348h53.357v-53.348z m-160.051 0v53.348h53.348v-53.348h-53.348z m106.694-53.348h-53.347v53.348h53.347v-53.348z m106.704 0h-53.347v53.348h53.347v-53.348z m53.348 53.348h53.356v-53.348h-53.356v53.348z m-53.348-53.348h53.348v-53.347H536.71v53.347z m160.051 0v-53.347h-53.347v53.347h53.347z m-213.398-53.347h-53.357v53.347h53.357v-53.347z m-160.051 0v53.347h53.348v-53.347h-53.348z m106.694-53.347h-53.347v53.347h53.347v-53.347z m106.704 0h-53.347v53.347h53.347v-53.347z m53.348 53.347h53.356v-53.347h-53.356v53.347z m-53.348-53.347h53.348v-53.366H536.71v53.366z m160.051 0v-53.366h-53.347v53.366h53.347z m-213.398-53.367h-53.357v53.366h53.357v-53.366z m-160.051 0v53.366h53.348v-53.366h-53.348z m106.694-53.347h-53.347v53.347h53.347V144.45z m106.704 53.347V144.45h-53.347v53.347h53.347z m53.348 0h53.356V144.45h-53.356v53.347z m0-53.347V91.103H536.71v53.347h53.348z m106.703 0l-53.347-53.347v53.347h53.347z m-213.398 0V91.103h-53.357v53.347h53.357zM363.58 104.846l-40.269 39.604h53.348V91.103l-13.079 13.743z m173.13-67.091h-53.347v53.348h53.347V37.755zM430.006 64.429l-26.674 13.337-26.673 13.337h53.347V64.429zM624.092 78.08l-34.034-13.65v26.674h53.356L624.092 78.08z" fill="" p-id="1413"></path><path d="M847.257 554.738c0-16.934-5.533-27.965-15.551-27.965-10.938 0-15.568 11.031-15.568 27.965 0 162.92-169.403 303.777-306.166 303.777-155.836 0-305.77-152-305.77-304.184 0-16.934-9.233-21.527-15.098-21.527-6.42 0-16.427 5-16.427 21.934 0 175.906 151.252 320.232 323.128 335.746v72.512h-169.81c-16.952 0-30.667 5.609-30.667 18.281 0 11.824 13.715 15.365 30.667 15.365h367.953c16.953 0 30.667-2.951 30.667-15.346 0-13.283-13.714-18.301-30.667-18.301H526.499v-72.512c171.877-15.512 320.758-159.838 320.758-335.745zM509.972 769.383c118.547 0 214.644-96.125 214.644-214.645V248.12c0-118.537-96.097-214.644-214.644-214.644-118.546 0-214.644 96.106-214.644 214.644v306.619c0 118.519 96.097 214.644 214.644 214.644zM328.163 248.12c0-101.197 75.852-183.248 181.809-183.248 97.397 3.247 180.73 75.262 183.387 183.248v306.619c0 97.971-73.104 185.332-183.387 185.332-110.394 0-181.809-85.408-181.809-185.332V248.12z" p-id="1414"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/camera.svg b/client/packages/rtc-web/src/assets/svg-icon/camera.svg
new file mode 100644
index 0000000..2fdee6c
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/camera.svg
@@ -0,0 +1 @@
+<svg t="1691553222480" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1258" width="200" height="200"><path d="M704 768V256H128v512h576z m64-416L960 256v512l-192-96v128a31.168 31.168 0 0 1-8.96 23.04 31.168 31.168 0 0 1-23.04 8.96h-640a31.168 31.168 0 0 1-23.04-8.96 31.168 31.168 0 0 1-8.96-23.04v-576c0-9.344 3.008-17.024 8.96-23.04A31.168 31.168 0 0 1 96 192h640c9.344 0 17.024 3.008 23.04 8.96 5.952 6.016 8.96 13.696 8.96 23.04v128z m0 72v176l128 64v-304l-128 64zM192 320h192v64H192V320z" p-id="1259"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/hang-up.svg b/client/packages/rtc-web/src/assets/svg-icon/hang-up.svg
new file mode 100644
index 0000000..1dc9f80
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/hang-up.svg
@@ -0,0 +1 @@
+<svg t="1691555214679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2779" width="200" height="200"><path d="M512 1023.999069a508.779681 508.779681 0 0 1-199.291759-40.238472 510.300163 510.300163 0 0 1-162.745886-109.73071A510.354466 510.354466 0 0 1 40.231646 711.284001 508.826226 508.826226 0 0 1 0.000931 512a508.841741 508.841741 0 0 1 40.238472-199.291759 510.338951 510.338951 0 0 1 109.73071-162.745886A510.292406 510.292406 0 0 1 312.708241 40.239403 508.787439 508.787439 0 0 1 512 0.000931a508.795196 508.795196 0 0 1 199.291759 40.238472 510.222587 510.222587 0 0 1 162.745886 109.722952 510.284648 510.284648 0 0 1 109.730709 162.745886A508.841741 508.841741 0 0 1 1023.999069 512a508.826226 508.826226 0 0 1-40.238472 199.291759 510.292406 510.292406 0 0 1-109.73071 162.745886 510.27689 510.27689 0 0 1-162.745886 109.730709A508.795196 508.795196 0 0 1 512 1023.999069zM252.695744 543.348307a13.4904 13.4904 0 0 0 3.878781 9.471982 13.335248 13.335248 0 0 0 9.471983 3.917569l127.456738-0.201697a13.428339 13.428339 0 0 0 13.412824-13.412824l0.06206-51.680875a87.272569 87.272569 0 0 1 24.420804-20.030025 161.489161 161.489161 0 0 1 82.493911-20.16966h0.279272a159.573043 159.573043 0 0 1 82.230154 20.084327 86.985539 86.985539 0 0 1 24.296683 20.084327v51.362816a13.358521 13.358521 0 0 0 3.878781 9.471983 13.226643 13.226643 0 0 0 9.425437 3.917568l114.400762-0.170666h13.110279a13.358521 13.358521 0 0 0 9.495255-3.917569 13.451612 13.451612 0 0 0 3.878781-9.495255l0.054303-29.168432a13.226643 13.226643 0 0 0-0.387878-3.157327l-0.558544-2.327269a88.436203 88.436203 0 0 0-6.826655-27.570374c-25.553408-59.453953-131.288973-104.292659-245.914704-104.292659h-0.589575a511.355191 511.355191 0 0 0-134.903997 18.967238c-45.102463 12.776704-80.802762 30.681156-100.514726 50.424151a114.990336 114.990336 0 0 0-24.901773 35.645996 86.357176 86.357176 0 0 0-7.57138 34.505634l-0.054303 27.787586z" fill="#FC4A46" p-id="2780"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/mirror-image.svg b/client/packages/rtc-web/src/assets/svg-icon/mirror-image.svg
new file mode 100644
index 0000000..bf4be28
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/mirror-image.svg
@@ -0,0 +1 @@
+<svg t="1691555195526" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2625" width="200" height="200"><path d="M1091.242667 116.032c31.722667 10.005333 54.592 39.253333 54.741333 73.536v630.250667c0 28.928-16.618667 55.424-43.029333 68.672L714.368 1006.72c-4.309333 0.704-8.597333 1.28-13.162667 1.28-35.029333 0-63.488-27.733333-63.488-61.994667V61.845333C637.717333 27.733333 666.176 0 701.205333 0c4.416 0 8.832 0.405333 13.162667 1.258667L1093.504 116.693333c-0.554667-0.128-1.429333-0.426667-2.261333-0.682666z m-40.618667 676.757333V215.04L733.077333 132.586667v742.656l317.546667-82.453334zM450.944 0c35.2 0 63.637333 27.733333 63.338667 61.845333v884.16c0 34.282667-28.437333 61.994667-63.466667 61.994667-4.48 0-8.917333-0.426667-13.312-1.258667L49.194667 888.490667C23.594667 875.52 6.186667 849.621333 6.186667 819.690667V189.717333c0-35.52 24.746667-65.493333 58.346666-74.517333-0.277333 0.128-0.725333 0.128-1.28 0.256L437.781333 1.28c4.266667-0.704 8.576-1.258667 13.141334-1.258667z" fill="" p-id="2626"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/assets/svg-icon/up.svg b/client/packages/rtc-web/src/assets/svg-icon/up.svg
new file mode 100644
index 0000000..6445439
--- /dev/null
+++ b/client/packages/rtc-web/src/assets/svg-icon/up.svg
@@ -0,0 +1 @@
+<svg t="1691553973993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2471" width="200" height="200"><path d="M896 467.2l-362.666667-341.333333c-2.133333-2.133333-6.4-4.266667-8.533333-6.4-4.266667-2.133333-6.4-2.133333-10.666667-2.133334s-8.533333 0-10.666666 2.133334c-4.266667 2.133333-6.4 4.266667-8.533334 6.4l-362.666666 341.333333c-12.8 12.8-12.8 32-2.133334 44.8 12.8 12.8 32 12.8 44.8 2.133333l309.333334-290.133333V874.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V224L853.333333 514.133333c6.4 6.4 14.933333 8.533333 21.333334 8.533334 8.533333 0 17.066667-4.266667 23.466666-10.666667 12.8-12.8 10.666667-32-2.133333-44.8z" fill="" p-id="2472"></path></svg>
\ No newline at end of file
diff --git a/client/packages/rtc-web/src/components/lib.tsx b/client/packages/rtc-web/src/components/lib.tsx
index e3e27c2..de48fc4 100644
--- a/client/packages/rtc-web/src/components/lib.tsx
+++ b/client/packages/rtc-web/src/components/lib.tsx
@@ -1,6 +1,7 @@
 import { SetupContext } from 'vue';
 import { SvgIcon, NavIcons } from './base';
 import { MenuSide } from './menu';
+import { resetUrl } from '@/utils';
 
 export const NavHeader = () => {
   return (
@@ -18,11 +19,15 @@ export const NavHeader = () => {
               />
             </label>
           </div>
-          <div class="mx-2 flex-1 px-2">Web-Rtc</div>
+          <div class="mx-2 flex-1 px-2">
+            <span class="cursor-pointer" onClick={resetUrl}>
+              Web-Rtc
+            </span>
+          </div>
           <NavIcons class="flex-none pr-3" />
         </div>
       </div>
-      <div class="drawer-side">
+      <div class="drawer-side z-50">
         <label for="my-drawer-3" class="drawer-overlay"></label>
         <MenuSide class="bg-base-200"></MenuSide>
       </div>
diff --git a/client/packages/rtc-web/src/components/menu-action.vue b/client/packages/rtc-web/src/components/menu-action.vue
index a3c9564..87ef612 100644
--- a/client/packages/rtc-web/src/components/menu-action.vue
+++ b/client/packages/rtc-web/src/components/menu-action.vue
@@ -6,11 +6,19 @@ defineOptions({
 });
 
 type PropTypes = {
-  menuAction: { name: string; tip: string; color?: string }[];
+  menuAction: {
+    name: string;
+    tip: string;
+    color?: string;
+    tipDir?: string;
+    btn?: boolean;
+  }[];
+  gap?: number;
 };
 
 const props = withDefaults(defineProps<PropTypes>(), {
   menuAction: () => [] as PropTypes['menuAction'],
+  gap: 0,
 });
 
 const emits = defineEmits(['clickIcon']);
@@ -21,10 +29,18 @@ const handleClick = (name: string) => emits('clickIcon', name);
 <template>
   <div class="flex">
     <div
-      v-for="item in props.menuAction"
+      v-for="(item, index) in props.menuAction"
       :key="item.name"
       :data-tip="item.tip"
-      class="tooltip tooltip-bottom"
+      class="tooltip"
+      :class="[item.tipDir ?? 'tooltip-bottom', props.gap ? 'first:ml-0' : '']"
+      :style="
+        props.gap && index === 0
+          ? `margin-left: 0`
+          : props.gap
+          ? `margin-left: ${props.gap}px`
+          : ''
+      "
     >
       <emoji-picker v-if="item.name === 'emoji'" v-bind="$attrs">
         <svg-icon
@@ -34,6 +50,14 @@ const handleClick = (name: string) => emits('clickIcon', name);
           @click="handleClick(item.name)"
         />
       </emoji-picker>
+      <button v-else-if="item.btn" class="btn-circle btn">
+        <svg-icon
+          :color="item.color"
+          :name="item.name"
+          class="h-6 w-6 cursor-pointer"
+          @click="handleClick(item.name)"
+        />
+      </button>
       <svg-icon
         v-else
         :color="item.color"
diff --git a/client/packages/rtc-web/src/components/menu/menu-list.vue b/client/packages/rtc-web/src/components/menu/menu-list.vue
index 8ef0b49..f5cd5fa 100644
--- a/client/packages/rtc-web/src/components/menu/menu-list.vue
+++ b/client/packages/rtc-web/src/components/menu/menu-list.vue
@@ -20,6 +20,11 @@ const menuListData = ref([
     icon: 'add-icon',
     label: '聊天',
   },
+  {
+    key: 'video',
+    icon: 'add-icon',
+    label: '视频聊天',
+  },
 ]);
 
 const currentCreateRoomByKey = ref('');
diff --git a/client/packages/rtc-web/src/components/menu/menu-side.vue b/client/packages/rtc-web/src/components/menu/menu-side.vue
index 68f429f..7b4a49e 100644
--- a/client/packages/rtc-web/src/components/menu/menu-side.vue
+++ b/client/packages/rtc-web/src/components/menu/menu-side.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import MenuList from './menu-list.vue';
+import { useSwitchSiderbar } from '@/hooks';
 
 defineOptions({
   name: 'MenuSide',
 });
+
+const { open } = useSwitchSiderbar();
 </script>
 
 <template>
-  <div class="menu h-full w-80 min-w-[320px] p-4">
+  <div v-show="open" class="menu h-full w-80 min-w-[320px] p-4">
     <MenuList />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/config/constant.ts b/client/packages/rtc-web/src/config/constant.ts
index 3eaf125..d941809 100644
--- a/client/packages/rtc-web/src/config/constant.ts
+++ b/client/packages/rtc-web/src/config/constant.ts
@@ -1,4 +1,10 @@
-type MenuActionType = { name: string; tip: string; color?: string };
+export type MenuActionType = {
+  name: string;
+  tip: string;
+  color?: string;
+  tipDir?: string;
+  btn?: boolean;
+};
 
 export const ChatAction: MenuActionType[] = [
   { name: 'member', tip: '显示成员', color: undefined },
@@ -7,3 +13,37 @@ export const ChatAction: MenuActionType[] = [
 export const ChatInputAction: MenuActionType[] = [
   { name: 'emoji', tip: '表情' },
 ];
+
+export const VideoMenuAction: MenuActionType[] = [
+  {
+    name: 'member',
+    tip: '显示成员',
+    color: undefined,
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+];
+
+export const VideoControlMenuAction: MenuActionType[] = [
+  {
+    name: 'camera',
+    tip: '开启/关闭摄像头',
+    color: '#707070',
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+  {
+    name: 'mirror-image',
+    tip: '开启镜像',
+    color: '#707070',
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+  {
+    name: 'hang-up',
+    tip: '结束通话',
+    color: undefined,
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+];
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index b163bdc..26bd8e1 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -4,3 +4,4 @@ export * from './useInitData';
 export * from './socket-utils';
 export * from './useRouterReactive';
 export * from './useDragChangeSize';
+export * from './useSwitchByUrl';
diff --git a/client/packages/rtc-web/src/hooks/useDragChangeSize.ts b/client/packages/rtc-web/src/hooks/useDragChangeSize.ts
index ec19487..e95457e 100644
--- a/client/packages/rtc-web/src/hooks/useDragChangeSize.ts
+++ b/client/packages/rtc-web/src/hooks/useDragChangeSize.ts
@@ -1,3 +1,8 @@
+/**
+ * @description 拖拽元素改变大小
+ * 对于一些自由拖拽的元素会有一些问题，比如拉左边进行宽度增加，会造成 width 往右边增加；这里暂时未处理，按理说要同时改变 left
+ */
+
 import { isItBetween } from '@/utils';
 import {
   MaybeElementRef,
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index af3afee..6027f9c 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -56,7 +56,7 @@ export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
   };
 };
 
-export const useCreateRoom = () => {
+export const useCreateRoom = (type: 'password' | 'video' = 'password') => {
   const router = useRouter();
 
   const initData = inject(InitDataKey);
@@ -66,10 +66,9 @@ export const useCreateRoom = () => {
   const { isValid } = useRoom(() => roomId.value || '');
 
   const emitCreateRoom = (socket: any) => {
-    console.log('emitCreateRoom');
     socket.emit(SocketEventName.CreateAndJoin, {
       room: roomId.value,
-      type: 'password',
+      type: type,
       password: '',
       nickName: genNickName(),
       langMode: initData?.value.langMode,
@@ -102,7 +101,6 @@ export const useCreateRoom = () => {
   };
 };
 
-// 设置 room 连接的一些处理
 export const useRoomConnect = () => {
   const roomInfo = useGetRoomInfo();
 
@@ -143,23 +141,13 @@ export const useRoomConnect = () => {
     return rtcConnects.get(id) || createRtcConnect(id);
   };
 
-  // room Created事件 创建 peer、创建 offer
-  const roomCreated = async (data: any) => {
-    selfInfo.value = {
-      owner: data.owner,
-      recoderId: data.recoderId,
-      roomId: data.room,
-      socketId: data.id,
-    };
-    const handler = async (peer: any) => {
-      const rtcConnect = getRtcConnect(peer.id);
-      await createOffer(rtcConnect, peer);
-    };
-
-    await Promise.all(data.peers.map(handler));
-    console.log('connect created', data, rtcConnects);
+  const roomJoined = async (data: any) => {
+    createOffer(getRtcConnect(data.id), data);
   };
 
+  /**
+   * @description 这里的 createOffer
+   */
   const createOffer = async (pc: RTCPeerConnection, peer: any) => {
     const offer = await pc.createOffer(initData.value.options);
     await pc.setLocalDescription(offer);
@@ -171,6 +159,9 @@ export const useRoomConnect = () => {
     });
   };
 
+  /**
+   * @description offer 监听事件
+   */
   const roomOffer = async (data: any) => {
     const pc = getRtcConnect(data.from);
     await pc.setRemoteDescription(
@@ -187,9 +178,11 @@ export const useRoomConnect = () => {
     });
   };
 
+  /**
+   * @description answer 监听事件
+   */
   const roomAnswer = async (data: any) => {
     const pc = getRtcConnect(data.from);
-
     await pc.setRemoteDescription(
       new RTCSessionDescription({ type: 'answer', sdp: data.sdp })
     );
@@ -200,7 +193,7 @@ export const useRoomConnect = () => {
 
   const handleRoomConnect = (socket: any) => {
     socketRef.value = socket;
-    socket.on(SocketEventName.RoomCreated, roomCreated);
+    socket.on(SocketEventName.RoomJoin, roomJoined);
     socket.on(SocketEventName.RoomOffer, roomOffer);
     socket.on(SocketEventName.RoomAnswer, roomAnswer);
     socket.on(SocketEventName.RoomCandidate, roomCandidate);
@@ -282,14 +275,11 @@ export const useGetRoomInfo = () => {
   });
 
   const handleRoomInfo = async (socket: any) => {
-    console.log('执行', socket);
     socket.on(SocketEventName.RoomCreated, roomCreated);
     socket.on(SocketEventName.RoomExit, roomExit);
     socket.on(SocketEventName.RoomJoin, roomJoin);
 
     onBeforeUnmount(() => {
-      console.log('unmount');
-      console.log(selfInfo.value);
       socket.emit(SocketEventName.RoomExit, {
         from: selfInfo.value.socketId,
         room: selfInfo.value.roomId,
diff --git a/client/packages/rtc-web/src/hooks/useRouterReactive.ts b/client/packages/rtc-web/src/hooks/useRouterReactive.ts
index 9d339af..5ee865b 100644
--- a/client/packages/rtc-web/src/hooks/useRouterReactive.ts
+++ b/client/packages/rtc-web/src/hooks/useRouterReactive.ts
@@ -1,5 +1,5 @@
-import { useRouteParams } from '@vueuse/router';
-import { Ref, watch } from 'vue';
+import { useRouteParams, useRouteQuery } from '@vueuse/router';
+import { Ref, toRefs, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 export const useRouteParamsReactive = <T extends string>(keys: T[]) => {
@@ -26,3 +26,32 @@ export const useRouteParamsReactive = <T extends string>(keys: T[]) => {
 
   return params;
 };
+
+export const useRouteQueryReactive = (
+  ...args: Parameters<typeof useRouteQuery>
+) => {
+  const { query } = toRefs(useRoute());
+
+  const [key, defaultValue, options] = args;
+  const valueRef = useRouteQuery(key, defaultValue, options);
+
+  watch(
+    () => query.value[key],
+    (v: any) => {
+      const nv = options?.transform?.(v);
+      if (options?.transform === Number) {
+        if (!isNaN(nv as number)) {
+          valueRef.value = nv;
+        }
+      } else {
+        valueRef.value = nv;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  return valueRef;
+};
diff --git a/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts b/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
similarity index 53%
rename from client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
rename to client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
index f03d2cc..e14d15a 100644
--- a/client/packages/rtc-web/src/views/chat/hooks/useSwitchMember.ts
+++ b/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
@@ -1,15 +1,10 @@
 import { useWindowSize } from '@vueuse/core';
-import { useRouteQuery } from '@vueuse/router';
-import { computed, toRefs, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { isNaN } from 'lodash';
+import { computed, watch } from 'vue';
+import { useRouteQueryReactive } from './useRouterReactive';
 
 export const useSwitchMember = () => {
   const { width } = useWindowSize();
-
-  const { query } = toRefs(useRoute());
-
-  const showMembers = useRouteQuery('showMembers', '0', {
+  const showMembers = useRouteQueryReactive('showMembers', '0', {
     transform: Number,
   });
 
@@ -32,23 +27,27 @@ export const useSwitchMember = () => {
     }
   );
 
-  watch(
-    () => query.value.showMembers,
-    (v) => {
-      const nv = Number(v);
-      if (!isNaN(nv)) {
-        showMembers.value = nv;
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    }
-  );
-
   return {
     open,
     switchMember,
     isLgScreen,
   };
 };
+
+export const useSwitchSiderbar = () => {
+  const showSiderbar = useRouteQueryReactive('showSiderbar', '1', {
+    transform: Number,
+  });
+
+  const switchSiderbar = () => {
+    showSiderbar.value = showSiderbar.value === 0 ? 1 : 0;
+  };
+
+  const open = computed(() => showSiderbar.value === 1);
+
+  return {
+    switchSiderbar,
+    open,
+    showSiderbar,
+  };
+};
diff --git a/client/packages/rtc-web/src/routes/router.ts b/client/packages/rtc-web/src/routes/router.ts
index 988f641..c3768a7 100644
--- a/client/packages/rtc-web/src/routes/router.ts
+++ b/client/packages/rtc-web/src/routes/router.ts
@@ -1,6 +1,10 @@
 export const routes = [
   { path: '/', component: () => import('@/views/welcome.vue') },
   { path: '/chat/:roomId', component: () => import('@/views/chat/chat.vue') },
+  {
+    path: '/video/:roomId',
+    component: () => import('@/views/video/video.vue'),
+  },
   // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
   {
     path: '/:pathMatch(.*)*',
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index b26c1f6..c636e87 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -92,3 +92,5 @@ export function unescapeStr(str: string) {
 export const isItBetween = (num: number, arr: number[]) => {
   return num >= arr[0] && num <= arr[1];
 };
+
+export const resetUrl = () => (window.location.href = window.location.origin);
diff --git a/client/packages/rtc-web/src/views/chat/chat-room.vue b/client/packages/rtc-web/src/views/chat/chat-room.vue
index 5aa5f54..eca8a64 100644
--- a/client/packages/rtc-web/src/views/chat/chat-room.vue
+++ b/client/packages/rtc-web/src/views/chat/chat-room.vue
@@ -2,7 +2,7 @@
 import { ChatContent, ChatRoomUser, ChatInput } from '@/components/chat-room';
 import MenuAction from '@/components/menu-action.vue';
 import { ChatInputAction } from '@/config';
-import { useSwitchMember } from '@/views/chat/hooks/useSwitchMember';
+import { useSwitchMember } from '@/hooks';
 import { useGetRoomInfo } from '@/hooks/useRoom';
 import { useChat } from './hooks/useChat';
 import { escapeStr } from '@/utils';
diff --git a/client/packages/rtc-web/src/views/chat/chat.vue b/client/packages/rtc-web/src/views/chat/chat.vue
index c6b78e7..4c6e7e4 100644
--- a/client/packages/rtc-web/src/views/chat/chat.vue
+++ b/client/packages/rtc-web/src/views/chat/chat.vue
@@ -6,7 +6,7 @@ import { BackPreviousLevel, BackTitle } from '@/components/back';
 import ChatRoomCom from './chat-room.vue';
 import MenuAction from '@/components/menu-action.vue';
 import { ChatAction } from '@/config';
-import { useSwitchMember } from './hooks/useSwitchMember';
+import { useSwitchMember } from '@/hooks';
 
 defineOptions({
   name: 'ChatView',
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
new file mode 100644
index 0000000..150d5b1
--- /dev/null
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -0,0 +1,51 @@
+import { useUserMedia, useDevicesList } from '@vueuse/core';
+import { ref, watchEffect } from 'vue';
+
+export const useVideoShare = () => {
+  const currentCamera = ref<string>();
+
+  const { videoInputs: cameras, devices } = useDevicesList({
+    requestPermissions: true,
+    onUpdated() {
+      if (!cameras.value.find((i) => i.deviceId === currentCamera.value))
+        currentCamera.value = cameras.value[0]?.deviceId;
+    },
+  });
+
+  const video = ref<HTMLVideoElement>();
+
+  const { stream, enabled } = useUserMedia({
+    constraints: {
+      audio: true,
+      video: {
+        deviceId: currentCamera.value, // 前后置
+        facingMode: 'user',
+        // 码率
+        frameRate: {
+          ideal: 30,
+          max: 60,
+        },
+      },
+    },
+  });
+
+  watchEffect(() => {
+    if (video.value) {
+      console.log(stream.value);
+      video.value.srcObject = stream.value!;
+    }
+  });
+
+  watchEffect(() => {
+    // console.log(devices.value);
+    console.log(cameras.value, enabled.value);
+    if (cameras.value.length) {
+      currentCamera.value = cameras.value[0].deviceId;
+    }
+  });
+
+  return {
+    enabled,
+    video,
+  };
+};
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
new file mode 100644
index 0000000..409a86f
--- /dev/null
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { VideoControlMenuAction } from '@/config';
+import { Modal } from '@/components/base';
+
+import MenuAction from '@/components/menu-action.vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+defineOptions({
+  name: 'VideoControlMenu',
+});
+
+const router = useRouter();
+const modalVisible = ref(false);
+
+const emits = defineEmits(['controlMenuChange']);
+
+const menuAction = ref(VideoControlMenuAction);
+
+const activeMenu = ref<Set<string>>(new Set());
+
+const useActiveMenu = (name: string) => {
+  if (activeMenu.value.has(name)) {
+    activeMenu.value.delete(name);
+  } else {
+    activeMenu.value.add(name);
+  }
+  emits('controlMenuChange', Array.from(activeMenu.value));
+};
+
+const handleClickIcon = (name: string) => {
+  useActiveMenu(name);
+  const menuItem = menuAction.value.find((item) => item.name === name);
+  if (activeMenu.value.has(menuItem?.name || '')) {
+    menuItem!.color = '#2F54EB';
+  } else {
+    menuItem!.color = '#707070';
+  }
+
+  modalVisible.value = activeMenu.value.has('hang-up');
+};
+
+const confirmExit = () => {
+  router.replace({
+    path: '/',
+    query: {
+      showSiderbar: 1,
+    },
+  });
+};
+
+const closeModal = () => {
+  activeMenu.value.delete('hang-up');
+  modalVisible.value = false;
+};
+</script>
+
+<template>
+  <div class="video-control-menu ml-[50%] flex translate-x-[-50%]">
+    <div class="control-camera flex">
+      <button class="btn-circle btn" @click="useActiveMenu('audio')">
+        <svg-icon
+          name="audio"
+          :color="activeMenu.has('audio') ? '#2F54EB' : '#707070'"
+          class="h-6 w-6"
+        />
+      </button>
+      <div class="dropdown-top dropdown-end dropdown">
+        <label tabindex="0" class="cursor-pointer">
+          <svg-icon name="up" class="h-4 w-4" color="#707070" />
+        </label>
+        <ul
+          tabindex="0"
+          class="dropdown-content menu rounded-box z-[1] bg-base-100 shadow"
+        >
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <MenuAction
+      :menu-action="menuAction"
+      :gap="8"
+      @click-icon="handleClickIcon"
+    />
+  </div>
+
+  <Modal v-model:visible="modalVisible" :modal="false">
+    <template #content> 确定要结束通话吗？ </template>
+    <template #action>
+      <div class="flex justify-end">
+        <button class="btn-neutral btn mr-4" @click.prevent="closeModal">
+          取消
+        </button>
+        <button class="btn-info btn" @click.prevent="confirmExit">确定</button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/client/packages/rtc-web/src/views/video/video-control.vue b/client/packages/rtc-web/src/views/video/video-control.vue
new file mode 100644
index 0000000..7185fc7
--- /dev/null
+++ b/client/packages/rtc-web/src/views/video/video-control.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import MenuAction from '@/components/menu-action.vue';
+import { ref, watch } from 'vue';
+import { VideoMenuAction } from '@/config';
+import { useSwitchMember } from '@/hooks';
+import VideoControlMenu from './video-control-menu.vue';
+
+defineOptions({
+  name: 'VideoControl',
+});
+
+const emits = defineEmits(['controlMenuChange', 'deviceIdChange']);
+
+const chatActionMenu = ref(VideoMenuAction);
+
+const { switchMember, isLgScreen, open } = useSwitchMember();
+
+watch(
+  () => open.value,
+  (v) => {
+    const findv = chatActionMenu.value.find((item) => item.name === 'member');
+    if (findv) {
+      findv.color = v ? '#2F54EB' : undefined;
+    }
+  },
+  { immediate: true }
+);
+
+const handleClickIcon = (name: string) => {
+  if (name === 'member' && !isLgScreen.value) {
+    switchMember();
+  }
+};
+
+const controlMenuChange = (active: string[]) =>
+  emits('controlMenuChange', active);
+</script>
+
+<template>
+  <div class="flex items-center justify-between px-4 py-4">
+    <VideoControlMenu @control-menu-change="controlMenuChange" />
+    <MenuAction :menu-action="chatActionMenu" @click-icon="handleClickIcon" />
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
new file mode 100644
index 0000000..ab296db
--- /dev/null
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { useSwitchSiderbar, useSwitchMember } from '@/hooks';
+import { onMounted } from 'vue';
+import { useVideoShare } from './hooks/useVideoCall';
+import VideoControl from './video-control.vue';
+
+defineOptions({
+  name: 'VideoRoom',
+});
+
+const { showSiderbar } = useSwitchSiderbar();
+const { open } = useSwitchMember();
+
+const { video, enabled } = useVideoShare();
+
+onMounted(() => {
+  showSiderbar.value = 0;
+});
+
+const handleMenuChange = (active: string[]) => {
+  console.log(active);
+  enabled.value = active.includes('camera');
+};
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="flex flex-1 flex-col overflow-hidden">
+      <video
+        id="video-call"
+        ref="video"
+        class="flex-1"
+        playsinline
+        controls
+        autoplay
+      ></video>
+      <VideoControl @control-menu-change="handleMenuChange" />
+    </div>
+
+    <div v-show="open" class="w-[400px]">user 列表</div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
new file mode 100644
index 0000000..befe278
--- /dev/null
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useRoomConnect, useCreateRoom } from '@/hooks/useRoom';
+import { useRouter } from 'vue-router';
+import { BackPreviousLevel, BackTitle } from '@/components/back';
+import VideoRoom from './video-room.vue';
+import { useNow, useDateFormat } from '@vueuse/core';
+
+defineOptions({
+  name: 'VideoView',
+});
+
+const router = useRouter();
+
+const { roomId } = useCreateRoom();
+
+useRoomConnect();
+
+const handleBackLevel = () => router.replace('/');
+
+const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <BackPreviousLevel
+      class="py-2 shadow-md dark:shadow-sm dark:shadow-neutral-600"
+      @back="handleBackLevel"
+    >
+      <BackTitle svg-name="chat" class="flex-1 justify-between">
+        <div class="cursor-pointer">
+          {{ roomId }}
+        </div>
+      </BackTitle>
+      <div class="time pr-4 font-bold">{{ formatted }}</div>
+    </BackPreviousLevel>
+
+    <div class="min-h-0 flex-1">
+      <VideoRoom />
+    </div>
+  </div>
+</template>

From 948178f9e3530773c1cfbe7933238c8afa0f0116 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 9 Aug 2023 18:53:07 +0800
Subject: [PATCH 12/20] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95=E6=91=84?=
 =?UTF-8?q?=E5=83=8F=E5=A4=B4=E3=80=81audio=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rtc-web/src/components/base/dropdown.vue  |  34 ++++++
 .../rtc-web/src/components/base/index.ts      |   1 +
 .../src/components/list/select-list.vue       |  40 +++++++
 .../src/views/video/hooks/useVideoCall.ts     |  87 ++++++++++++---
 .../src/views/video/video-control-menu.vue    | 103 +++++++++++++++---
 .../rtc-web/src/views/video/video-control.vue |   8 +-
 .../rtc-web/src/views/video/video-room.vue    |  29 ++++-
 7 files changed, 261 insertions(+), 41 deletions(-)
 create mode 100644 client/packages/rtc-web/src/components/base/dropdown.vue
 create mode 100644 client/packages/rtc-web/src/components/list/select-list.vue

diff --git a/client/packages/rtc-web/src/components/base/dropdown.vue b/client/packages/rtc-web/src/components/base/dropdown.vue
new file mode 100644
index 0000000..4c5f3e5
--- /dev/null
+++ b/client/packages/rtc-web/src/components/base/dropdown.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+import { PropType } from 'vue';
+
+defineOptions({
+  name: 'DropDown',
+});
+
+const props = defineProps({
+  visible: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+});
+
+const emits = defineEmits(['update:visible']);
+
+const visibleVm = useVModel(props, 'visible', emits);
+</script>
+
+<template>
+  <div class="dropdown-top dropdown-end dropdown">
+    <label tabindex="0">
+      <slot></slot>
+    </label>
+    <div
+      v-if="visibleVm"
+      tabindex="0"
+      class="dropdown-content menu rounded-box z-[1] bg-base-100 shadow"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/base/index.ts b/client/packages/rtc-web/src/components/base/index.ts
index 5637d61..1828bc0 100644
--- a/client/packages/rtc-web/src/components/base/index.ts
+++ b/client/packages/rtc-web/src/components/base/index.ts
@@ -1,3 +1,4 @@
 export { default as SvgIcon } from './svg-icon.vue';
 export { default as NavIcons } from './nav-icons.vue';
 export { default as Modal } from './modal.vue';
+export { default as Dropdown } from './dropdown.vue';
diff --git a/client/packages/rtc-web/src/components/list/select-list.vue b/client/packages/rtc-web/src/components/list/select-list.vue
new file mode 100644
index 0000000..ac1605b
--- /dev/null
+++ b/client/packages/rtc-web/src/components/list/select-list.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup generic="T">
+defineOptions({
+  name: 'SelectList',
+});
+
+type SelectListPropsType<L> = {
+  list: L[];
+  uniKey?: string;
+  title?: string;
+};
+
+const emits = defineEmits(['selected']);
+
+const props = withDefaults(defineProps<SelectListPropsType<T>>(), {
+  list: () => [] as T[],
+  uniKey: '',
+  title: '',
+});
+
+const handleSelected = (item: any) => {
+  emits('selected', item);
+};
+</script>
+
+<template>
+  <div class="flex flex-col pb-1">
+    <div v-if="props.title" class="list-title select-none px-2 text-slate-500">
+      {{ props.title }}
+    </div>
+    <ul class="flex flex-col">
+      <li
+        v-for="(item, index) in props.list"
+        :key="props.uniKey ? (item as any)[props.uniKey] : index"
+        @click="handleSelected(item)"
+      >
+        <slot :item="item"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 150d5b1..bdcb1d3 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,10 +1,15 @@
 import { useUserMedia, useDevicesList } from '@vueuse/core';
-import { ref, watchEffect } from 'vue';
+import { Ref, computed, nextTick, onMounted, ref, watchEffect } from 'vue';
 
-export const useVideoShare = () => {
+export type VideoShareOption = {
+  audio: Ref<MediaDeviceInfo | undefined>;
+};
+
+export const useVideoShare = (option: VideoShareOption) => {
+  const { audio: audioRef } = option;
   const currentCamera = ref<string>();
 
-  const { videoInputs: cameras, devices } = useDevicesList({
+  const { videoInputs: cameras } = useDevicesList({
     requestPermissions: true,
     onUpdated() {
       if (!cameras.value.find((i) => i.deviceId === currentCamera.value))
@@ -14,38 +19,84 @@ export const useVideoShare = () => {
 
   const video = ref<HTMLVideoElement>();
 
+  const switchTrackEnable = (type: 'video' | 'audio', flag: boolean) => {
+    if (stream.value) {
+      if (type === 'audio') {
+        const audioStream = stream.value.getAudioTracks();
+        if (audioStream?.length) {
+          audioStream[0].enabled = flag;
+        }
+      }
+      if (type === 'video') {
+        const videoStream = stream.value.getVideoTracks();
+        if (videoStream?.length) {
+          videoStream[0].enabled = flag;
+        }
+      }
+    }
+  };
+
+  const audioEnabled = computed(() => {
+    return stream.value?.getAudioTracks()[0].enabled;
+  });
+
+  const videoEnabled = computed(() => {
+    return stream.value?.getVideoTracks()[0].enabled;
+  });
+
+  const audioDevice = computed(() => {
+    return audioRef.value ? { deviceId: audioRef.value.deviceId } : true;
+  });
+
+  const stop = () => {
+    enabled.value = false;
+  };
+
   const { stream, enabled } = useUserMedia({
-    constraints: {
-      audio: true,
-      video: {
-        deviceId: currentCamera.value, // 前后置
-        facingMode: 'user',
-        // 码率
-        frameRate: {
-          ideal: 30,
-          max: 60,
+    constraints: computed(() => {
+      return {
+        audio: audioDevice.value,
+        video: {
+          deviceId: currentCamera.value, // 前后置
+          facingMode: 'user',
+          // 码率
+          frameRate: {
+            ideal: 30,
+            max: 60,
+          },
         },
-      },
-    },
+      };
+    }),
   });
 
+  const setSinkId = (sinkId: string) => {
+    (video.value! as any).setSinkId(sinkId);
+  };
+
   watchEffect(() => {
     if (video.value) {
-      console.log(stream.value);
       video.value.srcObject = stream.value!;
+      switchTrackEnable('audio', false);
+      switchTrackEnable('video', false);
     }
   });
 
   watchEffect(() => {
-    // console.log(devices.value);
-    console.log(cameras.value, enabled.value);
     if (cameras.value.length) {
       currentCamera.value = cameras.value[0].deviceId;
     }
   });
 
+  onMounted(() => {
+    enabled.value = true;
+  });
+
   return {
-    enabled,
     video,
+    setSinkId,
+    switchTrackEnable,
+    stop,
+    audioEnabled,
+    videoEnabled,
   };
 };
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
index 409a86f..5702877 100644
--- a/client/packages/rtc-web/src/views/video/video-control-menu.vue
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -5,6 +5,10 @@ import { Modal } from '@/components/base';
 import MenuAction from '@/components/menu-action.vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useDevicesList } from '@vueuse/core';
+import SelectList from '@/components/list/select-list.vue';
+import { Dropdown } from '@/components/base';
+import { watchEffect } from 'vue';
 
 defineOptions({
   name: 'VideoControlMenu',
@@ -13,12 +17,51 @@ defineOptions({
 const router = useRouter();
 const modalVisible = ref(false);
 
-const emits = defineEmits(['controlMenuChange']);
+const emits = defineEmits(['controlMenuChange', 'selectDevice']);
 
 const menuAction = ref(VideoControlMenuAction);
 
 const activeMenu = ref<Set<string>>(new Set());
 
+const { audioInputs, audioOutputs } = useDevicesList();
+
+const audioDropDownVisible = ref(false);
+
+const audioDeviceRef = ref<MediaDeviceInfo[]>([]);
+
+// 麦克风
+const inputStop = watchEffect(() => {
+  if (audioInputs.value.length) {
+    const findDefault = audioInputs.value.find(
+      (item) => item.deviceId === 'default'
+    );
+    if (findDefault) {
+      selectedAudioDevice(findDefault);
+      inputStop();
+    }
+  }
+});
+
+// 扬声器
+const outputStop = watchEffect(() => {
+  if (audioOutputs.value.length) {
+    const findDefault = audioOutputs.value.find(
+      (item) => item.deviceId === 'default'
+    );
+    if (findDefault) {
+      selectedAudioDevice(findDefault);
+      outputStop();
+    }
+  }
+});
+
+const selectedAudioDevice = (device: MediaDeviceInfo) => {
+  if (device.kind === 'audioinput') audioDeviceRef.value[0] = device;
+  if (device.kind === 'audiooutput') audioDeviceRef.value[1] = device;
+  emits('selectDevice', device);
+  audioDropDownVisible.value = false;
+};
+
 const useActiveMenu = (name: string) => {
   if (activeMenu.value.has(name)) {
     activeMenu.value.delete(name);
@@ -65,18 +108,52 @@ const closeModal = () => {
           class="h-6 w-6"
         />
       </button>
-      <div class="dropdown-top dropdown-end dropdown">
-        <label tabindex="0" class="cursor-pointer">
-          <svg-icon name="up" class="h-4 w-4" color="#707070" />
-        </label>
-        <ul
-          tabindex="0"
-          class="dropdown-content menu rounded-box z-[1] bg-base-100 shadow"
-        >
-          <li><a>Item 1</a></li>
-          <li><a>Item 2</a></li>
-        </ul>
-      </div>
+      <Dropdown v-model:visible="audioDropDownVisible">
+        <svg-icon
+          name="up"
+          class="h-4 w-4 cursor-pointer"
+          color="#707070"
+          @click="audioDropDownVisible = true"
+        />
+        <template #content>
+          <div class="panel">
+            <SelectList
+              title="选择麦克风"
+              :list="audioInputs"
+              @selected="selectedAudioDevice"
+            >
+              <template #default="{ item }">
+                <div
+                  :class="[
+                    audioDeviceRef[0].deviceId === item.deviceId
+                      ? 'text-[#2F54EB]'
+                      : '',
+                  ]"
+                >
+                  {{ item.label }}
+                </div>
+              </template>
+            </SelectList>
+            <SelectList
+              title="选择扬声器"
+              :list="audioOutputs"
+              @selected="selectedAudioDevice"
+            >
+              <template #default="{ item }">
+                <div
+                  :class="[
+                    audioDeviceRef[1].deviceId === item.deviceId
+                      ? 'text-[#2F54EB]'
+                      : '',
+                  ]"
+                >
+                  {{ item.label }}
+                </div>
+              </template>
+            </SelectList>
+          </div>
+        </template>
+      </Dropdown>
     </div>
 
     <MenuAction
diff --git a/client/packages/rtc-web/src/views/video/video-control.vue b/client/packages/rtc-web/src/views/video/video-control.vue
index 7185fc7..6b0a6bd 100644
--- a/client/packages/rtc-web/src/views/video/video-control.vue
+++ b/client/packages/rtc-web/src/views/video/video-control.vue
@@ -4,12 +4,13 @@ import { ref, watch } from 'vue';
 import { VideoMenuAction } from '@/config';
 import { useSwitchMember } from '@/hooks';
 import VideoControlMenu from './video-control-menu.vue';
+import { useAttrs } from 'vue';
 
 defineOptions({
   name: 'VideoControl',
 });
 
-const emits = defineEmits(['controlMenuChange', 'deviceIdChange']);
+const attrs = useAttrs();
 
 const chatActionMenu = ref(VideoMenuAction);
 
@@ -31,14 +32,11 @@ const handleClickIcon = (name: string) => {
     switchMember();
   }
 };
-
-const controlMenuChange = (active: string[]) =>
-  emits('controlMenuChange', active);
 </script>
 
 <template>
   <div class="flex items-center justify-between px-4 py-4">
-    <VideoControlMenu @control-menu-change="controlMenuChange" />
+    <VideoControlMenu v-bind="attrs" />
     <MenuAction :menu-action="chatActionMenu" @click-icon="handleClickIcon" />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index ab296db..638b171 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useSwitchSiderbar, useSwitchMember } from '@/hooks';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useVideoShare } from './hooks/useVideoCall';
 import VideoControl from './video-control.vue';
 
@@ -11,15 +11,31 @@ defineOptions({
 const { showSiderbar } = useSwitchSiderbar();
 const { open } = useSwitchMember();
 
-const { video, enabled } = useVideoShare();
+const audioInputDevice = ref<MediaDeviceInfo | undefined>();
+
+const { video, setSinkId, switchTrackEnable } = useVideoShare({
+  audio: audioInputDevice,
+});
 
 onMounted(() => {
   showSiderbar.value = 0;
 });
 
 const handleMenuChange = (active: string[]) => {
-  console.log(active);
-  enabled.value = active.includes('camera');
+  const hasVideo = active.includes('camera');
+  const hasAudio = active.includes('audio');
+  switchTrackEnable('audio', hasAudio);
+  switchTrackEnable('video', hasVideo);
+};
+
+const deviceChange = (device: MediaDeviceInfo) => {
+  if (device.kind === 'audioinput') {
+    audioInputDevice.value = device;
+  }
+
+  if (device.kind === 'audiooutput') {
+    setSinkId(device.deviceId);
+  }
 };
 </script>
 
@@ -34,7 +50,10 @@ const handleMenuChange = (active: string[]) => {
         controls
         autoplay
       ></video>
-      <VideoControl @control-menu-change="handleMenuChange" />
+      <VideoControl
+        @control-menu-change="handleMenuChange"
+        @select-device="deviceChange"
+      />
     </div>
 
     <div v-show="open" class="w-[400px]">user 列表</div>

From 441c847a8f00474465e7b9db774997791d4a8d4b Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Thu, 10 Aug 2023 23:25:07 +0800
Subject: [PATCH 13/20] =?UTF-8?q?feat:=20video=E7=9A=84=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=EF=BC=8C=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/.eslintrc.cjs         |   2 +-
 .../rtc-web/src/components/menu-action.vue    |   9 +-
 .../packages/rtc-web/src/config/constant.ts   |   4 +
 .../src/views/video/hooks/useVideoCall.ts     | 186 ++++++++++++------
 .../src/views/video/video-control-menu.vue    |  89 ++++-----
 .../rtc-web/src/views/video/video-room.vue    |  46 ++++-
 6 files changed, 215 insertions(+), 121 deletions(-)

diff --git a/client/packages/rtc-web/.eslintrc.cjs b/client/packages/rtc-web/.eslintrc.cjs
index d25ee04..6a48d3c 100644
--- a/client/packages/rtc-web/.eslintrc.cjs
+++ b/client/packages/rtc-web/.eslintrc.cjs
@@ -18,7 +18,7 @@ module.exports = {
   },
   plugins: ['vue', '@typescript-eslint', 'prettier'],
   rules: {
-    indent: ['error', 2],
+    indent: ['error', 2, { offsetTernaryExpressions: true }],
     semi: ['error', 'always'],
     'vue/attribute-hyphenation': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
diff --git a/client/packages/rtc-web/src/components/menu-action.vue b/client/packages/rtc-web/src/components/menu-action.vue
index 87ef612..66805d5 100644
--- a/client/packages/rtc-web/src/components/menu-action.vue
+++ b/client/packages/rtc-web/src/components/menu-action.vue
@@ -12,6 +12,7 @@ type PropTypes = {
     color?: string;
     tipDir?: string;
     btn?: boolean;
+    disabled?: boolean;
   }[];
   gap?: number;
 };
@@ -50,12 +51,16 @@ const handleClick = (name: string) => emits('clickIcon', name);
           @click="handleClick(item.name)"
         />
       </emoji-picker>
-      <button v-else-if="item.btn" class="btn-circle btn">
+      <button
+        v-else-if="item.btn"
+        class="btn-circle btn"
+        :disabled="item.disabled"
+        @click="handleClick(item.name)"
+      >
         <svg-icon
           :color="item.color"
           :name="item.name"
           class="h-6 w-6 cursor-pointer"
-          @click="handleClick(item.name)"
         />
       </button>
       <svg-icon
diff --git a/client/packages/rtc-web/src/config/constant.ts b/client/packages/rtc-web/src/config/constant.ts
index d941809..d205a29 100644
--- a/client/packages/rtc-web/src/config/constant.ts
+++ b/client/packages/rtc-web/src/config/constant.ts
@@ -4,6 +4,7 @@ export type MenuActionType = {
   color?: string;
   tipDir?: string;
   btn?: boolean;
+  disabled?: boolean;
 };
 
 export const ChatAction: MenuActionType[] = [
@@ -31,6 +32,7 @@ export const VideoControlMenuAction: MenuActionType[] = [
     color: '#707070',
     tipDir: 'tooltip-top',
     btn: true,
+    disabled: false,
   },
   {
     name: 'mirror-image',
@@ -38,6 +40,7 @@ export const VideoControlMenuAction: MenuActionType[] = [
     color: '#707070',
     tipDir: 'tooltip-top',
     btn: true,
+    disabled: false,
   },
   {
     name: 'hang-up',
@@ -45,5 +48,6 @@ export const VideoControlMenuAction: MenuActionType[] = [
     color: undefined,
     tipDir: 'tooltip-top',
     btn: true,
+    disabled: false,
   },
 ];
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index bdcb1d3..5611803 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,102 +1,174 @@
 import { useUserMedia, useDevicesList } from '@vueuse/core';
-import { Ref, computed, nextTick, onMounted, ref, watchEffect } from 'vue';
+import { Ref, computed, ref, shallowRef, watch, watchEffect } from 'vue';
 
 export type VideoShareOption = {
-  audio: Ref<MediaDeviceInfo | undefined>;
+  audio?: Ref<MediaDeviceInfo | undefined>;
+  speaker?: Ref<string>;
 };
 
-export const useVideoShare = (option: VideoShareOption) => {
-  const { audio: audioRef } = option;
+export const useVideoShare = (option: VideoShareOption = {}) => {
   const currentCamera = ref<string>();
+  const currentAudioInput = ref<string>();
+  const currentAudioOutput = ref<string>();
 
-  const { videoInputs: cameras } = useDevicesList({
+  const audioRef = ref(option.audio);
+  const speakerRef = ref(option.speaker);
+
+  const mediaLoaded = ref(false);
+
+  // 切换 麦克风
+  watch(
+    audioRef,
+    (value) => {
+      currentAudioInput.value = value?.deviceId;
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  // 切换 扬声器
+  watch(
+    speakerRef,
+    (value) => {
+      currentAudioOutput.value = value;
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(currentAudioOutput, (v) => {
+    if (v) {
+      setSinkId(v);
+    }
+  });
+
+  // 收集的错误信息
+  // const errorMsg = ref({
+  //   audio: '',
+  // });
+
+  const {
+    videoInputs: cameras,
+    audioInputs,
+    audioOutputs,
+  } = useDevicesList({
     requestPermissions: true,
     onUpdated() {
+      // 初始化默认 摄像头、扬声器、麦克风
+
       if (!cameras.value.find((i) => i.deviceId === currentCamera.value))
         currentCamera.value = cameras.value[0]?.deviceId;
+
+      if (
+        !audioInputs.value.find((i) => i.deviceId === currentAudioInput.value)
+      )
+        currentAudioInput.value = audioInputs.value[0]?.deviceId;
+
+      if (
+        !audioOutputs.value.find((i) => i.deviceId === currentAudioOutput.value)
+      ) {
+        currentAudioOutput.value = audioOutputs.value[0]?.deviceId;
+      }
     },
   });
 
-  const video = ref<HTMLVideoElement>();
+  const video = shallowRef<HTMLVideoElement>();
+
+  const constraints = computed(() => {
+    const audioDevice = currentAudioInput.value
+      ? { deviceId: currentAudioInput.value }
+      : false;
+
+    const videoDevice = currentCamera.value
+      ? {
+          deviceId: currentCamera.value,
+          facingMode: 'user',
+          frameRate: {
+            ideal: 30,
+            max: 60,
+          },
+        }
+      : false;
+    return {
+      audio: audioDevice,
+      video: videoDevice,
+    };
+  });
+
+  const { stream, enabled, stop, restart } = useUserMedia({
+    constraints,
+  });
+
+  const audioTracks = ref<MediaStreamTrack[]>([]);
+  const videoTracks = ref<MediaStreamTrack[]>([]);
+
+  const audioEnabled = ref(false);
+  const videoEnabled = ref(false);
 
+  // 切换 video、audio 渲染
   const switchTrackEnable = (type: 'video' | 'audio', flag: boolean) => {
     if (stream.value) {
       if (type === 'audio') {
-        const audioStream = stream.value.getAudioTracks();
-        if (audioStream?.length) {
-          audioStream[0].enabled = flag;
+        if (audioTracks.value?.length) {
+          audioEnabled.value = flag;
+          audioTracks.value.forEach((item) => (item.enabled = flag));
         }
       }
       if (type === 'video') {
-        const videoStream = stream.value.getVideoTracks();
-        if (videoStream?.length) {
-          videoStream[0].enabled = flag;
+        if (videoTracks.value?.length) {
+          videoEnabled.value = flag;
+          videoTracks.value.forEach((item) => {
+            item.enabled = flag;
+          });
         }
       }
     }
   };
 
-  const audioEnabled = computed(() => {
-    return stream.value?.getAudioTracks()[0].enabled;
-  });
-
-  const videoEnabled = computed(() => {
-    return stream.value?.getVideoTracks()[0].enabled;
-  });
-
-  const audioDevice = computed(() => {
-    return audioRef.value ? { deviceId: audioRef.value.deviceId } : true;
-  });
-
-  const stop = () => {
-    enabled.value = false;
-  };
-
-  const { stream, enabled } = useUserMedia({
-    constraints: computed(() => {
-      return {
-        audio: audioDevice.value,
-        video: {
-          deviceId: currentCamera.value, // 前后置
-          facingMode: 'user',
-          // 码率
-          frameRate: {
-            ideal: 30,
-            max: 60,
-          },
-        },
-      };
-    }),
-  });
-
   const setSinkId = (sinkId: string) => {
     (video.value! as any).setSinkId(sinkId);
   };
 
-  watchEffect(() => {
-    if (video.value) {
-      video.value.srcObject = stream.value!;
-      switchTrackEnable('audio', false);
-      switchTrackEnable('video', false);
+  // 先静音和关闭视频渲染
+  watch(stream, (v) => {
+    if (v) {
+      if (video.value) {
+        video.value.srcObject = stream.value!;
+        if (stream.value) {
+          audioTracks.value = stream.value.getAudioTracks();
+          videoTracks.value = stream.value.getVideoTracks();
+        }
+        switchTrackEnable('audio', false);
+        switchTrackEnable('video', false);
+        mediaLoaded.value = true;
+      }
     }
   });
 
-  watchEffect(() => {
-    if (cameras.value.length) {
-      currentCamera.value = cameras.value[0].deviceId;
+  // 进入页面先连接
+  const watchEnableStop = watchEffect(() => {
+    if (
+      currentAudioInput.value &&
+      currentCamera.value &&
+      currentAudioOutput.value
+    ) {
+      enabled.value = true;
+      watchEnableStop();
     }
   });
 
-  onMounted(() => {
-    enabled.value = true;
-  });
-
   return {
     video,
     setSinkId,
     switchTrackEnable,
+    restart,
     stop,
     audioEnabled,
     videoEnabled,
+    mediaLoaded,
+    currentAudioInput,
+    currentAudioOutput,
   };
 };
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
index 5702877..b4a2af1 100644
--- a/client/packages/rtc-web/src/views/video/video-control-menu.vue
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -8,18 +8,40 @@ import { useRouter } from 'vue-router';
 import { useDevicesList } from '@vueuse/core';
 import SelectList from '@/components/list/select-list.vue';
 import { Dropdown } from '@/components/base';
-import { watchEffect } from 'vue';
+import { PropType } from 'vue';
+import { computed } from 'vue';
 
 defineOptions({
   name: 'VideoControlMenu',
 });
 
+const props = defineProps({
+  activeControlMenu: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  menuDisabled: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  selectDevice: {
+    type: Object as PropType<Record<'audioInput' | 'audioOutput', string>>,
+    default: () => ({ audioInput: '', audioOutput: '' }),
+  },
+});
+
 const router = useRouter();
 const modalVisible = ref(false);
 
 const emits = defineEmits(['controlMenuChange', 'selectDevice']);
 
-const menuAction = ref(VideoControlMenuAction);
+const menuAction = computed(() => {
+  return VideoControlMenuAction.map((item) => ({
+    ...item,
+    disabled: props.menuDisabled,
+    color: props.activeControlMenu.includes(item.name) ? '#2F54EB' : undefined,
+  }));
+});
 
 const activeMenu = ref<Set<string>>(new Set());
 
@@ -27,60 +49,13 @@ const { audioInputs, audioOutputs } = useDevicesList();
 
 const audioDropDownVisible = ref(false);
 
-const audioDeviceRef = ref<MediaDeviceInfo[]>([]);
-
-// 麦克风
-const inputStop = watchEffect(() => {
-  if (audioInputs.value.length) {
-    const findDefault = audioInputs.value.find(
-      (item) => item.deviceId === 'default'
-    );
-    if (findDefault) {
-      selectedAudioDevice(findDefault);
-      inputStop();
-    }
-  }
-});
-
-// 扬声器
-const outputStop = watchEffect(() => {
-  if (audioOutputs.value.length) {
-    const findDefault = audioOutputs.value.find(
-      (item) => item.deviceId === 'default'
-    );
-    if (findDefault) {
-      selectedAudioDevice(findDefault);
-      outputStop();
-    }
-  }
-});
-
 const selectedAudioDevice = (device: MediaDeviceInfo) => {
-  if (device.kind === 'audioinput') audioDeviceRef.value[0] = device;
-  if (device.kind === 'audiooutput') audioDeviceRef.value[1] = device;
   emits('selectDevice', device);
   audioDropDownVisible.value = false;
 };
 
-const useActiveMenu = (name: string) => {
-  if (activeMenu.value.has(name)) {
-    activeMenu.value.delete(name);
-  } else {
-    activeMenu.value.add(name);
-  }
-  emits('controlMenuChange', Array.from(activeMenu.value));
-};
-
 const handleClickIcon = (name: string) => {
-  useActiveMenu(name);
-  const menuItem = menuAction.value.find((item) => item.name === name);
-  if (activeMenu.value.has(menuItem?.name || '')) {
-    menuItem!.color = '#2F54EB';
-  } else {
-    menuItem!.color = '#707070';
-  }
-
-  modalVisible.value = activeMenu.value.has('hang-up');
+  emits('controlMenuChange', name);
 };
 
 const confirmExit = () => {
@@ -101,10 +76,16 @@ const closeModal = () => {
 <template>
   <div class="video-control-menu ml-[50%] flex translate-x-[-50%]">
     <div class="control-camera flex">
-      <button class="btn-circle btn" @click="useActiveMenu('audio')">
+      <button
+        class="btn-circle btn"
+        :disabled="menuDisabled"
+        @click="handleClickIcon('audio')"
+      >
         <svg-icon
           name="audio"
-          :color="activeMenu.has('audio') ? '#2F54EB' : '#707070'"
+          :color="
+            props.activeControlMenu.includes('audio') ? '#2F54EB' : '#707070'
+          "
           class="h-6 w-6"
         />
       </button>
@@ -125,7 +106,7 @@ const closeModal = () => {
               <template #default="{ item }">
                 <div
                   :class="[
-                    audioDeviceRef[0].deviceId === item.deviceId
+                    props.selectDevice.audioInput === item.deviceId
                       ? 'text-[#2F54EB]'
                       : '',
                   ]"
@@ -142,7 +123,7 @@ const closeModal = () => {
               <template #default="{ item }">
                 <div
                   :class="[
-                    audioDeviceRef[1].deviceId === item.deviceId
+                    props.selectDevice.audioOutput === item.deviceId
                       ? 'text-[#2F54EB]'
                       : '',
                   ]"
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 638b171..9ddae8d 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -3,6 +3,8 @@ import { useSwitchSiderbar, useSwitchMember } from '@/hooks';
 import { onMounted, ref } from 'vue';
 import { useVideoShare } from './hooks/useVideoCall';
 import VideoControl from './video-control.vue';
+import { computed } from 'vue';
+import { watchEffect } from 'vue';
 
 defineOptions({
   name: 'VideoRoom',
@@ -12,20 +14,47 @@ const { showSiderbar } = useSwitchSiderbar();
 const { open } = useSwitchMember();
 
 const audioInputDevice = ref<MediaDeviceInfo | undefined>();
+const speakerRef = ref('');
 
-const { video, setSinkId, switchTrackEnable } = useVideoShare({
+const {
+  video,
+  switchTrackEnable,
+  videoEnabled,
+  audioEnabled,
+  mediaLoaded,
+  currentAudioInput,
+  currentAudioOutput,
+} = useVideoShare({
   audio: audioInputDevice,
+  speaker: speakerRef,
+});
+
+const selectDevice = computed(() => ({
+  audioInput: currentAudioInput.value,
+  audioOutput: currentAudioOutput.value,
+}));
+
+watchEffect(() => {
+  console.log(videoEnabled.value);
+});
+
+const activeControlMenu = computed<string[]>(() => {
+  const arr = [];
+  if (videoEnabled.value) arr.push('camera');
+  if (audioEnabled.value) arr.push('audio');
+  return arr;
 });
 
 onMounted(() => {
   showSiderbar.value = 0;
 });
 
-const handleMenuChange = (active: string[]) => {
-  const hasVideo = active.includes('camera');
-  const hasAudio = active.includes('audio');
-  switchTrackEnable('audio', hasAudio);
-  switchTrackEnable('video', hasVideo);
+const handleMenuChange = (active: string) => {
+  if (active === 'camera' || active === 'audio') {
+    const enabled =
+      active === 'camera' ? videoEnabled.value : audioEnabled.value;
+    switchTrackEnable(active === 'camera' ? 'video' : 'audio', !enabled);
+  }
 };
 
 const deviceChange = (device: MediaDeviceInfo) => {
@@ -34,7 +63,7 @@ const deviceChange = (device: MediaDeviceInfo) => {
   }
 
   if (device.kind === 'audiooutput') {
-    setSinkId(device.deviceId);
+    speakerRef.value = device.deviceId;
   }
 };
 </script>
@@ -51,6 +80,9 @@ const deviceChange = (device: MediaDeviceInfo) => {
         autoplay
       ></video>
       <VideoControl
+        :selectDevice="selectDevice"
+        :menuDisabled="!mediaLoaded"
+        :activeControlMenu="activeControlMenu"
         @control-menu-change="handleMenuChange"
         @select-device="deviceChange"
       />

From 4dce9f3a7656fbd3db647219d57235e879a5f189 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Thu, 10 Aug 2023 23:54:14 +0800
Subject: [PATCH 14/20] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/video/hooks/useVideoCall.ts     | 24 ++++++++++++++++---
 .../rtc-web/src/views/video/video-room.vue    |  6 ++++-
 .../rtc-web/src/views/video/video.vue         |  6 ++---
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 5611803..228ef76 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,5 +1,13 @@
 import { useUserMedia, useDevicesList } from '@vueuse/core';
-import { Ref, computed, ref, shallowRef, watch, watchEffect } from 'vue';
+import {
+  Ref,
+  computed,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+} from 'vue';
 
 export type VideoShareOption = {
   audio?: Ref<MediaDeviceInfo | undefined>;
@@ -89,6 +97,8 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
             ideal: 30,
             max: 60,
           },
+          width: { ideal: 1920 },
+          height: { ideal: 1280 },
         }
       : false;
     return {
@@ -140,8 +150,12 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
           audioTracks.value = stream.value.getAudioTracks();
           videoTracks.value = stream.value.getVideoTracks();
         }
-        switchTrackEnable('audio', false);
-        switchTrackEnable('video', false);
+        if (!videoEnabled.value) {
+          switchTrackEnable('video', false);
+        }
+        if (!audioEnabled.value) {
+          switchTrackEnable('audio', false);
+        }
         mediaLoaded.value = true;
       }
     }
@@ -159,6 +173,10 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     }
   });
 
+  onBeforeUnmount(() => {
+    stop();
+  });
+
   return {
     video,
     setSinkId,
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 9ddae8d..22374e3 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -74,7 +74,11 @@ const deviceChange = (device: MediaDeviceInfo) => {
       <video
         id="video-call"
         ref="video"
-        class="flex-1"
+        style="
+          height: calc(100% - 80px);
+          width: 100%;
+          background-color: #1f1f1f;
+        "
         playsinline
         controls
         autoplay
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
index befe278..3e6046f 100644
--- a/client/packages/rtc-web/src/views/video/video.vue
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -1,21 +1,19 @@
 <script lang="ts" setup>
 import { useRoomConnect, useCreateRoom } from '@/hooks/useRoom';
-import { useRouter } from 'vue-router';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
 import VideoRoom from './video-room.vue';
 import { useNow, useDateFormat } from '@vueuse/core';
+import { resetUrl } from '@/utils';
 
 defineOptions({
   name: 'VideoView',
 });
 
-const router = useRouter();
-
 const { roomId } = useCreateRoom();
 
 useRoomConnect();
 
-const handleBackLevel = () => router.replace('/');
+const handleBackLevel = () => resetUrl();
 
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 </script>

From dbcb5d50cf5a04781019b7096e14be7030048944 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Tue, 15 Aug 2023 00:45:46 +0800
Subject: [PATCH 15/20] =?UTF-8?q?feat:=20=E8=A7=86=E9=A2=91=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E7=9A=84=E8=BF=9E=E6=8E=A5=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../packages/rtc-web/src/config/constant.ts   |  16 +--
 client/packages/rtc-web/src/hooks/useRoom.ts  | 112 +++++++++++++++---
 .../src/views/video/hooks/useVideoCall.ts     |  95 ++++++++++++---
 .../src/views/video/video-control-menu.vue    |  20 +---
 .../rtc-web/src/views/video/video-room.vue    |  41 +++++--
 .../rtc-web/src/views/video/video.vue         |   4 +-
 6 files changed, 215 insertions(+), 73 deletions(-)

diff --git a/client/packages/rtc-web/src/config/constant.ts b/client/packages/rtc-web/src/config/constant.ts
index d205a29..6fef398 100644
--- a/client/packages/rtc-web/src/config/constant.ts
+++ b/client/packages/rtc-web/src/config/constant.ts
@@ -34,14 +34,14 @@ export const VideoControlMenuAction: MenuActionType[] = [
     btn: true,
     disabled: false,
   },
-  {
-    name: 'mirror-image',
-    tip: '开启镜像',
-    color: '#707070',
-    tipDir: 'tooltip-top',
-    btn: true,
-    disabled: false,
-  },
+  // {
+  //   name: 'mirror-image',
+  //   tip: '开启镜像',
+  //   color: '#707070',
+  //   tipDir: 'tooltip-top',
+  //   btn: true,
+  //   disabled: false,
+  // },
   {
     name: 'hang-up',
     tip: '结束通话',
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 6027f9c..59e5e50 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -40,6 +40,16 @@ export type OwnerInfo = {
   owner: boolean;
 };
 
+export type ConnectOption = {
+  roomJoined?: (...args: any[]) => Promise<void>;
+  roomCreated?: (data: any) => Promise<void>;
+  onAddRtcPeer?: (id: string, pc: any) => Promise<void>;
+  onConnectComplete?: (...args: any[]) => void;
+  onBeforeCreateOffer?: (...args: any[]) => Promise<void>;
+  onBeforeCreateAnswer?: (...args: any[]) => Promise<void>;
+  onTrack?: (...args: any[]) => void;
+};
+
 export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
   const realValue = resolveRef(value);
   const roomIdReg = /^[a-zA-Z0-9]{4,32}$/;
@@ -101,13 +111,15 @@ export const useCreateRoom = (type: 'password' | 'video' = 'password') => {
   };
 };
 
-export const useRoomConnect = () => {
+export const useRoomConnect = (option: ConnectOption = {}) => {
   const roomInfo = useGetRoomInfo();
 
   const { members, selfInfo } = roomInfo;
   const rtcConnects = new Map<string, RTCPeerConnection>();
+  const dataChanelMap = new Map<string, RTCDataChannel>();
   const initData = inject(InitDataKey)!;
   const socketRef = shallowRef();
+  const completed = ref(false);
 
   watchArray(
     () => members.value,
@@ -116,8 +128,10 @@ export const useRoomConnect = () => {
 
       // 处理 exit
       if (removed.length) {
-        removed.forEach((peer) => {
+        removed.forEach(async (peer) => {
           if (peer.id) {
+            const rtcConnect = await getRtcConnect(peer.id);
+            rtcConnect.close();
             rtcConnects.delete(peer.id);
           }
         });
@@ -125,32 +139,79 @@ export const useRoomConnect = () => {
     }
   );
 
-  const createRtcConnect = (id: string) => {
-    const pc = new RTCPeerConnection(initData.value.config);
+  const createRtcConnect = async (id: string) => {
+    // const pc = new RTCPeerConnection(initData.value.config);
+    const pc = new RTCPeerConnection();
+    pc.onicecandidate = (event) => {
+      if (event.candidate != null) {
+        const message = {
+          from: selfInfo.value.socketId,
+          to: id,
+          room: selfInfo.value.roomId,
+          sdpMid: event.candidate.sdpMid,
+          sdpMLineIndex: event.candidate.sdpMLineIndex,
+          sdp: event.candidate.candidate,
+        };
+        socketRef.value.emit('candidate', message);
+      }
+    };
+
+    const dataChanel = pc.createDataChannel('datachanel');
+    dataChanelMap.set(id, dataChanel);
+
+    dataChanel.onopen = () => {
+      // dataChanel.send('aaa');
+    };
+
+    pc.ondatachannel = (e) => {
+      const chanel = e.channel;
+      if (chanel.label === 'datachanel') {
+        chanel.onmessage = (e: any) => {
+          // console.log('接受', e.data);
+        };
+      }
+    };
+
+    pc.onconnectionstatechange = (e) => {
+      if (pc.connectionState === 'connected') {
+        // console.log('完成');
+        completed.value = true;
+      }
+    };
 
-    pc.onicecandidate = () => {
-      // console.log('on candidate', e);
+    pc.ontrack = (e) => {
+      option?.onTrack?.(e, id);
     };
 
     rtcConnects.set(id, pc);
+    await option.onAddRtcPeer?.(id, pc);
 
     return pc;
   };
 
-  const getRtcConnect = (id: string) => {
-    return rtcConnects.get(id) || createRtcConnect(id);
+  const getRtcConnect = async (id: string) => {
+    return rtcConnects.get(id) || (await createRtcConnect(id));
+  };
+
+  const roomCreated = async (data: any) => {
+    await option?.roomCreated?.(data);
   };
 
   const roomJoined = async (data: any) => {
-    createOffer(getRtcConnect(data.id), data);
+    const peer = await getRtcConnect(data.id);
+
+    await option?.roomJoined?.(data.id, peer);
+    createOffer(peer, data);
   };
 
   /**
    * @description 这里的 createOffer
    */
   const createOffer = async (pc: RTCPeerConnection, peer: any) => {
+    await option?.onBeforeCreateOffer?.(peer.id, pc);
     const offer = await pc.createOffer(initData.value.options);
     await pc.setLocalDescription(offer);
+    console.log('create offer - send');
     socketRef.value.emit(SocketEventName.RoomOffer, {
       from: selfInfo.value.socketId,
       to: peer.id,
@@ -163,13 +224,14 @@ export const useRoomConnect = () => {
    * @description offer 监听事件
    */
   const roomOffer = async (data: any) => {
-    const pc = getRtcConnect(data.from);
+    const pc = await getRtcConnect(data.from);
     await pc.setRemoteDescription(
       new RTCSessionDescription({ type: 'offer', sdp: data.sdp })
     );
+    await option?.onBeforeCreateAnswer?.(data.from, pc);
     const answer = await pc.createAnswer(initData.value.options);
     await pc.setLocalDescription(answer);
-
+    console.log('receive offer - send answer');
     socketRef.value.emit(SocketEventName.RoomAnswer, {
       from: selfInfo.value.socketId,
       to: data.from,
@@ -182,25 +244,37 @@ export const useRoomConnect = () => {
    * @description answer 监听事件
    */
   const roomAnswer = async (data: any) => {
-    const pc = getRtcConnect(data.from);
+    const pc = await getRtcConnect(data.from);
+    console.log('receive answer');
     await pc.setRemoteDescription(
       new RTCSessionDescription({ type: 'answer', sdp: data.sdp })
     );
   };
-  const roomCandidate = () => {
-    //
+  const roomCandidate = async (data: any) => {
+    const pc = await getRtcConnect(data.from);
+    const rtcIceCandidate = new RTCIceCandidate({
+      candidate: data.sdp,
+      sdpMid: data.sdpMid,
+      sdpMLineIndex: data.sdpMLineIndex,
+    });
+    await pc.addIceCandidate(rtcIceCandidate);
   };
 
   const handleRoomConnect = (socket: any) => {
     socketRef.value = socket;
-    socket.on(SocketEventName.RoomJoin, roomJoined);
-    socket.on(SocketEventName.RoomOffer, roomOffer);
-    socket.on(SocketEventName.RoomAnswer, roomAnswer);
-    socket.on(SocketEventName.RoomCandidate, roomCandidate);
+    startConnect();
+  };
+
+  const startConnect = () => {
+    socketRef.value.on(SocketEventName.RoomCreated, roomCreated);
+    socketRef.value.on(SocketEventName.RoomJoin, roomJoined);
+    socketRef.value.on(SocketEventName.RoomOffer, roomOffer);
+    socketRef.value.on(SocketEventName.RoomAnswer, roomAnswer);
+    socketRef.value.on(SocketEventName.RoomCandidate, roomCandidate);
   };
   useSocket(handleRoomConnect);
 
-  return { ...roomInfo };
+  return { ...roomInfo, rtcConnects, dataChanelMap, completed, startConnect };
 };
 
 // 获取房间的一些信息，例如 peer 等信息
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 228ef76..52514d3 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,3 +1,4 @@
+import { useRoomConnect } from '@/hooks';
 import { useUserMedia, useDevicesList } from '@vueuse/core';
 import {
   Ref,
@@ -10,11 +11,14 @@ import {
 } from 'vue';
 
 export type VideoShareOption = {
+  immeately?: boolean;
   audio?: Ref<MediaDeviceInfo | undefined>;
   speaker?: Ref<string>;
 };
 
-export const useVideoShare = (option: VideoShareOption = {}) => {
+export const useMediaSetting = (
+  option: VideoShareOption = { immeately: true }
+) => {
   const currentCamera = ref<string>();
   const currentAudioInput = ref<string>();
   const currentAudioOutput = ref<string>();
@@ -107,15 +111,15 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     };
   });
 
-  const { stream, enabled, stop, restart } = useUserMedia({
+  const { stream, stop, restart, start } = useUserMedia({
     constraints,
   });
 
   const audioTracks = ref<MediaStreamTrack[]>([]);
   const videoTracks = ref<MediaStreamTrack[]>([]);
 
-  const audioEnabled = ref(false);
-  const videoEnabled = ref(false);
+  const audioEnabled = ref(true);
+  const videoEnabled = ref(true);
 
   // 切换 video、audio 渲染
   const switchTrackEnable = (type: 'video' | 'audio', flag: boolean) => {
@@ -151,10 +155,10 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
           videoTracks.value = stream.value.getVideoTracks();
         }
         if (!videoEnabled.value) {
-          switchTrackEnable('video', false);
+          // switchTrackEnable('video', false);
         }
         if (!audioEnabled.value) {
-          switchTrackEnable('audio', false);
+          // switchTrackEnable('audio', false);
         }
         mediaLoaded.value = true;
       }
@@ -162,22 +166,33 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
   });
 
   // 进入页面先连接
-  const watchEnableStop = watchEffect(() => {
-    if (
-      currentAudioInput.value &&
-      currentCamera.value &&
-      currentAudioOutput.value
-    ) {
-      enabled.value = true;
-      watchEnableStop();
-    }
-  });
+  const startGetMedia = () => {
+    return new Promise<MediaStream | undefined>((resolve) => {
+      const watchEnableStop = watchEffect(async () => {
+        if (
+          currentAudioInput.value &&
+          currentCamera.value &&
+          currentAudioOutput.value
+        ) {
+          const stream = await start();
+          watchEnableStop();
+          resolve(stream);
+        }
+      });
+    });
+  };
+
+  if (option.immeately) {
+    startGetMedia();
+  }
 
   onBeforeUnmount(() => {
     stop();
   });
 
   return {
+    startGetMedia,
+    stream,
     video,
     setSinkId,
     switchTrackEnable,
@@ -190,3 +205,51 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     currentAudioOutput,
   };
 };
+
+export const useMediaConnect = (
+  connect: { onTrack?: (track: MediaStreamTrack, id: string) => void } = {},
+  ...args: Parameters<typeof useMediaSetting>
+) => {
+  const { startGetMedia, ...mediaResult } = useMediaSetting(...args);
+
+  let stream: MediaStream | undefined = undefined;
+  useRoomConnect({
+    async roomCreated() {
+      console.log('ccccreated');
+      stream = await startGetMedia();
+    },
+    roomJoined: async (_, pc) => {
+      let innerStream = stream;
+      stream = undefined;
+      if (!innerStream) {
+        innerStream = await startGetMedia();
+        console.log('jjjjjjoined');
+      }
+      if (pc && innerStream) {
+        innerStream.getTracks().forEach((track) => {
+          pc.addTrack(track, innerStream);
+        });
+      }
+    },
+    onBeforeCreateAnswer: async (_, pc) => {
+      let innerStream = stream;
+      stream = undefined;
+      if (!innerStream) {
+        innerStream = await startGetMedia();
+      }
+      if (pc && innerStream) {
+        innerStream.getTracks().forEach((track) => {
+          pc.addTrack(track, innerStream);
+        });
+      }
+    },
+    onTrack(e: any, id: string) {
+      console.log(e);
+      if (e.track.kind === 'video') {
+        connect.onTrack?.(e.streams[0], id);
+      }
+    },
+  });
+
+  return { ...mediaResult };
+};
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
index b4a2af1..a18df45 100644
--- a/client/packages/rtc-web/src/views/video/video-control-menu.vue
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -4,12 +4,12 @@ import { Modal } from '@/components/base';
 
 import MenuAction from '@/components/menu-action.vue';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { useDevicesList } from '@vueuse/core';
 import SelectList from '@/components/list/select-list.vue';
 import { Dropdown } from '@/components/base';
 import { PropType } from 'vue';
 import { computed } from 'vue';
+import { resetUrl } from '@/utils';
 
 defineOptions({
   name: 'VideoControlMenu',
@@ -30,7 +30,6 @@ const props = defineProps({
   },
 });
 
-const router = useRouter();
 const modalVisible = ref(false);
 
 const emits = defineEmits(['controlMenuChange', 'selectDevice']);
@@ -43,8 +42,6 @@ const menuAction = computed(() => {
   }));
 });
 
-const activeMenu = ref<Set<string>>(new Set());
-
 const { audioInputs, audioOutputs } = useDevicesList();
 
 const audioDropDownVisible = ref(false);
@@ -55,20 +52,13 @@ const selectedAudioDevice = (device: MediaDeviceInfo) => {
 };
 
 const handleClickIcon = (name: string) => {
+  if (name === 'hang-up') {
+    modalVisible.value = true;
+  }
   emits('controlMenuChange', name);
 };
 
-const confirmExit = () => {
-  router.replace({
-    path: '/',
-    query: {
-      showSiderbar: 1,
-    },
-  });
-};
-
 const closeModal = () => {
-  activeMenu.value.delete('hang-up');
   modalVisible.value = false;
 };
 </script>
@@ -151,7 +141,7 @@ const closeModal = () => {
         <button class="btn-neutral btn mr-4" @click.prevent="closeModal">
           取消
         </button>
-        <button class="btn-info btn" @click.prevent="confirmExit">确定</button>
+        <button class="btn-info btn" @click.prevent="resetUrl()">确定</button>
       </div>
     </template>
   </Modal>
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 22374e3..98ee9bd 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { useSwitchSiderbar, useSwitchMember } from '@/hooks';
 import { onMounted, ref } from 'vue';
-import { useVideoShare } from './hooks/useVideoCall';
+import { useMediaConnect } from './hooks/useVideoCall';
 import VideoControl from './video-control.vue';
 import { computed } from 'vue';
-import { watchEffect } from 'vue';
 
 defineOptions({
   name: 'VideoRoom',
@@ -16,6 +15,8 @@ const { open } = useSwitchMember();
 const audioInputDevice = ref<MediaDeviceInfo | undefined>();
 const speakerRef = ref('');
 
+const otherVideo = ref();
+
 const {
   video,
   switchTrackEnable,
@@ -24,20 +25,35 @@ const {
   mediaLoaded,
   currentAudioInput,
   currentAudioOutput,
-} = useVideoShare({
-  audio: audioInputDevice,
-  speaker: speakerRef,
-});
+} = useMediaConnect(
+  {
+    onTrack(track, id) {
+      console.log('id', id);
+      otherVideo.value.srcObject = track;
+      // otherVideo.value?.play?.();
+    },
+  },
+  {
+    immeately: false,
+    audio: audioInputDevice,
+    speaker: speakerRef,
+  }
+);
+
+console.log('执行');
+
+const handleClick = () => {
+  // const aa = members.value[1]?.id;
+  // const peer = dataChanelMap.get(aa!);
+  // console.log('click', peer, dataChanelMap);
+  // peer?.send('asdas');
+};
 
 const selectDevice = computed(() => ({
   audioInput: currentAudioInput.value,
   audioOutput: currentAudioOutput.value,
 }));
 
-watchEffect(() => {
-  console.log(videoEnabled.value);
-});
-
 const activeControlMenu = computed<string[]>(() => {
   const arr = [];
   if (videoEnabled.value) arr.push('camera');
@@ -80,7 +96,6 @@ const deviceChange = (device: MediaDeviceInfo) => {
           background-color: #1f1f1f;
         "
         playsinline
-        controls
         autoplay
       ></video>
       <VideoControl
@@ -92,6 +107,8 @@ const deviceChange = (device: MediaDeviceInfo) => {
       />
     </div>
 
-    <div v-show="open" class="w-[400px]">user 列表</div>
+    <div v-show="open" class="w-[400px]" @click="handleClick">
+      <video ref="otherVideo" playsinline autoplay />
+    </div>
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
index 3e6046f..afbfcef 100644
--- a/client/packages/rtc-web/src/views/video/video.vue
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRoomConnect, useCreateRoom } from '@/hooks/useRoom';
+import { useCreateRoom } from '@/hooks/useRoom';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
 import VideoRoom from './video-room.vue';
 import { useNow, useDateFormat } from '@vueuse/core';
@@ -11,8 +11,6 @@ defineOptions({
 
 const { roomId } = useCreateRoom();
 
-useRoomConnect();
-
 const handleBackLevel = () => resetUrl();
 
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');

From f2a43ced325c1ed953af942b0d30cffd8b38d8ee Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Tue, 29 Aug 2023 18:25:27 +0800
Subject: [PATCH 16/20] feat: https

---
 client/packages/rtc-web/src/hooks/useRoom.ts        |  4 ++--
 .../rtc-web/src/views/video/hooks/useVideoCall.ts   |  5 +++--
 client/packages/rtc-web/vite.config.ts              | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 59e5e50..07f0d0b 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -166,13 +166,13 @@ export const useRoomConnect = (option: ConnectOption = {}) => {
     pc.ondatachannel = (e) => {
       const chanel = e.channel;
       if (chanel.label === 'datachanel') {
-        chanel.onmessage = (e: any) => {
+        chanel.onmessage = () => {
           // console.log('接受', e.data);
         };
       }
     };
 
-    pc.onconnectionstatechange = (e) => {
+    pc.onconnectionstatechange = () => {
       if (pc.connectionState === 'connected') {
         // console.log('完成');
         completed.value = true;
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 52514d3..4b822c4 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -111,7 +111,7 @@ export const useMediaSetting = (
     };
   });
 
-  const { stream, stop, restart, start } = useUserMedia({
+  const { stream, stop, restart, start, isSupported } = useUserMedia({
     constraints,
   });
 
@@ -167,6 +167,7 @@ export const useMediaSetting = (
 
   // 进入页面先连接
   const startGetMedia = () => {
+    console.log(isSupported.value);
     return new Promise<MediaStream | undefined>((resolve) => {
       const watchEnableStop = watchEffect(async () => {
         if (
@@ -217,13 +218,13 @@ export const useMediaConnect = (
     async roomCreated() {
       console.log('ccccreated');
       stream = await startGetMedia();
+      console.log(stream);
     },
     roomJoined: async (_, pc) => {
       let innerStream = stream;
       stream = undefined;
       if (!innerStream) {
         innerStream = await startGetMedia();
-        console.log('jjjjjjoined');
       }
       if (pc && innerStream) {
         innerStream.getTracks().forEach((track) => {
diff --git a/client/packages/rtc-web/vite.config.ts b/client/packages/rtc-web/vite.config.ts
index dedba30..c337c8d 100644
--- a/client/packages/rtc-web/vite.config.ts
+++ b/client/packages/rtc-web/vite.config.ts
@@ -4,6 +4,8 @@ import eslintPlugin from 'vite-plugin-eslint';
 import { resolve } from 'path';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
+import fs from 'fs';
+
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 
 const pathResolve = (path: string) => resolve(__dirname, path);
@@ -25,11 +27,16 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/api': {
-        target: 'http://localhost:9092/api',
+        target: 'https://192.168.1.11:9092/api',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
+        secure: false,
       },
     },
+    https: {
+      key: fs.readFileSync('./cert/localhost+1-key.pem'),
+      cert: fs.readFileSync('./cert/localhost+1.pem'),
+    },
   },
   plugins: [
     vue(),
@@ -40,5 +47,9 @@ export default defineConfig({
       // 指定symbolId格式
       symbolId: 'icon-[dir]-[name]',
     }),
+    // basicSsl(),
+    // mkcert({
+    //   source: 'coding',
+    // }),
   ],
 });

From 0b88edc03e05fca7c151a337a21678c6799fe392 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Mon, 4 Sep 2023 17:50:34 +0800
Subject: [PATCH 17/20] =?UTF-8?q?feat:=20=E5=A4=9A=E4=BA=BA=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=80=9A=E8=AF=9D=EF=BC=8C=E5=BE=85=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/src/App.vue           |  7 +-
 client/packages/rtc-web/src/hooks/useRoom.ts  | 18 +++--
 client/packages/rtc-web/src/keys/server.crt   | 15 ++++
 client/packages/rtc-web/src/keys/server.key   | 15 ++++
 client/packages/rtc-web/src/layout/index.vue  |  7 +-
 .../src/views/video/hooks/useVideoCall.ts     | 45 ++++++------
 .../rtc-web/src/views/video/video-room.vue    | 72 ++++++++++++-------
 .../rtc-web/src/views/video/video.vue         | 10 ++-
 client/packages/rtc-web/vite.config.ts        |  4 +-
 9 files changed, 132 insertions(+), 61 deletions(-)
 create mode 100644 client/packages/rtc-web/src/keys/server.crt
 create mode 100644 client/packages/rtc-web/src/keys/server.key

diff --git a/client/packages/rtc-web/src/App.vue b/client/packages/rtc-web/src/App.vue
index 8853cc7..82d234e 100644
--- a/client/packages/rtc-web/src/App.vue
+++ b/client/packages/rtc-web/src/App.vue
@@ -4,5 +4,10 @@ import Layout from '@/layout/index.vue';
 
 <!-- 这里后面可以加 provider、区分登录和未登录页面 -->
 <template>
-  <Layout />
+  <Suspense>
+    <Layout />
+    <template #fallback>
+      <div class="flex h-screen items-center justify-center">加载中...</div>
+    </template>
+  </Suspense>
 </template>
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 07f0d0b..b3a199e 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -15,7 +15,7 @@ import { SocketEventName } from '@/config';
 import { useRouteParamsReactive } from '.';
 import { useRouter } from 'vue-router';
 import { InitDataKey } from '@/context';
-import { genNickName } from '@/utils';
+import { genNickName, resetUrl } from '@/utils';
 import { uniqBy } from 'lodash';
 import { watchArray } from '@vueuse/core';
 
@@ -66,7 +66,10 @@ export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
   };
 };
 
-export const useCreateRoom = (type: 'password' | 'video' = 'password') => {
+export const useCreateRoom = (
+  type: 'password' | 'video' = 'password',
+  validate = true
+) => {
   const router = useRouter();
 
   const initData = inject(InitDataKey);
@@ -89,10 +92,13 @@ export const useCreateRoom = (type: 'password' | 'video' = 'password') => {
 
   const checkParams = () => {
     console.log('check');
-    if (!isValid.value) {
-      router.replace('/');
-    } else {
-      useSocket(emitCreateRoom);
+    if (validate) {
+      if (!isValid.value) {
+        resetUrl();
+        // router.replace('/');
+      } else {
+        useSocket(emitCreateRoom);
+      }
     }
   };
 
diff --git a/client/packages/rtc-web/src/keys/server.crt b/client/packages/rtc-web/src/keys/server.crt
new file mode 100644
index 0000000..a20e9ad
--- /dev/null
+++ b/client/packages/rtc-web/src/keys/server.crt
@@ -0,0 +1,15 @@
+-----BEGIN CERTIFICATE-----
+MIICVTCCAb4CCQCCDZ6FebPIqjANBgkqhkiG9w0BAQsFADBvMQswCQYDVQQGEwJV
+UzENMAsGA1UECAwETWFyczETMBEGA1UEBwwKaVRyYW5zd2FycDETMBEGA1UECgwK
+aVRyYW5zd2FycDETMBEGA1UECwwKaVRyYW5zd2FycDESMBAGA1UEAwwJMTI3LjAu
+MC4xMB4XDTE4MDcxMDAzMTYzN1oXDTI4MDcwNzAzMTYzN1owbzELMAkGA1UEBhMC
+VVMxDTALBgNVBAgMBE1hcnMxEzARBgNVBAcMCmlUcmFuc3dhcnAxEzARBgNVBAoM
+CmlUcmFuc3dhcnAxEzARBgNVBAsMCmlUcmFuc3dhcnAxEjAQBgNVBAMMCTEyNy4w
+LjAuMTCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1I6AQ6eNez85kcKjwy3g
+/vcnXtw+EbP4Ab37fLhIIWG+XzmEBAqnCYjM3nmlDIGEfNylGReo9mD2OHg46a1D
+wjd3pxTMit41pCTCiu8S9A2UJfbhSzQrfs+IZcNye4KR9/FzNEW6KoKQ0uc6X33E
+0xe41hbRMQoKB3WmxvyN8PcCAwEAATANBgkqhkiG9w0BAQsFAAOBgQAd7GNDtKWA
+0OpSCzMu0pbmss9Erh4/RC8D+wK4+TXgPDKyZ6hX4FYPvk+ryMvwxJf0o4jjx5cx
+Yew7UjaKHlGXq+CNVRFYlltsbvO3oQTNkajuyYGWzMSuNxNsT3apOxH7SIu3qao8
+COSwj5FxZ2JU7O+SBVFZoJrFXEa+KJMQzQ==
+-----END CERTIFICATE-----
diff --git a/client/packages/rtc-web/src/keys/server.key b/client/packages/rtc-web/src/keys/server.key
new file mode 100644
index 0000000..beb5a71
--- /dev/null
+++ b/client/packages/rtc-web/src/keys/server.key
@@ -0,0 +1,15 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIICXAIBAAKBgQDUjoBDp417PzmRwqPDLeD+9yde3D4Rs/gBvft8uEghYb5fOYQE
+CqcJiMzeeaUMgYR83KUZF6j2YPY4eDjprUPCN3enFMyK3jWkJMKK7xL0DZQl9uFL
+NCt+z4hlw3J7gpH38XM0RboqgpDS5zpffcTTF7jWFtExCgoHdabG/I3w9wIDAQAB
+AoGAWsy1BjGhQrDzisy24D3NC53Q97jl2vIiU7wwnkqqpXf3tv3+4ysZx/zkZ3VX
+iEwbqKso69srlnQ9OkpBJbGaa6lZe+z7BGzv2eJr+hKjjVjR122eDjAtXw+Tmt6c
+iBUG9+ITC1GdhXLEgTXtYuPq8hbDhoAVI007E+5JuQoO8kECQQD3aR6zGfR7EOmn
+byGkNMMPY/FoH894BpB4l7gIlNXH3pxBqukrEwnmVXSfak2PAkeLFO+bgCc6baIZ
++R4iOLn/AkEA2++dIndbY7nmGs7Q//sM7MkFMiFQ4h1nN38V9AEHaUonxlwo+Nks
+PTAaVd78YIh6yBlfexm0Fxi1mEVQApqZCQJAFUPqyJglhGJqwuJxcMy8K1l6yWla
+isV9q2/W+J3aViiTI63OBs7HHg4gTQd1DSK0BYdSJPp55LLBqRvZdDWN/wJBAMQa
+M46exAL4p55xl9MWwyCB4LshD6B9vSGzlBx7qmMMNsjcNcAkzBhGwsScTYW5S1kN
+nqABfB037/s0mjGoLRkCQF18j4MovyFaj8VAqY8YUmf86Ez9JmL9kHNA8yEoSjuI
+xsRa6y5Nza5y83Mojt4W+PfS386riJ7txqrPdezyag4=
+-----END RSA PRIVATE KEY-----
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index 84c60fa..bafe950 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -6,8 +6,11 @@ import { useInitData } from '@/hooks';
 defineOptions({
   name: 'LayoutIndex',
 });
-
-useInitData();
+try {
+  await useInitData();
+} catch (error) {
+  console.log(error);
+}
 </script>
 
 <template>
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 4b822c4..04214a2 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,5 +1,6 @@
-import { useRoomConnect } from '@/hooks';
+import { useCreateRoom, useRoomConnect } from '@/hooks';
 import { useUserMedia, useDevicesList } from '@vueuse/core';
+import { reject } from 'lodash';
 import {
   Ref,
   computed,
@@ -50,12 +51,6 @@ export const useMediaSetting = (
     }
   );
 
-  watch(currentAudioOutput, (v) => {
-    if (v) {
-      setSinkId(v);
-    }
-  });
-
   // 收集的错误信息
   // const errorMsg = ref({
   //   audio: '',
@@ -88,6 +83,12 @@ export const useMediaSetting = (
 
   const video = shallowRef<HTMLVideoElement>();
 
+  watch([currentAudioOutput, video], ([v1, v2]) => {
+    if (v1 && v2) {
+      setSinkId(v1);
+    }
+  });
+
   const constraints = computed(() => {
     const audioDevice = currentAudioInput.value
       ? { deviceId: currentAudioInput.value }
@@ -146,8 +147,8 @@ export const useMediaSetting = (
   };
 
   // 先静音和关闭视频渲染
-  watch(stream, (v) => {
-    if (v) {
+  watch([stream, video], () => {
+    if (stream.value) {
       if (video.value) {
         video.value.srcObject = stream.value!;
         if (stream.value) {
@@ -167,7 +168,6 @@ export const useMediaSetting = (
 
   // 进入页面先连接
   const startGetMedia = () => {
-    console.log(isSupported.value);
     return new Promise<MediaStream | undefined>((resolve) => {
       const watchEnableStop = watchEffect(async () => {
         if (
@@ -178,6 +178,8 @@ export const useMediaSetting = (
           const stream = await start();
           watchEnableStop();
           resolve(stream);
+        } else {
+          reject('请打开摄像头或者麦克风');
         }
       });
     });
@@ -208,23 +210,22 @@ export const useMediaSetting = (
 };
 
 export const useMediaConnect = (
-  connect: { onTrack?: (track: MediaStreamTrack, id: string) => void } = {},
-  ...args: Parameters<typeof useMediaSetting>
+  stream: MediaStream,
+  connect: { onTrack?: (track: MediaStreamTrack, id: string) => void } = {}
 ) => {
-  const { startGetMedia, ...mediaResult } = useMediaSetting(...args);
+  console.log('再执行');
 
-  let stream: MediaStream | undefined = undefined;
   useRoomConnect({
     async roomCreated() {
       console.log('ccccreated');
-      stream = await startGetMedia();
+      // stream = await startGetMedia();
       console.log(stream);
     },
     roomJoined: async (_, pc) => {
-      let innerStream = stream;
-      stream = undefined;
+      const innerStream = stream;
+      // stream = undefined;
       if (!innerStream) {
-        innerStream = await startGetMedia();
+        // innerStream = await startGetMedia();
       }
       if (pc && innerStream) {
         innerStream.getTracks().forEach((track) => {
@@ -233,10 +234,10 @@ export const useMediaConnect = (
       }
     },
     onBeforeCreateAnswer: async (_, pc) => {
-      let innerStream = stream;
-      stream = undefined;
+      const innerStream = stream;
+      // stream = undefined;
       if (!innerStream) {
-        innerStream = await startGetMedia();
+        // innerStream = await startGetMedia();
       }
       if (pc && innerStream) {
         innerStream.getTracks().forEach((track) => {
@@ -251,6 +252,4 @@ export const useMediaConnect = (
       }
     },
   });
-
-  return { ...mediaResult };
 };
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 98ee9bd..72b4a02 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useSwitchSiderbar, useSwitchMember } from '@/hooks';
+import { useSwitchSiderbar, useSwitchMember, useGetRoomInfo } from '@/hooks';
 import { onMounted, ref } from 'vue';
-import { useMediaConnect } from './hooks/useVideoCall';
+import { useMediaConnect, useMediaSetting } from './hooks/useVideoCall';
 import VideoControl from './video-control.vue';
 import { computed } from 'vue';
+import { useCreateRoom } from '@/hooks';
 
 defineOptions({
   name: 'VideoRoom',
@@ -15,9 +16,16 @@ const { open } = useSwitchMember();
 const audioInputDevice = ref<MediaDeviceInfo | undefined>();
 const speakerRef = ref('');
 
-const otherVideo = ref();
+const otherVideo = ref<{ id: string; ref: any }[]>([]);
+
+const collectOtherVideoRef = (ref: any, id: string) => {
+  if (!otherVideo.value.find((other) => other.id === id)) {
+    otherVideo.value.push({ id, ref });
+  }
+};
 
 const {
+  startGetMedia,
   video,
   switchTrackEnable,
   videoEnabled,
@@ -25,29 +33,34 @@ const {
   mediaLoaded,
   currentAudioInput,
   currentAudioOutput,
-} = useMediaConnect(
-  {
-    onTrack(track, id) {
-      console.log('id', id);
-      otherVideo.value.srcObject = track;
-      // otherVideo.value?.play?.();
-    },
+} = useMediaSetting({
+  immeately: false,
+  audio: audioInputDevice,
+  speaker: speakerRef,
+});
+
+const stream = await startGetMedia().catch(() => {
+  console.log('没有stream');
+});
+
+useCreateRoom('video', true);
+
+useMediaConnect(stream!, {
+  onTrack(track, id) {
+    otherVideo.value.forEach((item) => {
+      if (item.id === id) {
+        console.log(item.id === id);
+        item.ref.srcObject = track;
+      }
+    });
   },
-  {
-    immeately: false,
-    audio: audioInputDevice,
-    speaker: speakerRef,
-  }
-);
+});
 
-console.log('执行');
+const { members, selfInfo } = useGetRoomInfo();
 
-const handleClick = () => {
-  // const aa = members.value[1]?.id;
-  // const peer = dataChanelMap.get(aa!);
-  // console.log('click', peer, dataChanelMap);
-  // peer?.send('asdas');
-};
+const memberwithoutOwner = computed(() =>
+  members.value.filter((item) => item.id !== selfInfo.value.socketId)
+);
 
 const selectDevice = computed(() => ({
   audioInput: currentAudioInput.value,
@@ -107,8 +120,17 @@ const deviceChange = (device: MediaDeviceInfo) => {
       />
     </div>
 
-    <div v-show="open" class="w-[400px]" @click="handleClick">
-      <video ref="otherVideo" playsinline autoplay />
+    <div v-show="open" class="w-[400px]">
+      <div class="member-video mt-4">
+        <video
+          v-for="item in memberwithoutOwner"
+          :key="item.id"
+          :ref="(ref) => collectOtherVideoRef(ref, item.id || '')"
+          class="mb-4 px-2"
+          playsinline
+          autoplay
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
index afbfcef..a1c3cf1 100644
--- a/client/packages/rtc-web/src/views/video/video.vue
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -9,7 +9,7 @@ defineOptions({
   name: 'VideoView',
 });
 
-const { roomId } = useCreateRoom();
+const { roomId } = useCreateRoom('video', false);
 
 const handleBackLevel = () => resetUrl();
 
@@ -31,7 +31,13 @@ const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
     </BackPreviousLevel>
 
     <div class="min-h-0 flex-1">
-      <VideoRoom />
+      <Suspense>
+        <VideoRoom />
+        <template #fallback>
+          1. 请检查网络情况 2. 允许浏览器打开摄像头、麦克风权限； 3.
+          清空浏览器缓存重新打开页面
+        </template>
+      </Suspense>
     </div>
   </div>
 </template>
diff --git a/client/packages/rtc-web/vite.config.ts b/client/packages/rtc-web/vite.config.ts
index c337c8d..73dc288 100644
--- a/client/packages/rtc-web/vite.config.ts
+++ b/client/packages/rtc-web/vite.config.ts
@@ -34,8 +34,8 @@ export default defineConfig({
       },
     },
     https: {
-      key: fs.readFileSync('./cert/localhost+1-key.pem'),
-      cert: fs.readFileSync('./cert/localhost+1.pem'),
+      key: fs.readFileSync('./src/keys/server.key'),
+      cert: fs.readFileSync('./src/keys/server.crt'),
     },
   },
   plugins: [

From 7780c2d1d2cffb87801b55215d1c8952fbc45c30 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 6 Sep 2023 14:16:25 +0800
Subject: [PATCH 18/20] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=81=E8=BE=B9=E7=95=8C=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/packages/rtc-web/package.json          |  1 +
 client/packages/rtc-web/src/App.vue           | 11 +++-
 .../src/components/error-boundary/index.vue   | 31 +++++++++++
 client/packages/rtc-web/src/hooks/index.ts    |  2 +
 .../rtc-web/src/hooks/useErrorCaptured.ts     | 12 +++++
 .../packages/rtc-web/src/hooks/useInitData.ts | 51 +++++++++----------
 client/packages/rtc-web/src/hooks/useRoom.ts  |  5 +-
 .../rtc-web/src/hooks/useUseragent.ts         |  9 ++++
 client/packages/rtc-web/src/layout/index.vue  | 11 ++--
 client/packages/rtc-web/src/main.ts           |  8 +++
 client/packages/rtc-web/src/utils/common.ts   |  2 +-
 .../src/views/video/hooks/useVideoCall.ts     | 48 +++++++----------
 .../src/views/video/video-control-menu.vue    | 15 +++++-
 .../rtc-web/src/views/video/video-room.vue    |  7 ++-
 .../rtc-web/src/views/video/video.vue         | 10 +++-
 client/pnpm-lock.yaml                         | 36 +++++++++++++
 16 files changed, 187 insertions(+), 72 deletions(-)
 create mode 100644 client/packages/rtc-web/src/components/error-boundary/index.vue
 create mode 100644 client/packages/rtc-web/src/hooks/useErrorCaptured.ts
 create mode 100644 client/packages/rtc-web/src/hooks/useUseragent.ts

diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index b37dd9d..4ddaa40 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -38,6 +38,7 @@
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3",
+    "vconsole": "^3.15.1",
     "vite": "^4.3.9",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svg-icons": "^2.0.1",
diff --git a/client/packages/rtc-web/src/App.vue b/client/packages/rtc-web/src/App.vue
index 82d234e..5c9710c 100644
--- a/client/packages/rtc-web/src/App.vue
+++ b/client/packages/rtc-web/src/App.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
 import Layout from '@/layout/index.vue';
+import ErrorBoundary from '@/components/error-boundary/index.vue';
+import { useErrorCaptured } from '@/hooks';
+
+const errors = useErrorCaptured();
 </script>
 
 <!-- 这里后面可以加 provider、区分登录和未登录页面 -->
 <template>
   <Suspense>
     <Layout />
-    <template #fallback>
-      <div class="flex h-screen items-center justify-center">加载中...</div>
+    <template v-if="errors.length" #fallback>
+      <ErrorBoundary
+        class="h-screen"
+        :tips-list="['服务器开小差了，请联系管理员']"
+      />
     </template>
   </Suspense>
 </template>
diff --git a/client/packages/rtc-web/src/components/error-boundary/index.vue b/client/packages/rtc-web/src/components/error-boundary/index.vue
new file mode 100644
index 0000000..bd7e647
--- /dev/null
+++ b/client/packages/rtc-web/src/components/error-boundary/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineOptions({
+  name: 'ErrorBoundary',
+});
+
+const props = defineProps({
+  tipsList: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="flex h-full w-full items-center justify-center">
+    <div v-if="props.tipsList.length">
+      <p class="mb-2 font-bold">无法显示？也许可以帮到您：</p>
+      <ul class="text-secondary">
+        <li v-for="(item, index) in props.tipsList" :key="index">
+          {{ index + 1 }}. {{ item }}
+        </li>
+      </ul>
+    </div>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/hooks/index.ts b/client/packages/rtc-web/src/hooks/index.ts
index 26bd8e1..445e9c5 100644
--- a/client/packages/rtc-web/src/hooks/index.ts
+++ b/client/packages/rtc-web/src/hooks/index.ts
@@ -5,3 +5,5 @@ export * from './socket-utils';
 export * from './useRouterReactive';
 export * from './useDragChangeSize';
 export * from './useSwitchByUrl';
+export * from './useErrorCaptured';
+export * from './useUseragent';
diff --git a/client/packages/rtc-web/src/hooks/useErrorCaptured.ts b/client/packages/rtc-web/src/hooks/useErrorCaptured.ts
new file mode 100644
index 0000000..cd5d05c
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/useErrorCaptured.ts
@@ -0,0 +1,12 @@
+import { onErrorCaptured, ref } from 'vue';
+
+// 捕获 组件error
+export const useErrorCaptured = () => {
+  const errors = ref<string[]>([]);
+
+  onErrorCaptured((e) => {
+    errors.value.push(e.message);
+  });
+
+  return errors;
+};
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index e8df2f8..944cb7c 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -1,45 +1,44 @@
 import { ConfigEnum } from '@/config';
 import { useFetch, useLocalStorage } from '@vueuse/core';
-import { provide, ref, shallowReactive, watch } from 'vue';
+import { ref, shallowReactive } from 'vue';
 import io from 'socket.io-client';
-import { InitDataKey, InitDataKeyType } from '@/context';
+import { InitDataKeyType } from '@/context';
 
-export const useFetchData = () => {
+export const useFetchData = async () => {
   const useTurn = useLocalStorage(ConfigEnum.useRelay, false);
 
-  const { data } = useFetch(() => `/api/comm/initData?turn=${useTurn.value}`)
+  const { data, error } = await useFetch(
+    () => `/api/comm/initData?turn=${useTurn.value}`
+  )
     .get()
     .json();
 
-  return { data };
+  return { data, error };
 };
 
-export const useInitData = () => {
-  const { data } = useFetchData();
+export const useInitData = async () => {
+  const { data, error } = await useFetchData();
   const initData = ref<InitDataKeyType>({
     langMode: 'zh', // 默认中文
   });
 
-  watch(
-    () => data.value,
-    (v) => {
-      if (v) {
-        const { wsHost, logo, version, rtcConfig, options } = v;
-        initData.value = Object.assign({}, initData.value, {
-          socket: wsHost ? shallowReactive(io(wsHost)) : null,
-          logo,
-          version,
-          options: Object.keys(options).reduce(
-            (cur, next) => ({ ...cur, [next]: Boolean(options[next]) }),
-            {}
-          ),
-          config: rtcConfig,
-        });
-      }
-    }
-  );
+  if (data.value) {
+    const { wsHost, logo, version, rtcConfig, options } = data.value;
+    initData.value = Object.assign({}, initData.value, {
+      socket: wsHost ? shallowReactive(io(wsHost)) : null,
+      logo,
+      version,
+      options: Object.keys(options).reduce(
+        (cur, next) => ({ ...cur, [next]: Boolean(options[next]) }),
+        {}
+      ),
+      config: rtcConfig,
+    });
+  }
 
-  provide(InitDataKey, initData);
+  if (error.value) {
+    throw error.value;
+  }
 
   return {
     initData,
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index b3a199e..28145cb 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -13,7 +13,6 @@ import {
 import { useSocket } from './socket-utils';
 import { SocketEventName } from '@/config';
 import { useRouteParamsReactive } from '.';
-import { useRouter } from 'vue-router';
 import { InitDataKey } from '@/context';
 import { genNickName, resetUrl } from '@/utils';
 import { uniqBy } from 'lodash';
@@ -70,8 +69,6 @@ export const useCreateRoom = (
   type: 'password' | 'video' = 'password',
   validate = true
 ) => {
-  const router = useRouter();
-
   const initData = inject(InitDataKey);
 
   const { roomId } = useRouteParamsReactive(['roomId']);
@@ -95,7 +92,6 @@ export const useCreateRoom = (
     if (validate) {
       if (!isValid.value) {
         resetUrl();
-        // router.replace('/');
       } else {
         useSocket(emitCreateRoom);
       }
@@ -360,6 +356,7 @@ export const useGetRoomInfo = () => {
     socket.on(SocketEventName.RoomJoin, roomJoin);
 
     onBeforeUnmount(() => {
+      console.log('执行');
       socket.emit(SocketEventName.RoomExit, {
         from: selfInfo.value.socketId,
         room: selfInfo.value.roomId,
diff --git a/client/packages/rtc-web/src/hooks/useUseragent.ts b/client/packages/rtc-web/src/hooks/useUseragent.ts
new file mode 100644
index 0000000..c5a0d7a
--- /dev/null
+++ b/client/packages/rtc-web/src/hooks/useUseragent.ts
@@ -0,0 +1,9 @@
+export const useUserAgent = () => {
+  const uerAgent = window.navigator.userAgent;
+
+  const isMobile = /Mobi|Android|iPhone/i.test(uerAgent);
+
+  return {
+    isMobile,
+  };
+};
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index bafe950..45d2ebd 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -2,15 +2,16 @@
 import { MenuSide } from '@/components/menu';
 import { NavHeader, FullHeightFlexBox } from '@/components/lib';
 import { useInitData } from '@/hooks';
+import { provide } from 'vue';
+import { InitDataKey } from '@/context';
 
 defineOptions({
   name: 'LayoutIndex',
 });
-try {
-  await useInitData();
-} catch (error) {
-  console.log(error);
-}
+
+const { initData } = await useInitData();
+
+provide(InitDataKey, initData);
 </script>
 
 <template>
diff --git a/client/packages/rtc-web/src/main.ts b/client/packages/rtc-web/src/main.ts
index f8ccbe9..ffc6870 100644
--- a/client/packages/rtc-web/src/main.ts
+++ b/client/packages/rtc-web/src/main.ts
@@ -8,7 +8,15 @@ import SvgIcon from '@/components/base/svg-icon.vue';
 
 import App from './App.vue';
 
+import VConsole from 'vconsole';
+import { useUserAgent } from '@/hooks';
+
+const { isMobile } = useUserAgent();
+
 function setup() {
+  if (isMobile) {
+    new VConsole();
+  }
   return createApp(App).use(router).component('svg-icon', SvgIcon);
 }
 
diff --git a/client/packages/rtc-web/src/utils/common.ts b/client/packages/rtc-web/src/utils/common.ts
index c636e87..11ef289 100644
--- a/client/packages/rtc-web/src/utils/common.ts
+++ b/client/packages/rtc-web/src/utils/common.ts
@@ -93,4 +93,4 @@ export const isItBetween = (num: number, arr: number[]) => {
   return num >= arr[0] && num <= arr[1];
 };
 
-export const resetUrl = () => (window.location.href = window.location.origin);
+export const resetUrl = () => window.location.replace('/');
diff --git a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
index 04214a2..13b9159 100644
--- a/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
+++ b/client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts
@@ -1,4 +1,4 @@
-import { useCreateRoom, useRoomConnect } from '@/hooks';
+import { useRoomConnect, useUserAgent } from '@/hooks';
 import { useUserMedia, useDevicesList } from '@vueuse/core';
 import { reject } from 'lodash';
 import {
@@ -29,6 +29,8 @@ export const useMediaSetting = (
 
   const mediaLoaded = ref(false);
 
+  const { isMobile } = useUserAgent();
+
   // 切换 麦克风
   watch(
     audioRef,
@@ -119,8 +121,8 @@ export const useMediaSetting = (
   const audioTracks = ref<MediaStreamTrack[]>([]);
   const videoTracks = ref<MediaStreamTrack[]>([]);
 
-  const audioEnabled = ref(true);
-  const videoEnabled = ref(true);
+  const audioEnabled = ref(false);
+  const videoEnabled = ref(false);
 
   // 切换 video、audio 渲染
   const switchTrackEnable = (type: 'video' | 'audio', flag: boolean) => {
@@ -143,7 +145,9 @@ export const useMediaSetting = (
   };
 
   const setSinkId = (sinkId: string) => {
-    (video.value! as any).setSinkId(sinkId);
+    if (!isMobile) {
+      (video.value! as any).setSinkId(sinkId);
+    }
   };
 
   // 先静音和关闭视频渲染
@@ -156,10 +160,10 @@ export const useMediaSetting = (
           videoTracks.value = stream.value.getVideoTracks();
         }
         if (!videoEnabled.value) {
-          // switchTrackEnable('video', false);
+          switchTrackEnable('video', false);
         }
         if (!audioEnabled.value) {
-          // switchTrackEnable('audio', false);
+          switchTrackEnable('audio', false);
         }
         mediaLoaded.value = true;
       }
@@ -168,6 +172,7 @@ export const useMediaSetting = (
 
   // 进入页面先连接
   const startGetMedia = () => {
+    console.log(isSupported.value);
     return new Promise<MediaStream | undefined>((resolve) => {
       const watchEnableStop = watchEffect(async () => {
         if (
@@ -213,40 +218,23 @@ export const useMediaConnect = (
   stream: MediaStream,
   connect: { onTrack?: (track: MediaStreamTrack, id: string) => void } = {}
 ) => {
-  console.log('再执行');
-
   useRoomConnect({
-    async roomCreated() {
-      console.log('ccccreated');
-      // stream = await startGetMedia();
-      console.log(stream);
-    },
     roomJoined: async (_, pc) => {
-      const innerStream = stream;
-      // stream = undefined;
-      if (!innerStream) {
-        // innerStream = await startGetMedia();
-      }
-      if (pc && innerStream) {
-        innerStream.getTracks().forEach((track) => {
-          pc.addTrack(track, innerStream);
+      if (pc && stream) {
+        stream.getTracks().forEach((track) => {
+          pc.addTrack(track, stream);
         });
       }
     },
     onBeforeCreateAnswer: async (_, pc) => {
-      const innerStream = stream;
-      // stream = undefined;
-      if (!innerStream) {
-        // innerStream = await startGetMedia();
-      }
-      if (pc && innerStream) {
-        innerStream.getTracks().forEach((track) => {
-          pc.addTrack(track, innerStream);
+      if (pc && stream) {
+        stream.getTracks().forEach((track) => {
+          pc.addTrack(track, stream);
         });
       }
     },
     onTrack(e: any, id: string) {
-      console.log(e);
+      // console.log(e);
       if (e.track.kind === 'video') {
         connect.onTrack?.(e.streams[0], id);
       }
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
index a18df45..6e30d30 100644
--- a/client/packages/rtc-web/src/views/video/video-control-menu.vue
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -10,6 +10,8 @@ import { Dropdown } from '@/components/base';
 import { PropType } from 'vue';
 import { computed } from 'vue';
 import { resetUrl } from '@/utils';
+import { useRouter } from 'vue-router';
+import { nextTick } from 'vue';
 
 defineOptions({
   name: 'VideoControlMenu',
@@ -30,6 +32,8 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+
 const modalVisible = ref(false);
 
 const emits = defineEmits(['controlMenuChange', 'selectDevice']);
@@ -141,7 +145,16 @@ const closeModal = () => {
         <button class="btn-neutral btn mr-4" @click.prevent="closeModal">
           取消
         </button>
-        <button class="btn-info btn" @click.prevent="resetUrl()">确定</button>
+        <button
+          class="btn-info btn"
+          @click.prevent="
+            () => {
+              nextTick(resetUrl);
+            }
+          "
+        >
+          确定
+        </button>
       </div>
     </template>
   </Modal>
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 72b4a02..78e2361 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -39,17 +39,19 @@ const {
   speaker: speakerRef,
 });
 
+// 获取摄像头、麦克风权限
 const stream = await startGetMedia().catch(() => {
   console.log('没有stream');
 });
 
+// 创建房间
 useCreateRoom('video', true);
 
+// 视频通话
 useMediaConnect(stream!, {
   onTrack(track, id) {
     otherVideo.value.forEach((item) => {
       if (item.id === id) {
-        console.log(item.id === id);
         item.ref.srcObject = track;
       }
     });
@@ -67,6 +69,7 @@ const selectDevice = computed(() => ({
   audioOutput: currentAudioOutput.value,
 }));
 
+// 当前激活的 菜单
 const activeControlMenu = computed<string[]>(() => {
   const arr = [];
   if (videoEnabled.value) arr.push('camera');
@@ -78,6 +81,7 @@ onMounted(() => {
   showSiderbar.value = 0;
 });
 
+// 切换菜单按钮
 const handleMenuChange = (active: string) => {
   if (active === 'camera' || active === 'audio') {
     const enabled =
@@ -86,6 +90,7 @@ const handleMenuChange = (active: string) => {
   }
 };
 
+// 切换扬声器、麦克风
 const deviceChange = (device: MediaDeviceInfo) => {
   if (device.kind === 'audioinput') {
     audioInputDevice.value = device;
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
index a1c3cf1..ad13095 100644
--- a/client/packages/rtc-web/src/views/video/video.vue
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -4,6 +4,7 @@ import { BackPreviousLevel, BackTitle } from '@/components/back';
 import VideoRoom from './video-room.vue';
 import { useNow, useDateFormat } from '@vueuse/core';
 import { resetUrl } from '@/utils';
+import ErrorBoundary from '@/components/error-boundary/index.vue';
 
 defineOptions({
   name: 'VideoView',
@@ -34,8 +35,13 @@ const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
       <Suspense>
         <VideoRoom />
         <template #fallback>
-          1. 请检查网络情况 2. 允许浏览器打开摄像头、麦克风权限； 3.
-          清空浏览器缓存重新打开页面
+          <ErrorBoundary
+            :tips-list="[
+              '请检查网络情况',
+              '允许浏览器打开摄像头、麦克风权限',
+              '清空浏览器缓存重新打开页面',
+            ]"
+          />
         </template>
       </Suspense>
     </div>
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index e82b1b1..7edeac6 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -28,6 +28,7 @@ importers:
       socket.io-client: 2.3.0
       tailwindcss: ^3.3.2
       typescript: ^5.1.3
+      vconsole: ^3.15.1
       vite: ^4.3.9
       vite-plugin-eslint: ^1.8.1
       vite-plugin-svg-icons: ^2.0.1
@@ -67,6 +68,7 @@ importers:
       prettier-plugin-tailwindcss: 0.3.0_prettier@2.8.8
       tailwindcss: 3.3.2
       typescript: 5.1.3
+      vconsole: 3.15.1
       vite: 4.3.9_@types+node@20.3.2
       vite-plugin-eslint: 1.8.1_eslint@8.43.0+vite@4.3.9
       vite-plugin-svg-icons: 2.0.1_vite@4.3.9
@@ -346,6 +348,13 @@ packages:
       - supports-color
     dev: false
 
+  /@babel/runtime/7.22.15:
+    resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: true
+
   /@babel/template/7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
     engines: {node: '>=6.9.0'}
@@ -1474,6 +1483,16 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /copy-text-to-clipboard/3.2.0:
+    resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /core-js/3.32.1:
+    resolution: {integrity: sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==}
+    requiresBuild: true
+    dev: true
+
   /cors/2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -2718,6 +2737,10 @@ packages:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
     dev: true
 
+  /mutation-observer/1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+    dev: true
+
   /mz/2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
     dependencies:
@@ -3169,6 +3192,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regenerator-runtime/0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: true
+
   /regex-not/1.0.2:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
     engines: {node: '>=0.10.0'}
@@ -3709,6 +3736,15 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /vconsole/3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+    dependencies:
+      '@babel/runtime': 7.22.15
+      copy-text-to-clipboard: 3.2.0
+      core-js: 3.32.1
+      mutation-observer: 1.0.3
+    dev: true
+
   /vite-plugin-eslint/1.8.1_eslint@8.43.0+vite@4.3.9:
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:

From 6c3cb35e54ca472d7c66c8dd7779cf787cb012bd Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 6 Sep 2023 17:04:18 +0800
Subject: [PATCH 19/20] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=B8=80?=
 =?UTF-8?q?=E8=BD=AE=E4=BD=BF=E7=94=A8=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rtc-web/src/components/base/index.ts      |  1 +
 .../rtc-web/src/components/base/toast.vue     | 73 +++++++++++++++++++
 .../packages/rtc-web/src/components/lib.tsx   | 40 +++++++---
 .../rtc-web/src/components/menu/menu-side.vue |  5 +-
 .../rtc-web/src/hooks/useSwitchByUrl.ts       |  8 +-
 client/packages/rtc-web/src/layout/index.vue  | 10 ++-
 client/packages/rtc-web/src/main.ts           |  3 +-
 client/packages/rtc-web/src/utils/env.ts      |  7 ++
 client/packages/rtc-web/src/utils/index.ts    |  1 +
 .../src/views/video/video-control-menu.vue    |  3 -
 .../rtc-web/src/views/video/video-room.vue    | 37 ++++++++--
 .../rtc-web/src/views/video/video.vue         |  7 ++
 12 files changed, 162 insertions(+), 33 deletions(-)
 create mode 100644 client/packages/rtc-web/src/components/base/toast.vue
 create mode 100644 client/packages/rtc-web/src/utils/env.ts

diff --git a/client/packages/rtc-web/src/components/base/index.ts b/client/packages/rtc-web/src/components/base/index.ts
index 1828bc0..29d3aac 100644
--- a/client/packages/rtc-web/src/components/base/index.ts
+++ b/client/packages/rtc-web/src/components/base/index.ts
@@ -2,3 +2,4 @@ export { default as SvgIcon } from './svg-icon.vue';
 export { default as NavIcons } from './nav-icons.vue';
 export { default as Modal } from './modal.vue';
 export { default as Dropdown } from './dropdown.vue';
+export { default as ToastBox } from './toast.vue';
diff --git a/client/packages/rtc-web/src/components/base/toast.vue b/client/packages/rtc-web/src/components/base/toast.vue
new file mode 100644
index 0000000..56b48ea
--- /dev/null
+++ b/client/packages/rtc-web/src/components/base/toast.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+
+defineOptions({
+  name: 'ToastBox',
+});
+
+type ToastTypes = 'info' | 'success' | 'warning' | 'error';
+
+interface ToastProps {
+  msg?: string;
+  type?: ToastTypes;
+  closeable?: boolean;
+  visible: boolean;
+  horizontal?: 'left' | 'end' | 'center';
+  vertical?: 'top' | 'middle' | 'bottom';
+}
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  msg: '',
+  type: 'info',
+  closeable: false,
+  visible: false,
+  horizontal: 'left',
+  vertical: 'top',
+});
+
+const emits = defineEmits(['update:visible']);
+
+const toastType = {
+  info: 'alert-info',
+  success: 'alert-success',
+  warning: 'alert-warning',
+  error: 'alert-error',
+};
+
+const horizontalType = {
+  left: 'toast-start',
+  end: 'toast-end',
+  center: 'toast-center',
+};
+
+const verticalType = {
+  top: 'toast-top',
+  middle: 'toast-middle',
+  bottom: 'toast-bottom',
+};
+
+const visiblevm = useVModel(props, 'visible', emits);
+
+setTimeout(() => {
+  visiblevm.value = false;
+}, 1500);
+</script>
+
+<template>
+  <div
+    v-if="visiblevm"
+    class="toast"
+    :class="[horizontalType[props.horizontal], verticalType[props.vertical]]"
+  >
+    <div class="alert relative" :class="toastType[props.type]">
+      <button
+        v-if="props.closeable"
+        class="btn-ghost btn-xs btn-circle btn absolute right-1 top-1"
+        @click="visiblevm = false"
+      >
+        x
+      </button>
+      <span>{{ props.msg }}</span>
+    </div>
+  </div>
+</template>
diff --git a/client/packages/rtc-web/src/components/lib.tsx b/client/packages/rtc-web/src/components/lib.tsx
index de48fc4..a57ae15 100644
--- a/client/packages/rtc-web/src/components/lib.tsx
+++ b/client/packages/rtc-web/src/components/lib.tsx
@@ -3,7 +3,10 @@ import { SvgIcon, NavIcons } from './base';
 import { MenuSide } from './menu';
 import { resetUrl } from '@/utils';
 
-export const NavHeader = () => {
+export const NavHeader = (
+  { showSiderbar }: Partial<{ showSiderbar: boolean }>,
+  ctx: SetupContext
+) => {
   return (
     <div class="drawer shadow-md dark:shadow-sm dark:shadow-neutral-600">
       <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
@@ -11,13 +14,19 @@ export const NavHeader = () => {
         {/* Navbar */}
         <div class="navbar w-full">
           <div class="flex-none lg:hidden">
-            <label for="my-drawer-3" class="btn-ghost btn-square btn">
-              <SvgIcon
-                name="nav-menu"
-                color="#A6ADBA"
-                class="inline-block h-6 w-6"
-              />
-            </label>
+            {showSiderbar ? (
+              <label
+                for="my-drawer-3"
+                class="btn-ghost btn-square btn"
+                onClick={() => ctx.emit('toggle')}
+              >
+                <SvgIcon
+                  name="nav-menu"
+                  color="#A6ADBA"
+                  class="inline-block h-6 w-6"
+                />
+              </label>
+            ) : undefined}
           </div>
           <div class="mx-2 flex-1 px-2">
             <span class="cursor-pointer" onClick={resetUrl}>
@@ -27,10 +36,17 @@ export const NavHeader = () => {
           <NavIcons class="flex-none pr-3" />
         </div>
       </div>
-      <div class="drawer-side z-50">
-        <label for="my-drawer-3" class="drawer-overlay"></label>
-        <MenuSide class="bg-base-200"></MenuSide>
-      </div>
+
+      {showSiderbar ? (
+        <div class="drawer-side z-50">
+          <label
+            for="my-drawer-3"
+            class="drawer-overlay"
+            onClick={() => ctx.emit('toggle')}
+          ></label>
+          <MenuSide class="bg-base-200"></MenuSide>
+        </div>
+      ) : undefined}
     </div>
   );
 };
diff --git a/client/packages/rtc-web/src/components/menu/menu-side.vue b/client/packages/rtc-web/src/components/menu/menu-side.vue
index 7b4a49e..68f429f 100644
--- a/client/packages/rtc-web/src/components/menu/menu-side.vue
+++ b/client/packages/rtc-web/src/components/menu/menu-side.vue
@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import MenuList from './menu-list.vue';
-import { useSwitchSiderbar } from '@/hooks';
 
 defineOptions({
   name: 'MenuSide',
 });
-
-const { open } = useSwitchSiderbar();
 </script>
 
 <template>
-  <div v-show="open" class="menu h-full w-80 min-w-[320px] p-4">
+  <div class="menu h-full w-80 min-w-[320px] p-4">
     <MenuList />
   </div>
 </template>
diff --git a/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts b/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
index e14d15a..4721686 100644
--- a/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
+++ b/client/packages/rtc-web/src/hooks/useSwitchByUrl.ts
@@ -1,5 +1,5 @@
 import { useWindowSize } from '@vueuse/core';
-import { computed, watch } from 'vue';
+import { Ref, computed, watch } from 'vue';
 import { useRouteQueryReactive } from './useRouterReactive';
 
 export const useSwitchMember = () => {
@@ -37,13 +37,15 @@ export const useSwitchMember = () => {
 export const useSwitchSiderbar = () => {
   const showSiderbar = useRouteQueryReactive('showSiderbar', '1', {
     transform: Number,
-  });
+  }) as Ref<number>;
 
   const switchSiderbar = () => {
     showSiderbar.value = showSiderbar.value === 0 ? 1 : 0;
   };
 
-  const open = computed(() => showSiderbar.value === 1);
+  const open = computed(() => {
+    return showSiderbar.value === 1;
+  });
 
   return {
     switchSiderbar,
diff --git a/client/packages/rtc-web/src/layout/index.vue b/client/packages/rtc-web/src/layout/index.vue
index 45d2ebd..6047d07 100644
--- a/client/packages/rtc-web/src/layout/index.vue
+++ b/client/packages/rtc-web/src/layout/index.vue
@@ -1,24 +1,30 @@
 <script lang="ts" setup>
 import { MenuSide } from '@/components/menu';
 import { NavHeader, FullHeightFlexBox } from '@/components/lib';
-import { useInitData } from '@/hooks';
+import { useInitData, useSwitchSiderbar } from '@/hooks';
 import { provide } from 'vue';
 import { InitDataKey } from '@/context';
 
 defineOptions({
   name: 'LayoutIndex',
 });
+const { showSiderbar, open } = useSwitchSiderbar();
 
 const { initData } = await useInitData();
 
 provide(InitDataKey, initData);
+
+const handleToggleSide = () => {
+  showSiderbar.value = 1;
+};
 </script>
 
 <template>
   <FullHeightFlexBox dire="col">
-    <NavHeader />
+    <NavHeader :showSiderbar="open" @toggle="handleToggleSide" />
     <FullHeightFlexBox type="full">
       <MenuSide
+        v-if="open"
         class="hidden dark:shadow-sm dark:shadow-neutral-600 lg:block lg:shadow-md"
       />
       <RouterView class="flex-1" />
diff --git a/client/packages/rtc-web/src/main.ts b/client/packages/rtc-web/src/main.ts
index ffc6870..1ed4361 100644
--- a/client/packages/rtc-web/src/main.ts
+++ b/client/packages/rtc-web/src/main.ts
@@ -10,11 +10,12 @@ import App from './App.vue';
 
 import VConsole from 'vconsole';
 import { useUserAgent } from '@/hooks';
+import { isDev } from '@/utils';
 
 const { isMobile } = useUserAgent();
 
 function setup() {
-  if (isMobile) {
+  if (isMobile && isDev()) {
     new VConsole();
   }
   return createApp(App).use(router).component('svg-icon', SvgIcon);
diff --git a/client/packages/rtc-web/src/utils/env.ts b/client/packages/rtc-web/src/utils/env.ts
new file mode 100644
index 0000000..0cc26f7
--- /dev/null
+++ b/client/packages/rtc-web/src/utils/env.ts
@@ -0,0 +1,7 @@
+export const isProd = () => {
+  return import.meta.env.PROD;
+};
+
+export const isDev = () => {
+  return import.meta.env.DEV;
+};
diff --git a/client/packages/rtc-web/src/utils/index.ts b/client/packages/rtc-web/src/utils/index.ts
index e48135e..ac81bc6 100644
--- a/client/packages/rtc-web/src/utils/index.ts
+++ b/client/packages/rtc-web/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './common';
 export * from './user';
 export * from './reactive';
+export * from './env';
diff --git a/client/packages/rtc-web/src/views/video/video-control-menu.vue b/client/packages/rtc-web/src/views/video/video-control-menu.vue
index 6e30d30..9e6e484 100644
--- a/client/packages/rtc-web/src/views/video/video-control-menu.vue
+++ b/client/packages/rtc-web/src/views/video/video-control-menu.vue
@@ -10,7 +10,6 @@ import { Dropdown } from '@/components/base';
 import { PropType } from 'vue';
 import { computed } from 'vue';
 import { resetUrl } from '@/utils';
-import { useRouter } from 'vue-router';
 import { nextTick } from 'vue';
 
 defineOptions({
@@ -32,8 +31,6 @@ const props = defineProps({
   },
 });
 
-const router = useRouter();
-
 const modalVisible = ref(false);
 
 const emits = defineEmits(['controlMenuChange', 'selectDevice']);
diff --git a/client/packages/rtc-web/src/views/video/video-room.vue b/client/packages/rtc-web/src/views/video/video-room.vue
index 78e2361..e978774 100644
--- a/client/packages/rtc-web/src/views/video/video-room.vue
+++ b/client/packages/rtc-web/src/views/video/video-room.vue
@@ -1,16 +1,20 @@
 <script lang="ts" setup>
 import { useSwitchSiderbar, useSwitchMember, useGetRoomInfo } from '@/hooks';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import { useMediaConnect, useMediaSetting } from './hooks/useVideoCall';
 import VideoControl from './video-control.vue';
 import { computed } from 'vue';
 import { useCreateRoom } from '@/hooks';
+import { ToastBox } from '@/components/base';
+import { watch } from 'vue';
 
 defineOptions({
   name: 'VideoRoom',
 });
 
 const { showSiderbar } = useSwitchSiderbar();
+showSiderbar.value = 0;
+
 const { open } = useSwitchMember();
 
 const audioInputDevice = ref<MediaDeviceInfo | undefined>();
@@ -24,6 +28,11 @@ const collectOtherVideoRef = (ref: any, id: string) => {
   }
 };
 
+const toastInfo = ref({
+  visible: false,
+  msg: '',
+});
+
 const {
   startGetMedia,
   video,
@@ -60,6 +69,13 @@ useMediaConnect(stream!, {
 
 const { members, selfInfo } = useGetRoomInfo();
 
+watch(selfInfo, (v) => {
+  if (v) {
+    toastInfo.value.visible = true;
+    toastInfo.value.msg = `您已加入 "${v.roomId}" 房间`;
+  }
+});
+
 const memberwithoutOwner = computed(() =>
   members.value.filter((item) => item.id !== selfInfo.value.socketId)
 );
@@ -77,10 +93,6 @@ const activeControlMenu = computed<string[]>(() => {
   return arr;
 });
 
-onMounted(() => {
-  showSiderbar.value = 0;
-});
-
 // 切换菜单按钮
 const handleMenuChange = (active: string) => {
   if (active === 'camera' || active === 'audio') {
@@ -125,17 +137,26 @@ const deviceChange = (device: MediaDeviceInfo) => {
       />
     </div>
 
-    <div v-show="open" class="w-[400px]">
-      <div class="member-video mt-4">
+    <div v-show="open" class="w-[400px] overflow-auto">
+      <div class="member-video mt-4 px-2">
         <video
           v-for="item in memberwithoutOwner"
           :key="item.id"
           :ref="(ref) => collectOtherVideoRef(ref, item.id || '')"
-          class="mb-4 px-2"
+          class="mb-4 h-[200px] w-full"
+          style="background-color: #1f1f1f"
           playsinline
           autoplay
         />
       </div>
     </div>
   </div>
+
+  <ToastBox
+    v-model:visible="toastInfo.visible"
+    horizontal="center"
+    vertical="top"
+    type="success"
+    :msg="toastInfo.msg"
+  />
 </template>
diff --git a/client/packages/rtc-web/src/views/video/video.vue b/client/packages/rtc-web/src/views/video/video.vue
index ad13095..6e8a9e1 100644
--- a/client/packages/rtc-web/src/views/video/video.vue
+++ b/client/packages/rtc-web/src/views/video/video.vue
@@ -5,6 +5,7 @@ import VideoRoom from './video-room.vue';
 import { useNow, useDateFormat } from '@vueuse/core';
 import { resetUrl } from '@/utils';
 import ErrorBoundary from '@/components/error-boundary/index.vue';
+import { useErrorCaptured } from '@/hooks/useErrorCaptured';
 
 defineOptions({
   name: 'VideoView',
@@ -15,6 +16,8 @@ const { roomId } = useCreateRoom('video', false);
 const handleBackLevel = () => resetUrl();
 
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
+
+const errors = useErrorCaptured();
 </script>
 
 <template>
@@ -36,12 +39,16 @@ const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
         <VideoRoom />
         <template #fallback>
           <ErrorBoundary
+            v-if="errors.length"
             :tips-list="[
               '请检查网络情况',
               '允许浏览器打开摄像头、麦克风权限',
               '清空浏览器缓存重新打开页面',
             ]"
           />
+          <div v-else class="flex h-full w-full items-center justify-center">
+            <span class="loading loading-dots loading-lg"></span>
+          </div>
         </template>
       </Suspense>
     </div>

From 1671ed3be7a1914720e81404e2e2f4177da12d83 Mon Sep 17 00:00:00 2001
From: Asam <www.xiangmaoxian@qq.com>
Date: Wed, 6 Sep 2023 17:28:54 +0800
Subject: [PATCH 20/20] =?UTF-8?q?feat:=20=E6=9E=84=E5=BB=BA=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |  2 +
 client/package.json                           |  3 +-
 client/packages/rtc-web/package.json          |  1 +
 .../packages/rtc-web/src/hooks/useInitData.ts |  3 +-
 client/packages/rtc-web/src/hooks/useRoom.ts  | 15 ++++---
 .../rtc-web/src/hooks/useUseragent.ts         | 31 +++++++++++++
 client/packages/rtc-web/vite.config.ts        | 11 +++++
 client/pnpm-lock.yaml                         | 45 +++++++++++++++----
 8 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/.gitignore b/.gitignore
index 05d49be..77cc42f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,3 +53,5 @@ package-lock.json
 
 
 docker/mysql/data/*
+
+client_dist
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 31b8c91..4824ba1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev:web": "pnpm -C packages/rtc-web dev"
+    "dev:web": "pnpm -C packages/rtc-web dev",
+    "build:web": "pnpm -C packages/rtc-web build"
   },
   "keywords": [],
   "author": "",
diff --git a/client/packages/rtc-web/package.json b/client/packages/rtc-web/package.json
index 4ddaa40..9908eab 100644
--- a/client/packages/rtc-web/package.json
+++ b/client/packages/rtc-web/package.json
@@ -37,6 +37,7 @@
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
+    "terser": "^5.19.4",
     "typescript": "^5.1.3",
     "vconsole": "^3.15.1",
     "vite": "^4.3.9",
diff --git a/client/packages/rtc-web/src/hooks/useInitData.ts b/client/packages/rtc-web/src/hooks/useInitData.ts
index 944cb7c..e71f673 100644
--- a/client/packages/rtc-web/src/hooks/useInitData.ts
+++ b/client/packages/rtc-web/src/hooks/useInitData.ts
@@ -3,9 +3,10 @@ import { useFetch, useLocalStorage } from '@vueuse/core';
 import { ref, shallowReactive } from 'vue';
 import io from 'socket.io-client';
 import { InitDataKeyType } from '@/context';
+import { isDev } from '@/utils';
 
 export const useFetchData = async () => {
-  const useTurn = useLocalStorage(ConfigEnum.useRelay, false);
+  const useTurn = useLocalStorage(ConfigEnum.useRelay, isDev() ? false : true);
 
   const { data, error } = await useFetch(
     () => `/api/comm/initData?turn=${useTurn.value}`
diff --git a/client/packages/rtc-web/src/hooks/useRoom.ts b/client/packages/rtc-web/src/hooks/useRoom.ts
index 28145cb..1934029 100644
--- a/client/packages/rtc-web/src/hooks/useRoom.ts
+++ b/client/packages/rtc-web/src/hooks/useRoom.ts
@@ -12,9 +12,9 @@ import {
 } from 'vue';
 import { useSocket } from './socket-utils';
 import { SocketEventName } from '@/config';
-import { useRouteParamsReactive } from '.';
+import { useRouteParamsReactive, useUserAgent } from '.';
 import { InitDataKey } from '@/context';
-import { genNickName, resetUrl } from '@/utils';
+import { genNickName, isDev, resetUrl } from '@/utils';
 import { uniqBy } from 'lodash';
 import { watchArray } from '@vueuse/core';
 
@@ -71,6 +71,8 @@ export const useCreateRoom = (
 ) => {
   const initData = inject(InitDataKey);
 
+  const { getNetWorkState, isMobile } = useUserAgent();
+
   const { roomId } = useRouteParamsReactive(['roomId']);
 
   const { isValid } = useRoom(() => roomId.value || '');
@@ -82,8 +84,8 @@ export const useCreateRoom = (
       password: '',
       nickName: genNickName(),
       langMode: initData?.value.langMode,
-      ua: 'pc',
-      // network: this.network,
+      ua: isMobile ? 'mobile' : 'pc',
+      network: getNetWorkState(),
     });
   };
 
@@ -142,8 +144,9 @@ export const useRoomConnect = (option: ConnectOption = {}) => {
   );
 
   const createRtcConnect = async (id: string) => {
-    // const pc = new RTCPeerConnection(initData.value.config);
-    const pc = new RTCPeerConnection();
+    const pc = new RTCPeerConnection(
+      isDev() ? undefined : initData.value.config
+    );
     pc.onicecandidate = (event) => {
       if (event.candidate != null) {
         const message = {
diff --git a/client/packages/rtc-web/src/hooks/useUseragent.ts b/client/packages/rtc-web/src/hooks/useUseragent.ts
index c5a0d7a..f5fdf53 100644
--- a/client/packages/rtc-web/src/hooks/useUseragent.ts
+++ b/client/packages/rtc-web/src/hooks/useUseragent.ts
@@ -1,9 +1,40 @@
+/* eslint-disable indent */
 export const useUserAgent = () => {
   const uerAgent = window.navigator.userAgent;
 
   const isMobile = /Mobi|Android|iPhone/i.test(uerAgent);
 
+  const getNetWorkState = () => {
+    let networkStr = uerAgent.match(/NetType\/\w+/)
+      ? uerAgent.match(/NetType\/\w+/)?.[0]
+      : 'NetType/other';
+    networkStr = networkStr?.toLowerCase().replace('nettype/', '');
+    if (
+      networkStr &&
+      !['wifi', '5g', '3g', '4g', '2g', '3gnet', 'slow-2g'].includes(networkStr)
+    ) {
+      if ((navigator as any).connection) {
+        networkStr = (navigator as any).connection.effectiveType;
+      }
+    }
+    switch (networkStr) {
+      case 'wifi':
+        return 'wifi';
+      case '5g':
+        return '5g';
+      case '4g':
+        return '4g';
+      case '3g' || '3gnet':
+        return '3g';
+      case '2g' || 'slow-2g':
+        return '2g';
+      default:
+        return 'unknow';
+    }
+  };
+
   return {
     isMobile,
+    getNetWorkState,
   };
 };
diff --git a/client/packages/rtc-web/vite.config.ts b/client/packages/rtc-web/vite.config.ts
index 73dc288..403cfb1 100644
--- a/client/packages/rtc-web/vite.config.ts
+++ b/client/packages/rtc-web/vite.config.ts
@@ -15,6 +15,17 @@ const pathResolve = (path: string) => resolve(__dirname, path);
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  build: {
+    outDir: resolve(__dirname, '../../../client_dist/rtc-web'),
+    minify: 'terser',
+    emptyOutDir: true,
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+  },
   resolve: {
     alias: [
       {
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 7edeac6..5c91ad3 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -27,6 +27,7 @@ importers:
       prettier-plugin-tailwindcss: ^0.3.0
       socket.io-client: 2.3.0
       tailwindcss: ^3.3.2
+      terser: ^5.19.4
       typescript: ^5.1.3
       vconsole: ^3.15.1
       vite: ^4.3.9
@@ -67,9 +68,10 @@ importers:
       prettier: 2.8.8
       prettier-plugin-tailwindcss: 0.3.0_prettier@2.8.8
       tailwindcss: 3.3.2
+      terser: 5.19.4
       typescript: 5.1.3
       vconsole: 3.15.1
-      vite: 4.3.9_@types+node@20.3.2
+      vite: 4.3.9_66pwffvb2axzwdhxmcirxliemu
       vite-plugin-eslint: 1.8.1_eslint@8.43.0+vite@4.3.9
       vite-plugin-svg-icons: 2.0.1_vite@4.3.9
       vue-eslint-parser: 9.3.1_eslint@8.43.0
@@ -639,6 +641,12 @@ packages:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
+  /@jridgewell/source-map/0.3.5:
+    resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
+
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 
@@ -865,7 +873,7 @@ packages:
       '@babel/core': 7.22.5
       '@babel/plugin-transform-typescript': 7.22.5_@babel+core@7.22.5
       '@vue/babel-plugin-jsx': 1.1.4_@babel+core@7.22.5
-      vite: 4.3.9_@types+node@20.3.2
+      vite: 4.3.9_66pwffvb2axzwdhxmcirxliemu
       vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
@@ -878,7 +886,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9_@types+node@20.3.2
+      vite: 4.3.9_66pwffvb2axzwdhxmcirxliemu
       vue: 3.3.4
     dev: true
 
@@ -1087,7 +1095,6 @@ packages:
     resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /after/0.8.2:
     resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
@@ -1317,6 +1324,9 @@ packages:
       node-releases: 2.0.12
       update-browserslist-db: 1.0.11_browserslist@4.21.9
 
+  /buffer-from/1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
   /cache-base/1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
@@ -1445,6 +1455,9 @@ packages:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
     dev: true
 
+  /commander/2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
   /commander/4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -3401,6 +3414,12 @@ packages:
       urix: 0.1.0
     dev: true
 
+  /source-map-support/0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
   /source-map-url/0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
     deprecated: See https://github.com/lydell/source-map-url#deprecated
@@ -3414,7 +3433,6 @@ packages:
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /split-string/3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
@@ -3581,6 +3599,16 @@ packages:
       - ts-node
     dev: true
 
+  /terser/5.19.4:
+    resolution: {integrity: sha512-6p1DjHeuluwxDXcuT9VR8p64klWJKo1ILiy19s6C9+0Bh2+NWTX6nD9EPppiER4ICkHDVB1RkVpin/YW2nQn/g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/source-map': 0.3.5
+      acorn: 8.9.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -3755,7 +3783,7 @@ packages:
       '@types/eslint': 8.40.2
       eslint: 8.43.0
       rollup: 2.79.1
-      vite: 4.3.9_@types+node@20.3.2
+      vite: 4.3.9_66pwffvb2axzwdhxmcirxliemu
     dev: true
 
   /vite-plugin-svg-icons/2.0.1_vite@4.3.9:
@@ -3771,12 +3799,12 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 4.3.9_@types+node@20.3.2
+      vite: 4.3.9_66pwffvb2axzwdhxmcirxliemu
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/4.3.9_@types+node@20.3.2:
+  /vite/4.3.9_66pwffvb2axzwdhxmcirxliemu:
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -3805,6 +3833,7 @@ packages:
       esbuild: 0.17.19
       postcss: 8.4.24
       rollup: 3.25.3
+      terser: 5.19.4
     optionalDependencies:
       fsevents: 2.3.2