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