# ldesign-log-viewer

**Repository Path**: ldesign-v1/ldesign-log-viewer

## Basic Information

- **Project Name**: ldesign-log-viewer
- **Description**: ??????? - ??????????
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/log-viewer

> 审计日志查看器 — 操作日志的可视化展示，支持差异对比、时间线视图和多维度筛选。

## ✨ 特性

- **差异渲染** — 高亮显示变更前后的差异（类似 Git diff）
- **时间线视图** — 按时间顺序展示操作记录
- **筛选引擎** — 支持按操作类型、用户、时间范围等多维度筛选
- **事件系统** — 完整的事件回调
- **Vue 集成** — 提供 Vue 组件和组合式函数

## 📦 安装

```bash
pnpm add @ldesign/log-viewer
```

## 🚀 快速开始

```ts
import { LogViewer } from '@ldesign/log-viewer'

const viewer = new LogViewer({
  container: '#viewer',
  logs: [
    {
      id: '1',
      timestamp: Date.now(),
      action: 'update',
      user: '张三',
      target: '用户配置',
      before: { theme: 'light' },
      after: { theme: 'dark' },
    },
  ],
})
```

### Vue 3

```vue
<template>
  <LogViewer :logs="logs" @filter-change="onFilter" />
</template>
```

## 📖 API

| 方法 | 说明 |
|------|------|
| `setLogs(logs)` | 设置日志数据 |
| `filter(predicate)` | 筛选日志 |
| `search(query)` | 搜索日志 |
| `destroy()` | 销毁实例 |

## 📄 License

MIT © LDesign Team