前端业务开发

@modu/web 提供平台页面、运行时、Umi 适配、类型、样式和扩展加载。应用负责自己的页面、品牌配置、services 与业务类型。

安装 Umi 适配

在 config/config.ts 注册 require.resolve('@modu/web/umi')，并保留模板启用的 model、initialState、access、request、locale、layout 和 antd 配置。

核心 model 由插件注册。不要依赖核心源码中的 .umi 生成目录，也不要将应用 alias 指向核心工作树。

组合业务路由

在 config/routes.ts 使用 createRoutes：

import { createRoutes } from '@modu/web/umi';
import type { GeneratedExtensionCatalog } from '@modu/web/extensions';
import catalog from '../src/extensions/catalog.json';

export default createRoutes(
  [{
    path: '/example/product',
    name: 'example.product',
    component: './example/product',
  }],
  catalog as GeneratedExtensionCatalog,
);

它组合核心路由、应用路由与扩展页面，并检查冲突。应用路由在核心 catch-all 之前注册在核心 catch-all 之前，菜单父子路径保持一致。

组合运行时

src/app.tsx 沿用模板的公开接入方式：

import { createRuntime } from '@modu/web';
import type { GeneratedExtensionCatalog } from '@modu/web/extensions';
import settings from '../config/defaultSettings';
import catalog from './extensions/catalog.json';
import { extensionBindings } from './extensions/bindings';

const runtime = createRuntime({
  settings,
  extensions: {
    catalog: catalog as GeneratedExtensionCatalog,
    bindings: extensionBindings,
  },
});

export const getInitialState = runtime.getInitialState;
export const layout = runtime.layout;
export const request = runtime.request;
export const locale = runtime.locale;
export const rootContainer = runtime.rootContainer;

页面、请求与样式

页面通过应用 src/services 调用接口，HTTP 使用 @umijs/max 的 request。路由、权限和状态分别走 Umi 路由配置、access.ts 与 useModel。

应用 src/global.ts 导入 @modu/web/styles.css。类型从 @modu/web/types 显式导入；业务类型和语言资源留在应用。

antd 定制收敛在运行时配置和组件隔离层，使用 v6 Design Token / CSS Variables。页面不直接引用 antd/es/... 内部路径或 deprecated props。

提交前验证

在应用 web 运行 pnpm lint、pnpm typecheck 与 pnpm build。涉及扩展时加上 pnpm extension:check 和构建后的 pnpm extension:verify-build。

扩展页面的惰性加载与语言资源见扩展前端接入。