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: 构建相关

Author: xgChange

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