大海
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Input } from "@/components/ui/Input";
|
|
import { EmptyState } from "@/components/ui/EmptyState";
|
|
|
|
const CATEGORIES = [
|
|
{ key: "food", icon: "🍖", label: "饮食" },
|
|
{ key: "exercise", icon: "🏃", label: "运动" },
|
|
{ key: "excretion", icon: "💩", label: "排泄" },
|
|
{ key: "weight", icon: "⚖️", label: "体重" },
|
|
];
|
|
|
|
interface LogEntry {
|
|
id: string;
|
|
category: string;
|
|
icon: string;
|
|
value: string;
|
|
time: string;
|
|
}
|
|
|
|
export default function DailyLogPage() {
|
|
const [logs, setLogs] = useState<LogEntry[]>([]);
|
|
const [category, setCategory] = useState("food");
|
|
const [value, setValue] = useState("");
|
|
|
|
const addLog = () => {
|
|
if (!value.trim()) return;
|
|
const cat = CATEGORIES.find(c => c.key === category)!;
|
|
setLogs(prev => [{
|
|
id: Date.now().toString(),
|
|
category: cat.key,
|
|
icon: cat.icon,
|
|
value,
|
|
time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
|
|
}, ...prev]);
|
|
setValue("");
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-800">日常记录</h1>
|
|
<p className="text-sm text-gray-500 mt-1">记录宠物的饮食、运动、排泄和体重变化</p>
|
|
</div>
|
|
|
|
{/* Quick Record */}
|
|
<Card>
|
|
<div className="space-y-3">
|
|
<div className="flex gap-2">
|
|
{CATEGORIES.map(c => (
|
|
<button key={c.key} onClick={() => setCategory(c.key)}
|
|
className={`flex-1 py-2 rounded-lg text-sm text-center transition-colors ${category === c.key ? "bg-blue-100 text-blue-700 font-medium" : "bg-gray-50 text-gray-500"}`}>
|
|
{c.icon} {c.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Input placeholder="输入记录内容..." value={value} onChange={e => setValue(e.target.value)} onKeyDown={e => e.key === "Enter" && addLog()} />
|
|
<Button onClick={addLog} size="sm">记录</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Log Timeline */}
|
|
<div className="space-y-2">
|
|
{logs.length > 0 ? logs.map(log => (
|
|
<div key={log.id} className="flex items-center gap-3 px-4 py-2 bg-white rounded-lg border border-gray-100">
|
|
<span className="text-xl">{log.icon}</span>
|
|
<span className="flex-1 text-sm text-gray-700">{log.value}</span>
|
|
<span className="text-xs text-gray-400">{log.time}</span>
|
|
</div>
|
|
)) : <EmptyState icon="📝" title="暂无记录" description="使用上方表单记录宠物日常" />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|