大屏项目初始化

screen-vue/src/components/Layout/editPswd.vue

@@ -15,13 +15,13 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onUnmounted, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const emit = defineEmits(['success'])
-
 const pwdFormRef = ref(null)
-
+const isMounted = ref(true)
+let submitPromise = null
 
 const pwdForm = reactive({
   oldPassword: '',
@@ -29,18 +29,16 @@ const pwdForm = reactive({
   confirmPassword: ''
 })
 
-// 表单验证规则
 const pwdRules = reactive({
   oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
   newPassword: [
     { required: true, message: '请输入新密码', trigger: 'blur' },
-    { min: 8, max: 20, message: '密码长度必须在8-20位之间', trigger: 'blur' },
-    { pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: 'blur' }
   ],
   confirmPassword: [
     { required: true, message: '请确认新密码', trigger: 'blur' },
     {
       validator: (rule, value, callback) => {
+        if (!isMounted.value) return callback()
         if (value === '') {
           callback(new Error('请确认新密码'))
         } else if (value !== pwdForm.newPassword) {
@@ -54,36 +52,82 @@ const pwdRules = reactive({
   ]
 })
 
-// 提交表单
 const submitForm = async () => {
-  if (!pwdFormRef.value) return
+  if (!isMounted.value || !pwdFormRef.value) return
-  try {
+  if (submitPromise) {
-    // 表单验证
+    submitPromise = null
-    const valid = await pwdFormRef.value.validate()
+    return
-    if (!valid) return
-    await ElMessageBox.confirm(
-      '确认要修改密码吗?',
-      '温馨提示',
-      { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }
-    )
-    await new Promise(resolve => setTimeout(resolve, 800))
-    emit('success')
-  } catch (error) {
-    if (error !== 'cancel' && !(error instanceof Error && error.message.includes('cancel'))) {
-      ElMessage.error(error.message || '密码修改失败，请稍后重试')
-    }
   }
+
+  submitPromise = new Promise(async (resolve) => {
+    try {
+      let valid = true
+      await pwdFormRef.value.validate().catch(() => {
+        valid = false
+        ElMessage.error('表单验证失败，请检查输入内容')
+      })
+
+      if (!valid || !isMounted.value) {
+        submitPromise = null
+        return resolve(false)
+      }
+
+      let confirmResult = false
+      await nextTick(async () => {
+        if (!isMounted.value) return
+        try {
+          await ElMessageBox.confirm(
+            '确认要修改密码吗?',
+            '温馨提示',
+            { 
+              confirmButtonText: '确认', 
+              cancelButtonText: '取消', 
+              type: 'warning',
+              closeOnClickModal: false,
+              showClose: false,
+              timeout: 0
+            }
+          )
+          confirmResult = true
+        } catch {
+          confirmResult = false
+        }
+      })
+
+      if (!confirmResult || !isMounted.value) {
+        submitPromise = null
+        return resolve(false)
+      }
+
+      await new Promise(res => setTimeout(res, 800))
+      if (isMounted.value) {
+        ElMessage.success('密码修改成功')
+        emit('success')
+        resolve(true)
+      }
+    } catch (error) {
+      if (isMounted.value) {
+        ElMessage.error(error.message || '密码修改失败，请稍后重试')
+      }
+      resolve(false)
+    } finally {
+      submitPromise = null
+    }
+  })
+
+  return submitPromise
 }
 
-// 重置表单
 const resetForm = () => {
-  if (pwdFormRef.value) {
+  if (!isMounted.value || !pwdFormRef.value) return
-    pwdFormRef.value.resetFields()
+  pwdFormRef.value.resetFields()
-    pwdForm.oldPassword = ''
-    pwdForm.newPassword = ''
-    pwdForm.confirmPassword = ''
-  }
 }
+
+onUnmounted(() => {
+  isMounted.value = false
+  submitPromise = null
+})
+
 defineExpose({ submitForm, resetForm })
 </script>
 
@@ -118,6 +162,7 @@ defineExpose({ submitForm, resetForm })
   color: #303133;
   font-weight: 500;
 }
+
 :deep(.el-input__wrapper) {
   padding: 0 10px;
   height: 32px !important;

screen-vue/src/components/Layout/index.vue

@@ -142,17 +142,16 @@
     <el-dialog
       v-model="showEditPwdDialog"
       title="修改密码"
-      width="30%"
+      width="35%"
       :close-on-click-modal="false"
       @close="handleEditPwdDialogClose"
       :before-close="handleDialogBeforeClose"
       class="custom-pwd-dialog"
     >
       <EditPswd ref="editPwdRef" @success="handlePwdModifySuccess" />
-      
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="default" @click="showEditPwdDialog = false">取消</el-button>
+          <el-button size="default" @click="closeEditPwdDialog">取消</el-button>
           <el-button size="default" type="primary" @click="submitEditPwd">确定</el-button>
         </div>
       </template>
@@ -161,7 +160,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
@@ -172,10 +171,9 @@ import { getHomeMenuList } from '@/api/bizMenu'
 import LogoImg from '@/assets/logo.png'
 import EditPswd from './editPswd.vue'
 
+const isMounted = ref(true)
 const systemTitle = ref("myPro管理系统")
-
+const LoginUser = ref(JSON.parse(localStorage.getItem("loginUser")) || {});
-const LoginUser = ref(JSON.parse(localStorage.getItem("loginUser")));
-
 const router = useRouter()
 const route = useRoute()
 
@@ -190,6 +188,7 @@ const showEditPwdDialog = ref(false)
 const editPwdRef = ref(null)
 
 const getMenuList = async () => {
+  if (!isMounted.value) return
   try {
     const res = await getHomeMenuList();
     menuList.value = res || [];
@@ -201,11 +200,12 @@ const getMenuList = async () => {
     }
     setMenuNameMap(menuList.value);
   } catch (error) {
-    ElMessage.error('获取菜单失败：' + (error.message || error));
+    ElMessage.error(error);
   }
 }
 
 const handleMenuClick = (menu) => {
+  if (!isMounted.value) return
   const key = menu.menuId;
   const name = menu.menuName;
   if (!tabs.value.some(tab => tab.key === key)) {
@@ -214,7 +214,9 @@ const handleMenuClick = (menu) => {
   activeTabKey.value = key;
   if (menu.path) {
     router.push(menu.path).catch(err => {
-      if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
+      if (!err.message.includes('NavigationDuplicated')) {
+        ElMessage.warning('路由跳转失败');
+      }
     });
   } else {
     ElMessage.info('该菜单暂无路由路径');
@@ -222,6 +224,7 @@ const handleMenuClick = (menu) => {
 }
 
 const switchTab = (tab) => {
+  if (!isMounted.value) return
   activeTabKey.value = tab.key;
   const findMenu = (menus, menuId) => {
     for (const menu of menus) {
@@ -236,12 +239,15 @@ const switchTab = (tab) => {
   const menu = findMenu(menuList.value, tab.key);
   if (menu && menu.path) {
     router.push(menu.path).catch(err => {
-      if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
+      if (!err.message.includes('NavigationDuplicated')) {
+        ElMessage.warning('路由跳转失败');
+      }
     });
   }
 }
 
 const closeTab = (key) => {
+  if (!isMounted.value) return
   const idx = tabs.value.findIndex(tab => tab.key === key);
   if (idx === -1) return;
   if (activeTabKey.value === key) {
@@ -257,7 +263,12 @@ const closeTab = (key) => {
 }
 
 const closeAllTabs = () => {
-  ElMessageBox.confirm('确定关闭所有标签页?', '提示', { type: 'warning' }).then(() => {
+  if (!isMounted.value) return
+  ElMessageBox.confirm('确定关闭所有标签页?', '提示', { 
+    type: 'warning',
+    closeOnClickModal: false,
+    showClose: false
+  }).then(() => {
     tabs.value = [];
     switchToHome();
     ElMessage.success('已关闭所有标签页');
@@ -265,25 +276,33 @@ const closeAllTabs = () => {
 }
 
 const switchToHome = () => {
+  if (!isMounted.value) return
   activeTabKey.value = 'dashboard';
   router.push('/dashboard').catch(err => {
-    if (!err.message.includes('NavigationDuplicated')) ElMessage.warning('路由跳转失败');
+    if (!err.message.includes('NavigationDuplicated')) {
+      ElMessage.warning('路由跳转失败');
+    }
   });
 }
 
 const scrollTab = (dir) => {
+  if (!isMounted.value) return
   const el = tabsScrollRef.value;
   if (el && tabs.value.length > 0) {
     const scrollBox = el.querySelector('.dynamic-tabs');
-    if (scrollBox) scrollBox.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' });
+    if (scrollBox) {
+      scrollBox.scrollBy({ left: dir === 'left' ? -200 : 200, behavior: 'smooth' });
+    }
   }
 }
 
 const toggleSidebar = () => {
+  if (!isMounted.value) return
   isCollapse.value = !isCollapse.value;
 }
 
 const handleFullScreen = () => {
+  if (!isMounted.value) return
   try {
     if (!document.fullscreenElement) {
       document.documentElement.requestFullscreen();
@@ -293,59 +312,85 @@ const handleFullScreen = () => {
       ElMessage.success('已退出全屏模式');
     }
   } catch (error) {
-    ElMessage.error('全屏操作失败：' + error.message);
+    ElMessage.error(error);
   }
 }
 
 const handleBigScreen = () => {
+  if (!isMounted.value) return
   const baseUrl = window.location.origin + "/bigScreen";
   window.open(baseUrl, '_blank');
 }
 
 const handleCommand = (cmd) => {
+  if (!isMounted.value) return
   if (cmd === 'logout') {
-    ElMessageBox.confirm('确定退出系统吗?', '退出确认', { type: 'info' })
+    ElMessageBox.confirm('确定退出系统吗?', '退出确认', { 
-      .then(() => {
+      type: 'info',
-        localStorage.removeItem('loginUser');
+      closeOnClickModal: false,
-        localStorage.removeItem('token');
+      showClose: false
-        ElMessage.success('退出成功');
+    })
-        router.push('/login');
+    .then(() => {
-      })
+      localStorage.removeItem('loginUser');
-      .catch(() => {
+      localStorage.removeItem('token');
-        ElMessage.info('用户取消退出系统');
+      ElMessage.success('退出成功');
-      });
+      router.push('/login');
+    })
+    .catch(() => {
+      ElMessage.info('用户取消退出系统');
+    });
   }
   
   if (cmd === 'modifyPwd') {
-    showEditPwdDialog.value = true;
+    nextTick(() => {
+      showEditPwdDialog.value = true;
+    });
   }
 }
 
+const closeEditPwdDialog = () => {
+  if (!isMounted.value) return
+  showEditPwdDialog.value = false;
+  nextTick(() => {
+    if (editPwdRef.value) {
+      editPwdRef.value.resetForm();
+    }
+  });
+}
+
 const handleEditPwdDialogClose = () => {
-  showEditPwdDialog.value = false;
+  closeEditPwdDialog();
-  if (editPwdRef.value) {
-    editPwdRef.value.resetForm();
-  }
 }
 
 const handleDialogBeforeClose = (done) => {
-  done();
+  nextTick(() => {
+    done();
+  });
 }
 
 const submitEditPwd = () => {
-  if (editPwdRef.value) {
+  if (!isMounted.value || !editPwdRef.value || !showEditPwdDialog.value) return
-    editPwdRef.value.submitForm();
+  editPwdRef.value.submitForm().catch(err => {
-  }
+    if (err && !err.message.includes('cancel')) {
+      ElMessage.error(err.message);
+    }
+  });
 }
 
 const handlePwdModifySuccess = () => {
-  showEditPwdDialog.value = false;
+  if (!isMounted.value) return
+  closeEditPwdDialog();
   ElMessage.success('密码修改成功，请重新登录');
 }
 
+onUnmounted(() => {
+  isMounted.value = false
+})
+
 onMounted(() => {
   getMenuList();
   watch(() => route.path, (newPath) => {
+    if (!isMounted.value) return
     activeTabKey.value = newPath === '/dashboard' ? 'dashboard' : route.params.menuId || activeTabKey.value;
   }, { immediate: true });
 })
@@ -376,7 +421,7 @@ onMounted(() => {
   --tab-radius: 14px;
   --tab-padding: 0 12px;
   --divider-color: #e6e6e6;
-  --header-bg-color: #c6e2ff; /* 统一头部背景色变量 */
+  --header-bg-color: #c6e2ff;
 }
 
 .app-header {
@@ -400,7 +445,7 @@ onMounted(() => {
   font-weight: 600;
   color: var(--primary-color);
   letter-spacing: 1px;
-  line-height: 45px; /* 与logo图片高度一致，保证垂直居中 */
+  line-height: 45px;
 }
 
 .header-right {
@@ -414,10 +459,9 @@ onMounted(() => {
   height: 40px;
   color: #333 !important;
   border-radius: 4px;
-  transition: all 0.2s; /* 统一过渡效果 */
+  transition: all 0.2s;
 }
 
-/* 核心修改：悬浮背景色与头部背景色一致 */
 .header-icon-btn:hover {
   background: var(--header-bg-color) !important;
   color: var(--primary-color) !important;