# 上传数据主体账号展示实施计划 > **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. **目标:** 在项目详情的上传数据文件列表中新增“主体账号”列,展示后端已返回的 `accountNos` **架构:** 保持后端接口、数据结构和页面交互逻辑不变,仅在前端表格模板增加一列,并通过静态回归测试锁定该列的存在与字段绑定 **技术栈:** Vue.js 2.6.12, Element UI 2.15.14, Node.js 内置 `assert/fs/path` --- ### 任务 1: 编写失败中的回归测试 **文件:** - 新建: `ruoyi-ui/tests/unit/upload-data-account-column.test.js` **步骤 1: 写出失败测试** 新增一个零依赖静态测试,读取 `UploadData.vue` 源码并断言: - 文件列表区域存在 `主体账号` 文案 - 存在绑定 `prop="accountNos"` 的表格列 测试主体可采用以下结构: ```javascript const assert = require("assert"); const fs = require("fs"); const path = require("path"); const componentPath = path.resolve( __dirname, "../../src/views/ccdiProject/components/detail/UploadData.vue" ); const source = fs.readFileSync(componentPath, "utf8"); assert(/prop="accountNos"/.test(source), "..."); assert(/label="主体账号"/.test(source), "..."); ``` **步骤 2: 运行测试确认失败** 运行: ```bash node ruoyi-ui/tests/unit/upload-data-account-column.test.js ``` 预期: - 命令失败 - 失败信息指出未找到“主体账号”列或 `accountNos` 绑定 --- ### 任务 2: 修改上传数据列表模板 **文件:** - 修改: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue` **步骤 1: 新增主体账号列** 在“主体名称”列后添加“主体账号”列,保持与主体名称相同的兜底展示: ```vue ``` **步骤 2: 保持现有布局不变** - 不修改接口请求 - 不调整分页、刷新、轮询逻辑 - 不修改表格其他列的行为 --- ### 任务 3: 重新运行测试并回归验证 **文件:** - 验证: `ruoyi-ui/tests/unit/upload-data-account-column.test.js` - 验证: `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js` - 验证: `ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js` **步骤 1: 运行新增测试确认通过** ```bash node ruoyi-ui/tests/unit/upload-data-account-column.test.js ``` 预期: - 输出 `upload-data-account-column test passed` **步骤 2: 运行关联回归测试** ```bash node ruoyi-ui/tests/unit/upload-data-file-list-table.test.js node ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js ``` 预期: - 两个测试都通过 **步骤 3: 执行前端构建验证** ```bash cd ruoyi-ui npm run build:prod ``` 预期: - 构建成功 - 无模板编译错误