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
| |