okooooooo/dycast
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

<feat>: 增加页面适配能力

Browse Source
This commit is contained in:
skmcj committed 2023-04-11 22:35:27 +08:00
1 parent a8235a9be5
commit d2e48fae48
8 files changed
+76 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+3 -2
View File
@@ -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"
}
}
}
src/App.vue
+15 -1
View File
@@ -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>
src/api/commonApi.ts
+24 -21
View File
@@ -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;
});
}
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;
});
};
src/assets/main.css
+10
View File
@@ -2,4 +2,14 @@ html,
body {
margin: 0;
padding: 0;
}
::selection {
background-color: #5dffff;
color: #fff;
}
::-moz-selection {
background-color: #5dffff;
color: #fff;
}
src/components/Left.vue
+16 -8
View File
@@ -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;
src/components/Right.vue
+3 -1
View File
@@ -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;
src/utils/request.ts
-70
View File
@@ -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;
vite.config.ts
+5 -2
View File
@@ -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/, '')
}
}
}
})
});