初步优化手机端ui

apps/frontend/src/layouts/WorkerLayout.tsx

@@ -4,11 +4,12 @@ import {
   ShoppingOutlined,
   UserOutlined,
 } from '@ant-design/icons'
-import { App, Button, Layout, Menu, Space, Typography } from 'antd'
+import { App, Button, Layout, Menu, Space, Tag, Typography } from 'antd'
 import type { MenuProps } from 'antd'
 import { Outlet, useLocation, useNavigate } from 'react-router'
 
 import { logoutWorker } from '@/services/worker'
+import { useIsMobile } from '@/utils/use-is-mobile'
 import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'
 
 const menuItems: MenuProps['items'] = [
@@ -17,12 +18,20 @@ const menuItems: MenuProps['items'] = [
   { key: '/worker/profile', icon: <UserOutlined />, label: '个人中心' },
 ]
 
+const tabItems = [
+  { key: '/worker/hall', icon: ShoppingOutlined, label: '抢单大厅' },
+  { key: '/worker/orders', icon: ContainerOutlined, label: '我的订单' },
+  { key: '/worker/profile', icon: UserOutlined, label: '个人中心' },
+]
+
 export default function WorkerLayout() {
   const navigate = useNavigate()
   const location = useLocation()
-  const { message } = App.useApp()
+  const isMobile = useIsMobile()
+  const { message, modal } = App.useApp()
   const username = getWorkerUsername() || '打手'
   const status = getWorkerStatus()
+  const currentKey = resolveSelectedKey(location.pathname)
 
   async function submitLogout() {
     try {
@@ -36,6 +45,72 @@ export default function WorkerLayout() {
     }
   }
 
+  function confirmLogout() {
+    modal.confirm({
+      title: '确认退出登录',
+      content: '退出后需要重新登录才能继续抢单和处理订单。',
+      okText: '确认退出',
+      cancelText: '取消',
+      okButtonProps: { danger: true },
+      onOk: submitLogout,
+    })
+  }
+
+  if (isMobile) {
+    return (
+      <div className="worker-mobile-shell">
+        <header className="worker-mobile-header">
+          <div className="worker-mobile-brand">
+            <span className="worker-mobile-brand-badge">锤</span>
+            <div className="worker-mobile-brand-text">
+              <strong>王大锤接单</strong>
+            </div>
+          </div>
+          <div className="worker-mobile-user-area">
+            <Tag color={resolveStatusTagColor(status)} className="worker-mobile-status-tag">
+              {formatWorkerStatus(status)}
+            </Tag>
+            <span className="worker-mobile-username" title={username}>
+              {username}
+            </span>
+            <Button
+              type="text"
+              size="small"
+              icon={<LogoutOutlined />}
+              className="worker-mobile-logout-btn"
+              onClick={confirmLogout}
+              title="退出登录"
+            />
+          </div>
+        </header>
+
+        <main className="worker-mobile-content">
+          <Outlet />
+        </main>
+
+        <nav className="worker-mobile-tabbar" aria-label="移动端底部导航">
+          {tabItems.map((item) => {
+            const Icon = item.icon
+            const isActive = currentKey === item.key
+            return (
+              <button
+                key={item.key}
+                type="button"
+                className={`worker-mobile-tab-item ${isActive ? 'active' : ''}`}
+                onClick={() => navigate(item.key)}
+              >
+                <div className="worker-mobile-tab-icon">
+                  <Icon />
+                </div>
+                <span className="worker-mobile-tab-label">{item.label}</span>
+              </button>
+            )
+          })}
+        </nav>
+      </div>
+    )
+  }
+
   return (
     <Layout className="admin-shell worker-shell">
       <Layout.Sider width={220} className="admin-sider" trigger={null}>
@@ -53,7 +128,7 @@ export default function WorkerLayout() {
           <Menu
             mode="inline"
             inlineIndent={16}
-            selectedKeys={[resolveSelectedKey(location.pathname)]}
+            selectedKeys={[currentKey]}
             items={menuItems}
             className="admin-menu"
             onClick={({ key }) => navigate(String(key))}
@@ -68,7 +143,8 @@ export default function WorkerLayout() {
       <Layout className="admin-main-shell">
         <Layout.Header className="admin-topbar">
           <Space className="admin-user" size={12}>
-            <Typography.Text type="secondary">{formatWorkerStatus(status)}</Typography.Text>
+            <Tag color={resolveStatusTagColor(status)}>{formatWorkerStatus(status)}</Tag>
+            <Typography.Text strong>{username}</Typography.Text>
           </Space>
         </Layout.Header>
         <Layout.Content className="admin-content">
@@ -92,3 +168,11 @@ function formatWorkerStatus(status: string) {
   if (status === 'disabled') return '已停用'
   return '未登录'
 }
+
+function resolveStatusTagColor(status: string) {
+  if (status === 'active') return 'success'
+  if (status === 'pending_review') return 'warning'
+  if (status === 'rejected') return 'error'
+  if (status === 'disabled') return 'default'
+  return 'default'
+}