بنقرة واحدة
fm-store-generator
// 为 Fantastic-mobile 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能:多个页面需要共享数据、全局状态管理、数据需要持久化(刷新后还在)、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢",也应触发此技能。触发关键词:创建 store、全局状态、状态管理、pinia、持久化、共享数据。
// 为 Fantastic-mobile 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能:多个页面需要共享数据、全局状态管理、数据需要持久化(刷新后还在)、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢",也应触发此技能。触发关键词:创建 store、全局状态、状态管理、pinia、持久化、共享数据。
管理和配置 Fantastic-mobile 框架设置。当用户提到以下任何需求时必须使用此技能:开启/关闭权限功能、哀悼模式;切换暗色/亮色/跟随系统颜色方案、调整圆角、启用色弱模式;配置顶部导航栏(navbar)启用状态;配置底部标签栏(tabbar)启用状态和导航菜单列表;调整进度条、返回顶部;设置底部版权信息;以及任何涉及 apps/*/src/settings/index.ts 的修改。
优化 Vue 页面,用 Fantastic-mobile 框架内建组件(src/ui/components/)替换自定义实现和原生 HTML。当用户说:'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FmCard/FmModal/FmButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/加载',即使用户只是说'看看这个页面能不能改进'也应触发此技能。
为 Fantastic-mobile 框架创建和定制主题配色方案,始终同时生成明色(light)和暗色(dark)两套主题。当用户提到以下任何需求时必须使用此技能:换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉("清新"、"沉稳"、"科技感")或提供一个颜色值("#2563EB"),也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。
| name | fm-store-generator |
| description | 为 Fantastic-mobile 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能:多个页面需要共享数据、全局状态管理、数据需要持久化(刷新后还在)、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢",也应触发此技能。触发关键词:创建 store、全局状态、状态管理、pinia、持久化、共享数据。 |
本项目是 monorepo 架构。在执行任何文件读写操作之前,必须先确认目标应用:
ls apps/ 列出所有可用应用严格规则:如果用户没有在请求中明确说明目标应用(例如"在 example 应用中"、"apps/core"),则必须提问,不得自行猜测或默认选择任何应用。
后续所有文件路径以 apps/<app>/ 为根,其中 <app> 为用户确认的应用名称。
apps/<app>/src/store/modules/ (业务 store)defineStore + setup 函数)unplugin-auto-import 自动导入,组件中无需手动 importpinia-plugin-persistedstate v4,配置 persist: { pick: [...] }详细模板和示例见 references/store-patterns.md
先收集信息再生成代码,因为 store 的字段结构、持久化需求、异步 action 直接决定代码骨架——跳过这步会生成空壳,用户还要大量修改。
向用户提问(可合并为一次):
apps/<app>/src/store/modules/ — 业务 store(推荐)apps/<app>/src/store/modules/app/ — 框架级 store(仅框架内部使用)根据 Step 1 的回答,继续询问:
汇总用户的回答,展示将要生成的内容摘要,确认后再写入文件。
| 类型 | Store ID | 函数名 | 文件名 |
|---|---|---|---|
| 业务 store | camelCase | use<Name>Store | <name>.ts |
| 框架 store | app<Name> | useApp<Name>Store | <name>.ts |
示例:
cart,函数: useCartStore,文件: apps/<app>/src/store/modules/cart.tsnotification,函数: useNotificationStore,文件: apps/<app>/src/store/modules/notification.tsStore 文件创建完成后,告知用户:
unplugin-auto-import 已自动处理const xxxStore = useXxxStore()useXxxStore(pinia)