Fund Helper · VS Code / Cursor 扩展

在编辑器里看基金持仓，不用切窗口。

Fund Helper 将养基宝持仓面板嵌入 VS Code / Cursor：微信扫码登录后，于侧边栏、底部 Panel 或状态栏查看大盘指数、总资产、当日收益与各账户基金明细。无需部署 fund-helper 后端或 MongoDB，样式自动适配明暗主题。

技术实现详见 TECH.md §19。

功能

与其他客户端对比

入口一览

扩展提供 四个可视化入口，均可打开同一套持仓 Webview（侧边栏为主入口，底部 Panel 可并列查看）。

命令面板（补充入口）

Cmd+Shift+P / Ctrl+Shift+P 可搜索：

懒加载：扩展在首次打开视图或执行上述命令时激活，不会在 Cursor 启动时自动占用资源。

安装

方式 A：下载 VSIX 安装（推荐）

仓库内已附带打包好的安装包，无需自行构建：

安装步骤：

1. 下载或 clone 仓库后找到上述 .vsix 文件
2. 打开 VS Code / Cursor
3. Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Extensions: Install from VSIX…
4. 选择 fund-helper-vscode-0.1.0.vsix
5. 按提示 Reload Window 重载窗口
6. 点击活动栏柱状图图标，或状态栏 Fund Helper，微信扫码登录

也可在扩展侧边栏右上角 … → Install from VSIX… 选择同一文件。

方式 B：VS Code Marketplace

在扩展市场搜索 Fund Helper 安装（若已上架）。

方式 C：本地调试（开发）

cd vscode-extension
npm install
npm run build

1. 用 VS Code / Cursor 打开 fund-helper 根目录 或 vscode-extension 子目录
2. Cmd+Shift+D → 选择 Fund Helper Extension → F5
3. 在弹出的 [Extension Development Host] 新窗口中使用

方式 D：自行打包 VSIX

chmod +x publish-vscode.sh
./publish-vscode.sh 0.1.0 --local
# → assets/releases/vscode/v0.1.0/fund-helper-vscode-0.1.0.vsix

发版维护者更新版本时，请重新执行 --local 并将新 VSIX 提交到 assets/releases/vscode/v{版本}/。

发版与推送

根目录脚本 publish-vscode.sh 与桌面端 publish-desktop.sh 用法类似。

方式 1：GitHub Release（推荐，无需 Marketplace 账号）

brew install gh && gh auth login
./publish-vscode.sh 0.1.0 --release
# 等待 CI → ./publish-vscode.sh 0.1.0 --collect

或打 tag：

git tag -a vscode-v0.1.0 -m "VS Code extension 0.1.0"
git push origin vscode-v0.1.0

下载页：Releases → vscode-v0.1.0
CI：Actions → VS Code Extension Release

用户安装：下载 .vsix → Install from VSIX…

方式 2：VS Code Marketplace（扩展市场搜索安装）

一次性准备：

1. 打开 Visual Studio Marketplace Publisher 创建 Publisher
   • ID 须与 package.json 的 "publisher": "fund-helper-org" 一致
2. Azure DevOps → User settings → Personal access tokens
   • 范围勾选 Marketplace → Manage
3. 导出令牌：

export VSCE_PAT=你的PAT
./publish-vscode.sh 0.1.0 --marketplace

上架后扩展页：https://marketplace.visualstudio.com/items?itemName=fund-helper-org.fund-helper-vscode
Cursor 用户可在扩展市场搜索 Fund Helper 直接安装。

Open VSX（VSCodium 等）如需上架，可额外使用 ovsx；当前脚本未内置，可手动 ovsx publish 同一 VSIX。

开发

cd vscode-extension
npm install
npm run build          # extension + webview 一次构建
npm run watch          # 监听 Extension Host（另开终端）
npm run watch:webview  # 监听 Webview React

Webview 内右键 → Open Webview Developer Tools 可调试 React 层。

调试配置

• 根目录 .vscode/launch.json — 从 monorepo 根 F5
• 子目录 vscode-extension/.vscode/launch.json — 单独打开 vscode-extension 时 F5

项目结构

vscode-extension/
├── package.json              # contributes：views、commands、menus
├── esbuild.mjs               # Extension Host 打包 → dist/extension.js
├── vite.webview.config.ts    # Webview React 打包 → dist/webview/
├── media/
│   └── fund-helper.svg       # 活动栏图标（24×24 单色 SVG）
├── docs/
│   └── entry-points.png      # 入口示意图
└── src/
    ├── extension.ts          # activate：注册视图、命令、状态栏
    ├── fundHelperController.ts  # Webview HTML、postMessage 路由
    ├── yjb.ts                # 养基宝 HTTP + MD5 签名
    ├── portfolio.ts          # 持仓快照聚合
    ├── sessionStore.ts       # globalState 会话
    └── webview/              # React 19 前端
        ├── App.tsx
        ├── components/       # LoginView、PortfolioView
        ├── lib/              # format、fundSort、qr-state
        └── styles/panel.css  # --vscode-* 主题变量

技术说明（摘要）

数据流

用户打开 Webview
  → Webview postMessage { type: 'boot' }
  → Extension Host loadSession() / fetchPortfolioSnapshot()
  → postMessage 回传 session、portfolio
  → PortfolioView 渲染

养基宝 HTTP 在 Extension Host（Node） 发起：Webview 受 CSP 限制，不能直连 browser-plug-api.yangjibao.com。

登录

1. Webview 请求 startLogin → Host 调用 yjb.getQrcode()
2. Webview Canvas 绘制 QR，每 2s 发送 pollQr
3. state === '2' 且返回 token → 保存 Session → 拉取持仓
4. Token 401 → 清除 Session → 回到登录页

主题与样式

panel.css 将 Chrome 插件硬编码色映射为 VS Code 变量，例如：

• --bg → --vscode-editor-background
• --rise / --fall → --vscode-charts-red / --vscode-charts-green

说明与限制

• 登录态保存在 ExtensionContext.globalState，卸载扩展后清除。
• 需关注公众号「养基宝」并完成小程序注册后方可扫码登录（与浏览器插件相同）。
• API Secret 内置于 Extension Host，适合个人使用。
• Cursor 对 editor/title 按钮的支持因版本而异，右上角入口可能出现在 ... 折叠菜单中。

参考