Test Webview 账号管理器
这是一个VSCode插件的webview实现，用于管理和快速切换不同环境的登录账号。
功能特性
账号管理
- 添加/编辑/删除账号
- 按环境分组显示
- 支持开发环境和生产环境
- 当前活跃账号高亮显示
环境切换
- 快速切换开发环境（dev）
- 快速切换生产环境（prod）
- 支持多域名配置
表单配置
- 环境名称（用于分组）
- 域名配置
- 登录ID和密码
- 开发环境配置（host/port）
- 生产环境配置（url）
- 浏览器选择（支持Chrome/Firefox/Arc/Edge/Safari）
使用说明
添加账号
- 点击右上角"添加账号"按钮
- 填写必要信息：
- 环境：用于分组的环境名称
- domain：域名标识
- loginId：登录用户名
- password：登录密码
- 根据需要填写可选信息：
- host/port：开发环境必填，用于本地开发
- url：生产环境必填，用于线上访问
- browser：选择打开的浏览器
切换环境
- 点击账号列表中的"dev"标签可快速切换到开发环境
- 点击账号列表中的"prod"标签可快速切换到生产环境
- 当前使用的账号会以红色标识
管理账号
- 编辑：点击编辑图标可修改账号信息
- 删除：点击删除图标可删除账号（会有确认提示）
数据存储
账号数据使用VSCode的配置存储系统，保存在webLoginPlugin.accounts配置项中。数据格式如下：
[
{
"env": "环境名称",
"children": [
{
"domain": "域名",
"loginId": "用户名",
"password": "密码",
"host": "开发环境地址",
"port": "开发环境端口",
"url": "生产环境地址",
"browser": "浏览器类型"
}
]
}
]
技术栈
- Vue 3
- Element Plus
- VSCode Webview API
| |
