# 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-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/log-viewer

审计日志查看器，支持操作日志的可视化展示、多维筛选和变更追溯。

## ✨ 特性

- 📜 **时间线展示** - 操作日志按时间线流水展示
- 🔍 **多维筛选** - 按操作人/操作类型/时间范围/模块/IP 地址筛选
- 📋 **操作详情** - 展开查看操作详情（变更前后字段值对比）
- 🔀 **变更对比** - 数据变更前后的 JSON/表格级 Diff 展示
- 📊 **操作统计** - 操作频次统计图表（按模块/操作类型/时段）
- 👤 **用户追踪** - 查看特定用户的所有操作记录
- 📄 **数据追溯** - 查看特定数据记录的完整变更历史
- 🔴 **异常标记** - 异常操作（非工作时间/敏感操作/高频操作）高亮预警
- ⏱️ **实时日志** - WebSocket 实时日志流，支持暂停/继续
- 📤 **导出功能** - 导出日志明细 Excel/CSV
- 🏷️ **操作分类** - 新增/修改/删除/查询/登录/导出等操作类型标签
- 📱 **移动端查看** - 移动端日志浏览
- 🌓 **主题切换** - 亮色/暗色主题

---

## 📦 安装

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

## 🚀 快速开始

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

const viewer = new LogViewer({
  container: '#log-viewer',
  dataSource: '/api/audit-logs',
  columns: ['time', 'user', 'action', 'module', 'detail', 'ip'],
});
```

---

## 📁 项目结构

```
log-viewer/
├── packages/
│   ├── core/          # 核心库 @ldesign/log-viewer
│   │   └── src/
│   │       ├── core/       # 核心引擎
│   │       ├── filters/    # 筛选器
│   │       ├── renderers/  # 日志渲染器
│   │       ├── utils/      # 工具函数
│   │       └── types/      # TypeScript 类型
│   └── vue/           # Vue 组件 @ldesign/log-viewer-vue
├── playground/        # 演示应用
└── README.md
```

## 📄 License

MIT