2.9 KiB
2.9 KiB
2026-05-14 工作记录
修复登录页面CSS样式缺失
问题:登录页面(login page)使用了大量CSS类名(.login-center-wrapper, .login-form-card, .role-selector, .role-option 等),但 main.css 中完全没有这些类的定义,导致登录页看起来像裸 HTML,所有元素堆在左上角。
修复:在 styles/main.css 末尾添加了完整的登录页样式(约200行),包括:
- 登录页整体布局(居中、渐变背景)
- 品牌区域样式(TalkingQ logo、标语)
- 登录卡片(白色卡片、圆角、阴影)
- 角色选择器(三列角色卡片,选中状态高亮)
- 表单输入框(带图标、密码切换按钮)
- 记住登录状态复选框
- 登录按钮(全宽、大号)
- 页脚链接
- 移动端响应式适配
根因:之前开发时只写了登录页的 HTML/JS 结构,忘记写对应的 CSS 样式。类似问题已在智能体开发页面(agent-dev.js)出现过一次,这次是登录页面。
修复侧边栏公司导航CSS样式缺失
问题:侧边栏"设备管理"区域的公司列表(.company-nav-item, .company-badge, .company-submenu, .submenu-item)完全没有CSS定义,导致公司名称、设备数量角标、设备管理/OTA升级子菜单都是纯文本堆叠,没有布局、没有图标、没有交互样式。
修复:在 styles/main.css 登录页样式之后添加了完整的公司导航样式,包括:
- 公司项(company-nav-item):flex布局、hover效果、active选中高亮(绿色背景)
- 设备数量角标(company-badge):圆角标签、active时绿色背景
- 子菜单(company-submenu):默认隐藏、展开时显示
- 子菜单项(submenu-item):设备管理/OTA升级链接样式
- 图标尺寸和颜色适配深色侧边栏
根因:与登录页问题相同——HTML/JS结构写了,CSS未同步。
调整侧边栏公司导航交互和颜色
问题:
- 未选中的公司项字体颜色太暗(var(--text-sidebar) 是半透明灰色),用户希望直接显示白色
- 子菜单默认隐藏,需要点击才展开,用户希望直接显示
修复:
- CSS:将 company-nav-item 默认颜色从 var(--text-sidebar) 改为 #fff(白色)
- CSS:将 company-badge 默认颜色和背景调亮
- CSS:将 company-submenu 默认 display 从 none 改为 flex(始终展开)
- CSS:调整 submenu-item 颜色为 rgba(255,255,255,0.7),hover 变白
- JS:移除点击公司项时切换子菜单展开/收起的逻辑,只保留选中状态切换
调整侧边栏公司导航为手风琴模式
问题:用户反馈不需要全部展开,希望点到哪个公司哪个展开(手风琴效果)。
修复:
- CSS:将 company-submenu 默认 display 改回 none(收起状态)
- JS:恢复点击公司项时切换子菜单展开/收起的逻辑
- JS:添加手风琴效果——展开一个公司时自动收起其他已展开的公司