rt-chat-header

rt-chat-header

一个基于 Vue 3 的聊天应用顶部导航组件，专为移动端 H5 聊天场景设计。提供侧边栏切换、标题展示、深色模式支持以及灵活的右侧操作区插槽。

特性

• 📱 移动端适配：响应式布局，完美适配移动端沉浸式体验。
• 🌓 主题支持：内置 Light/Dark 模式支持，自动处理毛玻璃效果与边框颜色。
• 🧩 开箱即用：零配置即可使用，内置标准 SVG 菜单图标。
• 🔌 灵活扩展：提供 actions 插槽，方便集成“模式切换”、“更多菜单”等功能。

安装

npm install rt-chat-header
# 或
yarn add rt-chat-header

快速使用

<template>
  <div>
    <!-- 顶部导航 -->
    <ChatHeader
      title="荣小宝"
      :is-dark="isDark"
      @toggle-sidebar="handleToggleSidebar"
    >
      <!-- 右侧插槽：例如放置一个模式切换按钮 -->
      <template #actions>
        <button @click="switchMode">切换模式</button>
      </template>
    </ChatHeader>

    <div class="content">
      <!-- 页面主体内容 -->
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ChatHeader } from "rt-chat-header";
import "rt-chat-header/style.css"; // 务必引入样式

const isDark = ref(false);

const handleToggleSidebar = () => {
  console.log("切换侧边栏");
};

const switchMode = () => {
  console.log("切换模式");
};
</script>

API 文档

Props

属性名	类型	默认值	说明
title	string	""	导航栏标题文本
isDark	boolean	false	是否为深色模式（影响背景毛玻璃、文字颜色和边框）

Events

事件名	参数	说明
toggle-sidebar	-	点击左侧菜单按钮时触发

Slots

插槽名	说明
actions	导航栏右侧区域，用于放置自定义按钮或组件

样式定制

组件使用了 Tailwind CSS 风格的样式类，并预置了毛玻璃效果。

• 高度：固定为 3rem (12)，如有需要可通过覆盖 CSS 修改。
• 层级：z-index: 30，确保悬浮在内容之上。

License

MIT