feat: 实现前端管理看板与移动端扫码视图组件

frontend/src/components/scan/TaskListCard.tsx

@@ -0,0 +1,56 @@
+/** 任务进度列表卡片 */
+import { ClipboardList, ChevronRight } from "lucide-react";
+import type { TaskSummary } from "../../types/api";
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: "待处理",
+  in_progress: "进行中",
+  completed: "已完成",
+  cancelled: "已取消",
+};
+
+function statusColor(status: string): string {
+  switch (status) {
+    case "pending":   return "bg-yellow-100 text-yellow-700";
+    case "in_progress": return "bg-blue-100 text-blue-700";
+    case "completed":  return "bg-green-100 text-green-700";
+    default:           return "bg-gray-100 text-gray-600";
+  }
+}
+
+interface TaskListCardProps {
+  tasks: TaskSummary[];
+}
+
+export default function TaskListCard({ tasks }: TaskListCardProps) {
+  return (
+    <div className="rounded-xl bg-white shadow-sm">
+      <div className="flex items-center gap-2 border-b border-gray-100 px-4 py-3">
+        <ClipboardList className="h-5 w-5 text-blue-600" />
+        <h3 className="font-semibold text-gray-800">当前进度</h3>
+        <span className="ml-auto text-xs text-gray-400">{tasks.length} 个任务</span>
+      </div>
+
+      {tasks.length === 0 ? (
+        <div className="px-4 py-8 text-center text-sm text-gray-400">暂无关联任务</div>
+      ) : (
+        <div className="divide-y divide-gray-50">
+          {tasks.map((task) => (
+            <div key={task.id} className="flex items-center gap-3 px-4 py-3">
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-gray-800">{task.task_name}</p>
+                <p className="text-xs text-gray-400">
+                  负责人: {task.assignee_id ?? "未分配"}
+                </p>
+              </div>
+              <span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${statusColor(task.status)}`}>
+                {STATUS_LABELS[task.status] ?? task.status}
+              </span>
+              <ChevronRight className="h-4 w-4 shrink-0 text-gray-300" />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}