---
name: 字段提示括号扩展
overview: 在后端解析数据库列注释中的 `()` 内容作为字段提示（ps），修复空格截断 bug，并在前端 Table/Info/Edit 组件中展示提示信息。
todos:
  - id: backend-parse
    content: 后端 makecode.go：新增 () 解析，调整解析顺序（先提取括号内容，再空格/冒号截断），存入 ps 字段
    status: completed
  - id: backend-fix-space
    content: 后端 makecode.go：修复 coloum != nil 分支中 label 未截断空格的问题
    status: completed
  - id: frontend-edit
    content: 前端 Edit.vue / Add.vue：输入框右侧显示 column.ps 提示文字
    status: completed
  - id: frontend-table
    content: 前端 Table.vue：列头加 el-tooltip 展示 td.ps
    status: completed
  - id: frontend-info
    content: 前端 Info.vue：详情字段名加 tooltip 展示 column.ps
    status: completed
isProject: false
---

# 字段提示：支持 () 括号 + 前端展示

## 现状问题

1. 后端已经能从 `{}` 提取 `ps`，但前端从未使用 `ps` 字段
2. `{}` 写法不直观，用户希望用更常见的 `()` 来写字段提示
3. 管理端某些列的 label 包含了空格后面的文字（未经截断）

## 数据库注释格式约定（举例）


| 注释写法                        | label | ps      | options        |
| --------------------------- | ----- | ------- | -------------- |
| `姓名`                        | 姓名    | 无       | 无              |
| `状态(当前审核状态)`                | 状态    | 当前审核状态  | 无              |
| `性别:1-男,2-女`                | 性别    | 无       | 男/女            |
| `状态(当前审核状态):1-待审,2-通过,3-驳回` | 状态    | 当前审核状态  | 待审/通过/驳回       |
| `备注{请输入详细说明}`               | 备注    | 请输入详细说明 | 无              |
| `姓名 xxx说明`                  | 姓名    | 无       | 无（空格后丢弃，同现有行为） |


`()` 和 `{}` 都提取到同一个 `ps` 字段（功能一致，只是写法不同）。

## 后端改动

文件：[hotimev1.5/code/makecode.go](d:/work/hotimev1.5/code/makecode.go) 约 218-233 行

当前解析顺序是：空格截断 -> 花括号提取ps -> 冒号截断。需要调整为：

1. **新增 `()` 解析**：在原有 `{}` 提取 ps 的逻辑旁边，增加对 `(` 和 `)` 的检测，提取内容同样存入 `coloum["ps"]`
2. **调整解析顺序**：先提取 `()` / `{}`（从原始注释中），再做空格截断和冒号截断，避免截断后丢失括号内容
3. **提取后清理 label**：将 `(...)` 或 `{...}` 从 label 中移除，确保 label 干净

改后伪逻辑（自然语言）：

```
原始注释 = "状态(当前审核状态):1-待审,2-通过,3-驳回"

第一步：从原始注释中找 () 或 {}，提取内容 → ps = "当前审核状态"
第二步：把 (...) 或 {...} 从注释中去掉 → "状态:1-待审,2-通过,3-驳回"
第三步：空格截断（取第一个空格前的部分）
第四步：冒号截断 label → label = "状态"
第五步：冒号后面解析选项 → options
```

## 前端改动

### 1. Edit.vue / Add.vue — 输入框右侧显示提示

在 `el-form-item` 内、输入控件后面追加一个小字提示：

```html
<span v-if="column.ps" class="field-hint">{{ column.ps }}</span>
```

样式为灰色小字，紧贴输入框右侧。

### 2. Table.vue — 列头 tooltip

给 `el-table-column` 加 header 插槽，当 `td.ps` 存在时用 `el-tooltip` 包裹列头文字：

```html
<template #header v-if="td.ps">
  <el-tooltip :content="td.ps" placement="top">
    <span>{{ td.label }}</span>
  </el-tooltip>
</template>
```

无 `ps` 的列保持原样。

### 3. Info.vue — 字段名 tooltip

类似地，在详情页的 `el-descriptions-item` 的 label 上加 tooltip 展示 `column.ps`。

## 关于"管理端空格后 label 未截断"的 bug

这个问题出在：当列已存在于配置（`coloum != nil` 分支），不会执行空格截断逻辑。如果 adminDB.json 里的 label 本身就包含空格后的文字，它会原样显示。

修复方式：在 makecode.go 的 `coloum != nil` 分支（即已有配置的列），也对 label 做同样的空格截断和 `()` / `{}` 提取处理。或者确认 adminDB.json 中的 label 是否需要手动清理。需要先确认具体是哪些列出现了这个问题。