style(layout): 优化 DefaultLayout组件样式

- 调整 #app 样式，移除默认的 margin 和 padding
- 添加 header 和 footer 的样式类
- 优化模板结构，提高代码可读性
- 添加退出登录失败的提示消息

src/assets/main.css

@@ -1,8 +1,8 @@
 @import './base.css';
 
 #app {
-  margin: 0 auto;
+  margin: 0;
-  padding: 2rem;
+  padding: 0;
   font-weight: normal;
   display: flex;
   flex-direction: column;

src/layouts/DefaultLayout.vue

@@ -5,6 +5,7 @@ import { h, ref } from 'vue'
 import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
 import router from '@/router/index.js'
 import { removeToken } from '@/utils/auth.js'
+import { message } from 'ant-design-vue'
 
 const current = ref(['mail'])
 const items = ref([
@@ -48,6 +49,7 @@ const logout = async () => {
     removeToken()
     await router.push('/login')
   } else {
+    message.warn('登陆失败')
     console.error('Logout failed', response.statusText)
   }
 }
@@ -55,22 +57,48 @@ const logout = async () => {
 
 <template>
   <a-layout style="min-height: 100vh">
-    <a-layout-header :style="{ background: '#fff', width: '100%' }">
+    <a-layout-header class="header">
-      <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" theme="light"
+      <a-menu
-        :style="{ justifyContent: 'center' }" />
+        v-model:selectedKeys="current"
+        mode="horizontal"
+        :items="items"
+        theme="light"
+        :style="{ justifyContent: 'center' }"
+      />
     </a-layout-header>
-    <a-layout>
+    <a-layout class="content">
-      <a-layout-content theme="light"
+      <a-layout-content
-        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }">
+        theme="light"
+        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
+      >
         <RouterView />
       </a-layout-content>
-      <a-layout-sider theme="light" :collapsible="true" :collapsed-width="0" :defaultCollapsed="true">
+      <a-layout-sider
+        theme="light"
+        :collapsible="true"
+        :collapsed-width="0"
+        :defaultCollapsed="true"
+      >
         <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
         <a-button @click="logout">退出登录</a-button>
       </a-layout-sider>
     </a-layout>
-    <a-layout-footer>footer</a-layout-footer>
+    <a-layout-footer class="footer">
+      <div>Powered by <a href="https://github.com/LingandRX" target="_blank">雨霖铃</a></div>
+    </a-layout-footer>
   </a-layout>
 </template>
 
-<style scoped></style>
+<style scoped>
+.header {
+  background: #ffffff;
+  width: 100%;
+
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+}
+.footer {
+  text-align: center;
+}
+</style>