跳到主要内容

应用

应用

应用 是运营人员实际使用的 Svelte 页面。应用从 src/apps/**/+<lower_snake_case>.svelte 中被发现,每个文件名就是规范的应用 ID,并且每个应用都以登录用户的策略上下文编译进客户端产物。

源码布局

src/apps/
├── +operations.svelte
└── finance/
    ├── +group.ts
    └── +payroll.svelte

分组元数据是可选的。分组目录拥有分组 ID;每个应用文件名拥有其应用 ID。不需要编写注册模块。

静态元数据

每个应用在 <svelte:head> 中声明字面量元数据:

<svelte:head>
  <title>Operations</title>
  <meta name="description" content="Manage daily operations" />
  <meta name="bolt:icon" content="lucide:briefcase" />
  <meta name="bolt:thumbnail" content="https://cdn.example.com/operations-card.webp" />
  <meta name="bolt:banner" content="https://cdn.example.com/operations-banner.webp" />
</svelte:head>

可选的 bolt:thumbnail 图片出现在根应用画廊中。可选的 bolt:banner 图片出现在应用上方并随应用界面滚动。两个值都必须是静态 URL。

组合

Bolt 外壳拥有应用区域与文档滚动。用 PageHeader 与布局原语组合应用主体: StackInlineClusterSplitGridColumnsCoverCenterFrame 。每个应用遵循同一主体约定——一个 Cover 、一个主体区域、一个滚动拥有者。完整规则参见 布局 ,编译器会强制这些规则。

应用中的实时数据

租户应用中的读取通过 实时数据 层进行—— client.db 查询针对本地 PGlite 副本实时执行,不是一次性请求。 CollectionTable 与自定义视图继承该行为:过滤、排序与分页在应用代码中无需缓存失效即可保持响应式。

客户端访问

<script lang="ts">
  import { CollectionTable } from '@norbital-ai/ui/collection-table';
  import { Stack } from '@norbital-ai/ui/layout';
  import { PageHeader } from '@norbital-ai/ui/page-header';
</script>

<svelte:head>
  <title>Operations</title>
  <meta name="bolt:icon" content="lucide:briefcase" />
</svelte:head>

<Stack gap="lg">
  <PageHeader title="Operations" description="Manage daily operations." />
  <CollectionTable collection="sites">
    {#snippet columns({ Column })}
      <Column name="name" />
      <Column name="client_name" />
      <Column name="house_type" />
    {/snippet}
  </CollectionTable>
</Stack>

每个 CollectionTable 都需要显式的 {#snippet columns({ Column })} ——表格 UI 不会从模型自动推导列。由模式派生的创建与记录表单是默认行为;只有需要时才由一个集合所有的 +representation.svelte 覆盖它们。参见 UI 组件

把仅限服务器的行为留在钩子、流水线、集成、自动化或函数中。应用访问按团队策略过滤,集合操作与其它客户端使用相同的策略强制。