# 玻璃描述列表（Description List）

- 类型 / 材质：`descriptions` / `glass-apple`（玻璃）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：Apple HIG 详情视图 / Salesforce record detail（键值成对、标签压小、值给正文）
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/descriptions/glass-apple` ｜ 条目：`/r/descriptions--glass-apple.json`
- 必缺状态：（无必缺状态）
- 整页场景：
  - 发布记录（`/r/scene--record.json`）

## 规格

- 原生 dl / dt / dd，读屏按标签—值成对播报
- 标签 2xs 大写加字距，值用正文 14px；值是主读对象
- columns=2 只在 sm 以上生效，值 break-words 防长串撑破
- 面板级玻璃材质：半透明底 + 发丝边 + inset，内部不再套卡片

## 参数（CSS 变量）

`--color-text` `--color-text-muted` `--color-text-subtle` `--glass-bg` `--glass-border` `--glass-inset` `--text-2xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `items` | `{ label: string; value: ReactNode }[]` | 必填 | — |
| `columns` | `1 | 2` | 可选 | — |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「玻璃描述列表」— Description List（描述 / Glass）
灵感来源：Apple HIG 详情视图 / Salesforce record detail（键值成对、标签压小、值给正文）
规格：
- 原生 dl / dt / dd，读屏按标签—值成对播报
- 标签 2xs 大写加字距，值用正文 14px；值是主读对象
- columns=2 只在 sm 以上生效，值 break-words 防长串撑破
- 面板级玻璃材质：半透明底 + 发丝边 + inset，内部不再套卡片
参数（CSS 变量）：--color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --text-2xs
必缺状态：（无必缺状态）
整页场景：发布记录
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/descriptions/glass-apple · 标准 interaction /design#interaction · 调研笔记 /showcase/component/descriptions/glass-apple#notes
```

## 调研笔记

import { type ReactNode } from 'react';

interface Props {
  items: { label: string; value: ReactNode }[];
  columns?: 1 | 2;
  className?: string;
}

export function GlassAppleDescriptions({ items, columns = 1, className = '' }: Props) {
  return (
    <dl
      className={`
        grid gap-x-6 gap-y-4 p-5 rounded-xl
        bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
        shadow-[var(--glass-inset)]
        ${columns === 2 ? 'sm:grid-cols-2' : ''}
        ${className}
      `}
    >
      {items.map((item) => (
        <div key={item.label} className="min-w-0">
          <dt className="text-[length:var(--text-2xs)] uppercase tracking-[0.16em] text-[var(--color-text-subtle)]">
            {item.label}
          </dt>
          <dd className="mt-1 text-sm text-[var(--color-text)] break-words">{item.value}</dd>
        </div>
      ))}
    </dl>
  );
}