feat: 优化移动端打手接单界面布局并完成CSS架构模块化拆分

apps/frontend/src/pages/worker/WorkerHallPage.tsx

@@ -203,48 +203,81 @@ export default function WorkerHallPage() {
   ]
 
   return (
-    <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-head-controls">
-            <Tooltip
-              title={
-                autoRefresh
-                  ? '已开启自动刷新，每 5 秒刷新一次'
-                  : '开启后每 5 秒自动刷新订单列表'
-              }
-            >
-              <div className="worker-hall-autorefresh-box">
-                <span className="worker-hall-autorefresh-label">自动刷新</span>
+    <>
+      {isMobile ? (
+        <div className="worker-hall-mobile-page">
+          {/* 移动端顶部极简状态 & 刷新控制 */}
+          <div className="worker-hall-mobile-top-bar">
+            <div className="worker-hall-mobile-stat-pill">
+              <span className="worker-hall-mobile-stat-item">
+                余额 <strong className="worker-hall-mobile-stat-highlight">{worker ? formatMoney(worker.wallet.availableAmount) : '-'}</strong>
+              </span>
+              <span className="worker-hall-mobile-stat-divider">|</span>
+              <span className="worker-hall-mobile-stat-item">
+                上限 <strong>{remainingSlots === null ? '-' : `${activeCount}/${maxActiveOrders}`}</strong>
+              </span>
+            </div>
+
+            <div className="worker-hall-mobile-top-actions">
+              <div className="worker-hall-mobile-autorefresh-switch">
+                <span className="worker-hall-mobile-autorefresh-text">自动刷新</span>
                 <Switch
                   size="small"
                   checked={autoRefresh}
                   onChange={toggleAutoRefresh}
                 />
               </div>
-            </Tooltip>
-            <Button
-              icon={<ReloadOutlined />}
-              loading={
-                ordersQuery.isFetching ||
-                profileQuery.isFetching ||
-                hallSummaryQuery.isFetching
-              }
-              onClick={() => refreshAll()}
-            >
-              刷新
-            </Button>
+              <Button
+                size="small"
+                shape="circle"
+                icon={<ReloadOutlined />}
+                loading={
+                  ordersQuery.isFetching ||
+                  profileQuery.isFetching ||
+                  hallSummaryQuery.isFetching
+                }
+                onClick={() => refreshAll()}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="worker-hall-search-bar">
-          <Space.Compact className="worker-hall-search">
+          {/* 移动端横向滑动分类条 */}
+          {categories.length > 0 ? (
+            <div className="worker-hall-mobile-category-bar">
+              <button
+                type="button"
+                className={`worker-hall-mobile-cat-pill ${categoryId === 0 ? 'active' : ''}`}
+                onClick={() => {
+                  setCategoryId(0)
+                  setPage(1)
+                }}
+              >
+                全部
+              </button>
+              {categories.map((category) => (
+                <button
+                  key={category.categoryId}
+                  type="button"
+                  className={`worker-hall-mobile-cat-pill ${categoryId === category.categoryId ? 'active' : ''}`}
+                  onClick={() => {
+                    setCategoryId(category.categoryId)
+                    setPage(1)
+                  }}
+                >
+                  {category.name}
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          {/* 紧凑搜索栏 */}
+          <div className="worker-hall-mobile-search-row">
             <Input
               allowClear
               value={keywordInput}
-              placeholder="搜索商品名称 / 订单号"
+              placeholder="搜索商品 / 订单号"
               prefix={<SearchOutlined />}
+              className="worker-hall-mobile-search-input"
               onChange={(event) => {
                 const nextKeyword = event.target.value
                 setKeywordInput(nextKeyword)
@@ -263,76 +296,45 @@ export default function WorkerHallPage() {
             >
               搜索
             </Button>
-          </Space.Compact>
-        </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>
-
-        {categories.length > 0 ? (
-          <Tabs
-            size="small"
-            activeKey={String(categoryId)}
-            items={[
-              { key: '0', label: '全部' },
-              ...categories.map((category) => ({
-                key: String(category.categoryId),
-                label: category.name,
-              })),
-            ]}
-            onChange={(nextKey) => {
-              setCategoryId(Number(nextKey) || 0)
-              setPage(1)
-            }}
-          />
-        ) : null}
-
-        {shouldWarn ? (
-          <Alert
-            className="worker-hall-warning"
-            showIcon
-            type="warning"
-            message={
-              remainingSlots !== null && remainingSlots <= 0
-                ? '当前已达到接单上限，请先处理现有工单'
-                : `当前还有 ${problemCount} 单问题单待处理，建议优先收口`
-            }
-          />
-        ) : null}
-
-        {ordersQuery.isLoading ? (
-          <div className="worker-hall-loading">
-            <Spin size="large" />
           </div>
-        ) : ordersQuery.error ? (
-          <Empty
-            description={
-              ordersQuery.error instanceof Error
-                ? ordersQuery.error.message
-                : '读取抢单大厅失败'
-            }
-          />
-        ) : orders.length === 0 ? (
-          <Empty
-            description={
-              keyword
-                ? `没有找到与 “${keyword}” 相关的可抢工单`
-                : '当前暂无可抢订单，可稍后刷新再看'
-            }
-          />
-        ) : (
-          <>
-            <div className="worker-hall-card-grid">
-              {orders.map((order) => {
+
+          {shouldWarn ? (
+            <Alert
+              className="worker-hall-warning"
+              showIcon
+              type="warning"
+              message={
+                remainingSlots !== null && remainingSlots <= 0
+                  ? '当前已达到接单上限，请先处理现有工单'
+                  : `当前还有 ${problemCount} 单问题单待处理，建议优先收口`
+              }
+            />
+          ) : null}
+
+          {/* 移动端高密度订单卡片流 */}
+          <div className="worker-hall-mobile-list">
+            {ordersQuery.isLoading ? (
+              <div className="worker-hall-loading">
+                <Spin size="large" />
+              </div>
+            ) : ordersQuery.error ? (
+              <Empty
+                description={
+                  ordersQuery.error instanceof Error
+                    ? ordersQuery.error.message
+                    : '读取抢单大厅失败'
+                }
+              />
+            ) : orders.length === 0 ? (
+              <Empty
+                description={
+                  keyword
+                    ? `没有找到与 “${keyword}” 相关的可抢工单`
+                    : '当前暂无可抢工单，可稍后刷新再看'
+                }
+              />
+            ) : (
+              orders.map((order) => {
                 const disabledReason = resolveGrabDisabledReason(
                   order,
                   worker,
@@ -340,69 +342,58 @@ export default function WorkerHallPage() {
                 )
 
                 return (
-                  <article key={order.workOrderId} className="worker-hall-card">
-                    <div className="worker-hall-card-title">
-                      <strong
-                        className="worker-hall-card-title-text"
-                        title={order.productName || '未命名商品'}
-                      >
+                  <article key={order.workOrderId} className="worker-hall-mobile-card">
+                    {/* 卡片头部: 分类 + 拼单/时限标签 + 订单号 */}
+                    <div className="worker-hall-mobile-card-top">
+                      <div className="worker-hall-mobile-card-tags">
+                        {order.categoryName ? (
+                          <Tag color="blue" className="worker-hall-mobile-tag">
+                            {order.categoryName}
+                          </Tag>
+                        ) : null}
+                        {order.sharing?.enabled ? (
+                          <Tag color="purple" className="worker-hall-mobile-tag">
+                            拼单 剩{resolveSharingRemaining(order)}份
+                          </Tag>
+                        ) : null}
+                        {Number(order.timeoutMinutes || 0) > 0 ? (
+                          <Tag color="orange" icon={<ClockCircleOutlined />} className="worker-hall-mobile-tag">
+                            限时{order.timeoutMinutes}分
+                          </Tag>
+                        ) : null}
+                      </div>
+                      <span className="worker-hall-mobile-card-orderno">
+                        {getDisplayOrderNo(order)}
+                      </span>
+                    </div>
+
+                    {/* 商品标题与保证金说明 */}
+                    <div className="worker-hall-mobile-card-main">
+                      <strong className="worker-hall-mobile-card-title" title={order.productName || '未命名商品'}>
                         {order.productName || '未命名商品'}
                       </strong>
-                      <Typography.Text type="secondary">
-                        {order.categoryName || '默认分类'}
-                      </Typography.Text>
-                      <Typography.Text type="secondary">
-                        订单号：{getDisplayOrderNo(order)}
-                      </Typography.Text>
+                      <div className="worker-hall-mobile-card-meta">
+                        <span>所需保证金: {formatMoney(order.freezeDepositAmount)}</span>
+                        {order.sharing?.enabled ? (
+                          <span> · 拼单单价 {formatMoney(order.sharing.unitReward)}/份</span>
+                        ) : null}
+                      </div>
                     </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}/
-                          {order.sharing.totalQuantity} · 剩{' '}
-                          {resolveSharingRemaining(order)} 份
-                        </Typography.Text>
+                    {/* 底部报酬金额与抢单按钮 */}
+                    <div className="worker-hall-mobile-card-footer">
+                      <div className="worker-hall-mobile-card-price-group">
+                        <span className="worker-hall-mobile-card-price-label">接单报酬</span>
+                        <strong className="worker-hall-mobile-card-price-val">
+                          {formatMoney(order.rewardAmount)}
+                        </strong>
                       </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(order.rewardAmount)}
-                      </div>
-                      <Typography.Text
-                        type="secondary"
-                        className="worker-hall-card-deposit"
-                      >
-                        所需保证金：{formatMoney(order.freezeDepositAmount)}
-                      </Typography.Text>
-                    </div>
-
-                    {disabledReason ? (
-                      <Typography.Text
-                        type="danger"
-                        className="worker-hall-card-hint"
-                      >
-                        {disabledReason}
-                      </Typography.Text>
-                    ) : null}
-
-                    <div className="worker-hall-card-actions">
-                      <div className="worker-hall-card-grab-row">
+                      <div className="worker-hall-mobile-card-btn-group">
                         {order.sharing?.enabled && !disabledReason ? (
                           <Button
                             type="primary"
-                            size="large"
+                            size="middle"
                             className="worker-hall-sharing-button"
                             disabled={Boolean(disabledReason) || Boolean(order.myShare)}
                             onClick={() => openSharingModal(order)}
@@ -414,7 +405,8 @@ export default function WorkerHallPage() {
                         ) : null}
                         <Button
                           type="primary"
-                          size="large"
+                          size="middle"
+                          className="worker-hall-mobile-grab-btn"
                           disabled={Boolean(disabledReason)}
                           loading={grabbingId === order.workOrderId}
                           onClick={() => submitGrab(order)}
@@ -425,29 +417,273 @@ export default function WorkerHallPage() {
                     </div>
                   </article>
                 )
-              })}
-            </div>
+              })
+            )}
 
             {(pagination?.total || 0) > 0 ? (
-              <div className="worker-hall-pagination">
+              <div className="worker-orders-mobile-pagination">
                 <Pagination
                   current={pagination?.page || page}
                   pageSize={pagination?.pageSize || pageSize}
                   total={pagination?.total || 0}
-                  showSizeChanger={!isMobile}
-                  simple={isMobile}
-                  pageSizeOptions={[20, 50, 100]}
-                  showTotal={isMobile ? undefined : (total) => `共 ${total} 条`}
-                  onChange={(nextPage, nextPageSize) => {
+                  simple
+                  onChange={(nextPage: number, nextPageSize: number) => {
                     setPage(nextPage)
                     setPageSize(nextPageSize)
                   }}
                 />
               </div>
             ) : null}
-          </>
-        )}
-      </Card>
+          </div>
+        </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-head-controls">
+                <Tooltip
+                  title={
+                    autoRefresh
+                      ? '已开启自动刷新，每 5 秒刷新一次'
+                      : '开启后每 5 秒自动刷新订单列表'
+                  }
+                >
+                  <div className="worker-hall-autorefresh-box">
+                    <span className="worker-hall-autorefresh-label">自动刷新</span>
+                    <Switch
+                      size="small"
+                      checked={autoRefresh}
+                      onChange={toggleAutoRefresh}
+                    />
+                  </div>
+                </Tooltip>
+                <Button
+                  icon={<ReloadOutlined />}
+                  loading={
+                    ordersQuery.isFetching ||
+                    profileQuery.isFetching ||
+                    hallSummaryQuery.isFetching
+                  }
+                  onClick={() => refreshAll()}
+                >
+                  刷新
+                </Button>
+              </div>
+            </div>
+
+            <div className="worker-hall-search-bar">
+              <Space.Compact className="worker-hall-search">
+                <Input
+                  allowClear
+                  value={keywordInput}
+                  placeholder="搜索商品名称 / 订单号"
+                  prefix={<SearchOutlined />}
+                  onChange={(event) => {
+                    const nextKeyword = event.target.value
+                    setKeywordInput(nextKeyword)
+                    if (!nextKeyword.trim()) {
+                      setKeyword('')
+                      setPage(1)
+                    }
+                  }}
+                  onPressEnter={applyKeywordSearch}
+                />
+                <Button
+                  type="primary"
+                  icon={<SearchOutlined />}
+                  loading={ordersQuery.isFetching}
+                  onClick={applyKeywordSearch}
+                >
+                  搜索
+                </Button>
+              </Space.Compact>
+            </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>
+
+            {categories.length > 0 ? (
+              <Tabs
+                size="small"
+                activeKey={String(categoryId)}
+                items={[
+                  { key: '0', label: '全部' },
+                  ...categories.map((category) => ({
+                    key: String(category.categoryId),
+                    label: category.name,
+                  })),
+                ]}
+                onChange={(nextKey) => {
+                  setCategoryId(Number(nextKey) || 0)
+                  setPage(1)
+                }}
+              />
+            ) : null}
+
+            {shouldWarn ? (
+              <Alert
+                className="worker-hall-warning"
+                showIcon
+                type="warning"
+                message={
+                  remainingSlots !== null && remainingSlots <= 0
+                    ? '当前已达到接单上限，请先处理现有工单'
+                    : `当前还有 ${problemCount} 单问题单待处理，建议优先收口`
+                }
+              />
+            ) : null}
+
+            {ordersQuery.isLoading ? (
+              <div className="worker-hall-loading">
+                <Spin size="large" />
+              </div>
+            ) : ordersQuery.error ? (
+              <Empty
+                description={
+                  ordersQuery.error instanceof Error
+                    ? ordersQuery.error.message
+                    : '读取抢单大厅失败'
+                }
+              />
+            ) : orders.length === 0 ? (
+              <Empty
+                description={
+                  keyword
+                    ? `没有找到与 “${keyword}” 相关的可抢工单`
+                    : '当前暂无可抢订单，可稍后刷新再看'
+                }
+              />
+            ) : (
+              <>
+                <div className="worker-hall-card-grid">
+                  {orders.map((order) => {
+                    const disabledReason = resolveGrabDisabledReason(
+                      order,
+                      worker,
+                      remainingSlots,
+                    )
+
+                    return (
+                      <article key={order.workOrderId} className="worker-hall-card">
+                        <div className="worker-hall-card-title">
+                          <strong
+                            className="worker-hall-card-title-text"
+                            title={order.productName || '未命名商品'}
+                          >
+                            {order.productName || '未命名商品'}
+                          </strong>
+                          <Typography.Text type="secondary">
+                            {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}/
+                              {order.sharing.totalQuantity} · 剩{' '}
+                              {resolveSharingRemaining(order)} 份
+                            </Typography.Text>
+                          </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(order.rewardAmount)}
+                          </div>
+                          <Typography.Text
+                            type="secondary"
+                            className="worker-hall-card-deposit"
+                          >
+                            所需保证金：{formatMoney(order.freezeDepositAmount)}
+                          </Typography.Text>
+                        </div>
+
+                        {disabledReason ? (
+                          <Typography.Text
+                            type="danger"
+                            className="worker-hall-card-hint"
+                          >
+                            {disabledReason}
+                          </Typography.Text>
+                        ) : null}
+
+                        <div className="worker-hall-card-actions">
+                          <div className="worker-hall-card-grab-row">
+                            {order.sharing?.enabled && !disabledReason ? (
+                              <Button
+                                type="primary"
+                                size="large"
+                                className="worker-hall-sharing-button"
+                                disabled={Boolean(disabledReason) || Boolean(order.myShare)}
+                                onClick={() => openSharingModal(order)}
+                              >
+                                {order.myShare
+                                  ? `已拼 ${order.myShare.quantity} 份`
+                                  : `拼单 ${formatMoney(order.sharing.unitReward)}/份`}
+                              </Button>
+                            ) : null}
+                            <Button
+                              type="primary"
+                              size="large"
+                              disabled={Boolean(disabledReason)}
+                              loading={grabbingId === order.workOrderId}
+                              onClick={() => submitGrab(order)}
+                            >
+                              {disabledReason || '立即抢单'}
+                            </Button>
+                          </div>
+                        </div>
+                      </article>
+                    )
+                  })}
+                </div>
+
+                {(pagination?.total || 0) > 0 ? (
+                  <div className="worker-hall-pagination">
+                    <Pagination
+                      current={pagination?.page || page}
+                      pageSize={pagination?.pageSize || pageSize}
+                      total={pagination?.total || 0}
+                      showSizeChanger={!isMobile}
+                      simple={isMobile}
+                      pageSizeOptions={[20, 50, 100]}
+                      showTotal={isMobile ? undefined : (total) => `共 ${total} 条`}
+                      onChange={(nextPage, nextPageSize) => {
+                        setPage(nextPage)
+                        setPageSize(nextPageSize)
+                      }}
+                    />
+                  </div>
+                ) : null}
+              </>
+            )}
+          </Card>
+        </section>
+      )}
 
       <Modal
         title={`拼单参与 · ${sharingOrder?.productName || ''}`}
@@ -491,7 +727,7 @@ export default function WorkerHallPage() {
           </Space>
         ) : null}
       </Modal>
-    </section>
+    </>
   )
 }