设计草图 v1 · 2026-07-30

右侧 Panel 改革:从万能容器,到情境式布局

当前 DesktopConsolePanel 是一个"垂直滚动的万能容器",12 个 tab 共享同一种布局。 改革核心:让 panel 根据 activeTab 切换"模式"——拍卖/行囊/冒险/江湖各有自己的信息架构。

01现状:信息为什么"挤"

三种痛叠加,不是单一问题

单列垂直滚动

所有 tab 强塞同一种"上下滚"模式——拍卖的"标的+多人操作台"被压成竖排,失去横向协作感。

详情类与概览类混居

行囊里 BaggageDetailPanel(474 行) + ItemDetailBody(367 行) 和 BaggageGrid 同屏出现,一屏拉到底 1000+ 行。

tab 多,二级入口消失

12 个 tab 平铺,二级玩法(江湖的议事/纷争/师徒/夜巡)挤进同一行,文字越来越小。

12个 tab横屏右侧
474行BaggageDetailPanel
6个子组件AdventureTab 内堆叠
7个江湖子玩法挤同一个 tab

02布局对比:现状 vs 之后

同一个横屏 viewport,左侧 sidebar 和中央 MainHall 完全不动;右侧 panel 按 tab 切换形态

中央地图(MainHallPanel) 现在:万能 panel 之后:情境式 panel
现在 单列垂直滚动,信息堆叠 tongfu-app · landscape MainHallPanel · 客栈大堂 账本 员工 菜谱 后院 厨房 冒险 行囊 设施 拍卖 江湖 联机 更多 经营总览 · 当日营收 1284 文 客流 23 · 翻台 1.8 · 好评 +2 员工状态 · 老白值班 疲劳 32% · 心情 良好 江湖事件 · 衡山派来访 议事坛待办 1 · 纷争坛待办 2 行囊 · 暴雨梨花针(传说) 暴击 +12 · 攻速 +8% + 还有 6 个模块,继续往下滚 ↓ ▸ 12 个 tab 同布局,所有玩法被压成"上下滚" 之后 panel 按 activeTab 切形态,每个 tab 有自己的信息架构 tongfu-app · landscape · tab=baggage MainHallPanel 经营 账本 员工 菜谱 后院 江湖 冒险 行囊 江湖 拍卖 系统 设施 联机 账册 更多 物品 47 件 暴雨梨花针 传说 · 武器 玄铁剑 史诗 · 武器 金丝软甲 稀有 · 防具 疗伤圣药 消耗品 ↑↓ 滚动查看 43 件 暴雨梨花针 · 详情 暴击率 +12% · 攻速 +8% 装备槽:暗器 · 等级 38 可用 词条 致命一击 穿透 +15 轻如鸿毛 攻速 +8% 装备 对比 出售 来源:七侠镇副本 · 第 3 章 已有 1 件同款,可合成升级 ▸ 行囊 tab:列表 30% + 详情 70% 两栏;顶部 tab 按"经营/江湖/系统"分组

03四个典型 tab 的专属布局

不是"套模板",是给每种玩法它本来就该有的形态

行囊 列表 + 详情

参考 dota2 / 暗黑装备页。两栏布局,左侧概览+筛选,右侧物品详情,操作始终可见。

筛选 全部 武器 防具 暗器 杂物 物品列表 暴雨梨花针传说 玄铁剑史诗 金丝软甲稀有 疗伤圣药消耗 ↑↓ 滚 43 件 暴雨梨花针 传说 · 暗器 · 等级 38 暴击 +12% · 攻速 +8% 攻 168 · 穿透 12 · 敏捷 24 词条 4 / 4 · 套装:七侠套装(1/3) 词条 致命一击 穿透 +15 轻如鸿毛 攻速 +8% 装备 对比 出售 精炼 来源:七侠镇副本 · 第 3 章 · 已有同款,可合成

拍卖 标的 + 操作台

你已做过的"操作台"思路。标的(上)+多人操作台(下)分上下两半,跟现有 AuctionConsoleScreen 对齐。

标的 · 第 3 件 玄铁重剑 史诗 · 武器 · 起拍 800 文 攻 +45 · 暴击 +8% · 词条 3 当前最高出价:1,240 文 · 衡山派 出价 1,300 文 观察线索 查看对手 操作台 · 同台玩家 衡山派 出价 1,240 华山派 观察中 嵩山派 出局 丐帮 出价 1,100 少林 退场 活动记录 14:32 衡山派出价 1,240 14:31 嵩山派退场 14:28 你出价 1,100

冒险 地图 + 决策

上 50% 路线地图(视觉焦点)+ 下 50% 决策简报(操作焦点)。地图本来就是中心,不该被压成"上方小卡"。

七侠镇 · 第 3 章 · 已行进 60% 起点 已过 已过 当前 下一步 Boss 终点 下一步决策 遭遇衡山剑客 对方三人,等级 36-40,战力估算 4,200 你的队伍:白展堂 + 郭芙蓉 · 战力 3,800 正面对决(风险高) 迂回包抄(稳) 撤退补给(下次再战)

江湖 二级 nav + 玩法

7 个子玩法(议事/纷争/师徒/夜巡/仲裁/悬赏/密信)不该挤同一个 tab 内,左 30% 二级 nav,右 70% 玩法内容。

江湖事 议事坛 3 纷争坛 2 师徒会 夜巡哨 仲裁堂 悬赏栏 密信匣 1 议事坛 门派来访 · 待决 3 件 衡山派请求借道 关系 -10 · 拒绝将影响声望 · 接受可收 200 文 接受 婉拒 华山弟子求入门 资质优良 · 入门后厨 +1 · 需师傅 1 名 收下 婉拒 嵩山派下战书 3 日后约战 · 应战/回避/求和 三选一 应战 求和 ↑↓ 滚 3 / 3 · 今日已处理 5

04哪些 tab 不动

不是所有玩法都要复杂化——简单 tab 保持现状,改的是路由,不是每个 tab 内部

厨房 / 后院 / 菜谱

单页信息为主,目前布局够用。

保持

账本 / 设施 / 员工

表格式信息,顶部加 sticky 指标条即可。

小改

联机大厅

已有 PeerLobby 卡片流,延续现有形态。

保持

系统 / 更多

入口/设置类,小图标网格已经够清晰。

保持

05实施路径

3 步走,5 天内交付。不动 MainHallPanel 和中央地图。

  1. Step 1 · 抽 panel 容器层 0.5d

    把 DesktopConsolePanel 当前"switch(activeTab) return JSX"改写成"按 mode 路由":拆出 baggageMode / auctionMode / adventureMode / jianghuMode / simpleMode 五个 layout 组件。MainHallPanel 一行不动。

  2. Step 2 · 改写 4 个典型 tab 3d

    行囊 / 拍卖 / 冒险 / 江湖 各自接对应 layout。Baggage 的 BaggageDetailPanel 拆成"列表 item + 详情 body",在 layout 内两栏排;Auction 直接复用 AuctionConsoleScreen 拆"标的 + 操作台";Adventure 拆"路线地图 + 决策简报";Jianghu 拆"二级 nav + 玩法"。

  3. Step 3 · 顶部分组 + 视觉规范 1.5d

    tab 顶部按"经营/江湖/系统"分组(细字 label 隔开);其它简单 tab 加 sticky 指标条;视觉规范沿用"客栈拟物"调性(米黄/暖橙/古风纹),不引入新色板。

06风险与取舍

几个需要拍板的边界

视口宽度
两栏布局要求右侧 panel ≥ 480px。如果横屏 < 1280px 还需要降级,建议中等屏仍给两栏,只是列宽更窄。
玩家习惯
老用户习惯了"行囊就一长列",改两栏需要一次性迁移。建议先在"更多"或快捷入口里加新模式,给 1 个版本过渡。
竖屏
手机 PortraitWorkspacePanel 暂不动,等横屏稳定后再统一考虑。竖屏本来就单列,信息密度不同。
已有 tsc 错误
项目目前 60+ 个旧 tsc 错误,本次重构不新增不修复(AGENTS.md §8.7)。Step 2 改写后做局部 lint,确保未引入新错。
性能
两栏布局多渲染一次列表。Baggage 列表用 useMemo + 虚拟滚动(react-window 或自实现)可解决,先看实际卡顿再优化。

→下一步,等你拍板

A · 推荐

直接走 B 为主方案。我按 Step 1-3 推进,5 天内交付 demo 截图给你过目。

B · 保守

先只做行囊 + 江湖两个。验证效果后再决定要不要铺到拍卖/冒险。

C · 再聊聊

看完对比图先不决策。我针对某个 tab 单独出更细的稿(交互/微动效/响应式)。