AI SFTP Web Editor
一个基于 VS Code 的扩展，通过 SFTP + AI 可视化方式编辑远程网站文件。
功能特性
- 📡 SFTP 站点管理 — 直观的 UI 界面管理多个 SFTP 服务器，支持密码和私钥两种认证方式，一键测试连接
- 📥 本地镜像同步 — 将远程网站文件同步到本地工作区，支持文件树浏览
- 🌐 可视化 Web 预览 — 内置 iframe 预览面板，支持点击定位源代码位置
- 🤖 AI 智能编辑 — 用自然语言描述修改需求，AI 自动修改代码
- 🔗 外部网站预览 — 在预览面板中加载任意网页 URL
- 📂 本地文件预览 — 预览本地 HTML/SVG/文本文件
- 🤖 VS Code Agent 集成 — 自动检测已安装的 AI Agent（Copilot、Cline、Claude、Continue、通义灵码等）
- ☁️ 一键上传 — 修改完成后一键上传到服务器
使用方法
1. 安装扩展
\\ash
code --install-extension ai-sftp-web-0.1.3.vsix
\\
或者从 VS Code Marketplace 安装。
2. 打开控制面板
- 按 \Ctrl+Shift+P\ 输入 \AI SFTP Web: 打开控制面板\
- 或者点击活动栏中的 ☁️ AI SFTP Web 图标
3. 配置 SFTP
- 切换到 SFTP 配置 标签页
- 填写配置名称、主机地址、端口（默认 22）和用户名
- 选择认证方式：密码 或 私钥文件（支持 ~/.ssh/id_rsa\ 自动展开）
- 填写远程根目录路径
- 点击 测试连接 验证配置
- 点击 保存配置
4. 配置 AI 模型
- OpenAI 兼容 API：选择此项，输入 API Key 和模型名称
- 自定义 API：选择此项，输入完整 API 地址、Key 和模型名称
- 使用 VS Code Agent：选择此项，从检测到的已安装 Agent 中选择（Cline、Copilot Chat 等）
5. 初始化站点
在已保存的 SFTP 配置卡片中，点击 📥 初始化站点 将远程文件同步到本地。
6. 编辑与预览
- 在文件树中选择文件，在预览面板中查看
- 点击 🔍 选择元素 在预览页面中选取要修改的元素
- 在 AI 聊天框中输入修改需求
- 点击 ✨ AI 修改 自动修改代码
7. 上传修改
- 文件修改后，右上角上传按钮会显示修改数量
- 点击 ☁️ 上传 将修改同步到远程服务器
命令列表
| 命令 |
说明 |
| \AI SFTP Web: 打开控制面板\ |
打开主控制面板 |
| \AI SFTP Web: 配置 SFTP\ |
打开 SFTP 配置页面 |
| \AI SFTP Web: 配置 AI 模型\ |
打开 AI 模型配置页面 |
| \AI SFTP Web: 上传修改到服务器\ |
上传本地修改到远程服务器 |
| \AI SFTP Web: 从服务器拉取站点文件\ |
从服务器同步文件到本地 |
| \AI SFTP Web: 切换站点\ |
切换当前 SFTP 站点 |
| \AI SFTP Web: AI 分析当前页面\ |
使用 AI 分析当前打开的 HTML 文件 |
| \AI SFTP Web: 打开本地文件预览\ |
在预览面板中打开本地文件 |
| \AI SFTP Web: 打开网站预览\ |
在预览面板中打开外部网站 |
侧边栏视图
在 VS Code 活动栏中点击 ☁️ AI SFTP Web 图标后，侧边栏会显示 SFTP 站点管理视图：
- 未配置站点时：显示快速入口链接（打开控制面板、添加 SFTP 站点、配置 AI 模型）
- 已配置站点时：显示站点列表和功能按钮
- 视图标题栏：提供快捷操作按钮
开发指南
克隆与构建
\\ash
git clone https://github.com/Gsaecy/AI-SFTP-WEB.git
cd AI-SFTP-WEB
npm install
npm run compile
npm run build:webview
\\
调试运行
- 在 VS Code 中按 \F5\ 启动扩展开发调试
- 新的扩展开发宿主窗口会打开
- 点击活动栏中的 ☁️ AI SFTP Web 图标开始使用
项目结构
\
AI-SFTP-WEB/
├── src/
│ ├── extension.ts # 扩展入口，注册命令
│ ├── ai/
│ │ ├── aiClient.ts # AI API 客户端
│ │ └── promptBuilder.ts # 提示词构建器
│ ├── mapping/
│ │ └── domMapper.ts # DOM 映射工具
│ ├── sftp/
│ │ └── sftpManager.ts # SFTP 管理器
│ ├── types/
│ │ └── diff.d.ts # 类型定义
│ ├── webview/
│ │ ├── panelManager.ts # Webview 面板管理（含 UI）
│ │ ├── sftpTreeProvider.ts # 侧边栏树视图提供器
│ │ ├── messageTypes.ts # 消息类型定义
│ │ └── ui/ # React UI（备用）
│ └── workspace/
│ ├── diffUtil.ts # 差异比较工具
│ └── workspaceManager.ts # 工作区管理器
├── media/ # 媒体资源
├── package.json # 扩展清单
├── webpack.config.js # Webview 构建配置
├── tsconfig.json # TypeScript 配置
└── tsconfig.webview.json # Webview TypeScript 配置
\\
常见问题
Q: 连接 SFTP 失败？
A: 请检查主机地址、端口、用户名和密码是否正确。如果使用私钥认证，确保私钥路径正确且文件权限正确。
Q: AI 修改不生效？
A: 请确保 AI 模型配置正确，API Key 有效。如果使用 VS Code Agent，确保已安装对应的 Agent 扩展。
Q: 预览页面无法加载？
A: 请先配置并初始化 SFTP 站点。本地文件预览支持 HTML、SVG 等格式。
许可证
MIT License
