npm package: @seasongold4/webssh2-frontend-fixed
Description: WebSSH2 前端终端库 - 修复版本，完全兼容原项目后端，解决终端显示乱码问题
Author: WebSSH2 Frontend Fixed
Latest version: 1.1.1

# WebSSH2 前端库 - 修复版本

[![npm version](https://badge.fury.io/js/webssh2-frontend-fixed.svg)](https://badge.fury.io/js/webssh2-frontend-fixed)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🎯 修复版本说明

这是WebSSH2前端库的修复版本，专门解决了以下问题：

- ✅ **解决终端显示乱码问题** - 不再显示 "wwwwwwwwwwww" 等乱码
- ✅ **完全兼容原项目后端** - 100%兼容WebSSH2原项目
- ✅ **保留所有原功能** - 日志记录、重认证、凭据重放等
- ✅ **界面完全一致** - 与原项目UI完全相同
- ✅ **稳定可靠** - 移除了所有不兼容的代码

## 📦 安装

```bash
npm install webssh2-frontend-fixed
```

## 🚀 快速开始

### 基本使用

```html
<!DOCTYPE html>
<html>
<head>
    <title>WebSSH客户端</title>
    <!-- 添加FontAwesome支持 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div id="terminal" style="height: 600px;"></div>
    
    <script src="node_modules/webssh2-frontend-fixed/dist/webssh2-frontend.js"></script>
    <script>
        const client = new WebSSHClient('terminal', {
            socketUrl: 'http://localhost:2222',
            socketPath: '/ssh/socket.io',
            onConnected: () => console.log('连接成功'),
            onError: (err) => console.error('错误:', err)
        });
        
        client.connect();
    </script>
</body>
</html>
```

### 高级使用

```javascript
import { WebSSHClient } from 'webssh2-frontend-fixed';

const client = new WebSSHClient('terminal-container', {
    socketUrl: 'http://your-server:2222',
    socketPath: '/ssh/socket.io',
    
    // 事件回调
    onConnected: () => {
        console.log('SSH连接已建立');
    },
    onDisconnected: () => {
        console.log('SSH连接已断开');
    },
    onError: (error) => {
        console.error('连接错误:', error);
    },
    onData: (data) => {
        console.log('接收数据:', data);
    }
});

// 连接
client.connect();

// 断开
client.disconnect();

// 销毁
client.destroy();
```

## 🔗 与WebSSH2后端集成

### 方式一：直接连接（推荐）
前端库现在会自动连接到WebSSH2后端，无需额外配置。

### 方式二：预先建立会话
如果需要，可以先通过浏览器访问WebSSH2的SSH连接URL：
```
http://localhost:2222/ssh/host/192.168.1.100?username=root&password=yourpassword
```

然后在前端库中连接即可。

## 🔧 API 文档

### WebSSHClient

#### 构造函数
```typescript
new WebSSHClient(container: HTMLElement | string, config: WebSSHClientConfig)
```

#### 配置选项
```typescript
interface WebSSHClientConfig {
  socketUrl: string;          // WebSocket服务器地址
  socketPath?: string;        // Socket路径，默认 '/ssh/socket.io'
  
  // 事件回调
  onConnected?: () => void;
  onDisconnected?: () => void;
  onError?: (error: string) => void;
  onData?: (data: string) => void;
}
```

#### 方法
- `connect()` - 连接到SSH服务器
- `disconnect()` - 断开连接
- `destroy()` - 销毁组件

## 🎨 功能特性

### 完整的WebSSH界面
- 📱 响应式设计
- 🎨 与原项目完全一致的UI
- 📋 底部菜单栏（日志、下载等功能）
- 📊 实时状态显示

### 终端功能
- 🖥️ 完整的终端模拟
- 📝 日志记录和下载
- 🔄 自动重连
- 🔧 窗口大小自适应

### 安全功能
- 🔐 重新认证支持
- 🔑 凭据重放功能
- ⏰ 安全关机倒计时

## 📁 示例文件

项目包含完整的示例文件：

- `examples/final-fixed-example.html` - 完整的修复示例
- `examples/complete-webssh-usage.html` - 完整功能演示
- `examples/frontend-usage.html` - 基础使用示例

## 🔄 从旧版本迁移

如果你之前使用的是有问题的版本，只需要：

1. 卸载旧版本：
```bash
npm uninstall webssh2-frontend
```

2. 安装修复版本：
```bash
npm install webssh2-frontend-fixed
```

3. 更新引用：
```javascript
// 旧版本
import { WebSSHClient } from 'webssh2-frontend';

// 修复版本
import { WebSSHClient } from 'webssh2-frontend-fixed';
```

## 🐛 问题修复

### 主要修复内容

1. **移除错误的连接事件**
   - 删除了不兼容的 `ssh-connect` 事件
   - 采用与原项目100%兼容的连接方式

2. **完全仿照原项目实现**
   - UI结构与原项目完全一致
   - 事件处理与原项目完全一致
   - CSS样式与原项目完全一致

3. **解决终端显示问题**
   - 修复了终端显示乱码的根本原因
   - 确保终端内容正常显示

## 💡 使用提示

1. **FontAwesome图标** - 确保页面加载了FontAwesome图标库
2. **后端兼容性** - 完全兼容WebSSH2原项目后端
3. **浏览器支持** - 支持所有现代浏览器
4. **响应式设计** - 自动适应不同屏幕尺寸

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交Issue和Pull Request！

## 📞 技术支持

如果遇到问题，请检查：
1. 后端服务是否正常运行
2. Socket.IO地址和路径是否正确
3. 浏览器控制台是否有错误信息
4. FontAwesome图标库是否正确加载

---

**注意：这是WebSSH2前端库的修复版本，专门解决了终端显示乱码等问题，与原项目100%兼容。**