🎉 init: 小龙的工作空间

2026-06-06 10:40:48 +08:00
commit a188ee1426
3201 changed files with 231817 additions and 0 deletions
@@ -0,0 +1,28 @@
+import type { Pet } from "@/types";
+import { Card } from "@/components/ui/Card";
+
+interface PetCardProps {
+  pet: Pet;
+  onClick?: () => void;
+}
+
+export function PetCard({ pet, onClick }: PetCardProps) {
+  return (
+    <Card onClick={onClick} className="flex items-center gap-4">
+      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-amber-100 to-orange-200 flex items-center justify-center text-2xl overflow-hidden flex-shrink-0">
+        {pet.avatarUrl ? (
+          <img src={pet.avatarUrl} alt={pet.name} className="w-full h-full object-cover" />
+        ) : (
+          "🐾"
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <h3 className="font-semibold text-gray-800 truncate">{pet.name}</h3>
+        <p className="text-sm text-gray-500">{pet.breed || pet.species} · {pet.weightKg}kg</p>
+      </div>
+      <svg className="w-5 h-5 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+      </svg>
+    </Card>
+  );
+}
@@ -0,0 +1,34 @@
+import type { Schedule } from "@/types";
+
+interface ScheduleCardProps {
+  schedule: Schedule;
+  onToggle?: () => void;
+}
+
+export function ScheduleCard({ schedule, onToggle }: ScheduleCardProps) {
+  const typeIcons: Record<string, string> = {
+    vaccine: "💉",
+    deworming: "💊",
+    checkup: "🩺",
+    grooming: "✂️",
+  };
+
+  const date = new Date(schedule.scheduledAt);
+  const isOverdue = date < new Date() && !schedule.completed;
+
+  return (
+    <div className={`flex items-center gap-3 p-3 rounded-lg border ${schedule.completed ? "bg-gray-50 border-gray-100" : isOverdue ? "bg-red-50 border-red-200" : "bg-white border-gray-100"}`}>
+      <span className="text-2xl">{typeIcons[schedule.type] || "📅"}</span>
+      <div className="flex-1 min-w-0">
+        <p className={`text-sm font-medium ${schedule.completed ? "text-gray-400 line-through" : "text-gray-800"}`}>{schedule.title}</p>
+        <p className="text-xs text-gray-500">{date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</p>
+      </div>
+      <button
+        onClick={onToggle}
+        className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${schedule.completed ? "bg-green-500 border-green-500" : "border-gray-300"}`}
+      >
+        {schedule.completed && <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>}
+      </button>
+    </div>
+  );
+}