# Ufg Web Elements Expert

> 根据 Cursor 浏览器预览传入的 Web 页面元素信息（DOM class、可见文本、菜单路径）， 溯源 UFG 3.0 Web 前端字段对应的接口、请求/响应参数及落库字段；或按接口/页面对 某张库表做全字段反查（Web 元素名称映射），并写入 Obsidian 表维度文档。 在用户提及 ufg-web-elements-expert、Web 元素溯源、页面字段接口、DOM 元素对应接口、 h-ui- 列绑定、单客户查询字段、落库字段溯源、反查数据表、表维度、web 元素名称映射、 UF3.0字段说明(表维度) 时使用。

- Skill: `yangchen91/ufg-web-elements-expert` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add yangchen91/ufg-web-elements-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yangchen91/ufg-web-elements-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: YangChen91 (https://skillmd.com/u/yangchen91)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yangchen91/ufg-web-elements-expert

---


# UFG Web Elements Expert

两种工作模式：

| 模式 | 输入 | 输出 |
|------|------|------|
| **单元素溯源** | 浏览器元素 + 菜单路径 | 一个字段：接口 → 落库列 |
| **表维度反查** | 接口 + `{schema}.{table}` | 整表四列映射表 + Obsidian 文档 |

表维度反查完整流程见 [table-dimension-reverse.md](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](../database-expert/SKILL.md) |

---

## 模式 A：单元素溯源

从 **浏览器元素信息 + 菜单路径** 溯源：**接口 → 响应字段 → 数据库列**。

### 输入

1. **菜单路径**（必填，用于消歧）— 如 `单客户查询 → 订单信息 → 原始委托`
2. **DOM 线索** — `class` 含 `h-ui-{fieldKey}`、`visible_text`、`dom_path`
3. **相邻列** — 同表下一列表头/值（如 `流水序号` + `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.*(…)`：

```javascript
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` |

### 单元素输出模板

```markdown
## 元素溯源：{菜单路径} — {列头/字段}

### 前端绑定
- DOM class / prop：`…`
- 列/表单 key：`{fieldKey}`

### 接口
- 接口名：`{apiName}`
- 响应取值：`response.…`

### 落库
- `{schema}.{table}.{column}`

### 同页易混淆字段
- …

### 源码索引
- …
```

---

## 模式 B：表维度反查（接口 → 整表 Web 映射）

**触发：** 用户给出接口（或已从单元素确认接口），要求反查某张表全部字段的 Web 元素名称，并更新文档。

**强制交付：**

1. 聊天输出四列表（见下）
2. 写入 `UF3.0字段说明/{schema}/{schema}.{table}_web元素名称映射.md`
3. 更新 `UF3.0字段说明(表维度).md` 索引

**核心步骤摘要：**

1. 用接口 / 父页组装逻辑锁定载荷路径与 Vue（如表 `fundaccount` ← `fundaccountBaseInfo`）
2. 拉**全表**字段（docs / heptable / DB），禁止只列页面出现过的列
3. 扫表单 `prop`/`v-model`/`$t` 与提交派生赋值；无控件 → **未绑定**
4. **表设计中文名**：仅「未绑定」行填写 heptable 中文名；已有 Web 元素时第三列**留空**
5. 行按库字段名**字典序**排序后输出并落盘

详细 checklist、未绑定类型、索引模板：[table-dimension-reverse.md](table-dimension-reverse.md)

### 四列表头（固定）

| 库字段 | Web 元素名称 | 表设计中文名 | 说明 |
|--------|--------------|--------------|------|

- Web 无控件 → 第二列填 **未绑定**，第三列填表设计中文名
- Web 有控件 → 第二列填界面文案，**第三列留空**
- 说明写条件显示 / 只读 / disabled / 派生写入 / 跨层混淆；无则留空
- **枚举字段**：说明中列出字典名（如 `字典 AC_CASH_RA`）或业务字典名（如 `BDictTradeFeeCode`）；勾选类写 `枚举 1/0`

### 单表文件命名

`{schema}.{table}_web元素名称映射.md`（用 `_`，禁止 `+`）

---

## 消歧规则（重要）

1. **同一 key 多页面不同表** — 必须用菜单路径区分（见 [examples.md](examples.md)）
2. **列头「流水序号」** — key 可能是 `serialNo` 或 `entrustNo`，看相邻列与 columns
3. **docs / heptable 优先** — 再代码验证
4. **表维度必须全覆盖** — 「未绑定」也是有效结论，不可省略列
5. **界面名 ≠ 表设计名** — 例如 Web「账户类型」对应表设计「资产属性」(`asset_prop`)

## 参考

- 表维度反查：[table-dimension-reverse.md](table-dimension-reverse.md)
- 单元素案例：[examples.md](examples.md)
- grep 与目录：[reference.md](reference.md)