From 9beb6e98bc52393a0f80faa3355f05da626977f5 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 9 Mar 2025 09:46:44 +0800
Subject: [PATCH] update

---
 src/layouts/AdminLayout.vue |  87 +++++++++++++--
 src/views/Login.vue         | 215 +++++++++++++-----------------------
 2 files changed, 149 insertions(+), 153 deletions(-)

diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 458da85..6142030 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,7 +1,7 @@
 <template>
-  <a-layout style="min-height: 100vh">
+  <a-layout class="admin-layout">
     <!-- 侧边栏 -->
-    <a-layout-sider v-model:collapsed="collapsed" collapsible :theme="'dark'" style="background: #1a1a1a;">
+    <a-layout-sider v-model:collapsed="collapsed" collapsible :theme="'dark'" style="background: #1a1a1a; position: fixed; height: 100vh; z-index: 10; left: 0; top: 0;">
       <div class="logo">
         <h1 v-if="!collapsed">蜂快·运营商平台</h1>
         <h1 v-else>蜂快</h1>
@@ -19,9 +19,20 @@
       </a-menu>
     </a-layout-sider>
     
-    <a-layout>
+    <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px', transition: 'all 0.2s' }">
       <!-- 头部 -->
-      <a-layout-header style="background: #fff; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);">
+      <a-layout-header class="layout-header" :style="{ width: `calc(100% - ${collapsed ? 80 : 200}px)` }">
+        <!-- 面包屑导航 -->
+        <div class="header-breadcrumb">
+          <a-breadcrumb>
+            <a-breadcrumb-item>
+              <home-outlined />
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>蜂快·运营商平台</a-breadcrumb-item>
+            <a-breadcrumb-item>{{ currentPageTitle }}</a-breadcrumb-item>
+          </a-breadcrumb>
+        </div>
+        
         <div class="header-right">
           <a-dropdown>
             <a class="ant-dropdown-link" @click.prevent>
@@ -40,14 +51,14 @@
       </a-layout-header>
       
       <!-- 内容区 -->
-      <a-layout-content style="margin: 16px">
-        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px', borderRadius: '8px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }">
+      <a-layout-content class="layout-content">
+        <div class="content-container">
           <router-view></router-view>
         </div>
       </a-layout-content>
       
       <!-- 底部 -->
-      <a-layout-footer style="text-align: center; color: rgba(0, 0, 0, 0.45);">
+      <a-layout-footer class="layout-footer">
         蜂快·运营商平台 ©2025
       </a-layout-footer>
     </a-layout>
@@ -59,13 +70,15 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import { 
-  DashboardOutlined
+  DashboardOutlined,
+  HomeOutlined
 } from '@ant-design/icons-vue';
 
 export default {
   name: 'AdminLayout',
   components: {
-    DashboardOutlined
+    DashboardOutlined,
+    HomeOutlined
   },
   setup() {
     const store = useStore();
@@ -80,6 +93,11 @@ export default {
     const userInfo = computed(() => store.getters.userInfo);
     const selectedKeys = ref([]);
     
+    // 获取当前页面标题
+    const currentPageTitle = computed(() => {
+      return route.meta.title || '页面';
+    });
+    
     // 根据当前路由设置选中的菜单项
     watch(() => route.path, (path) => {
       const key = path.split('/')[1] || 'dashboard';
@@ -102,13 +120,18 @@ export default {
       collapsed,
       selectedKeys,
       userInfo,
-      handleLogout
+      handleLogout,
+      currentPageTitle
     };
   }
 };
 </script>
 
 <style scoped>
+.admin-layout {
+  min-height: 100vh;
+}
+
 .logo {
   height: 32px;
   margin: 16px;
@@ -124,8 +147,27 @@ export default {
   margin: 0;
 }
 
+.layout-header {
+  background: #fff;
+  padding: 0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  display: flex;
+  justify-content: space-between;
+  transition: width 0.2s;
+}
+
+.header-breadcrumb {
+  margin-left: 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+}
+
 .header-right {
-  float: right;
   margin-right: 24px;
   height: 64px;
   display: flex;
@@ -146,6 +188,28 @@ export default {
   background-color: rgba(0, 0, 0, 0.025);
 }
 
+.layout-content {
+  margin-top: 64px; /* 头部高度 */
+  padding: 16px;
+  overflow-y: auto;
+  height: calc(100vh - 64px - 70px); /* 减去头部和底部的高度 */
+}
+
+.content-container {
+  padding: 24px;
+  background: #fff;
+  min-height: 360px;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.layout-footer {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+  padding: 16px;
+  height: 70px;
+}
+
 :deep(.ant-layout-sider-trigger) {
   background: #000000;
 }
@@ -172,7 +236,6 @@ export default {
 
 :deep(.ant-layout-sider) {
   box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-  z-index: 10;
 }
 
 :deep(.ant-dropdown-menu) {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 58109bc..632e3b2 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,81 +1,65 @@
 <template>
   <div class="login-container">
     <div class="login-box">
-      <div class="login-left">
-        <div class="logo-container">
-          <img src="../assets/logo.png" alt="蜂快到家" class="logo" />
-          <div class="logo-text">蜂快到家</div>
-        </div>
-        <div class="feature-list">
-          <div class="feature-item">
-            <check-circle-outlined />
-            <span>高效管理配送</span>
-          </div>
-          <div class="feature-item">
-            <check-circle-outlined />
-            <span>实时监控订单</span>
-          </div>
-          <div class="feature-item">
-            <check-circle-outlined />
-            <span>便捷数据分析</span>
-          </div>
-        </div>
+      <div class="logo-container">
+        <img src="../assets/logo.png" alt="蜂快到家" class="logo"/>
       </div>
-      <div class="login-right">
-        <div class="welcome-text">
-          <h1>欢迎使用 蜂快·运营商平台</h1>
-          <p>请使用您的手机号和密码登录</p>
-        </div>
-        <a-form
-          :model="formState"
-          name="login"
-          @finish="onFinish"
-          class="login-form"
+      
+      <div class="welcome-text">
+        <h1>欢迎使用 蜂快 · 运营商平台</h1>
+        <p>请使用您的手机号和密码登录</p>
+      </div>
+      
+      <a-form
+        :model="formState"
+        name="login"
+        @finish="onFinish"
+        class="login-form"
+      >
+        <a-form-item
+          name="phone"
+          :rules="[
+            { required: true, message: '请输入手机号!' },
+            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码!' }
+          ]"
         >
-          <a-form-item
-            name="phone"
-            :rules="[
-              { required: true, message: '请输入手机号!' },
-              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码!' }
-            ]"
+          <a-input 
+            v-model:value="formState.phone" 
+            placeholder="请输入手机号" 
+            size="large"
+            class="login-input"
           >
-            <a-input 
-              v-model:value="formState.phone" 
-              placeholder="请输入手机号" 
-              size="large"
-              class="login-input"
-            >
-              <template #prefix><user-outlined /></template>
-            </a-input>
-          </a-form-item>
+            <template #prefix><user-outlined /></template>
+          </a-input>
+        </a-form-item>
 
-          <a-form-item
-            name="password"
-            :rules="[{ required: true, message: '请输入密码!' }]"
+        <a-form-item
+          name="password"
+          :rules="[{ required: true, message: '请输入密码!' }]"
+        >
+          <a-input-password 
+            v-model:value="formState.password" 
+            placeholder="请输入密码" 
+            size="large"
+            class="login-input"
           >
-            <a-input-password 
-              v-model:value="formState.password" 
-              placeholder="请输入密码" 
-              size="large"
-              class="login-input"
-            >
-              <template #prefix><lock-outlined /></template>
-            </a-input-password>
-          </a-form-item>
+            <template #prefix><lock-outlined /></template>
+          </a-input-password>
+        </a-form-item>
 
-          <div class="login-options">
-            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
-          </div>
-
-          <a-form-item>
-            <a-button type="primary" html-type="submit" class="login-button" :loading="loading" size="large">
-              登 录
-            </a-button>
-          </a-form-item>
-        </a-form>
-        <div class="login-footer">
-          <p>© 2025 蜂快到家. 保留所有权利</p>
+        <div class="login-options">
+          <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
         </div>
+
+        <a-form-item>
+          <a-button type="primary" html-type="submit" class="login-button" :loading="loading" size="large">
+            登 录
+          </a-button>
+        </a-form-item>
+      </a-form>
+      
+      <div class="login-footer">
+        <p>© 2025 蜂快到家. 保留所有权利</p>
       </div>
     </div>
   </div>
@@ -85,15 +69,14 @@
 import { reactive, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
-import { UserOutlined, LockOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 
 export default {
   name: 'Login',
   components: {
     UserOutlined,
-    LockOutlined,
-    CheckCircleOutlined
+    LockOutlined
   },
   setup() {
     const store = useStore();
@@ -146,77 +129,45 @@ export default {
   justify-content: center;
   align-items: center;
   background-color: #f5f5f5;
+  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
 .login-box {
-  width: 900px;
-  height: 600px;
-  display: flex;
+  width: 420px;
+  background-color: white;
   border-radius: 12px;
-  overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-}
-
-.login-left {
-  width: 40%;
-  background-color: #1a1a1a;
   padding: 40px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  color: white;
 }
 
 .logo-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 60px;
+  margin-bottom: 30px;
 }
 
 .logo {
-  width: 100px;
+  width: 80px;
   height: auto;
 }
 
 .logo-text {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: bold;
-  margin-top: 16px;
-  color: #ffffff;
-}
-
-.feature-list {
-  margin-bottom: 100px;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  font-size: 16px;
-}
-
-.feature-item .anticon {
-  margin-right: 12px;
-  font-size: 18px;
-  color: #1890ff;
-}
-
-.login-right {
-  width: 60%;
-  background-color: white;
-  padding: 40px 60px;
-  display: flex;
-  flex-direction: column;
+  margin-top: 12px;
+  color: #1a1a1a;
 }
 
 .welcome-text {
-  margin-bottom: 40px;
+  text-align: center;
+  margin-bottom: 30px;
 }
 
 .welcome-text h1 {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: bold;
   color: #1a1a1a;
   margin-bottom: 8px;
@@ -228,7 +179,7 @@ export default {
 }
 
 .login-form {
-  flex: 1;
+  width: 100%;
 }
 
 .login-input {
@@ -257,42 +208,24 @@ export default {
 }
 
 .login-footer {
-  margin-top: 40px;
+  margin-top: 30px;
   text-align: center;
   color: #999;
   font-size: 12px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 480px) {
   .login-box {
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    border-radius: 0;
+    width: 90%;
+    padding: 30px 20px;
   }
   
-  .login-left {
-    width: 100%;
-    height: 30%;
-    padding: 20px;
+  .welcome-text h1 {
+    font-size: 20px;
   }
   
-  .login-right {
-    width: 100%;
-    height: 70%;
-    padding: 20px;
-  }
-  
-  .logo-container {
-    margin-top: 20px;
-  }
-  
-  .feature-list {
-    margin-bottom: 20px;
-  }
-  
-  .welcome-text {
-    margin-bottom: 20px;
+  .logo {
+    width: 60px;
   }
 }
 </style> 
\ No newline at end of file