🎉 init: 小龙的工作空间

2026-06-06 10:40:48 +08:00
commit a188ee1426
3201 changed files with 231817 additions and 0 deletions
@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import type { Schedule } from "@/types";
+import { Button } from "@/components/ui/Button";
+import { ScheduleCard } from "@/components/pet/ScheduleCard";
+import { Modal } from "@/components/ui/Modal";
+import { Input } from "@/components/ui/Input";
+import { EmptyState } from "@/components/ui/EmptyState";
+
+const mockSchedules: Schedule[] = [
+  { id: "s1", petId: "p1", type: "vaccine", title: "年度疫苗加强针", scheduledAt: "2026-07-01T09:00:00Z", completed: false },
+  { id: "s2", petId: "p1", type: "deworming", title: "季度驱虫", scheduledAt: "2026-06-15T10:00:00Z", completed: false },
+  { id: "s3", petId: "p1", type: "checkup", title: "半年度体检", scheduledAt: "2026-05-20T14:00:00Z", completed: true },
+  { id: "s4", petId: "p1", type: "grooming", title: "美容护理", scheduledAt: "2026-06-10T11:00:00Z", completed: false },
+];
+
+export default function SchedulePage() {
+  const [schedules, setSchedules] = useState<Schedule[]>(mockSchedules);
+  const [showModal, setShowModal] = useState(false);
+
+  const toggleComplete = (id: string) => {
+    setSchedules(prev => prev.map(s => s.id === id ? { ...s, completed: !s.completed } : s));
+  };
+
+  const pending = schedules.filter(s => !s.completed);
+  const done = schedules.filter(s => s.completed);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold text-gray-800">健康日程</h1>
+          <p className="text-sm text-gray-500 mt-1">管理宠物的疫苗、驱虫、体检安排</p>
+        </div>
+        <Button onClick={() => setShowModal(true)} variant="primary" size="sm">+ 添加日程</Button>
+      </div>
+
+      {/* Pending */}
+      <section>
+        <h2 className="text-sm font-semibold text-gray-500 uppercase mb-2">待完成 ({pending.length})</h2>
+        <div className="space-y-2">
+          {pending.length > 0 ? pending.map(s => <ScheduleCard key={s.id} schedule={s} onToggle={() => toggleComplete(s.id)} />) : <EmptyState icon="✅" title="全部完成" />}
+        </div>
+      </section>
+
+      {/* Completed */}
+      {done.length > 0 && (
+        <section>
+          <h2 className="text-sm font-semibold text-gray-500 uppercase mb-2">已完成 ({done.length})</h2>
+          <div className="space-y-2">
+            {done.map(s => <ScheduleCard key={s.id} schedule={s} />)}
+          </div>
+        </section>
+      )}
+
+      <Modal open={showModal} onClose={() => setShowModal(false)} title="添加日程">
+        <div className="space-y-3">
+          <Input label="标题" placeholder="如：年度疫苗" />
+          <Input label="日期" type="date" />
+          <div className="flex gap-2 justify-end">
+            <Button variant="secondary" onClick={() => setShowModal(false)}>取消</Button>
+            <Button variant="primary" onClick={() => setShowModal(false)}>保存</Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}