供应链产研交付提效：前端多业务线新增样板间页面统计方案

一、目标

为支撑研发效能分析、业务量化评估，需精准统计各业务线、各应用的新增页面数量，覆盖 Vue / React / RN 主流前端技术栈；统计方案需兼顾精准度、开发者使用体验，且尽可能降低落地与运营成本。

二、方案设计

前端新建页面的操作可分为「使用模板生成器」「不使用模板生成器」两类，整体处理逻辑如下：
是
否
直接新建文件
复制老模块
是（使用过模板）
否（未使用模板）
前端新建页面
是否使用模板生成器？
下载模板 → 自动插入标准化埋点注释 → 直接纳入统计
不使用模板生成器
操作类型？
选择方案一/二/三/四 → 手动/自动插入埋点注释
老模块是否含埋点注释？
复用原有注释 → 可直接统计
主动右键插入埋点注释 → 完成上报
MR 阶段统一统计

2.1 使用模板生成器（最优路径）

模板生成器是统计新增页面的核心最优方案，开发者下载业务模板后，插件会自动在文件头部插入标准化埋点注释，无需额外操作即可被后续流程识别统计：
开发者触发模板生成器
选择对应技术栈/业务模板
下载模板并初始化文件结构
插件自动插入 @page-info 埋点注释
文件创建完成 → 注释可被 MR 阶段识别

2.2 不使用模板生成器（补充方案）

针对未使用模板生成器的场景，按操作形式分为「直接新建文件」「复制老模块」两类处理：

2.2.1 直接新建文件

针对该场景设计 4 种补充方案，覆盖不同精准度、体验、落地成本的需求：
方案一：全量监听弹窗
方案二：智能监听弹窗
方案三：主动右键插入
方案四：约定命名识别
开发者直接新建文件
选择统计补充方案？
插件监听所有新建动作 → 弹窗选文件类型 → 插入埋点
插件识别文件类型/命名 → 命中页面规则才弹窗 → 填信息插埋点
新建后右键文件 → 选「插入页面埋点」→ 填信息插埋点
按规则命名文件（含 page 保留字）→ 插件识别后自动插埋点
埋点注释插入完成 → 纳入 MR 统计

方案	操作描述	统计精准度	易落地	优缺点分析
方案一	插件监听所有文件新建动作，弹窗让开发者选择文件类型，确认是页面文件后插入埋点注释	高	低	优点 ：无统计遗漏；可限制非页面类文件的无意义新增 缺点：违背开发者使用习惯，插件体验要求极高；需适配 50 + 种文件类型，适配成本高
方案二	插件仅监听代码文件（ts/tsx/js/jsx/vue 等），当文件类型/文件名命中「新增页面」规则时，弹窗引导填写信息并插入埋点注释	高	中	优点 ：无统计遗漏；仅针对页面类文件弹窗，对使用习惯影响小 缺点：仍有一定弹窗频率，需精准配置"页面规则"避免误触
方案三	新建文件后，开发者主动右键点击文件，选择「插入页面埋点」选项，弹窗填写信息后完成注释插入	中	高	优点 ：完全不干扰开发者使用习惯 缺点：依赖开发者自觉，数据易遗漏；需长期运营监督，维护成本高
方案四	约定新增页面文件命名规则（如 index-page.tsx / home-page.jsx，page 为保留字），插件识别保留字后自动插入埋点注释	中	中	优点 ：命名语义化，便于团队理解；对使用习惯影响小 缺点：命名规则推广难度大，非强制场景下数据易遗漏

2.2.2 复制老模块

复制老模块的场景按"原模块是否含埋点注释"分两类处理：

1. 原模块使用过模板生成器：已包含标准化埋点注释，无需额外操作，可直接被统计；
2. 原模块未使用过模板生成器：采用「方案三（主动右键插入）」，由开发者手动补充埋点注释后完成上报。

三、页面统计实现

统计的核心环节在 MR（Merge Request）阶段完成，通过正则匹配文件中的标准化埋点注释实现无侵入式数据收集，不影响研发流程与代码逻辑。

3.1 注释格式规范

定义统一的埋点注释格式，兼容 TypeScript / JavaScript / Vue 等所有前端文件类型，注释字段覆盖统计所需核心信息：

/**
 * @page-info
 * @jira-id: FEAT-1234
 * @creator: developer
 * @create-time: 2024-01-01
 * @business-line: 支付业务
 * @app-name: 商户后台
 * @description: 用户列表页面
 */

字段说明：

• @jira-id：关联需求ID，用于追溯页面研发背景；
• @creator：页面创建人，用于归属统计；
• @create-time：页面创建时间，用于时间维度统计；
• @business-line：所属业务线，用于业务维度统计；
• @app-name：所属应用，用于应用维度统计；
• @description：页面功能描述，用于辅助核对。

3.2 统计流程

统计全流程无侵入、自动化，无需开发者介入：
新建页面并插入埋点注释
开发者提交代码至 Git 仓库
发起 MR（Merge Request）
MR 流水线自动触发统计脚本
正则匹配所有文件中的 @page-info 注释
提取注释中业务线/应用/创建时间等核心字段
数据汇总至统计看板 → 按业务线/应用/时间维度展示

核心正则示例（匹配埋点注释并提取字段）：

// 匹配 @page-info 注释块
const pageInfoRegex = /\/\*\*[\s\S]*?@page-info[\s\S]*?\*\//g;
// 提取 jira-id 字段
const jiraIdRegex = /@jira-id:\s*(\S+)/;
// 提取业务线字段
const businessLineRegex = /@business-line:\s*(\S+)/;

四、体验优化

为降低开发者操作成本，提升方案接受度，针对埋点注释插入环节做以下体验优化：

4.1 自动填充埋点注释信息

插件自动识别并填充注释中的固定信息，仅保留「页面功能描述」需手动填写，大幅减少输入成本：

• Jira ID ：解析当前 feature 分支名（如 feature/FEAT-1234-用户列表）自动提取；
• 创建人 ：读取本地 Git 配置的 user.name / user.email 自动填充；
• 创建时间：获取系统当前时间（格式：YYYY-MM-DD）自动填充；
• 业务线/应用名 ：读取项目根目录的配置文件（如 project.config.json）自动填充；
• 页面功能描述：弹窗引导开发者简短输入（支持预设常用描述）。

4.2 文件模板代码初始化（提效 + 统计双赢）

基于物料插件实现「模板化开发 + 统计埋点」一体化，既提升研发效率，又保障统计精准度：

• 预设模板：内置 Vue / React / RN 技术栈的页面基础模板，包含通用逻辑（如路由、状态管理、样式）；
• 自定义模板：支持团队 / 业务线自定义模板，适配专属业务场景；
• 模板共享：搭建团队模板库，支持模板上传、下载、版本管理；
• 代码片段：集成常用代码片段（如请求封装、组件调用），一键插入。

五、方案对比与推荐

5.1 方案对比

从核心维度对比直接新建文件的4种补充方案：

维度	方案一	方案二	方案三	方案四
统计精准度	高	高	低	低
使用体验	极低	低	高	中
落地难度	高	中	低	中
运营成本	低	低	高	高

5.2 推荐方案

核心推荐：模板生成器（全业务线推广）

• 适配场景：所有新开发页面、重构页面；
• 优势：统计精准度 100%，无额外操作成本，不影响开发者体验；
• 落地策略：先覆盖核心业务线，再逐步推广至全业务线，配套模板使用教程。

补充推荐：方案二（智能监听 + 弹窗）

• 适配场景：未使用模板生成器的零散页面新建场景；
• 优势：在高精准度与低体验影响间平衡；
• 优化策略：
  1. 仅对 ts/tsx/js/jsx/vue 等页面类文件监听；
  2. 配置"页面文件命名规则"（如包含 page/view 等关键词），仅命中规则时弹窗；
  3. 支持开发者手动关闭单次弹窗，后续可右键补充插入。

兜底方案：方案三（主动右键插入）

• 适配场景：方案二未覆盖的边缘场景（如非常规命名的页面文件）；
• 落地策略：作为兜底，配套运营机制（如 MR 审核时提醒补充埋点）。

六、附录

6.1 当前业务新增的文件类型

梳理业务场景下所有文件类型，明确统计范围：

分类	具体类型	统计优先级
代码文件	TypeScript：ts / tsx JavaScript：js / jsx / cjs Vue：vue	高（核心统计对象）
样式文件	less / css / scss	中（随页面文件联动统计）
配置文件	json / yaml / yml / prettierrc / eslintignore / gitignore / babelrc / env / production / npmrc / nvmrc / lock / toml / conf	低（无需单独统计）
资源文件	图片：png / svg / jpg / gif / ico 音频：mp3 / wav 文档：md / html / pdf / xlsx / csv 字体：ttf	低（无需单独统计）
其他文件	Go：go / mod / sum 规则：mdc / hbs 脚本：sh Git：gitconfig / husky/commit-msg	低（按需判断）

6.2 文件类型统计汇总

类别	说明
代码文件	新增页面的核心载体，需重点统计
配置文件	工程 / 环境配置，一般无需统计
资源文件	静态资源，随页面联动统计即可
其他文件	非前端页面核心文件，按需统计

七、总结

7.1 核心要点

1. 核心路径：以模板生成器为核心，自动插入埋点注释，保障统计精准度与体验；
2. 补充路径：以方案二（智能监听）为补充，覆盖非模板场景，平衡精准与体验；
3. 统计环节：MR 阶段通过正则匹配注释实现无侵入统计，不影响研发流程；
4. 体验优化：自动填充注释信息、模板化开发，降低开发者操作成本。

7.2 实施建议（分阶段落地）

1. 第一阶段 ：
   • 完成模板生成器开发，内置 Vue / React / RN 基础模板；
   • 制定埋点注释规范与 MR 统计脚本；
   • 推广至 1-2 个核心业务线试点。
2. 第二阶段 ：
   • 开发 VS Code 插件实现方案二（智能监听）；
   • 完善统计脚本，新增数据校验逻辑；
   • 扩大模板生成器推广范围。
3. 第三阶段 ：
   • 搭建数据统计看板，支持业务线 / 应用 / 时间维度筛选；
   • 制定运营机制（如 MR 审核提醒、月度数据核对）；
   • 全业务线覆盖模板生成器。
4. 第四阶段（长期） ：
   • 定期优化模板与插件功能；
   • 监控统计数据完整性，持续迭代方案；
   • 新增数据维度（如页面迭代次数、维护人）。