Sidebar 布局侧栏

应用级侧栏 RdSidebar；Logo / 用户区经插槽接入 RdLogo、RdSidebarUser。不依赖 vue-router，跳转与退出由业务处理。

基础用法

#logo 放 RdLogo；#footer 放 RdSidebarUser 并监听 @logout。

<script setup lang="ts">
import { ref } from 'vue'
import {
  LayoutDashboard,
  Package,
  Users,
  List,
  Waves,
  Settings,
  SlidersHorizontal,
  FileText,
} from '@lucide/vue'
import {
  RdSidebar,
  RdLogo,
  RdSidebarUser,
  type RdNavGroup,
  type RdNavItem,
} from '@rd-element/ui'

const collapsed = ref(false)
const activePath = ref('/components/sidebar')

const groups: RdNavGroup[] = [
  {
    label: '工作台',
    items: [
      { name: '概览', path: '/components/sidebar', icon: LayoutDashboard },
      {
        name: '客户',
        icon: Users,
        children: [
          { name: '客户列表', path: '/demo/customers', icon: List, badge: 12 },
          { name: '公海', path: '/demo/pool', icon: Waves },
          {
            name: '客户设置',
            icon: Settings,
            children: [
              { name: '字段配置', path: '/demo/customer-fields', icon: SlidersHorizontal },
              { name: '跟进模板管理', path: '/demo/follow-templates', icon: FileText },
            ],
          },
        ],
      },
      { name: '产品', path: '/demo/products', icon: Package },
    ],
  },
]

function onSelect(item: RdNavItem) {
  if (item.path) activePath.value = item.path
}

function onLogout() {
  // 业务：清 token / router.push('/login')
}
</script>

<template>
  <div class="rd-sidebar-demo-frame">
    <RdSidebar
      v-model:collapsed="collapsed"
      :groups="groups"
      :active-path="activePath"
      @select="onSelect"
    >
      <template #logo="{ collapsed: c }">
        <RdLogo :collapsed="c" />
      </template>
      <template #footer="{ collapsed: c }">
        <RdSidebarUser
          :collapsed="c"
          name="张明"
          role="管理员"
          @logout="onLogout"
        />
      </template>
    </RdSidebar>
  </div>
</template>

RdSidebar

属性名	说明	类型	默认值
collapsed	是否折叠侧栏	boolean	—
groups	导航分组（RdNavGroup[]）	RdNavGroup[]	—
active-path	当前高亮 path（由业务传入，通常等于 route.path）	string	''
show-collapse	是否显示折叠按钮	boolean	true

事件名	说明	类型
update:collapsed	折叠状态变更（支持 v-model:collapsed）	(value: boolean)
toggle-collapse	点击折叠按钮	—
select	叶子菜单点击，回传 RdNavItem；跳转由业务处理	(item: RdNavItem)
logo-click	Logo 区点击；首页跳转由业务处理	()

插槽名	说明
logo	Logo 区（有槽才显示）；作用域 collapsed；放 RdLogo
footer	底部区；作用域 collapsed；可放 RdSidebarUser

RdSidebarUser

属性名	说明	类型	默认值
collapsed	侧栏折叠态	boolean	false
name	用户显示名	string	—
role	角色 / 副标题	string	''
avatarText	头像文字；默认 name 首字	string	—

事件名	说明	类型
logout	点击退出登录	()

Peer 依赖

包	用途
element-plus	ElMenu / ElSubMenu / ElMenuItem
@lucide/vue	折叠 / 退出图标；菜单 icon 也可传 Lucide

不需要 vue-router。业务在 @select 里 router.push，在 RdSidebarUser 的 @logout 里清登录态。

数据契约

interface RdNavItem {
  name: string
  icon?: Component
  path?: string
  external?: boolean
  badge?: number
  children?: RdNavItem[]
}

interface RdNavGroup {
  label: string
  items: RdNavItem[]
}

工具函数：getNavIndex / hasChildren / resolveActiveMenu / resolveMenuOpeneds。

与 RdListPageSidebar（列表页左栏树）不同，本组件是应用布局侧栏。