在开发与维护 PanelAI（脑度）这一 AI 原生算力调度管理系统的过程中，除了底层的容器调度、Traefik 路由和 Go 语言后端架构外，UI 交互与用户体验（UX）同样是决定产品成熟度的关键。今天和大家分享最近针对前后台登录系统进行的架构与 UI 优化重构。
🛠️ 一、 为什么要做这次登录页面重构？
在早期版本中，PanelAI 的前台与后台登录入口逻辑较为模糊，主要依赖“是否有注册入口”来区分用户端与管理端。这种设计在实际使用中存在隐患：
-
用户认知混淆：新手用户容易混淆前台与后台的权限边界。
-
安全隐患：管理端如果暴露了过多的第三方登录与扩展入口，会增加攻击面。 针对这些痛点，我花了一整个下午对前后台登录逻辑和页面视觉进行了彻底的重构。
💻 二、 用户端 (Frontend) 登录：兼顾极客趣味与视觉交互
用户端面向大众开发者和算力使用者，设计上需要降低使用门槛并提升趣味性：
-
视觉符号传达：引入“五指”设计理念，致敬开发者靠双手拼搏的精神。
-
状态驱动的 DOM 动效：通过 Vue3 动态监听输入框状态。鼠标跟随、密码输入时的“闭眼”动画、以及表单聚焦时暂停/反向滚动的背景动效，使枯燥的登录页变得生动。
-
认证生态扩展：规划并预留了微信、QQ、GitHub、Google 等主流 OAuth 授权与扫码登录接口。
🛡️ 三、 管理端 (Backend) 登录：极简主义与安全至上
管理端作为整个集群的命脉，核心原则是“越少绑定，越安全”：
-
剥离冗余组件：去除了所有第三方社交登录与扫码登录，仅保留最基础、最稳妥的账号密码验证。
-
单向隔离策略：用户端页面不公开任何管理端入口，确保管理后台的隐藏性与安全性。
-
价值精准传达：围绕 PanelAI 的核心：GPU 算力、节点管理、镜像调度与网络配置，重构了管理端的登录引导文案。
📦 总结
做产品就像打磨一件工艺品。从后端架构设计到前端像素级的细节调整，每一步都需要一点点去“抠”。希望这次 PanelAI 登录模块的重构思路，能给正在开发类似管理面板或 SaaS 系统的开发者们带来一些灵感。欢迎大家交流探讨！