creatixchu
dc42e6b822
The toast sits 120px from the viewport top and centers over its anchor — the composer card, so it centers on the chat column rather than the window; a rejected model selection (e.g. picking a text-only model while the session holds images) announces through the same banner while the in-menu strip with Retry stays the catalog-load surface. The attachment rail consumes every wheel tick with a vertical component: a diagonal pan keeps its horizontal intent and nothing scrolls the conversation behind the composer.
2.9 KiB
@deepseek-ai/dsh-client-ui-attachment
English | 中文
纯 React 附件原子组件（零 cordis）：输入框草稿图片栏（AttachmentRail）、聊天历史图片画廊（MessageImage/ImageGallery）与原图灯箱（ImageLightbox）。所有文案都由持有方插件在自己的语言命名空间中解析后经 label props 传入，此包不读取任何应用状态；当前消费者是 @deepseek-ai/dsh-client-ui-conversation，经其 image-labels 模块桥接 conversation 词典。
附件栏
AttachmentRail 将待发送草稿图片渲染为固定 64px（16px 圆角）的缩略图横排，滚动条始终隐藏，溢出改由两端的圆形箭头提示：每次翻页滚动一个视口宽度（减去一张卡片作为上下文，下限 200px）并平滑滚动（prefers-reduced-motion: reduce 下瞬时完成），箭头的显隐在滚动、条目数量变化和栏自身尺寸变化时依据滚动几何重算（rail 元素上的 ResizeObserver，因此侧栏、面板的宽度变化也计入，不只是窗口尺寸变化）。附件栏只允许横向滚动：非 passive 监听器消费所有带纵向分量的滚轮事件——不会滚动输入框背后的会话记录——纯纵向滚轮转为横向步进（LINE/PAGE 单位先归一化为像素，单次行程钳制在 60px 内），对角平移保留其横向分量，纯横向平移保持原生滚动。新增条目会滚动到栏尾展示，删除则保持原位，带着已有草稿重新挂载的栏保持起始位置。每张缩略图单击经 onOpen 打开原图，删除按钮位于卡片内部右上角，悬停卡片或键盘聚焦时才显示；粗指针（触屏）设备没有悬停，因此常显。是否挂载由持有方决定，仅在有条目时渲染。
消息图片与灯箱
MessageImage 渲染一张持久化历史图片，长边收敛到 240px，经持有方的 ImageLoader 加载会话授权 URL；加载失败渲染显式重试按钮，加载完成后单击打开 ImageLightbox（加载中的点击被忽略）。ImageGallery 将一条消息的图片包为一个对齐的弹性分组（用户消息 end，助手消息 start），空列表不渲染。ImageLightbox 是文档级模态预览，按 Escape、按下遮罩或点关闭按钮均可关闭，卸载时将焦点还给打开者。
模型体验
无。该包（package）在浏览器中渲染纯 React 原子组件；这里没有任何内容进入模型请求。
KV Cache 影响
无；该包既不组装也不发送提供方请求。
已知限制与暂缓事项
- 仅支持图片 — 非图片文件尚无附件栏卡片与历史渲染；DeepSeek Chat 风格的文件卡片和上传进度状态等输入框接受非图片附件后再做。
- 灯箱无缩放与下载 — 预览仅以适配视口的尺寸渲染原图。
- 灯箱不锁定焦点 — 它设置
aria-modal并在关闭时归还焦点，但 Tab 仍可移动到背后的页面（沿袭入包前组件的行为）。