refactor(layout): 重构项目布局和样式

- 移除 App.vue 中的复杂布局结构，改为使用 RouterView
- 新增 DefaultLayout.vue 和 LoginLayout.vue 组件用于不同页面布局
- 更新 CustomLogin.vue 样式，增加登录容器和背景图
-调整 main.css 中的样式，使页面宽度自适应

src/App.vue

@@ -1,67 +1,9 @@
-<style scoped></style>
-
 <template>
-  <a-layout style="min-height: 100vh">
-    <a-layout-header :style="{ background: '#fff', width: '100%' }">
-      <a-menu
-        v-model:selectedKeys="current"
-        mode="horizontal"
-        :items="items"
-        theme="light"
-        :style="{ justifyContent: 'center' }"
-      />
-    </a-layout-header>
-    <a-layout>
-      <a-layout-content
-        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"
-      >
-        <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
-      </a-layout-sider>
-    </a-layout>
-    <a-layout-footer> jjjj</a-layout-footer>
-  </a-layout>
+  <RouterView />
 </template>
 
 <script setup lang="js">
 import { RouterView } from 'vue-router'
-import { h, ref } from 'vue'
-import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
-import CustomCard from '@/components/CustomCard.vue'
-
-const current = ref(['mail'])
-const items = ref([
-  {
-    key: 'home',
-    icon: () => h(MailOutlined),
-    label: h('a', { href: '/' }, '首页'),
-    title: '首页'
-  },
-  {
-    key: 'about',
-    icon: () => h(AppstoreOutlined),
-    label: h('a', { href: '/about' }, '关于'),
-    title: '关于'
-  },
-  {
-    key: 'tool',
-    icon: () => h(AppstoreOutlined),
-    label: h('a', { href: '/tool' }, '工具'),
-    title: '工具'
-  },
-  {
-    key: 'login',
-    icon: () => h(AppstoreOutlined),
-    label: h('a', { href: '/login' }, '登录'),
-    title: '登录'
-  }
-])
 </script>
+
+<style scoped></style>

src/assets/main.css

@@ -1,7 +1,6 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
@@ -14,8 +13,8 @@ header {
 }
 
 main {
-  /*width: 80%;*/
-  width: 1080px;
+  width: 100%;
+  /*width: 1080px;*/
   display: flex;
   justify-content: center;
   flex: 2 800px;
@@ -25,19 +24,19 @@ main {
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: hsl(0, 0%, 0%);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: hsla(150, 1%, 56%, 0.2);
   }
 }
 
 @media (min-width: 1024px) {
   #app {
-    padding: 0 2rem;
+    padding: 0;
   }
 }

src/components/CustomLogin.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { computed, reactive } from 'vue'
+
+const formState = reactive({
+  account: '',
+  password: '',
+  remember: false
+})
+
+const onfinish = async () => {
+  console.log('formState', formState)
+  const response = await fetch('http://127.0.0.1:3000/login', {
+    method: 'POST',
+    mode: 'cors',
+    cache: 'default',
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8'
+    },
+    credentials: 'include',
+    body: JSON.stringify(formState)
+  })
+  console.log(response)
+}
+
+const onFinishFailed = () => {
+  console.log('onFinishFailed')
+}
+
+const disabled = computed(() => {
+  return !formState.account || !formState.password
+})
+</script>
+
+<template>
+  <a-card class="login-container" :hoverable="true">
+    <a-form
+      :model="formState"
+      name="login"
+      class="login-form"
+      autocomplete="off"
+      @finish="onfinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
+        <a-input v-model:value="formState.account" placeholder="请输入账号">
+          <template #prefix>
+            <UserOutlined class="site-form-item-icon" style="margin-right: 8px"></UserOutlined>
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
+        <a-input-password v-model:value="formState.password" placeholder="请输入密码">
+          <template #prefix>
+            <LockOutlined class="site-form-item-icon" style="margin-right: 8px"></LockOutlined>
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-form-item name="remember" style="width: 100%">
+        <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
+        <a class="login-form-forgot" href="">忘记密码?</a>
+      </a-form-item>
+
+      <a-form-item style="width: 100%">
+        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
+          >登录
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<style scoped>
+.login-container {
+  background-color: rgba(253, 253, 253, 0.9);
+}
+
+.login-form {
+  min-width: 350px;
+}
+
+.login-form-forgot {
+  float: right;
+}
+
+.login-form-button {
+  width: 100%;
+}
+</style>

src/layouts/DefaultLayout.vue

@@ -0,0 +1,61 @@
+<script setup>
+import CustomCard from '@/components/CustomCard.vue'
+import { RouterView } from 'vue-router'
+import { h, ref } from 'vue'
+import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
+
+const current = ref(['mail'])
+const items = ref([
+  {
+    key: 'home',
+    icon: () => h(MailOutlined),
+    label: h('a', { href: '/' }, '首页'),
+    title: '首页'
+  },
+  {
+    key: 'about',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/about' }, '关于'),
+    title: '关于'
+  },
+  {
+    key: 'tool',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/tool' }, '工具'),
+    title: '工具'
+  }
+])
+</script>
+
+<template>
+  <a-layout style="min-height: 100vh">
+    <a-layout-header :style="{ background: '#fff', width: '100%' }">
+      <a-menu
+        v-model:selectedKeys="current"
+        mode="horizontal"
+        :items="items"
+        theme="light"
+        :style="{ justifyContent: 'center' }"
+      />
+    </a-layout-header>
+    <a-layout>
+      <a-layout-content
+        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"
+      >
+        <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
+      </a-layout-sider>
+    </a-layout>
+    <a-layout-footer>footer</a-layout-footer>
+  </a-layout>
+</template>
+
+<style scoped></style>

src/layouts/LoginLayout.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="login-layout">
+    <RouterView />
+  </div>
+</template>
+
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+
+<style scoped>
+.login-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+    url('@/assets/background.jpg') no-repeat center;
+  background-size: cover;
+}
+</style>

src/router/index.js

@@ -1,37 +1,51 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@/views/HomeView.vue'
 import AboutView from '@/views/AboutView.vue'
 import ToolView from '@/views/ToolView.vue'
-import LoginView from '@/views/LoginView.vue'
 import NewsView from '@/views/NewsView.vue'
+import DefaultLayout from '../layouts/DefaultLayout.vue'
+import LoginLayout from '@/layouts/LoginLayout.vue'
+import LoginView from '@/views/LoginView.vue'
+import HomeView from '@/views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: AboutView
-    },
-    {
-      path: '/tool',
-      name: 'tool',
-      component: ToolView
+      component: DefaultLayout,
+      children: [
+        {
+          path: '',
+          name: 'Home',
+          component: HomeView
+        },
+        {
+          path: '/about',
+          name: 'about',
+          component: AboutView
+        },
+        {
+          path: '/tool',
+          name: 'tool',
+          component: ToolView
+        },
+        {
+          path: '/news',
+          name: 'news',
+          component: NewsView
+        }
+      ]
     },
     {
       path: '/login',
-      name: 'login',
-      component: LoginView
-    },
-    {
-      path: '/news',
-      name: 'news',
-      component: NewsView
+      component: LoginLayout,
+      children: [
+        {
+          path: '',
+          name: 'Login',
+          component: LoginView
+        }
+      ]
     }
   ]
 })

src/views/LoginView.vue

@@ -1,12 +1,21 @@
 <script setup>
-
-import XiaoMiLogin from '@/components/XiaoMiLogin.vue'
+import CustomLogin from '@/components/CustomLogin.vue'
 </script>
 
 <template>
-  <XiaoMiLogin style="margin: 100px auto"/>
+  <CustomLogin class="login-container"></CustomLogin>
 </template>
 
 <style scoped>
-
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  margin-top: 50px;
+  box-sizing: border-box;
+  overflow: auto;
+}
 </style>