{
  "id": "title",
  "label": "标题",
  "dataIndex": "title",
  "render": "renderText",
  "renderProps": {
    "transform": "capitalize",
    "nullValue": "无标题"
  }
}

{
  "id": "phone",
  "label": "手机号",
  "dataIndex": "phone",
  "render": "renderText",
  "renderProps": {
    "format": "phone",
    "copyable": true
  }
}

{
  "id": "price",
  "label": "价格",
  "dataIndex": "price",
  "render": "renderText",
  "renderProps": {
    "prefix": "¥",
    "suffix": "元",
    "format": "number"
  }
}

{
  "id": "website",
  "label": "网站",
  "dataIndex": "website",
  "render": "renderText",
  "renderProps": {
    "link": {
      "target": "_blank",
      "urlPrefix": "https://"
    }
  }
}

{
  "id": "productDescription",
  "label": "产品描述",
  "dataIndex": "productDescription",
  "render": "renderText",
  "renderProps": {
    "maxLength": 50,
    "ellipsis": true,
    "tooltip": true,
    "tooltipProps": {
      "placement": "top",
      "theme": "dark",
      "content": "data.productFullDescription"
    }
  }
}

{
  "id": "stockInfo",
  "label": "库存状态",
  "dataIndex": "stockStatus",
  "render": "renderText",
  "renderProps": {
    "tooltip": true,
    "tooltipProps": {
      "placement": "right",
      "theme": "primary",
      "rich": true,
      "header": "库存详情",
      "content": "data.stockDetail",
      "footer": "更新时间: {{data.stockUpdateTime}}"
    }
  }
}

{
  "id": "performance",
  "label": "性能指标",
  "dataIndex": "performance",
  "render": "renderText",
  "renderProps": {
    "tooltip": true,
    "tooltipProps": {
      "placement": "top",
      "theme": "light",
      "rich": true,
      "header": "系统性能报告",
      "content": "data.performanceDetail",
      "footer": "更新时间: {{data.updateTime}}"
    },
    "conditional": [
      { "condition": "data.status === 'normal'", "style": { "color": "#3b82f6", "fontWeight": "medium" } }
    ]
  }
}

{
  "id": "salesTrend",
  "label": "销售趋势",
  "dataIndex": "salesTrend",
  "render": "renderText",
  "renderProps": {
    "tooltip": true,
    "tooltipProps": {
      "placement": "bottom",
      "theme": "dark",
      "rich": true,
      "header": "销售数据分析",
      "content": "data.salesDetail",
      "footer": "数据来源: 销售管理系统"
    },
    "conditional": [
      { "condition": "data.growth > 10", "style": { "color": "#22c55e", "fontWeight": "medium" } }
    ]
  }
}

{
  "id": "inventoryDetail",
  "label": "库存详情",
  "dataIndex": "inventoryStatus",
  "render": "renderText",
  "renderProps": {
    "tooltip": true,
    "tooltipProps": {
      "placement": "top",
      "theme": "light",
      "rich": true,
      "header": "卷烟库存明细表",
      "content": "{{data.inventoryTableMarkdown}}",
      "footer": "备注：卷烟真假待鉴定"
    }
  }
}

{
  "id": "status",
  "label": "订单状态",
  "dataIndex": "status",
  "render": "renderText",
  "renderProps": {
    "conditional": [
      { "condition": "value === '待处理'", "style": { "color": "#f59e0b" } },
      { "condition": "value === '处理中'", "style": { "color": "#3b82f6" } },
      { "condition": "value === '已完成'", "style": { "color": "#22c55e", "fontWeight": "bold" } },
      { "condition": "value === '已取消'", "style": { "color": "#ef4444" } }
    ]
  }
}

{
  "id": "salesStatistics",
  "label": "销售统计",
  "dataIndex": "salesTrend",
  "render": "renderText",
  "renderProps": {
    "tooltip": true,
    "tooltipProps": {
      "placement": "top",
      "theme": "dark",
      "rich": true,
      "header": "月度销售统计表",
      "content": "{{data.salesTableMarkdown}}",
      "footer": "数据更新时间: {{data.updateTime}}"
    }
  }
}

// 数据源中的markdown表格变量示例
data: {
  inventoryTableMarkdown: `
| 品种规格       | 单位 | 数量 | 品种规格       | 单位 | 数量 |
|----------------|------|------|----------------|------|------|
| 黄山（印象一品） | 条   | 75   | 以下空白       |      |      |
| 白沙（硬）     | 条   | 174  |                |      |      |
| 娇子（蓝时代） | 条   | 63   |                |      |      |
| 黄山（新一品） | 条   | 220  |                |      |      |
| 金圣（庐山）   | 条   | 40   |                |      |      |
| 钻石（硬特醇） | 条   | 342  |                |      |      |
| 共计：（品种）6个 |      |      | 总计：（数量）914条 |      |      |
| 备注           |      |      | 卷烟真假待鉴定 |      |      |
  `,
  salesTableMarkdown: `
| 品种规格       | 单位 | 数量 | 品种规格       | 单位 | 数量 |
|----------------|------|------|----------------|------|------|
| 黄山（印象一品） | 条   | 75   | 以下空白       |      |      |
| 白沙（硬）     | 条   | 174  |                |      |      |
| 娇子（蓝时代） | 条   | 63   |                |      |      |
| 黄山（新一品） | 条   | 220  |                |      |      |
| 金圣（庐山）   | 条   | 40   |                |      |      |
| 钻石（硬特醇） | 条   | 342  |                |      |      |
| 共计：（品种）6个 |      |      | 总计：（数量）914条 |      |      |
| 备注           |      |      | 卷烟真假待鉴定 |      |      |
  `,
  updateTime: "2023-10-15 16:30:42"
}

// 方案一：使用Markdown解析库 (如 marked.js)
import { marked } from 'marked';

function renderTooltipContent(markdownContent) {
  // 解析markdown为HTML
  const htmlContent = marked.parse(markdownContent);
  
  // 渲染到tooltip容器中
  const tooltipBody = document.querySelector('.tooltip-body');
  tooltipBody.innerHTML = htmlContent;
  
  // 添加通用样式类
  const table = tooltipBody.querySelector('table');
  if (table) {
    table.classList.add('markdown-rendered-table');
  }
}

// 方案二：使用React Markdown组件
import ReactMarkdown from 'react-markdown';

function TooltipContent({ markdownContent }) {
  return (
    <div className="tooltip-body">
      <ReactMarkdown 
        components={{
          table: ({node, ...props}) => 
            <table className="markdown-rendered-table" {...props} />
        }}
      >
        {markdownContent}
      </ReactMarkdown>
    </div>
  );
}

// 方案三：使用Vue Markdown组件
<template>
  <div class="tooltip-body">
    <VueMarkdown 
      :source="markdownContent" 
      :table-class="'markdown-rendered-table'"
    />
  </div>
</template>

// 通用样式控制方案：通过CSS类和数据属性
.markdown-rendered-table {
  /* 基础表格样式 */
}

.markdown-rendered-table[data-theme="dark"] {
  /* 深色主题样式 */
}

.markdown-rendered-table[data-highlight="true"] {
  /* 高亮样式 */
}

// 使用示例
const tooltipProps = {
  placement: "top",
  theme: "light", 
  rich: true,
  header: "数据详情",
  content: "{{data.tableMarkdown}}", // 动态markdown内容
  footer: "更新时间: {{data.updateTime}}"
};