应用
应用
应用 是运营人员实际使用的 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 与布局原语组合应用主体: Stack 、 Inline 、 Cluster 、 Split 、 Grid 、 Columns 、 Cover 、 Center 与 Frame 。每个应用遵循同一主体约定——一个 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 组件 。
把仅限服务器的行为留在钩子、流水线、集成、自动化或函数中。应用访问按团队策略过滤,集合操作与其它客户端使用相同的策略强制。