数据集预览/详情渲染协议

本篇描述数据集详情/预览页所用的「多类型内容渲染协议」：后端返回一份结构化 JSON，前端按 type 字段把每一块渲染成 echart / markdown / 图片 / 表单 / 内嵌 API / HTML 等。

说明（已对照当前源码核实，路由与结构与下方“原始设计稿”有出入，请以源码为准）：

1. 原文档给出的请求地址为 GET /dataset/detail/head，但当前代码 myapp/views/view_dataset.py 中未找到 detail/head 路由。
2. 当前实现的数据集详情入口是 GET /dataset_modelview/api/detail/page/<dataset_id>（view_dataset.py:896，detail_page），其返回结构为 result.header（标题/标签/操作按钮）+ result.content[]（多 tab），tab 内 groupContent.type 取值为 api / html / table；数据预览 tab 内嵌 type:"api"，value 指向 /dataset_modelview/api/preview/dataset/<dataset_id>。
3. 表格/媒体预览数据由 GET /dataset_modelview/api/preview/dataset/<dataset_id>（view_dataset.py:1168）返回，结构为 {type:"table", value:{columns:[...], rows:[...]}}。

下文保留的是原始「渲染协议」设计稿（含 tab[].content.left/right 与 filter/markdown/echart 等类型），与当前 detail/page 的具体字段名（header/content/groupContent）已不完全一致，但渲染类型思路一致，可作为前端多类型渲染的参考协议。各视图特殊接口清单见 数据治理特殊接口。

接口描述（原始设计稿）

• URL：/dataset/detail/head
• Method：GET
• Content-Type：application/json
• 需要登录：是

headers = {
    'Content-Type': 'application/json',
    'Authorization': '$username|$token'
}

成功响应

条件：请求参数合法，并且用户身份校验通过 状态码：200 OK

各内容类型的渲染约定：

• echart 类型：后端返回 option，前端用 ECharts 渲染
• markdown 类型：前端渲染成页面
• filter 类型：如果包含 submit 字段，则点击按钮才提交；否则选中后直接提交。提交后用返回内容重新渲染当前界面其他内容
• html 类型：直接渲染
• image 类型：渲染图片
• api 类型：查询指定接口后，按 content_type 渲染

响应示例：

{
  "status": 0,
  "message": "success",
  "result": {
    "title": "这里是标题",
    "describe": "这里是小标题",
    "tag": ["标签1", "标签2", "标签3"],
    "tab": [
      {
        "icon": "",
        "label": "数据集介绍",
        "content": {
          "left": [
            {
              "type": "filter",
              "filter": [
                {
                  "label": "子数据集",
                  "key": "sub_dataset",
                  "value": [
                    {"id": "dataset1", "value": "英文数据集"},
                    {"id": "dataset2", "value": "中文数据集"}
                  ]
                },
                {
                  "label": "用途",
                  "key": "use",
                  "value": [
                    {"id": "test", "value": "测试"},
                    {"id": "train", "value": "训练"}
                  ]
                }
              ],
              "api": "/detail/api",
              "submit": "提交。有这个字段点击才触发，没有这个字段筛选后直接触发"
            },
            {
              "type": "api",
              "content_type": "markdown",
              "api": "/detail/api"
            },
            {
              "type": "markdown",
              "markdown": "# 直播类目介绍\n\n"
            },
            {
              "type": "image",
              "image": "https://image.woshipm.com/wp-files/2021/01/ACnOeMZeULwueYt3pKlm.jpg"
            },
            {
              "type": "echart",
              "echart": "{ tooltip: {...}, legend: {...}, xAxis: [...], yAxis: [...], series: [...] }"
            },
            {
              "type": "html",
              "html": "<a href=\"https://www.baidu.com/\" target=\"_blank\">百度</a>"
            }
          ],
          "right": [
            {
              "type": "markdown",
              "markdown": "# 直播类目介绍\n\n"
            }
          ]
        }
      }
    ]
  }
}

echart 字段实际为一段 ECharts option 的字符串（含 tooltip / legend / toolbox / grid / xAxis / yAxis / series 等），此处为节省篇幅做了缩写。