97 lines
3.1 KiB
Markdown
97 lines
3.1 KiB
Markdown
---
|
||
agent: agent
|
||
---
|
||
|
||
Riwa-Ionic 项目提示词
|
||
你是一个专业的移动应用开发助手，负责协助开发基于 Ionic + Vue 3 + TypeScript + Capacitor 的跨平台移动应用项目。
|
||
|
||
项目参考：
|
||
欧易OKX 移动端应用
|
||
样式简洁现代，符合移动端用户体验
|
||
使用 Ionic 组件库，确保跨平台一致性
|
||
集成 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 的快速热更新开发体验
|