Merge branch 'ft-dev' into 'main'

fix: 修复视频管理关闭时还有声音问题,和清除控制台报黄问题, fix: 修复个人资料头像不全问题和限制用户名称问题

See merge request huang/yun-teng-iot-front!219

 import { FormSchema } from '/@/components/Table';
-import { phoneRule, emailRule } from '/@/utils/rules';
+import { phoneRule, emailRule, ChineseRegVerify } from '/@/utils/rules';
 
 export const formSchema: FormSchema[] = [
   {
@@ -9,8 +9,10 @@ export const formSchema: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
+      maxLength: 10,
       placeholder: '请输入用户昵称',
     },
+    rules: ChineseRegVerify,
   },
   {
     field: 'phoneNumber',

@@ -24,28 +24,29 @@
         >
         <div class="change-avatar" style="text-align: center">
           <div class="mb-2" style="font-weight: 700">个人头像</div>
-          <div style="text-align: center; width: 100%">
-            <Upload
-              style="width: 20vw"
-              name="avatar"
-              list-type="picture-card"
-              class="avatar-uploader"
-              :show-upload-list="false"
-              :customRequest="customUploadqrcodePic"
-              :before-upload="beforeUploadqrcodePic"
-            >
-              <img
-                style="text-align: center; border-radius: 50%"
-                v-if="peresonalPic"
-                :src="peresonalPic"
-                alt="avatar"
-              />
-              <div v-else>
-                <div style="margin-top: 5.2vh; margin-left: 3.21vw">
-                  <PlusOutlined style="font-size: 30px" />
+          <div style="display: flex; align-items: center; justify-content: center; width: 35.6rem">
+            <div>
+              <Upload
+                name="avatar"
+                list-type="picture-card"
+                class="avatar-uploader"
+                :show-upload-list="false"
+                :customRequest="customUploadqrcodePic"
+                :before-upload="beforeUploadqrcodePic"
+              >
+                <img
+                  style="border-radius: 50%; height: 8.75rem; width: 10rem"
+                  v-if="peresonalPic"
+                  :src="peresonalPic"
+                  alt="avatar"
+                />
+                <div v-else>
+                  <div style="margin-top: 5.2vh; margin-left: 3.21vw">
+                    <PlusOutlined style="font-size: 30px" />
+                  </div>
                 </div>
-              </div>
-            </Upload>
+              </Upload>
+            </div>
           </div>
         </div>
         <Description
@@ -245,22 +246,9 @@
 <style scoped lang="less">
   .change-avatar {
     :deep .ant-upload-select-picture-card {
-      display: inherit;
-      float: none;
-      width: 35%;
-      height: 0;
-      padding-bottom: 35%;
-      margin: 0;
-
-      // width: 8.6vw;
-      // height: 17vh;
-      // margin-right: 0.2vw;
-      // margin-bottom: 0.2vw;
-      text-align: center;
-      vertical-align: top;
-      background-color: #fafafa;
-      border: 1px dashed #d9d9d9;
       border-radius: 50%;
+      width: 10rem;
+      overflow: hidden;
       cursor: pointer;
       transition: border-color 0.3s ease;
     }

@@ -65,6 +65,21 @@ export const EmailRegexp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a
 // 手机号正则
 export const PhoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
 
+//中文正则
+export const ChineseRegVerify: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const ChineseRegexp = /[\u4E00-\u9FA5]/;
+      if (!ChineseRegexp.test(value)) {
+        return Promise.reject('用户名只能是中文');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];
+
 /**
  * 视频管理
  */

@@ -11,7 +11,7 @@
     >
       <div class="video-sty">
         <div>
-          <vue3videoPlay v-bind="options" :poster="videoPoster" />
+          <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" />
         </div>
       </div>
     </BasicModal>
@@ -32,11 +32,14 @@
     emits: ['success', 'register'],
     setup() {
       let options: any = reactive({});
+      const videoRef: any = ref(null);
+      const videoUrl = ref<String>('');
       const videoPoster = ref('');
       const heightNum = ref(800);
       const [register] = useModalInner(async (data) => {
         if (data) {
           if (data.record.videoUrl) {
+            videoUrl.value = data.record.videoUrl;
             nextTick(() => {
               /**
                * options配置项(使用vue3-video-play插件)
@@ -73,13 +76,18 @@
           }
         }
       });
-      const handleCancel = () => {};
+      const handleCancel = () => {
+        //关闭暂停播放视频
+        videoRef.value.pause();
+      };
       return {
         register,
         handleCancel,
         options,
         heightNum,
         videoPoster,
+        videoRef,
+        videoUrl,
       };
     },
   });

@@ -2,7 +2,6 @@
   <div>
     <BasicTable
       :rowSelection="{ type: 'checkbox' }"
-      @selection-change="useSelectionChange"
       @register="registerTable"
       :clickToRowSelect="false"
     >