feat: 系统引导重置操作

src/views/system/setting/components/system-reset.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { message } from 'ant-design-vue/lib';
+import { reactive } from 'vue';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { bootloaderReset } from '@/api';
+import useLockedStore from '@/store/modules/locked';
+const lockedStore = useLockedStore();
+const { t } = useI18n();
+
+type StateType = {
+  visible: boolean;
+  confirmLoading: boolean;
+  count: number;
+  timer: any;
+};
+
+let state: StateType = reactive({
+  visible: false,
+  confirmLoading: false,
+  count: 10,
+  timer: null,
+});
+
+/**对话框弹出显示 */
+function fnModalVisible() {
+  state.visible = true;
+  // 倒数
+  state.timer = setInterval(() => {
+    if (state.count < 0) {
+      clearInterval(state.timer);
+      state.timer = null;
+    }
+    state.count--;
+  }, 1_000);
+}
+
+/**对话框提交确认 */
+function fnModalOk() {
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  state.confirmLoading = true;
+  bootloaderReset()
+    .then(res => {
+      state.confirmLoading = false;
+      if (res.code === RESULT_CODE_SUCCESS) {
+        fnModalCancel()
+        lockedStore.fnLock('reload');
+      } else {
+        message.error(res.msg, 3);
+        clearInterval(state.timer);
+        state.timer = null;
+      }
+    })
+    .finally(() => {
+      hide();
+    });
+}
+
+/**对话框取消操作 */
+function fnModalCancel() {
+  clearInterval(state.timer);
+  state.timer = null;
+  state.count = 10;
+  state.visible = false;
+}
+</script>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
+      <a-button type="dashed" danger @click="fnModalVisible()"> 重置 </a-button>
+    </a-col>
+    <a-modal
+      v-model:visible="state.visible"
+      title="Prompt"
+      :ok-text="state.count > 0 ? `确认 ${state.count}` : '确认'"
+      :confirmLoading="state.count > 0 || state.confirmLoading"
+      @ok="fnModalOk()"
+      @cancel="fnModalCancel()"
+    >
+      系统重置将会销毁当前系统内所有数据，确认要继续吗？
+    </a-modal>
+
+    <a-col :lg="12" :md="12" :xs="24">
+      <a-typography>
+        <a-typography-paragraph>
+          系统重置将会销毁当前系统内所有数据，请谨慎操作。
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped></style>

src/views/system/setting/index.vue

@@ -7,6 +7,7 @@ import ChangeCopyright from './components/change-copyright.vue';
 import ChangeHelpDoc from './components/change-help-doc.vue';
 import ChangeOfficialUrl from './components/change-official-url.vue';
 import ChangeI18n from './components/change-i18n.vue';
+import SystemReset from './components/system-reset.vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 </script>
@@ -44,6 +45,8 @@ const { t } = useI18n();
         </a-divider>
         <ChangeI18n></ChangeI18n>
       </div>
+      <a-divider orientation="left"> 系统重置 </a-divider>
+      <SystemReset></SystemReset>
     </a-card>
   </PageContainer>
 </template>