#应用页面

应用页面为 App Shell 内的项目、自动化、目录、表单和详情页提供开放且有宽度约束的页面框架。它稳定放置页面身份与操作，不会给整个视图再套一层卡片。

npm install @a3s-lab/ui@0.4.1

<section class="app-page" data-width="wide">
  <header>
    <div data-page-identity><h1>项目</h1><p>长期工作上下文。</p></div>
    <div data-page-actions>...</div>
  </header>
  <div data-page-content>...</div>
</section>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<section class="app-page" data-width="wide">
  <header>
    <div data-page-identity><h1>项目</h1><p>长期工作上下文。</p></div>
    <div data-page-actions>...</div>
  </header>
  <div data-page-content>...</div>
</section>

#HTML 结构

#状态与变体

空状态、加载、错误、部分数据和权限状态由 Empty、Skeleton、Alert、Resource Card、Table 或表单组件承担。不要再增加通用页面卡片。

#可访问性

每个应用页面必须有一个与外壳层级匹配的主标题；不要用泛化 aria-label 代替可见标题。页面操作在 DOM 中紧随页面身份，窄屏堆叠后仍保持标题、说明、操作、内容的顺序。加载时保留标题和既有布局，并在内容区域使用 aria-busy；错误、空状态和权限拒绝要命名原因与恢复路径。宿主负责数据、路由、授权和焦点迁移，AppPage 只约束页面宽度与区域关系。