diff --git a/jeecgboot-vue3/src/views/system/usersetting/commponents/UserCancellationModal.vue b/jeecgboot-vue3/src/views/system/usersetting/commponents/UserCancellationModal.vue
new file mode 100644
index 000000000..87e13bef0
--- /dev/null
+++ b/jeecgboot-vue3/src/views/system/usersetting/commponents/UserCancellationModal.vue
@@ -0,0 +1,118 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="注销" @ok="handleSubmit" destroyOnClose :width="400">
+    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+      <div class="cancellation-tip">
+        <p style="color: red;margin-bottom: 10px !important;">注销后账号会保留10天，如需恢复请QQ管理员 </p>
+      </div>
+      <a-form-item label="" name="phone" class="cancellation-tip">
+        <div class="black font-size-13" style="margin-bottom: 6px">验证方式</div>
+        <div class="pass-padding">
+          <a-input placeholder="请输入手机号" v-model:value="formState.phone" />
+        </div>
+      </a-form-item>
+      <a-form-item label="" name="smscode" class="cancellation-tip">
+        <CountdownInput v-model:value="formState.smscode" placeholder="请输入6位验证码" :sendCodeApi="sendCodeApi" />
+      </a-form-item>
+    </a-form>
+  </BasicModal>
+</template>
+<script lang="ts" name="UserCancellationModal" setup>
+  import { ref, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Rule } from '/@/components/Form/index';
+  import { userLogOff } from '../UserSetting.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { defHttp } from '@/utils/http/axios';
+
+  const { createMessage, createErrorModal } = useMessage();
+  //用户名
+  const username = ref<string>('');
+  const formRef = ref();
+  const formState = reactive({
+    smscode: '',
+    phone: '',
+  });
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    username.value = data.record.username;
+    Object.assign(formState, { password: '', smscode: '', phone: '' });
+  });
+  const userStore = useUserStore();
+  const validatorRules: Record<string, Rule[]> = {
+    phone: [{ required: true, message: '请输入手机号' }],
+    smscode: [{ required: true, message: '请输入6位验证码' }],
+  };
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await formRef.value.validateFields();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      values.username = unref(username);
+      await userLogOff(values).then((res) => {
+        if (res.success) {
+          createMessage.info({
+            content: '注销成功！',
+            duration: 1,
+          });
+          //返回登录页面
+          setTimeout(() => {
+            userStore.logout(true);
+          }, 1000);
+          //关闭弹窗
+          closeModal();
+        } else {
+          createMessage.warn(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 倒计时执行前的函数
+   */
+  function sendCodeApi() {
+    return new Promise((resolve, reject) => {
+      if(!formState.phone){
+        createErrorModal({ title: '错误提示', content: '请输入手机号！' });
+        reject();
+        return;
+      }
+      let params = { phone: formState.phone, username: username.value };
+      defHttp
+        .post({ url: '/sys/user/sendLogOffPhoneSms', params }, { isTransformResponse: false })
+        .then((res) => {
+          if (res.success) {
+            resolve(true);
+          } else {
+            createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+            reject();
+          }
+        })
+        .catch((res) => {
+          createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+          reject();
+        });
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .black {
+    color: @text-color;
+  }
+  .font-size-13 {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .cancellation-tip {
+    padding: 0 10px;
+  }
+</style>