Chat 复核 Case
按 figma chat.md 三段式：基础组件 → 全页面 5 种变体 → 小页面
基础组件 (Chat Items)
Contact (3 状态 × 2 类型)
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Jay Hargudson
Lorem ipsum dolor si amet
Team Name
Lorem ipsum dolor si amet
Bubble Chat — Text
Lorem ipsum dolor si amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
Lorem ipsum dolor si amet
Lorem ipsum dolor si amet
Bubble Chat — Voice (3 色 × received/sent)
Bubble Chat — File
File Name.ai
300kb
File Name.ai
300kb
File Name.ai
300kb
File Name.ai
300kb
Bubble Chat — Image (+N 计数)
ChatInputBar
全页面 (Full Chat — 5 种变体)
对照 figma chat.md Purple 一行 5 种 panel： Person+Profile / Team+Profile / Person+Profile (B) / Team+Members / Team+Add Members Modal
Variant 1 — Person + Profile
Jay Hargudson
Online 3 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
File Name.ai
300kb
Lorem ipsum dolor si amet
Variant 2 — Team + Profile
Team Name
Project name development team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
File Name.ai
300kb
Lorem ipsum dolor si amet
Variant 3 — Person + Profile (另一段消息)
Jay Hargudson
Online 3 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
File Name.ai
300kb
Lorem ipsum dolor si amet
Variant 4 — Team + Members 列表
Team Name
Project name development team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
File Name.ai
300kb
Lorem ipsum dolor si amet
Variant 5 — Team + Add Members Modal
Team Name
Project name development team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
File Name.ai
300kb
Lorem ipsum dolor si amet
Add Members
Jay Hargudson
Project Manager
Mohammad Karim
Project Manager
John Bushmill
Project Manager
Josh Adam
UI/UX Designer
Linda Blair
Mobile Developer
Sin Tae
Front End Developer
Laura Prichet
Back End Developer
Lisa Greg
Tech Lead
小页面 (Small Chat — 紧凑 588px 卡片)
每色 2 类型（个人 / 团队），可嵌入 Dashboard widget 或独立窗口。3 色 × 2 = 6 卡片，先展示 Purple 2 个 sample。
Jay Hargudson
Online 3 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
File Name.ai
300kb
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet
Team Name
Project name development team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
File Name.ai
300kb
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac augue eu odio tempor commodo. Nullam ut mattis eros. Cras ut orci nisi.
Lorem ipsum dolor si amet