0.8.4.0

app/page.tsx

@@ -71,6 +71,7 @@ export default function DashboardPage() {
   const [recentActivities, setRecentActivities] = useState<ActivityLog[]>([])
   const [selectedPhoto, setSelectedPhoto] = useState<string | null>(null)
   const [statsExpanded, setStatsExpanded] = useState(true)
+  const [recentActivityExpanded, setRecentActivityExpanded] = useState(false)
   const [adminToggleLoading, setAdminToggleLoading] = useState<string | null>(null)
   const [editDialogOpen, setEditDialogOpen] = useState(false)
   const [editForm, setEditForm] = useState({ name: '', description: '' })
@@ -330,7 +331,9 @@ export default function DashboardPage() {
     })
     
     // 按日期排序
-    return anniversaries.sort((a, b) => a.day - b.day).slice(0, 5)
+    const sorted = anniversaries.sort((a, b) => a.day - b.day)
+    
+    return sorted
   }, [treeData])
 
   // 计算家族迁徙记录
@@ -801,8 +804,9 @@ export default function DashboardPage() {
           </TabsContent>
 
           <TabsContent value="recent" className="mt-0 flex-1 overflow-y-auto">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <div className="space-y-6">
+              {/* 第一行：本月祭祖和未来三月纪念日 */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 <ChineseCard variant="plaque" className="shadow-sm">
                   <ChineseCardHeader>
                     <ChineseCardTitle className="flex items-center gap-2 text-primary">
@@ -811,53 +815,125 @@ export default function DashboardPage() {
                     </ChineseCardTitle>
                     <ChineseCardDescription>本月需要纪念的家族成员生日与忌日</ChineseCardDescription>
                   </ChineseCardHeader>
-                  <ChineseCardContent className="grid gap-4">
+                  <ChineseCardContent className="max-h-full overflow-y-auto">
                     {monthlyAnniversaries.length > 0 ? (
-                      monthlyAnniversaries.map((anniversary, index) => {
+                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        {/* 诞辰列 */}
+                        <div className="space-y-3">
+                          <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                            <span className="w-1 h-4 bg-green-500 rounded"></span>
+                            诞辰
+                            <span className="ml-auto text-xs font-normal text-muted-foreground bg-green-50 px-2 py-1 rounded border border-green-200">
+                              {monthlyAnniversaries.filter(a => a.type === 'birth').length}
+                            </span>
+                          </h3>
+                          <div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
+                            {monthlyAnniversaries.filter(a => a.type === 'birth').length > 0 ? (
+                              monthlyAnniversaries.filter(a => a.type === 'birth').map((anniversary) => {
                                 const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
                                 return (
                                   <Link href={`/members/${anniversary.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${anniversary.member.id}-${anniversary.type}`}>
-                            <div className="flex items-center gap-4 p-3 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
+                                    <div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
                                       {anniversary.isLunar && anniversary.lunarDisplay ? (
-                                // 农历日期框 - 红色主题
+                                        <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
-                                <div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm">
+                                          <span className="text-[9px] leading-tight text-center px-1">
-                                  <span className="text-[10px] leading-tight text-center px-1">
                                             {anniversary.lunarDisplay.replace('月', '')}
                                           </span>
                                         </div>
                                       ) : (
-                                // 公历日期框 - 蓝色主题
+                                        <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
-                                <div className="flex flex-col items-center justify-center w-14 h-14 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm">
+                                          <span className="text-[10px] font-medium">
-                                  <span className="text-xs font-medium">
                                             {anniversary.month}月
                                           </span>
-                                  <span className="font-bold text-xl leading-tight">{anniversary.day}</span>
+                                          <span className="font-bold text-sm leading-tight">{anniversary.day}</span>
                                         </div>
                                       )}
-                              <div className="flex-1">
+                                      <div className="flex-1 min-w-0">
-                                <p className="font-medium flex items-center gap-2">
+                                        <p className="font-medium text-sm flex items-center gap-1 flex-wrap">
                                           <MemberNameWithStatus 
                                             name={anniversary.member.fullName}
                                             isDead={!!anniversary.member.deathDate}
-                                  /> {anniversary.type === 'birth' ? '诞辰' : '忌日'}
+                                          />
                                           {anniversary.isLunar && (
-                                    <span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
+                                            <span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
                                               农历
                                             </span>
                                           )}
                                         </p>
-                                <p className="text-sm text-muted-foreground">
+                                        <p className="text-xs text-muted-foreground truncate">
-                                  第 {anniversary.member.generation} 世 · 距今 {yearsAgo} 年
+                                          第 {anniversary.member.generation} 世 · {yearsAgo} 年
-                                  {anniversary.type === 'death' && ' · 已故'}
-                                  {anniversary.isLunar && anniversary.lunarDisplay && (
-                                    <span className="ml-1">· {anniversary.lunarDisplay}</span>
-                                  )}
                                         </p>
                                       </div>
                                     </div>
                                   </Link>
                                 )
                               })
+                            ) : (
+                              <div className="text-center py-6">
+                                <p className="text-xs text-muted-foreground">此月无诞辰</p>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* 忌日列 */}
+                        <div className="space-y-3">
+                          <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                            <span className="w-1 h-4 bg-gray-500 rounded"></span>
+                            忌日
+                            <span className="ml-auto text-xs font-normal text-muted-foreground bg-gray-100 px-2 py-1 rounded border border-gray-200">
+                              {monthlyAnniversaries.filter(a => a.type === 'death').length}
+                            </span>
+                          </h3>
+                          <div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
+                            {monthlyAnniversaries.filter(a => a.type === 'death').length > 0 ? (
+                              monthlyAnniversaries.filter(a => a.type === 'death').map((anniversary) => {
+                                const yearsAgo = new Date().getFullYear() - new Date(anniversary.date).getFullYear()
+                                return (
+                                  <Link href={`/members/${anniversary.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${anniversary.member.id}-${anniversary.type}`}>
+                                    <div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
+                                      {anniversary.isLunar && anniversary.lunarDisplay ? (
+                                        <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border-2 border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
+                                          <span className="text-[9px] leading-tight text-center px-1">
+                                            {anniversary.lunarDisplay.replace('月', '')}
+                                          </span>
+                                        </div>
+                                      ) : (
+                                        <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border-2 border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
+                                          <span className="text-[10px] font-medium">
+                                            {anniversary.month}月
+                                          </span>
+                                          <span className="font-bold text-sm leading-tight">{anniversary.day}</span>
+                                        </div>
+                                      )}
+                                      <div className="flex-1 min-w-0">
+                                        <p className="font-medium text-sm flex items-center gap-1 flex-wrap">
+                                          <MemberNameWithStatus 
+                                            name={anniversary.member.fullName}
+                                            isDead={!!anniversary.member.deathDate}
+                                          />
+                                          {anniversary.isLunar && (
+                                            <span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
+                                              农历
+                                            </span>
+                                          )}
+                                        </p>
+                                        <p className="text-xs text-muted-foreground truncate">
+                                          第 {anniversary.member.generation} 世 · {yearsAgo} 年
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </Link>
+                                )
+                              })
+                            ) : (
+                              <div className="text-center py-6">
+                                <p className="text-xs text-muted-foreground">此月无忌日</p>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
                     ) : (
                       <div className="text-center py-12">
                         <p className="text-sm text-foreground font-light tracking-wide">此月无忆</p>
@@ -875,7 +951,6 @@ export default function DashboardPage() {
                     <ChineseCardDescription>即将到来的生日与忌日提醒</ChineseCardDescription>
                   </ChineseCardHeader>
                   <ChineseCardContent>
-                    <div className="space-y-3">
                     {(() => {
                       const now = new Date()
                       const threeMonthsLater = new Date(now.getFullYear(), now.getMonth() + 3, now.getDate())
@@ -985,73 +1060,157 @@ export default function DashboardPage() {
 
                       upcomingEvents.sort((a, b) => a.date.getTime() - b.date.getTime())
 
+                      const birthEvents = upcomingEvents.filter(e => e.type === 'birth')
+                      const deathEvents = upcomingEvents.filter(e => e.type === 'death')
+
                       return upcomingEvents.length > 0 ? (
-                          upcomingEvents.slice(0, 5).map((event, index) => {
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                          {/* 诞辰列 */}
+                          <div className="space-y-3">
+                            <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                              <span className="w-1 h-4 bg-green-500 rounded"></span>
+                              诞辰
+                              <span className="ml-auto text-xs font-normal text-muted-foreground bg-green-50 px-2 py-1 rounded border border-green-200">
+                                {birthEvents.length}
+                              </span>
+                            </h3>
+                            <div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
+                              {birthEvents.length > 0 ? (
+                                birthEvents.map((event, index) => {
                                   const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
                                   const daysUntil = Math.ceil((event.date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
                                   return (
                                     <Link href={`/members/${event.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${event.member.id}-${event.type}-${index}`}>
-                                <div className="flex items-center gap-3 p-2 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
+                                      <div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
                                         {event.isLunar && event.lunarDisplay ? (
-                                    // 农历日期框 - 红色主题
+                                          <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
-                                    <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm">
                                             <span className="text-[9px] leading-tight text-center px-1">
                                               {event.lunarDisplay}
                                             </span>
                                           </div>
                                         ) : (
-                                    // 公历日期框 - 蓝色主题
+                                          <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
-                                    <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm">
+                                            <span className="text-[10px] font-medium">
-                                      <span className="text-xs font-medium">
                                               {event.month}月
                                             </span>
                                             <span className="font-bold text-sm leading-tight">{event.day}</span>
                                           </div>
                                         )}
-                                  <div className="flex-1">
+                                        <div className="flex-1 min-w-0">
-                                    <p className="font-medium text-sm flex items-center gap-2">
+                                          <p className="font-medium text-sm flex items-center gap-1 flex-wrap">
                                             <MemberNameWithStatus 
                                               name={event.member.fullName}
                                               isDead={!!event.member.deathDate}
-                                      /> {event.type === 'birth' ? '诞辰' : '忌日'}
+                                            />
                                             {event.isLunar && (
-                                        <span className="text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
+                                              <span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
                                                 农历
                                               </span>
                                             )}
                                           </p>
-                                    <p className="text-xs text-muted-foreground">
+                                          <p className="text-xs text-muted-foreground truncate">
-                                      第 {event.member.generation} 世 · {yearsAgo} 年
+                                            第 {event.member.generation} 世 · {yearsAgo} 年 · <span className="text-primary font-medium">{daysUntil}天</span>
-                                      {event.type === 'death' && ' · 已故'}
-                                      {event.isLunar && event.lunarDisplay && (
-                                        <span className="ml-1">· {event.lunarDisplay}</span>
-                                      )}
-                                      <span className="ml-1 text-primary">· {daysUntil}天后</span>
                                           </p>
                                         </div>
                                       </div>
                                     </Link>
                                   )
                                 })
+                              ) : (
+                                <div className="text-center py-6">
+                                  <p className="text-xs text-muted-foreground">无诞辰</p>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* 忌日列 */}
+                          <div className="space-y-3">
+                            <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                              <span className="w-1 h-4 bg-gray-500 rounded"></span>
+                              忌日
+                              <span className="ml-auto text-xs font-normal text-muted-foreground bg-gray-100 px-2 py-1 rounded border border-gray-200">
+                                {deathEvents.length}
+                              </span>
+                            </h3>
+                            <div className="space-y-2 max-h-[calc(5*70px)] overflow-y-auto pr-2">
+                              {deathEvents.length > 0 ? (
+                                deathEvents.map((event, index) => {
+                                  const yearsAgo = now.getFullYear() - new Date(event.originalDate).getFullYear()
+                                  const daysUntil = Math.ceil((event.date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+                                  return (
+                                    <Link href={`/members/${event.member.id}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`} key={`${event.member.id}-${event.type}-${index}`}>
+                                      <div className="flex items-center gap-3 p-2.5 rounded-lg bg-background/60 border border-border/50 hover:bg-background transition-colors cursor-pointer">
+                                        {event.isLunar && event.lunarDisplay ? (
+                                          <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-red-50 to-amber-50 border border-red-200/50 text-red-800 font-serif shadow-sm flex-shrink-0">
+                                            <span className="text-[9px] leading-tight text-center px-1">
+                                              {event.lunarDisplay}
+                                            </span>
+                                          </div>
+                                        ) : (
+                                          <div className="flex flex-col items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 border border-blue-200/50 text-blue-800 font-serif shadow-sm flex-shrink-0">
+                                            <span className="text-[10px] font-medium">
+                                              {event.month}月
+                                            </span>
+                                            <span className="font-bold text-sm leading-tight">{event.day}</span>
+                                          </div>
+                                        )}
+                                        <div className="flex-1 min-w-0">
+                                          <p className="font-medium text-sm flex items-center gap-1 flex-wrap">
+                                            <MemberNameWithStatus 
+                                              name={event.member.fullName}
+                                              isDead={!!event.member.deathDate}
+                                            />
+                                            {event.isLunar && (
+                                              <span className="text-[9px] text-amber-600 bg-amber-50 px-1 py-0.5 rounded border border-amber-200 flex-shrink-0">
+                                                农历
+                                              </span>
+                                            )}
+                                          </p>
+                                          <p className="text-xs text-muted-foreground truncate">
+                                            第 {event.member.generation} 世 · {yearsAgo} 年 · <span className="text-primary font-medium">{daysUntil}天</span>
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </Link>
+                                  )
+                                })
+                              ) : (
+                                <div className="text-center py-6">
+                                  <p className="text-xs text-muted-foreground">无忌日</p>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
                       ) : (
                         <div className="text-center py-8">
                           <p className="text-sm text-foreground font-light tracking-wide">来日无期</p>
                         </div>
                       )
                     })()}
-                    </div>
                   </ChineseCardContent>
                 </ChineseCard>
               </div>
 
+              {/* 第二行：近期修谱动态（折叠状态） */}
+              <Collapsible open={recentActivityExpanded} onOpenChange={setRecentActivityExpanded} className="w-full">
                 <ChineseCard variant="default" cornerOrnament className="shadow-sm">
                   <ChineseCardHeader>
-                  <ChineseCardTitle className="flex items-center gap-2">
+                    <div className="flex items-center justify-between w-full">
+                      <div className="flex items-center gap-2">
                         <BarChart3 className="h-5 w-5 text-primary" />
-                    近期修谱动态
+                        <ChineseCardTitle>近期修谱动态</ChineseCardTitle>
-                  </ChineseCardTitle>
+                      </div>
+                      <CollapsibleTrigger asChild>
+                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                          {recentActivityExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                        </Button>
+                      </CollapsibleTrigger>
+                    </div>
                     <ChineseCardDescription>记录家族成员的最新变动与修订</ChineseCardDescription>
                   </ChineseCardHeader>
+                  <CollapsibleContent>
                     <ChineseCardContent>
                   <ScrollArea className="h-[600px] pr-4">
                     <div className="space-y-4">
@@ -1160,7 +1319,9 @@ export default function DashboardPage() {
                     </div>
                   </ScrollArea>
                     </ChineseCardContent>
+                  </CollapsibleContent>
                 </ChineseCard>
+              </Collapsible>
             </div>
           </TabsContent>
 

app/tree/page.tsx

@@ -47,7 +47,7 @@ import type { D3OrgChartRef } from "@/components/tree/d3-org-chart-flow"
 type ViewMode = "traditional" | "d3-org-chart"
 
 export default function TreePage() {
-  const { treeData, currentTree, refreshData } = useFamily()
+  const { treeData, currentTree, refreshData, highlightedMemberId, setHighlightedMemberId } = useFamily()
   const { calculateRelationship } = useRelationship()
   const { data: session, status } = useSession()
   const { showAlert } = useDialog()
@@ -119,9 +119,14 @@ export default function TreePage() {
   const containerRef = useRef<HTMLDivElement>(null)
   const d3ChartRef = useRef<D3OrgChartRef>(null)
 
-  // 传统族谱初始定位到始祖并自适应缩放
+  // 传统族谱初始定位到始祖并自适应缩放（如果有高亮成员则跳过）
   useEffect(() => {
     if (viewMode !== 'traditional' || hasInitialPositioned || !treeData.rootId) return
+    // 如果有高亮成员，跳过初始定位，让高亮定位逻辑处理
+    if (highlightedMemberId) {
+      setHasInitialPositioned(true)
+      return
+    }
     
     // 找到始祖成员：优先使用标记为 isFounder 的成员，否则使用 rootId 对应的成员
     const founderMember = Object.values(treeData.members).find(m => m.isFounder === true) 
@@ -180,7 +185,7 @@ export default function TreePage() {
     }, 500)
     
     return () => clearTimeout(timer)
-  }, [viewMode, treeData.rootId, treeData.members, hasInitialPositioned])
+  }, [viewMode, treeData.rootId, treeData.members, hasInitialPositioned, highlightedMemberId])
 
   // 切换视图模式时重置初始定位状态和缩放位置
   useEffect(() => {
@@ -189,6 +194,53 @@ export default function TreePage() {
     setPosition({ x: 0, y: 0 })
   }, [viewMode])
 
+  // 当有高亮成员时，定位到该成员并居中显示，设置 scale 为 1.0
+  useEffect(() => {
+    if (viewMode !== 'traditional' || !highlightedMemberId) return
+    
+    // 第一步：重置位置和缩放为初始状态
+    setScale(1)
+    setPosition({ x: 0, y: 0 })
+    
+    // 延迟执行，等待 DOM 完全渲染（需要足够长的时间让树完全展开）
+    const timer = setTimeout(() => {
+      if (!containerRef.current) {
+        return
+      }
+      
+      // 查找高亮成员的 DOM 元素
+      const highlightedNode = containerRef.current.querySelector(`[data-member-id="${highlightedMemberId}"]`) as HTMLElement
+      if (!highlightedNode) {
+        return
+      }
+      
+      const containerRect = containerRef.current.getBoundingClientRect()
+      const nodeRect = highlightedNode.getBoundingClientRect()
+      
+      // 计算容器中心
+      const containerCenterX = containerRect.width / 2
+      const containerCenterY = containerRect.height / 2
+      
+      // 此时 position 已经是 {x:0, y:0}，所以节点位置就是相对于原点的位置
+      // 我们需要计算让节点居中的偏移量
+      const nodeCenterX = nodeRect.left - containerRect.left + nodeRect.width / 2
+      const nodeCenterY = nodeRect.top - containerRect.top + nodeRect.height / 2
+      
+      // 计算偏移量
+      const offsetX = containerCenterX - nodeCenterX
+      const offsetY = containerCenterY - nodeCenterY
+      
+      setPosition({ x: offsetX, y: offsetY })
+      
+      // 30秒后清除高亮状态
+      setTimeout(() => {
+        setHighlightedMemberId(null)
+      }, 30000)
+    }, 1000)  // 增加到1秒，确保DOM完全渲染
+    
+    return () => clearTimeout(timer)
+  }, [viewMode, highlightedMemberId, setHighlightedMemberId])
+
   // 传统族谱自适应视图函数
   const handleTraditionalFitView = useCallback(() => {
     if (!containerRef.current || !treeData.rootId) return

components/members/member-form.tsx

@@ -695,7 +695,8 @@ export function MemberForm({ initialData, existingMembers = [], onSubmit, onCanc
                   value={formData.birthDate || ""}
                   isLunar={formData.isLunarDate || false}
                   onChange={(value) => handleChange("birthDate", value)}
-                  showLunarToggle={false}
+                  onLunarChange={(isLunar) => handleChange("isLunarDate", isLunar)}
+                  showLunarToggle={true}
                 />
                 <DateInputWithLunar
                   id="deathDate"
@@ -703,7 +704,8 @@ export function MemberForm({ initialData, existingMembers = [], onSubmit, onCanc
                   value={formData.deathDate || ""}
                   isLunar={formData.isLunarDate || false}
                   onChange={(value) => handleChange("deathDate", value)}
-                  showLunarToggle={false}
+                  onLunarChange={(isLunar) => handleChange("isLunarDate", isLunar)}
+                  showLunarToggle={true}
                 />
               </div>
             </ChineseCardContent>

components/site-header.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { BookOpen, Search, Settings, LogOut, User, ChevronDown, Plus, Trash2, Network, LayoutGrid, Calculator, HelpCircle, Calendar, Menu, X, Home, Users as UsersIcon, Clock, TreePine } from "lucide-react"
+import { BookOpen, Search, Settings, LogOut, User, ChevronDown, Plus, Trash2, Network, LayoutGrid, Calculator, HelpCircle, Calendar, Menu, X, Home, Users as UsersIcon, Clock, TreePine, MapPin } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -34,7 +34,7 @@ interface FamilyTree {
 }
 
 export function SiteHeader() {
-  const { searchMembers, searchResults, currentTree: familyCurrentTree } = useFamily()
+  const { searchMembers, searchResults, currentTree: familyCurrentTree, setHighlightedMemberId } = useFamily()
   const { data: session, status } = useSession()
   const { showAlert, showConfirm, showPrompt } = useDialog()
   const pathname = usePathname()
@@ -241,6 +241,21 @@ export function SiteHeader() {
     setShowResults(false)
   }
 
+  // 在族谱图中定位成员
+  const handleLocateMember = (memberId: string) => {
+    setHighlightedMemberId(memberId)
+    // 如果不在族谱页面，跳转到族谱页面
+    if (pathname !== '/tree') {
+      const params = new URLSearchParams()
+      if (currentTree?.id) {
+        params.set('treeId', currentTree.id)
+      }
+      router.push(`/tree?${params.toString()}`)
+    }
+    setSearchQuery("")
+    setShowResults(false)
+  }
+
   // 导航菜单项配置
   const navItems = [
     { href: "/", label: "总览", icon: Home },
@@ -474,10 +489,13 @@ export function SiteHeader() {
             {showResults && searchResults.length > 0 && (
               <div className="absolute top-full mt-2 w-full bg-background border border-border rounded-lg shadow-lg max-h-96 overflow-y-auto z-50">
                 {searchResults.map((member) => (
-                  <button
+                  <div
                     key={member.id}
+                    className="w-full px-4 py-3 hover:bg-muted transition-colors border-b border-border last:border-0 flex items-center gap-2"
+                  >
+                    <button
                       onClick={() => handleSelectMember(member.id)}
-                    className="w-full px-4 py-3 text-left hover:bg-muted transition-colors border-b border-border last:border-0"
+                      className="flex-1 text-left"
                     >
                       <div className="flex items-center gap-3">
                         <div className="flex-1">
@@ -499,6 +517,16 @@ export function SiteHeader() {
                         </div>
                       </div>
                     </button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 flex-shrink-0 text-muted-foreground hover:text-primary"
+                      onClick={() => handleLocateMember(member.id)}
+                      title="在族谱图中定位"
+                    >
+                      <MapPin className="h-4 w-4" />
+                    </Button>
+                  </div>
                 ))}
               </div>
             )}

components/tree/family-node.tsx

@@ -26,6 +26,7 @@ interface FamilyNodeProps {
   isRoot?: boolean
   onSelect?: (member: FamilyMember) => void
   isHighlighted?: boolean
+  highlightedMemberId?: string | null
   relationMode?: boolean
   isSelected?: boolean
   selectedMembers?: string[]
@@ -502,6 +503,7 @@ export function FamilyNode({
   isRoot, 
   onSelect, 
   isHighlighted, 
+  highlightedMemberId,
   relationMode, 
   isSelected, 
   selectedMembers = [], 
@@ -535,6 +537,11 @@ export function FamilyNode({
   // 有配偶时，合并到一个卡片中显示（类似D3布局）
   const isMale = member.gender === 'MALE'
   const isDead = !!member.deathDate
+  
+  // 检查是否有任何配偶被高亮，如果是则整个卡片高亮
+  const isAnySpouseHighlighted = spouseList.some(sp => sp.id === highlightedMemberId)
+  const isCardHighlighted = isHighlighted || isAnySpouseHighlighted
+  
   // 使用 isRoot prop 而不是 isFounder 字段
   const isFounder = isRoot === true
   const avatarUrl = member.avatarUrl
@@ -552,8 +559,8 @@ export function FamilyNode({
         "relative rounded-xl overflow-hidden transition-all duration-300",
         "shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
         "hover:scale-[1.02] hover:-translate-y-1",
-        isHighlighted
+        isCardHighlighted
-          ? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 ring-2 ring-yellow-400"
+          ? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 ring-2 ring-yellow-400 shadow-[0_8px_30px_rgba(234,179,8,0.4)]"
           : isFounder || isRoot
             ? "bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50"
             : "bg-gradient-to-br from-slate-50 via-gray-50 to-slate-100"
@@ -562,7 +569,7 @@ export function FamilyNode({
       {/* 顶部装饰条 */}
       <div className={cn(
         "h-1.5",
-        isHighlighted ? "bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-400"
+        isCardHighlighted ? "bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-400"
           : isFounder || isRoot ? "bg-gradient-to-r from-amber-400 via-orange-500 to-amber-400"
           : "bg-gradient-to-r from-slate-400 via-gray-500 to-slate-400"
       )} />
@@ -669,8 +676,8 @@ export function FamilyNode({
               {/* 配偶卡片 */}
               <div 
                 className={cn(
-                  "flex flex-col items-center cursor-pointer min-w-[80px] relative",
+                  "flex flex-col items-center cursor-pointer min-w-[80px] relative p-2 rounded-lg transition-all",
-                  relationMode && "hover:ring-2 hover:ring-primary/50 rounded-lg p-1"
+                  relationMode && "hover:ring-2 hover:ring-primary/50"
                 )}
                 data-member-id={sp.id}
                 onClick={() => onSelect?.(sp)}

components/tree/tree-node.tsx

@@ -86,6 +86,7 @@ export const TreeNode = memo(function TreeNode({
           onSelect={handleSelect} 
           isRoot={isRoot}
           isHighlighted={isHighlighted}
+          highlightedMemberId={highlightedMemberId}
           relationMode={relationMode}
           isSelected={isSelected}
           selectedMembers={selectedMembers}

lib/lunar-calendar.ts

@@ -290,7 +290,23 @@ export function isInCurrentMonth(dateStr: string, isLunar: boolean = false): { d
       originalLunar.isLeap
     )
 
-    if (!thisYearSolar) return null
+    if (!thisYearSolar) {
+      // 如果转换失败，尝试用明年的日期
+      const nextYearSolar = lunar2solar(
+        currentYear + 1,
+        originalLunar.lunarMonth,
+        originalLunar.lunarDay,
+        originalLunar.isLeap
+      )
+      if (nextYearSolar) {
+        const nextYearMonth = nextYearSolar.getMonth() + 1
+        const nextYearDay = nextYearSolar.getDate()
+        if (nextYearMonth === currentMonth) {
+          return { day: nextYearDay, month: nextYearMonth }
+        }
+      }
+      return null
+    }
 
     const thisYearMonth = thisYearSolar.getMonth() + 1
     const thisYearDay = thisYearSolar.getDate()

node_modules/.pnpm-workspace-state-v1.json

@@ -1,5 +1,5 @@
 {
-  "lastValidatedTimestamp": 1766327831114,
+  "lastValidatedTimestamp": 1766335044864,
   "projects": {},
   "pnpmfiles": [],
   "settings": {