基于 Zadig 手把手构建企业开发者门户 – GitLab-MR

推广 | 从思路到实战，鸿蒙应用开发创新实践

                                                                                                                                                <div> 

最终效果预览

• 查看分配给我的 Merge Request
• 按状态（已打开/已关闭/已合并/全部）与范围（分配给我/我创建的/全部）筛选
• 分页与一键跳转至 GitLab MR 详情

准备工作

本插件的初始开发耗时约 2 天，但您无需重复此过程。遵循本教程，可在 1-2 小时内快速完成，立即体验 Zadig 插件的便捷开发。

• 了解 JavaScript、HTML、CSS 等语言，参见 MDN Web 前端开发者。
• 了解 Vue 前端框架。
• UI 组件推荐使用 Element UI。

• Node.js v20.0+
• Yarn v4.0+
• Zadig v4.0+

• GitLab 实例的 Personal Access Token（需要勾选权限： api、 read_user）

# 全局安装 zadig-plugin-cli
yarn global add zadig-plugin-cli-dev
# 验证安装
zadig-plugin --version zadig-plugin --help 
# 创建插件，默认创建 Page 类型
zadig-plugin create gitlab-mr-plugin

cd gitlab-mr-plugin zadig-plugin dev

核心代码速览

入口与路由注册（index.js）

// 路由注册（节选） 
<em>this</em>.registerRoute({ path: '/', component: WrappedComponent, meta: { title: 'GitLab Merge Requests', icon: 'el-icon-s-cooperation' } })
// manifest（节选） 
const manifest = { identifier: 'gitlab-mr-plugin', name: 'GitLab MR查看器', version: '1.0.0', description: '查看分配给我的GitLab Merge Request', type: 'page', route: '/gitlab-mr' }

主页面容器（components/GitLabMRMain.vue）

• 使用本地存储保存 gitlab_url 和 gitlab_token
• fetchMergeRequests 基于 GitLab API 拉取 MR 列表，支持状态/范围/分页
• 「测试连接」会请求 /api/v4/user 验证 Token

<!-- 拉取 MR 列表（节选） --> 
async fetchMergeRequests () 
{ if (!this.isConfigured) { this.showTokenDialog = true return } 
const params = new URLSearchParams({ state: this.filterState === 'all' ? undefined : this.filterState, scope: this.filterScope === 'all' ? undefined : this.filterScope, page: this.currentPage, per_page: this.pageSize, sort: 'desc' }) 
Array.from(params.entries()).forEach(([k, v]) => { if (v === 'undefined' || v === undefined) params.delete(k) }) 
const response = await fetch(`${this.gitlabUrl}/api/v4/merge_requests?${params}`, { headers: { Authorization: `Bearer ${this.gitlabToken}`, 'Content-Type': 'application/json' } }) 
const data = await response.json() 
this.mergeRequests = data
const totalHeader = response.headers.get('X-Total') 
this.total = totalHeader ? parseInt(totalHeader) : data.length } 
<!-- 测试连接（节选） --> 
const response = await fetch(`${this.gitlabUrl}/api/v4/user`, { headers: { Authorization: `Bearer ${this.gitlabToken}`, 'Content-Type': 'application/json' } })

GitLab 配置（components/ConfigDialog.vue）

• URL/Token 的双向绑定
• 事件派发

表格与交互（components/MRTable.vue）

• 根据 API 展示 MR 的基本信息
• 点击行跳转到 MR 详情

<!-- MR 展示（节选） --> <el-table :<em>data</em>="data" :<em>loading</em>="loading" @<em>row-click</em>="handleRowClick" <em>style</em>="width: 100%" <em>stripe</em> > <el-table-column <em>prop</em>="title" <em>label</em>="标题" <em>min-width</em>="300"> <template <em>slot-scope</em>="scope"> <div <em>class</em>="mr-title"> <span <em>class</em>="mr-iid">#{{ scope.row.iid }}</span> <span <em>class</em>="title-text">{{ scope.row.title }}</span> </div> </template> </el-table-column> <el-table-column <em>label</em>="源分支"> <template <em>slot-scope</em>="scope"> <span <em>class</em>="branch-name">{{ scope.row.source_branch }}</span> </template> </el-table-column> <el-table-column <em>label</em>="目标分支"> <template <em>slot-scope</em>="scope"> <span <em>class</em>="branch-name">{{ scope.row.target_branch }}</span> </template> </el-table-column> <el-table-column <em>label</em>="作者"> <template <em>slot-scope</em>="scope"> <div <em>class</em>="author-info"> <img <em>v-if</em>="scope.row.author.avatar_url" :<em>src</em>="scope.row.author.avatar_url" <em>class</em>="author-avatar" :<em>alt</em>="scope.row.author.name" /> <span <em>class</em>="author-name">{{ scope.row.author.name }}</span> </div> </template> </el-table-column> <el-table-column <em>prop</em>="state" <em>label</em>="状态" <em>width</em>="100"> <template <em>slot-scope</em>="scope"> <el-tag :<em>type</em>="getStateType(scope.row.state)" <em>size</em>="small"> {{ getStateText(scope.row.state) }} </el-tag> </template> </el-table-column> <el-table-column <em>label</em>="创建时间" <em>width</em>="160"> <template <em>slot-scope</em>="scope"> {{ formatDate(scope.row.created_at) }} </template> </el-table-column> <el-table-column <em>label</em>="更新时间" <em>width</em>="160"> <template <em>slot-scope</em>="scope"> {{ formatDate(scope.row.updated_at) }} </template> </el-table-column> </el-table>

构建与测试

• 打开浏览器开发者工具，关注 Console 与 Network
• 若访问 GitLab 失败，先使用「配置 → 测试连接」排查 URL/Token/权限

# 构建生产版本 
zadig run build

在 Zadig 中上传并发布

1. 登录 Zadig → 进入「系统设置 → 插件管理」
2. 点击「新建插件」，填写：
   1. 插件名称：GitLab MR 查看器
   2. 插件类型：导航功能页（Page）
   3. 路由路径： /gitlab-mr-plugin
   4. 插件描述：查看分配给我的 GitLab Merge Request
   5. 插件状态：启用
   6. 上传构建产物： dist/plugin.js
3. 返回主页面侧边栏，点击添加页面，类型选择插件，选择刚创建的插件