feat: 重构对话功能

docs/SidebarToggleMigrationPlan.md

@@ -0,0 +1,126 @@
+# ChatHistory 侧边栏折叠功能迁移计划
+
+## 参考来源
+- **源文件**: `ClawX/src/components/layout/Sidebar.tsx:234-247`
+- **目标文件**: `zn-ai/src/pages/home/ChatHistory.vue:6`
+
+## 源实现思路分析
+
+`Sidebar.tsx:234-247` 的核心实现逻辑：
+
+1. **状态驱动**: 通过 `useSettingsStore` 获取 `sidebarCollapsed` 布尔值与 `setSidebarCollapsed` setter。
+2. **图标切换**: 点击按钮时，根据当前状态切换图标：
+   - 展开状态 → 显示 `PanelLeftClose`（提示可收起）
+   - 收起状态 → 显示 `PanelLeft`（提示可展开）
+3. **样式过渡**: 外层 `aside` 通过 `transition-all duration-300` 配合条件类名 `w-16` / `w-64` 实现宽度动画。
+4. **内容显隐**: 内部文字/列表在收起时隐藏（`!sidebarCollapsed && ...`），只保留图标按钮可点。
+
+## 迁移目标
+
+将上述折叠/展开交互迁移到 `ChatHistory.vue`，使其第 6 行的 `RiSideBarLine` 图标具备切换侧边栏宽度的能力，并保持与现有 `zn-ai` 项目风格一致。
+
+## 实现步骤
+
+### 1. 状态定义（ChatHistory.vue 本地状态）
+
+在 `<script setup>` 中新增响应式状态，无需引入全局 store（当前页面无对应 store，本地 ref 足够）：
+
+```ts
+const sidebarCollapsed = ref(false)
+```
+
+### 2. 图标点击交互（对应目标文件第 6 行）
+
+将现有静态图标改造为可点击切换状态：
+
+```html
+<!-- 修改前 -->
+<RiSideBarLine class="ml-auto cursor-pointer" />
+
+<!-- 修改后 -->
+<RiSideBarLine
+  v-if="!sidebarCollapsed"
+  class="ml-auto cursor-pointer hover:text-[#2B7FFF]"
+  @click="sidebarCollapsed = true"
+/>
+<RiArrowRightSLine
+  v-else
+  class="ml-auto cursor-pointer hover:text-[#2B7FFF]"
+  @click="sidebarCollapsed = false"
+/>
+```
+
+> 说明：
+> - 展开时显示 `RiSideBarLine`（或 `RiSideBarFoldLine` 若项目已有），点击后收起。
+> - 收起时显示 `RiArrowRightSLine`（或 `RiSideBarLine`），点击后展开。
+> - 与源实现保持一致：图标根据状态互斥显示。
+
+### 3. 容器宽度过渡动画
+
+为 `<aside>` 根元素添加动态类名与过渡：
+
+```html
+<aside
+  :class="[
+    'h-full box-border flex flex-col transition-all duration-300',
+    sidebarCollapsed ? 'w-16' : 'w-50'
+  ]"
+>
+```
+
+- 展开宽度保持原设计 `w-50`（`200px`）。
+- 收起宽度收缩为 `w-16`（`64px`），仅保留 Logo 与切换按钮空间。
+- `transition-all duration-300` 保证宽度变化平滑。
+
+### 4. 内部内容显隐控制
+
+在 `sidebarCollapsed = true` 时，以下区域应隐藏：
+
+- **YINIAN Logo 文字**（保留图片，隐藏文字，避免换行）
+- **"新对话" 按钮文字**（可保留图标 `RiAddLine`，或整体隐藏按钮）
+- **历史会话列表**（`groups` 循环区域整体隐藏，避免窄边栏内文字截断）
+
+具体修改点：
+
+```html
+<!-- Logo 区域 -->
+<div class="flex items-center m-2">
+  <img class="w-10 h-10 rounded-md" src="@assets/images/login/white_logo.png" />
+  <div v-if="!sidebarCollapsed" class="font-bold text-gray-80">YINIAN</div>
+  <!-- 图标切换按钮 -->
+  ...
+</div>
+
+<!-- 新对话按钮 -->
+<div
+  v-if="!sidebarCollapsed"
+  class="flex justify-center ..."
+  @click="addNewChat"
+>
+  <RiAddLine /> 新对话
+</div>
+
+<!-- 历史会话列表 -->
+<div v-if="!sidebarCollapsed" class="overflow-y-auto p-2">
+  ...
+</div>
+```
+
+### 5. 保持功能可用性
+
+- **历史记录加载**：收起状态下仍可在后台通过 `onMounted` 正常加载列表数据，只是不渲染 DOM。
+- **选中态同步**：展开后 `selectedConversationId` 与 `groups` 数据不丢失，用户可继续操作。
+- **响应式恢复**：若窗口尺寸变化导致侧边栏过窄，可后续补充监听自动展开逻辑（本期非必须）。
+
+## 涉及文件
+
+| 文件 | 修改内容 |
+|---|---|
+| `zn-ai/src/pages/home/ChatHistory.vue` | 新增 `sidebarCollapsed` ref、改造第 6 行图标为状态切换按钮、为 `aside` 添加动态宽度与过渡、控制内部元素显隐 |
+
+## 验收标准
+
+- [ ] 点击 `RiSideBarLine` 后，侧边栏从 `w-50` 平滑过渡到 `w-16`。
+- [ ] 收起状态下只显示 Logo 图片与展开图标按钮，其余文字/列表隐藏。
+- [ ] 再次点击展开图标，侧边栏平滑恢复 `w-50`，历史列表与选中态保持。
+- [ ] 不影响现有的新建对话、选择会话、重命名、删除功能。