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
+45 -10
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,13 +76,18 @@ export default function ChroniclePanel() {
))}
</div>
<div className="chronicle-list">
{entries.map((e) => (
<div key={e.id} className={`ch-item ${e.important ? 'gold' : ''}`}>
<span className="ch-year">{e.year}{e.month}</span>
<span>
<span className="tag" style={{ marginRight: 8 }}>{CAT_NAME[e.category] ?? e.category}</span>
{e.text}
</span>
{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-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>}
@@ -60,7 +95,7 @@ export default function ChroniclePanel() {
<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}