diff --git a/apps/web-antd/src/router/routes/modules/ops.ts b/apps/web-antd/src/router/routes/modules/ops.ts
index a6739690e..40f5bb36d 100644
--- a/apps/web-antd/src/router/routes/modules/ops.ts
+++ b/apps/web-antd/src/router/routes/modules/ops.ts
@@ -63,6 +63,26 @@ const routes: RouteRecordRaw[] = [
         component: () =>
           import('#/views/ops/cleaning/work-order/dashboard/index.vue'),
       },
+      // 工单中心详情（通用，支持所有工单类型）
+      {
+        path: 'work-order/detail/:id',
+        name: 'WorkOrderDetail',
+        meta: {
+          title: '工单详情',
+          activePath: '/ops/work-order',
+        },
+        component: () => import('#/views/ops/work-order/detail/index.vue'),
+      },
+      // 工单中心统计看板
+      {
+        path: 'work-order/dashboard',
+        name: 'WorkOrderDashboard',
+        meta: {
+          title: '统计看板',
+          activePath: '/ops/work-order',
+        },
+        component: () => import('#/views/ops/work-order/dashboard/index.vue'),
+      },
     ],
   },
 ];
diff --git a/apps/web-antd/src/views/ops/work-order/dashboard/index.vue b/apps/web-antd/src/views/ops/work-order/dashboard/index.vue
new file mode 100644
index 000000000..5273c205b
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/dashboard/index.vue
@@ -0,0 +1,1402 @@
+<script setup lang="ts">
+import type { ECOption } from '@vben/plugins/echarts';
+
+import {
+  nextTick,
+  onActivated,
+  onDeactivated,
+  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 { getDashboardStats } from '#/api/ops/order-center';
+
+defineOptions({ name: 'CleaningWorkOrderDashboard' });
+
+// ========== 保洁类型映射 ==========
+// eslint-disable-next-line no-unused-vars
+const _CLEANING_TYPE_MAP: Record<
+  string,
+  { color: string; icon: string; type: string }
+> = {
+  ROUTINE: { type: '日常保洁', icon: 'solar:broom-bold', color: '#1677ff' },
+  DEEP: { type: '深度保洁', icon: 'solar:multiply-bold', color: '#52c41a' },
+  SPOT: {
+    type: '专项清洁',
+    icon: 'solar:spray-bottle-bold',
+    color: '#faad14',
+  },
+  EMERGENCY: { type: '应急处理', icon: 'solar:flame-bold', color: '#ff4d4f' },
+};
+
+// ========== 数据类型定义 ==========
+interface DashboardStats {
+  // 基础统计
+  pendingCount: number;
+  inProgressCount: number;
+  completedTodayCount: number;
+  completedTotalCount: number;
+
+  // 趋势数据（7天）
+  trendData: {
+    completedData: number[];
+    createdData: number[];
+    dates: string[];
+  };
+
+  // 工单时段分布（24小时）
+  hourlyDistribution: {
+    data: number[];
+    hours: string[];
+  };
+
+  // 耗时趋势数据（7天）
+  timeTrendData: {
+    completionTimeData: number[];
+    dates: string[];
+    responseTimeData: number[];
+  };
+
+  // 工单状态分布
+  statusDistribution: Array<{ name: string; value: number }>;
+
+  // 时段热力图数据（近7天 x 24小时）
+  heatmapData: {
+    data: number[][]; // 7x24的二维数组
+    days: string[]; // 周一到周日
+    hours: string[]; // 0-23小时
+  };
+
+  // 功能类型工单排行
+  functionTypeRanking: Array<{
+    completed: number;
+    count: number;
+    functionType: string;
+    rate: number;
+  }>;
+
+  // 当月与上月工单趋势对比
+  monthlyTrendData?: {
+    currentMonth: { createdData: number[]; dates: string[] };
+    lastMonth: { createdData: number[]; dates: string[] };
+  };
+
+  // 工牌近7天队列数量统计
+  badgeQueueStats?: {
+    dates: string[];
+    queueData: number[];
+  };
+}
+
+// ========== 响应式数据 ==========
+const loading = ref(true);
+const chartLoading = ref(true);
+
+// 图表引用
+const trendChartRef = ref();
+const heatmapChartRef = ref();
+const timeTrendChartRef = ref();
+const statusChartRef = ref();
+const functionTypeRankingChartRef = ref();
+const badgeQueueChartRef = ref();
+
+const { renderEcharts: renderTrendChart } = useEcharts(trendChartRef);
+const { renderEcharts: renderHeatmapChart } = useEcharts(heatmapChartRef);
+const { renderEcharts: renderTimeTrendChart } = useEcharts(timeTrendChartRef);
+const { renderEcharts: renderStatusChart } = useEcharts(statusChartRef);
+const { renderEcharts: renderFunctionTypeRankingChart } = useEcharts(
+  functionTypeRankingChartRef,
+);
+const { renderEcharts: renderBadgeQueueChart } = useEcharts(badgeQueueChartRef);
+
+const statsData = ref<DashboardStats>({
+  pendingCount: 0,
+  inProgressCount: 0,
+  completedTodayCount: 0,
+  completedTotalCount: 0,
+  trendData: {
+    dates: [],
+    createdData: [],
+    completedData: [],
+  },
+  hourlyDistribution: {
+    hours: [],
+    data: [],
+  },
+  timeTrendData: {
+    dates: [],
+    responseTimeData: [],
+    completionTimeData: [],
+  },
+  statusDistribution: [],
+  heatmapData: {
+    days: [],
+    hours: [],
+    data: [],
+  },
+  functionTypeRanking: [],
+  monthlyTrendData: undefined,
+  badgeQueueStats: undefined,
+});
+
+// ========== 空数据（API失败时的fallback） ==========
+const EMPTY_STATS: DashboardStats = {
+  pendingCount: 0,
+  inProgressCount: 0,
+  completedTodayCount: 0,
+  completedTotalCount: 0,
+  trendData: { dates: [], createdData: [], completedData: [] },
+  hourlyDistribution: { hours: [], data: [] },
+  timeTrendData: { dates: [], responseTimeData: [], completionTimeData: [] },
+  statusDistribution: [],
+  heatmapData: { days: [], hours: [], data: [] },
+  functionTypeRanking: [],
+  monthlyTrendData: undefined,
+  badgeQueueStats: undefined,
+};
+
+// ========== 图表配置 ==========
+
+/**
+ * 工单趋势图表配置（当月 vs 上月新增工单对比）
+ */
+function getTrendChartOptions(): ECOption {
+  const monthly = statsData.value.monthlyTrendData;
+  // 如果没有月度对比数据，回退到原有7天数据
+  if (!monthly) {
+    const { trendData } = statsData.value;
+    return {
+      tooltip: { trigger: 'axis' },
+      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,
+          data: trendData.createdData,
+          itemStyle: { color: '#1677ff' },
+          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)' },
+              ],
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  // 使用日期中的"日"部分作为x轴（方便对比）
+  const currentDates = monthly.currentMonth.dates.map((d) => {
+    const parts = d.split('-');
+    return parts[2] || d;
+  });
+  const lastDates = monthly.lastMonth.dates.map((d) => {
+    const parts = d.split('-');
+    return parts[2] || d;
+  });
+  // 取最长的日期轴
+  const xData =
+    currentDates.length >= lastDates.length ? currentDates : lastDates;
+
+  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: xData,
+        axisLine: { lineStyle: { color: '#d9d9d9' } },
+        axisLabel: { color: '#8c8c8c', formatter: (val: string) => `${val}日` },
+      },
+    ],
+    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.35)' },
+              { offset: 1, color: 'rgba(22, 119, 255, 0.03)' },
+            ],
+          },
+        },
+        emphasis: { focus: 'series' },
+        data: monthly.currentMonth.createdData,
+        itemStyle: { color: '#1677ff' },
+        lineStyle: { width: 2.5 },
+      },
+      {
+        name: '上月新增',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        lineStyle: { type: 'dashed', width: 1.5 },
+        areaStyle: {
+          opacity: 0.06,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(147, 196, 255, 0.25)' },
+              { offset: 1, color: 'rgba(147, 196, 255, 0.03)' },
+            ],
+          },
+        },
+        emphasis: { focus: 'series' },
+        data: monthly.lastMonth.createdData,
+        itemStyle: { color: '#93c4fd' },
+      },
+    ],
+  };
+}
+
+/**
+ * 平均耗时趋势图表配置（双轴折线图）
+ */
+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 getStatusDistributionChartOptions(): ECOption {
+  const { statusDistribution } = statsData.value;
+  const STATUS_COLORS: Record<string, string> = {
+    待处理: '#faad14',
+    排队中: '#722ed1',
+    已派单: '#1677ff',
+    已到岗: '#13c2c2',
+    已完成: '#52c41a',
+    已取消: '#ff4d4f',
+    已暂停: '#8c8c8c',
+  };
+  const total = statusDistribution.reduce((sum, item) => sum + item.value, 0);
+  return {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(255, 255, 255, 0.96)',
+      borderColor: '#f0f0f0',
+      borderWidth: 1,
+      padding: [8, 12],
+      textStyle: { color: '#262626', fontSize: 13 },
+      formatter: (params: any) => {
+        const marker = `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${params.color};margin-right:6px;"></span>`;
+        return `${marker}${params.name}<br/><span style="font-size:16px;font-weight:600">${params.value}</span> 个 <span style="color:#8c8c8c;margin-left:4px">${params.percent}%</span>`;
+      },
+    },
+    legend: {
+      orient: 'vertical',
+      right: '4%',
+      top: 'center',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 14,
+      icon: 'circle',
+      textStyle: { fontSize: 12, color: '#595959' },
+    },
+    graphic: [
+      {
+        type: 'text',
+        left: '23%',
+        top: '38%',
+        style: {
+          text: `${total}`,
+          fontSize: 26,
+          fontWeight: '700',
+          fill: '#262626',
+          textAlign: 'center',
+        },
+      },
+      {
+        type: 'text',
+        left: '23%',
+        top: '55%',
+        style: {
+          text: '近7天工单',
+          fontSize: 11,
+          fill: '#bfbfbf',
+          textAlign: 'center',
+        },
+      },
+    ],
+    series: [
+      {
+        name: '工单状态分布',
+        type: 'pie',
+        radius: ['48%', '70%'],
+        center: ['25%', '50%'],
+        avoidLabelOverlap: false,
+        label: { show: false },
+        emphasis: {
+          scale: true,
+          scaleSize: 8,
+          label: { show: false },
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2,
+          borderRadius: 6,
+        },
+        data: statusDistribution.map((item) => ({
+          ...item,
+          itemStyle: {
+            color: STATUS_COLORS[item.name] || '#d9d9d9',
+          },
+        })),
+      },
+    ],
+  };
+}
+
+/**
+ * 时段热力图图表配置（7天x24小时）
+ * 对数变换 + RGB线性插值：低量区间色彩差异大，高量区间自动压缩
+ */
+function getHeatmapChartOptions(): ECOption {
+  const { heatmapData } = statsData.value;
+  const xAxisData = heatmapData.hours.map((_h, i) => i);
+  const yAxisData = heatmapData.days.map((_d, i) => i);
+
+  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]);
+    }
+  }
+
+  const maxVal = Math.max(1, ...data.map((d: number[]) => d[2] || 0));
+
+  // RGB线性插值生成颜色：0单灰色 → 最大值主蓝，基于对数比例
+  const COLOR_ZERO: [number, number, number] = [245, 245, 245]; // #f5f5f5
+  const COLOR_MAX: [number, number, number] = [22, 119, 255]; // #1677ff
+  const logMax = Math.log1p(maxVal);
+
+  function valueToColor(val: number): string {
+    if (val <= 0) return `rgb(${COLOR_ZERO.join(',')})`;
+    const t = Math.log1p(val) / logMax; // 0~1 对数比例
+    const r = Math.round(COLOR_ZERO[0] + (COLOR_MAX[0] - COLOR_ZERO[0]) * t);
+    const g = Math.round(COLOR_ZERO[1] + (COLOR_MAX[1] - COLOR_ZERO[1]) * t);
+    const b = Math.round(COLOR_ZERO[2] + (COLOR_MAX[2] - COLOR_ZERO[2]) * t);
+    return `rgb(${r},${g},${b})`;
+  }
+
+  // 为每个数据点计算精确颜色
+  const seriesData = data.map((d) => ({
+    value: d,
+    itemStyle: { color: valueToColor(d[2] || 0) },
+  }));
+
+  // 图例色带：采样生成渐变色阶
+  const legendSteps = 10;
+  const legendColors: string[] = [];
+  for (let i = 0; i <= legendSteps; i++) {
+    const val = (maxVal * i) / legendSteps;
+    legendColors.push(valueToColor(val));
+  }
+
+  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: '70%',
+      top: '5%',
+      left: '8%',
+      right: '3%',
+      bottom: '20%',
+    },
+    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: maxVal,
+      calculable: false,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: '2%',
+      text: [`${maxVal}`, '0'],
+      textStyle: { fontSize: 10, color: '#8c8c8c' },
+      itemWidth: 10,
+      itemHeight: 80,
+      inRange: { color: legendColors },
+      show: true,
+    },
+    series: [
+      {
+        name: '工单数量',
+        type: 'heatmap',
+        data: seriesData,
+        label: { show: false },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+          },
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * 区域类型排行图表配置
+ */
+function getFunctionTypeRankingChartOptions(): ECOption {
+  // 按工单数从低到高排序（ECharts水平柱状图yAxis从下往上，所以升序=视觉上从高到低）
+  const sorted = [...statsData.value.functionTypeRanking].toSorted(
+    (a, b) => a.count - b.count,
+  );
+  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: sorted.map((item) => item.functionType),
+      axisLabel: {
+        fontSize: 13,
+        color: '#595959',
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: sorted.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';
+  }
+}
+
+/**
+ * 工牌近7天队列数量统计图表配置
+ */
+function getBadgeQueueChartOptions(): ECOption {
+  const queue = statsData.value.badgeQueueStats;
+  if (!queue || queue.dates.length === 0) return {};
+  const maxVal = Math.max(...queue.queueData, 1);
+  return {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.96)',
+      borderColor: '#f0f0f0',
+      borderWidth: 1,
+      padding: [8, 12],
+      textStyle: { color: '#262626', fontSize: 13 },
+      formatter: (params: any) => {
+        const param = params[0];
+        return `<span style="color:#8c8c8c">${param.name}</span><br/><span style="font-size:16px;font-weight:600;color:#1677ff">${param.value}</span> <span style="color:#8c8c8c">个排队</span>`;
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: queue.dates,
+        axisLine: { lineStyle: { color: '#f0f0f0' } },
+        axisTick: { show: false },
+        axisLabel: { color: '#8c8c8c', fontSize: 11 },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '队列数',
+        nameTextStyle: { color: '#8c8c8c', fontSize: 12 },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: '#8c8c8c' },
+        splitLine: { lineStyle: { color: '#f5f5f5', type: 'dashed' } },
+      },
+    ],
+    series: [
+      {
+        name: '队列数量',
+        type: 'bar',
+        barWidth: '40%',
+        data: queue.queueData.map((val) => ({
+          value: val,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: val === maxVal ? '#0958d9' : '#1677ff' },
+                { offset: 1, color: val === maxVal ? '#4096ff' : '#91caff' },
+              ],
+            },
+            borderRadius: [6, 6, 0, 0],
+          },
+        })),
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 11,
+          fontWeight: '600',
+          color: '#1677ff',
+          formatter: (params: any) => (params.value > 0 ? params.value : ''),
+        },
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#003eb3' },
+                { offset: 1, color: '#0958d9' },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  };
+}
+
+// ========== 数据加载 ==========
+
+/** 加载统计数据 */
+async function loadStats() {
+  loading.value = true;
+  try {
+    const resp = await getDashboardStats();
+
+    statsData.value = {
+      pendingCount: resp.pendingCount,
+      inProgressCount: resp.inProgressCount,
+      completedTodayCount: resp.completedTodayCount,
+      completedTotalCount: resp.completedTotalCount,
+      trendData: resp.trendData,
+      hourlyDistribution: resp.hourlyDistribution,
+      timeTrendData: resp.timeTrendData,
+      statusDistribution: resp.statusDistribution,
+      heatmapData: resp.heatmapData,
+      functionTypeRanking: resp.functionTypeRanking,
+      monthlyTrendData: resp.monthlyTrendData,
+      badgeQueueStats: resp.badgeQueueStats,
+    };
+
+    // 渲染图表
+    chartLoading.value = false;
+    await nextTick();
+    renderTrendChart(getTrendChartOptions());
+    renderHeatmapChart(getHeatmapChartOptions());
+    renderTimeTrendChart(getTimeTrendChartOptions());
+    renderStatusChart(getStatusDistributionChartOptions());
+    renderFunctionTypeRankingChart(getFunctionTypeRankingChartOptions());
+    renderBadgeQueueChart(getBadgeQueueChartOptions());
+  } catch {
+    // API失败时使用空数据作为fallback
+    statsData.value = { ...EMPTY_STATS };
+  } finally {
+    loading.value = false;
+  }
+}
+
+// ========== 生命周期 ==========
+let refreshTimer: null | ReturnType<typeof setInterval> = null;
+
+function startPolling() {
+  stopPolling();
+  loadStats();
+  refreshTimer = setInterval(loadStats, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+onMounted(startPolling);
+onActivated(() => {
+  if (!refreshTimer) {
+    startPolling();
+  }
+});
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
+</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>
+
+      <!-- 第二行：工单趋势（当月vs上月） + 时段热力图（近7天） -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :lg="16">
+          <Card class="chart-card" title="工单趋势（当月 vs 上月）">
+            <template #extra>
+              <Tooltip title="展示当月与上月的新增工单对比">
+                <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="时段热力图（近7天）">
+            <template #extra>
+              <Tooltip title="展示近7天各时段的工单数量热力分布">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="heatmapChartRef" class="chart-container" />
+            </Spin>
+          </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="展示平均响应时间和平均完成时间的变化趋势">
+                <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="8">
+          <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="statusChartRef"
+                class="chart-container chart-container--medium"
+              />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第四行：工单排队趋势（近7天） + 区域类型排行 -->
+      <Row :gutter="[12, 12]">
+        <!-- 工单排队趋势（近7天） -->
+        <Col :xs="24" :md="12" :lg="12">
+          <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="badgeQueueChartRef" class="chart-container" />
+            </Spin>
+          </Card>
+        </Col>
+
+        <!-- 区域类型排行 -->
+        <Col :xs="24" :md="12" :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="functionTypeRankingChartRef"
+                class="chart-container"
+              />
+            </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/work-order/data.ts b/apps/web-antd/src/views/ops/work-order/data.ts
new file mode 100644
index 000000000..bf226979d
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/data.ts
@@ -0,0 +1,362 @@
+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', // 橙色 - 已暂停
+  RESUMED: '#52c41a', // 绿色 - 已恢复
+  COMPLETED: '#389e0d', // 深绿 - 已完成
+  CANCELLED: '#ff4d4f', // 红色 - 已取消
+};
+
+/** 状态文本映射 */
+export const STATUS_TEXT_MAP: Record<string, string> = {
+  PENDING: '待分配',
+  QUEUED: '排队中',
+  DISPATCHED: '已推送',
+  CONFIRMED: '已确认',
+  ARRIVED: '作业中',
+  PAUSED: '已暂停',
+  RESUMED: '已恢复',
+  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', // 已暂停
+  RESUMED: 'solar:play-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: 'lucide:info', // Added 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 },
+  { label: '视频告警', value: OpsOrderCenterApi.TriggerSource.VIDEO_ALARM },
+  { label: '门禁告警', value: OpsOrderCenterApi.TriggerSource.ACCESS_ALARM },
+  { label: '巡更告警', value: OpsOrderCenterApi.TriggerSource.PATROL_ALARM },
+  { label: '紧急按钮', value: OpsOrderCenterApi.TriggerSource.PANIC_BUTTON },
+];
+
+/** 触发来源文本映射 */
+export const TRIGGER_SOURCE_TEXT_MAP: Record<string, string> = {
+  IOT_BEACON: '蓝牙信标',
+  IOT_TRAFFIC: '客流阈值',
+  TRAFFIC: '客流阈值',
+  PEOPLE_FLOW: '客流阈值',
+  MANUAL: '手动创建',
+  VIDEO_ALARM: '视频告警',
+  ACCESS_ALARM: '门禁告警',
+  PATROL_ALARM: '巡更告警',
+  PANIC_BUTTON: '紧急按钮',
+};
+
+/** 列表表格列定义 */
+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/work-order/detail/index.vue b/apps/web-antd/src/views/ops/work-order/detail/index.vue
new file mode 100644
index 000000000..030fa49e6
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/detail/index.vue
@@ -0,0 +1,1955 @@
+<script setup lang="ts">
+import type { OpsCleaningApi } from '#/api/ops/cleaning';
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  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 {
+  Avatar,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Divider,
+  Empty,
+  message,
+  Row,
+  Spin,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import {
+  getBadgeRealtimeStatus,
+  getOrderBusinessLogs,
+  getOrderTimeline,
+} from '#/api/ops/cleaning';
+import { getOrderDetail } from '#/api/ops/order-center';
+
+import CleaningActions from '../../cleaning/work-order/components/cleaning-actions.vue';
+import CleaningDetailExt from '../../cleaning/work-order/components/cleaning-detail-ext.vue';
+import SecurityDetailExt from '../../security/work-order/components/security-detail-ext.vue';
+import {
+  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: 'WorkOrderDetail' });
+
+const route = useRoute();
+const router = useRouter();
+const { closeTabByKey } = useTabs();
+const id = route.params.id as string;
+
+// ========== 模拟数据开关 ==========
+const USE_MOCK_DATA = false;
+
+const loading = ref(true);
+const order = ref<OpsOrderCenterApi.OrderDetail>(
+  {} as OpsOrderCenterApi.OrderDetail,
+);
+const timeline = ref<OpsCleaningApi.TimelineItem[]>([]);
+const businessLogs = ref<OpsCleaningApi.BusinessLog[]>([]);
+const badgeStatus = ref<null | OpsCleaningApi.BadgeRealtimeStatus>(null);
+const refreshTimer = ref<number>();
+const showLogs = ref(false);
+
+// ========== 状态流转步骤定义 ==========
+const STATUS_STEPS = [
+  {
+    key: 'PENDING',
+    title: '待分配',
+    icon: 'solar:inbox-line-bold-duotone',
+    desc: '工单已创建，等待分配',
+  },
+  {
+    key: 'QUEUED',
+    title: '排队中',
+    icon: 'solar:clock-circle-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: OpsCleaningApi.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 = {
+  deviceId: 3001,
+  deviceKey: 'badge_zhangsan_001',
+  status: 'BUSY' as OpsCleaningApi.BadgeStatus,
+  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 isCleanOrder = computed(() => order.value.orderType === 'CLEAN');
+
+/** 是否安保工单 */
+const isSecurityOrder = computed(() => order.value.orderType === 'SECURITY');
+
+/** 动态生成应该显示的状态步骤（根据 timeline 过滤） */
+const visibleSteps = computed(() => {
+  // 必须显示的节点（主流程）
+  const requiredSteps = new Set([
+    'ARRIVED',
+    'COMPLETED',
+    'CONFIRMED',
+    'DISPATCHED',
+    'PENDING',
+  ]);
+
+  // timeline 中存在的状态
+  const timelineStatuses = new Set(timeline.value.map((t) => t.status));
+
+  // 当前状态
+  const currentStatus = order.value.status;
+
+  // 过滤出要显示的节点
+  return STATUS_STEPS.filter((step) => {
+    // 必须显示的节点
+    if (requiredSteps.has(step.key)) return true;
+
+    // QUEUED 节点：只有在 timeline 中明确存在时才显示
+    if (step.key === 'QUEUED') {
+      return timelineStatuses.has('QUEUED');
+    }
+
+    // 其他节点：timeline 中存在，或者是当前状态
+    return timelineStatuses.has(step.key) || currentStatus === step.key;
+  });
+});
+
+/** 计算当前状态步骤索引 */
+const currentStepIndex = computed(() => {
+  if (order.value.status === 'CANCELLED') return -1;
+  if (order.value.status === 'PAUSED') {
+    // 暂停状态显示在到岗后
+    return visibleSteps.value.findIndex((s) => s.key === 'ARRIVED');
+  }
+  const index = visibleSteps.value.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 (isCleanOrder.value && order.value.assigneeId) await loadBadgeStatus();
+    } else {
+      order.value = await getOrderDetail(id);
+      await Promise.all([loadTimeline(), loadBusinessLogs()]);
+      if (isCleanOrder.value && order.value.assigneeId) {
+        await loadBadgeStatus();
+      }
+    }
+  } catch (error) {
+    console.error('❌ 工单详情加载失败:', error);
+    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 {
+    if (USE_MOCK_DATA) {
+      businessLogs.value = [...MOCK_BUSINESS_LOGS];
+    } else {
+      const res = await getOrderBusinessLogs(id);
+      businessLogs.value = res.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 (error) {
+    console.error('❌ 工牌状态加载失败:', error);
+    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();
+}
+
+function getBatteryColor(level: null | number) {
+  if (level === null) return '#d9d9d9';
+  if (level <= 20) return '#f5222d';
+  if (level <= 50) return '#fa8c16';
+  return '#52c41a';
+}
+
+/** 获取工牌状态文本（兼容大小写） */
+function getBadgeStatusText(status: string) {
+  const upperStatus = status?.toUpperCase();
+  switch (upperStatus) {
+    case 'BUSY': {
+      return '作业中';
+    }
+    case 'IDLE': {
+      return '空闲';
+    }
+    case 'OFFLINE': {
+      return '离线';
+    }
+    case 'PAUSED': {
+      return '暂停';
+    }
+    default: {
+      return status || '未知';
+    }
+  }
+}
+
+/** 判断是否为忙碌状态（兼容大小写） */
+function isBusyStatus(status: string) {
+  return status?.toUpperCase() === 'BUSY';
+}
+
+function startPolling() {
+  stopPolling();
+  refreshTimer.value = window.setInterval(() => {
+    if (
+      isCleanOrder.value &&
+      order.value.status === 'ARRIVED' &&
+      order.value.assigneeId
+    )
+      loadBadgeStatus();
+  }, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value);
+    refreshTimer.value = null;
+  }
+}
+
+onMounted(async () => {
+  if (!id && !USE_MOCK_DATA) {
+    message.warning('参数错误');
+    handleBack();
+    return;
+  }
+  await loadOrderDetail();
+  startPolling();
+});
+
+onActivated(async () => {
+  if (!refreshTimer.value) {
+    await loadOrderDetail();
+    startPolling();
+  }
+});
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
+</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-nodes">
+            <!-- 进度线（背景 + 填充） -->
+            <div class="progress-line">
+              <div
+                class="progress-line-fill"
+                :class="{ 'line-all-completed': order.status === 'COMPLETED' }"
+                :style="{
+                  width: `${Math.max(0, (currentStepIndex / (visibleSteps.length - 1)) * 100)}%`,
+                }"
+              ></div>
+            </div>
+            <div
+              v-for="(step, index) in visibleSteps"
+              :key="step.key"
+              class="progress-node"
+              :class="{
+                'node-completed': index < currentStepIndex,
+                'node-current':
+                  index === currentStepIndex &&
+                  !['CANCELLED', 'COMPLETED'].includes(order.status),
+                'node-completed-current':
+                  index === currentStepIndex && order.status === 'COMPLETED',
+                '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 ||
+                  (index === currentStepIndex && order.status === 'COMPLETED')
+                "
+                class="node-time"
+              >
+                {{
+                  timeline.find((t) => t.status === step.key)?.time
+                    ? formatRelativeTime(
+                        timeline.find((t) => t.status === step.key)?.time || '',
+                      )
+                    : step.key === 'PENDING'
+                      ? formatRelativeTime(order.createTime)
+                      : step.key === 'COMPLETED' && order.endTime
+                        ? formatRelativeTime(order.endTime)
+                        : ''
+                }}
+              </div>
+              <div
+                v-else-if="
+                  index === currentStepIndex &&
+                  order.status !== 'CANCELLED' &&
+                  order.status !== 'COMPLETED'
+                "
+                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-line">
+                    <span
+                      class="log-simple-title"
+                      :style="{ color: getLogTypeConfig(log.type).color }"
+                    >
+                      {{ log.title }}
+                    </span>
+                    <span v-if="log.content" class="log-simple-msg">{{
+                      log.content
+                    }}</span>
+                  </span>
+                  <span class="log-simple-time">{{
+                    formatRelativeTime(log.time)
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Empty
+            v-else
+            description="暂无日志"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            class="logs-empty"
+          />
+        </div>
+      </Card>
+
+      <!-- 类型扩展区：离岗警告 + 作业进度 / 事件概况 -->
+      <CleaningDetailExt
+        v-if="isCleanOrder"
+        :order="order"
+        :badge-status="badgeStatus"
+        @voice-notify="handleRefresh"
+      />
+      <SecurityDetailExt v-else-if="isSecurityOrder" :order="order" />
+
+      <Row :gutter="12">
+        <!-- 左侧 -->
+        <Col :span="16">
+          <!-- 基础信息 -->
+          <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="
+                      isSecurityOrder
+                        ? 'solar:shield-warning-bold-duotone'
+                        : isCleanOrder
+                          ? 'solar:broom-bold-duotone'
+                          : 'solar:wrench-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="
+                      isSecurityOrder
+                        ? 'solar:shield-warning-bold-duotone'
+                        : 'solar:bluetooth-wave-bold-duotone'
+                    "
+                    :class="isSecurityOrder ? 'text-red-400' : 'text-blue-400'"
+                  />
+                  {{
+                    TRIGGER_SOURCE_TEXT_MAP[
+                      order.triggerSource || order.sourceType || ''
+                    ] || '-'
+                  }}
+                </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.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.Item v-if="order.endTime" label="完成时间">
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:check-read-bold-duotone"
+                    class="text-blue-400"
+                  />
+                  {{ formatDateTime(order.endTime) }}
+                </span>
+              </Descriptions.Item>
+              <Descriptions.Item
+                v-if="order.updateTime && order.endTime !== order.updateTime"
+                label="更新时间"
+              >
+                <span class="flex items-center gap-1">
+                  <IconifyIcon
+                    icon="solar:refresh-circle-bold-duotone"
+                    class="text-gray-400"
+                  />
+                  {{ formatDateTime(order.updateTime) }}
+                </span>
+              </Descriptions.Item>
+              <Descriptions.Item v-if="order.triggerDeviceKey" label="触发设备">
+                <code class="device-code">{{ order.triggerDeviceKey }}</code>
+              </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.assigneeId">
+              <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="isCleanOrder && badgeStatus"
+                  :color="
+                    isBusyStatus(badgeStatus.status) ? 'processing' : 'default'
+                  "
+                  class="status-badge"
+                >
+                  {{ getBadgeStatusText(badgeStatus.status) }}
+                </Tag>
+              </div>
+
+              <!-- 工牌状态（仅保洁工单） -->
+              <div
+                v-if="isCleanOrder && 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>
+                      <div class="flex items-center gap-2">
+                        <Tag
+                          :color="badgeStatus.isInArea ? 'success' : 'warning'"
+                          size="small"
+                        >
+                          {{ badgeStatus.isInArea ? '在区域内' : '已离开' }}
+                        </Tag>
+                        <span
+                          v-if="badgeStatus.areaName"
+                          class="text-xs text-gray-500"
+                        >
+                          {{ badgeStatus.areaName }}
+                        </span>
+                      </div>
+                    </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 v-if="badgeStatus.batteryLevel != null">
+                        <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>
+                      <span v-else class="text-xs text-gray-400">未知</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
+                        v-if="badgeStatus.rssi != null"
+                        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>
+                      <span v-else class="text-xs text-gray-400">未知</span>
+                    </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 v-if="order.status !== 'COMPLETED'" 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>
+
+              <!-- 类型专有操作（已推送 / 作业中状态） -->
+              <CleaningActions
+                v-if="isCleanOrder"
+                :order="order"
+                @refresh="handleRefresh"
+              />
+
+              <!-- 通用操作：取消（非终态） -->
+              <Button
+                v-if="
+                  order.status !== 'PENDING' &&
+                  !['COMPLETED', 'CANCELLED'].includes(order.status)
+                "
+                danger
+                block
+                class="action-btn"
+                @click="handleCancel"
+              >
+                <IconifyIcon
+                  icon="solar:close-circle-bold-duotone"
+                  class="mr-1"
+                />
+                取消工单
+              </Button>
+
+              <!-- 通用操作：升级优先级 -->
+              <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 72px;
+  overflow: hidden;
+}
+
+.progress-nodes {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress-line {
+  position: absolute;
+  top: 16px;
+  right: 0;
+  left: 0;
+  z-index: 0;
+  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;
+
+  &.line-all-completed {
+    background: #52c41a;
+  }
+}
+
+.progress-node {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  width: 0;
+  overflow: visible;
+  white-space: nowrap;
+}
+
+.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-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-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%);
+}
+
+/* 已完成的当前节点（绿色覆盖蓝色） */
+.progress-node.node-completed-current .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%);
+  animation: none;
+}
+
+.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-completed .node-time {
+  color: #52c41a;
+}
+
+.node-completed-current .node-label {
+  color: #52c41a;
+}
+
+.node-completed-current .node-time {
+  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;
+  font-weight: 500;
+  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: 0;
+  margin-top: 12px;
+  border-top: 1px dashed #e8e8e8;
+  animation: slide-down 0.2s ease;
+}
+
+.logs-simple-list {
+  max-height: 280px;
+  padding: 4px 4px 0;
+  overflow: hidden auto;
+}
+
+.log-simple-item {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding: 8px 10px;
+  cursor: default;
+  border-radius: 6px;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background: #f5f5f5;
+  }
+
+  &:last-child .log-simple-line {
+    display: none;
+  }
+}
+
+.log-simple-left {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  align-items: center;
+  width: 12px;
+  padding: 8px 0;
+  margin: -8px 0;
+}
+
+.log-simple-dot {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px #fff;
+}
+
+.log-simple-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background: #e8e8e8;
+  transform: translateX(-50%);
+}
+
+.log-simple-item:first-child .log-simple-line {
+  top: 22px;
+}
+
+.log-simple-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.log-simple-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 20px;
+}
+
+.log-simple-title-line {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+
+.log-simple-title {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.log-simple-msg {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: #8c8c8c;
+  white-space: nowrap;
+}
+
+.log-simple-time {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #bfbfbf;
+}
+
+.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/work-order/index.vue b/apps/web-antd/src/views/ops/work-order/index.vue
new file mode 100644
index 000000000..b35d73f12
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/index.vue
@@ -0,0 +1,863 @@
+<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 AreaFilterDrawer from '../components/AreaFilterDrawer.vue';
+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: 'WorkOrderCenter' });
+
+const router = useRouter();
+const viewMode = ref<'card' | 'list'>('card');
+const activeTab = ref('ALL');
+const showAdvancedFilter = ref(false);
+const showAreaFilter = ref(false);
+const selectedAreaId = ref<number | undefined>(undefined);
+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: '',
+  areaId: undefined as number | undefined,
+});
+
+/** 搜索 */
+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: '',
+    areaId: undefined,
+  };
+  selectedAreaId.value = undefined;
+  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);
+  if (tabConfig) {
+    queryParams.value.status = tabConfig.statuses 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: 'WorkOrderDetail', 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({
+      badgeId: 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 handleAreaConfirm(id: number | undefined) {
+  selectedAreaId.value = id;
+  queryParams.value.areaId = id;
+  handleSearch();
+}
+
+/** 处理统计卡片点击 */
+function handleStatClick(statKey: string) {
+  // 重置筛选条件
+  queryParams.value = {
+    orderType: undefined,
+    status: undefined,
+    priority: undefined,
+    orderCode: '',
+    title: '',
+    areaId: queryParams.value.areaId,
+  };
+
+  switch (statKey) {
+    case 'completedTodayCount': {
+      queryParams.value.status = [
+        'COMPLETED',
+      ] as OpsOrderCenterApi.OrderStatus[];
+      break;
+    }
+    case 'inProgressCount': {
+      queryParams.value.status = [
+        'DISPATCHED',
+        'CONFIRMED',
+        'ARRIVED',
+        'QUEUED',
+      ];
+      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 };
+        }) => {
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams.value,
+          };
+
+          // 处理状态数组
+          // 如果后端接收 List<String>，通常不需要手动 join(',')，直接传数组即可
+          // axios/requestClient 会自动处理为 status=A&status=B 的形式
+          // 这里移除 .join(',') 的逻辑，直接保留数组
+
+          return await getOrderPage(params);
+        },
+      },
+    },
+    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" />
+
+    <!-- 区域筛选抽屉 -->
+    <AreaFilterDrawer
+      v-model:open="showAreaFilter"
+      v-model:model-value="selectedAreaId"
+      @confirm="handleAreaConfirm"
+    />
+
+    <!-- 快速统计栏 -->
+    <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"
+            :class="{ 'action-btn--active': selectedAreaId !== undefined }"
+            @click="showAreaFilter = true"
+          >
+            <IconifyIcon icon="solar:map-point-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/work-order/modules/assign-form.vue b/apps/web-antd/src/views/ops/work-order/modules/assign-form.vue
new file mode 100644
index 000000000..08415d341
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/modules/assign-form.vue
@@ -0,0 +1,227 @@
+<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 { getBadgeStatusList } 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 loadBadges();
+    }
+  },
+  onConfirm: handleSubmit,
+});
+
+const orderId = ref<number>();
+const orderCode = ref<string>('');
+const loading = ref(false);
+const badgeLoading = ref(false);
+const badgeList = ref<OpsCleaningApi.BadgeStatusItem[]>([]);
+const selectedBadgeId = ref<number>();
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      fieldName: 'remark',
+      label: '派单备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入派单备注（选填）',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 加载工牌列表 */
+async function loadBadges() {
+  badgeLoading.value = true;
+  try {
+    const res = await getBadgeStatusList();
+    badgeList.value = res || [];
+  } catch {
+    badgeList.value = [];
+  } finally {
+    badgeLoading.value = false;
+  }
+}
+
+/** 选择工牌 */
+function selectBadge(badge: OpsCleaningApi.BadgeStatusItem) {
+  selectedBadgeId.value = badge.deviceId;
+}
+
+/** 获取状态颜色 */
+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 (!selectedBadgeId.value) {
+    message.warning('请选择执行工牌');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const formData = await formApi.getValues();
+    await assignOrder({
+      orderId: orderId.value!,
+      assigneeId: selectedBadgeId.value,
+      remark: formData.remark,
+    });
+    message.success('派单成功');
+    modalApi.close();
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 可用工牌（优先显示空闲） */
+const sortedBadges = computed(() => {
+  return [...badgeList.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="badgeLoading">
+          <div
+            v-if="sortedBadges.length > 0"
+            class="badge-grid grid max-h-64 gap-3 overflow-y-auto"
+          >
+            <Card
+              v-for="badge in sortedBadges"
+              :key="badge.deviceId"
+              size="small"
+              class="badge-card cursor-pointer transition-all"
+              :class="[
+                selectedBadgeId === badge.deviceId
+                  ? 'border-primary ring-2 ring-primary/20'
+                  : 'hover:border-gray-300',
+                badge.status === 'OFFLINE' ? 'opacity-50' : '',
+              ]"
+              @click="selectBadge(badge)"
+            >
+              <div class="flex items-center gap-3">
+                <Badge :color="getStatusColor(badge.status)" :offset="[-4, 28]">
+                  <Avatar size="small" class="bg-blue-500">
+                    {{ badge.deviceKey?.charAt(0) || '?' }}
+                  </Avatar>
+                </Badge>
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center justify-between">
+                    <span class="truncate font-medium">{{
+                      badge.deviceKey
+                    }}</span>
+                    <span
+                      class="ml-2 text-xs"
+                      :style="{ color: getStatusColor(badge.status) }"
+                    >
+                      {{ getStatusText(badge.status) }}
+                    </span>
+                  </div>
+                  <div
+                    class="mt-1 flex items-center justify-between text-xs text-gray-400"
+                  >
+                    <span>{{ badge.currentAreaName || '未知区域' }}</span>
+                    <span
+                      :style="{ color: getBatteryColor(badge.batteryLevel) }"
+                    >
+                      {{ badge.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 {
+  .badge-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .badge-card {
+    border-radius: 8px;
+
+    :deep(.ant-card-body) {
+      padding: 12px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
new file mode 100644
index 000000000..190b5f44e
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
@@ -0,0 +1,865 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { useDictStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Dropdown,
+  Empty,
+  Menu,
+  Pagination,
+  Popconfirm,
+  Row,
+  Spin,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { getOrderPage } from '#/api/ops/order-center';
+
+import {
+  ORDER_TYPE_COLOR_MAP,
+  ORDER_TYPE_TEXT_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 = false;
+
+// 模拟工单数据
+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: 8,
+});
+
+/** 字典相关 */
+const dictStore = useDictStore();
+const priorityOptions = computed(() =>
+  dictStore.getDictOptions(DICT_TYPE.OPS_ORDER_PRIORITY),
+);
+const sourceTypeOptions = computed(() =>
+  dictStore.getDictOptions(DICT_TYPE.OPS_TRIGGER_SOURCE),
+);
+
+/** 获取优先级信息 */
+function getPriorityInfo(priority: number) {
+  const dictItem = priorityOptions.value.find(
+    (item) => item.value === String(priority),
+  );
+  if (!dictItem) {
+    return {
+      label: `P${priority}`,
+      style: { color: '#8c8c8c', backgroundColor: '#f5f5f5' },
+      icon: 'lucide:info',
+    };
+  }
+
+  // 映射颜色类型到样式
+  let style = { color: '#8c8c8c', backgroundColor: '#f5f5f5' };
+  switch (dictItem.colorType) {
+    case 'danger': {
+      style = { color: '#ff4d4f', backgroundColor: '#fff1f0' };
+      break;
+    }
+    case 'info': {
+      style = { color: '#1677ff', backgroundColor: '#e6f4ff' };
+      break;
+    }
+    case 'success': {
+      style = { color: '#52c41a', backgroundColor: '#f6ffed' };
+      break;
+    }
+    case 'warning': {
+      style = { color: '#fa8c16', backgroundColor: '#fff7e6' };
+      break;
+    }
+    // No default
+  }
+
+  // 图标映射 (硬编码辅助)
+  let icon = 'lucide:info';
+  if (priority === 0) icon = 'solar:bolt-bold';
+  else if (priority === 1) icon = 'lucide:alert-triangle';
+
+  return {
+    label: dictItem.label,
+    style,
+    icon,
+  };
+}
+
+function getSourceTypeInfo(value: string) {
+  const option = sourceTypeOptions.value.find((item) => item.value === value);
+  if (!option) return { label: value, color: 'default' };
+
+  // 优先使用字典配置的 cssClass 作为颜色 (如果匹配 Ant Design Tag 的预设颜色)
+  // 或者如果你的字典有专门的 color 字段也可以在这里处理
+  if (option.cssClass) {
+    return { label: option.label, color: option.cssClass };
+  }
+
+  let color = 'default';
+  switch (option.colorType) {
+    case 'danger': {
+      color = 'error';
+      break;
+    }
+    case 'info': {
+      color = 'default';
+      break;
+    }
+    case 'primary': {
+      color = 'processing';
+      break;
+    }
+    case 'success': {
+      color = 'success';
+      break;
+    }
+    case 'warning': {
+      color = 'warning';
+      break;
+    }
+    default: {
+      color = option.colorType || 'default';
+    }
+  }
+  return { label: option.label, color };
+}
+
+/** 获取工单列表 */
+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 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: Date | string) {
+  if (!time) return '-';
+
+  try {
+    const date = dayjs(time);
+    if (!date.isValid()) {
+      return '-';
+    }
+
+    // 格式化为 YYYY-MM-DD HH:mm:ss
+    return date.format('YYYY-MM-DD HH:mm:ss');
+  } catch {
+    return '-';
+  }
+}
+
+defineExpose({
+  reload: getList,
+  query: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+});
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="work-order-card-view">
+    <!-- 工单卡片列表 -->
+    <Spin :spinning="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
+                class="priority-tag"
+                :style="getPriorityInfo(item.priority).style"
+              >
+                <IconifyIcon
+                  v-if="getPriorityInfo(item.priority).icon"
+                  :icon="getPriorityInfo(item.priority).icon"
+                />
+                {{ getPriorityInfo(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:bill-list-bold-duotone"
+                    class="info-icon"
+                  />
+                  <span class="info-text order-code-styled">
+                    {{ item.orderCode }}
+                  </span>
+                </div>
+
+                <!-- 位置信息 -->
+                <div class="info-row">
+                  <IconifyIcon
+                    icon="solar:map-point-bold-duotone"
+                    class="info-icon"
+                  />
+                  <span class="info-text location-text">
+                    {{ item.location || '未指定位置' }}
+                  </span>
+                </div>
+
+                <!-- 执行人 -->
+                <div class="info-row">
+                  <IconifyIcon
+                    icon="solar:user-bold-duotone"
+                    class="info-icon"
+                  />
+                  <span
+                    v-if="item.assigneeName"
+                    class="info-text assignee-text"
+                  >
+                    {{ item.assigneeName }}
+                  </span>
+                  <span v-else class="info-text info-text--muted">待分配</span>
+                </div>
+
+                <!-- 触发来源 -->
+                <div v-if="item.sourceType" class="info-row">
+                  <IconifyIcon
+                    icon="solar:radar-bold-duotone"
+                    class="info-icon"
+                  />
+                  <Tag
+                    :color="getSourceTypeInfo(item.sourceType).color"
+                    class="source-tag"
+                    :bordered="false"
+                  >
+                    {{ getSourceTypeInfo(item.sourceType).label }}
+                  </Tag>
+                </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="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" />
+    </Spin>
+
+    <!-- 分页 -->
+    <div v-if="list.length > 0" class="pagination-wrapper">
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        :page-size="8"
+        :total="total"
+        :show-total="(t) => `共 ${t} 条`"
+        size="small"
+        show-quick-jumper
+        @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: 100%;
+    min-height: 200px;
+    padding: 12px;
+    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: 8px;
+  }
+
+  .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 {
+      animation: pulse 2s infinite;
+    }
+  }
+
+  // 主体
+  .card-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .card-title {
+    display: -webkit-box;
+    margin: 0 0 8px;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.5;
+    color: #262626;
+    -webkit-box-orient: vertical;
+  }
+
+  .info-rows {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .info-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 13px;
+    color: #595959;
+
+    .info-icon {
+      flex-shrink: 0;
+      font-size: 15px;
+      color: #8c8c8c;
+    }
+
+    .info-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: normal;
+
+      &--muted {
+        font-style: italic;
+        color: #bfbfbf;
+      }
+    }
+
+    .order-code-styled {
+      padding: 1px 6px;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 12px;
+      color: #595959;
+      background: #f5f5f5;
+      border-radius: 4px;
+    }
+
+    .location-text {
+      font-weight: 500;
+      color: #262626;
+    }
+
+    .assignee-text {
+      font-weight: 500;
+      color: #1677ff;
+    }
+
+    .assignee-avatar {
+      flex-shrink: 0;
+      font-size: 10px !important;
+      line-height: 16px !important;
+      color: #fff;
+      background: #1677ff;
+    }
+
+    .source-tag {
+      margin: 0;
+      font-size: 11px;
+      line-height: 18px;
+      border: none;
+    }
+  }
+
+  // 底部区域
+  .card-footer {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 8px;
+    margin-top: 10px;
+    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/work-order/modules/stats-bar.vue b/apps/web-antd/src/views/ops/work-order/modules/stats-bar.vue
new file mode 100644
index 000000000..d93399478
--- /dev/null
+++ b/apps/web-antd/src/views/ops/work-order/modules/stats-bar.vue
@@ -0,0 +1,486 @@
+<script setup lang="ts">
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { onActivated, onDeactivated, 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 = false;
+
+/** 扩展的统计数据接口 */
+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,
+  onlineBadgeCount: 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,
+  onlineBadgeCount: 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;
+
+function startPolling() {
+  stopPolling();
+  loadStats();
+  refreshTimer = setInterval(loadStats, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = 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),
+        onlineBadgeCount:
+          MOCK_STATS.onlineBadgeCount + 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(startPolling);
+onActivated(() => {
+  // 首次 mount 时 onActivated 也会触发，此时 refreshTimer 已存在，跳过
+  if (!refreshTimer) {
+    startPolling();
+  }
+});
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
+
+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.onlineBadgeCount }}
+                </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/work-order/modules/upgrade-priority-form.vue b/apps/web-antd/src/views/ops/work-order/modules/upgrade-priority-form.vue
new file mode 100644
index 000000000..5f2813780
--- /dev/null
+++ b/apps/web-antd/src/views/ops/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>