跳到主要内容

导航状态

导航状态

点击一行即可打开该记录,页面无需自行处理路由。外壳负责记录导航,视图负责自身状态,二者都保存在 URL 中,因此粘贴一个链接就能重新打开当时屏幕上的内容。

记录面板

记录以面板形式打开在当前页面之上,由其集合的 +representation.svelte 渲染;没有时则由生成的 RecordShell 渲染。打开的面板在 URL 中构成一个堆栈(?record=<collection>/<id>):从已打开的面板中打开的记录会叠在其上,关闭面板则将其弹出。视图会自行打开行;代码中则调用 @norbital-ai/ui 的 openRecord(collection, id),传入 'new' 即打开创建面板。

<script lang="ts">
  // src/lib/record-form.svelte (templates/construction, excerpt): a create opens the new record
  import { Form, RecordShell, openRecord } from '@norbital-ai/ui';
  // …
  const of = $derived(view.collection);
  const record = $derived(view.mode !== 'create' ? view.record : null);
</script>

<RecordShell {of} mode={view.mode} {...record == null ? {} : { id: record.id }}>
  <Form
    {of}
    mode={view.mode}
    {...record == null
      ? { values: view.mode === 'create' ? view.values : {} }
      : { id: record.id, record }}
    onOutcome={(outcome) => {
      const created = outcome.kind === 'committed' ? outcome.records[0] : undefined;
      if (view.mode === 'create' && created !== undefined) openRecord(of, created.id);
    }}
  >
    {@render children()}
  </Form>
</RecordShell>

视图状态

?record=quotes/<id>                         the record sheet stack, one entry per open sheet
&quotes.where={"status":{"eq":"sent"}}       the viewer's filter (never the author's where)
&quotes.order=doc_no:desc,account.name:asc   the viewer's sort, up to four keys
&quotes.q=QT-2026                            the search box
&quotes.after=<cursor>                       the page

Table 或 Board 把查看者的筛选、排序、搜索与分页以其 key 为前缀保存在 URL 中——默认是集合名;当一个页面两次显示同一集合时,请设置 key。作者的 where 从不出现在 URL 中。加载时,每个条件与排序键都会针对集合单独解码:不再适用的会被丢弃并提示,其余照常生效,因此链接永远不会让视图进入错误状态。

  • 应用——应用、页面与分组
  • UI 组件——RecordShell、表示与视图弹出层