| name | mobile-app-generator |
| description | 移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。 |
移动端应用生成器
这是一个专门用于生成移动端 H5 应用的技能。它会创建一个完整的、可立即运行的移动端项目，包含：
- 技术栈：Vue 3 + Vant + Vite + TypeScript + Pinia + Vue Router
- 移动端适配：postcss-px-to-viewport 自动适配不同屏幕
- 布局方式：底部 Tabbar 导航（类似微信、淘宝）
- 主题支持：亮色/暗色主题切换
- 页面模板：列表页（下拉刷新+上拉加载）、表单页、详情页、搜索页
- Mock 数据：内置 Mock.js，无需后端即可运行
- 移动端登录页：垂直布局，渐变背景设计
快速开始
你可以通过以下三种方式快速创建移动端应用：
方式一：自然语言描述
示例 1：
创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
示例 2：
创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
示例 3：
创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
方式二：提供设计稿/截图
你可以上传移动端设计稿或参考截图，我会自动分析：
使用方式：
/mobile-app-generator [上传截图] 根据这个设计稿创建移动端应用
我会分析：
- 底部 Tabbar 的结构（有几个标签页，分别是什么）
- 配色方案（主题色、背景色等）
- 页面布局风格
- 图标样式
- 是否使用暗色主题
示例：
/mobile-app-generator [上传淘宝首页截图] 参考这个布局创建一个电商应用
/mobile-app-generator [上传微信截图] 参考这个风格创建一个社交应用
方式三：简单调用（触发问答）
如果你不确定如何描述，直接调用：
/mobile-app-generator
我会通过问答方式收集信息。
描述要素：
- 应用类型（电商、社交、工具等）
- 底部导航栏的标签页（如：首页、工作台、我的）
- 主题颜色（如：蓝色、绿色、#1989fa）
- 是否需要暗黑模式（可选）
工作流程
1. 收集需求信息
优先方式：自然语言描述
如果你在调用技能时已经提供了应用描述（如"创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色"），我会直接解析你的需求并开始生成项目。
必要信息：
- 应用类型或用途
- 底部导航栏的标签页名称（如：首页、工作台、我的）
- 主题颜色（可选，默认蓝色 #1989fa）
- 是否需要暗黑模式（可选，默认支持）
备选方式：问答收集
如果你没有提供完整描述，我会通过以下方式收集信息：
方式一：交互式问答
- 应用类型（电商、社交、工具等）
- 底部导航栏配置
- 主题颜色选择
- 暗黑模式需求
方式二：设计稿/截图分析
你可以上传移动端设计稿、参考截图或手绘草图，我会分析并提取：
分析内容：
- 底部 Tabbar 结构：识别有几个标签页，每个标签页的名称和功能
- 配色方案：提取主题色、背景色、文字颜色等
- 页面布局：分析页面组件类型（列表、卡片、网格等）
- 图标风格：识别使用的图标类型
- 主题模式：判断是亮色还是暗色主题
支持的图片类型：
- 移动端应用截图（微信、淘宝、美团等）
- UI 设计稿（Figma、Sketch 导出的图片）
- 手绘草图或原型图
- 参考应用的截图
使用示例：
/mobile-app-generator [上传截图] 参考这个布局创建应用
/mobile-app-generator [上传设计稿] 按照这个设计稿生成项目，主题色改成蓝色
2. 直接在当前目录生成项目文件
重要说明： 我会直接在当前工作目录下生成所有项目文件，不会创建子文件夹。
生成的文件包含：
当前目录/
├── package.json # 项目依赖配置
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
├── postcss.config.js # Viewport 适配配置
├── index.html # HTML 入口
├── .gitignore # Git 忽略文件
├── README.md # 项目说明
├── mock/ # Mock 数据
│ ├── user.ts
│ └── product.ts
└── src/
├── main.ts # 应用入口
├── App.vue # 根组件
├── router/ # 路由配置
├── layout/ # 布局组件
│ └── TabbarLayout.vue # 底部导航布局
├── views/ # 页面组件
│ ├── login/ # 登录页
│ ├── home/ # 首页
│ ├── category/ # 分类页
│ ├── cart/ # 购物车
│ └── profile/ # 我的
├── components/ # 页面模板
│ ├── ListPage.vue # 列表页模板
│ ├── FormPage.vue # 表单页模板
│ ├── DetailPage.vue # 详情页模板
│ └── SearchPage.vue # 搜索页模板
├── composables/ # 组合式函数
│ ├── useList.ts # 列表逻辑复用
│ └── useTheme.ts # 主题切换
├── styles/ # 样式文件
│ ├── index.css # 全局样式
│ ├── variables.css # CSS 变量
│ └── vant-custom.css # Vant 定制
├── utils/ # 工具函数
│ └── request.ts # 请求封装
└── api/ # API 接口
└── user.ts
3. 配置 Viewport 适配
我会配置 postcss-px-to-viewport 插件，实现移动端自动适配：
- 设计稿基准：375px
- 自动将 px 转换为 vw
- Vant 组件已做适配处理
- 支持黑名单配置（不需要转换的类名）
详细配置请参考：references/viewport-adaptation.md
4. 自定义主题颜色
根据你提供的主题色，我会修改：
-
CSS 变量（src/styles/variables.css）
- 主题色、成功色、警告色、危险色
- 文字颜色、背景色
- Tabbar 颜色配置
-
Vant 主题配置（src/main.ts）
- ConfigProvider 全局主题色
- 组件圆角、边框等样式
-
暗黑模式变量
详细配置请参考：references/theme-customization.md
5. 自定义移动端登录页
我会创建一个符合移动端设计规范的登录页：
设计特点：
- 顶部：渐变背景 + Logo + 系统名称（占 40% 高度）
- 中部：白色卡片 + 登录表单
- 底部：版权信息
- 支持记住账号功能
- 使用 Vant 表单组件
可定制内容：
- Logo 图片
- 系统名称
- 渐变背景颜色
- 登录字段（手机号/邮箱/用户名）
6. 配置底部导航栏（Tabbar）
根据你的需求，我会配置底部导航栏：
配置内容：
- 导航标签数量（通常 3-5 个）
- 每个标签的名称、图标、路由
- 徽标（badge）配置（如购物车数量）
- 激活颜色和默认颜色
Vant 图标选择：
- home-o（首页）
- apps-o（分类）
- shopping-cart-o（购物车）
- user-o（我的）
- search（搜索）
- chat-o（消息）
- star-o（收藏）
- orders-o（订单）
详细配置请参考：references/tabbar-configuration.md
7. 创建页面组件
为每个 Tabbar 标签创建对应的页面组件：
页面类型：
- 首页：轮播图 + 分类入口 + 商品列表
- 分类页：侧边分类 + 商品网格
- 购物车：商品列表 + 结算栏
- 我的：用户信息 + 功能入口 + 主题切换
页面模板复用：
- 使用
components/ListPage.vue 快速创建列表页
- 使用
components/FormPage.vue 快速创建表单页
- 使用
components/DetailPage.vue 快速创建详情页
- 使用
components/SearchPage.vue 快速创建搜索页
详细使用请参考：references/page-templates.md
8. 实现暗黑模式切换
我会实现完整的暗黑模式功能：
实现方式：
- 使用
useTheme composable 管理主题状态
- CSS 变量 +
data-theme 属性切换
- localStorage 持久化主题选择
- 在"我的"页面添加主题切换开关
支持的组件：
- Vant 所有组件自动适配
- 自定义组件通过 CSS 变量适配
- 页面背景、卡片背景、文字颜色等
9. 配置路由过渡动画
我会配置流畅的页面切换动画：
动画效果：
- 前进：从右向左滑入（slide-left）
- 后退：从左向右滑出（slide-right）
- 支持自定义动画类型
配置方式：
- 在路由 meta 中配置 transition 字段
- 使用 Vue transition 组件
- CSS 动画实现
详细配置请参考：references/router-configuration.md
10. 配置 Mock 数据
我会创建移动端特有的 Mock 数据：
Mock 文件：
mock/user.ts：用户登录、用户信息mock/product.ts：商品列表、商品详情
数据特点：
- 支持分页（page, pageSize）
- 包含 hasMore 字段（判断是否还有更多数据）
- 使用 Mock.js 生成随机数据
- 图片使用占位图
响应格式：
{
code: 200,
data: { ... },
message: 'success'
}
详细配置请参考：references/mock-data-guide.md
11. 生成项目说明
我会创建详细的 README.md 文档，包含：
- 项目介绍和技术栈
- 快速开始（安装、运行、构建）
- 项目结构说明
- 核心功能介绍
- 配置指南（主题、Tabbar、路由等）
- 页面模板使用说明
- Mock 数据说明
- 常见问题解答
12. 验证构建并启动项目
最后，我会执行以下步骤验证项目：
npm install
npm run build
npm run dev
验证内容：
- 依赖安装成功
- TypeScript 编译无错误
- 构建成功
- 开发服务器正常启动
- 在浏览器移动端模式下测试功能
参考文档
生成项目后，你可以查看以下参考文档了解详细配置：
-
theme-customization.md - 主题定制指南
- CSS 变量配置
- Vant 主题配置
- 暗黑模式实现
-
tabbar-configuration.md - 底部导航配置
-
router-configuration.md - 路由配置指南
-
page-templates.md - 页面模板使用指南
-
viewport-adaptation.md - 视口适配指南
- postcss-px-to-viewport 配置
- 设计稿尺寸配置
- 常见适配问题
-
mock-data-guide.md - Mock 数据指南
- Mock 文件结构
- 数据格式规范
- Mock.js 使用
使用示例
示例 1：通过描述创建电商应用
调用方式：
/mobile-app-generator 创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
生成结果：
- 完整的电商移动端项目
- 4 个 Tabbar 页面（首页、分类、购物车、我的）
- 蓝色主题配色 #1989fa
- 暗黑模式切换功能
- 商品列表（下拉刷新+上拉加载）
- Mock 商品数据
示例 2：通过描述创建工具应用
调用方式：
/mobile-app-generator 创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
生成结果：
- 完整的工具类移动端项目
- 3 个 Tabbar 页面（首页、工具、我的）
- 绿色主题配色 #07c160
- 工具页面包含常用工具图标
- 暗黑模式支持
示例 3：通过截图分析创建应用
调用方式：
/mobile-app-generator [上传淘宝/美团/微信等应用截图] 参考这个布局创建移动端应用
分析过程：
- 识别底部 Tabbar 结构（有几个标签页）
- 提取每个标签页的名称和功能
- 分析主题配色方案
- 识别页面布局风格
- 确定是否使用暗色主题
生成结果：
- 根据截图自动配置 Tabbar 页面
- 匹配相似的主题配色
- 创建对应的页面结构
- 完整的可运行项目
示例 4：通过描述创建社交应用
调用方式：
/mobile-app-generator 创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
生成结果：
- 完整的社交类移动端项目
- 4 个 Tabbar 页面（首页、消息、发现、我的）
- 微信绿主题配色 #07c160
- 暗黑模式切换功能
- 动态列表和消息列表页面
- Mock 社交数据
示例 5：简单调用（会触发问答）
调用方式：
/mobile-app-generator
交互流程：
- 系统询问应用类型（电商/社交/工具/自定义）
- 系统询问主题颜色
- 系统询问是否需要暗黑模式
- 系统询问项目名称
- 自动生成项目
技术特点
1. 移动端优化
- Viewport 适配：自动适配不同屏幕尺寸
- 触摸优化：Vant 组件原生支持触摸交互
- 性能优化：路由懒加载、图片懒加载
- 网络优化：请求拦截、错误处理
2. 开发体验
- TypeScript：完整的类型支持
- 热更新：Vite 快速热更新
- Mock 数据：无需后端即可开发
- 代码规范：统一的代码风格
3. 用户体验
- 加载状态：下拉刷新、上拉加载
- 空状态：Empty 组件提示
- 错误处理：Toast 提示
- 操作反馈：Loading、Dialog 等
4. 可扩展性
- 组件复用：页面模板快速创建页面
- 逻辑复用：Composables 封装通用逻辑
- 样式复用：CSS 变量统一管理
- 路由扩展：灵活的路由配置
注意事项
- Node.js 版本：建议使用 Node.js 16+ 版本
- 浏览器兼容：支持现代浏览器和移动端浏览器
- 设计稿尺寸：默认基于 375px 设计稿，可在 postcss.config.js 中修改
- Vant 版本：使用 Vant 4.x 版本，支持 Vue 3
- Mock 数据：生产环境需要替换为真实 API
常见问题
Q: 如何修改主题颜色？ A: 修改 src/styles/variables.css 中的 CSS 变量，或在 src/main.ts 中配置 ConfigProvider。
Q: 如何添加新的 Tabbar 页面？ A: 参考 references/tabbar-configuration.md，在路由配置中添加新页面，并设置 meta.tabbar: true。
Q: 如何使用页面模板？ A: 参考 references/page-templates.md，导入对应的模板组件并传入配置。
Q: 如何修改 Viewport 适配基准？ A: 修改 postcss.config.js 中的 viewportWidth 配置。
Q: 如何禁用某些元素的 px 转换？ A: 在 postcss.config.js 的 selectorBlackList 中添加类名，或给元素添加 .ignore 类。
开始使用
推荐方式：直接描述需求
/mobile-app-generator 创建一个[应用类型]，底部导航有[页面1]、[页面2]、[页面3]，主题色用[颜色]
示例：
/mobile-app-generator 创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色/mobile-app-generator 创建一个工具应用，底部有首页、工具、我的，主题色用绿色/mobile-app-generator 创建一个社交应用，底部有首页、消息、发现、我的，主题色用微信绿
简单调用：
如果你不确定如何描述，直接调用 /mobile-app-generator，我会通过问答方式收集信息。
