Zadig 前端调研
内容提要
Zadig 是 KodeRover 基于 Kubernetes 研发的开源持续交付产品，支持云原生环境、微服务并行构建部署与集成测试，兼容 GitHub/GitLab、Jenkins 等。文章介绍其前端项目 zadig-portal 的本地启动流程、代码结构（element-ui、webpack、Vuex 等）及使用流程，并指出搜索筛选无效、冗余依赖等待优化问题。
延伸解读
本地开发环境搭建要点
文章详细说明了启动 zadig-portal 的步骤：需准备 git、node.js、yarn、vscode 及 Vue 相关工具。关键步骤包括在 os.koderover.com 用 GitHub OAuth 登录并 Fork 项目，修改 endpoint.FQDN 中的 githubid 为个人 ID，等待 Fork 完成获得测试环境。随后克隆仓库，将 config/index.js 中的 backEndAddr 改为测试环境地址，并先初始化账号才能本地登录。这些步骤对初次接触者至关重要。
代码结构解析与重点模块
zadig-portal 采用 Vue 技术栈，桌面端使用 element-ui，移动端使用 Vant，构建工具为 webpack 3.6.0。src 目录下，api 封装请求，common 存放通用组件并通过 traversal.js 注入，components 包含所有页面，其中 projects 文件夹集中了大部分重要功能。移动端页面需手动输入地址访问，暂无自动重定向。了解这些结构有助于快速定位和修改代码。
使用流程与常见疑问
文章以 Python+Redis+Node.js 微服务案例展示 Zadig 使用流程：新建项目、创建服务（K8s 资源或 Helm Chart）、配置构建脚本、加入运行环境。创建服务后自动生成 dev/qa 两套测试环境和三条工作流。文中还提出若干疑问，如工作流与环境的关系、ops 工作流的使用、Zadig 与 K8s 的关系等，这些是深入理解 Zadig 的关键点。
已知问题与优化方向
文章指出当前前端存在两个待优化问题：搜索代码库名称时筛选无效，以及存在冗余依赖（如 vue-resource）。这些问题可能影响开发体验和性能，提示贡献者可以从此入手进行改进。同时，文章最后提供了参考文档链接，便于进一步查阅官方资料。
Q&A
Zadig 是什么？它主要解决什么问题？
Zadig 是 KodeRover 公司基于 Kubernetes 自主设计、研发的开源分布式持续交付产品，为开发者提供云原生运行环境，支持本地联调、微服务并行构建和部署、集成测试等，旨在为工程师一键生成自动化工作流，且几乎兼容所有软件架构，无缝集成 GitHub/GitLab、Jenkins 等，运维成本极低。
如何在本地启动 Zadig 前端项目 zadig-portal？
首先需要准备前端开发环境：git、node.js、yarn、vscode（ESlint 插件）、vue.js DevTools。然后获取线上测试环境：在 https://os.koderover.com 使用 GitHub OAuth 登录，Fork Zadig 项目，将 endpoint.FQDN 中的 githubid 改成你的 GitHub ID，等待 Fork 完成得到测试环境。接着克隆 zadig-portal 仓库，修改 config/index.js 中的 backEndAddr 为测试环境地址（xxx.ko.coderover.cn），运行 yarn install 安装依赖，再运行 yarn run dev 启动。注意：本地登录前需先进入线上测试环境初始化账号；使用 GitHub 代码需先新建 GitHub OAuth 应用程序。
zadig-portal 的代码结构是怎样的？主要目录有哪些？
zadig-portal 根目录包含 amd64.Dockerfile、arm64.Dockerfile、build（webpack 打包配置）、config（环境配置）、index.html、package.json、publish.sh、src、static、zadig-nginx.conf 等。src 目录下包括：api（构建 ajax 请求）、App.vue（界面入口）、assets（静态资源）、common（通用组件）、components（前端页面）、main.js（打包入口）、mobile（移动端页面）、router（路由）、store（Vuex 配置）、utilities（功能函数）。components 文件夹包含所有前端页面，其中 projects 文件夹包含基本所有重要功能。
Zadig 前端项目使用了哪些主要技术栈和库？
Zadig 前端项目 zadig-portal 使用的技术栈包括：UI 库桌面端使用 element-ui，移动端使用 Vant；构建工具为 webpack ^3.6.0；代码编辑组件使用 vue2-ace-editor；代码展示组件使用 vue-codemirror；新手引导功能使用 vue-introjs；命令行模拟库使用 xterm。此外还使用了 Vuex 进行状态管理。
Zadig 的基本使用流程是怎样的？
以官网典型微服务案例（Python + Redis + Node.js）为例：1. 新建项目，设置项目名称与主键；2. 创建服务与服务构建，服务可以是一组 Kubernetes 资源（如 Ingress、Service、Deployment 等）、Helm Chart 或云主机服务，输入 K8s 配置生成服务，并配置构建脚本；3. 加入运行环境，创建服务后 Zadig 会自动生成 2 套测试环境（dev、qa）和 3 条工作流（voting-app-workflow-dev、voting-app-workflow-qa、voting-app-workflow-ops）；4. 开发环境设置更新条件，配置 Webhook 触发器，在 push 和 PR 时触发更新。
Zadig 前端目前存在哪些待优化的问题？
根据文章，Zadig 前端目前存在两个待优化的问题：一是搜索代码库名称时筛选无效；二是存在冗余依赖，例如 vue-resource。
