fix: 解决错误

src/components/NavMenu.vue

+<template>
+  <div class="nav-menu">
+    <div class="header-logo">
+      <img src="../assets/images/factory-logo.png" alt="logo" />
+    </div>
+    <!-- 导航栏 -->
+    <el-menu
+      class="el-menu-demo"
+      mode="horizontal"
+      background-color="#001529"
+      text-color="#fff"
+      :default-active="defaultActive"
+      router
+    >
+      <template v-for="item in menuList">
+        <el-menu-item
+          v-if="!item.children"
+          :key="item.id"
+          :index="item.index"
+          >{{ item.label }}</el-menu-item
+        >
+        <el-sub-menu v-else :key="item.index" :index="item.index">
+          <template #title>
+            <span class="label">{{ item.label }}</span>
+          </template>
+          <el-menu-item
+            v-for="sub in item.children"
+            :key="sub.id"
+            :index="sub.index"
+            >{{ sub.label }}</el-menu-item
+          >
+        </el-sub-menu>
+      </template>
+    </el-menu>
+    <div v-if="userInfo" class="user-info">
+      <span class="user-avatar">
+        <el-icon><User /></el-icon>
+      </span>
+      <el-dropdown style="color: #fff; font-size: 14px">
+        <span class="el-dropdown-link">
+          <el-icon style="vertical-align: middle"><User /></el-icon>
+          {{ userInfo.account }}
+          <el-icon style="vertical-align: middle" class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="resetPassword">修改密码</el-dropdown-item>
+            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="修改密码"
+    width="30%"
+    :close-on-click-modal="false"
+    @opened="onPasswordDialogOpened"
+  >
+    <ElForm
+      ref="passwordFormRef"
+      :model="passwordForm"
+      :rules="rules"
+      label-width="80px"
+    >
+      <ElFormItem label="原密码" prop="oldPwd">
+        <ElInput
+          v-model="passwordForm.oldPwd"
+          type="password"
+          clearable
+          placeholder="请输入原密码"
+        />
+      </ElFormItem>
+      <ElFormItem label="新密码" prop="newPwd">
+        <ElInput
+          v-model="passwordForm.newPwd"
+          type="password"
+          clearable
+          placeholder="请输入新密码"
+        />
+      </ElFormItem>
+      <ElFormItem label="确认密码" prop="confirmPwd">
+        <ElInput
+          v-model="passwordForm.confirmPwd"
+          type="password"
+          clearable
+          placeholder="请再次输入密码"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <span class="dialog-footer">
+        <ElButton @click="dialogVisible = false">取消</ElButton>
+        <ElButton type="primary" @click="submitForm">确定</ElButton>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { User, ArrowDown } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import Menu from '@/router/menu'
+import userUserStore from '@/store/user'
+import type { FormRules } from 'element-plus'
+import { useValue } from '@/utils/hooks/useValue'
+import { showError } from '@/utils/ui'
+import { changePasswordApi } from '@/api/auth'
+interface PasswordForm {
+  oldPwd: string
+  newPwd: string
+  confirmPwd?: string
+}
+const route = useRoute()
+const defaultActive = ref(route.path)
+const menuList = reactive(Menu)
+
+const userStore = userUserStore()
+const userInfo = userStore.user
+const dialogVisible = ref(false)
+// 密码form
+const [passwordForm, resetPasswordForm] = useValue<PasswordForm>({} as PasswordForm)
+const passwordFormRef = ref()
+const rules = reactive<FormRules<PasswordForm>>({
+  oldPwd: [
+    {
+      required: true,
+      message: '请输入原密码',
+    },
+  ],
+  newPwd: [
+    {
+      required: true,
+      message: '请输入新密码',
+    },
+  ],
+  confirmPwd: [
+    {
+      required: true,
+      message: '请再次输入密码',
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== passwordForm.value.newPwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+})
+
+const logout = () => {
+  userStore.logout()
+  window.location.reload()
+}
+const resetPassword = () => {
+  dialogVisible.value = true
+  resetPasswordForm()
+}
+const onPasswordDialogOpened = () => {
+  passwordFormRef.value.clearValidate()
+}
+
+const submitForm = async () => {
+  try {
+    await passwordFormRef.value.validate()
+  } catch {
+    return
+  }
+  try {
+     const res = await changePasswordApi(passwordForm.value)
+     ElMessage({
+       message: res.message,
+       type: 'success',
+       offset: window.innerHeight / 2,
+     })
+     dialogVisible.value = false
+     userStore.logout()
+     window.location.reload()
+  } catch (e) {
+    showError(e)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.nav-menu {
+  height: 60px;
+  background-color: #001529;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+}
+
+.el-menu-demo {
+  flex: 1;
+  height: 100%;
+  border-bottom: none;
+  margin-left: 20px;
+  :deep(.el-menu-item) {
+    border-bottom: none !important;
+  }
+  :deep(.el-menu-item.is-active) {
+    background-color: #409eff !important;
+    color: #fff !important;
+    border: none !important;
+  }
+}
+</style>