弹窗报警与提醒格式

后端 list 接口想让某个单元格点击弹出详情，或鼠标悬停显示提示时，需要按本协议输出 HTML 标签和返回 JSON

二次开发 / 前端协议

弹窗报警提醒alerttipsenhancedDetailsaddedValue详情弹窗tooltiplist单元数据表格列渲染iframehtmlmaptextmarkdown

弹窗报警与提醒格式（前端协议）

这是一套前端约定协议：后端在 list 查询返回的单元数据里，给某个 HTML 元素加上特定属性，前端就会把它渲染成「可点击弹出详情」或「鼠标悬停提示」的交互。

前端处理代码：

表格 / 卡片：myapp/frontend/src/pages/ADUGTemplate.tsx
Notebook 文件列表：myapp/frontend/src/pages/Jupyter/JupyterFileList.tsx
弹窗详情渲染：myapp/frontend/src/components/TabsModal/TabsDetail.tsx + myapp/frontend/src/components/Visualization/VisualizationRenderer.tsx

一、弹窗报警方式（enhancedDetails）

为 list 查询得到的单元数据，给元素设置属性 type=enhancedDetails 和 addedValue='<详情接口地址>'。点击该单元格时，前端会请求 addedValue 指向的接口并弹出详情弹窗。

<div type=enhancedDetails addedValue='/dataset_modelview/api/alert/info/{self.id}'>
    {img_url}
</div>

上面 /dataset_modelview/api/alert/info/... 仅为示例地址，需后端自行实现该接口。仓库内现存的实际用法可参考 myapp/views/view_k8s.py:508：
Markup(f'<div type=enhancedDetails addedValue="/k8s/read/pod/yaml/{cluster_name}/{namespace}/{pod["name"]}">{pod["name"]}</div>')

弹窗详情接口返回 JSON 结构

{
  "message": "",
  "status": 0,
  "result": {
    "title": "",
    "content": [                      // 一个弹窗可以有多个 tab；只有一个 tab 时不显示切换按钮
      {
        "tabName": "第一个tab",
        "content": [                  // 一个 tab 下可有多个子内容（group）
          {
            "groupName": "iframe",    // 子内容的标题（支持 HTML）
            "groupContent": {
              "value": "xxxxx",       // 子内容的值：iframe→url，html→html源码，map→字典，
                                      //   text→字符串，markdown→markdown源码，echart→options，table→表格数据
              "type": "iframe",       // 子内容类型，见下方支持列表
              "style": "width:200px"  // 可选：子内容样式（高度、背景等）
            }
          }
        ],
        "bottomButton": [             // 该 tab 下的快捷跳转按钮（不是取消/确认按钮）
          {
            "text": "xxx",            // 按钮文字
            "url": "xxx"              // 跳转地址
          }
        ]
      }
    ],
    "bottomButton": [                 // 弹窗底部的操作按钮（提交/取消/确认类）
      {
        "icon": "",                   // svg 图标，没有则不显示
        "text": "xxx",                // 按钮文本
        "url": "xxx",                 // 提交地址
        "arg": "",                    // 提交传递的参数
        "method": ""                  // 提交方法：get / post / delete
      }
    ]
  }
}

groupContent.type 支持的类型

源码 VisualizationRenderer.tsx 与 tabsModalInterface.ts 中声明的可渲染类型（比早期文档更多）：

map、iframe、echart、text、html、markdown、image、table、array、api、audio、video。

注意：底部操作按钮 bottomButton[].method 仅支持 get / post / delete，不包含 put。前端类型声明见 myapp/frontend/src/api/interface/tabsModalInterface.ts:25-31（IActionButton.method 为 "get" | "post" | "delete"）。

二、提醒报警方式（tips）

为 list 查询得到的单元数据，设置属性 type=tips 和 addedValue='<提示文案>'。鼠标悬停在该单元格上时，前端会显示一个 tooltip 提示（addedValue 内容支持 HTML）。

<div type=tips addedValue='可以联系管理员配置'>
    {url}
</div>

前端处理见 JupyterFileList.tsx:56-61（typeValue === 'tips' 时用 tooltip 渲染 addedValue）。