From 2180751a9b84e700a8d3d0c4f79804e84e58eae3 Mon Sep 17 00:00:00 2001
From: hhs <386998068@qq.com>
Date: Mon, 22 Jun 2026 12:05:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=8F=8C=E9=87=8D=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除条件渲染和 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
---
 frontend/src/App.css                          | 23 +++++++++++++++----
 .../src/components/SessionSidebar/index.tsx   |  9 ++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9afbf9a..268cc55 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -217,7 +217,15 @@ body {
   background: rgba(10, 10, 15, 0.45);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
-  animation: fadeIn 0.2s ease;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s var(--transition-smooth);
+}
+
+.sidebar-backdrop--visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .sidebar {
@@ -232,13 +240,18 @@ body {
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   overflow: hidden;
-  animation: slideInLeft 0.3s var(--transition-smooth);
   box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4);
+  transition: transform 0.3s var(--transition-smooth);
 }
 
-@keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+.sidebar--collapsed {
+  transform: translateX(-100%);
+  pointer-events: none;
+}
+
+.sidebar--open {
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .sidebar--collapsed {
diff --git a/frontend/src/components/SessionSidebar/index.tsx b/frontend/src/components/SessionSidebar/index.tsx
index 7d444d7..043e380 100644
--- a/frontend/src/components/SessionSidebar/index.tsx
+++ b/frontend/src/components/SessionSidebar/index.tsx
@@ -118,8 +118,6 @@ export function SessionSidebar({
     return groups;
   }, [sessions, searchQuery]);
 
-  if (!open) return null;
-
   const groupLabels: Record<TimeGroup, string> = {
     today: t("sidebar.today"),
     yesterday: t("sidebar.yesterday"),
@@ -128,8 +126,11 @@ export function SessionSidebar({
 
   return (
     <>
-      <div className="sidebar-backdrop" onClick={onClose} />
-      <div className="sidebar">
+      <div
+        className={`sidebar-backdrop ${open ? 'sidebar-backdrop--visible' : ''}`}
+        onClick={onClose}
+      />
+      <div className={`sidebar ${open ? 'sidebar--open' : 'sidebar--collapsed'}`}>
         {/* 头部：新建 + 收起 */}
         <div className="sidebar__header">
           <button className="sidebar__new-btn" onClick={onNewSession}>

From 4cc0713459e32ebf29f498609db2af27e7e152fe Mon Sep 17 00:00:00 2001
From: hhs <386998068@qq.com>
Date: Mon, 22 Jun 2026 12:39:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A9=BA=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=9D=E8=BF=94=E5=9B=9E=20null=20=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=B4=A9=E6=BA=83=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题描述
当用户创建新会话但未发送任何消息就切换到其他会话时，前端控制台报错：
"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`）
---
 backend/internal/api/conversation.go | 6 ++++++
 backend/internal/store/message_pg.go | 2 +-
 frontend/src/hooks/useSessionList.ts | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/backend/internal/api/conversation.go b/backend/internal/api/conversation.go
index c3eed70..e21471a 100644
--- a/backend/internal/api/conversation.go
+++ b/backend/internal/api/conversation.go
@@ -273,6 +273,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 			return
 		}
 		count, _ := h.msgRepo.GetMessageCount(c.Request.Context(), sessionID)
+		if messages == nil {
+			messages = []store.StoredMessage{}
+		}
 		c.JSON(http.StatusOK, gin.H{
 			"messages": messages,
 			"total":    count,
@@ -314,6 +317,9 @@ func (h *ConversationHandler) GetMessages(c *gin.Context) {
 	}
 	messages := allMessages[start:]
 
+	if messages == nil {
+		messages = []models.Message{}
+	}
 	c.JSON(http.StatusOK, gin.H{
 		"messages": messages,
 		"total":    total,
diff --git a/backend/internal/store/message_pg.go b/backend/internal/store/message_pg.go
index 014194b..b393c9c 100644
--- a/backend/internal/store/message_pg.go
+++ b/backend/internal/store/message_pg.go
@@ -90,7 +90,7 @@ func (r *PgMessageRepository) queryMessages(ctx context.Context, query string, a
 	}
 	defer pgxRows.Close()
 
-	var messages []StoredMessage
+	messages := make([]StoredMessage, 0)
 	for pgxRows.Next() {
 		var m StoredMessage
 		if err := pgxRows.Scan(&m.ID, &m.SessionID, &m.Role, &m.Content, &m.TokensUsed, &m.CreatedAt); err != nil {
diff --git a/frontend/src/hooks/useSessionList.ts b/frontend/src/hooks/useSessionList.ts
index 841a3e4..c33e212 100644
--- a/frontend/src/hooks/useSessionList.ts
+++ b/frontend/src/hooks/useSessionList.ts
@@ -80,7 +80,7 @@ export function useSessionList(accessToken?: string | null) {
     try {
       const res = await listConversations(accessToken);
       if (res.data) {
-        const list = res.data.conversations.map(toSessionSummary);
+        const list = (res.data.conversations || []).map(toSessionSummary);
         setSessions(list);
         // 恢复上次选中的会话（如果仍然存在）
         const lastId = localStorage.getItem(LAST_ACTIVE_KEY);
@@ -193,7 +193,7 @@ export function useSessionList(accessToken?: string | null) {
       try {
         const res = await getConversationMessages(accessToken, sessionId);
         if (res.data) {
-          return res.data.messages.map(toChatMessage);
+          return (res.data.messages || []).map(toChatMessage);
         }
       } catch (err) {
         console.error("[SessionList] 加载消息失败:", err);