diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/data.ts b/apps/web-antd/src/views/ops/cleaning/work-order/data.ts
index ad179a2cb..c5ca2d958 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/data.ts
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/data.ts
@@ -51,45 +51,10 @@ export const STATUS_TAB_OPTIONS = [
     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 },
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
index a6ba37e72..0fc3225dc 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
@@ -18,7 +18,6 @@ import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
 import {
-  Alert,
   Avatar,
   Button,
   Card,
@@ -43,11 +42,12 @@ import {
 } from '#/api/ops/cleaning';
 import { getOrderDetail } from '#/api/ops/order-center';
 
+import { usePriorityInfo } from '../../../work-order/data';
+import CleaningDetailExt from '../components/cleaning-detail-ext.vue';
 import {
   CLEANING_TYPE_TEXT_MAP,
   ORDER_TYPE_COLOR_MAP,
   ORDER_TYPE_TEXT_MAP,
-  PRIORITY_STYLE_MAP,
   STATUS_COLOR_MAP,
   STATUS_ICON_MAP,
   STATUS_TEXT_MAP,
@@ -295,10 +295,7 @@ const [CancelFormModal, cancelFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 获取优先级样式 */
-function getPriorityStyle(priority: number) {
-  return PRIORITY_STYLE_MAP[priority] || PRIORITY_STYLE_MAP[2];
-}
+const { getPriorityInfo } = usePriorityInfo();
 
 /** 计算作业时长 */
 const workDuration = computed(() => {
@@ -334,15 +331,6 @@ const isOvertime = computed(() => {
   );
 });
 
-/** 是否显示离岗警告 */
-const showLeaveWarning = computed(() => {
-  return (
-    order.value.status === 'ARRIVED' &&
-    badgeStatus.value &&
-    !badgeStatus.value.isInArea
-  );
-});
-
 /** 动态生成应该显示的状态步骤（根据 timeline 过滤） */
 const visibleSteps = computed(() => {
   // 必须显示的节点（主流程）
@@ -639,22 +627,18 @@ onUnmounted(stopPolling);
                   {{ STATUS_TEXT_MAP[order.status] }}
                 </Tag>
                 <span
-                  v-if="order.priority !== 2"
+                  v-if="order.priority != null"
                   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,
+                    'animate-pulse': Number(order.priority) === 0,
                   }"
+                  :style="getPriorityInfo(order.priority).style"
                 >
                   <IconifyIcon
-                    v-if="getPriorityStyle(order.priority)?.icon"
-                    :icon="getPriorityStyle(order.priority)?.icon || ''"
+                    v-if="getPriorityInfo(order.priority).icon"
+                    :icon="getPriorityInfo(order.priority).icon"
                   />
-                  {{ getPriorityStyle(order.priority)?.label }}
+                  {{ getPriorityInfo(order.priority).label }}
                 </span>
               </div>
               <div class="mt-1.5 flex items-center gap-4 text-sm text-gray-500">
@@ -852,26 +836,6 @@ onUnmounted(stopPolling);
         </div>
       </Card>
 
-      <!-- 离岗警告 -->
-      <Alert
-        v-if="showLeaveWarning"
-        type="warning"
-        show-icon
-        class="leave-warning mb-3"
-      >
-        <template #message>
-          <span class="font-medium">保洁员已离开作业区域</span>
-        </template>
-        <template #description>
-          <div class="flex items-center justify-between">
-            <span>检测到保洁员不在指定区域，请及时确认情况</span>
-            <Button size="small" type="primary" @click="handleVoiceNotify">
-              语音提醒
-            </Button>
-          </div>
-        </template>
-      </Alert>
-
       <Row :gutter="12">
         <!-- 左侧 -->
         <Col :span="16">
@@ -891,7 +855,7 @@ onUnmounted(stopPolling);
                 <span>作业进度</span>
               </div>
             </template>
-            <Row :gutter="16" align="middle">
+            <Row :gutter="24" align="middle">
               <Col :span="8">
                 <div class="progress-circle-wrapper">
                   <Progress
@@ -907,8 +871,8 @@ onUnmounted(stopPolling);
                               '100%': '#52c41a',
                             }
                     "
-                    :stroke-width="6"
-                    :size="100"
+                    :stroke-width="7"
+                    :size="130"
                   >
                     <template #format>
                       <div class="progress-inner">
@@ -1136,6 +1100,13 @@ onUnmounted(stopPolling);
               </Descriptions.Item>
             </Descriptions>
           </Card>
+
+          <!-- 保洁扩展信息 + 离岗警告 -->
+          <CleaningDetailExt
+            :order="order"
+            :badge-status="badgeStatus"
+            @voice-notify="handleVoiceNotify"
+          />
         </Col>
 
         <!-- 右侧 -->
@@ -1392,7 +1363,7 @@ onUnmounted(stopPolling);
 
               <Button
                 v-if="
-                  order.priority !== 0 &&
+                  Number(order.priority) !== 0 &&
                   !['COMPLETED', 'CANCELLED'].includes(order.status)
                 "
                 danger
@@ -1709,20 +1680,6 @@ onUnmounted(stopPolling);
   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%);
@@ -1739,50 +1696,52 @@ onUnmounted(stopPolling);
 }
 
 .progress-value {
-  font-size: 22px;
+  font-size: 26px;
   font-weight: 700;
   line-height: 1.2;
   color: #1677ff;
 }
 
 .progress-label {
-  font-size: 12px;
+  margin-top: 2px;
+  font-size: 13px;
   color: #8c8c8c;
 }
 
 .work-stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+  gap: 16px;
 }
 
 .stat-item {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   align-items: center;
-  padding: 10px 12px;
+  padding: 14px 16px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
 }
 
 .stat-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  font-size: 16px;
-  border-radius: 8px;
+  width: 38px;
+  height: 38px;
+  font-size: 18px;
+  border-radius: 10px;
 }
 
 .stat-label {
-  font-size: 12px;
+  margin-bottom: 2px;
+  font-size: 13px;
   color: #8c8c8c;
 }
 
 .stat-value {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
   color: #262626;
 }
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
index 190b5f44e..0225d7620 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
@@ -22,6 +22,7 @@ import dayjs from 'dayjs';
 
 import { getOrderPage } from '#/api/ops/order-center';
 
+import { usePriorityInfo } from '../../../work-order/data';
 import {
   ORDER_TYPE_COLOR_MAP,
   ORDER_TYPE_TEXT_MAP,
@@ -155,59 +156,11 @@ const queryParams = ref({
 
 /** 字典相关 */
 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,
-  };
-}
+const { getPriorityInfo } = usePriorityInfo();
 
 function getSourceTypeInfo(value: string) {
   const option = sourceTypeOptions.value.find((item) => item.value === value);
@@ -673,18 +626,19 @@ onMounted(() => {
     }
 
     .info-text {
+      flex: 1;
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: normal;
+      white-space: nowrap;
 
       &--muted {
-        font-style: italic;
         color: #bfbfbf;
       }
     }
 
     .order-code-styled {
+      flex: none;
       padding: 1px 6px;
       font-family: 'SF Mono', Monaco, monospace;
       font-size: 12px;
diff --git a/apps/web-antd/src/views/ops/work-order/data.ts b/apps/web-antd/src/views/ops/work-order/data.ts
index bf226979d..0d1718fcf 100644
--- a/apps/web-antd/src/views/ops/work-order/data.ts
+++ b/apps/web-antd/src/views/ops/work-order/data.ts
@@ -1,6 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { computed } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { useDictStore } from '@vben/stores';
+
 import { OpsOrderCenterApi } from '#/api/ops/order-center';
 
 /** 状态颜色映射 */
@@ -51,44 +56,56 @@ export const STATUS_TAB_OPTIONS = [
     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;
+/** 获取优先级信息（基于字典），返回 getPriorityInfo 函数 */
+export function usePriorityInfo() {
+  const dictStore = useDictStore();
+  const priorityOptions = computed(() =>
+    dictStore.getDictOptions(DICT_TYPE.OPS_ORDER_PRIORITY),
+  );
+
+  function getPriorityInfo(priority: number | string | undefined) {
+    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 (Number(priority) === 0) icon = 'solar:bolt-bold';
+    else if (Number(priority) === 1) icon = 'lucide:alert-triangle';
+    return { label: dictItem.label, style, icon };
   }
-> = {
-  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,
-  },
-};
+
+  return { getPriorityInfo };
+}
 
 /** 工单类型选项 */
 export const ORDER_TYPE_OPTIONS = [
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
index 030fa49e6..7e3e7ea6e 100644
--- a/apps/web-antd/src/views/ops/work-order/detail/index.vue
+++ b/apps/web-antd/src/views/ops/work-order/detail/index.vue
@@ -25,6 +25,7 @@ import {
   Descriptions,
   Divider,
   Empty,
+  Image,
   message,
   Row,
   Spin,
@@ -41,15 +42,16 @@ 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 CleaningWorkProgress from '../../cleaning/work-order/components/cleaning-work-progress.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,
+  usePriorityInfo,
 } from '../data';
 import AssignForm from '../modules/assign-form.vue';
 import CancelForm from '../modules/cancel-form.vue';
@@ -293,10 +295,7 @@ const [CancelFormModal, cancelFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 获取优先级样式 */
-function getPriorityStyle(priority: number) {
-  return PRIORITY_STYLE_MAP[priority] || PRIORITY_STYLE_MAP[2];
-}
+const { getPriorityInfo } = usePriorityInfo();
 
 /** 是否保洁工单 */
 const isCleanOrder = computed(() => order.value.orderType === 'CLEAN');
@@ -304,6 +303,41 @@ const isCleanOrder = computed(() => order.value.orderType === 'CLEAN');
 /** 是否安保工单 */
 const isSecurityOrder = computed(() => order.value.orderType === 'SECURITY');
 
+/** 作业进度是否可见（保洁工单 + 有扩展信息 + 已到岗或已完成） */
+const showWorkProgress = computed(() => {
+  return (
+    isCleanOrder.value &&
+    order.value.extInfo &&
+    ['ARRIVED', 'COMPLETED'].includes(order.value.status)
+  );
+});
+
+/** 工单关联图片（通用，从 extInfo 中提取） */
+const orderImages = computed(() => {
+  const ext = order.value.extInfo;
+  if (!ext) return [];
+  const images: string[] = [];
+  // 安保告警截图已在事件信息卡片中展示，此处不再重复
+  if (
+    !isSecurityOrder.value &&
+    (ext as OpsOrderCenterApi.SecurityExtInfo).imageUrl
+  ) {
+    images.push((ext as OpsOrderCenterApi.SecurityExtInfo).imageUrl!);
+  }
+  // 通用：附件图片
+  const extImages = (ext as OpsOrderCenterApi.CleaningExtInfo).images;
+  if (extImages) {
+    try {
+      const arr =
+        typeof extImages === 'string' ? JSON.parse(extImages) : extImages;
+      if (Array.isArray(arr)) images.push(...arr);
+    } catch {
+      // ignore
+    }
+  }
+  return images;
+});
+
 /** 动态生成应该显示的状态步骤（根据 timeline 过滤） */
 const visibleSteps = computed(() => {
   // 必须显示的节点（主流程）
@@ -570,6 +604,25 @@ onUnmounted(stopPolling);
             <div>
               <div class="flex items-center gap-2">
                 <span class="text-base font-semibold">{{ order.title }}</span>
+                <!-- 工单类型标签 -->
+                <Tag
+                  v-if="order.orderType"
+                  :color="ORDER_TYPE_COLOR_MAP[order.orderType]"
+                  class="status-tag"
+                >
+                  <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>
+                <!-- 状态标签 -->
                 <Tag :color="STATUS_COLOR_MAP[order.status]" class="status-tag">
                   <IconifyIcon
                     :icon="STATUS_ICON_MAP[order.status] || 'solar:circle-bold'"
@@ -577,23 +630,20 @@ onUnmounted(stopPolling);
                   />
                   {{ STATUS_TEXT_MAP[order.status] }}
                 </Tag>
+                <!-- 优先级标签 -->
                 <span
-                  v-if="order.priority !== 2"
+                  v-if="order.priority != null"
                   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,
+                    'animate-pulse': Number(order.priority) === 0,
                   }"
+                  :style="getPriorityInfo(order.priority).style"
                 >
                   <IconifyIcon
-                    v-if="getPriorityStyle(order.priority)?.icon"
-                    :icon="getPriorityStyle(order.priority)?.icon || ''"
+                    v-if="getPriorityInfo(order.priority).icon"
+                    :icon="getPriorityInfo(order.priority).icon"
                   />
-                  {{ getPriorityStyle(order.priority)?.label }}
+                  {{ getPriorityInfo(order.priority).label }}
                 </span>
               </div>
               <div class="mt-1.5 flex items-center gap-4 text-sm text-gray-500">
@@ -608,11 +658,53 @@ onUnmounted(stopPolling);
               </div>
             </div>
           </div>
-          <Tooltip title="刷新数据">
-            <Button size="small" shape="circle" @click="handleRefresh">
-              <IconifyIcon icon="ant-design:reload-outlined" />
-            </Button>
-          </Tooltip>
+          <!-- 右侧操作区 -->
+          <div class="header-actions">
+            <!-- 业务操作（非终态） -->
+            <template
+              v-if="
+                order.status !== 'COMPLETED' && order.status !== 'CANCELLED'
+              "
+            >
+              <Button
+                v-if="order.status === 'PENDING'"
+                type="primary"
+                size="small"
+                @click="handleAssign"
+              >
+                <IconifyIcon icon="solar:user-plus-bold-duotone" class="mr-1" />
+                分配执行人
+              </Button>
+              <CleaningActions
+                v-if="isCleanOrder"
+                :order="order"
+                @refresh="handleRefresh"
+              />
+              <Button
+                v-if="Number(order.priority) !== 0"
+                size="small"
+                danger
+                ghost
+                @click="handleUpgrade"
+              >
+                <IconifyIcon icon="solar:bolt-bold-duotone" class="mr-1" />
+                升级P0
+              </Button>
+              <Button size="small" danger ghost @click="handleCancel">
+                <IconifyIcon
+                  icon="solar:close-circle-bold-duotone"
+                  class="mr-1"
+                />
+                取消
+              </Button>
+              <Divider type="vertical" class="header-divider" />
+            </template>
+            <Tooltip title="刷新数据">
+              <Button size="small" shape="circle" @click="handleRefresh">
+                <IconifyIcon icon="ant-design:reload-outlined" />
+              </Button>
+            </Tooltip>
+          </div>
         </div>
       </Card>
 
@@ -791,18 +883,12 @@ onUnmounted(stopPolling);
         </div>
       </Card>
 
-      <!-- 类型扩展区：离岗警告 + 作业进度 / 事件概况 -->
-      <CleaningDetailExt
-        v-if="isCleanOrder"
-        :order="order"
-        :badge-status="badgeStatus"
-        @voice-notify="handleRefresh"
-      />
-      <SecurityDetailExt v-else-if="isSecurityOrder" :order="order" />
+      <!-- 安保扩展区 -->
+      <SecurityDetailExt v-if="isSecurityOrder" :order="order" />
 
-      <Row :gutter="12">
+      <Row :gutter="12" class="info-row">
         <!-- 左侧 -->
-        <Col :span="16">
+        <Col :span="showWorkProgress ? 17 : 24">
           <!-- 基础信息 -->
           <Card class="info-card mb-3">
             <template #title>
@@ -815,35 +901,11 @@ onUnmounted(stopPolling);
               </div>
             </template>
             <Descriptions
-              :column="2"
+              :column="3"
               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
@@ -861,6 +923,40 @@ onUnmounted(stopPolling);
                   }}
                 </span>
               </Descriptions.Item>
+              <Descriptions.Item v-if="order.triggerDeviceKey" label="触发设备">
+                <code class="device-code">{{ order.triggerDeviceKey }}</code>
+              </Descriptions.Item>
+              <!-- 执行人 -->
+              <Descriptions.Item label="执行人">
+                <div v-if="order.assigneeId" class="flex items-center gap-2">
+                  <Avatar :size="24" class="assignee-avatar">
+                    {{ order.assigneeName?.charAt(0) || '?' }}
+                  </Avatar>
+                  <span>{{ order.assigneeName || '未知' }}</span>
+                  <Tag
+                    v-if="isCleanOrder && badgeStatus"
+                    :color="
+                      isBusyStatus(badgeStatus.status)
+                        ? 'processing'
+                        : 'default'
+                    "
+                    size="small"
+                  >
+                    {{ getBadgeStatusText(badgeStatus.status) }}
+                  </Tag>
+                </div>
+                <div v-else class="flex items-center gap-2">
+                  <span class="text-gray-400">暂未分配</span>
+                  <Button
+                    type="link"
+                    size="small"
+                    class="p-0"
+                    @click="handleAssign"
+                  >
+                    立即分配
+                  </Button>
+                </div>
+              </Descriptions.Item>
               <Descriptions.Item label="创建时间">
                 <span class="flex items-center gap-1">
                   <IconifyIcon
@@ -900,258 +996,161 @@ onUnmounted(stopPolling);
                   {{ formatDateTime(order.updateTime) }}
                 </span>
               </Descriptions.Item>
-              <Descriptions.Item v-if="order.triggerDeviceKey" label="触发设备">
-                <code class="device-code">{{ order.triggerDeviceKey }}</code>
+              <!-- 工单描述（如有） -->
+              <Descriptions.Item
+                v-if="order.description"
+                label="工单描述"
+                :span="3"
+              >
+                <div class="desc-text">{{ order.description }}</div>
+              </Descriptions.Item>
+              <!-- 图片展示（如有） -->
+              <Descriptions.Item
+                v-if="orderImages.length > 0"
+                label="相关图片"
+                :span="3"
+              >
+                <div class="order-images">
+                  <Image.PreviewGroup>
+                    <Image
+                      v-for="(url, idx) in orderImages"
+                      :key="idx"
+                      :src="url"
+                      :alt="`工单图片 ${idx + 1}`"
+                      class="order-image-thumb"
+                      :width="120"
+                      :height="90"
+                      :style="{ objectFit: 'cover' }"
+                    />
+                  </Image.PreviewGroup>
+                </div>
               </Descriptions.Item>
             </Descriptions>
           </Card>
         </Col>
 
-        <!-- 右侧 -->
-        <Col :span="8">
-          <!-- 执行人 -->
-          <Card class="assignee-card mb-3">
+        <!-- 右侧：作业进度（仅与基础信息等高） -->
+        <Col v-if="showWorkProgress" :span="7">
+          <CleaningWorkProgress :order="order" class="work-progress-card" />
+        </Col>
+      </Row>
+
+      <!-- 保洁扩展信息 + 工牌信息 -->
+      <Row v-if="isCleanOrder" :gutter="12">
+        <Col :span="badgeStatus ? 17 : 24">
+          <CleaningDetailExt
+            :order="order"
+            :badge-status="badgeStatus"
+            @voice-notify="handleRefresh"
+          />
+        </Col>
+        <Col v-if="badgeStatus" :span="7">
+          <!-- 工牌信息 -->
+          <Card :body-style="{ padding: '12px' }" class="badge-card mb-3">
             <template #title>
               <div class="flex items-center gap-2">
                 <IconifyIcon
-                  icon="solar:user-bold-duotone"
+                  icon="solar:bluetooth-wave-bold-duotone"
                   class="text-blue-500"
                 />
-                <span>执行人</span>
+                <span>工牌信息</span>
+                <div class="pulse-dot"></div>
               </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 class="badge-stats-compact">
+              <!-- 电量 -->
+              <div class="badge-row">
+                <IconifyIcon
+                  icon="solar:battery-charge-bold-duotone"
+                  :style="{
+                    color: getBatteryColor(badgeStatus.batteryLevel),
+                  }"
+                />
+                <span class="badge-row-label">电量</span>
+                <div
+                  v-if="badgeStatus.batteryLevel != null"
+                  class="badge-row-value"
+                >
+                  <div class="battery-bar-sm">
+                    <div
+                      class="battery-fill"
+                      :style="{
+                        width: `${badgeStatus.batteryLevel}%`,
+                        backgroundColor: getBatteryColor(
+                          badgeStatus.batteryLevel,
+                        ),
+                      }"
+                    ></div>
                   </div>
-                  <div class="assignee-id">工号: {{ order.assigneeId }}</div>
+                  <span
+                    class="text-xs font-medium"
+                    :style="{
+                      color: getBatteryColor(badgeStatus.batteryLevel),
+                    }"
+                  >
+                    {{ badgeStatus.batteryLevel }}%
+                  </span>
                 </div>
-                <Tag
-                  v-if="isCleanOrder && badgeStatus"
-                  :color="
-                    isBusyStatus(badgeStatus.status) ? 'processing' : 'default'
+                <span v-else class="text-xs text-gray-400">未知</span>
+              </div>
+              <!-- 位置 -->
+              <div class="badge-row">
+                <IconifyIcon
+                  icon="solar:map-point-wave-bold-duotone"
+                  :class="
+                    badgeStatus.isInArea ? 'text-green-500' : 'text-orange-500'
                   "
-                  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>
+                />
+                <span class="badge-row-label">位置</span>
+                <div class="badge-row-value">
+                  <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 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">
+              <!-- 信号 -->
+              <div class="badge-row">
                 <IconifyIcon
-                  icon="solar:settings-bold-duotone"
+                  icon="solar:wifi-router-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"
+                <span class="badge-row-label">信号</span>
+                <div
+                  v-if="badgeStatus.rssi != null"
+                  class="badge-row-value signal-strength"
                 >
-                  <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"
-              >
+                  <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 class="badge-row">
                 <IconifyIcon
-                  icon="solar:close-circle-bold-duotone"
-                  class="mr-1"
+                  icon="solar:pulse-2-bold-duotone"
+                  class="text-green-500"
                 />
-                取消工单
-              </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>
+                <span class="badge-row-label">心跳</span>
+                <span class="badge-row-value text-sm">
+                  {{ formatRelativeTime(badgeStatus.lastHeartbeatTime) }}
+                </span>
+              </div>
             </div>
           </Card>
         </Col>
@@ -1457,82 +1456,22 @@ onUnmounted(stopPolling);
   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 {
+/* ========== 基础信息行：左右等高 ========== */
+.info-row :deep(> .ant-col) {
   display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.progress-inner {
-  text-align: center;
+.info-row .info-card {
+  flex: 1;
 }
 
-.progress-value {
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1.2;
-  color: #1677ff;
+.info-row :deep(.work-progress-card) {
+  flex: 1;
 }
 
-.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-row :deep(.work-progress-card .wp-card) {
+  height: 100%;
+  margin-bottom: 0;
 }
 
 /* ========== 信息卡片 ========== */
@@ -1667,59 +1606,54 @@ onUnmounted(stopPolling);
   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%);
+  box-shadow: 0 1px 4px 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;
+/* ========== 工单描述 ========== */
+.desc-text {
   font-size: 13px;
-  font-weight: 500;
-  color: #595959;
+  line-height: 1.8;
+  color: rgb(0 0 0 / 75%);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
 }
 
+/* ========== 工单图片 ========== */
+.order-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.order-image-thumb {
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: transform 0.2s;
+}
+
+.order-image-thumb:hover {
+  transform: scale(1.03);
+}
+
+/* ========== 头部操作区 ========== */
+.header-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-divider {
+  height: 20px;
+  margin: 0;
+}
+
+/* ========== 工牌信息卡片 ========== */
 .pulse-dot {
   width: 6px;
   height: 6px;
@@ -1729,41 +1663,36 @@ onUnmounted(stopPolling);
   animation: pulse 1.5s infinite;
 }
 
-.badge-stats {
+.badge-stats-compact {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
-.badge-stat-item {
+.badge-row {
   display: flex;
   gap: 8px;
   align-items: center;
+  font-size: 13px;
 }
 
-.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;
+.badge-row-label {
+  flex-shrink: 0;
+  width: 32px;
   font-size: 12px;
   color: #8c8c8c;
 }
 
-.battery-bar {
-  width: 100%;
+.badge-row-value {
+  display: flex;
+  flex: 1;
+  gap: 6px;
+  align-items: center;
+}
+
+.battery-bar-sm {
+  width: 60px;
   height: 5px;
-  margin-bottom: 2px;
   overflow: hidden;
   background: #e8e8e8;
   border-radius: 2px;
@@ -1775,11 +1704,6 @@ onUnmounted(stopPolling);
   transition: width 0.3s;
 }
 
-.battery-text {
-  font-size: 12px;
-  font-weight: 500;
-}
-
 .signal-strength {
   display: flex;
   gap: 3px;
@@ -1816,80 +1740,10 @@ onUnmounted(stopPolling);
   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 {
+  .progress-overview-card {
     background: var(--component-background);
   }
 
@@ -1906,10 +1760,6 @@ onUnmounted(stopPolling);
     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%);
@@ -1937,12 +1787,8 @@ onUnmounted(stopPolling);
     color: #a6a6a6;
   }
 
-  .badge-status-panel {
-    background: rgb(255 255 255 / 5%);
-  }
-
-  .no-assignee-icon {
-    background: rgb(255 255 255 / 5%);
+  .desc-text {
+    color: rgb(255 255 255 / 75%);
   }
 
   .cancelled-banner {
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
index 190b5f44e..ed075c153 100644
--- 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
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
@@ -28,6 +28,7 @@ import {
   STATUS_COLOR_MAP,
   STATUS_ICON_MAP,
   STATUS_TEXT_MAP,
+  usePriorityInfo,
 } from '../data';
 
 defineOptions({ name: 'WorkOrderCardView' });
@@ -155,59 +156,11 @@ const queryParams = ref({
 
 /** 字典相关 */
 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,
-  };
-}
+const { getPriorityInfo } = usePriorityInfo();
 
 function getSourceTypeInfo(value: string) {
   const option = sourceTypeOptions.value.find((item) => item.value === value);
@@ -316,9 +269,7 @@ defineExpose({
   },
 });
 
-onMounted(() => {
-  getList();
-});
+// 数据加载由父组件通过 expose 的 query/reload 方法统一触发
 </script>
 
 <template>
@@ -673,18 +624,19 @@ onMounted(() => {
     }
 
     .info-text {
+      flex: 1;
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: normal;
+      white-space: nowrap;
 
       &--muted {
-        font-style: italic;
         color: #bfbfbf;
       }
     }
 
     .order-code-styled {
+      flex: none;
       padding: 1px 6px;
       font-family: 'SF Mono', Monaco, monospace;
       font-size: 12px;