@manwang/mobile-templates

H5 页面模板集合，为多业务项目提供标准化的页面脚手架。

📦 包含的业务模板

| 业务 | 模板数量 | 状态 | 说明 | | ------------- | -------- | --------- | ------------------- | | soulstar | 1 | ✅ 已发布 | 基础页面模板 (base) | | hiyoo | - | 🚧 待添加 | 计划中 | | yoho | - | 🚧 待添加 | 计划中 | | dramabite | - | 🚧 待添加 | 计划中 |

🚀 安装

npm install @manwang/mobile-templates
# 或
pnpm add @manwang/mobile-templates

📖 使用方式

配合 @manwang/mcp 使用

本模板包主要配合 @manwang/mcp 的 h5-page 服务使用：

1. 安装 MCP 工具：

npm install -g @manwang/mcp

2. 在 Cursor 中配置 MCP：

{
  "mcpServers": {
    "h5-page": {
      "command": "npx",
      "args": ["@manwang/mcp", "h5-page"]
    }
  }
}

3. 在对话中创建页面：

创建一个新页面，使用 soulstar 的 base 模板，路径为 2025/activity

直接使用模板文件

如果需要直接访问模板文件：

import { fileURLToPath } from "url";
import path from "path";

// 获取模板目录路径
const templatesDir = path.join(
  path.dirname(fileURLToPath(import.meta.url)),
  "node_modules/@manwang/mobile-templates/templates"
);

// 读取 soulstar/base 模板
const baseTemplatePath = path.join(templatesDir, "soulstar/base");

📁 目录结构

@manwang/mobile-templates/
├── templates/
│   └── soulstar/
│       ├── business.json      # 业务配置
│       └── base/
│           ├── template.json  # 模板配置
│           ├── index.html     # 页面入口
│           ├── main.ts        # 应用初始化
│           ├── lang.ts        # 多语言配置
│           ├── router/        # 路由配置
│           ├── pages/         # 页面组件
│           ├── api/           # API 接口
│           └── assets/        # 静态资源
├── README.md
├── MIGRATION_GUIDE.md         # 迁移指南
└── TEMPLATE_SPEC.md           # 模板规范

🎨 soulstar/base 模板特性

核心功能

• ✅ HeaderV2 组件集成 - 统一的页面标题组件
• ✅ 多语言支持 - 支持 en、ar、tr 三种语言
• ✅ 嵌套路由 - Vue Router 嵌套路由配置
• ✅ API 占位符 - 预设的 API 请求结构
• ✅ 完整样式系统 - CSS 变量 + 全局样式
• ✅ 移动端适配 - 基于 750px 设计稿的响应式布局

占位符系统

模板使用占位符动态生成代码，主要占位符：

• {{PAGE_NAME_KEBAB}} - 页面名称（kebab-case）
• {{COMPONENT_NAME}} - 组件名称（PascalCase）
• {{VAR_NAME}} - 变量名称（camelCase）

创建页面时，这些占位符会自动替换为实际值。

🤝 贡献模板

如果您需要为自己的业务添加模板，请参考：

• MIGRATION_GUIDE.md - 详细的迁移步骤
• TEMPLATE_SPEC.md - 模板规范和要求

📝 版本历史

查看 CHANGELOG.md 了解详细的版本变更记录。

📄 许可证

MIT © mico

🔗 相关项目

• @manwang/mcp - MCP 服务器集合