# Citrus 图片浏览规范

本文从 rules.json 的“图片浏览”分类生成。修改规范源后运行 build_rules.py，勿维护第二套规则。

## image.grid · 相册四档排列密度

桌面大2列、中4列默认、标准6列、小8列；窄屏900px及以下最多4列、700px及以下最多2列、350px及以下1列，显示实际列数并保留选择。至少8张示例，原图不变。

适用：独立图片结果区；聊天流不强制网格

验收：桌面逐档测列数；手机测上限；两种缩略图模式同格、查看器不受影响。

## image.thumbnails · 方形／原比例切换

两种模式外层均保持相同正方形格子及网格位置。方形按 cover 等比铺满裁切，原比例按 contain 完整等比抵边居中留白，不拉伸图片、不改变原图。切换只对框内图片内容做 420ms cubic-bezier(.2,.7,.2,1) 非线性缩放；固定使用 contain 加可插值 transform 表达两种适配，不对离散 object-fit 过渡。快速反向从当前动画状态继续，图片加载和容器尺寸变化后重新适配，首次显示无闪跳；prefers-reduced-motion:reduce 时立即切换。

适用：相册缩略图

验收：横图、竖图、正方图验证 cover/contain 终点、连续中间帧及快速反向；切换全程格子尺寸、位置和卡片高度不变，原比例图长边抵边、短边居中留白。验证 load、resize、四档密度、手机与明暗主题；减少动态效果下无过渡；双击/Enter 全屏、滚轮缩放、空白/Esc 关闭不变。

## image.viewer · 双击全屏、滚轮缩放

双击或Enter进入覆盖视口查看器；滚轮以合理锚点缩放，限制上下界，放大后可拖动；触屏提供明确缩放按钮。

适用：缩略图与聊天图片

验收：双击、Enter、滚轮、按钮、拖动并验证1–6倍限制。

## image.close · 空白关闭，不误关

图片外空白、Esc或关闭按钮退出；点击图片本身及拖动后不得误关闭。打开锁背景滚动，退出恢复滚动和触发焦点。

适用：全屏查看器

验收：点图、拖动、点空白、Esc，重复打开检查焦点与滚动。