插件前端开发

1. 插件前端入口

src/web/main.tsx通常长这样：
createRoot(document.getElementById("root")!).render( <StrictMode> <I18nProvider messages={messages} defaultLocale={defaultLocale}> <RootLayout> <RouterProvider router={routeOption} /> </RootLayout> </I18nProvider> </StrictMode>,
);

2.defineRouteOption

插件前端不要自己重复搭建整套路由骨架，推荐用@chatbuddy-ai/web-core提供的：
export const routeOption = defineRouteOption({ base: `extension/${packageJson.name}`, identifier: packageJson.name, routes: [ { index: true, element: <BlogIndexPage /> }, { path: "article/:id", element: <ArticleDetailPage /> }, ], consoleMenus: [ { title: "文章管理", path: "/", icon: "file-text" }, ], consoleRoutes: [ { index: true, element: <ArticleListPage /> }, { path: "article/add", element: <ArticleAddPage /> }, ],
});
它会帮你处理：
前台扩展路由
控制台路由
控制台 layout
登录守卫
父窗口与 iframe 路由同步

3. 插件 HTTP：createPluginHttpClients

插件不要直接用主站的apiHttpClient，因为插件接口会多一层扩展标识符。
正确写法：
import { createPluginHttpClients } from "@chatbuddy-ai/services"; const { apiHttpClient, consoleHttpClient } = createPluginHttpClients;
它会自动生成：
/{extensionIdentifier}/api/*
/{extensionIdentifier}/consoleapi/*
后续 service 中就可以直接写：
apiHttpClient.get("/article/published");
consoleHttpClient.get("/article");

4. 插件前端 service 目录建议

src/web/services/
├── base.ts
├── console/
├── web/
└── types/
建议约定：
console/*
管理后台 hooks
web/*
前台页面 hooks
types/*
扩展自己的前端类型

5. 插件 Vite 配置

推荐：
export default defineExtensionViteConfig(packageJson, { server: { open: true, },
});
默认会处理：
React
Tailwind
React Compiler
base: /extension/{packageJson.name}
输出目录.output/public

6. 插件 tsup 配置

推荐：
export default defineChatbuddy AITsupConfig;
默认会把src/api/index.ts构建成可被主系统动态加载的后端入口。
上一篇插件后端开发下一篇Extension SDK 怎么用

共 319 篇文档 · 内容同步自官方帮助中心