feat: 用自定义侧边栏替换聊天室 Conversations 组件,提取公共 SidebarGroup 和 date-group

This commit is contained in:
2026-06-04 00:46:57 +08:00
parent dc7d9e83b8
commit f67cfa84ef
18 changed files with 1042 additions and 262 deletions

View File

@@ -36,9 +36,9 @@ ConsoleShell 包含:`XProvider(zhCN + zhCN_X)` + `AntApp` + `Layout`(Header/Si
### 聊天页面
`ChatPage` = `Conversations`@ant-design/x+ `ChatPanel`
`ChatPage` = `ConversationSidebar`(自定义组件+ `ChatPanel`
- **Conversations**:会话侧边栏TanStack Query 管理会话列表,支持创建/选中/删除menu dropdown)。
- **ConversationSidebar**:会话侧边栏数据加载层useQuery + 错误处理)。内部渲染 `ConversationList`(搜索框 + OverlayScrollbars 滚动 + 日期分组 + ConversationCard 列表)。对话按 `updatedAt` 分组(今天/昨天/本周/本月/更早),支持搜索过滤和 hover 删除Popconfirm)。
- **ChatPanel**`useChat`@ai-sdk/react+ `DefaultChatTransport`ai 包)与后端 SSE 通信。按 `part.type` 分派渲染TextPartmarkdown-to-jsx 含自定义 overridesCodeBlock 提供 Shiki 语法高亮和复制按钮、MarkdownTable 提供类 antd 表格样式、ReasoningPart、ToolPart四态。支持编辑重发、重新生成、复制。
- **Sender**@ant-design/x输入框 + 发送/停止按钮 + 模型 Selectfooter slot
@@ -46,11 +46,12 @@ ConsoleShell 包含:`XProvider(zhCN + zhCN_X)` + `AntApp` + `Layout`(Header/Si
### 共享组件
| 组件 | 路径 | 说明 |
| ------------- | ------------------------------------- | --------------------------------- |
| ConsoleShell | `shared/components/ConsoleShell/` | 全局布局外壳Provider + Layout |
| Sidebar | `shared/components/Sidebar/` | 侧边栏纯展示组件 |
| ErrorBoundary | `shared/components/ErrorBoundary.tsx` | 生产环境错误边界 |
| 组件 | 路径 | 说明 |
| ------------- | ------------------------------------- | ------------------------------------ |
| ConsoleShell | `shared/components/ConsoleShell/` | 全局布局外壳Provider + Layout |
| Sidebar | `shared/components/Sidebar/` | 侧边栏纯展示组件 |
| SidebarGroup | `shared/components/SidebarGroup/` | 可折叠日期分组(聊天室和收集箱共用) |
| ErrorBoundary | `shared/components/ErrorBoundary.tsx` | 生产环境错误边界 |
### 共享 Hooks
@@ -70,10 +71,11 @@ ConsoleShell 包含:`XProvider(zhCN + zhCN_X)` + `AntApp` + `Layout`(Header/Si
### 共享工具函数
| 文件 | 导出 |
| --------------- | --------------------------------------------------------------------------------------------- |
| `utils/api.ts` | `handleResponse(response, extract)``handleVoidResponse(response)` |
| `utils/time.ts` | `formatCountdown``formatDurationUnit``formatRelativeTime``isOlderThan``subtractHours` |
| 文件 | 导出 |
| --------------------- | --------------------------------------------------------------------------------------------- |
| `utils/api.ts` | `handleResponse(response, extract)``handleVoidResponse(response)` |
| `utils/time.ts` | `formatCountdown``formatDurationUnit``formatRelativeTime``isOlderThan``subtractHours` |
| `utils/date-group.ts` | `getDateGroup``groupByDate``GROUP_LABELS``GROUP_ORDER``DateGroup``DateGroupData` |
## 更新触发条件