60 lines
2.9 KiB
Markdown
60 lines
2.9 KiB
Markdown
# 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未同步。
|
||
|
||
---
|
||
|
||
## 调整侧边栏公司导航交互和颜色
|
||
|
||
**问题**：
|
||
1. 未选中的公司项字体颜色太暗（var(--text-sidebar) 是半透明灰色），用户希望直接显示白色
|
||
2. 子菜单默认隐藏，需要点击才展开，用户希望直接显示
|
||
|
||
**修复**：
|
||
- 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：添加手风琴效果——展开一个公司时自动收起其他已展开的公司
|