feat(M08-B): 补任务详情照片预览

admin/src/components/CleaningTasksPanel.vue

@@ -90,6 +90,7 @@
       <el-table-column label="操作" width="270" fixed="right">
         <template #default="{ row }">
           <div class="row-actions">
+            <el-button size="small" :icon="ListChecks" @click="openDetail(row)">详情</el-button>
             <el-button size="small" :icon="UserPlus" @click="openAssign(row)">指派</el-button>
             <el-button size="small" :icon="Users" @click="openMembers(row)">成员</el-button>
             <el-button
@@ -250,6 +251,51 @@
       <el-button @click="memberDialog.open = false">关闭</el-button>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="detailDialog.open" title="保洁任务详情" width="760px">
+    <div v-if="detailDialog.task" class="dialog-stack">
+      <div class="detail-grid">
+        <span>任务号<strong>{{ detailDialog.task.taskNo }}</strong></span>
+        <span>状态<strong>{{ detailDialog.task.status }}</strong></span>
+        <span>奖励<strong>{{ money(detailDialog.task.rewardCents) }}</strong></span>
+        <span>保洁员<strong>{{ compactText(detailDialog.task.cleanerUserId) }}</strong></span>
+      </div>
+      <el-descriptions :column="2" size="small" border>
+        <el-descriptions-item label="门店房间">
+          {{ detailDialog.task.storeName }} · {{ detailDialog.task.roomName || detailDialog.task.roomNo }}
+        </el-descriptions-item>
+        <el-descriptions-item label="订单">
+          {{ compactText(detailDialog.task.orderNo) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="要求" :span="2">
+          {{ compactText(detailDialog.task.requirement) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="驳回原因" :span="2">
+          {{ compactText(detailDialog.task.rejectReason) }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <div class="timeline-grid">
+        <span>领取<strong>{{ shortDate(detailDialog.task.claimedAt) }}</strong></span>
+        <span>开始<strong>{{ shortDate(detailDialog.task.startedAt) }}</strong></span>
+        <span>提交<strong>{{ shortDate(detailDialog.task.submittedAt) }}</strong></span>
+        <span>完成<strong>{{ shortDate(detailDialog.task.completedAt) }}</strong></span>
+      </div>
+      <div class="photo-grid" v-if="detailDialog.task.photoUrls.length">
+        <el-image
+          v-for="url in detailDialog.task.photoUrls"
+          :key="url"
+          :src="url"
+          fit="cover"
+          :preview-src-list="detailDialog.task.photoUrls"
+          preview-teleported
+        />
+      </div>
+      <el-empty v-else description="暂无保洁照片" :image-size="80" />
+    </div>
+    <template #footer>
+      <el-button @click="detailDialog.open = false">关闭</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -258,6 +304,7 @@ import {
   BadgeCheck,
   Check,
   Image,
+  ListChecks,
   RefreshCw,
   RotateCcw,
   Search,
@@ -311,6 +358,10 @@ const filterDraft = reactive({ storeId: props.filters.storeId, cleanerUserId: pr
 const reclaimForm = reactive({ olderThanMinutes: 60, limit: 20 });
 const assignDialog = reactive({ open: false, taskId: '', cleanerUserId: '', note: '' });
 const rejectDialog = reactive({ open: false, taskId: '', reason: '' });
+const detailDialog = reactive<{ open: boolean; task: CleaningTask | null }>({
+  open: false,
+  task: null
+});
 const memberDialog = reactive({
   open: false,
   loading: false,
@@ -350,6 +401,11 @@ function submitFilters() {
   });
 }
 
+function openDetail(row: CleaningTask) {
+  detailDialog.open = true;
+  detailDialog.task = row;
+}
+
 function openAssign(row: CleaningTask) {
   assignDialog.open = true;
   assignDialog.taskId = row.id;

admin/src/styles.css

@@ -341,7 +341,8 @@ textarea {
   gap: 8px;
 }
 
-.detail-grid span {
+.detail-grid span,
+.timeline-grid span {
   display: grid;
   gap: 4px;
   min-width: 0;
@@ -353,6 +354,27 @@ textarea {
   background: #f5f8fb;
 }
 
+.timeline-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.photo-grid .el-image {
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid #e1e8f0;
+  border-radius: 8px;
+  background: #f5f8fb;
+}
+
 .trend-list {
   display: grid;
   gap: 10px;
@@ -401,7 +423,8 @@ textarea {
   font-size: 14px;
 }
 
-.detail-grid strong {
+.detail-grid strong,
+.timeline-grid strong {
   overflow: hidden;
   color: #18212f;
   font-size: 14px;
@@ -543,6 +566,8 @@ textarea {
 
   .member-form,
   .detail-grid,
+  .timeline-grid,
+  .photo-grid,
   .trend-row,
   .stats-filter,
   .stats-grid {