rt-chat-sidebar

一个基于 Vue 3 的 AI 聊天应用侧边栏组件，提供开箱即用的对话管理、历史记录展示、用户菜单等功能。

该组件不依赖 Element Plus，内部实现了自定义弹窗（确认对话框、输入对话框）和上下文菜单，体积轻量，样式可定制。

特性

• 📂 对话管理：支持置顶对话和最近对话列表
• 🖱️ 交互友好：支持右键/长按弹出上下文菜单（重命名、删除）
• 📱 响应式设计：完美支持移动端和桌面端
• 🎨 主题定制：内置亮色/深色主题，支持 CSS 变量定制
• 🧩 独立弹窗：内置 ConfirmDialog 和 PromptDialog，无需额外引入 UI 库

安装

npm install rt-chat-sidebar
# 或者
pnpm add rt-chat-sidebar

快速上手

<template>
  <ChatSidebar
    v-model:open="sidebarOpen"
    :conversations="conversations"
    :current-conversation-id="currentId"
    :user="user"
    @new-chat="handleNewChat"
    @select="handleSelect"
    @delete="handleDelete"
    @rename="handleRename"
  />
</template>

<script setup>
import { ref } from "vue";
import { ChatSidebar } from "rt-chat-sidebar";
import "rt-chat-sidebar/style.css";

const sidebarOpen = ref(true);
const currentId = ref("1");
const conversations = ref([
  { id: "1", title: "Hello World" },
  { id: "2", title: "Vue 3 Support" },
]);
const user = { username: "Admin", avatar: "" };

const handleNewChat = () => {
  /* ... */
};
const handleSelect = (id) => {
  currentId.value = id;
};
const handleDelete = (id) => {
  /* remove conversation */
};
const handleRename = (id, newTitle) => {
  /* update title */
};
</script>

API

Props

| 属性名 | 类型 | 默认值 | 说明 | | ----------------------- | ------------------- | ------------ | ---------------------- | | open (v-model) | boolean | false | 侧边栏展开状态 | | conversations | Conversation[] | [] | 对话列表数据 | | currentConversationId | string | undefined | 当前选中的对话 ID | | pinnedConversations | Conversation[] | [] | 置顶的对话列表 | | appName | string | 'Chat App' | 应用名称 | | appLogo | string | - | 应用 Logo URL | | appVersion | string | - | 版本号显示 | | user | User | - | 用户信息对象 | | loading | boolean | false | 新建对话按钮的加载状态 | | hasMore | boolean | false | 是否有更多历史记录 | | isLoadingMore | boolean | false | 是否正在加载更多 | | showProfile | boolean | true | 是否显示底部用户区 | | theme | 'light' \| 'dark' | 'light' | 主题模式 |

Events

| 事件名 | 参数 | 说明 | | -------------- | -------------------------------- | -------------------------- | | update:open | (value: boolean) | open 状态更新时触发 | | toggle | - | 点击关闭/切换按钮时触发 | | new-chat | - | 点击新建对话按钮时触发 | | select | (id: string) | 点击某个对话时触发 | | delete | (id: string) | 在弹窗中确认删除时触发 | | rename | (id: string, newTitle: string) | 在弹窗中确认重命名时触发 | | toggle-theme | - | 点击主题切换按钮时触发 | | logout | - | 在弹窗中确认退出登录时触发 | | load-more | - | 滚动到底部时触发 |

类型定义

export interface Conversation {
  id: string;
  title: string;
  is_pinned?: boolean;
  updated_at?: string;
}

export interface User {
  username: string;
  nickname?: string;
  avatar?: string;
}

主题定制

组件使用 CSS 变量定义颜色，你可以在 CSS 中覆盖它们：

:root {
  --cs-brand: #3b82f6; /* 主题色 */
  --cs-bg-primary: #ffffff; /* 背景色 */
  --cs-text-primary: #1e293b; /* 文字颜色 */
  /* 更多变量参考 src/styles/variables.css */
}