公会界面是多个系统的交叉口
公会界面不只是成员列表。它包含申请、审批、职位、公告、捐献、商店、活动、聊天、红点、权限和跨服状态。客户端如果把它当成一个大页面写，几次版本后就会出现谁都不敢改的巨型脚本：某个按钮的可见性依赖职位，某个红点依赖活动，某个列表依赖分页，某个弹窗又会修改成员状态。
公会 UI 的关键是把“公会事实”和“页面表现”分开。服务端提供公会当前事实：我是否在公会、我的职位、成员列表版本、申请列表、活动状态。客户端根据事实生成不同页面，而不是让每个按钮直接问服务端字段。
flowchart TD
A[公会快照 GuildSnapshot] --> B[权限计算器]
A --> C[页面 ViewModel]
B --> C
C --> D[首页]
C --> E[成员列表]
C --> F[申请审批]
C --> G[捐献/商店]
C --> H[活动入口]
I[成员操作事务] --> A
J[推送事件] --> A
先定义玩家所处的公会态
玩家可能处在多个状态：未加入公会、已申请等待中、被邀请、已加入普通成员、官员、会长、公会解散中、被踢出但客户端未刷新。每个状态能看到的入口不同。不要用 guildId > 0 判断一切。
可以定义一个 GuildPresenceState：NoGuild、Applying、Invited、Member、Officer、Leader、KickedPendingRefresh、Disbanded。页面根节点根据这个状态选择不同内容。这样玩家被踢出后，再打开公会商店不会继续显示旧数据；申请被拒后，也能回到推荐公会列表。
状态切换要考虑推送和主动刷新。比如会长把玩家提升为官员，客户端收到推送后应局部刷新权限，而不是要求玩家重进页面。相反，如果推送丢失，页面重新打开时也要主动拉取快照，避免权限长期错误。
权限不要散落在按钮里
公会职位决定很多操作：改公告、审批申请、踢人、任命、发起活动、使用资金。最糟糕的写法是每个按钮自己判断 role >= officer。当策划新增“精英成员可发起集结”时，几十处判断都会出错。
客户端可以有一个权限计算器，把服务端职位、功能配置、公会等级、活动状态合成一组权限：CanEditNotice、CanApproveJoin、CanKickMember、CanPromote、CanOpenRaid。UI 只消费权限结果。按钮不可用时要能显示原因，而不只是灰掉。
权限最终仍由服务端校验。客户端权限只负责展示和减少无效点击。任何成员操作都要处理服务端拒绝，因为职位可能在点击前已经变化。
成员列表要按版本刷新
公会成员列表可能有几十到几百人，状态变化频繁：上线、下线、贡献变化、职位变化、战力变化。每次打开都全量拉取可以简单，但会浪费流量，也容易让滚动位置跳动。
更稳的方式是服务端返回成员列表版本号和分页数据。客户端缓存当前列表，收到成员更新事件时按成员 ID 局部更新。如果版本差距太大或分页缺失，再全量刷新。列表排序也要明确：职位、在线、贡献、战力还是加入时间。排序规则最好由配置或服务端字段统一。
成员行组件要稳定。头像、名称、职位、贡献、在线状态、操作按钮都可能变化，但行高不应变化。操作菜单使用弹出层，不要把所有按钮塞进行里，否则移动端会显得拥挤且误触严重。
申请审批要防止重复操作
官员审批申请时，多个官员可能同时操作同一条申请。客户端点击同意后应把该申请置为处理中，服务端返回成功后移除；如果返回“已被处理”，也应移除并提示。不要把它当成错误留在列表里。
批量审批更要小心。一次同意 20 个申请，可能只有 12 个成功，其他因为公会满员或申请过期失败。客户端应展示汇总结果，并刷新申请列表。不要为了图省事把批量操作做成 20 次弹窗。
审批列表的红点也要和列表快照一致。入口显示 5 个申请，打开只有 0 个，会让官员很困惑。可以在入口红点上记录申请列表版本，打开页面后用最新结果覆盖。
公告编辑是一个小型文本系统
公会公告涉及输入法、敏感词、长度限制、换行、表情、复制粘贴。客户端需要在输入框本地做长度提示，但最终以服务端校验为准。中文、英文、emoji 的长度计算要和服务端约定，否则玩家会看到“本地没超，提交失败”。
编辑公告时最好保留草稿，提交成功后再更新正式公告。提交失败时不要清空输入。官员权限变化时，如果玩家正在编辑，应提示权限已变更并禁止提交，而不是让保存按钮一直转。
活动入口和商店不要互相污染
公会活动、捐献、商店都挂在公会界面里，但数据生命周期不同。活动可能按天刷新，商店按周刷新，捐献按个人每日刷新。客户端不要用一个“大刷新”把所有数据一起拉，否则打开公会首页会变慢。
首页可以先展示公会基础信息和关键红点，玩家点进具体页签再拉取对应数据。常用页签可以缓存短时间，活动结算或跨天时通过事件失效。这样既减少网络压力，也避免某个活动接口失败拖垮整个公会界面。
退出、解散和被踢要有清理流程
玩家退出公会后，客户端要清理公会聊天频道、红点、缓存成员列表、商店状态、活动入口和主界面公会徽章。很多项目只清了 guildId，导致玩家退出后还能看到旧公告或旧红点。
被踢出更特殊。玩家可能正在公会界面内操作，突然收到被踢推送。此时应关闭敏感弹窗，回到无公会状态，并提示原因。不要让玩家继续停留在成员列表里点击按钮，最后得到一串失败提示。
小结
公会 UI 的复杂度来自权限、成员、活动和社交状态交织。客户端用快照、权限计算器、分页列表和事务处理把边界拆清楚，界面就能承受持续扩展。否则每加一个职位或活动，都会让旧页面多一层看不见的条件判断。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
我习惯在公会调试面板里显示当前公会态、我的职位、权限列表、成员列表版本、申请列表版本和最近一次推送事件。它能把“我为什么看不到按钮”这种问题从主观争论变成可验证的数据。
继续阅读
探索更多技术文章
浏览归档，发现更多关于系统设计、工具链和工程实践的内容。