Feat: add str length limit

src/utils/utils.ts

@@ -1,3 +1,5 @@
+import { ElMessage } from "element-plus";
+
 export const getFileExtension = (url: string) => {
   const match = url.match(/\.([a-z0-9]+)(?:[\?#]|$)/i);
   if (match) {
@@ -53,3 +55,12 @@ export const deepEqualObject = (obj1: any, obj2: any) => {
     return false;
   }
 };
+
+export const strLengthLimit = (str: any, num: number) => {
+  if (typeof str !== "string") return;
+  if (str.length > num)
+    throw ElMessage({
+      type: "error",
+      message: `输入框内容过长，单个输入框最大不可超过${num}个字符！`
+    });
+};

src/views/Cinema.vue

@@ -25,6 +25,7 @@ import { WsMessageType } from "@/types/Room";
 import { getFileExtension, devLog } from "@/utils/utils";
 import { sync } from "@/plugins/sync";
 import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
+import { strLengthLimit } from "@/utils/utils";
 
 const watchers: WatchStopHandle[] = [];
 onBeforeUnmount(() => {
@@ -60,6 +61,7 @@ const { status, data, send, close } = useWebSocket(
 const { state: newToken, execute: reqUpdateRoomPasswordApi } = updateRoomPasswordApi();
 const changePassword = async () => {
   try {
+    strLengthLimit(password, 32);
     await reqUpdateRoomPasswordApi({
       data: {
         password: password
@@ -317,6 +319,9 @@ const pushMovie = async (dir: string) => {
   }
 
   try {
+    for (const key in newMovieInfo.value) {
+      strLengthLimit(key, 32);
+    }
     await reqPushMovieApi({
       params: {
         pos: dir
@@ -385,6 +390,9 @@ const openEditDialog = (item: MovieInfo) => {
 const { isLoading: editMovieInfoLoading, execute: reqEditMovieInfoApi } = editMovieInfoApi();
 const editMovieInfo = async () => {
   try {
+    for (const key in cMovieInfo.value) {
+      strLengthLimit(key, 32);
+    }
     await reqEditMovieInfoApi({
       data: cMovieInfo.value,
       headers: { Authorization: localStorage.token }
@@ -466,7 +474,6 @@ const swapMovie = async () => {
 };
 
 // 设置当前正在播放的影片
-
 const { execute: reqChangeCurrentMovieApi } = changeCurrentMovieApi();
 const changeCurrentMovie = async (id: number) => {
   try {
@@ -639,6 +646,7 @@ const sendText = () => {
       message: "发送的消息不能为空",
       type: "warning"
     });
+  strLengthLimit(sendText_.value, 64);
   const msg = JSON.stringify({
     Type: 2,
     Message: sendText_.value,

src/views/CreateRoom.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { ElNotification } from "element-plus";
+import { ElNotification, ElMessage } from "element-plus";
 import { roomStore } from "@/stores/room";
 import router from "@/router/index";
 import { createRoomApi } from "@/services/apis/room";
+import { strLengthLimit } from "@/utils/utils";
 const room = roomStore();
 
 const { state: createRoomToken, execute: reqCreateRoomApi } = createRoomApi();
@@ -27,6 +28,9 @@ const operateRoom = async () => {
     return;
   }
   try {
+    for (const key in formData.value) {
+      strLengthLimit(key, 3);
+    }
     await reqCreateRoomApi({
       data: formData.value
     });

src/views/JoinRoom.vue

@@ -5,6 +5,7 @@ import { roomStore } from "@/stores/room";
 import router from "@/router/index";
 import { useRoute } from "vue-router";
 import { joinRoomApi } from "@/services/apis/room";
+import { strLengthLimit } from "@/utils/utils";
 const route = useRoute();
 const room = roomStore();
 
@@ -44,6 +45,9 @@ const JoinRoom = async () => {
     });
     return;
   }
+  for (const key in formData.value) {
+    strLengthLimit(key, 32);
+  }
   try {
     await reqJoinRoomApi({
       data: formData.value,
@@ -105,6 +109,7 @@ const JoinRoom = async () => {
       <br />
       <input class="l-input" type="password" v-model="formData.password" placeholder="房间密码" />
       <br />
+      <div><b>注意：</b>所有输入框最大只可输入32个字符</div>
       <div>
         <input class="w-auto" type="checkbox" v-model="savePwd" />
         <label title="明文保存到本机哦~">&nbsp;记住密码</label>