修改个人信息

src/features/mark/MarkChangeProfile.vue

@@ -0,0 +1,99 @@
+<template>
+  <a-modal
+    title="修改个人信息"
+    v-model:visible="visible"
+    :confirm-loading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form labelAlign="right" :labelCol="{ span: 4 }">
+      <a-form-item class="tw-mb-2" :required="true" label="用户名">
+        <a-input v-model:value="user.name" placeholder="用户名" />
+      </a-form-item>
+      <a-form-item class="tw-mb-2" label="新密码">
+        <a-input
+          type="password"
+          v-model:value="user.password"
+          placeholder="输入新密码"
+        />
+      </a-form-item>
+      <a-form-item class="tw-mb-2" label="确认新密码">
+        <a-input
+          type="password"
+          v-model:value="user.confirmPassword"
+          placeholder="再次输入新密码"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script lang="ts">
+import { changeUserInfo, doLogout } from "@/api/markPage";
+import { message } from "ant-design-vue";
+import { ref, defineComponent, reactive, watchEffect } from "vue";
+import { store } from "./store";
+
+interface User {
+  name: string;
+  password: string;
+  confirmPassword: string;
+}
+export default defineComponent({
+  name: "MarkChangeProfile",
+  setup() {
+    const user = reactive<User>({
+      name: "",
+      password: "",
+      confirmPassword: "",
+    });
+    watchEffect(() => {
+      user.name = store.setting.userName;
+    });
+    const visible = ref<boolean>(false);
+    const confirmLoading = ref<boolean>(false);
+
+    const showModal = () => {
+      visible.value = true;
+    };
+
+    const handleOk = () => {
+      if (user.name.length === 0 || user.name.length >= 30) {
+        message.error({ content: "用户名长度必须在1到30之间" });
+        return;
+      }
+      if (user.password.length !== 0 || user.confirmPassword.length !== 0) {
+        if (user.password.length === 0 || user.password.length >= 16) {
+          message.error({ content: "密码长度必须在1到16之间" });
+          return;
+        }
+        if (user.password !== user.confirmPassword) {
+          message.error({ content: "两次输入的密码不一致" });
+          return;
+        }
+      }
+      confirmLoading.value = true;
+      changeUserInfo(user.name, user.password)
+        .then(() => doLogout())
+        .finally(() => {
+          visible.value = false;
+          confirmLoading.value = false;
+        });
+    };
+
+    const handleCancel = () => {
+      user.name = store.setting.userName;
+      user.password = "";
+      user.confirmPassword = "";
+    };
+
+    return {
+      user,
+      visible,
+      confirmLoading,
+      showModal,
+      handleOk,
+      handleCancel,
+    };
+  },
+});
+</script>

src/features/mark/MarkHeader.vue

@@ -122,7 +122,10 @@
         style="font-size: 12px; display: inline-flex"
       />
     </div>
-    <div class="tw-flex tw-place-items-center">
+    <div
+      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      @click="openProfileModal"
+    >
       <UserOutlined class="icon-font icon-with-text" />{{
         store.setting.userName
       }}
@@ -135,11 +138,12 @@
       退出
     </div>
   </div>
+  <MarkChangeProfile ref="changeProfileRef" />
 </template>
 
 <script lang="ts">
 import { doLogout, getGroups, getHistoryTask } from "@/api/markPage";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { store } from "./store";
 import {
   ZoomInOutlined,
@@ -153,6 +157,7 @@ import {
   DownOutlined,
 } from "@ant-design/icons-vue";
 import { ModeEnum } from "@/types";
+import MarkChangeProfile from "./MarkChangeProfile.vue";
 
 export default defineComponent({
   name: "MarkHeader",
@@ -166,6 +171,7 @@ export default defineComponent({
     PoweroffOutlined,
     AlertOutlined,
     QuestionCircleOutlined,
+    MarkChangeProfile,
   },
   setup() {
     const modeName = computed(() =>
@@ -259,6 +265,14 @@ export default defineComponent({
       doLogout();
     };
 
+    const changeProfileRef = ref(null);
+
+    const openProfileModal = () => {
+      console.log(changeProfileRef.value);
+      // @ts-ignore
+      changeProfileRef.value?.showModal();
+    };
+
     return {
       store,
       modeName,
@@ -275,6 +289,8 @@ export default defineComponent({
       toggleHistory,
       switchGroupDialog,
       logout,
+      changeProfileRef,
+      openProfileModal,
     };
   },
 });