VSCode插件UI和功能设计

[anycodes]

基于之前的版本：Serverless-Devs/Serverless-Devs#444 进行进一步打磨。

区域划分

从我的角度，我将VSCode，我们可以利用的区域划分成了5个：

• 区域1�：整体标题/功能区域
• 区域2: 组件功能区域
• 区域3: 代码编辑区域/Webview功能区域
• 区域4：系统功能区域
• 区域5: 状态区域

阶段划分

• 引导阶段：在安装完成之后/创建应用
• 应用创建阶段：创建应用的过程
• 功能实用阶段：调试/部署等逻辑

整体目标

• 规范标准的 Serverless Devs 工具链在IDE层面的加成
• 提供高效可用的代码应用全生命周期管理能力

功能设计

区域1

区域1的整体设计相对固定，始终展示：

1. Serverless Devs 标题
2. 相关功能
   • 创建应用
     • 创建模板应用
     • 通过Registry创建
   • 系统设置
     • 账号管理
     • 组件管理
     • 更多设置
     • 问题反馈

区域2

区域2的整体设计，更为灵活。

主要分为：

• 创建应用之前

创建应用之前，这里显示的是相关的引导

这里面的开发必读中的5个链接，最好可以配置文件的形式存放在代码仓库中，便于之后的扩展和更新。

在当前页面：

• 超链接：主要颜色，可以进行微调，别于背景颜色融合太厉害

• 所有的链接点开之后，均在右侧的窗口显示（区域3）

• 创建应用之后

创建应用之后，这里显示的是代码相关的内容，主要从两个维度进行显示：

1. 文件树
2. Serverless 应用纬度

文件树中，如果遇到的符合Serverless Devs 规范的Yaml，右键的时候，要：

1. 读取所有组件Command信息，并进行合并，对外进行展示，例如
   

Serverless 应用纬度中，环境/标记/服务右侧的按钮：

• 编辑：编辑对应的Yaml文档
• 更多（右键同样显示下面内容）：
  • 聚合后的命令
  • 快捷命令配置
  • 组件项目首页【如果是service层增加这部分】

用户选择了快捷命令配置之后，在区域3的位置，弹出窗口，让用户自定义添加快捷按钮：

这一部分的配置，可以缓存到.s目录，伴随项目加载

区域3

整的编辑页面，主视觉点。

1. 代码编辑 / 保持原有样式
2. s.yaml 编辑，增加联想输入

   如果是s.yaml编辑，将会在区域4，增加按钮，进行校验和可视化编辑：
   

3. 如果是文档类的帮助信息，在区域4，增加浏览器打开按钮：
4. 如果是引导类，参考最后的UI设计

区域4

默认内容：

依次表示的是：

• Serverless Devs首页
• Serverless Registry 首页
• Serverless Github repo
• 钉钉群/社区
• Serverless Github repo issues

如果因为页面不同，有页面层配置，优先使用页面配置

区域5

这一部分是状态显示，主要分为几个状态：

1. 静默状态，在刚开始的时候，没打开应用的时候，这里显示：Welcome to Serverless Devs
2. 打开了应用，在此时这里显示应用名称
3. 在进行操作的时候，这里可以动态显示日志/或者相关命令的状态等

部分细节

创建应用

创建模板应用:

1. 类似于下面的方法进行选择
   

2. 选择好要创建的应用，在区域3，复用应用中心现在的创建应用的高级配置表单，进行参数填写
   

通过Registry创建：

接口参考文档: http://www.devsapp.cn/application.html

1. 直接在区域3，显示现在的Registry信息：
   

这里只需要显示：

1. 推荐应用【对应registry的专题】
2. 全部应用【对应registry的应用】

每个应用所展示的元素，可以参考registry，每个卡片可以是：

点击查看，可以跳转到应用详情页面【直接打开registry即可，或者跳转到对应页面】

系统设置

目前的ui都是白色底色，可以改成深色，对应文字，icon颜色也对应变浅即可

账号管理

添加授权信息：

组件管理

更多设置

问题反馈：直接跳到serverless devs repo的issues即可

[anycodes]

创建新应用/空应用的功能 干掉

[anycodes]