统一登录页品牌样式

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 {
+import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'
-  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>

apps/frontend/src/pages/admin/AdminLoginPage.tsx

@@ -1,5 +1,11 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import {
-import { App, Button, Card, Form, Input, Typography } from 'antd'
+  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">
+    <main className="auth-page">
-      <Card className="login-panel" variant="borderless">
+      <div className="auth-shell">
-        <div className="login-heading">
+        {/* 品牌信息区：移动端隐藏 */}
-          <Typography.Text className="eyebrow">Order Site Admin</Typography.Text>
+        <aside className="auth-brand">
-          <Typography.Title level={1}>运营后台登录</Typography.Title>
+          <div className="auth-brand-logo">
-          <Typography.Paragraph type="secondary">
+            <span className="auth-logo-mark">
-            使用账号密码进入后台，并按角色开放不同操作权限。
+              <DashboardOutlined />
-          </Typography.Paragraph>
+            </span>
-        </div>
+            <strong>Order Site Admin</strong>
+          </div>
 
-        <Form<LoginForm> layout="vertical" requiredMark={false} onFinish={submitLogin}>
+          <div className="auth-brand-body">
-          <Form.Item
+            <h2>运营后台管理中心</h2>
-            name="username"
+            <p>统一管理订单履约、打手调度与财务结算，按角色开放不同操作权限。</p>
-            label="账号"
+            <div className="auth-brand-features">
-            rules={[{ required: true, message: '请输入账号' }]}
+              {brandFeatures.map((item) => (
-          >
+                <div className="auth-brand-feature" key={item.title}>
-            <Input prefix={<UserOutlined />} placeholder="输入账号" autoComplete="username" />
+                  <span className="auth-feature-icon">{item.icon}</span>
-          </Form.Item>
+                  <div className="auth-brand-feature-text">
-          <Form.Item
+                    <strong>{item.title}</strong>
-            name="password"
+                    <span>{item.desc}</span>
-            label="密码"
+                  </div>
-            rules={[{ required: true, message: '请输入密码' }]}
+                </div>
-          >
+              ))}
-            <Input.Password
+            </div>
-              prefix={<LockOutlined />}
+          </div>
-              placeholder="输入密码"
+
-              autoComplete="current-password"
+          <div className="auth-brand-footer">
-            />
+            © {new Date().getFullYear()} Order Site · 保留所有权利
-          </Form.Item>
+          </div>
-          <Button type="primary" htmlType="submit" block loading={loading}>
+        </aside>
-            登录后台
+
-          </Button>
+        {/* 登录表单区 */}
-        </Form>
+        <section className="auth-form-side">
-      </Card>
+          <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>
   )
 }