GSP 前端开发
Otter Bot 驱动的 GSP 银行业务前端项目开发，涵盖代发薪模块、科技企业认定模块的功能开发、E2E 测试和打包部署。
概述
GSP 是一个银行业务前端项目，采用 React + TypeScript monorepo 架构。由 Otter Bot 在 macOS ‘otter’ 机器上进行开发、测试和打包。项目包含多个 packages：system（科技企业认定）、mock-platform（模拟数据）、marketing-clue（营销线索/代发薪）等。
开发过程中 Otter 负责代码修改、E2E 浏览器验证（使用 agent-browser）、国际化处理和打包部署，形成了完整的 AI 辅助开发工作流。
技术栈
| 技术 | 说明 |
|---|---|
| React 17 | 前端框架 |
| TypeScript | 类型系统 |
| Ant Design | UI 组件库 |
| monorepo | workspaces + wsrun |
| webpack | 构建和 dev server |
| Azure Pipelines | CI/CD |
| GSPTable | 业务表格组件（自带筛选参数注入） |
项目结构
packages/
├── system/src/views/technology/determine/ # 科技企业认定
│ ├── settings/ # 设置页
│ ├── approval/ # 审批（详情、修改）
│ └── upload-settings/ + upload/ # 上传配置
├── mock-platform/src/mock/ # Mock 数据层
│ ├── api.ts # Mock 路由和数据
│ └── menu.ts # 菜单配置
└── marketing-clue/src/views/payroll/ # 代发薪模块
├── customer-list/ # 客户清单（客户Tab + 集团Tab）
├── detail-query/ # 明细查询
└── info-exchange/ # 信息交流
代发薪模块
客户清单 — 客户 Tab
- 筛选条件：数据日期、机构、客户层级、口径（默认首项）、客户号
- 28 个字段，默认显示 15 列
- 日期传月底（
UpdateDate=2026-03-31） - 导出 API:
api/TBPayment/PayrollAgency/Customers/AsyncExport
客户清单 — 集团 Tab
- 筛选条件：数据日期、牵头行、客户层级、代发薪业务情况、集团编号
- 多值逗号分割（“已代发,代发份额不匹配”）
- 导出 API:
api/TBPayment/PayrollAgency/Groups/AsyncExport
明细查询
- 筛选条件：数据日期、机构、口径、客户（无客户层级）
- 千分位格式：金额2位小数 (
55,666.12)、人数整数 (1,450) - 导出 API:
api/TBPayment/PayrollAgency/Details/AsyncExport
信息交流
- 修复 branchCode 对象传递 bug（应传
.branchCode字符串） - 修复导出未传筛选条件问题
- 导出 API:
api/InfoExchangeArea/ExportInfoList
科技企业认定模块
资质类型
| ID | 名称 | 支持撤销公告 |
|---|---|---|
| 1 | 高新技术企业 | ✅ |
| 2 | 科技型中小企业 | ✅ |
| 3 | 创新型中小/专精特新/小巨人 | ❌ |
| 6 | 国家技术创新示范企业 | ❌ |
| 7 | 制造业单项冠军企业 | ❌ |
导出文件名规则
- 高新/科创:
{资质名}-{认定公告/撤销公告}-{YYYY-MM}.csv - 其他类型:
{资质名}-{YYYY-MM}.csv
国际化 (i18n)
- 新增 82 个
payroll.*前缀 i18n key - 覆盖 zh-CN / en-US / zh-HK 三个 locale
- 模式:
intl.getMessage('payroll.keyName') - BIZ_STATUS_OPTIONS 从模块级常量改为组件内（需 intl 上下文）
导出功能标准化
四个页面导出统一对齐模式：
- 列过滤：跳过
hideInTable和valueType === 'option'，支持exportTitle/exportFormatter - 参数加
Language: intl.current() - 回调：成功弹
CommonExportToLogModal（跳转操作日志），失败弹错误 - 异步导出:
exportDataFile(apiType, url, params, template, true, callback)
打包部署流程
# collect-changes.sh — 交互式选择 commit 并打包
# 选择要发布的 commit → 标记为已发布 → 生成 .tar.gz
# 输出到指定目录（如 C:\Users\micha\Desktop\GSP-Deploy\）打包记录
| 时间 | 包名 | 大小 | 内容 |
|---|---|---|---|
| 03-23 14:43 | rl-03231443.tar.gz | 287K | 单 commit (i18n + maxLength) |
| 03-23 14:47 | rl-03231447.tar.gz | 28MB | 全部 40 个 commit |
| 03-23 14:49 | payroll-03231449.tar.gz | 294K | 仅代发薪3个功能 |
| 03-23 15:40 | rl-03231540.tar.gz | 7K | 导出逻辑修复 |
| 03-23 17:16 | rl-03231716.tar.gz | 345K | 科技企业导出文件名修复 |
Bug 修复记录
| Bug | 修复 |
|---|---|
| 输入框无 maxLength 限制 | 3个输入框加 maxLength: 50 |
| 导出文件名双横线 | branchCode 为空时不拼入横线 |
| 信息交流 branchCode 传对象 | 解构取 .branchCode |
| 导出未传筛选条件 | 补传当前表单筛选参数 |
| 非高新类型显示”认定公告” | 用 isHighTechOrSME 判断 |
| 80+ 处硬编码中文 | 82 个 i18n key 全量替换 |