From 712cbd5aafa39e95fb2929564ff9557ca7a63651 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Sun, 25 Jan 2026 22:33:34 +0800
Subject: [PATCH] feat(ops): add cleaning work order management module

---
 apps/web-antd/src/api/ops/cleaning/index.ts   |  128 ++
 .../src/api/ops/order-center/index.ts         |  190 ++
 .../web-antd/src/router/routes/modules/ops.ts |   40 +
 .../cleaning/work-order/dashboard/index.vue   | 1443 ++++++++++++
 .../src/views/ops/cleaning/work-order/data.ts |  363 +++
 .../ops/cleaning/work-order/detail/index.vue  | 1961 +++++++++++++++++
 .../views/ops/cleaning/work-order/index.vue   |  823 +++++++
 .../work-order/modules/assign-form.vue        |  232 ++
 .../work-order/modules/cancel-form.vue        |  123 ++
 .../cleaning/work-order/modules/card-view.vue |  726 ++++++
 .../cleaning/work-order/modules/stats-bar.vue |  474 ++++
 .../modules/upgrade-priority-form.vue         |  136 ++
 12 files changed, 6639 insertions(+)
 create mode 100644 apps/web-antd/src/api/ops/cleaning/index.ts
 create mode 100644 apps/web-antd/src/api/ops/order-center/index.ts
 create mode 100644 apps/web-antd/src/router/routes/modules/ops.ts
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/data.ts
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/index.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/modules/assign-form.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/modules/cancel-form.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/modules/upgrade-priority-form.vue

diff --git a/apps/web-antd/src/api/ops/cleaning/index.ts b/apps/web-antd/src/api/ops/cleaning/index.ts
new file mode 100644
index 000000000..472c2f947
--- /dev/null
+++ b/apps/web-antd/src/api/ops/cleaning/index.ts
@@ -0,0 +1,128 @@
+import { requestClient } from '#/api/request';
+
+export namespace OpsCleaningApi {
+  /** 保洁员状态枚举 */
+  export enum CleanerStatus {
+    BUSY = 'BUSY', // 忙碌
+    IDLE = 'IDLE', // 空闲
+    OFFLINE = 'OFFLINE', // 离线
+    PAUSED = 'PAUSED', // 暂停中
+  }
+
+  /** 通知类型枚举 */
+  export enum NotifyType {
+    VIBRATE = 'VIBRATE', // 震动
+    VOICE = 'VOICE', // 语音
+  }
+
+  /** 升级优先级请求 */
+  export interface UpgradePriorityReq {
+    orderId: number; // 工单ID
+    reason: string; // 升级原因
+  }
+
+  /** 工牌通知请求 */
+  export interface DeviceNotifyReq {
+    cleanerId: number; // 保洁员ID
+    type: NotifyType; // 通知类型
+    content?: string; // 语音内容（仅语音通知需要）
+  }
+
+  /** 保洁员状态信息 */
+  export interface CleanerStatusItem {
+    userId: number; // 用户ID
+    userName: string; // 用户名称
+    avatar?: string; // 头像
+    status: CleanerStatus; // 状态
+    currentAreaId?: number; // 当前区域ID
+    currentAreaName?: string; // 当前区域名称
+    batteryLevel: number; // 电量（0-100）
+    lastHeartbeatTime: string; // 最后心跳时间
+    todayCompletedCount?: number; // 今日完成工单数
+    todayWorkMinutes?: number; // 今日工作时长（分钟）
+  }
+
+  /** 保洁员状态列表查询参数 */
+  export interface CleanerListQuery {
+    areaId?: number; // 区域ID（可选）
+    status?: CleanerStatus; // 状态筛选（可选）
+  }
+
+  /** 保洁员状态列表响应 */
+  export interface CleanerListResp {
+    list: CleanerStatusItem[];
+  }
+
+  /** 工单时间轴节点 */
+  export interface TimelineItem {
+    status: string; // 状态
+    statusName: string; // 状态名称
+    time: string; // 时间
+    operator?: string; // 操作人
+    description?: string; // 描述
+    extra?: Record<string, any>; // 额外信息（如RSSI值、信标ID等）
+  }
+
+  /** 工单时间轴响应 */
+  export interface OrderTimelineResp {
+    orderId: number;
+    currentStatus: string;
+    timeline: TimelineItem[];
+  }
+
+  /** 保洁员工牌实时状态 */
+  export interface BadgeRealtimeStatus {
+    cleanerId: number; // 保洁员ID
+    deviceId: number; // 设备ID
+    deviceKey: string; // 设备Key
+    status: CleanerStatus; // 设备状态
+    batteryLevel: number; // 电量
+    lastHeartbeatTime: string; // 最后心跳时间
+    rssi?: number; // 信号强度
+    isInArea: boolean; // 是否在区域内
+    areaId?: number; // 当前区域ID
+    areaName?: string; // 当前区域名称
+  }
+}
+
+// ==================== 保洁专属接口 ====================
+
+/** 升级工单优先级 (P0 插队) */
+export function upgradePriority(data: OpsCleaningApi.UpgradePriorityReq) {
+  return requestClient.post('/ops/clean/order/upgrade-priority', data);
+}
+
+/** 发送工牌通知 (语音/震动) */
+export function sendDeviceNotify(data: OpsCleaningApi.DeviceNotifyReq) {
+  return requestClient.post('/ops/clean/device/notify', data);
+}
+
+/** 查询保洁员实时状态列表 */
+export function getCleanerStatusList(params?: OpsCleaningApi.CleanerListQuery) {
+  return requestClient.get<OpsCleaningApi.CleanerListResp>(
+    '/ops/clean/cleaner/list',
+    { params },
+  );
+}
+
+/** 获取工单时间轴 */
+export function getOrderTimeline(orderId: number) {
+  return requestClient.get<OpsCleaningApi.OrderTimelineResp>(
+    `/ops/clean/order/timeline/${orderId}`,
+  );
+}
+
+/** 获取保洁员工牌实时状态 */
+export function getBadgeRealtimeStatus(cleanerId: number) {
+  return requestClient.get<OpsCleaningApi.BadgeRealtimeStatus>(
+    `/ops/clean/badge/realtime/${cleanerId}`,
+  );
+}
+
+/** 手动完成工单（兜底操作） */
+export function manualCompleteOrder(orderId: number, remark?: string) {
+  return requestClient.post('/ops/clean/order/manual-complete', {
+    orderId,
+    remark,
+  });
+}
diff --git a/apps/web-antd/src/api/ops/order-center/index.ts b/apps/web-antd/src/api/ops/order-center/index.ts
new file mode 100644
index 000000000..a072275f5
--- /dev/null
+++ b/apps/web-antd/src/api/ops/order-center/index.ts
@@ -0,0 +1,190 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace OpsOrderCenterApi {
+  /** 工单类型枚举 */
+  export enum OrderType {
+    CLEAN = 'CLEAN', // 保洁
+    REPAIR = 'REPAIR', // 维修
+    SECURITY = 'SECURITY', // 安保
+  }
+
+  /** 工单状态枚举 */
+  export enum OrderStatus {
+    ARRIVED = 'ARRIVED', // 已到岗
+    CANCELLED = 'CANCELLED', // 已取消
+    COMPLETED = 'COMPLETED', // 已完成
+    CONFIRMED = 'CONFIRMED', // 已确认
+    DISPATCHED = 'DISPATCHED', // 已推送
+    PAUSED = 'PAUSED', // 已暂停
+    PENDING = 'PENDING', // 待分配
+    QUEUED = 'QUEUED', // 排队中
+  }
+
+  /** 保洁类型枚举 */
+  export enum CleaningType {
+    DEEP = 'DEEP', // 深度
+    EMERGENCY = 'EMERGENCY', // 应急
+    ROUTINE = 'ROUTINE', // 日常
+  }
+
+  /** 优先级枚举 (0=P0紧急, 1=P1重要, 2=P2普通) */
+  export enum Priority {
+    P0 = 0, // 紧急
+    P1 = 1, // 重要
+    P2 = 2, // 普通
+  }
+
+  /** 触发来源枚举 */
+  export enum TriggerSource {
+    IOT_BEACON = 'IOT_BEACON', // 蓝牙信标
+    MANUAL = 'MANUAL', // 手动创建
+    PEOPLE_FLOW = 'PEOPLE_FLOW', // 客流阈值
+  }
+
+  /** 工单查询参数 */
+  export interface OrderPageQuery extends PageParam {
+    orderType?: OrderType; // 工单类型
+    status?: OrderStatus | OrderStatus[]; // 工单状态（支持多选）
+    priority?: Priority; // 优先级
+    areaId?: number; // 区域ID
+    assigneeId?: number; // 执行人ID
+    orderCode?: string; // 工单编号（模糊搜索）
+    title?: string; // 标题（模糊搜索）
+    createTime?: string[]; // 创建时间范围
+  }
+
+  /** 保洁扩展信息 */
+  export interface CleaningExtInfo {
+    cleaningType?: CleaningType; // 作业类型
+    expectedDuration?: number; // 预计时长(分钟)
+    arrivedTime?: string; // 到岗时间
+    totalPauseSeconds?: number; // 暂停总秒数
+    difficultyLevel?: number; // 难度等级
+    isAuto?: number; // 是否自动创建 (1=自动, 0=手动)
+  }
+
+  /** 工单列表项 */
+  export interface OrderItem {
+    id: number;
+    orderCode: string; // 工单编号
+    title: string; // 工单标题
+    orderType: OrderType; // 工单类型
+    status: OrderStatus; // 工单状态
+    priority: Priority; // 优先级
+    areaId?: number; // 区域ID
+    location?: string; // 位置描述
+    assigneeId?: number; // 执行人ID
+    assigneeName?: string; // 执行人姓名
+    createTime: string; // 创建时间
+    extInfo?: CleaningExtInfo; // 保洁扩展信息
+  }
+
+  /** 工单详情 */
+  export interface OrderDetail extends OrderItem {
+    description?: string; // 工单描述
+    triggerSource?: TriggerSource; // 触发来源
+    triggerDeviceId?: number; // 触发设备ID
+    triggerDeviceKey?: string; // 触发设备Key
+    triggerRule?: string; // 触发规则
+    startTime?: string; // 开始时间（到岗时间）
+    endTime?: string; // 结束时间
+    remark?: string; // 备注
+  }
+
+  /** 统计数据 - 按类型和状态分组 */
+  export interface OrderStats {
+    [orderType: string]: {
+      [status: string]: number;
+    };
+  }
+
+  /** 快速统计数据 */
+  export interface QuickStats {
+    pendingCount: number; // 待分配数量
+    inProgressCount: number; // 进行中数量
+    completedTodayCount: number; // 今日完成数量
+    onlineCleanerCount: number; // 在线保洁员数量
+  }
+
+  /** 分配工单请求 */
+  export interface AssignOrderReq {
+    orderId: number; // 工单ID
+    assigneeId: number; // 执行人ID
+    remark?: string; // 备注
+  }
+
+  /** 暂停工单请求 */
+  export interface PauseOrderReq {
+    orderId: number; // 工单ID
+    userId: number; // 操作人ID
+    reason: string; // 暂停原因
+  }
+
+  /** 恢复工单请求 */
+  export interface ResumeOrderReq {
+    orderId: number; // 工单ID
+    userId: number; // 操作人ID
+  }
+
+  /** 取消工单请求 */
+  export interface CancelOrderReq {
+    id: number; // 工单ID
+    reason: string; // 取消原因
+  }
+}
+
+// ==================== 工单查询接口 ====================
+
+/** 分页查询工单 */
+export function getOrderPage(params: OpsOrderCenterApi.OrderPageQuery) {
+  return requestClient.get<PageResult<OpsOrderCenterApi.OrderItem>>(
+    '/ops/order-center/page',
+    { params },
+  );
+}
+
+/** 查询工单详情 */
+export function getOrderDetail(id: number) {
+  return requestClient.get<OpsOrderCenterApi.OrderDetail>(
+    `/ops/order-center/detail/${id}`,
+  );
+}
+
+/** 获取统计数据 */
+export function getOrderStats(groupBy?: 'status' | 'type') {
+  return requestClient.get<OpsOrderCenterApi.OrderStats>(
+    '/ops/order-center/stats',
+    { params: { groupBy } },
+  );
+}
+
+/** 获取快速统计数据（用于顶部统计栏） */
+export function getQuickStats() {
+  return requestClient.get<OpsOrderCenterApi.QuickStats>(
+    '/ops/order-center/quick-stats',
+  );
+}
+
+// ==================== 工单操作接口 ====================
+
+/** 重新分配/派单 */
+export function assignOrder(data: OpsOrderCenterApi.AssignOrderReq) {
+  return requestClient.post('/ops/order/assign', data);
+}
+
+/** 暂停工单 */
+export function pauseOrder(data: OpsOrderCenterApi.PauseOrderReq) {
+  return requestClient.post('/ops/order/pause', data);
+}
+
+/** 恢复工单 */
+export function resumeOrder(data: OpsOrderCenterApi.ResumeOrderReq) {
+  return requestClient.post('/ops/order/resume', data);
+}
+
+/** 取消工单 */
+export function cancelOrder(data: OpsOrderCenterApi.CancelOrderReq) {
+  return requestClient.post('/ops/order/cancel', data);
+}
diff --git a/apps/web-antd/src/router/routes/modules/ops.ts b/apps/web-antd/src/router/routes/modules/ops.ts
new file mode 100644
index 000000000..335af62a4
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/ops.ts
@@ -0,0 +1,40 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/ops',
+    name: 'OpsCenter',
+    meta: {
+      title: '运维中心',
+      icon: 'lucide:wrench',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      // 保洁工单详情
+      {
+        path: 'cleaning/work-order/detail/:id',
+        name: 'CleaningWorkOrderDetail',
+        meta: {
+          title: '工单详情',
+          activePath: '/ops/cleaning/work-order',
+        },
+        component: () =>
+          import('#/views/ops/cleaning/work-order/detail/index.vue'),
+      },
+      // 保洁工单统计看板
+      {
+        path: 'cleaning/work-order/dashboard',
+        name: 'CleaningWorkOrderDashboard',
+        meta: {
+          title: '统计看板',
+          activePath: '/ops/cleaning/work-order',
+        },
+        component: () =>
+          import('#/views/ops/cleaning/work-order/dashboard/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
new file mode 100644
index 000000000..7ed61a43f
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
@@ -0,0 +1,1443 @@
+<script setup lang="ts">
+import type { ECOption } from '@vben/plugins/echarts';
+
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card, Col, Row, Spin, Statistic, Tooltip } from 'ant-design-vue';
+
+import { getQuickStats } from '#/api/ops/order-center';
+
+defineOptions({ name: 'CleaningWorkOrderDashboard' });
+
+// ========== 模拟数据开关 ==========
+const USE_MOCK_DATA = true;
+
+// ========== 数据类型定义 ==========
+interface DashboardStats {
+  // 基础统计
+  pendingCount: number;
+  inProgressCount: number;
+  completedTodayCount: number;
+  completedTotalCount: number;
+  onlineCleanerCount: number;
+  totalCleanerCount: number;
+
+  // 趋势数据（7天）
+  trendData: {
+    completedData: number[];
+    createdData: number[];
+    dates: string[];
+  };
+
+  // 工单时段分布（24小时）
+  hourlyDistribution: {
+    data: number[];
+    hours: string[];
+  };
+
+  // 耗时趋势数据（7天）
+  timeTrendData: {
+    completionTimeData: number[];
+    dates: string[];
+    responseTimeData: number[];
+  };
+
+  // 工单处理漏斗
+  funnelData: Array<{ name: string; value: number }>;
+
+  // 时段热力图数据（7天 x 24小时）
+  heatmapData: {
+    data: number[][]; // 7x24的二维数组
+    days: string[]; // 周一到周日
+    hours: string[]; // 0-23小时
+  };
+
+  // 区域工单排行
+  areaRanking: Array<{
+    area: string;
+    completed: number;
+    count: number;
+    rate: number;
+  }>;
+
+  // 工单作业时长统计
+  durationStats: Array<{
+    avgDuration: number; // 分钟
+    color: string;
+    icon: string;
+    type: string;
+  }>;
+}
+
+// ========== 响应式数据 ==========
+const loading = ref(true);
+const chartLoading = ref(true);
+
+// 图表引用
+const trendChartRef = ref();
+const hourlyChartRef = ref();
+const timeTrendChartRef = ref();
+const funnelChartRef = ref();
+const heatmapChartRef = ref();
+const areaRankingChartRef = ref();
+const durationChartRef = ref();
+
+const { renderEcharts: renderTrendChart } = useEcharts(trendChartRef);
+const { renderEcharts: renderHourlyChart } = useEcharts(hourlyChartRef);
+const { renderEcharts: renderTimeTrendChart } = useEcharts(timeTrendChartRef);
+const { renderEcharts: renderFunnelChart } = useEcharts(funnelChartRef);
+const { renderEcharts: renderHeatmapChart } = useEcharts(heatmapChartRef);
+const { renderEcharts: renderAreaRankingChart } =
+  useEcharts(areaRankingChartRef);
+const { renderEcharts: renderDurationChart } = useEcharts(durationChartRef);
+
+const statsData = ref<DashboardStats>({
+  pendingCount: 0,
+  inProgressCount: 0,
+  completedTodayCount: 0,
+  completedTotalCount: 0,
+  onlineCleanerCount: 0,
+  totalCleanerCount: 0,
+  trendData: {
+    dates: [],
+    createdData: [],
+    completedData: [],
+  },
+  hourlyDistribution: {
+    hours: [],
+    data: [],
+  },
+  timeTrendData: {
+    dates: [],
+    responseTimeData: [],
+    completionTimeData: [],
+  },
+  funnelData: [],
+  heatmapData: {
+    days: [],
+    hours: [],
+    data: [],
+  },
+  areaRanking: [],
+  durationStats: [],
+});
+
+// ========== 模拟数据 ==========
+const MOCK_STATS: DashboardStats = {
+  pendingCount: 8,
+  inProgressCount: 15,
+  completedTodayCount: 42,
+  completedTotalCount: 1586,
+  onlineCleanerCount: 12,
+  totalCleanerCount: 18,
+  trendData: {
+    dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    createdData: [45, 52, 38, 65, 48, 55, 42],
+    completedData: [42, 48, 35, 60, 45, 52, 40],
+  },
+  hourlyDistribution: {
+    hours: [
+      '00:00',
+      '02:00',
+      '04:00',
+      '06:00',
+      '08:00',
+      '10:00',
+      '12:00',
+      '14:00',
+      '16:00',
+      '18:00',
+      '20:00',
+      '22:00',
+    ],
+    data: [2, 1, 0, 3, 15, 28, 22, 25, 18, 12, 8, 4],
+  },
+  timeTrendData: {
+    dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    responseTimeData: [10, 9, 12, 8, 7, 9, 8.5],
+    completionTimeData: [38, 35, 42, 32, 30, 36, 35],
+  },
+  funnelData: [
+    { name: '创建工单', value: 100 },
+    { name: '已派单', value: 95 },
+    { name: '已接单', value: 88 },
+    { name: '已到达', value: 82 },
+    { name: '已完成', value: 78 },
+  ],
+  // 时段热力图数据（7天 x 24小时）
+  heatmapData: {
+    days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    hours: Array.from({ length: 24 }, (_, i) => `${i}:00`),
+    // 7天 x 24小时的数据（0-10表示工单数量）
+    data: [
+      [
+        0, 0, 0, 1, 2, 8, 12, 18, 20, 16, 12, 6, 2, 0, 0, 0, 0, 0, 0, 1, 3, 5,
+        4, 2,
+      ], // 周一
+      [
+        0, 0, 1, 1, 3, 10, 15, 20, 22, 18, 14, 8, 3, 1, 0, 0, 0, 0, 1, 2, 4, 6,
+        5, 3,
+      ], // 周二
+      [
+        0, 0, 0, 0, 2, 8, 14, 18, 20, 16, 10, 6, 2, 1, 0, 0, 0, 0, 1, 3, 5, 4,
+        3, 1,
+      ], // 周三
+      [
+        0, 0, 0, 2, 4, 12, 18, 22, 24, 20, 14, 8, 2, 1, 0, 0, 0, 0, 1, 2, 5, 6,
+        4, 2,
+      ], // 周四
+      [
+        0, 0, 0, 1, 3, 9, 14, 19, 21, 18, 12, 7, 2, 0, 0, 0, 0, 0, 1, 3, 4, 5,
+        3, 2,
+      ], // 周五
+      [
+        0, 0, 0, 0, 2, 10, 16, 22, 24, 20, 14, 10, 4, 1, 0, 0, 0, 0, 1, 2, 4, 6,
+        5, 3,
+      ], // 周六
+      [
+        0, 0, 0, 1, 1, 6, 12, 16, 18, 15, 10, 6, 2, 0, 0, 0, 0, 0, 1, 2, 3, 4,
+        3, 1,
+      ], // 周日
+    ],
+  },
+  // 区域工单排行
+  areaRanking: [
+    { area: 'A区', count: 156, completed: 142, rate: 91 },
+    { area: 'B区', count: 128, completed: 110, rate: 85.9 },
+    { area: 'C区', count: 95, completed: 88, rate: 92.6 },
+    { area: 'D区', count: 78, completed: 65, rate: 83.3 },
+    { area: 'E区', count: 62, completed: 58, rate: 93.5 },
+    { area: 'F区', count: 45, completed: 42, rate: 93.3 },
+  ],
+  // 工单作业时长统计
+  durationStats: [
+    {
+      type: '日常保洁',
+      icon: 'solar:broom-bold',
+      avgDuration: 35,
+      color: '#1677ff',
+    },
+    {
+      type: '深度保洁',
+      icon: 'solar:multiply-bold',
+      avgDuration: 68,
+      color: '#52c41a',
+    },
+    {
+      type: '专项清洁',
+      icon: 'solar:spray-bottle-bold',
+      avgDuration: 52,
+      color: '#faad14',
+    },
+    {
+      type: '应急处理',
+      icon: 'solar:flame-bold',
+      avgDuration: 25,
+      color: '#ff4d4f',
+    },
+  ],
+};
+
+// ========== 图表配置 ==========
+
+/**
+ * 工单趋势图表配置（近7天）
+ */
+function getTrendChartOptions(): ECOption {
+  const { trendData } = statsData.value;
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      data: ['新增工单', '完成工单'],
+      top: '5%',
+      textStyle: {
+        color: '#595959',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: trendData.dates,
+        axisLine: {
+          lineStyle: {
+            color: '#d9d9d9',
+          },
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '工单数量',
+        nameTextStyle: {
+          color: '#8c8c8c',
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '新增工单',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        areaStyle: {
+          opacity: 0.15,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(22, 119, 255, 0.4)' },
+              { offset: 1, color: 'rgba(22, 119, 255, 0.05)' },
+            ],
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: trendData.createdData,
+        itemStyle: {
+          color: '#1677ff',
+        },
+      },
+      {
+        name: '完成工单',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        areaStyle: {
+          opacity: 0.15,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(82, 196, 26, 0.4)' },
+              { offset: 1, color: 'rgba(82, 196, 26, 0.05)' },
+            ],
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: trendData.completedData,
+        itemStyle: {
+          color: '#52c41a',
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * 工单时段分布图表配置（柱状图）
+ */
+function getHourlyChartOptions(): ECOption {
+  const { hourlyDistribution } = statsData.value;
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: (params: any) => {
+        const param = params[0];
+        return `${param.name}<br/>工单数: ${param.value}单`;
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '10%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: hourlyDistribution.hours,
+        axisLine: {
+          lineStyle: {
+            color: '#d9d9d9',
+          },
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+          fontSize: 11,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '工单数',
+        nameTextStyle: {
+          color: '#8c8c8c',
+          fontSize: 12,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '工单数量',
+        type: 'bar',
+        barWidth: '60%',
+        data: hourlyDistribution.data,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#1677ff' },
+              { offset: 1, color: '#69b1ff' },
+            ],
+          },
+          borderRadius: [4, 4, 0, 0],
+        },
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#1677ff' },
+                { offset: 1, color: '#40a9ff' },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * 平均耗时趋势图表配置（双轴折线图）
+ */
+function getTimeTrendChartOptions(): ECOption {
+  const { timeTrendData } = statsData.value;
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+      formatter: (params: any) => {
+        let result = `${params[0].name}<br/>`;
+        params.forEach((param: any) => {
+          result += `${param.marker} ${param.seriesName}: ${param.value}分钟<br/>`;
+        });
+        return result;
+      },
+    },
+    legend: {
+      data: ['平均响应时间', '平均完成时间'],
+      top: '5%',
+      textStyle: {
+        color: '#595959',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: timeTrendData.dates,
+        axisLine: {
+          lineStyle: {
+            color: '#d9d9d9',
+          },
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '响应时间(分钟)',
+        nameTextStyle: {
+          color: '#8c8c8c',
+          fontSize: 12,
+        },
+        position: 'left',
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
+          },
+        },
+      },
+      {
+        type: 'value',
+        name: '完成时间(分钟)',
+        nameTextStyle: {
+          color: '#8c8c8c',
+          fontSize: 12,
+        },
+        position: 'right',
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: '#8c8c8c',
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: '平均响应时间',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        yAxisIndex: 0,
+        data: timeTrendData.responseTimeData,
+        itemStyle: {
+          color: '#1677ff',
+        },
+        lineStyle: {
+          width: 2,
+        },
+      },
+      {
+        name: '平均完成时间',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        yAxisIndex: 1,
+        data: timeTrendData.completionTimeData,
+        itemStyle: {
+          color: '#52c41a',
+        },
+        lineStyle: {
+          width: 2,
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * 工单处理漏斗图表配置
+ */
+function getFunnelChartOptions(): ECOption {
+  const { funnelData } = statsData.value;
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}个 ({d}%)',
+    },
+    series: [
+      {
+        name: '工单处理流程',
+        type: 'funnel',
+        left: '10%',
+        top: '5%',
+        bottom: '5%',
+        width: '80%',
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'descending',
+        gap: 4,
+        label: {
+          show: true,
+          position: 'inside',
+          formatter: '{b}\n{c}个',
+          fontSize: 13,
+          color: '#fff',
+        },
+        labelLine: {
+          show: false,
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 15,
+            fontWeight: 'bold',
+          },
+        },
+        data: funnelData.map((item, index) => ({
+          ...item,
+          itemStyle: {
+            color: ['#1677ff', '#40a9ff', '#69b1ff', '#91caff', '#b3d4ff'][
+              index
+            ],
+          },
+        })),
+      },
+    ],
+  };
+}
+
+/**
+ * 时段热力图图表配置（7天x24小时）
+ */
+function getHeatmapChartOptions(): ECOption {
+  const { heatmapData } = statsData.value;
+  const xAxisData = heatmapData.hours.map((h, i) => i);
+  const yAxisData = heatmapData.days.map((d, i) => i);
+
+  // 将二维数据转换为ECharts热力图格式 [x, y, value]
+  const data: number[][] = [];
+  for (let day = 0; day < heatmapData.days.length; day++) {
+    for (let hour = 0; hour < 24; hour++) {
+      const value = heatmapData.data[day]?.[hour] || 0;
+      data.push([hour, day, value]);
+    }
+  }
+
+  return {
+    tooltip: {
+      position: 'top',
+      formatter: (params: any) => {
+        const day = heatmapData.days[params.value[1]] || '';
+        const hour = heatmapData.hours[params.value[0]] || '';
+        const value = params.value[2] || 0;
+        return `${day} ${hour}<br/>工单数: ${value}单`;
+      },
+    },
+    grid: {
+      height: '75%',
+      top: '5%',
+      left: '8%',
+      right: '3%',
+      bottom: '15%',
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      splitArea: {
+        show: true,
+      },
+      axisLabel: {
+        fontSize: 9,
+        color: '#8c8c8c',
+        formatter: (i: number) => (i % 3 === 0 ? `${i}:00` : ''),
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: yAxisData,
+      splitArea: {
+        show: true,
+      },
+      axisLabel: {
+        fontSize: 11,
+        color: '#595959',
+        formatter: (i: number) => heatmapData.days[i] || '',
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    visualMap: {
+      min: 0,
+      max: 10,
+      calculable: false,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: '2%',
+      textStyle: {
+        fontSize: 10,
+        color: '#8c8c8c',
+      },
+      itemWidth: 8,
+      itemHeight: 50,
+      inRange: {
+        color: [
+          '#e6f7ff',
+          '#bae7ff',
+          '#91d5ff',
+          '#69c0ff',
+          '#40a9ff',
+          '#1677ff',
+        ],
+      },
+      splitNumber: 5,
+      show: false,
+    },
+    series: [
+      {
+        name: '工单数量',
+        type: 'heatmap',
+        data,
+        label: {
+          show: false,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+          },
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * 区域工单排行图表配置
+ */
+function getAreaRankingChartOptions(): ECOption {
+  const { areaRanking } = statsData.value;
+  return {
+    grid: {
+      left: '3%',
+      right: '15%',
+      top: '5%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      max: 'dataMax',
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: areaRanking.map((item) => item.area),
+      axisLabel: {
+        fontSize: 13,
+        color: '#595959',
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: areaRanking.map((item) => ({
+          value: item.count,
+          itemStyle: {
+            color: getCompletionRateColor(item.rate),
+            borderRadius: [0, 6, 6, 0],
+          },
+        })),
+        barWidth: 18,
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 13,
+          color: '#262626',
+          fontWeight: 500,
+          formatter: (params: any) => `${params.value}单`,
+        },
+      },
+    ],
+  };
+
+  /** 获取完成率对应的颜色 */
+  function getCompletionRateColor(rate: number): string {
+    if (rate >= 95) return '#52c41a';
+    if (rate >= 90) return '#1677ff';
+    if (rate >= 85) return '#faad14';
+    if (rate >= 80) return '#ff7a45';
+    return '#ff4d4f';
+  }
+}
+
+/**
+ * 工单作业时长统计图表配置
+ */
+function getDurationChartOptions(): ECOption {
+  const { durationStats } = statsData.value;
+  return {
+    grid: {
+      left: '3%',
+      right: '18%',
+      top: '5%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      max: 'dataMax',
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: durationStats.map((item) => item.type),
+      axisLabel: {
+        fontSize: 13,
+        color: '#595959',
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: durationStats.map((item) => ({
+          value: item.avgDuration,
+          itemStyle: {
+            color: item.color,
+            borderRadius: [0, 6, 6, 0],
+          },
+        })),
+        barWidth: 18,
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 13,
+          color: '#262626',
+          fontWeight: 500,
+          formatter: (params: any) => `${params.value}分钟`,
+        },
+      },
+    ],
+  };
+}
+
+// ========== 数据加载 ==========
+
+/** 加载统计数据 */
+async function loadStats() {
+  loading.value = true;
+  try {
+    if (USE_MOCK_DATA) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      statsData.value = { ...MOCK_STATS };
+    } else {
+      const quickStats = await getQuickStats();
+      // TODO: 根据 API 返回数据构建统计
+      statsData.value = {
+        ...MOCK_STATS,
+        pendingCount: quickStats.pendingCount,
+        inProgressCount: quickStats.inProgressCount,
+        completedTodayCount: quickStats.completedTodayCount,
+        onlineCleanerCount: quickStats.onlineCleanerCount,
+      };
+    }
+
+    // 渲染图表
+    chartLoading.value = false;
+    await nextTick();
+    renderTrendChart(getTrendChartOptions());
+    renderHourlyChart(getHourlyChartOptions());
+    renderTimeTrendChart(getTimeTrendChartOptions());
+    renderFunnelChart(getFunnelChartOptions());
+    renderHeatmapChart(getHeatmapChartOptions());
+    renderAreaRankingChart(getAreaRankingChartOptions());
+    renderDurationChart(getDurationChartOptions());
+  } catch {
+    // 使用默认数据
+    statsData.value = { ...MOCK_STATS };
+  } finally {
+    loading.value = false;
+  }
+}
+
+// ========== 生命周期 ==========
+let refreshTimer: null | ReturnType<typeof setInterval> = null;
+
+onMounted(() => {
+  loadStats();
+  // 每30秒刷新一次数据
+  refreshTimer = setInterval(loadStats, 30_000);
+});
+
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+  }
+});
+</script>
+
+<template>
+  <div class="work-order-dashboard">
+    <Spin :spinning="loading">
+      <!-- 第一行：核心指标卡片 -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--pending">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="solar:clock-circle-bold-duotone" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">待处理工单</div>
+                <Statistic
+                  :value="statsData.pendingCount"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#ff4d4f',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--progress">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="solar:play-circle-bold-duotone" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">进行中工单</div>
+                <Statistic
+                  :value="statsData.inProgressCount"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#1677ff',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--completed">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="solar:check-circle-bold-duotone" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">今日完成</div>
+                <Statistic
+                  :value="statsData.completedTodayCount"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#52c41a',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--total">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="solar:document-text-bold-duotone" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">累计完成</div>
+                <Statistic
+                  :value="statsData.completedTotalCount"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#722ed1',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第二行：工单趋势 + 工单时段分布 -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :lg="16">
+          <Card class="chart-card" title="工单趋势（近7天）">
+            <template #extra>
+              <Tooltip title="展示最近7天的工单新增与完成情况">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="trendChartRef" class="chart-container" />
+            </Spin>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :lg="8">
+          <Card class="chart-card" title="工单时段分布">
+            <template #extra>
+              <Tooltip title="展示一天24小时各时段的工单数量分布">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="hourlyChartRef" class="chart-container" />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第三行：平均耗时趋势 + 工单处理漏斗 -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :lg="12">
+          <Card class="chart-card" title="平均耗时趋势（近7天）">
+            <template #extra>
+              <Tooltip title="展示平均响应时间和平均完成时间的变化趋势">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI
+                ref="timeTrendChartRef"
+                class="chart-container chart-container--medium"
+              />
+            </Spin>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :lg="12">
+          <Card class="chart-card" title="工单处理漏斗">
+            <template #extra>
+              <Tooltip title="展示工单从创建到完成各环节的转化情况">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI
+                ref="funnelChartRef"
+                class="chart-container chart-container--medium"
+              />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第四行：时段热力图 + 区域工单排行 + 工单作业时长 -->
+      <Row :gutter="[12, 12]">
+        <!-- 时���热力图 -->
+        <Col :xs="24" :md="8" :lg="8">
+          <Card class="modern-card modern-card--heatmap">
+            <div class="modern-header">
+              <span class="modern-title">时段热力图</span>
+            </div>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="heatmapChartRef" class="modern-chart" />
+            </Spin>
+          </Card>
+        </Col>
+
+        <!-- 区域工单排行 -->
+        <Col :xs="24" :md="8" :lg="8">
+          <Card class="modern-card modern-card--ranking">
+            <div class="modern-header">
+              <span class="modern-title">区域工单排行</span>
+            </div>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="areaRankingChartRef" class="modern-chart" />
+            </Spin>
+          </Card>
+        </Col>
+
+        <!-- 工单作业时长统计 -->
+        <Col :xs="24" :md="8" :lg="8">
+          <Card class="modern-card modern-card--duration">
+            <div class="modern-header">
+              <span class="modern-title">作业时长统计</span>
+            </div>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="durationChartRef" class="modern-chart" />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+    </Spin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+// ========== 响应式适配 ==========
+@media (max-width: 768px) {
+  .work-order-dashboard {
+    padding: 8px;
+  }
+
+  .chart-container {
+    height: 220px !important;
+  }
+
+  .modern-chart {
+    height: 160px !important;
+  }
+}
+
+.work-order-dashboard {
+  padding: 16px;
+}
+
+// ========== 核心指标卡片 ==========
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
+    transform: translateY(-2px);
+  }
+
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+
+  .metric-content {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .metric-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    font-size: 22px;
+    border-radius: 10px;
+
+    :deep(svg) {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .metric-info {
+    flex: 1;
+  }
+
+  .metric-label {
+    margin-bottom: 2px;
+    font-size: 13px;
+    color: #262626;
+  }
+
+  &--pending .metric-icon {
+    color: #ff4d4f;
+    background: #fff1f0;
+  }
+
+  &--progress .metric-icon {
+    color: #1677ff;
+    background: #e6f4ff;
+  }
+
+  &--completed .metric-icon {
+    color: #52c41a;
+    background: #f6ffed;
+  }
+
+  &--total .metric-icon {
+    color: #722ed1;
+    background: #f9f0ff;
+  }
+}
+
+// ========== 图表卡片 ==========
+.chart-card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
+  }
+
+  :deep(.ant-card-head) {
+    min-height: 44px;
+    padding: 0 16px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .ant-card-head-title {
+      padding: 12px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  :deep(.ant-card-body) {
+    padding: 12px 16px 16px;
+  }
+
+  &--compact {
+    :deep(.ant-card-body) {
+      padding: 12px 16px;
+    }
+  }
+
+  &--equal {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 260px;
+
+    :deep(.ant-card-body) {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .info-icon {
+    font-size: 14px;
+    color: #8c8c8c;
+    cursor: help;
+
+    &:hover {
+      color: #1677ff;
+    }
+  }
+
+  .card-title {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+
+    .title-icon {
+      font-size: 16px;
+      color: #1677ff;
+    }
+  }
+
+  .chart-container {
+    height: 280px;
+
+    &--medium {
+      height: 240px;
+    }
+
+    &--small {
+      height: 200px;
+    }
+  }
+}
+
+// ========== 现代化卡片样式 ==========
+.modern-card {
+  height: 100%;
+  min-height: 260px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
+    transform: translateY(-1px);
+  }
+
+  :deep(.ant-card-body) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .modern-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .modern-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+  }
+
+  .modern-chart {
+    flex: 1;
+    height: 180px;
+    min-height: 180px;
+  }
+
+  // 热力图卡片特定样式
+  &--heatmap {
+    .modern-chart {
+      height: 200px;
+    }
+  }
+
+  // 排行卡片特定样式
+  &--ranking {
+    .modern-chart {
+      height: 180px;
+    }
+  }
+
+  // 时长卡片特定样式
+  &--duration {
+    .modern-chart {
+      height: 180px;
+    }
+  }
+}
+
+// ========== 暗色模式适配 ==========
+html.dark {
+  .metric-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    &:hover {
+      box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
+    }
+
+    .metric-label {
+      color: rgb(255 255 255 / 65%);
+    }
+  }
+
+  .chart-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    :deep(.ant-card-head) {
+      border-bottom-color: #303030;
+
+      .ant-card-head-title {
+        color: rgb(255 255 255 / 85%);
+      }
+    }
+  }
+
+  .card-title {
+    color: rgb(255 255 255 / 85%);
+  }
+
+  // 现代化卡片暗色模式
+  .modern-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    .modern-title {
+      color: rgb(255 255 255 / 85%);
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/data.ts b/apps/web-antd/src/views/ops/cleaning/work-order/data.ts
new file mode 100644
index 000000000..7af7d49ca
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/data.ts
@@ -0,0 +1,363 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+/** 状态颜色映射 */
+export const STATUS_COLOR_MAP: Record<string, string> = {
+  PENDING: '#8c8c8c', // 灰色 - 待分配
+  QUEUED: '#faad14', // 黄色 - 排队中
+  DISPATCHED: '#1677ff', // 蓝色 - 已推送
+  CONFIRMED: '#13c2c2', // 青色 - 已确认
+  ARRIVED: '#52c41a', // 绿色 - 已到岗
+  PAUSED: '#fa8c16', // 橙色 - 已暂停
+  COMPLETED: '#389e0d', // 深绿 - 已完成
+  CANCELLED: '#ff4d4f', // 红色 - 已取消
+};
+
+/** 状态文本映射 */
+export const STATUS_TEXT_MAP: Record<string, string> = {
+  PENDING: '待分配',
+  QUEUED: '排队中',
+  DISPATCHED: '已推送',
+  CONFIRMED: '已确认',
+  ARRIVED: '作业中',
+  PAUSED: '已暂停',
+  COMPLETED: '已完成',
+  CANCELLED: '已取消',
+};
+
+/** 状态图标映射 */
+export const STATUS_ICON_MAP: Record<string, string> = {
+  PENDING: 'solar:inbox-line-bold-duotone', // 待分配
+  QUEUED: 'solar:clock-circle-bold-duotone', // 排队中
+  DISPATCHED: 'solar:transfer-horizontal-bold-duotone', // 已推送
+  CONFIRMED: 'solar:check-circle-bold-duotone', // 已确认
+  ARRIVED: 'solar:play-circle-bold-duotone', // 作业中
+  PAUSED: 'solar:pause-circle-bold-duotone', // 已暂停
+  COMPLETED: 'solar:check-read-bold-duotone', // 已完成
+  CANCELLED: 'solar:close-circle-bold-duotone', // 已取消
+};
+
+/** Tab 快捷筛选配置 */
+export const STATUS_TAB_OPTIONS = [
+  { key: 'ALL', label: '全部', statuses: undefined },
+  { key: 'PENDING', label: '待处理', statuses: ['PENDING'] },
+  {
+    key: 'IN_PROGRESS',
+    label: '进行中',
+    statuses: ['DISPATCHED', 'CONFIRMED', 'ARRIVED', 'QUEUED'],
+  },
+  { key: 'PAUSED', label: '已暂停', statuses: ['PAUSED'] },
+  { key: 'COMPLETED', label: '已完成', statuses: ['COMPLETED'] },
+  { key: 'CANCELLED', label: '已取消', statuses: ['CANCELLED'] },
+];
+
+/** 优先级样式映射 */
+export const PRIORITY_STYLE_MAP: Record<
+  number,
+  {
+    animation: boolean;
+    bgColor: string;
+    color: string;
+    icon: string;
+    label: string;
+  }
+> = {
+  0: {
+    label: 'P0',
+    color: '#F44336',
+    bgColor: '#FFEBEE',
+    icon: 'lucide:zap',
+    animation: true,
+  },
+  1: {
+    label: 'P1',
+    color: '#FF9800',
+    bgColor: '#FFF3E0',
+    icon: 'lucide:alert-triangle',
+    animation: false,
+  },
+  2: {
+    label: 'P2',
+    color: '#9E9E9E',
+    bgColor: '#FAFAFA',
+    icon: '',
+    animation: false,
+  },
+};
+
+/** 工单类型选项 */
+export const ORDER_TYPE_OPTIONS = [
+  { label: '保洁', value: OpsOrderCenterApi.OrderType.CLEAN },
+  { label: '维修', value: OpsOrderCenterApi.OrderType.REPAIR },
+  { label: '安保', value: OpsOrderCenterApi.OrderType.SECURITY },
+];
+
+/** 工单类型文本映射 */
+export const ORDER_TYPE_TEXT_MAP: Record<string, string> = {
+  CLEAN: '保洁',
+  REPAIR: '维修',
+  SECURITY: '安保',
+};
+
+/** 工单类型颜色映射 */
+export const ORDER_TYPE_COLOR_MAP: Record<string, string> = {
+  CLEAN: '#52c41a', // 绿色
+  REPAIR: '#fa8c16', // 橙色
+  SECURITY: '#1890ff', // 蓝色
+};
+
+/** 工单状态选项 */
+export const ORDER_STATUS_OPTIONS = [
+  { label: '待分配', value: OpsOrderCenterApi.OrderStatus.PENDING },
+  { label: '排队中', value: OpsOrderCenterApi.OrderStatus.QUEUED },
+  { label: '已推送', value: OpsOrderCenterApi.OrderStatus.DISPATCHED },
+  { label: '已确认', value: OpsOrderCenterApi.OrderStatus.CONFIRMED },
+  { label: '已到岗', value: OpsOrderCenterApi.OrderStatus.ARRIVED },
+  { label: '已暂停', value: OpsOrderCenterApi.OrderStatus.PAUSED },
+  { label: '已完成', value: OpsOrderCenterApi.OrderStatus.COMPLETED },
+  { label: '已取消', value: OpsOrderCenterApi.OrderStatus.CANCELLED },
+];
+
+/** 优先级选项 */
+export const PRIORITY_OPTIONS = [
+  { label: 'P0 (紧急)', value: OpsOrderCenterApi.Priority.P0 },
+  { label: 'P1 (重要)', value: OpsOrderCenterApi.Priority.P1 },
+  { label: 'P2 (普通)', value: OpsOrderCenterApi.Priority.P2 },
+];
+
+/** 触发来源选项 */
+export const TRIGGER_SOURCE_OPTIONS = [
+  { label: '蓝牙信标', value: OpsOrderCenterApi.TriggerSource.IOT_BEACON },
+  { label: '客流阈值', value: OpsOrderCenterApi.TriggerSource.PEOPLE_FLOW },
+  { label: '手动创建', value: OpsOrderCenterApi.TriggerSource.MANUAL },
+];
+
+/** 触发来源文本映射 */
+export const TRIGGER_SOURCE_TEXT_MAP: Record<string, string> = {
+  IOT_BEACON: '蓝牙信标',
+  PEOPLE_FLOW: '客流阈值',
+  MANUAL: '手动创建',
+};
+
+/** 保洁类型选项 */
+export const CLEANING_TYPE_OPTIONS = [
+  { label: '日常', value: OpsOrderCenterApi.CleaningType.ROUTINE },
+  { label: '深度', value: OpsOrderCenterApi.CleaningType.DEEP },
+  { label: '应急', value: OpsOrderCenterApi.CleaningType.EMERGENCY },
+];
+
+/** 保洁类型文本映射 */
+export const CLEANING_TYPE_TEXT_MAP: Record<string, string> = {
+  ROUTINE: '日常',
+  DEEP: '深度',
+  EMERGENCY: '应急',
+};
+
+/** 列表表格列定义 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', width: 50, title: '序号' },
+    {
+      field: 'orderCode',
+      title: '工单编号',
+      minWidth: 180,
+      showOverflow: true,
+    },
+    {
+      field: 'title',
+      title: '工单标题',
+      minWidth: 180,
+      showOverflow: true,
+    },
+    {
+      field: 'orderType',
+      title: '类型',
+      width: 80,
+      align: 'center',
+      slots: { default: 'orderType' },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 90,
+      align: 'center',
+      slots: { default: 'status' },
+    },
+    {
+      field: 'priority',
+      title: '优先级',
+      width: 80,
+      align: 'center',
+      slots: { default: 'priority' },
+    },
+    {
+      field: 'location',
+      title: '位置',
+      minWidth: 150,
+      showOverflow: true,
+    },
+    {
+      field: 'assigneeName',
+      title: '执行人',
+      width: 90,
+      align: 'center',
+      slots: { default: 'assignee' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 160,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 搜索表单Schema */
+export function useSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderType',
+      label: '工单类型',
+      component: 'Select',
+      componentProps: {
+        options: ORDER_TYPE_OPTIONS,
+        placeholder: '请选择工单类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '工单状态',
+      component: 'Select',
+      componentProps: {
+        options: ORDER_STATUS_OPTIONS,
+        placeholder: '请选择工单状态',
+        mode: 'multiple',
+        allowClear: true,
+        maxTagCount: 2,
+      },
+    },
+    {
+      fieldName: 'priority',
+      label: '优先级',
+      component: 'Select',
+      componentProps: {
+        options: PRIORITY_OPTIONS,
+        placeholder: '请选择优先级',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'orderCode',
+      label: '工单编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工单编号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '工单标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标题关键词',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 派单表单Schema */
+export function useAssignFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderId',
+      label: '工单ID',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'assigneeId',
+      label: '执行人',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择执行人',
+        // TODO: 接入保洁员列表API
+        options: [],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注（选填）',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 升级优先级表单Schema */
+export function useUpgradePriorityFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderId',
+      label: '工单ID',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'reason',
+      label: '升级原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入升级为P0紧急工单的原因',
+        rows: 4,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 状态干预表单Schema */
+export function useStatusInterventionFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderId',
+      label: '工单ID',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'reason',
+      label: '操作原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入操作原因',
+        rows: 4,
+      },
+      rules: 'required',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
new file mode 100644
index 000000000..2e3aa88cc
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
@@ -0,0 +1,1961 @@
+<script setup lang="ts">
+import type { OpsCleaningApi } from '#/api/ops/cleaning';
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  Alert,
+  Avatar,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Divider,
+  Empty,
+  message,
+  Progress,
+  Row,
+  Space,
+  Spin,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import {
+  getBadgeRealtimeStatus,
+  getOrderTimeline,
+  manualCompleteOrder,
+  sendDeviceNotify,
+} from '#/api/ops/cleaning';
+import { getOrderDetail } from '#/api/ops/order-center';
+
+import {
+  CLEANING_TYPE_TEXT_MAP,
+  ORDER_TYPE_COLOR_MAP,
+  ORDER_TYPE_TEXT_MAP,
+  PRIORITY_STYLE_MAP,
+  STATUS_COLOR_MAP,
+  STATUS_ICON_MAP,
+  STATUS_TEXT_MAP,
+  TRIGGER_SOURCE_TEXT_MAP,
+} from '../data';
+import AssignForm from '../modules/assign-form.vue';
+import CancelForm from '../modules/cancel-form.vue';
+import UpgradePriorityForm from '../modules/upgrade-priority-form.vue';
+
+defineOptions({ name: 'CleaningWorkOrderDetail' });
+
+const route = useRoute();
+const router = useRouter();
+const { closeTabByKey } = useTabs();
+const id = Number(route.params.id) || 1;
+
+// ========== 模拟数据开关 ==========
+const USE_MOCK_DATA = true;
+
+const loading = ref(true);
+const order = ref<OpsOrderCenterApi.OrderDetail>(
+  {} as OpsOrderCenterApi.OrderDetail,
+);
+const timeline = ref<OpsCleaningApi.TimelineItem[]>([]);
+const businessLogs = ref<BusinessLog[]>([]);
+const badgeStatus = ref<null | OpsCleaningApi.BadgeRealtimeStatus>(null);
+const refreshTimer = ref<number>();
+const showLogs = ref(false);
+
+// ========== 业务日志类型定义 ==========
+interface BusinessLog {
+  id: number;
+  type: 'alert' | 'device' | 'operation' | 'system';
+  title: string;
+  content: string;
+  operator: string;
+  time: string;
+  status?: string; // 关联的状态阶段
+  extra?: Record<string, any>;
+}
+
+// ========== 状态流转步骤定义 ==========
+const STATUS_STEPS = [
+  {
+    key: 'PENDING',
+    title: '待分配',
+    icon: 'solar:inbox-line-bold-duotone',
+    desc: '工单已创建，等待分配',
+  },
+  {
+    key: 'DISPATCHED',
+    title: '已推送',
+    icon: 'solar:transfer-horizontal-bold-duotone',
+    desc: '已推送至执行人',
+  },
+  {
+    key: 'CONFIRMED',
+    title: '已确认',
+    icon: 'solar:check-circle-bold-duotone',
+    desc: '执行人已确认接单',
+  },
+  {
+    key: 'ARRIVED',
+    title: '作业中',
+    icon: 'solar:play-circle-bold-duotone',
+    desc: '正在执行作业',
+  },
+  {
+    key: 'COMPLETED',
+    title: '已完成',
+    icon: 'solar:check-read-bold-duotone',
+    desc: '工单已完成',
+  },
+];
+
+// ========== 日志类型配置 ==========
+const LOG_TYPE_CONFIG: Record<
+  string,
+  { bgColor: string; color: string; icon: string; label: string }
+> = {
+  system: {
+    color: '#1677ff',
+    bgColor: '#e6f4ff',
+    icon: 'solar:server-bold-duotone',
+    label: '系统',
+  },
+  operation: {
+    color: '#52c41a',
+    bgColor: '#f6ffed',
+    icon: 'solar:user-check-bold-duotone',
+    label: '操作',
+  },
+  alert: {
+    color: '#fa8c16',
+    bgColor: '#fff7e6',
+    icon: 'solar:bell-bold-duotone',
+    label: '告警',
+  },
+  device: {
+    color: '#722ed1',
+    bgColor: '#f9f0ff',
+    icon: 'solar:bluetooth-wave-bold-duotone',
+    label: '设备',
+  },
+};
+
+// ========== 模拟数据 ==========
+const MOCK_ORDER: OpsOrderCenterApi.OrderDetail = {
+  id: 10_001,
+  orderCode: 'WO20260123143025001',
+  title: 'A区洗手间紧急保洁',
+  orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+  status: 'ARRIVED' as OpsOrderCenterApi.OrderStatus,
+  priority: 0 as OpsOrderCenterApi.Priority,
+  areaId: 101,
+  location: 'A区 / 1楼洗手间',
+  assigneeId: 2001,
+  assigneeName: '张三',
+  createTime: '2026-01-23 14:30:25',
+  triggerSource: 'IOT_BEACON' as OpsOrderCenterApi.TriggerSource,
+  triggerDeviceKey: 'beacon_a1_toilet_001',
+  startTime: '2026-01-23 14:45:00',
+  extInfo: {
+    cleaningType: 'ROUTINE' as OpsOrderCenterApi.CleaningType,
+    expectedDuration: 30,
+    arrivedTime: new Date(Date.now() - 15 * 60 * 1000).toISOString(),
+  },
+};
+
+const MOCK_TIMELINE: OpsCleaningApi.TimelineItem[] = [
+  {
+    status: 'PENDING',
+    statusName: '工单创建',
+    time: '2026-01-23 14:30:25',
+    operator: '系统',
+    description: '蓝牙信标触发自动创建',
+  },
+  {
+    status: 'DISPATCHED',
+    statusName: '已推送',
+    time: '2026-01-23 14:31:02',
+    operator: '系统',
+    description: '推送至保洁员张三',
+  },
+  {
+    status: 'CONFIRMED',
+    statusName: '已确认',
+    time: '2026-01-23 14:32:15',
+    operator: '张三',
+    description: '保洁员确认接单',
+  },
+  {
+    status: 'ARRIVED',
+    statusName: '已到岗',
+    time: '2026-01-23 14:45:00',
+    operator: '系统',
+    description: '检测到保洁员到达',
+  },
+];
+
+const MOCK_BUSINESS_LOGS: BusinessLog[] = [
+  {
+    id: 1,
+    type: 'system',
+    title: '工单自动创建',
+    content: '蓝牙信标 beacon_a1_toilet_001 触发，系统自动创建保洁工单',
+    operator: '系统',
+    time: '2026-01-23 14:30:25',
+    status: 'PENDING',
+  },
+  {
+    id: 2,
+    type: 'system',
+    title: '智能派单',
+    content: '根据距离优先算法，自动分配给保洁员张三',
+    operator: '系统',
+    time: '2026-01-23 14:31:00',
+    status: 'DISPATCHED',
+  },
+  {
+    id: 3,
+    type: 'device',
+    title: '工牌推送',
+    content: '已向工牌设备 badge_zhangsan_001 发送震动提醒',
+    operator: '系统',
+    time: '2026-01-23 14:31:02',
+    status: 'DISPATCHED',
+  },
+  {
+    id: 4,
+    type: 'operation',
+    title: '接单确认',
+    content: '保洁员通过工牌按钮确认接受工单',
+    operator: '张三',
+    time: '2026-01-23 14:32:15',
+    status: 'CONFIRMED',
+  },
+  {
+    id: 5,
+    type: 'device',
+    title: '位置检测',
+    content: '工牌进入作业区域 A区洗手间，信号强度 -42dBm',
+    operator: '系统',
+    time: '2026-01-23 14:45:00',
+    status: 'ARRIVED',
+  },
+  {
+    id: 6,
+    type: 'alert',
+    title: '电量预警',
+    content: '工牌电量 72%，建议及时充电',
+    operator: '系统',
+    time: '2026-01-23 14:50:00',
+    status: 'ARRIVED',
+    extra: { level: 'warning' },
+  },
+  {
+    id: 7,
+    type: 'device',
+    title: '心跳上报',
+    content: '工牌状态正常，持续在区域内作业',
+    operator: '系统',
+    time: '2026-01-23 15:00:30',
+    status: 'ARRIVED',
+  },
+];
+
+const MOCK_BADGE_STATUS: OpsCleaningApi.BadgeRealtimeStatus = {
+  cleanerId: 2001,
+  deviceId: 3001,
+  deviceKey: 'badge_zhangsan_001',
+  status: 'BUSY' as OpsCleaningApi.CleanerStatus,
+  batteryLevel: 72,
+  lastHeartbeatTime: new Date(Date.now() - 30 * 1000).toISOString(),
+  rssi: -42,
+  isInArea: true,
+  areaId: 101,
+  areaName: 'A区洗手间',
+};
+
+// 模态框
+const [AssignFormModal, assignFormModalApi] = useVbenModal({
+  connectedComponent: AssignForm,
+  destroyOnClose: true,
+});
+const [UpgradePriorityFormModal, upgradePriorityFormModalApi] = useVbenModal({
+  connectedComponent: UpgradePriorityForm,
+  destroyOnClose: true,
+});
+const [CancelFormModal, cancelFormModalApi] = useVbenModal({
+  connectedComponent: CancelForm,
+  destroyOnClose: true,
+});
+
+/** 获取优先级样式 */
+function getPriorityStyle(priority: number) {
+  return PRIORITY_STYLE_MAP[priority] || PRIORITY_STYLE_MAP[2];
+}
+
+/** 计算作业时长 */
+const workDuration = computed(() => {
+  if (!order.value.extInfo?.arrivedTime) return 0;
+  const arrived = new Date(order.value.extInfo.arrivedTime).getTime();
+  return Math.floor((Date.now() - arrived) / 60_000);
+});
+
+/** 计算作业进度 */
+const workProgress = computed(() => {
+  if (!order.value.extInfo?.expectedDuration) return 0;
+  return Math.min(
+    Math.round(
+      (workDuration.value / order.value.extInfo.expectedDuration) * 100,
+    ),
+    100,
+  );
+});
+
+/** 是否超时 */
+const isOvertime = computed(() => workProgress.value >= 100);
+
+/** 是否显示离岗警告 */
+const showLeaveWarning = computed(() => {
+  return (
+    order.value.status === 'ARRIVED' &&
+    badgeStatus.value &&
+    !badgeStatus.value.isInArea
+  );
+});
+
+/** 计算当前状态步骤索引 */
+const currentStepIndex = computed(() => {
+  if (order.value.status === 'CANCELLED') return -1;
+  if (order.value.status === 'PAUSED') {
+    // 暂停状态显示在到岗后
+    return STATUS_STEPS.findIndex((s) => s.key === 'ARRIVED');
+  }
+  const index = STATUS_STEPS.findIndex((s) => s.key === order.value.status);
+  return Math.max(index, 0);
+});
+
+/** 日志按时间倒序排列（最新在上，最早在下） */
+const sortedLogs = computed(() => {
+  return [...businessLogs.value].toSorted(
+    (a, b) => new Date(b.time).getTime() - new Date(a.time).getTime(),
+  );
+});
+
+/** 获取日志类型配置 */
+function getLogTypeConfig(type: string) {
+  return LOG_TYPE_CONFIG[type] || LOG_TYPE_CONFIG.system;
+}
+
+/** 格式化相对时间 */
+function formatRelativeTime(time: string) {
+  const now = Date.now();
+  const target = new Date(time).getTime();
+  const diff = now - target;
+
+  if (diff < 60_000) return '刚刚';
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
+  return formatDateTime(time);
+}
+
+/** 加载工单详情 */
+async function loadOrderDetail() {
+  loading.value = true;
+  try {
+    if (USE_MOCK_DATA) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      order.value = { ...MOCK_ORDER };
+      await Promise.all([loadTimeline(), loadBusinessLogs()]);
+      if (order.value.assigneeId) await loadBadgeStatus();
+    } else {
+      order.value = await getOrderDetail(id);
+      await Promise.all([loadTimeline(), loadBusinessLogs()]);
+      if (order.value.assigneeId) await loadBadgeStatus();
+    }
+  } catch {
+    message.error('获取工单详情失败');
+    handleBack();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 加载时间轴 */
+async function loadTimeline() {
+  try {
+    if (USE_MOCK_DATA) {
+      timeline.value = [...MOCK_TIMELINE];
+    } else {
+      const res = await getOrderTimeline(id);
+      timeline.value = res.timeline || [];
+    }
+  } catch {
+    timeline.value = [];
+  }
+}
+
+/** 加载业务日志 */
+async function loadBusinessLogs() {
+  try {
+    // TODO: 调用实际API
+    businessLogs.value = USE_MOCK_DATA ? [...MOCK_BUSINESS_LOGS] : [];
+  } catch {
+    businessLogs.value = [];
+  }
+}
+
+/** 加载工牌状态 */
+async function loadBadgeStatus() {
+  if (!order.value.assigneeId) return;
+  try {
+    badgeStatus.value = USE_MOCK_DATA
+      ? { ...MOCK_BADGE_STATUS }
+      : await getBadgeRealtimeStatus(order.value.assigneeId);
+  } catch {
+    badgeStatus.value = null;
+  }
+}
+
+async function handleRefresh() {
+  await loadOrderDetail();
+}
+
+/** 关闭当前页并返回上一个路由 */
+async function handleBack() {
+  const currentPath = route.fullPath;
+  router.back();
+  // 延迟关闭 tab，确保路由已经跳转
+  setTimeout(() => {
+    closeTabByKey(currentPath);
+  }, 100);
+}
+function handleAssign() {
+  assignFormModalApi
+    .setData({ orderId: order.value.id, orderCode: order.value.orderCode })
+    .open();
+}
+function handleUpgrade() {
+  upgradePriorityFormModalApi
+    .setData({
+      orderId: order.value.id,
+      orderCode: order.value.orderCode,
+      currentPriority: order.value.priority,
+    })
+    .open();
+}
+function handleCancel() {
+  cancelFormModalApi
+    .setData({
+      orderId: order.value.id,
+      orderCode: order.value.orderCode,
+      title: order.value.title,
+    })
+    .open();
+}
+
+async function handleVoiceNotify() {
+  if (!order.value.assigneeId) return;
+  try {
+    await sendDeviceNotify({
+      cleanerId: order.value.assigneeId,
+      type: 'VOICE' as OpsCleaningApi.NotifyType,
+      content: `请注意：${order.value.title}`,
+    });
+    message.success('语音提醒已发送');
+  } catch {
+    message.error('发送失败');
+  }
+}
+
+async function handleVibrateNotify() {
+  if (!order.value.assigneeId) return;
+  try {
+    await sendDeviceNotify({
+      cleanerId: order.value.assigneeId,
+      type: 'VIBRATE' as OpsCleaningApi.NotifyType,
+    });
+    message.success('震动提醒已发送');
+  } catch {
+    message.error('发送失败');
+  }
+}
+
+async function handleManualComplete() {
+  try {
+    await manualCompleteOrder(order.value.id!);
+    message.success('工单已完成');
+    handleRefresh();
+  } catch {
+    message.error('操作失败');
+  }
+}
+
+function getBatteryColor(level: number) {
+  if (level <= 20) return '#f5222d';
+  if (level <= 50) return '#fa8c16';
+  return '#52c41a';
+}
+
+onMounted(async () => {
+  if (!id && !USE_MOCK_DATA) {
+    message.warning('参数错误');
+    handleBack();
+    return;
+  }
+  await loadOrderDetail();
+  refreshTimer.value = window.setInterval(() => {
+    if (order.value.status === 'ARRIVED' && order.value.assigneeId)
+      loadBadgeStatus();
+  }, 30_000);
+});
+
+onUnmounted(() => {
+  if (refreshTimer.value) clearInterval(refreshTimer.value);
+});
+</script>
+
+<template>
+  <Page>
+    <AssignFormModal @success="handleRefresh" />
+    <UpgradePriorityFormModal @success="handleRefresh" />
+    <CancelFormModal @success="handleRefresh" />
+
+    <Spin :spinning="loading">
+      <!-- 头部 -->
+      <Card :body-style="{ padding: '12px 20px' }" class="detail-header mb-3">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <Button size="small" @click="handleBack">
+              <IconifyIcon icon="ant-design:arrow-left-outlined" class="mr-1" />
+              返回
+            </Button>
+            <Divider type="vertical" class="h-6" />
+            <div>
+              <div class="flex items-center gap-2">
+                <span class="text-base font-semibold">{{ order.title }}</span>
+                <Tag :color="STATUS_COLOR_MAP[order.status]" class="status-tag">
+                  <IconifyIcon
+                    :icon="STATUS_ICON_MAP[order.status] || 'solar:circle-bold'"
+                    class="mr-1"
+                  />
+                  {{ STATUS_TEXT_MAP[order.status] }}
+                </Tag>
+                <span
+                  v-if="order.priority !== 2"
+                  class="priority-badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+                  :class="{
+                    'animate-pulse': getPriorityStyle(order.priority)
+                      ?.animation,
+                  }"
+                  :style="{
+                    backgroundColor: getPriorityStyle(order.priority)?.bgColor,
+                    color: getPriorityStyle(order.priority)?.color,
+                  }"
+                >
+                  <IconifyIcon
+                    v-if="getPriorityStyle(order.priority)?.icon"
+                    :icon="getPriorityStyle(order.priority)?.icon || ''"
+                  />
+                  {{ getPriorityStyle(order.priority)?.label }}
+                </span>
+              </div>
+              <div class="mt-1.5 flex items-center gap-4 text-sm text-gray-500">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon icon="solar:document-text-bold-duotone" />
+                  {{ order.orderCode }}
+                </span>
+                <span class="flex items-center gap-1">
+                  <IconifyIcon icon="solar:map-point-bold-duotone" />
+                  {{ order.location || '-' }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <Tooltip title="刷新数据">
+            <Button size="small" shape="circle" @click="handleRefresh">
+              <IconifyIcon icon="ant-design:reload-outlined" />
+            </Button>
+          </Tooltip>
+        </div>
+      </Card>
+
+      <!-- 工单进度 -->
+      <Card class="progress-overview-card mb-3">
+        <template #title>
+          <div class="flex items-center gap-2">
+            <IconifyIcon
+              icon="solar:routing-2-bold-duotone"
+              class="text-blue-500"
+            />
+            <span>工单进度</span>
+          </div>
+        </template>
+        <template #extra>
+          <div class="progress-actions">
+            <div class="progress-summary">
+              <span class="summary-item">
+                <IconifyIcon
+                  icon="solar:clock-circle-bold-duotone"
+                  class="text-gray-400"
+                />
+                创建于 {{ formatRelativeTime(order.createTime) }}
+              </span>
+              <Divider type="vertical" />
+              <span class="summary-item">
+                <IconifyIcon
+                  icon="solar:document-text-bold-duotone"
+                  class="text-gray-400"
+                />
+                {{ businessLogs.length }} 条日志
+              </span>
+            </div>
+            <!-- 展开日志按钮 -->
+            <Tooltip :title="showLogs ? '收起日志' : '查看业务日志'">
+              <Button
+                type="text"
+                size="small"
+                class="logs-toggle-btn"
+                :class="{ 'logs-toggle-active': showLogs }"
+                @click="showLogs = !showLogs"
+              >
+                <IconifyIcon icon="solar:notebook-bold-duotone" class="mr-1" />
+                <span>日志</span>
+                <IconifyIcon
+                  :icon="
+                    showLogs
+                      ? 'solar:alt-arrow-up-linear'
+                      : 'solar:alt-arrow-down-linear'
+                  "
+                  class="ml-1 transition-transform"
+                />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+
+        <!-- 横向进度指示器 -->
+        <div class="progress-steps-wrapper">
+          <div class="progress-line">
+            <div
+              class="progress-line-fill"
+              :style="{
+                width: `${Math.max(0, (currentStepIndex / (STATUS_STEPS.length - 1)) * 100)}%`,
+              }"
+            ></div>
+          </div>
+          <div class="progress-nodes">
+            <div
+              v-for="(step, index) in STATUS_STEPS"
+              :key="step.key"
+              class="progress-node"
+              :class="{
+                'node-completed': index < currentStepIndex,
+                'node-current':
+                  index === currentStepIndex && order.status !== 'CANCELLED',
+                'node-pending': index > currentStepIndex,
+                'node-cancelled': order.status === 'CANCELLED',
+              }"
+            >
+              <Tooltip :title="step.desc">
+                <div class="node-icon">
+                  <IconifyIcon :icon="step.icon" />
+                </div>
+              </Tooltip>
+              <div class="node-label">{{ step.title }}</div>
+              <div v-if="index < currentStepIndex" class="node-time">
+                {{
+                  timeline.find((t) => t.status === step.key)?.time
+                    ? formatRelativeTime(
+                        timeline.find((t) => t.status === step.key)?.time || '',
+                      )
+                    : ''
+                }}
+              </div>
+              <div
+                v-else-if="
+                  index === currentStepIndex && order.status !== 'CANCELLED'
+                "
+                class="node-badge"
+              >
+                <span class="badge-dot"></span>
+                进行中
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 已取消状态提示 -->
+        <div v-if="order.status === 'CANCELLED'" class="cancelled-banner">
+          <IconifyIcon icon="solar:close-circle-bold-duotone" />
+          <span>工单已取消</span>
+        </div>
+
+        <!-- 展开的业务日志列表 -->
+        <div v-if="showLogs" class="logs-expand-section">
+          <div v-if="businessLogs.length > 0" class="logs-simple-list">
+            <div
+              v-for="(log, index) in sortedLogs"
+              :key="log.id"
+              class="log-simple-item"
+            >
+              <div class="log-simple-left">
+                <div
+                  class="log-simple-dot"
+                  :style="{ backgroundColor: getLogTypeConfig(log.type).color }"
+                ></div>
+                <div
+                  v-if="index < sortedLogs.length - 1"
+                  class="log-simple-line"
+                ></div>
+              </div>
+              <div class="log-simple-content">
+                <div class="log-simple-header">
+                  <span
+                    class="log-simple-title"
+                    :style="{ color: getLogTypeConfig(log.type).color }">
+                    {{ log.title }}
+                  </span>
+                  <span class="log-simple-time">{{
+                    formatRelativeTime(log.time)
+                  }}</span>
+                </div>
+                <div class="log-simple-text">{{ log.content }}</div>
+              </div>
+            </div>
+          </div>
+          <Empty
+            v-else
+            description="暂无日志"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            class="logs-empty"
+          />
+        </div>
+      </Card>
+
+      <!-- 离岗警告 -->
+      <Alert
+        v-if="showLeaveWarning"
+        type="warning"
+        show-icon
+        class="leave-warning mb-3"
+      >
+        <template #message>
+          <span class="font-medium">保洁员已离开作业区域</span>
+        </template>
+        <template #description>
+          <div class="flex items-center justify-between">
+            <span>检测到保洁员不在指定区域，请及时确认情况</span>
+            <Space>
+              <Button size="small" type="primary" @click="handleVoiceNotify">
+                语音提醒
+              </Button>
+              <Button size="small" @click="handleVibrateNotify">
+                震动提醒
+              </Button>
+            </Space>
+          </div>
+        </template>
+      </Alert>
+
+      <Row :gutter="12">
+        <!-- 左侧 -->
+        <Col :span="16">
+          <!-- 作业进度卡片 -->
+          <Card
+            v-if="order.extInfo && order.status === 'ARRIVED'"
+            class="work-progress-card mb-3"
+          >
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon
+                  icon="solar:chart-2-bold-duotone"
+                  class="text-blue-500"
+                />
+                <span>作业进度</span>
+              </div>
+            </template>
+            <Row :gutter="16" align="middle">
+              <Col :span="8">
+                <div class="progress-circle-wrapper">
+                  <Progress
+                    type="circle"
+                    :percent="workProgress"
+                    :stroke-color="{
+                      '0%': isOvertime ? '#ff4d4f' : '#1677ff',
+                      '100%': isOvertime ? '#ff7875' : '#52c41a',
+                    }"
+                    :stroke-width="6"
+                    :size="100"
+                  >
+                    <template #format>
+                      <div class="progress-inner">
+                        <div
+                          class="progress-value"
+                          :class="{ 'text-red-500': isOvertime }"
+                        >
+                          {{ workProgress }}%
+                        </div>
+                        <div class="progress-label">完成度</div>
+                      </div>
+                    </template>
+                  </Progress>
+                </div>
+              </Col>
+              <Col :span="16">
+                <div class="work-stats-grid">
+                  <div class="stat-item">
+                    <div class="stat-icon bg-blue-50 dark:bg-blue-900/30">
+                      <IconifyIcon
+                        icon="solar:clipboard-list-bold-duotone"
+                        class="text-blue-500"
+                      />
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-label">作业类型</div>
+                      <div class="stat-value">
+                        {{
+                          CLEANING_TYPE_TEXT_MAP[order.extInfo.cleaningType!] ||
+                          '-'
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-icon bg-green-50 dark:bg-green-900/30">
+                      <IconifyIcon
+                        icon="solar:clock-circle-bold-duotone"
+                        class="text-green-500"
+                      />
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-label">预计时长</div>
+                      <div class="stat-value">
+                        {{ order.extInfo.expectedDuration }} 分钟
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-item">
+                    <div
+                      class="stat-icon"
+                      :class="
+                        isOvertime
+                          ? 'bg-red-50 dark:bg-red-900/30'
+                          : 'bg-orange-50 dark:bg-orange-900/30'
+                      "
+                    >
+                      <IconifyIcon
+                        icon="solar:stopwatch-bold-duotone"
+                        :class="isOvertime ? 'text-red-500' : 'text-orange-500'"
+                      />
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-label">已用时长</div>
+                      <div
+                        class="stat-value"
+                        :class="{ 'text-red-500': isOvertime }"
+                      >
+                        {{ workDuration }} 分钟
+                        <Tag
+                          v-if="isOvertime"
+                          color="error"
+                          size="small"
+                          class="ml-1"
+                        >
+                          超时
+                        </Tag>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-item">
+                    <div class="stat-icon bg-purple-50 dark:bg-purple-900/30">
+                      <IconifyIcon
+                        icon="solar:hourglass-line-bold-duotone"
+                        class="text-purple-500"
+                      />
+                    </div>
+                    <div class="stat-content">
+                      <div class="stat-label">剩余时间</div>
+                      <div
+                        class="stat-value"
+                        :class="{ 'text-red-500': isOvertime }"
+                      >
+                        {{
+                          isOvertime
+                            ? `已超时 ${
+                                workDuration -
+                                (order.extInfo.expectedDuration || 0)
+                              } 分钟`
+                            : `${
+                                (order.extInfo.expectedDuration || 0) -
+                                workDuration
+                              } 分钟`
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          </Card>
+
+          <!-- 基础信息 -->
+          <Card class="info-card mb-3">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="text-blue-500"
+                />
+                <span>基础信息</span>
+              </div>
+            </template>
+            <Descriptions
+              :column="2"
+              bordered
+              size="small"
+              class="custom-descriptions"
+            >
+              <Descriptions.Item label="工单类型">
+                <Tag :color="ORDER_TYPE_COLOR_MAP[order.orderType]">
+                  <IconifyIcon icon="solar:broom-bold-duotone" class="mr-1" />
+                  {{ ORDER_TYPE_TEXT_MAP[order.orderType] }}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="作业区域">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:map-point-bold-duotone"
+                    class="text-gray-400"
+                  />
+                  {{ order.location || '-' }}
+                </span>
+              </Descriptions.Item>
+              <Descriptions.Item label="触发来源">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:bluetooth-wave-bold-duotone"
+                    class="text-blue-400"
+                  />
+                  {{ TRIGGER_SOURCE_TEXT_MAP[order.triggerSource!] || '-' }}
+                </span>
+              </Descriptions.Item>
+              <Descriptions.Item label="创建时间">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:calendar-bold-duotone"
+                    class="text-gray-400"
+                  />
+                  {{ formatDateTime(order.createTime) }}
+                </span>
+              </Descriptions.Item>
+              <Descriptions.Item v-if="order.triggerDeviceKey" label="触发设备">
+                <code class="device-code">{{ order.triggerDeviceKey }}</code>
+              </Descriptions.Item>
+              <Descriptions.Item v-if="order.startTime" label="开始时间">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:play-circle-bold-duotone"
+                    class="text-green-400"
+                  />
+                  {{ formatDateTime(order.startTime) }}
+                </span>
+              </Descriptions.Item>
+            </Descriptions>
+          </Card>
+        </Col>
+
+        <!-- 右侧 -->
+        <Col :span="8">
+          <!-- 执行人 -->
+          <Card class="assignee-card mb-3">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon
+                  icon="solar:user-bold-duotone"
+                  class="text-blue-500"
+                />
+                <span>执行人</span>
+              </div>
+            </template>
+            <div v-if="order.assigneeName">
+              <div class="assignee-info">
+                <Avatar :size="40" class="assignee-avatar">
+                  {{ order.assigneeName?.charAt(0) }}
+                </Avatar>
+                <div class="assignee-detail">
+                  <div class="assignee-name">{{ order.assigneeName }}</div>
+                  <div class="assignee-id">工号: {{ order.assigneeId }}</div>
+                </div>
+                <Tag
+                  v-if="badgeStatus"
+                  :color="
+                    badgeStatus.status === 'BUSY' ? 'processing' : 'default'
+                  "
+                  class="status-badge"
+                >
+                  {{ badgeStatus.status === 'BUSY' ? '作业中' : '空闲' }}
+                </Tag>
+              </div>
+
+              <!-- 工牌状态 -->
+              <div v-if="badgeStatus" class="badge-status-panel">
+                <div class="panel-header">
+                  <IconifyIcon
+                    icon="solar:bluetooth-wave-bold-duotone"
+                    class="text-blue-500"
+                  />
+                  <span>工牌实时状态</span>
+                  <div class="pulse-dot"></div>
+                </div>
+                <div class="badge-stats">
+                  <div class="badge-stat-item">
+                    <div class="badge-stat-icon">
+                      <IconifyIcon
+                        icon="solar:map-point-wave-bold-duotone"
+                        :class="
+                          badgeStatus.isInArea
+                            ? 'text-green-500'
+                            : 'text-orange-500'
+                        "
+                      />
+                    </div>
+                    <div class="badge-stat-content">
+                      <div class="badge-stat-label">位置状态</div>
+                      <Tag
+                        :color="badgeStatus.isInArea ? 'success' : 'warning'"
+                        size="small"
+                      >
+                        {{ badgeStatus.isInArea ? '在区域内' : '已离开' }}
+                      </Tag>
+                    </div>
+                  </div>
+                  <div class="badge-stat-item">
+                    <div class="badge-stat-icon">
+                      <IconifyIcon
+                        icon="solar:battery-charge-bold-duotone"
+                        :style="{
+                          color: getBatteryColor(badgeStatus.batteryLevel),
+                        }"
+                      />
+                    </div>
+                    <div class="badge-stat-content">
+                      <div class="badge-stat-label">电池电量</div>
+                      <div class="battery-bar">
+                        <div
+                          class="battery-fill"
+                          :style="{
+                            width: `${badgeStatus.batteryLevel}%`,
+                            backgroundColor: getBatteryColor(
+                              badgeStatus.batteryLevel,
+                            ),
+                          }"
+                        ></div>
+                      </div>
+                      <span
+                        class="battery-text"
+                        :style="{
+                          color: getBatteryColor(badgeStatus.batteryLevel),
+                        }">
+                        {{ badgeStatus.batteryLevel }}%
+                      </span>
+                    </div>
+                  </div>
+                  <div class="badge-stat-item">
+                    <div class="badge-stat-icon">
+                      <IconifyIcon
+                        icon="solar:wifi-router-bold-duotone"
+                        class="text-blue-500"
+                      />
+                    </div>
+                    <div class="badge-stat-content">
+                      <div class="badge-stat-label">信号强度</div>
+                      <div class="signal-strength">
+                        <div
+                          v-for="i in 4"
+                          :key="i"
+                          class="signal-bar"
+                          :class="{
+                            active: badgeStatus.rssi > -70 + (i - 1) * 15,
+                          }"
+                        ></div>
+                        <span class="signal-value">
+                          {{ badgeStatus.rssi }} dBm
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="badge-stat-item">
+                    <div class="badge-stat-icon">
+                      <IconifyIcon
+                        icon="solar:pulse-2-bold-duotone"
+                        class="text-green-500"
+                      />
+                    </div>
+                    <div class="badge-stat-content">
+                      <div class="badge-stat-label">最后心跳</div>
+                      <div class="heartbeat-time">
+                        {{ formatRelativeTime(badgeStatus.lastHeartbeatTime) }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="no-assignee">
+              <div class="no-assignee-icon">
+                <IconifyIcon icon="solar:user-plus-bold-duotone" />
+              </div>
+              <div class="no-assignee-text">暂未分配执行人</div>
+              <Button type="primary" ghost size="small" @click="handleAssign">
+                <IconifyIcon icon="solar:user-plus-bold-duotone" class="mr-1" />
+                立即分配
+              </Button>
+            </div>
+          </Card>
+
+          <!-- 操作 -->
+          <Card class="actions-card">
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon
+                  icon="solar:settings-bold-duotone"
+                  class="text-blue-500"
+                />
+                <span>快捷操作</span>
+              </div>
+            </template>
+            <div class="actions-list">
+              <template v-if="order.status === 'PENDING'">
+                <Button
+                  type="primary"
+                  block
+                  class="action-btn"
+                  @click="handleAssign"
+                >
+                  <IconifyIcon
+                    icon="solar:user-plus-bold-duotone"
+                    class="mr-1"
+                  />
+                  分配执行人
+                </Button>
+                <Button danger block class="action-btn" @click="handleCancel">
+                  <IconifyIcon
+                    icon="solar:close-circle-bold-duotone"
+                    class="mr-1"
+                  />
+                  取消工单
+                </Button>
+              </template>
+
+              <template v-if="order.status === 'DISPATCHED'">
+                <Button
+                  type="primary"
+                  block
+                  class="action-btn"
+                  @click="handleVoiceNotify"
+                >
+                  <IconifyIcon
+                    icon="solar:volume-loud-bold-duotone"
+                    class="mr-1"
+                  />
+                  语音提醒
+                </Button>
+                <Button block class="action-btn" @click="handleVibrateNotify">
+                  <IconifyIcon
+                    icon="solar:smartphone-vibration-bold-duotone"
+                    class="mr-1"
+                  />
+                  震动提醒
+                </Button>
+                <Button danger block class="action-btn" @click="handleCancel">
+                  <IconifyIcon
+                    icon="solar:close-circle-bold-duotone"
+                    class="mr-1"
+                  />
+                  取消工单
+                </Button>
+              </template>
+
+              <template v-if="order.status === 'ARRIVED'">
+                <Button
+                  type="primary"
+                  block
+                  class="action-btn action-btn-success"
+                  @click="handleManualComplete"
+                >
+                  <IconifyIcon
+                    icon="solar:check-circle-bold-duotone"
+                    class="mr-1"
+                  />
+                  手动完成
+                </Button>
+                <Button block class="action-btn" @click="handleVibrateNotify">
+                  <IconifyIcon
+                    icon="solar:smartphone-vibration-bold-duotone"
+                    class="mr-1"
+                  />
+                  震动提醒
+                </Button>
+                <Button block class="action-btn" @click="handleCancel">
+                  <IconifyIcon
+                    icon="solar:pause-circle-bold-duotone"
+                    class="mr-1"
+                  />
+                  暂停工单
+                </Button>
+              </template>
+
+              <Button
+                v-if="
+                  order.priority !== 0 &&
+                  !['COMPLETED', 'CANCELLED'].includes(order.status)
+                "
+                danger
+                ghost
+                block
+                class="action-btn action-btn-upgrade"
+                @click="handleUpgrade"
+              >
+                <IconifyIcon icon="solar:bolt-bold-duotone" class="mr-1" />
+                升级为 P0 紧急
+              </Button>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </Spin>
+  </Page>
+</template>
+
+<style scoped>
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 3px rgb(22 119 255 / 15%);
+  }
+
+  50% {
+    box-shadow: 0 0 0 5px rgb(22 119 255 / 8%);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+:deep(.ant-card) {
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  transition: box-shadow 0.2s;
+}
+
+:deep(.ant-card:hover) {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+}
+
+:deep(.ant-card-head) {
+  min-height: 40px;
+  padding: 0 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.ant-card-head-title) {
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px 16px;
+}
+
+/* ========== 头部样式 ========== */
+.detail-header {
+  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 10px;
+}
+
+.priority-badge {
+  font-size: 12px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+}
+
+/* ========== 进度概览卡片 ========== */
+.progress-overview-card {
+  background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
+}
+
+.progress-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.progress-summary {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.summary-item {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+/* 日志展开按钮 */
+.logs-toggle-btn {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #595959;
+  background: #f5f5f5;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.logs-toggle-btn:hover {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+
+.logs-toggle-active {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+
+/* 横向进度条 */
+.progress-steps-wrapper {
+  position: relative;
+  padding: 0 20px;
+}
+
+.progress-line {
+  position: absolute;
+  top: 16px;
+  right: 56px;
+  left: 56px;
+  height: 3px;
+  background: #e8e8e8;
+  border-radius: 2px;
+}
+
+.progress-line-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #52c41a 0%, #1677ff 100%);
+  border-radius: 2px;
+  transition: width 0.5s ease;
+}
+
+.progress-nodes {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress-node {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+
+.node-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 15px;
+  background: #fff;
+  border: 2px solid #e8e8e8;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.node-completed .node-icon {
+  color: #fff;
+  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+  border-color: #52c41a;
+  box-shadow: 0 2px 6px rgb(82 196 26 / 25%);
+}
+
+.node-current .node-icon {
+  color: #fff;
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgb(22 119 255 / 15%);
+  animation: pulse-glow 2s infinite;
+}
+
+.node-pending .node-icon {
+  color: #bfbfbf;
+  background: #fafafa;
+}
+
+.node-cancelled .node-icon {
+  color: #fff;
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  border-color: #ff4d4f;
+}
+
+.node-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+}
+
+.node-completed .node-label {
+  color: #52c41a;
+}
+
+.node-current .node-label {
+  font-weight: 600;
+  color: #1677ff;
+}
+
+.node-time {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.node-badge {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  color: #1677ff;
+  background: #e6f4ff;
+  border-radius: 10px;
+}
+
+.badge-dot {
+  width: 6px;
+  height: 6px;
+  background: #1677ff;
+  border-radius: 50%;
+  animation: pulse 1.5s infinite;
+}
+
+.cancelled-banner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin-top: 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #ff4d4f;
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 6px;
+}
+
+/* ========== 离岗警告 ========== */
+.leave-warning {
+  border-left: 3px solid #faad14;
+  border-radius: 8px;
+}
+
+.leave-warning :deep(.ant-alert-message) {
+  font-size: 14px;
+}
+
+.leave-warning :deep(.ant-alert-description) {
+  font-size: 13px;
+}
+
+/* ========== 作业进度卡片 ========== */
+.work-progress-card {
+  background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
+}
+
+.progress-circle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-inner {
+  text-align: center;
+}
+
+.progress-value {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #1677ff;
+}
+
+.progress-label {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.work-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.stat-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+/* ========== 信息卡片 ========== */
+.info-card :deep(.ant-descriptions-item-label) {
+  font-size: 13px;
+  font-weight: 500;
+  background: #fafafa;
+}
+
+.info-card :deep(.ant-descriptions-item-content) {
+  font-size: 13px;
+}
+
+.device-code {
+  padding: 2px 8px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 12px;
+  color: #1677ff;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+/* ========== 展开日志区域样式 ========== */
+.logs-expand-section {
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px dashed #e8e8e8;
+  animation: slide-down 0.2s ease;
+}
+
+.logs-simple-list {
+  max-height: 240px;
+  padding-left: 2px;
+  overflow-y: auto;
+}
+
+.log-simple-item {
+  display: flex;
+  gap: 10px;
+}
+
+.log-simple-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 10px;
+  padding-top: 5px;
+}
+
+.log-simple-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.log-simple-line {
+  flex: 1;
+  width: 1px;
+  min-height: 16px;
+  margin: 3px 0;
+  background: #e8e8e8;
+}
+
+.log-simple-content {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 0 10px;
+}
+
+.log-simple-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.log-simple-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.log-simple-time {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.log-simple-text {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #595959;
+}
+
+.logs-empty {
+  padding: 12px 0;
+}
+
+/* ========== 执行人卡片 ========== */
+.assignee-info {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.assignee-avatar {
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  box-shadow: 0 2px 8px rgb(22 119 255 / 20%);
+}
+
+.assignee-detail {
+  flex: 1;
+}
+
+.assignee-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.assignee-id {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.status-badge {
+  padding: 2px 10px;
+  font-size: 12px;
+  border-radius: 10px;
+}
+
+/* ========== 工牌状态面板 ========== */
+.badge-status-panel {
+  padding: 12px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 8px;
+}
+
+.panel-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+}
+
+.pulse-dot {
+  width: 6px;
+  height: 6px;
+  margin-left: auto;
+  background: #52c41a;
+  border-radius: 50%;
+  animation: pulse 1.5s infinite;
+}
+
+.badge-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.badge-stat-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.badge-stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+
+.badge-stat-content {
+  flex: 1;
+}
+
+.badge-stat-label {
+  margin-bottom: 2px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.battery-bar {
+  width: 100%;
+  height: 5px;
+  margin-bottom: 2px;
+  overflow: hidden;
+  background: #e8e8e8;
+  border-radius: 2px;
+}
+
+.battery-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.battery-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.signal-strength {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.signal-bar {
+  width: 3px;
+  height: 6px;
+  background: #e8e8e8;
+  border-radius: 1px;
+  transition: background 0.3s;
+}
+
+.signal-bar:nth-child(2) {
+  height: 9px;
+}
+
+.signal-bar:nth-child(3) {
+  height: 12px;
+}
+
+.signal-bar:nth-child(4) {
+  height: 15px;
+}
+
+.signal-bar.active {
+  background: #52c41a;
+}
+
+.signal-value {
+  margin-left: 8px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.heartbeat-time {
+  font-size: 13px;
+  font-weight: 500;
+  color: #262626;
+}
+
+/* ========== 无执行人 ========== */
+.no-assignee {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  padding: 24px 0;
+}
+
+.no-assignee-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  font-size: 20px;
+  color: #bfbfbf;
+  background: #f5f5f5;
+  border-radius: 50%;
+}
+
+.no-assignee-text {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+
+/* ========== 操作卡片 ========== */
+.actions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.action-btn {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  transform: translateY(-1px);
+}
+
+.action-btn-success {
+  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+  border: none;
+}
+
+.action-btn-success:hover {
+  background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%);
+}
+
+.action-btn-upgrade {
+  border-style: dashed;
+}
+
+/* ========== 暗色模式适配 ========== */
+:deep(.dark) {
+  .detail-header,
+  .progress-overview-card,
+  .work-progress-card {
+    background: var(--component-background);
+  }
+
+  .progress-line {
+    background: rgb(255 255 255 / 10%);
+  }
+
+  .node-icon {
+    background: rgb(255 255 255 / 5%);
+    border-color: rgb(255 255 255 / 15%);
+  }
+
+  .node-pending .node-icon {
+    background: rgb(255 255 255 / 5%);
+  }
+
+  .stat-item {
+    background: rgb(255 255 255 / 5%);
+  }
+
+  .logs-toggle-btn {
+    color: #a6a6a6;
+    background: rgb(255 255 255 / 5%);
+  }
+
+  .logs-toggle-btn:hover,
+  .logs-toggle-active {
+    color: #1677ff;
+    background: rgb(22 119 255 / 15%);
+  }
+
+  .logs-expand-section {
+    border-top-color: rgb(255 255 255 / 10%);
+  }
+
+  .log-simple-line {
+    background: rgb(255 255 255 / 15%);
+  }
+
+  .log-simple-dot {
+    box-shadow: 0 0 0 2px var(--component-background);
+  }
+
+  .log-simple-text {
+    color: #a6a6a6;
+  }
+
+  .badge-status-panel {
+    background: rgb(255 255 255 / 5%);
+  }
+
+  .no-assignee-icon {
+    background: rgb(255 255 255 / 5%);
+  }
+
+  .cancelled-banner {
+    background: rgb(255 77 79 / 10%);
+    border-color: rgb(255 77 79 / 30%);
+  }
+}
+
+/* ========== 通用卡片样式 ========== */
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/index.vue
new file mode 100644
index 000000000..a8549162b
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/index.vue
@@ -0,0 +1,823 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { nextTick, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Input,
+  message,
+  Select,
+  Tabs,
+  Tag,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { OpsCleaningApi, sendDeviceNotify } from '#/api/ops/cleaning';
+import { getOrderPage } from '#/api/ops/order-center';
+
+import {
+  ORDER_TYPE_COLOR_MAP,
+  ORDER_TYPE_OPTIONS,
+  ORDER_TYPE_TEXT_MAP,
+  PRIORITY_OPTIONS,
+  STATUS_COLOR_MAP,
+  STATUS_TAB_OPTIONS,
+  STATUS_TEXT_MAP,
+  useGridColumns,
+} from './data';
+import AssignForm from './modules/assign-form.vue';
+import CancelForm from './modules/cancel-form.vue';
+import CardView from './modules/card-view.vue';
+import StatsBar from './modules/stats-bar.vue';
+import UpgradePriorityForm from './modules/upgrade-priority-form.vue';
+
+defineOptions({ name: 'CleaningWorkOrderCenter' });
+
+const router = useRouter();
+const viewMode = ref<'card' | 'list'>('card');
+const activeTab = ref('ALL');
+const showAdvancedFilter = ref(false);
+const cardViewRef = ref();
+const statsBarRef = ref();
+
+/** Tab 状态数量统计 */
+const tabCounts = ref<Record<string, number>>({
+  ALL: 0,
+  PENDING: 0,
+  IN_PROGRESS: 0,
+  PAUSED: 0,
+  COMPLETED: 0,
+  CANCELLED: 0,
+});
+
+// 模态框
+const [AssignFormModal, assignFormModalApi] = useVbenModal({
+  connectedComponent: AssignForm,
+  destroyOnClose: true,
+});
+
+const [UpgradePriorityFormModal, upgradePriorityFormModalApi] = useVbenModal({
+  connectedComponent: UpgradePriorityForm,
+  destroyOnClose: true,
+});
+
+const [CancelFormModal, cancelFormModalApi] = useVbenModal({
+  connectedComponent: CancelForm,
+  destroyOnClose: true,
+});
+
+// 查询参数
+const queryParams = ref({
+  orderType: undefined as OpsOrderCenterApi.OrderType | undefined,
+  status: undefined as OpsOrderCenterApi.OrderStatus[] | undefined,
+  priority: undefined as OpsOrderCenterApi.Priority | undefined,
+  orderCode: '',
+  title: '',
+});
+
+/** 搜索 */
+function handleSearch() {
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    cardViewRef.value?.query();
+  }
+}
+
+/** 刷新数据 */
+function handleRefresh() {
+  handleSearch();
+  statsBarRef.value?.refresh();
+}
+
+/** 重置筛选条件 */
+function handleReset() {
+  queryParams.value = {
+    orderType: undefined,
+    status: undefined,
+    priority: undefined,
+    orderCode: '',
+    title: '',
+  };
+  activeTab.value = 'ALL';
+  handleSearch();
+}
+
+/** Tab 切换 */
+function handleTabChange(key: number | string) {
+  const keyStr = String(key);
+  activeTab.value = keyStr;
+  const tabConfig = STATUS_TAB_OPTIONS.find((t) => t.key === keyStr);
+  queryParams.value.status = (tabConfig?.statuses ?? undefined) as
+    | OpsOrderCenterApi.OrderStatus[]
+    | undefined;
+  handleSearch();
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) return;
+  viewMode.value = mode;
+  await nextTick();
+  handleSearch();
+}
+
+/** 查看详情 */
+function handleDetail(id: number) {
+  router.push({ name: 'CleaningWorkOrderDetail', params: { id } });
+}
+
+/** 打开派单表单 */
+function handleAssign(row: OpsOrderCenterApi.OrderItem) {
+  assignFormModalApi
+    .setData({ orderId: row.id, orderCode: row.orderCode })
+    .open();
+}
+
+/** 升级优先级 */
+function handleUpgrade(row: OpsOrderCenterApi.OrderItem) {
+  upgradePriorityFormModalApi
+    .setData({
+      orderId: row.id,
+      orderCode: row.orderCode,
+      currentPriority: row.priority,
+    })
+    .open();
+}
+
+/** 取消工单 */
+function handleCancel(row: OpsOrderCenterApi.OrderItem) {
+  cancelFormModalApi
+    .setData({
+      orderId: row.id,
+      orderCode: row.orderCode,
+      title: row.title,
+    })
+    .open();
+}
+
+/** 发送工牌通知 */
+async function handleNotify(
+  row: OpsOrderCenterApi.OrderItem,
+  type: 'vibrate' | 'voice',
+) {
+  if (!row.assigneeId) {
+    message.warning('该工单暂未分配执行人');
+    return;
+  }
+
+  try {
+    await sendDeviceNotify({
+      cleanerId: row.assigneeId,
+      type:
+        type === 'voice'
+          ? OpsCleaningApi.NotifyType.VOICE
+          : OpsCleaningApi.NotifyType.VIBRATE,
+      content:
+        type === 'voice' ? `请注意，您有待处理工单：${row.title}` : undefined,
+    });
+    message.success(type === 'voice' ? '语音提醒已发送' : '震动提醒已发送');
+  } catch {
+    message.error('发送失败');
+  }
+}
+
+/** 处理统计卡片点击 */
+function handleStatClick(statKey: string) {
+  // 重置筛选条件
+  queryParams.value = {
+    orderType: undefined,
+    status: undefined,
+    priority: undefined,
+    orderCode: '',
+    title: '',
+  };
+
+  switch (statKey) {
+    case 'completedTodayCount': {
+      queryParams.value.status = [
+        'COMPLETED',
+      ] as OpsOrderCenterApi.OrderStatus[];
+      break;
+    }
+    case 'inProgressCount': {
+      queryParams.value.status = [
+        'DISPATCHED',
+        'CONFIRMED',
+        'ARRIVED',
+      ] as OpsOrderCenterApi.OrderStatus[];
+      break;
+    }
+    case 'pendingCount': {
+      queryParams.value.status = ['PENDING'] as OpsOrderCenterApi.OrderStatus[];
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  handleSearch();
+}
+
+// 表格配置
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 500,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams.value,
+          });
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<OpsOrderCenterApi.OrderItem>,
+});
+
+onMounted(() => {
+  // 默认使用卡片视图
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 模态框 -->
+    <AssignFormModal @success="handleRefresh" />
+    <UpgradePriorityFormModal @success="handleRefresh" />
+    <CancelFormModal @success="handleRefresh" />
+
+    <!-- 快速统计栏 -->
+    <StatsBar ref="statsBarRef" @stat-click="handleStatClick" />
+
+    <!-- 工单列表容器 -->
+    <Card :body-style="{ padding: 0 }">
+      <!-- Tab 行：状态筛选 + 操作按钮 -->
+      <div class="tab-row">
+        <!-- 左侧：Tab -->
+        <Tabs
+          v-model:active-key="activeTab"
+          class="status-tabs"
+          :tab-bar-gutter="24"
+          @change="handleTabChange"
+        >
+          <Tabs.TabPane v-for="tab in STATUS_TAB_OPTIONS" :key="tab.key">
+            <template #tab>
+              <div class="tab-item">
+                <span class="tab-label">{{ tab.label }}</span>
+                <span
+                  v-if="(tabCounts[tab.key] ?? 0) > 0"
+                  class="tab-count"
+                  :class="{ 'tab-count--danger': tab.key === 'PENDING' }"
+                >
+                  {{ tabCounts[tab.key] }}
+                </span>
+              </div>
+            </template>
+          </Tabs.TabPane>
+        </Tabs>
+
+        <!-- 右侧：操作按钮 -->
+        <div class="tab-actions">
+          <!-- 视图切换 -->
+          <div class="btn-group">
+            <Button
+              class="group-btn"
+              :class="{ 'group-btn--active': viewMode === 'card' }"
+              @click="handleViewModeChange('card')"
+            >
+              <IconifyIcon icon="solar:widget-bold" />
+            </Button>
+            <Button
+              class="group-btn"
+              :class="{ 'group-btn--active': viewMode === 'list' }"
+              @click="handleViewModeChange('list')"
+            >
+              <IconifyIcon icon="solar:list-bold" />
+            </Button>
+          </div>
+
+          <div class="btn-divider"></div>
+
+          <!-- 筛选按钮 -->
+          <Button
+            class="action-btn"
+            :class="{ 'action-btn--active': showAdvancedFilter }"
+            @click="showAdvancedFilter = !showAdvancedFilter"
+          >
+            <IconifyIcon icon="solar:filter-bold" />
+          </Button>
+
+          <!-- 刷新按钮 -->
+          <Button class="action-btn" @click="handleRefresh">
+            <IconifyIcon icon="solar:refresh-bold" />
+          </Button>
+
+          <div class="btn-divider"></div>
+
+          <!-- 创建按钮 -->
+          <Button
+            type="primary"
+            class="create-btn"
+            @click="() => message.info('手动创建工单功能开发中')"
+          >
+            <IconifyIcon icon="solar:add-circle-bold" />
+            <span>创建工单</span>
+          </Button>
+        </div>
+      </div>
+
+      <!-- 搜索条件区域（展开时显示） -->
+      <div v-show="showAdvancedFilter" class="search-panel">
+        <div class="search-items">
+          <div class="search-item">
+            <span class="search-label">关键词</span>
+            <Input
+              v-model:value="queryParams.title"
+              placeholder="工单标题"
+              allow-clear
+              style="width: 180px"
+              @press-enter="handleSearch"
+            />
+          </div>
+          <div class="search-item">
+            <span class="search-label">工单编号</span>
+            <Input
+              v-model:value="queryParams.orderCode"
+              placeholder="输入工单编号"
+              allow-clear
+              style="width: 160px"
+              @press-enter="handleSearch"
+            />
+          </div>
+          <div class="search-item">
+            <span class="search-label">工单类型</span>
+            <Select
+              v-model:value="queryParams.orderType"
+              placeholder="全部"
+              allow-clear
+              style="width: 120px"
+              :options="ORDER_TYPE_OPTIONS"
+            />
+          </div>
+          <div class="search-item">
+            <span class="search-label">优先级</span>
+            <Select
+              v-model:value="queryParams.priority"
+              placeholder="全部"
+              allow-clear
+              style="width: 120px"
+              :options="PRIORITY_OPTIONS"
+            />
+          </div>
+        </div>
+        <div class="search-actions">
+          <Button @click="handleReset">
+            <IconifyIcon icon="solar:restart-bold" class="btn-icon" />
+            重置
+          </Button>
+          <Button type="primary" @click="handleSearch">
+            <IconifyIcon icon="solar:magnifer-bold" class="btn-icon" />
+            搜索
+          </Button>
+        </div>
+      </div>
+
+      <!-- 卡片视图 -->
+      <div v-if="viewMode === 'card'" class="card-content">
+        <CardView
+          ref="cardViewRef"
+          :search-params="queryParams as any"
+          @detail="handleDetail"
+          @assign="handleAssign"
+          @upgrade="handleUpgrade"
+          @cancel="handleCancel"
+          @notify="handleNotify"
+        />
+      </div>
+
+      <!-- 表格视图 -->
+      <div v-else class="list-content">
+        <Grid>
+          <!-- 工单类型列 -->
+          <template #orderType="{ row }">
+            <Tag :color="ORDER_TYPE_COLOR_MAP[row.orderType]" size="small">
+              {{ ORDER_TYPE_TEXT_MAP[row.orderType] }}
+            </Tag>
+          </template>
+
+          <!-- 工单状态列 -->
+          <template #status="{ row }">
+            <Tag :color="STATUS_COLOR_MAP[row.status]" size="small">
+              {{ STATUS_TEXT_MAP[row.status] }}
+            </Tag>
+          </template>
+
+          <!-- 优先级列 -->
+          <template #priority="{ row }">
+            <Tag v-if="row.priority === 0" color="error" size="small"> P0 </Tag>
+            <Tag v-else-if="row.priority === 1" color="warning" size="small">
+              P1
+            </Tag>
+            <span v-else class="text-gray-400">P2</span>
+          </template>
+
+          <!-- 执行人列 -->
+          <template #assignee="{ row }">
+            <span v-if="row.assigneeName">{{ row.assigneeName }}</span>
+            <span v-else class="text-gray-400">待分配</span>
+          </template>
+
+          <!-- 操作列 -->
+          <template #actions="{ row }">
+            <Button type="link" size="small" @click="handleDetail(row.id)">
+              详情
+            </Button>
+            <Button
+              v-if="row.status === 'PENDING'"
+              type="link"
+              size="small"
+              @click="handleAssign(row)"
+            >
+              派单
+            </Button>
+            <Button
+              v-if="row.status === 'DISPATCHED'"
+              type="link"
+              size="small"
+              @click="handleNotify(row, 'voice')"
+            >
+              提醒
+            </Button>
+            <Button
+              v-if="
+                row.priority !== 0 &&
+                !['COMPLETED', 'CANCELLED'].includes(row.status)
+              "
+              type="link"
+              size="small"
+              danger
+              @click="handleUpgrade(row)"
+            >
+              升级
+            </Button>
+            <Button
+              v-if="!['COMPLETED', 'CANCELLED'].includes(row.status)"
+              type="link"
+              size="small"
+              danger
+              @click="handleCancel(row)"
+            >
+              取消
+            </Button>
+          </template>
+        </Grid>
+      </div>
+    </Card>
+  </Page>
+</template>
+
+<style scoped lang="scss">
+/* 隐藏 VxeGrid 自带的搜索表单区域 */
+:deep(.vxe-grid--form-wrapper) {
+  display: none !important;
+}
+
+/* Tab 行 */
+.tab-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+/* Tab 样式优化 */
+.status-tabs {
+  flex: 1;
+  min-width: 0;
+
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  :deep(.ant-tabs-tab) {
+    padding: 14px 4px;
+    font-size: 14px;
+    transition: all 0.2s;
+
+    &:hover {
+      color: var(--ant-color-primary);
+    }
+
+    &.ant-tabs-tab-active {
+      font-weight: 600;
+    }
+  }
+
+  :deep(.ant-tabs-ink-bar) {
+    height: 2px;
+    border-radius: 1px;
+  }
+
+  .tab-item {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .tab-label {
+    line-height: 1;
+  }
+
+  .tab-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1;
+    color: #fff;
+    background: #8c8c8c;
+    border-radius: 9px;
+
+    &--danger {
+      background: #ff4d4f;
+    }
+  }
+}
+
+/* Tab 右侧操作按钮 */
+.tab-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  padding: 8px 0;
+}
+
+/* 按钮分隔线 */
+.btn-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: #e5e5e5;
+}
+
+/* 视图切换按钮组 */
+.btn-group {
+  display: flex;
+  gap: 0;
+  background: #f5f5f5;
+  border-radius: 6px;
+
+  .group-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    font-size: 16px;
+    color: #8c8c8c;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #595959;
+    }
+
+    &--active {
+      color: var(--ant-color-primary);
+      background: #fff;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+    }
+  }
+}
+
+/* 操作按钮 */
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 16px;
+  color: #595959;
+  background: transparent;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--ant-color-primary);
+    border-color: var(--ant-color-primary);
+  }
+
+  &--active {
+    color: var(--ant-color-primary);
+    background: var(--ant-color-primary-bg);
+    border-color: var(--ant-color-primary);
+  }
+}
+
+/* 创建按钮 */
+.create-btn {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 32px;
+  padding: 0 14px;
+  font-size: 14px;
+  border-radius: 6px;
+}
+
+/* 搜索面板 */
+.search-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: transparent;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.search-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-label {
+  font-size: 13px;
+  color: #595959;
+  white-space: nowrap;
+}
+
+.search-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* 内容区 */
+.card-content {
+  padding: 16px;
+}
+
+.list-content {
+  padding: 16px;
+
+  :deep(.vxe-grid) {
+    overflow: hidden;
+    background: transparent;
+    border-radius: 8px;
+  }
+
+  :deep(.vxe-table) {
+    background: transparent;
+  }
+
+  :deep(.vxe-header--column) {
+    background: rgb(0 0 0 / 2%);
+  }
+
+  :deep(.vxe-body--row) {
+    background: transparent;
+
+    &:hover > td {
+      background: rgb(0 0 0 / 4%) !important;
+    }
+  }
+
+  :deep(.vxe-table--border-line) {
+    border-color: rgb(0 0 0 / 6%);
+  }
+}
+
+html.dark {
+  .tab-row {
+    border-color: #303030;
+  }
+
+  .btn-divider {
+    background: #404040;
+  }
+
+  .btn-group {
+    background: #333;
+
+    .group-btn {
+      color: #8c8c8c;
+
+      &:hover {
+        color: #bfbfbf;
+      }
+
+      &--active {
+        color: var(--ant-color-primary);
+        background: #1f1f1f;
+      }
+    }
+  }
+
+  .action-btn {
+    color: #8c8c8c;
+    border-color: #434343;
+
+    &:hover {
+      color: var(--ant-color-primary);
+      border-color: var(--ant-color-primary);
+    }
+
+    &--active {
+      color: var(--ant-color-primary);
+      background: rgb(22 119 255 / 15%);
+      border-color: var(--ant-color-primary);
+    }
+  }
+
+  .tab-count {
+    background: #595959;
+
+    &--danger {
+      background: #a61d24;
+    }
+  }
+
+  .search-panel {
+    background: transparent;
+    border-color: #303030;
+  }
+
+  .search-label {
+    color: rgb(255 255 255 / 65%);
+  }
+
+  .list-content {
+    :deep(.vxe-grid) {
+      background: transparent;
+    }
+
+    :deep(.vxe-table) {
+      background: transparent;
+    }
+
+    :deep(.vxe-header--column) {
+      background: rgb(255 255 255 / 4%);
+    }
+
+    :deep(.vxe-body--row) {
+      background: transparent;
+
+      &:hover > td {
+        background: rgb(255 255 255 / 6%) !important;
+      }
+    }
+
+    :deep(.vxe-table--border-line) {
+      border-color: rgb(255 255 255 / 8%);
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/assign-form.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/assign-form.vue
new file mode 100644
index 000000000..56008c481
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/assign-form.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { OpsCleaningApi } from '#/api/ops/cleaning';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Avatar, Badge, Card, message, Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getCleanerStatusList } from '#/api/ops/cleaning';
+import { assignOrder } from '#/api/ops/order-center';
+
+defineOptions({ name: 'WorkOrderAssignForm' });
+
+const emit = defineEmits<{ success: [] }>();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: async (isOpen) => {
+    if (isOpen) {
+      const data = modalApi.getData<{ orderCode: string; orderId: number }>();
+      if (data) {
+        orderId.value = data.orderId;
+        orderCode.value = data.orderCode;
+      }
+      await loadCleaners();
+    }
+  },
+  onConfirm: handleSubmit,
+});
+
+const orderId = ref<number>();
+const orderCode = ref<string>('');
+const loading = ref(false);
+const cleanerLoading = ref(false);
+const cleanerList = ref<OpsCleaningApi.CleanerStatusItem[]>([]);
+const selectedCleanerId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'remark',
+      label: '派单备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入派单备注（选填）',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 加载保洁员列表 */
+async function loadCleaners() {
+  cleanerLoading.value = true;
+  try {
+    const res = await getCleanerStatusList();
+    cleanerList.value = res.list || [];
+  } catch {
+    cleanerList.value = [];
+  } finally {
+    cleanerLoading.value = false;
+  }
+}
+
+/** 选择保洁员 */
+function selectCleaner(cleaner: OpsCleaningApi.CleanerStatusItem) {
+  selectedCleanerId.value = cleaner.userId;
+}
+
+/** 获取状态颜色 */
+function getStatusColor(status: string) {
+  const colorMap: Record<string, string> = {
+    IDLE: '#52c41a',
+    BUSY: '#faad14',
+    OFFLINE: '#d9d9d9',
+    PAUSED: '#ff7a45',
+  };
+  return colorMap[status] || '#d9d9d9';
+}
+
+/** 获取状态文本 */
+function getStatusText(status: string) {
+  const textMap: Record<string, string> = {
+    IDLE: '空闲',
+    BUSY: '忙碌',
+    OFFLINE: '离线',
+    PAUSED: '暂停',
+  };
+  return textMap[status] || status;
+}
+
+/** 获取电量颜色 */
+function getBatteryColor(level: number) {
+  if (level <= 20) return '#F44336';
+  if (level <= 50) return '#FF9800';
+  return '#4CAF50';
+}
+
+/** 提交表单 */
+async function handleSubmit() {
+  if (!selectedCleanerId.value) {
+    message.warning('请选择执行人');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const formData = await formApi.getValues();
+    await assignOrder({
+      orderId: orderId.value!,
+      assigneeId: selectedCleanerId.value,
+      remark: formData.remark,
+    });
+    message.success('派单成功');
+    modalApi.close();
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 可用保洁员（优先显示空闲） */
+const sortedCleaners = computed(() => {
+  return [...cleanerList.value].toSorted((a, b) => {
+    const order: Record<string, number> = {
+      IDLE: 0,
+      BUSY: 1,
+      PAUSED: 2,
+      OFFLINE: 3,
+    };
+    return (order[a.status] || 99) - (order[b.status] || 99);
+  });
+});
+</script>
+
+<template>
+  <Modal title="分配工单" class="w-[600px]">
+    <div class="assign-form">
+      <!-- 工单信息 -->
+      <div class="mb-4 rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
+        <div class="text-sm text-gray-500">
+          工单编号：<span class="font-medium text-gray-700 dark:text-gray-300">
+            {{ orderCode }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 保洁员选择 -->
+      <div class="mb-4">
+        <div class="mb-2 text-sm font-medium">选择执行人</div>
+        <Spin :spinning="cleanerLoading">
+          <div
+            v-if="sortedCleaners.length > 0"
+            class="cleaner-grid grid max-h-64 gap-3 overflow-y-auto"
+          >
+            <Card
+              v-for="cleaner in sortedCleaners"
+              :key="cleaner.userId"
+              size="small"
+              class="cleaner-card cursor-pointer transition-all"
+              :class="[
+                selectedCleanerId === cleaner.userId
+                  ? 'border-primary ring-2 ring-primary/20'
+                  : 'hover:border-gray-300',
+                cleaner.status === 'OFFLINE' ? 'opacity-50' : '',
+              ]"
+              @click="selectCleaner(cleaner)"
+            >
+              <div class="flex items-center gap-3">
+                <Badge
+                  :color="getStatusColor(cleaner.status)"
+                  :offset="[-4, 28]"
+                >
+                  <Avatar size="small" class="bg-blue-500">
+                    {{ cleaner.userName?.charAt(0) }}
+                  </Avatar>
+                </Badge>
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center justify-between">
+                    <span class="truncate font-medium">{{
+                      cleaner.userName
+                    }}</span>
+                    <span
+                      class="ml-2 text-xs"
+                      :style="{ color: getStatusColor(cleaner.status) }"
+                    >
+                      {{ getStatusText(cleaner.status) }}
+                    </span>
+                  </div>
+                  <div
+                    class="mt-1 flex items-center justify-between text-xs text-gray-400"
+                  >
+                    <span>{{ cleaner.currentAreaName || '未知区域' }}</span>
+                    <span
+                      :style="{ color: getBatteryColor(cleaner.batteryLevel) }"
+                    >
+                      {{ cleaner.batteryLevel }}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div v-else class="py-8 text-center text-gray-400">
+            暂无可用保洁员
+          </div>
+        </Spin>
+      </div>
+
+      <!-- 备注表单 -->
+      <Form />
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.assign-form {
+  .cleaner-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .cleaner-card {
+    border-radius: 8px;
+
+    :deep(.ant-card-body) {
+      padding: 12px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/cancel-form.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/cancel-form.vue
new file mode 100644
index 000000000..a62b95fe9
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/cancel-form.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Alert, message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { cancelOrder } from '#/api/ops/order-center';
+
+defineOptions({ name: 'CancelOrderForm' });
+
+const emit = defineEmits<{ success: [] }>();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        orderCode: string;
+        orderId: number;
+        title: string;
+      }>();
+      if (data) {
+        orderId.value = data.orderId;
+        orderCode.value = data.orderCode;
+        orderTitle.value = data.title;
+      }
+    }
+  },
+  onConfirm: handleSubmit,
+});
+
+const orderId = ref<number>();
+const orderCode = ref<string>('');
+const orderTitle = ref<string>('');
+const loading = ref(false);
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'reason',
+      label: '取消原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入取消工单的原因',
+        rows: 4,
+        maxLength: 200,
+        showCount: true,
+      },
+      rules: z
+        .string()
+        .min(2, '原因至少2个字符')
+        .max(200, '原因不能超过200字符'),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 提交表单 */
+async function handleSubmit() {
+  const { valid, values } = await formApi.validate();
+  if (!valid) return;
+
+  loading.value = true;
+  try {
+    await cancelOrder({
+      id: orderId.value!,
+      reason: values.reason,
+    });
+    message.success('工单已取消');
+    modalApi.close();
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Modal title="取消工单" class="w-[480px]">
+    <div class="cancel-form">
+      <!-- 警告提示 -->
+      <Alert
+        type="error"
+        show-icon
+        class="mb-4"
+        message="取消后工单将无法恢复，请确认操作"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:alert-circle" class="text-red-500" />
+        </template>
+      </Alert>
+
+      <!-- 工单信息 -->
+      <div class="mb-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
+        <div class="mb-2 text-sm text-gray-500">
+          工单编号：<span
+            class="font-medium text-gray-700 dark:text-gray-300"
+            >{{ orderCode }}</span
+          >
+        </div>
+        <div class="text-sm text-gray-500">
+          工单标题：<span
+            class="font-medium text-gray-700 dark:text-gray-300"
+            >{{ orderTitle }}</span
+          >
+        </div>
+      </div>
+
+      <!-- 表单 -->
+      <Form />
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.cancel-form {
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
new file mode 100644
index 000000000..aed8495bc
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
@@ -0,0 +1,726 @@
+<script lang="ts" setup>
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Avatar,
+  Button,
+  Col,
+  Dropdown,
+  Empty,
+  Menu,
+  Pagination,
+  Popconfirm,
+  Row,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { getOrderPage } from '#/api/ops/order-center';
+
+import {
+  ORDER_TYPE_COLOR_MAP,
+  ORDER_TYPE_TEXT_MAP,
+  PRIORITY_STYLE_MAP,
+  STATUS_COLOR_MAP,
+  STATUS_ICON_MAP,
+  STATUS_TEXT_MAP,
+} from '../data';
+
+defineOptions({ name: 'WorkOrderCardView' });
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  assign: [row: OpsOrderCenterApi.OrderItem];
+  cancel: [row: OpsOrderCenterApi.OrderItem];
+  detail: [id: number];
+  notify: [row: OpsOrderCenterApi.OrderItem, type: 'vibrate' | 'voice'];
+  upgrade: [row: OpsOrderCenterApi.OrderItem];
+}>();
+
+// ========== 模拟数据开关 ==========
+const USE_MOCK_DATA = true;
+
+// 模拟工单数据
+const MOCK_ORDER_LIST: OpsOrderCenterApi.OrderItem[] = [
+  {
+    id: 10_001,
+    orderCode: 'WO20260123143025001',
+    title: 'A区洗手间紧急保洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'ARRIVED' as OpsOrderCenterApi.OrderStatus,
+    priority: 0 as OpsOrderCenterApi.Priority,
+    location: 'A区 / 1楼洗手间',
+    assigneeId: 2001,
+    assigneeName: '张三',
+    createTime: '2026-01-23 14:30:25',
+  },
+  {
+    id: 10_002,
+    orderCode: 'WO20260123150012002',
+    title: 'B区大厅日常保洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'DISPATCHED' as OpsOrderCenterApi.OrderStatus,
+    priority: 1 as OpsOrderCenterApi.Priority,
+    location: 'B区 / 大厅',
+    assigneeId: 2002,
+    assigneeName: '李四',
+    createTime: '2026-01-23 15:00:12',
+  },
+  {
+    id: 10_003,
+    orderCode: 'WO20260123151530003',
+    title: 'C区会议室深度保洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'PENDING' as OpsOrderCenterApi.OrderStatus,
+    priority: 2 as OpsOrderCenterApi.Priority,
+    location: 'C区 / 3楼会议室',
+    createTime: '2026-01-23 15:15:30',
+  },
+  {
+    id: 10_004,
+    orderCode: 'WO20260123091045004',
+    title: 'D区电梯厅保洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'COMPLETED' as OpsOrderCenterApi.OrderStatus,
+    priority: 2 as OpsOrderCenterApi.Priority,
+    location: 'D区 / 电梯厅',
+    assigneeId: 2003,
+    assigneeName: '王五',
+    createTime: '2026-01-23 09:10:45',
+  },
+  {
+    id: 10_005,
+    orderCode: 'WO20260123160000005',
+    title: 'E区停车场应急清洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'QUEUED' as OpsOrderCenterApi.OrderStatus,
+    priority: 0 as OpsOrderCenterApi.Priority,
+    location: 'E区 / 地下停车场',
+    assigneeId: 2001,
+    assigneeName: '张三',
+    createTime: '2026-01-23 16:00:00',
+  },
+  {
+    id: 10_006,
+    orderCode: 'WO20260123102030006',
+    title: 'A区休息区保洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'CONFIRMED' as OpsOrderCenterApi.OrderStatus,
+    priority: 1 as OpsOrderCenterApi.Priority,
+    location: 'A区 / 2楼休息区',
+    assigneeId: 2004,
+    assigneeName: '赵六',
+    createTime: '2026-01-23 10:20:30',
+  },
+  {
+    id: 10_007,
+    orderCode: 'WO20260123110500007',
+    title: 'F区门厅玻璃清洁',
+    orderType: 'CLEAN' as OpsOrderCenterApi.OrderType,
+    status: 'PAUSED' as OpsOrderCenterApi.OrderStatus,
+    priority: 2 as OpsOrderCenterApi.Priority,
+    location: 'F区 / 门厅',
+    assigneeId: 2005,
+    assigneeName: '钱七',
+    createTime: '2026-01-23 11:05:00',
+  },
+  {
+    id: 10_008,
+    orderCode: 'WO20260123140000008',
+    title: 'B区卫生间设备维修',
+    orderType: 'REPAIR' as OpsOrderCenterApi.OrderType,
+    status: 'PENDING' as OpsOrderCenterApi.OrderStatus,
+    priority: 1 as OpsOrderCenterApi.Priority,
+    location: 'B区 / 2楼卫生间',
+    createTime: '2026-01-23 14:00:00',
+  },
+];
+
+interface Props {
+  searchParams?: Partial<OpsOrderCenterApi.OrderPageQuery>;
+}
+
+const loading = ref(false);
+const list = ref<OpsOrderCenterApi.OrderItem[]>([]);
+const total = ref(0);
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 12,
+});
+
+/** 获取工单列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (USE_MOCK_DATA) {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+      list.value = [...MOCK_ORDER_LIST];
+      total.value = MOCK_ORDER_LIST.length;
+    } else {
+      const data = await getOrderPage({
+        ...queryParams.value,
+        ...props.searchParams,
+      });
+      list.value = data.list || [];
+      total.value = data.total || 0;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理页码变化 */
+function handlePageChange(page: number, pageSize: number) {
+  queryParams.value.pageNo = page;
+  queryParams.value.pageSize = pageSize;
+  getList();
+}
+
+/** 获取优先级样式 */
+function getPriorityStyle(priority: number) {
+  return PRIORITY_STYLE_MAP[priority] || PRIORITY_STYLE_MAP[2];
+}
+
+/** 判断是否为紧急工单 */
+function isUrgent(priority: number) {
+  return priority === 0;
+}
+
+/** 判断是否为终态 */
+function isTerminal(status: string) {
+  return ['CANCELLED', 'COMPLETED'].includes(status);
+}
+
+/** 判断是否为进行中状态 */
+function isInProgress(status: string) {
+  return ['ARRIVED', 'CONFIRMED', 'DISPATCHED', 'QUEUED'].includes(status);
+}
+
+/** 格式化时间显示 */
+function formatTime(time: string) {
+  if (!time) return '-';
+  const date = new Date(time);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(minutes / 60);
+
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes}分钟前`;
+  if (hours < 24) return `${hours}小时前`;
+  return time.slice(5, 16);
+}
+
+defineExpose({
+  reload: getList,
+  query: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+});
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="work-order-card-view">
+    <!-- 工单卡片列表 -->
+    <div v-loading="loading" class="card-grid">
+      <Row v-if="list.length > 0" :gutter="[12, 12]">
+        <Col
+          v-for="item in list"
+          :key="item.id"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+          :xl="6"
+        >
+          <div
+            class="order-card"
+            :class="{
+              'order-card--urgent': isUrgent(item.priority),
+              'order-card--terminal': isTerminal(item.status),
+            }"
+            @click="emit('detail', item.id)"
+          >
+            <!-- 头部：状态 + 优先级 -->
+            <div class="card-header">
+              <div
+                class="status-info"
+                :style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
+              >
+                <IconifyIcon
+                  :icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
+                  class="status-icon"
+                />
+                <span class="status-text">{{
+                  STATUS_TEXT_MAP[item.status]
+                }}</span>
+              </div>
+              <div
+                v-if="item.priority !== 2"
+                class="priority-tag"
+                :class="`priority-${item.priority}`"
+              >
+                <IconifyIcon
+                  v-if="item.priority === 0"
+                  icon="solar:bolt-bold"
+                />
+                {{ getPriorityStyle(item.priority)?.label }}
+              </div>
+            </div>
+
+            <!-- 主体内容 -->
+            <div class="card-body">
+              <!-- 标题 -->
+              <Tooltip :title="item.title" placement="topLeft">
+                <h4 class="card-title">{{ item.title }}</h4>
+              </Tooltip>
+
+              <!-- 信息行 -->
+              <div class="info-rows">
+                <div class="info-row">
+                  <IconifyIcon
+                    icon="solar:map-point-bold-duotone"
+                    class="info-icon"
+                  />
+                  <span class="info-text">{{
+                    item.location || '未指定位置'
+                  }}</span>
+                </div>
+                <div class="info-row">
+                  <IconifyIcon
+                    icon="solar:user-bold-duotone"
+                    class="info-icon"
+                  />
+                  <template v-if="item.assigneeName">
+                    <Avatar :size="16" class="assignee-avatar">
+                      {{ item.assigneeName.charAt(0) }}
+                    </Avatar>
+                    <span class="info-text">{{ item.assigneeName }}</span>
+                  </template>
+                  <span v-else class="info-text info-text--muted">待分配</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 底部：元信息 + 操作按钮 -->
+            <div class="card-footer">
+              <!-- 左侧：类型 + 编号 + 时间 -->
+              <div class="card-meta">
+                <Tag
+                  :color="ORDER_TYPE_COLOR_MAP[item.orderType]"
+                  class="type-tag"
+                >
+                  {{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
+                </Tag>
+                <span class="order-code">#{{ item.orderCode.slice(-6) }}</span>
+                <span class="create-time">{{
+                  formatTime(item.createTime)
+                }}</span>
+              </div>
+
+              <!-- 右侧：操作按钮 -->
+              <div class="card-actions" @click.stop>
+                <!-- 待分配：派单 -->
+                <Tooltip v-if="item.status === 'PENDING'" title="分配执行人">
+                  <Button
+                    type="primary"
+                    size="small"
+                    class="action-btn"
+                    @click="emit('assign', item)"
+                  >
+                    <IconifyIcon icon="solar:user-plus-bold" />
+                  </Button>
+                </Tooltip>
+
+                <!-- 已推送：提醒 -->
+                <Dropdown
+                  v-if="item.status === 'DISPATCHED'"
+                  placement="topRight"
+                >
+                  <Button size="small" class="action-btn action-btn--notify">
+                    <IconifyIcon icon="solar:bell-bold" />
+                  </Button>
+                  <template #overlay>
+                    <Menu>
+                      <Menu.Item
+                        key="voice"
+                        @click="emit('notify', item, 'voice')"
+                      >
+                        <IconifyIcon
+                          icon="solar:volume-loud-bold"
+                          class="mr-2"
+                        />
+                        语音提醒
+                      </Menu.Item>
+                      <Menu.Item
+                        key="vibrate"
+                        @click="emit('notify', item, 'vibrate')"
+                      >
+                        <IconifyIcon
+                          icon="solar:smartphone-vibration-bold"
+                          class="mr-2"
+                        />
+                        震动提醒
+                      </Menu.Item>
+                    </Menu>
+                  </template>
+                </Dropdown>
+
+                <!-- 升级优先级 -->
+                <Tooltip
+                  v-if="item.priority !== 0 && isInProgress(item.status)"
+                  title="升级为紧急"
+                >
+                  <Button
+                    size="small"
+                    class="action-btn action-btn--upgrade"
+                    @click="emit('upgrade', item)"
+                  >
+                    <IconifyIcon icon="solar:bolt-bold" />
+                  </Button>
+                </Tooltip>
+
+                <!-- 取消工单 -->
+                <Popconfirm
+                  v-if="!isTerminal(item.status)"
+                  title="确定取消此工单？"
+                  placement="topRight"
+                  @confirm="emit('cancel', item)"
+                >
+                  <Button size="small" class="action-btn action-btn--danger">
+                    <IconifyIcon icon="solar:close-circle-bold" />
+                  </Button>
+                </Popconfirm>
+              </div>
+            </div>
+          </div>
+        </Col>
+      </Row>
+
+      <!-- 空状态 -->
+      <Empty v-else description="暂无工单数据" class="my-16" />
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="list.length > 0" class="pagination-wrapper">
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        :show-total="(t) => `共 ${t} 条`"
+        size="small"
+        show-quick-jumper
+        show-size-changer
+        :page-size-options="['12', '24', '36', '48']"
+        @change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.work-order-card-view {
+  // 动画
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.6;
+    }
+  }
+
+  .card-grid {
+    min-height: 300px;
+  }
+
+  // 卡片
+  .order-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 190px;
+    padding: 14px;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #d9d9d9;
+      box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+    }
+
+    &--urgent {
+      border-left: 3px solid #ff4d4f;
+    }
+
+    &--terminal {
+      opacity: 0.65;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  // 头部
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  .status-info {
+    --status-color: #8c8c8c;
+
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--status-color);
+
+    .status-icon {
+      font-size: 14px;
+    }
+  }
+
+  .priority-tag {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 4px;
+
+    &.priority-0 {
+      color: #ff4d4f;
+      background: #fff1f0;
+      animation: pulse 2s infinite;
+    }
+
+    &.priority-1 {
+      color: #fa8c16;
+      background: #fff7e6;
+    }
+  }
+
+  // 主体
+  .card-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .card-title {
+    display: -webkit-box;
+    margin: 0 0 10px;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: #262626;
+    -webkit-box-orient: vertical;
+  }
+
+  .info-rows {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .info-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 13px;
+    color: #595959;
+
+    .info-icon {
+      flex-shrink: 0;
+      font-size: 14px;
+      color: #8c8c8c;
+    }
+
+    .info-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &--muted {
+        color: #bfbfbf;
+      }
+    }
+
+    .assignee-avatar {
+      flex-shrink: 0;
+      font-size: 10px !important;
+      line-height: 16px !important;
+      color: #fff;
+      background: #1677ff;
+    }
+  }
+
+  // 底部区域
+  .card-footer {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 10px;
+    margin-top: auto;
+    border-top: 1px solid #f5f5f5;
+  }
+
+  // 底部元信息
+  .card-meta {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    min-width: 0;
+
+    .type-tag {
+      flex-shrink: 0;
+      margin: 0;
+      font-size: 11px;
+      line-height: 16px;
+      border: none;
+    }
+
+    .order-code {
+      flex-shrink: 0;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 11px;
+      color: #8c8c8c;
+    }
+
+    .create-time {
+      flex-shrink: 0;
+      font-size: 11px;
+      color: #8c8c8c;
+    }
+  }
+
+  // 操作按钮
+  .card-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+  }
+
+  .action-btn {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    border-radius: 6px;
+
+    // 确保按钮内图标居中
+    :deep(.iconify) {
+      display: block;
+      margin: 0 auto;
+    }
+
+    &--notify {
+      color: #fa8c16;
+      border-color: #ffd591;
+
+      &:hover {
+        color: #d46b08;
+        border-color: #fa8c16;
+      }
+    }
+
+    &--upgrade {
+      color: #ff4d4f;
+      border-color: #ffccc7;
+
+      &:hover {
+        color: #cf1322;
+        border-color: #ff4d4f;
+      }
+    }
+
+    &--danger {
+      color: #8c8c8c;
+      border-color: #d9d9d9;
+
+      &:hover {
+        color: #ff4d4f;
+        border-color: #ff4d4f;
+      }
+    }
+  }
+
+  // 分页
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 12px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+// 暗色模式
+html.dark {
+  .work-order-card-view {
+    .order-card {
+      background: #1f1f1f;
+      border-color: #303030;
+
+      &:hover {
+        border-color: #434343;
+      }
+    }
+
+    .card-title {
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .info-row {
+      color: rgb(255 255 255 / 65%);
+
+      .info-icon {
+        color: rgb(255 255 255 / 45%);
+      }
+
+      .info-text--muted {
+        color: rgb(255 255 255 / 30%);
+      }
+    }
+
+    .card-meta {
+      border-color: #303030;
+
+      .order-code,
+      .create-time {
+        color: rgb(255 255 255 / 45%);
+      }
+    }
+
+    .pagination-wrapper {
+      border-color: #303030;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
new file mode 100644
index 000000000..db6837714
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Card, Col, Row, Spin } from 'ant-design-vue';
+
+import { getQuickStats } from '#/api/ops/order-center';
+
+defineOptions({ name: 'WorkOrderStatsBar' });
+
+const emit = defineEmits<{
+  statClick: [statKey: string];
+}>();
+
+// ========== 模拟数据开关 ==========
+const USE_MOCK_DATA = true;
+
+/** 扩展的统计数据接口 */
+interface DashboardStats extends OpsOrderCenterApi.QuickStats {
+  // 响应速度
+  avgResponseTime: number; // 平均响应时间（分钟）
+  fastestResponseTime: number; // 最快响应时间（分钟）
+  responseRate: number; // 响应率（%）
+  // 作业统计
+  completionRate: number; // 完成率（%）
+  avgCompletionTime: number; // 平均完成时间（分钟）
+  qualityScore: number; // 作业质量评分（0-100）
+  // 人员状态
+  workingCleanerCount: number; // 作业中人员
+  idleCleanerCount: number; // 空闲人员
+}
+
+const loading = ref(false);
+const statsData = ref<DashboardStats>({
+  pendingCount: 0,
+  inProgressCount: 0,
+  completedTodayCount: 0,
+  onlineCleanerCount: 0,
+  avgResponseTime: 0,
+  fastestResponseTime: 0,
+  responseRate: 0,
+  completionRate: 0,
+  avgCompletionTime: 0,
+  qualityScore: 0,
+  workingCleanerCount: 0,
+  idleCleanerCount: 0,
+});
+
+// 模拟数据
+const MOCK_STATS: DashboardStats = {
+  pendingCount: 8,
+  inProgressCount: 15,
+  completedTodayCount: 42,
+  onlineCleanerCount: 12,
+  avgResponseTime: 12.5,
+  fastestResponseTime: 3.2,
+  responseRate: 95.8,
+  completionRate: 87.5,
+  avgCompletionTime: 45.3,
+  qualityScore: 92.3,
+  workingCleanerCount: 8,
+  idleCleanerCount: 4,
+};
+
+let refreshTimer: null | ReturnType<typeof setInterval> = null;
+
+/** 加载统计数据 */
+async function loadStats() {
+  loading.value = true;
+  try {
+    if (USE_MOCK_DATA) {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      statsData.value = {
+        ...MOCK_STATS,
+        pendingCount: MOCK_STATS.pendingCount + Math.floor(Math.random() * 3),
+        inProgressCount:
+          MOCK_STATS.inProgressCount + Math.floor(Math.random() * 2),
+        completedTodayCount:
+          MOCK_STATS.completedTodayCount + Math.floor(Math.random() * 5),
+        onlineCleanerCount:
+          MOCK_STATS.onlineCleanerCount + Math.floor(Math.random() * 2) - 1,
+        workingCleanerCount:
+          MOCK_STATS.workingCleanerCount + Math.floor(Math.random() * 2) - 1,
+      };
+    } else {
+      const quickStats = await getQuickStats();
+      // TODO: 扩展 API 返回更多统计数据
+      statsData.value = {
+        ...quickStats,
+        avgResponseTime: 0,
+        fastestResponseTime: 0,
+        responseRate: 0,
+        completionRate: 0,
+        avgCompletionTime: 0,
+        qualityScore: 0,
+        workingCleanerCount: 0,
+        idleCleanerCount: 0,
+      };
+    }
+  } catch {
+    // 使用默认数据
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理统计项点击 */
+function handleStatClick(statKey: string) {
+  emit('statClick', statKey);
+}
+
+onMounted(() => {
+  loadStats();
+  refreshTimer = setInterval(loadStats, 30_000);
+});
+
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+  }
+});
+
+defineExpose({ refresh: loadStats });
+</script>
+
+<template>
+  <div class="stats-dashboard">
+    <Spin :spinning="loading">
+      <!-- 第一行：核心指标 -->
+      <Row :gutter="12" class="mb-3">
+        <!-- 待处理 -->
+        <Col :xs="24" :sm="12" :md="6">
+          <Card
+            :body-style="{ padding: '12px 14px' }"
+            class="stats-card stats-card--clickable"
+            @click="handleStatClick('pendingCount')"
+          >
+            <div class="stats-content">
+              <div
+                class="stats-icon"
+                style="--icon-color: #ff4d4f; --icon-bg: #fff1f0"
+              >
+                <IconifyIcon icon="solar:clock-circle-bold-duotone" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">待处理</div>
+                <div class="stats-value">{{ statsData.pendingCount }}</div>
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <!-- 进行中 -->
+        <Col :xs="24" :sm="12" :md="6">
+          <Card
+            :body-style="{ padding: '12px 14px' }"
+            class="stats-card stats-card--clickable"
+            @click="handleStatClick('inProgressCount')"
+          >
+            <div class="stats-content">
+              <div
+                class="stats-icon"
+                style="--icon-color: #1677ff; --icon-bg: #e6f4ff"
+              >
+                <IconifyIcon icon="solar:play-circle-bold-duotone" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">进行中</div>
+                <div class="stats-value">{{ statsData.inProgressCount }}</div>
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <!-- 今日完成 -->
+        <Col :xs="24" :sm="12" :md="6">
+          <Card
+            :body-style="{ padding: '12px 14px' }"
+            class="stats-card stats-card--clickable"
+            @click="handleStatClick('completedTodayCount')"
+          >
+            <div class="stats-content">
+              <div
+                class="stats-icon"
+                style="--icon-color: #52c41a; --icon-bg: #f6ffed"
+              >
+                <IconifyIcon icon="solar:check-circle-bold-duotone" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">今日完成</div>
+                <div class="stats-value">
+                  {{ statsData.completedTodayCount }}
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <!-- 在线人员 -->
+        <Col :xs="24" :sm="12" :md="6">
+          <Card :body-style="{ padding: '12px 14px' }" class="stats-card">
+            <div class="stats-content">
+              <div
+                class="stats-icon"
+                style="--icon-color: #722ed1; --icon-bg: #f9f0ff"
+              >
+                <IconifyIcon
+                  icon="solar:users-group-two-rounded-bold-duotone"
+                />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">在线人员</div>
+                <div class="stats-value">
+                  {{ statsData.onlineCleanerCount }}
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </Spin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.stats-dashboard {
+  margin-bottom: 12px;
+}
+
+// 核心指标卡片
+.stats-card {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #d9d9d9;
+    box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
+  }
+
+  &--clickable {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+      transform: translateY(-1px);
+    }
+  }
+
+  .stats-content {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .stats-icon {
+    --icon-color: #8c8c8c;
+    --icon-bg: #f5f5f5;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: var(--icon-color);
+    background: var(--icon-bg);
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    :deep(svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .stats-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .stats-title {
+    margin-bottom: 2px;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.3;
+    color: #595959;
+  }
+
+  .stats-subtitle {
+    margin-bottom: 4px;
+    font-size: 11px;
+    line-height: 1.3;
+    color: #8c8c8c;
+  }
+
+  .stats-value {
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
+      sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    color: #262626;
+  }
+}
+
+// 态势数据卡片
+.metric-card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #d9d9d9;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+  }
+
+  .metric-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .metric-title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 15px;
+    font-weight: 600;
+    color: #262626;
+  }
+
+  .metric-icon {
+    font-size: 18px;
+    color: #1677ff;
+  }
+
+  .metric-status {
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    background: rgb(22 119 255 / 10%);
+    border-radius: 4px;
+  }
+
+  .metric-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .metric-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+  }
+
+  .metric-label {
+    font-size: 13px;
+    color: #8c8c8c;
+  }
+
+  .metric-value {
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
+      sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: #262626;
+
+    &--primary {
+      color: #1677ff;
+    }
+
+    &--success {
+      color: #52c41a;
+    }
+  }
+
+  .metric-progress {
+    margin-top: 4px;
+  }
+
+  .progress-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+
+  .progress-value {
+    font-size: 13px;
+    font-weight: 600;
+    color: #262626;
+  }
+}
+
+// 暗色模式
+html.dark {
+  .stats-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    &:hover {
+      border-color: #434343;
+      box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+    }
+
+    &--clickable:hover {
+      box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
+    }
+
+    .stats-title {
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .stats-subtitle {
+      color: rgb(255 255 255 / 45%);
+    }
+
+    .stats-value {
+      color: rgb(255 255 255 / 85%);
+    }
+  }
+
+  .metric-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    &:hover {
+      border-color: #434343;
+      box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+    }
+
+    .metric-title {
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .metric-status {
+      background: rgb(22 119 255 / 20%);
+    }
+
+    .metric-label {
+      color: rgb(255 255 255 / 45%);
+    }
+
+    .metric-value {
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .progress-label {
+      color: rgb(255 255 255 / 45%);
+    }
+
+    .progress-value {
+      color: rgb(255 255 255 / 85%);
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/upgrade-priority-form.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/upgrade-priority-form.vue
new file mode 100644
index 000000000..5f2813780
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/upgrade-priority-form.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Alert, message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { upgradePriority } from '#/api/ops/cleaning';
+
+defineOptions({ name: 'UpgradePriorityForm' });
+
+const emit = defineEmits<{ success: [] }>();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        currentPriority: number;
+        orderCode: string;
+        orderId: number;
+      }>();
+      if (data) {
+        orderId.value = data.orderId;
+        orderCode.value = data.orderCode;
+        currentPriority.value = data.currentPriority;
+      }
+    }
+  },
+  onConfirm: handleSubmit,
+});
+
+const orderId = ref<number>();
+const orderCode = ref<string>('');
+const currentPriority = ref<number>(2);
+const loading = ref(false);
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'reason',
+      label: '升级原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder:
+          '请输入升级为P0紧急工单的原因，例如：领导临时检查、VIP客户投诉等',
+        rows: 4,
+        maxLength: 200,
+        showCount: true,
+      },
+      rules: z
+        .string()
+        .min(5, '原因至少5个字符')
+        .max(200, '原因不能超过200字符'),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 获取优先级文本 */
+function getPriorityText(priority: number) {
+  const map: Record<number, string> = {
+    0: 'P0 (紧急)',
+    1: 'P1 (重要)',
+    2: 'P2 (普通)',
+  };
+  return map[priority] || 'P2';
+}
+
+/** 提交表单 */
+async function handleSubmit() {
+  const { valid, values } = await formApi.validate();
+  if (!valid || !values) return;
+
+  loading.value = true;
+  try {
+    await upgradePriority({
+      orderId: orderId.value!,
+      reason: values.reason,
+    });
+    message.success('已升级为P0紧急工单');
+    modalApi.close();
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Modal title="升级优先级" class="w-[500px]">
+    <div class="upgrade-form">
+      <!-- 警告提示 -->
+      <Alert
+        type="warning"
+        show-icon
+        class="mb-4"
+        message="升级为P0紧急工单后，该工单将插队优先处理"
+      >
+        <template #icon>
+          <IconifyIcon icon="lucide:zap" class="text-orange-500" />
+        </template>
+      </Alert>
+
+      <!-- 工单信息 -->
+      <div class="mb-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-sm text-gray-500">工单编号</span>
+          <span class="font-medium">{{ orderCode }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-gray-500">当前优先级</span>
+          <div class="flex items-center gap-2">
+            <span class="text-gray-600 dark:text-gray-300">
+              {{ getPriorityText(currentPriority) }}
+            </span>
+            <IconifyIcon icon="lucide:arrow-right" class="text-gray-400" />
+            <span class="font-bold text-red-500">P0 (紧急)</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 表单 -->
+      <Form />
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.upgrade-form {
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+  }
+}
+</style>