salaye

Ṣàlàyé

通过简洁、聚焦的视觉图示，说明当前主题。先展示图示，辅助文字保持简短。选择最能展现读者需要理解的关系的形式。

• 使用伪代码描述逻辑：

on(publish)
  if draft is invalid
    return validation errors
  save revision
  queue notification

• 使用调用树展示嵌套执行和顺序：

publishDraft
  validateDraft
  saveRevision
  queueNotification

• 使用组件树勾勒 UI 组成。包含相关源文件路径、状态和模块边界：

<DraftPage> (src/pages/draft.tsx)
  useDraftState()
  <DraftToolbar> (src/components)
    <PublishButton />

• 使用带简要注释的浅层树，映射文件职责或大范围重构：

src/
├── commands/       # accepts publishing actions
├── drafts/         # owns draft state and validation
└── notifications/  # delivers revision updates

• 使用 Mermaid 展示交互、数据流或状态转换：

sequenceDiagram
    participant Editor
    participant API
    participant Store
    Editor->>API: publish draft
    API->>Store: save revision
    Store-->>API: revision id
    API-->>Editor: published revision

• 如果周边结构已存在，请使用相同形式，通过差异展示变更。

组件变更：

 <DraftPage>
   useDraftState()
   <DraftToolbar>
+    <PublishButton />
   <DraftBody />

文件职责变更：

 src/
 ├── commands/
 ├── drafts/
-└── notifications.ts
+└── notifications/
+    ├── queue.ts
+    └── worker.ts

调用顺序变更：

 publishDraft
   validateDraft
+  checkExpectedRevision
   saveRevision
-  sendNotification
+  queueNotification

状态或控制流变更：

 on(publish)
+  if draft is invalid
+    return validation errors
   save revision
-  send notification
+  queue notification

• 如果内容大多是新增的、被省略的上下文会模糊归属或顺序，或者读者需要可复制的目标，请展示完整代码块：

function revisionLabel(revision: number): string {
  return `Revision ${revision}`;
}

• 对于 UI、布局、状态对比，或需要比 Mermaid 更灵活的视觉表现的概念，请使用 html-artifact 创建一张聚焦的 HTML 图示或信息图；如果要制作简短的演示文稿，请使用 slides。匹配产品的颜色、字体、间距和组件，使用真实的标签和数据，并确保在桌面设备和移动设备上都清晰易读。通过可用的主机预览功能打开已验证的结果；更新后继续使用同一预览页面；如果预览不可用，请返回可正常使用的定位器。

指引

将每个图示放在其所支持的简要说明或证据旁边。只包含与当前问题相关的调用、文件、属性、状态、边界和备选方案。

根据需要选择一种或多种表现形式；不要为了使用而强行套用所有形式。如果图示无法让答案更清晰，简短的文字说明即可。

确保表现形式忠实于所提供的材料。区分拟议或示意性结构与已观察到的实现；保留不确定性，不要臆造关系或决策。确保变更前后的视图在规模、细节和标签方面具有可比性。