0.3.0.1

2025-11-30 09:25:56 +08:00
parent fd9c064749
commit aaae24c68b
1 changed files with 103 additions and 98 deletions
@@ -430,93 +430,99 @@ export default function MemberProfilePage() {
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
-                  <h3 className="font-medium text-muted-foreground mb-2 text-sm uppercase tracking-wider">
-                    父亲
+                  <h3 className="font-medium text-muted-foreground mb-3 text-sm uppercase tracking-wider">
+                    父母
                  </h3>
-                  {member.fatherId ? (
-                    <Link
-                      href={`/members/${member.fatherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
-                      className="text-lg font-serif font-bold hover:underline text-primary"
-                    >
-                      <MemberNameWithStatus 
-                        name={getMember(member.fatherId)?.fullName || member.fatherId}
-                        isDead={!!getMember(member.fatherId)?.deathDate}
-                      />
-                    </Link>
-                  ) : member.spouseFatherName ? (
-                    <span className="text-lg font-serif font-bold text-foreground">
-                      {member.spouseFatherName}
-                    </span>
-                  ) : (
-                    <span className="text-muted-foreground">-</span>
-                  )}
-                </div>
-                <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
-                  <h3 className="font-medium text-muted-foreground mb-2 text-sm uppercase tracking-wider">
-                    母亲
-                  </h3>
-                  {member.motherId ? (
-                    <Link
-                      href={`/members/${member.motherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
-                      className="text-lg font-serif font-bold hover:underline text-primary"
-                    >
-                      <MemberNameWithStatus 
-                        name={getMember(member.motherId)?.fullName || member.motherId}
-                        isDead={!!getMember(member.motherId)?.deathDate}
-                      />
-                    </Link>
-                  ) : member.spouseMotherName ? (
-                    <span className="text-lg font-serif font-bold text-foreground">
-                      {member.spouseMotherName}
-                    </span>
-                  ) : (
-                    <span className="text-muted-foreground">-</span>
-                  )}
-                </div>
-                <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
-                  <h3 className="font-medium text-muted-foreground mb-2 text-sm uppercase tracking-wider">
-                    配偶
-                  </h3>
-                  <div className="flex flex-wrap gap-2">
-                    {member.spouseIds?.length > 0 ? (
-                      member.spouseIds.map((spouseId) => (
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div>
+                      <p className="text-xs text-muted-foreground uppercase tracking-widest mb-1">父亲</p>
+                      {member.fatherId ? (
                        <Link
-                          href={`/members/${spouseId}${typeof window !== 'undefined' ? window.location.search : ''}`}
-                          key={spouseId}
-                          className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
+                          href={`/members/${member.fatherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
+                          className="text-lg font-serif font-bold hover:underline text-primary"
                        >
-                          <MemberNameWithStatus 
-                            name={getMember(spouseId)?.fullName || spouseId}
-                            isDead={!!getMember(spouseId)?.deathDate}
+                          <MemberNameWithStatus
+                            name={getMember(member.fatherId)?.fullName || member.fatherId}
+                            isDead={!!getMember(member.fatherId)?.deathDate}
                          />
                        </Link>
-                      ))
-                    ) : (
-                      <span className="text-muted-foreground">无记录</span>
-                    )}
+                      ) : member.spouseFatherName ? (
+                        <span className="text-lg font-serif font-bold text-foreground">
+                          {member.spouseFatherName}
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground">-</span>
+                      )}
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground uppercase tracking-widest mb-1">母亲</p>
+                      {member.motherId ? (
+                        <Link
+                          href={`/members/${member.motherId}${typeof window !== 'undefined' ? window.location.search : ''}`}
+                          className="text-lg font-serif font-bold hover:underline text-primary"
+                        >
+                          <MemberNameWithStatus
+                            name={getMember(member.motherId)?.fullName || member.motherId}
+                            isDead={!!getMember(member.motherId)?.deathDate}
+                          />
+                        </Link>
+                      ) : member.spouseMotherName ? (
+                        <span className="text-lg font-serif font-bold text-foreground">
+                          {member.spouseMotherName}
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground">-</span>
+                      )}
+                    </div>
                  </div>
                </div>
                <div className={`bg-card p-4 rounded-lg ${founderBorderClass}`}>
-                  <h3 className="font-medium text-muted-foreground mb-2 text-sm uppercase tracking-wider">
-                    子女
+                  <h3 className="font-medium text-muted-foreground mb-3 text-sm uppercase tracking-wider">
+                    配偶与子女
                  </h3>
-                  <div className="flex flex-wrap gap-2">
-                    {member.childrenIds?.length > 0 ? (
-                      member.childrenIds.map((childId) => (
-                        <Link
-                          href={`/members/${childId}${typeof window !== 'undefined' ? window.location.search : ''}`}
-                          key={childId}
-                          className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
-                        >
-                          <MemberNameWithStatus 
-                            name={getMember(childId)?.fullName || childId}
-                            isDead={!!getMember(childId)?.deathDate}
-                          />
-                        </Link>
-                      ))
-                    ) : (
-                      <span className="text-muted-foreground">无记录</span>
-                    )}
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div>
+                      <p className="text-xs text-muted-foreground uppercase tracking-widest mb-2">配偶</p>
+                      <div className="flex flex-wrap gap-2">
+                        {member.spouseIds?.length > 0 ? (
+                          member.spouseIds.map((spouseId) => (
+                            <Link
+                              href={`/members/${spouseId}${typeof window !== 'undefined' ? window.location.search : ''}`}
+                              key={spouseId}
+                              className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
+                            >
+                              <MemberNameWithStatus
+                                name={getMember(spouseId)?.fullName || spouseId}
+                                isDead={!!getMember(spouseId)?.deathDate}
+                              />
+                            </Link>
+                          ))
+                        ) : (
+                          <span className="text-muted-foreground">无记录</span>
+                        )}
+                      </div>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground uppercase tracking-widest mb-2">子女</p>
+                      <div className="flex flex-wrap gap-2">
+                        {member.childrenIds?.length > 0 ? (
+                          member.childrenIds.map((childId) => (
+                            <Link
+                              href={`/members/${childId}${typeof window !== 'undefined' ? window.location.search : ''}`}
+                              key={childId}
+                              className="px-3 py-1 bg-muted rounded hover:bg-muted/80 text-sm font-medium"
+                            >
+                              <MemberNameWithStatus
+                                name={getMember(childId)?.fullName || childId}
+                                isDead={!!getMember(childId)?.deathDate}
+                              />
+                            </Link>
+                          ))
+                        ) : (
+                          <span className="text-muted-foreground">无记录</span>
+                        )}
+                      </div>
+                    </div>
                  </div>
                </div>
              </div>
@@ -529,16 +535,26 @@ export default function MemberProfilePage() {
                详细信息
              </h2>
              <div className={`bg-card rounded-lg ${founderBorderClass} p-6 shadow-sm`}>
-                <dl className="grid grid-cols-2 gap-x-8 gap-y-4 text-sm">
+                <dl className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-x-8 gap-y-4 text-sm">
                  <div>
-                    <dt className="text-muted-foreground mb-1">出生日期</dt>
-                    <dd className="font-medium flex items-center gap-2">
-                      {member.birthDate || "-"}
-                      {member.birthDate && member.isLunarDate && (
-                        <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
-                          农历
-                        </span>
-                      )}
+                    <dt className="text-muted-foreground mb-1">生卒</dt>
+                    <dd className="font-medium space-y-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span>出生：{member.birthDate || "-"}</span>
+                        {member.birthDate && member.isLunarDate && (
+                          <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
+                            农历
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span>逝世：{member.deathDate || "-"}</span>
+                        {member.deathDate && member.isLunarDate && (
+                          <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
+                            农历
+                          </span>
+                        )}
+                      </div>
                    </dd>
                  </div>
                  {ageInfo && (
@@ -549,17 +565,6 @@ export default function MemberProfilePage() {
                  )}
                  {member.deathDate && (
                    <>
-                      <div>
-                        <dt className="text-muted-foreground mb-1">逝世日期</dt>
-                        <dd className="font-medium flex items-center gap-2">
-                          {member.deathDate}
-                          {member.isLunarDate && (
-                            <span className="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded border border-amber-200">
-                              农历
-                            </span>
-                          )}
-                        </dd>
-                      </div>
                      <div>
                        <dt className="text-muted-foreground mb-1">谥号</dt>
                        <dd className="font-medium">{member.posthumousName || "-"}</dd>