fix: 史书与先人簿去定宽(右空白根治)+ 史书按年分组眉
- chronicle-list max-width:760 废除 → 100% 全宽;战报匣/战事行 720 定宽移除 - 史书增强结构:按年分组眉(X年 · N条 · 生/殇/突破统计),月列升级 ch-month, 全宽下阅读秩序保留;最早年份倒序 - GenealogyPanel 先人簿 set-row 760 定宽移除 - 全局扫描同类定宽:设置(上轮已修)/史书/谱系全部补齐,左右不再留白 - 937 测试全绿、typecheck/build 通过
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}代
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user