fix: 史书与先人簿去定宽(右空白根治)+ 史书按年分组眉

- chronicle-list max-width:760 废除 → 100% 全宽;战报匣/战事行 720 定宽移除
- 史书增强结构:按年分组眉(X年 · N条 · 生/殇/突破统计),月列升级 ch-month,
  全宽下阅读秩序保留;最早年份倒序
- GenealogyPanel 先人簿 set-row 760 定宽移除
- 全局扫描同类定宽:设置(上轮已修)/史书/谱系全部补齐,左右不再留白
- 937 测试全绿、typecheck/build 通过
This commit is contained in:
2026-08-23 12:33:25 +08:00
parent 6ba4766f07
commit f17d856f98
3 changed files with 63 additions and 12 deletions
+40 -5
View File
@@ -16,6 +16,36 @@ const CAT_NAME: Record<string, string> = {
misc: '家常'
}
interface ChEntry {
id: string
year: number
month: number
category: string
important: boolean
text: string
}
function grouped(entries: ChEntry[]): { year: number; items: ChEntry[] }[] {
const map = new Map<number, typeof entries>()
for (const e of entries) {
const g = map.get(e.year) ?? []
g.push(e)
map.set(e.year, g)
}
return [...map.entries()].sort((a, b) => b[0] - a[0]).map(([year, items]) => ({ year, items }))
}
function statOf(g: { items: { category: string }[] }): string {
const births = g.items.filter((i) => i.category === 'birth').length
const deaths = g.items.filter((i) => i.category === 'death').length
const bt = g.items.filter((i) => i.category === 'breakthrough').length
const parts: string[] = []
if (births) parts.push(`${births}`)
if (deaths) parts.push(`${deaths}`)
if (bt) parts.push(`突破${bt}`)
return parts.join(' · ')
}
export default function ChroniclePanel() {
const world = useGameStore((s) => s.world)
const revision = useGameStore((s) => s.revision)
@@ -46,21 +76,26 @@ export default function ChroniclePanel() {
))}
</div>
<div className="chronicle-list">
{entries.map((e) => (
{grouped(entries).map((g) => (
<div key={g.year}>
<div className="ch-yearbar">{g.year} <span className="dim2">{g.items.length} · {statOf(g)}</span></div>
{g.items.map((e) => (
<div key={e.id} className={`ch-item ${e.important ? 'gold' : ''}`}>
<span className="ch-year">{e.year}{e.month}</span>
<span className="ch-month">{e.month}</span>
<span>
<span className="tag" style={{ marginRight: 8 }}>{CAT_NAME[e.category] ?? e.category}</span>
{e.text}
</span>
</div>
))}
</div>
))}
{entries.length === 0 && <div className="dim2"></div>}
</div>
<div className="card-title" style={{ fontSize: '1.02rem', marginTop: 22 }}></div>
{battle ? (
<div className="mission-card" style={{ maxWidth: 720 }}>
<div className="mission-card">
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<b>{battle.title}</b>
<span className="dim2" style={{ fontSize: '0.85rem' }}>
@@ -85,9 +120,9 @@ export default function ChroniclePanel() {
) : battles.length === 0 ? (
<div className="dim2" style={{ marginBottom: 6 }}></div>
) : (
<div style={{ maxWidth: 720 }}>
<div>
{battles.map((b) => (
<div key={b.id} className="set-row" style={{ maxWidth: 720 }}>
<div key={b.id} className="set-row">
<span>
<span className="ch-year" style={{ marginRight: 10 }}>{b.year}{b.month}</span>
{b.title}
+1 -1
View File
@@ -77,7 +77,7 @@ export default function GenealogyPanel() {
{deceasedTab &&
deceased.map((c) => (
<div key={c.id} className="set-row" style={{ maxWidth: 760 }}>
<div key={c.id} className="set-row">
<span>
<span className="ch-year" style={{ marginRight: 10 }}>{c.deathYear}</span>
{c.name} · {c.gender === 'male' ? '男' : '女'} · {c.generation}
+17 -1
View File
@@ -1029,7 +1029,7 @@ body {
史书
============================================================ */
.chronicle-list {
max-width: 760px;
max-width: 100%;
background: linear-gradient(180deg, #f4ecd9, #e9dabc);
color: var(--ink);
border: 1px solid #b9a77e;
@@ -1049,6 +1049,22 @@ body {
.ch-item:last-child {
border-bottom: none;
}
.ch-yearbar {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 4px 4px;
border-bottom: 1px solid rgba(140, 110, 60, 0.45);
color: #a04b33;
font-size: 1.04rem;
letter-spacing: 3px;
font-weight: 700;
}
.ch-month {
color: #8a7c5e;
min-width: 40px;
white-space: nowrap;
}
.ch-year {
color: #a04b33;
white-space: nowrap;