From 1dd92ec10c0e478ecdd8914394c4e32303f46abd Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 2 Aug 2026 16:59:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/layouts/WorkerLayout.tsx    |   8 +-
 .../src/pages/admin/AdminLoginPage.tsx        | 136 +++++++++++++-----
 2 files changed, 103 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/src/layouts/WorkerLayout.tsx b/apps/frontend/src/layouts/WorkerLayout.tsx
index 2f08275d..9b0c86ac 100644
--- a/apps/frontend/src/layouts/WorkerLayout.tsx
+++ b/apps/frontend/src/layouts/WorkerLayout.tsx
@@ -9,11 +9,7 @@ import type { MenuProps } from 'antd'
 import { Outlet, useLocation, useNavigate } from 'react-router'
 
 import { logoutWorker } from '@/services/worker'
-import {
-  clearWorkerSession,
-  getWorkerStatus,
-  getWorkerUsername,
-} from '@/utils/worker-auth'
+import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'
 
 const menuItems: MenuProps['items'] = [
   { key: '/worker/hall', icon: <ShoppingOutlined />, label: '抢单大厅' },
@@ -46,7 +42,7 @@ export default function WorkerLayout() {
         <div className="admin-sider-inner">
           <div className="admin-brand">
             <div className="admin-brand-copy">
-              <strong>趣游通</strong>
+              <strong>王大锤</strong>
               <span>接单平台</span>
             </div>
           </div>
diff --git a/apps/frontend/src/pages/admin/AdminLoginPage.tsx b/apps/frontend/src/pages/admin/AdminLoginPage.tsx
index 4b2bbfab..df45b190 100644
--- a/apps/frontend/src/pages/admin/AdminLoginPage.tsx
+++ b/apps/frontend/src/pages/admin/AdminLoginPage.tsx
@@ -1,5 +1,11 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { App, Button, Card, Form, Input, Typography } from 'antd'
+import {
+  DashboardOutlined,
+  LockOutlined,
+  SafetyCertificateOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from '@ant-design/icons'
+import { App, Button, Form, Input } from 'antd'
 import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
@@ -11,6 +17,24 @@ type LoginForm = {
   password: string
 }
 
+const brandFeatures = [
+  {
+    icon: <DashboardOutlined />,
+    title: '运营看板',
+    desc: '订单、打手、财务数据一目了然',
+  },
+  {
+    icon: <SafetyCertificateOutlined />,
+    title: '权限管控',
+    desc: '按角色开放操作，操作可审计',
+  },
+  {
+    icon: <SettingOutlined />,
+    title: '灵活配置',
+    desc: '平台、规则、费率在线可调',
+  },
+]
+
 export default function AdminLoginPage() {
   const navigate = useNavigate()
   const { message } = App.useApp()
@@ -35,40 +59,82 @@ export default function AdminLoginPage() {
   }
 
   return (
-    <main className="login-page">
-      <Card className="login-panel" variant="borderless">
-        <div className="login-heading">
-          <Typography.Text className="eyebrow">Order Site Admin</Typography.Text>
-          <Typography.Title level={1}>运营后台登录</Typography.Title>
-          <Typography.Paragraph type="secondary">
-            使用账号密码进入后台，并按角色开放不同操作权限。
-          </Typography.Paragraph>
-        </div>
+    <main className="auth-page">
+      <div className="auth-shell">
+        {/* 品牌信息区：移动端隐藏 */}
+        <aside className="auth-brand">
+          <div className="auth-brand-logo">
+            <span className="auth-logo-mark">
+              <DashboardOutlined />
+            </span>
+            <strong>Order Site Admin</strong>
+          </div>
 
-        <Form<LoginForm> layout="vertical" requiredMark={false} onFinish={submitLogin}>
-          <Form.Item
-            name="username"
-            label="账号"
-            rules={[{ required: true, message: '请输入账号' }]}
-          >
-            <Input prefix={<UserOutlined />} placeholder="输入账号" autoComplete="username" />
-          </Form.Item>
-          <Form.Item
-            name="password"
-            label="密码"
-            rules={[{ required: true, message: '请输入密码' }]}
-          >
-            <Input.Password
-              prefix={<LockOutlined />}
-              placeholder="输入密码"
-              autoComplete="current-password"
-            />
-          </Form.Item>
-          <Button type="primary" htmlType="submit" block loading={loading}>
-            登录后台
-          </Button>
-        </Form>
-      </Card>
+          <div className="auth-brand-body">
+            <h2>运营后台管理中心</h2>
+            <p>统一管理订单履约、打手调度与财务结算，按角色开放不同操作权限。</p>
+            <div className="auth-brand-features">
+              {brandFeatures.map((item) => (
+                <div className="auth-brand-feature" key={item.title}>
+                  <span className="auth-feature-icon">{item.icon}</span>
+                  <div className="auth-brand-feature-text">
+                    <strong>{item.title}</strong>
+                    <span>{item.desc}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="auth-brand-footer">
+            © {new Date().getFullYear()} Order Site · 保留所有权利
+          </div>
+        </aside>
+
+        {/* 登录表单区 */}
+        <section className="auth-form-side">
+          <div className="auth-form-card">
+            {/* 移动端精简品牌栏 */}
+            <div className="auth-mobile-brand">
+              <span className="auth-logo-mark">
+                <DashboardOutlined />
+              </span>
+              <strong>Order Site Admin</strong>
+            </div>
+
+            <div className="auth-form-header">
+              <h1>运营后台登录</h1>
+              <p>使用账号密码进入后台，并按角色开放不同操作权限</p>
+            </div>
+
+            <Form<LoginForm> layout="vertical" requiredMark={false} onFinish={submitLogin}>
+              <Form.Item
+                name="username"
+                label="账号"
+                rules={[{ required: true, message: '请输入账号' }]}
+              >
+                <Input prefix={<UserOutlined />} placeholder="输入账号" autoComplete="username" />
+              </Form.Item>
+              <Form.Item
+                name="password"
+                label="密码"
+                rules={[{ required: true, message: '请输入密码' }]}
+              >
+                <Input.Password
+                  prefix={<LockOutlined />}
+                  placeholder="输入密码"
+                  autoComplete="current-password"
+                />
+              </Form.Item>
+              <Button type="primary" htmlType="submit" block loading={loading} size="large">
+                登录后台
+              </Button>
+            </Form>
+
+            <div className="auth-form-footer">仅限授权运营人员访问</div>
+          </div>
+        </section>
+      </div>
     </main>
   )
 }