<!-- AI SUMMARY -->
## 快速了解

KeyValueContent 以多行 key : value 形式展示结构化数据，可选标题栏与 ThinkingIcon。 常见于用户消息等需要表格化键值的气泡展示。

### 关联组件
- **user-message** — 用户消息内展示结构化附加信息

---
<!-- FULL DOC -->

# KeyValueContent 键值对内容

> **层级**：原子组件 · **功能域**：辅助组件

键值对列表展示原子组件，每行以 `key : value` 格式渲染一条数据，支持可选标题栏（带 `ThinkingIcon`）。

主要被 `UserMessage` 内部用于渲染结构化引用内容（`property.extra.cite.data`），通常不需要手动引入。

## 组件结构

```
div.ai-key-value-content（flex column，gap: 8px，font-size: 12px，color: #4d4f56）
├── [v-if="title"] div.ai-key-value-title（flex，gap: 4px，font-size: 12px，font-weight: 700，color: #3a84ff）
│     ├── ThinkingIcon（14×14px）
│     └── {{ title }}
└── div.ai-key-value-content（flex column，无 gap）   ← 与外层同名嵌套
      └── div.key-value-item × N（flex row，gap: 3px，height: 20px）
            ├── div.item-key   → {{ item.key }}（font-weight: bold，color: #333）
            ├── "："            → 硬编码文本节点，冒号不属于任何 div
            └── div.item-value → {{ item.value }}（overflow hidden，ellipsis，nowrap）
```

> **注意**：内层也是 `.ai-key-value-content` 类（与外层同名），仅用于布局，无额外样式差异。  
> **注意**：`v-for` 使用 `item.key` 作为 `:key`，`content` 中的 `key` 字段必须唯一，否则触发 Vue 重复 key 警告。  
> **注意**：`item.value` 使用 `text-overflow: ellipsis` 截断，但**无 tooltip**（与 `DescPanel` 不同），过长内容会被静默截断。

## 基础用法

```vue
<template>
  <KeyValueContent :content="data" />
</template>

<script setup lang="ts">
  import { KeyValueContent } from '@blueking/chat-x';

  const data = [
    { key: '名称', value: '蓝鲸智云' },
    { key: '版本', value: 'v3.0' },
    { key: '状态', value: '运行中' },
  ];
</script>
```

## 带标题

传入 `title` 时，顶部显示 `ThinkingIcon` + 标题文本（蓝色加粗）：

```vue
<template>
  <KeyValueContent
    title="模型参数"
    :content="[
      { key: '模型', value: 'GPT-4' },
      { key: '温度', value: '0.7' },
      { key: '最大 Token', value: '2048' },
      { key: '频率惩罚', value: '0.5' },
    ]"
  />
</template>
```

## 超长 value 截断

`.item-value` 固定 `white-space: nowrap`，超出容器宽度时截断显示省略号，**悬停无 tooltip**：

## API

### Props

| 属性名  | 类型                                | 必填 | 说明                                                              |
| ------- | ----------------------------------- | ---- | ----------------------------------------------------------------- |
| content | `{ key: string; value: string; }[]` | ✓    | 键值对数组；`key` 同时作为 `v-for` 的 `:key`，需保证唯一          |
| title   | `string`                            | —    | 标题文本；传入后在列表上方渲染 `ThinkingIcon + title`（蓝色加粗） |

## 使用场景

`KeyValueContent` 由 `UserMessage` 内部使用，渲染结构化引用内容（`property.extra.cite` 为对象类型时）：

```typescript
// UserMessage 内部逻辑（简化）
const citeTitle = computed(() => {
  const cite = props.property?.extra?.cite;
  return cite && typeof cite !== 'string' ? cite.title : undefined;
});

const citeContent = computed(() => {
  const cite = props.property?.extra?.cite;
  return cite && typeof cite !== 'string' ? cite.data : cite;
});
// citeContent 为数组时 → <KeyValueContent :content="citeContent" :title="citeTitle" />
// citeContent 为字符串时 → <CiteContent :content="citeContent" />
```

如需在用户消息中展示结构化引用，将 `property.extra.cite` 设置为以下格式即可：

```typescript
const message = {
  // ...
  property: {
    extra: {
      cite: {
        title: '引用标题',
        data: [{ key: '字段名', value: '字段值' }],
      },
    },
  },
};
```

## 关联组件

- [UserMessage](../molecular/user-message.md) — 键值气泡展示