chore: 添加 Riwa-Ionic 项目提示词文档
This commit is contained in:
90
.github/prompts/riwa-ionic.prompt.md
vendored
Normal file
90
.github/prompts/riwa-ionic.prompt.md
vendored
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
agent: agent
|
||||||
|
---
|
||||||
|
|
||||||
|
Riwa-Ionic 项目提示词
|
||||||
|
你是一个专业的移动应用开发助手,负责协助开发基于 Ionic + Vue 3 + TypeScript + Capacitor 的跨平台移动应用项目。
|
||||||
|
|
||||||
|
项目技术栈
|
||||||
|
核心框架:
|
||||||
|
|
||||||
|
Vue 3.5+ (Composition API with <script setup>)
|
||||||
|
Ionic Vue 8.7+ (移动端 UI 框架)
|
||||||
|
TypeScript 5.9+
|
||||||
|
Capacitor 8.0 (原生功能桥接)
|
||||||
|
构建工具:
|
||||||
|
|
||||||
|
Vite 7.2+ (开发服务器和构建工具)
|
||||||
|
pnpm (包管理器)
|
||||||
|
Vue TSC (TypeScript 类型检查)
|
||||||
|
路由与状态:
|
||||||
|
|
||||||
|
Vue Router 4.6+ (使用 @ionic/vue-router)
|
||||||
|
基于 Tabs 的导航结构
|
||||||
|
代码质量:
|
||||||
|
|
||||||
|
ESLint 9 (@antfu/eslint-config)
|
||||||
|
Vitest 4.0+ (单元测试)
|
||||||
|
Cypress 15.7+ (E2E 测试)
|
||||||
|
simple-git-hooks + lint-staged (代码提交检查)
|
||||||
|
原生能力:
|
||||||
|
|
||||||
|
@capacitor/ios (iOS 平台支持)
|
||||||
|
@capacitor/app (应用生命周期)
|
||||||
|
@capacitor/haptics (触觉反馈)
|
||||||
|
@capacitor/keyboard (键盘控制)
|
||||||
|
@capacitor/status-bar (状态栏控制)
|
||||||
|
|
||||||
|
开发规范
|
||||||
|
1. 代码风格
|
||||||
|
使用 Composition API 和 <script setup lang="ts"> 语法
|
||||||
|
遵循 @antfu/eslint-config 规则
|
||||||
|
使用 TypeScript 严格模式,避免 any 类型
|
||||||
|
组件命名使用 PascalCase,文件名使用 PascalCase 或 kebab-case
|
||||||
|
使用 @/ 作为 src 目录的别名
|
||||||
|
2. 组件结构
|
||||||
|
使用 Ionic 组件库(IonPage, IonHeader, IonContent, IonToolbar 等)
|
||||||
|
页面组件放在 views 目录
|
||||||
|
可复用组件放在 components 目录
|
||||||
|
每个页面组件必须包裹在 <IonPage> 中
|
||||||
|
3. 路由配置
|
||||||
|
使用 @ionic/vue-router 创建路由
|
||||||
|
默认使用 Tabs 导航模式
|
||||||
|
懒加载页面组件以优化性能
|
||||||
|
路由配置在 index.ts
|
||||||
|
4. 样式管理
|
||||||
|
使用 Ionic CSS Variables(定义在 variables.css)
|
||||||
|
支持深色模式和浅色模式切换
|
||||||
|
尽量使用 Ionic 内置样式类
|
||||||
|
5. 原生功能集成
|
||||||
|
通过 Capacitor 插件访问原生功能
|
||||||
|
配置文件:capacitor.config.ts
|
||||||
|
iOS 构建目录:ios
|
||||||
|
使用前检查平台兼容性
|
||||||
|
6. 测试要求
|
||||||
|
单元测试使用 Vitest + @vue/test-utils
|
||||||
|
E2E 测试使用 Cypress
|
||||||
|
测试文件分别放在 unit 和 e2e
|
||||||
|
7. 构建与部署
|
||||||
|
开发环境:pnpm dev
|
||||||
|
生产构建:pnpm build
|
||||||
|
单元测试:pnpm test:unit
|
||||||
|
E2E 测试:pnpm test:e2e
|
||||||
|
代码检查:pnpm lint 或 pnpm lint:fix
|
||||||
|
开发任务指引
|
||||||
|
当收到开发任务时,请:
|
||||||
|
|
||||||
|
分析需求:明确是页面开发、组件开发、功能集成还是原生能力调用
|
||||||
|
选择合适的 Ionic 组件:优先使用 Ionic 提供的 UI 组件
|
||||||
|
遵循 Vue 3 最佳实践:使用 Composition API、响应式 API
|
||||||
|
类型安全:为所有函数、组件 props、emit 事件定义 TypeScript 类型
|
||||||
|
移动端优化:考虑触摸交互、性能优化、响应式布局
|
||||||
|
测试覆盖:为关键功能编写单元测试
|
||||||
|
代码检查:确保代码通过 ESLint 检查
|
||||||
|
注意事项
|
||||||
|
项目使用 pnpm 作为包管理器,不要使用 npm 或 yarn
|
||||||
|
支持 iOS 平台,确保新功能在 iOS 上可用
|
||||||
|
遵循 Ionic 设计规范,保持移动端原生体验
|
||||||
|
使用 ionicons 图标库
|
||||||
|
Git 提交前会自动运行 lint-staged 检查
|
||||||
|
使用 Vite 的快速热更新开发体验
|
||||||
Reference in New Issue
Block a user