diff --git a/components/ui/back-button.tsx b/components/ui/back-button.tsx
new file mode 100644
index 00000000..00be17f0
--- /dev/null
+++ b/components/ui/back-button.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface BackButtonProps {
+ onClick: () => void
+ label?: string
+ className?: string
+}
+
+export function BackButton({ onClick, label = "返回", className = "" }: BackButtonProps) {
+ return (
+
+ )
+}
diff --git a/components/ui/chinese-card.tsx b/components/ui/chinese-card.tsx
new file mode 100644
index 00000000..84479e9b
--- /dev/null
+++ b/components/ui/chinese-card.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * 中国风卡片组件
+ * 提供多种传统中国设计风格变体
+ */
+
+type ChineseCardVariant = 'default' | 'scroll' | 'plaque' | 'portrait' | 'bamboo'
+
+interface ChineseCardProps extends React.ComponentProps<'div'> {
+ variant?: ChineseCardVariant
+ /** 是否显示角饰 */
+ cornerOrnament?: boolean
+ /** 是否显示顶部装饰条 */
+ headerDecoration?: boolean
+}
+
+function ChineseCard({
+ className,
+ variant = 'default',
+ cornerOrnament = false,
+ headerDecoration = false,
+ children,
+ ...props
+}: ChineseCardProps) {
+ return (
+
+ {/* 顶部装饰条 */}
+ {headerDecoration && (
+
+ )}
+
+ {/* 角饰元素 */}
+ {cornerOrnament && (
+ <>
+
+
+
+
+
+ )}
+
+ {children}
+
+ )
+}
+
+function ChineseCardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function ChineseCardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
+ return (
+
+ )
+}
+
+function ChineseCardDescription({ className, ...props }: React.ComponentProps<'p'>) {
+ return (
+
+ )
+}
+
+function ChineseCardContent({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function ChineseCardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+/**
+ * 中国风分隔线
+ */
+function ChineseDivider({
+ className,
+ variant = 'wave',
+ ...props
+}: React.ComponentProps<'div'> & {
+ variant?: 'wave' | 'cloud' | 'meander' | 'simple'
+}) {
+ return (
+
+ )
+}
+
+/**
+ * 统计数字组件 - 用于展示大数字
+ */
+function ChineseStatNumber({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<'span'>) {
+ return (
+
+ {children}
+
+ )
+}
+
+/**
+ * 统计标签组件
+ */
+function ChineseStatLabel({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<'span'>) {
+ return (
+
+ {children}
+
+ )
+}
+
+export {
+ ChineseCard,
+ ChineseCardHeader,
+ ChineseCardTitle,
+ ChineseCardDescription,
+ ChineseCardContent,
+ ChineseCardFooter,
+ ChineseDivider,
+ ChineseStatNumber,
+ ChineseStatLabel,
+ type ChineseCardVariant,
+}
diff --git a/context/family-context.tsx b/context/family-context.tsx
index 488bcb0c..37091030 100644
--- a/context/family-context.tsx
+++ b/context/family-context.tsx
@@ -237,7 +237,32 @@ function FamilyProviderInner({ children }: { children: React.ReactNode }) {
const data = await response.json()
- // 更新本地状态
+ // 由于后端会维护双向关系,需要重新加载所有成员以保持数据一致性
+ // 特别是当修改了关系字段(spouseIds, childrenIds, fatherId, motherId)时
+ const hasRelationshipChanges =
+ updates.spouseIds !== undefined ||
+ updates.childrenIds !== undefined ||
+ updates.fatherId !== undefined ||
+ updates.motherId !== undefined
+
+ if (hasRelationshipChanges) {
+ // 重新加载所有成员数据以同步双向关系
+ const membersResponse = await fetch(`/api/trees/${currentTree.id}/members`)
+ if (membersResponse.ok) {
+ const membersData = await membersResponse.json()
+ const membersMap: Record
= {}
+ membersData.members.forEach((m: FamilyMember) => {
+ membersMap[m.id] = m
+ })
+ setTreeData(prev => ({
+ ...prev,
+ members: membersMap,
+ }))
+ return
+ }
+ }
+
+ // 如果没有关系变更,只更新当前成员
setTreeData(prev => ({
...prev,
members: {
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c7..c4b7818f 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
///
///
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.