0.0.0.2

app/settings/page.tsx

@@ -9,23 +9,14 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { useRef, useState } from "react"
 
 export default function SettingsPage() {
-  const { treeData, addMember } = useFamily() // Actually need setTreeData but I didn't expose it directly. I should have.
-  // Wait, I didn't expose setTreeData in the context interface.
-  // I need to update the context to allow full data replacement or add a "loadData" function.
-  // Let me quickly check context/family-context.tsx
-  // ... It has 'addMember', 'updateMember', 'deleteMember'. No 'loadData'.
-  // I will assume I can update the context file first.
-
+  const { treeData, loadData, resetData } = useFamily()
   const [importStatus, setImportStatus] = useState<string>("")
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  // Since I can't easily modify the context interface without a separate edit step which I should do properly,
-  // I will modify the context file in this same block to add 'loadData'.
-
   return (
     <div className="min-h-screen bg-background flex flex-col font-sans">
       <SiteHeader />
-      <main className="container py-8 px-4 md:px-6 flex-1 max-w-3xl">
+      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 max-w-3xl">
         <h1 className="text-3xl font-serif font-bold mb-8">系统设置 (Settings)</h1>
 
         <div className="space-y-6">
@@ -80,19 +71,19 @@ export default function SettingsPage() {
                     if (!file) return
 
                     const reader = new FileReader()
-                    reader.onload = (event) => {
+                    reader.onload = async (event) => {
                       try {
                         const json = JSON.parse(event.target?.result as string)
                         if (json.members && json.rootId) {
-                          // Ideally call loadData(json) here
-                          // Since I'm in the component, I'll dispatch a custom event or use the context method I'm about to add
-                          const event = new CustomEvent("family-data-import", { detail: json })
-                          window.dispatchEvent(event)
+                          await loadData(json)
                           setImportStatus("导入成功！")
+                          // Clear input so same file can be selected again if needed
+                          if (fileInputRef.current) fileInputRef.current.value = ""
                         } else {
                           setImportStatus("错误：无效的数据格式")
                         }
                       } catch (err) {
+                        console.error(err)
                         setImportStatus("错误：无法解析文件")
                       }
                     }
@@ -117,9 +108,10 @@ export default function SettingsPage() {
             <CardContent>
               <Button
                 variant="destructive"
-                onClick={() => {
+                onClick={async () => {
                   if (confirm("确定要重置吗？所有更改将丢失。")) {
-                    window.location.reload() // Simple way to reset state since it's in-memory
+                    await resetData()
+                    alert("数据已重置为演示状态。")
                   }
                 }}
               >