Frontend Evolution
ODTS-37: 前端技术栈演变（2018-2026）
目标读者：需要理解 CICC OTC 衍生品系统从 JSP 到 Vue3 前端的 8 年演变的 BA/PM
数据来源：7+ 个独立前端项目的 git 历史 + package.json
概述
CICC 的 OTC 衍生品前端经历了三个世代的技术栈变迁：
第一代 (2016-2021) 第二代 (2022-2024) 第三代 (2024-2026)
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ JSP │ │ Vue CLI 2.x │ │ Vite + Vue3 │
│ Struts2 │ │ Element UI │ │ AG Grid │
│ 几乎无前端 │ │ Webpack │ │ TypeScript │
│ 代码残留 │ │ ECharts │ │ Composition │
└─────────────┘ └──────────────┘ │ API │
│ │ └──────────────┘
▼ ▼ │
(已废弃) 仍在使用中 ▼
(当前主力)广义前端架构
注意 CICC 的前端不是一个单页应用，而是多个独立 Vue 项目，各自对应不同的业务域：
┌── odts1/ （第一代独立前端）
│ ├── new-edsweb (Vue 2 + Element UI, 运营后台, 1503 commits on main)
│ ├── odts-option-web (Vue 2, 期权, 3699 commits on release)
│ ├── eds-rm-web (Vue 2, 风控, 147 commits)
│ ├── new-quota (Vue 2, 额度管理, 459 commits)
│ ├── fuxi-fe-demo (Vue 2, 伏羲平台, 145 commits)
│ └── edsWeb/ (老版 JSP Web 门户)
│
└─── odyssey/ （第二代/第三代前端）
├── odts-linear-web (Vite + Vue 3 + AG Grid, 线性产品, 2707 commits)
├── odts-option-web (Vue 2, 期权)
├── odts-swap-web (Vue 2, 互换)
├── odts-rm-web (Vue 2, 风控)
└── odts-main-web / public-web (统一门户/公网门户)阶段一：JSP 时代（2016-2021）
Struts2 后端渲染
eds-web-app 的早期前端就是 Struts2 的 JSP 页面。代码位置：
~/odts1/eds-web-app/WebContent/
├── WEB-INF/
│ ├── web.xml → Struts2 + Spring MVC 配置
│ ├── struts-config.xml → Action 映射
│ └── ...
├── jsp/ → JSP 页面目录
│ ├── contract/ → 合约管理
│ ├── risk/ → 风控
│ ├── trade/ → 交易
│ └── ...
└── static/ → 静态资源 (CSS, JS)工作方式：
浏览器 → HTTP Request → Struts2 Action → JSP 渲染 → HTML 响应 → 浏览器为什么需要独立前端
JSP 的局限性：
- 页面逻辑和 Java 代码混在一起
- 前后端无法分离开发
- 交互体验差（每次操作都需要整页刷新）
- 无法构建复杂的实时交易界面
这驱动了 2020-2022 年间向 Vue.js 的迁移。
阶段二：Vue CLI + Element UI 时代（2022-2024）
new-edsweb（运营后台前端）
项目地址：odts1/new-edsweb
与 odts-linear-web 的分工：new-edsweb 面向运营/风控/财务，处理结算、确认、报告、资金划转等后台操作；odts-linear-web 面向交易员，处理实时交易、持仓、风险。两者并行存在，分工明确。
详见 ODTS-42。
odts-option-web（第一代期权前端）
时间：2022-03 创建（release 分支有 3,699 commits，说明一直被维护）
技术栈：
Vue CLI (vue-cli-service)
Vue 2.x
Element UI (推断)
axios 0.21.4
ECharts 4.9.0
Day.js 1.10.7
bignumber.js 9.0.1
core-js 3.6.5odyssey 系列（第二代尝试）
2022 年中，odyssey 系列前端开始创建：
| 项目 | 创建时间 | Commits | 最后更新 | 状态 |
|---|---|---|---|---|
| odyssey-option-web | 2022-06 | 7 | 2022-07 | 暂停 |
| odyssey-swap-web | 2022-06 | 9 | 2022-08 | 暂停 |
| odyssey-main-web | 2022-06 | - | - | 暂停 |
| odyssey-public-web | 2022-06 | - | - | 暂停 |
| odyssey-fuxi-auth-web | 2022-06 | - | - | 暂停 |
这些项目全部在 2022 年夏天启动后停更。它们使用的是 Vue CLI（非 Vite）和 Vue 2。
技术栈（odyssey-option-web 的 package.json）：
Vue CLI (vue-cli-service)
Vue 2 / Vue 3 混用 (推断)
Element UI / Element Plus (推断)
eslint + stylelint + prettier
husky + lint-staged为什么都停了？ 可能是因为 2022 年下半年后资源集中到了 odts-linear-web（线性产品前端，使用 Vite + Vue 3 + AG Grid 的第三代方案）。
eds-rm-web（风控前端）
时间：2024-05 创建，2024-09 停更 Commits：147
技术栈：
Vue CLI (vue-cli-service)
Vue 2
Element UI 2.15.6
axios 0.21.4
Day.js 1.10.7
core-js ^3.6.5
highlight.js 11.3.1
lodash 4.17.21这是一个晚期的 Vue CLI 项目（2024 年还在用 Vue CLI 新开项目），说明 Element UI 在前端团队中仍然有很强的惯性。
new-quota（额度管理）
时间：2022-09 创建，至今仍在维护 Commits：459 核心开发者：Zhushi (273), Teng Zhang (154), Shi Zhu (25)
用途：客户额度管理的前端界面——查看和调整客户的交易额度、授信额度、占用额度。
技术栈：
name: quotation
Vue CLI + Vue 2
Element UI
axios
ECharts为什么需要独立的额度前端？ 额度管理在业务上是独立的——它和交易簿记、风险计算不同，涉及的是客户信用额度（credit limit）的分配和监控。它也不同于运营后台的通用功能，有自己的一套审批流程和通知机制。
fuxi-fe-demo（伏羲平台）
时间：2022-05 创建，2024-11 停更 Commits：145 核心开发者：Bangxian Zang (87), Liu Tao (18), Jiameng Guan (14)
用途：伏羲（Fuxi）是 CICC 内部的一个数据中台/AI 平台品牌。这个前端 demo 是伏羲平台的 OTC 衍生品数据展示界面，主要展示交易数据查询和统计报表。
技术栈：
name: fuxi-fe-demo
Vue CLI + Vue 2
Element UI
axios
ECharts为什么停了？ 145 次提交中有 87 次（60%）来自 Zang Bangxian——这很大程度上是个人项目。伏羲平台作为一个更大的集团数据中台战略，OTC 衍生品侧只需要一个简单的数据展示界面，不需要独立的重前端。
阶段三：Vite + Vue 3 + AG Grid 时代（2024-2026）
odts-linear-web（线性产品前端）
时间：2023-11 创建，至今仍在活跃开发 Commits：2,707（三个分支总计 6,676） 核心开发者：Yuana Gao (1134), Jiakang Wang (920), Yu Zhao (258)
技术栈（package.json 证据）：
{
"dev": "vite",
"build": "vite build",
"dependencies": {
"@ag-grid-community/core": "~29.3.0",
"@ag-grid-community/vue3": "~29.3.0",
"@ag-grid-enterprise/core": "~29.3.0",
"@ag-grid-enterprise/excel-export": "~29.3.0",
"@ag-grid-enterprise/row-grouping": "~29.3.0",
"@ag-grid-enterprise/charts": "~29.3.0",
...
}
}关键技术决策：
- Vite 替代 Vue CLI：开发构建工具从 Webpack 迁移到 Vite，构建速度提升 10x+
- AG Grid 替代 Element UI Table：AG Grid 企业版（29.3.x）替代 Element UI 的表格，支持虚拟滚动、行分组、Excel 导出、图表等
- Vue 3：使用 Composition API +
<script setup> - patch-package：直接修改 node_modules 中的包
27 个功能模块
src/views/pages/
├── trade/ → 交易管理 (HedgeTrade, RealTimeTrades)
├── contract/ → 合约管理 (新建/编辑/查询)
├── reckoning/ → 清算
├── riskMgt/ → 风险管理
├── eod/ → 日终
├── ValuationMgt/ → 估值管理
├── account/ → 账户管理
├── positon/ → 持仓 (注意: 不是 position)
├── recon/ → 对账
├── dma/ → 直接市场接入
├── pks/ → PKS 集成
├── equity/ → 权益事件
├── gma/ → GMA
├── dayTrading/ → 日内交易
├── reportMgt/ → 报告管理
├── sbl/ → 证券借贷
├── pbContractFile/ → PB 合约文件
├── underlying/ → 标的物管理
├── idx/ → 指数
└── ...业务代价：前端分裂的真实成本
”我在哪个界面做？“——运营的日常困惑
当你同时有 JSP、Vue2、Vue3 三个世代的前端，而且它们都在线时，运营人员面临一个实际问题：
场景（2024 年）：
→ 运营需要做一笔 TRS 的「合约修改」
→ JSP 界面可以做（eds-web-app/WebContent/jsp/）
→ new-edsweb 也可以做（Vue2 + Element UI）
→ odts-linear-web 也能看到合约信息，但修改功能还在 old-edsweb
运营怎么做？
→ 老员工知道去 JSP 改（做了 3 年）
→ 新员工用 new-edsweb 找"合约修改"菜单，找不到
→ 问老员工："哦，那个功能没搬到新界面，去 JSP 改"
→ 新员工打开 JSP 界面——长得完全不一样，找不到按钮在哪
→ 花了 15 分钟才找到
每天的运营操作中，这种"哪个功能在哪个界面"的认知开销：
→ 每人每天至少 3-5 次
→ 每次 10-15 分钟
→ 10 人运营团队每天浪费约 1 人天的工作时间
→ 每月：约 20 人天
→ 每年：约 240 人天
公司花了钱做了新前端，
结果运营的操作效率并没有明显提升，
因为功能分散在三个界面上，记忆成本反而更高了。odyssey 前端群的试错成本
2022 年 6 月，odyssey 创建了 5 个前端项目：option、swap、main、public、fuxi-auth。
总投入（估算）：
→ 5 个项目，3 个月（2022-06 到 2022-08）
→ 至少 3 名前端开发
→ 人力成本：约 45 万人民币（3 人 × 3 月 × 5 万/月）
→ 产出：累计不到 30 个 commit，全部停更
为什么停了？
→ 2022 年 8 月之后，这些项目就再也没有更新过
→ git log 显示：2022-08-19 之后零提交
→ 原因：2022 年下半年资源被调到 odts-linear-web（Vite + Vue3）
这对 BA/PM 的启示：
"微服务群"和"前端群"其实是一样的模式——
先规划了一大堆，然后发现做不了，撤资。
odyssey 前端群的 45 万投入，换来的是"好吧 Vite+Vue3 才是正确方向"的结论。三个前端的维护成本
截至 2026 年，CICC 同时维护着三个世代的前端：
| 世代 | 技术栈 | 2025-2026 变更量 | 维护团队 |
|------|--------|-----------------|---------|
| 第一代 | JSP | 几乎零变更 | 无专人（谁改后端谁顺手改） |
| 第二代 | Vue2 + Element UI | new-edsweb 392+103 | 兼职维护 |
| 第三代 | Vite + Vue3 + AG Grid | 2,707+ | 主力开发团队 |
这产生了一个典型问题：
→ 新的监管需求需要在 JSP、new-edsweb、odts-linear-web 上都加同样的功能
→ 但实际上只加了 odts-linear-web
→ 运营如果还在 JSP 上操作，就看不到新功能
→ 运营被迫迁到 odts-linear-web——但对老员工来说，学习成本很高年份 eds-web-app odts1/新前端 odyssey/主力前端
───────────────────────────────────────────────────────────────────────
2016 JSP (Struts2) - -
2017 JSP 继续 - -
2018 JSP + 少量 JS - -
2019 JSP 系统太复杂了 -
2020 JSP odts-option-web 原型 -
2021 JSP ← new-edsweb 创建 -
← odts-option-web 首次上传
2022 JSP new-edsweb 快速扩张 ← odyssey 前端群起
(1189 commits/年) option/swap/main/public
← new-quota 创建 全部夏启动→夏停更
(459 commits 累计) ← fuxi-fe-demo 创建
(145 commits 后停)
2023 JSP new-edsweb 稳定期 ← odts-linear-web 启动
(982 commits/年) (Vite + Vue 3 + AG Grid)
2024 JSP (可能还活着) new-edsweb 维护期 odts-linear-web 持续开发
(564 commits/年) eds-rm-web 启动又停
2025 JSP new-edsweb 慢速维护 odts-linear-web 持续
(392 commits/年)
2026 JSP new-edsweb 仍在维护 odts-linear-web 27 模块
(103 commits, 7个月)一个有趣的现象
前端项目有大量”死胎”——但也有长寿项目。
| 项目 | 创建 | 状态 | 原因 |
|---|---|---|---|
| odyssey-option-web | 2022-06 | 7 commits 后停 | 规划过早，资源不足 |
| odyssey-swap-web | 2022-06 | 9 commits 后停 | 同上 |
| fuxi-fe-demo | 2022-05 | 145 commits 后停 | 个人实验性质，非团队项目 |
| eds-rm-web | 2024-05 | 147 commits 后停 | 风控模块被合并到其他前端 |
| new-quota | 2022-09 | 459 commits, 仍活跃 | 额度管理有独立生命周期 |
| new-edsweb | 2021-09 | 3,499 commits, 仍活跃 | 运营后台需求稳定，Element UI 足够 |
| odts-linear-web | 2023-11 | 2,707 commits, 仍活跃 | 交易员核心界面，必须现代化 |
| odts-option-web | 2022-03 | 4,828 commits, 仍活跃 | 期权模块独立运维 |
真相是：那些”死胎”项目并不是整个前端策略的失败，而是快速试错——发现在 odyssey 命名空间下做全套重写不现实，于是把资源集中到两个最赚钱的产品线（线性产品和期权），同时运营后台维持 Vue 2 不动。
技术栈特征
| 特征 | 第一代 (JSP) | 第二代 (Vue CLI) | 第三代 (Vite) |
|---|---|---|---|
| 框架 | JSP | Vue 2 | Vue 3 |
| 构建 | Maven/Tomcat | Webpack | Vite |
| 组件 | 无 | Element UI | AG Grid Enterprise |
| API | Struts2 Action | axios REST | axios REST |
| 实时 | 无 | WebSocket | WebSocket |
| 打包 | WAR | npm build | npm build |
| 部署 | Tomcat | Nginx | Nginx |