@mapgis/web-app-themes-vue3

@mapgis/web-app-themes-vue3

MapGIS Web App Platform 的公开主题集合包。本文档面向二次开发者，说明如何开发、构建和在应用中使用主题。

包定位

该包负责集中注册内置主题。入口 index.ts 会自动收集每个主题的安装函数，并在应用执行 app.use(MapGISWebAppThemes) 时统一注册。

安装使用

在业务应用中安装并注册：

import MapGISWebAppThemes from '@mapgis/web-app-themes-vue3'
import '@mapgis/web-app-themes-vue3/dist/index.css'

app.use(MapGISWebAppThemes)

主题运行依赖 vue，并依赖 @mapgis/web-app-framework-vue3 提供的主题上下文、布局渲染和命名空间工具。

目录说明

• index.ts：主题集合入口，自动注册所有主题。
• index.css：集合包样式入口。
• packages/：主题源码目录，每个子目录是一个独立主题。
• vite.es.config.ts：集合包构建配置。

单个主题通常包含：

• resources/manifest.json：主题清单，声明名称、组件名、版本和资源文件。
• resources/layout.json：默认布局配置。
• theme/：主题 Vue 组件和组合式逻辑。
• components/：主题内部复用组件。
• index.ts：单主题安装入口。
• vite.config.ts：单主题构建配置。

开发主题

推荐使用主题脚手架创建基础结构：

pnpm ct

也可以手工新增主题目录，但必须保证：

• 主题目录有 resources/manifest.json。
• manifest.json 中的 component 与主题主组件注册名一致。
• 主题目录有 index.ts 并默认导出 Vue 插件安装对象。
• 主题组件使用 @mapgis/web-app-framework-vue3 提供的 useTheme、useThemeContent、useNamespace 等能力。

构建

在当前项目目录执行：

pnpm build

该命令会先构建集合包，再构建内置主题资源，输出到：

• dist/：集合包产物。
• dist-themes/：主题运行资源。