From 9979011ac28fd6ab0b58212b0d7cb74fb0264c75 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 12 Sep 2026 18:59:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(worker-hall):=20=E6=8A=A2=E5=8D=95?=
 =?UTF-8?q?=E5=A4=A7=E5=8E=85UI=E8=A7=86=E8=A7=89=E4=B8=8E=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=96=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 桌面端顶部整合：将标题、实时派单呼吸标签、居中搜索栏与操作按钮整合在同一行，消除右侧大面积空白。
2. 4栏KPI仪表盘：重构大厅顶部数据指标为账户资金、接单配额进度条、在办工单状态（支持直达工单）、实时资源池4张高质感卡片，消除原横条留白与空洞感。
3. 游戏分类卡片视觉升级：无图标时根据分类自动生成多色高质感渐变背景与白色微拟物首字，优化选中与悬浮阴影态。
4. 工单卡片与保证金排版升级：优化卡片头部标签、订单号排版，金额与保证金突出展示（0保证金呈现绿色'免保证金'微标），强化立即抢单按钮渐变。
---
 .../src/pages/worker/WorkerHallPage.tsx       | 352 +++++++++----
 apps/frontend/src/styles/worker.css           | 481 +++++++++++++++++-
 2 files changed, 732 insertions(+), 101 deletions(-)

diff --git a/apps/frontend/src/pages/worker/WorkerHallPage.tsx b/apps/frontend/src/pages/worker/WorkerHallPage.tsx
index 044b2991..6471671e 100644
--- a/apps/frontend/src/pages/worker/WorkerHallPage.tsx
+++ b/apps/frontend/src/pages/worker/WorkerHallPage.tsx
@@ -1,11 +1,16 @@
 import {
   AppstoreOutlined,
+  ArrowRightOutlined,
+  CheckCircleOutlined,
   ClockCircleOutlined,
+  FireOutlined,
   PushpinOutlined,
   QuestionCircleOutlined,
   ReloadOutlined,
   SearchOutlined,
+  ThunderboltOutlined,
   TrophyOutlined,
+  WalletOutlined,
 } from '@ant-design/icons'
 import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
@@ -28,6 +33,7 @@ import {
   Typography,
 } from 'antd'
 import { useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router'
 
 import {
   fetchWorkerHallOrders,
@@ -159,6 +165,9 @@ export default function WorkerHallPage() {
   const maxActiveOrders = Number(worker?.level?.permissions.maxActiveOrders || 0)
   const remainingSlots = maxActiveOrders > 0 ? Math.max(0, maxActiveOrders - activeCount) : null
   const shouldWarn = (remainingSlots !== null && remainingSlots <= 0) || problemCount > 0
+  const totalHallOrders = Number(ordersQuery.data?.pages[0]?.data.pagination.total || orders.length)
+  const quotaPercent =
+    maxActiveOrders > 0 ? Math.min(100, Math.round((activeCount / maxActiveOrders) * 100)) : 0
 
   useEffect(() => {
     const target = loadMoreRef.current
@@ -363,11 +372,18 @@ export default function WorkerHallPage() {
                 className={`worker-hall-game-card ${primaryCategoryId === 0 ? 'active' : ''}`}
                 onClick={() => handleSelectPrimaryCategory(0)}
               >
-                <div className="worker-hall-game-icon-box">
+                <div
+                  className="worker-hall-game-icon-box"
+                  style={
+                    primaryCategoryId === 0
+                      ? { background: 'linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%)' }
+                      : undefined
+                  }
+                >
                   <AppstoreOutlined
                     style={{
                       fontSize: 20,
-                      color: primaryCategoryId === 0 ? 'var(--theme-primary)' : '#64748b',
+                      color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
                     }}
                   />
                 </div>
@@ -380,7 +396,14 @@ export default function WorkerHallPage() {
                   className={`worker-hall-game-card ${primaryCategoryId === category.categoryId ? 'active' : ''}`}
                   onClick={() => handleSelectPrimaryCategory(category.categoryId)}
                 >
-                  <div className="worker-hall-game-icon-box">
+                  <div
+                    className="worker-hall-game-icon-box"
+                    style={
+                      !category.iconUrl
+                        ? { background: getCategoryGradient(category.name, category.categoryId) }
+                        : undefined
+                    }
+                  >
                     {category.iconUrl ? (
                       <img
                         src={category.iconUrl}
@@ -595,54 +618,25 @@ export default function WorkerHallPage() {
         </div>
       ) : (
         <section className="page-stack">
-          <div className="worker-page-head">
-            <div className="worker-page-head-title-row">
-              <Typography.Title level={3}>抢单大厅</Typography.Title>
-              <div className="worker-hall-page-actions">
-                <div className="worker-hall-head-controls">
-                  <Tooltip title="开启后点击抢单会先弹窗确认，防止误点">
-                    <span className="worker-hall-grab-confirm-toggle">
-                      抢单确认
-                      <Switch
-                        size="small"
-                        checked={grabConfirmEnabled}
-                        onChange={toggleGrabConfirm}
-                      />
-                    </span>
-                  </Tooltip>
-                  <Button
-                    icon={<ReloadOutlined />}
-                    loading={
-                      ordersQuery.isFetching ||
-                      profileQuery.isFetching ||
-                      hallSummaryQuery.isFetching
-                    }
-                    onClick={() => refreshAll()}
-                  >
-                    刷新
-                  </Button>
-                </div>
-                <div className="worker-hall-leaderboard-trigger">
-                  <Tooltip title="接单排行榜">
-                    <Button
-                      aria-label="接单排行榜"
-                      icon={<TrophyOutlined />}
-                      onClick={() => setLeaderboardOpen(true)}
-                    >
-                      接单排行榜
-                    </Button>
-                  </Tooltip>
-                </div>
-              </div>
+          {/* 桌面端整合头部：标题 + 实时派单标签 + 居中全局搜索 + 快捷操作 */}
+          <div className="worker-hall-desktop-header">
+            <div className="worker-hall-header-left">
+              <Typography.Title level={3} className="worker-hall-heading">
+                抢单大厅
+              </Typography.Title>
+              <span className="worker-hall-live-badge">
+                <span className="worker-hall-pulse-dot" />
+                实时派单
+              </span>
             </div>
 
-            <div className="worker-hall-search-bar">
-              <Space.Compact className="worker-hall-search">
+            <div className="worker-hall-header-center">
+              <Space.Compact className="worker-hall-desktop-search">
                 <Input
                   allowClear
                   value={keywordInput}
                   placeholder="搜索商品名称 / 订单号 / 游戏ID / 游戏昵称"
-                  prefix={<SearchOutlined />}
+                  prefix={<SearchOutlined style={{ color: '#94a3b8' }} />}
                   onChange={(event) => {
                     const nextKeyword = event.target.value
                     setKeywordInput(nextKeyword)
@@ -662,33 +656,163 @@ export default function WorkerHallPage() {
                 </Button>
               </Space.Compact>
             </div>
+
+            <div className="worker-hall-header-right">
+              <Tooltip title="开启后点击抢单会先弹窗确认，防止误触">
+                <label className="worker-hall-header-switch-wrap">
+                  <span>抢单确认</span>
+                  <Switch size="small" checked={grabConfirmEnabled} onChange={toggleGrabConfirm} />
+                </label>
+              </Tooltip>
+              <Button
+                icon={<ReloadOutlined />}
+                loading={
+                  ordersQuery.isFetching || profileQuery.isFetching || hallSummaryQuery.isFetching
+                }
+                onClick={() => refreshAll()}
+              >
+                刷新
+              </Button>
+              <Button icon={<TrophyOutlined />} onClick={() => setLeaderboardOpen(true)}>
+                接单排行榜
+              </Button>
+            </div>
+          </div>
+
+          {/* 桌面端 4 栏 KPI 仪表盘 */}
+          <div className="worker-hall-kpi-grid">
+            {/* 卡片 1: 账户资产 */}
+            <div className="worker-hall-kpi-card">
+              <div className="worker-hall-kpi-top">
+                <div className="worker-hall-kpi-icon-wrap kpi-wallet">
+                  <WalletOutlined />
+                </div>
+                <div className="worker-hall-kpi-info">
+                  <span className="worker-hall-kpi-title">可用余额</span>
+                  <strong className="worker-hall-kpi-val">
+                    {worker ? formatMoney(worker.wallet.availableAmount) : '-'}
+                  </strong>
+                </div>
+              </div>
+              <div className="worker-hall-kpi-bottom">
+                <div className="worker-hall-kpi-sub-item">
+                  <span className="kpi-sub-label">冻结押金:</span>
+                  <span className="kpi-sub-val">
+                    {worker ? formatMoney(worker.wallet.frozenDepositAmount) : '￥0.00'}
+                  </span>
+                </div>
+                {worker?.level?.name ? (
+                  <span className="worker-hall-kpi-level-badge">{worker.level.name}</span>
+                ) : null}
+              </div>
+            </div>
+
+            {/* 卡片 2: 接单配额 */}
+            <div className="worker-hall-kpi-card">
+              <div className="worker-hall-kpi-top">
+                <div className="worker-hall-kpi-icon-wrap kpi-quota">
+                  <ThunderboltOutlined />
+                </div>
+                <div className="worker-hall-kpi-info">
+                  <span className="worker-hall-kpi-title">接单配额</span>
+                  <strong className="worker-hall-kpi-val">
+                    {remainingSlots === null ? '未限制' : `${activeCount} / ${maxActiveOrders}`}
+                    <span className="worker-hall-kpi-unit"> 单</span>
+                  </strong>
+                </div>
+              </div>
+              <div className="worker-hall-kpi-bottom">
+                <div className="worker-hall-kpi-progress-track">
+                  <div
+                    className={`worker-hall-kpi-progress-bar ${
+                      quotaPercent > 85 ? 'danger' : quotaPercent > 60 ? 'warning' : 'safe'
+                    }`}
+                    style={{ width: `${quotaPercent}%` }}
+                  />
+                </div>
+                <span className="worker-hall-kpi-sub-text">
+                  {remainingSlots === null
+                    ? '等级未限'
+                    : remainingSlots > 0
+                      ? `还可接 ${remainingSlots} 单`
+                      : '已达上限'}
+                </span>
+              </div>
+            </div>
+
+            {/* 卡片 3: 进行中任务 */}
+            <div className="worker-hall-kpi-card">
+              <div className="worker-hall-kpi-top">
+                <div className="worker-hall-kpi-icon-wrap kpi-tasks">
+                  <ClockCircleOutlined />
+                </div>
+                <div className="worker-hall-kpi-info">
+                  <span className="worker-hall-kpi-title">进行中任务</span>
+                  <strong className="worker-hall-kpi-val">
+                    {activeCount}
+                    <span className="worker-hall-kpi-unit"> 单代练中</span>
+                  </strong>
+                </div>
+              </div>
+              <div className="worker-hall-kpi-bottom">
+                <div className="worker-hall-kpi-stat-tags">
+                  <span className="worker-hall-kpi-tag blue">待验收 {pendingAcceptanceCount}</span>
+                  <span className={`worker-hall-kpi-tag ${problemCount > 0 ? 'red' : 'neutral'}`}>
+                    问题单 {problemCount}
+                  </span>
+                </div>
+                <Link to="/orders" className="worker-hall-kpi-link">
+                  工单管理 <ArrowRightOutlined style={{ fontSize: 10 }} />
+                </Link>
+              </div>
+            </div>
+
+            {/* 卡片 4: 实时订单池 */}
+            <div className="worker-hall-kpi-card">
+              <div className="worker-hall-kpi-top">
+                <div className="worker-hall-kpi-icon-wrap kpi-pool">
+                  <FireOutlined />
+                </div>
+                <div className="worker-hall-kpi-info">
+                  <span className="worker-hall-kpi-title">大厅可抢订单</span>
+                  <strong className="worker-hall-kpi-val">
+                    {totalHallOrders}
+                    <span className="worker-hall-kpi-unit"> 单在池</span>
+                  </strong>
+                </div>
+              </div>
+              <div className="worker-hall-kpi-bottom">
+                <span className="worker-hall-kpi-pool-hint">
+                  <span className="worker-hall-kpi-dot-online" />
+                  极速响应 · 秒级派发
+                </span>
+                <span className="worker-hall-kpi-pool-sub">支持拼单</span>
+              </div>
+            </div>
           </div>
 
           <Card className="worker-hall-board-card" bordered={false}>
-            <div className="worker-hall-summary-strip">
-              {summaryItems.map((item) => (
-                <div key={item.label} className="worker-hall-summary-item">
-                  <span className="worker-hall-summary-label">{item.label}</span>
-                  <strong className="worker-hall-summary-value">{item.value}</strong>
-                  <small className="worker-hall-summary-note">{item.note}</small>
-                </div>
-              ))}
-            </div>
-
             {/* 桌面端一级分类卡片与二级联动 */}
             {primaryCategories.length > 0 ? (
-              <div style={{ marginBottom: 12 }}>
+              <div style={{ marginBottom: 14 }}>
                 <div className="worker-hall-game-cards-scroll">
                   <button
                     type="button"
                     className={`worker-hall-game-card ${primaryCategoryId === 0 ? 'active' : ''}`}
                     onClick={() => handleSelectPrimaryCategory(0)}
                   >
-                    <div className="worker-hall-game-icon-box">
+                    <div
+                      className="worker-hall-game-icon-box"
+                      style={
+                        primaryCategoryId === 0
+                          ? { background: 'linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%)' }
+                          : undefined
+                      }
+                    >
                       <AppstoreOutlined
                         style={{
                           fontSize: 20,
-                          color: primaryCategoryId === 0 ? 'var(--theme-primary)' : '#64748b',
+                          color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
                         }}
                       />
                     </div>
@@ -701,7 +825,16 @@ export default function WorkerHallPage() {
                       className={`worker-hall-game-card ${primaryCategoryId === category.categoryId ? 'active' : ''}`}
                       onClick={() => handleSelectPrimaryCategory(category.categoryId)}
                     >
-                      <div className="worker-hall-game-icon-box">
+                      <div
+                        className="worker-hall-game-icon-box"
+                        style={
+                          !category.iconUrl
+                            ? {
+                                background: getCategoryGradient(category.name, category.categoryId),
+                              }
+                            : undefined
+                        }
+                      >
                         {category.iconUrl ? (
                           <img
                             src={category.iconUrl}
@@ -722,8 +855,8 @@ export default function WorkerHallPage() {
                 </div>
 
                 {shouldShowSubcategories ? (
-                  <div className="worker-hall-subcat-bar" style={{ marginTop: 8 }}>
-                    <span className="worker-hall-subcat-label">业务类型:</span>
+                  <div className="worker-hall-subcat-bar" style={{ marginTop: 10 }}>
+                    <span className="worker-hall-subcat-label">业务分类:</span>
                     <button
                       type="button"
                       className={`worker-hall-mobile-cat-pill ${subCategoryId === 0 ? 'active' : ''}`}
@@ -786,35 +919,50 @@ export default function WorkerHallPage() {
                     const disabledReason = resolveGrabDisabledReason(order, worker, remainingSlots)
                     const productName = resolveHallProductName(order) || '未命名商品'
                     const sharingRemaining = resolveSharingRemaining(order)
+                    const depositAmount = resolveHallDepositAmount(order)
+                    const rewardAmount = resolveHallRewardAmount(order)
 
                     return (
                       <article key={order.workOrderId} className="worker-hall-card">
-                        <div className="worker-hall-card-title">
-                          {order.pinnedAt ? (
-                            <Tag
-                              color="gold"
-                              icon={<PushpinOutlined />}
-                              className="worker-hall-pinned-tag"
-                            >
-                              置顶
+                        <div className="worker-hall-card-header">
+                          <div className="worker-hall-card-tags">
+                            {order.pinnedAt ? (
+                              <Tag
+                                color="gold"
+                                icon={<PushpinOutlined />}
+                                className="worker-hall-pinned-tag"
+                              >
+                                置顶
+                              </Tag>
+                            ) : null}
+                            <Tag className="worker-hall-category-tag">
+                              {order.parentCategoryName
+                                ? `${order.parentCategoryName} · ${order.categoryName}`
+                                : order.categoryName || '默认分类'}
                             </Tag>
-                          ) : null}
+                            {order.sharing?.enabled ? <Tag color="purple">拼单</Tag> : null}
+                            {Number(order.timeoutMinutes || 0) > 0 ? (
+                              <Tag color="orange" icon={<ClockCircleOutlined />}>
+                                限时 {order.timeoutMinutes}m
+                              </Tag>
+                            ) : null}
+                          </div>
+                          <span
+                            className="worker-hall-card-orderno"
+                            title={`订单号：${getDisplayOrderNo(order)}`}
+                          >
+                            {getDisplayOrderNo(order)}
+                          </span>
+                        </div>
+
+                        <div className="worker-hall-card-body">
                           <strong className="worker-hall-card-title-text" title={productName}>
                             {productName}
                           </strong>
-                          <Typography.Text type="secondary">
-                            {order.parentCategoryName
-                              ? `${order.parentCategoryName} · ${order.categoryName}`
-                              : order.categoryName || '默认分类'}
-                          </Typography.Text>
-                          <Typography.Text type="secondary">
-                            订单号：{getDisplayOrderNo(order)}
-                          </Typography.Text>
                         </div>
 
                         {order.sharing?.enabled ? (
                           <div className="worker-hall-card-sharing">
-                            <Tag color="purple">拼单</Tag>
                             <Typography.Text type="secondary">
                               单价 {formatMoney(order.sharing.unitReward)} · 进度{' '}
                               {order.sharingProgress?.joinedQuantity || 0}/
@@ -823,21 +971,24 @@ export default function WorkerHallPage() {
                           </div>
                         ) : null}
 
-                        {Number(order.timeoutMinutes || 0) > 0 ? (
-                          <div className="worker-hall-card-sharing">
-                            <Tag color="orange" icon={<ClockCircleOutlined />}>
-                              限时 {order.timeoutMinutes} 分钟
-                            </Tag>
-                          </div>
-                        ) : null}
-
                         <div className="worker-hall-card-amount-row">
-                          <div className="worker-hall-card-amount">
-                            {formatMoney(resolveHallRewardAmount(order))}
+                          <div className="worker-hall-card-amount-group">
+                            <span className="worker-hall-card-amount-label">接单报酬</span>
+                            <div className="worker-hall-card-amount">
+                              {formatMoney(rewardAmount)}
+                            </div>
+                          </div>
+                          <div className="worker-hall-card-deposit-group">
+                            {depositAmount <= 0 ? (
+                              <span className="worker-hall-deposit-free-badge">
+                                <CheckCircleOutlined /> 免保证金
+                              </span>
+                            ) : (
+                              <span className="worker-hall-deposit-badge">
+                                保证金 {formatMoney(depositAmount)}
+                              </span>
+                            )}
                           </div>
-                          <Typography.Text type="secondary" className="worker-hall-card-deposit">
-                            所需保证金：{formatMoney(resolveHallDepositAmount(order))}
-                          </Typography.Text>
                         </div>
 
                         {disabledReason ? (
@@ -867,6 +1018,7 @@ export default function WorkerHallPage() {
                               <Button
                                 type="primary"
                                 size="large"
+                                className="worker-hall-card-grab-btn"
                                 disabled={Boolean(disabledReason)}
                                 loading={grabbingId === order.workOrderId}
                                 onClick={() => requestGrab(order)}
@@ -1013,6 +1165,22 @@ export default function WorkerHallPage() {
   )
 }
 
+function getCategoryGradient(name: string, id: number): string {
+  const gradients = [
+    'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+    'linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%)',
+    'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    'linear-gradient(135deg, #f59e0b 0%, #ea580c 100%)',
+    'linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)',
+    'linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%)',
+    'linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)',
+    'linear-gradient(135deg, #f97316 0%, #c2410c 100%)',
+  ]
+  const charCode = (name && name.charCodeAt(0)) || 0
+  const index = Math.abs((id * 31 + charCode) % gradients.length)
+  return gradients[index]
+}
+
 function resolveGrabDisabledReason(
   order: WorkOrder,
   worker: WorkerUser | undefined,
diff --git a/apps/frontend/src/styles/worker.css b/apps/frontend/src/styles/worker.css
index 0f875218..58efeac1 100644
--- a/apps/frontend/src/styles/worker.css
+++ b/apps/frontend/src/styles/worker.css
@@ -645,6 +645,354 @@
   width: min(460px, 100%);
 }
 
+/* ===== 桌面端抢单大厅全新整合头部 ===== */
+.worker-hall-desktop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  background: #ffffff;
+  padding: 14px 20px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.worker-hall-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.worker-hall-heading.ant-typography {
+  margin: 0 !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  color: #0f172a !important;
+  letter-spacing: -0.02em;
+}
+
+.worker-hall-live-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #059669;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  padding: 2px 10px;
+  border-radius: 9999px;
+}
+
+.worker-hall-pulse-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  animation: worker-hall-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+@keyframes worker-hall-pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+.worker-hall-header-center {
+  flex: 1;
+  max-width: 520px;
+  min-width: 260px;
+}
+
+.worker-hall-desktop-search {
+  width: 100%;
+}
+
+.worker-hall-desktop-search .ant-input {
+  border-radius: 8px 0 0 8px;
+  padding: 6px 14px;
+  border-color: #cbd5e1;
+}
+
+.worker-hall-desktop-search .ant-input:hover,
+.worker-hall-desktop-search .ant-input:focus {
+  border-color: var(--theme-primary);
+}
+
+.worker-hall-desktop-search .ant-btn {
+  border-radius: 0 8px 8px 0;
+  padding: 6px 18px;
+  height: auto;
+  font-weight: 500;
+}
+
+.worker-hall-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.worker-hall-header-switch-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #475569;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  padding: 5px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ===== 抢单大厅 4 栏 KPI 仪表盘 ===== */
+.worker-hall-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+@media (max-width: 1200px) {
+  .worker-hall-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .worker-hall-kpi-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.worker-hall-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 12px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
+}
+
+.worker-hall-kpi-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
+  transform: translateY(-2px);
+}
+
+.worker-hall-kpi-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.worker-hall-kpi-icon-wrap {
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 19px;
+  flex-shrink: 0;
+}
+
+.worker-hall-kpi-icon-wrap.kpi-wallet {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.worker-hall-kpi-icon-wrap.kpi-quota {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.worker-hall-kpi-icon-wrap.kpi-tasks {
+  background: #faf5ff;
+  color: #9333ea;
+}
+
+.worker-hall-kpi-icon-wrap.kpi-pool {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.worker-hall-kpi-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.worker-hall-kpi-title {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.worker-hall-kpi-val {
+  font-size: 20px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.worker-hall-kpi-unit {
+  font-size: 13px;
+  font-weight: 400;
+  color: #64748b;
+  margin-left: 2px;
+}
+
+.worker-hall-kpi-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #f1f5f9;
+  font-size: 12px;
+}
+
+.worker-hall-kpi-sub-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #64748b;
+}
+
+.worker-hall-kpi-sub-item .kpi-sub-val {
+  color: #334155;
+  font-weight: 500;
+}
+
+.worker-hall-kpi-level-badge {
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 9999px;
+  background: #fff7ed;
+  color: #c2410c;
+  border: 1px solid #fed7aa;
+  font-weight: 600;
+}
+
+.worker-hall-kpi-progress-track {
+  flex: 1;
+  height: 6px;
+  background: #f1f5f9;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.worker-hall-kpi-progress-bar {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+.worker-hall-kpi-progress-bar.safe {
+  background: linear-gradient(90deg, #10b981, #059669);
+}
+
+.worker-hall-kpi-progress-bar.warning {
+  background: linear-gradient(90deg, #f59e0b, #d97706);
+}
+
+.worker-hall-kpi-progress-bar.danger {
+  background: linear-gradient(90deg, #ef4444, #dc2626);
+}
+
+.worker-hall-kpi-sub-text {
+  color: #64748b;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.worker-hall-kpi-stat-tags {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.worker-hall-kpi-tag {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.worker-hall-kpi-tag.blue {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.worker-hall-kpi-tag.red {
+  background: #fef2f2;
+  color: #dc2626;
+  font-weight: 600;
+}
+
+.worker-hall-kpi-tag.neutral {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.worker-hall-kpi-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--theme-primary);
+  font-weight: 500;
+  font-size: 12px;
+  transition: opacity 0.2s ease;
+}
+
+.worker-hall-kpi-link:hover {
+  opacity: 0.8;
+}
+
+.worker-hall-kpi-pool-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #059669;
+  font-weight: 500;
+}
+
+.worker-hall-kpi-dot-online {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+}
+
+.worker-hall-kpi-pool-sub {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
 .worker-hall-board-card .ant-card-body {
   display: grid;
   gap: 16px;
@@ -732,13 +1080,130 @@
 
 .worker-hall-card {
   min-width: 0;
-  padding: 12px 14px;
+  padding: 14px 16px;
   border-radius: 12px;
   background: #ffffff;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
-  display: grid;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   gap: 10px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.worker-hall-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+  transform: translateY(-2px);
+}
+
+.worker-hall-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.worker-hall-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.worker-hall-category-tag {
+  background: #f1f5f9 !important;
+  color: #334155 !important;
+  border: 1px solid #e2e8f0 !important;
+  font-weight: 500;
+  font-size: 12px;
+  border-radius: 4px;
+  margin: 0 !important;
+}
+
+.worker-hall-card-orderno {
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: #94a3b8;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.worker-hall-card-body {
+  min-width: 0;
+}
+
+.worker-hall-card-title-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-weight: 600;
+  color: #0f172a;
+  font-size: 14px;
+  line-height: 1.4;
+  min-height: 38px;
+}
+
+.worker-hall-card-amount-row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #f1f5f9;
+  gap: 8px;
+}
+
+.worker-hall-card-amount-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.worker-hall-card-amount-label {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.worker-hall-card-amount {
+  color: #ea580c;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 800;
+}
+
+.worker-hall-card-deposit-group {
+  flex-shrink: 0;
+}
+
+.worker-hall-deposit-free-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #059669;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  padding: 2px 7px;
+  border-radius: 6px;
+}
+
+.worker-hall-deposit-badge {
+  font-size: 11px;
+  color: #64748b;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  padding: 2px 7px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.worker-hall-card-grab-btn {
+  font-weight: 600;
 }
 
 .worker-hall-card-title {
@@ -1896,11 +2361,9 @@ body {
 .worker-hall-game-initial {
   font-size: 18px;
   font-weight: 700;
-  color: #64748b;
-}
-
-.worker-hall-game-card.active .worker-hall-game-initial {
-  color: var(--theme-primary);
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  letter-spacing: 0.5px;
 }
 
 .worker-hall-game-title {