---
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 的快速热更新开发体验