YangChen91 UFG Web Elements Expert
两种工作模式：
| 模式 | 输入 | 输出 |
|---|---|---|
| 单元素溯源 | 浏览器元素 + 菜单路径 | 一个字段：接口 → 落库列 |
| 表维度反查 | 接口 + {schema}.{table} |
整表四列映射表 + Obsidian 文档 |
表维度反查完整流程见 table-dimension-reverse.md（已验证：ufg_account.ac_fundaccount）。
代码与文档根路径
| 资源 | 路径 |
|---|---|
| UFG Web 前端 | D:\Cursor_WorkSpace\HS 3.0 Code\ufg-build-web（或 D:\git_code\ufg-build-web） |
| UFG Account 后端 / 表设计 | D:\Cursor_WorkSpace\HS 3.0 Code\ufg-account（*.heptabledesign） |
| Kettle 目标表文档 | D:\Cursor_WorkSpace\Kettle_Data_Migration\CICC\docs\tables\ |
| 表维度 Obsidian | D:\Cursor_WorkSpace\Obsidian_Vault\02_Areas\UF3.0字段说明\ |
| 本地 MySQL 验证 | 配合 database-expert |
模式 A：单元素溯源
从 浏览器元素信息 + 菜单路径 溯源：接口 → 响应字段 → 数据库列。
输入
- 菜单路径（必填，用于消歧）— 如
单客户查询 → 订单信息 → 原始委托 - DOM 线索 —
class含h-ui-{fieldKey}、visible_text、dom_path - 相邻列 — 同表下一列表头/值（如
流水序号+8）
h-ui-initDate 表示表格列 key: 'initDate'，不表示唯一落库表；必须结合菜单确认页面。
Checklist
- [ ] 1. 由 h-ui-{key} 或列头 i18n 确定前端字段 key（camelCase）
- [ ] 2. 由菜单路径定位 Vue 页面与 columns 定义文件
- [ ] 3. 定位 *-filter.vue 中的 Proxy 调用与响应赋值路径
- [ ] 4. 确认接口名（ClientProxy / ManyClientProxy 等 post 方法名）
- [ ] 5. 查 docs/tables 关联系统信息（接口、页签）或 grep 后端实体
- [ ] 6. 给出 DB：schema.table.column（snake_case）
- [ ] 7. 列出同页易混淆字段（tradeDate / currDate / valueDate 等）
Step 1：DOM → 前端字段 key
- 表格单元格 class：
h-ui-initDate→initDate - 列定义：
columns.js/*Cols.js中key: 'initDate' - 列头 i18n 与 key 可能不一致：如
CalDate（显示「日期」）→ key 仍是initDate - 表单页也可从
dom_path（如fundaccount-base-info）+prop/v-model定位（如assetProp）
Step 2：菜单 → 页面组件
单客户查询入口：
| 模块 | 路径 |
|---|---|
| 菜单树 | src/biz/account/views/bizMenu/bizQuery/clientQuery/clientQueryTree.js |
| 组件映射 | clientQuery/clientFilterMap.js（interface → filter 组件名） |
| 表格列 | components/clientFilter/clientCols/*.js |
| 数据请求 | components/clientFilter/*-filter.vue |
多客户 / 经纪人查询：对应 manyClientQuery/、brokerQuery/ 下同名结构。
客户资料 / 资金账户等编辑页：bizClientManager/bizClientInfo/components/（如表单 fundaccountBaseInfo）。
用菜单树或 dom_path 中的 class / interface 名 grep 全库。
Step 3：Vue → 接口
在 *-filter.vue 的 getList() 或编辑页提交逻辑中找 *Proxy.*(…)：
clientProxy.inquiryOriginEntrust(this.queryParam).then((res) => {
this.data = res.row || [];
});
记录接口名、响应路径、请求参数。Proxy：src/biz/account/api/bizApi/**/**Proxy.js
Step 4：接口 → 落库
优先 docs/tables/{schema}__{table}.md，其次实体 @Column / heptable。
| 层 | 风格 | 示例 |
|---|---|---|
| 前端 JSON / Vue key | camelCase | initDate / assetProp |
| MySQL 列 | snake_case | init_date / asset_prop |
单元素输出模板
## 元素溯源：{菜单路径} — {列头/字段}
### 前端绑定
- DOM class / prop：`…`
- 列/表单 key：`{fieldKey}`
### 接口
- 接口名：`{apiName}`
- 响应取值：`response.…`
### 落库
- `{schema}.{table}.{column}`
### 同页易混淆字段
- …
### 源码索引
- …
模式 B：表维度反查（接口 → 整表 Web 映射）
触发： 用户给出接口（或已从单元素确认接口），要求反查某张表全部字段的 Web 元素名称，并更新文档。
强制交付：
- 聊天输出四列表（见下）
- 写入
UF3.0字段说明/{schema}/{schema}.{table}_web元素名称映射.md - 更新
UF3.0字段说明(表维度).md索引
核心步骤摘要：
- 用接口 / 父页组装逻辑锁定载荷路径与 Vue（如表
fundaccount←fundaccountBaseInfo） - 拉全表字段（docs / heptable / DB），禁止只列页面出现过的列
- 扫表单
prop/v-model/$t与提交派生赋值；无控件 → 未绑定 - 表设计中文名：仅「未绑定」行填写 heptable 中文名；已有 Web 元素时第三列留空
- 行按库字段名字典序排序后输出并落盘
详细 checklist、未绑定类型、索引模板：table-dimension-reverse.md
四列表头（固定）
| 库字段 | Web 元素名称 | 表设计中文名 | 说明 |
|---|
- Web 无控件 → 第二列填 未绑定，第三列填表设计中文名
- Web 有控件 → 第二列填界面文案，第三列留空
- 说明写条件显示 / 只读 / disabled / 派生写入 / 跨层混淆；无则留空
- 枚举字段：说明中列出字典名（如
字典 AC_CASH_RA）或业务字典名（如BDictTradeFeeCode）；勾选类写枚举 1/0
单表文件命名
{schema}.{table}_web元素名称映射.md（用 _，禁止 +）
消歧规则（重要）
- 同一 key 多页面不同表 — 必须用菜单路径区分（见 examples.md）
- 列头「流水序号」 — key 可能是
serialNo或entrustNo，看相邻列与 columns - docs / heptable 优先 — 再代码验证
- 表维度必须全覆盖 — 「未绑定」也是有效结论，不可省略列
- 界面名 ≠ 表设计名 — 例如 Web「账户类型」对应表设计「资产属性」(
asset_prop)
参考
- 表维度反查：table-dimension-reverse.md
- 单元素案例：examples.md
- grep 与目录：reference.md