TMS Copilot

一款专为腾讯出行服务（TMS）团队打造的 VSCode 效率提升插件

✨ 功能概览

功能	说明	入口
AI Helper 智能助手	需求开发、报错治理、埋点分析、反馈、设置	活动栏图标
TAPD 任务集成	自动生成规范 commit message	SCM 面板 TAPD 图标
埋点可视化分析	AST 解析埋点，可视化呈现	右键菜单 / AI Helper 侧边栏
代码注释对齐	一键对齐行尾注释	右键菜单
Apollo 配置跳转	选中配置名跳转管理页	右键菜单
图片上传 COS	上传图片到 COS 生成外链	快捷键 / 右键菜单
小程序组件创建	一键生成 wxml/less/ts/json 四件套	右键菜单
条件编译	代码片段 + 语法高亮	代码片段 / 自动高亮
TMS-UI 代码片段	30+ 高频组件代码片段	代码片段

✨ 功能特性

🤖 1. AI Helper 智能助手（核心功能）

AI Helper 是一个集成在 VSCode 侧边栏的智能开发助手，提供从需求分析到代码实现的全流程支持。点击活动栏的 AI Helper 图标即可打开。

内部采用 React + Vite + TailwindCSS 构建的 Webview 应用，包含 5 个功能 Tab。

📋 需求开发助手

通过 TAPD 需求驱动开发流程，实现「需求绑定 → AI 总结 → 任务拆解 → AI 执行」的完整闭环。

绑定 TAPD 需求：输入需求 ID 或 TAPD 链接，自动拉取需求标题和描述
AI 技术方案：调用 AI（Coding Copilot Agentic 模式）根据开发者角色（前端/后端/全栈）自动生成技术方案，写入 .codebuddy/aihelper/storydevelop/stories/{storyId}/story-summary.md
AI 任务拆解：基于技术方案自动生成多级任务列表（task-list.md），每个三级标题对应一个可执行的最小任务
任务执行：点击任务发送给 AI 执行，完成后自动更新任务状态（待执行 → 已完成）
取消执行：执行卡死时可手动取消，恢复可操作状态
完成摘要：AI 完成任务后自动记录实际改动摘要，为后续任务提供上下文，避免重复扫描
上下文传递：执行任务时自动传入技术方案和任务列表，AI 按需读取，无需盲目扫描仓库
实时同步：FileSystemWatcher 监听 md 文件变化，UI 实时响应更新
状态恢复：关闭窗口后重新打开，自动恢复上次各 Panel 的完整内容（需求详情页、埋点分析结果、报错堆栈输入、反馈表单草稿等），无缝续航
自定义 Prompt：支持配置绑定、任务拆解、执行三种 Prompt（setting.json）
文件范围选择：内置文件浏览器（FilePickerDialog），可指定分析路径范围，支持 Scope 管理
图片粘贴：任务描述中支持直接粘贴截图，自动上传并插入 Markdown 图片链接
手动需求：支持不通过 TAPD 手动填写需求描述

🐛 JS 报错治理

报错统计概览（今日报错数 / 待处理数）
错误列表展示与详情查看
手动分析模式：粘贴错误堆栈，调用 AI + tms_rd_mcp 的 sourcemap 解析定位源码
Prompt 模板化管理（prompts/error-prompt.md）

📊 埋点分析面板

与右键菜单的埋点分析命令联动，分析结果自动推送到侧边栏展示：

统一的文件/目录选择器（FilePickerDialog），支持 Scope 范围管理
树形导航 + 关键词搜索
埋点详情 + 精确代码跳转（含行号定位）
统计卡片点击滚动到对应区域
目录批量分析结果汇总
与 tms-prebuild 构建工具一致的全埋点提取逻辑（含生命周期）

⚙️ 设置

开发者角色：支持前端 / 后端 / 全栈三种角色切换，技术方案按角色自动裁剪章节
AI Prompt 自定义：支持配置绑定、任务拆解、执行三种 Prompt 追加指令
提交文案模板：自定义需求 / 缺陷的 Git commit message 格式，支持 {scope}、{name}、{id} 变量
侧边栏最小宽度 260px，防止内容变形

💬 反馈系统

支持 Bug / 建议 / 其他三种反馈类型
反馈记录管理

📋 2. TAPD 任务集成

快速获取 TAPD 任务和 Bug 信息，自动生成规范的 Git Commit Message。

快捷操作：在 Git 源代码管理面板点击 TAPD 图标
智能提取：自动获取任务标题、类型、团队归属等信息
规范格式：生成符合团队规范的 commit message
自定义模板：在设置面板配置提交文案模板，支持 {scope}（迭代归属）、{name}（标题）、{id}（ID）变量。默认：需求 feat({scope}): {name} --story={id}，缺陷 fix({scope}): {name} --bug={id}

📊 3. 埋点可视化分析

强大的埋点分析工具，提取逻辑与 tms-prebuild/report-helper 构建工具完全一致（内存模式，不修改源码），可视化呈现页面和组件的埋点信息。

分析入口：

单文件分析：右键 JS/TS 文件 → "分析文件埋点"
批量分析：右键文件夹 → "分析目录埋点"
AI Helper 侧边栏内选择文件/目录分析

埋点类型识别：

手动埋点：识别 report()、report2() 等埋点方法
全埋点：自动提取页面/组件事件绑定（bind:tap、catch:tap 等）
生命周期：Page/Component 生命周期函数埋点

依赖分析：

自动分析组件依赖关系（通过 usingComponents）
递归提取依赖组件的埋点信息
支持 import 文件的埋点追踪

可视化交互：

树形目录导航，清晰展示文件和组件层级
埋点详情展示：代码片段、参数说明、字段映射
精确跳转：点击"跳转代码"按钮定位到埋点代码位置（含行号）
智能搜索 / 一键展开收起 / SQL 生成 / 统计汇总

⚡ 4. 代码注释对齐

一键对齐选中代码的行尾注释，让代码更加整洁易读。

使用方式：选中代码 → 右键菜单 → "对齐行尾注释"
支持语言：JavaScript、TypeScript

// 对齐前
const name = "Alice";  // 姓名
const age = 25; // 年龄
const city = "Beijing";    // 城市

// 对齐后
const name = "Alice";   // 姓名
const age = 25;         // 年龄
const city = "Beijing"; // 城市

🔗 5. Apollo 配置快速跳转

选中 Apollo 配置键名，直接跳转到对应的配置管理页面。

一键跳转：选中配置名 → 右键 → "跳转到指定 apollo 配置"
多模块支持：自动识别不同业务模块（能源、活动、打车、顺风车等）
可配置：支持自定义 Apollo Base URL 和模块映射

支持的业务模块： 通用模块、基础、能源、活动、打车、代驾、顺风车、跑腿、车主服务、看车、商业化广告、交易中台、运营活动、聚合货运等

🖼️ 6. 图片上传 COS

快速上传图片到腾讯云 COS 并自动生成外链。

快捷键：Windows/Linux Ctrl + Alt + U / macOS Cmd + Alt + U
智能压缩：支持图片压缩（需配置 TinyPNG API Key）
自动插入：生成的图片链接自动插入到光标位置

🧩 7. 小程序组件快速创建

在资源管理器中快速创建微信小程序组件。

右键创建：文件夹右键 → "创建 Miniprogram Component"
生成文件：自动生成 index.wxml / index.less / index.ts / index.json 四个文件
开箱即用：Component() 模板已配置好

🎨 8. 条件编译代码片段与语法高亮

代码片段（快速插入条件编译注释）：

前缀	说明	示例
`@if`	条件编译 if	`// @if APP_NAME='sinan'`
`@el`	条件编译 else	`// @else`
`@ifn`	条件编译 if not	`// @if APP_NAME!='sinan'`
`@in`	插入编译变量	`'/* @echo VERSION */'`

支持 JavaScript/TypeScript/JSON/WXS、HTML/WXML、CSS/LESS/SCSS 三类注释格式。

语法高亮（自动识别条件编译注释块）：

基于 VSCode Decoration API 实时渲染
自动监听文件变化和主题切换
支持嵌套的条件编译块

🧱 9. TMS-UI 代码片段

内置 30+ 个 TMS-UI 高频组件代码片段，输入 tms- 前缀即可触发自动提示。

支持语言：JavaScript、TypeScript、HTML、WXML
组件覆盖：navbar、popup、dialog、loading、banner、icon、picker、calendar 等

🚀 安装使用

安装方式

下载 .vsix 文件
在 VSCode 中按 Ctrl+Shift+P / Cmd+Shift+P
输入 Extensions: Install from VSIX
选择下载的 .vsix 文件

配置项

在 VSCode 设置中搜索 tms-copilot：

{
  // TAPD 团队映射配置
  "tms-copilot.tapdMapping": {
    "团队A": "team-a",
    "团队B": "team-b"
  },
  
  // TinyPNG API Key（用于图片压缩）
  "tms-copilot.tinypngKey": "your-tinypng-api-key",
  
  // Apollo 配置基础 URL
  "tms-copilot.apolloBaseURL": "https://mapollo.woa.com/#/26fdbf3/business/4",
  
  // Apollo 模块配置
  "tms-copilot.apolloModules": {
    "modules": { "name": "通用模块", "id": "3" },
    "energy": { "name": "能源", "id": "5" },
    "takecar": { "name": "打车", "id": "12" }
    // ... 更多模块配置
  },

  // AI Helper 开发者角色（frontend / backend / fullstack）
  "tms-copilot.aiHelper.role": "frontend",

  // AI Prompt 追加指令
  "tms-copilot.aiHelper.bindExtra": "",
  "tms-copilot.aiHelper.taskExtra": "",
  "tms-copilot.aiHelper.executeExtra": "",

  // 提交文案模板（可用变量：{scope} {name} {id}）
  "tms-copilot.aiHelper.storyCommitTemplate": "feat({scope}): {name} --story={id}",
  "tms-copilot.aiHelper.bugCommitTemplate": "fix({scope}): {name} --bug={id}"
}

⌨️ 快捷键

功能	Windows/Linux	macOS
上传图片到 COS	`Ctrl + Alt + U`	`Cmd + Alt + U`

📦 依赖说明

依赖	用途
@tencent/tapd-node-sdk	TAPD API SDK（需求/任务数据获取）
axios	HTTP 请求库
cos-nodejs-sdk-v5	腾讯云对象存储 SDK（图片上传）
gogocode	AST 代码解析（埋点分析核心引擎）
sharp	图片处理与压缩
selenium-webdriver	浏览器自动化（身份认证 Cookie 获取）

🏗️ 项目结构

tms-copilot/
├── src/
│   ├── extension.js               # 插件主入口
│   ├── actions/                    # 数据/业务层
│   │   ├── tapd/                   # TAPD API 集成
│   │   ├── config/                 # 用户配置读取
│   │   ├── storage/                # VSCode globalState 存储
│   │   └── tracker/                # 使用情况埋点上报
│   ├── cammands/                   # 功能模块层
│   │   ├── ai-helper/              # AI Helper 侧边栏（Webview Provider + Handlers）
│   │   ├── report-analyzer/        # 埋点分析引擎（与 tms-prebuild 一致的 AST 提取）
│   │   ├── tapd-helper/            # TAPD commit message 生成
│   │   ├── align-comments/         # 行尾注释对齐
│   │   ├── apollo-jump/            # Apollo 配置跳转
│   │   ├── upload-image/           # 图片上传 COS
│   │   └── tms-snippets/           # 小程序组件创建 + TMS Link
│   ├── common/                     # 通用工具（logger/request/util）
│   └── vendor/                     # 条件编译高亮引擎
├── webview-ui/                     # AI Helper 前端（React + Vite + TailwindCSS）
│   └── src/
│       ├── panels/                 # 5 个功能面板
│       │   ├── RequirementPanel/   # 需求开发
│       │   ├── ErrorPanel/         # JS 报错
│       │   ├── TrackingPanel/      # 埋点分析
│       │   ├── FeedbackPanel/      # 反馈
│       │   └── SettingPanel/       # 设置
│       ├── components/             # 通用组件（TabBar/FilePickerDialog/KeepAliveOutlet）
│       └── utilities/              # Webview 通信封装
├── snippets/                       # 代码片段定义
└── icons/                          # 图标资源

🤝 参与贡献

欢迎提交 Issue 和 Pull Request！

开发指南

# 克隆仓库
git clone https://git.woa.com/yurini/tms-copilot.git

# 安装依赖
npm install

# Webview UI 开发（热重载）
npm run dev:webview

# 构建 Webview UI
npm run build:webview

# 运行 ESLint
npm run lint

# 发布新版本（自动递增 patch 版本号 + 打包 .vsix）
npm run publish

📄 许可证

内部使用，版权归腾讯出行服务团队所有。

📮 联系方式

仓库地址: https://git.woa.com/yurini/tms-copilot
问题反馈: 提交 Issue 或联系维护团队

让开发更高效，让协作更顺畅

Made with ❤️ by TMS Team

TMS Copilot

tms-yurini

TMS Copilot

✨ 功能概览

✨ 功能特性

🤖 1. AI Helper 智能助手（核心功能）

📋 需求开发助手

🐛 JS 报错治理

📊 埋点分析面板

⚙️ 设置

💬 反馈系统

📋 2. TAPD 任务集成

📊 3. 埋点可视化分析

⚡ 4. 代码注释对齐

🔗 5. Apollo 配置快速跳转

🖼️ 6. 图片上传 COS

🧩 7. 小程序组件快速创建

🎨 8. 条件编译代码片段与语法高亮

🧱 9. TMS-UI 代码片段

🚀 安装使用

安装方式

配置项

⌨️ 快捷键

📦 依赖说明

🏗️ 项目结构

🤝 参与贡献

开发指南

📄 许可证

📮 联系方式