From d2e48fae486556ffe4c052fd4081c0c7697bbc7d Mon Sep 17 00:00:00 2001
From: skmcj <2604597248@qq.com>
Date: Tue, 11 Apr 2023 22:35:27 +0800
Subject: [PATCH] =?UTF-8?q?<feat>:=20=E5=A2=9E=E5=8A=A0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  5 +--
 src/App.vue              | 16 ++++++++-
 src/api/commonApi.ts     | 45 ++++++++++++++------------
 src/assets/main.css      | 10 ++++++
 src/components/Left.vue  | 24 +++++++++-----
 src/components/Right.vue |  4 ++-
 src/utils/request.ts     | 70 ----------------------------------------
 vite.config.ts           |  7 ++--
 8 files changed, 76 insertions(+), 105 deletions(-)
 delete mode 100644 src/utils/request.ts

diff --git a/package.json b/package.json
index 5a3b5c3..d6bf2b1 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "debug": "vite --debug"
   },
   "dependencies": {
     "less": "^4.1.3",
@@ -23,4 +24,4 @@
     "vite": "^4.1.4",
     "vue-tsc": "^1.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 9602589..6aedabb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@ provide('setIsStopScroll', (value: boolean) => {
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .main {
   width: 100vw;
   height: 100vh;
@@ -38,4 +38,18 @@ provide('setIsStopScroll', (value: boolean) => {
     width: 55%;
   }
 }
+@media screen and (max-width: 768px) {
+  .main {
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    .left,
+    .right {
+      width: 100%;
+    }
+    .mess-c {
+      height: 640px;
+    }
+  }
+}
 </style>
diff --git a/src/api/commonApi.ts b/src/api/commonApi.ts
index 74e3488..8bb1ee4 100644
--- a/src/api/commonApi.ts
+++ b/src/api/commonApi.ts
@@ -4,24 +4,27 @@ axios.defaults.withCredentials = true;
  * 获取房间信息
  * @param roomNumber 房间号
  */
-export const getRoomInfoApi = function(roomNumber: string) {
-  return axios.get(`/dy/${roomNumber}`).then((res: any) => {
-    let html = res.data;
-    let str = html.match(/<script id="RENDER_DATA" type="application\/json">(.*?)<\/script>/g);
-    let dict = JSON.parse(decodeURIComponent(str?.[0].slice(49, -9)));
-    let roomId = dict['app']['initialState']['roomStore']['roomInfo']['roomId'];
-    let roomTitle = dict['app']['initialState']['roomStore']['roomInfo']["room"]['title'];
-    let roomUserCount = dict['app']['initialState']['roomStore']['roomInfo']["room"]['user_count_str'];
-    let uniqueId = dict['app']['odin']['user_unique_id'];
-    let avatar = dict['app']['initialState']['roomStore']['roomInfo']['anchor']['avatar_thumb']['url_list'][0];
-    return {
-      roomId,
-      roomTitle,
-      roomUserCount,
-      uniqueId,
-      avatar
-    };
-  }).catch((err: any) => {
-    return err;
-  });
-}
\ No newline at end of file
+export const getRoomInfoApi = function (roomNumber: string) {
+  return axios
+    .get(`/dy/${roomNumber}`)
+    .then((res: any) => {
+      let html = res.data;
+      let str = html.match(/<script id="RENDER_DATA" type="application\/json">(.*?)<\/script>/g);
+      let dict = JSON.parse(decodeURIComponent(str?.[0].slice(49, -9)));
+      let roomId = dict['app']['initialState']['roomStore']['roomInfo']['roomId'];
+      let roomTitle = dict['app']['initialState']['roomStore']['roomInfo']['room']['title'];
+      let roomUserCount = dict['app']['initialState']['roomStore']['roomInfo']['room']['user_count_str'];
+      let uniqueId = dict['app']['odin']['user_unique_id'];
+      let avatar = dict['app']['initialState']['roomStore']['roomInfo']['anchor']['avatar_thumb']['url_list'][0];
+      return {
+        roomId,
+        roomTitle,
+        roomUserCount,
+        uniqueId,
+        avatar
+      };
+    })
+    .catch((err: any) => {
+      return err;
+    });
+};
diff --git a/src/assets/main.css b/src/assets/main.css
index f31f35e..2656dbf 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,4 +2,14 @@ html,
 body {
   margin: 0;
   padding: 0;
+}
+
+::selection {
+  background-color: #5dffff;
+  color: #fff;
+}
+
+::-moz-selection {
+  background-color: #5dffff;
+  color: #fff;
 }
\ No newline at end of file
diff --git a/src/components/Left.vue b/src/components/Left.vue
index 7b36de0..e083a0d 100644
--- a/src/components/Left.vue
+++ b/src/components/Left.vue
@@ -121,12 +121,16 @@ function gotoConnect() {
   setTimeout(() => {
     n?.close();
     roomNum.value &&
-      getRoomInfoApi(roomNum.value).then((res: any) => {
-        // console.log(res);
-        roomAvatar.value = res.avatar;
-        roomTitle.value = res.roomTitle;
-        connection(res.roomId, res.uniqueId);
-      });
+      getRoomInfoApi(roomNum.value)
+        .then((res: any) => {
+          // console.log(res);
+          roomAvatar.value = res.avatar;
+          roomTitle.value = res.roomTitle;
+          connection(res.roomId, res.uniqueId);
+        })
+        .catch((err: any) => {
+          console.log(err);
+        });
   }, 2000);
 }
 
@@ -251,6 +255,7 @@ function relayMess(data: Mess) {
   }
   .dy-room-box {
     max-width: 420px;
+    height: 36px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -260,16 +265,19 @@ function relayMess(data: Mess) {
     box-sizing: border-box;
     margin: 12px 8px;
     margin-bottom: 24px;
+    flex-shrink: 0;
     &.error {
       border-color: #fa5232;
     }
     .dy-room-tag {
-      height: 100%;
+      flex-shrink: 0;
       text-align: center;
-      padding: 8px 12px;
+      padding: 0 12px;
       box-sizing: border-box;
     }
     .dy-room-input {
+      min-width: 114px;
+      height: 100%;
       font-size: 14px;
       color: #5c4f55;
       flex-grow: 1;
diff --git a/src/components/Right.vue b/src/components/Right.vue
index 1d4bf63..4281a6a 100644
--- a/src/components/Right.vue
+++ b/src/components/Right.vue
@@ -40,7 +40,7 @@
         </dynamic-scroller>
       </div>
       <!-- 返回底部盒子 -->
-      <div v-if="isStopScroll" class="rt-bt-box" @click.stop="returnBottom">
+      <div v-if="isStopScroll && chatList!.length > 0" class="rt-bt-box" @click.stop="returnBottom">
         <span>固定底部</span>
         <span class="icon">︾</span>
       </div>
@@ -89,6 +89,7 @@ function returnBottom() {
  * 点击停止自动滚动
  */
 function onStopScrollOfList() {
+  if (chatList!.length <= 0) return;
   setIsStopScroll && setIsStopScroll(true);
 }
 </script>
@@ -114,6 +115,7 @@ function onStopScrollOfList() {
   }
 }
 .mess-h {
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/utils/request.ts b/src/utils/request.ts
deleted file mode 100644
index fa156a6..0000000
--- a/src/utils/request.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-// import Axios from 'axios';
-
-// 创建请求实例并配置根路径
-// const request = Axios.create({
-// });
-
-// // http request拦截器 添加一个请求拦截器
-
-// // http response 拦截器
-// // request.interceptors.response.use(
-// //   (res) => {
-// //     let data = res.data;
-// //     // 处理自己的业务逻辑，比如判断 token 是否过期等等
-// //     // 代码块
-// //     return data;
-// //   },
-// //   (error) => {
-// //     let message = "";
-// //     if (error && error.response) {
-// //       switch (error.response.status) {
-// //         case 302:
-// //           message = "接口重定向了！";
-// //           break;
-// //         case 400:
-// //           message = "参数不正确！";
-// //           break;
-// //         case 401:
-// //           message = "您未登录，或者登录已经超时，请先登录！";
-// //           break;
-// //         case 403:
-// //           message = "您没有权限操作！";
-// //           break;
-// //         case 404:
-// //           message = `请求地址出错: ${error.response.config.url}`;
-// //           break;
-// //         case 408:
-// //           message = "请求超时！";
-// //           break;
-// //         case 409:
-// //           message = "系统已存在相同数据！";
-// //           break;
-// //         case 500:
-// //           message = "服务器内部错误！";
-// //           break;
-// //         case 501:
-// //           message = "服务未实现！";
-// //           break;
-// //         case 502:
-// //           message = "网关错误！";
-// //           break;
-// //         case 503:
-// //           message = "服务不可用！";
-// //           break;
-// //         case 504:
-// //           message = "服务暂时无法访问，请稍后再试！";
-// //           break;
-// //         case 505:
-// //           message = "HTTP 版本不受支持！";
-// //           break;
-// //         default:
-// //           message = "异常问题，请联系管理员！";
-// //           break;
-// //       }
-// //     }
-// //     return Promise.reject(message);
-// //   }
-// // );
-
-// // 导出请求模块
-// export default request;
diff --git a/vite.config.ts b/vite.config.ts
index 1aa8ede..e7d5006 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,8 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
@@ -12,12 +14,13 @@ export default defineConfig({
     }
   },
   server: {
+    // host: '0.0.0.0',
     proxy: {
       '/dy': {
-        target: 'https://live.douyin.com/',
+        target: 'https://live.douyin.com',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/dy/, '')
       }
     }
   }
-})
+});