x-next 1.13.0 → 1.14.0

package/AI_USAGE/components/grid.md

@@ -0,0 +1,224 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Grid AI 使用
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+先读 [通用接入](../core.md)。公开导出：`Col, Grid, GridItem, Row`；主要模型：无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./grid-api.md)，包含本组件族全部子组件和别名。
+
+按需样式：`x-next/style/grid`（包含 base.css、grid.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
+
+## 场景用法
+
+以下示例从本地 `src/docs/components/grid.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./grid-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+通过行列结构组织页面内容，适合构建响应式表单、卡片和信息区块。
+
+
+### 何时使用
+
+- 页面需要按 24 栅格组织横向信息。
+- 表单、详情、卡片列表需要响应式换行或固定列间距。
+- 需要用 CSS Grid 管理折叠、后缀操作项或更灵活的列数。
+
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[12, 12]">
+    <Col :span="8"><div class="grid-demo-cell">8</div></Col>
+    <Col :span="8"><div class="grid-demo-cell">8</div></Col>
+    <Col :span="8"><div class="grid-demo-cell">8</div></Col>
+  </Row>
+</template>
+```
+
+### 间距
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[16, 12]">
+    <Col :span="6"><div class="grid-demo-cell">6</div></Col>
+    <Col :span="6"><div class="grid-demo-cell">6</div></Col>
+    <Col :span="6"><div class="grid-demo-cell">6</div></Col>
+    <Col :span="6"><div class="grid-demo-cell">6</div></Col>
+    <Col :span="12"><div class="grid-demo-cell">12</div></Col>
+    <Col :span="12"><div class="grid-demo-cell">12</div></Col>
+  </Row>
+</template>
+```
+
+### 偏移
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[12, 12]">
+    <Col :span="8"><div class="grid-demo-cell">span 8</div></Col>
+    <Col :span="8" :offset="8"><div class="grid-demo-cell">offset 8</div></Col>
+    <Col :span="6" :offset="6"><div class="grid-demo-cell">offset 6</div></Col>
+    <Col :span="6" :offset="6"><div class="grid-demo-cell">offset 6</div></Col>
+  </Row>
+</template>
+```
+
+### 对齐
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[12, 12]" justify="space-between" align="center">
+    <Col :span="5"><div class="grid-demo-cell">start</div></Col>
+    <Col :span="5"><div class="grid-demo-cell">center</div></Col>
+    <Col :span="5"><div class="grid-demo-cell">end</div></Col>
+  </Row>
+
+  <Row :gutter="[12, 12]" justify="center">
+    <Col :span="5"><div class="grid-demo-cell">center</div></Col>
+    <Col :span="5"><div class="grid-demo-cell">center</div></Col>
+  </Row>
+</template>
+```
+
+### 排序
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[12, 12]">
+    <Col :span="8" :order="3"><div class="grid-demo-cell">1 / order 3</div></Col>
+    <Col :span="8" :order="1"><div class="grid-demo-cell">2 / order 1</div></Col>
+    <Col :span="8" :order="2"><div class="grid-demo-cell">3 / order 2</div></Col>
+  </Row>
+</template>
+```
+
+### Flex 列
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+
+</script>
+<template>
+<Row :gutter="[12, 12]" :wrap="false">
+    <Col flex="120px"><div class="grid-demo-cell">120px</div></Col>
+    <Col flex="auto"><div class="grid-demo-cell">auto</div></Col>
+    <Col flex="80px"><div class="grid-demo-cell">80px</div></Col>
+  </Row>
+</template>
+```
+
+### 响应式
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Row, Col } from 'x-next';
+import { ref } from 'vue';
+
+const denseMode = ref(false);
+</script>
+<template>
+<Row :gutter="[{ xs: 8, md: 16 }, 12]">
+    <Col :xs="24" :sm="12" :md="denseMode ? 6 : 8">
+      <div class="grid-demo-cell">xs 24 / sm 12</div>
+    </Col>
+    <Col
+      :xs="{ span: 24, offset: 0 }"
+      :sm="{ span: 12, offset: 0 }"
+      :md="{ span: denseMode ? 6 : 8, offset: 0 }"
+    >
+      <div class="grid-demo-cell">对象配置</div>
+    </Col>
+    <Col :xs="0" :sm="12" :md="denseMode ? 6 : 8">
+      <div class="grid-demo-cell">xs 隐藏</div>
+    </Col>
+  </Row>
+</template>
+```
+
+### Grid 布局
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Grid, GridItem } from 'x-next';
+
+</script>
+<template>
+<Grid :cols="4" :col-gap="12" :row-gap="12">
+    <GridItem :span="2"><div class="grid-demo-cell">跨 2 列</div></GridItem>
+    <GridItem><div class="grid-demo-cell">普通项</div></GridItem>
+    <GridItem><div class="grid-demo-cell">普通项</div></GridItem>
+    <GridItem :offset="1"><div class="grid-demo-cell">offset 1</div></GridItem>
+    <GridItem :span="3"><div class="grid-demo-cell">跨 3 列</div></GridItem>
+  </Grid>
+</template>
+```
+
+### Grid 折叠
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button, Grid, GridItem } from 'x-next';
+import { ref } from 'vue';
+
+const gridCollapsed = ref(true);
+</script>
+<template>
+<Button @click="gridCollapsed = !gridCollapsed">
+    {{ gridCollapsed ? '展开' : '收起' }}
+  </Button>
+
+  <Grid :cols="4" :col-gap="12" :row-gap="12" :collapsed="gridCollapsed" :collapsed-rows="1">
+    <GridItem v-for="index in 6" :key="index">
+      <div class="grid-demo-cell">item {{ index }}</div>
+    </GridItem>
+    <GridItem suffix #="{ overflow }">
+      <div class="grid-demo-cell">{{ overflow ? '还有更多' : '已全部显示' }}</div>
+    </GridItem>
+  </Grid>
+</template>
+```
+
+### ResponsiveValue
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `xxl` | `>= 1600px` 响应式配置 | `number` | `-` |
+| `xl` | `>= 1200px` 响应式配置 | `number` | `-` |
+| `lg` | `>= 992px` 响应式配置 | `number` | `-` |
+| `md` | `>= 768px` 响应式配置 | `number` | `-` |
+| `sm` | `>= 576px` 响应式配置 | `number` | `-` |
+| `xs` | `< 576px` 响应式配置 | `number` | `-` |
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./grid-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/heatmap-api.md

@@ -0,0 +1,122 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Heatmap 完整公开 API
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`，声明路径仅作定位。插槽类型未细化时，具体槽名与作用域见本地用法示例。
+
+## Heatmap API
+
+公开声明：`dist/components/heatmap/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| data | 热力图数据 | undefined &#124; HeatmapDataItem[] | 否 | [] |
+| year | 要渲染的自然年；优先于 startDate / endDate | undefined &#124; number | 否 | 未声明 |
+| startDate | 自定义范围起始（时间戳或日期字符串） | undefined &#124; string &#124; number | 否 | 未声明 |
+| endDate | 自定义范围结束（时间戳或日期字符串） | undefined &#124; string &#124; number | 否 | 未声明 |
+| activeColors | 由浅到深的色阶 | undefined &#124; string[] | 否 | 未声明 |
+| minimumColor | 最小值与无数据格的颜色 | undefined &#124; string | 否 | 未声明 |
+| size | 格子尺寸 | undefined &#124; "small" &#124; "medium" &#124; "large" | 否 | 未声明 |
+| firstDayOfWeek | 一周的起始日，0 为周日 | undefined &#124; 0 &#124; 1 &#124; 2 &#124; 4 &#124; 3 &#124; 5 &#124; 6 | 否 | 0 |
+| showWeekLabels | 是否展示星期标签 | undefined &#124; false &#124; true | 否 | true |
+| showMonthLabels | 是否展示月份标签 | undefined &#124; false &#124; true | 否 | true |
+| showColorIndicator | 是否展示颜色图例 | undefined &#124; false &#124; true | 否 | true |
+| tooltip | 鼠标悬浮提示；传对象可配置内部浮层 | undefined &#124; false &#124; true &#124; { disabled: boolean; position: "top" &#124; "bottom" &#124; "right" &#124; "left" &#124; "tl" &#124; "tr" &#124; "bl" &#124; "br" &#124; "lt" &#124; "rt" &#124; "lb" &#124; "rb"; renderToBody: boolean; mini: boolean; defaultPopupVisible: boolean; trigger: "click" &#124; "hover" &#124; "focus" &#124; "contextMenu" &#124; ("click" &#124; "hover" &#124; "focus" &#124; "contextMenu")[]; alignPoint: boolean; unmountOnClose: boolean; popupOffset: number; showArrow: boolean; animationName: string; mouseEnterDelay: number; mouseLeaveDelay: number; focusDelay: number; popupHoverStay: boolean; blurToClose: boolean; clickToClose: boolean; clickOutsideToClose: boolean; autoFitPopupWidth: boolean; autoFitPopupMinWidth: boolean; autoFixPosition: boolean; updateAtScroll: boolean; autoFitPosition: boolean; preventFocus: boolean; scrollToClose: boolean; scrollToCloseDistance: number; } & { duration?: number &#124; { enter: number; leave: number; } &#124; undefined; popupVisible?: boolean &#124; undefined; popupContainer?: string &#124; HTMLElement &#124; undefined; contentClass?: ClassName &#124; undefined; content?: string &#124; number &#124; undefined; backgroundColor?: string &#124; undefined; contentStyle?: CSSProperties &#124; undefined; arrowClass?: ClassName &#124; undefined; arrowStyle?: CSSProperties &#124; undefined; popupTranslate?: TriggerPopupTranslate &#124; undefined; popupStyle?: CSSProperties &#124; undefined; openedClass?: ClassName &#124; undefined; } | 否 | true |
+| loading | 加载中 | undefined &#124; false &#124; true &#124; { [x: string]: unknown; } | 否 | false |
+| ariaLabel | 无障碍名称：交互模式下作为网格的 aria-label，纯展示模式下让容器带 role="img" | undefined &#124; string | 否 | 未声明 |
+
+### Events
+
+| 事件 | 用途 | 监听器签名（即事件参数） |
+| --- | --- | --- |
+| cellClick | 点击某个日期格时触发 | undefined &#124; (cell: HeatmapCell, ev: MouseEvent) => any |
+
+### Slots
+
+| 名称 | 用途 | 公开类型 |
+| --- | --- | --- |
+| tooltip | 自定义悬浮提示内容 | undefined &#124; (props: unknown) => unknown |
+| cell | 自定义格子内容 | undefined &#124; (props: unknown) => unknown |
+| footer | 网格下方的补充内容 | undefined &#124; () => unknown |
+| indicator | 自定义颜色图例 | undefined &#124; (props: { colors: string[]; }) => unknown |
+| indicator-leading-text | 图例左端文案 | undefined &#124; () => unknown |
+| indicator-trailing-text | 图例右端文案 | undefined &#124; () => unknown |
+
+### 实例方法
+
+没有检索到显式 expose 或 Options API methods 的公开方法；不把 setup 内部函数当成稳定实例 API。
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+type HeatmapSize = Extract<Size, 'small' | 'medium' | 'large'>;
+
+type HeatmapFirstDayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+interface HeatmapDataItem {
+    /** 该天的任意时间戳（内部按当天零点归并） */
+    timestamp: number;
+    /** 该天的值；`null` / `undefined` 表示无数据 */
+    value?: number | null;
+}
+
+type HeatmapData = HeatmapDataItem[];
+
+interface HeatmapCell {
+    timestamp: number;
+    date: Dayjs;
+    value: number | null;
+    /** 0 表示无数据（使用 minimumColor），1..n 为色阶档位 */
+    level: number;
+    rowIndex: number;
+    colIndex: number;
+}
+
+interface HeatmapResolvedRange {
+    /** 按 firstDayOfWeek 对齐后的渲染起点 */
+    start: Dayjs;
+    /** 按 firstDayOfWeek 对齐后的渲染终点 */
+    end: Dayjs;
+    days: number;
+    weeks: number;
+    /** 用户请求的原始起点（未对齐），用于标记补齐格 */
+    requestedStart: Dayjs;
+    /** 用户请求的原始终点（未对齐），用于标记补齐格 */
+    requestedEnd: Dayjs;
+}
+
+type HeatmapRange = number | string;
+
+interface HeatmapMonthLabel {
+    text: string;
+    colIndex: number;
+}
+
+interface HeatmapTooltipSlotProps extends HeatmapCell {
+    /** 该格的展示文本（日期 + 值），slot 可直接复用 */
+    label: string;
+}
+
+type HeatmapTooltipProps = boolean | TooltipProps;
+
+type HeatmapLoadingProps = boolean | Record<string, unknown>;
+
+interface HeatmapSlots {
+    tooltip?: (props: HeatmapTooltipSlotProps) => unknown;
+    cell?: (props: HeatmapCell) => unknown;
+    footer?: () => unknown;
+    indicator?: (props: {
+        colors: string[];
+    }) => unknown;
+    'indicator-leading-text'?: () => unknown;
+    'indicator-trailing-text'?: () => unknown;
+}
+```
+
+
+返回 [Heatmap 用法](./heatmap.md)。

package/AI_USAGE/components/heatmap.md

@@ -0,0 +1,220 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Heatmap AI 使用
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+先读 [通用接入](../core.md)。公开导出：`Heatmap`；主要模型：无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./heatmap-api.md)，包含本组件族全部子组件和别名。
+
+按需样式：`x-next/style/heatmap`（包含 base.css、heatmap.css、spin.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
+
+## 场景用法
+
+以下示例从本地 `src/docs/components/heatmap.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./heatmap-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于展示一年（或任意区间）内每日的活跃度、提交量、访问量等按天聚合的指标。
+
+
+### 何时使用
+
+- 需要在一屏内看出一年中哪些天数值高、哪些天几乎为零。
+- 数据天然按天聚合，且关注的是**分布形态**而不是精确数值比较。
+- 常见于贡献图、打卡记录、可用性监控（如服务健康度日历）。
+
+
+### 基础用法
+
+默认按自然年渲染：`year` 指定年份，`data` 提供每天的数值。没有数据的天会使用 `minimumColor`。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([
+  { timestamp: new Date(year, 0, 3).getTime(), value: 12 },
+  { timestamp: new Date(year, 0, 4).getTime(), value: 30 },
+  { timestamp: new Date(year, 5, 18).getTime(), value: 5 },
+  { timestamp: new Date(year, 8, 9).getTime(), value: 41 },
+]);
+</script>
+<template>
+<Heatmap :year="year" :data="data" :ariaLabel="`${year} 年活跃度`" />
+</template>
+```
+
+### 自定义范围
+
+不传 `year` 时，可以用 `startDate` / `endDate` 指定任意区间；两者都不传时，会从 `data` 的首尾时间戳推导。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const data = ref([
+  { timestamp: new Date(2026, 7, 1).getTime(), value: 8 },
+  { timestamp: new Date(2026, 11, 20).getTime(), value: 26 },
+  { timestamp: new Date(2027, 2, 14).getTime(), value: 31 },
+]);
+</script>
+<template>
+<Heatmap :data="data" ariaLabel="跨年区间活跃度" />
+</template>
+```
+
+### 自定义配色
+
+`activeColors` 按**由浅到深**的顺序给出色阶，`minimumColor` 指定最小值（以及无数据格）的颜色。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const minimumColor = ref('#ebedf0');
+const colors = ref(['#9be9a8', '#40c463', '#30a14e', '#216e39', '#0e4429']);
+const data = ref([
+  { timestamp: new Date(year, 0, 3).getTime(), value: 1 },
+  { timestamp: new Date(year, 3, 8).getTime(), value: 60 },
+]);
+</script>
+<template>
+<Heatmap
+    :year="year"
+    :data="data"
+    :active-colors="colors"
+    :minimum-color="minimumColor"
+  />
+</template>
+```
+
+### 尺寸
+
+`size` 支持 `small` / `medium` / `large`，影响格子边长与整体密度。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([{ timestamp: new Date(year, 4, 20).getTime(), value: 18 }]);
+</script>
+<template>
+<Heatmap :year="year" :data="data" size="small" />
+  <Heatmap :year="year" :data="data" size="medium" />
+  <Heatmap :year="year" :data="data" size="large" />
+</template>
+```
+
+### 标签与图例
+
+`showWeekLabels` / `showMonthLabels` / `showColorIndicator` 可以分别关闭星期标签、月份标签与底部图例。`firstDayOfWeek` 控制一周从哪天开始。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([{ timestamp: new Date(year, 2, 6).getTime(), value: 9 }]);
+</script>
+<template>
+<Heatmap :year="year" :data="data" :first-day-of-week="1" />
+  <Heatmap
+    :year="year"
+    :data="data"
+    :show-week-labels="false"
+    :show-month-labels="false"
+    :show-color-indicator="false"
+  />
+</template>
+```
+
+### 点击事件与自定义提示
+
+点击格子会派发 `cell-click`；`tooltip` 插槽可自定义悬浮内容。
+
+自定义 tooltip 内容：
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([{ timestamp: new Date(year, 6, 15).getTime(), value: 22 }]);
+const selectedCell = ref('点击格子查看日期与值');
+
+const handleCellClick = (cell: import('x-next').HeatmapCell) => {
+  selectedCell.value = `${cell.date} 的值为 ${cell.value ?? '空'}`;
+};
+</script>
+<template>
+<Heatmap :year="year" :data="data" @cell-click="handleCellClick" />
+  <p role="status">{{ selectedCell }}</p>
+</template>
+```
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([{ timestamp: new Date(year, 8, 1).getTime(), value: 14 }]);
+function tooltipText(details: unknown) {
+  if (!details || typeof details !== 'object' || !('date' in details) || !('value' in details)) return '';
+  return `${details.date} / ${details.value ?? '空'}`;
+}
+</script>
+<template>
+<Heatmap :year="year" :data="data">
+    <template #tooltip="details">
+      自定义：{{ tooltipText(details) }}
+    </template>
+  </Heatmap>
+</template>
+```
+
+### 加载状态
+
+`loading` 为 `true` 时用 Spin 覆盖；也可以传对象透传给 Spin。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Heatmap } from 'x-next';
+import { ref } from 'vue';
+
+const year = new Date().getFullYear();
+const data = ref([]);
+</script>
+<template>
+<Heatmap :year="year" :data="data" loading />
+</template>
+```
+
+### 交互说明
+
+- **色阶分档**：有效值按 `[min, max]` 均分到各档；全部数据同值时统一取最高档，避免整片落到最浅色。
+- **性能**：悬浮提示由整块网格共享一个节点（鼠标事件委托 + 按帧节流），不会为每个格子创建浮层实例；`tooltip` 关闭时改用原生 `title`。
+- **补齐格**：为凑满整周，首尾会有日期属于区间之外的格子，它们带 `x-heatmap-is-out-of-range` 类并降低不透明度。
+- **月份标签**：跨列数不足 3 周的月份不展示标签，以免相邻月份标注重叠。
+- **键盘导航**：网格可聚焦（`tooltip` 开启时）。左右方向键按天移动、上下方向键按周移动，Home / End 到当周首尾，Esc 关闭提示；移动时通过 `aria-live` 播报「日期：数值」，鼠标悬浮不播报。
+- **无障碍结构**：`tooltip` 开启时网格承担 `role="grid"`（用 `aria-activedescendant` 指向当前格），避免 `role="img"` 把整块网格对读屏隐藏；关闭提示时容器带 `role="img"` 作为静态图像。
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./heatmap-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。