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 通过

src/renderer/game/core/plugin.ts

@@ -49,6 +49,7 @@ export interface PluginStatus {
   installed: boolean
   enabled: boolean
   protected: boolean
+  description: string
   dependencies?: string[]
 }
 

src/renderer/game/engine/demo-plugins.ts

@@ -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() {}
+}

src/renderer/game/engine/pluginManager.ts

@@ -116,6 +116,7 @@ export class PluginManager {
           installed: rt.status.installed,
           enabled: rt.status.enabled,
           protected: !!p.protected,
+          description: p.description,
           dependencies: p.dependencies
         }
       })

src/renderer/ui/panels/SettingsPanel.tsx

@@ -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="settings-wrap">
-      <div className="card-title">存档与导出</div>
+      {/* ===== 插件层：万物皆是插件的实证窗口 ===== */}
-      <div className="set-row">
+      <div className="card settings-card">
-        <span>手动存点（当前第 {slot} 档）</span>
+        <div className="card-title">插件层（manifest 清单）</div>
-        <button className="btn btn-sm" onClick={() => void saveNow()}>立即保存</button>
+        <div className="help-text">
-      </div>
+          「万物皆是插件」：系统 / 数据包 / 事件池统一走 CotycPlugin 协议。核心三插件受保护常驻，
-      <div className="set-row">
+          第三方插件可随时安装/卸载（卸载即全摘钩子）。点击下方体验按钮，立刻注入一个真实插件——
-        <span>回档时间轴（每季自动快照，最近12份）</span>
+          事件「山鬼怒吼」将在消息池中定期浮现，同时年首添『护山之力』。
-        <button className="btn btn-sm" onClick={() => void refreshSnapshots()}>刷新列表</button>
+        </div>
-      </div>
+        <div className="plugin-grid">
-      {snapshots.length > 0 ? (
+          {world.pluginList().map((p) => (
-        <div style={{ maxWidth: 660, margin: '6px 0 10px' }}>
+            <div key={p.id} className={`plugin-row ${p.protected ? 'proto' : ''}`}>
-          {snapshots.slice(0, 12).map((sn, i) => (
+              <div className="plugin-id">{p.id}</div>
-            <div key={sn.id} className="set-row" style={{ padding: '6px 4px' }}>
+              <div className="plugin-info">
-              <span className={sn.year === world.state.year ? 'gold' : ''}>
+                <b>{p.name}</b>
-                {sn.year}年{sn.month}月{sn.label !== '自动' ? ` · ${sn.label}` : ''}
+                <span className="dim2" style={{ fontSize: '0.8rem' }}>
-                {sn.year === world.state.year && sn.month === world.state.month ? '（当前）' : ''}
+                  v{p.version} · {p.kind} · {p.description}
-              </span>
+                </span>
-              <button
+              </div>
-                className="btn btn-sm"
+              <div className="plugin-actions">
-                disabled={sn.year === world.state.year && sn.month === world.state.month}
+                <span className={`tag ${p.protected ? 'gold-t' : p.enabled ? '' : 'bad'}`}>
-                onClick={() => {
+                  {p.protected ? '核心' : p.enabled ? '已启用' : '已停用'}
-                  if (window.confirm(`回卷到 ${sn.year}年${sn.month}月？当前进度会先保存为回档前夕。此操作不可撤销。`)) {
+                </span>
-                    void restoreSnapshot(sn.id).then(() => bump())
+                {!p.protected && (
-                  }
+                  <button
-                }}
+                    className="btn btn-sm btn-danger"
-              >
+                    onClick={() => {
-                回卷
+                      world.removePlugin(p.id)
-              </button>
+                      bump()
+                    }}
+                  >
+                    卸载
+                  </button>
+                )}
+              </div>
             </div>
           ))}
         </div>
-      ) : (
+        {!hasDemo && (
-        <div className="dim2" style={{ marginBottom: 8 }}>尚未生成快照（推进时间或保存后自动出现）</div>
+          <button
-      )}
+            className="btn btn-primary btn-sm"
-      <div className="set-row">
+            onClick={() => {
-        <span>导出存档（JSON 文件）</span>
+              const r = world.installPlugin(examplePlugin)
-        <button className="btn btn-sm" onClick={() => void exportSave()}>导出</button>
+              if (r.ok) {
+                bump()
+                setNextToast('示例插件已安装：事件池注入 + 护山之力生效，可到上方卸载。')
+              } else {
+                setNextToast(`安装失败：${r.reason ?? ''}`)
+              }
+            }}
+          >
+            ▶ 安装示例插件（护山妖兽）
+          </button>
+        )}
       </div>
-      <div className="set-row">
+
-        <span>导入存档到当前位置</span>
+      {/* ===== 系统仪表盘：12 能力卡启停 ===== */}
-        <button className="btn btn-sm" onClick={() => void importSave(slot)}>导入</button>
+      <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>
+      <div className="card settings-card">
-        <button className="btn btn-sm" onClick={toggleSound}>
+        <div className="card-title">玩法说明</div>
-          {soundOn ? '开（点击关）' : '关（点击开）'}
+        <div className="help-text">
-        </button>
+          · 日常以「月」流转：成员修炼、建筑产出、往事兴替、事件沓来。<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

src/renderer/ui/store.ts

@@ -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,

src/renderer/ui/styles.css

@@ -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;
+  padding: 9px 12px;
-  border-bottom: 1px dashed rgba(144, 122, 76, 0.3);
+  background: rgba(242, 233, 212, 0.05);
-  max-width: 660px;
+  border: 1px solid rgba(120, 98, 55, 0.25);
-  color: #cdbd97;
+  border-radius: 3px;
-  font-size: 0.96rem;
+}
+.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 {

tests/helpers/examplePlugin.ts

@@ -1,4 +1,4 @@
-import { CotycPlugin } from '../src/renderer/game/core/plugin'
+import { CotycPlugin } from '../../src/renderer/game/core/plugin'
 
 /** 示例内容插件：注入事件池 + 一个护山能力（开发范本） */
 export const examplePlugin: CotycPlugin = {