# 插件市场 Frontend 前端设计稿

本文档面向前端与产品设计团队，定义插件市场在用户侧的页面结构、交互重点、状态展示和与后端的接口依赖。

## 一、定位

前端的核心任务不是“展示所有插件信息”，而是帮助用户快速完成三件事：找到合适插件、判断是否可信、安装兼容版本。

## 二、前端目标

1. 提供清晰的插件搜索与浏览体验。
2. 在下载前展示兼容性、维护状态与风险信息。
3. 支持查看版本、变更说明、作者与仓库来源。
4. 为安装、更新、失败恢复提供明确引导。

## 三、用户角色与主要场景

### 普通用户场景

1. 搜索插件。
2. 按分类、标签、状态筛选插件。
3. 查看插件详情。
4. 选择兼容版本并安装。
5. 查看已安装状态、可更新状态、风险状态。

### 作者场景

1. 查看自己插件的市场展示结果。
2. 确认版本是否被收录。
3. 查看审核状态、被拒原因、风险标记。

### 管理场景

1. 审核待上架插件。
2. 审核新版本。
3. 下架、封禁、标记风险。

## 四、页面结构建议

### 1. 市场首页

建议包含以下模块：

1. 搜索框。
2. 分类导航。
3. 推荐插件区。
4. 官方插件区。
5. 最近更新区。
6. 风险提示或公告区。

### 2. 搜索结果页

建议支持：

1. 关键词搜索。
2. 分类筛选。
3. 标签筛选。
4. 兼容当前宿主版本的过滤。
5. 仅显示稳定版。
6. 按更新时间、热度、名称排序。

### 3. 插件详情页

建议分为以下信息区块：

1. 基础信息。
2. 作者与仓库来源。
3. 当前推荐安装版本。
4. 可选版本列表。
5. 更新说明。
6. 兼容性说明。
7. 风险与审核状态。
8. 安装、更新、卸载入口。

### 4. 作者控制页

建议包含：

1. 我的插件列表。
2. 每个插件的最新收录版本。
3. 审核状态。
4. 同步失败提示。
5. 前往 CLI 修复的指引。

### 5. 管理后台

建议包含：

1. 待审核插件列表。
2. 待审核版本列表。
3. 风险插件队列。
4. 审计日志查看。
5. 下架与封禁操作面板。

## 五、关键展示字段

前端展示不应只围绕插件名称和简介，以下字段应优先可见：

1. 插件名称。
2. 插件 ID。
3. 作者。
4. GitHub 仓库来源。
5. 最新稳定版。
6. 是否兼容当前宿主版本。
7. 是否为官方或认证作者。
8. 是否预发布。
9. 是否已弃用或存在风险提示。
10. 最近更新时间。

## 六、安装流程设计

建议将安装流程设计成明确的多步状态，而不是单个“安装”按钮。

### 标准流程

1. 用户点击安装。
2. 前端请求后端获取推荐版本与下载信息。
3. 前端展示版本、兼容范围、文件大小、来源仓库。
4. 用户确认安装。
5. 客户端或宿主下载 GitHub Release 资产。
6. 下载后执行 sha256 校验。
7. 安装成功后前端更新状态。

### 失败处理

1. 下载失败时提示 GitHub 网络问题或稍后重试。
2. 校验失败时阻止安装并提示包完整性异常。
3. 当前宿主不兼容时，提示可安装的历史版本或要求升级宿主。

## 七、版本与兼容性展示建议

前端必须将兼容性信息前置展示。

建议在详情页和安装弹窗中显示：

1. 版本号。
2. 是否稳定版。
3. 支持的宿主版本范围。
4. 插件 API 版本。
5. 支持的平台。
6. 发布日期。

默认策略应为：

1. 自动推荐“最新兼容稳定版”。
2. 预发布版本默认折叠，用户主动展开后再选择。
3. 已撤回版本应隐藏安装入口，但可在版本历史中标记展示。

## 八、可信与风险提示设计

这是前端设计里必须单独处理的一块。

建议在视觉上区分以下状态：

1. 官方插件。
2. 认证作者插件。
3. 社区插件。
4. 未审核版本。
5. 已弃用插件。
6. 已标记风险插件。

风险提示至少应覆盖：

1. 插件已被平台下架。
2. 当前版本已撤回。
3. 插件长时间未维护。
4. 当前宿主版本不兼容。

## 九、与后端的接口依赖

前端至少依赖以下后端能力：

1. 插件搜索接口。
2. 插件详情接口。
3. 版本列表接口。
4. 推荐安装版本接口。
5. 作者插件列表接口。
6. 审核状态接口。
7. 管理审核接口。

## 十、前端交互优先级建议

第一优先级是减少误装与误判，而不是堆叠信息量。

因此建议按以下顺序设计：

1. 先解决搜索与详情信息架构。
2. 再解决安装弹窗与兼容性提示。
3. 再补充作者页与管理后台。

## 十一、MVP 建议

第一版前端建议仅交付：

1. 市场首页。
2. 搜索结果页。
3. 插件详情页。
4. 安装确认流程。
5. 基础风险提示与兼容性展示。

以下能力可放到后续阶段：

1. 评论评分。
2. 收藏与订阅。
3. 榜单与推荐算法。
4. 多维统计图表。
5. 作者控制台增强。