发布记录 · 场景文档

复现「发布记录」整页场景（/showcase/demo/record）：
- 页面级规则按 /design#pages 的对应小节执行，不在此复述
- 本页由这些真实组件拼成（手写等价物不算）：
- 玻璃头像（Avatar with fallback）：无图或 onError 回落首字母：中文取前两字，西文取首字母缩写，不重试加载｜/showcase/component/avatar/glass-apple
- 玻璃徽标（Status Badge）：胶囊只用文字色表达语义（neutral / accent / success / warning），底色始终中性｜/showcase/component/badge/glass-apple
- 玻璃面包屑（Breadcrumb）：nav aria-label + ol/li；分隔符 aria-hidden，当前位置 aria-current=page 且不可点｜/showcase/component/breadcrumb/glass-apple
- 玻璃描述列表（Description List）：原生 dl / dt / dd，读屏按标签—值成对播报｜/showcase/component/descriptions/glass-apple
- 玻璃抽屉（Side Sheet / Drawer）：role=dialog + aria-modal + 标题命名；打开移入首个可聚焦，Tab 首尾循环｜/showcase/component/drawer/glass-apple
- 玻璃菜单（Menu Button (APG)）：触发器 aria-haspopup=menu + aria-expanded + aria-controls；菜单 role=menu，项 role=menuitem｜/showcase/component/menu/glass-apple
- 玻璃浮层（Non-modal Popover）：触发器 aria-haspopup=dialog + aria-expanded + aria-controls；浮层 role=dialog 以标题命名｜/showcase/component/popover/glass-apple
- 玻璃提示（Tooltip (WCAG 1.4.13)）：悬停等 --dwell-tooltip（350ms）才出，键盘聚焦立即出；移出 / 失焦 / Esc 立即关｜/showcase/component/tooltip/glass-apple
- 骨架：视口高度固定，页头不滚，正文在容器内滚；分区页的页头与正文共用同一条内容列

---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import DemoChrome from '../../../components/DemoChrome.astro';
import PageHeader from '../../../components/PageHeader.astro';
import PageShell from '../../../components/PageShell.astro';
import SceneDocLink from '../../../components/SceneDocLink.astro';
import { GlassAppleBadge } from '../../../components/badge/glass-apple/Badge';
import { GlassAppleAvatar } from '../../../components/avatar/glass-apple/Avatar';
import { GlassAppleDescriptions } from '../../../components/descriptions/glass-apple/Descriptions';
import RecordActions from './RecordActions';
import { GlassAppleBreadcrumb } from '../../../components/breadcrumb/glass-apple/Breadcrumb';

const meta = [
  { label: '版本', value: 'v2.4.0' },
  { label: '环境', value: 'production' },
  { label: '提交', value: 'c8e35bf' },
  { label: '发布时间', value: '2026-10-31 21:08' },
  { label: '负责人', value: '张三' },
  { label: '回滚点', value: 'v2.3.2' },
];

const summary = [
  {
    label: '变更摘要',
    value: '深色模式与设置页滑块，附一套三材质的滑动删除；登记表补齐 9 个展示型组件。',
  },
  {
    label: '回滚方式',
    value: '回到 v2.3.2 后重新构建；数据库无结构变更，无需迁移。',
  },
];
---
<BaseLayout title="UI Echo · 发布记录复现">
  <DemoChrome />
  <PageShell demo col>
    <PageHeader
      slot="header"
      title="发布记录"
      description="一次发布的全貌：状态、环境、负责人与变更摘要。"
      size="sm"
    >
      <Fragment slot="actions">
        <RecordActions client:visible />
        <SceneDocLink id="record" />
      </Fragment>
    </PageHeader>

    <div class="space-y-4">
      <GlassAppleBreadcrumb
        items={[
          { label: '工作台', href: '/workbench' },
          { label: '整页场景', href: '/showcase/pages' },
          { label: '发布记录' },
        ]}
      />

      <!-- 详情两列：左=这条记录本身，右=状态与元数据（Polaris resource-details 的 2fr / 1fr） -->
      <div class="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] lg:items-start">
        <div class="min-w-0 space-y-4">
          <section class="rounded-2xl bg-[var(--color-surface)] border border-[var(--glass-border)] shadow-[var(--shadow-sm)] p-6">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <div class="flex items-center gap-2.5 min-w-0">
                <h2 class="text-base font-semibold">v2.4.0 · 深色模式</h2>
                <GlassAppleBadge variant="success">已发布</GlassAppleBadge>
                <GlassAppleBadge variant="accent">正式</GlassAppleBadge>
              </div>

              <div class="flex items-center gap-2.5 shrink-0">
                <GlassAppleAvatar name="张三" status="online" />
                <div class="text-xs leading-tight">
                  <div>张三</div>
                  <div class="text-[var(--color-text-subtle)]">21:08 发布</div>
                </div>
              </div>
            </div>
          </section>

          <GlassAppleDescriptions items={summary} />
        </div>

        <GlassAppleDescriptions items={meta} columns={1} />
      </div>
    </div>
  </PageShell>
</BaseLayout>

import { useState } from 'react';
import { GlassAppleTooltip } from '../../../components/tooltip/glass-apple/Tooltip';
import { GlassApplePopover } from '../../../components/popover/glass-apple/Popover';
import { GlassAppleMenu } from '../../../components/menu/glass-apple/Menu';
import { GlassAppleDrawer } from '../../../components/drawer/glass-apple/Drawer';

export default function RecordActions() {
  const [note, setNote] = useState('');
  const [logOpen, setLogOpen] = useState(false);

  return (
    <div className="flex flex-wrap items-center gap-2">
      <GlassAppleTooltip content="打开本次发布的构建日志（只读）">
        <button
          type="button"
          onClick={() => setLogOpen(true)}
          className="press-feedback press-hover px-4 py-2 rounded-lg text-xs font-medium bg-[var(--color-accent)] text-white cursor-pointer"
        >
          查看日志
        </button>
      </GlassAppleTooltip>

      <GlassApplePopover trigger="分享" title="分享这次发布">
        <p className="mb-3">拿到只读链接的人能看日志与明细，但不能回滚。</p>
        <button className="press-feedback px-3 py-1.5 rounded-lg text-xs bg-[var(--color-accent)] text-white cursor-pointer">
          复制链接
        </button>
      </GlassApplePopover>

      <GlassAppleMenu
        label="更多操作"
        items={[
          { label: '复制版本号', onSelect: () => setNote('已记录：复制版本号') },
          { label: '对比上一版本', onSelect: () => setNote('已记录：对比上一版本') },
          { label: '重新部署', disabled: true },
          { label: '回滚到 v2.3.2', danger: true, onSelect: () => setNote('已记录：回滚') },
        ]}
      />

      <p aria-live="polite" className="text-xs text-[var(--color-text-subtle)]">
        {note}
      </p>

      <GlassAppleDrawer
        open={logOpen}
        onClose={() => setLogOpen(false)}
        title="构建日志 · v2.4.0"
        footer={
          <button
            type="button"
            onClick={() => setLogOpen(false)}
            className="press-feedback px-3 py-1.5 rounded-lg text-xs border border-[var(--glass-border)] cursor-pointer"
          >
            关闭
          </button>
        }
      >
        <pre className="font-mono text-[length:var(--text-2xs)] leading-relaxed whitespace-pre-wrap text-[var(--color-text-muted)]">
{`21:08:02 build start v2.4.0
21:08:04 typecheck ok
21:08:09 registry 77 components
21:08:14 build 89 pages
21:08:16 deploy production
21:08:19 health check ok`}
        </pre>
      </GlassAppleDrawer>
    </div>
  );
}