# 文本日志分析工具textanalsistool

**Repository Path**: bigmanLau/textanalsistool

## Basic Information

- **Project Name**: 文本日志分析工具textanalsistool
- **Description**: 文本日志分析工具
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-30
- **Last Updated**: 2025-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文本工具 Web 应用

一个高性能的文本文件查看和标签过滤工具，支持大文件处理和虚拟滚动。

## 功能特性

### 🚀 核心功能
- **大文件支持**: 支持处理超过10MB的文本文件
- **虚拟滚动**: 大文件自动启用虚拟滚动，提升性能
- **标签过滤**: 支持多标签过滤和搜索
- **时间范围过滤**: 支持按时间范围过滤日志
- **行号范围过滤**: 支持按行号范围查看
- **动态加载**: 完整内容模式下支持动态加载更多内容

### 🎯 高级功能
- **右键菜单**: 支持右键显示完整内容
- **智能切换**: 在虚拟滚动和完整内容模式间智能切换
- **加载状态**: 显示加载进度和状态提示
- **位置保持**: 动态加载时保持目标行位置
- **响应式设计**: 适配不同屏幕尺寸

## 技术架构

### 前端技术栈
- **React 18**: 现代化UI框架
- **React Router**: 单页应用路由
- **虚拟滚动**: 自定义实现的虚拟滚动组件
- **动态加载**: 智能内容分块加载
- **CSS3**: 现代化样式和动画

### 性能优化
- **虚拟滚动**: 只渲染可见区域，支持百万行数据
- **分块加载**: 大文件分块处理，避免内存溢出
- **搜索索引**: 后台建立搜索索引，提升搜索性能
- **状态管理**: 优化的状态管理，减少不必要的重渲染

## 快速开始

### 本地开发

1. **安装依赖**
   ```bash
   npm install
   ```

2. **启动开发服务器**
   ```bash
   npm start
   ```

3. **访问应用**
   打开浏览器访问 `http://localhost:3000`

### Docker 部署

#### 方式一：使用 Docker Compose（推荐）

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd web-tag-filter-app
   ```

2. **运行部署脚本**
   ```bash
   ./deploy.sh
   ```

3. **访问应用**
   打开浏览器访问 `http://服务器IP:3000`

#### 方式二：手动 Docker 部署

1. **构建镜像**
   ```bash
   docker build -t text-tools-web .
   ```

2. **运行容器**
   ```bash
   docker run -d -p 3000:3000 --name text-tools-web text-tools-web
   ```

3. **访问应用**
   打开浏览器访问 `http://服务器IP:3000`

## 使用说明

### 基本操作

1. **选择文件**: 点击"选择文件"按钮，选择要查看的文本文件
2. **设置标签**: 在标签输入框中输入要过滤的标签（支持多个，用逗号分隔）
3. **应用过滤**: 点击"应用过滤"按钮应用标签过滤
4. **查看结果**: 查看过滤后的结果，支持滚动浏览

### 高级功能

#### 大文件处理
- 文件超过50,000行时自动启用虚拟滚动
- 显示加载状态和进度提示
- 支持动态加载更多内容

#### 右键菜单
- 在任意行上右键点击
- 选择"显示完整内容"查看目标行上下文
- 选择"隐藏完整内容"返回虚拟滚动模式

#### 时间过滤
- 设置开始时间和结束时间
- 支持多种时间格式
- 自动识别日志中的时间信息

#### 行号过滤
- 设置起始行号和结束行号
- 快速定位到指定行
- 支持大范围行号查看

## 部署指南

### CentOS 服务器部署

#### 1. 安装 Docker

```bash
# 安装 Docker
curl -fsSL https://get.docker.com | bash -s docker
sudo systemctl start docker
sudo systemctl enable docker

# 安装 Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/download/v2.20.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```

#### 2. 部署应用

```bash
# 克隆项目
git clone <repository-url>
cd web-tag-filter-app

# 运行部署脚本
./deploy.sh
```

#### 3. 配置防火墙

```bash
# 开放3000端口
sudo firewall-cmd --permanent --add-port=3000/tcp
sudo firewall-cmd --reload
```

#### 4. 配置Nginx（可选）

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

### 生产环境优化

#### 1. 使用 Nginx 反向代理

```nginx
upstream text_tools {
    server localhost:3000;
}

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://text_tools;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 优化设置
        proxy_buffering on;
        proxy_buffer_size 4k;
        proxy_buffers 8 4k;
        proxy_busy_buffers_size 8k;
    }
}
```

#### 2. 启用 HTTPS

```bash
# 使用 Let's Encrypt 免费证书
sudo yum install certbot python2-certbot-nginx
sudo certbot --nginx -d your-domain.com
```

#### 3. 监控和日志

```bash
# 查看容器日志
docker-compose logs -f

# 查看容器状态
docker-compose ps

# 重启应用
docker-compose restart
```

## 性能指标

### 支持的文件大小
- **小文件**: < 50,000行，直接加载到内存
- **大文件**: ≥ 50,000行，启用虚拟滚动
- **最大文件**: 100MB（可配置）

### 性能优化
- **虚拟滚动**: 支持百万行数据流畅滚动
- **内存使用**: 大文件模式下内存使用恒定
- **加载速度**: 首次加载时间 < 2秒
- **搜索性能**: 支持实时搜索和过滤

## 故障排除

### 常见问题

1. **端口被占用**
   ```bash
   # 查看端口占用
   netstat -tlnp | grep :3000
   
   # 停止占用进程
   sudo kill -9 <PID>
   ```

2. **Docker 权限问题**
   ```bash
   # 将用户添加到docker组
   sudo usermod -aG docker $USER
   # 重新登录或执行
   newgrp docker
   ```

3. **内存不足**
   ```bash
   # 清理Docker缓存
   docker system prune -a
   
   # 增加swap空间
   sudo fallocate -l 2G /swapfile
   sudo chmod 600 /swapfile
   sudo mkswap /swapfile
   sudo swapon /swapfile
   ```

### 日志查看

```bash
# 查看应用日志
docker-compose logs -f text-tools-web

# 查看Docker系统日志
journalctl -u docker.service
```

## 开发指南

### 项目结构

```
web-tag-filter-app/
├── src/
│   ├── components/          # React组件
│   │   ├── VirtualLineList.js    # 虚拟滚动组件
│   │   ├── DynamicLineList.js    # 动态加载组件
│   │   ├── FileSelector.js       # 文件选择组件
│   │   └── ToggleButton.js       # 切换按钮组件
│   ├── utils/               # 工具函数
│   │   └── fileProcessor.js      # 文件处理工具
│   ├── styles/              # 样式文件
│   └── App.js               # 主应用组件
├── public/                  # 静态资源
├── Dockerfile              # Docker配置
├── docker-compose.yml      # Docker Compose配置
├── deploy.sh               # 部署脚本
└── README.md               # 说明文档
```

### 开发命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建生产版本
npm run build

# 运行测试
npm test

# 代码检查
npm run lint
```

## 更新日志

### v1.2.0 (2024-01-30)
- ✅ 添加Docker部署支持
- ✅ 优化大文件处理性能
- ✅ 添加动态加载功能
- ✅ 改进右键菜单体验
- ✅ 修复双重滚动问题
- ✅ 更新部署文档

### v1.1.0 (2024-01-29)
- ✅ 添加虚拟滚动支持
- ✅ 优化大文件加载性能
- ✅ 添加搜索索引功能
- ✅ 改进用户界面

### v1.0.0 (2024-01-28)
- ✅ 基础文本查看功能
- ✅ 标签过滤功能
- ✅ 时间范围过滤
- ✅ 行号范围过滤

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题，请通过以下方式联系：
- 提交 Issue
- 发送邮件
- 在线讨论