修改用户密码.

orion-ops-ui/src/components/app/navbar/index.vue

@@ -38,15 +38,15 @@
         <a-tooltip content="语言">
           <a-button class="nav-btn"
                     type="outline"
-                    :shape="'circle'"
-                    @click="setUserInfoVisible">
+                    shape="circle"
+                    @click="setLocalesVisible">
             <template #icon>
               <icon-language />
             </template>
           </a-button>
         </a-tooltip>
         <a-dropdown trigger="click" @select="changeLocale">
-          <div ref="refUserInfoTrigger" class="trigger-btn" />
+          <div ref="localeRef" class="trigger-btn" />
           <template #content>
             <a-doption v-for="item in locales"
                        :key="item.value"
@@ -66,7 +66,7 @@
               : '点击切换为亮色模式'">
           <a-button class="nav-btn"
                     type="outline"
-                    :shape="'circle'"
+                    shape="circle"
                     @click="handleToggleTheme">
             <template #icon>
               <icon-moon-fill v-if="theme === 'dark'" />
@@ -82,7 +82,7 @@
             <a-badge :count="9" dot>
               <a-button class="nav-btn"
                         type="outline"
-                        :shape="'circle'"
+                        shape="circle"
                         @click="setMessageBoxVisible">
                 <icon-notification />
               </a-button>
@@ -93,7 +93,7 @@
                    :arrow-style="{ display: 'none' }"
                    :content-style="{ padding: 0, minWidth: '400px' }"
                    content-class="message-popover">
-          <div ref="refMessageBoxTrigger" class="ref-btn" />
+          <div ref="messageRef" class="ref-btn" />
           <template #content>
             <message-box />
           </template>
@@ -161,7 +161,7 @@
             </a-doption>
             <!-- 修改密码 -->
             <a-doption>
-              <a-space @click="$router.push({ name: 'userMine' })">
+              <a-space @click="() => updatePasswordRef.open()">
                 <icon-lock />
                 <span>修改密码</span>
               </a-space>
@@ -177,6 +177,8 @@
         </a-dropdown>
       </li>
     </ul>
+    <!-- 修改密码模态框-->
+    <update-password-modal ref="updatePasswordRef" @updated="handleLogout" />
   </div>
 </template>
 
@@ -192,25 +194,14 @@
   import MessageBox from '@/components/system/message-box/index.vue';
   import { openAppSettingKey, toggleDrawerMenuKey } from '@/types/symbol';
   import { preferenceTipsKey } from './const';
+  import UpdatePasswordModal from '@/components/user/role/update-password-modal.vue';
 
   const tipsStore = useTipsStore();
-  const tippedPreference = ref(tipsStore.isNotTipped(preferenceTipsKey));
   const appStore = useAppStore();
   const userStore = useUserStore();
   const { logout } = useUser();
   const { changeLocale, currentLocale } = useLocale();
   const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
-  const locales = [...LOCALE_OPTIONS];
-  const nickname = computed(() => {
-    return userStore.nickname?.substring(0, 1);
-  });
-  const topMenu = computed(() => appStore.topMenu && appStore.menu);
-
-  // 当前主题
-  const theme = computed(() => {
-    return appStore.theme;
-  });
-
   // 主题
   const darkTheme = useDark({
     selector: 'body',
@@ -225,24 +216,42 @@
     },
   });
 
+  // 用户名
+  const nickname = computed(() => userStore.nickname?.substring(0, 1));
+  // 是否展示顶部菜单
+  const topMenu = computed(() => appStore.topMenu && appStore.menu);
+  // 当前主题
+  const theme = computed(() => appStore.theme);
+
+  const locales = [...LOCALE_OPTIONS];
+  // 偏好提示
+  const tippedPreference = ref(tipsStore.isNotTipped(preferenceTipsKey));
+  // 修改密码
+  const updatePasswordRef = ref();
+  // 消息
+  const messageRef = ref();
+  // 语言
+  const localeRef = ref();
+
+  // 打开应用设置
+  const openAppSetting = inject(openAppSettingKey) as () => void;
+
+  // 注入收缩菜单
+  const toggleDrawerMenu = inject(toggleDrawerMenuKey) as () => void;
+
   // 切换主题
   const handleToggleTheme = () => {
     useToggle(darkTheme)();
   };
 
-  // 打开应用设置
-  const openAppSetting = inject(openAppSettingKey) as () => void;
-
-  // 消息触发器 ref
-  const refMessageBoxTrigger = ref();
+  // 打开消息
   const setMessageBoxVisible = () => {
-    triggerMouseEvent(refMessageBoxTrigger);
+    triggerMouseEvent(messageRef);
   };
 
-  // 个人信息触发器 ref
-  const refUserInfoTrigger = ref();
-  const setUserInfoVisible = () => {
-    triggerMouseEvent(refUserInfoTrigger);
+  // 打开语言切换
+  const setLocalesVisible = () => {
+    triggerMouseEvent(localeRef);
   };
 
   // 退出登录
@@ -250,9 +259,6 @@
     logout();
   };
 
-  // 注入收缩菜单
-  const toggleDrawerMenu = inject(toggleDrawerMenuKey) as () => void;
-
   // 关闭偏好提示
   const closePreferenceTip = (ack: boolean) => {
     tippedPreference.value = false;

orion-ops-ui/src/components/meta/history/history-value-modal.vue

@@ -80,10 +80,11 @@
 
 <script lang="ts" setup>
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import type { HistoryValueQueryRequest, HistoryValueQueryResponse } from '@/api/meta/history-value';
   import { reactive, ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
-  import { getHistoryValuePage, HistoryValueQueryRequest, HistoryValueQueryResponse } from '@/api/meta/history-value';
+  import { getHistoryValuePage } from '@/api/meta/history-value';
   import { usePagination } from '@/types/table';
   import useCopy from '@/hooks/copy';
   import { dateFormat } from '@/utils';

orion-ops-ui/src/components/user/role/update-password-modal.vue

@@ -0,0 +1,135 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           title="重置密码"
+           :top="120"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :rules="rules"
+              :style="{ width: '460px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }">
+        <!-- 密码 -->
+        <a-form-item field="beforePassword" label="原始密码">
+          <a-input-password v-model="formModel.beforePassword" placeholder="请输入原始密码" />
+        </a-form-item>
+        <!-- 密码 -->
+        <a-form-item field="password" label="新密码">
+          <a-input-password v-model="formModel.password" placeholder="请输入新密码" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'update-password-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { UserUpdatePasswordRequest } from '@/api/user/auth';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { Message } from '@arco-design/web-vue';
+  import { md5 } from '@/utils';
+  import { updatePassword } from '@/api/user/auth';
+
+  const emits = defineEmits(['updated']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const rules = {
+    beforePassword: [{
+      required: true,
+      message: '请输入原始密码'
+    }],
+    password: [{
+      required: true,
+      message: '请输入新密码'
+    }, {
+      minLength: 8,
+      maxLength: 32,
+      message: '新密码长度需要在 8-32 位之间'
+    }],
+  };
+
+  const formRef = ref();
+  const formModel = ref<UserUpdatePasswordRequest>({});
+
+  // 打开
+  const open = () => {
+    formModel.value = {
+      beforePassword: undefined,
+      password: undefined
+    };
+    setVisible(true);
+  };
+
+  defineExpose({ open });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      // 相同校验
+      if (formModel.value.beforePassword === formModel.value.password) {
+        formRef.value.setFields({
+          password: {
+            status: 'error',
+            message: '新密码不能和原始密码相同'
+          }
+        });
+        return false;
+      }
+      // 修改
+      await updatePassword({
+        beforePassword: md5(formModel.value.beforePassword as string),
+        password: md5(formModel.value.password as string)
+      });
+      Message.success('修改成功');
+      // 清空
+      handlerClear();
+      emits('updated');
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>