登录逻辑修改，信件管理，人员管理显示界面样式调整

src/components/LoginView.vue

@@ -22,6 +22,7 @@
 import { reactive } from 'vue'
 import axios from 'axios'
 import router from '../router'
+import { ElMessage } from 'element-plus'
 
 const login = reactive({
     account: '',
@@ -35,9 +36,11 @@ const inputCheck = () => {
 
 const sendCaptcha = () => {
     axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        ElMessage.success('验证码发送成功')
         console.log(res)
         login.captcha = res.data
     }).catch(err => {
+        ElMessage.error('验证码发送失败')
         console.log(err)
     })
 }
@@ -47,9 +50,11 @@ const loginIn = () => {
         console.log(res)
         if (res.data === 200) {
             sessionStorage.setItem('user', login.account)
+            ElMessage.success('登录成功')
             router.push('/')
         }
     }).catch(err => {
+        ElMessage.error('登录失败')
         console.log(err)
     })
 }

src/components/ManageMail.vue

@@ -1,4 +1,5 @@
 <template>
+    <div style="width: 90vw;margin: 0 auto;">
         <el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;">
             <el-row>
                 <el-col :span="6">
@@ -92,6 +93,7 @@
                 </el-pagination>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup>

src/components/ManageUser.vue

@@ -1,4 +1,5 @@
 <template>
+    <div style="width: 90vw; margin: 0 auto;">
         <el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;">
             <el-row>
                 <el-col :span="6">
@@ -41,7 +42,8 @@
                         <el-dialog v-model="newUser" title="新增用户" width="40%">
                             <el-form :model="newForm" label-width="150px">
                                 <el-form-item label="新管理员姓名">
-                                <el-input v-model="newForm.realName" placeholder="请输入新管理员姓名" max-length="200px"></el-input>
+                                    <el-input v-model="newForm.realName" placeholder="请输入新管理员姓名"
+                                        max-length="200px"></el-input>
                                 </el-form-item>
                                 <el-form-item label="新管理员手机号">
                                     <el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input>
@@ -92,6 +94,7 @@
                 </el-pagination>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup>

src/layout/Index.vue

@@ -1,10 +1,11 @@
 <template>
     <header class="flex v-center between">
-        <div>
+        <div style="display: inline-flex;align-items: center;justify-content: center;height: 100%;">
+            <el-image src="public\police-icon.png" style="width: 40px;height: 40px;margin-right: 10px;"></el-image>
             <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
-            <el-button type="primary" @click="router.push('/login')">退出</el-button>
+            <el-button type="primary" @click="logout">退出</el-button>
         </div>
     </header>
     <div class="flex">
@@ -12,19 +13,27 @@
 
             <nav>
                 <a class="flex v-center center wrap pointer" @click="router.push('/')">
-                    <el-icon><HomeFilled /></el-icon>
+                    <el-icon>
+                        <HomeFilled />
+                    </el-icon>
                     <span>首页</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/holiday')">
-                    <el-icon><Platform /></el-icon>
+                    <el-icon>
+                        <Platform />
+                    </el-icon>
                     <span>节假日管理</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/mailbox')">
-                    <el-icon><Menu /></el-icon>
+                    <el-icon>
+                        <Menu />
+                    </el-icon>
                     <span>信件管理</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/user')">
-                    <el-icon><User /></el-icon>
+                    <el-icon>
+                        <User />
+                    </el-icon>
                     <span>人员管理</span>
                 </a>
             </nav>
@@ -33,46 +42,65 @@
     </div>
 </template>
 <script setup>
-import { HomeFilled, Platform, Setting, Menu, User} from '@element-plus/icons-vue'
+import { HomeFilled, Platform, Setting, Menu, User } from '@element-plus/icons-vue'
 
 import { useRouter } from "vue-router";
 
+import axios from 'axios';
+import { ElMessage } from 'element-plus'
+
 const router = useRouter();
 
+const logout = () => {
+    sessionStorage.removeItem('user');
+    axios.post('/api/logout')
+        .then((res) => { if (res.data === 200) { ElMessage.success('登出成功'); } })
+        .catch((e) => { console.log(e) });
+    router.push('/login');
+}
+
 </script>
 <style lang="scss" scoped>
 :root {
     --header-height: 80px;
 }
+
 header {
     background-color: #162582;
     color: #fff;
     height: var(--header-height);
     padding: 0 20px;
+
     .title {
         font-size: 28px;
+
         a {
             text-decoration: none;
             color: inherit;
         }
     }
 }
+
 aside {
     background-color: #071254;
     color: #fff;
     width: 100px;
     height: calc(100vh - var(--header-height));
+
     nav {
         a {
             height: 100px;
             color: #707ab6;
+
             &:hover {
                 color: #fff;
             }
+
             .el-icon {
                 font-size: 50px;
 
             }
+
             span {
                 width: 100%;
                 text-align: center;