@composy/log-viewer-vue

@composy/log-viewer-vue

审计日志查看器的 Vue 2/3 适配层，基于 @composy/log-viewer-core 提供 LogViewer 组件、useLogViewer 组合式函数和 LogViewerPlugin 插件。

安装

pnpm add @composy/log-viewer-vue

vue 为 peer dependency，Vue 2.7 和 Vue 3 均由 vue-demi 适配。

入口

import { LogViewer, LogViewerPlugin, useLogViewer } from '@composy/log-viewer-vue'
import '@composy/log-viewer-vue/index.css'

核心类型与格式化函数也从 Vue 包重新导出，便于组件项目保持单一入口。

目录与构建

packages/vue/
├── src/                         # 组件、插件和组合式函数
├── .ldesign/builder.config.ts   # @composy/builder（rolldown）配置
├── .ldesign/tsconfig.esm.json  # ESM 类型检查配置
└── .ldesign/tsconfig.cjs.json  # CJS 类型检查配置

pnpm --dir packages/vue run build
pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm --dir packages/vue run lint:check

构建输出为 dist（压缩 UMD 和 CSS）、es（ESM 声明）、esm（保留 ESM/样式源）和 lib（CJS）。exports、main、module、types、unpkg 与 jsdelivr 均指向这些目录中的实际文件。

License

MIT

Adapter behavior

LogViewer forwards Core data, filtering, theme, diff, anomaly, and pagination behavior. Component events use camelCase names in the type surface (entryClick, entryExpand, entryCollapse, filterChange, themeChange, and pageChange); Vue templates can continue to listen with their kebab-case equivalents.

useLogViewer() exposes loadData() alongside the Core instance methods. The composable uses vue-demi for the Vue 2.7 and Vue 3 peer range and destroys the Core instance on unmount.

Import @composy/log-viewer-vue/index.css to receive the tokenized timeline, filter, diff, anomaly, and pagination styles. The build removes only dangling CSS source-map comments while retaining JavaScript source maps.