# 多框架架构

连接框架前，区分 CLI、宿主、运行时、应用和视觉库。

<span id="cinco-responsabilidades-distintas"></span>

<span class="section-anchor" id="section-1"></span>

## 五项独立职责

**shell** 是汇集应用的页面，**微前端**是每个可挂载应用。WU 运行时连接两者，CLI 准备用于开发的文件和工具。

表格以本门户架构为例。可以选择其他 shell 和视觉组件，Astro 与 Lit 不是 WU runtime 的要求。

| 部分 | 负责的内容 | 提供的结果 |
| --- | --- | --- |
| WU CLI | Workspace 生成、开发和编译 | 文件、配置、进程和编译输出 |
| Astro Shell | 全局 URL、导航与页面组合 | 文档 HTML 与应用 slots |
| WU Framework | 注册、加载、生命周期和通信服务 | 独立应用的共同契约 |
| 微前端 | 一项功能及其资源 | mount/unmount 实现与自身状态 |
| Lit 库 | 控件与视觉契约 | 可供不同框架使用的 Custom Elements |

CLI 在开发和编译期间工作，运行时在浏览器执行。Astro 可以生成不需要框架 JavaScript 的页面，交互部分通过客户端模块加载。

<span id="la-url-pertenece-al-shell"></span>

<span class="section-anchor" id="section-2"></span>

## URL 由 shell 管理

shell 需要决定每个 URL 显示什么、后退/前进如何工作，以及焦点移动到哪里。WU 没有可通过 `wu.router` 或 `wu.routes` 调用的公开路由器。路由元数据本身不会实现导航。

本门户由 Astro 生成 `/docs/.../`、`/labs/` 和 `/sources/`，使用普通 HTML 链接。文档切换会卸载上一页并创建新页面上下文，没有隐藏 SPA，也不承诺跨文档保留状态。

使用持久 shell 的产品可以结合 History API 和自己的路由器。宿主需串行处理切换：卸载前一应用、挂载下一应用、更新标题和焦点，并处理失败。这是宿主额外承担的职责。

<span id="una-capacidad-por-microfrontend"></span>

<span class="section-anchor" id="section-3"></span>

## 每个微前端负责一项能力

实验室包含两项刻意保持精简的能力：

- **命令生成器：** 将读者选择的配置转换为 CLI 命令。React 管理状态并适配 DOM 事件。
- **运行时检查器：** 显示和修改共享状态、接收事件并观察清理。Vue 管理这部分逻辑。

并非每个按钮或卡片都变成 WU 应用。按钮、表单和面板属于 Lit 组件，不需要单独部署或微前端生命周期。

<span id="el-contrato-de-montaje"></span>

<span class="section-anchor" id="section-4"></span>

## 挂载契约

显式生命周期使应用创建哪些资源、由谁销毁一目了然：

```js
import { wu } from 'wu-framework';

wu.define('saludo', {
  mount(container) {
    const message = document.createElement('p');
    message.textContent = 'Aplicación montada por WU';
    container.append(message);
  },
  unmount(container) {
    container.replaceChildren();
  }
});
```

这只定义实现。宿主还需初始化应用注册/配置并调用 `mount`，定义不等于已经显示。manifest 和 `wu.init()` 的精确形式请参阅框架手册。

<span id="estado-local-dom-y-comunicación-entre-apps"></span>

<span class="section-anchor" id="section-5"></span>

## 本地状态、DOM 与应用间通信

选择最贴近关系的机制：

| 关系 | 机制 |
| --- | --- |
| React 或 Vue 内部状态 | 本地框架状态 |
| 应用传给 Lit 控件的数据 | Custom Element 属性 |
| 控件向应用表达意图 | 带类型的 DOM 事件 |
| 其他应用关心的事实 | WU 事件总线 |
| 可观察的共享数据 | WU Store |
| 提供方与消费方之间的版本化服务 | WU Contracts |

不要把 store 的可变对象作为视觉 API 暴露。传递数据和事件，并在应用卸载时取消订阅。

<span id="aislamiento-y-confianza"></span>

<span class="section-anchor" id="section-6"></span>

## 隔离与信任

门户使用 `sandbox: 'module'`，模块在同一 JavaScript 上下文执行，不是抵御恶意代码的边界。Lit 组件通过 Shadow DOM 管理样式，但 Shadow DOM 不阻止全局上下文访问。

本项目应用是可信本地代码。facade capabilities 限制经由它执行的操作，不会自动让任意模块变得安全。`strict`、`eval`、`proxy` 和 `none` 模式具有不同约定，其限制在手册中说明。

<span id="una-interfaz-coherente"></span>

<span class="section-anchor" id="section-7"></span>

## 一致的界面

门户视觉系统采用黑色背景、暖白文字、提示红色、青柠状态色和细分隔线。阅读页保持足够文字尺寸、可见焦点和可滚动表格。

文档静态组合由 Astro 负责，交互控件以 Lit 实现。React 和 Vue 不引入第二套按钮和表单。

<span id="referencias"></span>

<span class="section-anchor" id="section-8"></span>

## 参考资料

- 源码：`wu-framework/src/core/wu-core.js`、`wu-store.js`、`wu-event-bus.js`、`wu-contracts.js` 和 `src/index.js`。
- [Astro：客户端脚本与 Custom Elements](https://v5.docs.astro.build/en/guides/client-side-scripts/)。
- [Lit：生命周期与资源清理](https://lit.dev/docs/components/lifecycle/)。