ChatHistory 侧边栏折叠功能迁移计划

参考来源

源文件: ClawX/src/components/layout/Sidebar.tsx:234-247
目标文件: zn-ai/src/pages/home/ChatHistory.vue:6

源实现思路分析

Sidebar.tsx:234-247 的核心实现逻辑：

状态驱动: 通过 useSettingsStore 获取 sidebarCollapsed 布尔值与 setSidebarCollapsed setter。
图标切换: 点击按钮时，根据当前状态切换图标：
- 展开状态 → 显示 PanelLeftClose（提示可收起）
- 收起状态 → 显示 PanelLeft（提示可展开）
样式过渡: 外层 aside 通过 transition-all duration-300 配合条件类名 w-16 / w-64 实现宽度动画。
内容显隐: 内部文字/列表在收起时隐藏（!sidebarCollapsed && ...），只保留图标按钮可点。

迁移目标

将上述折叠/展开交互迁移到 ChatHistory.vue，使其第 6 行的 RiSideBarLine 图标具备切换侧边栏宽度的能力，并保持与现有 zn-ai 项目风格一致。

实现步骤

1. 状态定义（ChatHistory.vue 本地状态）

在 <script setup> 中新增响应式状态，无需引入全局 store（当前页面无对应 store，本地 ref 足够）：

const sidebarCollapsed = ref(false)

2. 图标点击交互（对应目标文件第 6 行）

将现有静态图标改造为可点击切换状态：

<!-- 修改前 -->
<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> 根元素添加动态类名与过渡：

<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 循环区域整体隐藏，避免窄边栏内文字截断）

具体修改点：

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

4.3 KiB Raw Blame History Unescape Escape