fix: 设置页重构——插件层实证 + 系统仪表盘回归 + 宽度用满
- 插件层区块(0.1.9 版面重写时丢失)回归设置页顶部:M* 清单(core-systems/ core-data/core-events 核心保护 + 第三方可卸载),并新增「▶ 安装示例插件」按钮—— 一键安装 护山妖兽 插件(注入事件池 + 年首护山之力),直观演示万物皆是插件 - 系统仪表盘回归:12 张能力卡开关网格(停用即拔插,启用恢复),每个卡片列 desc - 布局根治:.set-row max-width 660 废除(右侧大片空白根因)→ 设置页改为 settings-table 全宽两列 + plugin-grid + sys-grid(auto-fill 240px 填满宽度), 内容不再左靠堆挤,右空白消除 - store 增 setNextToast 公开接口;demo-plugins 从 tests/helpers 移至 engine(renderer 可 import) - 全量 937 测试通过、typecheck/build 通过
This commit is contained in:
@@ -49,6 +49,7 @@ export interface PluginStatus {
|
||||
installed: boolean
|
||||
enabled: boolean
|
||||
protected: boolean
|
||||
description: string
|
||||
dependencies?: string[]
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { CotycPlugin } from '../core/plugin'
|
||||
|
||||
/** 示例内容插件:注入事件池 + 一个护山能力(开发范本) */
|
||||
export const examplePlugin: CotycPlugin = {
|
||||
id: 'demo-peaks',
|
||||
name: '护山妖兽',
|
||||
version: '0.1.0',
|
||||
author: 'demo',
|
||||
description: '示例插件:山鬼妖气事件与护山之力(+2% 战力)。',
|
||||
kind: 'content',
|
||||
install(ctx) {
|
||||
ctx.addCapability({ id: 'demo-guardian', name: '护山之力', version: '0.1.0', desc: '示例:年首山灵庇佑,全族修为小幅精进。' })
|
||||
ctx.onYearStart((w) => {
|
||||
if (w.sysEnabled('demo-guardian')) {
|
||||
for (const c of w.aliveMembers()) {
|
||||
c.realmProgress = Math.min(100, c.realmProgress + 1.5)
|
||||
}
|
||||
}
|
||||
})
|
||||
ctx.addEventPool('demo-peaks', [
|
||||
{
|
||||
id: 'ev-demo-guardian',
|
||||
name: '山鬼怒吼',
|
||||
category: 'daily',
|
||||
weight: 3,
|
||||
text: '夜半山鸣,护山兽影现身墙外——莫非是山中精怪在拜望?',
|
||||
options: [{ label: '蒸饼供奉', hint: '声望+2', eff: { rep: 2 } }]
|
||||
}
|
||||
])
|
||||
},
|
||||
uninstall(ctx) {
|
||||
ctx.removeEventPool('demo-peaks')
|
||||
ctx.removeCapability('demo-guardian')
|
||||
}
|
||||
}
|
||||
|
||||
/** 依赖缺失的坏插件:应被拒绝安装 */
|
||||
export const brokenPlugin: CotycPlugin = {
|
||||
id: 'demo-broken',
|
||||
name: '依赖断链的插件',
|
||||
version: '0.1.0',
|
||||
kind: 'events',
|
||||
description: '故意缺少依赖的示例插件(安装应被拒绝)。',
|
||||
dependencies: ['demo-not-exists'],
|
||||
install() {}
|
||||
}
|
||||
@@ -116,6 +116,7 @@ export class PluginManager {
|
||||
installed: rt.status.installed,
|
||||
enabled: rt.status.enabled,
|
||||
protected: !!p.protected,
|
||||
description: p.description,
|
||||
dependencies: p.dependencies
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { useGameStore } from '../store'
|
||||
import { examplePlugin } from '../../game/engine/demo-plugins'
|
||||
import { SYSTEM_DEFS } from '../../game/engine/capabilities'
|
||||
import { buildBiography } from '../../game/core/biography'
|
||||
|
||||
export default function SettingsPanel() {
|
||||
const world = useGameStore((s) => s.world)
|
||||
@@ -15,89 +18,181 @@ export default function SettingsPanel() {
|
||||
const setSpeed = useGameStore((s) => s.setSpeed)
|
||||
const soundOn = useGameStore((s) => s.soundOn)
|
||||
const toggleSound = useGameStore((s) => s.toggleSound)
|
||||
const setNextToast = useGameStore((s) => s.setNextToast)
|
||||
if (!world) return null
|
||||
|
||||
const hasDemo = world.pluginList().some((p) => p.id === 'demo-peaks')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="card-title">存档与导出</div>
|
||||
<div className="set-row">
|
||||
<span>手动存点(当前第 {slot} 档)</span>
|
||||
<button className="btn btn-sm" onClick={() => void saveNow()}>立即保存</button>
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>回档时间轴(每季自动快照,最近12份)</span>
|
||||
<button className="btn btn-sm" onClick={() => void refreshSnapshots()}>刷新列表</button>
|
||||
</div>
|
||||
{snapshots.length > 0 ? (
|
||||
<div style={{ maxWidth: 660, margin: '6px 0 10px' }}>
|
||||
{snapshots.slice(0, 12).map((sn, i) => (
|
||||
<div key={sn.id} className="set-row" style={{ padding: '6px 4px' }}>
|
||||
<span className={sn.year === world.state.year ? 'gold' : ''}>
|
||||
{sn.year}年{sn.month}月{sn.label !== '自动' ? ` · ${sn.label}` : ''}
|
||||
{sn.year === world.state.year && sn.month === world.state.month ? '(当前)' : ''}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
disabled={sn.year === world.state.year && sn.month === world.state.month}
|
||||
onClick={() => {
|
||||
if (window.confirm(`回卷到 ${sn.year}年${sn.month}月?当前进度会先保存为回档前夕。此操作不可撤销。`)) {
|
||||
void restoreSnapshot(sn.id).then(() => bump())
|
||||
}
|
||||
}}
|
||||
>
|
||||
回卷
|
||||
</button>
|
||||
<div className="settings-wrap">
|
||||
{/* ===== 插件层:万物皆是插件的实证窗口 ===== */}
|
||||
<div className="card settings-card">
|
||||
<div className="card-title">插件层(manifest 清单)</div>
|
||||
<div className="help-text">
|
||||
「万物皆是插件」:系统 / 数据包 / 事件池统一走 CotycPlugin 协议。核心三插件受保护常驻,
|
||||
第三方插件可随时安装/卸载(卸载即全摘钩子)。点击下方体验按钮,立刻注入一个真实插件——
|
||||
事件「山鬼怒吼」将在消息池中定期浮现,同时年首添『护山之力』。
|
||||
</div>
|
||||
<div className="plugin-grid">
|
||||
{world.pluginList().map((p) => (
|
||||
<div key={p.id} className={`plugin-row ${p.protected ? 'proto' : ''}`}>
|
||||
<div className="plugin-id">{p.id}</div>
|
||||
<div className="plugin-info">
|
||||
<b>{p.name}</b>
|
||||
<span className="dim2" style={{ fontSize: '0.8rem' }}>
|
||||
v{p.version} · {p.kind} · {p.description}
|
||||
</span>
|
||||
</div>
|
||||
<div className="plugin-actions">
|
||||
<span className={`tag ${p.protected ? 'gold-t' : p.enabled ? '' : 'bad'}`}>
|
||||
{p.protected ? '核心' : p.enabled ? '已启用' : '已停用'}
|
||||
</span>
|
||||
{!p.protected && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => {
|
||||
world.removePlugin(p.id)
|
||||
bump()
|
||||
}}
|
||||
>
|
||||
卸载
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="dim2" style={{ marginBottom: 8 }}>尚未生成快照(推进时间或保存后自动出现)</div>
|
||||
)}
|
||||
<div className="set-row">
|
||||
<span>导出存档(JSON 文件)</span>
|
||||
<button className="btn btn-sm" onClick={() => void exportSave()}>导出</button>
|
||||
{!hasDemo && (
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => {
|
||||
const r = world.installPlugin(examplePlugin)
|
||||
if (r.ok) {
|
||||
bump()
|
||||
setNextToast('示例插件已安装:事件池注入 + 护山之力生效,可到上方卸载。')
|
||||
} else {
|
||||
setNextToast(`安装失败:${r.reason ?? ''}`)
|
||||
}
|
||||
}}
|
||||
>
|
||||
▶ 安装示例插件(护山妖兽)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>导入存档到当前位置</span>
|
||||
<button className="btn btn-sm" onClick={() => void importSave(slot)}>导入</button>
|
||||
|
||||
{/* ===== 系统仪表盘:12 能力卡启停 ===== */}
|
||||
<div className="card settings-card">
|
||||
<div className="card-title">系统仪表盘(能力卡 · 12 张启停)</div>
|
||||
<div className="sys-grid">
|
||||
{SYSTEM_DEFS.map((s) => {
|
||||
const enabled = world.sysEnabled(s.id)
|
||||
return (
|
||||
<div key={s.id} className={`sys-cell ${enabled ? '' : 'off'}`}>
|
||||
<div className="sys-head">
|
||||
<b>{s.name}</b>
|
||||
<span className="dim2" style={{ fontSize: '0.75rem' }}>{s.id} v{s.version}</span>
|
||||
</div>
|
||||
<div className="dim2" style={{ fontSize: '0.8rem' }}>{s.desc}</div>
|
||||
<button
|
||||
className={`btn btn-sm ${enabled ? 'btn-danger' : 'btn-primary'}`}
|
||||
onClick={() => {
|
||||
world.toggleSystem(s.id)
|
||||
bump()
|
||||
}}
|
||||
>
|
||||
{enabled ? '停用' : '启用'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>刷新存档槽</span>
|
||||
<button className="btn btn-sm" onClick={() => void refreshSlots()}>刷新</button>
|
||||
|
||||
{/* ===== 存档与导出 ===== */}
|
||||
<div className="card settings-card">
|
||||
<div className="card-title">存档与导出</div>
|
||||
<table className="settings-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>手动存点(当前第 {slot} 档)</td>
|
||||
<td><button className="btn btn-sm" onClick={() => void saveNow()}>立即保存</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>回档时间轴(每季自动快照,最近12份)</td>
|
||||
<td><button className="btn btn-sm" onClick={() => void refreshSnapshots()}>刷新列表</button></td>
|
||||
</tr>
|
||||
{snapshots.slice(0, 12).map((sn, i) => (
|
||||
<tr key={sn.id}>
|
||||
<td className={sn.year === world.state.year ? 'gold' : 'dim'}>
|
||||
{sn.year}年{sn.month}月{sn.label !== '自动' ? ` · ${sn.label}` : ''}
|
||||
{sn.year === world.state.year && sn.month === world.state.month ? '(当前)' : ''}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
disabled={sn.year === world.state.year && sn.month === world.state.month}
|
||||
onClick={() => {
|
||||
if (window.confirm(`回卷到 ${sn.year}年${sn.month}月?当前进度会先保存为回档前夕。此操作不可撤销。`)) {
|
||||
void restoreSnapshot(sn.id).then(() => bump())
|
||||
}
|
||||
}}
|
||||
>
|
||||
回卷
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
<td>导出存档(JSON 文件)</td>
|
||||
<td><button className="btn btn-sm" onClick={() => void exportSave()}>导出</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>导入存档到当前位置</td>
|
||||
<td><button className="btn btn-sm" onClick={() => void importSave(slot)}>导入</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>音效(合成音:鼓点·钟鸣·纸韵)</td>
|
||||
<td>
|
||||
<button className="btn btn-sm" onClick={toggleSound}>{soundOn ? '开(点击关)' : '关(点击开)'}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>暂停时间</td>
|
||||
<td><button className="btn btn-sm" onClick={() => setSpeed(0)}>停止流转</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>回到主菜单(会先自动保存)</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => {
|
||||
void saveNow('离席前').then(() => {
|
||||
setSpeed(0)
|
||||
go('boot')
|
||||
})
|
||||
}}
|
||||
>
|
||||
主菜单
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>音效(合成音:鼓点·钟鸣·纸韵)</span>
|
||||
<button className="btn btn-sm" onClick={toggleSound}>
|
||||
{soundOn ? '开(点击关)' : '关(点击开)'}
|
||||
</button>
|
||||
|
||||
<div className="card settings-card">
|
||||
<div className="card-title">玩法说明</div>
|
||||
<div className="help-text">
|
||||
· 日常以「月」流转:成员修炼、建筑产出、往事兴替、事件沓来。<br />
|
||||
· 「宗」字牌成员可闭关、服丹、冲击瓶颈;瓶颈即修为满百者,成功率看灵气、丹药与家主督学。<br />
|
||||
· 「探秘」选人结队远行,途中见战报;凯旋带回灵石、法帖、法器诸宝。<br />
|
||||
· 「外交」与四邻结好联姻;仇雠之族隔岁来犯,打得赢名望大涨,打不赢蚀钱伤丁。<br />
|
||||
· 「史书」自动记述繁华与凋零——百年之后,后人翻开这一卷家族志,见代代薪火、历历雪泥。
|
||||
</div>
|
||||
<div className="dim2" style={{ marginTop: 8 }}>版本 0.1.12 · Chronicle of the Immortal Clan</div>
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>暂停时间</span>
|
||||
<button className="btn btn-sm" onClick={() => setSpeed(0)}>停止流转</button>
|
||||
</div>
|
||||
<div className="set-row">
|
||||
<span>回到主菜单(会先自动保存)</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => {
|
||||
void saveNow('离席前').then(() => {
|
||||
setSpeed(0)
|
||||
go('boot')
|
||||
})
|
||||
}}
|
||||
>
|
||||
主菜单
|
||||
</button>
|
||||
</div>
|
||||
<div className="card-title" style={{ marginTop: 20 }}>玩法说明</div>
|
||||
<div className="help-text">
|
||||
· 日常以「月」流转:成员修炼、建筑产出、往事兴替、事件沓来。<br />
|
||||
· 「宗」字牌成员可闭关、服丹、冲击瓶颈;瓶颈即修为满百者,成功率看灵气、丹药与家主督学。<br />
|
||||
· 「探秘」选人结队远行,途中见战报;凯旋带回灵石、法帖、法器诸宝。<br />
|
||||
· 「外交」与四邻结好联姻;仇雠之族隔岁来犯,打得赢名望大涨,打不赢蚀钱伤丁。<br />
|
||||
· 「史书」自动记述繁华与凋零——百年之后,后人翻开这一卷家族志,见代代薪火、历历雪泥。
|
||||
</div>
|
||||
<div className="dim2">版本 0.1.11 · Chronicle of the Immortal Clan</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
void buildBiography
|
||||
|
||||
@@ -61,6 +61,7 @@ export interface GameStore {
|
||||
toggleSound: () => void
|
||||
facade?: GameFacade
|
||||
advancing: boolean
|
||||
setNextToast: (msg: string) => void
|
||||
act: (name: ActName, payload: import('../game/engine/api').ActPayload) => boolean
|
||||
}
|
||||
|
||||
@@ -87,6 +88,7 @@ function stopTimer(): void {
|
||||
export const useGameStore = create<GameStore>((set, get) => ({
|
||||
facade: undefined as GameFacade | undefined,
|
||||
advancing: false,
|
||||
setNextToast: (msg: string) => setNextToast(msg),
|
||||
screen: 'boot',
|
||||
world: null,
|
||||
slot: 1,
|
||||
|
||||
@@ -1374,16 +1374,91 @@ body {
|
||||
/* ============================================================
|
||||
设置 & 杂项
|
||||
============================================================ */
|
||||
.set-row {
|
||||
.settings-wrap {
|
||||
max-width: 100%;
|
||||
}
|
||||
.settings-card {
|
||||
margin-bottom: 16px;
|
||||
background: rgba(20, 15, 9, 0.6);
|
||||
border: 1px solid rgba(120, 98, 55, 0.3);
|
||||
}
|
||||
.settings-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.settings-table td {
|
||||
padding: 9px 8px;
|
||||
border-bottom: 1px dashed rgba(144, 122, 76, 0.25);
|
||||
color: #cdbd97;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.settings-table td:last-child {
|
||||
width: 220px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.settings-table tr:hover td {
|
||||
background: rgba(201, 162, 39, 0.04);
|
||||
}
|
||||
/* 插件行网格 */
|
||||
.plugin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.plugin-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 11px 4px;
|
||||
border-bottom: 1px dashed rgba(144, 122, 76, 0.3);
|
||||
max-width: 660px;
|
||||
color: #cdbd97;
|
||||
font-size: 0.96rem;
|
||||
padding: 9px 12px;
|
||||
background: rgba(242, 233, 212, 0.05);
|
||||
border: 1px solid rgba(120, 98, 55, 0.25);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.plugin-id {
|
||||
font-size: 0.78rem;
|
||||
color: #8a7f6a;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.plugin-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.plugin-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.plugin-row.proto {
|
||||
border-left: 2px solid var(--gold);
|
||||
}
|
||||
/* 系统能力卡网格(12 张,填满宽度消除右侧空白) */
|
||||
.sys-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.sys-cell {
|
||||
background: rgba(242, 233, 212, 0.05);
|
||||
border: 1px solid rgba(120, 98, 55, 0.25);
|
||||
border-radius: 3px;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.sys-cell.off {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.sys-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.toast {
|
||||
|
||||
Reference in New Issue
Block a user