perf(views): 完成退出，修改密码功能

src/layout/HvacAside.vue

@@ -7,10 +7,12 @@ import Simplebar from 'simplebar-vue';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { dataCenterRoutes, opsCenterRoutes } from '@/router';
 import { t } from '@/i18n';
-import { getNoticePageList, getPageList, getUnreadNotifications } from '@/api';
+import { addRevisePassword, getNoticePageList, getPageList, getUnreadNotifications } from '@/api';
 import { translateNavigation } from '@/utils';
+import { removeToken } from '@/utils/auth';
 
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
@@ -18,6 +20,8 @@ import type { ChangePasswordForm, DeviceGroupItem, NoticePageItem, PageParams }
 
 const router = useRouter();
 const route = useRoute();
+const { resetToken } = useUserInfoStore();
+
 const menuRef = useTemplateRef('menu');
 const selectedKeys = ref<string[]>([route.path]);
 const openKeys = ref<string[]>([]);
@@ -28,9 +32,9 @@ const messageList = ref<NoticePageItem[]>([]);
 const formRef = ref<FormInstance>();
 const modalComponentRef = useTemplateRef('modalComponent');
 const changePasswordForm = ref<ChangePasswordForm>({
-  name: '',
-  name1: '',
-  name2: '',
+  rawPassword: '',
+  oldRawPassword: '',
+  confirmPassword: '',
 });
 const messageParam = ref<PageParams>({
   pageIndex: 1,
@@ -54,14 +58,14 @@ const menuGroupList = computed(() => {
 });
 
 const rules: Record<string, Rule[]> = {
-  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  name1: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  name2: [
+  rawPassword: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  oldRawPassword: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  confirmPassword: [
     { required: true, message: t('common.cannotEmpty'), trigger: 'change' },
     {
       validator: (_rule: unknown, value: string) => {
-        if (changePasswordForm.value.name1 !== value) {
-          return Promise.reject('确定新密码错误！');
+        if (changePasswordForm.value.rawPassword !== value) {
+          return Promise.reject(t('hcacAside.newPasswordError'));
         }
         return Promise.resolve();
       },
@@ -71,25 +75,25 @@ const rules: Record<string, Rule[]> = {
 
 const messageColumns = [
   {
-    title: '报警内容',
+    title: t('alarmManage.alarmContent'),
     dataIndex: 'content',
     key: 'content',
     ellipsis: true,
   },
   {
-    title: '二级设备分组/事件名称',
+    title: t('hcacAside.deviceEventName'),
     dataIndex: 'name',
     key: 'name',
     ellipsis: true,
   },
   {
-    title: '设备/监测点',
+    title: t('hcacAside.deviceMonitoringPoint'),
     dataIndex: 'dev',
     key: 'dev',
     ellipsis: true,
   },
   {
-    title: '时间',
+    title: t('common.time'),
     dataIndex: 'createTime',
     key: 'createTime',
     ellipsis: true,
@@ -202,6 +206,9 @@ const clickExit = () => {
   modalComponentRef.value?.showView();
 };
 const confirm = () => {
+  removeToken();
+  resetToken();
+  router.push('/login');
   modalComponentRef.value?.hideView();
 };
 
@@ -210,15 +217,24 @@ const changePassword = () => {
 };
 const handleClose = () => {
   changePasswordForm.value = {
-    name: '',
-    name1: '',
-    name2: '',
+    rawPassword: '',
+    oldRawPassword: '',
+    confirmPassword: '',
   };
   formRef.value?.resetFields();
 };
 const bindingPassword = () => {
   formRef.value?.validate().then(() => {
-    changePasswordOpen.value = false;
+    handleRequest(async () => {
+      const { rawPassword, oldRawPassword } = changePasswordForm.value;
+      await addRevisePassword({
+        rawPassword,
+        oldRawPassword,
+      });
+      message.success(t('common.modifySuccess'));
+      confirm();
+      changePasswordOpen.value = false;
+    });
   });
 };
 </script>
@@ -303,14 +319,21 @@ const bindingPassword = () => {
       <SvgIcon name="unfold" @click="toggleCollapsed" />
     </div>
     <div class="aside-footer">
-      <ADropdown overlay-class-name="hvac-dropdown" placement="topLeft" :align="{ offset: [0, -30] }">
+      <ADropdown
+        overlay-class-name="hvac-dropdown"
+        placement="topLeft"
+        :align="{ offset: [0, -30] }"
+        :trigger="['click']"
+      >
         <div class="aside-footer-avatar" @click.prevent></div>
         <template #overlay>
           <AMenu>
             <AMenuItem>
               <div @click="changePassword">
                 <AFlex class="hvac-item" justify="space-between" align="center">
-                  <AFlex align="center"><SvgIcon class="icon-style" name="edit-o" /> 修改密码</AFlex>
+                  <AFlex align="center"
+                    ><SvgIcon class="icon-style" name="edit-o" /> {{ t('hcacAside.changePassword') }}</AFlex
+                  >
                   <SvgIcon name="right"
                 /></AFlex>
               </div>
@@ -318,7 +341,9 @@ const bindingPassword = () => {
             <AMenuDivider />
             <AMenuItem>
               <div @click="clickExit">
-                <AFlex class="hvac-item" align="center"> <SvgIcon name="edit-o" class="icon-style" /> 退出登陆 </AFlex>
+                <AFlex class="hvac-item" align="center">
+                  <SvgIcon name="a-log-out" class="icon-style" /> {{ t('hcacAside.logout') }}
+                </AFlex>
               </div>
             </AMenuItem>
           </AMenu>
@@ -337,7 +362,13 @@ const bindingPassword = () => {
       </div>
     </div>
   </ALayoutSider>
-  <AModal v-model:open="messageOpen" title="消息中心" width="926px" :footer="null" :keyboard="false">
+  <AModal
+    v-model:open="messageOpen"
+    :title="t('hcacAside.messageCenter')"
+    width="926px"
+    :footer="null"
+    :keyboard="false"
+  >
     <ATable class="table-margin" :columns="messageColumns" :data-source="messageList" :pagination="false">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'name'">
@@ -369,7 +400,7 @@ const bindingPassword = () => {
   </AModal>
   <AModal
     v-model:open="changePasswordOpen"
-    title="修改密码"
+    :title="t('hcacAside.changePassword')"
     width="460px"
     :footer="null"
     :mask-closable="false"
@@ -386,14 +417,26 @@ const bindingPassword = () => {
       class="form-style"
     >
       <AFlex :vertical="true">
-        <AFormItem label="原密码" name="name">
-          <AInput class="input-width" v-model:value="changePasswordForm.name" placeholder="请输入原密码" />
+        <AFormItem :label="t('hcacAside.originalPassword')" name="oldRawPassword">
+          <AInput
+            class="input-width"
+            v-model:value="changePasswordForm.oldRawPassword"
+            :placeholder="t('hcacAside.pleaseEnterOriginalPassword')"
+          />
         </AFormItem>
-        <AFormItem label="新密码" name="name1">
-          <AInput class="input-width" v-model:value="changePasswordForm.name1" placeholder="请输入新密码" />
+        <AFormItem :label="t('hcacAside.newPassword')" name="rawPassword">
+          <AInput
+            class="input-width"
+            v-model:value="changePasswordForm.rawPassword"
+            :placeholder="t('hcacAside.pleaseEnterNewPassword')"
+          />
         </AFormItem>
-        <AFormItem label="确认新密码" name="name2">
-          <AInput class="input-width" v-model:value="changePasswordForm.name2" placeholder="请输入新密码" />
+        <AFormItem :label="t('hcacAside.confirmNewPassword')" name="confirmPassword">
+          <AInput
+            class="input-width"
+            v-model:value="changePasswordForm.confirmPassword"
+            :placeholder="t('hcacAside.pleaseEnterNewPassword')"
+          />
         </AFormItem>
       </AFlex>
     </AForm>
@@ -402,14 +445,14 @@ const bindingPassword = () => {
       <AButton class="button-style" type="primary" ghost @click="changePasswordOpen = false">{{
         $t('common.cancel')
       }}</AButton>
-      <AButton class="button-style" type="primary" @click="bindingPassword">确定</AButton>
+      <AButton class="button-style" type="primary" @click="bindingPassword">{{ t('common.certain') }}</AButton>
     </AFlex>
   </AModal>
   <ConfirmModal
     ref="modalComponent"
     :title="t('common.exitConfirmation')"
     :description-text="t('common.confirmExitPrompt')"
-    :icon="{ name: 'delete' }"
+    :icon="{ name: 'a-log-out' }"
     :icon-bg-color="'#F56C6C'"
     @confirm="confirm"
   />

src/types/index.ts

@@ -2677,7 +2677,12 @@ export interface loginForm {
 }
 
 export interface ChangePasswordForm {
-  name: string;
-  name1: string;
-  name2: string;
+  rawPassword: string;
+  oldRawPassword: string;
+  confirmPassword: string;
+}
+
+export interface PasswordParams {
+  rawPassword: string;
+  oldRawPassword: string;
 }