fix: 修复空会话返回 null 导致前端崩溃的问题 #194

huanghaosheng · 2026-06-22T12:40:34+08:00

huanghaosheng commented

2026-06-22 12:40:34 +08:00

No description provided.

huanghaosheng added 3 commits 2026-06-22 12:40:34 +08:00

fix: 修复前端侧边栏双重展开动画问题 2180751a9b

移除条件渲染和 CSS animation 的冲突，改用纯 CSS transition 控制显示/隐藏。

**问题根源：**
- 组件使用 `if (!open) return null;` 条件渲染，导致挂载时立即出现
- CSS 同时使用 `animation: slideInLeft`，触发从 -100% 的二次滑入
- 两个独立显示机制叠加，造成双重动画闪烁

**修复方案：**
- SessionSidebar: 移除条件渲染，始终保持 DOM 存在，通过动态 className 控制状态
- App.css: 移除 `animation` 和 `@keyframes`，改用 `transition: transform`
- 新增 `.sidebar--collapsed` / `.sidebar--open` 类控制 `translateX`
- 新增 `.sidebar-backdrop--visible` 类控制背景遮罩淡入淡出
- 添加 `pointer-events: none` 确保隐藏状态不响应交互

影响范围：
- frontend/src/components/SessionSidebar/index.tsx
- frontend/src/App.css

fix: 修复空会话返回 null 导致前端崩溃的问题 4cc0713459

## 问题描述
当用户创建新会话但未发送任何消息就切换到其他会话时，前端控制台报错：
"TypeError: Cannot read properties of null (reading 'map')"

根本原因：Go 后端未初始化的切片序列化为 JSON 时会变成 `null` 而非 `[]`，
前端尝试对 `null` 调用 `.map()` 导致崩溃。

## 修复方案
采用多层防御策略，同时修复后端和前端：

### 后端修复（确保 API 契约正确）
1. message_pg.go:93 - 将 `var messages []StoredMessage` 改为
   `messages := make([]StoredMessage, 0)`，确保空结果序列化为 `[]`
2. conversation.go - 在两个响应路径（PG 查询 + 内存回退）添加防御性 nil 检查

### 前端防御（多层保护）
1. useSessionList.ts - 在 loadMessages 和 loadSessions 中添加 null 合并操作
   `(res.data.messages || [])` 确保即使后端退化也不会崩溃

## 影响范围
- 所有空会话（新建后未发送消息的对话）现在可以正常切换
- API 响应符合 JSON 最佳实践（数组字段永远是 `[]` 而非 `null`）

Merge pull request 'fix: 修复空会话返回 null 导致前端崩溃的问题' (#193 ) from fix/frontend into develop f2a883bda8

Reviewed-on: http://8.161.227.145:3000/XEngineers/CamTalk/pulls/193

huanghaosheng merged commit c4b68b77d1 into v2

2026-06-22 12:40:38 +08:00

huanghaosheng referenced this issue from a commit

2026-06-22 12:40:39 +08:00

Merge pull request 'fix: 修复空会话返回 null 导致前端崩溃的问题' (#194) from develop into v2

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: XEngineers/CamTalk#194