# 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`，历史列表与选中态保持。
- [ ] 不影响现有的新建对话、选择会话、重命名、删除功能。