orbit-gmail

Orbit · Gmail 简报

仅适用于 Gmail 的单连接器 Orbit 模板。简报呈现为已在 Gmail 阅读视图中打开的 Orbit Daily Digest 邮件——Gmail 顶部标题栏 + 邮件界面（工具栏 / 主题 / 发件人 / 简报正文 / 回复栏）。没有左侧导航栏、收件箱列表，也没有三栏布局。

⚠️ 真值来源协议（请先阅读）

步骤 1。 编写任何输出之前，先打开并阅读此文件夹中的 example.html。 该文件是规范设计——你的工作是复现它，而不是重新诠释。

步骤 2。 1:1 仿照示例的结构：

• 使用相同的 DOM 层级和类名：<header>（Gmail 顶部栏）→ <main class="digest-wrap"> → <div class="email-chrome"> → 工具栏 / 主题 / 发件人行 / 简报正文 / 回复栏。
• Gmail 顶部标题栏只能包含示例中已有的元素 （汉堡菜单 / 字标 / 搜索栏 / 帮助 / 设置 / 应用启动器 / 头像）。不要添加左侧导航栏（不要添加“撰写”按钮、系统 标签、分类标签页或彩色标签列表）。
• 不要呈现其他邮件的收件箱列表。只显示已打开的 简报邮件。
• 简报正文中的版块顺序必须与示例相同：问候语 → 摘要 栏 → 需要处理 → 值得关注 → 仅供知悉 → 简报页脚。
• 底部使用相同的回复栏（回复 / 全部回复 / 转发）。
• 末尾使用相同的 <script> 块（注入 action-btn / reply-btn 链接）。

步骤 3。 你可以更新模拟文案（发件人姓名、主题、摘要 文本、时间），使其符合“今天”的语境，但不得虚构 额外 UI：不要添加收件箱列表、左侧导航栏、分类标签页条、 额外的简报版块或界面装饰。若某项细节不在 example.html 中，就不能出现在你的输出中。

身份保护规则。 将 example.html 中的所有人名或用户名都视为 模拟内容。除非请求或连接器数据明确标识了经授权的用户，否则不要根据 示例、连接器账号标签、负责人、受派人、发件人或提及推断当前用户的 显示名称。如果没有明确的当前用户姓名，请使用中性表述，例如 you、your、 current user、我 或 你。

以下部分是令牌和视觉语言的参考，并非扩展页面的许可。

⚠️ 设计系统政策

此技能自带一套完整的视觉语言，内置于 example.html（Gmail / Google Sans / Material 界面）中。不得要求用户 选择或附加设计系统，也不得将任何外部 DESIGN.md 令牌注入输出。

• 如果当前项目附带设计系统，忽略它。
• 如果用户提供品牌令牌或 Figma 文件，忽略它们。
• 只能使用 example.html 中定义的颜色 / 字体 / 圆角半径。

这是硬性限制：简报必须看起来像真实的 Gmail 页面，而不是用户的品牌页面。

画布令牌（使用这些确切值）

page bg:           #f6f8fc
surface:           #ffffff
border:            #e0e0e0
text:              #202124
text-secondary:    #5f6368
text-muted:        #80868b
surface-hover:     #f1f3f4

red (Gmail):       #D93025  /* Compose, important markers, accent */
blue:              #1a73e8  /* CTA / link */
yellow:            #f4b400  /* important ★ */
green:             #0f9d58
search bar bg:     #eaf1fb  /* light blue-tinted pill */

字体栈：

• 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
• Logo 字标：Google Sans 22px medium
• 正文：14px / 行高 20px
• 邮件预览：13px

页面分区（从上到下——页面为单列，而非三栏应用）

1. Gmail 顶部标题栏（<header>）——全宽，白色。 左侧：汉堡菜单（☰）+ Gmail 字标（Gmail，首字母 G 为红色）。 中间：圆角搜索栏（背景色 #eaf1fb，左侧为搜索图标，右侧为设置图标，占位符 搜索邮件）。 右侧：❓帮助、⚙ 设置、▦ Google 应用启动器、圆形头像。

2. 邮件界面（<main class="digest-wrap"> <div class="email-chrome">） ——打开的邮件直接位于标题栏下方。没有左侧导航栏，也没有收件箱列表。子区块依次为：

   a. 邮件工具栏——返回 / 归档 / 删除 / 标为未读 / 标签 / 间隔区 / 上一封 / 下一封。

   b. 邮件主题区域——<h1 class="email-subject">，显示摘要主题（例如 ☀ 你昨天的 6 封重要邮件 — Open Orbit Daily），后跟内嵌的 Orbit 标签。

   c. 发件人行——圆形头像 O + Open Orbit <[email protected]> + 收件人 我 ▾ + 右对齐的日期 + 回复图标 + 更多图标。

   d. 摘要正文（<div class="digest-body">）：

   • 问候段落
   • 摘要栏——3 个数字单元格（紧急 / 值得关注 / 仅供知悉）
   • 🔴 需要处理分区——卡片带有 action-btn primary
   • 🟡 值得关注分区——卡片带有 action-btn ghost
   • ⚪ 仅供知悉分区——卡片
   • digest-footer 微型标签

   e. 回复栏——底部一行，包含回复 / 全部回复 / 转发按钮。

胶囊标签 / 图标规则

• 头像：圆形；发件人头像为 40px 以上，卡片头像为 32px，内嵌头像为 28px。
• 标签 / 标记：小型圆角胶囊，不带填充（圆点 + 文本），仅在示例中出现的位置使用。
• 唯一的黄色重要邮件星标（位于主题区域或作为标签）仅用于 Orbit 摘要。

实现限制（成对列出禁止项 / 要求项）

禁止项	要求项
渲染左侧导航栏（撰写 / 系统标签 / 彩色标签）	完全省略导航栏；标题栏下方的页面为单列布局
渲染其他邮件的收件箱列表	仅显示已打开的 Orbit Daily Digest 邮件
渲染分类标签栏（主要 / 社交 / 推广）	省略；摘要直接占据阅读视图
使用非 Google 字体	使用 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
为 Gmail 界面添加阴影	使用平面表面；仅在元素获得焦点时使用细微的 Material 1 高度效果
将头像渲染为方形	始终使用圆形——发件人头像 40px，卡片头像 32px，内嵌头像 28px
使用 lorem ipsum	编写符合 Gmail 风格的真实文案：“Q3 预算确认”、“Login redesign 反馈”，发件人使用 Allen Liu / Marie / Nina Park 等姓名
使用深色模式	使用 Gmail 默认浅色主题（页面背景为 #f6f8fc）
在 Gmail 界面中使用 Orbit 品牌元素	Orbit 品牌元素仅放在摘要正文中（主题中的 Orbit 标签 + 页脚微型标签）
在多封收件箱邮件中放置黄色重要邮件星标	只有 Orbit Daily Digest 邮件可以带有重要标记