# Responsive Info Grid

Responsive Info Grid 用于按响应式网格展示标题与内容组成的信息项，适合详情页、概览卡片和只读表单等场景。组件包含布局容器 `RhResponsiveInfoGrid` 和信息项 `RhResponsiveInfoGridItem`。

请在应用入口引入一次组件库样式：

```ts
import 'rhjy-ui/style.css'
```

## 导入方式

从主入口导入：

```ts
import {
  RhResponsiveInfoGrid,
  RhResponsiveInfoGridItem,
} from 'rhjy-ui'
```

也可以从 Responsive Info Grid 子入口导入：

```ts
import {
  RhResponsiveInfoGrid,
  RhResponsiveInfoGridItem,
} from 'rhjy-ui/responsive-info-grid'
```

两种方式提供相同的组件，可根据项目的导入规范选择。

## RhResponsiveInfoGrid

`RhResponsiveInfoGrid` 负责定义网格列数和间距。

### Props

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `columns` | `number` | `4` | 宽度大于 1200px 时的列数 |
| `tabletColumns` | `number` | `2` | 宽度不大于 1200px 且大于 768px 时的列数 |
| `mobileColumns` | `number` | `1` | 宽度不大于 768px 时的列数 |
| `gap` | `string` | `'15px 15px'` | CSS Grid 的 `gap` 值，可同时设置行间距和列间距 |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| `default` | 网格内容，通常放置一个或多个 `RhResponsiveInfoGridItem` |

### 响应式断点

组件根据视口宽度切换列数：

| 视口宽度 | 使用的属性 |
| --- | --- |
| 大于 1200px | `columns` |
| 不大于 1200px 且大于 768px | `tabletColumns` |
| 不大于 768px | `mobileColumns` |

## RhResponsiveInfoGridItem

`RhResponsiveInfoGridItem` 展示一组标题和内容，并可横跨多列。

### Props

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | `''` | 标题文字；提供 `title` 插槽时作为后备内容 |
| `content` | `string \| number` | `''` | 内容文字或数字；提供 `content` 插槽时作为后备内容 |
| `span` | `number` | `1` | 大于 `1` 时横跨指定列数；不大于 `1` 时占一列 |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| `title` | 自定义标题区域；未提供时显示 `title` 属性 |
| `content` | 自定义内容区域；未提供时显示 `content` 属性 |

在视口宽度不大于 768px 时，每个信息项都会强制占一列，`span` 不再横跨多列，以避免移动端内容溢出。

## 基础文字内容

```vue
<script setup lang="ts">
import {
  RhResponsiveInfoGrid,
  RhResponsiveInfoGridItem,
} from 'rhjy-ui'
import 'rhjy-ui/style.css'
</script>

<template>
  <RhResponsiveInfoGrid :columns="3" :tablet-columns="2" :mobile-columns="1">
    <RhResponsiveInfoGridItem title="项目名称：" content="智慧园区" />
    <RhResponsiveInfoGridItem title="负责人：" content="张三" />
    <RhResponsiveInfoGridItem title="设备数量：" :content="128" />
    <RhResponsiveInfoGridItem title="项目说明：" content="覆盖园区全部楼栋" :span="2" />
  </RhResponsiveInfoGrid>
</template>
```

## 自定义插槽

```vue
<script setup lang="ts">
import { ElTag } from 'element-plus'
import {
  RhResponsiveInfoGrid,
  RhResponsiveInfoGridItem,
} from 'rhjy-ui/responsive-info-grid'
import 'rhjy-ui/style.css'
</script>

<template>
  <RhResponsiveInfoGrid gap="20px 24px">
    <RhResponsiveInfoGridItem>
      <template #title>
        <strong>运行状态：</strong>
      </template>
      <template #content>
        <ElTag type="success">正常</ElTag>
      </template>
    </RhResponsiveInfoGridItem>

    <RhResponsiveInfoGridItem :span="2">
      <template #title>
        <strong>最近更新：</strong>
      </template>
      <template #content>
        <time datetime="2026-09-09T10:30:00+08:00">2026-09-09 10:30</time>
      </template>
    </RhResponsiveInfoGridItem>
  </RhResponsiveInfoGrid>
</template>
```