B2B SaaS 产品授权管理控制台产品系统Vibe Coding

在B2B SaaS领域，软件授权与席位管理是企业客户最核心的运营需求之一。传统方式下，企业管理员往往需要通过邮件、工单或线下表格来管理软件许可分配，导致授权状态不透明、席位超售风险高、操作无审计追溯等问题；同时，多租户架构下的数据隔离、权限范围控制也是B2B系统设计的关键难点。

本项目旨在构建一套企业级产品授权管理控制台，为SaaS平台的企业客户管理员提供一站式的授权可视化、席位分配、用量监控和操作审计能力。产品覆盖合同许可、试用许可、计划许可等多种授权类型，支持按命名用户、设备、积分等多维度用量计量，满足中大型企业对软件资产精细化管理的合规与运营需求。系统支持多组织/多租户上下文切换，不同账号下数据严格按权限范围隔离，典型场景包括：企业IT管理员查看本组织已购产品授权余量、为员工分配软件席位、回收离职用户许可、跨产品追溯授权变更历史记录等。

项目包含以下核心功能模块：
多租户账号与组织切换：支持在不同账号和组织上下文间切换，切换后自动按当前权限范围重新获取数据，服务端缓存按账号+组织维度严格隔离，展示B2B系统多租户数据隔离能力。
产品目录中心：以卡片网格展示企业已购/可分配的SaaS产品列表，显示产品状态（活跃/待生效/已退役）、供应商信息、支持平台、使用维度（席位/设备/积分）及授权元数据。
产品详情与授权汇总：进入单个产品后展示授权全景视图，包括已购数量、已分配数量、可用余量的实时统计，授权类型、订阅者ID、续约日期等合同信息，以及该产品下近期的操作记录时间线。
席位分配管理：支持按产品维度管理命名用户席位分配，提供用户搜索、批量选择、草稿状态保存、分配前容量校验等交互能力，实时提示可用席位不足风险，确保分配操作不超售。
全局操作审计日志：跨产品的审计追踪功能，支持分页浏览、关键词搜索、多字段排序，日志条目包含操作人、操作时间、关联产品、操作类型，并通过vue-i18n提供中英文双语的本地化操作描述。
中英文国际化：完整的双语界面支持，统一管理界面文案、操作日志消息、状态标签等所有用户可见文本。

本人独立负责该控制台前端应用的完整设计与实现，核心工作包括：基于Feature-Sliced思路设计前端分层架构，搭建Vue 3 + TypeScript + Vite工程化体系，实现所有业务页面与交互逻辑，封装可复用的组合式函数，设计多租户缓存隔离机制，编写单元测试与端到端测试用例，并对接GraphQL查询与REST命令混合后端API。

技术栈： Vue 3 Composition API + TypeScript、Vite、Vue Router、Pinia、TanStack Vue Query、Tailwind CSS v4、shadcn-vue组件库、vue-i18n、Vitest

架构与实现亮点：
采用Feature-Sliced分层架构，页面/组合式函数/API层职责清晰，高内聚低耦合；
服务端状态与客户端状态清晰分离：Pinia管理会话信息和筛选偏好，TanStack Vue Query管理服务端数据缓存，缓存键按账号+组织维度隔离，切换租户时自动失效并重新获取对应权限范围的数据；
采用CQRS风格API对接模式：GraphQL处理读取查询（产品、授权、日志），REST处理写入命令（席位变更）；
操作日志通过normalizer层将后端原始事件规范化为前端视图模型，支持多语言消息模板渲染；
席位分配交互支持乐观更新、草稿状态管理和分配前容量预校验，防止超售；
完整质量保障：Vitest单元测试覆盖工具函数、状态store、API客户端和业务逻辑。