@composy/bookmark-vue

@composy/bookmark-vue

@composy/bookmark-core 的 Vue 3 适配层：书签栏、搜索、Chrome 风格页签与虚拟列表组件，配套组合式函数、插件注册与 token 化样式。

✨ 核心能力

• BookmarkBar：支持键盘导航、溢出处理、拖拽同级排序与移入文件夹，暴露管理器操作并触发 move 事件，可选访问追踪
• BookmarkItem / BookmarkFolder：嵌套树渲染，支持分隔线与访问徽标
• BookmarkSearch：安全高亮渲染，支持 SearchOptions
• ChromeTabs：浏览器风格页签，支持拖拽排序与右键操作
• VirtualList / LazyBookmarkBar：面向大规模书签集合的虚拟滚动方案
• useBookmarkStore()：暴露 addSeparator()、recordVisit()、search()、getAllTags()、findDuplicates()、getInsights()、audit() 与导入导出方法
• useRouteTabs()：路由页签组合式函数，使用最小 router 结构类型，vue-router 对消费方可选
• 主题处理：SSR 安全，写入 ldesign-theme-light / ldesign-theme-dark 类与 data-theme-mode

📦 安装

pnpm add @composy/bookmark-vue @composy/bookmark-core vue

🚀 快速开始

<script setup lang="ts">
import type { BookmarkBarExpose, BookmarkItemType } from '@composy/bookmark-vue'
import { BookmarkBar, BookmarkSearch } from '@composy/bookmark-vue'
import { ref, useTemplateRef } from 'vue'
import '@composy/bookmark-vue/index.css'

const bar = useTemplateRef<BookmarkBarExpose>('bar')
const items = ref<BookmarkItemType[]>([
  { id: 'docs', title: 'Docs', url: 'https://ldesign.dev/docs', tags: ['docs'] },
  {
    id: 'tools',
    type: 'folder',
    title: 'Tools',
    children: [{ id: 'builder', title: 'Builder', url: 'https://ldesign.dev/builder' }],
  },
])

function exportBookmarks() {
  return bar.value?.exportToJSON({ source: 'vue-app' })
}
</script>

<template>
  <BookmarkSearch :items="items" />
  <BookmarkBar ref="bar" :items="items" mode="horizontal" theme="auto" :track-visits="true" />
  <button type="button" @click="exportBookmarks">导出书签</button>
</template>

📖 组合式函数

import { useBookmarkStore } from '@composy/bookmark-vue'

const store = useBookmarkStore({
  items: [],
  persistent: true,
  storageKey: 'ldesign-bookmarks',
  trackVisits: true,
})

store.add({ title: 'LDesign', url: 'https://ldesign.dev' })
store.addSeparator()
store.audit()
store.getInsights()

路由页签场景使用 useRouteTabs({ router })，返回 tabs / activeKey 与 addTab()、closeCurrent() 等操作方法。

🎨 样式与 Token

• 公共类名统一 ldesign- 前缀：书签 UI 为 ldesign-bookmark-*，页签为 ldesign-chrome-*，虚拟列表为 ldesign-virtual-*，主题类为 ldesign-theme-light / ldesign-theme-dark
• 组件级变量前缀为 --ldesign-bookmark-*
• 颜色取自 packages/color 生成的 --ld-* 变量；尺寸、间距、圆角、边框、字号取自 packages/size 生成的 --ld-* 变量

应用内引入一次 @composy/bookmark-vue/index.css，并在挂载组件前加载 LDesign 全局 color / size token 样式。

🔨 构建产物与验证

使用 @composy/builder 构建，产物目录：

• dist：浏览器 bundle 与 CSS bundle
• es：ESM 输出与声明文件
• esm：ESM 兼容镜像
• lib：CommonJS .cjs 输出与声明文件

pnpm run build:core   # Vue 类型检查前生成 Core 声明
pnpm --dir packages/vue run type-check       # ESM 类型检查（vue-tsc）
pnpm --dir packages/vue run type-check:cjs   # CJS 类型检查（vue-tsc）
pnpm run build        # 四产物构建
pnpm run test         # 单元测试

Builder 与 TypeScript 配置位于 packages/vue/.ldesign/；Vue UMD 全局名为 LDesignBookmarkVue。

🔗 相关链接

• workspace 总览
• 核心库 README

📄 License

Core 能力透传

useBookmarkStore() 返回的 manager 保留 Core 的注入存储和结构历史能力。启用 enableHistory: true 后，可使用 store.manager.canUndo()、store.manager.undo() 和 store.manager.redo() 恢复结构变更；需要 SSR、测试或多窗口隔离时，可通过 Core 的 BookmarkStorage 注入宿主存储。

MIT License © LDesign Team