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