增加退出登录功能

优化登录界面验证码显示

src/components/SettingsModal/index.vue

@@ -11,13 +11,19 @@
         <a-col :span="16" class="modal-value">{{ item.value }}</a-col>
       </template>
     </a-row>
+    <div class="actions">
+      <a-button size="large" @click="handleLogout">退出登录</a-button>
+    </div>
   </a-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useDialog } from '@/utils/useDialog';
 import { useRealTime } from '@/utils/dateUtils';
+import { Modal } from 'ant-design-vue';
+import { removeToken } from '@/utils/auth';
 
 // 实时时间
 const { currentTime } = useRealTime('HH:mm:ss');
@@ -38,6 +44,21 @@ const modalItems = ref([
   { label: '内存使用', value: '2.1GB / 8GB' }
 ]);
 
+const router = useRouter();
+const handleLogout = () => {
+  Modal.confirm({
+    title: '提示',
+    content: '确认退出登录？',
+    onOk() {
+      removeToken();
+      return router.push(`/login`);
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onCancel() {},
+  });
+  
+}
+
 defineExpose({
   show,
   hide
@@ -73,4 +94,15 @@ defineExpose({
     color: $text-light;
   }
 }
+
+.actions {
+  margin: 20px 0 10px;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+
+  .ant-btn {
+    flex: 1;
+  }
+}
 </style>

src/views/login.vue

@@ -23,7 +23,7 @@ const loading = ref(false)
 const captchaLoading = ref(false)
 
 // 表单验证规则
-const rules: Record<string, Rule[]> = {
+const rules: Record<string, Rule[]> = reactive({
   username: [
     { required: true, message: '请输入用户名', trigger: 'change' }
   ],
@@ -33,7 +33,7 @@ const rules: Record<string, Rule[]> = {
   code: [
     { required: true, message: '请输入验证码', trigger: 'change' }
   ]
-}
+})
 
 // 获取验证码
 const refreshCaptcha = async () => {