fix: 优化

src/api/user.ts

@@ -2,6 +2,13 @@ import { IPaging } from '@/interface';
 import { IUser } from '@/types/IUser';
 import request from '@/utils/request';
 
+export function fetchUserRegister({ username, password }) {
+  return request.post('/user/register', {
+    username,
+    password,
+  });
+}
+
 export function fetchQrcodeLogin({ platform, exp }) {
   return request.post<{
     login_id: string;
@@ -29,7 +36,13 @@ export function fetchQrcodeLoginStatus({ platform, login_id }) {
   });
 }
 
-export function fetchLogin({ id, password }) {
+export function fetchUsernameLogin({ username, password }) {
+  return request.post('/user/username_login', {
+    username,
+    password,
+  });
+}
+export function fetchIdLogin({ id, password }) {
   return request.post('/user/login', {
     id,
     password,

src/components/LoginModal/index.vue

@@ -29,9 +29,9 @@
               >
                 <n-form-item path="id">
                   <n-input
-                    v-model:value="loginForm.id"
+                    v-model:value="loginForm.username"
                     type="text"
-                    placeholder="请输入账号"
+                    placeholder="请输入用户名"
                   >
                     <template #prefix>
                       <n-icon
@@ -74,6 +74,64 @@
                 登录
               </n-button>
             </n-tab-pane>
+            <n-tab-pane
+              name="pwdregister"
+              tab="注册"
+            >
+              <n-form
+                ref="loginFormRefRef"
+                label-placement="left"
+                size="large"
+                :model="loginFormRef"
+                :rules="loginRules"
+              >
+                <n-form-item path="id">
+                  <n-input
+                    v-model:value="loginForm.username"
+                    type="text"
+                    placeholder="请输入用户名"
+                  >
+                    <template #prefix>
+                      <n-icon
+                        size="20"
+                        class="lang"
+                      >
+                        <PersonOutline></PersonOutline>
+                      </n-icon>
+                    </template>
+                  </n-input>
+                </n-form-item>
+                <n-form-item path="password">
+                  <n-input
+                    v-model:value="loginForm.password"
+                    type="password"
+                    show-password-on="mousedown"
+                    placeholder="请输入密码"
+                    @focus="onFocus"
+                    @blur="onBlur"
+                    @keyup.enter="handleUserRegister"
+                  >
+                    <template #prefix>
+                      <n-icon
+                        size="20"
+                        class="lang"
+                      >
+                        <LockClosedOutline></LockClosedOutline>
+                      </n-icon>
+                    </template>
+                  </n-input>
+                </n-form-item>
+              </n-form>
+              <n-button
+                type="primary"
+                block
+                secondary
+                strong
+                @click="handleUserRegister"
+              >
+                注册
+              </n-button>
+            </n-tab-pane>
           </n-tabs>
         </n-card>
         <div class="other-login">
@@ -106,24 +164,25 @@
 import { LockClosedOutline, PersonOutline } from '@vicons/ionicons5';
 import { onMounted, onUnmounted, ref } from 'vue';
 
+import { fetchUserRegister } from '@/api/user';
 import { handleTip } from '@/hooks/use-common';
 import { useQQLogin } from '@/hooks/use-login';
 import { useAppStore } from '@/store/app';
 import { useUserStore } from '@/store/user';
 
 const loginRules = {
-  id: { required: true, message: '请输入账号', trigger: 'blur' },
+  username: { required: true, message: '请输入用户名', trigger: 'blur' },
   password: { required: true, message: '请输入密码', trigger: 'blur' },
 };
-
 const userStore = useUserStore();
 const appStore = useAppStore();
 
 const loginForm = ref({
-  id: '',
+  username: '',
   password: '',
 });
 const loginFormRef = ref(null);
+const loginFormRefRef = ref(null);
 const currentTab = ref('pwdlogin'); // pwdlogin
 const loopTimer = ref();
 const emits = defineEmits(['close']);
@@ -143,17 +202,48 @@ function handleClose() {
 }
 
 const handleLogin = async () => {
+  if (
+    loginForm.value.username.length < 3 ||
+    loginForm.value.username.length > 12
+  ) {
+    window.$message.warning('用户名长度要求3-12！');
+    return;
+  }
+  if (
+    loginForm.value.password.length < 6 ||
+    loginForm.value.password.length > 18
+  ) {
+    window.$message.warning('密码长度要求6-18！');
+    return;
+  }
   let token = null;
-  token = await userStore.pwdLogin({
-    id: +loginForm.value.id,
+  token = await userStore.usernameLogin({
+    username: loginForm.value.username,
     password: loginForm.value.password,
   });
   if (token) {
-    window.$message.success('登录成功!');
+    window.$message.success('登录成功！');
     userStore.getUserInfo();
     appStore.showLoginModal = false;
   }
 };
+
+function handleUserRegister(e) {
+  e.preventDefault();
+  // @ts-ignore
+  loginFormRefRef.value.validate(async (errors) => {
+    if (!errors) {
+      const res = await fetchUserRegister({
+        username: loginForm.value.username,
+        password: loginForm.value.password,
+      });
+      if (res.code === 200) {
+        window.$message.success('注册成功!');
+      }
+    }
+  });
+}
+
 const handleLoginSubmit = (e) => {
   e.preventDefault();
   // @ts-ignore

src/store/user/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-import { fetchLogin, fetchUserInfo } from '@/api/user';
+import { fetchUserInfo, fetchUsernameLogin } from '@/api/user';
 import { fetchMyWallet } from '@/api/wallet';
 import { IAuth, IRole } from '@/interface';
 import { IUser } from '@/types/IUser';
@@ -42,10 +42,10 @@ export const useUserStore = defineStore('user', {
       this.userInfo = undefined;
       this.roles = undefined;
     },
-    async pwdLogin({ id, password }) {
+    async usernameLogin({ username, password }) {
       try {
-        const { data: token } = await fetchLogin({
-          id,
+        const { data: token } = await fetchUsernameLogin({
+          username,
           password,
         });
         this.setToken(token, 24);

src/views/area/id/index.vue

@@ -15,7 +15,7 @@
             class="cover"
             :style="{
               backgroundImage: `url('${
-                iten?.cover_img || iten?.users?.[0].avatar
+                iten?.cover_img || iten?.users?.[0]?.avatar
               }')`,
             }"
           >
@@ -42,7 +42,7 @@
             >
               <div class="txt">CDN</div>
             </div>
-            <div class="txt">{{ iten?.users?.[0].username }}</div>
+            <div class="txt">{{ iten?.users?.[0]?.username }}</div>
           </div>
           <div class="desc">{{ iten?.name }}</div>
         </div>

src/views/h5/area/index.vue

@@ -39,7 +39,7 @@
           >
             <div class="txt">CDN</div>
           </div>
-          <div class="txt">{{ iten?.users?.[0].username }}</div>
+          <div class="txt">{{ iten?.users?.[0]?.username }}</div>
         </div>
         <div class="desc">{{ iten?.name }}</div>
       </div>

src/views/h5/index.vue

@@ -36,7 +36,8 @@
               class="cover"
               :style="{
                 backgroundImage: `url('${
-                  iten.live_room?.cover_img || iten.live_room?.users?.[0].avatar
+                  iten.live_room?.cover_img ||
+                  iten.live_room?.users?.[0]?.avatar
                 }')`,
               }"
             >

src/views/h5/room/index.vue

@@ -152,7 +152,7 @@
             <div>名称：{{ appStore.liveRoomInfo?.name }}</div>
             <div>简介：{{ appStore.liveRoomInfo?.desc }}</div>
             <div>
-              分区：{{ appStore.liveRoomInfo?.areas?.[0].name || '暂无分区' }}
+              分区：{{ appStore.liveRoomInfo?.areas?.[0]?.name || '暂无分区' }}
             </div>
           </div>
         </n-tab-pane>

src/views/profile/index.vue

@@ -16,9 +16,7 @@
       class="username"
       v-if="userStore.userInfo"
     >
-      用户角色：{{
-        userStore.userInfo?.roles?.map((item) => item.role_name).join(',')
-      }}
+      用户角色：{{ userInfo?.roles?.map((item) => item.role_name).join(',') }}
     </div>
     <br />
     <div class="pull-url">
@@ -39,19 +37,21 @@
         <div>
           直播间地址：
           <a
-            :href="getLiveRoomPageUrl(userInfo?.live_rooms?.[0].id!)"
+            :href="getLiveRoomPageUrl(userInfo?.live_rooms?.[0]?.id!)"
             class="link"
             target="_blank"
           >
-            {{ getLiveRoomPageUrl(userInfo?.live_rooms?.[0].id!) }}
+            {{ getLiveRoomPageUrl(userInfo?.live_rooms?.[0]?.id!) }}
           </a>
         </div>
-        <div>直播间名称：{{ userInfo?.live_rooms?.[0].name }}</div>
+        <div>直播间名称：{{ userInfo?.live_rooms?.[0]?.name }}</div>
         <div>
-          直播间简介：{{ userInfo?.live_rooms?.[0].desc || '暂无简介' }}
+          直播间简介：{{ userInfo?.live_rooms?.[0]?.desc || '暂无简介' }}
         </div>
         <div>
-          直播间分区：{{ userInfo.live_rooms[0].areas?.[0].name || '暂无分区' }}
+          直播间分区：{{
+            userInfo.live_rooms[0]?.areas?.[0]?.name || '暂无分区'
+          }}
         </div>
         <div
           v-if="
@@ -63,22 +63,44 @@
           class="rtmp-url-wrap"
           v-loading="updateKeyLoading"
         >
-          <div>
-            <span>RTMP推流地址：{{ pushRes?.push_rtmp_url! }}，</span>
+          <div
+            class="link"
+            @click="handleUpdateKey"
+          >
+            更新地址
+          </div>
+          <div
+            v-if="
+              userStore.userInfo?.auths?.find(
+                (v) =>
+                  v.auth_value === DEFAULT_AUTH_INFO.LIVE_PULL_SVIP.auth_value
+              )
+            "
+          >
+            <span>
+              CDN推流地址：{{ handleReplaceCDNUrl(pushRes?.push_rtmp_url!) }}，
+            </span>
             <span
               class="link"
-              @click="handleCopy(pushRes?.push_rtmp_url!)"
+              @click="handleCopy(handleReplaceCDNUrl(pushRes?.push_rtmp_url!))"
             >
               复制
             </span>
-            <span>，</span>
+          </div>
+          <div>
+            <span>
+              RTMP推流地址：{{
+                handleReplaceRtmpUrl(pushRes?.push_rtmp_url!)
+              }}，
+            </span>
             <span
               class="link"
-              @click="handleUpdateKey"
+              @click="handleCopy(handleReplaceRtmpUrl(pushRes?.push_rtmp_url!))"
             >
-              更新
+              复制
             </span>
           </div>
+
           <div>
             <span>OBS服务器：{{ pushRes?.push_obs_server! }}，</span>
             <span
@@ -145,6 +167,17 @@ watch(
   { immediate: true }
 );
 
+function handleReplaceCDNUrl(url: string) {
+  const reg = /pushtype=([0-9]+)/g;
+  console.log(url.replace(reg, 'pushtype=3'));
+  return url.replace(reg, `pushtype=${LiveRoomTypeEnum.tencent_css}`);
+}
+function handleReplaceRtmpUrl(url: string) {
+  const reg = /pushtype=([0-9]+)/g;
+  console.log(url.replace(reg, 'pushtype=3'));
+  return url.replace(reg, `pushtype=${LiveRoomTypeEnum.obs}`);
+}
+
 async function handleUserInfo() {
   try {
     getUserLoading.value = true;

src/views/pull/index.vue

@@ -55,11 +55,11 @@
                 @click="
                   router.push({
                     name: routerName.area,
-                    query: { id: appStore.liveRoomInfo?.areas?.[0].id },
+                    query: { id: appStore.liveRoomInfo?.areas?.[0]?.id },
                   })
                 "
               >
-                {{ appStore.liveRoomInfo?.areas?.[0].name }}
+                {{ appStore.liveRoomInfo?.areas?.[0]?.name }}
               </span>
             </div>
           </div>

src/views/push/index.vue

@@ -907,10 +907,10 @@ onUnmounted(() => {
 });
 
 async function initUserMedia() {
-  const res1 = await handleUserMedia({ video: true, audio: false });
-  console.log('初始化获取摄像头成功');
+  const res1 = await handleUserMedia({ video: true, audio: true });
+  console.log('初始化获取摄像头成功', res1);
   const res2 = await handleUserMedia({ video: false, audio: true });
-  console.log('初始化获取麦克风成功');
+  console.log('初始化获取麦克风成功', res2);
   if (!res1 || !res2) {
     showOpenMicophoneTipCpt.value = true;
   }

src/views/rank/index.vue

@@ -259,7 +259,7 @@ async function getWalletList() {
             {
               id: item.user?.id,
               username: item.user?.username,
-              avatar: item.user?.avatar,
+              avatar: item.user?.avatar || '',
             },
           ],
           rank: index + 1,
@@ -295,9 +295,9 @@ async function getLiveRoomList() {
         return {
           users: [
             {
-              id: item.users?.[0].id,
-              username: item.users?.[0].username,
-              avatar: item.users?.[0].avatar,
+              id: item.users?.[0]?.id,
+              username: item.users?.[0]?.username,
+              avatar: item.users?.[0]?.avatar || '',
             },
           ],
           live: item,
@@ -334,7 +334,7 @@ async function getUserList() {
             {
               id: item.id,
               username: item.username,
-              avatar: item.avatar,
+              avatar: item.avatar || '',
             },
           ],
           rank: index + 1,
@@ -370,7 +370,7 @@ async function getSigninList() {
             {
               id: item.user?.id,
               username: item.user?.username,
-              avatar: item.user?.avatar,
+              avatar: item.user?.avatar || '',
             },
           ],
           rank: index + 1,