feat: 开发消息功能 (#11)

* feat: back title

* feat: 本地联调

* feat: 聊天室初始化，以及联动query

* feat: useSocket，online users count

* feat: 调整useSocket、useCreateRoom(优化hook)

* feat: 拆分roomInfo、roomConnect 的 hook

* feat: chat room 基本布局

* feat: chat

* fix: 样式 + emoji

* feat: 拖拽改变元素大小的hook，一些样式fix

* feat: video chat init

* feat: 调试摄像头、audio信息

* feat: video的一些设置，代码优化

* fix: 样式

* feat: 视频聊天的连接测试

* feat: https

* feat: 多人视频通话，待优化整理代码

* feat: 代码优化、边界处理

* feat: 优化一轮使用体验

* feat: 构建相关

.gitignore

@@ -53,3 +53,5 @@ package-lock.json
 
 
 docker/mysql/data/*
+
+client_dist

client/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

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": "",

client/packages/rtc-web/.eslintrc.cjs

@@ -18,10 +18,11 @@ 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',
     'no-debugger': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
 };

client/packages/rtc-web/package.json

@@ -11,10 +11,15 @@
     "@types/lodash": "^4.14.195",
     "@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",
     "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",
@@ -32,7 +37,9 @@
     "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",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svg-icons": "^2.0.1",

client/packages/rtc-web/src/App.vue

@@ -1,8 +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>
-  <Layout />
+  <Suspense>
+    <Layout />
+    <template v-if="errors.length" #fallback>
+      <ErrorBoundary
+        class="h-screen"
+        :tips-list="['服务器开小差了，请联系管理员']"
+      />
+    </template>
+  </Suspense>
 </template>

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;
+}

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>

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

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';

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>

client/packages/rtc-web/src/components/base/index.ts

@@ -1,3 +1,5 @@
 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';