建立心智模型

在使用 Zion 构建应用之前，建立正确的思维模型至关重要。Zion 的核心架构由 设计、数据和行为三大支柱组成。

设计 - 界面搭建

在 Zion 中，界面的构建基于 盒子模型 (CSS Box Model) 和 Flexbox 布局。理解容器与定位的关系是搭建高质量界面的基础。

核心概念

• 基础组件: 构成页面的基本单元，如按钮、文本、图片等。
• 容器组件 (视图): 用于包裹其他组件的盒子，通过 Flexbox 决定内部组件的排列方向（横向行/纵向列）。
• 位置:
  • 相对定位 [默认]: 组件遵循容器的自然排列规则。其位置完全由父容器的布局方向决定。
    • 场景: 绝大多数的标准页面布局。
  • 绝对定位: 组件脱离自然排列，相对于最近的一个直接父容器进行定位。
    • 场景: 在用户卡片右上角悬浮一个“新消息”角标。
  • 固定定位: 组件锁定在相对于浏览器窗口 (Viewport) 的特定位置，页面滚动时位置保持不变。
    • 场景: 始终吸顶的导航栏、悬浮在右下角的客服按钮。

条件式容器

当需要根据不同场景展示不同 UI 时，请使用 条件式容器。

• 核心逻辑: 它不是一个单一的容器，而是一个多态容器。它包含多个独立的视图，但同一时间只展示其中一个。
• 工作流:
  1. 定义分支: 首先添加逻辑分支（例如：分支 1 “是 VIP”，分支 2 “普通访客”）。
  2. 独立搭建: 每个分支会自动生成一个独立的空白画布。你需要切换到对应分支，在其中分别搭建该场景下的 UI。

示例：针对“游客”展示登录按钮，针对“已登录用户”展示个人头像。

数据 - 数据管理

Zion 内置了高性能的关系型数据库引擎。应用中的数据不是静态文本，而是动态流转的资产。

核心概念

• 数据表: 结构化的数据集合（如“用户表”、“订单表”）。
• 关系: 表与表之间的逻辑关联。
  • 示例: 用户表 (User) 与 文章表 (Post) 之间建立 一对多 (1:N) 关系（一个作者可以发布多篇文章）。
• 数据绑定: 将动态数据连接到组件或其他内容的属性上。
  • 列表数据源: 列表组件可以直接绑定数据表或 API 结果，自动循环展示数据。
  • 页面数据源: 在页面层级声明“数据源”，使该页面内的所有组件都能访问该数据。
• 条件数据: 根据条件处理或展示数据（例如：当用户简介为空时，自动显示占位符 “暂无简介”）。

行为 - 逻辑编排

应用需要交互。Zion 的行为（交互）逻辑系统遵循 “触发器 → 执行动作” 的模式。

核心概念

• 触发器: 引发逻辑的源头。包括用户操作（点击、输入改变）或系统事件（页面加载、数据变更）。
• 执行动作 & 节点: 响应触发器后执行的具体任务（如：页面跳转、显示 Toast、数据库增删改查）。
• 前端行为:
  • 直接配置在组件上，用于处理即时的界面反馈或数据操作。
  • 支持条件分支和循环。
• 后端逻辑 (行为流):
  • 用于编排复杂的后端业务逻辑的可视化引擎。
  • 在独立的 “行为流” 面板中创建，由各种节点组成。
  • 支持 条件分支和循环。
  • 触发方式: 可由前端事件调用，或通过定时任务 (Cron)、数据表变更及 Webhook 触发。

总结

构建 Zion 应用是一个持续循环的过程：

1. 定义数据: 设计数据库的表结构与关系。
2. 搭建界面: 使用组件和布局将数据可视化。
3. 配置逻辑: 定义交互规则，让应用“活”起来。