@composy/menu-vue

@composy/menu-vue

LDesign 菜单系统 - 现代化菜单组件，支持横向/纵向布局、无限层级、多种展开模式（Vue 3 适配层）

功能特性

• 🧩 Vue 3 组件
• 🪝 组合式函数 (Composables)
• ⚡ 响应式数据绑定
• 🔒 Core 状态一致性与安全搜索高亮

菜单状态、权限过滤、搜索视图和 popup 行为由 @composy/menu-core 统一维护。Vue 层只负责 props、事件和响应式桥接；当 items 或 filterConfig 更新后，Core 会清理不可见的选中/展开项，避免 Vue 组件与 Web Component 出现两套状态。搜索高亮请使用 Core 导出的 highlightKeyword，它会先转义纯文本再生成高亮 HTML。

安装

npm install @composy/menu-vue

快速开始

<script setup>
// import { /* 组件 */ } from '@composy/menu-vue'
</script>

<template>
  <div>使用组件</div>
</template>

目录结构

packages/vue/
├── src/              # 源码
├── package.json
├── tsconfig.json     # 兼容入口，继承 .ldesign/tsconfig.json
├── tsconfig.cjs.json # 兼容入口，继承 .ldesign/tsconfig.cjs.json
└── .ldesign/
    ├── builder.config.ts
    ├── eslint.config.js
    ├── tsconfig.json
    └── tsconfig.cjs.json

构建与检查

构建使用 @composy/builder（Rolldown），配置以 .ldesign/ 为准；根目录 TS 配置文件保留为兼容入口。

corepack pnpm run build
corepack pnpm run type-check
corepack pnpm run type-check:cjs
corepack pnpm run lint:check

依赖

• @composy/menu-core — 核心引擎
• vue ^3.3.0 (peerDependency)

License

MIT